From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- .../index.html | 24 - .../index.html | 87 - .../index.html | 229 -- .../index.html | 161 - .../index.html" | 54 - .../index.html | 102 - .../index.html" | 51 - .../index.html" | 54 - .../index.html | 39 - files/es/building_an_extension/index.html | 380 --- .../es/cadenas_del_user_agent_de_gecko/index.html | 55 - files/es/code_snippets/index.html | 5 - .../pesta\303\261as_del_navegador/index.html" | 13 - files/es/columnas_con_css-3/index.html | 68 - files/es/compilar_e_instalar/index.html | 73 - .../index.html | 81 - files/es/conflicting/glossary/doctype/index.html | 7 + .../cascade_and_inheritance/index.html | 125 + .../learn/css/building_blocks/index.html | 335 ++ .../learn/css/building_blocks/selectors/index.html | 416 +++ .../building_blocks/values_and_units/index.html | 364 +++ .../es/conflicting/learn/css/css_layout/index.html | 384 +++ .../learn/css/first_steps/how_css_works/index.html | 107 + .../index.html | 128 + .../index.html | 146 + .../conflicting/learn/css/first_steps/index.html | 94 + .../learn/css/styling_text/fundamentals/index.html | 156 + files/es/conflicting/learn/forms/index.html | 366 +++ .../getting_started/index.html | 66 + .../video_and_audio_content/index.html | 287 ++ files/es/conflicting/learn/index.html | 11 + .../learn/javascript/objects/index.html | 385 +++ .../mdn/contribute/getting_started/index.html | 18 + files/es/conflicting/mdn/tools/index.html | 14 + files/es/conflicting/mdn/yari/index.html | 16 + .../index.html | 50 + files/es/conflicting/mozilla/add-ons/index.html | 380 +++ .../tools/about_colon_debugging/index.html | 11 + files/es/conflicting/tools/performance/index.html | 105 + .../web/api/canvas_api/tutorial/index.html | 162 + .../web/api/crypto/getrandomvalues/index.html | 111 + .../web/api/document_object_model/index.html | 24 + .../index.html | 22 + .../index.html | 87 + .../index.html | 76 + .../es/conflicting/web/api/geolocation/index.html | 107 + .../web/api/html_drag_and_drop_api/index.html | 11 + files/es/conflicting/web/api/index.html | 80 + .../conflicting/web/api/indexeddb_api/index.html | 145 + files/es/conflicting/web/api/node/index.html | 34 + files/es/conflicting/web/api/push_api/index.html | 433 +++ files/es/conflicting/web/api/url/index.html | 102 + .../conflicting/web/api/web_storage_api/index.html | 303 ++ files/es/conflicting/web/api/webrtc_api/index.html | 78 + .../conflicting/web/api/websockets_api/index.html | 37 + .../web/api/window/localstorage/index.html | 136 + .../web/api/windoworworkerglobalscope/index.html | 109 + .../index.html | 119 + .../index.html | 144 + files/es/conflicting/web/css/@viewport/index.html | 126 + .../index.html | 123 + .../web/css/_colon_placeholder-shown/index.html | 123 + .../index.html | 112 + .../web/css/_doublecolon_placeholder/index.html | 109 + .../index.html | 86 + .../basic_concepts_of_flexbox/index.html | 376 +++ .../typical_use_cases_of_flexbox/index.html | 191 ++ files/es/conflicting/web/css/cursor/index.html | 11 + .../es/conflicting/web/css/font-variant/index.html | 11 + files/es/conflicting/web/css/width/index.html | 50 + files/es/conflicting/web/guide/index.html | 60 + files/es/conflicting/web/guide/mobile/index.html | 18 + files/es/conflicting/web/html/element/index.html | 599 ++++ .../web/html/global_attributes/index.html | 27 + .../html/global_attributes/spellcheck/index.html | 73 + .../web/http/basics_of_http/mime_types/index.html | 47 + files/es/conflicting/web/http/csp/index.html | 39 + .../index.html | 57 + .../headers/content-security-policy/index.html | 709 +++++ .../global_objects/arraybuffer/index.html | 69 + .../reference/global_objects/date/index.html | 201 ++ .../reference/global_objects/error/index.html | 154 + .../reference/global_objects/function/index.html | 65 + .../reference/global_objects/map/index.html | 135 + .../reference/global_objects/number/index.html | 16 + .../reference/global_objects/object/index.html | 195 ++ .../reference/global_objects/promise/index.html | 69 + .../reference/global_objects/rangeerror/index.html | 131 + .../reference/global_objects/string/index.html | 118 + .../global_objects/syntaxerror/index.html | 133 + .../reference/global_objects/weakmap/index.html | 143 + .../reference/lexical_grammar/index.html | 99 + .../web/javascript/reference/operators/index.html | 315 ++ .../reference/operators/spread_syntax/index.html | 220 ++ .../index.html | 262 ++ .../index.html | 722 +++++ .../index.html | 462 +++ .../index.html | 296 ++ .../reference/statements/switch/index.html | 121 + files/es/conflicting/web/media/formats/index.html | 281 ++ files/es/conflicting/web/opensearch/index.html | 54 + .../web/progressive_web_apps/index.html | 45 + .../progressive_web_apps/introduction/index.html | 63 + .../using_custom_elements/index.html | 182 ++ .../index.html" | 73 - .../index.html | 154 - .../interior_del_componente/index.html" | 216 -- .../prefacio/index.html" | 39 - "files/es/creando_una_extensi\303\263n/index.html" | 236 -- .../index.html" | 580 ---- files/es/css/media_queries/index.html | 828 ----- files/es/css/using_css_gradients/index.html | 386 --- "files/es/css_din\303\241mico/index.html" | 339 --- files/es/desarrollando_mozilla/index.html | 16 - files/es/desarrollo_web/index.html | 60 - .../index.html" | 56 - files/es/dhtml/index.html | 47 - .../index.html | 49 - .../index.html" | 5 - files/es/dibujar_texto_usando_canvas/index.html | 67 - files/es/dom/almacenamiento/index.html | 303 -- files/es/dom/document.cookie/index.html | 119 - files/es/dom/index.html | 87 - .../ejemplo/index.html | 415 --- .../index.html | 228 -- files/es/dom/touch_events/index.html | 292 -- files/es/dom_inspector/index.html | 29 - .../drag_and_drop/drag_and_drop_archivo/index.html | 117 - files/es/dragdrop/drag_and_drop/index.html | 57 - files/es/dragdrop/index.html | 11 - .../es/dragdrop/recommended_drag_types/index.html | 144 - .../index.html" | 698 ----- .../etiquetas_audio_y_video_en_firefox/index.html | 46 - .../index.html" | 31 - files/es/faq_incrustando_mozilla/index.html | 70 - .../es/firefox_1.5_para_desarrolladores/index.html | 164 - .../es/firefox_19_para_desarrolladores/index.html | 66 - files/es/firefox_2_para_desarrolladores/index.html | 157 - .../es/firefox_3.5_para_desarrolladores/index.html | 231 -- files/es/firefox_3_para_desarrolladores/index.html | 283 -- .../introduction_to_extensions/index.html | 159 - .../index.html | 78 - .../index.html | 43 - "files/es/fragmentos_de_c\303\263digo/index.html" | 13 - files/es/funciones/index.html | 8 - files/es/games/herramients/asm.js/index.html | 29 - files/es/games/herramients/index.html | 46 - files/es/games/introduccion/index.html | 167 - .../index.html" | 108 - files/es/games/introduction/index.html | 167 + .../index.html | 108 + .../publishing_games/game_monetization/index.html | 100 + .../monetizaci\303\263n_de_los_juegos/index.html" | 100 - files/es/games/tools/asm.js/index.html | 29 + files/es/games/tools/index.html | 46 + .../2d_breakout_game_phaser/botones/index.html | 106 - .../bounce_off_the_walls/index.html | 51 + .../2d_breakout_game_phaser/buttons/index.html | 106 + .../rebotar_en_las_paredes/index.html | 51 - .../bounce_off_the_walls/index.html | 101 + .../build_the_brick_field/index.html | 126 + .../collision_detection/index.html | 128 + .../create_the_canvas_and_draw_on_it/index.html | 108 + .../finishing_up/index.html | 95 + .../game_over/index.html | 75 + .../2d_breakout_game_pure_javascript/index.html | 52 + .../mouse_controls/index.html | 53 + .../move_the_ball/index.html | 154 + .../paddle_and_keyboard_controls/index.html | 130 + .../track_the_score_and_win/index.html | 92 + .../index.html | 437 +++ files/es/games/tutorials/index.html | 10 + .../bounce_off_the_walls/index.html | 101 - .../construye_grupo_bloques/index.html | 126 - .../control_pala_y_teclado/index.html | 130 - .../controles_raton/index.html | 53 - .../create_the_canvas_and_draw_on_it/index.html | 108 - .../deteccion_colisiones/index.html | 128 - .../fin_del_juego/index.html | 75 - .../index.html | 52 - .../mueve_la_bola/index.html | 154 - .../terminando/index.html | 95 - .../track_the_score_and_win/index.html | 92 - .../index.html | 437 --- files/es/games/workflows/index.html | 10 - "files/es/generaci\303\263n_de_guids/index.html" | 61 - files/es/glossary/algorithm/index.html | 9 + files/es/glossary/algoritmo/index.html | 9 - files/es/glossary/argument/index.html | 20 + files/es/glossary/argumento/index.html | 20 - .../index.html" | 18 - files/es/glossary/array/index.html | 41 + files/es/glossary/arreglos/index.html | 41 - files/es/glossary/asynchronous/index.html | 31 + "files/es/glossary/as\303\255ncrono/index.html" | 31 - files/es/glossary/atributo/index.html | 15 - files/es/glossary/atributo_global/index.html | 27 - files/es/glossary/attribute/index.html | 15 + files/es/glossary/base64/index.html | 345 +++ files/es/glossary/breadcrumb/index.html | 17 + files/es/glossary/cabecera_general/index.html | 8 - files/es/glossary/cache/index.html | 17 + "files/es/glossary/cach\303\251/index.html" | 17 - files/es/glossary/call_stack/index.html | 92 + files/es/glossary/caracter/index.html | 22 - files/es/glossary/card_sorting/index.html | 18 + files/es/glossary/character/index.html | 22 + files/es/glossary/character_set/index.html | 31 + files/es/glossary/cia/index.html | 17 + files/es/glossary/cid/index.html | 17 - files/es/glossary/cifrado/index.html | 32 - files/es/glossary/cipher/index.html | 32 + files/es/glossary/ciphertext/index.html | 19 + .../index.html" | 18 - files/es/glossary/clausura/index.html | 22 - files/es/glossary/clave/index.html | 19 - files/es/glossary/closure/index.html | 22 + files/es/glossary/cms/index.html | 18 + files/es/glossary/coercion/index.html | 22 - .../es/glossary/conjunto_de_caracteres/index.html | 31 - files/es/glossary/constant/index.html | 20 + files/es/glossary/constante/index.html | 20 - .../es/glossary/criptoan\303\241lisis/index.html" | 21 - "files/es/glossary/criptograf\303\255a/index.html" | 21 - files/es/glossary/cryptanalysis/index.html | 21 + files/es/glossary/cryptography/index.html | 21 + files/es/glossary/css_preprocessor/index.html | 21 + files/es/glossary/data_structure/index.html | 18 + files/es/glossary/decryption/index.html | 33 + files/es/glossary/descifrado/index.html | 33 - files/es/glossary/dhtml/index.html | 47 + files/es/glossary/domain_name/index.html | 15 + files/es/glossary/dtd/index.html | 7 - files/es/glossary/dynamic_typing/index.html | 24 + files/es/glossary/elemento/index.html | 7 - "files/es/glossary/encriptaci\303\263n/index.html" | 23 - files/es/glossary/encryption/index.html | 23 + files/es/glossary/entidad/index.html | 60 - files/es/glossary/entity/index.html | 60 + files/es/glossary/espacio_en_blanco/index.html | 45 - files/es/glossary/estructura_de_datos/index.html | 18 - files/es/glossary/first-class_function/index.html | 111 + files/es/glossary/forbidden_header_name/index.html | 47 + .../glossary/funcion_de_primera_clase/index.html | 111 - "files/es/glossary/funci\303\263n/index.html" | 91 - files/es/glossary/function/index.html | 91 + files/es/glossary/general_header/index.html | 8 + files/es/glossary/hilo_principal/index.html | 30 - files/es/glossary/identificador/index.html | 39 - files/es/glossary/identifier/index.html | 39 + files/es/glossary/immutable/index.html | 23 + .../glossary/information_architecture/index.html | 18 + files/es/glossary/inmutable/index.html | 23 - files/es/glossary/iu/index.html | 19 - files/es/glossary/key/index.html | 19 + files/es/glossary/localization/index.html | 16 + files/es/glossary/main_thread/index.html | 30 + files/es/glossary/metadata/index.html | 24 + files/es/glossary/metadato/index.html | 24 - files/es/glossary/method/index.html | 28 + files/es/glossary/miga-de-pan/index.html | 17 - "files/es/glossary/m\303\251todo/index.html" | 28 - files/es/glossary/nombre_de_dominio/index.html | 15 - .../nombre_de_encabezado_prohibido/index.html | 47 - files/es/glossary/number/index.html | 24 + files/es/glossary/numero/index.html | 24 - files/es/glossary/object/index.html | 13 + files/es/glossary/objecto/index.html | 13 - files/es/glossary/operador/index.html | 17 - files/es/glossary/operand/index.html | 15 + files/es/glossary/operando/index.html | 15 - files/es/glossary/operator/index.html | 17 + files/es/glossary/pila_llamadas/index.html | 92 - files/es/glossary/plaintext/index.html | 14 + files/es/glossary/preflight_peticion/index.html | 33 - files/es/glossary/preflight_request/index.html | 33 + files/es/glossary/preprocesador_css/index.html | 21 - files/es/glossary/primitive/index.html | 125 + files/es/glossary/primitivo/index.html | 125 - files/es/glossary/property/index.html | 11 + files/es/glossary/propiedad/index.html | 11 - files/es/glossary/pseudo-clase/index.html | 20 - files/es/glossary/pseudo-class/index.html | 20 + files/es/glossary/pseudocode/index.html | 18 + "files/es/glossary/pseudoc\303\263digo/index.html" | 18 - files/es/glossary/recursion/index.html | 18 + "files/es/glossary/recursi\303\263n/index.html" | 18 - files/es/glossary/safe/index.html | 40 + files/es/glossary/scm/index.html | 20 + files/es/glossary/scv/index.html | 20 - files/es/glossary/seguro/index.html | 40 - files/es/glossary/sentencias/index.html | 23 - files/es/glossary/sincronico/index.html | 24 - .../glossary/sistema_gestion_contenidos/index.html | 18 - files/es/glossary/speculative_parsing/index.html | 34 + files/es/glossary/statement/index.html | 23 + files/es/glossary/static_typing/index.html | 18 + files/es/glossary/synchronous/index.html | 24 + files/es/glossary/textocifrado/index.html | 19 - files/es/glossary/textosimple/index.html | 14 - .../es/glossary/tipado_din\303\241mico/index.html" | 24 - .../index.html" | 18 - files/es/glossary/type_coercion/index.html | 22 + files/es/glossary/ui/index.html | 19 + files/es/glossary/validador/index.html | 19 - files/es/glossary/validator/index.html | 19 + files/es/glossary/valor/index.html | 19 - files/es/glossary/value/index.html | 19 + files/es/glossary/whitespace/index.html | 45 + files/es/glossary/xform/index.html | 14 - files/es/glossary/xforms/index.html | 14 + files/es/glossary/xhtml/index.html | 33 + .../index.html" | 23 - .../index.html" | 192 -- .../index.html" | 176 -- files/es/herramientas/index.html | 13 - files/es/how_to_create_a_dom_tree/index.html | 130 - files/es/html/elemento/datalist/index.html | 7 - files/es/html/elemento/form/index.html | 5 - files/es/html/elemento/section/index.html | 177 -- files/es/html/html5/forms_in_html5/index.html | 118 - .../es/html/html5/formularios_en_html5/index.html | 44 - .../es/html/html5/html5_lista_elementos/index.html | 599 ---- files/es/html/html5/html5_parser/index.html | 64 - files/es/html/html5/index.html | 199 -- .../html5/introducci\303\263n_a_html5/index.html" | 16 - .../html5/validacion_de_restricciones/index.html | 345 --- files/es/incrustando_mozilla/comunidad/index.html | 7 - files/es/indexeddb/index.html | 145 - .../index.html" | 33 - .../qu\303\251_es_la_accesibilidad/index.html" | 211 -- .../accessibility/what_is_accessibility/index.html | 211 ++ files/es/learn/aprender_y_obtener_ayuda/index.html | 321 -- files/es/learn/codificacion-scripting/index.html | 11 - .../common_questions/common_web_layouts/index.html | 115 + .../common_questions/cuanto_cuesta/index.html | 162 - .../dise\303\261os_web_comunes/index.html" | 115 - .../how_much_does_it_cost/index.html | 162 + .../que_es_un_servidor_web/index.html | 120 - .../que_software_necesito/index.html | 226 -- .../qu\303\251_es_una_url/index.html" | 152 - .../common_questions/using_github_pages/index.html | 103 + .../common_questions/what_is_a_url/index.html | 152 + .../what_is_a_web_server/index.html | 120 + .../what_software_do_i_need/index.html | 226 ++ files/es/learn/como_contribuir/index.html | 88 - .../backgrounds_and_borders/index.html | 306 ++ .../building_blocks/cascada_y_herencia/index.html | 333 -- .../cascade_and_inheritance/index.html | 333 ++ .../contenido_desbordado/index.html | 123 - .../css/building_blocks/debugging_css/index.html | 198 ++ .../css/building_blocks/depurar_el_css/index.html | 198 -- .../dimensionar_elementos_en_css/index.html | 129 - .../building_blocks/el_modelo_de_caja/index.html | 343 --- .../css/building_blocks/fondos_y_bordes/index.html | 306 -- .../fundamental_css_comprehension/index.html | 117 + .../handling_different_text_directions/index.html | 165 + .../images_media_form_elements/index.html | 193 ++ .../index.html" | 193 -- .../index.html | 165 - .../building_blocks/overflowing_content/index.html | 123 + .../selectores_css/combinadores/index.html | 111 - .../css/building_blocks/selectores_css/index.html | 223 -- .../pseudo-clases_y_pseudo-elementos/index.html | 397 --- .../selectores_de_atributos/index.html | 154 - .../selectores_de_tipo_clase_e_id/index.html | 117 - .../selectors/attribute_selectors/index.html | 154 + .../selectors/combinators/index.html | 111 + .../learn/css/building_blocks/selectors/index.html | 223 ++ .../pseudo-classes_and_pseudo-elements/index.html | 397 +++ .../type_class_and_id_selectors/index.html | 117 + .../building_blocks/sizing_items_in_css/index.html | 129 + .../css/building_blocks/the_box_model/index.html | 343 +++ .../valores_y_unidades_css/index.html | 392 --- .../building_blocks/values_and_units/index.html | 392 +++ .../css_layout/dise\303\261o_receptivo/index.html" | 324 -- .../learn/css/css_layout/flujo_normal/index.html | 95 - .../css/css_layout/introducci\303\263n/index.html" | 701 ----- .../learn/css/css_layout/introduction/index.html | 701 +++++ .../es/learn/css/css_layout/normal_flow/index.html | 95 + .../css/css_layout/responsive_design/index.html | 324 ++ .../soporte_a_navegadores_antiguos/index.html | 237 -- .../supporting_older_browsers/index.html | 237 ++ .../css/first_steps/comenzando_css/index.html | 264 -- .../css/first_steps/como_funciona_css/index.html | 156 - .../first_steps/como_se_estructura_css/index.html | 512 ---- .../css/first_steps/getting_started/index.html | 264 ++ .../first_steps/how_css_is_structured/index.html | 512 ++++ .../learn/css/first_steps/how_css_works/index.html | 156 + .../css/first_steps/qu\303\251_es_css/index.html" | 127 - .../usa_tu_nuevo_conocimiento/index.html | 100 - .../using_your_new_knowledge/index.html | 100 + .../learn/css/first_steps/what_is_css/index.html | 127 + files/es/learn/css/howto/css_faq/index.html | 118 + .../learn/css/howto/generated_content/index.html | 178 ++ files/es/learn/css/howto/index.html | 81 + .../fundamental_css_comprehension/index.html | 117 - .../learn/css/styling_text/fuentes_web/index.html | 197 -- .../es/learn/css/styling_text/web_fonts/index.html | 197 ++ .../s\303\241bercomo/generated_content/index.html" | 178 -- "files/es/learn/css/s\303\241bercomo/index.html" | 81 - files/es/learn/desarrollo_web_front-end/index.html | 201 -- .../forms/basic_native_form_controls/index.html | 326 ++ files/es/learn/forms/form_validation/index.html | 845 +++++ .../how_to_build_custom_form_controls/index.html | 786 +++++ .../forms/how_to_structure_a_web_form/index.html | 320 ++ files/es/learn/forms/html5_input_types/index.html | 276 ++ files/es/learn/forms/index.html | 118 + .../index.html | 2003 ++++++++++++ .../sending_and_retrieving_form_data/index.html | 328 ++ files/es/learn/forms/styling_web_forms/index.html | 345 +++ .../index.html | 75 + .../index.html | 87 + files/es/learn/forms/your_first_form/index.html | 305 ++ files/es/learn/front-end_web_developer/index.html | 201 ++ .../c\303\263mo_funciona_la_web/index.html" | 100 - .../dealing_with_files/index.html | 120 + .../how_the_web_works/index.html | 100 + .../instalacion_de_software_basico/index.html | 83 - .../installing_basic_software/index.html | 83 + .../la_web_y_los_estandares_web/index.html | 172 -- .../manejando_los_archivos/index.html | 120 - .../the_web_and_web_standards/index.html | 172 ++ .../cross_browser_testing/index.html | 39 - .../learn/herramientas_y_pruebas/github/index.html | 92 - files/es/learn/herramientas_y_pruebas/index.html | 58 - .../index.html | 133 - .../react_getting_started/index.html | 476 --- .../vue_primeros_pasos/index.html | 294 -- .../understanding_client-side_tools/index.html | 46 - files/es/learn/html/como/index.html | 141 - .../html/como/usando_atributos_de_datos/index.html | 75 - .../index.html | 786 ----- .../forms/how_to_structure_an_html_form/index.html | 320 -- files/es/learn/html/forms/index.html | 366 --- .../index.html | 2003 ------------ .../index.html | 75 - .../index.html | 87 - .../sending_and_retrieving_form_data/index.html | 328 -- .../learn/html/forms/styling_html_forms/index.html | 345 --- .../html/forms/the_native_form_widgets/index.html | 326 -- .../learn/html/forms/tipos_input_html5/index.html | 276 -- .../forms/validacion_formulario_datos/index.html | 845 ----- .../html/forms/your_first_html_form/index.html | 305 -- .../author_fast-loading_html_pages/index.html | 53 + files/es/learn/html/howto/index.html | 141 + .../html/howto/use_data_attributes/index.html | 75 + .../advanced_text_formatting/index.html | 695 ----- .../creating_hyperlinks/index.html | 346 --- .../introduccion_a_html/debugging_html/index.html | 171 -- .../html/introduccion_a_html/estructura/index.html | 298 -- .../index.html" | 105 - files/es/learn/html/introduccion_a_html/index.html | 77 - .../html/introduccion_a_html/iniciar/index.html | 767 ----- .../marking_up_a_letter/index.html | 88 - .../html/introduccion_a_html/metados_en/index.html | 299 -- .../index.html | 99 - .../index.html" | 72 - .../index.html | 67 - .../html/introduccion_a_html/texto/index.html | 970 ------ .../advanced_text_formatting/index.html | 695 +++++ .../creating_hyperlinks/index.html | 346 +++ .../introduction_to_html/debugging_html/index.html | 171 ++ .../document_and_website_structure/index.html | 298 ++ .../getting_started/index.html | 767 +++++ .../html_text_fundamentals/index.html | 970 ++++++ .../es/learn/html/introduction_to_html/index.html | 77 + .../marking_up_a_letter/index.html | 88 + .../structuring_a_page_of_content/index.html | 105 + .../index.html | 67 + .../index.html | 72 + .../test_your_skills_colon__links/index.html | 99 + .../the_head_metadata_in_html/index.html | 299 ++ .../index.html" | 563 ---- .../index.html | 471 --- files/es/learn/html/tablas/index.html | 34 - .../html/tablas/structuring_planet_data/index.html | 72 - files/es/learn/html/tables/advanced/index.html | 471 +++ files/es/learn/html/tables/basics/index.html | 563 ++++ files/es/learn/html/tables/index.html | 34 + .../html/tables/structuring_planet_data/index.html | 72 + .../building_blocks/bucle_codigo/index.html | 923 ------ .../build_your_own_function/index.html | 252 ++ .../construyendo_tu_propia_funcion/index.html | 252 -- .../javascript/building_blocks/eventos/index.html | 578 ---- .../javascript/building_blocks/events/index.html | 578 ++++ .../building_blocks/galeria_de_imagenes/index.html | 144 - .../building_blocks/image_gallery/index.html | 144 + .../building_blocks/looping_code/index.html | 923 ++++++ .../introducci\303\263n/index.html" | 274 -- .../client-side_web_apis/introduction/index.html | 274 ++ .../generador_de_historias_absurdas/index.html | 147 - .../first_steps/matem\303\241ticas/index.html" | 443 --- .../learn/javascript/first_steps/math/index.html | 443 +++ .../index.html | 122 - .../qu\303\251_es_javascript/index.html" | 436 --- .../first_steps/silly_story_generator/index.html | 147 + .../test_your_skills_colon__strings/index.html | 122 + .../first_steps/what_is_javascript/index.html | 436 +++ .../index.html" | 301 -- .../objects/object_building_practice/index.html | 301 ++ .../es/learn/learning_and_getting_help/index.html | 321 ++ .../configuring_server_mime_types/index.html | 81 + .../django/introducci\303\263n/index.html" | 282 -- .../server-side/django/introduction/index.html | 282 ++ .../first_steps/client-server_overview/index.html | 334 ++ files/es/learn/server-side/first_steps/index.html | 47 + .../first_steps/introduction/index.html | 192 ++ .../first_steps/web_frameworks/index.html | 306 ++ .../first_steps/website_security/index.html | 177 ++ .../es/learn/server-side/primeros_pasos/index.html | 47 - .../primeros_pasos/introducci\303\263n/index.html" | 192 -- .../primeros_pasos/seguridad_sitios_web/index.html | 177 -- .../vision_general_cliente_servidor/index.html | 334 -- .../primeros_pasos/web_frameworks/index.html | 306 -- .../client-side_javascript_frameworks/index.html | 133 + .../react_getting_started/index.html | 476 +++ .../vue_getting_started/index.html | 294 ++ .../cross_browser_testing/index.html | 39 + files/es/learn/tools_and_testing/github/index.html | 92 + files/es/learn/tools_and_testing/index.html | 58 + .../understanding_client-side_tools/index.html | 46 + files/es/learn/using_github_pages/index.html | 103 - "files/es/localizaci\303\263n/index.html" | 16 - files/es/localizar_con_narro/index.html | 62 - files/es/mdn/at_ten/index.html | 39 + files/es/mdn/comunidad/index.html | 54 - files/es/mdn/contribute/community/index.html | 118 - .../contribute/howto/crear_cuenta_mdn/index.html | 32 - .../plantilla_propiedad/index.html | 120 - .../howto/etiquetas_paginas_javascript/index.html | 83 - .../howto/remover_macros_experimentales/index.html | 48 - .../contribute/howto/revision_editorial/index.html | 54 - .../contribute/howto/revision_tecnica/index.html | 44 - .../howto/set_the_summary_for_a_page/index.html | 118 - .../index.html" | 78 - .../index.html | 106 - files/es/mdn/contribute/procesos/index.html | 14 - files/es/mdn/contribute/processes/index.html | 14 + files/es/mdn/contribute/tareas/index.html | 18 - files/es/mdn/guidelines/content_blocks/index.html | 47 - .../convenciones_y_definiciones/index.html | 201 -- .../guidelines/conventions_definitions/index.html | 201 ++ files/es/mdn/guidelines/css_style_guide/index.html | 47 + .../index.html" | 146 - .../mdn/guidelines/writing_style_guide/index.html | 146 + .../kuma/contributing/getting_started/index.html | 16 - files/es/mdn/kuma/contributing/index.html | 50 - files/es/mdn/kuma/index.html | 55 - .../mdn/structures/compatibility_tables/index.html | 476 +++ .../mdn/structures/ejemplos_ejecutables/index.html | 243 -- files/es/mdn/structures/live_samples/index.html | 243 ++ files/es/mdn/structures/macros/other/index.html | 181 ++ files/es/mdn/structures/macros/otras/index.html | 181 -- .../structures/tablas_de_compatibilidad/index.html | 476 --- .../tools/introduction_to_kumascript/index.html | 683 ----- files/es/mdn/tools/kumascript/index.html | 683 +++++ files/es/mdn/tools/page_regeneration/index.html | 32 - files/es/mdn/tools/template_editing/index.html | 14 - files/es/mdn/user_guide/index.html | 14 - files/es/mdn/yari/index.html | 55 + files/es/mdn_en_diez/index.html | 39 - files/es/mejoras_dom_en_firefox_3/index.html | 35 - files/es/mejoras_svg_en_firefox_3/index.html | 62 - files/es/mejoras_xul_en_firefox_3/index.html | 109 - .../index.html | 1067 ------- .../modo_casi_est\303\241ndar_de_gecko/index.html" | 46 - .../anatomia_de_una_webextension/index.html | 120 - .../anatomy_of_a_webextension/index.html | 120 + .../webextensions/depuraci\303\263n/index.html" | 189 -- .../packaging_and_installation/index.html | 91 - .../porting_from_google_chrome/index.html | 22 - .../add-ons/webextensions/prerequisites/index.html | 17 + .../add-ons/webextensions/prerequisitos/index.html | 17 - .../publishing_your_webextension/index.html | 105 - .../que_son_las_webextensions/index.html | 59 - .../tu_primera_webextension/index.html | 160 - .../add-ons/webextensions/tutorial/index.html | 459 --- .../user_interface/accion_navegador/index.html | 50 - .../user_interface/browser_action/index.html | 50 + .../what_are_webextensions/index.html | 59 + .../your_first_webextension/index.html | 160 + .../your_second_webextension/index.html | 459 +++ .../developer_guide/build_instructions/index.html | 73 + .../developer_guide/mozilla_build_faq/index.html | 343 +++ .../index.html" | 343 --- .../developer_guide/source_code/cvs/index.html | 149 + .../index.html" | 149 - files/es/mozilla/firefox/releases/1.5/index.html | 164 + files/es/mozilla/firefox/releases/19/index.html | 66 + .../2/adding_feed_readers_to_firefox/index.html | 51 + files/es/mozilla/firefox/releases/2/index.html | 157 + .../firefox/releases/2/security_changes/index.html | 13 + files/es/mozilla/firefox/releases/3.5/index.html | 231 ++ .../firefox/releases/3/dom_improvements/index.html | 35 + .../firefox/releases/3/full_page_zoom/index.html | 46 + files/es/mozilla/firefox/releases/3/index.html | 283 ++ .../releases/3/notable_bugs_fixed/index.html | 39 + .../firefox/releases/3/svg_improvements/index.html | 62 + .../firefox/releases/3/templates/index.html | 27 + .../releases/3/updating_extensions/index.html | 161 + .../3/updating_web_applications/index.html | 87 + .../3/xul_improvements_in_firefox_3/index.html | 109 + "files/es/m\303\263dulos_javascript/index.html" | 23 - files/es/nsdirectoryservice/index.html | 11 - .../index.html | 229 ++ .../index.html" | 54 + files/es/orphaned/code_snippets/index.html | 5 + .../pesta\303\261as_del_navegador/index.html" | 13 + .../interior_del_componente/index.html" | 216 ++ .../prefacio/index.html" | 39 + .../creando_una_extensi\303\263n/index.html" | 236 ++ .../index.html" | 580 ++++ "files/es/orphaned/css_din\303\241mico/index.html" | 339 +++ files/es/orphaned/desarrollando_mozilla/index.html | 16 + .../index.html" | 56 + .../index.html | 49 + .../index.html" | 5 + .../index.html" | 698 +++++ .../etiquetas_audio_y_video_en_firefox/index.html | 46 + .../index.html" | 31 + .../es/orphaned/faq_incrustando_mozilla/index.html | 70 + .../introduction_to_extensions/index.html | 159 + .../index.html | 78 + .../index.html | 43 + .../fragmentos_de_c\303\263digo/index.html" | 13 + files/es/orphaned/funciones/index.html | 8 + .../generaci\303\263n_de_guids/index.html" | 61 + files/es/orphaned/glossary/elemento/index.html | 7 + .../index.html" | 23 + .../index.html" | 192 ++ .../index.html" | 176 ++ files/es/orphaned/herramientas/index.html | 13 + .../es/orphaned/html/elemento/datalist/index.html | 7 + files/es/orphaned/html/elemento/form/index.html | 5 + files/es/orphaned/html/elemento/section/index.html | 177 ++ .../incrustando_mozilla/comunidad/index.html | 7 + .../index.html" | 33 + .../es/orphaned/learn/how_to_contribute/index.html | 88 + .../learn/html/forms/html5_updates/index.html | 44 + files/es/orphaned/localizar_con_narro/index.html | 62 + files/es/orphaned/mdn/community/index.html | 54 + .../mdn/community/working_in_community/index.html | 118 + .../howto/create_an_mdn_account/index.html | 32 + .../howto/do_a_technical_review/index.html | 44 + .../howto/do_an_editorial_review/index.html | 54 + .../property_template/index.html | 120 + .../howto/remove_experimental_macros/index.html | 48 + .../howto/set_the_summary_for_a_page/index.html | 118 + .../howto/tag_javascript_pages/index.html | 83 + .../howto/use_navigation_sidebars/index.html | 78 + .../index.html | 106 + .../mdn/tools/page_regeneration/index.html | 32 + .../orphaned/mdn/tools/template_editing/index.html | 14 + .../index.html | 1067 +++++++ .../modo_casi_est\303\241ndar_de_gecko/index.html" | 46 + .../add-ons/webextensions/debugging/index.html | 189 ++ .../package_your_extension_/index.html | 105 + .../porting_a_google_chrome_extension/index.html | 22 + .../temporary_installation_in_firefox/index.html | 91 + .../orphaned/m\303\263dulos_javascript/index.html" | 23 + files/es/orphaned/nsdirectoryservice/index.html | 11 + .../participar_en_el_proyecto_mozilla/index.html | 10 + .../index.html" | 5 + .../index.html" | 41 + .../index.html" | 36 + .../index.html | 161 + files/es/orphaned/referencia_de_xul/index.html | 317 ++ .../index.html" | 143 + files/es/orphaned/storage/index.html | 252 ++ .../tools/add-ons/dom_inspector/index.html | 29 + files/es/orphaned/tools/add-ons/index.html | 17 + .../index.html | 90 + .../traducir_una_extensi\303\263n/index.html" | 161 + .../index.html | 377 +++ .../index.html" | 15 + files/es/orphaned/usar_web_workers/index.html | 260 ++ .../index.html | 236 ++ .../index.html" | 92 + files/es/orphaned/vigilar_plugins/index.html | 110 + .../checking_authenticity_with_password/index.html | 30 + .../web/css/comenzando_(tutorial_css)/index.html | 40 + files/es/orphaned/web/css/como_iniciar/index.html | 5 + .../es/orphaned/web/css/primeros_pasos/index.html | 39 + files/es/orphaned/web/css/rtl/index.html | 22 + .../html/introduction_alhtml_clone/index.html | 172 ++ .../orphaned/web/html/element/command/index.html | 152 + .../orphaned/web/html/element/element/index.html | 110 + .../etiqueta_personalizada_html5/index.html | 46 + .../html/elemento/tipos_de_elementos/index.html | 119 + .../web/html/global_attributes/dropzone/index.html | 99 + .../global_objects/array/prototype/index.html | 188 ++ .../orphaned/web/svg/svg_en_firefox_1.5/index.html | 60 + .../es/orphaned/xpinstall_api_reference/index.html | 132 + .../participar_en_el_proyecto_mozilla/index.html | 10 - files/es/plantillas_en_firefox_3/index.html | 27 - .../index.html" | 5 - .../index.html" | 41 - .../index.html" | 36 - .../index.html | 161 - files/es/referencia_de_xul/index.html | 317 -- .../c\303\263mo_espacioenblanco/index.html" | 476 --- .../es/referencia_dom_de_gecko/ejemplos/index.html | 367 --- .../es/referencia_dom_de_gecko/eventos/index.html | 72 - files/es/referencia_dom_de_gecko/index.html | 91 - .../introducci\303\263n/index.html" | 248 -- .../index.html | 50 - .../es/referencia_dom_de_gecko/prefacio/index.html | 76 - .../index.html | 411 --- files/es/seguridad_en_firefox_2/index.html | 13 - .../index.html" | 143 - files/es/server-sent_events/index.html | 99 - .../utilizando_server_sent_events_sse/index.html | 231 -- files/es/storage/index.html | 252 -- files/es/svg_en_firefox/index.html | 847 ----- .../index.html | 47 - files/es/tools/accesos_directos/index.html | 1266 -------- files/es/tools/add-ons/index.html | 17 - .../debugger/how_to/use_a_source_map/index.html | 36 + .../how_to/uso_de_un_mapa_fuente/index.html | 36 - "files/es/tools/desempe\303\261o/index.html" | 91 - .../es/tools/desempe\303\261o/ui_tour/index.html" | 134 - files/es/tools/editor_audio_web/index.html | 31 - files/es/tools/editor_estilo/index.html | 101 - files/es/tools/keyboard_shortcuts/index.html | 1266 ++++++++ files/es/tools/monitor_de_red/index.html | 189 -- files/es/tools/network_monitor/index.html | 189 ++ .../es/tools/page_inspector/3-pane_mode/index.html | 69 + .../tools/page_inspector/3er-panel_modo/index.html | 69 - .../how_to/abrir_el_inspector/index.html | 22 - .../index.html | 47 - .../how_to/examinar_y_editar_html/index.html | 364 --- .../how_to/examine_and_edit_html/index.html | 364 +++ .../examine_and_edit_the_box_model/index.html | 47 + .../inspeccionar_y_seleccionar_colores/index.html | 26 - .../how_to/inspect_and_select_colors/index.html | 26 + .../how_to/open_the_inspector/index.html | 22 + .../index.html | 22 - .../reposition_elements_in_the_page/index.html | 22 + files/es/tools/performance/index.html | 91 + files/es/tools/performance/ui_tour/index.html | 134 + files/es/tools/profiler/index.html | 105 - .../debugging_over_a_network/index.html | 11 - .../firefox_for_android/index.html | 132 + .../firefox_para_android/index.html | 132 - files/es/tools/responsive_design_mode/index.html | 18 + files/es/tools/responsive_design_view/index.html | 18 - files/es/tools/style_editor/index.html | 101 + files/es/tools/taking_screenshots/index.html | 42 + .../es/tools/tomar_capturas_de_pantalla/index.html | 42 - files/es/tools/web_audio_editor/index.html | 31 + .../iniciando_la_consola_web/index.html | 23 - .../index.html" | 188 -- .../the_command_line_interpreter/index.html | 188 ++ files/es/tools/web_console/ui_tour/index.html | 23 + .../index.html | 90 - .../es/traducir_una_extensi\303\263n/index.html" | 161 - .../index.html | 337 -- .../index.html | 377 --- .../index.html" | 15 - files/es/usar_web_workers/index.html | 260 -- .../index.html | 236 -- files/es/using_the_w3c_dom_level_1_core/index.html | 93 - .../index.html" | 92 - files/es/vigilar_plugins/index.html | 110 - files/es/web/accesibilidad/comunidad/index.html | 44 - files/es/web/accesibilidad/index.html | 93 - .../etiquetas_de_texto_y_nombres/index.html | 266 -- .../accesibilidad/understanding_wcag/index.html | 56 - .../perceivable/color_contraste/index.html | 162 - .../understanding_wcag/perceivable/index.html | 336 -- .../understanding_wcag/teclado/index.html | 92 - .../usando_el_atributo_aria-required/index.html | 76 - .../usando_el_rol_alertdialog/index.html | 89 - .../using_the_alertdialog_role/index.html | 89 + .../using_the_aria-required_attribute/index.html | 76 + .../accessibility/aria/forms/alertas/index.html | 147 - .../web/accessibility/aria/forms/alerts/index.html | 147 + .../aria/forms/basic_form_hints/index.html | 115 + .../consejos_basicos_para_formularios/index.html | 115 - .../aria/forms/etiquetas_complejas/index.html | 47 - .../aria/forms/multipart_labels/index.html | 47 + files/es/web/accessibility/community/index.html | 44 + files/es/web/accessibility/index.html | 93 + .../accessibility/understanding_wcag/index.html | 56 + .../understanding_wcag/keyboard/index.html | 92 + .../perceivable/color_contrast/index.html | 162 + .../understanding_wcag/perceivable/index.html | 336 ++ .../text_labels_and_names/index.html | 266 ++ .../web/api/animation/animaci\303\263n/index.html" | 106 - files/es/web/api/animation/animation/index.html | 106 + files/es/web/api/animation/currenttime/index.html | 114 + files/es/web/api/animation/finished/index.html | 120 + files/es/web/api/animation/terminado/index.html | 120 - files/es/web/api/animation/tiempoactual/index.html | 114 - .../web/api/api_de_almacenamiento_web/index.html | 146 - .../usando_la_api_de_almacenamiento_web/index.html | 272 -- files/es/web/api/api_del_portapapeles/index.html | 76 - files/es/web/api/battery_status_api/index.html | 39 + .../api/canvas_api/a_basic_ray-caster/index.html | 59 + files/es/web/api/canvas_api/index.html | 170 ++ .../manipulating_video_using_canvas/index.html | 126 + .../tutorial/advanced_animations/index.html | 380 +++ .../tutorial/applying_styles_and_colors/index.html | 726 +++++ .../tutorial/basic_animations/index.html | 333 ++ .../api/canvas_api/tutorial/basic_usage/index.html | 146 + .../tutorial/compositing/ejemplo/index.html | 295 -- .../tutorial/compositing/example/index.html | 295 ++ .../canvas_api/tutorial/drawing_shapes/index.html | 513 ++++ .../canvas_api/tutorial/drawing_text/index.html | 67 + .../hit_regions_and_accessibility/index.html | 99 + files/es/web/api/canvas_api/tutorial/index.html | 61 + .../tutorial/optimizing_canvas/index.html | 19 + .../pixel_manipulation_with_canvas/index.html | 301 ++ files/es/web/api/clipboard_api/index.html | 76 + files/es/web/api/console/tabla/index.html | 212 -- files/es/web/api/console/table/index.html | 212 ++ files/es/web/api/crypto/getrandomvalues/index.html | 75 + files/es/web/api/document/abrir/index.html | 109 - files/es/web/api/document/async/index.html | 33 - files/es/web/api/document/cookie/index.html | 119 + files/es/web/api/document/crearatributo/index.html | 91 - .../es/web/api/document/createattribute/index.html | 91 + files/es/web/api/document/createevent/index.html | 35 + files/es/web/api/document/getselection/index.html | 13 - files/es/web/api/document/open/index.html | 109 + .../document/pointerlockchange_event/index.html | 80 + .../web/api/document/pointerlockelement/index.html | 105 - files/es/web/api/document/stylesheets/index.html | 22 - .../api/document_object_model/events/index.html | 72 + .../api/document_object_model/examples/index.html | 367 +++ .../how_to_create_a_dom_tree/index.html | 130 + files/es/web/api/document_object_model/index.html | 91 + .../document_object_model/introduction/index.html | 248 ++ .../index.html | 50 + .../index.html | 337 ++ .../using_the_w3c_dom_level_1_core/index.html | 93 + .../document_object_model/whitespace/index.html | 476 +++ .../documentorshadowroot/getselection/index.html | 13 + .../pointerlockelement/index.html | 105 + .../documentorshadowroot/stylesheets/index.html | 22 + files/es/web/api/domstring/binary/index.html | 31 + .../web/api/domstring/cadenas_binarias/index.html | 31 - files/es/web/api/element/accesskey/index.html | 23 - files/es/web/api/element/blur_event/index.html | 156 + files/es/web/api/element/name/index.html | 80 - .../web/api/element/ongotpointercapture/index.html | 134 - .../api/element/onlostpointercapture/index.html | 133 - files/es/web/api/element/onwheel/index.html | 31 - .../web/api/elementcssinlinestyle/style/index.html | 52 + files/es/web/api/elementoshtmlparavideo/index.html | 202 -- files/es/web/api/event/createevent/index.html | 35 - .../es/web/api/fetch_api/basic_concepts/index.html | 73 + .../web/api/fetch_api/conceptos_basicos/index.html | 73 - files/es/web/api/fetch_api/using_fetch/index.html | 377 +++ .../web/api/fetch_api/utilizando_fetch/index.html | 377 --- files/es/web/api/formdata/index.html | 84 + .../api/formdata/using_formdata_objects/index.html | 137 + files/es/web/api/geolocation_api/index.html | 232 ++ .../ongotpointercapture/index.html | 134 + .../onlostpointercapture/index.html | 133 + .../api/globaleventhandlers/onunload/index.html | 45 - .../web/api/globaleventhandlers/onwheel/index.html | 31 + files/es/web/api/history_api/example/index.html | 415 +++ files/es/web/api/history_api/index.html | 228 ++ .../file_drag_and_drop/index.html | 117 + files/es/web/api/html_drag_and_drop_api/index.html | 57 + .../recommended_drag_types/index.html | 144 + files/es/web/api/htmlelement/accesskey/index.html | 23 + .../api/htmlelement/animationend_event/index.html | 81 + files/es/web/api/htmlelement/dataset/index.html | 132 - files/es/web/api/htmlelement/focus/index.html | 164 - files/es/web/api/htmlelement/style/index.html | 52 - .../htmlelement/transitioncancel_event/index.html | 163 + .../api/htmlelement/transitionend_event/index.html | 183 ++ .../api/htmlmediaelement/abort_event/index.html | 68 + .../api/htmlorforeignelement/dataset/index.html | 132 + .../web/api/htmlorforeignelement/focus/index.html | 164 + files/es/web/api/htmlvideoelement/index.html | 202 ++ .../basic_concepts_behind_indexeddb/index.html | 216 ++ .../index.html | 216 -- .../api/indexeddb_api/usando_indexeddb/index.html | 1308 -------- .../api/indexeddb_api/using_indexeddb/index.html | 1308 ++++++++ files/es/web/api/media_streams_api/index.html | 445 +++ files/es/web/api/navigator/geolocation/index.html | 106 + .../navigatorgeolocation/geolocation/index.html | 106 - files/es/web/api/navigatorgeolocation/index.html | 107 - .../eventos_online_y_offline/index.html | 91 - .../online_and_offline_events/index.html | 91 + files/es/web/api/node/elementopadre/index.html | 46 - files/es/web/api/node/insertarantes/index.html | 172 -- files/es/web/api/node/insertbefore/index.html | 172 ++ files/es/web/api/node/nodoprincipal/index.html | 34 - files/es/web/api/node/parentelement/index.html | 46 + .../usando_la_api_de_notificaciones/index.html | 294 -- .../using_the_notifications_api/index.html | 294 ++ files/es/web/api/pointer_lock_api/index.html | 284 ++ .../web/api/push_api/using_the_push_api/index.html | 433 --- files/es/web/api/randomsource/index.html | 111 - .../obtenervaloresaleatorios/index.html | 75 - files/es/web/api/server-sent_events/index.html | 99 + .../using_server-sent_events/index.html | 231 ++ files/es/web/api/storage/localstorage/index.html | 136 - files/es/web/api/subtlecrypto/encrypt/index.html | 142 - files/es/web/api/touch_events/index.html | 292 ++ files/es/web/api/vibration_api/index.html | 155 + files/es/web/api/web_audio_api/index.html | 510 ++++ .../checking_authenticity_with_password/index.html | 30 - .../using_the_web_speech_api/index.html | 301 ++ .../uso_de_la_web_speech_api/index.html | 301 -- files/es/web/api/web_storage_api/index.html | 146 + .../using_the_web_storage_api/index.html | 272 ++ .../web_workers_api/using_web_workers/index.html | 633 ++++ .../creating_3d_objects_using_webgl/index.html | 133 + .../objetos_3d_utilizando_webgl/index.html | 133 - .../tutorial/using_textures_in_webgl/index.html | 209 ++ .../wtilizando_texturas_en_webgl/index.html | 209 -- .../web/api/webrtc_api/session_lifetime/index.html | 21 + .../api/webrtc_api/taking_still_photos/index.html | 159 + .../escribiendo_servidor_websocket/index.html | 244 -- .../index.html | 246 -- .../writing_websocket_server/index.html | 244 ++ .../writing_websocket_servers/index.html | 246 ++ .../web/api/window/beforeunload_event/index.html | 215 ++ .../api/window/domcontentloaded_event/index.html | 148 + files/es/web/api/window/load_event/index.html | 125 + files/es/web/api/window/url/index.html | 102 - files/es/web/api/windowbase64/atob/index.html | 111 - .../base64_codificando_y_decodificando/index.html | 345 --- files/es/web/api/windowbase64/index.html | 109 - .../api/windoweventhandlers/onunload/index.html | 45 + .../api/windoworworkerglobalscope/atob/index.html | 111 + .../clearinterval/index.html | 43 + .../cleartimeout/index.html | 63 + .../setinterval/index.html | 692 +++++ .../settimeout/index.html | 340 +++ .../web/api/windowtimers/clearinterval/index.html | 43 - .../web/api/windowtimers/cleartimeout/index.html | 63 - files/es/web/api/windowtimers/index.html | 119 - .../es/web/api/windowtimers/setinterval/index.html | 692 ----- .../es/web/api/windowtimers/settimeout/index.html | 340 --- files/es/web/api/xmldocument/async/index.html | 33 + .../es/web/api/xmlhttprequest/formdata/index.html | 84 - .../api/xmlhttprequest/loadend_event/index.html | 91 + files/es/web/css/-moz-box-flex/index.html | 155 - files/es/web/css/-moz-box-ordinal-group/index.html | 67 - files/es/web/css/-moz-box-pack/index.html | 184 -- files/es/web/css/-moz-cell/index.html | 11 - .../web/css/-moz-font-language-override/index.html | 7 - files/es/web/css/-moz-user-modify/index.html | 132 - files/es/web/css/-webkit-mask-clip/index.html | 102 - files/es/web/css/-webkit-mask-image/index.html | 157 - files/es/web/css/-webkit-mask-origin/index.html | 101 - files/es/web/css/-webkit-mask-position/index.html | 119 - files/es/web/css/-webkit-mask-repeat/index.html | 133 - files/es/web/css/-webkit-mask/index.html | 125 - files/es/web/css/@media/altura/index.html | 82 - files/es/web/css/@media/height/index.html | 82 + .../web/css/@media/resoluci\303\263n/index.html" | 88 - files/es/web/css/@media/resolution/index.html | 88 + files/es/web/css/@viewport/height/index.html | 126 - files/es/web/css/@viewport/width/index.html | 123 - .../es/web/css/_colon_-moz-placeholder/index.html | 123 - files/es/web/css/_colon_-moz-ui-invalid/index.html | 94 - .../css/_colon_-ms-input-placeholder/index.html | 112 - .../es/web/css/_colon_-webkit-autofill/index.html | 80 - files/es/web/css/_colon_any/index.html | 187 -- files/es/web/css/_colon_autofill/index.html | 80 + files/es/web/css/_colon_is/index.html | 187 ++ files/es/web/css/_colon_not()/index.html | 112 - files/es/web/css/_colon_not/index.html | 112 + files/es/web/css/_colon_user-invalid/index.html | 94 + .../css/_doublecolon_-moz-placeholder/index.html | 109 - .../index.html | 100 - .../index.html | 86 - .../_doublecolon_file-selector-button/index.html | 100 + .../web/css/adjacent_sibling_combinator/index.html | 135 + files/es/web/css/attribute_selectors/index.html | 241 ++ files/es/web/css/auto/index.html | 50 - files/es/web/css/box-flex/index.html | 155 + files/es/web/css/box-ordinal-group/index.html | 67 + files/es/web/css/box-pack/index.html | 184 ++ files/es/web/css/column-gap/index.html | 158 + files/es/web/css/columnas_css/index.html | 112 - files/es/web/css/comentarios/index.html | 49 - .../web/css/comenzando_(tutorial_css)/index.html | 40 - files/es/web/css/comments/index.html | 49 + files/es/web/css/como_iniciar/index.html | 5 - .../css/como_iniciar/por_que_usar_css/index.html | 107 - .../es/web/css/como_iniciar/que_es_css/index.html | 146 - files/es/web/css/computed_value/index.html | 30 + .../index.html" | 91 - .../detecting_css_animation_support/index.html | 91 + .../usando_animaciones_css/index.html | 351 --- .../css_animations/using_css_animations/index.html | 351 +++ .../border-image_generador/index.html | 2615 ---------------- .../border-image_generator/index.html | 2615 ++++++++++++++++ .../web/css/css_background_and_borders/index.html | 155 - .../using_css_multiple_backgrounds/index.html | 57 - .../web/css/css_backgrounds_and_borders/index.html | 155 + .../using_multiple_backgrounds/index.html | 57 + .../index.html | 39 + files/es/web/css/css_box_model/index.html | 165 + .../introduction_to_the_css_box_model/index.html | 66 + .../mastering_margin_collapsing/index.html | 96 + files/es/web/css/css_color/index.html | 120 + .../css/css_colors/color_picker_tool/index.html | 3220 ++++++++++++++++++++ .../herramienta_para_seleccionar_color/index.html | 3220 -------------------- files/es/web/css/css_colors/index.html | 120 - files/es/web/css/css_columns/index.html | 112 + .../using_multi-column_layouts/index.html | 68 + files/es/web/css/css_conditional_rules/index.html | 99 + .../basic_concepts_of_flexbox/index.html | 227 ++ .../casos_de_uso_tipicos_de_flexbox/index.html | 133 - .../conceptos_basicos_de_flexbox/index.html | 227 -- .../typical_use_cases_of_flexbox/index.html | 133 + .../index.html | 191 -- .../usando_las_cajas_flexibles_css/index.html | 376 --- .../basic_concepts_of_grid_layout/index.html | 722 +++++ .../index.html" | 722 ----- .../relacion_de_grid_layout/index.html | 642 ---- .../relationship_of_grid_layout/index.html | 642 ++++ .../css/css_images/using_css_gradients/index.html | 386 +++ .../dimensionamiento/index.html | 89 - .../css/css_logical_properties/sizing/index.html | 89 + files/es/web/css/css_modelo_caja/index.html | 165 - .../index.html" | 66 - .../mastering_margin_collapsing/index.html | 96 - .../agregando_z-index/index.html | 179 -- .../apilamiento_y_float/index.html | 144 - .../index.html | 132 - .../index.html | 137 - .../index.html | 183 -- .../el_contexto_de_apilamiento/index.html | 231 -- .../css_positioning/entendiendo_z_index/index.html | 47 - .../stacking_without_z-index/index.html | 141 - .../adding_z-index/index.html | 179 ++ .../understanding_z_index/index.html | 47 + .../stacking_and_float/index.html | 144 + .../stacking_context_example_1/index.html | 132 + .../stacking_context_example_2/index.html | 137 + .../stacking_context_example_3/index.html | 183 ++ .../stacking_without_z-index/index.html | 141 + .../the_stacking_context/index.html | 231 ++ .../es/web/css/css_reglas_condicionales/index.html | 99 - files/es/web/css/css_selectors/index.html | 164 + .../index.html | 67 + files/es/web/css/css_text/index.html | 123 + .../using_css_transitions/index.html | 700 +++++ .../index.html | 39 - files/es/web/css/elemento_reemplazo/index.html | 19 - files/es/web/css/especificidad/index.html | 239 -- files/es/web/css/filter-function/url/index.html | 33 - files/es/web/css/font-language-override/index.html | 7 + files/es/web/css/gap/index.html | 252 ++ .../web/css/general_sibling_combinator/index.html | 117 + files/es/web/css/gradient/index.html | 100 + files/es/web/css/gradiente/index.html | 100 - files/es/web/css/grid-column-gap/index.html | 158 - files/es/web/css/grid-gap/index.html | 252 -- .../herramientas/cubic_bezier_generator/index.html | 320 -- files/es/web/css/herramientas/index.html | 28 - files/es/web/css/initial_value/index.html | 26 + .../web/css/introducci\303\263n/boxes/index.html" | 335 -- .../cascading_and_inheritance/index.html" | 125 - .../web/css/introducci\303\263n/color/index.html" | 364 --- .../introducci\303\263n/how_css_works/index.html" | 128 - "files/es/web/css/introducci\303\263n/index.html" | 94 - .../web/css/introducci\303\263n/layout/index.html" | 384 --- .../los_colon_estilos_de_texto/index.html" | 156 - .../web/css/introducci\303\263n/media/index.html" | 394 --- .../css/introducci\303\263n/selectors/index.html" | 416 --- files/es/web/css/mask-clip/index.html | 102 + files/es/web/css/mask-image/index.html | 157 + files/es/web/css/mask-origin/index.html | 101 + files/es/web/css/mask-position/index.html | 119 + files/es/web/css/mask-repeat/index.html | 133 + files/es/web/css/mask/index.html | 125 + .../media_queries/testing_media_queries/index.html | 93 + .../media_queries/using_media_queries/index.html | 828 +++++ files/es/web/css/mix-blend-mode/index.html | 611 ++++ files/es/web/css/normal/index.html | 11 - files/es/web/css/percentage/index.html | 126 + files/es/web/css/porcentaje/index.html | 126 - .../css/preguntas_frecuentes_sobre_css/index.html | 118 - files/es/web/css/primeros_pasos/index.html | 39 - files/es/web/css/pseudo-elements/index.html | 86 + files/es/web/css/pseudoelementos/index.html | 86 - files/es/web/css/reference/index.html | 246 ++ files/es/web/css/referencia_css/index.html | 246 -- .../css/referencia_css/mix-blend-mode/index.html | 611 ---- files/es/web/css/replaced_element/index.html | 19 + "files/es/web/css/resoluci\303\263n/index.html" | 151 - files/es/web/css/resolution/index.html | 151 + files/es/web/css/rtl/index.html | 22 - files/es/web/css/selectores_atributo/index.html | 241 -- files/es/web/css/selectores_css/index.html | 164 - .../index.html | 67 - .../css/selectores_hermanos_adyacentes/index.html | 135 - .../css/selectores_hermanos_generales/index.html | 117 - .../index.html" | 402 --- files/es/web/css/specificity/index.html | 239 ++ files/es/web/css/texto_css/index.html | 123 - .../css/tools/cubic_bezier_generator/index.html | 320 ++ files/es/web/css/tools/index.html | 28 + files/es/web/css/transiciones_de_css/index.html | 700 ----- files/es/web/css/url()/index.html | 33 + files/es/web/css/user-modify/index.html | 132 + files/es/web/css/valor_calculado/index.html | 30 - files/es/web/css/valor_inicial/index.html | 26 - .../es/web/css/value_definition_syntax/index.html | 402 +++ files/es/web/events/abort/index.html | 68 - files/es/web/events/animationend/index.html | 81 - files/es/web/events/beforeunload/index.html | 215 -- files/es/web/events/blur/index.html | 156 - files/es/web/events/domcontentloaded/index.html | 148 - files/es/web/events/load/index.html | 125 - files/es/web/events/loadend/index.html | 91 - files/es/web/events/pointerlockchange/index.html | 80 - files/es/web/events/transitioncancel/index.html | 163 - files/es/web/events/transitionend/index.html | 183 -- files/es/web/guide/ajax/community/index.html | 44 + files/es/web/guide/ajax/comunidad/index.html | 44 - files/es/web/guide/ajax/getting_started/index.html | 231 ++ files/es/web/guide/ajax/primeros_pasos/index.html | 231 -- .../index.html | 48 - files/es/web/guide/api/vibration/index.html | 155 - .../index.html | 99 + .../guide/css/probando_media_queries/index.html | 93 - .../index.html" | 144 - .../dom/events/eventos_controlador/index.html | 132 - files/es/web/guide/dom/events/index.html | 16 - files/es/web/guide/dom/index.html | 22 - .../creating_and_triggering_events/index.html | 144 + .../es/web/guide/events/event_handlers/index.html | 132 + files/es/web/guide/events/index.html | 16 + .../index.html | 48 + .../canvas_tutorial/advanced_animations/index.html | 380 --- .../applying_styles_and_colors/index.html | 726 ----- .../canvas_tutorial/basic_animations/index.html | 333 -- .../html/canvas_tutorial/basic_usage/index.html | 146 - .../canvas_tutorial/dibujando_formas/index.html | 513 ---- .../hit_regions_and_accessibility/index.html | 99 - files/es/web/guide/html/canvas_tutorial/index.html | 61 - .../canvas_tutorial/optimizing_canvas/index.html | 19 - .../pixel_manipulation_with_canvas/index.html | 301 -- .../guide/html/categorias_de_contenido/index.html | 175 -- .../web/guide/html/content_categories/index.html | 175 ++ .../html/html5/constraint_validation/index.html | 345 +++ .../web/guide/html/html5/html5_parser/index.html | 64 + files/es/web/guide/html/html5/index.html | 199 ++ .../html/html5/introduction_to_html5/index.html | 16 + .../html/introduction_alhtml_clone/index.html | 172 -- .../using_html_sections_and_outlines/index.html | 411 +++ files/es/web/guide/mobile/index.html | 75 + files/es/web/guide/movil/index.html | 75 - .../performance/usando_web_workers/index.html | 633 ---- .../web/guide/usando_objetos_formdata/index.html | 137 - .../anipular_video_por_medio_de_canvas/index.html | 126 - files/es/web/html/atributos/accept/index.html | 169 - .../es/web/html/atributos/autocomplete/index.html | 180 -- files/es/web/html/atributos/index.html | 677 ---- files/es/web/html/atributos/min/index.html | 162 - files/es/web/html/atributos/minlength/index.html | 71 - files/es/web/html/atributos/multiple/index.html | 182 -- .../atributos_de_configuracion_cors/index.html | 123 - .../html/atributos_globales/accesskey/index.html | 143 - .../atributos_globales/autocapitalize/index.html | 50 - .../web/html/atributos_globales/class/index.html | 105 - .../atributos_globales/contenteditable/index.html | 107 - .../html/atributos_globales/contextmenu/index.html | 139 - .../html/atributos_globales/data-_star_/index.html | 108 - .../es/web/html/atributos_globales/dir/index.html | 122 - .../html/atributos_globales/draggable/index.html | 108 - .../html/atributos_globales/dropzone/index.html | 99 - .../web/html/atributos_globales/hidden/index.html | 107 - files/es/web/html/atributos_globales/id/index.html | 113 - files/es/web/html/atributos_globales/index.html | 199 -- files/es/web/html/atributos_globales/is/index.html | 67 - .../web/html/atributos_globales/itemid/index.html | 78 - .../html/atributos_globales/itemprop/index.html | 22 - .../web/html/atributos_globales/itemref/index.html | 106 - .../html/atributos_globales/itemscope/index.html | 284 -- .../es/web/html/atributos_globales/lang/index.html | 108 - .../es/web/html/atributos_globales/slot/index.html | 46 - .../html/atributos_globales/spellcheck/index.html | 218 -- .../web/html/atributos_globales/style/index.html | 111 - .../html/atributos_globales/tabindex/index.html | 118 - .../web/html/atributos_globales/title/index.html | 138 - .../html/atributos_globales/translate/index.html | 103 - .../x-ms-acceleratorkey/index.html | 32 - files/es/web/html/attributes/accept/index.html | 169 + .../es/web/html/attributes/autocomplete/index.html | 180 ++ .../es/web/html/attributes/crossorigin/index.html | 123 + files/es/web/html/attributes/index.html | 677 ++++ files/es/web/html/attributes/min/index.html | 162 + files/es/web/html/attributes/minlength/index.html | 71 + files/es/web/html/attributes/multiple/index.html | 182 ++ .../web/html/canvas/a_basic_ray-caster/index.html | 59 - .../canvas/drawing_graphics_with_canvas/index.html | 162 - files/es/web/html/canvas/index.html | 170 -- .../index.html" | 53 - files/es/web/html/cors_enabled_image/index.html | 115 + files/es/web/html/element/a/index.html | 321 ++ files/es/web/html/element/abbr/index.html | 147 + files/es/web/html/element/acronym/index.html | 160 + files/es/web/html/element/address/index.html | 163 + files/es/web/html/element/applet/index.html | 236 ++ files/es/web/html/element/area/index.html | 212 ++ files/es/web/html/element/article/index.html | 60 + files/es/web/html/element/aside/index.html | 68 + files/es/web/html/element/audio/index.html | 105 + files/es/web/html/element/b/index.html | 168 + files/es/web/html/element/base/index.html | 158 + files/es/web/html/element/basefont/index.html | 124 + files/es/web/html/element/bdi/index.html | 140 + files/es/web/html/element/bdo/index.html | 144 + files/es/web/html/element/bgsound/index.html | 106 + files/es/web/html/element/big/index.html | 191 ++ files/es/web/html/element/blink/index.html | 100 + files/es/web/html/element/blockquote/index.html | 153 + files/es/web/html/element/body/index.html | 170 ++ files/es/web/html/element/br/index.html | 157 + files/es/web/html/element/button/index.html | 198 ++ files/es/web/html/element/canvas/index.html | 88 + files/es/web/html/element/caption/index.html | 167 + files/es/web/html/element/center/index.html | 116 + files/es/web/html/element/cite/index.html | 147 + files/es/web/html/element/code/index.html | 110 + files/es/web/html/element/col/index.html | 177 ++ files/es/web/html/element/colgroup/index.html | 163 + files/es/web/html/element/content/index.html | 167 + files/es/web/html/element/data/index.html | 141 + files/es/web/html/element/datalist/index.html | 106 + files/es/web/html/element/dd/index.html | 111 + files/es/web/html/element/del/index.html | 155 + files/es/web/html/element/details/index.html | 152 + files/es/web/html/element/dfn/index.html | 112 + files/es/web/html/element/dialog/index.html | 152 + files/es/web/html/element/dir/index.html | 121 + files/es/web/html/element/div/index.html | 152 + files/es/web/html/element/dl/index.html | 219 ++ files/es/web/html/element/dt/index.html | 103 + files/es/web/html/element/em/index.html | 60 + files/es/web/html/element/embed/index.html | 69 + files/es/web/html/element/fieldset/index.html | 124 + files/es/web/html/element/figcaption/index.html | 90 + files/es/web/html/element/figure/index.html | 60 + files/es/web/html/element/font/index.html | 152 + files/es/web/html/element/footer/index.html | 71 + files/es/web/html/element/form/index.html | 198 ++ files/es/web/html/element/frame/index.html | 167 + files/es/web/html/element/frameset/index.html | 157 + files/es/web/html/element/head/index.html | 147 + files/es/web/html/element/header/index.html | 74 + .../web/html/element/heading_elements/index.html | 240 ++ files/es/web/html/element/hgroup/index.html | 120 + files/es/web/html/element/hr/index.html | 156 + files/es/web/html/element/html/index.html | 176 ++ files/es/web/html/element/i/index.html | 112 + files/es/web/html/element/iframe/index.html | 304 ++ files/es/web/html/element/image/index.html | 18 + files/es/web/html/element/img/index.html | 339 +++ files/es/web/html/element/index.html | 106 + files/es/web/html/element/input/button/index.html | 254 ++ .../es/web/html/element/input/checkbox/index.html | 130 + files/es/web/html/element/input/color/index.html | 308 ++ files/es/web/html/element/input/date/index.html | 567 ++++ .../es/web/html/element/input/datetime/index.html | 147 + files/es/web/html/element/input/email/index.html | 423 +++ files/es/web/html/element/input/hidden/index.html | 201 ++ files/es/web/html/element/input/index.html | 1529 ++++++++++ files/es/web/html/element/input/number/index.html | 450 +++ .../es/web/html/element/input/password/index.html | 132 + files/es/web/html/element/input/range/index.html | 416 +++ files/es/web/html/element/input/text/index.html | 472 +++ files/es/web/html/element/ins/index.html | 137 + files/es/web/html/element/isindex/index.html | 44 + files/es/web/html/element/kbd/index.html | 120 + files/es/web/html/element/keygen/index.html | 128 + files/es/web/html/element/label/index.html | 138 + files/es/web/html/element/legend/index.html | 125 + files/es/web/html/element/li/index.html | 123 + files/es/web/html/element/link/index.html | 425 +++ files/es/web/html/element/main/index.html | 151 + files/es/web/html/element/map/index.html | 133 + files/es/web/html/element/mark/index.html | 142 + files/es/web/html/element/marquee/index.html | 207 ++ files/es/web/html/element/menu/index.html | 130 + files/es/web/html/element/meta/index.html | 134 + files/es/web/html/element/multicol/index.html | 20 + files/es/web/html/element/nav/index.html | 108 + files/es/web/html/element/nobr/index.html | 29 + files/es/web/html/element/noframes/index.html | 143 + files/es/web/html/element/noscript/index.html | 138 + files/es/web/html/element/object/index.html | 144 + files/es/web/html/element/ol/index.html | 132 + files/es/web/html/element/option/index.html | 150 + files/es/web/html/element/p/index.html | 131 + files/es/web/html/element/param/index.html | 131 + files/es/web/html/element/picture/index.html | 161 + files/es/web/html/element/pre/index.html | 128 + files/es/web/html/element/progress/index.html | 97 + files/es/web/html/element/q/index.html | 121 + files/es/web/html/element/s/index.html | 114 + files/es/web/html/element/samp/index.html | 63 + files/es/web/html/element/section/index.html | 143 + files/es/web/html/element/select/index.html | 198 ++ files/es/web/html/element/shadow/index.html | 152 + files/es/web/html/element/slot/index.html | 126 + files/es/web/html/element/small/index.html | 20 + files/es/web/html/element/source/index.html | 129 + files/es/web/html/element/span/index.html | 166 + files/es/web/html/element/strike/index.html | 60 + files/es/web/html/element/strong/index.html | 58 + files/es/web/html/element/style/index.html | 122 + files/es/web/html/element/sub/index.html | 101 + files/es/web/html/element/sup/index.html | 110 + files/es/web/html/element/table/index.html | 525 ++++ files/es/web/html/element/td/index.html | 310 ++ files/es/web/html/element/template/index.html | 155 + files/es/web/html/element/textarea/index.html | 181 ++ files/es/web/html/element/th/index.html | 328 ++ files/es/web/html/element/time/index.html | 170 ++ files/es/web/html/element/title/index.html | 54 + files/es/web/html/element/tr/index.html | 232 ++ files/es/web/html/element/track/index.html | 179 ++ files/es/web/html/element/tt/index.html | 58 + files/es/web/html/element/u/index.html | 79 + files/es/web/html/element/ul/index.html | 151 + files/es/web/html/element/var/index.html | 54 + files/es/web/html/element/video/index.html | 128 + files/es/web/html/element/wbr/index.html | 115 + files/es/web/html/element/xmp/index.html | 47 + files/es/web/html/elemento/a/index.html | 321 -- files/es/web/html/elemento/abbr/index.html | 147 - files/es/web/html/elemento/acronym/index.html | 160 - files/es/web/html/elemento/address/index.html | 163 - files/es/web/html/elemento/applet/index.html | 236 -- files/es/web/html/elemento/area/index.html | 212 -- files/es/web/html/elemento/article/index.html | 60 - files/es/web/html/elemento/aside/index.html | 68 - files/es/web/html/elemento/audio/index.html | 105 - files/es/web/html/elemento/b/index.html | 168 - files/es/web/html/elemento/base/index.html | 158 - files/es/web/html/elemento/basefont/index.html | 124 - files/es/web/html/elemento/bdi/index.html | 140 - files/es/web/html/elemento/bdo/index.html | 144 - files/es/web/html/elemento/bgsound/index.html | 106 - files/es/web/html/elemento/big/index.html | 191 -- files/es/web/html/elemento/blink/index.html | 100 - files/es/web/html/elemento/blockquote/index.html | 153 - files/es/web/html/elemento/body/index.html | 170 -- files/es/web/html/elemento/br/index.html | 157 - files/es/web/html/elemento/button/index.html | 198 -- files/es/web/html/elemento/canvas/index.html | 88 - files/es/web/html/elemento/caption/index.html | 167 - files/es/web/html/elemento/center/index.html | 116 - files/es/web/html/elemento/cite/index.html | 147 - files/es/web/html/elemento/code/index.html | 110 - files/es/web/html/elemento/col/index.html | 177 -- files/es/web/html/elemento/colgroup/index.html | 163 - files/es/web/html/elemento/command/index.html | 152 - files/es/web/html/elemento/content/index.html | 167 - files/es/web/html/elemento/data/index.html | 141 - files/es/web/html/elemento/datalist/index.html | 106 - files/es/web/html/elemento/dd/index.html | 111 - files/es/web/html/elemento/del/index.html | 155 - files/es/web/html/elemento/details/index.html | 152 - files/es/web/html/elemento/dfn/index.html | 112 - files/es/web/html/elemento/dialog/index.html | 152 - files/es/web/html/elemento/dir/index.html | 121 - files/es/web/html/elemento/div/index.html | 152 - files/es/web/html/elemento/dl/index.html | 219 -- files/es/web/html/elemento/dt/index.html | 103 - files/es/web/html/elemento/element/index.html | 110 - .../elemento/elementos_t\303\255tulos/index.html" | 240 -- files/es/web/html/elemento/em/index.html | 60 - files/es/web/html/elemento/embed/index.html | 69 - .../etiqueta_personalizada_html5/index.html | 46 - files/es/web/html/elemento/fieldset/index.html | 124 - files/es/web/html/elemento/figcaption/index.html | 90 - files/es/web/html/elemento/figure/index.html | 60 - files/es/web/html/elemento/font/index.html | 152 - files/es/web/html/elemento/footer/index.html | 71 - files/es/web/html/elemento/form/index.html | 198 -- files/es/web/html/elemento/frame/index.html | 167 - files/es/web/html/elemento/frameset/index.html | 157 - files/es/web/html/elemento/head/index.html | 147 - files/es/web/html/elemento/header/index.html | 74 - files/es/web/html/elemento/hgroup/index.html | 120 - files/es/web/html/elemento/hr/index.html | 156 - files/es/web/html/elemento/html/index.html | 176 -- files/es/web/html/elemento/i/index.html | 112 - files/es/web/html/elemento/iframe/index.html | 304 -- files/es/web/html/elemento/image/index.html | 18 - files/es/web/html/elemento/img/index.html | 339 --- files/es/web/html/elemento/index.html | 106 - .../html/elemento/input/bot\303\263n/index.html" | 254 -- .../es/web/html/elemento/input/checkbox/index.html | 130 - files/es/web/html/elemento/input/color/index.html | 308 -- files/es/web/html/elemento/input/date/index.html | 567 ---- .../es/web/html/elemento/input/datetime/index.html | 147 - files/es/web/html/elemento/input/email/index.html | 423 --- files/es/web/html/elemento/input/hidden/index.html | 201 -- files/es/web/html/elemento/input/index.html | 1529 ---------- files/es/web/html/elemento/input/number/index.html | 450 --- .../es/web/html/elemento/input/password/index.html | 132 - files/es/web/html/elemento/input/range/index.html | 416 --- files/es/web/html/elemento/input/text/index.html | 472 --- files/es/web/html/elemento/ins/index.html | 137 - files/es/web/html/elemento/isindex/index.html | 44 - files/es/web/html/elemento/kbd/index.html | 120 - files/es/web/html/elemento/keygen/index.html | 128 - files/es/web/html/elemento/label/index.html | 138 - files/es/web/html/elemento/legend/index.html | 125 - files/es/web/html/elemento/li/index.html | 123 - files/es/web/html/elemento/link/index.html | 425 --- files/es/web/html/elemento/main/index.html | 151 - files/es/web/html/elemento/map/index.html | 133 - files/es/web/html/elemento/mark/index.html | 142 - files/es/web/html/elemento/marquee/index.html | 207 -- files/es/web/html/elemento/menu/index.html | 130 - files/es/web/html/elemento/meta/index.html | 134 - files/es/web/html/elemento/multicol/index.html | 20 - files/es/web/html/elemento/nav/index.html | 108 - files/es/web/html/elemento/nobr/index.html | 29 - files/es/web/html/elemento/noframes/index.html | 143 - files/es/web/html/elemento/noscript/index.html | 138 - files/es/web/html/elemento/object/index.html | 144 - files/es/web/html/elemento/ol/index.html | 132 - files/es/web/html/elemento/option/index.html | 150 - files/es/web/html/elemento/p/index.html | 131 - files/es/web/html/elemento/param/index.html | 131 - files/es/web/html/elemento/picture/index.html | 161 - files/es/web/html/elemento/pre/index.html | 128 - files/es/web/html/elemento/progress/index.html | 97 - files/es/web/html/elemento/q/index.html | 121 - files/es/web/html/elemento/s/index.html | 114 - files/es/web/html/elemento/samp/index.html | 63 - files/es/web/html/elemento/script/index.html | 255 -- files/es/web/html/elemento/section/index.html | 143 - files/es/web/html/elemento/select/index.html | 198 -- files/es/web/html/elemento/shadow/index.html | 152 - files/es/web/html/elemento/slot/index.html | 126 - files/es/web/html/elemento/small/index.html | 20 - files/es/web/html/elemento/source/index.html | 129 - files/es/web/html/elemento/span/index.html | 166 - files/es/web/html/elemento/strike/index.html | 60 - files/es/web/html/elemento/strong/index.html | 58 - files/es/web/html/elemento/style/index.html | 122 - files/es/web/html/elemento/sub/index.html | 101 - files/es/web/html/elemento/sup/index.html | 110 - files/es/web/html/elemento/table/index.html | 525 ---- files/es/web/html/elemento/td/index.html | 310 -- files/es/web/html/elemento/template/index.html | 155 - files/es/web/html/elemento/textarea/index.html | 181 -- files/es/web/html/elemento/th/index.html | 328 -- files/es/web/html/elemento/time/index.html | 170 -- .../html/elemento/tipos_de_elementos/index.html | 119 - files/es/web/html/elemento/title/index.html | 54 - files/es/web/html/elemento/tr/index.html | 232 -- files/es/web/html/elemento/track/index.html | 179 -- files/es/web/html/elemento/tt/index.html | 58 - files/es/web/html/elemento/u/index.html | 79 - files/es/web/html/elemento/ul/index.html | 151 - files/es/web/html/elemento/var/index.html | 54 - files/es/web/html/elemento/video/index.html | 128 - files/es/web/html/elemento/wbr/index.html | 115 - files/es/web/html/elemento/xmp/index.html | 47 - .../web/html/elementos_en_l\303\255nea/index.html" | 52 - .../index.html | 281 -- .../html/global_attributes/accesskey/index.html | 143 + .../global_attributes/autocapitalize/index.html | 50 + .../es/web/html/global_attributes/class/index.html | 105 + .../global_attributes/contenteditable/index.html | 107 + .../html/global_attributes/contextmenu/index.html | 139 + .../html/global_attributes/data-_star_/index.html | 108 + files/es/web/html/global_attributes/dir/index.html | 122 + .../html/global_attributes/draggable/index.html | 108 + .../web/html/global_attributes/hidden/index.html | 107 + files/es/web/html/global_attributes/id/index.html | 113 + files/es/web/html/global_attributes/index.html | 199 ++ files/es/web/html/global_attributes/is/index.html | 67 + .../web/html/global_attributes/itemid/index.html | 78 + .../web/html/global_attributes/itemprop/index.html | 22 + .../web/html/global_attributes/itemref/index.html | 106 + .../html/global_attributes/itemscope/index.html | 284 ++ .../es/web/html/global_attributes/lang/index.html | 108 + .../es/web/html/global_attributes/slot/index.html | 46 + .../html/global_attributes/spellcheck/index.html | 218 ++ .../es/web/html/global_attributes/style/index.html | 111 + .../web/html/global_attributes/tabindex/index.html | 118 + .../es/web/html/global_attributes/title/index.html | 138 + .../html/global_attributes/translate/index.html | 103 + .../x-ms-acceleratorkey/index.html | 32 + .../web/html/imagen_con_cors_habilitado/index.html | 115 - files/es/web/html/index/index.html | 8 + files/es/web/html/inline_elements/index.html | 52 + .../index.html | 66 - files/es/web/html/link_types/index.html | 381 +++ files/es/web/html/microdata/index.html | 207 ++ files/es/web/html/microdatos/index.html | 207 -- files/es/web/html/microformatos/index.html | 29 - files/es/web/html/microformats/index.html | 29 + .../index.html | 34 - .../html/recursos_offline_en_firefox/index.html | 382 --- files/es/web/html/reference/index.html | 26 + files/es/web/html/referencia/index.html | 26 - files/es/web/html/tipos_de_enlaces/index.html | 381 --- .../web/html/transision_adaptativa_dash/index.html | 77 - .../html/usando_audio_y_video_con_html5/index.html | 287 -- .../html/using_the_application_cache/index.html | 382 +++ "files/es/web/html/\303\255ndice/index.html" | 8 - files/es/web/http/access_control_cors/index.html | 491 --- .../web/http/basics_of_http/data_uris/index.html | 168 + .../web/http/basics_of_http/datos_uris/index.html | 168 - .../index.html" | 169 - .../identifying_resources_on_the_web/index.html | 169 + files/es/web/http/conditional_requests/index.html | 148 + .../connection_management_in_http_1.x/index.html | 86 + files/es/web/http/cors/index.html | 491 +++ .../gestion_de_la_conexion_en_http_1.x/index.html | 86 - files/es/web/http/headers/digest/index.html | 142 + .../web/http/headers/user-agent/firefox/index.html | 55 + .../mecanismo_actualizacion_protocolo/index.html | 246 -- .../web/http/peticiones_condicionales/index.html | 148 - .../web/http/protocol_upgrade_mechanism/index.html | 246 ++ .../http/recursos_y_especificaciones/index.html | 262 -- .../http/resources_and_specifications/index.html | 262 ++ "files/es/web/http/sesi\303\263n/index.html" | 158 - files/es/web/http/session/index.html | 158 + files/es/web/http/status/413/index.html | 34 + files/es/web/http/status/8080/index.html | 34 - .../a_re-introduction_to_javascript/index.html | 960 ++++++ .../es/web/javascript/about_javascript/index.html | 59 + .../web/javascript/acerca_de_javascript/index.html | 59 - .../index.html" | 87 - .../index.html | 333 ++ .../index.html | 333 -- .../web/javascript/gestion_de_memoria/index.html | 204 -- .../guide/bucles_e_iteraci\303\263n/index.html" | 334 -- .../guide/colecciones_indexadas/index.html | 603 ---- .../index.html | 456 --- .../control_flow_and_error_handling/index.html | 456 +++ files/es/web/javascript/guide/funciones/index.html | 706 ----- files/es/web/javascript/guide/functions/index.html | 706 +++++ .../guide/indexed_collections/index.html | 603 ++++ .../guide/introducci\303\263n/index.html" | 161 - .../web/javascript/guide/introduction/index.html | 161 + .../guide/loops_and_iteration/index.html | 334 ++ files/es/web/javascript/guide/modules/index.html | 458 +++ .../javascript/guide/m\303\263dulos/index.html" | 458 --- .../regular_expressions/aserciones/index.html | 247 -- .../regular_expressions/assertions/index.html | 247 ++ .../character_classes/index.html | 220 ++ .../regular_expressions/cheatsheet/index.html | 451 +++ .../clases_de_caracteres/index.html | 220 -- .../regular_expressions/cuantificadores/index.html | 182 -- .../escapes_de_propiedades_unicode/index.html | 177 -- .../groups_and_ranges/index.html | 176 ++ .../regular_expressions/grupos_y_rangos/index.html | 176 -- .../hoja_de_referencia/index.html | 451 --- .../regular_expressions/quantifiers/index.html | 182 ++ .../unicode_property_escapes/index.html | 177 ++ .../guide/trabajando_con_objectos/index.html | 493 --- .../web/javascript/guide/usar_promesas/index.html | 344 --- .../web/javascript/guide/using_promises/index.html | 344 +++ .../guide/working_with_objects/index.html | 493 +++ .../herencia_y_la_cadena_de_protipos/index.html | 410 --- .../inheritance_and_the_prototype_chain/index.html | 410 +++ .../index.html" | 385 --- .../index.html | 416 --- .../javascript_technologies_overview/index.html | 87 + .../es/web/javascript/memory_management/index.html | 204 ++ files/es/web/javascript/reference/about/index.html | 158 + .../reference/classes/constructor/index.html | 102 + .../reference/classes/extends/index.html | 167 + .../es/web/javascript/reference/classes/index.html | 372 +++ .../classes/private_class_fields/index.html | 201 ++ .../classes/public_class_fields/index.html | 386 +++ .../javascript/reference/classes/static/index.html | 118 + .../deprecated_and_obsolete_features/index.html | 292 ++ .../the_legacy_iterator_protocol/index.html | 72 + .../reference/errors/bad_regexp_flag/index.html | 113 + .../reference/errors/caracter_ilegal/index.html | 83 - .../index.html | 72 - .../reference/errors/illegal_character/index.html | 83 + .../errors/indicador_regexp_no-val/index.html | 113 - .../missing_semicolon_before_statement/index.html | 72 + .../errors/strict_non_simple_params/index.html | 117 + .../index.html" | 117 - .../functions/arguments/callee/index.html | 48 + .../reference/functions/arguments/index.html | 229 ++ .../functions/arguments/length/index.html | 131 + .../reference/functions/arrow_functions/index.html | 530 ++++ .../functions/default_parameters/index.html | 234 ++ .../javascript/reference/functions/get/index.html | 134 + .../web/javascript/reference/functions/index.html | 661 ++++ .../functions/method_definitions/index.html | 226 ++ .../reference/functions/rest_parameters/index.html | 266 ++ .../javascript/reference/functions/set/index.html | 217 ++ .../global_objects/aggregateerror/index.html | 87 + .../global_objects/array/@@iterator/index.html | 89 + .../global_objects/array/@@species/index.html | 76 + .../global_objects/array/@@unscopables/index.html | 78 + .../global_objects/array/concat/index.html | 140 + .../global_objects/array/copywithin/index.html | 165 + .../global_objects/array/entries/index.html | 86 + .../global_objects/array/every/index.html | 195 ++ .../reference/global_objects/array/fill/index.html | 145 + .../global_objects/array/filter/index.html | 231 ++ .../reference/global_objects/array/find/index.html | 233 ++ .../global_objects/array/findindex/index.html | 187 ++ .../reference/global_objects/array/flat/index.html | 174 ++ .../global_objects/array/flatmap/index.html | 128 + .../global_objects/array/foreach/index.html | 257 ++ .../reference/global_objects/array/from/index.html | 242 ++ .../global_objects/array/includes/index.html | 181 ++ .../reference/global_objects/array/index.html | 449 +++ .../global_objects/array/indexof/index.html | 248 ++ .../global_objects/array/isarray/index.html | 128 + .../reference/global_objects/array/join/index.html | 110 + .../reference/global_objects/array/keys/index.html | 84 + .../global_objects/array/lastindexof/index.html | 164 + .../global_objects/array/length/index.html | 143 + .../reference/global_objects/array/map/index.html | 360 +++ .../reference/global_objects/array/of/index.html | 97 + .../reference/global_objects/array/pop/index.html | 94 + .../reference/global_objects/array/push/index.html | 140 + .../global_objects/array/reduce/index.html | 215 ++ .../global_objects/array/reduceright/index.html | 166 + .../global_objects/array/reverse/index.html | 88 + .../global_objects/array/shift/index.html | 124 + .../global_objects/array/slice/index.html | 287 ++ .../reference/global_objects/array/some/index.html | 204 ++ .../reference/global_objects/array/sort/index.html | 301 ++ .../global_objects/array/splice/index.html | 148 + .../global_objects/array/tolocalestring/index.html | 177 ++ .../global_objects/array/tosource/index.html | 112 + .../global_objects/array/tostring/index.html | 78 + .../global_objects/array/unshift/index.html | 100 + .../global_objects/array/values/index.html | 82 + .../arraybuffer/@@species/index.html | 72 + .../arraybuffer/bytelength/index.html | 70 + .../global_objects/arraybuffer/index.html | 139 + .../global_objects/asyncfunction/index.html | 122 + .../global_objects/boolean/boolean/index.html | 75 + .../reference/global_objects/boolean/index.html | 126 + .../global_objects/boolean/tosource/index.html | 36 + .../global_objects/date/getdate/index.html | 119 + .../global_objects/date/getday/index.html | 124 + .../global_objects/date/getfullyear/index.html | 67 + .../global_objects/date/gethours/index.html | 119 + .../global_objects/date/getmilliseconds/index.html | 121 + .../global_objects/date/getminutes/index.html | 118 + .../global_objects/date/getmonth/index.html | 125 + .../global_objects/date/getseconds/index.html | 83 + .../global_objects/date/gettime/index.html | 140 + .../global_objects/date/getutcfullyear/index.html | 121 + .../global_objects/date/getutchours/index.html | 117 + .../reference/global_objects/date/index.html | 132 + .../reference/global_objects/date/now/index.html | 30 + .../reference/global_objects/date/parse/index.html | 35 + .../global_objects/date/setfullyear/index.html | 133 + .../global_objects/date/setmonth/index.html | 78 + .../global_objects/date/todatestring/index.html | 88 + .../global_objects/date/toisostring/index.html | 144 + .../global_objects/date/tojson/index.html | 61 + .../date/tolocaledatestring/index.html | 159 + .../global_objects/date/tolocalestring/index.html | 163 + .../date/tolocaletimestring/index.html | 152 + .../global_objects/date/toutcstring/index.html | 105 + .../reference/global_objects/date/utc/index.html | 78 + .../reference/global_objects/decodeuri/index.html | 38 + .../global_objects/decodeuricomponent/index.html | 42 + .../reference/global_objects/encodeuri/index.html | 61 + .../global_objects/encodeuricomponent/index.html | 161 + .../global_objects/error/error/index.html | 69 + .../global_objects/error/filename/index.html | 48 + .../reference/global_objects/error/index.html | 219 ++ .../global_objects/error/linenumber/index.html | 101 + .../global_objects/error/message/index.html | 114 + .../reference/global_objects/error/name/index.html | 58 + .../global_objects/error/tosource/index.html | 60 + .../global_objects/error/tostring/index.html | 98 + .../reference/global_objects/escape/index.html | 91 + .../reference/global_objects/eval/index.html | 309 ++ .../reference/global_objects/evalerror/index.html | 163 + .../global_objects/function/apply/index.html | 233 ++ .../global_objects/function/arguments/index.html | 44 + .../global_objects/function/bind/index.html | 293 ++ .../global_objects/function/call/index.html | 113 + .../global_objects/function/caller/index.html | 128 + .../global_objects/function/displayname/index.html | 77 + .../global_objects/function/function/index.html | 92 + .../reference/global_objects/function/index.html | 118 + .../global_objects/function/length/index.html | 151 + .../global_objects/function/name/index.html | 223 ++ .../global_objects/function/tosource/index.html | 97 + .../global_objects/function/tostring/index.html | 130 + .../reference/global_objects/generator/index.html | 228 ++ .../global_objects/generator/next/index.html | 109 + .../global_objects/generator/return/index.html | 102 + .../global_objects/generator/throw/index.html | 94 + .../javascript/reference/global_objects/index.html | 203 ++ .../reference/global_objects/infinity/index.html | 96 + .../global_objects/internalerror/index.html | 98 + .../internalerror/internalerror/index.html | 55 + .../reference/global_objects/intl/index.html | 126 + .../intl/numberformat/format/index.html | 92 + .../global_objects/intl/numberformat/index.html | 188 ++ .../intl/relativetimeformat/index.html | 106 + .../reference/global_objects/isfinite/index.html | 114 + .../reference/global_objects/isnan/index.html | 88 + .../reference/global_objects/json/index.html | 231 ++ .../reference/global_objects/json/parse/index.html | 178 ++ .../global_objects/json/stringify/index.html | 265 ++ .../reference/global_objects/map/clear/index.html | 109 + .../reference/global_objects/map/delete/index.html | 114 + .../global_objects/map/entries/index.html | 109 + .../global_objects/map/foreach/index.html | 94 + .../reference/global_objects/map/get/index.html | 77 + .../reference/global_objects/map/has/index.html | 65 + .../reference/global_objects/map/index.html | 213 ++ .../reference/global_objects/map/keys/index.html | 109 + .../reference/global_objects/map/set/index.html | 133 + .../reference/global_objects/map/size/index.html | 110 + .../reference/global_objects/map/values/index.html | 77 + .../reference/global_objects/math/abs/index.html | 149 + .../reference/global_objects/math/acos/index.html | 99 + .../reference/global_objects/math/acosh/index.html | 94 + .../reference/global_objects/math/asin/index.html | 144 + .../reference/global_objects/math/asinh/index.html | 90 + .../reference/global_objects/math/atan/index.html | 107 + .../reference/global_objects/math/atan2/index.html | 141 + .../reference/global_objects/math/atanh/index.html | 87 + .../reference/global_objects/math/cbrt/index.html | 96 + .../reference/global_objects/math/ceil/index.html | 166 + .../reference/global_objects/math/cos/index.html | 74 + .../reference/global_objects/math/e/index.html | 83 + .../reference/global_objects/math/exp/index.html | 136 + .../reference/global_objects/math/expm1/index.html | 89 + .../reference/global_objects/math/floor/index.html | 124 + .../global_objects/math/fround/index.html | 199 ++ .../reference/global_objects/math/hypot/index.html | 124 + .../reference/global_objects/math/index.html | 196 ++ .../reference/global_objects/math/ln10/index.html | 84 + .../reference/global_objects/math/ln2/index.html | 83 + .../reference/global_objects/math/log/index.html | 112 + .../reference/global_objects/math/log10/index.html | 137 + .../global_objects/math/log10e/index.html | 130 + .../reference/global_objects/math/log2/index.html | 96 + .../reference/global_objects/math/log2e/index.html | 27 + .../reference/global_objects/math/max/index.html | 145 + .../reference/global_objects/math/min/index.html | 150 + .../reference/global_objects/math/pi/index.html | 126 + .../reference/global_objects/math/pow/index.html | 140 + .../global_objects/math/random/index.html | 132 + .../reference/global_objects/math/round/index.html | 218 ++ .../reference/global_objects/math/sign/index.html | 151 + .../reference/global_objects/math/sin/index.html | 126 + .../reference/global_objects/math/sqrt/index.html | 134 + .../global_objects/math/sqrt1_2/index.html | 123 + .../reference/global_objects/math/sqrt2/index.html | 124 + .../reference/global_objects/math/tan/index.html | 82 + .../reference/global_objects/math/tanh/index.html | 95 + .../reference/global_objects/math/trunc/index.html | 144 + .../reference/global_objects/nan/index.html | 46 + .../reference/global_objects/null/index.html | 129 + .../reference/global_objects/number/index.html | 181 ++ .../global_objects/number/isfinite/index.html | 88 + .../global_objects/number/isinteger/index.html | 94 + .../global_objects/number/isnan/index.html | 140 + .../global_objects/number/issafeinteger/index.html | 99 + .../number/max_safe_integer/index.html | 68 + .../global_objects/number/max_value/index.html | 131 + .../global_objects/number/min_value/index.html | 121 + .../reference/global_objects/number/nan/index.html | 59 + .../number/negative_infinity/index.html | 117 + .../global_objects/number/parsefloat/index.html | 76 + .../global_objects/number/parseint/index.html | 80 + .../number/positive_infinity/index.html | 115 + .../global_objects/number/tofixed/index.html | 147 + .../number/tolocalestring/index.html | 155 + .../global_objects/number/toprecision/index.html | 102 + .../global_objects/number/tostring/index.html | 63 + .../global_objects/number/valueof/index.html | 81 + .../object/__definegetter__/index.html | 144 + .../object/__lookupgetter__/index.html | 84 + .../global_objects/object/assign/index.html | 274 ++ .../global_objects/object/constructor/index.html | 161 + .../global_objects/object/create/index.html | 377 +++ .../object/defineproperties/index.html | 194 ++ .../object/defineproperty/index.html | 419 +++ .../global_objects/object/entries/index.html | 161 + .../global_objects/object/freeze/index.html | 174 ++ .../global_objects/object/fromentries/index.html | 106 + .../object/getownpropertydescriptor/index.html | 161 + .../object/getownpropertydescriptors/index.html | 117 + .../object/getownpropertynames/index.html | 163 + .../object/getownpropertysymbols/index.html | 123 + .../object/getprototypeof/index.html | 137 + .../object/hasownproperty/index.html | 186 ++ .../reference/global_objects/object/index.html | 187 ++ .../reference/global_objects/object/is/index.html | 172 ++ .../global_objects/object/isextensible/index.html | 144 + .../global_objects/object/isfrozen/index.html | 190 ++ .../global_objects/object/isprototypeof/index.html | 158 + .../global_objects/object/issealed/index.html | 140 + .../global_objects/object/keys/index.html | 156 + .../object/preventextensions/index.html | 176 ++ .../object/propertyisenumerable/index.html | 185 ++ .../global_objects/object/proto/index.html | 128 + .../global_objects/object/seal/index.html | 167 + .../object/setprototypeof/index.html | 237 ++ .../object/tolocalestring/index.html | 106 + .../global_objects/object/tosource/index.html | 126 + .../global_objects/object/tostring/index.html | 70 + .../global_objects/object/valueof/index.html | 157 + .../global_objects/object/values/index.html | 97 + .../reference/global_objects/parsefloat/index.html | 58 + .../reference/global_objects/parseint/index.html | 89 + .../global_objects/promise/all/index.html | 123 + .../global_objects/promise/catch/index.html | 183 ++ .../global_objects/promise/finally/index.html | 95 + .../reference/global_objects/promise/index.html | 222 ++ .../global_objects/promise/race/index.html | 112 + .../global_objects/promise/reject/index.html | 80 + .../global_objects/promise/resolve/index.html | 150 + .../global_objects/promise/then/index.html | 302 ++ .../handler/getownpropertydescriptor/index.html | 129 - .../global_objects/proxy/handler/index.html | 84 - .../global_objects/proxy/handler/set/index.html | 122 - .../reference/global_objects/proxy/index.html | 439 +++ .../proxy/getownpropertydescriptor/index.html | 129 + .../global_objects/proxy/proxy/index.html | 84 + .../global_objects/proxy/proxy/set/index.html | 122 + .../global_objects/rangeerror/prototype/index.html | 131 - .../global_objects/referenceerror/index.html | 99 + .../global_objects/regexp/compile/index.html | 93 + .../global_objects/regexp/exec/index.html | 238 ++ .../global_objects/regexp/ignorecase/index.html | 142 + .../reference/global_objects/regexp/index.html | 264 ++ .../global_objects/regexp/regexp/index.html | 114 + .../global_objects/regexp/rightcontext/index.html | 54 + .../global_objects/regexp/test/index.html | 152 + .../global_objects/regexp/tostring/index.html | 171 ++ .../global_objects/set/@@iterator/index.html | 86 + .../reference/global_objects/set/add/index.html | 124 + .../reference/global_objects/set/clear/index.html | 119 + .../reference/global_objects/set/delete/index.html | 117 + .../global_objects/set/entries/index.html | 71 + .../reference/global_objects/set/has/index.html | 124 + .../reference/global_objects/set/index.html | 230 ++ .../reference/global_objects/set/size/index.html | 106 + .../reference/global_objects/set/values/index.html | 72 + .../global_objects/string/anchor/index.html | 56 + .../reference/global_objects/string/big/index.html | 54 + .../global_objects/string/blink/index.html | 42 + .../global_objects/string/bold/index.html | 43 + .../global_objects/string/charat/index.html | 143 + .../global_objects/string/charcodeat/index.html | 65 + .../global_objects/string/codepointat/index.html | 127 + .../global_objects/string/concat/index.html | 90 + .../global_objects/string/endswith/index.html | 88 + .../global_objects/string/fixed/index.html | 35 + .../global_objects/string/fontcolor/index.html | 122 + .../global_objects/string/fontsize/index.html | 123 + .../global_objects/string/fromcharcode/index.html | 130 + .../global_objects/string/fromcodepoint/index.html | 204 ++ .../global_objects/string/includes/index.html | 108 + .../reference/global_objects/string/index.html | 385 +++ .../global_objects/string/indexof/index.html | 104 + .../global_objects/string/italics/index.html | 49 + .../global_objects/string/lastindexof/index.html | 79 + .../global_objects/string/length/index.html | 94 + .../global_objects/string/link/index.html | 56 + .../global_objects/string/localecompare/index.html | 159 + .../global_objects/string/match/index.html | 78 + .../global_objects/string/matchall/index.html | 134 + .../global_objects/string/normalize/index.html | 126 + .../global_objects/string/padstart/index.html | 100 + .../reference/global_objects/string/raw/index.html | 112 + .../global_objects/string/repeat/index.html | 128 + .../global_objects/string/replace/index.html | 202 ++ .../global_objects/string/search/index.html | 153 + .../global_objects/string/slice/index.html | 161 + .../global_objects/string/small/index.html | 38 + .../global_objects/string/split/index.html | 240 ++ .../global_objects/string/startswith/index.html | 97 + .../global_objects/string/strike/index.html | 42 + .../reference/global_objects/string/sub/index.html | 35 + .../global_objects/string/substr/index.html | 83 + .../global_objects/string/substring/index.html | 92 + .../reference/global_objects/string/sup/index.html | 35 + .../string/tolocalelowercase/index.html | 113 + .../string/tolocaleuppercase/index.html | 100 + .../global_objects/string/tolowercase/index.html | 40 + .../global_objects/string/tosource/index.html | 56 + .../global_objects/string/tostring/index.html | 28 + .../global_objects/string/touppercase/index.html | 39 + .../global_objects/string/trim/index.html | 133 + .../global_objects/string/trimend/index.html | 82 + .../global_objects/string/valueof/index.html | 28 + .../reference/global_objects/symbol/for/index.html | 153 + .../global_objects/symbol/hasinstance/index.html | 105 + .../reference/global_objects/symbol/index.html | 364 +++ .../global_objects/symbol/iterator/index.html | 98 + .../global_objects/syntaxerror/index.html | 176 ++ .../global_objects/typedarray/buffer/index.html | 110 + .../reference/global_objects/typedarray/index.html | 317 ++ .../reference/global_objects/uint8array/index.html | 260 ++ .../reference/global_objects/undefined/index.html | 183 ++ .../reference/global_objects/unescape/index.html | 123 + .../reference/global_objects/urierror/index.html | 136 + .../global_objects/weakmap/clear/index.html | 52 + .../global_objects/weakmap/delete/index.html | 124 + .../global_objects/weakmap/get/index.html | 80 + .../global_objects/weakmap/has/index.html | 83 + .../reference/global_objects/weakmap/index.html | 278 ++ .../global_objects/weakmap/set/index.html | 91 + .../reference/global_objects/weakset/index.html | 227 ++ .../global_objects/webassembly/index.html | 120 + files/es/web/javascript/reference/index.html | 31 + .../reference/iteration_protocols/index.html | 320 ++ .../reference/lexical_grammar/index.html | 661 ++++ .../reference/operators/addition/index.html | 77 + .../reference/operators/assignment/index.html | 62 + .../reference/operators/async_function/index.html | 102 + .../reference/operators/await/index.html | 102 + .../reference/operators/class/index.html | 157 + .../reference/operators/comma_operator/index.html | 132 + .../operators/conditional_operator/index.html | 171 ++ .../reference/operators/decrement/index.html | 83 + .../reference/operators/delete/index.html | 242 ++ .../operators/destructuring_assignment/index.html | 442 +++ .../reference/operators/division/index.html | 77 + .../reference/operators/equality/index.html | 129 + .../reference/operators/function/index.html | 73 + .../reference/operators/function_star_/index.html | 91 + .../reference/operators/grouping/index.html | 128 + .../javascript/reference/operators/in/index.html | 139 + .../web/javascript/reference/operators/index.html | 280 ++ .../reference/operators/instanceof/index.html | 88 + .../reference/operators/new.target/index.html | 139 + .../javascript/reference/operators/new/index.html | 179 ++ .../operators/operator_precedence/index.html | 297 ++ .../operators/optional_chaining/index.html | 187 ++ .../operators/pipeline_operator/index.html | 78 + .../operators/property_accessors/index.html | 85 + .../reference/operators/remainder/index.html | 82 + .../reference/operators/spread_syntax/index.html | 242 ++ .../reference/operators/strict_equality/index.html | 101 + .../reference/operators/subtraction/index.html | 65 + .../reference/operators/super/index.html | 178 ++ .../javascript/reference/operators/this/index.html | 239 ++ .../reference/operators/typeof/index.html | 76 + .../javascript/reference/operators/void/index.html | 36 + .../reference/operators/yield/index.html | 130 + .../reference/operators/yield_star_/index.html | 199 ++ .../reference/statements/async_function/index.html | 173 ++ .../reference/statements/block/index.html | 89 + .../reference/statements/break/index.html | 41 + .../reference/statements/class/index.html | 148 + .../reference/statements/const/index.html | 127 + .../reference/statements/continue/index.html | 66 + .../reference/statements/debugger/index.html | 125 + .../reference/statements/do...while/index.html | 49 + .../reference/statements/empty/index.html | 141 + .../reference/statements/export/index.html | 175 ++ .../reference/statements/for-await...of/index.html | 144 + .../reference/statements/for...in/index.html | 150 + .../reference/statements/for...of/index.html | 319 ++ .../javascript/reference/statements/for/index.html | 57 + .../reference/statements/function/index.html | 52 + .../reference/statements/function_star_/index.html | 224 ++ .../reference/statements/if...else/index.html | 109 + .../reference/statements/import.meta/index.html | 93 + .../reference/statements/import/index.html | 177 ++ .../web/javascript/reference/statements/index.html | 141 + .../reference/statements/label/index.html | 35 + .../javascript/reference/statements/let/index.html | 393 +++ .../reference/statements/return/index.html | 73 + .../reference/statements/switch/index.html | 245 ++ .../reference/statements/throw/index.html | 153 + .../reference/statements/try...catch/index.html | 254 ++ .../javascript/reference/statements/var/index.html | 163 + .../reference/statements/while/index.html | 58 + .../reference/statements/with/index.html | 166 + .../javascript/reference/strict_mode/index.html | 368 +++ .../reference/template_literals/index.html | 314 ++ .../web/javascript/referencia/acerca_de/index.html | 158 - .../index.html" | 292 -- .../the_legacy_iterator_protocol/index.html" | 72 - .../referencia/classes/class_fields/index.html | 386 --- .../referencia/classes/constructor/index.html | 102 - .../referencia/classes/extends/index.html | 167 - .../web/javascript/referencia/classes/index.html | 372 --- .../classes/private_class_fields/index.html | 201 -- .../referencia/classes/static/index.html | 118 - .../funciones/arguments/callee/index.html | 48 - .../referencia/funciones/arguments/index.html | 229 -- .../funciones/arguments/length/index.html | 131 - .../funciones/arrow_functions/index.html | 530 ---- .../javascript/referencia/funciones/get/index.html | 134 - .../web/javascript/referencia/funciones/index.html | 661 ---- .../funciones/method_definitions/index.html | 226 -- .../funciones/parametros_por_defecto/index.html | 234 -- .../funciones/parametros_rest/index.html | 266 -- .../javascript/referencia/funciones/set/index.html | 217 -- .../referencia/gramatica_lexica/index.html | 661 ---- files/es/web/javascript/referencia/index.html | 31 - .../referencia/iteration_protocols/index.html | 320 -- .../javascript/referencia/modo_estricto/index.html | 368 --- .../objetos_globales/aggregateerror/index.html | 87 - .../objetos_globales/array/@@iterator/index.html | 89 - .../objetos_globales/array/@@species/index.html | 76 - .../array/@@unscopables/index.html | 78 - .../objetos_globales/array/concat/index.html | 140 - .../objetos_globales/array/copywithin/index.html | 165 - .../objetos_globales/array/entries/index.html | 86 - .../objetos_globales/array/every/index.html | 195 -- .../objetos_globales/array/fill/index.html | 145 - .../objetos_globales/array/filter/index.html | 231 -- .../objetos_globales/array/find/index.html | 233 -- .../objetos_globales/array/findindex/index.html | 187 -- .../objetos_globales/array/flat/index.html | 174 -- .../objetos_globales/array/flatmap/index.html | 128 - .../objetos_globales/array/foreach/index.html | 257 -- .../objetos_globales/array/from/index.html | 242 -- .../objetos_globales/array/includes/index.html | 181 -- .../referencia/objetos_globales/array/index.html | 449 --- .../objetos_globales/array/indexof/index.html | 248 -- .../objetos_globales/array/isarray/index.html | 128 - .../objetos_globales/array/join/index.html | 110 - .../objetos_globales/array/keys/index.html | 84 - .../objetos_globales/array/lastindexof/index.html | 164 - .../objetos_globales/array/length/index.html | 143 - .../objetos_globales/array/map/index.html | 360 --- .../objetos_globales/array/of/index.html | 97 - .../objetos_globales/array/pop/index.html | 94 - .../objetos_globales/array/prototype/index.html | 188 -- .../objetos_globales/array/push/index.html | 140 - .../objetos_globales/array/reduce/index.html | 215 -- .../objetos_globales/array/reduceright/index.html | 166 - .../objetos_globales/array/reverse/index.html | 88 - .../objetos_globales/array/shift/index.html | 124 - .../objetos_globales/array/slice/index.html | 287 -- .../objetos_globales/array/some/index.html | 204 -- .../objetos_globales/array/sort/index.html | 301 -- .../objetos_globales/array/splice/index.html | 148 - .../array/tolocalestring/index.html | 177 -- .../objetos_globales/array/tosource/index.html | 112 - .../objetos_globales/array/tostring/index.html | 78 - .../objetos_globales/array/unshift/index.html | 100 - .../objetos_globales/array/values/index.html | 82 - .../arraybuffer/@@species/index.html | 72 - .../arraybuffer/bytelength/index.html | 70 - .../objetos_globales/arraybuffer/index.html | 139 - .../arraybuffer/prototype/index.html | 69 - .../objetos_globales/boolean/boolean/index.html | 75 - .../referencia/objetos_globales/boolean/index.html | 126 - .../objetos_globales/boolean/tosource/index.html | 36 - .../objetos_globales/date/getdate/index.html | 119 - .../objetos_globales/date/getday/index.html | 124 - .../objetos_globales/date/getfullyear/index.html | 67 - .../objetos_globales/date/gethours/index.html | 119 - .../date/getmilliseconds/index.html | 121 - .../objetos_globales/date/getminutes/index.html | 118 - .../objetos_globales/date/getmonth/index.html | 125 - .../objetos_globales/date/getseconds/index.html | 83 - .../objetos_globales/date/gettime/index.html | 140 - .../date/getutcfullyear/index.html | 121 - .../objetos_globales/date/getutchours/index.html | 117 - .../referencia/objetos_globales/date/index.html | 132 - .../objetos_globales/date/now/index.html | 30 - .../objetos_globales/date/parse/index.html | 35 - .../objetos_globales/date/prototype/index.html | 201 -- .../objetos_globales/date/setfullyear/index.html | 133 - .../objetos_globales/date/setmonth/index.html | 78 - .../objetos_globales/date/todatestring/index.html | 88 - .../objetos_globales/date/toisostring/index.html | 144 - .../objetos_globales/date/tojson/index.html | 61 - .../date/tolocaledatestring/index.html | 159 - .../date/tolocalestring/index.html | 163 - .../date/tolocaletimestring/index.html | 152 - .../objetos_globales/date/toutcstring/index.html | 105 - .../objetos_globales/date/utc/index.html | 78 - .../objetos_globales/decodeuri/index.html | 38 - .../objetos_globales/decodeuricomponent/index.html | 42 - .../objetos_globales/encodeuri/index.html | 61 - .../objetos_globales/encodeuricomponent/index.html | 161 - .../error/constructor_error/index.html | 69 - .../objetos_globales/error/filename/index.html | 48 - .../referencia/objetos_globales/error/index.html | 219 -- .../objetos_globales/error/linenumber/index.html | 101 - .../objetos_globales/error/message/index.html | 114 - .../objetos_globales/error/name/index.html | 58 - .../objetos_globales/error/prototype/index.html | 154 - .../objetos_globales/error/tosource/index.html | 60 - .../objetos_globales/error/tostring/index.html | 98 - .../referencia/objetos_globales/escape/index.html | 91 - .../referencia/objetos_globales/eval/index.html | 309 -- .../objetos_globales/evalerror/index.html | 163 - .../funcionesas\303\255ncronas/index.html" | 122 - .../objetos_globales/function/apply/index.html | 233 -- .../objetos_globales/function/arguments/index.html | 44 - .../objetos_globales/function/bind/index.html | 293 -- .../objetos_globales/function/call/index.html | 113 - .../objetos_globales/function/caller/index.html | 128 - .../function/displayname/index.html | 77 - .../function/funci\303\263n/index.html" | 92 - .../objetos_globales/function/index.html | 118 - .../objetos_globales/function/length/index.html | 151 - .../objetos_globales/function/name/index.html | 223 -- .../objetos_globales/function/prototype/index.html | 65 - .../objetos_globales/function/tosource/index.html | 97 - .../objetos_globales/function/tostring/index.html | 130 - .../objetos_globales/generador/index.html | 228 -- .../objetos_globales/generador/next/index.html | 109 - .../objetos_globales/generador/return/index.html | 102 - .../objetos_globales/generador/throw/index.html | 94 - .../referencia/objetos_globales/index.html | 203 -- .../objetos_globales/infinity/index.html | 96 - .../constructor_internalerror/index.html | 55 - .../objetos_globales/internalerror/index.html | 98 - .../referencia/objetos_globales/intl/index.html | 126 - .../intl/numberformat/format/index.html | 92 - .../objetos_globales/intl/numberformat/index.html | 188 -- .../intl/relativetimeformat/index.html | 106 - .../objetos_globales/isfinite/index.html | 114 - .../referencia/objetos_globales/isnan/index.html | 88 - .../referencia/objetos_globales/json/index.html | 231 -- .../objetos_globales/json/parse/index.html | 178 -- .../objetos_globales/json/stringify/index.html | 265 -- .../objetos_globales/map/clear/index.html | 109 - .../objetos_globales/map/delete/index.html | 114 - .../objetos_globales/map/entries/index.html | 109 - .../objetos_globales/map/foreach/index.html | 94 - .../referencia/objetos_globales/map/get/index.html | 77 - .../referencia/objetos_globales/map/has/index.html | 65 - .../referencia/objetos_globales/map/index.html | 213 -- .../objetos_globales/map/keys/index.html | 109 - .../objetos_globales/map/prototype/index.html | 135 - .../referencia/objetos_globales/map/set/index.html | 133 - .../objetos_globales/map/size/index.html | 110 - .../objetos_globales/map/values/index.html | 77 - .../objetos_globales/math/abs/index.html | 149 - .../objetos_globales/math/acos/index.html | 99 - .../objetos_globales/math/acosh/index.html | 94 - .../objetos_globales/math/asin/index.html | 144 - .../objetos_globales/math/asinh/index.html | 90 - .../objetos_globales/math/atan/index.html | 107 - .../objetos_globales/math/atan2/index.html | 141 - .../objetos_globales/math/atanh/index.html | 87 - .../objetos_globales/math/cbrt/index.html | 96 - .../objetos_globales/math/ceil/index.html | 166 - .../objetos_globales/math/cos/index.html | 74 - .../referencia/objetos_globales/math/e/index.html | 83 - .../objetos_globales/math/exp/index.html | 136 - .../objetos_globales/math/expm1/index.html | 89 - .../objetos_globales/math/floor/index.html | 124 - .../objetos_globales/math/fround/index.html | 199 -- .../objetos_globales/math/hypot/index.html | 124 - .../referencia/objetos_globales/math/index.html | 196 -- .../objetos_globales/math/ln10/index.html | 84 - .../objetos_globales/math/ln2/index.html | 83 - .../objetos_globales/math/log/index.html | 112 - .../objetos_globales/math/log10/index.html | 137 - .../objetos_globales/math/log10e/index.html | 130 - .../objetos_globales/math/log2/index.html | 96 - .../objetos_globales/math/log2e/index.html | 27 - .../objetos_globales/math/max/index.html | 145 - .../objetos_globales/math/min/index.html | 150 - .../referencia/objetos_globales/math/pi/index.html | 126 - .../objetos_globales/math/pow/index.html | 140 - .../objetos_globales/math/random/index.html | 132 - .../objetos_globales/math/round/index.html | 218 -- .../objetos_globales/math/seno/index.html | 126 - .../objetos_globales/math/sign/index.html | 151 - .../objetos_globales/math/sqrt/index.html | 134 - .../objetos_globales/math/sqrt1_2/index.html | 123 - .../objetos_globales/math/sqrt2/index.html | 124 - .../objetos_globales/math/tan/index.html | 82 - .../objetos_globales/math/tanh/index.html | 95 - .../objetos_globales/math/trunc/index.html | 144 - .../referencia/objetos_globales/nan/index.html | 46 - .../referencia/objetos_globales/null/index.html | 129 - .../referencia/objetos_globales/number/index.html | 181 -- .../objetos_globales/number/isfinite/index.html | 88 - .../objetos_globales/number/isinteger/index.html | 94 - .../objetos_globales/number/isnan/index.html | 140 - .../number/issafeinteger/index.html | 99 - .../number/max_safe_integer/index.html | 68 - .../objetos_globales/number/max_value/index.html | 131 - .../objetos_globales/number/min_value/index.html | 121 - .../objetos_globales/number/nan/index.html | 59 - .../number/negative_infinity/index.html | 117 - .../objetos_globales/number/parsefloat/index.html | 76 - .../objetos_globales/number/parseint/index.html | 80 - .../number/positive_infinity/index.html | 115 - .../objetos_globales/number/prototype/index.html | 16 - .../objetos_globales/number/tofixed/index.html | 147 - .../number/tolocalestring/index.html | 155 - .../objetos_globales/number/toprecision/index.html | 102 - .../objetos_globales/number/tostring/index.html | 63 - .../objetos_globales/number/valueof/index.html | 81 - .../object/__definegetter__/index.html | 144 - .../object/__lookupgetter__/index.html | 84 - .../objetos_globales/object/assign/index.html | 274 -- .../objetos_globales/object/constructor/index.html | 161 - .../objetos_globales/object/create/index.html | 377 --- .../object/defineproperties/index.html | 194 -- .../object/defineproperty/index.html | 419 --- .../objetos_globales/object/entries/index.html | 161 - .../objetos_globales/object/freeze/index.html | 174 -- .../objetos_globales/object/fromentries/index.html | 106 - .../object/getownpropertydescriptor/index.html | 161 - .../object/getownpropertydescriptors/index.html | 117 - .../object/getownpropertynames/index.html | 163 - .../object/getownpropertysymbols/index.html | 123 - .../object/getprototypeof/index.html | 137 - .../object/hasownproperty/index.html | 186 -- .../referencia/objetos_globales/object/index.html | 187 -- .../objetos_globales/object/is/index.html | 172 -- .../object/isextensible/index.html | 144 - .../objetos_globales/object/isfrozen/index.html | 190 -- .../object/isprototypeof/index.html | 158 - .../objetos_globales/object/issealed/index.html | 140 - .../objetos_globales/object/keys/index.html | 156 - .../object/preventextensions/index.html | 176 -- .../object/propertyisenumerable/index.html | 185 -- .../objetos_globales/object/proto/index.html | 128 - .../objetos_globales/object/prototype/index.html | 195 -- .../objetos_globales/object/seal/index.html | 167 - .../object/setprototypeof/index.html | 237 -- .../object/tolocalestring/index.html | 106 - .../objetos_globales/object/tosource/index.html | 126 - .../objetos_globales/object/tostring/index.html | 70 - .../objetos_globales/object/valueof/index.html | 157 - .../objetos_globales/object/values/index.html | 97 - .../objetos_globales/parsefloat/index.html | 58 - .../objetos_globales/parseint/index.html | 89 - .../objetos_globales/promise/all/index.html | 123 - .../objetos_globales/promise/catch/index.html | 183 -- .../objetos_globales/promise/finally/index.html | 95 - .../referencia/objetos_globales/promise/index.html | 222 -- .../objetos_globales/promise/prototype/index.html | 69 - .../objetos_globales/promise/race/index.html | 112 - .../objetos_globales/promise/reject/index.html | 80 - .../objetos_globales/promise/resolve/index.html | 150 - .../objetos_globales/promise/then/index.html | 302 -- .../referencia/objetos_globales/proxy/index.html | 439 --- .../objetos_globales/referenceerror/index.html | 99 - .../objetos_globales/regexp/compile/index.html | 93 - .../objetos_globales/regexp/exec/index.html | 238 -- .../objetos_globales/regexp/ignorecase/index.html | 142 - .../referencia/objetos_globales/regexp/index.html | 264 -- .../objetos_globales/regexp/regexp/index.html | 114 - .../regexp/rightcontext/index.html | 54 - .../objetos_globales/regexp/test/index.html | 152 - .../objetos_globales/regexp/tostring/index.html | 171 -- .../objetos_globales/set/@@iterator/index.html | 86 - .../referencia/objetos_globales/set/add/index.html | 124 - .../objetos_globales/set/clear/index.html | 119 - .../objetos_globales/set/delete/index.html | 117 - .../objetos_globales/set/entries/index.html | 71 - .../referencia/objetos_globales/set/has/index.html | 124 - .../referencia/objetos_globales/set/index.html | 230 -- .../objetos_globales/set/size/index.html | 106 - .../objetos_globales/set/values/index.html | 72 - .../objetos_globales/string/anchor/index.html | 56 - .../objetos_globales/string/big/index.html | 54 - .../objetos_globales/string/blink/index.html | 42 - .../objetos_globales/string/bold/index.html | 43 - .../objetos_globales/string/charat/index.html | 143 - .../objetos_globales/string/charcodeat/index.html | 65 - .../objetos_globales/string/codepointat/index.html | 127 - .../objetos_globales/string/concat/index.html | 90 - .../objetos_globales/string/endswith/index.html | 88 - .../objetos_globales/string/fixed/index.html | 35 - .../objetos_globales/string/fontcolor/index.html | 122 - .../objetos_globales/string/fontsize/index.html | 123 - .../string/fromcharcode/index.html | 130 - .../string/fromcodepoint/index.html | 204 -- .../objetos_globales/string/includes/index.html | 108 - .../referencia/objetos_globales/string/index.html | 385 --- .../objetos_globales/string/indexof/index.html | 104 - .../objetos_globales/string/italics/index.html | 49 - .../objetos_globales/string/lastindexof/index.html | 79 - .../objetos_globales/string/length/index.html | 94 - .../objetos_globales/string/link/index.html | 56 - .../string/localecompare/index.html | 159 - .../objetos_globales/string/match/index.html | 78 - .../objetos_globales/string/matchall/index.html | 134 - .../objetos_globales/string/normalize/index.html | 126 - .../objetos_globales/string/padstart/index.html | 100 - .../objetos_globales/string/prototype/index.html | 118 - .../objetos_globales/string/raw/index.html | 112 - .../objetos_globales/string/repeat/index.html | 128 - .../objetos_globales/string/replace/index.html | 202 -- .../objetos_globales/string/search/index.html | 153 - .../objetos_globales/string/slice/index.html | 161 - .../objetos_globales/string/small/index.html | 38 - .../objetos_globales/string/split/index.html | 240 -- .../objetos_globales/string/startswith/index.html | 97 - .../objetos_globales/string/strike/index.html | 42 - .../objetos_globales/string/sub/index.html | 35 - .../objetos_globales/string/substr/index.html | 83 - .../objetos_globales/string/substring/index.html | 92 - .../objetos_globales/string/sup/index.html | 35 - .../string/tolocalelowercase/index.html | 113 - .../string/tolocaleuppercase/index.html | 100 - .../objetos_globales/string/tolowercase/index.html | 40 - .../objetos_globales/string/tosource/index.html | 56 - .../objetos_globales/string/tostring/index.html | 28 - .../objetos_globales/string/touppercase/index.html | 39 - .../objetos_globales/string/trim/index.html | 133 - .../objetos_globales/string/trimend/index.html | 82 - .../objetos_globales/string/valueof/index.html | 28 - .../objetos_globales/symbol/for/index.html | 153 - .../objetos_globales/symbol/hasinstance/index.html | 105 - .../referencia/objetos_globales/symbol/index.html | 364 --- .../objetos_globales/symbol/iterator/index.html | 98 - .../objetos_globales/syntaxerror/index.html | 176 -- .../syntaxerror/prototype/index.html | 133 - .../objetos_globales/typedarray/buffer/index.html | 110 - .../objetos_globales/typedarray/index.html | 317 -- .../objetos_globales/uint8array/index.html | 260 -- .../objetos_globales/undefined/index.html | 183 -- .../objetos_globales/unescape/index.html | 123 - .../objetos_globales/urierror/index.html | 136 - .../objetos_globales/weakmap/clear/index.html | 52 - .../objetos_globales/weakmap/delete/index.html | 124 - .../objetos_globales/weakmap/get/index.html | 80 - .../objetos_globales/weakmap/has/index.html | 83 - .../referencia/objetos_globales/weakmap/index.html | 278 -- .../objetos_globales/weakmap/prototype/index.html | 143 - .../objetos_globales/weakmap/set/index.html | 91 - .../referencia/objetos_globales/weakset/index.html | 227 -- .../objetos_globales/webassembly/index.html | 120 - .../operadores/adici\303\263n/index.html" | 77 - .../operadores/aritm\303\251ticos/index.html" | 315 -- .../referencia/operadores/asignacion/index.html | 62 - .../operadores/assignment_operators/index.html | 462 --- .../operadores/async_function/index.html | 102 - .../referencia/operadores/await/index.html | 102 - .../operadores/bitwise_operators/index.html | 722 ----- .../referencia/operadores/class/index.html | 157 - .../referencia/operadores/comparacion/index.html | 129 - .../operadores/comparison_operators/index.html | 262 -- .../operadores/conditional_operator/index.html | 171 -- .../referencia/operadores/decremento/index.html | 83 - .../referencia/operadores/delete/index.html | 242 -- .../operadores/destructuring_assignment/index.html | 442 --- .../referencia/operadores/division/index.html | 77 - .../operadores/encadenamiento_opcional/index.html | 187 -- .../referencia/operadores/function/index.html | 73 - .../operadores/function_star_/index.html | 91 - .../referencia/operadores/grouping/index.html | 128 - .../javascript/referencia/operadores/in/index.html | 139 - .../javascript/referencia/operadores/index.html | 280 -- .../referencia/operadores/instanceof/index.html | 88 - .../referencia/operadores/miembros/index.html | 85 - .../referencia/operadores/new.target/index.html | 139 - .../referencia/operadores/new/index.html | 179 -- .../referencia/operadores/operador_coma/index.html | 132 - .../operadores_l\303\263gicos/index.html" | 296 -- .../operadores/operator_precedence/index.html | 297 -- .../operadores/pipeline_operator/index.html | 78 - .../referencia/operadores/resto/index.html | 82 - .../operadores/sintaxis_spread/index.html | 242 -- .../operadores/spread_operator/index.html | 220 -- .../operadores/strict_equality/index.html | 101 - .../referencia/operadores/super/index.html | 178 -- .../operadores/sustracci\303\263n/index.html" | 65 - .../referencia/operadores/this/index.html | 239 -- .../referencia/operadores/typeof/index.html | 76 - .../referencia/operadores/void/index.html | 36 - .../referencia/operadores/yield/index.html | 130 - .../referencia/operadores/yield_star_/index.html | 199 -- .../referencia/palabras_reservadas/index.html | 99 - .../referencia/sentencias/block/index.html | 89 - .../referencia/sentencias/break/index.html | 41 - .../referencia/sentencias/class/index.html | 148 - .../referencia/sentencias/const/index.html | 127 - .../referencia/sentencias/continue/index.html | 66 - .../referencia/sentencias/debugger/index.html | 125 - .../referencia/sentencias/default/index.html | 121 - .../referencia/sentencias/do...while/index.html | 49 - .../referencia/sentencias/empty/index.html | 141 - .../referencia/sentencias/export/index.html | 175 -- .../sentencias/for-await...of/index.html | 144 - .../referencia/sentencias/for...in/index.html | 150 - .../referencia/sentencias/for...of/index.html | 319 -- .../referencia/sentencias/for/index.html | 57 - .../sentencias/funcion_asincrona/index.html | 173 -- .../referencia/sentencias/function/index.html | 52 - .../sentencias/function_star_/index.html | 224 -- .../referencia/sentencias/if...else/index.html | 109 - .../referencia/sentencias/import.meta/index.html | 93 - .../referencia/sentencias/import/index.html | 177 -- .../javascript/referencia/sentencias/index.html | 141 - .../referencia/sentencias/label/index.html | 35 - .../referencia/sentencias/let/index.html | 393 --- .../referencia/sentencias/return/index.html | 73 - .../referencia/sentencias/switch/index.html | 245 -- .../referencia/sentencias/throw/index.html | 153 - .../referencia/sentencias/try...catch/index.html | 254 -- .../referencia/sentencias/var/index.html | 163 - .../referencia/sentencias/while/index.html | 58 - .../referencia/sentencias/with/index.html | 166 - .../referencia/template_strings/index.html | 314 -- files/es/web/javascript/typed_arrays/index.html | 272 ++ .../index.html" | 960 ------ .../es/web/javascript/vectores_tipados/index.html | 272 -- files/es/web/mathml/element/index.html | 97 + files/es/web/mathml/element/math/index.html | 162 + files/es/web/mathml/elemento/index.html | 97 - files/es/web/mathml/elemento/math/index.html | 162 - .../index.html | 77 + files/es/web/opensearch/index.html | 154 + .../mejorando_rendimienot_inicial/index.html | 95 - .../optimizing_startup_performance/index.html | 95 + .../developer_guide/instalar/index.html | 96 - .../developer_guide/installing/index.html | 96 + .../responsive/media_types/index.html | 394 +++ .../web/progressive_web_apps/ventajas/index.html | 63 - .../security/csp/csp_policy_directives/index.html | 709 ----- files/es/web/security/csp/index.html | 39 - .../introducing_content_security_policy/index.html | 57 - .../es/web/security/same-origin_policy/index.html | 269 ++ .../web/security/same-origin_politica/index.html | 269 -- .../index.html | 77 - .../turning_off_form_autocompletion/index.html | 77 + .../index.html | 102 + files/es/web/svg/element/glifo/index.html | 114 - files/es/web/svg/element/glyph/index.html | 114 + files/es/web/svg/element/script/index.html | 255 ++ .../web/svg/svg_1.1_support_in_firefox/index.html | 847 +++++ files/es/web/svg/svg_en_firefox_1.5/index.html | 60 - .../svg/tutorial/introducci\303\263n/index.html" | 45 - files/es/web/svg/tutorial/introduction/index.html | 45 + files/es/web/tutoriales/index.html | 206 -- files/es/web/tutorials/index.html | 206 ++ .../web/web_components/custom_elements/index.html | 182 -- .../web/xml/introducci\303\263n_a_xml/index.html" | 125 - files/es/web/xml/xml_introduction/index.html | 125 + .../es/web/xpath/axes/ancestor-or-self/index.html | 8 + files/es/web/xpath/axes/ancestor/index.html | 8 + files/es/web/xpath/axes/attribute/index.html | 8 + files/es/web/xpath/axes/child/index.html | 8 + .../web/xpath/axes/descendant-or-self/index.html | 8 + files/es/web/xpath/axes/descendant/index.html | 8 + .../es/web/xpath/axes/following-sibling/index.html | 8 + files/es/web/xpath/axes/following/index.html | 8 + files/es/web/xpath/axes/index.html | 47 + files/es/web/xpath/axes/namespace/index.html | 9 + files/es/web/xpath/axes/parent/index.html | 8 + .../es/web/xpath/axes/preceding-sibling/index.html | 8 + files/es/web/xpath/axes/preceding/index.html | 8 + .../es/web/xpath/ejes/ancestor-or-self/index.html | 8 - files/es/web/xpath/ejes/ancestor/index.html | 8 - files/es/web/xpath/ejes/attribute/index.html | 8 - files/es/web/xpath/ejes/child/index.html | 8 - .../web/xpath/ejes/descendant-or-self/index.html | 8 - files/es/web/xpath/ejes/descendant/index.html | 8 - .../es/web/xpath/ejes/following-sibling/index.html | 8 - files/es/web/xpath/ejes/following/index.html | 8 - files/es/web/xpath/ejes/index.html | 47 - files/es/web/xpath/ejes/namespace/index.html | 9 - files/es/web/xpath/ejes/parent/index.html | 8 - .../es/web/xpath/ejes/preceding-sibling/index.html | 8 - files/es/web/xpath/ejes/preceding/index.html | 8 - files/es/web/xpath/funciones/contains/index.html | 32 - files/es/web/xpath/funciones/index.html | 54 - files/es/web/xpath/funciones/substring/index.html | 37 - files/es/web/xpath/funciones/true/index.html | 29 - files/es/web/xpath/functions/contains/index.html | 32 + files/es/web/xpath/functions/index.html | 54 + files/es/web/xpath/functions/substring/index.html | 37 + files/es/web/xpath/functions/true/index.html | 29 + .../index.html | 416 +++ files/es/web/xslt/apply-imports/index.html | 36 - files/es/web/xslt/apply-templates/index.html | 43 - files/es/web/xslt/attribute-set/index.html | 43 - files/es/web/xslt/attribute/index.html | 43 - files/es/web/xslt/call-template/index.html | 40 - files/es/web/xslt/choose/index.html | 37 - files/es/web/xslt/comment/index.html | 37 - files/es/web/xslt/copy-of/index.html | 38 - files/es/web/xslt/copy/index.html | 40 - files/es/web/xslt/decimal-format/index.html | 99 - files/es/web/xslt/element/apply-imports/index.html | 36 + .../es/web/xslt/element/apply-templates/index.html | 43 + files/es/web/xslt/element/attribute-set/index.html | 43 + files/es/web/xslt/element/attribute/index.html | 43 + files/es/web/xslt/element/call-template/index.html | 40 + files/es/web/xslt/element/choose/index.html | 37 + files/es/web/xslt/element/comment/index.html | 37 + files/es/web/xslt/element/copy-of/index.html | 38 + files/es/web/xslt/element/copy/index.html | 40 + .../es/web/xslt/element/decimal-format/index.html | 99 + files/es/web/xslt/element/fallback/index.html | 38 + files/es/web/xslt/element/for-each/index.html | 42 + files/es/web/xslt/element/if/index.html | 39 + files/es/web/xslt/element/import/index.html | 39 + files/es/web/xslt/element/include/index.html | 39 + files/es/web/xslt/element/key/index.html | 44 + files/es/web/xslt/element/message/index.html | 40 + .../es/web/xslt/element/namespace-alias/index.html | 42 + files/es/web/xslt/element/number/index.html | 169 + files/es/web/xslt/element/otherwise/index.html | 37 + files/es/web/xslt/element/when/index.html | 40 + files/es/web/xslt/element/with-param/index.html | 43 + files/es/web/xslt/fallback/index.html | 38 - files/es/web/xslt/for-each/index.html | 42 - files/es/web/xslt/if/index.html | 39 - files/es/web/xslt/import/index.html | 39 - files/es/web/xslt/include/index.html | 39 - files/es/web/xslt/key/index.html | 44 - files/es/web/xslt/message/index.html | 40 - files/es/web/xslt/namespace-alias/index.html | 42 - files/es/web/xslt/number/index.html | 169 - files/es/web/xslt/otherwise/index.html | 37 - .../web/xslt/transformando_xml_con_xslt/index.html | 112 - .../web/xslt/transforming_xml_with_xslt/index.html | 112 + files/es/web/xslt/when/index.html | 40 - files/es/web/xslt/with-param/index.html | 43 - files/es/web_audio_api/index.html | 510 ---- .../mobile/dise\303\261o_responsivo/index.html" | 45 - files/es/web_development/mobile/index.html | 18 - files/es/webapi/estado_de_bateria/index.html | 39 - files/es/webapi/index.html | 144 - files/es/webapi/pointer_lock/index.html | 284 -- files/es/webapi/using_geolocation/index.html | 232 -- files/es/webrtc/index.html | 78 - files/es/webrtc/introduction/index.html | 21 - files/es/webrtc/mediastream_api/index.html | 445 --- .../index.html | 99 - files/es/webrtc/taking_webcam_photos/index.html | 159 - files/es/websockets/index.html | 37 - files/es/xhtml/index.html | 33 - files/es/xpinstall_api_reference/index.html | 132 - .../es/zoom_a_p\303\241gina_completa/index.html" | 46 - 2546 files changed, 201057 insertions(+), 201057 deletions(-) delete mode 100644 files/es/acerca_del_modelo_de_objetos_del_documento/index.html delete mode 100644 files/es/actualizar_aplicaciones_web_para_firefox_3/index.html delete mode 100644 files/es/actualizar_extensiones_para_firefox_3/actualizar_extensiones_para_firefox_3/index.html delete mode 100644 files/es/actualizar_extensiones_para_firefox_3/index.html delete mode 100644 "files/es/actualizar_una_extensi\303\263n_para_que_soporte_m\303\272ltiples_aplicaciones_de_mozilla/index.html" delete mode 100644 files/es/applying_svg_effects_to_html_content/index.html delete mode 100644 "files/es/a\303\261adir_lectores_de_canales_a_firefox/index.html" delete mode 100644 "files/es/a\303\261adir_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" delete mode 100644 files/es/bugs_importantes_solucionados_en_firefox_3/index.html delete mode 100644 files/es/building_an_extension/index.html delete mode 100644 files/es/cadenas_del_user_agent_de_gecko/index.html delete mode 100644 files/es/code_snippets/index.html delete mode 100644 "files/es/code_snippets/pesta\303\261as_del_navegador/index.html" delete mode 100644 files/es/columnas_con_css-3/index.html delete mode 100644 files/es/compilar_e_instalar/index.html delete mode 100644 files/es/configurar_correctamente_los_tipos_mime_del_servidor/index.html create mode 100644 files/es/conflicting/glossary/doctype/index.html create mode 100644 files/es/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/es/conflicting/learn/css/building_blocks/index.html create mode 100644 files/es/conflicting/learn/css/building_blocks/selectors/index.html create mode 100644 files/es/conflicting/learn/css/building_blocks/values_and_units/index.html create mode 100644 files/es/conflicting/learn/css/css_layout/index.html create mode 100644 files/es/conflicting/learn/css/first_steps/how_css_works/index.html create mode 100644 files/es/conflicting/learn/css/first_steps/how_css_works_194e34e451d4ace023d98021c00b3cfd/index.html create mode 100644 files/es/conflicting/learn/css/first_steps/how_css_works_a460b5a76c3c2e7fc9b8da464dfd0c22/index.html create mode 100644 files/es/conflicting/learn/css/first_steps/index.html create mode 100644 files/es/conflicting/learn/css/styling_text/fundamentals/index.html create mode 100644 files/es/conflicting/learn/forms/index.html create mode 100644 files/es/conflicting/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/es/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html create mode 100644 files/es/conflicting/learn/index.html create mode 100644 files/es/conflicting/learn/javascript/objects/index.html create mode 100644 files/es/conflicting/mdn/contribute/getting_started/index.html create mode 100644 files/es/conflicting/mdn/tools/index.html create mode 100644 files/es/conflicting/mdn/yari/index.html create mode 100644 files/es/conflicting/mdn/yari_13d770b50d5ab9ce747962b2552e0eef/index.html create mode 100644 files/es/conflicting/mozilla/add-ons/index.html create mode 100644 files/es/conflicting/tools/about_colon_debugging/index.html create mode 100644 files/es/conflicting/tools/performance/index.html create mode 100644 files/es/conflicting/web/api/canvas_api/tutorial/index.html create mode 100644 files/es/conflicting/web/api/crypto/getrandomvalues/index.html create mode 100644 files/es/conflicting/web/api/document_object_model/index.html create mode 100644 files/es/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html create mode 100644 files/es/conflicting/web/api/document_object_model_7d961b8030c6099ee907f4f4b5fe6b3d/index.html create mode 100644 files/es/conflicting/web/api/document_object_model_9f3a59543838705de7e9b080fde3cc14/index.html create mode 100644 files/es/conflicting/web/api/geolocation/index.html create mode 100644 files/es/conflicting/web/api/html_drag_and_drop_api/index.html create mode 100644 files/es/conflicting/web/api/index.html create mode 100644 files/es/conflicting/web/api/indexeddb_api/index.html create mode 100644 files/es/conflicting/web/api/node/index.html create mode 100644 files/es/conflicting/web/api/push_api/index.html create mode 100644 files/es/conflicting/web/api/url/index.html create mode 100644 files/es/conflicting/web/api/web_storage_api/index.html create mode 100644 files/es/conflicting/web/api/webrtc_api/index.html create mode 100644 files/es/conflicting/web/api/websockets_api/index.html create mode 100644 files/es/conflicting/web/api/window/localstorage/index.html create mode 100644 files/es/conflicting/web/api/windoworworkerglobalscope/index.html create mode 100644 files/es/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html create mode 100644 files/es/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html create mode 100644 files/es/conflicting/web/css/@viewport/index.html create mode 100644 files/es/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html create mode 100644 files/es/conflicting/web/css/_colon_placeholder-shown/index.html create mode 100644 files/es/conflicting/web/css/_colon_placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891/index.html create mode 100644 files/es/conflicting/web/css/_doublecolon_placeholder/index.html create mode 100644 files/es/conflicting/web/css/_doublecolon_placeholder_70bda352bb504ebdd6cd3362879e2479/index.html create mode 100644 files/es/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html create mode 100644 files/es/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html create mode 100644 files/es/conflicting/web/css/cursor/index.html create mode 100644 files/es/conflicting/web/css/font-variant/index.html create mode 100644 files/es/conflicting/web/css/width/index.html create mode 100644 files/es/conflicting/web/guide/index.html create mode 100644 files/es/conflicting/web/guide/mobile/index.html create mode 100644 files/es/conflicting/web/html/element/index.html create mode 100644 files/es/conflicting/web/html/global_attributes/index.html create mode 100644 files/es/conflicting/web/html/global_attributes/spellcheck/index.html create mode 100644 files/es/conflicting/web/http/basics_of_http/mime_types/index.html create mode 100644 files/es/conflicting/web/http/csp/index.html create mode 100644 files/es/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html create mode 100644 files/es/conflicting/web/http/headers/content-security-policy/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/date/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/error/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/function/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/map/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/number/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/object/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/rangeerror/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/string/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html create mode 100644 files/es/conflicting/web/javascript/reference/global_objects/weakmap/index.html create mode 100644 files/es/conflicting/web/javascript/reference/lexical_grammar/index.html create mode 100644 files/es/conflicting/web/javascript/reference/operators/index.html create mode 100644 files/es/conflicting/web/javascript/reference/operators/spread_syntax/index.html create mode 100644 files/es/conflicting/web/javascript/reference/operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8/index.html create mode 100644 files/es/conflicting/web/javascript/reference/operators_5c44e7d07c463ff1a5a63654f4bda87b/index.html create mode 100644 files/es/conflicting/web/javascript/reference/operators_d3958587a3d3dd644852ad397eb5951b/index.html create mode 100644 files/es/conflicting/web/javascript/reference/operators_e72d8790e25513408a18a5826660f704/index.html create mode 100644 files/es/conflicting/web/javascript/reference/statements/switch/index.html create mode 100644 files/es/conflicting/web/media/formats/index.html create mode 100644 files/es/conflicting/web/opensearch/index.html create mode 100644 files/es/conflicting/web/progressive_web_apps/index.html create mode 100644 files/es/conflicting/web/progressive_web_apps/introduction/index.html create mode 100644 files/es/conflicting/web/web_components/using_custom_elements/index.html delete mode 100644 "files/es/control_de_la_correcci\303\263n_ortogr\303\241fica_en_formularios_html/index.html" delete mode 100644 files/es/creacion_de_plugins_opensearch_para_firefox/index.html delete mode 100644 "files/es/creaci\303\263n_de_componentes_xpcom/interior_del_componente/index.html" delete mode 100644 "files/es/creaci\303\263n_de_componentes_xpcom/prefacio/index.html" delete mode 100644 "files/es/creando_una_extensi\303\263n/index.html" delete mode 100644 "files/es/crear_una_extensi\303\263n_personalizada_de_firefox_con_el_mozilla_build_system/index.html" delete mode 100644 files/es/css/media_queries/index.html delete mode 100644 files/es/css/using_css_gradients/index.html delete mode 100644 "files/es/css_din\303\241mico/index.html" delete mode 100644 files/es/desarrollando_mozilla/index.html delete mode 100644 files/es/desarrollo_web/index.html delete mode 100644 "files/es/detectar_la_orientaci\303\263n_del_dispositivo/index.html" delete mode 100644 files/es/dhtml/index.html delete mode 100644 files/es/dhtml_demostraciones_del_uso_de_dom_style/index.html delete mode 100644 "files/es/dibujando_gr\303\241ficos_con_canvas/index.html" delete mode 100644 files/es/dibujar_texto_usando_canvas/index.html delete mode 100644 files/es/dom/almacenamiento/index.html delete mode 100644 files/es/dom/document.cookie/index.html delete mode 100644 files/es/dom/index.html delete mode 100644 files/es/dom/manipulando_el_historial_del_navegador/ejemplo/index.html delete mode 100644 files/es/dom/manipulando_el_historial_del_navegador/index.html delete mode 100644 files/es/dom/touch_events/index.html delete mode 100644 files/es/dom_inspector/index.html delete mode 100644 files/es/dragdrop/drag_and_drop/drag_and_drop_archivo/index.html delete mode 100644 files/es/dragdrop/drag_and_drop/index.html delete mode 100644 files/es/dragdrop/index.html delete mode 100644 files/es/dragdrop/recommended_drag_types/index.html delete mode 100644 "files/es/estructura_de_directorios_de_c\303\263digo_fuente_de_mozilla/index.html" delete mode 100644 files/es/etiquetas_audio_y_video_en_firefox/index.html delete mode 100644 "files/es/extensiones/actualizaci\303\263n_de_extensiones_para_firefox_4/index.html" delete mode 100644 files/es/faq_incrustando_mozilla/index.html delete mode 100644 files/es/firefox_1.5_para_desarrolladores/index.html delete mode 100644 files/es/firefox_19_para_desarrolladores/index.html delete mode 100644 files/es/firefox_2_para_desarrolladores/index.html delete mode 100644 files/es/firefox_3.5_para_desarrolladores/index.html delete mode 100644 files/es/firefox_3_para_desarrolladores/index.html delete mode 100644 files/es/firefox_addons_developer_guide/introduction_to_extensions/index.html delete mode 100644 files/es/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html delete mode 100644 files/es/formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio/index.html delete mode 100644 "files/es/fragmentos_de_c\303\263digo/index.html" delete mode 100644 files/es/funciones/index.html delete mode 100644 files/es/games/herramients/asm.js/index.html delete mode 100644 files/es/games/herramients/index.html delete mode 100644 files/es/games/introduccion/index.html delete mode 100644 "files/es/games/introducci\303\263n_al_desarrollo_de_juegos_html5_(resumen)/index.html" create mode 100644 files/es/games/introduction/index.html create mode 100644 files/es/games/introduction_to_html5_game_development/index.html create mode 100644 files/es/games/publishing_games/game_monetization/index.html delete mode 100644 "files/es/games/publishing_games/monetizaci\303\263n_de_los_juegos/index.html" create mode 100644 files/es/games/tools/asm.js/index.html create mode 100644 files/es/games/tools/index.html delete mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/botones/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/buttons/index.html delete mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/rebotar_en_las_paredes/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html create mode 100644 files/es/games/tutorials/html5_gamedev_phaser_device_orientation/index.html create mode 100644 files/es/games/tutorials/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/bounce_off_the_walls/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/construye_grupo_bloques/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/control_pala_y_teclado/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/controles_raton/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/create_the_canvas_and_draw_on_it/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/deteccion_colisiones/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/fin_del_juego/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/mueve_la_bola/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/terminando/index.html delete mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/track_the_score_and_win/index.html delete mode 100644 files/es/games/workflows/html5_gamedev_phaser_device_orientation/index.html delete mode 100644 files/es/games/workflows/index.html delete mode 100644 "files/es/generaci\303\263n_de_guids/index.html" create mode 100644 files/es/glossary/algorithm/index.html delete mode 100644 files/es/glossary/algoritmo/index.html create mode 100644 files/es/glossary/argument/index.html delete mode 100644 files/es/glossary/argumento/index.html delete mode 100644 "files/es/glossary/arquitectura_de_la_informaci\303\263n/index.html" create mode 100644 files/es/glossary/array/index.html delete mode 100644 files/es/glossary/arreglos/index.html create mode 100644 files/es/glossary/asynchronous/index.html delete mode 100644 "files/es/glossary/as\303\255ncrono/index.html" delete mode 100644 files/es/glossary/atributo/index.html delete mode 100644 files/es/glossary/atributo_global/index.html create mode 100644 files/es/glossary/attribute/index.html create mode 100644 files/es/glossary/base64/index.html create mode 100644 files/es/glossary/breadcrumb/index.html delete mode 100644 files/es/glossary/cabecera_general/index.html create mode 100644 files/es/glossary/cache/index.html delete mode 100644 "files/es/glossary/cach\303\251/index.html" create mode 100644 files/es/glossary/call_stack/index.html delete mode 100644 files/es/glossary/caracter/index.html create mode 100644 files/es/glossary/card_sorting/index.html create mode 100644 files/es/glossary/character/index.html create mode 100644 files/es/glossary/character_set/index.html create mode 100644 files/es/glossary/cia/index.html delete mode 100644 files/es/glossary/cid/index.html delete mode 100644 files/es/glossary/cifrado/index.html create mode 100644 files/es/glossary/cipher/index.html create mode 100644 files/es/glossary/ciphertext/index.html delete mode 100644 "files/es/glossary/clasificaci\303\263n_por_tarjetas_(card_sorting)/index.html" delete mode 100644 files/es/glossary/clausura/index.html delete mode 100644 files/es/glossary/clave/index.html create mode 100644 files/es/glossary/closure/index.html create mode 100644 files/es/glossary/cms/index.html delete mode 100644 files/es/glossary/coercion/index.html delete mode 100644 files/es/glossary/conjunto_de_caracteres/index.html create mode 100644 files/es/glossary/constant/index.html delete mode 100644 files/es/glossary/constante/index.html delete mode 100644 "files/es/glossary/criptoan\303\241lisis/index.html" delete mode 100644 "files/es/glossary/criptograf\303\255a/index.html" create mode 100644 files/es/glossary/cryptanalysis/index.html create mode 100644 files/es/glossary/cryptography/index.html create mode 100644 files/es/glossary/css_preprocessor/index.html create mode 100644 files/es/glossary/data_structure/index.html create mode 100644 files/es/glossary/decryption/index.html delete mode 100644 files/es/glossary/descifrado/index.html create mode 100644 files/es/glossary/dhtml/index.html create mode 100644 files/es/glossary/domain_name/index.html delete mode 100644 files/es/glossary/dtd/index.html create mode 100644 files/es/glossary/dynamic_typing/index.html delete mode 100644 files/es/glossary/elemento/index.html delete mode 100644 "files/es/glossary/encriptaci\303\263n/index.html" create mode 100644 files/es/glossary/encryption/index.html delete mode 100644 files/es/glossary/entidad/index.html create mode 100644 files/es/glossary/entity/index.html delete mode 100644 files/es/glossary/espacio_en_blanco/index.html delete mode 100644 files/es/glossary/estructura_de_datos/index.html create mode 100644 files/es/glossary/first-class_function/index.html create mode 100644 files/es/glossary/forbidden_header_name/index.html delete mode 100644 files/es/glossary/funcion_de_primera_clase/index.html delete mode 100644 "files/es/glossary/funci\303\263n/index.html" create mode 100644 files/es/glossary/function/index.html create mode 100644 files/es/glossary/general_header/index.html delete mode 100644 files/es/glossary/hilo_principal/index.html delete mode 100644 files/es/glossary/identificador/index.html create mode 100644 files/es/glossary/identifier/index.html create mode 100644 files/es/glossary/immutable/index.html create mode 100644 files/es/glossary/information_architecture/index.html delete mode 100644 files/es/glossary/inmutable/index.html delete mode 100644 files/es/glossary/iu/index.html create mode 100644 files/es/glossary/key/index.html create mode 100644 files/es/glossary/localization/index.html create mode 100644 files/es/glossary/main_thread/index.html create mode 100644 files/es/glossary/metadata/index.html delete mode 100644 files/es/glossary/metadato/index.html create mode 100644 files/es/glossary/method/index.html delete mode 100644 files/es/glossary/miga-de-pan/index.html delete mode 100644 "files/es/glossary/m\303\251todo/index.html" delete mode 100644 files/es/glossary/nombre_de_dominio/index.html delete mode 100644 files/es/glossary/nombre_de_encabezado_prohibido/index.html create mode 100644 files/es/glossary/number/index.html delete mode 100644 files/es/glossary/numero/index.html create mode 100644 files/es/glossary/object/index.html delete mode 100644 files/es/glossary/objecto/index.html delete mode 100644 files/es/glossary/operador/index.html create mode 100644 files/es/glossary/operand/index.html delete mode 100644 files/es/glossary/operando/index.html create mode 100644 files/es/glossary/operator/index.html delete mode 100644 files/es/glossary/pila_llamadas/index.html create mode 100644 files/es/glossary/plaintext/index.html delete mode 100644 files/es/glossary/preflight_peticion/index.html create mode 100644 files/es/glossary/preflight_request/index.html delete mode 100644 files/es/glossary/preprocesador_css/index.html create mode 100644 files/es/glossary/primitive/index.html delete mode 100644 files/es/glossary/primitivo/index.html create mode 100644 files/es/glossary/property/index.html delete mode 100644 files/es/glossary/propiedad/index.html delete mode 100644 files/es/glossary/pseudo-clase/index.html create mode 100644 files/es/glossary/pseudo-class/index.html create mode 100644 files/es/glossary/pseudocode/index.html delete mode 100644 "files/es/glossary/pseudoc\303\263digo/index.html" create mode 100644 files/es/glossary/recursion/index.html delete mode 100644 "files/es/glossary/recursi\303\263n/index.html" create mode 100644 files/es/glossary/safe/index.html create mode 100644 files/es/glossary/scm/index.html delete mode 100644 files/es/glossary/scv/index.html delete mode 100644 files/es/glossary/seguro/index.html delete mode 100644 files/es/glossary/sentencias/index.html delete mode 100644 files/es/glossary/sincronico/index.html delete mode 100644 files/es/glossary/sistema_gestion_contenidos/index.html create mode 100644 files/es/glossary/speculative_parsing/index.html create mode 100644 files/es/glossary/statement/index.html create mode 100644 files/es/glossary/static_typing/index.html create mode 100644 files/es/glossary/synchronous/index.html delete mode 100644 files/es/glossary/textocifrado/index.html delete mode 100644 files/es/glossary/textosimple/index.html delete mode 100644 "files/es/glossary/tipado_din\303\241mico/index.html" delete mode 100644 "files/es/glossary/tipificaci\303\263n_est\303\241tica/index.html" create mode 100644 files/es/glossary/type_coercion/index.html create mode 100644 files/es/glossary/ui/index.html delete mode 100644 files/es/glossary/validador/index.html create mode 100644 files/es/glossary/validator/index.html delete mode 100644 files/es/glossary/valor/index.html create mode 100644 files/es/glossary/value/index.html create mode 100644 files/es/glossary/whitespace/index.html delete mode 100644 files/es/glossary/xform/index.html create mode 100644 files/es/glossary/xforms/index.html create mode 100644 files/es/glossary/xhtml/index.html delete mode 100644 "files/es/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/index.html" delete mode 100644 "files/es/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/introducci\303\263n_a_las_extensiones/index.html" delete mode 100644 "files/es/gu\303\255a_para_la_migraci\303\263n_a_cat\303\241logo/index.html" delete mode 100644 files/es/herramientas/index.html delete mode 100644 files/es/how_to_create_a_dom_tree/index.html delete mode 100644 files/es/html/elemento/datalist/index.html delete mode 100644 files/es/html/elemento/form/index.html delete mode 100644 files/es/html/elemento/section/index.html delete mode 100644 files/es/html/html5/forms_in_html5/index.html delete mode 100644 files/es/html/html5/formularios_en_html5/index.html delete mode 100644 files/es/html/html5/html5_lista_elementos/index.html delete mode 100644 files/es/html/html5/html5_parser/index.html delete mode 100644 files/es/html/html5/index.html delete mode 100644 "files/es/html/html5/introducci\303\263n_a_html5/index.html" delete mode 100644 files/es/html/html5/validacion_de_restricciones/index.html delete mode 100644 files/es/incrustando_mozilla/comunidad/index.html delete mode 100644 files/es/indexeddb/index.html delete mode 100644 "files/es/instalaci\303\263n_de_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" delete mode 100644 "files/es/learn/accessibility/qu\303\251_es_la_accesibilidad/index.html" create mode 100644 files/es/learn/accessibility/what_is_accessibility/index.html delete mode 100644 files/es/learn/aprender_y_obtener_ayuda/index.html delete mode 100644 files/es/learn/codificacion-scripting/index.html create mode 100644 files/es/learn/common_questions/common_web_layouts/index.html delete mode 100644 files/es/learn/common_questions/cuanto_cuesta/index.html delete mode 100644 "files/es/learn/common_questions/dise\303\261os_web_comunes/index.html" create mode 100644 files/es/learn/common_questions/how_much_does_it_cost/index.html delete mode 100644 files/es/learn/common_questions/que_es_un_servidor_web/index.html delete mode 100644 files/es/learn/common_questions/que_software_necesito/index.html delete mode 100644 "files/es/learn/common_questions/qu\303\251_es_una_url/index.html" create mode 100644 files/es/learn/common_questions/using_github_pages/index.html create mode 100644 files/es/learn/common_questions/what_is_a_url/index.html create mode 100644 files/es/learn/common_questions/what_is_a_web_server/index.html create mode 100644 files/es/learn/common_questions/what_software_do_i_need/index.html delete mode 100644 files/es/learn/como_contribuir/index.html create mode 100644 files/es/learn/css/building_blocks/backgrounds_and_borders/index.html delete mode 100644 files/es/learn/css/building_blocks/cascada_y_herencia/index.html create mode 100644 files/es/learn/css/building_blocks/cascade_and_inheritance/index.html delete mode 100644 files/es/learn/css/building_blocks/contenido_desbordado/index.html create mode 100644 files/es/learn/css/building_blocks/debugging_css/index.html delete mode 100644 files/es/learn/css/building_blocks/depurar_el_css/index.html delete mode 100644 files/es/learn/css/building_blocks/dimensionar_elementos_en_css/index.html delete mode 100644 files/es/learn/css/building_blocks/el_modelo_de_caja/index.html delete mode 100644 files/es/learn/css/building_blocks/fondos_y_bordes/index.html create mode 100644 files/es/learn/css/building_blocks/fundamental_css_comprehension/index.html create mode 100644 files/es/learn/css/building_blocks/handling_different_text_directions/index.html create mode 100644 files/es/learn/css/building_blocks/images_media_form_elements/index.html delete mode 100644 "files/es/learn/css/building_blocks/im\303\241genes_medios_y_elementos_de_formulario/index.html" delete mode 100644 files/es/learn/css/building_blocks/manejando_diferentes_direcciones_de_texto/index.html create mode 100644 files/es/learn/css/building_blocks/overflowing_content/index.html delete mode 100644 files/es/learn/css/building_blocks/selectores_css/combinadores/index.html delete mode 100644 files/es/learn/css/building_blocks/selectores_css/index.html delete mode 100644 files/es/learn/css/building_blocks/selectores_css/pseudo-clases_y_pseudo-elementos/index.html delete mode 100644 files/es/learn/css/building_blocks/selectores_css/selectores_de_atributos/index.html delete mode 100644 files/es/learn/css/building_blocks/selectores_css/selectores_de_tipo_clase_e_id/index.html create mode 100644 files/es/learn/css/building_blocks/selectors/attribute_selectors/index.html create mode 100644 files/es/learn/css/building_blocks/selectors/combinators/index.html create mode 100644 files/es/learn/css/building_blocks/selectors/index.html create mode 100644 files/es/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html create mode 100644 files/es/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html create mode 100644 files/es/learn/css/building_blocks/sizing_items_in_css/index.html create mode 100644 files/es/learn/css/building_blocks/the_box_model/index.html delete mode 100644 files/es/learn/css/building_blocks/valores_y_unidades_css/index.html create mode 100644 files/es/learn/css/building_blocks/values_and_units/index.html delete mode 100644 "files/es/learn/css/css_layout/dise\303\261o_receptivo/index.html" delete mode 100644 files/es/learn/css/css_layout/flujo_normal/index.html delete mode 100644 "files/es/learn/css/css_layout/introducci\303\263n/index.html" create mode 100644 files/es/learn/css/css_layout/introduction/index.html create mode 100644 files/es/learn/css/css_layout/normal_flow/index.html create mode 100644 files/es/learn/css/css_layout/responsive_design/index.html delete mode 100644 files/es/learn/css/css_layout/soporte_a_navegadores_antiguos/index.html create mode 100644 files/es/learn/css/css_layout/supporting_older_browsers/index.html delete mode 100644 files/es/learn/css/first_steps/comenzando_css/index.html delete mode 100644 files/es/learn/css/first_steps/como_funciona_css/index.html delete mode 100644 files/es/learn/css/first_steps/como_se_estructura_css/index.html create mode 100644 files/es/learn/css/first_steps/getting_started/index.html create mode 100644 files/es/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/es/learn/css/first_steps/how_css_works/index.html delete mode 100644 "files/es/learn/css/first_steps/qu\303\251_es_css/index.html" delete mode 100644 files/es/learn/css/first_steps/usa_tu_nuevo_conocimiento/index.html create mode 100644 files/es/learn/css/first_steps/using_your_new_knowledge/index.html create mode 100644 files/es/learn/css/first_steps/what_is_css/index.html create mode 100644 files/es/learn/css/howto/css_faq/index.html create mode 100644 files/es/learn/css/howto/generated_content/index.html create mode 100644 files/es/learn/css/howto/index.html delete mode 100644 files/es/learn/css/introduction_to_css/fundamental_css_comprehension/index.html delete mode 100644 files/es/learn/css/styling_text/fuentes_web/index.html create mode 100644 files/es/learn/css/styling_text/web_fonts/index.html delete mode 100644 "files/es/learn/css/s\303\241bercomo/generated_content/index.html" delete mode 100644 "files/es/learn/css/s\303\241bercomo/index.html" delete mode 100644 files/es/learn/desarrollo_web_front-end/index.html create mode 100644 files/es/learn/forms/basic_native_form_controls/index.html create mode 100644 files/es/learn/forms/form_validation/index.html create mode 100644 files/es/learn/forms/how_to_build_custom_form_controls/index.html create mode 100644 files/es/learn/forms/how_to_structure_a_web_form/index.html create mode 100644 files/es/learn/forms/html5_input_types/index.html create mode 100644 files/es/learn/forms/index.html create mode 100644 files/es/learn/forms/property_compatibility_table_for_form_controls/index.html create mode 100644 files/es/learn/forms/sending_and_retrieving_form_data/index.html create mode 100644 files/es/learn/forms/styling_web_forms/index.html create mode 100644 files/es/learn/forms/test_your_skills_colon__html5_controls/index.html create mode 100644 files/es/learn/forms/test_your_skills_colon__other_controls/index.html create mode 100644 files/es/learn/forms/your_first_form/index.html create mode 100644 files/es/learn/front-end_web_developer/index.html delete mode 100644 "files/es/learn/getting_started_with_the_web/c\303\263mo_funciona_la_web/index.html" create mode 100644 files/es/learn/getting_started_with_the_web/dealing_with_files/index.html create mode 100644 files/es/learn/getting_started_with_the_web/how_the_web_works/index.html delete mode 100644 files/es/learn/getting_started_with_the_web/instalacion_de_software_basico/index.html create mode 100644 files/es/learn/getting_started_with_the_web/installing_basic_software/index.html delete mode 100644 files/es/learn/getting_started_with_the_web/la_web_y_los_estandares_web/index.html delete mode 100644 files/es/learn/getting_started_with_the_web/manejando_los_archivos/index.html create mode 100644 files/es/learn/getting_started_with_the_web/the_web_and_web_standards/index.html delete mode 100644 files/es/learn/herramientas_y_pruebas/cross_browser_testing/index.html delete mode 100644 files/es/learn/herramientas_y_pruebas/github/index.html delete mode 100644 files/es/learn/herramientas_y_pruebas/index.html delete mode 100644 files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/index.html delete mode 100644 files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/react_getting_started/index.html delete mode 100644 files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/vue_primeros_pasos/index.html delete mode 100644 files/es/learn/herramientas_y_pruebas/understanding_client-side_tools/index.html delete mode 100644 files/es/learn/html/como/index.html delete mode 100644 files/es/learn/html/como/usando_atributos_de_datos/index.html delete mode 100644 files/es/learn/html/forms/como_crear_widgets_de_formularios_personalizados/index.html delete mode 100644 files/es/learn/html/forms/how_to_structure_an_html_form/index.html delete mode 100644 files/es/learn/html/forms/index.html delete mode 100644 files/es/learn/html/forms/property_compatibility_table_for_form_controls/index.html delete mode 100644 files/es/learn/html/forms/prueba_tus_habilidades_colon__controles_html5/index.html delete mode 100644 files/es/learn/html/forms/prueba_tus_habilidades_colon__otros_controles/index.html delete mode 100644 files/es/learn/html/forms/sending_and_retrieving_form_data/index.html delete mode 100644 files/es/learn/html/forms/styling_html_forms/index.html delete mode 100644 files/es/learn/html/forms/the_native_form_widgets/index.html delete mode 100644 files/es/learn/html/forms/tipos_input_html5/index.html delete mode 100644 files/es/learn/html/forms/validacion_formulario_datos/index.html delete mode 100644 files/es/learn/html/forms/your_first_html_form/index.html create mode 100644 files/es/learn/html/howto/author_fast-loading_html_pages/index.html create mode 100644 files/es/learn/html/howto/index.html create mode 100644 files/es/learn/html/howto/use_data_attributes/index.html delete mode 100644 files/es/learn/html/introduccion_a_html/advanced_text_formatting/index.html delete mode 100644 files/es/learn/html/introduccion_a_html/creating_hyperlinks/index.html delete mode 100644 files/es/learn/html/introduccion_a_html/debugging_html/index.html delete mode 100644 files/es/learn/html/introduccion_a_html/estructura/index.html delete mode 100644 "files/es/learn/html/introduccion_a_html/estructuraci\303\263n_de_una_p\303\241gina_de_contenido/index.html" delete mode 100644 files/es/learn/html/introduccion_a_html/index.html delete mode 100644 files/es/learn/html/introduccion_a_html/iniciar/index.html delete mode 100644 files/es/learn/html/introduccion_a_html/marking_up_a_letter/index.html delete mode 100644 files/es/learn/html/introduccion_a_html/metados_en/index.html delete mode 100644 files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__enlaces/index.html delete mode 100644 "files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__texto_b\303\241sico_html/index.html" delete mode 100644 files/es/learn/html/introduccion_a_html/test_your_skills_colon__advanced_html_text/index.html delete mode 100644 files/es/learn/html/introduccion_a_html/texto/index.html create mode 100644 files/es/learn/html/introduction_to_html/advanced_text_formatting/index.html create mode 100644 files/es/learn/html/introduction_to_html/creating_hyperlinks/index.html create mode 100644 files/es/learn/html/introduction_to_html/debugging_html/index.html create mode 100644 files/es/learn/html/introduction_to_html/document_and_website_structure/index.html create mode 100644 files/es/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/es/learn/html/introduction_to_html/html_text_fundamentals/index.html create mode 100644 files/es/learn/html/introduction_to_html/index.html create mode 100644 files/es/learn/html/introduction_to_html/marking_up_a_letter/index.html create mode 100644 files/es/learn/html/introduction_to_html/structuring_a_page_of_content/index.html create mode 100644 files/es/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.html create mode 100644 files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html create mode 100644 files/es/learn/html/introduction_to_html/test_your_skills_colon__links/index.html create mode 100644 files/es/learn/html/introduction_to_html/the_head_metadata_in_html/index.html delete mode 100644 "files/es/learn/html/tablas/conceptos_b\303\241sicos_de_las_tablas_html/index.html" delete mode 100644 files/es/learn/html/tablas/funciones_avanzadas_de_las_tablas_html_y_accesibilidad/index.html delete mode 100644 files/es/learn/html/tablas/index.html delete mode 100644 files/es/learn/html/tablas/structuring_planet_data/index.html create mode 100644 files/es/learn/html/tables/advanced/index.html create mode 100644 files/es/learn/html/tables/basics/index.html create mode 100644 files/es/learn/html/tables/index.html create mode 100644 files/es/learn/html/tables/structuring_planet_data/index.html delete mode 100644 files/es/learn/javascript/building_blocks/bucle_codigo/index.html create mode 100644 files/es/learn/javascript/building_blocks/build_your_own_function/index.html delete mode 100644 files/es/learn/javascript/building_blocks/construyendo_tu_propia_funcion/index.html delete mode 100644 files/es/learn/javascript/building_blocks/eventos/index.html create mode 100644 files/es/learn/javascript/building_blocks/events/index.html delete mode 100644 files/es/learn/javascript/building_blocks/galeria_de_imagenes/index.html create mode 100644 files/es/learn/javascript/building_blocks/image_gallery/index.html create mode 100644 files/es/learn/javascript/building_blocks/looping_code/index.html delete mode 100644 "files/es/learn/javascript/client-side_web_apis/introducci\303\263n/index.html" create mode 100644 files/es/learn/javascript/client-side_web_apis/introduction/index.html delete mode 100644 files/es/learn/javascript/first_steps/generador_de_historias_absurdas/index.html delete mode 100644 "files/es/learn/javascript/first_steps/matem\303\241ticas/index.html" create mode 100644 files/es/learn/javascript/first_steps/math/index.html delete mode 100644 files/es/learn/javascript/first_steps/prueba_tus_habilidades_colon__strings/index.html delete mode 100644 "files/es/learn/javascript/first_steps/qu\303\251_es_javascript/index.html" create mode 100644 files/es/learn/javascript/first_steps/silly_story_generator/index.html create mode 100644 files/es/learn/javascript/first_steps/test_your_skills_colon__strings/index.html create mode 100644 files/es/learn/javascript/first_steps/what_is_javascript/index.html delete mode 100644 "files/es/learn/javascript/objects/ejercicio_pr\303\241ctico_de_construcci\303\263n_de_objetos/index.html" create mode 100644 files/es/learn/javascript/objects/object_building_practice/index.html create mode 100644 files/es/learn/learning_and_getting_help/index.html create mode 100644 files/es/learn/server-side/configuring_server_mime_types/index.html delete mode 100644 "files/es/learn/server-side/django/introducci\303\263n/index.html" create mode 100644 files/es/learn/server-side/django/introduction/index.html create mode 100644 files/es/learn/server-side/first_steps/client-server_overview/index.html create mode 100644 files/es/learn/server-side/first_steps/index.html create mode 100644 files/es/learn/server-side/first_steps/introduction/index.html create mode 100644 files/es/learn/server-side/first_steps/web_frameworks/index.html create mode 100644 files/es/learn/server-side/first_steps/website_security/index.html delete mode 100644 files/es/learn/server-side/primeros_pasos/index.html delete mode 100644 "files/es/learn/server-side/primeros_pasos/introducci\303\263n/index.html" delete mode 100644 files/es/learn/server-side/primeros_pasos/seguridad_sitios_web/index.html delete mode 100644 files/es/learn/server-side/primeros_pasos/vision_general_cliente_servidor/index.html delete mode 100644 files/es/learn/server-side/primeros_pasos/web_frameworks/index.html create mode 100644 files/es/learn/tools_and_testing/client-side_javascript_frameworks/index.html create mode 100644 files/es/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html create mode 100644 files/es/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html create mode 100644 files/es/learn/tools_and_testing/cross_browser_testing/index.html create mode 100644 files/es/learn/tools_and_testing/github/index.html create mode 100644 files/es/learn/tools_and_testing/index.html create mode 100644 files/es/learn/tools_and_testing/understanding_client-side_tools/index.html delete mode 100644 files/es/learn/using_github_pages/index.html delete mode 100644 "files/es/localizaci\303\263n/index.html" delete mode 100644 files/es/localizar_con_narro/index.html create mode 100644 files/es/mdn/at_ten/index.html delete mode 100644 files/es/mdn/comunidad/index.html delete mode 100644 files/es/mdn/contribute/community/index.html delete mode 100644 files/es/mdn/contribute/howto/crear_cuenta_mdn/index.html delete mode 100644 files/es/mdn/contribute/howto/document_a_css_property/plantilla_propiedad/index.html delete mode 100644 files/es/mdn/contribute/howto/etiquetas_paginas_javascript/index.html delete mode 100644 files/es/mdn/contribute/howto/remover_macros_experimentales/index.html delete mode 100644 files/es/mdn/contribute/howto/revision_editorial/index.html delete mode 100644 files/es/mdn/contribute/howto/revision_tecnica/index.html delete mode 100644 files/es/mdn/contribute/howto/set_the_summary_for_a_page/index.html delete mode 100644 "files/es/mdn/contribute/howto/usar_barras_laterales_de_navegaci\303\263n/index.html" delete mode 100644 files/es/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html delete mode 100644 files/es/mdn/contribute/procesos/index.html create mode 100644 files/es/mdn/contribute/processes/index.html delete mode 100644 files/es/mdn/contribute/tareas/index.html delete mode 100644 files/es/mdn/guidelines/content_blocks/index.html delete mode 100644 files/es/mdn/guidelines/convenciones_y_definiciones/index.html create mode 100644 files/es/mdn/guidelines/conventions_definitions/index.html create mode 100644 files/es/mdn/guidelines/css_style_guide/index.html delete mode 100644 "files/es/mdn/guidelines/project_colon_gu\303\255a_de_estilo/index.html" create mode 100644 files/es/mdn/guidelines/writing_style_guide/index.html delete mode 100644 files/es/mdn/kuma/contributing/getting_started/index.html delete mode 100644 files/es/mdn/kuma/contributing/index.html delete mode 100644 files/es/mdn/kuma/index.html create mode 100644 files/es/mdn/structures/compatibility_tables/index.html delete mode 100644 files/es/mdn/structures/ejemplos_ejecutables/index.html create mode 100644 files/es/mdn/structures/live_samples/index.html create mode 100644 files/es/mdn/structures/macros/other/index.html delete mode 100644 files/es/mdn/structures/macros/otras/index.html delete mode 100644 files/es/mdn/structures/tablas_de_compatibilidad/index.html delete mode 100644 files/es/mdn/tools/introduction_to_kumascript/index.html create mode 100644 files/es/mdn/tools/kumascript/index.html delete mode 100644 files/es/mdn/tools/page_regeneration/index.html delete mode 100644 files/es/mdn/tools/template_editing/index.html delete mode 100644 files/es/mdn/user_guide/index.html create mode 100644 files/es/mdn/yari/index.html delete mode 100644 files/es/mdn_en_diez/index.html delete mode 100644 files/es/mejoras_dom_en_firefox_3/index.html delete mode 100644 files/es/mejoras_svg_en_firefox_3/index.html delete mode 100644 files/es/mejoras_xul_en_firefox_3/index.html delete mode 100644 files/es/migrar_aplicaciones_desde_internet_explorer_a_mozilla/index.html delete mode 100644 "files/es/modo_casi_est\303\241ndar_de_gecko/index.html" delete mode 100644 files/es/mozilla/add-ons/webextensions/anatomia_de_una_webextension/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html delete mode 100644 "files/es/mozilla/add-ons/webextensions/depuraci\303\263n/index.html" delete mode 100644 files/es/mozilla/add-ons/webextensions/packaging_and_installation/index.html delete mode 100644 files/es/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/prerequisites/index.html delete mode 100644 files/es/mozilla/add-ons/webextensions/prerequisitos/index.html delete mode 100644 files/es/mozilla/add-ons/webextensions/publishing_your_webextension/index.html delete mode 100644 files/es/mozilla/add-ons/webextensions/que_son_las_webextensions/index.html delete mode 100644 files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html delete mode 100644 files/es/mozilla/add-ons/webextensions/tutorial/index.html delete mode 100644 files/es/mozilla/add-ons/webextensions/user_interface/accion_navegador/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/user_interface/browser_action/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/what_are_webextensions/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/your_first_webextension/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/your_second_webextension/index.html create mode 100644 files/es/mozilla/developer_guide/build_instructions/index.html create mode 100644 files/es/mozilla/developer_guide/mozilla_build_faq/index.html delete mode 100644 "files/es/mozilla/developer_guide/preguntas_frecuentes_sobre_la_compilaci\303\263n_de_mozilla/index.html" create mode 100644 files/es/mozilla/developer_guide/source_code/cvs/index.html delete mode 100644 "files/es/mozilla/developer_guide/source_code/c\303\263digo_fuente_de_mozilla_(cvs)/index.html" create mode 100644 files/es/mozilla/firefox/releases/1.5/index.html create mode 100644 files/es/mozilla/firefox/releases/19/index.html create mode 100644 files/es/mozilla/firefox/releases/2/adding_feed_readers_to_firefox/index.html create mode 100644 files/es/mozilla/firefox/releases/2/index.html create mode 100644 files/es/mozilla/firefox/releases/2/security_changes/index.html create mode 100644 files/es/mozilla/firefox/releases/3.5/index.html create mode 100644 files/es/mozilla/firefox/releases/3/dom_improvements/index.html create mode 100644 files/es/mozilla/firefox/releases/3/full_page_zoom/index.html create mode 100644 files/es/mozilla/firefox/releases/3/index.html create mode 100644 files/es/mozilla/firefox/releases/3/notable_bugs_fixed/index.html create mode 100644 files/es/mozilla/firefox/releases/3/svg_improvements/index.html create mode 100644 files/es/mozilla/firefox/releases/3/templates/index.html create mode 100644 files/es/mozilla/firefox/releases/3/updating_extensions/index.html create mode 100644 files/es/mozilla/firefox/releases/3/updating_web_applications/index.html create mode 100644 files/es/mozilla/firefox/releases/3/xul_improvements_in_firefox_3/index.html delete mode 100644 "files/es/m\303\263dulos_javascript/index.html" delete mode 100644 files/es/nsdirectoryservice/index.html create mode 100644 files/es/orphaned/actualizar_extensiones_para_firefox_3/actualizar_extensiones_para_firefox_3/index.html create mode 100644 "files/es/orphaned/actualizar_una_extensi\303\263n_para_que_soporte_m\303\272ltiples_aplicaciones_de_mozilla/index.html" create mode 100644 files/es/orphaned/code_snippets/index.html create mode 100644 "files/es/orphaned/code_snippets/pesta\303\261as_del_navegador/index.html" create mode 100644 "files/es/orphaned/creaci\303\263n_de_componentes_xpcom/interior_del_componente/index.html" create mode 100644 "files/es/orphaned/creaci\303\263n_de_componentes_xpcom/prefacio/index.html" create mode 100644 "files/es/orphaned/creando_una_extensi\303\263n/index.html" create mode 100644 "files/es/orphaned/crear_una_extensi\303\263n_personalizada_de_firefox_con_el_mozilla_build_system/index.html" create mode 100644 "files/es/orphaned/css_din\303\241mico/index.html" create mode 100644 files/es/orphaned/desarrollando_mozilla/index.html create mode 100644 "files/es/orphaned/detectar_la_orientaci\303\263n_del_dispositivo/index.html" create mode 100644 files/es/orphaned/dhtml_demostraciones_del_uso_de_dom_style/index.html create mode 100644 "files/es/orphaned/dibujando_gr\303\241ficos_con_canvas/index.html" create mode 100644 "files/es/orphaned/estructura_de_directorios_de_c\303\263digo_fuente_de_mozilla/index.html" create mode 100644 files/es/orphaned/etiquetas_audio_y_video_en_firefox/index.html create mode 100644 "files/es/orphaned/extensiones/actualizaci\303\263n_de_extensiones_para_firefox_4/index.html" create mode 100644 files/es/orphaned/faq_incrustando_mozilla/index.html create mode 100644 files/es/orphaned/firefox_addons_developer_guide/introduction_to_extensions/index.html create mode 100644 files/es/orphaned/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html create mode 100644 files/es/orphaned/formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio/index.html create mode 100644 "files/es/orphaned/fragmentos_de_c\303\263digo/index.html" create mode 100644 files/es/orphaned/funciones/index.html create mode 100644 "files/es/orphaned/generaci\303\263n_de_guids/index.html" create mode 100644 files/es/orphaned/glossary/elemento/index.html create mode 100644 "files/es/orphaned/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/index.html" create mode 100644 "files/es/orphaned/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/introducci\303\263n_a_las_extensiones/index.html" create mode 100644 "files/es/orphaned/gu\303\255a_para_la_migraci\303\263n_a_cat\303\241logo/index.html" create mode 100644 files/es/orphaned/herramientas/index.html create mode 100644 files/es/orphaned/html/elemento/datalist/index.html create mode 100644 files/es/orphaned/html/elemento/form/index.html create mode 100644 files/es/orphaned/html/elemento/section/index.html create mode 100644 files/es/orphaned/incrustando_mozilla/comunidad/index.html create mode 100644 "files/es/orphaned/instalaci\303\263n_de_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" create mode 100644 files/es/orphaned/learn/how_to_contribute/index.html create mode 100644 files/es/orphaned/learn/html/forms/html5_updates/index.html create mode 100644 files/es/orphaned/localizar_con_narro/index.html create mode 100644 files/es/orphaned/mdn/community/index.html create mode 100644 files/es/orphaned/mdn/community/working_in_community/index.html create mode 100644 files/es/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/es/orphaned/mdn/contribute/howto/do_a_technical_review/index.html create mode 100644 files/es/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html create mode 100644 files/es/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html create mode 100644 files/es/orphaned/mdn/contribute/howto/remove_experimental_macros/index.html create mode 100644 files/es/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html create mode 100644 files/es/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html create mode 100644 files/es/orphaned/mdn/contribute/howto/use_navigation_sidebars/index.html create mode 100644 files/es/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html create mode 100644 files/es/orphaned/mdn/tools/page_regeneration/index.html create mode 100644 files/es/orphaned/mdn/tools/template_editing/index.html create mode 100644 files/es/orphaned/migrar_aplicaciones_desde_internet_explorer_a_mozilla/index.html create mode 100644 "files/es/orphaned/modo_casi_est\303\241ndar_de_gecko/index.html" create mode 100644 files/es/orphaned/mozilla/add-ons/webextensions/debugging/index.html create mode 100644 files/es/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html create mode 100644 files/es/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html create mode 100644 files/es/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html create mode 100644 "files/es/orphaned/m\303\263dulos_javascript/index.html" create mode 100644 files/es/orphaned/nsdirectoryservice/index.html create mode 100644 files/es/orphaned/participar_en_el_proyecto_mozilla/index.html create mode 100644 "files/es/orphaned/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/index.html" create mode 100644 "files/es/orphaned/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/introducci\303\263n_a_gecko_e_inscrustaci\303\263n/index.html" create mode 100644 "files/es/orphaned/principios_b\303\241sicos_de_los_servicios_web/index.html" create mode 100644 files/es/orphaned/recursos_en_modo_desconectado_en_firefox/index.html create mode 100644 files/es/orphaned/referencia_de_xul/index.html create mode 100644 "files/es/orphaned/selecci\303\263n_de_modo_en_mozilla/index.html" create mode 100644 files/es/orphaned/storage/index.html create mode 100644 files/es/orphaned/tools/add-ons/dom_inspector/index.html create mode 100644 files/es/orphaned/tools/add-ons/index.html create mode 100644 files/es/orphaned/traducir_las_descripciones_de_las_extensiones/index.html create mode 100644 "files/es/orphaned/traducir_una_extensi\303\263n/index.html" create mode 100644 files/es/orphaned/usando_archivos_desde_aplicaciones_web/index.html create mode 100644 "files/es/orphaned/usar_c\303\263digo_de_mozilla_en_otros_proyectos/index.html" create mode 100644 files/es/orphaned/usar_web_workers/index.html create mode 100644 files/es/orphaned/usar_xpinstall_para_instalar_plugins/index.html create mode 100644 "files/es/orphaned/uso_del_n\303\272cleo_del_nivel_1_del_dom/index.html" create mode 100644 files/es/orphaned/vigilar_plugins/index.html create mode 100644 files/es/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html create mode 100644 files/es/orphaned/web/css/comenzando_(tutorial_css)/index.html create mode 100644 files/es/orphaned/web/css/como_iniciar/index.html create mode 100644 files/es/orphaned/web/css/primeros_pasos/index.html create mode 100644 files/es/orphaned/web/css/rtl/index.html create mode 100644 files/es/orphaned/web/guide/html/introduction_alhtml_clone/index.html create mode 100644 files/es/orphaned/web/html/element/command/index.html create mode 100644 files/es/orphaned/web/html/element/element/index.html create mode 100644 files/es/orphaned/web/html/elemento/etiqueta_personalizada_html5/index.html create mode 100644 files/es/orphaned/web/html/elemento/tipos_de_elementos/index.html create mode 100644 files/es/orphaned/web/html/global_attributes/dropzone/index.html create mode 100644 files/es/orphaned/web/javascript/reference/global_objects/array/prototype/index.html create mode 100644 files/es/orphaned/web/svg/svg_en_firefox_1.5/index.html create mode 100644 files/es/orphaned/xpinstall_api_reference/index.html delete mode 100644 files/es/participar_en_el_proyecto_mozilla/index.html delete mode 100644 files/es/plantillas_en_firefox_3/index.html delete mode 100644 "files/es/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/index.html" delete mode 100644 "files/es/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/introducci\303\263n_a_gecko_e_inscrustaci\303\263n/index.html" delete mode 100644 "files/es/principios_b\303\241sicos_de_los_servicios_web/index.html" delete mode 100644 files/es/recursos_en_modo_desconectado_en_firefox/index.html delete mode 100644 files/es/referencia_de_xul/index.html delete mode 100644 "files/es/referencia_dom_de_gecko/c\303\263mo_espacioenblanco/index.html" delete mode 100644 files/es/referencia_dom_de_gecko/ejemplos/index.html delete mode 100644 files/es/referencia_dom_de_gecko/eventos/index.html delete mode 100644 files/es/referencia_dom_de_gecko/index.html delete mode 100644 "files/es/referencia_dom_de_gecko/introducci\303\263n/index.html" delete mode 100644 files/es/referencia_dom_de_gecko/localizando_elementos_dom_usando_selectores/index.html delete mode 100644 files/es/referencia_dom_de_gecko/prefacio/index.html delete mode 100644 files/es/sections_and_outlines_of_an_html5_document/index.html delete mode 100644 files/es/seguridad_en_firefox_2/index.html delete mode 100644 "files/es/selecci\303\263n_de_modo_en_mozilla/index.html" delete mode 100644 files/es/server-sent_events/index.html delete mode 100644 files/es/server-sent_events/utilizando_server_sent_events_sse/index.html delete mode 100644 files/es/storage/index.html delete mode 100644 files/es/svg_en_firefox/index.html delete mode 100644 files/es/tipo_mime_incorrecto_en_archivos_css/index.html delete mode 100644 files/es/tools/accesos_directos/index.html delete mode 100644 files/es/tools/add-ons/index.html create mode 100644 files/es/tools/debugger/how_to/use_a_source_map/index.html delete mode 100644 files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html delete mode 100644 "files/es/tools/desempe\303\261o/index.html" delete mode 100644 "files/es/tools/desempe\303\261o/ui_tour/index.html" delete mode 100644 files/es/tools/editor_audio_web/index.html delete mode 100644 files/es/tools/editor_estilo/index.html create mode 100644 files/es/tools/keyboard_shortcuts/index.html delete mode 100644 files/es/tools/monitor_de_red/index.html create mode 100644 files/es/tools/network_monitor/index.html create mode 100644 files/es/tools/page_inspector/3-pane_mode/index.html delete mode 100644 files/es/tools/page_inspector/3er-panel_modo/index.html delete mode 100644 files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html delete mode 100644 files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html delete mode 100644 files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html create mode 100644 files/es/tools/page_inspector/how_to/examine_and_edit_html/index.html create mode 100644 files/es/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html delete mode 100644 files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html create mode 100644 files/es/tools/page_inspector/how_to/inspect_and_select_colors/index.html create mode 100644 files/es/tools/page_inspector/how_to/open_the_inspector/index.html delete mode 100644 files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html create mode 100644 files/es/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html create mode 100644 files/es/tools/performance/index.html create mode 100644 files/es/tools/performance/ui_tour/index.html delete mode 100644 files/es/tools/profiler/index.html delete mode 100644 files/es/tools/remote_debugging/debugging_over_a_network/index.html create mode 100644 files/es/tools/remote_debugging/firefox_for_android/index.html delete mode 100644 files/es/tools/remote_debugging/firefox_para_android/index.html create mode 100644 files/es/tools/responsive_design_mode/index.html delete mode 100644 files/es/tools/responsive_design_view/index.html create mode 100644 files/es/tools/style_editor/index.html create mode 100644 files/es/tools/taking_screenshots/index.html delete mode 100644 files/es/tools/tomar_capturas_de_pantalla/index.html create mode 100644 files/es/tools/web_audio_editor/index.html delete mode 100644 files/es/tools/web_console/iniciando_la_consola_web/index.html delete mode 100644 "files/es/tools/web_console/la_l\303\255nea_de_comandos_del_int\303\251rprete/index.html" create mode 100644 files/es/tools/web_console/the_command_line_interpreter/index.html create mode 100644 files/es/tools/web_console/ui_tour/index.html delete mode 100644 files/es/traducir_las_descripciones_de_las_extensiones/index.html delete mode 100644 "files/es/traducir_una_extensi\303\263n/index.html" delete mode 100644 files/es/trazado_de_una_tabla_html_mediante_javascript_y_la_interface_dom/index.html delete mode 100644 files/es/usando_archivos_desde_aplicaciones_web/index.html delete mode 100644 "files/es/usar_c\303\263digo_de_mozilla_en_otros_proyectos/index.html" delete mode 100644 files/es/usar_web_workers/index.html delete mode 100644 files/es/usar_xpinstall_para_instalar_plugins/index.html delete mode 100644 files/es/using_the_w3c_dom_level_1_core/index.html delete mode 100644 "files/es/uso_del_n\303\272cleo_del_nivel_1_del_dom/index.html" delete mode 100644 files/es/vigilar_plugins/index.html delete mode 100644 files/es/web/accesibilidad/comunidad/index.html delete mode 100644 files/es/web/accesibilidad/index.html delete mode 100644 files/es/web/accesibilidad/understanding_wcag/etiquetas_de_texto_y_nombres/index.html delete mode 100644 files/es/web/accesibilidad/understanding_wcag/index.html delete mode 100644 files/es/web/accesibilidad/understanding_wcag/perceivable/color_contraste/index.html delete mode 100644 files/es/web/accesibilidad/understanding_wcag/perceivable/index.html delete mode 100644 files/es/web/accesibilidad/understanding_wcag/teclado/index.html delete mode 100644 files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html delete mode 100644 files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html create mode 100644 files/es/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html create mode 100644 files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html delete mode 100644 files/es/web/accessibility/aria/forms/alertas/index.html create mode 100644 files/es/web/accessibility/aria/forms/alerts/index.html create mode 100644 files/es/web/accessibility/aria/forms/basic_form_hints/index.html delete mode 100644 files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html delete mode 100644 files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html create mode 100644 files/es/web/accessibility/aria/forms/multipart_labels/index.html create mode 100644 files/es/web/accessibility/community/index.html create mode 100644 files/es/web/accessibility/index.html create mode 100644 files/es/web/accessibility/understanding_wcag/index.html create mode 100644 files/es/web/accessibility/understanding_wcag/keyboard/index.html create mode 100644 files/es/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html create mode 100644 files/es/web/accessibility/understanding_wcag/perceivable/index.html create mode 100644 files/es/web/accessibility/understanding_wcag/text_labels_and_names/index.html delete mode 100644 "files/es/web/api/animation/animaci\303\263n/index.html" create mode 100644 files/es/web/api/animation/animation/index.html create mode 100644 files/es/web/api/animation/currenttime/index.html create mode 100644 files/es/web/api/animation/finished/index.html delete mode 100644 files/es/web/api/animation/terminado/index.html delete mode 100644 files/es/web/api/animation/tiempoactual/index.html delete mode 100644 files/es/web/api/api_de_almacenamiento_web/index.html delete mode 100644 files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html delete mode 100644 files/es/web/api/api_del_portapapeles/index.html create mode 100644 files/es/web/api/battery_status_api/index.html create mode 100644 files/es/web/api/canvas_api/a_basic_ray-caster/index.html create mode 100644 files/es/web/api/canvas_api/index.html create mode 100644 files/es/web/api/canvas_api/manipulating_video_using_canvas/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/advanced_animations/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/basic_animations/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/basic_usage/index.html delete mode 100644 files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/compositing/example/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/drawing_shapes/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/drawing_text/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/optimizing_canvas/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html create mode 100644 files/es/web/api/clipboard_api/index.html delete mode 100644 files/es/web/api/console/tabla/index.html create mode 100644 files/es/web/api/console/table/index.html create mode 100644 files/es/web/api/crypto/getrandomvalues/index.html delete mode 100644 files/es/web/api/document/abrir/index.html delete mode 100644 files/es/web/api/document/async/index.html create mode 100644 files/es/web/api/document/cookie/index.html delete mode 100644 files/es/web/api/document/crearatributo/index.html create mode 100644 files/es/web/api/document/createattribute/index.html create mode 100644 files/es/web/api/document/createevent/index.html delete mode 100644 files/es/web/api/document/getselection/index.html create mode 100644 files/es/web/api/document/open/index.html create mode 100644 files/es/web/api/document/pointerlockchange_event/index.html delete mode 100644 files/es/web/api/document/pointerlockelement/index.html delete mode 100644 files/es/web/api/document/stylesheets/index.html create mode 100644 files/es/web/api/document_object_model/events/index.html create mode 100644 files/es/web/api/document_object_model/examples/index.html create mode 100644 files/es/web/api/document_object_model/how_to_create_a_dom_tree/index.html create mode 100644 files/es/web/api/document_object_model/index.html create mode 100644 files/es/web/api/document_object_model/introduction/index.html create mode 100644 files/es/web/api/document_object_model/locating_dom_elements_using_selectors/index.html create mode 100644 files/es/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html create mode 100644 files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html create mode 100644 files/es/web/api/document_object_model/whitespace/index.html create mode 100644 files/es/web/api/documentorshadowroot/getselection/index.html create mode 100644 files/es/web/api/documentorshadowroot/pointerlockelement/index.html create mode 100644 files/es/web/api/documentorshadowroot/stylesheets/index.html create mode 100644 files/es/web/api/domstring/binary/index.html delete mode 100644 files/es/web/api/domstring/cadenas_binarias/index.html delete mode 100644 files/es/web/api/element/accesskey/index.html create mode 100644 files/es/web/api/element/blur_event/index.html delete mode 100644 files/es/web/api/element/name/index.html delete mode 100644 files/es/web/api/element/ongotpointercapture/index.html delete mode 100644 files/es/web/api/element/onlostpointercapture/index.html delete mode 100644 files/es/web/api/element/onwheel/index.html create mode 100644 files/es/web/api/elementcssinlinestyle/style/index.html delete mode 100644 files/es/web/api/elementoshtmlparavideo/index.html delete mode 100644 files/es/web/api/event/createevent/index.html create mode 100644 files/es/web/api/fetch_api/basic_concepts/index.html delete mode 100644 files/es/web/api/fetch_api/conceptos_basicos/index.html create mode 100644 files/es/web/api/fetch_api/using_fetch/index.html delete mode 100644 files/es/web/api/fetch_api/utilizando_fetch/index.html create mode 100644 files/es/web/api/formdata/index.html create mode 100644 files/es/web/api/formdata/using_formdata_objects/index.html create mode 100644 files/es/web/api/geolocation_api/index.html create mode 100644 files/es/web/api/globaleventhandlers/ongotpointercapture/index.html create mode 100644 files/es/web/api/globaleventhandlers/onlostpointercapture/index.html delete mode 100644 files/es/web/api/globaleventhandlers/onunload/index.html create mode 100644 files/es/web/api/globaleventhandlers/onwheel/index.html create mode 100644 files/es/web/api/history_api/example/index.html create mode 100644 files/es/web/api/history_api/index.html create mode 100644 files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html create mode 100644 files/es/web/api/html_drag_and_drop_api/index.html create mode 100644 files/es/web/api/html_drag_and_drop_api/recommended_drag_types/index.html create mode 100644 files/es/web/api/htmlelement/accesskey/index.html create mode 100644 files/es/web/api/htmlelement/animationend_event/index.html delete mode 100644 files/es/web/api/htmlelement/dataset/index.html delete mode 100644 files/es/web/api/htmlelement/focus/index.html delete mode 100644 files/es/web/api/htmlelement/style/index.html create mode 100644 files/es/web/api/htmlelement/transitioncancel_event/index.html create mode 100644 files/es/web/api/htmlelement/transitionend_event/index.html create mode 100644 files/es/web/api/htmlmediaelement/abort_event/index.html create mode 100644 files/es/web/api/htmlorforeignelement/dataset/index.html create mode 100644 files/es/web/api/htmlorforeignelement/focus/index.html create mode 100644 files/es/web/api/htmlvideoelement/index.html create mode 100644 files/es/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html delete mode 100644 files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html delete mode 100644 files/es/web/api/indexeddb_api/usando_indexeddb/index.html create mode 100644 files/es/web/api/indexeddb_api/using_indexeddb/index.html create mode 100644 files/es/web/api/media_streams_api/index.html create mode 100644 files/es/web/api/navigator/geolocation/index.html delete mode 100644 files/es/web/api/navigatorgeolocation/geolocation/index.html delete mode 100644 files/es/web/api/navigatorgeolocation/index.html delete mode 100644 files/es/web/api/navigatoronline/eventos_online_y_offline/index.html create mode 100644 files/es/web/api/navigatoronline/online_and_offline_events/index.html delete mode 100644 files/es/web/api/node/elementopadre/index.html delete mode 100644 files/es/web/api/node/insertarantes/index.html create mode 100644 files/es/web/api/node/insertbefore/index.html delete mode 100644 files/es/web/api/node/nodoprincipal/index.html create mode 100644 files/es/web/api/node/parentelement/index.html delete mode 100644 files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html create mode 100644 files/es/web/api/notifications_api/using_the_notifications_api/index.html create mode 100644 files/es/web/api/pointer_lock_api/index.html delete mode 100644 files/es/web/api/push_api/using_the_push_api/index.html delete mode 100644 files/es/web/api/randomsource/index.html delete mode 100644 files/es/web/api/randomsource/obtenervaloresaleatorios/index.html create mode 100644 files/es/web/api/server-sent_events/index.html create mode 100644 files/es/web/api/server-sent_events/using_server-sent_events/index.html delete mode 100644 files/es/web/api/storage/localstorage/index.html delete mode 100644 files/es/web/api/subtlecrypto/encrypt/index.html create mode 100644 files/es/web/api/touch_events/index.html create mode 100644 files/es/web/api/vibration_api/index.html create mode 100644 files/es/web/api/web_audio_api/index.html delete mode 100644 files/es/web/api/web_crypto_api/checking_authenticity_with_password/index.html create mode 100644 files/es/web/api/web_speech_api/using_the_web_speech_api/index.html delete mode 100644 files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html create mode 100644 files/es/web/api/web_storage_api/index.html create mode 100644 files/es/web/api/web_storage_api/using_the_web_storage_api/index.html create mode 100644 files/es/web/api/web_workers_api/using_web_workers/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html delete mode 100644 files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html delete mode 100644 files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html create mode 100644 files/es/web/api/webrtc_api/session_lifetime/index.html create mode 100644 files/es/web/api/webrtc_api/taking_still_photos/index.html delete mode 100644 files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html delete mode 100644 files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html create mode 100644 files/es/web/api/websockets_api/writing_websocket_server/index.html create mode 100644 files/es/web/api/websockets_api/writing_websocket_servers/index.html create mode 100644 files/es/web/api/window/beforeunload_event/index.html create mode 100644 files/es/web/api/window/domcontentloaded_event/index.html create mode 100644 files/es/web/api/window/load_event/index.html delete mode 100644 files/es/web/api/window/url/index.html delete mode 100644 files/es/web/api/windowbase64/atob/index.html delete mode 100644 files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html delete mode 100644 files/es/web/api/windowbase64/index.html create mode 100644 files/es/web/api/windoweventhandlers/onunload/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/atob/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/clearinterval/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/cleartimeout/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/setinterval/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/settimeout/index.html delete mode 100644 files/es/web/api/windowtimers/clearinterval/index.html delete mode 100644 files/es/web/api/windowtimers/cleartimeout/index.html delete mode 100644 files/es/web/api/windowtimers/index.html delete mode 100644 files/es/web/api/windowtimers/setinterval/index.html delete mode 100644 files/es/web/api/windowtimers/settimeout/index.html create mode 100644 files/es/web/api/xmldocument/async/index.html delete mode 100644 files/es/web/api/xmlhttprequest/formdata/index.html create mode 100644 files/es/web/api/xmlhttprequest/loadend_event/index.html delete mode 100644 files/es/web/css/-moz-box-flex/index.html delete mode 100644 files/es/web/css/-moz-box-ordinal-group/index.html delete mode 100644 files/es/web/css/-moz-box-pack/index.html delete mode 100644 files/es/web/css/-moz-cell/index.html delete mode 100644 files/es/web/css/-moz-font-language-override/index.html delete mode 100644 files/es/web/css/-moz-user-modify/index.html delete mode 100644 files/es/web/css/-webkit-mask-clip/index.html delete mode 100644 files/es/web/css/-webkit-mask-image/index.html delete mode 100644 files/es/web/css/-webkit-mask-origin/index.html delete mode 100644 files/es/web/css/-webkit-mask-position/index.html delete mode 100644 files/es/web/css/-webkit-mask-repeat/index.html delete mode 100644 files/es/web/css/-webkit-mask/index.html delete mode 100644 files/es/web/css/@media/altura/index.html create mode 100644 files/es/web/css/@media/height/index.html delete mode 100644 "files/es/web/css/@media/resoluci\303\263n/index.html" create mode 100644 files/es/web/css/@media/resolution/index.html delete mode 100644 files/es/web/css/@viewport/height/index.html delete mode 100644 files/es/web/css/@viewport/width/index.html delete mode 100644 files/es/web/css/_colon_-moz-placeholder/index.html delete mode 100644 files/es/web/css/_colon_-moz-ui-invalid/index.html delete mode 100644 files/es/web/css/_colon_-ms-input-placeholder/index.html delete mode 100644 files/es/web/css/_colon_-webkit-autofill/index.html delete mode 100644 files/es/web/css/_colon_any/index.html create mode 100644 files/es/web/css/_colon_autofill/index.html create mode 100644 files/es/web/css/_colon_is/index.html delete mode 100644 files/es/web/css/_colon_not()/index.html create mode 100644 files/es/web/css/_colon_not/index.html create mode 100644 files/es/web/css/_colon_user-invalid/index.html delete mode 100644 files/es/web/css/_doublecolon_-moz-placeholder/index.html delete mode 100644 files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html delete mode 100644 files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html create mode 100644 files/es/web/css/_doublecolon_file-selector-button/index.html create mode 100644 files/es/web/css/adjacent_sibling_combinator/index.html create mode 100644 files/es/web/css/attribute_selectors/index.html delete mode 100644 files/es/web/css/auto/index.html create mode 100644 files/es/web/css/box-flex/index.html create mode 100644 files/es/web/css/box-ordinal-group/index.html create mode 100644 files/es/web/css/box-pack/index.html create mode 100644 files/es/web/css/column-gap/index.html delete mode 100644 files/es/web/css/columnas_css/index.html delete mode 100644 files/es/web/css/comentarios/index.html delete mode 100644 files/es/web/css/comenzando_(tutorial_css)/index.html create mode 100644 files/es/web/css/comments/index.html delete mode 100644 files/es/web/css/como_iniciar/index.html delete mode 100644 files/es/web/css/como_iniciar/por_que_usar_css/index.html delete mode 100644 files/es/web/css/como_iniciar/que_es_css/index.html create mode 100644 files/es/web/css/computed_value/index.html delete mode 100644 "files/es/web/css/css_animations/detectar_soporte_de_animaci\303\263n_css/index.html" create mode 100644 files/es/web/css/css_animations/detecting_css_animation_support/index.html delete mode 100644 files/es/web/css/css_animations/usando_animaciones_css/index.html create mode 100644 files/es/web/css/css_animations/using_css_animations/index.html delete mode 100644 files/es/web/css/css_background_and_borders/border-image_generador/index.html create mode 100644 files/es/web/css/css_background_and_borders/border-image_generator/index.html delete mode 100644 files/es/web/css/css_background_and_borders/index.html delete mode 100644 files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html create mode 100644 files/es/web/css/css_backgrounds_and_borders/index.html create mode 100644 files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html create mode 100644 files/es/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html create mode 100644 files/es/web/css/css_box_model/index.html create mode 100644 files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/es/web/css/css_box_model/mastering_margin_collapsing/index.html create mode 100644 files/es/web/css/css_color/index.html create mode 100644 files/es/web/css/css_colors/color_picker_tool/index.html delete mode 100644 files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html delete mode 100644 files/es/web/css/css_colors/index.html create mode 100644 files/es/web/css/css_columns/index.html create mode 100644 files/es/web/css/css_columns/using_multi-column_layouts/index.html create mode 100644 files/es/web/css/css_conditional_rules/index.html create mode 100644 files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html delete mode 100644 files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html create mode 100644 files/es/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html delete mode 100644 files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html delete mode 100644 files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html create mode 100644 files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html delete mode 100644 "files/es/web/css/css_grid_layout/conceptos_b\303\241sicos_del_posicionamiento_con_rejillas/index.html" delete mode 100644 files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html create mode 100644 files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html create mode 100644 files/es/web/css/css_images/using_css_gradients/index.html delete mode 100644 files/es/web/css/css_logical_properties/dimensionamiento/index.html create mode 100644 files/es/web/css/css_logical_properties/sizing/index.html delete mode 100644 files/es/web/css/css_modelo_caja/index.html delete mode 100644 "files/es/web/css/css_modelo_caja/introducci\303\263n_al_modelo_de_caja_de_css/index.html" delete mode 100644 files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html delete mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html delete mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html delete mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html delete mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html delete mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html delete mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html delete mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/index.html delete mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html create mode 100644 files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.html create mode 100644 files/es/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html create mode 100644 files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html create mode 100644 files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html create mode 100644 files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html create mode 100644 files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html create mode 100644 files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html delete mode 100644 files/es/web/css/css_reglas_condicionales/index.html create mode 100644 files/es/web/css/css_selectors/index.html create mode 100644 files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html create mode 100644 files/es/web/css/css_text/index.html create mode 100644 files/es/web/css/css_transitions/using_css_transitions/index.html delete mode 100644 files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html delete mode 100644 files/es/web/css/elemento_reemplazo/index.html delete mode 100644 files/es/web/css/especificidad/index.html delete mode 100644 files/es/web/css/filter-function/url/index.html create mode 100644 files/es/web/css/font-language-override/index.html create mode 100644 files/es/web/css/gap/index.html create mode 100644 files/es/web/css/general_sibling_combinator/index.html create mode 100644 files/es/web/css/gradient/index.html delete mode 100644 files/es/web/css/gradiente/index.html delete mode 100644 files/es/web/css/grid-column-gap/index.html delete mode 100644 files/es/web/css/grid-gap/index.html delete mode 100644 files/es/web/css/herramientas/cubic_bezier_generator/index.html delete mode 100644 files/es/web/css/herramientas/index.html create mode 100644 files/es/web/css/initial_value/index.html delete mode 100644 "files/es/web/css/introducci\303\263n/boxes/index.html" delete mode 100644 "files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" delete mode 100644 "files/es/web/css/introducci\303\263n/color/index.html" delete mode 100644 "files/es/web/css/introducci\303\263n/how_css_works/index.html" delete mode 100644 "files/es/web/css/introducci\303\263n/index.html" delete mode 100644 "files/es/web/css/introducci\303\263n/layout/index.html" delete mode 100644 "files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" delete mode 100644 "files/es/web/css/introducci\303\263n/media/index.html" delete mode 100644 "files/es/web/css/introducci\303\263n/selectors/index.html" create mode 100644 files/es/web/css/mask-clip/index.html create mode 100644 files/es/web/css/mask-image/index.html create mode 100644 files/es/web/css/mask-origin/index.html create mode 100644 files/es/web/css/mask-position/index.html create mode 100644 files/es/web/css/mask-repeat/index.html create mode 100644 files/es/web/css/mask/index.html create mode 100644 files/es/web/css/media_queries/testing_media_queries/index.html create mode 100644 files/es/web/css/media_queries/using_media_queries/index.html create mode 100644 files/es/web/css/mix-blend-mode/index.html delete mode 100644 files/es/web/css/normal/index.html create mode 100644 files/es/web/css/percentage/index.html delete mode 100644 files/es/web/css/porcentaje/index.html delete mode 100644 files/es/web/css/preguntas_frecuentes_sobre_css/index.html delete mode 100644 files/es/web/css/primeros_pasos/index.html create mode 100644 files/es/web/css/pseudo-elements/index.html delete mode 100644 files/es/web/css/pseudoelementos/index.html create mode 100644 files/es/web/css/reference/index.html delete mode 100644 files/es/web/css/referencia_css/index.html delete mode 100644 files/es/web/css/referencia_css/mix-blend-mode/index.html create mode 100644 files/es/web/css/replaced_element/index.html delete mode 100644 "files/es/web/css/resoluci\303\263n/index.html" create mode 100644 files/es/web/css/resolution/index.html delete mode 100644 files/es/web/css/rtl/index.html delete mode 100644 files/es/web/css/selectores_atributo/index.html delete mode 100644 files/es/web/css/selectores_css/index.html delete mode 100644 files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html delete mode 100644 files/es/web/css/selectores_hermanos_adyacentes/index.html delete mode 100644 files/es/web/css/selectores_hermanos_generales/index.html delete mode 100644 "files/es/web/css/sintaxis_definici\303\263n_de_valor/index.html" create mode 100644 files/es/web/css/specificity/index.html delete mode 100644 files/es/web/css/texto_css/index.html create mode 100644 files/es/web/css/tools/cubic_bezier_generator/index.html create mode 100644 files/es/web/css/tools/index.html delete mode 100644 files/es/web/css/transiciones_de_css/index.html create mode 100644 files/es/web/css/url()/index.html create mode 100644 files/es/web/css/user-modify/index.html delete mode 100644 files/es/web/css/valor_calculado/index.html delete mode 100644 files/es/web/css/valor_inicial/index.html create mode 100644 files/es/web/css/value_definition_syntax/index.html delete mode 100644 files/es/web/events/abort/index.html delete mode 100644 files/es/web/events/animationend/index.html delete mode 100644 files/es/web/events/beforeunload/index.html delete mode 100644 files/es/web/events/blur/index.html delete mode 100644 files/es/web/events/domcontentloaded/index.html delete mode 100644 files/es/web/events/load/index.html delete mode 100644 files/es/web/events/loadend/index.html delete mode 100644 files/es/web/events/pointerlockchange/index.html delete mode 100644 files/es/web/events/transitioncancel/index.html delete mode 100644 files/es/web/events/transitionend/index.html create mode 100644 files/es/web/guide/ajax/community/index.html delete mode 100644 files/es/web/guide/ajax/comunidad/index.html create mode 100644 files/es/web/guide/ajax/getting_started/index.html delete mode 100644 files/es/web/guide/ajax/primeros_pasos/index.html delete mode 100644 files/es/web/guide/api/dom/events/orientation_and_motion_data_explained/orientation_and_motion_data_explained/index.html delete mode 100644 files/es/web/guide/api/vibration/index.html create mode 100644 files/es/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html delete mode 100644 files/es/web/guide/css/probando_media_queries/index.html delete mode 100644 "files/es/web/guide/dom/events/creacion_y_activaci\303\263n_eventos/index.html" delete mode 100644 files/es/web/guide/dom/events/eventos_controlador/index.html delete mode 100644 files/es/web/guide/dom/events/index.html delete mode 100644 files/es/web/guide/dom/index.html create mode 100644 files/es/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/es/web/guide/events/event_handlers/index.html create mode 100644 files/es/web/guide/events/index.html create mode 100644 files/es/web/guide/events/orientation_and_motion_data_explained/index.html delete mode 100644 files/es/web/guide/html/canvas_tutorial/advanced_animations/index.html delete mode 100644 files/es/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html delete mode 100644 files/es/web/guide/html/canvas_tutorial/basic_animations/index.html delete mode 100644 files/es/web/guide/html/canvas_tutorial/basic_usage/index.html delete mode 100644 files/es/web/guide/html/canvas_tutorial/dibujando_formas/index.html delete mode 100644 files/es/web/guide/html/canvas_tutorial/hit_regions_and_accessibility/index.html delete mode 100644 files/es/web/guide/html/canvas_tutorial/index.html delete mode 100644 files/es/web/guide/html/canvas_tutorial/optimizing_canvas/index.html delete mode 100644 files/es/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html delete mode 100644 files/es/web/guide/html/categorias_de_contenido/index.html create mode 100644 files/es/web/guide/html/content_categories/index.html create mode 100644 files/es/web/guide/html/html5/constraint_validation/index.html create mode 100644 files/es/web/guide/html/html5/html5_parser/index.html create mode 100644 files/es/web/guide/html/html5/index.html create mode 100644 files/es/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/es/web/guide/html/introduction_alhtml_clone/index.html create mode 100644 files/es/web/guide/html/using_html_sections_and_outlines/index.html create mode 100644 files/es/web/guide/mobile/index.html delete mode 100644 files/es/web/guide/movil/index.html delete mode 100644 files/es/web/guide/performance/usando_web_workers/index.html delete mode 100644 files/es/web/guide/usando_objetos_formdata/index.html delete mode 100644 files/es/web/html/anipular_video_por_medio_de_canvas/index.html delete mode 100644 files/es/web/html/atributos/accept/index.html delete mode 100644 files/es/web/html/atributos/autocomplete/index.html delete mode 100644 files/es/web/html/atributos/index.html delete mode 100644 files/es/web/html/atributos/min/index.html delete mode 100644 files/es/web/html/atributos/minlength/index.html delete mode 100644 files/es/web/html/atributos/multiple/index.html delete mode 100644 files/es/web/html/atributos_de_configuracion_cors/index.html delete mode 100644 files/es/web/html/atributos_globales/accesskey/index.html delete mode 100644 files/es/web/html/atributos_globales/autocapitalize/index.html delete mode 100644 files/es/web/html/atributos_globales/class/index.html delete mode 100644 files/es/web/html/atributos_globales/contenteditable/index.html delete mode 100644 files/es/web/html/atributos_globales/contextmenu/index.html delete mode 100644 files/es/web/html/atributos_globales/data-_star_/index.html delete mode 100644 files/es/web/html/atributos_globales/dir/index.html delete mode 100644 files/es/web/html/atributos_globales/draggable/index.html delete mode 100644 files/es/web/html/atributos_globales/dropzone/index.html delete mode 100644 files/es/web/html/atributos_globales/hidden/index.html delete mode 100644 files/es/web/html/atributos_globales/id/index.html delete mode 100644 files/es/web/html/atributos_globales/index.html delete mode 100644 files/es/web/html/atributos_globales/is/index.html delete mode 100644 files/es/web/html/atributos_globales/itemid/index.html delete mode 100644 files/es/web/html/atributos_globales/itemprop/index.html delete mode 100644 files/es/web/html/atributos_globales/itemref/index.html delete mode 100644 files/es/web/html/atributos_globales/itemscope/index.html delete mode 100644 files/es/web/html/atributos_globales/lang/index.html delete mode 100644 files/es/web/html/atributos_globales/slot/index.html delete mode 100644 files/es/web/html/atributos_globales/spellcheck/index.html delete mode 100644 files/es/web/html/atributos_globales/style/index.html delete mode 100644 files/es/web/html/atributos_globales/tabindex/index.html delete mode 100644 files/es/web/html/atributos_globales/title/index.html delete mode 100644 files/es/web/html/atributos_globales/translate/index.html delete mode 100644 files/es/web/html/atributos_globales/x-ms-acceleratorkey/index.html create mode 100644 files/es/web/html/attributes/accept/index.html create mode 100644 files/es/web/html/attributes/autocomplete/index.html create mode 100644 files/es/web/html/attributes/crossorigin/index.html create mode 100644 files/es/web/html/attributes/index.html create mode 100644 files/es/web/html/attributes/min/index.html create mode 100644 files/es/web/html/attributes/minlength/index.html create mode 100644 files/es/web/html/attributes/multiple/index.html delete mode 100644 files/es/web/html/canvas/a_basic_ray-caster/index.html delete mode 100644 files/es/web/html/canvas/drawing_graphics_with_canvas/index.html delete mode 100644 files/es/web/html/canvas/index.html delete mode 100644 "files/es/web/html/consejos_para_la_creaci\303\263n_de_p\303\241ginas_html_de_carga_r\303\241pida/index.html" create mode 100644 files/es/web/html/cors_enabled_image/index.html create mode 100644 files/es/web/html/element/a/index.html create mode 100644 files/es/web/html/element/abbr/index.html create mode 100644 files/es/web/html/element/acronym/index.html create mode 100644 files/es/web/html/element/address/index.html create mode 100644 files/es/web/html/element/applet/index.html create mode 100644 files/es/web/html/element/area/index.html create mode 100644 files/es/web/html/element/article/index.html create mode 100644 files/es/web/html/element/aside/index.html create mode 100644 files/es/web/html/element/audio/index.html create mode 100644 files/es/web/html/element/b/index.html create mode 100644 files/es/web/html/element/base/index.html create mode 100644 files/es/web/html/element/basefont/index.html create mode 100644 files/es/web/html/element/bdi/index.html create mode 100644 files/es/web/html/element/bdo/index.html create mode 100644 files/es/web/html/element/bgsound/index.html create mode 100644 files/es/web/html/element/big/index.html create mode 100644 files/es/web/html/element/blink/index.html create mode 100644 files/es/web/html/element/blockquote/index.html create mode 100644 files/es/web/html/element/body/index.html create mode 100644 files/es/web/html/element/br/index.html create mode 100644 files/es/web/html/element/button/index.html create mode 100644 files/es/web/html/element/canvas/index.html create mode 100644 files/es/web/html/element/caption/index.html create mode 100644 files/es/web/html/element/center/index.html create mode 100644 files/es/web/html/element/cite/index.html create mode 100644 files/es/web/html/element/code/index.html create mode 100644 files/es/web/html/element/col/index.html create mode 100644 files/es/web/html/element/colgroup/index.html create mode 100644 files/es/web/html/element/content/index.html create mode 100644 files/es/web/html/element/data/index.html create mode 100644 files/es/web/html/element/datalist/index.html create mode 100644 files/es/web/html/element/dd/index.html create mode 100644 files/es/web/html/element/del/index.html create mode 100644 files/es/web/html/element/details/index.html create mode 100644 files/es/web/html/element/dfn/index.html create mode 100644 files/es/web/html/element/dialog/index.html create mode 100644 files/es/web/html/element/dir/index.html create mode 100644 files/es/web/html/element/div/index.html create mode 100644 files/es/web/html/element/dl/index.html create mode 100644 files/es/web/html/element/dt/index.html create mode 100644 files/es/web/html/element/em/index.html create mode 100644 files/es/web/html/element/embed/index.html create mode 100644 files/es/web/html/element/fieldset/index.html create mode 100644 files/es/web/html/element/figcaption/index.html create mode 100644 files/es/web/html/element/figure/index.html create mode 100644 files/es/web/html/element/font/index.html create mode 100644 files/es/web/html/element/footer/index.html create mode 100644 files/es/web/html/element/form/index.html create mode 100644 files/es/web/html/element/frame/index.html create mode 100644 files/es/web/html/element/frameset/index.html create mode 100644 files/es/web/html/element/head/index.html create mode 100644 files/es/web/html/element/header/index.html create mode 100644 files/es/web/html/element/heading_elements/index.html create mode 100644 files/es/web/html/element/hgroup/index.html create mode 100644 files/es/web/html/element/hr/index.html create mode 100644 files/es/web/html/element/html/index.html create mode 100644 files/es/web/html/element/i/index.html create mode 100644 files/es/web/html/element/iframe/index.html create mode 100644 files/es/web/html/element/image/index.html create mode 100644 files/es/web/html/element/img/index.html create mode 100644 files/es/web/html/element/index.html create mode 100644 files/es/web/html/element/input/button/index.html create mode 100644 files/es/web/html/element/input/checkbox/index.html create mode 100644 files/es/web/html/element/input/color/index.html create mode 100644 files/es/web/html/element/input/date/index.html create mode 100644 files/es/web/html/element/input/datetime/index.html create mode 100644 files/es/web/html/element/input/email/index.html create mode 100644 files/es/web/html/element/input/hidden/index.html create mode 100644 files/es/web/html/element/input/index.html create mode 100644 files/es/web/html/element/input/number/index.html create mode 100644 files/es/web/html/element/input/password/index.html create mode 100644 files/es/web/html/element/input/range/index.html create mode 100644 files/es/web/html/element/input/text/index.html create mode 100644 files/es/web/html/element/ins/index.html create mode 100644 files/es/web/html/element/isindex/index.html create mode 100644 files/es/web/html/element/kbd/index.html create mode 100644 files/es/web/html/element/keygen/index.html create mode 100644 files/es/web/html/element/label/index.html create mode 100644 files/es/web/html/element/legend/index.html create mode 100644 files/es/web/html/element/li/index.html create mode 100644 files/es/web/html/element/link/index.html create mode 100644 files/es/web/html/element/main/index.html create mode 100644 files/es/web/html/element/map/index.html create mode 100644 files/es/web/html/element/mark/index.html create mode 100644 files/es/web/html/element/marquee/index.html create mode 100644 files/es/web/html/element/menu/index.html create mode 100644 files/es/web/html/element/meta/index.html create mode 100644 files/es/web/html/element/multicol/index.html create mode 100644 files/es/web/html/element/nav/index.html create mode 100644 files/es/web/html/element/nobr/index.html create mode 100644 files/es/web/html/element/noframes/index.html create mode 100644 files/es/web/html/element/noscript/index.html create mode 100644 files/es/web/html/element/object/index.html create mode 100644 files/es/web/html/element/ol/index.html create mode 100644 files/es/web/html/element/option/index.html create mode 100644 files/es/web/html/element/p/index.html create mode 100644 files/es/web/html/element/param/index.html create mode 100644 files/es/web/html/element/picture/index.html create mode 100644 files/es/web/html/element/pre/index.html create mode 100644 files/es/web/html/element/progress/index.html create mode 100644 files/es/web/html/element/q/index.html create mode 100644 files/es/web/html/element/s/index.html create mode 100644 files/es/web/html/element/samp/index.html create mode 100644 files/es/web/html/element/section/index.html create mode 100644 files/es/web/html/element/select/index.html create mode 100644 files/es/web/html/element/shadow/index.html create mode 100644 files/es/web/html/element/slot/index.html create mode 100644 files/es/web/html/element/small/index.html create mode 100644 files/es/web/html/element/source/index.html create mode 100644 files/es/web/html/element/span/index.html create mode 100644 files/es/web/html/element/strike/index.html create mode 100644 files/es/web/html/element/strong/index.html create mode 100644 files/es/web/html/element/style/index.html create mode 100644 files/es/web/html/element/sub/index.html create mode 100644 files/es/web/html/element/sup/index.html create mode 100644 files/es/web/html/element/table/index.html create mode 100644 files/es/web/html/element/td/index.html create mode 100644 files/es/web/html/element/template/index.html create mode 100644 files/es/web/html/element/textarea/index.html create mode 100644 files/es/web/html/element/th/index.html create mode 100644 files/es/web/html/element/time/index.html create mode 100644 files/es/web/html/element/title/index.html create mode 100644 files/es/web/html/element/tr/index.html create mode 100644 files/es/web/html/element/track/index.html create mode 100644 files/es/web/html/element/tt/index.html create mode 100644 files/es/web/html/element/u/index.html create mode 100644 files/es/web/html/element/ul/index.html create mode 100644 files/es/web/html/element/var/index.html create mode 100644 files/es/web/html/element/video/index.html create mode 100644 files/es/web/html/element/wbr/index.html create mode 100644 files/es/web/html/element/xmp/index.html delete mode 100644 files/es/web/html/elemento/a/index.html delete mode 100644 files/es/web/html/elemento/abbr/index.html delete mode 100644 files/es/web/html/elemento/acronym/index.html delete mode 100644 files/es/web/html/elemento/address/index.html delete mode 100644 files/es/web/html/elemento/applet/index.html delete mode 100644 files/es/web/html/elemento/area/index.html delete mode 100644 files/es/web/html/elemento/article/index.html delete mode 100644 files/es/web/html/elemento/aside/index.html delete mode 100644 files/es/web/html/elemento/audio/index.html delete mode 100644 files/es/web/html/elemento/b/index.html delete mode 100644 files/es/web/html/elemento/base/index.html delete mode 100644 files/es/web/html/elemento/basefont/index.html delete mode 100644 files/es/web/html/elemento/bdi/index.html delete mode 100644 files/es/web/html/elemento/bdo/index.html delete mode 100644 files/es/web/html/elemento/bgsound/index.html delete mode 100644 files/es/web/html/elemento/big/index.html delete mode 100644 files/es/web/html/elemento/blink/index.html delete mode 100644 files/es/web/html/elemento/blockquote/index.html delete mode 100644 files/es/web/html/elemento/body/index.html delete mode 100644 files/es/web/html/elemento/br/index.html delete mode 100644 files/es/web/html/elemento/button/index.html delete mode 100644 files/es/web/html/elemento/canvas/index.html delete mode 100644 files/es/web/html/elemento/caption/index.html delete mode 100644 files/es/web/html/elemento/center/index.html delete mode 100644 files/es/web/html/elemento/cite/index.html delete mode 100644 files/es/web/html/elemento/code/index.html delete mode 100644 files/es/web/html/elemento/col/index.html delete mode 100644 files/es/web/html/elemento/colgroup/index.html delete mode 100644 files/es/web/html/elemento/command/index.html delete mode 100644 files/es/web/html/elemento/content/index.html delete mode 100644 files/es/web/html/elemento/data/index.html delete mode 100644 files/es/web/html/elemento/datalist/index.html delete mode 100644 files/es/web/html/elemento/dd/index.html delete mode 100644 files/es/web/html/elemento/del/index.html delete mode 100644 files/es/web/html/elemento/details/index.html delete mode 100644 files/es/web/html/elemento/dfn/index.html delete mode 100644 files/es/web/html/elemento/dialog/index.html delete mode 100644 files/es/web/html/elemento/dir/index.html delete mode 100644 files/es/web/html/elemento/div/index.html delete mode 100644 files/es/web/html/elemento/dl/index.html delete mode 100644 files/es/web/html/elemento/dt/index.html delete mode 100644 files/es/web/html/elemento/element/index.html delete mode 100644 "files/es/web/html/elemento/elementos_t\303\255tulos/index.html" delete mode 100644 files/es/web/html/elemento/em/index.html delete mode 100644 files/es/web/html/elemento/embed/index.html delete mode 100644 files/es/web/html/elemento/etiqueta_personalizada_html5/index.html delete mode 100644 files/es/web/html/elemento/fieldset/index.html delete mode 100644 files/es/web/html/elemento/figcaption/index.html delete mode 100644 files/es/web/html/elemento/figure/index.html delete mode 100644 files/es/web/html/elemento/font/index.html delete mode 100644 files/es/web/html/elemento/footer/index.html delete mode 100644 files/es/web/html/elemento/form/index.html delete mode 100644 files/es/web/html/elemento/frame/index.html delete mode 100644 files/es/web/html/elemento/frameset/index.html delete mode 100644 files/es/web/html/elemento/head/index.html delete mode 100644 files/es/web/html/elemento/header/index.html delete mode 100644 files/es/web/html/elemento/hgroup/index.html delete mode 100644 files/es/web/html/elemento/hr/index.html delete mode 100644 files/es/web/html/elemento/html/index.html delete mode 100644 files/es/web/html/elemento/i/index.html delete mode 100644 files/es/web/html/elemento/iframe/index.html delete mode 100644 files/es/web/html/elemento/image/index.html delete mode 100644 files/es/web/html/elemento/img/index.html delete mode 100644 files/es/web/html/elemento/index.html delete mode 100644 "files/es/web/html/elemento/input/bot\303\263n/index.html" delete mode 100644 files/es/web/html/elemento/input/checkbox/index.html delete mode 100644 files/es/web/html/elemento/input/color/index.html delete mode 100644 files/es/web/html/elemento/input/date/index.html delete mode 100644 files/es/web/html/elemento/input/datetime/index.html delete mode 100644 files/es/web/html/elemento/input/email/index.html delete mode 100644 files/es/web/html/elemento/input/hidden/index.html delete mode 100644 files/es/web/html/elemento/input/index.html delete mode 100644 files/es/web/html/elemento/input/number/index.html delete mode 100644 files/es/web/html/elemento/input/password/index.html delete mode 100644 files/es/web/html/elemento/input/range/index.html delete mode 100644 files/es/web/html/elemento/input/text/index.html delete mode 100644 files/es/web/html/elemento/ins/index.html delete mode 100644 files/es/web/html/elemento/isindex/index.html delete mode 100644 files/es/web/html/elemento/kbd/index.html delete mode 100644 files/es/web/html/elemento/keygen/index.html delete mode 100644 files/es/web/html/elemento/label/index.html delete mode 100644 files/es/web/html/elemento/legend/index.html delete mode 100644 files/es/web/html/elemento/li/index.html delete mode 100644 files/es/web/html/elemento/link/index.html delete mode 100644 files/es/web/html/elemento/main/index.html delete mode 100644 files/es/web/html/elemento/map/index.html delete mode 100644 files/es/web/html/elemento/mark/index.html delete mode 100644 files/es/web/html/elemento/marquee/index.html delete mode 100644 files/es/web/html/elemento/menu/index.html delete mode 100644 files/es/web/html/elemento/meta/index.html delete mode 100644 files/es/web/html/elemento/multicol/index.html delete mode 100644 files/es/web/html/elemento/nav/index.html delete mode 100644 files/es/web/html/elemento/nobr/index.html delete mode 100644 files/es/web/html/elemento/noframes/index.html delete mode 100644 files/es/web/html/elemento/noscript/index.html delete mode 100644 files/es/web/html/elemento/object/index.html delete mode 100644 files/es/web/html/elemento/ol/index.html delete mode 100644 files/es/web/html/elemento/option/index.html delete mode 100644 files/es/web/html/elemento/p/index.html delete mode 100644 files/es/web/html/elemento/param/index.html delete mode 100644 files/es/web/html/elemento/picture/index.html delete mode 100644 files/es/web/html/elemento/pre/index.html delete mode 100644 files/es/web/html/elemento/progress/index.html delete mode 100644 files/es/web/html/elemento/q/index.html delete mode 100644 files/es/web/html/elemento/s/index.html delete mode 100644 files/es/web/html/elemento/samp/index.html delete mode 100644 files/es/web/html/elemento/script/index.html delete mode 100644 files/es/web/html/elemento/section/index.html delete mode 100644 files/es/web/html/elemento/select/index.html delete mode 100644 files/es/web/html/elemento/shadow/index.html delete mode 100644 files/es/web/html/elemento/slot/index.html delete mode 100644 files/es/web/html/elemento/small/index.html delete mode 100644 files/es/web/html/elemento/source/index.html delete mode 100644 files/es/web/html/elemento/span/index.html delete mode 100644 files/es/web/html/elemento/strike/index.html delete mode 100644 files/es/web/html/elemento/strong/index.html delete mode 100644 files/es/web/html/elemento/style/index.html delete mode 100644 files/es/web/html/elemento/sub/index.html delete mode 100644 files/es/web/html/elemento/sup/index.html delete mode 100644 files/es/web/html/elemento/table/index.html delete mode 100644 files/es/web/html/elemento/td/index.html delete mode 100644 files/es/web/html/elemento/template/index.html delete mode 100644 files/es/web/html/elemento/textarea/index.html delete mode 100644 files/es/web/html/elemento/th/index.html delete mode 100644 files/es/web/html/elemento/time/index.html delete mode 100644 files/es/web/html/elemento/tipos_de_elementos/index.html delete mode 100644 files/es/web/html/elemento/title/index.html delete mode 100644 files/es/web/html/elemento/tr/index.html delete mode 100644 files/es/web/html/elemento/track/index.html delete mode 100644 files/es/web/html/elemento/tt/index.html delete mode 100644 files/es/web/html/elemento/u/index.html delete mode 100644 files/es/web/html/elemento/ul/index.html delete mode 100644 files/es/web/html/elemento/var/index.html delete mode 100644 files/es/web/html/elemento/video/index.html delete mode 100644 files/es/web/html/elemento/wbr/index.html delete mode 100644 files/es/web/html/elemento/xmp/index.html delete mode 100644 "files/es/web/html/elementos_en_l\303\255nea/index.html" delete mode 100644 files/es/web/html/formatos_admitidos_de_audio_y_video_en_html5/index.html create mode 100644 files/es/web/html/global_attributes/accesskey/index.html create mode 100644 files/es/web/html/global_attributes/autocapitalize/index.html create mode 100644 files/es/web/html/global_attributes/class/index.html create mode 100644 files/es/web/html/global_attributes/contenteditable/index.html create mode 100644 files/es/web/html/global_attributes/contextmenu/index.html create mode 100644 files/es/web/html/global_attributes/data-_star_/index.html create mode 100644 files/es/web/html/global_attributes/dir/index.html create mode 100644 files/es/web/html/global_attributes/draggable/index.html create mode 100644 files/es/web/html/global_attributes/hidden/index.html create mode 100644 files/es/web/html/global_attributes/id/index.html create mode 100644 files/es/web/html/global_attributes/index.html create mode 100644 files/es/web/html/global_attributes/is/index.html create mode 100644 files/es/web/html/global_attributes/itemid/index.html create mode 100644 files/es/web/html/global_attributes/itemprop/index.html create mode 100644 files/es/web/html/global_attributes/itemref/index.html create mode 100644 files/es/web/html/global_attributes/itemscope/index.html create mode 100644 files/es/web/html/global_attributes/lang/index.html create mode 100644 files/es/web/html/global_attributes/slot/index.html create mode 100644 files/es/web/html/global_attributes/spellcheck/index.html create mode 100644 files/es/web/html/global_attributes/style/index.html create mode 100644 files/es/web/html/global_attributes/tabindex/index.html create mode 100644 files/es/web/html/global_attributes/title/index.html create mode 100644 files/es/web/html/global_attributes/translate/index.html create mode 100644 files/es/web/html/global_attributes/x-ms-acceleratorkey/index.html delete mode 100644 files/es/web/html/imagen_con_cors_habilitado/index.html create mode 100644 files/es/web/html/index/index.html create mode 100644 files/es/web/html/inline_elements/index.html delete mode 100644 files/es/web/html/la_importancia_de_comentar_correctamente/index.html create mode 100644 files/es/web/html/link_types/index.html create mode 100644 files/es/web/html/microdata/index.html delete mode 100644 files/es/web/html/microdatos/index.html delete mode 100644 files/es/web/html/microformatos/index.html create mode 100644 files/es/web/html/microformats/index.html delete mode 100644 files/es/web/html/optimizing_your_pages_for_speculative_parsing/index.html delete mode 100644 files/es/web/html/recursos_offline_en_firefox/index.html create mode 100644 files/es/web/html/reference/index.html delete mode 100644 files/es/web/html/referencia/index.html delete mode 100644 files/es/web/html/tipos_de_enlaces/index.html delete mode 100644 files/es/web/html/transision_adaptativa_dash/index.html delete mode 100644 files/es/web/html/usando_audio_y_video_con_html5/index.html create mode 100644 files/es/web/html/using_the_application_cache/index.html delete mode 100644 "files/es/web/html/\303\255ndice/index.html" delete mode 100644 files/es/web/http/access_control_cors/index.html create mode 100644 files/es/web/http/basics_of_http/data_uris/index.html delete mode 100644 files/es/web/http/basics_of_http/datos_uris/index.html delete mode 100644 "files/es/web/http/basics_of_http/identificaci\303\263n_recursos_en_la_web/index.html" create mode 100644 files/es/web/http/basics_of_http/identifying_resources_on_the_web/index.html create mode 100644 files/es/web/http/conditional_requests/index.html create mode 100644 files/es/web/http/connection_management_in_http_1.x/index.html create mode 100644 files/es/web/http/cors/index.html delete mode 100644 files/es/web/http/gestion_de_la_conexion_en_http_1.x/index.html create mode 100644 files/es/web/http/headers/digest/index.html create mode 100644 files/es/web/http/headers/user-agent/firefox/index.html delete mode 100644 files/es/web/http/mecanismo_actualizacion_protocolo/index.html delete mode 100644 files/es/web/http/peticiones_condicionales/index.html create mode 100644 files/es/web/http/protocol_upgrade_mechanism/index.html delete mode 100644 files/es/web/http/recursos_y_especificaciones/index.html create mode 100644 files/es/web/http/resources_and_specifications/index.html delete mode 100644 "files/es/web/http/sesi\303\263n/index.html" create mode 100644 files/es/web/http/session/index.html create mode 100644 files/es/web/http/status/413/index.html delete mode 100644 files/es/web/http/status/8080/index.html create mode 100644 files/es/web/javascript/a_re-introduction_to_javascript/index.html create mode 100644 files/es/web/javascript/about_javascript/index.html delete mode 100644 files/es/web/javascript/acerca_de_javascript/index.html delete mode 100644 "files/es/web/javascript/descripci\303\263n_de_las_tecnolog\303\255as_javascript/index.html" create mode 100644 files/es/web/javascript/enumerability_and_ownership_of_properties/index.html delete mode 100644 files/es/web/javascript/enumeracion_y_propietario_de_propiedades/index.html delete mode 100644 files/es/web/javascript/gestion_de_memoria/index.html delete mode 100644 "files/es/web/javascript/guide/bucles_e_iteraci\303\263n/index.html" delete mode 100644 files/es/web/javascript/guide/colecciones_indexadas/index.html delete mode 100644 files/es/web/javascript/guide/control_de_flujo_y_manejo_de_errores/index.html create mode 100644 files/es/web/javascript/guide/control_flow_and_error_handling/index.html delete mode 100644 files/es/web/javascript/guide/funciones/index.html create mode 100644 files/es/web/javascript/guide/functions/index.html create mode 100644 files/es/web/javascript/guide/indexed_collections/index.html delete mode 100644 "files/es/web/javascript/guide/introducci\303\263n/index.html" create mode 100644 files/es/web/javascript/guide/introduction/index.html create mode 100644 files/es/web/javascript/guide/loops_and_iteration/index.html create mode 100644 files/es/web/javascript/guide/modules/index.html delete mode 100644 "files/es/web/javascript/guide/m\303\263dulos/index.html" delete mode 100644 files/es/web/javascript/guide/regular_expressions/aserciones/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/assertions/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/character_classes/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/cheatsheet/index.html delete mode 100644 files/es/web/javascript/guide/regular_expressions/clases_de_caracteres/index.html delete mode 100644 files/es/web/javascript/guide/regular_expressions/cuantificadores/index.html delete mode 100644 files/es/web/javascript/guide/regular_expressions/escapes_de_propiedades_unicode/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/groups_and_ranges/index.html delete mode 100644 files/es/web/javascript/guide/regular_expressions/grupos_y_rangos/index.html delete mode 100644 files/es/web/javascript/guide/regular_expressions/hoja_de_referencia/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/quantifiers/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html delete mode 100644 files/es/web/javascript/guide/trabajando_con_objectos/index.html delete mode 100644 files/es/web/javascript/guide/usar_promesas/index.html create mode 100644 files/es/web/javascript/guide/using_promises/index.html create mode 100644 files/es/web/javascript/guide/working_with_objects/index.html delete mode 100644 files/es/web/javascript/herencia_y_la_cadena_de_protipos/index.html create mode 100644 files/es/web/javascript/inheritance_and_the_prototype_chain/index.html delete mode 100644 "files/es/web/javascript/introducci\303\263n_a_javascript_orientado_a_objetos/index.html" delete mode 100644 files/es/web/javascript/introduction_to_using_xpath_in_javascript/index.html create mode 100644 files/es/web/javascript/javascript_technologies_overview/index.html create mode 100644 files/es/web/javascript/memory_management/index.html create mode 100644 files/es/web/javascript/reference/about/index.html create mode 100644 files/es/web/javascript/reference/classes/constructor/index.html create mode 100644 files/es/web/javascript/reference/classes/extends/index.html create mode 100644 files/es/web/javascript/reference/classes/index.html create mode 100644 files/es/web/javascript/reference/classes/private_class_fields/index.html create mode 100644 files/es/web/javascript/reference/classes/public_class_fields/index.html create mode 100644 files/es/web/javascript/reference/classes/static/index.html create mode 100644 files/es/web/javascript/reference/deprecated_and_obsolete_features/index.html create mode 100644 files/es/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html create mode 100644 files/es/web/javascript/reference/errors/bad_regexp_flag/index.html delete mode 100644 files/es/web/javascript/reference/errors/caracter_ilegal/index.html delete mode 100644 files/es/web/javascript/reference/errors/falta_puntoycoma_antes_de_declaracion/index.html create mode 100644 files/es/web/javascript/reference/errors/illegal_character/index.html delete mode 100644 files/es/web/javascript/reference/errors/indicador_regexp_no-val/index.html create mode 100644 files/es/web/javascript/reference/errors/missing_semicolon_before_statement/index.html create mode 100644 files/es/web/javascript/reference/errors/strict_non_simple_params/index.html delete mode 100644 "files/es/web/javascript/reference/errors/strict_y_par\303\241metros_complejos/index.html" create mode 100644 files/es/web/javascript/reference/functions/arguments/callee/index.html create mode 100644 files/es/web/javascript/reference/functions/arguments/index.html create mode 100644 files/es/web/javascript/reference/functions/arguments/length/index.html create mode 100644 files/es/web/javascript/reference/functions/arrow_functions/index.html create mode 100644 files/es/web/javascript/reference/functions/default_parameters/index.html create mode 100644 files/es/web/javascript/reference/functions/get/index.html create mode 100644 files/es/web/javascript/reference/functions/index.html create mode 100644 files/es/web/javascript/reference/functions/method_definitions/index.html create mode 100644 files/es/web/javascript/reference/functions/rest_parameters/index.html create mode 100644 files/es/web/javascript/reference/functions/set/index.html create mode 100644 files/es/web/javascript/reference/global_objects/aggregateerror/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/@@iterator/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/@@species/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/@@unscopables/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/concat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/copywithin/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/entries/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/every/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/fill/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/filter/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/find/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/findindex/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/flat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/flatmap/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/foreach/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/from/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/includes/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/indexof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/isarray/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/join/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/keys/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/lastindexof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/length/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/map/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/of/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/pop/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/push/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/reduce/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/reduceright/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/reverse/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/shift/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/slice/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/some/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/sort/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/splice/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/tolocalestring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/tosource/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/tostring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/unshift/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/values/index.html create mode 100644 files/es/web/javascript/reference/global_objects/arraybuffer/@@species/index.html create mode 100644 files/es/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html create mode 100644 files/es/web/javascript/reference/global_objects/arraybuffer/index.html create mode 100644 files/es/web/javascript/reference/global_objects/asyncfunction/index.html create mode 100644 files/es/web/javascript/reference/global_objects/boolean/boolean/index.html create mode 100644 files/es/web/javascript/reference/global_objects/boolean/index.html create mode 100644 files/es/web/javascript/reference/global_objects/boolean/tosource/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/getdate/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/getday/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/getfullyear/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/gethours/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/getmilliseconds/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/getminutes/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/getmonth/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/getseconds/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/gettime/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/getutcfullyear/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/getutchours/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/now/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/parse/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/setfullyear/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/setmonth/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/todatestring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/toisostring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/tojson/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/tolocaledatestring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/tolocalestring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/tolocaletimestring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/toutcstring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/utc/index.html create mode 100644 files/es/web/javascript/reference/global_objects/decodeuri/index.html create mode 100644 files/es/web/javascript/reference/global_objects/decodeuricomponent/index.html create mode 100644 files/es/web/javascript/reference/global_objects/encodeuri/index.html create mode 100644 files/es/web/javascript/reference/global_objects/encodeuricomponent/index.html create mode 100644 files/es/web/javascript/reference/global_objects/error/error/index.html create mode 100644 files/es/web/javascript/reference/global_objects/error/filename/index.html create mode 100644 files/es/web/javascript/reference/global_objects/error/index.html create mode 100644 files/es/web/javascript/reference/global_objects/error/linenumber/index.html create mode 100644 files/es/web/javascript/reference/global_objects/error/message/index.html create mode 100644 files/es/web/javascript/reference/global_objects/error/name/index.html create mode 100644 files/es/web/javascript/reference/global_objects/error/tosource/index.html create mode 100644 files/es/web/javascript/reference/global_objects/error/tostring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/escape/index.html create mode 100644 files/es/web/javascript/reference/global_objects/eval/index.html create mode 100644 files/es/web/javascript/reference/global_objects/evalerror/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/apply/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/arguments/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/bind/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/call/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/caller/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/displayname/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/function/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/length/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/name/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/tosource/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/tostring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/generator/index.html create mode 100644 files/es/web/javascript/reference/global_objects/generator/next/index.html create mode 100644 files/es/web/javascript/reference/global_objects/generator/return/index.html create mode 100644 files/es/web/javascript/reference/global_objects/generator/throw/index.html create mode 100644 files/es/web/javascript/reference/global_objects/index.html create mode 100644 files/es/web/javascript/reference/global_objects/infinity/index.html create mode 100644 files/es/web/javascript/reference/global_objects/internalerror/index.html create mode 100644 files/es/web/javascript/reference/global_objects/internalerror/internalerror/index.html create mode 100644 files/es/web/javascript/reference/global_objects/intl/index.html create mode 100644 files/es/web/javascript/reference/global_objects/intl/numberformat/format/index.html create mode 100644 files/es/web/javascript/reference/global_objects/intl/numberformat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/intl/relativetimeformat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/isfinite/index.html create mode 100644 files/es/web/javascript/reference/global_objects/isnan/index.html create mode 100644 files/es/web/javascript/reference/global_objects/json/index.html create mode 100644 files/es/web/javascript/reference/global_objects/json/parse/index.html create mode 100644 files/es/web/javascript/reference/global_objects/json/stringify/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/clear/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/delete/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/entries/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/foreach/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/get/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/has/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/keys/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/set/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/size/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/values/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/abs/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/acos/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/acosh/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/asin/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/asinh/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/atan/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/atan2/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/atanh/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/cbrt/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/ceil/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/cos/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/e/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/exp/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/expm1/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/floor/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/fround/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/hypot/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/ln10/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/ln2/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/log/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/log10/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/log10e/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/log2/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/log2e/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/max/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/min/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/pi/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/pow/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/random/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/round/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/sign/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/sin/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/sqrt/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/sqrt1_2/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/sqrt2/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/tan/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/tanh/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/trunc/index.html create mode 100644 files/es/web/javascript/reference/global_objects/nan/index.html create mode 100644 files/es/web/javascript/reference/global_objects/null/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/isfinite/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/isinteger/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/isnan/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/issafeinteger/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/max_safe_integer/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/max_value/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/min_value/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/nan/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/negative_infinity/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/parsefloat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/parseint/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/positive_infinity/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/tofixed/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/tolocalestring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/toprecision/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/tostring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/valueof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/__definegetter__/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/__lookupgetter__/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/assign/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/constructor/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/create/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/defineproperties/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/defineproperty/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/entries/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/freeze/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/fromentries/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/getownpropertynames/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/getprototypeof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/hasownproperty/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/is/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/isextensible/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/isfrozen/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/isprototypeof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/issealed/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/keys/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/preventextensions/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/propertyisenumerable/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/proto/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/seal/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/setprototypeof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/tolocalestring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/tosource/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/tostring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/valueof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/values/index.html create mode 100644 files/es/web/javascript/reference/global_objects/parsefloat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/parseint/index.html create mode 100644 files/es/web/javascript/reference/global_objects/promise/all/index.html create mode 100644 files/es/web/javascript/reference/global_objects/promise/catch/index.html create mode 100644 files/es/web/javascript/reference/global_objects/promise/finally/index.html create mode 100644 files/es/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/es/web/javascript/reference/global_objects/promise/race/index.html create mode 100644 files/es/web/javascript/reference/global_objects/promise/reject/index.html create mode 100644 files/es/web/javascript/reference/global_objects/promise/resolve/index.html create mode 100644 files/es/web/javascript/reference/global_objects/promise/then/index.html delete mode 100644 files/es/web/javascript/reference/global_objects/proxy/handler/getownpropertydescriptor/index.html delete mode 100644 files/es/web/javascript/reference/global_objects/proxy/handler/index.html delete mode 100644 files/es/web/javascript/reference/global_objects/proxy/handler/set/index.html create mode 100644 files/es/web/javascript/reference/global_objects/proxy/index.html create mode 100644 files/es/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html create mode 100644 files/es/web/javascript/reference/global_objects/proxy/proxy/index.html create mode 100644 files/es/web/javascript/reference/global_objects/proxy/proxy/set/index.html delete mode 100644 files/es/web/javascript/reference/global_objects/rangeerror/prototype/index.html create mode 100644 files/es/web/javascript/reference/global_objects/referenceerror/index.html create mode 100644 files/es/web/javascript/reference/global_objects/regexp/compile/index.html create mode 100644 files/es/web/javascript/reference/global_objects/regexp/exec/index.html create mode 100644 files/es/web/javascript/reference/global_objects/regexp/ignorecase/index.html create mode 100644 files/es/web/javascript/reference/global_objects/regexp/index.html create mode 100644 files/es/web/javascript/reference/global_objects/regexp/regexp/index.html create mode 100644 files/es/web/javascript/reference/global_objects/regexp/rightcontext/index.html create mode 100644 files/es/web/javascript/reference/global_objects/regexp/test/index.html create mode 100644 files/es/web/javascript/reference/global_objects/regexp/tostring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/set/@@iterator/index.html create mode 100644 files/es/web/javascript/reference/global_objects/set/add/index.html create mode 100644 files/es/web/javascript/reference/global_objects/set/clear/index.html create mode 100644 files/es/web/javascript/reference/global_objects/set/delete/index.html create mode 100644 files/es/web/javascript/reference/global_objects/set/entries/index.html create mode 100644 files/es/web/javascript/reference/global_objects/set/has/index.html create mode 100644 files/es/web/javascript/reference/global_objects/set/index.html create mode 100644 files/es/web/javascript/reference/global_objects/set/size/index.html create mode 100644 files/es/web/javascript/reference/global_objects/set/values/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/anchor/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/big/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/blink/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/bold/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/charat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/charcodeat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/codepointat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/concat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/endswith/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/fixed/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/fontcolor/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/fontsize/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/fromcharcode/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/fromcodepoint/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/includes/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/indexof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/italics/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/lastindexof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/length/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/link/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/localecompare/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/match/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/matchall/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/normalize/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/padstart/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/raw/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/repeat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/replace/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/search/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/slice/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/small/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/split/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/startswith/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/strike/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/sub/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/substr/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/substring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/sup/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/tolocalelowercase/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/tolowercase/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/tosource/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/tostring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/touppercase/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/trim/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/trimend/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/valueof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/symbol/for/index.html create mode 100644 files/es/web/javascript/reference/global_objects/symbol/hasinstance/index.html create mode 100644 files/es/web/javascript/reference/global_objects/symbol/index.html create mode 100644 files/es/web/javascript/reference/global_objects/symbol/iterator/index.html create mode 100644 files/es/web/javascript/reference/global_objects/syntaxerror/index.html create mode 100644 files/es/web/javascript/reference/global_objects/typedarray/buffer/index.html create mode 100644 files/es/web/javascript/reference/global_objects/typedarray/index.html create mode 100644 files/es/web/javascript/reference/global_objects/uint8array/index.html create mode 100644 files/es/web/javascript/reference/global_objects/undefined/index.html create mode 100644 files/es/web/javascript/reference/global_objects/unescape/index.html create mode 100644 files/es/web/javascript/reference/global_objects/urierror/index.html create mode 100644 files/es/web/javascript/reference/global_objects/weakmap/clear/index.html create mode 100644 files/es/web/javascript/reference/global_objects/weakmap/delete/index.html create mode 100644 files/es/web/javascript/reference/global_objects/weakmap/get/index.html create mode 100644 files/es/web/javascript/reference/global_objects/weakmap/has/index.html create mode 100644 files/es/web/javascript/reference/global_objects/weakmap/index.html create mode 100644 files/es/web/javascript/reference/global_objects/weakmap/set/index.html create mode 100644 files/es/web/javascript/reference/global_objects/weakset/index.html create mode 100644 files/es/web/javascript/reference/global_objects/webassembly/index.html create mode 100644 files/es/web/javascript/reference/index.html create mode 100644 files/es/web/javascript/reference/iteration_protocols/index.html create mode 100644 files/es/web/javascript/reference/lexical_grammar/index.html create mode 100644 files/es/web/javascript/reference/operators/addition/index.html create mode 100644 files/es/web/javascript/reference/operators/assignment/index.html create mode 100644 files/es/web/javascript/reference/operators/async_function/index.html create mode 100644 files/es/web/javascript/reference/operators/await/index.html create mode 100644 files/es/web/javascript/reference/operators/class/index.html create mode 100644 files/es/web/javascript/reference/operators/comma_operator/index.html create mode 100644 files/es/web/javascript/reference/operators/conditional_operator/index.html create mode 100644 files/es/web/javascript/reference/operators/decrement/index.html create mode 100644 files/es/web/javascript/reference/operators/delete/index.html create mode 100644 files/es/web/javascript/reference/operators/destructuring_assignment/index.html create mode 100644 files/es/web/javascript/reference/operators/division/index.html create mode 100644 files/es/web/javascript/reference/operators/equality/index.html create mode 100644 files/es/web/javascript/reference/operators/function/index.html create mode 100644 files/es/web/javascript/reference/operators/function_star_/index.html create mode 100644 files/es/web/javascript/reference/operators/grouping/index.html create mode 100644 files/es/web/javascript/reference/operators/in/index.html create mode 100644 files/es/web/javascript/reference/operators/index.html create mode 100644 files/es/web/javascript/reference/operators/instanceof/index.html create mode 100644 files/es/web/javascript/reference/operators/new.target/index.html create mode 100644 files/es/web/javascript/reference/operators/new/index.html create mode 100644 files/es/web/javascript/reference/operators/operator_precedence/index.html create mode 100644 files/es/web/javascript/reference/operators/optional_chaining/index.html create mode 100644 files/es/web/javascript/reference/operators/pipeline_operator/index.html create mode 100644 files/es/web/javascript/reference/operators/property_accessors/index.html create mode 100644 files/es/web/javascript/reference/operators/remainder/index.html create mode 100644 files/es/web/javascript/reference/operators/spread_syntax/index.html create mode 100644 files/es/web/javascript/reference/operators/strict_equality/index.html create mode 100644 files/es/web/javascript/reference/operators/subtraction/index.html create mode 100644 files/es/web/javascript/reference/operators/super/index.html create mode 100644 files/es/web/javascript/reference/operators/this/index.html create mode 100644 files/es/web/javascript/reference/operators/typeof/index.html create mode 100644 files/es/web/javascript/reference/operators/void/index.html create mode 100644 files/es/web/javascript/reference/operators/yield/index.html create mode 100644 files/es/web/javascript/reference/operators/yield_star_/index.html create mode 100644 files/es/web/javascript/reference/statements/async_function/index.html create mode 100644 files/es/web/javascript/reference/statements/block/index.html create mode 100644 files/es/web/javascript/reference/statements/break/index.html create mode 100644 files/es/web/javascript/reference/statements/class/index.html create mode 100644 files/es/web/javascript/reference/statements/const/index.html create mode 100644 files/es/web/javascript/reference/statements/continue/index.html create mode 100644 files/es/web/javascript/reference/statements/debugger/index.html create mode 100644 files/es/web/javascript/reference/statements/do...while/index.html create mode 100644 files/es/web/javascript/reference/statements/empty/index.html create mode 100644 files/es/web/javascript/reference/statements/export/index.html create mode 100644 files/es/web/javascript/reference/statements/for-await...of/index.html create mode 100644 files/es/web/javascript/reference/statements/for...in/index.html create mode 100644 files/es/web/javascript/reference/statements/for...of/index.html create mode 100644 files/es/web/javascript/reference/statements/for/index.html create mode 100644 files/es/web/javascript/reference/statements/function/index.html create mode 100644 files/es/web/javascript/reference/statements/function_star_/index.html create mode 100644 files/es/web/javascript/reference/statements/if...else/index.html create mode 100644 files/es/web/javascript/reference/statements/import.meta/index.html create mode 100644 files/es/web/javascript/reference/statements/import/index.html create mode 100644 files/es/web/javascript/reference/statements/index.html create mode 100644 files/es/web/javascript/reference/statements/label/index.html create mode 100644 files/es/web/javascript/reference/statements/let/index.html create mode 100644 files/es/web/javascript/reference/statements/return/index.html create mode 100644 files/es/web/javascript/reference/statements/switch/index.html create mode 100644 files/es/web/javascript/reference/statements/throw/index.html create mode 100644 files/es/web/javascript/reference/statements/try...catch/index.html create mode 100644 files/es/web/javascript/reference/statements/var/index.html create mode 100644 files/es/web/javascript/reference/statements/while/index.html create mode 100644 files/es/web/javascript/reference/statements/with/index.html create mode 100644 files/es/web/javascript/reference/strict_mode/index.html create mode 100644 files/es/web/javascript/reference/template_literals/index.html delete mode 100644 files/es/web/javascript/referencia/acerca_de/index.html delete mode 100644 "files/es/web/javascript/referencia/caracter\303\255sticas_desaprobadas/index.html" delete mode 100644 "files/es/web/javascript/referencia/caracter\303\255sticas_desaprobadas/the_legacy_iterator_protocol/index.html" delete mode 100644 files/es/web/javascript/referencia/classes/class_fields/index.html delete mode 100644 files/es/web/javascript/referencia/classes/constructor/index.html delete mode 100644 files/es/web/javascript/referencia/classes/extends/index.html delete mode 100644 files/es/web/javascript/referencia/classes/index.html delete mode 100644 files/es/web/javascript/referencia/classes/private_class_fields/index.html delete mode 100644 files/es/web/javascript/referencia/classes/static/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/arguments/callee/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/arguments/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/arguments/length/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/arrow_functions/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/get/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/method_definitions/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/parametros_por_defecto/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/parametros_rest/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/set/index.html delete mode 100644 files/es/web/javascript/referencia/gramatica_lexica/index.html delete mode 100644 files/es/web/javascript/referencia/index.html delete mode 100644 files/es/web/javascript/referencia/iteration_protocols/index.html delete mode 100644 files/es/web/javascript/referencia/modo_estricto/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/aggregateerror/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/@@iterator/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/@@species/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/@@unscopables/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/concat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/copywithin/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/entries/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/every/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/fill/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/filter/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/find/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/findindex/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/flat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/flatmap/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/foreach/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/from/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/includes/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/indexof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/isarray/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/join/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/keys/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/lastindexof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/length/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/map/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/of/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/pop/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/push/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/reduce/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/reduceright/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/reverse/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/shift/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/slice/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/some/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/sort/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/splice/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/tolocalestring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/tosource/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/tostring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/unshift/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/values/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/arraybuffer/@@species/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/arraybuffer/bytelength/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/arraybuffer/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/arraybuffer/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/boolean/boolean/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/boolean/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/boolean/tosource/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getdate/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getday/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getfullyear/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/gethours/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getmilliseconds/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getminutes/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getmonth/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getseconds/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/gettime/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getutcfullyear/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getutchours/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/now/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/parse/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/setfullyear/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/setmonth/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/todatestring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/toisostring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/tojson/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/tolocaledatestring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/tolocalestring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/tolocaletimestring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/toutcstring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/utc/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/decodeuri/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/decodeuricomponent/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/encodeuri/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/encodeuricomponent/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/error/constructor_error/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/error/filename/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/error/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/error/linenumber/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/error/message/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/error/name/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/error/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/error/tosource/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/error/tostring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/escape/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/eval/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/evalerror/index.html delete mode 100644 "files/es/web/javascript/referencia/objetos_globales/funcionesas\303\255ncronas/index.html" delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/apply/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/arguments/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/bind/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/call/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/caller/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/displayname/index.html delete mode 100644 "files/es/web/javascript/referencia/objetos_globales/function/funci\303\263n/index.html" delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/length/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/name/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/tosource/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/tostring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/generador/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/generador/next/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/generador/return/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/generador/throw/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/infinity/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/internalerror/constructor_internalerror/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/internalerror/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/intl/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/intl/numberformat/format/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/intl/numberformat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/intl/relativetimeformat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/isfinite/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/isnan/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/json/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/json/parse/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/json/stringify/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/clear/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/delete/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/entries/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/foreach/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/get/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/has/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/keys/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/set/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/size/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/values/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/abs/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/acos/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/acosh/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/asin/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/asinh/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/atan/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/atan2/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/atanh/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/cbrt/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/ceil/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/cos/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/e/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/exp/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/expm1/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/floor/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/fround/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/hypot/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/ln10/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/ln2/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/log/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/log10/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/log10e/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/log2/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/log2e/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/max/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/min/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/pi/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/pow/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/random/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/round/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/seno/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/sign/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/sqrt/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/sqrt1_2/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/sqrt2/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/tan/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/tanh/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/trunc/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/nan/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/null/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/isfinite/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/isinteger/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/isnan/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/issafeinteger/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/max_safe_integer/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/max_value/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/min_value/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/nan/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/negative_infinity/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/parsefloat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/parseint/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/positive_infinity/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/tofixed/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/tolocalestring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/toprecision/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/tostring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/valueof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/__definegetter__/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/__lookupgetter__/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/assign/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/constructor/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/create/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/defineproperties/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/defineproperty/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/entries/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/freeze/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/fromentries/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptor/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptors/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/getownpropertynames/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/getownpropertysymbols/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/getprototypeof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/hasownproperty/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/is/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/isextensible/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/isfrozen/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/isprototypeof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/issealed/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/keys/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/preventextensions/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/propertyisenumerable/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/proto/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/seal/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/setprototypeof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/tolocalestring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/tosource/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/tostring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/valueof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/values/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/parsefloat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/parseint/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/all/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/catch/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/finally/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/race/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/reject/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/resolve/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/then/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/proxy/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/referenceerror/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/compile/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/exec/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/ignorecase/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/regexp/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/rightcontext/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/test/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/tostring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/set/@@iterator/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/set/add/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/set/clear/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/set/delete/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/set/entries/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/set/has/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/set/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/set/size/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/set/values/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/anchor/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/big/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/blink/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/bold/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/charat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/charcodeat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/codepointat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/concat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/endswith/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/fixed/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/fontcolor/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/fontsize/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/fromcharcode/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/fromcodepoint/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/includes/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/indexof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/italics/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/lastindexof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/length/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/link/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/localecompare/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/match/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/matchall/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/normalize/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/padstart/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/raw/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/repeat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/replace/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/search/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/slice/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/small/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/split/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/startswith/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/strike/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/sub/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/substr/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/substring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/sup/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/tolocalelowercase/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/tolocaleuppercase/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/tolowercase/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/tosource/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/tostring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/touppercase/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/trim/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/trimend/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/valueof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/symbol/for/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/symbol/hasinstance/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/symbol/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/symbol/iterator/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/syntaxerror/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/syntaxerror/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/typedarray/buffer/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/typedarray/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/uint8array/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/undefined/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/unescape/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/urierror/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/clear/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/delete/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/get/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/has/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/set/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/weakset/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/webassembly/index.html delete mode 100644 "files/es/web/javascript/referencia/operadores/adici\303\263n/index.html" delete mode 100644 "files/es/web/javascript/referencia/operadores/aritm\303\251ticos/index.html" delete mode 100644 files/es/web/javascript/referencia/operadores/asignacion/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/assignment_operators/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/async_function/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/await/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/bitwise_operators/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/class/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/comparacion/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/comparison_operators/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/conditional_operator/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/decremento/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/delete/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/destructuring_assignment/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/division/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/encadenamiento_opcional/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/function/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/function_star_/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/grouping/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/in/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/instanceof/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/miembros/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/new.target/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/new/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/operador_coma/index.html delete mode 100644 "files/es/web/javascript/referencia/operadores/operadores_l\303\263gicos/index.html" delete mode 100644 files/es/web/javascript/referencia/operadores/operator_precedence/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/pipeline_operator/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/resto/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/sintaxis_spread/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/spread_operator/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/strict_equality/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/super/index.html delete mode 100644 "files/es/web/javascript/referencia/operadores/sustracci\303\263n/index.html" delete mode 100644 files/es/web/javascript/referencia/operadores/this/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/typeof/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/void/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/yield/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/yield_star_/index.html delete mode 100644 files/es/web/javascript/referencia/palabras_reservadas/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/block/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/break/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/class/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/const/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/continue/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/debugger/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/default/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/do...while/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/empty/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/export/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/for-await...of/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/for...in/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/for...of/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/for/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/funcion_asincrona/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/function/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/function_star_/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/if...else/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/import.meta/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/import/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/label/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/let/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/return/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/switch/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/throw/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/try...catch/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/var/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/while/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/with/index.html delete mode 100644 files/es/web/javascript/referencia/template_strings/index.html create mode 100644 files/es/web/javascript/typed_arrays/index.html delete mode 100644 "files/es/web/javascript/una_re-introducci\303\263n_a_javascript/index.html" delete mode 100644 files/es/web/javascript/vectores_tipados/index.html create mode 100644 files/es/web/mathml/element/index.html create mode 100644 files/es/web/mathml/element/math/index.html delete mode 100644 files/es/web/mathml/elemento/index.html delete mode 100644 files/es/web/mathml/elemento/math/index.html create mode 100644 files/es/web/media/dash_adaptive_streaming_for_html_5_video/index.html create mode 100644 files/es/web/opensearch/index.html delete mode 100644 files/es/web/performance/mejorando_rendimienot_inicial/index.html create mode 100644 files/es/web/performance/optimizing_startup_performance/index.html delete mode 100644 files/es/web/progressive_web_apps/developer_guide/instalar/index.html create mode 100644 files/es/web/progressive_web_apps/developer_guide/installing/index.html create mode 100644 files/es/web/progressive_web_apps/responsive/media_types/index.html delete mode 100644 files/es/web/progressive_web_apps/ventajas/index.html delete mode 100644 files/es/web/security/csp/csp_policy_directives/index.html delete mode 100644 files/es/web/security/csp/index.html delete mode 100644 files/es/web/security/csp/introducing_content_security_policy/index.html create mode 100644 files/es/web/security/same-origin_policy/index.html delete mode 100644 files/es/web/security/same-origin_politica/index.html delete mode 100644 files/es/web/security/securing_your_site/desactivar_autocompletado_formulario/index.html create mode 100644 files/es/web/security/securing_your_site/turning_off_form_autocompletion/index.html create mode 100644 files/es/web/svg/applying_svg_effects_to_html_content/index.html delete mode 100644 files/es/web/svg/element/glifo/index.html create mode 100644 files/es/web/svg/element/glyph/index.html create mode 100644 files/es/web/svg/element/script/index.html create mode 100644 files/es/web/svg/svg_1.1_support_in_firefox/index.html delete mode 100644 files/es/web/svg/svg_en_firefox_1.5/index.html delete mode 100644 "files/es/web/svg/tutorial/introducci\303\263n/index.html" create mode 100644 files/es/web/svg/tutorial/introduction/index.html delete mode 100644 files/es/web/tutoriales/index.html create mode 100644 files/es/web/tutorials/index.html delete mode 100644 files/es/web/web_components/custom_elements/index.html delete mode 100644 "files/es/web/xml/introducci\303\263n_a_xml/index.html" create mode 100644 files/es/web/xml/xml_introduction/index.html create mode 100644 files/es/web/xpath/axes/ancestor-or-self/index.html create mode 100644 files/es/web/xpath/axes/ancestor/index.html create mode 100644 files/es/web/xpath/axes/attribute/index.html create mode 100644 files/es/web/xpath/axes/child/index.html create mode 100644 files/es/web/xpath/axes/descendant-or-self/index.html create mode 100644 files/es/web/xpath/axes/descendant/index.html create mode 100644 files/es/web/xpath/axes/following-sibling/index.html create mode 100644 files/es/web/xpath/axes/following/index.html create mode 100644 files/es/web/xpath/axes/index.html create mode 100644 files/es/web/xpath/axes/namespace/index.html create mode 100644 files/es/web/xpath/axes/parent/index.html create mode 100644 files/es/web/xpath/axes/preceding-sibling/index.html create mode 100644 files/es/web/xpath/axes/preceding/index.html delete mode 100644 files/es/web/xpath/ejes/ancestor-or-self/index.html delete mode 100644 files/es/web/xpath/ejes/ancestor/index.html delete mode 100644 files/es/web/xpath/ejes/attribute/index.html delete mode 100644 files/es/web/xpath/ejes/child/index.html delete mode 100644 files/es/web/xpath/ejes/descendant-or-self/index.html delete mode 100644 files/es/web/xpath/ejes/descendant/index.html delete mode 100644 files/es/web/xpath/ejes/following-sibling/index.html delete mode 100644 files/es/web/xpath/ejes/following/index.html delete mode 100644 files/es/web/xpath/ejes/index.html delete mode 100644 files/es/web/xpath/ejes/namespace/index.html delete mode 100644 files/es/web/xpath/ejes/parent/index.html delete mode 100644 files/es/web/xpath/ejes/preceding-sibling/index.html delete mode 100644 files/es/web/xpath/ejes/preceding/index.html delete mode 100644 files/es/web/xpath/funciones/contains/index.html delete mode 100644 files/es/web/xpath/funciones/index.html delete mode 100644 files/es/web/xpath/funciones/substring/index.html delete mode 100644 files/es/web/xpath/funciones/true/index.html create mode 100644 files/es/web/xpath/functions/contains/index.html create mode 100644 files/es/web/xpath/functions/index.html create mode 100644 files/es/web/xpath/functions/substring/index.html create mode 100644 files/es/web/xpath/functions/true/index.html create mode 100644 files/es/web/xpath/introduction_to_using_xpath_in_javascript/index.html delete mode 100644 files/es/web/xslt/apply-imports/index.html delete mode 100644 files/es/web/xslt/apply-templates/index.html delete mode 100644 files/es/web/xslt/attribute-set/index.html delete mode 100644 files/es/web/xslt/attribute/index.html delete mode 100644 files/es/web/xslt/call-template/index.html delete mode 100644 files/es/web/xslt/choose/index.html delete mode 100644 files/es/web/xslt/comment/index.html delete mode 100644 files/es/web/xslt/copy-of/index.html delete mode 100644 files/es/web/xslt/copy/index.html delete mode 100644 files/es/web/xslt/decimal-format/index.html create mode 100644 files/es/web/xslt/element/apply-imports/index.html create mode 100644 files/es/web/xslt/element/apply-templates/index.html create mode 100644 files/es/web/xslt/element/attribute-set/index.html create mode 100644 files/es/web/xslt/element/attribute/index.html create mode 100644 files/es/web/xslt/element/call-template/index.html create mode 100644 files/es/web/xslt/element/choose/index.html create mode 100644 files/es/web/xslt/element/comment/index.html create mode 100644 files/es/web/xslt/element/copy-of/index.html create mode 100644 files/es/web/xslt/element/copy/index.html create mode 100644 files/es/web/xslt/element/decimal-format/index.html create mode 100644 files/es/web/xslt/element/fallback/index.html create mode 100644 files/es/web/xslt/element/for-each/index.html create mode 100644 files/es/web/xslt/element/if/index.html create mode 100644 files/es/web/xslt/element/import/index.html create mode 100644 files/es/web/xslt/element/include/index.html create mode 100644 files/es/web/xslt/element/key/index.html create mode 100644 files/es/web/xslt/element/message/index.html create mode 100644 files/es/web/xslt/element/namespace-alias/index.html create mode 100644 files/es/web/xslt/element/number/index.html create mode 100644 files/es/web/xslt/element/otherwise/index.html create mode 100644 files/es/web/xslt/element/when/index.html create mode 100644 files/es/web/xslt/element/with-param/index.html delete mode 100644 files/es/web/xslt/fallback/index.html delete mode 100644 files/es/web/xslt/for-each/index.html delete mode 100644 files/es/web/xslt/if/index.html delete mode 100644 files/es/web/xslt/import/index.html delete mode 100644 files/es/web/xslt/include/index.html delete mode 100644 files/es/web/xslt/key/index.html delete mode 100644 files/es/web/xslt/message/index.html delete mode 100644 files/es/web/xslt/namespace-alias/index.html delete mode 100644 files/es/web/xslt/number/index.html delete mode 100644 files/es/web/xslt/otherwise/index.html delete mode 100644 files/es/web/xslt/transformando_xml_con_xslt/index.html create mode 100644 files/es/web/xslt/transforming_xml_with_xslt/index.html delete mode 100644 files/es/web/xslt/when/index.html delete mode 100644 files/es/web/xslt/with-param/index.html delete mode 100644 files/es/web_audio_api/index.html delete mode 100644 "files/es/web_development/mobile/dise\303\261o_responsivo/index.html" delete mode 100644 files/es/web_development/mobile/index.html delete mode 100644 files/es/webapi/estado_de_bateria/index.html delete mode 100644 files/es/webapi/index.html delete mode 100644 files/es/webapi/pointer_lock/index.html delete mode 100644 files/es/webapi/using_geolocation/index.html delete mode 100644 files/es/webrtc/index.html delete mode 100644 files/es/webrtc/introduction/index.html delete mode 100644 files/es/webrtc/mediastream_api/index.html delete mode 100644 files/es/webrtc/peer-to-peer_communications_with_webrtc/index.html delete mode 100644 files/es/webrtc/taking_webcam_photos/index.html delete mode 100644 files/es/websockets/index.html delete mode 100644 files/es/xhtml/index.html delete mode 100644 files/es/xpinstall_api_reference/index.html delete mode 100644 "files/es/zoom_a_p\303\241gina_completa/index.html" diff --git a/files/es/acerca_del_modelo_de_objetos_del_documento/index.html b/files/es/acerca_del_modelo_de_objetos_del_documento/index.html deleted file mode 100644 index 8123441661..0000000000 --- a/files/es/acerca_del_modelo_de_objetos_del_documento/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Acerca del Modelo de Objetos del Documento -slug: Acerca_del_Modelo_de_Objetos_del_Documento -tags: - - DOM - - Todas_las_Categorías -translation_of: Web/API/Document_Object_Model -translation_of_original: DOM/About_the_Document_Object_Model ---- -

¿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/actualizar_aplicaciones_web_para_firefox_3/index.html b/files/es/actualizar_aplicaciones_web_para_firefox_3/index.html deleted file mode 100644 index e81f21fa49..0000000000 --- a/files/es/actualizar_aplicaciones_web_para_firefox_3/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Actualizar aplicaciones web para Firefox 3 -slug: Actualizar_aplicaciones_web_para_Firefox_3 -tags: - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3/Updating_web_applications ---- -
{{FirefoxSidebar}}
- -

{{ Fx_minversion_header(3) }} Existen varios cambios en el próximo Firefox 3 que pueden afectar tu sitio web o aplicación web, así como nuevas características que se pueden aprovechar. Este artículo servirá como punto de partida para actualizar el contenido web de modo que se pueda aprovechar Firefox 3 al máximo.

- -

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

- -

Cambios HTML

- -

Cambios en el conjunto de caracteres de herencia

- -

Firefox 3 cierra un fallo en la seguridad en frames e iframes que les permitía heredar el conjunto de caracteres de donde eran derivadas. Esto podría causar problemas en ciertos casos. Ahora, las frames están solamente permitidas a heredar el conjunto de caracteres si ambos frames y el conjunto de caracteres fue cargado del mismo servidor. Si tienes páginas que asumen que las frames fueron cargadas de otro servidor heredará el mismo conjunto de caracteres, deberías actualizar los HTML de las frames para indicar el conjunto de caracteres específicamente.

- -

Cambios en el elemento SCRIPT

- -

Ahora hay que cerrar el elemento <script> en text/html con </script> en los documentos de HTML 4, incluso si no hay contenido dentro. En las versiones previas de Firefox, bastaba con hacer:

- -
<script ...   />
-
- -

Ahora se deben cumplir las especificaciones de HTML (si se trata de un HTML), y por lo tanto se deben cerrar, así:

- -
<script ...></script>
-
- -

Esto mejora tanto la compatibilidad como la seguridad.

- -

Cambios en CSS

- -

Cambio al tamaño de fuente basado en unidades em, ex

- -

Los valores de fuente en unidades em y ex solían ser afectadas por el tamaño mínimo de fuente utilizado por el usuario: si una fuente se desplegaba más grande debido al tamaño mínimo, el ajuste de las unidades em y ex para el tamaño de fuente basados en esta se incrementarían de forma acorde. Esto era inconsistente con la forma en que las fuentes basadas en porcentaje se comportaban.

- -

Los valores del tamaño de fuente en unidades em y ex ahora están basadas en un "tamaño de fuente intencionado" que no se ve afectado por el tamaño mínimo de fuente del usuario. En otras palabras, los tamaños de la fuente se calculan de acuerdo a las intenciones del diseñador y se ajustan al tamaño mínimo de fuente después de ello.

- -

Ver {{ Bug(322943) }} para una demostración (se debe ver con un tamaño mínimo de fuente 6 para detectar la diferencia: las dos cajas en cascada se comportan diferente en Firefox 2, porque el tamaño de fuente basado en em "retorna" el tamaño mínimo de fuente.

- -

Cambios de seguridad

- -

Acceso Chrome

- -

En versiones anteriores de Firefox, cualquier página web podía cargar scripts o imágenes chrome:// usando el protocolo chrome. Entre otras cosas, esto hizo posible que algunos sitios no detectaran la presencia de complementos,  lo cual podía ser usado para traspasar la seguridad del usuario saltando los complementos que agregaban medidas de seguridad al buscador.

- -

Firefox 3 solo permite contenido web para acceder a los elementos en los espacios del chrome://browser/ y en espacio chrome://toolkit/. Estos archivos pretenden ser accesibles por el contenido web. Ahora cualquier otro contenido chrome es bloqueado para el sitio web.

- -

Hay, sin embargo, métodos para ciertas extensiones que puden ser accedidos por la web. Se puede especificar una bandera en su archivo chrome.manifest de esta manera:

- -
content mypackage location/ contentaccessible=yes
-
- -

Esto no debería ser algo que se haga muy seguido, pero está disponible para aquellos casos raros en los que es necesario. Debe tomarse en cuenta que es posible que Firefox alerte al usuario que su extensión utiliza una bandera en el contentaccessible de alguna manera, ya que consituye un riesgo potencial en la seguridad.

- -
Nota: Ya que Firefox 2 no entiende la bandera contentaccessible (ignorará la instrucción completa de que contiene la bandera), si se desea que el complemento sea compatible con Firefox 2 y Firefox 3, hay que hacer algo como esto: - -
content mypackage location/
-content mypackage location/ contentaccessible=yes
-
-
- -

Campos para subir archivos

- -

En versiones anteriores de Firefox, había casos en los que cuando el usuario seleccionaba un archivo para subir, la aplicación web podía ver la ruta completa del archivo. Esta pertinencia de privacidad ha sido resuelta en Firefox 3; ahora la aplicación web solo mostrará el nombre del archivo.

- -

Cambios en JavaScript

- -

Firefox 3 soporta JavaScript 1.8. Un cambio importante que quizás requiera actualizaciones en los sitios web o en las aplicaciones, es que los Script obsoletos y no-estandar no son soportados. Esto no es la etiqueta <script>, pero un objeto de JavaScript que nunca fue estandarizado. De cualquier manera es muy improbable que se use, así que probablemente no surgan problemas.

- -

Vea también

- - diff --git a/files/es/actualizar_extensiones_para_firefox_3/actualizar_extensiones_para_firefox_3/index.html b/files/es/actualizar_extensiones_para_firefox_3/actualizar_extensiones_para_firefox_3/index.html deleted file mode 100644 index e4c788c5bb..0000000000 --- a/files/es/actualizar_extensiones_para_firefox_3/actualizar_extensiones_para_firefox_3/index.html +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: Actualizar extensiones para Firefox 3 -slug: Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3 -tags: - - 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/actualizar_extensiones_para_firefox_3/index.html b/files/es/actualizar_extensiones_para_firefox_3/index.html deleted file mode 100644 index fc3f91addd..0000000000 --- a/files/es/actualizar_extensiones_para_firefox_3/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: Actualizar extensiones para Firefox 3 -slug: Actualizar_extensiones_para_Firefox_3 -tags: - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3/Updating_extensions ---- -
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

- -

Este artículo ofrece información que será de utilidad para desarrolladores que deseen actualizar sus extensiones, para que éstas funcionen correctamente con Firefox 3.
-
- Antes de continuar, queremos sugerirte algo: si el único cambio que requiere tu extensión es modificar el campo maxVersion en el manifiesto de instalación, la extensión está disponible en el servidor addons.mozilla.org y ¡no necesitarás actualizar tu extensión a una nueva versión! Simplemente usa el Panel de Control para desarrolladores en AMO para modificar 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 la mayoría de las extensiones, el único que será necesario— es actualizar el archivo install.rdf dentro del manifiesto de instalación para indicar la compatibilidad con Firefox 3.

- -

Sólo debes buscar la línea que indica la máxima versión compatible de Firefox, lo que para Firefox 2, probablemente sea:

- -
 <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 la versión. Por lo tanto, en lugar de escribir "3.0.0.*", sólo necesitas usar "3.0.*".

- -

Ha habido (y continuará habiendo) una serie de cambios en las APIs, lo que muy probablemente averiará algunas extensiones. Aún estamos trabajando para confeccionar una lista completa de estos cambios.

- -

Si tu extensión todavía usa un script Install.js en vez de un manifiesto de instalación, necesitas hacer la transición a un manifiesto de instalación lo más pronto posible. Firefox 3 no implementará el script install.js en documentos XPI.

- -

Agregar localizaciones al manifiesto de instalación

- -

Firefox 3 cuenta con tres nuevas propiedades en el manifiesto de instalación para especificar descripciones de localización. Los métodos antiguos todavía 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 Localizar las_descripciones_de_las_extensiones para más detalles.

- -

Paso 2: Asegúrate de suministrar actualizaciones seguras

- -

Si suministras extensiones por tu propia cuenta y no usas un proveedor de hosting seguro como addons.mozilla.org, debes asegurarte de suministrar algún método seguro para la actualización de tus extensiones. Esto puede hacerse de dos formas: puedes usar un hosting con servicio de SSL o bien, puedes usar claves criptográficas para firmar la información de actualización. Lee Cómo hacer actualizaciones seguras para más información.

- -

Paso 3: Debes estar al tanto de los cambios en las APIs

- -

Muchas APIs han sido modificadas de forma significativa. Los cambios más importantes, que seguramente afectarán a muchas extensiones son:

- -

DOM

- -

Los nodos de documentos externos deberán copiarse idénticamente usando importNode() (o adoptarlos usando adoptNode()) antes de poder insertarlos en el documento actual. Para más información acerca de cuestiones relacionadas con ownerDocument, visita W3C DOM FAQ.

- -

Actualmente, Firefox no exige hacerlo aunque sí lo hizo durante algún tiempo, durante el desarrollo de Firefox 3. Lo que ocurrió fue que muchos sitios sufrían averías cuando esta política era obligatoria. Nuestra recomendación para los desarrolladores web es que corrijan su código para cumplir con esta regla y así lograr una mejor compatibilidad a futuro.

- -

Marcadores e Historial

- -

Si de alguna forma tu extensión tiene acceso a Marcadores o Historial, necesitarás un gran esfuerzo para hacer que sea compatible con Firefox 3. Las APIs antiguas que daban acceso a esta información han sido reemplazadas por la nueva arquitectura Catálogo (Biblioteca). Visita la Guía para la migración a Catálogo (Biblioteca) para más detalles acerca de cómo actualizar tus extensiones para el uso de las APIs de Catálogo (Biblioteca).

- -

Administrador de descargas

- -

La API del Administrador de descargas ha cambiado ligeramente debido a la transición del almacén de datos RDF al uso de la API Almacenamiento. Esto debería ser una transición sencilla y fácil. Además , se ha modificado la API que controla los procesos de descarga para permitir varios receptores del administrador de descargas. Visita {{ Interface("nsIDownloadManager") }}, {{ Interface("nsIDownloadProgressListener") }} y Controlar descargas para más información.

- -

Administrador de contraseñas

- -

Si tu extensión tiene acceso a información de inicio de sesión de usuario en el Administrador de contraseñas, deberás actualizarla para poder utilizar la nueva API para el Administrador de inicio de sesión.

- - - -

También puedes sobrescribir el almacén del administrador de contraseñas interno si quieres ofrecer tu propia implementación del almacén de contraseñas en la extensión. Visita Crear un módulo de almacenamiento para el Administrador de inicio de sesión 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 ahora contempla menús principales, menús contextuales y paneles. Se ha creado una guía para Utilizar Ventanas emergentes que detalla cómo funciona este sistema. Algo que debes tener en cuenta, es que se desaconseja el uso de popup.showPopup en favor de los nuevos popup.openPopup y popup.openPopupAtScreen.

- -
-

Autocompletar

-
- -

El método handleEnter() de la interfaz nsIAutoCompleteController ha cambiado para aceptar un argumento que indique si el texto ha sido seleccionado desde una ventana emergente para Autocompletar o bien, por el usuario que ha pulsado la tecla Entrar (Enter) después de ingresar texto.

- -

DOMParser

- - - -

Interfaces eliminadas

- -

Las siguientes interfaces han sido eliminadas en Gecko 1.9, el motor de renderizado de Firefox 3. Si tu extensión utiliza cualquiera de estas interfaces, deberás actualizar tu código:

- - - -

Paso 4: Comprueba los cambios importantes en el chrome

- -

Se ha producido un cambio menor en el chrome que puede requerir cambios 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 inferior de la ventana del navegador. Aunque esto no afecta la apariencia de la pantalla, puede que afecte tu extensión si el chrome se superpone, en relación a los elementos descriptos.

- -

Por ejemplo, si has superpuesto algún elemento del chrome antes de la barra de estado de la siguiente manera:

- -
<window id="main-window">
-  <something insertbefore="status-bar" />
-</window>
-
- -

Debes cambiar tu código a algo que se parezca a:

- -
<vbox id="browser-bottombox">
-  <something insertbefore="status-bar" />
-</vbox>
-
- -

O bien, emplear la siguiente técnica para hacer que la superposición funcione en Firefox 2 y Firefox 3 por igual:

- -
<window id="main-window">
-  <vbox id="browser-bottombox" insertbefore="status-bar">
-    <something insertbefore="status-bar" />
-  <vbox>
-</window>
-
- -

{{ Note("Este cambio es efectivo para Firefox 3 beta 4 y la prebeta 4.") }}

- -

Otros cambios

- -

Añade aquí cambios sencillos que debas realizar cuando actualizas tu extensión para que funcione con Firefox 3.

- - diff --git "a/files/es/actualizar_una_extensi\303\263n_para_que_soporte_m\303\272ltiples_aplicaciones_de_mozilla/index.html" "b/files/es/actualizar_una_extensi\303\263n_para_que_soporte_m\303\272ltiples_aplicaciones_de_mozilla/index.html" deleted file mode 100644 index b29ef38baf..0000000000 --- "a/files/es/actualizar_una_extensi\303\263n_para_que_soporte_m\303\272ltiples_aplicaciones_de_mozilla/index.html" +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla -slug: Actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_Mozilla -tags: - - Complementos - - Todas_las_Categorías - - extensiones ---- -

 

-

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/applying_svg_effects_to_html_content/index.html b/files/es/applying_svg_effects_to_html_content/index.html deleted file mode 100644 index b5c8f17b51..0000000000 --- a/files/es/applying_svg_effects_to_html_content/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Aplicación de efectos de SVG para el contenido HTML -slug: Applying_SVG_effects_to_HTML_content -tags: - - CSS - - Firefox 3.5 - - Firefox 4.0 - - HTML - - HTML 5 - - SVG - - XHTML ---- -

Aplicación de efectos de SVG para el contenido HTML.

-

{{ gecko_minversion_header("1.9.1") }}

-

Firefox 3.5 introduce soporte para usar SVG como un componente de estilos CSS para aplicar efectos de SVG para el contenido HTML.
-
-Puede especificar SVG en los estilos, ya sea dentro del mismo documento, o dentro de una hoja de estilos externa.

-
Nota: Las referencias a SVG en archivos externos deben ser de el mismo origen que el documento de origen.
-

Uso integrado SVG

-

Para aplicar un efecto SVG usando estilos CSS, primero tiene que crear el estilo CSS que hace referencia al SVG para aplicar.

-
<style>.stylename { mask: url(#localstyle); }</style>
-
-

 En el ejemplo anterior, el nuevo estilo, por "stylename," es una máscara de SVG que hace referencia a el identificador "localstyle". Una vez que se estableció, que la máscara se aplica a todos los elementos con este estilo CSS.
-
-Esto suena más complicado de lo que realmente es, echar un vistazo a los ejemplos para tener una buena idea de cómo funciona esto.
-
-Hay tres estilos que se pueden aplicar: puede usar la máscara, el recorrido de clip, o un filtro.

-

 

-

Ejemplo: Enmascaramiento (Máscara)

-

Por ejemplo, puede establecer un estilo CSS que proporciona una máscara de degradado para el contenido HTML con código SVG similar a lo siguiente en su documento HTML:

-

NOTA: El espaciamiento de nombre no es válida en HTML 5, dejar fuera de la "svg:" en las etiquetas de los documentos en formato HTML.

-
  <style>.target { mask: url(#m1); }</style>
-  <svg:svg height="0">
-    <svg:mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
-      <svg:linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
-        <svg:stop stop-color="white" offset="0"/>
-        <svg:stop stop-color="white" stop-opacity="0" offset="1"/>
-      </svg:linearGradient>
-      <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
-      <svg:rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)"/>
-    </svg:mask>
-  </svg:svg>
-
-

Tenga en cuenta que en la línea 1, la máscara se especifica mediante una dirección URL para el ID "# M1", que es el identificador de la máscara de SVG que se especifican a continuación. Todo lo demás se especifican otros detalles sobre la misma máscara de degradado.

-

En realidad, de aplicar el efecto SVG a XHTML o HTML se hace simplemente asignar el estilo de destino definido anteriormente para el elemento, así:

-
<iframe class="target" src="http://mozilla.org"/>
-

En este ejemplo se incrusta un iframe que contiene el sitio web de Mozilla.org, que se representa con la máscara que se le aplica.

-

View this example live.

Ejemplo: Recorte

-

Este ejemplo muestra cómo utilizar SVG para recortar el contenido HTML. Cuando nos fijamos en la demostración en vivo, cuenta que incluso en las zonas calientes de los enlaces se recortan.

-
  <style>.target { clip-path: url(#c1); }</style>
-  <svg:svg height="0">
-    <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
-      <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
-      <svg:rect x="0.5" y="0.2" width="0.5" height="0.8"/>
-    </svg:clipPath>
-  </svg:svg>
-
-

Esto establece un área de recorte compuesto por un círculo y el rectángulo, y le asigna el ID # c1 ". Esto entonces se hace referencia en el estilo. Una vez que el estilo de destino se establece de esta manera, la ruta del clip se puede asignar a cualquier elemento.

-

Tenga en cuenta también que puede realizar cambios en el SVG en tiempo real y ver los cambios afectan inmediatamente a la prestación del HTML. Por ejemplo, puede cambiar el tamaño del círculo en el camino clip establecido:

-
    var circle = document.getElementById("circle");
-    circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
-
-

View this example live.  El ejemplo incluye un botón, puede hacer clic para cambiar la ruta de clip y ver que el cambio surta efecto.

Ejemplo: Filtrar

-

Este ejemplo muestra cómo se puede aplicar un filtro para el contenido HTML utilizando SVG. Establece varios filtros que se aplican con estilos para cada uno de los tres elementos, tanto en los Estados suspender normal y el ratón.
-
-Cualquier SVG filtro se puede aplicar de esta manera. Por ejemplo, para aplicar un efecto de desenfoque gaussiano, puede utilizar:

-
<svg:filter id="f1">
-  <svg:feGaussianBlur stdDeviation="3"/>
-</svg:filter>
-
-

También puede aplicar una matriz de color, de esta manera:

-
    <svg:filter id="f2">
-      <svg:feColorMatrix values="0.3333 0.3333 0.3333 0 0
-                                 0.3333 0.3333 0.3333 0 0
-                                 0.3333 0.3333 0.3333 0 0
-                                 0      0      0      1 0"/>
-
-    </svg:filter>
-
-

Estos son sólo dos de los cinco filtros de muestra en este ejemplo. Asegúrese de echar un vistazo al código completo si le gustaría ver más.
-
-Los cinco filtros se aplican mediante el siguiente código CSS:

-
  <style>
-    p.target { filter:url(#f3); }
-    p.target:hover { filter:url(#f5); }
-    b.target { filter:url(#f1); }
-    b.target:hover { filter:url(#f4); }
-    iframe.target { filter:url(#f2); }
-    iframe.target:hover { filter:url(#f3); }
-  </style>
-
-

View this example live.

Uso de referencias externas

-

Los elementos SVG se utiliza para cortar, el enmascaramiento, y así sucesivamente se pueden cargar desde un documento externo, mientras que el documento proviene del mismo origen que el documento HTML al que se aplica.
-
-Por ejemplo, si tu CSS en un archivo llamado default.css, puede tener el siguiente aspecto:

-
.target { clip-path: url(resources.svg#c1); }
-

El SVG se importa desde un archivo llamado resources.svg, utilizando la ruta del clip con el ID c1.

Véa también

- -

 

-

 

-

                      CESAR ORTIZ GUTIERREZ - ELPATOX - wWw.Patito.Tk

diff --git "a/files/es/a\303\261adir_lectores_de_canales_a_firefox/index.html" "b/files/es/a\303\261adir_lectores_de_canales_a_firefox/index.html" deleted file mode 100644 index 5b8c50bc83..0000000000 --- "a/files/es/a\303\261adir_lectores_de_canales_a_firefox/index.html" +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Añadir lectores de canales a Firefox -slug: Añadir_lectores_de_canales_a_Firefox -tags: - - RSS - - Todas_las_Categorías -translation_of: Mozilla/Firefox/Releases/2/Adding_feed_readers_to_Firefox ---- -
{{FirefoxSidebar}}

A partir de Firefox 2, Firefox permite seleccionar diferentes lectores de canales RSS o Atom para usarlos cuando se trata de leer un canal. Este artículo proporciona información sobre cómo añadir lectores adicionales no admitidos por defecto.

- -

Añadir un nuevo lector de canales basado en la web

- -

Para añadir un nuevo lector de canales basado en la web, todo lo que tiene que hacer es añadir tres nuevas preferencias:

- -
-
browser.contentHandlers.types.número.title
-
El nombre del lector de canales.
-
browser.contentHandlers.types.número.type
-
Para un lector de canales, en este caso sería "application/vnd.mozilla.maybe.feed".
-
browser.contentHandlers.types.número.uri
-
La URI del lector de canales. Utilice "%s" donde se deba insertar la URL del canal.
-
- -

número debe ser reemplazado con el siguiente número único más alto que no haya sido usado aún. Por ejemplo, si desea añadir un nuevo lector de canales llamado "Lector Sencillo", y ya están definidos manejadores de contenido con los números 0 al 4, debe sustituir número por 5, como sigue:

- - - -

Puede añadir estas preferencias manualmente, visitando about:config, o puede programarlo, si una extensión desea instalar un nuevo lector de canales.

- -

Añadir un lector de canales desde una aplicación web

- -

El código JavaScript en la web puede añadir un lector de canales fácilmente, usando la función navigator.registerContentHandler(), de esta manera:

- -
navigator.registerContentHandler("application/vnd.mozilla.maybe.feed",
-                                 "http://www.urllectorsencillo.com?feed=%s",
-                                 "Lector Sencillo");
-
- -

Añadir una nueva aplicación lectora de canales

- -

La manera más sencilla de hacer esto es simplemente usar la interfaz de usuario disponible, usando el panel Canales en la ventana de preferencias (u opciones, dependiendo de su plataforma).

- -

También se puede hacer programáticamente mediante una extensión, lo cual se hace estableciendo el valor de la opción browser.feeds.handlers.application a la ruta de la aplicación a usar para leer los canales.

- -
 
- -

{{ languages( { "en": "en/Adding_feed_readers_to_Firefox", "ja": "ja/Adding_feed_readers_to_Firefox", "zh-tw": "zh_tw/\u65b0\u589e\u6d88\u606f\u4f86\u6e90\u95b1\u8b80\u5de5\u5177" } ) }}

diff --git "a/files/es/a\303\261adir_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" "b/files/es/a\303\261adir_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" deleted file mode 100644 index 638147ee38..0000000000 --- "a/files/es/a\303\261adir_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Añadir motores de búsqueda desde páginas web -slug: Añadir_motores_de_búsqueda_desde_páginas_web -tags: - - Plugins_de_búsqueda -translation_of: Web/OpenSearch -translation_of_original: Web/API/Window/sidebar/Adding_search_engines_from_Web_pages ---- -

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/bugs_importantes_solucionados_en_firefox_3/index.html b/files/es/bugs_importantes_solucionados_en_firefox_3/index.html deleted file mode 100644 index 5dbc833d4a..0000000000 --- a/files/es/bugs_importantes_solucionados_en_firefox_3/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Bugs importantes solucionados en Firefox 3 -slug: Bugs_importantes_solucionados_en_Firefox_3 -tags: - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3/Notable_bugs_fixed ---- -
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

- -

Este artículo es una lista de correcciones importantes de errores en Firefox 3 que no resultan obvios en la documentación.

- - - -

Ver también

- - - -

 

- -
 
- -

{{ languages( { "en": "en/Notable_bugs_fixed_in_Firefox_3", "fr": "fr/Bugs_importants_corrig\u00e9s_dans_Firefox_3", "ja": "ja/Notable_bugs_fixed_in_Firefox_3", "pl": "pl/Istotne_b\u0142\u0119dy_poprawione_w_Firefoksie_3" } ) }}

diff --git a/files/es/building_an_extension/index.html b/files/es/building_an_extension/index.html deleted file mode 100644 index 615116edaf..0000000000 --- a/files/es/building_an_extension/index.html +++ /dev/null @@ -1,380 +0,0 @@ ---- -title: Construyendo una extensión -slug: Building_an_Extension -translation_of: Mozilla/Add-ons -translation_of_original: 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/cadenas_del_user_agent_de_gecko/index.html b/files/es/cadenas_del_user_agent_de_gecko/index.html deleted file mode 100644 index 4dbd1908cf..0000000000 --- a/files/es/cadenas_del_user_agent_de_gecko/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Cadenas del User Agent de Gecko -slug: Cadenas_del_User_Agent_de_Gecko -tags: - - Desarrollo_Web - - Todas_las_Categorías -translation_of: Web/HTTP/Headers/User-Agent/Firefox ---- -

Uso Apropiado

-

No se recomienda el uso de las cadenas del User Agent como su principal opción para la detección del navegador. Vea Deteccion Cross browser y Soporte Cross Browser para una ojeada mas en profundo a varias técnicas sobre detección de navegadores con recomendaciones.

-

En particular, recomendamos usar la detección de la cadena del User Agent para detección del navegador del lado del servidor. Si su actual código del lado cliente usa detección de la cadena del User Agent, simplemente puede hacer una búsqueda por la cadena "Gecko" en el User Agent para detectar cualquier navegador basado en Gecko.

-

Para todos los detalles que lidian con detecciones con Gecko los cuales lidian con bugs especificos o los cuales requieran conocimiento de strings especificos o fechas de la compilación, use el objeto navigator.

-

Lista de user agents liberados por Netscape y AOL basados en Gecko

-

Vea mozilla.org's user-agent strings reference para Plataforma específico, - - Seguridad - , - - Sistema Operativo - o - - CPU - y valores de - - localización - .

- -


- Para una información más detallada sobre liberaciones de Netscape y Mozilla, por favor vea el mozilla.org cvstags reference.

-

 

-
-

Informacion Del documento Original

- -
-

 

diff --git a/files/es/code_snippets/index.html b/files/es/code_snippets/index.html deleted file mode 100644 index 24233e92ba..0000000000 --- a/files/es/code_snippets/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Code snippets -slug: Code_snippets ---- -This page was auto-generated because a user created a sub-page to this page. diff --git "a/files/es/code_snippets/pesta\303\261as_del_navegador/index.html" "b/files/es/code_snippets/pesta\303\261as_del_navegador/index.html" deleted file mode 100644 index 12e2f8c676..0000000000 --- "a/files/es/code_snippets/pesta\303\261as_del_navegador/index.html" +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Pestañas del navegador -slug: Code_snippets/Pestañas_del_navegador -tags: - - Add-ons - - extensiones - - fragmentos de código - - pestañas ---- -

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/columnas_con_css-3/index.html b/files/es/columnas_con_css-3/index.html deleted file mode 100644 index 8eed415ee2..0000000000 --- a/files/es/columnas_con_css-3/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Columnas con CSS-3 -slug: Columnas_con_CSS-3 -tags: - - CSS - - Todas_las_Categorías -translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts ---- -

-

-

Introducción

-

Cuando leemos un texto, las líneas muy largas resultan incómodas. Si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas (al ir de un extremo al otro de la página). Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos. Por desgracia esto no es posible con HTML y CSS-2, a no ser que fuerces la ruptura de las columnas en puntos fijos, limites en gran medida el código a utilizar, o uses scripts complejos. -

El borrador de CSS-3 propone algunas nuevas propiedades para dar respuesta a esta necesidad. En Firefox 1.5 y superior hemos implementado algunas de estas propiedades para comportarnos según lo descrito en el borrador de CSS-3 (con una excepción explicada abajo)

El blog de Robert O'Callahan  usa columnas CSS, pruébalo con Firefox 1.5 -

-

Usar Columnas

-

Columnas, Count y Width

-

Dos propiedades CSS Controlan el número (Count) y el ancho (Width) de las columnas: -moz-column-count y -moz-column-width. -

-moz-column-count indica el número concreto de columnas a crear. Por ejemplo: -

-
<div style="-moz-column-count:2; -moz-column-gap: 1em;">
-Cuando leemos un texto las líneas muy largas resultan incómodas, si son
-demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
-de la línea en la que estabas. Por ello, pensando en los usuarios con
-monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
-en columnas, más o menos, como hacen los periódicos.</div>
-
-

Mostrará el contenido en dos columnas (si usas Firefox 1.5 o superior): -

-
Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.
-

-moz-column-width fija la anchura mínima de las columnas. Si no se indica un -moz-column-count, entonces el navegador creará automáticamente tantas columnas (con la anchura indicada) como sea posible en el espacio disponible.

-
<div style="-moz-column-width:20em; -moz-column-gap: 1em;">
-Cuando leemos un texto las líneas muy largas resultan incómodas, si son
-demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
-de la línea en la que estabas. Por ello, pensando en los usuarios con
-monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
-en columnas, más o menos, como hacen los periódicos.</div>
-
-

Se visualizará así: -

-
Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.
-

Los detalles exactos son descritos en El borrador de CSS3. -

En un bloque multicolumna, el contenido fluye automáticamente de una columna a otra según sea necesario. Todas las funcionalidades de HTML, CSS, y DOM están soportadas dentro de las columnas, tanto al editar como al imprimir. -

-

Equilibrado de altura

-

El borrador de CSS3 especifica que la altura de las columnas debe estar equilibrada, es decir, el navegador debe definir automáticamente la altura máxima de las columnas de modo que la altura del contenido en cada columna sea más o menos igual. Firefox lo hace.

Sin embargo, en algunas situaciones puede ser útil fijar explícitamente la altura máxima de las columnas, y entonces se empiezan a meter los contenidos en la primera columna y se van creando tantas columnas como sea necesario, posiblemente desbordando por la derecha. Por ejemplo, en http://iht.com/ los artículos hacen esto (usando scripts). Por lo tanto extendemos el borrador de modo que si se indica la propiedad CSS height en un bloque multicolumnas, se permite que cada columna tenga esa altura -y no más- antes de agregar la siguiente columna. Esto permite una composición mucho más eficiente.

-

Espacio entre Columnas

-

Por defecto, cada columna está tocando la columna de al lado. Normalmente esto no es lo más apropiado. Se puede utilizar el padding de las columnas para corregirlo, pero normalmente lo más fácil será aplicar la propiedad -moz-column-gap al bloque con multicolumna:

-
<div style="-moz-column-width:20em; -moz-column-gap:2em;">
-Cuando leemos un texto las líneas muy largas resultan incómodas, si son
-demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
-de la línea en la que estabas. Por ello, pensando en los usuarios con
-monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
-en columnas, más o menos, como hacen los periódicos.</div>
-
-

Se visualizará así: -

-
Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.
-

Degradado elegante

-

La propiedad -moz-column será ignorada por los navegadores que no la soporten, por lo tanto, es relativamente fácil crear un diseño que en esos navegadores muestre una sola columna, y al mismo tiempo utilice multi-columnas en Firefox 1.5. -

-

Conclusión

-

Las columnas CSS3 son un nuevo método básico de disposición que ayudará a los desarrolladores Web a aprovechar mejor las condiciones reales de la pantalla. Los desarrolladores imaginativos podrán encontrarle muchas aplicaciones, especialmente a la característica de equilibrado automático y dinámico de la altura.

-

Referencias adicionales

- -

Categorías -

interwiki links -

{{ languages( { "en": "en/CSS3_Columns", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_Columns", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }} diff --git a/files/es/compilar_e_instalar/index.html b/files/es/compilar_e_instalar/index.html deleted file mode 100644 index 8322104d8e..0000000000 --- a/files/es/compilar_e_instalar/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Compilar e instalar -slug: Compilar_e_instalar -tags: - - Documentación_de_compilado -translation_of: Mozilla/Developer_guide/Build_Instructions -translation_of_original: Build_and_Install ---- -

NOTE: Do not make substantive changes to this document without consulting Benjamin Smedberg <benjamin@smedbergs.us> or one of the build-config peers.

-
- NOTA: No comience a compilar sin antes configurar las opciones de compilación!
-

Compilando

-

Debes usar GNU make para verificar y compilar Mozilla, no se acepta otro programa "make". En Windows, Mac OS X, y GNU/Linux usa "make" para ejecutar GNU make; en la mayoría de los unix-no GNU debes usar "gmake".

-

Una vez que verificaste el código, asegúrate de configurar la aplicación como se describe en las opciones de configuración.

-

Para Windows, Mac OS X, y GNU/Linux, asegúrate de estar en el nivel superior del directorio fuente ("mozilla") cuando llames el comando make:

-
$ make -f client.mk build
-
-

Para la mayoría de los unix no-GNU:

-
$ gmake -f client.mk build
-
-

Si quieres configurar y compilar de forma manual, cd a tu objdir, ejecuta el programa de configuración, y luego ejecuta make/gmake. El programa de configuración tomará las opciones de tu archivo .mozconfig.

-

Ejecutando tu compilación nueva

-

Es posible ejecutar la compilación nueva directamente desde el directorio en donde fue creada. De todas formas, el directorio de compilación tal vez contenga symlinks dentro del árbol; debes ejecutar la instalación/packaging para generar una compilación que puede ser movida o compartida.

-

Windows y Linux

-

En sistemas no-macintosh, el producto final se puede hallar en objdir/dist/bin. En plataformas POSIX (BDS, GNU/LINUX, Solaris), debes ejecutar el archivo "mozilla" o "firefox", no el binario "mozilla-bin" o "firefox-bin".

-

Mac OS X

-

En Macintosh, el sistema de compilado genera una aplicación en objdir/dist/AppName.app por ejemplo, objdir/dist/Minefield.app.

-

Fijate que cuando compilas con --enable-debug, la aplicación se ubica en objdir/dist/AppNameDebug.app, por ejemplo objdir/dist/MinefieldDebug.app.

-

Puedes ejecutar la aplicación, ya sea abriendo la aplicación via Finder o con la línea de comando:

-
$ objdir/dist/AppName[Debug].app/Contents/MacOS/appname
-
-

Para el ejemplo:

-
$ objdir/dist/MinefieldDebug.app/Contents/MacOS/firefox
-
-

Instalando tu compilación

-

En plataformas POSIX, puedes instalar ejecutando gmake install. Pero es mejor que sigas los pasos siguientes para crear un tar, luego descomprime el tar.

-

Para la mayoria de las aplicaciones, crea el tar dentro del directorio específico de la aplicación:

- -

Ejemplo real: Si usas un .mozconfig Firefox estático optimizado

- -

Esto generará un archivo firefox-2.0.0.3.en-US.linux-i686.tar.gz dentro del directorio ff-opt-static/dist, el cual puedes descomprimir donde desees.

-

Para hacer un instalador para Windows, crea el destino del instalador en el directorio superior

- -

NOTA: Para crear el instalador lo más comprimido posible, para Firefox y Thunderbird con el sistema basado en Cygwin, debes instalar algunos programas adicionales.

- -

Ambos programas se deben encontrar en el PATH. También MOZ_INSTALLER_USE_7ZIP debe ser exportado a tu entorno. Si usas el sistema MozillaBuild, ambos se instalarán automaticamente.

-

 

-
-

Información del documento

- -

Información sobre el documento original

- -
-

{{ languages( { "en": "en/Build_and_Install", "fr": "fr/Compilation_et_installation", "ja": "ja/Build_and_Install", "zh-cn": "cn/\u7f16\u8bd1\u4e0e\u5b89\u88c5" } ) }}

diff --git a/files/es/configurar_correctamente_los_tipos_mime_del_servidor/index.html b/files/es/configurar_correctamente_los_tipos_mime_del_servidor/index.html deleted file mode 100644 index 782c328151..0000000000 --- a/files/es/configurar_correctamente_los_tipos_mime_del_servidor/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Configurar correctamente los tipos MIME del servidor -slug: Configurar_correctamente_los_tipos_MIME_del_servidor -tags: - - Desarrollo_Web - - Estándares_Web - - Seguridad - - Todas_las_Categorías -translation_of: Learn/Server-side/Configuring_server_MIME_types ---- -

-

-

Introduccion

-

Por omisión, muchos servidores web estan configurados para reportar un tipo MIME de texto/plano ó aplicacion/de fuente de octeto para tipos de contenidos desconocidos. A medida son desarrollados nuevos tipos de contenidos, los administradores de red pueden equivocarse al añadirlos a la configuración del servidor web, y esta es la principal causa de problemas para usuarios de navegadores basados en Gecko, el cual respeta los tipos MIME tal y como son reportados por los servidores y las aplicaciones web. -

-

¿Que son los tipos de MIME?

-

Los tipos de MIME describen el tipo de medio del contenido, sea del correo electrónico o el utilizado en los servidores o aplicaciones web, y tiene como proposito ayudar a guiar al navegador web acerca de como ha de ser procesado y mostrado el contenido. Ejemplos de tipos de MIME son: -

- -

Información Técnica

-

MIME está actualmente definida en RFCs 2045, 2046, 2047, 2048, y 2049 y los valores registrados para los tipos MIME estan disponibles en IANA | MIME Media Types. La HTTP specification define un superconjunto de MIME el cual es utilizado para describir los tipos de medios usados en la red. -

-

¿Por qué son importantes los tipos correctos de MIME?

-

Example of an incorrect MIME type result -Si el servidor de red o la aplicación informan un tipo incorrecto de MIME para el contenido, un navegador de red no tiene forma de saberlo, de acuerdo a la especificación HTTP, más si tenemos en cuenta que el autor especificó el contenido para ser procesado y mostrado en una forma diferente que la impuesta por el tipo MIME informado. -

Otros navegadores de red, tal como el Microsoft® Internet Explorer, intentan determinar el tipo adecuado de MIME en servidores mal configurados, suponiendo el tipo adecuado de MIME que debería ser. Esto protege a muchos administradores de red de sus propios errores, pues el Internet Explorer continúa procesando el contenido aunque, por ejemplo, una imagen haya sido informada como texto plano. -

-

¿Por qué los navegadores no deberían suponer tipos MIME?

-

A parte de la violación de la especificación HTTP, es una mala estrategia para los navegadores suponer tipos MIME por las siguientes razones: -

-

Pérdida del control

-

Si el navegador ignora el tipo MIME reportado, los administradores de red y los autores dejarán de tener el control sobre cómo sus contenidos serán procesados. -

Por ejemplo, un sitio de red orientado para desarrolladores de red puede enviar determinados ejemplos de documentos HTML como enteros text/html ó como text/plain para lograr documentos con enteros procesados y motrados como HTML ó como código fuente. Si el navegador supone el tipo MIME, esta posibilidad dejará de estar disponible para el autor. -

-

Seguridad

-

Algunos tipos de contenidos, tales como programas ejecutables, son inherentemente inseguros. Por este motivo, esos tipos MIME son generalmente restringidos en términos de qué acciones tomará el navegador de red al recibirlos. Por ejemplo, un programa ejecutable no debería ser ejecutado en la computadora de un usuario, y en su lugar debería aparecer un cuadro de diálogo para preguntar al usuario si desea descargar el archivo. -

La suposición de tipos MIME ha llevado a fallas de seguridad en Internet Explorer, debido a autores maliciosos que reportaban el tipo MIME de un archivo peligroso como si fuera uno seguro, evitando así el cuadro de diálogo de descarga normal. El Internet Explorer suponía entonces que se trataba de un programa ejecutable y los corría en la computadora del usuario. -

-

Cómo determinar el tipo MIME enviado a un servidor

-

En Firefox, cargar el archivo y usar Herramientas | Información de página. Puede también usar Rex Swain's HTTP Viewer ó Live HTTP Headers para ver los encabezados completos y contenido de cualquier archivo enviado desde un servidor de red. -

De acuerdo a los estándares, una meta etiqueta que brinda el tipo MIME tal como <meta http-equiv="Content-Type" content="text/html"> debería ser ignorado si hay una Content-Type línea en el encabezado. En vez de buscar esta línea en la fuente HTML, use las técnicas anteriores para determinar el tipo MIME enviado por un servidor. -

-

Cómo determinar el tipo correcto de MIME para su contenido

-

Hay ciertos pasos los cuales pueden llevar a derminar el correcto tipo de valor MIME a ser usado para su contenido. -

-
  1. Si su contenido fue creado usando la aplicación de software del vendedor, lea la documentación del vendedor para ver qué tipos MIME debería n ser informados para los diferentes tipos de medios. -
  2. Mire en el IANA | Registro de Tipos de medios MIME que contiene todos los tipos MIME registrados. -
  3. Si el tipo de medio es mostrado usando un plug-in en Netscape Gecko, instale el plug-in y luego mire en Ayuda->Acerca en le Menú Plug-in para ver qué tipos MIME están asociados con el tipo de medio. -
  4. Buscar la extensión del archivo en FILExt para ver qué tipos MIME están asociados con esa expresión. -
-

Cómo configurar su servidor para enviar los tipos MIME correctos

- -

Enlaces Relacionados

- -
-

Información del Documento Original

- -
-{{ languages( { "en": "en/Properly_Configuring_Server_MIME_Types" } ) }} diff --git a/files/es/conflicting/glossary/doctype/index.html b/files/es/conflicting/glossary/doctype/index.html new file mode 100644 index 0000000000..d59af84200 --- /dev/null +++ b/files/es/conflicting/glossary/doctype/index.html @@ -0,0 +1,7 @@ +--- +title: DTD +slug: Glossary/DTD +translation_of: Glossary/Doctype +translation_of_original: 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 new file mode 100644 index 0000000000..b47218eb7a --- /dev/null +++ b/files/es/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,125 @@ +--- +title: Cascada y herencia +slug: Web/CSS/Introducción/Cascading_and_inheritance +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/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 new file mode 100644 index 0000000000..caccdd80b2 --- /dev/null +++ b/files/es/conflicting/learn/css/building_blocks/index.html @@ -0,0 +1,335 @@ +--- +title: Boxes +slug: Web/CSS/Introducción/Boxes +translation_of: Learn/CSS/Building_blocks +translation_of_original: Web/Guide/CSS/Getting_started/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 new file mode 100644 index 0000000000..9ebe3573e8 --- /dev/null +++ b/files/es/conflicting/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,416 @@ +--- +title: Selectores +slug: Web/CSS/Introducción/Selectors +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/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 new file mode 100644 index 0000000000..030fa9d692 --- /dev/null +++ b/files/es/conflicting/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,364 @@ +--- +title: Color +slug: Web/CSS/Introducción/Color +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +translation_of_original: Web/Guide/CSS/Getting_started/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 new file mode 100644 index 0000000000..f71d3a82e6 --- /dev/null +++ b/files/es/conflicting/learn/css/css_layout/index.html @@ -0,0 +1,384 @@ +--- +title: Layout +slug: Web/CSS/Introducción/Layout +translation_of: Learn/CSS/CSS_layout +translation_of_original: Web/Guide/CSS/Getting_started/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 new file mode 100644 index 0000000000..941f96a0e5 --- /dev/null +++ b/files/es/conflicting/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,107 @@ +--- +title: Por que usar CSS +slug: Web/CSS/Como_iniciar/Por_que_usar_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/Why_use_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 new file mode 100644 index 0000000000..f4beb05519 --- /dev/null +++ b/files/es/conflicting/learn/css/first_steps/how_css_works_194e34e451d4ace023d98021c00b3cfd/index.html @@ -0,0 +1,128 @@ +--- +title: Cómo funciona el CSS +slug: Web/CSS/Introducción/How_CSS_works +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 +--- +

{{ 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 new file mode 100644 index 0000000000..18852f2439 --- /dev/null +++ b/files/es/conflicting/learn/css/first_steps/how_css_works_a460b5a76c3c2e7fc9b8da464dfd0c22/index.html @@ -0,0 +1,146 @@ +--- +title: Que es CSS +slug: Web/CSS/Como_iniciar/Que_es_CSS +tags: + - para_revisar +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_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 new file mode 100644 index 0000000000..09177572fa --- /dev/null +++ b/files/es/conflicting/learn/css/first_steps/index.html @@ -0,0 +1,94 @@ +--- +title: Introducción +slug: Web/CSS/Introducción +tags: + - CSS + - 'CSS:Introducción' + - para_revisar +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +

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 new file mode 100644 index 0000000000..1788c8c0ee --- /dev/null +++ b/files/es/conflicting/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,156 @@ +--- +title: Los estilos de texto +slug: 'Web/CSS/Introducción/Los:estilos_de_texto' +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +--- +

{{ 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 new file mode 100644 index 0000000000..c607c7993a --- /dev/null +++ b/files/es/conflicting/learn/forms/index.html @@ -0,0 +1,366 @@ +--- +title: Formularios HTML +slug: Learn/HTML/Forms +tags: + - Featured + - Forms + - Formulario(2) + - Guide + - Guía + - HTML + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn/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 new file mode 100644 index 0000000000..f110fc9851 --- /dev/null +++ b/files/es/conflicting/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,66 @@ +--- +title: La importancia de comentar correctamente +slug: Web/HTML/La_importancia_de_comentar_correctamente +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 +--- +

 

+


+ 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 new file mode 100644 index 0000000000..77810a8e65 --- /dev/null +++ b/files/es/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,287 @@ +--- +title: Usando audio y video con HTML5 +slug: Web/HTML/Usando_audio_y_video_con_HTML5 +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 +--- +

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 new file mode 100644 index 0000000000..0092ba899e --- /dev/null +++ b/files/es/conflicting/learn/index.html @@ -0,0 +1,11 @@ +--- +title: Codificación-Scripting +slug: Learn/codificacion-scripting +tags: + - Codificación + - Principiante + - Scripting +translation_of: Learn +translation_of_original: Learn/Coding-Scripting +--- +

REDIRIGE Aprende

diff --git a/files/es/conflicting/learn/javascript/objects/index.html b/files/es/conflicting/learn/javascript/objects/index.html new file mode 100644 index 0000000000..83c8f0a7c9 --- /dev/null +++ b/files/es/conflicting/learn/javascript/objects/index.html @@ -0,0 +1,385 @@ +--- +title: Introducción a JavaScript orientado a objetos +slug: Web/JavaScript/Introducción_a_JavaScript_orientado_a_objetos +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 +--- +

{{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 new file mode 100644 index 0000000000..225d69bf1d --- /dev/null +++ b/files/es/conflicting/mdn/contribute/getting_started/index.html @@ -0,0 +1,18 @@ +--- +title: Cosas para hacer en MDN +slug: MDN/Contribute/Tareas +translation_of: MDN/Contribute/Getting_started +translation_of_original: MDN/Contribute/Tasks +--- +
{{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 new file mode 100644 index 0000000000..7703e98dd1 --- /dev/null +++ b/files/es/conflicting/mdn/tools/index.html @@ -0,0 +1,14 @@ +--- +title: MDN user guide +slug: MDN/User_guide +tags: + - Documentation + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Tools +translation_of_original: 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 new file mode 100644 index 0000000000..afe0ce3b5a --- /dev/null +++ b/files/es/conflicting/mdn/yari/index.html @@ -0,0 +1,16 @@ +--- +title: Primeros pasos +slug: MDN/Kuma/Contributing/Getting_started +translation_of: MDN/Kuma +translation_of_original: 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 new file mode 100644 index 0000000000..9fc477a01b --- /dev/null +++ b/files/es/conflicting/mdn/yari_13d770b50d5ab9ce747962b2552e0eef/index.html @@ -0,0 +1,50 @@ +--- +title: Contribuir a Kuma +slug: MDN/Kuma/Contributing +translation_of: MDN/Kuma +translation_of_original: 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 new file mode 100644 index 0000000000..615116edaf --- /dev/null +++ b/files/es/conflicting/mozilla/add-ons/index.html @@ -0,0 +1,380 @@ +--- +title: Construyendo una extensión +slug: Building_an_Extension +translation_of: Mozilla/Add-ons +translation_of_original: 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 new file mode 100644 index 0000000000..a827b255cb --- /dev/null +++ b/files/es/conflicting/tools/about_colon_debugging/index.html @@ -0,0 +1,11 @@ +--- +title: Debugging over a network +slug: Tools/Remote_Debugging/Debugging_over_a_network +translation_of: 'Tools/about:debugging#Connecting_over_the_Network' +translation_of_original: 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 new file mode 100644 index 0000000000..23fa9e1e34 --- /dev/null +++ b/files/es/conflicting/tools/performance/index.html @@ -0,0 +1,105 @@ +--- +title: JavaScript Profiler +slug: Tools/Profiler +translation_of: Tools/Performance +translation_of_original: 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 new file mode 100644 index 0000000000..7271aabfb7 --- /dev/null +++ b/files/es/conflicting/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,162 @@ +--- +title: Dibujando gráficos con canvas +slug: Web/HTML/Canvas/Drawing_graphics_with_canvas +translation_of: Web/API/Canvas_API/Tutorial +translation_of_original: Web/API/Canvas_API/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 new file mode 100644 index 0000000000..76e8d7fdc2 --- /dev/null +++ b/files/es/conflicting/web/api/crypto/getrandomvalues/index.html @@ -0,0 +1,111 @@ +--- +title: RandomSource +slug: Web/API/RandomSource +tags: + - API + - Interface + - NeedsTranslation + - RandomSource + - Reference + - TopicStub + - Web Crypto API +translation_of: Web/API/Crypto/getRandomValues +translation_of_original: 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 new file mode 100644 index 0000000000..8123441661 --- /dev/null +++ b/files/es/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,24 @@ +--- +title: Acerca del Modelo de Objetos del Documento +slug: Acerca_del_Modelo_de_Objetos_del_Documento +tags: + - DOM + - Todas_las_Categorías +translation_of: Web/API/Document_Object_Model +translation_of_original: DOM/About_the_Document_Object_Model +--- +

¿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 new file mode 100644 index 0000000000..fc26bc0bee --- /dev/null +++ b/files/es/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html @@ -0,0 +1,22 @@ +--- +title: DOM developer guide +slug: Web/Guide/DOM +tags: + - API + - DOM + - Guide + - NeedsTranslation + - TopicStub +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/Guide/API/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 new file mode 100644 index 0000000000..26d372847a --- /dev/null +++ b/files/es/conflicting/web/api/document_object_model_7d961b8030c6099ee907f4f4b5fe6b3d/index.html @@ -0,0 +1,87 @@ +--- +title: DOM +slug: DOM +tags: + - DOM + - Todas_las_Categorías +translation_of: Web/API/Document_Object_Model +translation_of_original: 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 new file mode 100644 index 0000000000..7759932552 --- /dev/null +++ b/files/es/conflicting/web/api/document_object_model_9f3a59543838705de7e9b080fde3cc14/index.html @@ -0,0 +1,76 @@ +--- +title: Prefacio +slug: Referencia_DOM_de_Gecko/Prefacio +tags: + - DOM + - Todas_las_Categorías +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/API/Document_Object_Model/Preface +--- +

« 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/geolocation/index.html b/files/es/conflicting/web/api/geolocation/index.html new file mode 100644 index 0000000000..0f8895b7b8 --- /dev/null +++ b/files/es/conflicting/web/api/geolocation/index.html @@ -0,0 +1,107 @@ +--- +title: NavigatorGeolocation +slug: Web/API/NavigatorGeolocation +tags: + - API +translation_of: Web/API/Geolocation +translation_of_original: 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 new file mode 100644 index 0000000000..292b860888 --- /dev/null +++ b/files/es/conflicting/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,11 @@ +--- +title: DragDrop +slug: DragDrop +tags: + - NeedsTranslation + - TopicStub +translation_of: Web/API/HTML_Drag_and_Drop_API +translation_of_original: 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 new file mode 100644 index 0000000000..c970ea8947 --- /dev/null +++ b/files/es/conflicting/web/api/index.html @@ -0,0 +1,80 @@ +--- +title: Element.name +slug: Web/API/Element/name +tags: + - API + - Compatibilidad de los navegadores + - DOM + - Elemento + - Propiedad + - Referencia + - Web + - actualizacion +translation_of: Web/API +translation_of_original: 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 new file mode 100644 index 0000000000..91e216833a --- /dev/null +++ b/files/es/conflicting/web/api/indexeddb_api/index.html @@ -0,0 +1,145 @@ +--- +title: IndexedDB +slug: IndexedDB +tags: + - páginas_a_traducir +--- +

{{ 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 new file mode 100644 index 0000000000..f6faf58631 --- /dev/null +++ b/files/es/conflicting/web/api/node/index.html @@ -0,0 +1,34 @@ +--- +title: Nodo.nodoPrincipal +slug: Web/API/Node/nodoPrincipal +tags: + - API + - DOM + - Gecko + - Propiedad +translation_of: Web/API/Node +translation_of_original: Web/API/Node/nodePrincipal +--- +
+
{{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 new file mode 100644 index 0000000000..05d101e5fa --- /dev/null +++ b/files/es/conflicting/web/api/push_api/index.html @@ -0,0 +1,433 @@ +--- +title: Usando la API Push +slug: Web/API/Push_API/Using_the_Push_API +translation_of: Web/API/Push_API +translation_of_original: 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 new file mode 100644 index 0000000000..6ca15914a4 --- /dev/null +++ b/files/es/conflicting/web/api/url/index.html @@ -0,0 +1,102 @@ +--- +title: Window.URL +slug: Web/API/Window/URL +tags: + - API + - DOM + - Propiedad + - Referencia + - Referência DOM + - WebAPI +translation_of: Web/API/URL +translation_of_original: 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 new file mode 100644 index 0000000000..6889022c7a --- /dev/null +++ b/files/es/conflicting/web/api/web_storage_api/index.html @@ -0,0 +1,303 @@ +--- +title: Almacenamiento +slug: DOM/Almacenamiento +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 +--- +

{{ 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 new file mode 100644 index 0000000000..b8eb318529 --- /dev/null +++ b/files/es/conflicting/web/api/webrtc_api/index.html @@ -0,0 +1,78 @@ +--- +title: WebRTC +slug: WebRTC +translation_of: Web/API/WebRTC_API +translation_of_original: 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 new file mode 100644 index 0000000000..f7ac10a94d --- /dev/null +++ b/files/es/conflicting/web/api/websockets_api/index.html @@ -0,0 +1,37 @@ +--- +title: WebSockets +slug: WebSockets +tags: + - WebSockets + - para_revisar +--- +

{{ 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 new file mode 100644 index 0000000000..5c46cb9559 --- /dev/null +++ b/files/es/conflicting/web/api/window/localstorage/index.html @@ -0,0 +1,136 @@ +--- +title: LocalStorage +slug: Web/API/Storage/LocalStorage +tags: + - Almacenamiento en Navegador + - Almacenamiento local +translation_of: Web/API/Window/localStorage +translation_of_original: Web/API/Web_Storage_API/Local_storage +--- +

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 new file mode 100644 index 0000000000..2607e635fa --- /dev/null +++ b/files/es/conflicting/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,109 @@ +--- +title: WindowBase64 +slug: Web/API/WindowBase64 +tags: + - API + - HTML-DOM + - Helper + - NeedsTranslation + - TopicStub + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: 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 new file mode 100644 index 0000000000..549969232f --- /dev/null +++ b/files/es/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html @@ -0,0 +1,119 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +tags: + - API +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: 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 new file mode 100644 index 0000000000..0c189b625d --- /dev/null +++ b/files/es/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html @@ -0,0 +1,144 @@ +--- +title: WebAPI +slug: WebAPI +tags: + - Apps + - DOM + - Firefox OS + - Mobile + - NeedsTranslation + - TopicStub +translation_of: Web/API +translation_of_original: 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 new file mode 100644 index 0000000000..bb9c54b069 --- /dev/null +++ b/files/es/conflicting/web/css/@viewport/index.html @@ -0,0 +1,126 @@ +--- +title: height +slug: Web/CSS/@viewport/height +tags: + - Descriptor CSS + - Referencia +translation_of: Web/CSS/@viewport +translation_of_original: 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 new file mode 100644 index 0000000000..2c550153bc --- /dev/null +++ b/files/es/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html @@ -0,0 +1,123 @@ +--- +title: width +slug: Web/CSS/@viewport/width +translation_of: Web/CSS/@viewport +translation_of_original: 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 new file mode 100644 index 0000000000..c7f84a0273 --- /dev/null +++ b/files/es/conflicting/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,123 @@ +--- +title: ':-moz-placeholder' +slug: 'Web/CSS/:-moz-placeholder' +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' +--- +
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 new file mode 100644 index 0000000000..b83b72db1a --- /dev/null +++ b/files/es/conflicting/web/css/_colon_placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891/index.html @@ -0,0 +1,112 @@ +--- +title: ':-ms-input-placeholder' +slug: 'Web/CSS/:-ms-input-placeholder' +tags: + - CSS + - No estándar(2) + - Pseudo clase CSS + - Referencia +translation_of: 'Web/CSS/:placeholder-shown' +translation_of_original: '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 new file mode 100644 index 0000000000..3c8fbb8c3a --- /dev/null +++ b/files/es/conflicting/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,109 @@ +--- +title: '::-moz-placeholder' +slug: 'Web/CSS/::-moz-placeholder' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento CSS + - Referencia CSS +translation_of: 'Web/CSS/::placeholder' +translation_of_original: '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 new file mode 100644 index 0000000000..181f0a966c --- /dev/null +++ b/files/es/conflicting/web/css/_doublecolon_placeholder_70bda352bb504ebdd6cd3362879e2479/index.html @@ -0,0 +1,86 @@ +--- +title: '::-webkit-input-placeholder' +slug: 'Web/CSS/::-webkit-input-placeholder' +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' +--- +
{{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 new file mode 100644 index 0000000000..dd39986ed4 --- /dev/null +++ b/files/es/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,376 @@ +--- +title: Usando las cajas flexibles CSS +slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS +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 +--- +
{{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 new file mode 100644 index 0000000000..e42553fe97 --- /dev/null +++ b/files/es/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,191 @@ +--- +title: Usando flexbox para componer aplicaciones web +slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web +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 +--- +

{{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 new file mode 100644 index 0000000000..213b3607c0 --- /dev/null +++ b/files/es/conflicting/web/css/cursor/index.html @@ -0,0 +1,11 @@ +--- +title: '-moz-cell' +slug: Web/CSS/-moz-cell +tags: + - CSS +translation_of: Web/CSS/cursor +translation_of_original: 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 new file mode 100644 index 0000000000..332e284385 --- /dev/null +++ b/files/es/conflicting/web/css/font-variant/index.html @@ -0,0 +1,11 @@ +--- +title: normal +slug: Web/CSS/normal +translation_of: Web/CSS/font-variant +translation_of_original: 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 new file mode 100644 index 0000000000..c380b1b891 --- /dev/null +++ b/files/es/conflicting/web/css/width/index.html @@ -0,0 +1,50 @@ +--- +title: auto +slug: Web/CSS/auto +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/width +translation_of_original: 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 new file mode 100644 index 0000000000..d6d72dfef3 --- /dev/null +++ b/files/es/conflicting/web/guide/index.html @@ -0,0 +1,60 @@ +--- +title: Desarrollo Web +slug: Desarrollo_Web +tags: + - Desarrollo_Web + - Todas_las_Categorías +translation_of: Web/Guide +translation_of_original: Web_Development +--- +

+

+
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 new file mode 100644 index 0000000000..cc288a9c45 --- /dev/null +++ b/files/es/conflicting/web/guide/mobile/index.html @@ -0,0 +1,18 @@ +--- +title: Mobile Web development +slug: Web_Development/Mobile +tags: + - Mobile + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide/Mobile +translation_of_original: 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 new file mode 100644 index 0000000000..64595418c8 --- /dev/null +++ b/files/es/conflicting/web/html/element/index.html @@ -0,0 +1,599 @@ +--- +title: Lista de Elementos HTML5 +slug: HTML/HTML5/HTML5_lista_elementos +translation_of: Web/HTML/Element +translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list +--- +

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 new file mode 100644 index 0000000000..64afaf64ff --- /dev/null +++ b/files/es/conflicting/web/html/global_attributes/index.html @@ -0,0 +1,27 @@ +--- +title: Atributo global +slug: Glossary/Atributo_global +tags: + - CodingScripting + - Glosario + - HTML + - atributo +translation_of: Web/HTML/Global_attributes +translation_of_original: Glossary/Global_attribute +--- +

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 new file mode 100644 index 0000000000..0f409bb10e --- /dev/null +++ b/files/es/conflicting/web/html/global_attributes/spellcheck/index.html @@ -0,0 +1,73 @@ +--- +title: Control de la corrección ortográfica en formularios HTML +slug: Control_de_la_corrección_ortográfica_en_formularios_HTML +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 +--- +

{{ 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 new file mode 100644 index 0000000000..fbd15d6764 --- /dev/null +++ b/files/es/conflicting/web/http/basics_of_http/mime_types/index.html @@ -0,0 +1,47 @@ +--- +title: Tipo MIME incorrecto en archivos CSS +slug: Tipo_MIME_incorrecto_en_archivos_CSS +tags: + - CSS + - Todas_las_Categorías +translation_of: Web/HTTP/Basics_of_HTTP/MIME_types +translation_of_original: Incorrect_MIME_Type_for_CSS_Files +--- +

¿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 new file mode 100644 index 0000000000..6fcf1a2ff3 --- /dev/null +++ b/files/es/conflicting/web/http/csp/index.html @@ -0,0 +1,39 @@ +--- +title: CSP (Políticas de Seguridad de Contenido) +slug: Web/Security/CSP +tags: + - Documento + - Referencia +translation_of: Web/HTTP/CSP +translation_of_original: 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 new file mode 100644 index 0000000000..58960c7798 --- /dev/null +++ b/files/es/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html @@ -0,0 +1,57 @@ +--- +title: Introducción a Políticas de Seguridad de Contenido +slug: Web/Security/CSP/Introducing_Content_Security_Policy +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 +--- +

{{ 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 new file mode 100644 index 0000000000..c2f9c5a628 --- /dev/null +++ b/files/es/conflicting/web/http/headers/content-security-policy/index.html @@ -0,0 +1,709 @@ +--- +title: Políticas Directivas CSP +slug: Web/Security/CSP/CSP_policy_directives +translation_of: Web/HTTP/Headers/Content-Security-Policy +translation_of_original: 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 new file mode 100644 index 0000000000..fef80071de --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html @@ -0,0 +1,69 @@ +--- +title: ArrayBuffer.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/prototype +tags: + - ArrayBuffer + - JavaScript + - Propiedad +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +translation_of_original: Web/JavaScript/Reference/Global_Objects/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 new file mode 100644 index 0000000000..de92c8ee02 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,201 @@ +--- +title: Date.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Date/prototype +tags: + - Date + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Date +translation_of_original: Web/JavaScript/Reference/Global_Objects/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 new file mode 100644 index 0000000000..aac1516fc2 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,154 @@ +--- +title: Error.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Error/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Error +translation_of_original: Web/JavaScript/Reference/Global_Objects/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 new file mode 100644 index 0000000000..9d8671c534 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,65 @@ +--- +title: Function.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Function/prototype +tags: + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function +translation_of_original: Web/JavaScript/Reference/Global_Objects/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 new file mode 100644 index 0000000000..b255e65b69 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,135 @@ +--- +title: Map.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Map/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Map +translation_of_original: Web/JavaScript/Reference/Global_Objects/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 new file mode 100644 index 0000000000..c15b5b5fcb --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,16 @@ +--- +title: Number.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Number/prototype +tags: + - JavaScript + - Number + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Number +translation_of_original: Web/JavaScript/Reference/Global_Objects/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 new file mode 100644 index 0000000000..9b55c9cccc --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,195 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Object/prototype +tags: + - JavaScript + - Objeto + - Propiedad +translation_of: Web/JavaScript/Reference/Global_Objects/Object +translation_of_original: Web/JavaScript/Reference/Global_Objects/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 new file mode 100644 index 0000000000..c15107912a --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,69 @@ +--- +title: Promise.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Promise/prototype +tags: + - JavaScript + - Promesa + - Propiedad +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +translation_of_original: Web/JavaScript/Reference/Global_Objects/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 new file mode 100644 index 0000000000..fa75157c9d --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/rangeerror/index.html @@ -0,0 +1,131 @@ +--- +title: RangeError.prototype +slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype +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 +--- +
{{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 new file mode 100644 index 0000000000..89519b08d2 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,118 @@ +--- +title: String.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/String/prototype +tags: + - JavaScript + - Property + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String +translation_of_original: Web/JavaScript/Reference/Global_Objects/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 new file mode 100644 index 0000000000..2de491bc21 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html @@ -0,0 +1,133 @@ +--- +title: SyntaxError.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/SyntaxError/prototype +tags: + - Error + - JavaScript + - Property + - Prototype + - SyntaxError +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +translation_of_original: Web/JavaScript/Reference/Global_Objects/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 new file mode 100644 index 0000000000..41d501135d --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/global_objects/weakmap/index.html @@ -0,0 +1,143 @@ +--- +title: WeakMap.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap/prototype +tags: + - ECMAScript6 + - JavaScript + - Property + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap +translation_of_original: Web/JavaScript/Reference/Global_Objects/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 new file mode 100644 index 0000000000..14010f37e3 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/lexical_grammar/index.html @@ -0,0 +1,99 @@ +--- +title: Palabras Reservadas +slug: Web/JavaScript/Referencia/Palabras_Reservadas +tags: + - JavaScript + - palabras reservadas +translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords +translation_of_original: Web/JavaScript/Reference/Reserved_Words +--- +

 

+ +

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 new file mode 100644 index 0000000000..71968fda85 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,315 @@ +--- +title: Operadores Aritméticos +slug: Web/JavaScript/Referencia/Operadores/Aritméticos +tags: + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators +--- +
{{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 new file mode 100644 index 0000000000..050a2026f6 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,220 @@ +--- +title: Operador de propagación +slug: Web/JavaScript/Referencia/Operadores/Spread_operator +tags: + - Experimental + - Expérimental(2) + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +translation_of_original: Web/JavaScript/Reference/Operators/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 new file mode 100644 index 0000000000..8685790d2c --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8/index.html @@ -0,0 +1,262 @@ +--- +title: Operadores de Comparación +slug: Web/JavaScript/Referencia/Operadores/Comparison_Operators +tags: + - JavaScript + - Operador + - Referencia +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/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 new file mode 100644 index 0000000000..c4276c1c95 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/operators_5c44e7d07c463ff1a5a63654f4bda87b/index.html @@ -0,0 +1,722 @@ +--- +title: Operadores a nivel de bit +slug: Web/JavaScript/Referencia/Operadores/Bitwise_Operators +tags: + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/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 new file mode 100644 index 0000000000..979eff63f2 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/operators_d3958587a3d3dd644852ad397eb5951b/index.html @@ -0,0 +1,462 @@ +--- +title: Operadores de asignación +slug: Web/JavaScript/Referencia/Operadores/Assignment_Operators +tags: + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators#Assignment_operators +translation_of_original: Web/JavaScript/Reference/Operators/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 new file mode 100644 index 0000000000..4c9cb860a9 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/operators_e72d8790e25513408a18a5826660f704/index.html @@ -0,0 +1,296 @@ +--- +title: Operadores lógicos +slug: Web/JavaScript/Referencia/Operadores/Operadores_lógicos +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +--- +
{{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 new file mode 100644 index 0000000000..a25a5a5369 --- /dev/null +++ b/files/es/conflicting/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,121 @@ +--- +title: default +slug: Web/JavaScript/Referencia/Sentencias/default +tags: + - JavaScript + - Palabra clave +translation_of: Web/JavaScript/Reference/Statements/switch +translation_of_original: Web/JavaScript/Reference/Statements/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 new file mode 100644 index 0000000000..f342f64d11 --- /dev/null +++ b/files/es/conflicting/web/media/formats/index.html @@ -0,0 +1,281 @@ +--- +title: Formatos de medios admitidos por los elementos HTML audio y video +slug: Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5 +translation_of: Web/Media/Formats +translation_of_original: Web/HTML/Supported_media_formats +--- +

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 new file mode 100644 index 0000000000..638147ee38 --- /dev/null +++ b/files/es/conflicting/web/opensearch/index.html @@ -0,0 +1,54 @@ +--- +title: Añadir motores de búsqueda desde páginas web +slug: Añadir_motores_de_búsqueda_desde_páginas_web +tags: + - Plugins_de_búsqueda +translation_of: Web/OpenSearch +translation_of_original: Web/API/Window/sidebar/Adding_search_engines_from_Web_pages +--- +

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 new file mode 100644 index 0000000000..6445a631af --- /dev/null +++ b/files/es/conflicting/web/progressive_web_apps/index.html @@ -0,0 +1,45 @@ +--- +title: Diseño adaptable («responsivo») +slug: Web_Development/Mobile/Diseño_responsivo +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Guide/Responsive_design +--- +

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 new file mode 100644 index 0000000000..e1fa9fad1f --- /dev/null +++ b/files/es/conflicting/web/progressive_web_apps/introduction/index.html @@ -0,0 +1,63 @@ +--- +title: Ventajas de una aplicación web progresiva (AWP) +slug: Web/Progressive_web_apps/Ventajas +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 +--- +

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 new file mode 100644 index 0000000000..98c3562a7b --- /dev/null +++ b/files/es/conflicting/web/web_components/using_custom_elements/index.html @@ -0,0 +1,182 @@ +--- +title: Custom Elements +slug: Web/Web_Components/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 +--- +

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/control_de_la_correcci\303\263n_ortogr\303\241fica_en_formularios_html/index.html" "b/files/es/control_de_la_correcci\303\263n_ortogr\303\241fica_en_formularios_html/index.html" deleted file mode 100644 index 0f409bb10e..0000000000 --- "a/files/es/control_de_la_correcci\303\263n_ortogr\303\241fica_en_formularios_html/index.html" +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Control de la corrección ortográfica en formularios HTML -slug: Control_de_la_corrección_ortográfica_en_formularios_HTML -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 ---- -

{{ 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/creacion_de_plugins_opensearch_para_firefox/index.html b/files/es/creacion_de_plugins_opensearch_para_firefox/index.html deleted file mode 100644 index 12c71b6c03..0000000000 --- a/files/es/creacion_de_plugins_opensearch_para_firefox/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Creacion de plugins OpenSearch para Firefox -slug: Creacion_de_plugins_OpenSearch_para_Firefox -tags: - - Agregados - - Complementos - - OpenSearch - - Plugins - - Plugins_de_búsqueda - - para_revisar -translation_of: Web/OpenSearch ---- -

 

-

OpenSearch

-

Firefox 2 admite el formato de descripción OpenSearch para complementos (plugins) de búsqueda. Aquellos complementos que usen la sintaxis OpenSearch son compatibles con Firefox e Internet Explorer 7. Por ello es el formato recomendado para cualquier nuevo desarrollo.

-

Firefox admite además capacidades de búsqueda adicionales no incluidas en la sintaxis de descripción OpenSearch, tales como las "sugerencias de búsqueda" y el elemento SearchForm. Este artículo se centrará en la creación de complementos compatibles con OpenSearch que empleen estas capacidades adicionales de Firefox.

-

Además, los ficheros de descripción OpenSearch pueden ser anunciados dentro de una página HTML de forma que puedan ser descubiertos automáticamente por el navegador (esto se describe en Detección automática de motores de búsqueda.

-

Por último, estos complementos, pueden ser instalados mediante código tal y como se describe en Añadir motores de búsqueda desde páginas web.

-

El fichero de descripción OpenSearch

-

El fichero XML que describe un motor de búsqueda es bastante sencillo, tal y como se puede ver en la plantilla básica que se muestra más abajo. Las secciones en negrita deben ser personalizadas basándonos en las necesidades particulares del motor para el que estamos escribiendo nuestro complemento.

-
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
-                       xmlns:moz="http://www.mozilla.org/2006/browser/search/">
-<ShortName>engineName</ShortName>
-<Description>engineDescription</Description>
-<InputEncoding>inputEncoding</InputEncoding>
-<Image width="16" height="16">data:image/x-icon;base64,imageData</Image>
-<Url type="text/html" method="method" template="searchURL">
-  <Param name="paramName1" value="paramValue1"/>
-  ...
-  <Param name="paramNameN" value="paramValueN"/>
-</Url>
-<Url type="application/x-suggestions+json" template="suggestionURL"/>
-<moz:SearchForm>searchFormURL</moz:SearchForm>
-</OpenSearchDescription>
-
-
-
- ShortName
-
- Nombre corto para el motor de búsqueda.
-
-
-
- Description
-
- Descripción del motor de búsqueda.
-
-
-
- InputEncoding
-
- Codificación de caracteres a emplear en los datos que se envían al motor de búsqueda. Por ejemplo, "UTF-8".
-
-
-
- Image
-
- Icono de 16x16 codificado en Base-64 que represente al motor de búsqueda. Puedes encontrar una utilidad para generar estos datos en: The data: URI kitchen.
-
-
-
- Url
-
- Describe la(s) URL(s) a emplear para la búsqueda. El atributo method indica si se debe emplear una petición GET o POST para obtener los resultados.
-
-
-
-
- Nota: Internet Explorer 7 no admite peticiones POST.
-
-
-
-
- Firefox admite dos tipos de URL en el campo type:
-
- -
-
- El atributo template indica la forma en que se construirá la URL para la consulta. Dentro de este atributo se pueden introducir plantillas que se expanden de forma dinámica; la más habitual es {searchTerms}, la cual se expande a los términos de búsqueda introducidos por el usuario en la barra de búsquedas. En OpenSearch 1.1 parameters se describen los otros tipos admitidos.
-
-
-
- Para consultas que devuelven sugerencias de búsqueda, la URL descrita en template se usa para obtener una lista de sugerencias en el formato JSON (JavaScript Object Notation). Para saber más sobre como incorporar sugerencias de búsqueda en el lado del servidor, ver Permitir sugerencias en los plugins de búsqueda.
-
-

Image:SearchSuggestionSample.png

-
-
- Param
-
- Los parámetros que es necesario suministrar junto con la consulta, en la forma de pares clave/valor. En los valores es posible emplear las plantillas dinámicas presentadas anteriormente; por ejemplo, se puede usar {searchTerms} para insertar los términos de búsqueda que el usuario introdujo en la barra de búsquedas.
-
-
-
-
- Nota: Internet Explorer 7 no admite este elemento.
-
-
-
-
- SearchForm
-
- La URL donde se encuentra la página de búsquedas del sitio al que hace referencia el complemento que estamos desarrollando. Esto permite al usuario acceder directamente al sitio web en cuestión.
-
-
- Nota: Dado que este elemento es específico de Firefox y no forma parte de la especificación OpenSearch, en el ejemplo anterior, usamos el prefijo "moz:" en el espacio de nombres XML para asegurarnos que otros agentes de usuario que no admiten este elemento puedan ignoralo de forma segura.
-
-
-

Detección automática de complementos de búsqueda

-

Un sitio web que ofrezca un complemento de búsqueda puede anunciarlo, de forma que los usuarios de Firefox puedan descargarlo e instalarlo fácilmente.

-

Para incorporar la detección automática, sólo es necesario añadir una línea a la sección <head> de la página:

-
<link rel="search" type="application/opensearchdescription+xml" title="searchTitle" href="pluginURL">
-
-

Sustituiremos los elementos en itálica tal y como se explica a continuación:

-
-
- searchTitle
-
- El título de la búsqueda que se va a llevar a cabo; por ejemplo, "Buscar en MDC" o "Búsqueda en Google". Este valor debe coincidir con el ShortName de nuestro complemento.
-
-
-
- pluginURL
-
- La URL que debe emplear el navegador para descargar el fichero XML con la descripción del complemento.
-
-

Si tu sitio ofrece múltiples complementos de búsqueda también es posible que el navegador los descubra de forma automática; basta con repetir el link las veces que sea necesario. Por ejemplo:

-
<link rel="search" type="application/opensearchdescription+xml" title="MiSitio: Por Autor" href="http://www.misitio.com/autores.xml">
-<link rel="search" type="application/opensearchdescription+xml" title="MiSitio: Por Título" href="http://www.misitio.com/titulos.xml">
-
-

De esta forma podemos ofrecer complementos independientes para buscar tanto por autor como por título.

-

Resolución de problemas

-

Si hay algún error en el fichero XML que describe el complemento, seguramente habrá problemas al añadir en Firefox 2 un complemento descubierto automáticamente. El mensaje de error puede no ser de mucha ayuda, así que los siguientes consejos pueden ayudar a encontrar la causa del problema.

- -

Adicionalmente, el servicio de complementos de búsqueda suministra un mecanismo de registro (logging) que puede ser de utilidad a los desarrolladores de complementos. Usa about:config para establecer la preferencia 'browser.search.log' al valor true. La información de registro aparecerá en la consola de errores de Firefox (Tools->Error Console) cuando se añada un complemento de búsqueda.

-

Material de referencia

- -

Interwiki link

-

{{ languages( { "ca": "ca/Creaci\u00f3_de_connectors_OpenSearch_per_al_Firefox", "en": "en/Creating_OpenSearch_plugins_for_Firefox", "fr": "fr/Cr\u00e9ation_de_plugins_OpenSearch_pour_Firefox", "ja": "ja/Creating_OpenSearch_plugins_for_Firefox", "pl": "pl/Tworzenie_wtyczek_OpenSearch_dla_Firefoksa", "pt": "pt/Criando_plugins_OpenSearch_para_o_Firefox" } ) }}

diff --git "a/files/es/creaci\303\263n_de_componentes_xpcom/interior_del_componente/index.html" "b/files/es/creaci\303\263n_de_componentes_xpcom/interior_del_componente/index.html" deleted file mode 100644 index e69797653b..0000000000 --- "a/files/es/creaci\303\263n_de_componentes_xpcom/interior_del_componente/index.html" +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: Interior del Componente -slug: Creación_de_Componentes_XPCOM/Interior_del_Componente -tags: - - Todas_las_Categorías - - XPCOM ---- -

-

« 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/creaci\303\263n_de_componentes_xpcom/prefacio/index.html" "b/files/es/creaci\303\263n_de_componentes_xpcom/prefacio/index.html" deleted file mode 100644 index 5ba98982da..0000000000 --- "a/files/es/creaci\303\263n_de_componentes_xpcom/prefacio/index.html" +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Prefacio -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/creando_una_extensi\303\263n/index.html" "b/files/es/creando_una_extensi\303\263n/index.html" deleted file mode 100644 index 6a155e7f50..0000000000 --- "a/files/es/creando_una_extensi\303\263n/index.html" +++ /dev/null @@ -1,236 +0,0 @@ ---- -title: Creando una extensión -slug: Creando_una_extensión -tags: - - Complementos - - Todas_las_Categorías - - extensiones ---- -

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/crear_una_extensi\303\263n_personalizada_de_firefox_con_el_mozilla_build_system/index.html" "b/files/es/crear_una_extensi\303\263n_personalizada_de_firefox_con_el_mozilla_build_system/index.html" deleted file mode 100644 index 865956ce0f..0000000000 --- "a/files/es/crear_una_extensi\303\263n_personalizada_de_firefox_con_el_mozilla_build_system/index.html" +++ /dev/null @@ -1,580 +0,0 @@ ---- -title: Crear una extensión personalizada de Firefox con el Mozilla Build System -slug: Crear_una_extensión_personalizada_de_Firefox_con_el_Mozilla_Build_System -tags: - - Complementos - - Documentación_de_compilado - - Todas_las_Categorías - - XPCOM - - extensiones ---- -

 

- -
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/css/media_queries/index.html b/files/es/css/media_queries/index.html deleted file mode 100644 index 997626e12d..0000000000 --- a/files/es/css/media_queries/index.html +++ /dev/null @@ -1,828 +0,0 @@ ---- -title: CSS media queries -slug: CSS/Media_queries -tags: - - CSS - - Media - - Media Queries - - query -translation_of: Web/CSS/Media_Queries/Using_media_queries ---- -
{{cssref}}
- -

Las media queries (en español "consultas de medios") son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del {{glossary("viewport")}} del navegador).

- -

Se utilizan para:

- - - -

Sintaxis

- -

 

- -

Las media queries consisten de un tipo de medio opcional y una o más expresiones de características de medios. Varias consultas se pueden combinar utilizando operadores lógicos. No distinguen entre mayúsculas y minúsculas.

- -

El resultado de la consulta es "verdadero" cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se está mostrando el documento y todas las expresiones en el media query son "verdaderas". En este caso, se aplica los estilos correspondientes, siguiendo las reglas usuales de cascada.

- -

Las consultas sobre tipos de medios desconocidos son siempre falsas.

- -

 

- -
<!-- CSS media query on a link element -->
-<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
-
-<!-- CSS media query within a style sheet -->
-<style>
-@media (max-width: 600px) {
-  .facet_sidebar {
-    display: none;
-  }
-}
-</style>
-
- -

Media Types

- -

Los Media Types (tipos de medios) describen la categoría general de un dispositivo. Excepto cuando se utilizan los operadores lógicos not o only, el tipo de medio es opcional y será interpretada como all.

- -
-
all
-
Apto para todos los dispositivos.
-
print
-
Destinado a material impreso y visualización de documentos en una pantalla en el modo de vista previa de impresión. 
-
screen
-
Destinado principalmente a las pantallas.
-
speech
-
Destinado a sintetizadores de voz.
-
- -
-

Tipos de medios depreciados: CSS2.1 y Media Queries 3 definieron varios tipos de medios adicionales (tty, tv, projection, handheld, braille, embossed y aural), pero fueron desaprobados en Media Queries 4 y no deberían ser usados. El tipo aural ha sido reemplazado por speech, que es similar.

-
- -

Operadores Lógicos

- -

Se pueden redactar queries utilizando operadores lógicos, incluyendo not, and, y only.

- -

Además se puede combinar múltiples queries en una lista separada por comas múltiples; si cualquiera de las queries en la lista es verdadera, la hoja de estilo asociada es aplicada. Esto es equivalente a una operación lógica "or".

- -

and

- -

El operador and es usado para colocar juntas múltiples funciones multimedia. Un query básico con el tipo de medio especificado como all puede lucir así:

- -
@media (min-width: 700px) { ... }
- -

Si usted quiere aplicar ese query solo si la pantalla esta en formato horizontal, usted puede utilizar el operador and y colocar la siguiente cadena:

- -
@media (min-width: 700px) and (orientation: landscape) { ... }
- -

La siguiente query solo retornara verdadero si la ventana tiene un ancho de 700px o mas y la pantalla esta en formato horizontal. Ahora si usted quiere aplicar esta opción solo si tipo de medio es TV, usted puede utilizar la siguiente cadena:

- -
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
- -

Esta query solo se aplica si el tipo de medio es TV, la ventana tiene 700px de ancho o mas y la pantalla esta en formato horizontal.

- -

lista separada por comas

- -

Las listas separadas por comas se comportan como el operador or cuando es usado en media queries. Cuando utilice una lista separada por comas y alguno de los queries retorna verdadero, el estilo o la hoja de estilos sera aplicada. Cada query en una lista separada por comas es tratado como una query individual y cualquier operador aplicado a un medio no afectara a los demás. Esto significa que cada query en una lista separada por comas puede tener como objetivo diferentes medios, tipos y estados.

- -

Si usted quiere aplicar una serie de estilos para un equipo con un ancho mínimo de 700px o si el dispositivo esta colocado en horizontal, usted puede escribir lo siguiente:

- -
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
- -

Por lo tanto, si esta en una screen con una ventana de 800px de ancho, la declaración del medio retornara verdadero debido a la primera parte de la lista, si aplicamos esto a un dispositivo @media all and (min-width: 700px) podría retornar verdadero a pesar del hecho de que la pantalla falle la verificación tipo de medio del handheld en la segunda query. Por otra parte si estuviese en un handheld con un ancho de ventana de 500px, la primera parte de la lista fallaría pero la segunda parte retornara verdadero debido a la declaración de medio.

- -

not

- -

El operador not aplica a todo el query y retorna verdadero si es posible y sino retorna falso (como por ejemplo monochrome en un monitor a color o una ventana con un ancho mínimo de min-width: 700px en un monitor de 600px). Un not negara un query si es posible pero no a todos los query posibles si están ubicados en una lista separada por comas. El operador not no puede ser usado para negar un query individual, solo para un query completo. Por ejemplo, el not en el siguiente query es evaluado al final:

- -
@media not all and (monochrome) { ... }
-
- -

Esto significa que el query es evaluado de la siguiente forma:

- -
@media not (all and (monochrome)) { ... }
-
- -

... y no de esta forma:

- -
@media (not all) and (monochrome) { ... }
- -

Otro Ejemplo:

- -
@media not screen and (color), print and (color)
-
- -

Es evaluado de la siguiente forma:

- -
@media (not (screen and (color))), print and (color)
- -

only

- -

El operador only previene que navegadores antiguos que no soportan queries con funciones apliquen los estilos asignados:

- -
<link rel="stylesheet" media="only screen and (color)" href="Ejemplo.css" />
-
- -

Pseudo-BNF

- -
media_query_list: <media_query> [, <media_query> ]*
-media_query: [[only | not]? <media_type> [ and <expression> ]*]
-  | <expression> [ and <expression> ]*
-expression: ( <media_feature> [: <value>]? )
-media_type: all | aural | braille | handheld | print |
-  projection | screen | tty | tv | embossed
-media_feature: width | min-width | max-width
-  | height | min-height | max-height
-  | device-width | min-device-width | max-device-width
-  | device-height | min-device-height | max-device-height
-  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
-  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
-  | color | min-color | max-color
-  | color-index | min-color-index | max-color-index
-  | monochrome | min-monochrome | max-monochrome
-  | resolution | min-resolution | max-resolution
-  | scan | grid
- -

Los queries son insensibles a las mayúsculas o minúsculas. Media queries que contengan tipos de medios desconocidos siempre retornaran falso.

- -
Nota: Los paréntesis son requeridos alrededor de las expresiones, no utilizarlos es un error.
- -

Funciones Multimedia

- -

La mayoría de las funciones multimedia pueden ser precedidas por "min-" o "max-" para expresar "greater or equal to" o "less than or equal to". Esto elimina la necesidad de usar los símbolos "<" y ">" los cuales podrían causar conflictos con HTML y XML. Si usted usa una función multimedia sin especificarle un valor, la expresión retornara verdadero si el valor es diferente de cero.

- -
Nota: Si una función multimedia no aplica al dispositivo donde el navegador esta corriendo, la expresión que contiene esa función siempre retornara falso. Por Ejemplo, cambiar la relación de aspecto en un dispositivo aural siempre resultara falso.
- -

color

- -

Valor: {{cssxref("<color>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: si

- -

Indica el numero de bits por componente de color del dispositivo de salida. Si el dispositivo no soporta colores, este valor es 0.

- -
Nota: Si el componente de color tiene diferente numero de bits por color, entonces el valor mas pequeño es utilizado. Por Ejemplo, si una pantalla utiliza 5 bits para azul y rojo y 6 bits para el verde, entonces se utilizan 5 bits por componente de color. Si el dispositivo utiliza índices de color se usara el mínimo valor de bits por color en la tabla.
- -

Ejemplos

- -

Para aplicar una hoja de estilo a todos los dispositivos que soporten colores:

- -
@media all and (color) { ... }
-
- -

Para aplicar una hoja de estilo a dispositivos con al menos 4 bits por componente de color:

- -
@media all and (min-color: 4) { ... }
-
- -

color-index

- -

Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: sí

- -

Indica el numero de entradas en la tabla de colores para el dispositivo de salida.

- -

Ejemplos

- -

Para indicar que una hoja de estilo debe aplicarse a todos los dispositivos utilizando índices de color, usted puede hacer esto:

- -
@media all and (color-index) { ... }
-
- -

Para aplicar una hoja de estilo a un dispositivo con un índice de al menos 256 colores:

- -
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
-
- -

aspect-ratio

- -

Valor: {{cssxref("<ratio>")}}
- Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Acepta prefijos min/max: sí

- -

Describe el aspecto de una zona a mostrar en el dispositivo de salida. Este valor consiste en enteros positivos separados por una barra ("/"). Esto representa la razón de aspecto de los pixeles horizontales (primer termino) a los pixeles verticales (segundo termino).

- -

Ejemplo

- -

Lo siguiente selecciona una hoja de estilo especial para ser aplicada donde la proporción del tamaño de la pantalla del dispositivo de salida es al menos la misma de ancho que de alto.

- -
@media screen and (min-aspect-ratio: 1/1) { ... }
- -

Este selecciona el estilo cuando la proporción de aspecto sea 1:1 o superior. En otras palabras este estilo solo sera aplicado cuando el área de visualización sea cuadrada u horizontal.

- -

device-aspect-ratio

- -

Valor: {{cssxref("<ratio>")}}
- Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Acepta prefijos min/max: sí

- -

Describe la proporción de aspecto del dispositivo de salida. Este valor consiste de dos enteros positivos separados por una barra ("/"). Este representa la proporción de aspecto de los pixeles horizontales (primer termino) a los pixeles verticales (segundo termino).

- -

Ejemplo

- -

El siguiente código selecciona una hoja de estilo especial para ser aplicada en pantallas panorámicas ("widescreen").

- -
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
- -

Este selecciona el estilo cuando la proporción de aspecto sea 16:9 o 16:10.

- -

device-height

- -

Valor: {{cssxref("<length>")}}
- Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Acepta prefijos min/max: sí

- -

Describe la altura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área del documento a renderizar).

- -

device-width

- -

Valor: {{cssxref("<length>")}}
- Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Acepta prefijos min/max: sí

- -

Describe la anchura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área del documento a renderizar).

- -

Ejemplo

- -

Para aplicar una hoja de estilo a un documento cuando este sea mostrado en una pantalla de menos de 800px de ancho, usted puede usar esto:

- -
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
-
- -

grid

- -

Valor: {{cssxref("<integer>")}}
- Medio: all
- Acepta prefijos min/max: no

- -

Determina cuando el dispositivo de salida es un dispositivo de cuadrícula o de mapa de bits. Si el dispositivo esta basado en una cuadrícula (como una terminal TTY o una pantalla de teléfono de solo texto), el valor sera 1, de lo contrario sera 0.

- -

Ejemplo

- -

Para aplicar una hoja de estilo a un dispositivo portátil con una pantalla de 15 caracteres o mas estrecha:

- -
@media handheld and (grid) and (max-width: 15em) { ... }
-
- -
Nota: La unidad "em" tiene un significado especial para los dispositivos de cuadrícula; ya que la anchura exacta de una "em" no puede ser determinada, se asume un "em" como el ancho de una celda en la cuadrícula y el alto de una celda en la cuadrícula.
- -

height

- -

Valor: {{cssxref("<length>")}}
- Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Acepta prefijos min/max: sí

- -

La función height describe la altura de la superficie a renderizar en el dispositivo de salida (como la altura de una ventana o la bandeja de papel en una impresora).

- -
Nota: Cuando el usuario cambia el tamaño de una ventana Firefox también cambia las hojas de estilo para utilizar la mas adecuada basándose en los valores de width y height del query.
- -

monochrome

- -

Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: sí

- -

Indica el número de bits por pixel en un dispositivo monocromático (escala de grises). Si el dispositivo no es monocromático el valor sera 0.

- -

Ejemplos

- -

Para aplicar una hoja de estilo a todos los dispositivos monocromáticos:

- -
@media all and (monochrome) { ... }
-
- -

Para aplicar una hoja de estilo a un dispositivo monocromático con al menos 8 bits por pixel:

- -
@media all and (min-monochrome: 8) { ... }
-
- -

orientation

- -

Valor: landscape | portrait
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no

- -

Indica cuando el dispositivo esta en modo landscape (el ancho de la pantalla es mayor al alto) o modo portrait (el alto de la pantalla es mayor al ancho).

- -

Ejemplo

- -

Para aplicar una hoja de estilo solo en orientación vertical (portrait):

- -
@media all and (orientation: portrait) { ... }
- -

resolution

- -

Valor: {{cssxref("<resolution>")}}
- Medio: {{cssxref("Media/Bitmap", "bitmap")}}
- Acepta prefijos min/max: sí

- -

Indica la resolución (densidad de pixeles) del dispositivo de salida. La resolución puede ser especificada en puntos por pulgada (dpi) o en puntos por centímetros (dpcm).

- -

Ejemplo

- -

Para aplicar una hoja de estilo a dispositivos con al menos 300 dpi de resolución:

- -
@media print and (min-resolution: 300dpi) { ... }
-
- -

Para reemplazar la vieja sintaxis (min-device-pixel-ratio: 2):

- -
@media screen and (min-resolution: 2dppx) { ... }
- -

scan

- -

Valor: progressive | interlace
- Medio: {{cssxref("Media/TV")}}
- Acepta prefijos min/max: no

- -

Describe el proceso de exploración de televisión de los dispositivos de salida.

- -

Ejemplo

- -

Para aplicar una hoja de estilo solo a televisores de exploración progresiva:

- -
@media tv and (scan: progressive) { ... }
-
- -

width

- -

Valor: {{cssxref("<length>")}}
- Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Acepta prefijos min/max: sí

- -

La función width describe el ancho de la superficie a renderizar en el dispositivo de salida (como el ancho de una ventana de un documento o el ancho de la bandeja de papel en una impresora).

- -
Nota: Cuando el usuario cambia el tamaño de una ventana Firefox también cambia las hojas de estilo para utilizar la mas adecuada basándose en los valores de width y height del query.
- -

Ejemplos

- -

Si usted quiere especificar una hoja de estilo para dispositivos portátiles o pantallas con un ancho de al menos 20em, usted puede usar esta query:

- -
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
-
- -

Esta query especifica una hoja de estilo para ser aplicada a un medio impreso con un ancho mayor a 8.5 pulgadas:

- -
<link rel="stylesheet" media="print and (min-width: 8.5in)"
-    href="http://foo.com/mystyle.css" />
-
- -

Esta query especifica una hoja de estilo para ser utilizada cuando la ventana tiene un ancho entre 500 y 800 pixeles:

- -
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
-
-
- - - -

Específico de Mozilla

- -

Mozilla ofrece varias funciones especificas de Gecko. Algunas de estas pueden ser propuestas como funcines oficiales.

- -

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no

- -

Si el dispositivo acepta que haya imágenes en menús, el valor es 1; de otro modo sera 0. Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(images-in-menus)") }}.

- -

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no

- -

Si el usuario ha configurado su dispositivo para usar la apariencia "Grafito" en Mac OS X, esto sera 1. Si el usuario esta usando la apariencia azul por defecto, o si no usa Mac OS X, esto sera 0.

- -

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}.

- -

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no

- -

Si el usuario esta usando Maemo con el tema original, esto sera 1; Si esta usando el nuevo tema Fremantle, sera 0.

- -

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(maemo-classic)") }}

- -

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }}

- -

Valor: {{cssxref("<number>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: sí

- -

Da el numero de pixeles del dispositivo por pixeles de CSS.

- -
-

No use esta función.

- -

En cambio use la función resolution con la unidad dppx.
-
- -moz-device-pixel-ratio puede ser usada para compatibilidad con Firefox 16 o anterior; y -webkit-device-pixel-ratio con navegadores basados en WebKit que no soporten dppx.

- -

Ejemplo:

- -
@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores basados en WebKit */
-       (min--moz-device-pixel-ratio: 2),    /* Navegadores anteriores a Firefox 16 */
-       (min-resolution: 2dppx),             /* La forma estandar */
-       (min-resolution: 192dpi)             /* compatibilidad con dppx */
- -

Vea este articulo CSSWG sobre buenas practicas para compatibilidad en relación a resolution y dppx.

-
- -
Nota: Esta funcion multimedia tambien esta implementada en Webkit como -webkit-device-pixel-ratio. Los prefijos minimos y maximos de esta funcion implementados por Gecko se llaman asi: min--moz-device-pixel-ratio y max--moz-device-pixel-ratio; y los mismos prefijos implementados por Webkit se llaman asi: -webkit-min-device-pixel-ratio y -webkit-max-device-pixel-ratio.
- -

{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

- -

Valor: windows-xp | windows-vista | windows-win7 | windows-win8
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no

- -

Indica que sistema operativo esta en uso actualmente. Actualmente solo es implementado en Windows. Sus posibles valores son:

- - - -

Esto se hace para permitir a los skins y a algunos códigos funcionen mejor con el sistema operativo en el que se ejecutan.

- -

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no

- -

El valor sera 1 si la interfaz de usuario muestra una fecha inversa al final de la barra de desplazamiento, de lo contrario el valor sera 0.

- -

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }}.

- -

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no

- -

El valor sera 1 si la interfaz de usuario muestra una fecha apuntando hacia la derecha al final de la barra de desplazamiento. de lo contrario el valor sera 0.

- -

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }}.

- -

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no

- -

El valor sera 1 si la interfaz de usuario muestra una fecha inversa al principio de la barra de desplazamiento, de lo contrario el valor sera 0.

- -

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }}.

- -

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no

- -

El valor sera 1 si la interfaz de usuario muestra una fecha apuntando hacia la derecha al principio de la barra de desplazamiento, de lo contrario el valor sera 0.

- -

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }}.

- -

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no

- -

El valor sera 1 si la interfaz de usuario muestra la miniatura de la barra de desplazamiento de forma proporcional (basado en el porcentaje del documento que es visible), de lo contrario el valor sera 0.

- -

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }}.

- -

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no

- -

El valor sera 1 si el dispositivo soporta eventos táctiles (una pantalla táctil), de lo contrario el valor sera 0.

- -

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(touch-enabled)") }}.

- -

Ejemplo

- -

Usted puede usar esto para renderizar sus botones un poco mas grandes, Por Ejemplo, si el usuario se encuentra en una pantalla táctil, esto hará los botones mas fáciles de usar con los dedos.

- -

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no

- -

El valor sera 1 si el usuario utiliza un windows sin temas visuales (modo clasico); de lo contrario el valor sera 0.

- -

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(windows-classic)") }}.

- -

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no

- -

El valor sera 1 si el usuario utiliza windows con el compositor de ventanas DWM; de lo contrario el valor sera 0.

- -

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(windows-compositor)") }}.

- -

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

- -

Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no

- -

El valor sera 1 si el usuario actualmente esta utilizando algunos de los temas por defecto de Windows (Luna, Royale, Zune, or Aero), de lo contrario el valor sera 0.

- -

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(windows-default-theme)") }}.

- -

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

- -

Valor: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no

- -

Indica cual tema de Windows esta en uso actualmente. Solo disponible para Windows. Sus posibles valores son:

- - - -

Esto se hace para permitir a los skins y a algunos códigos funcionen mejor con el tema utilizado por el sistema operativo en el que se ejecutan.

- -

Específico de WebKit

- -

-webkit-transform-3d

- -

Vakir: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no

- - - -

Si está soportado, el valor es 1, si no, el valor es 0.

- -

Ejemplo

- -
@media (-webkit-transform-3d) {
-  .foo {
-    transform-style: preserve-3d;
-  }
-}
-
-@media (-webkit-transform-3d: 1) {
-  .foo {
-    transform-style: preserve-3d;
-  }
-}
- -

-webkit-transform-2d

- -

Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no

- - - -

Si está soportado, el valor es 1, si no, el valor es 0.

- -

-webkit-transition

- -

Value: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no

- - - -

Si está soportado, el valor es 1, si no, el valor es 0.

- -

Compatibilidad con Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("21")}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("9.0")}}{{CompatOpera("9")}}{{CompatSafari("4")}}
grid{{CompatUnknown}}{{CompatNo}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
resolution{{CompatChrome("29")}}{{CompatGeckoDesktop("1.9.1")}} [2]
- {{CompatGeckoDesktop("8.0")}} [3]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scan{{CompatUnknown}}{{CompatNo}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio{{CompatVersionUnknown}}{{CompatNo}}[7]{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
-webkit-transform-3d{{CompatVersionUnknown}}[5]{{CompatGeckoDesktop("49")}}[6]{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
-webkit-transform-2d{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
-webkit-transition{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
display-mode{{CompatUnknown}}{{CompatGeckoDesktop("47")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
grid{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
resolution{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scan{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transform-3d{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transform-2d{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transition{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
display-mode{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] grid media type no está soportado

- -

[2] Soporta valores {{cssxref("<integer>")}}.

- -

[3] Soporta valores {{cssxref("<number>")}}, según la especificación.

- -

[4] tv media no está soportado

- -

[5] Ver {{WebKitBug(22494)}}.

- -

[6] Implementado por razones de compatibilidad web en Gecko 46.0 {{geckoRelease("46.0")}} tras tras cambiar layout.css.prefixes.webkit por defecto a false (ver {{bug(1239799)}}). Desde Gecko 49.0 {{geckoRelease("49")}} layout.css.prefixes.webkit por defecto es true.

- -

[7] Implementado como alias para min--moz-device-pixel-ratio y max--moz-device-pixel-ratio por razones de compatibilidad web in Gecko 45.5 {{geckoRelease("45.0")}} (ver {{bug(1176968)}}) tras cambiar layout.css.prefixes.webkit y layout.css.prefixes.device-pixel-ratio-webkit por defecto a false. Desde Gecko 49.0 {{geckoRelease("49")}} layout.css.prefixes.webkit por defecto es true.

- -

Vea también

- - diff --git a/files/es/css/using_css_gradients/index.html b/files/es/css/using_css_gradients/index.html deleted file mode 100644 index 2e3f5e13a4..0000000000 --- a/files/es/css/using_css_gradients/index.html +++ /dev/null @@ -1,386 +0,0 @@ ---- -title: Usando gradientes con CSS -slug: CSS/Using_CSS_gradients -translation_of: Web/CSS/CSS_Images/Using_CSS_gradients ---- -

CSS3 posee soporte para nuevos tipos de gradientes  en las propiedades CSS. Usarlos en un segundo plano, permite mostrar transiciones suaves entre dos o más colores especificados, evitando así el uso de imágenes para estos efectos, lo que reduce el tiempo de descarga y el uso de ancho de banda. Además, debido a que el gradiente es generado por el navegador, los objetos degradados se ven mejor cuando se hace un acercamiento, y el ajuste de diseño es mucho más flexible.

- -

Los navegadores soportan dos tipos de gradientes: lineal, definido con la función linear-gradient, y radial, definido con radial-gradient.

- -

Gradientes lineales

- -

Para crear un gradiente lineal, se establece un punto de partida y una dirección (indicada por un ángulo) a lo largo de la cual se aplica el efecto. Usted también puede definir paradas de color. las paradas de color son los colores que usted desea que Gecko renderise con suaves transiciones entre ellos, y usted puede específicar al menos dos de ellas, pero puede específicar más para crear efectos de gradientes más complejos.

- -

Gradientes lineales simples

- -

Aquí está un gradiente lineal que inicia en el centro (horizontalmente) y arriba (verticalmente), e inicia en azul, transicionando a blanco.

- - - - - - - - - - - - -
Captura de pantallaDemo en vivo
-
 
-
- -
-
/* La sintaxis vieja, obsoleta, pero todavía necesaria, con prefijo, para Opera y navegadores basados en WebKit-based */
-background: -prefix-linear-gradient(top, blue, white);
-
-/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
-background: linear-gradient(to bottom, blue, white);
-
-
- -

Cambiando el mismo gradiente para correr de izquierda a derecha:

- - - - - - - - - - - - -
Captura de pantallaDemo en vivo
basic_linear_blueleft.png -
 
-
- -
/* la vieja sintaxis, obsoleta, pero todavía necesaria, prefijada, para Opera y Navegadores basados en Webkit */
-background: -prefix-linear-gradient(left, blue, white);
-
-/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
-background: linear-gradient(to right, blue, white);
-
- -

Usted puede hace el gradiente sea generado diagonalmente mediante la especificación de la posición de inicio vertical y horizontal. Por ejemplo:

- - - - - - - - - - - - -
Captura de pantallaDemo en vivo
basic_linear_bluetopleft.png -
 
-
- -
/* la vieja sintaxis, obsoleta, pero todavía necesaria, prefijada, para Opera y Navegadores basados en Webkit */
-background: -prefix-linear-gradient(left top, blue, white);
-
-/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
-background: linear-gradient(to bottom right, blue, white);
-
- -

Usando Angulos

- -

Si usted no específica un ángulo, uno es determinado automáticamente basado en la dirección dada. Si usted desea más control sobre la dirección del gradiente, usted necesita establecer el ángulo específicamente.

- -

Por ejemplo, aquí hay dos gradientes, el primero con una dirección hacia la derecha, y el segundo tiene un ángulo de 70 grados.

- -

linear_gradient_angle.png

- -

El de la derecha usa un CSS Como este:

- -
background: linear-gradient(70deg, black, white);
-
- -

El ángulo es especificado como un ángulo entre una línea vertical y la línea del gradiente, contando en el sentido horario. En otras palabras, 0deg crea un gradiente vertical desde el fondo hasta el tope, mientras 90deg genera un gradiente horizontal de izquierda a derecha:

- -

linear_redangles.png

- -
background: linear-gradient(<angle>, red, white);
-
- -
-

Note: several browsers implement, prefixed, an older draft of the specification where 0deg was pointing to the right rather than to the top. Pay attention in the value of the angle when mixing prefixed and standard linear-gradient, some may need to have 90deg added to the <angle>.

-
- -

Color stops

- -

Color stops are points along the gradient line that will have a specific color at that location. The location can be specified as either a percentage of the length of the line, or as an absolute length. You may specify as many color stops as you like in order to achieve the desired effect.

- -

If you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want.

- -

Example: Three color stops

- -

This example specifies three color stops:

- - - - - - - - - - - - -
Screen ShotLive Demo
linear_colorstops1.png -
 
-
- -
/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
-background: -prefix-linear-gradient(top, blue, white 80%, orange);
-
-/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
-background: linear-gradient(to bottom, blue, white 80%, orange);
-
- -

Note that the first and last color stops don't specify a location; because of that, values of 0% and 100% are assigned automatically. The middle color stop specifies a location of 80%, putting it most of the way toward the bottom.

- -

Example: Evenly spaced color stops

- -

Here's an example using a wide variety of colors, all evenly spaced:

- - - - - - - - - - - - -
Screen ShotLive Demo
linear_rainbow.png -
 
-
- -
/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
-background: -prefix-linear-gradient(left, red, orange, yellow, green, blue);
-
-/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
-background: linear-gradient(to right, red, orange, yellow, green, blue);
-
- -

Notice that the color stops are automatically spaced evenly when no locations are specified.

- -

Transparency and gradients

- -

Gradients support transparency. You can use this, for example, when stacking multiple backgrounds, to create fading effects on background images. For example:

- -

linear_multibg_transparent.png

- -
/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
-background: linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
-
-/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
-background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
-
- -

The backgrounds are stacked with the first specified background on top, and each successive background farther away. By stacking backgrounds this way, you can create very creative effects as seen above.

- -

Radial gradients

- -

Radial gradients are specified using the {{ cssxref("radial-gradient") }} functional notation. The syntax is similar to that for linear gradients, except you can specify the gradient's ending shape (whether it should be a circle or ellipse) as well as its size. By default, the ending shape is an ellipse with the same proportions than the container's box.

- -

Color stops

- -

You specify color stops the same way as for linear gradients. The gradient line extends out from the starting position in all directions.

- -

Example: Evenly spaced color stops

- -

By default, as with linear gradients, the color stops are evenly spaced:

- - - - - - - - - - - - -
Screen ShotLive Demo
radial_gradient_even.png -
 
-
- -
background: radial-gradient(red, yellow, rgb(30, 144, 255));
-
- -

Example: Explicitly spaced color stops

- -

Here we specify specific locations for the color stops:

- - - - - - - - - - - - -
Screen ShotLive Demo
radial_gradient_varied.png -
 
-
- -
background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
-
- -

Size

- -

This is one of the areas in which radial gradients differ from linear gradients. You can provide a size value that specifies the point that defines the size of the circle or ellipse. See this description of the size constants for specifics.

- -

Example: closest-side for ellipses

- -

This ellipse uses the closest-side size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.

- - - - - - - - - - - - -
Screen ShotLive Demo
radial_ellipse_size1.png -
 
-
- -
background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
-
- -

Example: farthest-corner for ellipses

- -

This example is similar to the previous one, except that its size is specified as farthest-corner, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.

- - - - - - - - - - - - -
Screen ShotLive Demo
radial_ellipse_size2.png -
 
-
- -
background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
-
- -

Example: closest-side for circles

- -

This example uses closest-side, which determines the circle's size as the distance between the start point (the center) and the closest side.

- - - - - - - - - - - - -
Screen ShotLive Demo
radial_circle_size1.png -
 
-
- -
background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
-
- -

Here, the circle's radius is half the height of the box, since the top and bottom edges are equidistant from the start point and are closer than the left and right edges.

- -

Repeating gradients

- -

The {{ cssxref("linear-gradient") }} and {{ cssxref("radial-gradient") }} properties don't support automatically repeating the color stops. However, the {{ cssxref("repeating-linear-gradient") }} and {{ cssxref("repeating-radial-gradient") }} properties are available to offer this functionality.

- -

Examples: Repeating linear gradient

- -

This example uses {{ cssxref("repeating-linear-gradient") }} to create a gradient:

- - - - - - - - - - - - -
Screen ShotLive Demo
repeating_linear_gradient.png -
 
-
- -
background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
-
- -

Another example using the {{ cssxref("repeating-linear-gradient") }} property.

- -

repeat_background_gradient_checked.png

- -
background-color: #000;
-background-image: repeating-linear-gradient(90deg, transparent, transparent 50px,
-      rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
-      rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
-      rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
-repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
-      rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
-      rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
-      rgba(255, 206, 0, 0.25) 166px),
-repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
-      rgba(143, 77, 63, 0.25) 10px),
-repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
-      rgba(143, 77, 63, 0.25) 10px);
-
- -

Example: Repeating radial gradient

- -

This example uses {{ cssxref("repeating-radial-gradient") }} to create a gradient:

- - - - - - - - - - - - -
Screen ShotLive Demo
repeating_radial_gradient.png -
 
-
- -
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-
- -

See also

- - diff --git "a/files/es/css_din\303\241mico/index.html" "b/files/es/css_din\303\241mico/index.html" deleted file mode 100644 index e77502cb70..0000000000 --- "a/files/es/css_din\303\241mico/index.html" +++ /dev/null @@ -1,339 +0,0 @@ ---- -title: CSS dinámico -slug: CSS_dinámico -tags: - - CSS - - Todas_las_Categorías ---- -

-

-

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/desarrollando_mozilla/index.html b/files/es/desarrollando_mozilla/index.html deleted file mode 100644 index 4551e8fea2..0000000000 --- a/files/es/desarrollando_mozilla/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Desarrollando Mozilla -slug: Desarrollando_Mozilla -tags: - - Desarrollando_Mozilla - - Todas_las_Categorías ---- -

¿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/desarrollo_web/index.html b/files/es/desarrollo_web/index.html deleted file mode 100644 index d6d72dfef3..0000000000 --- a/files/es/desarrollo_web/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Desarrollo Web -slug: Desarrollo_Web -tags: - - Desarrollo_Web - - Todas_las_Categorías -translation_of: Web/Guide -translation_of_original: Web_Development ---- -

-

-
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/detectar_la_orientaci\303\263n_del_dispositivo/index.html" "b/files/es/detectar_la_orientaci\303\263n_del_dispositivo/index.html" deleted file mode 100644 index 08f93e1145..0000000000 --- "a/files/es/detectar_la_orientaci\303\263n_del_dispositivo/index.html" +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Detectar la orientación del dispositivo -slug: Detectar_la_orientación_del_dispositivo -tags: - - Aceleración - - CSS - - Consultas - - Orientación - - para_revisar ---- -

{{ 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/dhtml/index.html b/files/es/dhtml/index.html deleted file mode 100644 index ee735a29bc..0000000000 --- a/files/es/dhtml/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: DHTML -slug: DHTML -tags: - - DHTML - - Todas_las_Categorías -translation_of: Glossary/DHTML ---- -

-

-
DHTML es la abreviatura de "HTML dinámico".El término DHTML se usa generalmente para referirse al código del que están hechas las páginas web interactivas que no requieren la utilización de plugins tales como Flash o Java.El término abarca las funcionalidades disponibles para los desarrolladores web que utilizan las tecnologías HTML, CSS, Document Object Model, y JavaScript de forma combinada. -
- - - - -
-

Documentación

-
Referencia de Objetos Clientes DOM -
Esta referencia de objetos clientes proporciona información sobre los objetos usados comúnmente en DHTML, y su intención es ayudar a determinar que propiedades están soportadas en cada navegador. -
-
DHTML Demostraciones del uso de DOM/Style -
Demostraciones de Modelo de Objetos del Documento(DOM) , Cross-browser widgets, y recursos adicionales para aprender sobre DOM. -
-
Solución a errores DHTML en Firefox 1.0.3 -
Tenga en cuenta que los problemas tratados en este artículo se han solucionado en la versión 1.0.4 de Firefox, y este documento solo es de aplicación a las versiones 1.0.3 del navegador. -
-

-

View All... -

-		 -

Comunidad

-
  • Ver foros en Mozilla ... -
-

{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }} -

-

Herramientas

- -

Temas Relacionados

-
AJAX, CSS, DOM, HTML, JavaScript -
-
-

Categories -

Interwiki Language Links -


-

{{ languages( { "en": "en/DHTML", "fr": "fr/DHTML", "ja": "ja/DHTML", "ko": "ko/DHTML", "pl": "pl/DHTML", "pt": "pt/DHTML" } ) }} diff --git a/files/es/dhtml_demostraciones_del_uso_de_dom_style/index.html b/files/es/dhtml_demostraciones_del_uso_de_dom_style/index.html deleted file mode 100644 index 9ceaa0803d..0000000000 --- a/files/es/dhtml_demostraciones_del_uso_de_dom_style/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: DHTML Demostraciones del uso de DOM/Style -slug: DHTML_Demostraciones_del_uso_de_DOM_Style -tags: - - CSS - - DHTML - - DOM - - JavaScript - - Todas_las_Categorías ---- -

-

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/dibujando_gr\303\241ficos_con_canvas/index.html" "b/files/es/dibujando_gr\303\241ficos_con_canvas/index.html" deleted file mode 100644 index e7dbd60c0e..0000000000 --- "a/files/es/dibujando_gr\303\241ficos_con_canvas/index.html" +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Dibujando Gráficos con Canvas -slug: Dibujando_Gráficos_con_Canvas ---- -

v

diff --git a/files/es/dibujar_texto_usando_canvas/index.html b/files/es/dibujar_texto_usando_canvas/index.html deleted file mode 100644 index 10a5970824..0000000000 --- a/files/es/dibujar_texto_usando_canvas/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Dibujar texto usando canvas -slug: Dibujar_texto_usando_canvas -tags: - - 'HTML:Canvas' -translation_of: Web/API/Canvas_API/Tutorial/Drawing_text ---- -

{{ Gecko_minversion_header(1.9) }} -{{ Fx_minversion_header(3) }} -El elemento <canvas> permite dibujar texto en él a través de una API experimental de Mozilla. -

-

API

-
attribute DOMString mozTextStyle;
-void mozDrawText(in DOMString textToDraw);
-float mozMeasureText(in DOMString textToMeasure);
-void mozPathText(in DOMString textToPath);
-void mozTextAlongPath(in DOMString textToDraw, in boolean stroke);
-
-

Notas

- -

Demostraciones

-

Mira algunos ejemplos aquí, aquí, y aquí. -

-

Cambiar el tipo de letra actual

-

El atributo mozTextStyle contiene el estilo de texto actual. Usa la misma sintaxis que el especificado para las tipografías CSS. -

Ej: -

-
ctx.mozTextStyle = "20pt Arial"
-
-

Dibujar texto

-

Dibujar es muy sencillo. mozDrawText usa el estilo de texto actual, cualquiera que sea éste. Se usa el color de relleno del contexto como color del texto. -

-
ctx.translate(10, 50);
-ctx.fillStyle = "Red";
-ctx.mozDrawText("Sample String");
-
-

Medir texto

-

A veces es útil saber qué tan ancho es un trozo de texto en particular (para centrarlo en una ventana, por ejemplo). -

-
var text = "Sample String";
-var width = ctx.canvas.width;
-var len = ctx.mozMeasureText(text);
-ctx.translate(len/2, 0);
-ctx.mozDrawText(text);
-
-

Interacción texto/trazo

-

Si quieres tachar un texto, mozDrawText no te lo permite. En cambio, mozPathText agrega el tachado de texto al trazo actual. -

-
ctx.fillStyle = "green";
-ctx.strokeStyle = "black";
-ctx.mozPathText("Sample String");
-ctx.fill()
-ctx.stroke()
-
-

Supongamos ahora que quieres agregar un texto que se acomode a un trazo que dibujaste (una línea curva o algo parecido) es donde aparece mozTextAlongPath. Al contrario de otras funciones de texto, mozTextAlongPath necesita dos argumentos: el texto y qué se quiere hacer con él. mozTextAlongPath aproxima el trazo actual como una serie de segmentos de línea y ubica cada carácter encima de ese trazo. Los caracteres no son cambiados de tamaño o transformados de acuerdo a la curvatura de la base; toman la orientación del trazo a la mitad del carácter. -

Una vez que mozTextAlongPath sabe dónde está el carácter, busca el segundo parámetro para decidir qué hacer con él. Si el segundo parámetro es false, entonces dibuja el carácter como lo haría mozDrawText. Si es true, agrega el carácter al trazo actual, como lo hace mozPathText. Esto puede usarse para crear efectos únicos. -


-


-

-
-
-{{ languages( { "en": "en/Drawing_text_using_a_canvas", "fr": "fr/Dessin_de_texte_avec_canvas", "ja": "ja/Drawing_text_using_a_canvas", "pl": "pl/Rysowanie_tekstu_przy_u\u017cyciu_canvas" } ) }} diff --git a/files/es/dom/almacenamiento/index.html b/files/es/dom/almacenamiento/index.html deleted file mode 100644 index 6889022c7a..0000000000 --- a/files/es/dom/almacenamiento/index.html +++ /dev/null @@ -1,303 +0,0 @@ ---- -title: Almacenamiento -slug: DOM/Almacenamiento -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 ---- -

{{ 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/dom/document.cookie/index.html b/files/es/dom/document.cookie/index.html deleted file mode 100644 index 791ae788f2..0000000000 --- a/files/es/dom/document.cookie/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: document.cookie -slug: DOM/document.cookie -tags: - - NeedsContent -translation_of: Web/API/Document/cookie ---- -

{{ApiRef("DOM")}}

- -

Resumen

- -

Con document.cookie se obtienen y definen las cookies asociadas con el documento.

- -

Sintaxis

- -

Leer todas las cookies accesibles desde una localización

- -
todasLasCookies = document.cookie;
-
- -

En el código anterior todasLasCookies es una cadena que contiene una lista de todas las cookies separadas por punto y coma (en pares clave=valor). Tenga en cuenta que clave y valor pueden estar rodeadas por espacios en blanco (caracteres espacio y tabulación): de hecho RFC 6265 especifica que debe haber un espacio en blanco después de cada punto y coma (;), pero algunos agentes de usuario no son muy estrictos con esto.

- - - -
document.cookie = nuevaCookie;
- -

En el código anterior, nuevacookie es una cadena de la forma clave=valor. Tenga en cuenta que solo se puede crear o actualizar una cookie de cada vez mediante este método. Considere también que:

- - - -
{{ gecko_callout_heading("6.0") }}
- -
Nótese que previamente a Gecko 6.0 {{ geckoRelease("6.0") }}, rutas que contenían comillas eran tratadas como si las comillas fueran parte de la cadena, en lugar de considerarse como un delimitador de la ruta actual. Esto ya ha sido arreglado.
- -

Ejemplos

- -

Ejemplo # 1: Uso sencillo

- -
document.cookie = "nombre=oeschger";
-document.cookie = "comida_preferida=tripa";
-function alertCookie() {
-  alert(document.cookie); // visualizar: nombre=oeschger;comida favorita=tripa
-
-}
- -
<button onclick="alertCookie()">Mostrar cookies</button>
- -

{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}

- - - -
document.cookie = "test1=Hola";
-document.cookie = "test2=Mundo";
-
-var cookieValor = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
-
-function alertCookieValue() {
-  alert(cookieValor);
-}
-
- -
<button onclick="alertCookieValue()">Mostrar valor de cookie</button>
- -

{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}

- -

Ejemplo #3: Hacer algo una sola vez

- -

De manera a usar el siguiente código, favor remplace todas las veces la palabra hacerAlgoUnaSolaVez (el nombre de la cookie) con un nombre personalizado.

- -
function hazUnaVez() {
-  if (document.cookie.replace(/(?:(?:^|.*;\s*)hacerAlgoUnaSolaVez\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
-    alert("Hacer algo aquí!");
-    document.cookie = "hacerAlgoUnaSolaVez=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
-  }
-}
- -
<button onclick="dhacerUnaVez()">Solo hacer algo una vez</button>
- -

{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}

- -

Seguridad

- -

Es importante mencionar que la restricción path no protege contra la lectura no autorizada de cookies de una ruta distinta. Puede ser fácilmente resuelto mediante DOM (por ejemplo creando un iframe oculto con la ruta de la cookie y accediendo a la propiedad contentDocument.cookie del iframe). La única manera de proteger el acceso a cookies es ocupando un dominio o subdominio diferente, debido a la política de mismo origen.

- -

Notas

- - - -

Especificación

- -

DOM Level 2: HTMLDocument.cookie

diff --git a/files/es/dom/index.html b/files/es/dom/index.html deleted file mode 100644 index 26d372847a..0000000000 --- a/files/es/dom/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: DOM -slug: DOM -tags: - - DOM - - Todas_las_Categorías -translation_of: Web/API/Document_Object_Model -translation_of_original: 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/dom/manipulando_el_historial_del_navegador/ejemplo/index.html b/files/es/dom/manipulando_el_historial_del_navegador/ejemplo/index.html deleted file mode 100644 index 1971f1348f..0000000000 --- a/files/es/dom/manipulando_el_historial_del_navegador/ejemplo/index.html +++ /dev/null @@ -1,415 +0,0 @@ ---- -title: Ejemplo de Navegación usando Ajax -slug: DOM/Manipulando_el_historial_del_navegador/Ejemplo -translation_of: Web/API/History_API/Example ---- -

This is an example of an AJAX web site composed only of three pages (first_page.php, second_page.php and third_page.php). To see how it works, please, create the following files (or git clone https://github.com/giabao/mdn-ajax-nav-example.git ):

- -
Note: For fully integrating the {{HTMLElement("form")}} elements within this mechanism, please take a look at the paragraph Submitting forms and uploading files.
- -

first_page.php:

- -
-
<?php
-    $page_title = "First page";
-
-    $as_json = false;
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        $as_json = true;
-        ob_start();
-    } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
-        include "include/header.php";
-        echo "<title>" . $page_title . "</title>";
-?>
-</head>
-
-<body>
-
-<?php include "include/before_content.php"; ?>
-
-<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
-
-<div id="ajax-content">
-<?php } ?>
-
-    <p>This is the content of <strong>first_page.php</strong>.</p>
-
-<?php
-    if ($as_json) {
-        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
-    } else {
-?>
-</div>
-
-<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
-
-<?php
-        include "include/after_content.php";
-        echo "</body>\n</html>";
-    }
-?>
-
-
- -

second_page.php:

- -
-
<?php
-    $page_title = "Second page";
-
-    $as_json = false;
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        $as_json = true;
-        ob_start();
-    } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
-        include "include/header.php";
-        echo "<title>" . $page_title . "</title>";
-?>
-</head>
-
-<body>
-
-<?php include "include/before_content.php"; ?>
-
-<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
-
-<div id="ajax-content">
-<?php } ?>
-
-    <p>This is the content of <strong>second_page.php</strong>.</p>
-
-<?php
-    if ($as_json) {
-        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
-    } else {
-?>
-</div>
-
-<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
-
-<?php
-        include "include/after_content.php";
-        echo "</body>\n</html>";
-    }
-?>
-
-
- -

third_page.php:

- -
-
<?php
-    $page_title = "Third page";
-    $page_content = "<p>This is the content of <strong>third_page.php</strong>. This content is stored into a php variable.</p>";
-
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        echo json_encode(array("page" => $page_title, "content" => $page_content));
-    } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
-        include "include/header.php";
-        echo "<title>" . $page_title . "</title>";
-?>
-</head>
-
-<body>
-
-<?php include "include/before_content.php"; ?>
-
-<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
-
-<div id="ajax-content">
-<?php echo $page_content; ?>
-</div>
-
-<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
-
-<?php
-        include "include/after_content.php";
-        echo "</body>\n</html>";
-    }
-?>
-
-
- -

css/style.css:

- -
#ajax-loader {
-    position: fixed;
-    display: table;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-#ajax-loader > div {
-    display: table-cell;
-    width: 100%;
-    height: 100%;
-    vertical-align: middle;
-    text-align: center;
-    background-color: #000000;
-    opacity: 0.65;
-}
-
- -

include/after_content.php:

- -
<p>This is the footer. It is shared between all ajax pages.</p>
-
- -

include/before_content.php:

- -
<p>
-[ <a class="ajax-nav" href="first_page.php">First example</a>
-| <a class="ajax-nav" href="second_page.php">Second example</a>
-| <a class="ajax-nav" href="third_page.php">Third example</a>
-| <a class="ajax-nav" href="unexisting.php">Unexisting page</a> ]
-</p>
-
-
- -

include/header.php:

- -
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<script type="text/javascript" src="js/ajax_nav.js"></script>
-<link rel="stylesheet" href="css/style.css" />
-
- -

js/ajax_nav.js:

- -

(before implementing it in a working environment, please read the note about the const statement compatibility)

- -
-
"use strict";
-
-const ajaxRequest = new (function () {
-
-    function closeReq () {
-        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
-        bIsLoading = false;
-    }
-
-    function abortReq () {
-        if (!bIsLoading) { return; }
-        oReq.abort();
-        closeReq();
-    }
-
-    function ajaxError () {
-        alert("Unknown error.");
-    }
-
-    function ajaxLoad () {
-        var vMsg, nStatus = this.status;
-        switch (nStatus) {
-            case 200:
-                vMsg = JSON.parse(this.responseText);
-                document.title = oPageInfo.title = vMsg.page;
-                document.getElementById(sTargetId).innerHTML = vMsg.content;
-                if (bUpdateURL) {
-                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
-                    bUpdateURL = false;
-                }
-                break;
-            default:
-                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
-                switch (Math.floor(nStatus / 100)) {
-                    /*
-                    case 1:
-                        // Informational 1xx
-                        console.log("Information code " + vMsg);
-                        break;
-                    case 2:
-                        // Successful 2xx
-                        console.log("Successful code " + vMsg);
-                        break;
-                    case 3:
-                        // Redirection 3xx
-                        console.log("Redirection code " + vMsg);
-                        break;
-                    */
-                    case 4:
-                        /* Client Error 4xx */
-                        alert("Client Error #" + vMsg);
-                        break;
-                    case 5:
-                        /* Server Error 5xx */
-                        alert("Server Error #" + vMsg);
-                        break;
-                    default:
-                        /* Unknown status */
-                        ajaxError();
-                }
-        }
-        closeReq();
-    }
-
-    function filterURL (sURL, sViewMode) {
-        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
-    }
-
-    function getPage (sPage) {
-        if (bIsLoading) { return; }
-        oReq = new XMLHttpRequest();
-        bIsLoading = true;
-        oReq.onload = ajaxLoad;
-        oReq.onerror = ajaxError;
-        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
-        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
-        oReq.send();
-        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
-    }
-
-    function requestPage (sURL) {
-        if (history.pushState) {
-            bUpdateURL = true;
-            getPage(sURL);
-        } else {
-            /* Ajax navigation is not supported */
-            location.assign(sURL);
-        }
-    }
-
-    function processLink () {
-        if (this.className === sAjaxClass) {
-            requestPage(this.href);
-            return false;
-        }
-        return true;
-    }
-
-    function init () {
-        oPageInfo.title = document.title;
-        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
-    }
-
-    const
-
-        /* customizable constants */
-        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
-
-        /* not customizable constants */
-        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
-        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
-        oPageInfo = {
-            title: null,
-            url: location.href
-        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
-            100: "Continue",
-            101: "Switching Protocols",
-            102: "Processing",
-            200: "OK",
-            201: "Created",
-            202: "Accepted",
-            203: "Non-Authoritative Information",
-            204: "No Content",
-            205: "Reset Content",
-            206: "Partial Content",
-            207: "Multi-Status",
-            208: "Already Reported",
-            226: "IM Used",
-            300: "Multiple Choices",
-            301: "Moved Permanently",
-            302: "Found",
-            303: "See Other",
-            304: "Not Modified",
-            305: "Use Proxy",
-            306: "Reserved",
-            307: "Temporary Redirect",
-            308: "Permanent Redirect",
-            400: "Bad Request",
-            401: "Unauthorized",
-            402: "Payment Required",
-            403: "Forbidden",
-            404: "Not Found",
-            405: "Method Not Allowed",
-            406: "Not Acceptable",
-            407: "Proxy Authentication Required",
-            408: "Request Timeout",
-            409: "Conflict",
-            410: "Gone",
-            411: "Length Required",
-            412: "Precondition Failed",
-            413: "Request Entity Too Large",
-            414: "Request-URI Too Long",
-            415: "Unsupported Media Type",
-            416: "Requested Range Not Satisfiable",
-            417: "Expectation Failed",
-            422: "Unprocessable Entity",
-            423: "Locked",
-            424: "Failed Dependency",
-            425: "Unassigned",
-            426: "Upgrade Required",
-            427: "Unassigned",
-            428: "Precondition Required",
-            429: "Too Many Requests",
-            430: "Unassigned",
-            431: "Request Header Fields Too Large",
-            500: "Internal Server Error",
-            501: "Not Implemented",
-            502: "Bad Gateway",
-            503: "Service Unavailable",
-            504: "Gateway Timeout",
-            505: "HTTP Version Not Supported",
-            506: "Variant Also Negotiates (Experimental)",
-            507: "Insufficient Storage",
-            508: "Loop Detected",
-            509: "Unassigned",
-            510: "Not Extended",
-            511: "Network Authentication Required"
-        };
-
-    var
-
-        oReq, bIsLoading = false, bUpdateURL = false;
-
-    oLoadingBox.id = "ajax-loader";
-    oCover.onclick = abortReq;
-    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
-    oCover.appendChild(oLoadingImg);
-    oLoadingBox.appendChild(oCover);
-
-    onpopstate = function (oEvent) {
-        bUpdateURL = false;
-        oPageInfo.title = oEvent.state.title;
-        oPageInfo.url = oEvent.state.url;
-        getPage();
-    };
-
-    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
-
-    // Public methods
-
-    this.open = requestPage;
-    this.stop = abortReq;
-    this.rebuildLinks = init;
-
-})();
-
-
- -
Note: The current implementation of const (constant statement) is not part of ECMAScript 5. It is supported in Firefox & Chrome (V8) and partially supported in Opera 9+ and Safari. It is not supported in Internet Explorer 6-9, or in the preview of Internet Explorer 10. const is going to be defined by ECMAScript 6, but with different semantics. Similar to variables declared with the let statement, constants declared with const will be block-scoped. We used it only for didactic purpose. If you want a full browser compatibility of this library, please replace all the const statements with the var statements.
- -

For more information, please see: Manipulating the browser history.

- -

See also

- - diff --git a/files/es/dom/manipulando_el_historial_del_navegador/index.html b/files/es/dom/manipulando_el_historial_del_navegador/index.html deleted file mode 100644 index eb2c0b3fdd..0000000000 --- a/files/es/dom/manipulando_el_historial_del_navegador/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -title: Manipulando el historial del navegador -slug: DOM/Manipulando_el_historial_del_navegador -tags: - - HTML5 - - historial - - para_revisar -translation_of: Web/API/History_API ---- -

El objeto DOM {{ domxref("window") }} proporciona acceso al historial del navegador a través del objeto {{ domxref("window.history", "history") }} . Este da acceso a métodos y propiedades útiles que permiten avanzar y retroceder a través del historial del usuario, así como --a partir de HTML5-- manipular el contenido del historial.

- -

Viajando a través del historial

- -

Retroceder y avanzar a través del historial del usuario utilizando los métodos back(), forward() y go().

- -

Moviéndose hacia adelante y hacia atrás

- -

Para moverte hacia atrás, solo debes hacer:

- -
window.history.back();
-
- -

Esto actuará exactamente como si el usuario hiciera clic en el botón "atrás" en la barra de herramientas del navegador.

- -

De manera similar, puedes moverte hacia adelante (como si el usuario hiciera clic en en el botón "adelante"), de esta forma:

- -
window.history.forward();
-
- -

Moverse a un punto específico del historial

- -

Puedes usar el método go() para cargar una página desde el historial de la sesión, identificada por su poscición relativa a la página actual  (Siendo la página actual, por supuesto, relativa al índice 0).

- -

Para moverse atrás una página (equivalente a llamar back()):

- -
window.history.go(-1);
-
- -

Para moverse una página hacia adelante, como si se llamara a forward():

- -
window.history.go(1);
-
- -

De manera similar, puedes avanzar 2 páginas pasando 2 y así sucesivamente.

- -

Otro uso para go() es el de actualizar la página ya sea pasando 0 como parámetro o ninguno.

- -
// Cada una de las siguientes
-// instrucciones actualiza la página
-window.history.go(0);
-window.history.go();
- -

Puedes obtener el número de páginas en la pila del historial consultando el valor de la propiedad length:

- -
var numeroDeEntradas = window.history.length;
-
- -
Nota: Internet Explorer admite el paso de cadenas de URL como parámetro para go(); esto no es estándar y no está implementado en Gecko.
- -

Añadiendo y modificando entradas del historial

- -

{{ gecko_minversion_header("2") }}

- -

HTML5 introduce los métodos history.pushState() y history.replaceState(), los cuales te permiten añadir y modificar entradas del historial, respectivamente. Estos métodos trabajan en conjunto con el evento {{ domxref("window.onpopstate") }}.

- -

Hacer uso de history.pushState() cambia el referer que es utilizado en la cabecera HTTP por los objetos XMLHttpRequest que hayan sido creados luego de cambiar el estado. El referer utilizará la URL del documento cuyo objeto window sea this al momento de la creación del objeto XMLHttpRequest.

- -

Ejemplo

- -

Supongamos que http://mozilla.org/foo.html ejecuta el siguiente JavaScript:

- -
var stateObj = { foo: "bar" };
-history.pushState(stateObj, "page 2", "bar.html");
-
- -

Esto causará que la barra de URL muestre http://mozilla.org/bar.html, pero no provocará que el navegador carge bar.html ni tampoco que verifique si bar.html existe.

- -

Supongamos ahora que el usuario navega hacia http://google.com, y despúes hace clic en Atrás.  En este punto, la barra de URL mostrará http://mozilla.org/bar.html, y la página tendrá un evento popstate cuyo state object contiene una copia de stateObj. La página en si se verá como foo.html, aunque la página podria modificar su contenido durante el evento popstate event.

- -

Si hacemos clic en "atrás" nuevamente, la URL cambiará a http://mozilla.org/foo.html, y el documento generará otro evento popstate event, esta vez con un state object nulo. Aquí también, ir atrás no cambia el contenido del documento con respecto al paso anterior, aunque el documento permite actualizar su contenido manualmente después de recibir el evento popstate.

- -

El método pushState()

- -

pushState() toma tres parámetros: un objeto estado, un título (el cual es normalmente ignorado) y (opcionalmente) una URL.  Vamos a examinar cada uno de estos tres parametros en más detalle:

- - - -

En un sentido, llamar pushState() es similar a asignar window.location = "#foo", en tanto que también se va a crear y activar otra entrada al historial asociada con el documento actual. Pero pushState() tiene las siguientes ventajas:

- - - -

Hay que tener en cuenta que pushState() nunca dispara un evento hashchange, incluso si la nueva URL difiere de la antigua URL únicamente en su hash.

- -

En un documento XUL, crea el elemento XUL específico.

- -

En otros documentos, crea un elemento con un namespace de URI nulo (null).

- -

El método replaceState()

- -

history.replaceState() trabaja exactamente igual a history.pushState() excepto que replaceState() modifica la entrada al historial actual en lugar de crear una nueva.

- -

replaceState() es particularmente útil si deseas actualizar el objeto estado o la URL del la actual entrada al historial en respuesta a alguna acción del usuario.

- -

El evento popstate

- -

Un evento popstate es dirigido a la ventana cada vez que la entrada al historial cambia. Si la entrada al historial es activada y fue creada por un llamado a pushState o afectada por una llamada a replaceState, la propiedad state del evento popstate contiene una copia del historial de entradas del objeto estado.

- -

Ver {{ domxref("window.onpopstate") }} para un ejemplo de uso.

- -

Leyendo el estado actual

- -

Cuando la página carga, debería tener un objeto de estado no nulo. Esto podría ocurrir, por ejemplo, si la página establece un object de estado (usando pushState() o replaceState()) y entonces el usuario reinicia su navegador. Cuando la página carga de nuevo, la página recibirá el evento onload, pero no el evento popstate.  Sin embargo, si lees la propiedad history.state, obtendrás el objeto estado que habrías tenido si se hubiera lanzado el evento apopstate.

- -

Puedes leer el estado del historial actual sin tener que esperar un evento popstate usando la propiedad  history.state de esta manera:

- -
var currentState = history.state;
- -

Ejemplos

- -

Para un ejemplo completo de un sitio AJAX, ver: Ejemplo de navegación AJAX.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstado Comentario
{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}{{Spec2('HTML WHATWG')}}No hay cambios desde {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}{{Spec2('HTML5 W3C')}}Definición inicial
- -

Compatibilidad entre navegadores

- -

{{ CompatibilityTable() }}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
replaceState, pushState5{{ CompatGeckoDesktop("2.0") }}1011.505.0
history.state18{{ CompatGeckoDesktop("2.0") }}1011.506.0
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
replaceState, pushState{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
history.state{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
- -

Ver también

- - diff --git a/files/es/dom/touch_events/index.html b/files/es/dom/touch_events/index.html deleted file mode 100644 index 02a4a4eacb..0000000000 --- a/files/es/dom/touch_events/index.html +++ /dev/null @@ -1,292 +0,0 @@ ---- -title: Eventos de toque -slug: DOM/Touch_events -tags: - - DOM - - Event - - Mobile - - NeedsMobileBrowserCompatTable - - eventos -translation_of: Web/API/Touch_events ---- -

Con el fin de proporcionar soporte de calidad para usuarios de interfaces táctiles, los eventos táctiles dan la posibilidad de interpretar la actividad de los dedos en pantallas táctiles o trackpads.

- -

Definiciones

- -
-
Superficie
-
La superficie sensible al tacto. Esta puede ser una pantalla o un trackpad.
-
- -
-
Punto de toque
-
Un punto de contacto con la superficie. Esto podría ser un dedo (o un codo, oreja, nariz, o lo que sea, pero probablemente un dedo) o un stylus.
-
- -

Interfaces

- -
-
{{ domxref("TouchEvent") }}
-
Representa un evento que ocurre cuando el estado de los toques en la superficie cambian.
-
{{ domxref("Touch") }}
-
Represeta un único punto de contacto entre el usuario y la superficie táctil.
-
{{ domxref("TouchList") }}
-
Representa varios puntos de toque: esto se utiliza cuando el usuario tiene, por ejemplo, varios dedos en la superficie al mismo tiempo.
-
{{ domxref("DocumentTouch") }}
-
Contiene varios métodos para crear objetos de {{domxref("Touch")}} y {{domxref("TouchList")}}.
-
- -

Ejemplo

- -

Este ejemplo muestra múltiples puntos de toques al mismo tiempo, permitiendo al usuario dibujar en un {{ HTMLElement("canvas") }} con más de un dedo a la vez. Esto funciona solamente en un navegador que soporte eventos táctiles.

- -
Nota: El texto de abajo usa el término "dedo" cuando describe el contacto con la superficie, pero esto podría ser, por supuesto, también un stylus u otro método de contacto.
- -

Configurando los eventos de manipulación

- -

Cuando la página carga, la función startup() mostrada a continuación es llamada por nuestro atributo onload del elemento {{ HTMLElement("body") }}.

- -
function startup() {
-  var el = document.getElementsByTagName("canvas")[0];
-  el.addEventListener("touchstart", handleStart, false);
-  el.addEventListener("touchend", handleEnd, false);
-  el.addEventListener("touchcancel", handleCancel, false);
-  el.addEventListener("touchleave", handleLeave, false);
-  el.addEventListener("touchmove", handleMove, false);
-}
-
- -

Esto simplemente configura todos los detectores de eventos para nuestro elemento {{ HTMLElement("canvas") }}, por lo que podremos manejar todos los eventos de toque cuando se produzcan.

- -

Seguimiento de nuevos toques

- -

Cuando un evento touchstart ocurre, indicando que un nuevo toque sobre la superficie se ha producido, la función handleStart() de a continuación es llamada.

- -
function handleStart(evt) {
-  evt.preventDefault();
-  var el = document.getElementsByTagName("canvas")[0];
-  var ctx = el.getContext("2d");
-  var touches = evt.changedTouches;
-
-  for (var i=0; i<touches.length; i++) {
-    ongoingTouches.push(touches[i]);
-    var color = colorForTouch(touches[i]);
-    ctx.fillStyle = color;
-    ctx.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4);
-  }
-}
-
- -

Esto llama a {{ domxref("event.preventDefault()") }} para mantener al navegador procesando el evento de toque (esto también previene que un evento del ratón o mouse sea entregado). Entonces obtenemos el contexto y lanzamos la lista de puntos de contacto cambiados de la propiedad {{ domxref("TouchEvent.changedTouches") }} del evento.

- -

Después de ello, iteramos sobre todos los objetos {{ domxref("Touch") }} de la lista, insertándolo en una matriz de puntos de toque activos y dibujando el punto de inicio como un pequeño rectángulo; estamos usando una línea de 4 pixeles de ancho, por tanto estamos dibujando un cuadrado de 4 por 4 píxeles como punto de consistencia.

- -

Dibujando mientras los eventos de toque se mueven

- -

Cada vez que uno o más dedos se mueven, un evento touchmove es entregado, resultando en una llamada a nuestra función handleMove(). Su responsabilidad en este ejemplo es actualizar la información de toque cacheada y dibujar una línea desde la posición previa a la posición actual en cada toque.

- -
function handleMove(evt) {
-  evt.preventDefault();
-  var el = document.getElementsByTagName("canvas")[0];
-  var ctx = el.getContext("2d");
-  var touches = evt.changedTouches;
-
-  ctx.lineWidth = 4;
-
-  for (var i=0; i<touches.length; i++) {
-    var color = colorForTouch(touches[i]);
-    var idx = ongoingTouchIndexById(touches[i].identifier);
-
-    ctx.fillStyle = color;
-    ctx.beginPath();
-    ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
-    ctx.lineTo(touches[i].pageX, touches[i].pageY);
-    ctx.closePath();
-    ctx.stroke();
-    ongoingTouches.splice(idx, 1, touches[i]);  // swap in the new touch record
-  }
-}
-
- -

Esto se repite también en los toques cambiados, pero mira en nuestra matriz de información de toques cacheados la información previa de cada toque con el fin de determinar los puntos de inicio para cada nuevo segmento de línea de toques que será dibujada. Esto se hace mirando cada propiedad de los toques de {{ domxref("Touch.identifier") }} . Esta propiedad es un único entero para cada toque, y sigue siendo consistente para cada evento durante la duración del contacto de cada dedo con la superficie.

- -

Esto nos permite conseguir las coordenadas de la posición previa de cada toque y usar el método apropiado de contexto para dibujar un segmento de línea uniendo dos posiciones a la vez.

- -

Después de dibujar la línea, llamamos a  Array.splice() para reemplazar la información previa sobre el punto de toque con la información actual de la matriz ongoingTouches.

- -

Manejando el final de un toque

- -

Cuando el usuario levanta un dedo de la superficie, un evento touchend es enviado.  De igual manera, si el dedo se desliza fuera de nuestro lienzo, obtenemos un evento touchleave. Manejamos ambos casos de la misma manera: llamando a la función handleEnd() de abajo. Su trabajo es dibujar el último segmento de línea para cada toque que ha finalizado y remueve el punto de toque de la lista de toques en marcha.

- -
function handleEnd(evt) {
-  evt.preventDefault();
-  var el = document.getElementsByTagName("canvas")[0];
-  var ctx = el.getContext("2d");
-  var touches = evt.changedTouches;
-
-  ctx.lineWidth = 4;
-
-  for (var i=0; i<touches.length; i++) {
-    var color = colorForTouch(touches[i]);
-    var idx = ongoingTouchIndexById(touches[i].identifier);
-
-    ctx.fillStyle = color;
-    ctx.beginPath();
-    ctx.moveTo(ongoingTouches[i].pageX, ongoingTouches[i].pageY);
-    ctx.lineTo(touches[i].pageX, touches[i].pageY);
-    ongoingTouches.splice(i, 1);  // remove it; we're done
-  }
-}
-
- -

Esto es muy similar a la función previa; la única diferencia real es que cuando llamamos a  Array.splice(), simplemente remueve la antigua entrada de la lista de toques en marcha, sin añadir la información actualizada. El resultado es que detenemos el seguimiento del punto de toque.

- -

Manejando los toques cancelados

- -

Si el dedo del usuario se equivoca en la Interfaz del navegador, o el toque necesita ser cancelado, el evento touchcancel es enviado, y llamamos a la función handleCancel() abajo.

- -
function handleCancel(evt) {
-  evt.preventDefault();
-  var touches = evt.changedTouches;
-
-  for (var i=0; i<touches.length; i++) {
-    ongoingTouches.splice(i, 1);  // remove it; we're done
-  }
-}
-
- -

Dado que la idea es cancelar el toque inmediatamente, simplemente lo removemos de la lista de toques en marcha sin dibujar un segmento de línea final.

- -

Funciones de conveniencia

- -

Este ejemplo usa dos funciones de convenience que deben mirarse brevemente para ayudar a que el resto del código sea más claro.

- -

Seleccionando un color para cada toque

- -

Con el fin de hacer que cada dibujo de toque se vea diferente, la función  colorForTouch() es usada para elegir un color basado en el identificador único de toque. Este identificador estará siempre entre 0 y un valor menos que el número de toques activos. Puesto que es muy improbable que alguna persona con más de 16 dedos use este demo, convertimos estos directamente en colores de escalas grises.

- -
function colorForTouch(touch) {
-  var id = touch.identifier;
-  id = id.toString(16); // make it a hex digit
-  return "#" + id + id + id;
-}
-
- -

El resultado de esta función es un string o cadena que puede ser usada cuando se llame a funciones {{ HTMLElement("canvas") }} para configurar los colores de dibujos. Por ejemplo, para un valor {{ domxref("Touch.identifier") }}  de 10, el resultado string o cadena es "#aaa".

- -

Encontrando un toque continuo

- -

La función ongoingTouchIndexById() abajo explora mediante la matriz ongoingTouches para encontrar el toque que coincida con el identificador dado, luego devuelve los índices de toques a la matriz.

- -
function ongoingTouchIndexById(idToFind) {
-  for (var i=0; i<ongoingTouches.length; i++) {
-    var id = ongoingTouches[i].identifier;
-
-    if (id == idToFind) {
-      return i;
-    }
-  }
-  return -1;    // not found
-}
-
- -

Ver ejemplo en vivo

- -

Consejos adicionales

- -

Esta sección provee consejos adicionales sobre como manejar los eventos de toques en tu aplicación web.

- -

Manejando los clics

- -

Ya que la llamada preventDefault() en un touchstart o el primer evento touchmove de una serie impide que los eventos correspondientes eventos del mouse o ratón se disparen, es común llamar a preventDefault() en touchmove en lugar de touchstart. De esta manera, los eventos del ratón pueden todavía ser disparados y cosas como enlaces siguen funcionando. Alternativamente, algunos frameworks tienen que referirse a eventos de toque como eventos de ratón para este mismo propósito. (Este ejemplo es muy simplificado y podria resultar en un extraño comportamiento. Solo se diseñó como guía).

- -
function onTouch(evt) {
-  evt.preventDefault();
-  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
-    return;
-
-  var newEvt = document.createEvent("MouseEvents");
-  var type = null;
-  var touch = null;
-  switch (event.type) {
-    case "touchstart": type = "mousedown"; touch = event.changedTouches[[0];
-    case "touchmove":  type = "mousemove"; touch = event.changedTouches[[0];
-    case "touchend":   type = "mouseup"; touch = event.changedTouches[0];
-  }
-  newEvt.initMouseEvent(type, true, true, event.originalTarget.ownerDocument.defaultView, 0,
-    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
-    evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
-  event.originalTarget.dispatchEvent(newEvt);
-}
-
- -

Llamando a preventDefault() solo en un segundo toque

- -

Una cosa para prevenir cosas como pinchZoom en una página es llamar a preventDefault() en el segundo toque de una serie. Este comportamiento no está bien definido en los eventos de toque, y resulta en diferentes comportamientos en diferentes navegadores (osea iOS evitará el zoom o acercamiento pero permitirá vista panorámica con ambos dedos. Android permitirá zoom o acercamiento pero no una panorámica. Opera and Firefox actualmente evita panorámica y zoom o acercamiento). Actualmente, no se recomienda depender de ningún comportamiento en particular en este caso, si no mas bien depender de una meta vista para evitar el zoom.

- -
-
- -

Compatibilidad de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatChrome("22.0") }}{{ CompatGeckoDesktop("18.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile("6.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Notas de Gecko

- -

La preferencia dom.w3c_touch_events.enabled puede ser utilizada para activar o desactivar el soporte de eventos de toque estándares; por defecto, están activados.

- -
-

{{ gecko_callout_heading("12.0") }}

- -

Antes de Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko no soportaba multi-toques; solo un toque cada vez era reportado.

-
- -
Note: Antes de Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko ofrecía una API de eventos de toque propietaria. Está API está obsoleta actualmente; deberías cambiar a esta."
diff --git a/files/es/dom_inspector/index.html b/files/es/dom_inspector/index.html deleted file mode 100644 index c6217195c6..0000000000 --- a/files/es/dom_inspector/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: DOM Inspector -slug: 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 ---- -

-

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/dragdrop/drag_and_drop/drag_and_drop_archivo/index.html b/files/es/dragdrop/drag_and_drop/drag_and_drop_archivo/index.html deleted file mode 100644 index 1225072b01..0000000000 --- a/files/es/dragdrop/drag_and_drop/drag_and_drop_archivo/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Drag & Drop archivo -slug: DragDrop/Drag_and_Drop/drag_and_drop_archivo -tags: - - Guía - - arrastra y suelta - - drag and drop - - drop zone - - zona de arrastre -translation_of: Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop ---- -

{{DefaultAPISidebar("HTML Drag and Drop API")}}

- -

Las interfaces Drag-and-Drop posibilitan arrastrar y soltar archivos en una página web. En este documento se describe cómo una aplicación puede aceptar uno, o más, archivos que son arrastrados desde el explorador de archivos de la plataforma y soltados en una página web.

- -

Los pasos principales para configurar Drag-and-drop son: 1) definir una "zona drop (drop zone), es decir, definir un elemento donde se podrá soltar el archivo; y 2) definir funciones para la gestión de los eventos {{event("drop")}} y {{event("dragover")}}. Estos pasos se describen a continuación, tambien se incluyen ejemplos snippets de código. El código fuente completo está disponible en el repositorio drag-and-drop de MDN (cualquier sugerencia o  tema que revisar es bienvenido).

- -

Nota: {{domxref("HTML_Drag_and_Drop_API","HTML drag and drop")}} define 2 diferentes APIs para soportar drag and drop de archivos. Una API es la interfaz {{domxref("DataTransfer")}} y la segunda API son las interfaces {{domxref("DataTransferItem")}} y {{domxref("DataTransferItemList")}}.  Este ejemplo ilustra el uso de ambas APIs (y no usa ninguna interfaz específica de Gecko).

- -

Define la zona "drop" [drop zone]

- -

Es necesario configurar un evento {{event("drop")}} en el objeto sobre el cual se soltará el objeto arrastrado. Este evento llamará una función global {{domxref("GlobalEventHandlers.ondrop","ondrop")}} que recibe los datos del objeto arrastrado. El siguiente código muestra cómo se hace con un elemento {{HTMLelement("div")}}:

- -
<div id="drop_zone" ondrop="dropHandler(event);">
-  <p>Arrastra y suelta uno o más archivos a esta zona ...</p>
-</div>
- -

Normalmente, una aplicación incluirá una función de gestión de eventos {{event("dragover")}} en el elemento objetivo del arrastre y esa función desactivará el comportamiento de arrastre por defecto del browser. Para añadir esta función necesita incluir una función global {{domxref("GlobalEventHandlers.ondragover","ondragover")}}:

- -
<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
-  <p>Arrastra y suelta uno o más archivos a esta zona ...</p>
-</div>
-
- -

Por último, puede que una aplicación quiera personalizar el estilo del elemento objetivo del arrastre para indicar visualmente que es una zona drag and drop. En este ejemplo, el elemento objetivo usa el siguiente estilo:

- -
#drop_zone {
-  border: 5px solid blue;
-  width:  200px;
-  height: 100px;
-}
-
- -
-

Fíjese que los eventos dragstart y dragend no son activados cuando se arrastra un archivo al browser desde el SO.

-
- -

Procesar la acción de soltar [drop]

- -

El evento {{event("drop")}} se ejecuta cuando el usuario suelta el o los archivos. En el siguiente manejador, si el navegador sorporta la interfaz {{domxref("DataTransferItemList")}} , el método {{domxref("DataTransferItem.getAsFile","getAsFile()")}} se utiliza para acceder cada fichero; de lo contrario la propiedad {{domxref("DataTransfer")}} de la interfaz {{domxref("DataTransfer.files","files")}} es usada para acceder cada archivo.

- -

El ejemplo siguiente muestra como escribir el nombre de cada fichero arrastrado en la consola. En una aplicación real, se querrá procesar un archivo usando {{domxref("File","File API")}}.

- -

Nótese que en este ejemplo, cualquier item arrastrado que no sea un archivo es ignorado.

- -
function dropHandler(ev) {
-  console.log('Fichero(s) arrastrados');
-
-  // Evitar el comportamiendo por defecto (Evitar que el fichero se abra/ejecute)
-  ev.preventDefault();
-
-  if (ev.dataTransfer.items) {
-    // Usar la interfaz DataTransferItemList para acceder a el/los archivos)
-    for (var i = 0; i < ev.dataTransfer.items.length; i++) {
-      // Si los elementos arrastrados no son ficheros, rechazarlos
-      if (ev.dataTransfer.items[i].kind === 'file') {
-        var file = ev.dataTransfer.items[i].getAsFile();
-        console.log('... file[' + i + '].name = ' + file.name);
-      }
-    }
-  } else {
-    // Usar la interfaz DataTransfer para acceder a el/los archivos
-    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
-      console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
-    }
-  }
-
-  // Pasar el evento a removeDragData para limpiar
-  removeDragData(ev)
-}
- -

Prevenir el comportamiento default de arrastrado en el browser 

- -

El siguiente evento {{event("dragover")}} llama a  {{domxref("Event.preventDefault","preventDefault()")}} para deshabilitar (turn off) la respuesta estandar drag-and-drop del browser.

- -
function dragOverHandler(ev) {
-  console.log('File(s) in drop zone');
-
-  // Prevent default behavior (Prevent file from being opened)
-  ev.preventDefault();
-}
-
- -

Limpieza (Cleanup)

- -

Typically, an application may want to perform some cleanup by deleting the file drag data. In this example, the drop event is passed along from drop handler to a custom function called removeDragData. If the browser supports the {{domxref("DataTransferItemList")}} interface, the list's {{domxref("DataTransferItemList.clear","clear()")}} method is used to delete the file drag data; otherwise the {{domxref("DataTransfer")}} object's {{domxref("DataTransfer.clearData","clearData()")}} method is used to delete the data.

- -
function removeDragData(ev) {
-  console.log('Removing drag data')
-
-  if (ev.dataTransfer.items) {
-    // Use DataTransferItemList interface to remove the drag data
-    ev.dataTransfer.items.clear();
-  } else {
-    // Use DataTransfer interface to remove the drag data
-    ev.dataTransfer.clearData();
-  }
-}
-
- -

See also

- - diff --git a/files/es/dragdrop/drag_and_drop/index.html b/files/es/dragdrop/drag_and_drop/index.html deleted file mode 100644 index 82e069ed48..0000000000 --- a/files/es/dragdrop/drag_and_drop/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Arrastrar y soltar -slug: DragDrop/Drag_and_Drop -tags: - - HTML5 - - XUL -translation_of: Web/API/HTML_Drag_and_Drop_API ---- -

Firefox y otras aplicaciones de Mozilla admiten una serie de características para gestionar la funcionalidad de arrastrar y soltar. Esto le permite al usuario hacer clic y mantener presionado el botón del ratón/mouse sobre un elemento, arrastrarlo a otra ubicación y soltarlo para colocar el elemento allí. Al puntero le seguirá una representación transparente de lo que se está arrastrando durante la operación. La ubicación de destino puede ser una aplicación diferente. Sitios web, extensiones y aplicaciones XUL pueden hacer uso de esta funcionalidad para personalizar los elementos que pueden ser arrastrados, evaluar la operación, así como especificar el lugar donde los elementos se pueden soltar.

-
Esta sección trata sobre la funcionalidad de arrastrar y soltar en Firefox 3.5 (Gecko 1.9.1) y versiones posteriores. Consulta la documentación de la API anterior para Firefox 3.0 y versiones anteriores.
- - -

Elementos básicos de arrastrar y soltar

-

Cuando comienza una operación de arrastre, se puede proporcionar una serie de datos:

- -

Mozilla y Firefox admiten una serie de características que no se encuentran en el modelo estándar de arrastrar y soltar. Estas te permiten arrastrar elementos múltiples y arrastrar datos que no son cadenas. Para obtener más información, consulta Arrastrar y soltar múltiples elementos .

-

Para obtener una lista de tipos de datos comunes utilizados para arrastrar y soltar, consulta Tipos de operaciones de arrastre recomendados.

-

Está disponible una referencia rápida para los procedimientos recomendados en la operación de arrastre de los siguientes tipos de elementos:

- -

Consulta DataTransfer para tener una referencia al objeto DataTransfer.

- - -

Eventos de arrastre

-

Se utilizan una serie de eventos que se ejecutan durante las diversas etapas de la operación de arrastre y colocación. Ten en cuenta que se ejecutan sólo los eventos de arrastre, los eventos del ratón/mouse como mousemove no se ejecutan durante una operación de arrastre.

-

La propiedad dataTransfer de todos los eventos de arrastre contiene datos sobre la operación de arrastre y colocación.

- - -
-
dragstart
-
Se ejecuta sobre un elemento cuando se inicia una operación de arrastre. El usuario está solicitando arrastrar el elemento al que dispara el evento dragstart. Durante este evento, un proceso de escucha ajustará cierto tipo de información como los datos de la operación de arrastre y la imagen que se asocia con ella. Para obtener más información al respecto, consulta Inicio de una operación de arrastre .
-
dragenter
-
Se dispara cuando el ratón/mouse se mueve primero sobre un elemento, mientras está teniendo lugar una operación de arrastre. Un proceso de escucha de este evento debe indicar si se permite una operación de arrastre sobre esta ubicación. Si no hay procesos de escucha o éstos no realizan ninguna operación, entonces no se permite, de manera predeterminada, una operación de arrastre. Este es también el evento al que escuchar si deseas proporcionar información acerca de que se permite una operación de arrastre, como, por ejemplo, mostrar un resaltado o un marcador de inserción. Para obtener más información al respecto, consulta Especificación de destinos de colocación .
-
dragover
-
Este evento se activa cuando el ratón/mouse se mueve sobre un elemento cuando está teniendo lugar una operación de arrastre. Gran parte del tiempo, la operación que tiene lugar durante un proceso de escucha será la misma que el evento dragenter. Para obtener más información al respecto, consulta Especificación de destinos de colocación.
-
dragleave
-
Este evento se activa cuando el ratón/mouse sale de un elemento mientras que está teniendo lugar una operación de arrastre. Los procesos de escucha deben eliminar cualquier resaltado o marcador de inserción que usan para la información sobre el proceso de arrastre.
-
drag
-
Este evento se activa en el origen del arrastre, es decir, el elemento donde dragstart fue disparado, durante la operación de arrastre.
-
drop
-
El evento se dispara sobre el elemento en el que se produjo la colocación al finalizar la operación de arrastre. Un proceso de escucha se encargará de recuperar los datos que se arrastran e insertarlos en la ubicación de la colocación. Este evento sólo se activará si se desea disponer de la funcionalidad de soltar. No se activará si el usuario cancela la operación de arrastre, por ejemplo, pulsando la tecla Escape, o si se liberó el botón del ratón/mouse mientras que éste no estaba sobre un destino de colocación válido. Para más información sobre esto, consulta Realizar una operación de colocación.
-
dragend
-
El origen del arrastre recibirá un evento dragend cuando la operación se haya completado, tanto si tuvo éxito como si no. Consulta Finalizar una operación de arrastre si deseas más información.
-
- - -
{{ HTML5ArticleTOC () }}
diff --git a/files/es/dragdrop/index.html b/files/es/dragdrop/index.html deleted file mode 100644 index 292b860888..0000000000 --- a/files/es/dragdrop/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: DragDrop -slug: DragDrop -tags: - - NeedsTranslation - - TopicStub -translation_of: Web/API/HTML_Drag_and_Drop_API -translation_of_original: DragDrop ---- -

 

-

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

diff --git a/files/es/dragdrop/recommended_drag_types/index.html b/files/es/dragdrop/recommended_drag_types/index.html deleted file mode 100644 index daad516a44..0000000000 --- a/files/es/dragdrop/recommended_drag_types/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Tipos de Drag recomendados -slug: DragDrop/Recommended_Drag_Types -translation_of: Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types ---- -

A continuación se describe la mejor practica para utilizar los datos a ser arrastrado.

-

Arrastramdo Texto

-

Al arrastrar el texto, utilice el texto / texto normal. Los datos deben ser la cadena de arrastre. Por ejemplo:

-
event.dataTransfer.setData("text/plain", "This is text to drag")
-
-

Arrastrar texto en cuadros de texto y las selecciones de las páginas web se realiza de forma automática, por lo que no es necesario para manejar dragging.

-

Se recomienda que siempre se agrega datos del tipo  text/plain  como un mensaje para las aplicaciones o los destinos que no soportan otros tipos, a menos que no hay alternativa de texto lógico. Siempre agregue el tipo de texto sin formato pasado, ya que es el menos específico.

-

En códigos más viejo, encontrara text/unicode o el tipo Text.Estos equivalen text/plain,que guardara y recibia los datos del texto plano en ese lugar.

- -

Los enlaces deben incluir los datos de los dos tipos, el primero debe ser  URL utilizando el tipo text/uri-list,y el segundo es URL utilizando el tipo text/plain. Ambos tipos deben utilizar los mismos datos, la URL del enlace. Por ejemplo:

-
var dt = event.dataTransfer;
-dt.setData("text/uri-list", "http://www.mozilla.org");
-dt.setData("text/plain", "http://www.mozilla.org");
-
-

Es constumbre, establecer el tipo text/plain de ultimo, , ya que es menos específico que el tipo de URI.

-

Note que el tipo de URL uri-list es con una "i", no una "L"

-

Note that the URL type is uri-list with an 'I', not with an 'L'.

-

To drag multiple links, you can also separate each link with a linebreak. A line that begins with a number sign (#) is a comment and should not be considered a valid URL. You can use a comment to indicate the purpose of a link, or to hold the title associated with a link. The text/plain version of the drag data should include all links but should not include the comments.

-

For example:

-
http://www.mozilla.org
-#A second link
-http://www.xulplanet.com
-
-

This sample text/uri-list data contains two links and a comment.

-

When retrieving a dropped link, you should ensure you handle the case where multiple links may have been dragged, and any comments that appear in the data. For convenience, the special type URL may be used to refer to the first valid link within the data for the text/uri-list type. You should not add data using the URL type; attempting to do so will just set the value of the text/uri-list type instead.

-
var url = event.dataTransfer.getData("URL");
-
-

You may also see data using the text/x-moz-url type which is a Mozilla specific type. If it appears, it should be used before the text/uri-list type. It holds the URL of the link followed by the title of the link, separated by a linebreak. For example:

-
http://www.mozilla.org
-Mozilla
-http://www.xulplanet.com
-XUL Planet
-
-

Dragging HTML and XML

-

HTML content may use the text/html type. The data for this type should be the serialized HTML to drag. For instance, it would be suitable to set the data value for this type to the value of the innerHTML property of an element.

-

XML content may use the text/xml type, but you should ensure that the data value is well-formed XML.

-

You may also include a plain text representation of the HTML or XML data using the text/plain type. The data should be just the text and should not include any of the source tags or attributes. For instance:

-
var dt = event.dataTransfer;
-dt.setData("text/html", "Hello there, <strong>stranger</strong>");
-dt.setData("text/plain", "Hello there, stranger");
-
-

Dragging Files

-

A local file is dragged using the application/x-moz-file type with a data value that is an nsIFile object. Non-privileged web pages are not able to retrieve or modify data of this type. Because a file is not a string, you must use the mozSetDataAt method to assign the data. Similarly, when retrieving the data, you must use the mozGetDataAt method.

-
event.dataTransfer.mozSetDataAt("application/x-moz-file", file, 0);
-
-

If possible, you may also include the file URL of the file using both the text/uri-list and/or text/plain types. These types should be added last so that the more specific application/x-moz-file type has higher priority.

-

Multiple files will be received during a drop as mutliple items in the data transfer. See Dragging and Dropping Multiple Items for more details about this.

-

The following example shows how to create an area for receiving dropped files:

-
<listbox ondragenter="return checkDrag(event)"
-         ondragover="return checkDrag(event)"
-         ondrop="doDrop(event)"/>
-
-<script>
-function checkDrag(event)
-{
-  return event.dataTransfer.types.contains("application/x-moz-file");
-}
-
-function doDrop(event)
-{
-  var file = event.dataTransfer.mozGetDataAt("application/x-moz-file", 0);
-  if (file instanceof Components.interfaces.nsIFile)
-    event.currentTarget.appendItem(file.leafName);
-}
-</script>
-
-

In this example, the event returns false only if the data transfer contains the application/x-moz-file type. During the drop event, the data associated with the file type is retrieved, and the filename of the file is added to the listbox. Note that the instanceof operator is used here as the mozGetDataAt method will return an nsISupports that needs to be checked and converted into an nsIFile. This is also a good extra check in case someone made a mistake and added a non-file for this type.

-

Dragging Images

-

Direct image dragging is not commonly done. In fact, Mozilla does not support direct image dragging on Mac or Linux platforms. Instead, images are usually dragged only by their URLs. To do this, use the text/uri-list type as with other URL links. The data should be the URL of the image or a data URL if the image is not stored on a web site or disk. For more information about data URLs, see the data URL scheme.

-

As with other links, the data for the text/plain type should also contain the URL. However, a data URL is not usually as useful in a text context, so you may wish to exclude the text/plain data in this situation.

-

In chrome or other privileged code, you may also use the image/jpeg, image/png or image/gif types, depending on the type of image. The data should be an object which implements the nsIInputStream interface. When this stream is read, it should provide the data bits for the image, as if the image was a file of that type.

-

You should also include the application/x-moz-file type if the image is located on disk. In fact, this a common way in which image files are dragged.

-

It is important to set the data in the right order, from most specific to least specific. The image type such as image/jpeg should come first, followed by the application/x-moz-file type. Next, you should set the text/uri-list data and finally the text/plain data. For example:

-
var dt = event.dataTransfer;
-dt.mozSetDataAt("image/png", stream, 0);
-dt.mozSetDataAt("application/x-moz-file", file, 0);
-dt.setData("text/uri-list", imageurl);
-dt.setData("text/plain", imageurl);
-
-

Note that the mozGetDataAt method is used for non-text data. As some contexts may only include some of these types, it is important to check which type is made available when receiving dropped images.

-

Dragging Nodes

-

Nodes and elements in a document may be dragged using the application/x-moz-node type. This data for the type should be a DOM node. This allows the drop target to receive the actual node where the drag was started from. Note that callers from a different domain will not be able to access the node even when it has been dropped.

-

You should always include a plain text alternative for the node.

-

Dragging Custom Data

-

You can also use other types that you make up for custom purposes. You should strive to always include a plain text alternative unless that object being dragged is specific to a particular site or application. In this case, the custom type ensures that the data cannot be dropped elsewhere.

-

Dragging files to an operating system folder

-

There are cases in which you may want to add a file to an existing drag event session, and you may also want to write the file to disk when the drop operation happens over a folder in the operating system when your code receives notification of the target folder's location. This only works in extensions (or other privileged code) and the data flavor "application/moz-file-promise" should be used. The following sample offers an overview of this advanced case:

-
// currentEvent is a given existing drag operation event
-
-currentEvent.dataTransfer.setData("text/x-moz-url", URL);
-currentEvent.dataTransfer.setData("application/x-moz-file-promise-url", URL);
-currentEvent.dataTransfer.setData("application/x-moz-file-promise-filename", leafName);
-currentEvent.dataTransfer.mozSetDataAt('application/x-moz-file-promise',
-                  new dataProvider(success,error),
-                  0, Components.interfaces.nsISupports);
-
-function dataProvider(){}
-
-dataProvider.prototype = {
-  QueryInterface : function(iid) {
-    if (iid.equals(Components.interfaces.nsIFlavorDataProvider)
-                  || iid.equals(Components.interfaces.nsISupports))
-      return this;
-    throw Components.results.NS_NOINTERFACE;
-  },
-  getFlavorData : function(aTransferable, aFlavor, aData, aDataLen) {
-    if (aFlavor == 'application/x-moz-file-promise') {
-
-       var urlPrimitive = {};
-       var dataSize = {};
-
-       aTransferable.getTransferData('application/x-moz-file-promise-url', urlPrimitive, dataSize);
-       var url = new String(urlPrimitive.value.QueryInterface(Components.interfaces.nsISupportsString));
-       console.log("URL file orignal is = " + url);
-
-       var namePrimitive = {};
-       aTransferable.getTransferData('application/x-moz-file-promise-filename', namePrimitive, dataSize);
-       var name = new String(namePrimitive.value.QueryInterface(Components.interfaces.nsISupportsString));
-
-       console.log("target filename is = " + name);
-
-       var dirPrimitive = {};
-       aTransferable.getTransferData('application/x-moz-file-promise-dir', dirPrimitive, dataSize);
-       var dir = dirPrimitive.value.QueryInterface(Components.interfaces.nsILocalFile);
-
-       console.log("target folder is = " + dir.path);
-
-       var file = Cc['@mozilla.org/file/local;1'].createInstance(Components.interfaces.nsILocalFile);
-       file.initWithPath(dir.path);
-       file.appendRelativePath(name);
-
-       console.log("output final path is =" + file.path);
-
-       // now you can write or copy the file yourself...
-    }
-  }
-}
-
-

{{ languages( { "ja": "Ja/DragDrop/Recommended_Drag_Types" } ) }}

diff --git "a/files/es/estructura_de_directorios_de_c\303\263digo_fuente_de_mozilla/index.html" "b/files/es/estructura_de_directorios_de_c\303\263digo_fuente_de_mozilla/index.html" deleted file mode 100644 index 64997a3c50..0000000000 --- "a/files/es/estructura_de_directorios_de_c\303\263digo_fuente_de_mozilla/index.html" +++ /dev/null @@ -1,698 +0,0 @@ ---- -title: Estructura de directorios de código fuente de Mozilla -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/etiquetas_audio_y_video_en_firefox/index.html b/files/es/etiquetas_audio_y_video_en_firefox/index.html deleted file mode 100644 index b89a3a028e..0000000000 --- a/files/es/etiquetas_audio_y_video_en_firefox/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Etiquetas audio y video en Firefox -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/extensiones/actualizaci\303\263n_de_extensiones_para_firefox_4/index.html" "b/files/es/extensiones/actualizaci\303\263n_de_extensiones_para_firefox_4/index.html" deleted file mode 100644 index cdc9521967..0000000000 --- "a/files/es/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: Extensiones/Actualización_de_extensiones_para_Firefox_4 -tags: - - Agregados - - Complementos - - Firefox 4 - - Gecko 2.0 - - extensiones - - para_revisar ---- -

{{ fx_minversion_header(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/faq_incrustando_mozilla/index.html b/files/es/faq_incrustando_mozilla/index.html deleted file mode 100644 index 28f70b65ee..0000000000 --- a/files/es/faq_incrustando_mozilla/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: FAQ Incrustando Mozilla -slug: FAQ_Incrustando_Mozilla -tags: - - Incrustando_Mozilla - - Preguntas_frecuentes_sobre_incrustación_en_Mozilla - - Todas_las_Categorías ---- -

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/firefox_1.5_para_desarrolladores/index.html b/files/es/firefox_1.5_para_desarrolladores/index.html deleted file mode 100644 index 2372dd0f81..0000000000 --- a/files/es/firefox_1.5_para_desarrolladores/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Firefox 1.5 para Desarrolladores -slug: Firefox_1.5_para_Desarrolladores -tags: - - CSS - - Complementos - - DOM - - Desarrollo_Web - - Estándares_Web - - HTML - - JavaScript - - RDF - - SVG - - Servicios_Web_XML - - Todas_las_Categorías - - XML - - XSLT - - XUL - - extensiones -translation_of: Mozilla/Firefox/Releases/1.5 ---- -
{{FirefoxSidebar}}

Firefox 1.5

- -

Se ha lanzado Firefox 1.5 y ya se puede descargar descarga. Este programa esta basado en el motor de Gecko 1.8, esta nueva versión del navegador mejora su ya magnífico soporte a los estándares web y proporciona nuevas capacidades que hacen posible una nueva generación de aplicaciones web. Algunas de las nuevas características de Firefox 1.5 son: soporte de CSS2 y CSS3 mejorado, APIs para programar gráficos en 2D por medio de <canvas>, o gráficos vectoriales con SVG 1.1, XForms y eventos XML, así como muchas mejoras en DHTML, JavaScript y DOM.

- -

Firefox 1.5 ya puede descargarse en el siguiente link: - http://www.mozilla.com/firefox/

- -

Herramientas para desarrolladores

- -

Firefox 1.5 dispone de diversas herramientas y extensiones de gran utilidad para los desarrolladores.

- - - -

Nota: Algunas extensiones no soportan actualmente Firefox 1.5, y serán automáticamente desactivadas.

- -

Descripción

- -

Algunas de las nuevas características en Firefox 1.5:

- -

Desarrolladores de sitios web y aplicaciones

- -
-
Introducción a SVG en HTML
-
Aprenda cómo usar SVG en sus páginas XHTML y a manipular imágenes con JavaScript y CSS de forma similar a como haría un script para XHTML. Vea también SVG en Firefox 1.5 para saber más sobre el estado y los problemas de la implementación de SVG en Firefox 1.5.
-
- -
-
Dibujar gráficos con Canvas 
-
Aprenda acerca de la nueva etiqueta <canvas> y cómo dibujar gráficos y otros objetos en Firefox.
-
- -
-
Columnas con CSS-3 
-
Aprenda sobre el soporte a la disposición automática de texto en multi-columnas según lo propuesto en CSS3.
-
- -
-
El cache de Firefox 1.5 
-
Aprenda acerca de bfcache y cómo aumenta la velocidad de la navegación en páginas ya visitadas.
-
- -

XUL y Desarrolladores de Extensión

- -
-
Creando una extensión 
-
Este tutorial te llevará a través de los pasos necesarios para construir una extensión para Firefox muy básica. Ver también otro tutorial en la base de conocimiento MozillaZine, el cual demuestra las nuevas características del Administrador de Extensión en 1.5, que hace la creación de una nueva extensión incluso mas fácil.
-
- -
-
XPCNativeWrapper 
-
XPCNativeWrapper es una forma de envolver un objeto cuyo acceso es seguro desde un código privilegiado. Puede ser usado en todas las versiones de Firefox, a pesar que su funcionamiento ha cambiado con la versión 1.5 (Gecko 1.8).
-
- -
-
Preferencias del Sistema 
-
Aprenda acerca de los nuevos widgets, que te permiten crear ventanas de Opciones mas fácilmente y usando menos código JavaScript.
-
- -
-
Caracteres Internacionales en XUL JavaScript 
-
Ahora los archivos XUL JavaScript pueden contener caracteres no-ASCII.
-
- -
-
Cambios en el API tree 
-
Las interfaces para acceder a los elementos <tree> han cambiado.
-
- -
-
Cambios en XUL en Firefox 1.5 
-
Un resumen de los cambios en Xul. Vea también Adaptando las aplicaciones XUL a Firefox 1.5.
-
- -
-
Cambios referentes a la red 
-
 
-
- - - -

Nuevas características para el usuario final

- -

Experiencia de usuario

- - - -

Seguridad y privacidad

- - - -

Soporte a los estándares Web

- -

Firefox es lider de la industria en el soporte a los estandares Web con constantes implementaciones multiplataforma para:

- - - -

Firefox 1.5 soporta: los siguientes protocolos para transporte de datos (HTTP, FTP, SSL, TLS, y otros), caracteres multilingües (Unicode), múltiples formatos gráficos (GIF, JPEG, PNG, SVG, y otros) y la última versión del lenguaje para scripts más popular del mundo, JavaScript 1.6.

- -

Cambios desde Firefox 1.0

- -

Muchos cambios han sido introducido en Firefox desde su lanzamiento el 9 de noviembre de 2004. Firefox ha sido mejorado con muchas nuevas características y correciones de bugs. Las release-notes de Deer Park y Firefox son unas excelentes fuentes la información sobre los cambios en cada lanzamiento de Firefox.

- - diff --git a/files/es/firefox_19_para_desarrolladores/index.html b/files/es/firefox_19_para_desarrolladores/index.html deleted file mode 100644 index bf38aea264..0000000000 --- a/files/es/firefox_19_para_desarrolladores/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Firefox 19 para Desarrolladores -slug: Firefox_19_para_desarrolladores -translation_of: Mozilla/Firefox/Releases/19 ---- -
{{FirefoxSidebar}}
- -

-

Quieres ayudar a documentar Firefox 19? Visita la lista de bugs que necesitan ser revisados e inicia!

-

- -

Cambios para desarrolladores

- -

JavaScript

- - - -

CSS

- - - -

DOM

- - - -

XForms

- -

Support for XForms has been removed in Firefox 19.

- -

Changes for add-on and Mozilla developers

- -
-

Note: A key change in Firefox 19 is that nsresult is now strongly typed. This will help make it easier to detect bugs that are caused by mishandling of return values, but may cause existing code to break if it's making incorrect assumptions in this regard.

-
- - - -

See also

- - - -

Older versions

- -

{{Firefox_for_developers('18')}}

diff --git a/files/es/firefox_2_para_desarrolladores/index.html b/files/es/firefox_2_para_desarrolladores/index.html deleted file mode 100644 index 54da671995..0000000000 --- a/files/es/firefox_2_para_desarrolladores/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: Firefox 2 para desarrolladores -slug: Firefox_2_para_desarrolladores -tags: - - CSS - - Complementos - - DOM - - Desarrollo_Web - - Estándares_Web - - HTML - - JavaScript - - RDF - - SVG - - Servicios_Web_XML - - Todas_las_Categorías - - XML - - XSLT - - XUL - - extensiones -translation_of: Mozilla/Firefox/Releases/2 ---- -
{{FirefoxSidebar}}

Nuevas características para desarrolladores en Firefox 2

- -

Firefox 2 aporta gran cantidad de funcionalidades nuevas, este artículo proporciona enlaces que describen estas nuevas capacidades.

- -

Para desarrolladores de sitios y aplicaciones web.

- -
-
MicroResúmenes (en)
-
Son breves recopilaciones actualizables de la información más importante en una página Web. Pueden ser proporcionados por los desarrolladores del sitio o por terceros. Cuando se añade a marcadores una página con esta funcionalidad, los usuarios pueden escoger que se muestre este microresúmen en vez del típico título estático.
-
- -
-
Cómo crear un Microresumen
-
Tutorial sobre cómo crear un generador de microresúmenes.
-
- -
-
Marcado XML en los microresúmenes
-
Una guía de referencia sobre el marcado XML usado para crear microresúmenes.
-
- -
-
Soporte OpenSearch
-
Firefox 2 admite el formato de búsqueda OpenSearch.
-
- -
-
Creación de plugins MozSearch
-
Firefox 2 soporta MozSearch, un plugin de búsqueda basado en OpenSearch, pero previsto sólo para uso interno.
-
- -
-
Permitir sugerencias en los plugins de búsqueda
-
Cómo hacer que su plugin MozSearch ofrezca sugerencias de búsqueda en una ventana emergente cuando usamos la barra de búsqueda.
-
- -
-
Novedades en JavaScript 1.7
-
Firefox 2 soporta JavaScript 1.7, que incluye nuevas características como let, asignación desestructurada, generadores e iteradores, y "array comprehensions".
-
- -
-
WHATWG Sesiones del lado cliente y el almacenamiento continuo (Almacenamiento DOM)
-
Las sesiones del lado cliente y el almacenamiento continuo permiten que las aplicaciones web puedan almacenar datos estructurados en el lado del cliente.
-
- -
-
SVG en Firefox
-
Firefox 2 mejora el soporte a Gráficos Vectoriales Escalables (SVG), implementando el elemento <textPath> y aumentando el número de atributos soportados.
-
- -
-
Control de la corrección ortográfica en formularios HTML
-
Firefox 2 incluye soporte para la revisión ortográfica en línea de los campos y áreas de texto. Este artículo describe cómo escribir HTML para activar o desactivar la revisión ortográfica en los elementos del formulario de manera individual.
-
- -
-
Seguridad en Firefox 2
-
Firefox 2 cambia los protocolos de seguridad que están activos por defecto.
-
- -

Para desarrolladores XUL y de extensiones

- -
-
API de restauración de sesión
-
Aporta métodos para poder guardar y restaurar entre sesiones en Firefox.
-
- -
-
API de acceso a canales
-
API que permite al desarrollador tener acceso y parsear canales Atom y RSS.
-
- -
-
SAX
-
API de parseo basado en eventos XML.
-
- -
-
Instalación de motores de búsqueda desde páginas web
-
Un código JavaScript puede indicarle a Firefox cómo instalar el plugin de un nuevo motor de búsqueda escrito en formato Sherlock u OpenSearch.
-
- -
-
Añadir datos para la protección anti-phishing
-
Es posible aumentar la protección anti-phishing de Firefox añadiendo datos adicionales del proveedor para un sistema de navegación seguro.
-
- -
-
Añadir lectores de canales a Firefox
-
Puedes añadir más lectores de canales a Firefox, ya sean webs o aplicaciones.
-
- -
-
Almacenamiento
-
Firefox 2 presenta mozStorage, una arquitectura de base de datos basada en sqlite.
-
- -
-
Cambios del tema en Firefox 2
-
Comenta los cambios necesarios para actualizar temas existentes para que funcionen en Firefox 2.
-
- -

Nuevas características para usuarios finales

- -

Firefox 2.0 proporciona una versión mejorada de la limpia interfaz que ofrecía en versiones anteriores. Con mejoras de seguridad para que tu experiencia en línea sea más segura y práctica que nunca.

- -

Experiencia de usuario

- - - -

Seguridad y privacidad

- - - -

Vea también

- - - -

Categorías

- -

Interwiki links

- -

{{ languages( { "ca": "ca/Firefox_2_per_a_desenvolupadors", "en": "en/Firefox_2_for_developers", "fr": "fr/Firefox_2_pour_les_d\u00e9veloppeurs", "it": "it/Firefox_2.0_per_Sviluppatori", "ja": "ja/Firefox_2_for_developers", "ko": "ko/Firefox_2_for_developers", "pl": "pl/Firefox_2_dla_programist\u00f3w", "pt": "pt/Firefox_2_para_desenvolvedores", "zh-tw": "zh_tw/Firefox_2_\u6280\u8853\u6587\u4ef6" } ) }}

diff --git a/files/es/firefox_3.5_para_desarrolladores/index.html b/files/es/firefox_3.5_para_desarrolladores/index.html deleted file mode 100644 index 5043206fe8..0000000000 --- a/files/es/firefox_3.5_para_desarrolladores/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: Firefox 3.5 para desarrolladores -slug: Firefox_3.5_para_desarrolladores -translation_of: Mozilla/Firefox/Releases/3.5 ---- -
{{FirefoxSidebar}}

Firefox 3.5 implementa nuevas funcionalidades, además de agregar y mejorar el funcionamiento de una amplia variedad de estándares web. Este artículo ofrece una extensa lista con enlaces a artículos que explican estas grandes mejoras.

- -

Nuevas funcionalidades para desarrolladores en Firefox 3.5

- -

Para desarrolladores de sitios y aplicaciones web

- -

Funciones de HTML 5

- -
-
Usar audio y video en Firefox
-
Firefox 3.5 implementa los elementos  audio y video de HTML 5.
-
Recursos sin conexión en Firefox
-
Firefox 3.5 implementa de forma completa la especificación para recursos sin conexión de HTML 5.
-
Arrastrar y soltar (Drag and drop)
-
La API para arrastrar y soltar de HTML 5 permite que el usuario pueda arrastrar y soltar objetos entre sitios web. También permite una API más simple para el uso por parte de las extensiones o aplicaciones basadas en la plataforma Mozilla.
-
- -

Nuevas características de CSS implementadas

- -
-
Tipografías descargables
-
La nueva regla {{cssxref("@font-face")}} permite a las páginas web disponer de tipografías descargables, para que los sitios web puedan ser visualizados como el autor lo pretende.
-
Pedidos de CSS según el medio
-
Firefox 3.5 implementa esta característica que permite al autor del sitio web tener más control sobre el archivo CSS que cada dispositivo va a recibir según las características del mismo.
-
{{cssxref(":before")}} y {{cssxref(":after")}} actualizados a CSS 2.1
-
Los pseudo-elementos :before y :after han sido actualizados para implementar por completo las características de CSS 2.1, añadiendo la posibilidad de usar position, float, list-style-* y algunas propiedades de display.
-
opacity
-
La extensión al CSS -moz-opacity fue eliminada para implementar la propiedad estandar opacity.
-
text-shadow
-
La propiedad text-shadow, que permite especificar efectos de sombra para textos y decoraciones del texto, está implementada.
-
word-wrap
-
Esta propiedad permite especificar cuando las líneas deben o no ser cortadas entre palabras para prevenir el overflow cuando una línea que no puede ser cortada es demasiado larga para entrar en una sola línea.
-
-moz-box-shadow
-
-moz-border-image
-
-moz-column-rule
-
-moz-column-rule-width
-
-moz-column-rule-style
-
-moz-column-rule-color
-
Firefox 3.5 añade la posibilidad de usar estas extensiones al CSS de Mozilla.
-
The -moz-nativehyperlinktext color value
-
Este nuevo valor del color representa el predefinido por el sistema del usuario para los hipervínculos.
-
Las nuevas propiedades -moz-window-shadow y -moz-system-metric(mac-graphite-theme)
-
Estas nuevas propiedades de CSS fueron añadidas para facilitar la creación de temas.
-
Nuevos valores para -moz-appearance
-
Los valores -moz-win-glass y -moz-mac-unified-toolbar se agregaron a -moz-appearance.
-
Usar transformaciones CSS
-
Firefox 3.5 implementa las transformaciones CSS.  Mirá -moz-transform y -moz-transform-origin para saber más detalles.
-
:nth-child
-
:nth-last-child
-
:nth-of-type
-
:nth-last-of-type
-
:first-of-type
-
:last-of-type
-
:only-of-type
-
Estos selectores pueden ser usados en Firefox 3.5.
-
- -

Nuevas funcionalidades del DOM

- -
-
localStorage
-
Firefox 3.5 implementa el uso de la propiedad localStorage del Web Storage, que permite que las aplicaciones web guarden datos en la computadora del cliente.
-
Usar DOM workers
-
Firefox 3.5 implementa los trabajadores (workers) del DOM lo que permite el multi-threading en las aplicaciones web.
-
Usar geolocalización
-
Firefox 3.5 implementa la API de geolocalización, que permite que las aplicaciones web obtengan información sobre la ubicación actual del usuario si unu proveedor de ese servicio está instalado y habilitado.
-
Usar JSON en Firefox
-
Posibilidad de usar JSON en el DOM.
-
Localizar elementos del DOM con selectores
-
El API de selectores permite pedirle a un documento que localice los elementos que coincidan con una regla seleccionada.
-
El objeto NodeIterator
-
El objeto NodeIterator permite recorrer la lista de nodos en un árbol del DOM.
-
El evento MozAfterPaint
-
Este nuevo evento del DOM es lanzado después de actualizar partes de una ventana.
-
El evento MozMousePixelScroll
-
Este nuevo evento del DOM permite detectar el desplazamiento con la rueda del ratón/mouse en lugar de los eventos basados en la línea de desplazamiento.
-
- -

Nuevas funcionalidades JavaScript

- -
-
Nuevo en JavaScript 1.8.1
-
Una introducción a todos los cambios de JavaScript 1.8.1.
-
Object.getPrototypeOf()
-
Este nuevo método retorna el prototipo de un objeto especificado.
-
Uso de JSON nativo
-
Firefox 3.5 tiene soporte para JSON nativo.
-
Nuevos métodos trim en el objeto String
-
El objeto String tiene ahora los métodos trim(), trimLeft(), y trimRight() .
-
- -

Networking

- -
-
Controles de acceso cross-site para HTTP
-
En Firefox 3.5, es ahora posible en las peticiones HTTP, incluyendo aquellas hechas por XMLHttpRequest, trabajar entre dominios si el servidor lo permite.
-
Eventos de progreso para XMLHttpRequest
-
Ahora se ofrecen eventos de progreso para que las extensiones puedan monitorizar el progreso de las peticiones.
-
Soporte XMLHttpRequest síncrono mejorado
-
DOM Timeout y Input Events son ahora soportados durante un XMLHttpRequest síncrono.
-
Control de prefetch de DNS
-
Firefox 3.5 ofrece prefetch de DNS, por el que resuelve nombres de dominio con anticipación para links incluidos en la página actual, para ahorrar tiempo cuando los enlaces son realmente clickados. Este artículo describe cómo puedes optimizar tu sitio web para desactivar el prefetch, o ajustar cómo opera el prefetch.
-
- -

Nuevas funcionalidades Canvas

- -
-
API de texto HTML 5 para elementos canvas
-
Los elementos Canvas ahora soportan la API de texto HTML 5.
-
Efectos de sombra en un canvas
-
Los efectos de sombra de Canvas son ahora soportados.
-
createImageData()
-
El método canvas createImageData() es ahora soportado, permitiendo al código crear específicamente un objeto ImageData en lugar de necesitar que sea hecho automáticamente. Esto puede mejorar el rendimiento de otros métodos ImageData evitando que deban crear el objeto.
-
Atributo moz-opaque
-
Añadido el atributo DOM moz-opaque, que permite al canvas saber si la translucencia será un factor. Si el canvas sabe que no hay translucencia, el rendimiento de pintado puede ser optimizado.
-
- -

Nuevas funcionalidades SVG

- -
-
Aplicar efectos SVG al contenido HTML
-
Ahora puedes aplicar efectos SVG a contenido HTML y XHTML; este artículo describe cómo.
-
- -

Otras nuevas funcionalidades

- -
-
Corrección de color ICC en Firefox
-
Firefox 3.5 ahora soporta corrección de color ICC para imágenes etiquetadas.
-
El atributo defer es ahora soportado en elementos script
-
Este atributo indica al navegador que puede escoger continuar parseando y renderizando la página sin esperar a que el script termine de ejecutarse.
-
- -

Otras mejoras

- - - -

For XUL and add-on developers

- -

If you're an extension developer, you should start by reading Updating extensions for Firefox 3.5, which offers a helpful overview of what changes may affect your extension.

- -

New components and functionality

- -
-
Supporting private browsing mode
-
Firefox 3.5 offers Private Browsing mode, which doesn't record the user's activities.  Extensions may support private browsing following the guidelines offered by this article.
-
Security changes in Firefox 3.5
-
This article covers security-related changes in Firefox 3.5.
-
Theme changes in Firefox 3.5
-
This article covers theme-related changes in Firefox 3.5.
-
Monitoring WiFi access points
-
Code with UniversalXPConnect privileges can now monitor the list of available access points, getting information on their SSIDs, MAC addresses, and signal strength.  This can be used in tandem with Geolocation to offer WiFi-based location service.
-
- -

Notable changes and improvements

- - - -

New features for end users

- -

User experience

- -
-
Location aware browsing
-
If you choose, you may allow Firefox 3.5 to share information about your current location with web sites.  Firefox 3.5 can use information about the network you're connected to to share your location. Of course, it asks for your permission before doing so, to ensure your privacy.
-
Open audio and video support
-
Firefox 3.5 supports embedded video and audio using the open Ogg format, as well as WAV for audio. No plugins, no confusing error messages about needing to install something or other that turns out not to be available on your platform anyway.
-
Local data storage
-
Web applications can now use Web Storage's local storage capabilities to store data on your computer.  This is great for anything from site preferences to more complex data.
-
- -

Security and privacy

- -
-
Private Browsing
-
Need to use someone else's computer? Switch on Private Browsing mode and nothing will be recorded about your session, including cookies, history, and any other potentially private information.
-
Better privacy controls
-
The Privacy preference pane has been completely redesigned to offer users more control over their private information. Users can choose to retain or discard anything including history information, cookies, downloads, and form field information.  In addition, users can specify whether or not to include history and/or bookmarks in the location bar's automated suggestions, so you can keep private web addresses from popping up unexpectedly while typing in the location bar.
-
- -

Performance

- -
-
Faster JavaScript performance
-
JavaScript, the "J" in "AJAX," is sped up dramatically in Firefox 3.5 with the new TraceMonkey JavaScript engine.  Web applications are much faster than in Firefox 3.
-
Faster page rendering
-
Web content draws faster in Firefox 3.5, thanks to technologies such as "speculative parsing." Your users don't need to know what it means, other than "it makes things draw faster."
-
- -

See also

- - diff --git a/files/es/firefox_3_para_desarrolladores/index.html b/files/es/firefox_3_para_desarrolladores/index.html deleted file mode 100644 index 1456bfb969..0000000000 --- a/files/es/firefox_3_para_desarrolladores/index.html +++ /dev/null @@ -1,283 +0,0 @@ ---- -title: Firefox 3 para desarrolladores -slug: Firefox_3_para_desarrolladores -tags: - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3 ---- -
{{FirefoxSidebar}}

Si eres un desarrollador que intenta ponerse al día con todas las nuevas características de Firefox 3, este es el lugar perfecto para empezar. Este artículo proporciona una lista de nuevos artículos que tratan sobre las características añadidas a Firefox 3. Aunque no cubre necesariamente todos los pequeños cambios, te ayudará a conocer mejor las mejoras más importantes.

- -

 

- -

Características nuevas para desarrolladores en Firefox 3

- -

Para desarrolladores de sitios y aplicaciones web

- -
-
Actualizar aplicaciones web para Firefox 3
-
Información sobre los cambios que se podrían necesitar para realizar un sitio o aplicación web y sacarle mayor ventaja a las nuevas características de Firefox 3.
-
- -
-
Eventos online y offline
-
Firefox 3 implementa los eventos conectado y desconectado definidos por WHATWG, que permiten a aplicaciones y extensiones descubrir si una conexión activa de internet es disponible, además de detectar cuando hay conexión o desconexión.
-
- -
-
Manipuladores de protocolo web
-
Ahora se puede registrar una aplicación web como manipulador de protocolo con el método navigator.registerProtocolHandler().
-
- -
-
Dibujar texto usando canvas
-
Ahora se puede dibujar texto en canvas con una API no estándar implementada por Firefox 3.
-
- -
-
Gestión de transformaciones en canvas
-
Firefox 3 administra los métodos transform() y setTransform() en canvases (lienzos).
-
- -
-
El uso de microformatos
-
Firefox 3 tiene APIs que permiten trabajar con microformatos.
-
- -

;Hojas de estilo alternativas :Firefox 3 implementa modelos alternativos de hojas de estilo API de objeto CSS.

- -
-
Eventos arrastrar y soltar
-
Firefox 3 implementa nuevos eventos que se envían al nodo de origen cuando la operación de arrastre comienza y termina.
-
- -
-
Gestión del foco en HTML
-
Se han implementado los atributos activeElement y hasFocus de la nueva especificación HTML 5.
-
- -
-
Recursos en modo desconectado en Firefox
-
Firefox 3 permite ahora que las aplicaciones web soliciten que recursos puedan ser puestos en cache para ser ejecutados en modo desconectado.
-
- -
-
Mejoras CSS en Firefox 3
-
Firefox 3 ofrece un número de mejoras en su implementación de CSS.
-
- -
-
Mejoras DOM en Firefox 3
-
Firefox 3 ofrece mejoras en la implementación de DOM, incluyendo la gestión de varias extensiones de Internet Explorer al DOM.
-
- -
-
Implementación de JavaScript 1.8
-
Firefox 3 ofrece JavaScript 1.8.
-
- -
-
Implementación de EXSLT
-
Firefox 3 permite la utilización de una parte importante de las extensiones EXSLT y XSLT.
-
- -
-
Mejoras SVG en Firefox 3
-
La implementación a SVG en Firefox 3 ha sido mejorada de manera significante, con muchos nuevos filtros, elementos, atributos y otras mejoras.
-
- -
-
Gráficos PNG animados
-
Firefox 3 administra las imágenes animadas en formato PNG (APNG).
-
- -

Para desarrolladores de XUL y de extensiones

- -
Cambios y mejoras notables
- -
-
Actualizar extensiones para Firefox 3
-
Una guía con las cosas que hay que hacer para poner al día una extensión para que trabaje con Firefox 3.
-
- -
-
Mejoras XUL en Firefox 3
-
Firefox 3 ofrece varios nuevos elementos XUL, incluyendo escaleras deslizables, selectores de hora y fecha, y botones de incremento.
-
- -
-
Plantillas en Firefox 3
-
Las plantillas han sido notablemente mejoradas en Firefox 3. Las mejoras más importantes es la posibilidad de usar procesadores de solicitud personalizada para permitir el uso de otras fuentes de datos que RDF.
-
- -
-
Asegurando las actualizaciones
-
Para proporcionar actualizaciones más seguras de los complementos a los usuarios, ahora los complementos requieren proporcionar un método seguro para obtener las actualizaciones antes de ser instaladas. Los complementos alojados en AMO lo proporcionan automáticamente.
-
- -
-
Migrar y usar el catálogo
-
Un artículo sobre como migrar una extensión existente para utilizar el API de catálogo.
-
- -
-
Mejoras en el gestor de descargas en Firefox 3
-
El administrador de descargas de Firefox 3 contiene nuevas y mejoradas APIs, incluyendo la implementación de múltiples escuchas de progreso.
-
- -
-
Uso de nsILoginManager
-
El administrador de contraseñas ha sido reemplazado por el nuevo Login Manager.
-
- -
-
Integración de los vínculos XBL
-
Ya es posible utilizar el protocolo URL data: para integrar directamente los vínculos XBL en lugar de tener que colocarlos en un archivo XML por separado.
-
- -
-
Traducir las descripciones de las extensiones
-
Firefox 3 ofrece un nuevo método localizando add-on metadata. Esto permite que los detalles localizados estén disponibles tan pronto como los add-on han sido descargados, al igual que cuando el add-on sea desinstalado.
-
- -
-
Localización y plurales
-
Firefox 3 dispone del nuevo módulo PluralForm, el cual sirve para ayudar a poner correctamente en plural las palabras según el idioma local.
-
- -
-
Cambios en los temas de Firefox 3
-
Notas e información para quienes quisiera crear temas para Firefox 3.
-
- -
Nuevos componentes y funcionalidades
- -
-
Biblioteca FUEL
-
FUEL sirve para facilitar la productividad de los desarrolladores de extensiones, reduciendo algunas formalidades de XPCOM y colocando algunas ideas "modernas" en JavaScript.
-
- -
-
Catálogo
-
Las APIS del historial y de los marcadores han sido remplazadas completamente por la nueva API del Catálogo.
-
- -
-
Servicio idle
-
Firefox 3 ofrece la nueva interfaz {{ Interface("nsIIdleService") }}, la cual permite a las extensiones determinar cuánto tiempo ha pasado desde que el usuario pulso una tecla o movió el ratón por última vez.
-
- -
-
El convertidor ZIP
-
La nueva interfaz nsIZipWriter permite a las extensiones crear archivos ZIP.
-
- -
-
Zoom a página completa
-
Firefox 3 mejora la experiencia de usuario ofreciendo zoom a página completa además de zoom de solo texto.
-
- -
-
El colector de ciclo XPCOM
-
El código XPCOM puede beneficiarse del colector de ciclo, el cual ayuda a asegurar que la memoria no utilizada es liberada y evitar fugas de memoria.
-
- -
-
El administrador de hilos
-
Firefox 3 proporciona la nueva interfaz {{ Interface("nsIThreadManager") }}, así como otras nuevas interfaces para hilos y eventos de hilos, los cuales proporcionan una manera apropiada de crear y administrar hilos en tu código.
-
- -
-
Módulos JavaScript
-
Firefox 3 ofrece un nuevo mecanismo de código compartido que te permite crear módulos facilmente en JavaScript que pueden ser cargados por extensiones y aplicaciones para su uso, muy parecido a las librerías compartidas.
-
- -
-
La interfaz nsIJSON
-
Firefox 3 ofrece la nueva interface {{ Interface("nsIJSON") }}, which offers high-performance encoding and decoding of JSON strings.
-
- -
-
La interfaz nsIParentalControlsService
-
Ahora Firefox 3 implementa las características del control parental de Microsoft Windows Vista, y permite al cñodigo interactuar con él.
-
- -
-
Usar las preferencias de contenido
-
Firefox 3 incluye un nuevo servicio para obtener y fijar configuraciones especificas para cada sitio web que pueden usar tanto las extensiones como el código principal para llevar un registro de las preferencias de usuarios en sitios individuales.
-
- -
-
Vigilancia de plugins
-
Está disponible un nuevo componente del sistema de plugins para controlar el tiempo que les toma a los plugins (como por ejemplo: Macromedia Flash) ejecutar sus llamadas.
-
- -

Bugs ya solucionados

- -
-
Bugs importantes solucionados en Firefox 3
-
- -

Nuevas características para el usuario final

- -

Mejoras para el usuario

- - - -

Seguridad y privacidad

- - - -

Rendimiento

- - - -

Lecturas relacionadas

- - - -

 

- -

{{ languages( { "en": "en/Firefox_3_for_developers", "fr": "fr/Firefox_3_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_3_for_developers", "ko": "ko/Firefox_3_for_developers", "pl": "pl/Firefox_3_dla_programist\u00f3w", "pt": "pt/Firefox_3_para_desenvolvedores", "zh-tw": "zh_tw/Firefox_3_for_developers" } ) }}

diff --git a/files/es/firefox_addons_developer_guide/introduction_to_extensions/index.html b/files/es/firefox_addons_developer_guide/introduction_to_extensions/index.html deleted file mode 100644 index 1261f4d562..0000000000 --- a/files/es/firefox_addons_developer_guide/introduction_to_extensions/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: 'Capítulo 1: Introducción a las extensiones.' -slug: Firefox_addons_developer_guide/Introduction_to_Extensions ---- -
- {{ Draft() }}
-

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

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

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

-

Introducción

-

Si estás leyendo esta guía, probablemente has utilizado firefox antes. Tal vez la primera vez que viste firefox, es posible que te hayas sorprendido al ver que tiene una estructurara mucho más simple que otros navegadores con muchas funciones, como Opera o Safari.

-

¿Qué características son consideradas estándar para los navegadores en estos días? Tal vez cosas como controles de pestañas, movimientos del ratón, barras de herramientas y botones, un lector de feed, integración con una variedad de aplicaciones web, o herramientas sofisticadas para ayudar al diseño web. Pero nosotros no teníamos la intención de crear un navegador todo-en uno que pueda satisfacer a todos

-

En cambio, Firefox puede soportar estas características a través de las extensiones. El núcleo del navegador se limita a las funciones básicas, algo que puede hacer sentirse cómodo a un principiante, pero los usuarios que quieren algo más pueden instalar las extensiones.

-

Acerca de las extensiones

-

Administrador de complementos

-

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

-

-

El Administrador de complementos se encarga de las siguientes tareas:

- -

Características del entorno de desarrollo

-

Inicialmente, no había suficiente documentación disponible, y los desarrolladores de extensiones quedaron en gran medida a su suerte; sin embargo, ahora hay un cuantioso depósito de conocimiento.

-

Debido a que Firefox y sus extensiones están diseñadas para soportar multiples idiomas, excelentes extensiones vienen de todo el mundo, y pueden ser localizadas rápidamente por cualquier persona que esté interesada.

-

Ésto facilita el uso y el desarrollo de extensiones; este hecho, combinado con la popularidad creciente de firefox, ha creado un búcle de realimentación positiva, y un crecimiento explosivo del número de usuarios  y desarrolladores de las extensiones. Hay ahora más de 7000 extensiones y temas publicados en la página web de complementos de firefox. (https://addons.mozilla.org).

-

¿Qué podemos hacer con las extensiones?

-

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

-

Extensiones solo con una función.

-

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

-

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

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

Feature enhancing extensions

-

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

-

These extensions enhance features that already exist in Firefox.

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

Web application integration extensions

-

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

-

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

-

Forecastfox.png

-

New feature extensions

-

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

-

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

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

Application level extensions

-

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

-

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

-

Firebug.gif

-

One-trick gag extensions

-

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

-

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

-

Shiitake Mushroom (1).png

-

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

-

Table 1: Advanced customization methods for Firefox

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

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

- 		-

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

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

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

- 		-

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

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

Vamos a construir una extensión

-

La tabla 1 muestra varias opciones de personalización disponibles para un usuario en firefox. Los usuarios tienen opciones de personalicación Flexibles, usando CSS en las hojas de estilo del usuario y javaScript/DOM en los script del usuario.

-

En adición a CSS y Javascript, las extensiones pueden tomar ventajas de las tecnologías XUL y XPCOM para características más sofisticadas. Temas, los cuales pueden alterar la apariencia de firefox, son un tipo de complemento.

-

Para crear una extension, necesitas una idea y sólo un poco de abilidad programando. Los siguientes capítulos explicaremos con detalles las tecnicas para escribir extensiones.

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

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

diff --git a/files/es/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html b/files/es/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html deleted file mode 100644 index 92188c9df8..0000000000 --- a/files/es/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: 'Chapter 2: Technologies used in developing extensions' -slug: Firefox_addons_developer_guide/Technologies_used_in_developing_extensions ---- -

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

-

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

-

Antes de sumergirse en una explicación, rápidamente nos introduciremos en las tecnologías utilizadas para desarrollar extensiones en firefox. Nosotros también conoceremos los conocimientos míminos que se necesitan para desarrollar una extensión para firefox.

-

Tecnologías utilizadas para desarrollar extensiones para Firefox

-

Firefox y sus extensiones están ambos basados en el desarrollo con tecnologías ampliamente usadas en la web. Su estructura es similar a la de HTML dynamico usado en algunas páginas webs, or el HTML de aplicaciones usado en Windows. Si tienes experiencia desarrollando HTML dinamico, Tú probablemente lo encontrarás relativamente fácil desarrollar una extensión para Firefox.

-

El rol de cada tecnología

-

Firefox está construido en gran parte con cuatro tecnologías: XUL, CSS, Javascript y XPCOM. Las extensiones también están construidas usando esas cuatros tecnologías.

-

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

-

-

En addition a esas tecnologías, el desarrollo de una extensión requerira que aprendas sobre como otorgar priviligos para vence priviligios de restricciones de seguridad en el código que escribistes, y como insertar tu codigo dentro de Firefox UI. Estos errores son discutidos en el Capítulo 5.

-

Conocimientos básicos requeridos

-

En el interest de brevedad, Vamos a omitir explicaciones de tecnologías, y nos enfocaremos en la introducción de nuevas tecnologías que necesitarás entender para desarrollar para Firefox. Asumimos que tu tienes esperiencia desarrollando con HTML dinamico, así como de los temas a continuación.
- Para más información sobre estas tecnologías, por favor consulte otras fuentes.

- -

XML: A text-based structural language

-

 XML, siglas en inglés de eXtensible Markup Language ('lenguaje de marcas extensible'), es un lenguaje de marcas desarrollado por el World Wide Web Consortium (W3C). Deriva del lenguaje SGML y permite definir la gramática de lenguajes específicos (de la misma manera que HTML es a su vez un lenguaje definido por SGML) para estructurar documentos grandes. A diferencia de otros lenguajes XML da soporte a bases de datos, siendo útil cuando varias aplicaciones se deben comunicar entre sí o integrar información. (Bases de datos Silberschatz).

-

Listing 1: XML syntax

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

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

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

An element can include other elements as well as text in its content, and all information is structured as a tree. As in all trees, elements can have children (elements contained within them) and parents (elements that contain them). Attributes can also be added to opening tags, each with a value.

-

As the "extensible" part of XML implies, elements from various XML-based languages such as XHTML and SVG can be interspersed in one another as a means to extend the language. All elements can carry a "namespace URI" identifier, which is unique for each language. For example, even though XHTML and SVG have elements with the same name, these can be distinguished. The namespace URI for XHTML is "http://www.w3.org/1999/xhtml" ; for SVG is it "http://www.w3.org/2000/svg".

-

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

-

Like XML, Cascading Style Sheets (CSS) is a technical specification established by the W3C; it is a style-description language defining the display of data marked up in XML and HTML. As shown in Listing 1, it has an extremely simple syntax. By separating the structure of the data, expressed through HTML or XML, and the display style, indicated by CSS, data can be reused better than it is when structural and stylistic markup are both embedded in HTML.

-

There are three CSS specifications (Level 1 through Level 3), with progressively powerful features. The Gecko rendering engine handles nearly all of CSS Level 2 and some of CSS Level 3.

-

Listing 2: CSS code sample

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

JavaScript: The world's most misunderstood language

-

JavaScript is a scripting language first developed in the 1990s, at which time it was created as a way to add dynamic features to web pages. Because it was often used at first to display pop-up windows, marching text in status bars, or in other ways that made web pages less useful to users, the language acquired a reputation as having little practical use and lacking in functionality.

-

Also, because a series of security holes were discovered in JavaScript and the compatible technology JScript, there was an initial reluctance to use JavaScript at all.

-

Nevertheless, the rise of web services like Google Maps, which used JavaScript and asynchronous communications, created an awareness of a set of technologies nicknamed AJAX (Asynchronous JavaScript and XML); that plus the advent of a number of libraries that paper over implementation differences between different web browsers has more recently led to a re-evaluation of JavaScript as a programming language.

-

JavaScript is a prototype-based object-oriented language, and as shown in Listing 3, also permits independent class definitions. It does not have strict typing like Java, making it extremely flexible and giving it qualities that in some senses could be considered similar to Lisp.

-

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

-

Listing 3: An example of a class definition in JavaScript

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

DOM: An API for manipulating XML documents

-

The Document Object Model (DOM) is a technical standard promulgated by the W3C, and is an API for manipulating the contents of XML documents as objects. In earlier dynamic HTML approaches, the typical method was to use the innerHTML property of the HTML element node to dynamically change the contents of the HTML document by manipulating strings, but using the DOM makes it possible to manipulate XML documents in a way that better matches JavaScript's object-oriented nature.

-

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

-

There are a number of levels to the DOM with different levels of functionality. Gecko supports nearly all of DOM Level 2 and some of DOM Level 3.

-

With the DOM, the contents of an XML document are handled as a "DOM tree," a collection of element nodes and other nodes. Listing 4 shows an example that deletes the second child element of the element with the "toolbar" id, adds a new button element as a substitute, and sets a label attribute.

-

We do not go into the details of the various APIs in the DOM. To learn more about the DOM, please take a look at the MDC documentation.

-

Listing 4: An example manipulation using the DOM

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

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

diff --git a/files/es/formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio/index.html b/files/es/formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio/index.html deleted file mode 100644 index 478990b1a1..0000000000 --- a/files/es/formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Formatos multimedia admitidos por los elementos de audio y video -slug: Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio -tags: - - Firefox - - HTML5 - - Multimedia - - formatos de audio - - formatos multimedia - - para_revisar ---- -

{{ 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/fragmentos_de_c\303\263digo/index.html" "b/files/es/fragmentos_de_c\303\263digo/index.html" deleted file mode 100644 index 89f586d8f3..0000000000 --- "a/files/es/fragmentos_de_c\303\263digo/index.html" +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Fragmentos de código -slug: Fragmentos_de_código -tags: - - Add-ons - - extensiones - - 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/funciones/index.html b/files/es/funciones/index.html deleted file mode 100644 index 8fdf449542..0000000000 --- a/files/es/funciones/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Funciones -slug: Funciones -tags: - - Funciones ---- -

Aquí necesitamos una lista completa de Funciones de XPCOM, algo parecido a la lista de Interfaces. -

diff --git a/files/es/games/herramients/asm.js/index.html b/files/es/games/herramients/asm.js/index.html deleted file mode 100644 index bd41ed70a3..0000000000 --- a/files/es/games/herramients/asm.js/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: asm.js -slug: Games/Herramients/asm.js -tags: - - JavaScript - - asm.js -translation_of: Games/Tools/asm.js ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -
-

Asm.js es un subconjunto de JavaScript que es altamente optimizable. Este artículo analiza exactamente lo que está permitido en el subconjunto asm.js, las mejoras que confiere, donde y cómo puedo utilizarlo, y otros recursos y ejemplos.

-
- -

¿Qué es asm.js exactamente?

- -

Es un subconjunto muy pequeño y estricto de JavaScript que solo permite cosas como `while`, `if`, números, funciones con nombres de nivel superior y otras construcciones simples. No permite objetos, cadenas, cierres y básicamente cualquier cosa que requiera una asignación de la pila. El código asm.js se parece al lenguaje de programación "C" en muchos aspectos, pero es JavaScript completamente válido que se ejecuta en todos los motores actuales. Impulsa los motores JS para optimizar este tipo de código, y le da a los compiladores como Emscripten una definición clara de qué tipo de código generar. A continuación, mostraremos cómo es un código asm.js y explicaremos cómo le ayuda y cómo puede usarlo.

- -

Este subconjunto de JavaScript ya está altamente optimizado en muchos motores de JavaScript que utilizan técnicas de compilación Just-In-Time (JIT) sofisticadas. Sin embargo, al definir un estándar tan explícito, podemos trabajar en la optimización de este tipo de código aún más y obtener el máximo rendimiento posible. Facilita la colaboración en múltiples motores JS porque es fácil de comparar. La idea es que este tipo de código se ejecute muy rápido en cada motor, y si no lo hace, es que hay un error y es un claro mensaje de que los motores deben optimizarse.

- -

También facilita la tarea de las personas que escriben compiladores que desean generar código de alto rendimiento en la web. Pueden consultar las especificaciones de asm.js para saber que se ejecutará rápidamente si se adhieren a los patrones de asm.js. Emscripten, un compilador de C/C++ a JavaScript, genera código asm.js para que funcione con un rendimiento casi nativo en varios navegadores.

- -

Además, si un motor elige reconocer especialmente código asm.js, se pueden realizar aún más optimizaciones. Firefox es el único navegador que hace esto ahora.

- -

Resumen del lenguaje asm.js

- -

asm.js es un lenguaje de programación intermedio. Tiene una tasa de rendimiento muy predecible porque está limitada a un subconjunto extremadamente restringido de JavaScript que proporciona solo enteros, números en coma flotante, aritmética, llamadas a funciones y accesos de pila de tipo estricto. Las características de rendimiento son más cercanas al código nativo que las de JavaScript estándar. El uso del subconjunto de JavaScript asm.js ya es compatible con los principales navegadores web. Como asm.js se ejecuta en un navegador, depende en gran medida del navegador y del hardware.

diff --git a/files/es/games/herramients/index.html b/files/es/games/herramients/index.html deleted file mode 100644 index e09812b07d..0000000000 --- a/files/es/games/herramients/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Herramientas para desarrolladores de juegos -slug: Games/Herramients -tags: - - NeedsContent - - NeedsTranslation - - aplicaciones - - juegos -translation_of: Games/Tools ---- -
{{GamesSidebar}}
-

En esta pagina puedes encontrar enlaces a nuestros articulos de desarrollo de juegos, que enventualmente apuenta a cubrir frameworks, compiladores y herramientas de depuracion.

-
-
-
- asm.js
-
- asm.js es una subconjunto muy limitado del lenguaje Javascript que puede ser en gran medida optimizado y correr en modo compilador ahead-of-time (AOT) para un mejor rendimiento que el rendimiento tipico de JavaScript. Este es, por supuesto, bueno para juegos.
-
- Emscripten
-
-

Un compilador LLVM a JavaScript; con Emscripten, tu puedes compilar C++ y otros lenguajes que se pueden compilar a LLVM y luego a JavaScript de alto rendimiento. Es una buena herramiente para portar aplicaciones a la Web! Aqui hay un util tutorial sobre Emscripten disponible en la wiki. Estamos mirando cubrir Emscripten en su propia seccion de MDN.

-
-
- Gecko profiler
-
- Gecko profiler es una extension que te permite perfilar tu codigo para ayudar donde tienes errores de rendimiento, asi puedes hacer que tu juego corra a velocidad maxima.
-
- Motores de juegos y herramientas
-
- Una lista de motores, plantillas y tecnologias utiles para los desarrolladores de juegos.
-
- Shumway
-
- Shumway es un renderizador para Adobe Flash construido completamente con JavaScript, WebGL, entre otros, haciendo una brecha entre Flash y los estandares Web. Este articulo muestra como hacer uso de Shumway y como contribuir arreglos y errores al proyecto.
-
- Cadena de herramientas para desarrollar y depurar juegos
-
- Como difieren de depurar una Web app normal? Que herramientas especializadas estan disponibles? Un lote de esto va a ser cubierto por Will en herramientas, pero aqui te vamos a proveer una cadena de herramientas practicas para depurar juegos con links a las cosas de Will: -
    -
  • Basic tools overview
    • -
  • Shader editor
    • -
  • Performance tools (still in production, estimated early 2014)
    • -
-
-
diff --git a/files/es/games/introduccion/index.html b/files/es/games/introduccion/index.html deleted file mode 100644 index b19ea1a61e..0000000000 --- a/files/es/games/introduccion/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Introduccion para desarrollo de juegos para la Web -slug: Games/Introduccion -tags: - - Firefox OS - - juegos - - moviles -translation_of: Games/Introduction ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -
La Web rapidamente se ha convertido en una plataforma viable no solo para crear impresionantes juegos de alta calidad, sino también para distruibuirlos.
- -
- -
El rango de juegos que pueden ser creados está a la par tanto de los juegos de escritorio como de SO nativos (Android, iOS). Con tecnologias Web modernas y un navegador reciente es totalmente posible hacer juegos de primera categoria para la Web. Y no estamos hablando sobre simples juegos de cartas o juegos sociales multijugadores que en tiempos anteriores se podian hacer con Flash®. Estamos hablando sobre juegos 3D shooters de accion, RPGs, y más. Gracias a las masivas mejoras de rendimiento en JavaScript  con tecnologia de compilación just-in-time y nuevas APIs, se pueden construir juegos que pueden correr en el navegador (o en dispositivos HTML5 como Firefox OS) sin problemas.
- -

La plataforma de juegos HTML5

- -

Puedes pensar en la Web como una mejor opción de plataforma para desarrollar tu juego. Como nos gusta decir, "la Web es la plataforma". Hechemos un vistazo al nucleo de la plataforma Web:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FuncionTecnología
AudioWeb Audio API
GraficosWebGL (OpenGL ES 2.0)
EntradaTouch events, Gamepad API, device sensors, WebRTC, Full Screen API, Pointer Lock API
LenguajeJavaScript (o C/C++ usando Emscripten para compilar a JavaScript)
RedesWebRTC and/or WebSockets
AlmacenamientoIndexedDB o la "nube"
WebHTML, CSS, SVG, Social API (y mucho más!)
- -

El caso de Exito

- -
Como un desarrollador de juegos, de forma individual o como un gran studio de juegos, tu quieres por que tiene sentido apuntar a la Web como tu práximo proyecto de juego. Veamos como la Web puede ayudarte.
- -
- -
    -
  1. -
    El alcance de la Web es enorme; está en todas partes. Los juegos construidos con HTML5 funcionan en smartphones, tablets, PCs y Smart TVs.
    -
    2. -
  2. Se mejoran la comercialización y la detección. No estás limitado a promocionar tu aplicación en la tienda de aplicaciones de otra persona. En su lugar, puede anunciar y promover su juego en toda la Web, así como en otros medios, aprovechando la inherente capacidad de enlace y capacidad de compartir de la Web para llegar a nuevos clientes.
    3. -
  3. Usted tiene control donde importa: Pagos. Usted no tiene que entregar más del 30% de sus ingresos a otra persona sólo porque su juego está en su ecosistema. En su lugar, cargue lo que quiera y utilice cualquier servicio de procesamiento de pagos que le guste.
    4. -
  4. Una vez más con más control, puedes actualizar tu juego cuando quieras. No hay que esperar sin aliento para la aprobación, mientras que alguien oculto dentro de otra empresa decide si su solución de error crítico se enviará hoy o mañana.
    5. -
  5. ¡Controla tus análisis! En lugar de confiar en otra persona para tomar todas las decisiones sobre qué analítica necesita, puede recoger su propia o elegir la tercera parte que más le guste para recopilar información sobre sus ventas y el alcance de su juego.
    6. -
  6. Usted consigue manejar su relación del cliente más de cerca, en su propia manera. No más tener comentarios de los clientes filtrados a través de los mecanismos limitados de una tienda de aplicaciones. Involucrarse con sus clientes de la manera que desee, sin un intermediario.
    7. -
  7. Sus jugadores pueden jugar su juego en cualquier lugar, en cualquier momento. Debido a que la Web es omnipresente, sus clientes pueden comprobar el estado de su juego en sus teléfonos, tabletas, computadoras portátiles domésticas, sus escritorios de trabajo o cualquier otra cosa.
    8. -
- -

Tecnologías web para desarrolladores de juegos Edit

- -

Para la gente de tecnología, vamos a cavar en las API que la Web aporta a la mesa que atienden a los desarrolladores de juegos. Esta es una lista exhaustiva para darle una muestra de lo que la Web puede hacer por usted:

- -
-
-
API de pantalla completa
-
Esta sencilla API permite que su juego se haga cargo de toda la pantalla, sumergiendo al jugador en acción.
-
API de Gamepad
-
Si desea que sus usuarios puedan usar gamepads u otros controladores de juego para trabajar su juego, necesitará esta API.
-
HTML y CSS
-
Juntas, estas dos tecnologías le permiten construir, diseñar y diseñar la interfaz de usuario de su juego. Parte de HTML es el elemento <canvas> , que proporciona una forma de hacer gráficos 2D.
-
Audio HTML
-
El elemento <audio> te permite reproducir fácilmente efectos de sonido y música sencillos. Si sus necesidades están más involucradas, echa un vistazo a la API de audio web para obtener potencia de procesamiento de audio real.
-
IndexedDB
-
Una poderosa API de almacenamiento de datos para mantener los datos del usuario en su propio ordenador o dispositivo. Una gran manera de guardar el estado del juego y otra información localmente para que no tenga que ser descargado cada vez que sea necesario. También es útil para ayudar a que su juego sea jugable incluso cuando el usuario no está conectado a la Web (por ejemplo, cuando están atrapados en un avión durante horas y horas ...).
-
JavaScript
-
JavaScript, el lenguaje de programación utilizado en la Web, está ardiendo rápido en los navegadores modernos y cada vez más rápido. Usa su poder para escribir el código para tu juego, o mira usando tecnologías como Emscripten o Asm.js para portar fácilmente tus juegos existentes.
-
API de bloqueo de puntero
-
La API de Bloqueo de Puntero le permite bloquear el ratón u otro dispositivo señalador dentro de la interfaz de su juego para que en lugar de posicionamiento absoluto del cursor reciba deltas de coordenadas que le den medidas más precisas de lo que el usuario está haciendo e impide que el usuario envíe accidentalmente su entrada En algún otro lugar, por lo tanto falta una acción importante.
-
SVG (Gráficos Vectoriales Escalables)
-
Permite crear gráficos vectoriales que se escalan sin problemas, independientemente del tamaño o la resolución de la pantalla del usuario.
-
Matrices Arrays
-
Los arrays tipados en JavaScript le dan acceso a datos binarios sin procesar desde JavaScript; Esto le permite manipular texturas GL, datos de juego, o cualquier otra cosa, incluso si no está en un formato JavaScript nativo.
-
API de audio web
-
Esta API para controlar la reproducción, síntesis y manipulación de audio a partir de código JavaScript le permite crear efectos de sonido impresionantes, así como jugar y manipular música en tiempo real.
-
WebGL
-
Permite crear gráficos 3D (y 2D) acelerados por hardware de alto rendimiento a partir del contenido Web. Se trata de una implementación Web de OpenGL ES 2.0.
-
WebRTC
-
La API WebRTC (Comunicaciones en tiempo real) le permite controlar los datos de audio y vídeo, incluyendo la teleconferencia y la transmisión de otros datos de la aplicación entre dos usuarios. ¿Quieren que sus jugadores puedan hablar entre sí mientras explotan monstruos? Esta es la API para usted.
-
WebSockets
-
La API de WebSocket le permite conectar su aplicación o sitio a un servidor para transmitir datos de un lado a otro en tiempo real. Perfecto para la acción de juego multijugador, servicios de chat, y así sucesivamente.
-
Trabajadores de la Web
-
Los trabajadores le dan la posibilidad de generar hilos de fondo que ejecutan su propio código JavaScript, para aprovechar los modernos procesadores multi-núcleo.
-
XMLHttpRequest y API de archivos
-
La combinación de XMLHttpRequest y la API de archivos le permiten enviar y recibir cualquier tipo de datos que desee (no deje que el "XML" te lance!) Desde un servidor Web. Esta es una gran manera de hacer cualquier cosa desde la descarga de nuevos niveles de juego y obras de arte a la transmisión de información de estado de juego en tiempo no real de ida y vuelta.
-
-
- - - -
-
- -
- -
-

Etiquetas y colaboradores del documento

- -
Etiquetas: - - -
- -
Colaboradores en esta página: Albizures , atlas7jean
- -
Última actualización por: Albizures ,
-
-
- -
- -
diff --git "a/files/es/games/introducci\303\263n_al_desarrollo_de_juegos_html5_(resumen)/index.html" "b/files/es/games/introducci\303\263n_al_desarrollo_de_juegos_html5_(resumen)/index.html" deleted file mode 100644 index dcbaca6422..0000000000 --- "a/files/es/games/introducci\303\263n_al_desarrollo_de_juegos_html5_(resumen)/index.html" +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Introducción al desarrollo de juegos HTML5 (resumen) -slug: Games/Introducción_al_desarrollo_de_juegos_HTML5_(resumen) -tags: - - Firefox OS - - HTML5 - - Móvil - - juegos -translation_of: Games/Introduction_to_HTML5_Game_Development_(summary) ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -
-

Ventajas

- -
    -
  1. Los juegos hechos con HTML5 funcionan en smartphones, tabletas, PCs y Smart TVs.
    2. -
  2. Anuncia y promociona tu juego en toda la web, así como en otros medios.
    3. -
  3. Pagos. Carga lo que quieras y usa el servicio de procesamiento de pagos que desees.
    4. -
  4. Actualiza tu juego cuando quieras.
    5. -
  5. ¡Colecciona tus propios análisis!
    6. -
  6. Conécta con tus clientes más de cerca.
    7. -
  7. Los jugadores pueden jugar el juego en cualquier lugar, en cualquier momento.
    8. -
- -

Tecnologías Web

-
- -
 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FuncionalidadTecnología
AudioWeb Audio API
GraphicsWebGL (OpenGL ES 2.0)
InputTouch events, Gamepad API, sensores del dispositivo, WebRTC, Full Screen API, Pointer Lock API
LanguageJavaScript (o C/C++ usando Emscripten para compilar a JavaScript)
NetworkingWebRTC y/o WebSockets
StorageIndexedDB o la "nube"
WebHTML, CSS, SVG, Social API (¡y muchos más!)
- -
-
-
Full Screen API
-
Juego de pantalla completa.
-
Gamepad API
-
Utiliza gamepads u otros controladores de juego.
-
HTML y CSS
-
Crea, diseña y diseña la interfaz de usuario de tu juego.
-
HTML audio
-
Juega fácilmente efectos de sonido simples y música.
-
IndexedDB
-
Almacena los datos del usuario en tu propio ordenador o dispositivo.
-
JavaScript
-
Rápido lenguaje de programación web para escribir el código de tu juego.
- Para portar fácilmente tus juegos existentes en Emscripten o Asm.js
-
Pointer Lock API
-
Bloquea el ratón u otro dispositivo señalador dentro de la interfaz de tu juego.
-
SVG (Scalable Vector Graphics)
-
Cree gráficos vectoriales que se escalan sin problemas, independientemente del tamaño o la resolución de la pantalla del usuario.
-
Typed Arrays
-
Accede a datos binarios sin procesar desde JavaScript; Manipula texturas GL, datos de juegos, o cualquier otra cosa.
-
Web Audio API
-
Controla la reproducción, síntesis y manipulación del audio en tiempo real.
-
WebGL
-
Cree gráficos 3D (y 2D) acelerados por hardware y de alto rendimiento. OpenGL ES 2.0.
-
WebRTC
-
Las comunicaciones en tiempo real para controlar los datos de audio y video, incluidas las teleconferencias y la transmisión de datos de otras aplicaciones entre dos usuarios, como el chat.
-
WebSockets
-
Conecte tu aplicación o sitio a un servidor para transmitir datos de un lado a otro en tiempo real. Perfecto para la acción de juegos multijugador, servicios de chat, etc.
-
Web Workers
-
Genere hilos de fondo ejecutando tu propio código JavaScript para procesadores multi-core.
-
XMLHttpRequest y File API
-
Envía y recibe cualquier tipo de información que desees desde un servidor web, como descargar nuevos niveles de juego y material gráfico para transmitir información de estado del juego en tiempo no real.
-
-
- -

 

diff --git a/files/es/games/introduction/index.html b/files/es/games/introduction/index.html new file mode 100644 index 0000000000..b19ea1a61e --- /dev/null +++ b/files/es/games/introduction/index.html @@ -0,0 +1,167 @@ +--- +title: Introduccion para desarrollo de juegos para la Web +slug: Games/Introduccion +tags: + - Firefox OS + - juegos + - moviles +translation_of: Games/Introduction +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +
La Web rapidamente se ha convertido en una plataforma viable no solo para crear impresionantes juegos de alta calidad, sino también para distruibuirlos.
+ +
+ +
El rango de juegos que pueden ser creados está a la par tanto de los juegos de escritorio como de SO nativos (Android, iOS). Con tecnologias Web modernas y un navegador reciente es totalmente posible hacer juegos de primera categoria para la Web. Y no estamos hablando sobre simples juegos de cartas o juegos sociales multijugadores que en tiempos anteriores se podian hacer con Flash®. Estamos hablando sobre juegos 3D shooters de accion, RPGs, y más. Gracias a las masivas mejoras de rendimiento en JavaScript  con tecnologia de compilación just-in-time y nuevas APIs, se pueden construir juegos que pueden correr en el navegador (o en dispositivos HTML5 como Firefox OS) sin problemas.
+ +

La plataforma de juegos HTML5

+ +

Puedes pensar en la Web como una mejor opción de plataforma para desarrollar tu juego. Como nos gusta decir, "la Web es la plataforma". Hechemos un vistazo al nucleo de la plataforma Web:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionTecnología
AudioWeb Audio API
GraficosWebGL (OpenGL ES 2.0)
EntradaTouch events, Gamepad API, device sensors, WebRTC, Full Screen API, Pointer Lock API
LenguajeJavaScript (o C/C++ usando Emscripten para compilar a JavaScript)
RedesWebRTC and/or WebSockets
AlmacenamientoIndexedDB o la "nube"
WebHTML, CSS, SVG, Social API (y mucho más!)
+ +

El caso de Exito

+ +
Como un desarrollador de juegos, de forma individual o como un gran studio de juegos, tu quieres por que tiene sentido apuntar a la Web como tu práximo proyecto de juego. Veamos como la Web puede ayudarte.
+ +
+ +
    +
  1. +
    El alcance de la Web es enorme; está en todas partes. Los juegos construidos con HTML5 funcionan en smartphones, tablets, PCs y Smart TVs.
    +
    2. +
  2. Se mejoran la comercialización y la detección. No estás limitado a promocionar tu aplicación en la tienda de aplicaciones de otra persona. En su lugar, puede anunciar y promover su juego en toda la Web, así como en otros medios, aprovechando la inherente capacidad de enlace y capacidad de compartir de la Web para llegar a nuevos clientes.
    3. +
  3. Usted tiene control donde importa: Pagos. Usted no tiene que entregar más del 30% de sus ingresos a otra persona sólo porque su juego está en su ecosistema. En su lugar, cargue lo que quiera y utilice cualquier servicio de procesamiento de pagos que le guste.
    4. +
  4. Una vez más con más control, puedes actualizar tu juego cuando quieras. No hay que esperar sin aliento para la aprobación, mientras que alguien oculto dentro de otra empresa decide si su solución de error crítico se enviará hoy o mañana.
    5. +
  5. ¡Controla tus análisis! En lugar de confiar en otra persona para tomar todas las decisiones sobre qué analítica necesita, puede recoger su propia o elegir la tercera parte que más le guste para recopilar información sobre sus ventas y el alcance de su juego.
    6. +
  6. Usted consigue manejar su relación del cliente más de cerca, en su propia manera. No más tener comentarios de los clientes filtrados a través de los mecanismos limitados de una tienda de aplicaciones. Involucrarse con sus clientes de la manera que desee, sin un intermediario.
    7. +
  7. Sus jugadores pueden jugar su juego en cualquier lugar, en cualquier momento. Debido a que la Web es omnipresente, sus clientes pueden comprobar el estado de su juego en sus teléfonos, tabletas, computadoras portátiles domésticas, sus escritorios de trabajo o cualquier otra cosa.
    8. +
+ +

Tecnologías web para desarrolladores de juegos Edit

+ +

Para la gente de tecnología, vamos a cavar en las API que la Web aporta a la mesa que atienden a los desarrolladores de juegos. Esta es una lista exhaustiva para darle una muestra de lo que la Web puede hacer por usted:

+ +
+
+
API de pantalla completa
+
Esta sencilla API permite que su juego se haga cargo de toda la pantalla, sumergiendo al jugador en acción.
+
API de Gamepad
+
Si desea que sus usuarios puedan usar gamepads u otros controladores de juego para trabajar su juego, necesitará esta API.
+
HTML y CSS
+
Juntas, estas dos tecnologías le permiten construir, diseñar y diseñar la interfaz de usuario de su juego. Parte de HTML es el elemento <canvas> , que proporciona una forma de hacer gráficos 2D.
+
Audio HTML
+
El elemento <audio> te permite reproducir fácilmente efectos de sonido y música sencillos. Si sus necesidades están más involucradas, echa un vistazo a la API de audio web para obtener potencia de procesamiento de audio real.
+
IndexedDB
+
Una poderosa API de almacenamiento de datos para mantener los datos del usuario en su propio ordenador o dispositivo. Una gran manera de guardar el estado del juego y otra información localmente para que no tenga que ser descargado cada vez que sea necesario. También es útil para ayudar a que su juego sea jugable incluso cuando el usuario no está conectado a la Web (por ejemplo, cuando están atrapados en un avión durante horas y horas ...).
+
JavaScript
+
JavaScript, el lenguaje de programación utilizado en la Web, está ardiendo rápido en los navegadores modernos y cada vez más rápido. Usa su poder para escribir el código para tu juego, o mira usando tecnologías como Emscripten o Asm.js para portar fácilmente tus juegos existentes.
+
API de bloqueo de puntero
+
La API de Bloqueo de Puntero le permite bloquear el ratón u otro dispositivo señalador dentro de la interfaz de su juego para que en lugar de posicionamiento absoluto del cursor reciba deltas de coordenadas que le den medidas más precisas de lo que el usuario está haciendo e impide que el usuario envíe accidentalmente su entrada En algún otro lugar, por lo tanto falta una acción importante.
+
SVG (Gráficos Vectoriales Escalables)
+
Permite crear gráficos vectoriales que se escalan sin problemas, independientemente del tamaño o la resolución de la pantalla del usuario.
+
Matrices Arrays
+
Los arrays tipados en JavaScript le dan acceso a datos binarios sin procesar desde JavaScript; Esto le permite manipular texturas GL, datos de juego, o cualquier otra cosa, incluso si no está en un formato JavaScript nativo.
+
API de audio web
+
Esta API para controlar la reproducción, síntesis y manipulación de audio a partir de código JavaScript le permite crear efectos de sonido impresionantes, así como jugar y manipular música en tiempo real.
+
WebGL
+
Permite crear gráficos 3D (y 2D) acelerados por hardware de alto rendimiento a partir del contenido Web. Se trata de una implementación Web de OpenGL ES 2.0.
+
WebRTC
+
La API WebRTC (Comunicaciones en tiempo real) le permite controlar los datos de audio y vídeo, incluyendo la teleconferencia y la transmisión de otros datos de la aplicación entre dos usuarios. ¿Quieren que sus jugadores puedan hablar entre sí mientras explotan monstruos? Esta es la API para usted.
+
WebSockets
+
La API de WebSocket le permite conectar su aplicación o sitio a un servidor para transmitir datos de un lado a otro en tiempo real. Perfecto para la acción de juego multijugador, servicios de chat, y así sucesivamente.
+
Trabajadores de la Web
+
Los trabajadores le dan la posibilidad de generar hilos de fondo que ejecutan su propio código JavaScript, para aprovechar los modernos procesadores multi-núcleo.
+
XMLHttpRequest y API de archivos
+
La combinación de XMLHttpRequest y la API de archivos le permiten enviar y recibir cualquier tipo de datos que desee (no deje que el "XML" te lance!) Desde un servidor Web. Esta es una gran manera de hacer cualquier cosa desde la descarga de nuevos niveles de juego y obras de arte a la transmisión de información de estado de juego en tiempo no real de ida y vuelta.
+
+
+ + + +
+
+ +
+ +
+

Etiquetas y colaboradores del documento

+ +
Etiquetas: + + +
+ +
Colaboradores en esta página: Albizures , atlas7jean
+ +
Última actualización por: Albizures ,
+
+
+ +
+ +
diff --git a/files/es/games/introduction_to_html5_game_development/index.html b/files/es/games/introduction_to_html5_game_development/index.html new file mode 100644 index 0000000000..dcbaca6422 --- /dev/null +++ b/files/es/games/introduction_to_html5_game_development/index.html @@ -0,0 +1,108 @@ +--- +title: Introducción al desarrollo de juegos HTML5 (resumen) +slug: Games/Introducción_al_desarrollo_de_juegos_HTML5_(resumen) +tags: + - Firefox OS + - HTML5 + - Móvil + - juegos +translation_of: Games/Introduction_to_HTML5_Game_Development_(summary) +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +
+

Ventajas

+ +
    +
  1. Los juegos hechos con HTML5 funcionan en smartphones, tabletas, PCs y Smart TVs.
    2. +
  2. Anuncia y promociona tu juego en toda la web, así como en otros medios.
    3. +
  3. Pagos. Carga lo que quieras y usa el servicio de procesamiento de pagos que desees.
    4. +
  4. Actualiza tu juego cuando quieras.
    5. +
  5. ¡Colecciona tus propios análisis!
    6. +
  6. Conécta con tus clientes más de cerca.
    7. +
  7. Los jugadores pueden jugar el juego en cualquier lugar, en cualquier momento.
    8. +
+ +

Tecnologías Web

+
+ +
 
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadTecnología
AudioWeb Audio API
GraphicsWebGL (OpenGL ES 2.0)
InputTouch events, Gamepad API, sensores del dispositivo, WebRTC, Full Screen API, Pointer Lock API
LanguageJavaScript (o C/C++ usando Emscripten para compilar a JavaScript)
NetworkingWebRTC y/o WebSockets
StorageIndexedDB o la "nube"
WebHTML, CSS, SVG, Social API (¡y muchos más!)
+ +
+
+
Full Screen API
+
Juego de pantalla completa.
+
Gamepad API
+
Utiliza gamepads u otros controladores de juego.
+
HTML y CSS
+
Crea, diseña y diseña la interfaz de usuario de tu juego.
+
HTML audio
+
Juega fácilmente efectos de sonido simples y música.
+
IndexedDB
+
Almacena los datos del usuario en tu propio ordenador o dispositivo.
+
JavaScript
+
Rápido lenguaje de programación web para escribir el código de tu juego.
+ Para portar fácilmente tus juegos existentes en Emscripten o Asm.js
+
Pointer Lock API
+
Bloquea el ratón u otro dispositivo señalador dentro de la interfaz de tu juego.
+
SVG (Scalable Vector Graphics)
+
Cree gráficos vectoriales que se escalan sin problemas, independientemente del tamaño o la resolución de la pantalla del usuario.
+
Typed Arrays
+
Accede a datos binarios sin procesar desde JavaScript; Manipula texturas GL, datos de juegos, o cualquier otra cosa.
+
Web Audio API
+
Controla la reproducción, síntesis y manipulación del audio en tiempo real.
+
WebGL
+
Cree gráficos 3D (y 2D) acelerados por hardware y de alto rendimiento. OpenGL ES 2.0.
+
WebRTC
+
Las comunicaciones en tiempo real para controlar los datos de audio y video, incluidas las teleconferencias y la transmisión de datos de otras aplicaciones entre dos usuarios, como el chat.
+
WebSockets
+
Conecte tu aplicación o sitio a un servidor para transmitir datos de un lado a otro en tiempo real. Perfecto para la acción de juegos multijugador, servicios de chat, etc.
+
Web Workers
+
Genere hilos de fondo ejecutando tu propio código JavaScript para procesadores multi-core.
+
XMLHttpRequest y File API
+
Envía y recibe cualquier tipo de información que desees desde un servidor web, como descargar nuevos niveles de juego y material gráfico para transmitir información de estado del juego en tiempo no real.
+
+
+ +

 

diff --git a/files/es/games/publishing_games/game_monetization/index.html b/files/es/games/publishing_games/game_monetization/index.html new file mode 100644 index 0000000000..1549b222da --- /dev/null +++ b/files/es/games/publishing_games/game_monetization/index.html @@ -0,0 +1,100 @@ +--- +title: Monetización de videojuegos +slug: Games/Publishing_games/Monetización_de_los_juegos +tags: + - HTLM5 + - JavaScript + - Licencias + - anuncios + - juegos + - marca + - monetización +translation_of: Games/Publishing_games/Game_monetization +--- +
{{GamesSidebar}}
+ +

Cuando empleas tu tiempo en crear un juego, distribuirlo y promocionarlo deberías considerar ganar un poco de dinero con ello. Si tu trabajo es un esfuerzo serio en tu camino para ser un desarrollador independiente de juegos capaz de ganarse la vida, sigue leyendo y verás cuales son tus opciones. La tecnología es lo suficientemente madura; ahora es cuestión de elegir el enfoque adecuado.

+ +

Juegos de pago

+ +

Lo primero, la opción más obvia que probablemente venga a tu mente, podría ser vender los juegos de la forma en que se realiza para grandes títulos AAA ---- con un precio fijado por adelantado. Aunque el mercado digital es clave y no necesitas imprimir portadas y sacar tu juego en una tienda física, para ganar un dinero decente vendiendo tus juegos con un precio fijo, tienes que invertir tu tiempo y dinero en marketing. Solo con los mejores juegos se recupera o gana más de lo que costo hacerlo, y necesitas un montón de suerte para ello.

+ +

Cuanto ganes por tu jugo depende del mercado, la calidad de tu juego y otros tantos pequeños factores. Un título de arcade para iOS puede venderse por 0,99 USD, pero un juego de escritorio estilo RPG más largo, en Steam, puede venderse por 20 USD; ambos precios están bien. Tienes que seguir el mercado y tu propia investigación --- aprender rápido de tus errores es importante.

+ +

Compras en la aplicación

+ +

En lugar de que la gente pague por tu juego por adelantado, puedes ofrecer un juego de forma gratuita con compras dentro de la aplicación. En este caso, el juego puede ser adquirido sin gastarse un centavo --- dar el juego a los jugadores, pero ofreciendo monedas del juego, bonus extra  o beneficios por dinero real. Ejemplos específicos pueden ser, incluir bonus de nivel, mejores armas o hechizos, o volver a llenar la energía necesaria para jugar. Diseñar un buen sistema de compras en la aplicación es un arte propio.

+ +

Recuerda que necesitas miles de descargas de tu juego para hacer efectivas/rentables las compras en la aplicación --- solo una pequeña parte de los jugadores pagará por las compras en la aplicación. ¿Cómo de pequeña? Varía, pero alrededor de una persona por cada mil es aproximadamente la media. Cuantas más personas jueguen a tu juego, mayor será la probabilidad de que alguien pague, o sea que tus beneficios dependen en gran medida de tus actividades de promoción.

+ +

Freemium

+ +

Los juegos que ofrecen compras en el juego, a menudo se refieren a freemium --- un juego freemium puede ser adquirido y jugado gratis, pero puedes pagar por características extra (premium), bienes virtuales u otros beneficios. La palabra en sí, adquirió una connotación negativa después de que las grandes compañías se centraran en crear juegos, cuyo objetivo principal era ganar el máximo dinero posible de los jugadores, en lugar de proporcionar una experiencia divertida. Los peores casos fueron cuando podías utilizar dinero real para obtener ventajas sobre otros jugadores, o cuando restringían el acceso a las siguientes etapas del juego, a menos que los jugadores pagaran. El término "pagar para ganar" fue acuñado y este enfoque no gustó a muchos jugadores  y desarrolladores. Si quieres implementar compras dentro del juego asegúrate de que intenten añadir valor al juego con algo que los jugadores disfruten, en lugar de sacarlo y luego cobrarlo.

+ +

Complementos y DLCs

+ +

 

+ +

Los complementos y el contenido descargable son una buena manera de proporcionar un valor extra a un juego ya lanzado, pero recuerda que tendrás que ofrecer contenido decente y entretenido para atraer a la gente a comprarlo. Un conjunto totalmente nuevo de niveles con nuevos personajes, armas e historia es un buen material para DLC, pero para tener suficientes ventas el juego en sí debe ser popular, o de lo contrario no habrá jugadores interesados ​​en gastar su dinero duramente ganado. eso.

+ +

En lugar de vender activamente los juegos, también puede intentar obtener un ingreso pasivo: mostrar anuncios y confiar en actividades anteriores relacionadas con la promoción de su juego puede ser beneficioso, pero su juego debe ser adictivo, lo cual no es tan fácil como parece. Todavía necesitas planearlo, y en algún momento también necesitarás un poco de suerte. Si su juego se vuelve viral y la gente comienza a compartirlo, puede obtener muchas descargas y dinero de los anuncios.

+ +

Hay muchas compañías que ofrecen sistemas de publicidad: usted se registra y les permite mostrar anuncios a cambio de un porcentaje de las ganancias. Se dice que Google AdSense es el más efectivo, pero no está diseñado para juegos y es una práctica bastante mala usarlo para ese propósito. En lugar de arriesgarse a que se cierre su cuenta y se bloquee todo el dinero, intente utilizar los portales habituales de gamedev como LeadBolt. Ofrecen sistemas fáciles de implementar para mostrar los anuncios en sus juegos y dividir las ganancias con usted.

+ +

Los anuncios de video son cada vez más populares, especialmente en forma de pre-roll: se muestran al principio de su juego mientras aún se está cargando. Y sobre el tema de dónde colocar los anuncios en tu juego, realmente depende de ti. Debería ser lo más sutil posible para no molestar demasiado a los jugadores, pero lo suficientemente visible como para hacerles clic o al menos tomar nota. Adición de anuncios entre sesiones de juego en juego sobre pantallas es un enfoque popular.

+ +

 

+ +

Licencias

+ +

Hay un enfoque que puede funcionar como un modelo de monetización por sí mismo, y es vendiendo licencias para la distribución de tu juego. Existen más y más portales interesados en enseñar tu juego en sus páginas web. Ellos siguen varias estrategias para ganar dinero, gracias a tus juegos, pero no te tienes que preocuparte sobre eso, ya que la venta de la licencia suele ser un contrato único. Tu consigues el dinero y ellos pueden ser creativos con el uso de tu juego para hacer dinero con él.

+ +

Encontrar editores puede ser difícil la primera vez --- intenta buscarlos en los foros HTML5 Gamedevs. Si eres bien conocido, los editores llegarán a ti. La mayoria de las ofertas se realizan a través de correos electrónicos cuando se habla con una persona dedicada en el lado del editor. Algunos editores de sitios web tienen esa información a la vista, mientras que para contactar con otros editores es más difícil. Cuando busques un editor intenta ser amable e ir directo al grano --- son gente ocupada.

+ +

Licencias exclusivas

+ +

La licencia exclusiva es un tipo de licencia para un editor --- has creado un juego y vendes todos sus derechos a una única entidad junto con los derechos para redistribuirla ---- Softgames es un ejemplo de tal editor. No puedes vender el juego otra vez de ninguna forma mientras que el editor tenga los derechos --- esto es por lo que las ofertas exclusivas valen mucho dinero. ¿Cuánto exactamente? Depende de la calidad del juego, el género, el editor, y otros tantos factores, pero habitualmente puede estar entre los 2000 y 5000 USD. Un vez que vendiste una licencia exclusiva puedes olvidarte de promocionar ese juego en particular, ya que no ganarás más dinero con él, así que acepta tal oferta solo si estas seguro de que es lo suficientemente rentable.

+ +

Licencias no exclusivas

+ +

Este enfoque es menos estricto --- puedes vender una misma licencia a varios editores. Este es el enfoque más popular entre os editores nuevos (y los editores están apareciendo constantemente), puedes vender tus juegos con unos términos no exclusivos. Recuerda que con esta licencia el editor no puede redistribuirlo más --- a menudo se le llama un acuerdo de sitio cerrado cuando compran el derecho de publicar el juego en su propio portal. El coste normal de una licencia no exclusiva esta alrededor de 500 USD.

+ +

Subscripciones

+ +

También hay una opción para obtener un dinero pasivo mensual, a través de un acuerdo de subscripción. En lugar de obtener un único pago, puedes obtener pequeños pagos de dinero por juego, por mes --- puede estar entorno a 20-50 USD por mes, por juego. Normalmente depende de ti, si quieres ganar todo el dinero en un solo pago o ganarlo por meses. Recuerda que puede ser cancelado, o sea que no es una solución que funcione indefinidamente.

+ +

Ingresos por publicidad

+ +

Puedes implementar anuncios en tu juego tu mismo e intentar encontrar el tráfico adecuado para ganar un poco de dinero, pero también puedes hacer un acuerdo de reparto de ingresos con un editor. Los editores se encargarán de dirigir el tráfico y de dividir los beneficios --- habitualmente los acuerdos son de 70/30% o 50/50%, ganado por mes.

+ +

Recuerda que muchos nuevos editores de baja calidad querrán coger tu juego con ingresos por anuncios, en lugar de licencia, porque será más barato para ellos y podrías terminar con beneficios de 2 USD por juego por trato completado. Ten cuidado cuando contrates con nuevos editores --- algunas veces es mejor reducir el coste de la licencia a un editor conocido, en lugar de que te defraude un nuevo editor por más dinero.

+ +

Los editores cogen tus juegos para la participación en los beneficios, y/o licenciar podrá requerir implementar sus propias APIs, lo cual dará un trabajo extra, asi que considera eso en tu precio final.

+ +

Marca

+ +

Puedes vender los derechos de usar tu juego para la marca, o hacerlo tu mismo.  En el primer caso, es casi como una licencia no exclusiva, pero el cliente normalmente compra derechos para el código e implementarán sus propios gráficos. En el segundo caso, es como un trato independiente, pero estas reutilizando el código y añadiendo gráficos proporcionados por los clientes, algunas veces implementándolos como ellos te enseñen. Por ejemplo, si tu tienes un juego donde un jugador golpea los artículos de comida, podrías cambiar la comida a los productos del cliente para darles publicidad. Los precios en este modelo varían mucho dependiendo de la marca, cliente, y las horas que le eches.

+ +

Otras estrategias de monetización no enfocadas al juego

+ +

Hay otros caminos en los que puedes ganar dinero cuando haces juegos HTML5, y ni siquiera tiene que estar relacionado con el juego.

+ +

Venta de recursos

+ +

Si eres un diseñador gráfico, puedes vender los bienes de los juegos que has creado, o algo completamente nuevo exclusivamente para ese propósito en tiendas online como  Envato Market. No es mucho, pero si eres un diseñador conocido, puede ser una forma de ganar un dinero extra.

+ +

Escribir artículos y tutoriales

+ +

Es posible escribir artículos sobre tus juegos y que te paguen por ello. La promoción del juego y la monetización al mismo tiempo es un ganar-ganar, y si no abusas de ello con muchos anuncios, los lectores disfrutarán leyendo los artículos y aprenderán una o dos cosas. Si te enfocas en compartir el conocimiento primero y usas tus juegos solo como ejemplos, estará bien. Visita Tuts+ Game Development o sitios web similares para tener oportunidades donde escribir artículos.

+ +

Mercancías

+ +

Puedes vender camisetas, pegatinas o otros objetos --- algunos desarrolladores ganan más dinero con las mercancías que con sus propios juegos, pero solo funciona en juegos muy populares y reconocidos, como Angry Birds. Todavía, puede ser otra forma de ganar un poco de dinero. Cuanto más diversificados sean tus ingresos, mejor será tu estabilidad comercial.

+ +

Donaciones

+ +

Cuando todo lo demás falla puedes intentar poner un botón de donaciones en la página de tu juego y pedir apoyo de la comunidad. Algunas veces funciona, pero solo si el jugador te conoce y siente que te ayudará. Este es el porque de que manejar cuidadosamente la comunidad es tan importante. Funcionó con la competición de js13kGames --- todos los participantes obtuvieron una camiseta gratis, y algunos incluso dieron unos cuantos dólares para ayudarlo a seguir funcionado en los próximos años.

+ +

Resumen

+ +

Hay muchas maneras de ganar dinero --- todo lo que se aplica al mundo de los juegos AAA "normalmente" puede ser, más o menos, aplicable a los juegos casuales HTML5. Sin embargo, también podrías enfocarte en vender licencias, hacer marcas, o ganar unos beneficios compartidos de los anuncios. Depende totalmente de ti, que camino vas a seguir.

diff --git "a/files/es/games/publishing_games/monetizaci\303\263n_de_los_juegos/index.html" "b/files/es/games/publishing_games/monetizaci\303\263n_de_los_juegos/index.html" deleted file mode 100644 index 1549b222da..0000000000 --- "a/files/es/games/publishing_games/monetizaci\303\263n_de_los_juegos/index.html" +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Monetización de videojuegos -slug: Games/Publishing_games/Monetización_de_los_juegos -tags: - - HTLM5 - - JavaScript - - Licencias - - anuncios - - juegos - - marca - - monetización -translation_of: Games/Publishing_games/Game_monetization ---- -
{{GamesSidebar}}
- -

Cuando empleas tu tiempo en crear un juego, distribuirlo y promocionarlo deberías considerar ganar un poco de dinero con ello. Si tu trabajo es un esfuerzo serio en tu camino para ser un desarrollador independiente de juegos capaz de ganarse la vida, sigue leyendo y verás cuales son tus opciones. La tecnología es lo suficientemente madura; ahora es cuestión de elegir el enfoque adecuado.

- -

Juegos de pago

- -

Lo primero, la opción más obvia que probablemente venga a tu mente, podría ser vender los juegos de la forma en que se realiza para grandes títulos AAA ---- con un precio fijado por adelantado. Aunque el mercado digital es clave y no necesitas imprimir portadas y sacar tu juego en una tienda física, para ganar un dinero decente vendiendo tus juegos con un precio fijo, tienes que invertir tu tiempo y dinero en marketing. Solo con los mejores juegos se recupera o gana más de lo que costo hacerlo, y necesitas un montón de suerte para ello.

- -

Cuanto ganes por tu jugo depende del mercado, la calidad de tu juego y otros tantos pequeños factores. Un título de arcade para iOS puede venderse por 0,99 USD, pero un juego de escritorio estilo RPG más largo, en Steam, puede venderse por 20 USD; ambos precios están bien. Tienes que seguir el mercado y tu propia investigación --- aprender rápido de tus errores es importante.

- -

Compras en la aplicación

- -

En lugar de que la gente pague por tu juego por adelantado, puedes ofrecer un juego de forma gratuita con compras dentro de la aplicación. En este caso, el juego puede ser adquirido sin gastarse un centavo --- dar el juego a los jugadores, pero ofreciendo monedas del juego, bonus extra  o beneficios por dinero real. Ejemplos específicos pueden ser, incluir bonus de nivel, mejores armas o hechizos, o volver a llenar la energía necesaria para jugar. Diseñar un buen sistema de compras en la aplicación es un arte propio.

- -

Recuerda que necesitas miles de descargas de tu juego para hacer efectivas/rentables las compras en la aplicación --- solo una pequeña parte de los jugadores pagará por las compras en la aplicación. ¿Cómo de pequeña? Varía, pero alrededor de una persona por cada mil es aproximadamente la media. Cuantas más personas jueguen a tu juego, mayor será la probabilidad de que alguien pague, o sea que tus beneficios dependen en gran medida de tus actividades de promoción.

- -

Freemium

- -

Los juegos que ofrecen compras en el juego, a menudo se refieren a freemium --- un juego freemium puede ser adquirido y jugado gratis, pero puedes pagar por características extra (premium), bienes virtuales u otros beneficios. La palabra en sí, adquirió una connotación negativa después de que las grandes compañías se centraran en crear juegos, cuyo objetivo principal era ganar el máximo dinero posible de los jugadores, en lugar de proporcionar una experiencia divertida. Los peores casos fueron cuando podías utilizar dinero real para obtener ventajas sobre otros jugadores, o cuando restringían el acceso a las siguientes etapas del juego, a menos que los jugadores pagaran. El término "pagar para ganar" fue acuñado y este enfoque no gustó a muchos jugadores  y desarrolladores. Si quieres implementar compras dentro del juego asegúrate de que intenten añadir valor al juego con algo que los jugadores disfruten, en lugar de sacarlo y luego cobrarlo.

- -

Complementos y DLCs

- -

 

- -

Los complementos y el contenido descargable son una buena manera de proporcionar un valor extra a un juego ya lanzado, pero recuerda que tendrás que ofrecer contenido decente y entretenido para atraer a la gente a comprarlo. Un conjunto totalmente nuevo de niveles con nuevos personajes, armas e historia es un buen material para DLC, pero para tener suficientes ventas el juego en sí debe ser popular, o de lo contrario no habrá jugadores interesados ​​en gastar su dinero duramente ganado. eso.

- -

En lugar de vender activamente los juegos, también puede intentar obtener un ingreso pasivo: mostrar anuncios y confiar en actividades anteriores relacionadas con la promoción de su juego puede ser beneficioso, pero su juego debe ser adictivo, lo cual no es tan fácil como parece. Todavía necesitas planearlo, y en algún momento también necesitarás un poco de suerte. Si su juego se vuelve viral y la gente comienza a compartirlo, puede obtener muchas descargas y dinero de los anuncios.

- -

Hay muchas compañías que ofrecen sistemas de publicidad: usted se registra y les permite mostrar anuncios a cambio de un porcentaje de las ganancias. Se dice que Google AdSense es el más efectivo, pero no está diseñado para juegos y es una práctica bastante mala usarlo para ese propósito. En lugar de arriesgarse a que se cierre su cuenta y se bloquee todo el dinero, intente utilizar los portales habituales de gamedev como LeadBolt. Ofrecen sistemas fáciles de implementar para mostrar los anuncios en sus juegos y dividir las ganancias con usted.

- -

Los anuncios de video son cada vez más populares, especialmente en forma de pre-roll: se muestran al principio de su juego mientras aún se está cargando. Y sobre el tema de dónde colocar los anuncios en tu juego, realmente depende de ti. Debería ser lo más sutil posible para no molestar demasiado a los jugadores, pero lo suficientemente visible como para hacerles clic o al menos tomar nota. Adición de anuncios entre sesiones de juego en juego sobre pantallas es un enfoque popular.

- -

 

- -

Licencias

- -

Hay un enfoque que puede funcionar como un modelo de monetización por sí mismo, y es vendiendo licencias para la distribución de tu juego. Existen más y más portales interesados en enseñar tu juego en sus páginas web. Ellos siguen varias estrategias para ganar dinero, gracias a tus juegos, pero no te tienes que preocuparte sobre eso, ya que la venta de la licencia suele ser un contrato único. Tu consigues el dinero y ellos pueden ser creativos con el uso de tu juego para hacer dinero con él.

- -

Encontrar editores puede ser difícil la primera vez --- intenta buscarlos en los foros HTML5 Gamedevs. Si eres bien conocido, los editores llegarán a ti. La mayoria de las ofertas se realizan a través de correos electrónicos cuando se habla con una persona dedicada en el lado del editor. Algunos editores de sitios web tienen esa información a la vista, mientras que para contactar con otros editores es más difícil. Cuando busques un editor intenta ser amable e ir directo al grano --- son gente ocupada.

- -

Licencias exclusivas

- -

La licencia exclusiva es un tipo de licencia para un editor --- has creado un juego y vendes todos sus derechos a una única entidad junto con los derechos para redistribuirla ---- Softgames es un ejemplo de tal editor. No puedes vender el juego otra vez de ninguna forma mientras que el editor tenga los derechos --- esto es por lo que las ofertas exclusivas valen mucho dinero. ¿Cuánto exactamente? Depende de la calidad del juego, el género, el editor, y otros tantos factores, pero habitualmente puede estar entre los 2000 y 5000 USD. Un vez que vendiste una licencia exclusiva puedes olvidarte de promocionar ese juego en particular, ya que no ganarás más dinero con él, así que acepta tal oferta solo si estas seguro de que es lo suficientemente rentable.

- -

Licencias no exclusivas

- -

Este enfoque es menos estricto --- puedes vender una misma licencia a varios editores. Este es el enfoque más popular entre os editores nuevos (y los editores están apareciendo constantemente), puedes vender tus juegos con unos términos no exclusivos. Recuerda que con esta licencia el editor no puede redistribuirlo más --- a menudo se le llama un acuerdo de sitio cerrado cuando compran el derecho de publicar el juego en su propio portal. El coste normal de una licencia no exclusiva esta alrededor de 500 USD.

- -

Subscripciones

- -

También hay una opción para obtener un dinero pasivo mensual, a través de un acuerdo de subscripción. En lugar de obtener un único pago, puedes obtener pequeños pagos de dinero por juego, por mes --- puede estar entorno a 20-50 USD por mes, por juego. Normalmente depende de ti, si quieres ganar todo el dinero en un solo pago o ganarlo por meses. Recuerda que puede ser cancelado, o sea que no es una solución que funcione indefinidamente.

- -

Ingresos por publicidad

- -

Puedes implementar anuncios en tu juego tu mismo e intentar encontrar el tráfico adecuado para ganar un poco de dinero, pero también puedes hacer un acuerdo de reparto de ingresos con un editor. Los editores se encargarán de dirigir el tráfico y de dividir los beneficios --- habitualmente los acuerdos son de 70/30% o 50/50%, ganado por mes.

- -

Recuerda que muchos nuevos editores de baja calidad querrán coger tu juego con ingresos por anuncios, en lugar de licencia, porque será más barato para ellos y podrías terminar con beneficios de 2 USD por juego por trato completado. Ten cuidado cuando contrates con nuevos editores --- algunas veces es mejor reducir el coste de la licencia a un editor conocido, en lugar de que te defraude un nuevo editor por más dinero.

- -

Los editores cogen tus juegos para la participación en los beneficios, y/o licenciar podrá requerir implementar sus propias APIs, lo cual dará un trabajo extra, asi que considera eso en tu precio final.

- -

Marca

- -

Puedes vender los derechos de usar tu juego para la marca, o hacerlo tu mismo.  En el primer caso, es casi como una licencia no exclusiva, pero el cliente normalmente compra derechos para el código e implementarán sus propios gráficos. En el segundo caso, es como un trato independiente, pero estas reutilizando el código y añadiendo gráficos proporcionados por los clientes, algunas veces implementándolos como ellos te enseñen. Por ejemplo, si tu tienes un juego donde un jugador golpea los artículos de comida, podrías cambiar la comida a los productos del cliente para darles publicidad. Los precios en este modelo varían mucho dependiendo de la marca, cliente, y las horas que le eches.

- -

Otras estrategias de monetización no enfocadas al juego

- -

Hay otros caminos en los que puedes ganar dinero cuando haces juegos HTML5, y ni siquiera tiene que estar relacionado con el juego.

- -

Venta de recursos

- -

Si eres un diseñador gráfico, puedes vender los bienes de los juegos que has creado, o algo completamente nuevo exclusivamente para ese propósito en tiendas online como  Envato Market. No es mucho, pero si eres un diseñador conocido, puede ser una forma de ganar un dinero extra.

- -

Escribir artículos y tutoriales

- -

Es posible escribir artículos sobre tus juegos y que te paguen por ello. La promoción del juego y la monetización al mismo tiempo es un ganar-ganar, y si no abusas de ello con muchos anuncios, los lectores disfrutarán leyendo los artículos y aprenderán una o dos cosas. Si te enfocas en compartir el conocimiento primero y usas tus juegos solo como ejemplos, estará bien. Visita Tuts+ Game Development o sitios web similares para tener oportunidades donde escribir artículos.

- -

Mercancías

- -

Puedes vender camisetas, pegatinas o otros objetos --- algunos desarrolladores ganan más dinero con las mercancías que con sus propios juegos, pero solo funciona en juegos muy populares y reconocidos, como Angry Birds. Todavía, puede ser otra forma de ganar un poco de dinero. Cuanto más diversificados sean tus ingresos, mejor será tu estabilidad comercial.

- -

Donaciones

- -

Cuando todo lo demás falla puedes intentar poner un botón de donaciones en la página de tu juego y pedir apoyo de la comunidad. Algunas veces funciona, pero solo si el jugador te conoce y siente que te ayudará. Este es el porque de que manejar cuidadosamente la comunidad es tan importante. Funcionó con la competición de js13kGames --- todos los participantes obtuvieron una camiseta gratis, y algunos incluso dieron unos cuantos dólares para ayudarlo a seguir funcionado en los próximos años.

- -

Resumen

- -

Hay muchas maneras de ganar dinero --- todo lo que se aplica al mundo de los juegos AAA "normalmente" puede ser, más o menos, aplicable a los juegos casuales HTML5. Sin embargo, también podrías enfocarte en vender licencias, hacer marcas, o ganar unos beneficios compartidos de los anuncios. Depende totalmente de ti, que camino vas a seguir.

diff --git a/files/es/games/tools/asm.js/index.html b/files/es/games/tools/asm.js/index.html new file mode 100644 index 0000000000..bd41ed70a3 --- /dev/null +++ b/files/es/games/tools/asm.js/index.html @@ -0,0 +1,29 @@ +--- +title: asm.js +slug: Games/Herramients/asm.js +tags: + - JavaScript + - asm.js +translation_of: Games/Tools/asm.js +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +
+

Asm.js es un subconjunto de JavaScript que es altamente optimizable. Este artículo analiza exactamente lo que está permitido en el subconjunto asm.js, las mejoras que confiere, donde y cómo puedo utilizarlo, y otros recursos y ejemplos.

+
+ +

¿Qué es asm.js exactamente?

+ +

Es un subconjunto muy pequeño y estricto de JavaScript que solo permite cosas como `while`, `if`, números, funciones con nombres de nivel superior y otras construcciones simples. No permite objetos, cadenas, cierres y básicamente cualquier cosa que requiera una asignación de la pila. El código asm.js se parece al lenguaje de programación "C" en muchos aspectos, pero es JavaScript completamente válido que se ejecuta en todos los motores actuales. Impulsa los motores JS para optimizar este tipo de código, y le da a los compiladores como Emscripten una definición clara de qué tipo de código generar. A continuación, mostraremos cómo es un código asm.js y explicaremos cómo le ayuda y cómo puede usarlo.

+ +

Este subconjunto de JavaScript ya está altamente optimizado en muchos motores de JavaScript que utilizan técnicas de compilación Just-In-Time (JIT) sofisticadas. Sin embargo, al definir un estándar tan explícito, podemos trabajar en la optimización de este tipo de código aún más y obtener el máximo rendimiento posible. Facilita la colaboración en múltiples motores JS porque es fácil de comparar. La idea es que este tipo de código se ejecute muy rápido en cada motor, y si no lo hace, es que hay un error y es un claro mensaje de que los motores deben optimizarse.

+ +

También facilita la tarea de las personas que escriben compiladores que desean generar código de alto rendimiento en la web. Pueden consultar las especificaciones de asm.js para saber que se ejecutará rápidamente si se adhieren a los patrones de asm.js. Emscripten, un compilador de C/C++ a JavaScript, genera código asm.js para que funcione con un rendimiento casi nativo en varios navegadores.

+ +

Además, si un motor elige reconocer especialmente código asm.js, se pueden realizar aún más optimizaciones. Firefox es el único navegador que hace esto ahora.

+ +

Resumen del lenguaje asm.js

+ +

asm.js es un lenguaje de programación intermedio. Tiene una tasa de rendimiento muy predecible porque está limitada a un subconjunto extremadamente restringido de JavaScript que proporciona solo enteros, números en coma flotante, aritmética, llamadas a funciones y accesos de pila de tipo estricto. Las características de rendimiento son más cercanas al código nativo que las de JavaScript estándar. El uso del subconjunto de JavaScript asm.js ya es compatible con los principales navegadores web. Como asm.js se ejecuta en un navegador, depende en gran medida del navegador y del hardware.

diff --git a/files/es/games/tools/index.html b/files/es/games/tools/index.html new file mode 100644 index 0000000000..e09812b07d --- /dev/null +++ b/files/es/games/tools/index.html @@ -0,0 +1,46 @@ +--- +title: Herramientas para desarrolladores de juegos +slug: Games/Herramients +tags: + - NeedsContent + - NeedsTranslation + - aplicaciones + - juegos +translation_of: Games/Tools +--- +
{{GamesSidebar}}
+

En esta pagina puedes encontrar enlaces a nuestros articulos de desarrollo de juegos, que enventualmente apuenta a cubrir frameworks, compiladores y herramientas de depuracion.

+
+
+
+ asm.js
+
+ asm.js es una subconjunto muy limitado del lenguaje Javascript que puede ser en gran medida optimizado y correr en modo compilador ahead-of-time (AOT) para un mejor rendimiento que el rendimiento tipico de JavaScript. Este es, por supuesto, bueno para juegos.
+
+ Emscripten
+
+

Un compilador LLVM a JavaScript; con Emscripten, tu puedes compilar C++ y otros lenguajes que se pueden compilar a LLVM y luego a JavaScript de alto rendimiento. Es una buena herramiente para portar aplicaciones a la Web! Aqui hay un util tutorial sobre Emscripten disponible en la wiki. Estamos mirando cubrir Emscripten en su propia seccion de MDN.

+
+
+ Gecko profiler
+
+ Gecko profiler es una extension que te permite perfilar tu codigo para ayudar donde tienes errores de rendimiento, asi puedes hacer que tu juego corra a velocidad maxima.
+
+ Motores de juegos y herramientas
+
+ Una lista de motores, plantillas y tecnologias utiles para los desarrolladores de juegos.
+
+ Shumway
+
+ Shumway es un renderizador para Adobe Flash construido completamente con JavaScript, WebGL, entre otros, haciendo una brecha entre Flash y los estandares Web. Este articulo muestra como hacer uso de Shumway y como contribuir arreglos y errores al proyecto.
+
+ Cadena de herramientas para desarrollar y depurar juegos
+
+ Como difieren de depurar una Web app normal? Que herramientas especializadas estan disponibles? Un lote de esto va a ser cubierto por Will en herramientas, pero aqui te vamos a proveer una cadena de herramientas practicas para depurar juegos con links a las cosas de Will: +
    +
  • Basic tools overview
    • +
  • Shader editor
    • +
  • Performance tools (still in production, estimated early 2014)
    • +
+
+
diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/botones/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/botones/index.html deleted file mode 100644 index 672d7528a6..0000000000 --- a/files/es/games/tutorials/2d_breakout_game_phaser/botones/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Botones -slug: Games/Tutorials/2D_breakout_game_Phaser/Botones -tags: - - 2D - - Botones - - JavaScript - - Lienzo - - Phaser - - Principiante - - Tutorial - - juegos -translation_of: Games/Tutorials/2D_breakout_game_Phaser/Buttons ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens", "Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay")}}

- -
-

Este es el paso 15 de 16 del tutorial Gamedev Phaser. Puedes encontrar el código fuente como debería quedar después de completar el tutorial en Gamedev-Phaser-Content-Kit/demos/lesson15.html.

-
- -

En lugar de comenzar el juego de inmediato, podemos dejar la decisión en el jugador añadiendo un botón de Inicio que pueda pulsar. Vamos a investigar cómo hacerlo.

- -

Variables nuevas

- -

Necesitamos una variable para almacenar un valor booleano que represente si el juego se está jugando actualmente o no, y otra para representar a nuestro botón. Añade las siguientes lineas a tu declaración de variables:

- -
var playing = false;
-var startButton;
-
- -

Cargando el botón de spritesheet

- -

Podemos cargar el botón de spritesheet de la misma manera que cargamos la animación del movimiento de la pelota. Añade lo siguiente al botón de la función preload():

- -
game.load.spritesheet('button', 'img/button.png', 120, 40);
-
- -

El marco de un solo botón mide 120 pixels de ancho y 40 pixels de alto.

- -

También se debe tomar el botón de spritesheet de Github, y guardarlo en el directorio /img.

- -

Añadiendo el botón al juego

- -

Para añadir el botón al juego usaremos el método add.button. Añade las siguientes lineas del botón a la función create():

- -
startButton = game.add.button(game.world.width*0.5, game.world.height*0.5, 'button', startGame, this, 1, 0, 2);
-startButton.anchor.set(0.5);
-
- -

Los parámetros del método button() son los siguientes:

- - - -
-

Nota: El evento over es igual al hover, out es cuando el puntero se mueve fuera del botón y down cuando el botón es presionado.

-
- -

Ahora necesitamos definir la función startGame() referenciada en el siguiente código:

- -
function startGame() {
-    startButton.destroy();
-    ball.body.velocity.set(150, -150);
-    playing = true;
-}
-
- -

Cuando se presiona el botón, se borra el botón, se establecen la velocidad inicial de la pelota y la variable playing a true.

- -

Para terminar con esta sección, vuelve a la función create(), encuentra la linea ball.body.velocity.set(150, -150);, y bórrala. Solo queremos que la pelota se mueva cuando se presione el botón, no antes.

- -

Mantener la paleta inmóvil antes de que comience el juego

- -

Funciona como se esperaba, pero aún podemos mover la paleta cuando el juego aún no ha comenzado, lo que parece un poco tonto. Para impedir esto, podemos aprovechar la variable playing y hacer que la paleta solo se mueva cuando el juego haya empezado. Para hacer esto, ajustamos la función update() así:

- -
function update() {
-    game.physics.arcade.collide(ball, paddle, ballHitPaddle);
-    game.physics.arcade.collide(ball, bricks, ballHitBrick);
-    if(playing) {
-        paddle.x = game.input.x || game.world.width*0.5;
-    }
-}
-
- -

De esta manera la paleta es inamovible hasta que todo esté cargado y preparado, pero sí cuando el juego actual comience.

- -

Compara tu código

- -

Puedes comprobar el código acabado en esta lección en la demo de abajo, y jugar para entender mejor cómo funciona:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/1rpj71k4/","","400")}}

- -

Siguientes pasos

- -

La última cosa que haremos en esta serie de artículos es hacer el juego más interesante añadiendo algo de aleatorización a la forma en la que la pelota rebota con la paleta.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens", "Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls/index.html new file mode 100644 index 0000000000..0276d5dc7f --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_phaser/bounce_off_the_walls/index.html @@ -0,0 +1,51 @@ +--- +title: Rebotar en las paredes +slug: Games/Tutorials/2D_breakout_game_Phaser/Rebotar_en_las_paredes +tags: + - 2D + - Canvas + - JavaScript + - Phaser + - Principiante + - Tutorial + - fuerte + - juegos +translation_of: Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Physics", "Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls")}}

+ +
+

Este es el paso 6 de 16 del tutorial de Gamedev Phaser. Puedes encontrar el código fuente como debería verse después de completar esta lección en Gamedev-Phaser-Content-Kit/demos/lesson06.html.

+
+ +

Ahora que las físicas han sido introducidas,podemos empezar a implementar la detección de colisión en el juego — primero miraremos las paredes.

+ +

Rebotando en las fronteras del mundo

+ +

La forma más fácil de hacer que nuestra bola rebote en las paredes es decirle al marco que queremos tratar los límites del elemento  {{htmlelement("canvas")}} como paredes y no dejar que la pelota pase por ellos.  En Phaser esto se puede puede lograr usando la propiedad collideWorldsBound. Añade esta linea justo después de la llamada al método game.physics.enable() existente:

+ +
ball.body.collideWorldBounds = true;
+
+ +

Ahora la bola se detendrá en el borde de la pantalla en lugar de desaparecer, pero no rebota. Para que esto ocurra tenemos que configurar su rebote. Añade la siguiente línea debajo de la anterior:

+ +
ball.body.bounce.set(1);
+
+ +

Intenta recargar index.html otra vez — ahora deberías ver la pelota rebotando en todas las paredes y moviéndose dentro del área del lienzo.

+ +

Compara tu código

+ +

Puedes consultar el código terminado para esta lección en la demostración en vivo a continuación, y jugar con él para comprender mejor cómo funciona:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/dcw36opz/","","400")}}

+ +

Próximos pasos

+ +

Esto está empezando a parecerse más a un juego ahora, Pero no podemos controlarlo de ninguna manera — es hora de que introduzacamos reproductor de paletas y controles.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Physics", "Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/buttons/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/buttons/index.html new file mode 100644 index 0000000000..672d7528a6 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_phaser/buttons/index.html @@ -0,0 +1,106 @@ +--- +title: Botones +slug: Games/Tutorials/2D_breakout_game_Phaser/Botones +tags: + - 2D + - Botones + - JavaScript + - Lienzo + - Phaser + - Principiante + - Tutorial + - juegos +translation_of: Games/Tutorials/2D_breakout_game_Phaser/Buttons +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens", "Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay")}}

+ +
+

Este es el paso 15 de 16 del tutorial Gamedev Phaser. Puedes encontrar el código fuente como debería quedar después de completar el tutorial en Gamedev-Phaser-Content-Kit/demos/lesson15.html.

+
+ +

En lugar de comenzar el juego de inmediato, podemos dejar la decisión en el jugador añadiendo un botón de Inicio que pueda pulsar. Vamos a investigar cómo hacerlo.

+ +

Variables nuevas

+ +

Necesitamos una variable para almacenar un valor booleano que represente si el juego se está jugando actualmente o no, y otra para representar a nuestro botón. Añade las siguientes lineas a tu declaración de variables:

+ +
var playing = false;
+var startButton;
+
+ +

Cargando el botón de spritesheet

+ +

Podemos cargar el botón de spritesheet de la misma manera que cargamos la animación del movimiento de la pelota. Añade lo siguiente al botón de la función preload():

+ +
game.load.spritesheet('button', 'img/button.png', 120, 40);
+
+ +

El marco de un solo botón mide 120 pixels de ancho y 40 pixels de alto.

+ +

También se debe tomar el botón de spritesheet de Github, y guardarlo en el directorio /img.

+ +

Añadiendo el botón al juego

+ +

Para añadir el botón al juego usaremos el método add.button. Añade las siguientes lineas del botón a la función create():

+ +
startButton = game.add.button(game.world.width*0.5, game.world.height*0.5, 'button', startGame, this, 1, 0, 2);
+startButton.anchor.set(0.5);
+
+ +

Los parámetros del método button() son los siguientes:

+ + + +
+

Nota: El evento over es igual al hover, out es cuando el puntero se mueve fuera del botón y down cuando el botón es presionado.

+
+ +

Ahora necesitamos definir la función startGame() referenciada en el siguiente código:

+ +
function startGame() {
+    startButton.destroy();
+    ball.body.velocity.set(150, -150);
+    playing = true;
+}
+
+ +

Cuando se presiona el botón, se borra el botón, se establecen la velocidad inicial de la pelota y la variable playing a true.

+ +

Para terminar con esta sección, vuelve a la función create(), encuentra la linea ball.body.velocity.set(150, -150);, y bórrala. Solo queremos que la pelota se mueva cuando se presione el botón, no antes.

+ +

Mantener la paleta inmóvil antes de que comience el juego

+ +

Funciona como se esperaba, pero aún podemos mover la paleta cuando el juego aún no ha comenzado, lo que parece un poco tonto. Para impedir esto, podemos aprovechar la variable playing y hacer que la paleta solo se mueva cuando el juego haya empezado. Para hacer esto, ajustamos la función update() así:

+ +
function update() {
+    game.physics.arcade.collide(ball, paddle, ballHitPaddle);
+    game.physics.arcade.collide(ball, bricks, ballHitBrick);
+    if(playing) {
+        paddle.x = game.input.x || game.world.width*0.5;
+    }
+}
+
+ +

De esta manera la paleta es inamovible hasta que todo esté cargado y preparado, pero sí cuando el juego actual comience.

+ +

Compara tu código

+ +

Puedes comprobar el código acabado en esta lección en la demo de abajo, y jugar para entender mejor cómo funciona:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/1rpj71k4/","","400")}}

+ +

Siguientes pasos

+ +

La última cosa que haremos en esta serie de artículos es hacer el juego más interesante añadiendo algo de aleatorización a la forma en la que la pelota rebota con la paleta.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens", "Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/rebotar_en_las_paredes/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/rebotar_en_las_paredes/index.html deleted file mode 100644 index 0276d5dc7f..0000000000 --- a/files/es/games/tutorials/2d_breakout_game_phaser/rebotar_en_las_paredes/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Rebotar en las paredes -slug: Games/Tutorials/2D_breakout_game_Phaser/Rebotar_en_las_paredes -tags: - - 2D - - Canvas - - JavaScript - - Phaser - - Principiante - - Tutorial - - fuerte - - juegos -translation_of: Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Physics", "Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls")}}

- -
-

Este es el paso 6 de 16 del tutorial de Gamedev Phaser. Puedes encontrar el código fuente como debería verse después de completar esta lección en Gamedev-Phaser-Content-Kit/demos/lesson06.html.

-
- -

Ahora que las físicas han sido introducidas,podemos empezar a implementar la detección de colisión en el juego — primero miraremos las paredes.

- -

Rebotando en las fronteras del mundo

- -

La forma más fácil de hacer que nuestra bola rebote en las paredes es decirle al marco que queremos tratar los límites del elemento  {{htmlelement("canvas")}} como paredes y no dejar que la pelota pase por ellos.  En Phaser esto se puede puede lograr usando la propiedad collideWorldsBound. Añade esta linea justo después de la llamada al método game.physics.enable() existente:

- -
ball.body.collideWorldBounds = true;
-
- -

Ahora la bola se detendrá en el borde de la pantalla en lugar de desaparecer, pero no rebota. Para que esto ocurra tenemos que configurar su rebote. Añade la siguiente línea debajo de la anterior:

- -
ball.body.bounce.set(1);
-
- -

Intenta recargar index.html otra vez — ahora deberías ver la pelota rebotando en todas las paredes y moviéndose dentro del área del lienzo.

- -

Compara tu código

- -

Puedes consultar el código terminado para esta lección en la demostración en vivo a continuación, y jugar con él para comprender mejor cómo funciona:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/dcw36opz/","","400")}}

- -

Próximos pasos

- -

Esto está empezando a parecerse más a un juego ahora, Pero no podemos controlarlo de ninguna manera — es hora de que introduzacamos reproductor de paletas y controles.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Physics", "Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html new file mode 100644 index 0000000000..d168aa0102 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html @@ -0,0 +1,101 @@ +--- +title: Rebota en las paredes +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls +--- +
{{GamesSidebar}}
+

{{IncludeSubnav("/es/docs/Games")}}

+
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado")}}

+ +
+

Este es el tercer paso de 10 del  tutorial Canvas para el desarrollo de juegos. Puedes encontrar el código fuente y pegarle un vistazo después de completar esta lección Gamedev-Canvas-workshop/lesson3.html.

+
+ +

Es agradable ver nuestra bola moviéndose, pero desaparece rápidamente de la pantalla, limitando la diversión que podemos tener con ella. Para superar esto, implementaremos una detección de colisión muy simple (que se explicará más adelante con más detalle) para hacer que la pelota rebote en los cuatro bordes del Canvas.

+ +

Detección de colisión simple

+ +

Para detectar la colisión verificamos si la bola está tocando (chocando con) la pared y si es así, cambiaremos la dirección de su movimiento en consecuencia.

+ +

Para facilitar los cálculos, definamos una variable llamada ballRadius que mantendrá el radio del círculo dibujado y se utilizará para los cálculos. Añade esto a tu código, en algún lugar por debajo de las declaraciones de variables existentes:

+ +
var ballRadius = 10;
+ +

Ahora actualice la línea que dibuja la bola dentro de la funcion drawBall() a esto:

+ +
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
+ +

Rebotando arriba y abajo

+ +

Hay cuatro paredes para rebotar la pelota - vamos a centrarnos en la de arriba en primer lugar. Tendremos que comprobar, en cada fotograma, si la pelota está tocando el borde superior del Canvas - si es así, invertiremos el movimiento de la bola para que empiece a moverse en la dirección opuesta y se mantenga dentro de los límites visibles. Recordando que el sistema de coordenadas comienza desde la parte superior izquierda, podemos llegar a algo como esto:

+ +
if(y + dy < 0) {
+    dy = -dy;
+}
+ +

Si el valor de y de la posición de la bola es menor que cero, cambie la dirección del movimiento en el eje y, estableciéndolo igual a sí mismo, invertido. Si la pelota se movía hacia arriba con una velocidad de 2 píxeles por fotograma, ahora se moverá "arriba" con una velocidad de -2 píxeles, lo que en realidad equivale a bajar a una velocidad de 2 píxeles por fotograma.

+ +

El código anterior se ocuparía de que la pelota rebote desde el borde superior, así que ahora vamos a pensar en el borde inferior:

+ +
if(y + dy > canvas.height) {
+    dy = -dy;
+}
+ +

Si la posición y de la pelota es mayor que la altura del canvas (recuerde que contamos los valores y desde la parte superior izquierda, de modo que el borde superior empieza en 0 y el borde inferior está en 480 píxeles, la altura del canvas), entonces rebota del borde inferior invirtiendo el movimiento del eje y como antes.

+ +

Podríamos fusionar esas dos sentencias en una para ahorrar código:

+ +
if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

Si cualquiera de las dos afirmaciones es verdadera, invierte el movimiento de la pelota.

+ +

Rebotando en la izquierda y derecha

+ +

Tenemos el borde superior e inferior cubiertos, así que pensemos en los de izquierda y derecha. Es muy similar en realidad, todo lo que tienes que hacer es repetir las declaraciones de x en lugar de y:

+ +
if(x + dx > canvas.width || x + dx < 0) {
+    dx = -dx;
+}
+
+if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

En este punto, debe insertar el bloque de código anterior en la función draw(), justo antes de la llave de cierre.

+ +

¡La pelota sigue desapareciendo en la pared!

+ +

Prueba tu código en este punto, y te quedarás impresionado - ¡ahora tenemos una pelota que rebotó en los cuatro bordes del canvas! Pero tenemos otro problema sin embargo - cuando la bola golpea cada pared se hunde en ella levemente antes de cambiar la dirección:

+ +

+ +

Esto es porque estamos calculando el punto de colisión de la pared y el centro de la bola, mientras que deberíamos hacerlo por su circunferencia. La bola debe rebotar justo después de que toca la pared, no cuando ya está a medio camino en la pared, así que vamos a ajustar nuestras declaraciones un poco para incluir eso. Actualice el último código que agregó, a esto:

+ +
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+}
+if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+    dy = -dy;
+}
+ +

Cuando la distancia entre el centro de la bola y el borde de la pared es exactamente igual que el radio de la pelota, cambiará la dirección del movimiento. Restando el radio de un ancho del eje y añadiéndolo al otro nos da la impresión de una adecuada detección de colisiones - la pelota rebota de las paredes como debería hacerlo.

+ +

Compara tu código

+ +

Chequea el código acabado para esta parte con el tuyo, y juega:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}

+ +
+

Ejercicio: cambia el color de la bola a un color al azar, cada vez que golpea una pared.

+
+ +

Siguientes pasos

+ +

Ahora hemos llegado al punto donde nuestra pelota se mueve y permanece en el tablero de juego. En el capítulo cuarto, veremos la implementación del control de una pala - vea Control de Pala y teclado.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html new file mode 100644 index 0000000000..99c944764b --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html @@ -0,0 +1,126 @@ +--- +title: Construye el muro de ladrillos +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +--- +
{{GamesSidebar}}
{{IncludeSubnav("/es/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones")}}

+ +
+

Este es el sexto paso de 10 del Tutorial del Lienzo (Canvas) para desarrollar juegos (Gamedev Canvas Tutorial). Puedes encontrar el código fuente como debería quedar tras completar esta lección en Gamedev-Canvas-workshop/lesson6.html.

+
+ +

Hemos cambiado la mecánica del juego y ahora ya podemos perder. Esto es genial porque significa que el juego finalmente se comporta como un juego. Sin embargo, pronto resultará aburrido si todo lo que puedes conseguir es hacer rebotar la pelota en las paredes y en la pala. Lo que el juego necesitamos es romper ladrillos con la bola. Ahora vamos a dibujar los ladrillos.

+ +

Declarar e inicializar las variables de los ladrillos

+ +

El propósito principal de esta lección consiste en escribir unas pocas líneas de código para los ladrillos, utilizando un bucle anidado que recorra una matriz bidimensional. Pero, antes, necesitamos preparar unas variables que definan la información sobre los ladrillos, como su ancho y alto, filas y columnas, etc. Añade estas líneas a tu programa, debajo de las otras variables que has definido antes:

+ +
var brickRowCount = 3;
+var brickColumnCount = 5;
+var brickWidth = 75;
+var brickHeight = 20;
+var brickPadding = 10;
+var brickOffsetTop = 30;
+var brickOffsetLeft = 30;
+ +

Aquí hemos definido el número de filas (Row) y columnas (Column) de ladrillos, su ancho (Width) y alto (Height), el hueco entre los ladrillos para que no se toquen (Padding), y un margen superior (Top) e izquierdo (Left) para que no se dibujen tocando los bordes.

+ +

Guardaremos nuestros ladrillos en una matriz bidimensional que contendrá las columnas (c) de los ladrillos. Cada columna contendrá, a su vez, toda la fila (r) de ladrillos. Cada ladrillo se va a representar con un objeto con las posiciones "x" e "y" en las que se dibujará. Añade esto detrás de las definiciones de las variables:

+ +
var bricks = [];
+for(c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(r=0; r<brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0 };
+    }
+}
+ +

El código anterior pasará por las filas y las columnas y creará los ladrillos. TEN EN CUENTA que esos objetos que representan a los ladrillos también se utilizarán para detectar colisiones más adelante.

+ +

Por si no lo terminas de entender... bricks[0][0] es el primer ladrillo (columna 0, fila 0) y se dibujará en "x" 0 e "y" 0. El siguiente ladrillo será el brick[0][1] (columna 0, fila 1) y se dibujará también en (0,0). Así, continuaremos hasta el final de la primera columna, que será el ladrillo bricks[0][2] porque hay 3 filas, de la 0 a la 2. Terminará así el bucle de dentro y seguirá el de fuera, valiendo ahora la "c" 1. Seguiremos recorriendo bricks[] hasta llegar a bricks[2][4], que es el último ladrillo.

+ +

Dibujar los bloques

+ +

Ahora vamos a crear una función para recorrer todos los bloques de la matriz y dibujarlos en la pantalla:

+ +
function drawBricks() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            bricks[c][r].x = 0;
+            bricks[c][r].y = 0;
+            ctx.beginPath();
+            ctx.rect(0, 0, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}
+
+ +

Viene a ser lo mismo de antes, sólo que hemos añadido ctx.rect() para dibujar un rectángulo por cada ladrillo, además de otras llamadas a funciones para que, efectivamente, se dibuje el rectángulo.

+ +

Cada ladrillo se dibujará en la posición (0, 0), tendrá un ancho brickWidth y un alto de brickHeight.

+ +

Estupendo pero... ¡estamos dibujando todos los ladrillos en el mismo sitio! ¡Eso no puede ser!

+ +

Vamos a calcular en qué posición "x" e "y" se tiene que dibujar cada ladrillo así:

+ +
var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+
+ +

El primer ladrillo se dibujará arriba a la izquierda, concretamente en (brickoffsetLeft, brickOffsetTop), porque c y r valen 0.

+ +

El siguiente ladrillo (columna 0, fila 1) se dibujará más abajo.

+ +

Intenta hacer tú mismo los cálculos y verás cómo cada ladrillo de la misma columna se dibujará más abajo o más arriba según en qué fila se encuentre.

+ +

También verás cómo cada ladrillo de la misma fila se dibujará más a la izquierda o a la derecha según en qué columna se encuentre.

+ +

Vamos a terminar la función drawBricks() para que quede así:

+ +
function drawBricks() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+            bricks[c][r].x = brickX;
+            bricks[c][r].y = brickY;
+            ctx.beginPath();
+            ctx.rect(brickX, brickY, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}
+ +

Dibujar los bloques (ahora sí)

+ +

Lo estamos haciendo muy bien, pero si has probado te habrás dado cuenta de que no se dibuja nada. ¿Qué es lo que falla?

+ +

Pues, sencillamente, que tenemos definida la función drawBricks() pero no la llamamos desde ningún sitio.

+ +

Añade drawBricks() dentro de draw(), justo antes de drawBall ():

+ +
drawBricks();
+
+ +

Compara tu código

+ +

Compara tu código con este:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/2/","","320")}}

+ +
+

Ejercicio: Prueba a cambiar el número de bloques por fila o columna, o sus posiciones (utiliza las variables que definiste al principio de este capítulo).

+
+ +

Pasos siguientes

+ +

¡Así que ahora tenemos ladrillos! Un gran avance pero... la pelota no los rompe, simplemente los atraviesa. En el siguiente capítulo lo arreglaremos: Detección de colisiones.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html new file mode 100644 index 0000000000..e6d950b834 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html @@ -0,0 +1,128 @@ +--- +title: Detección de colisiones +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win")}}

+ +
+

Este es el séptimo paso de los 10 del juego "Gamedev Canvas tutorial". Puedes encontrar el código como deberá quedar después de completar la leción en Gamedev-Canvas-workshop/lesson7.html.

+
+ +

Ya tenemos los ladrillos en la pantalla pero el juego todavía no es muy interesante, porque la bola los atraviesa. Tenemos que pensar una manera de detectar colisiones para que la bola pueda rebotar en los ladrillos y romperlos.

+ +

Nosotros decidimos cómo implementar esto, por supuesto, pero puede ser complicado calcular si la bola está tocando el rectángulo o no, porque no hay funciones del <canvas> que sirvan para saberlo. En este tutorial vamos a hacerlo de la manera más fácil que existe: comprobaremos si el centro de la bola está tocando (colisionando) con cualquiera de los ladrillos. No siempre funcionará a la perfección y hay formas de detectar colisiones más sofisticadas que funcionan mejor, pero no nos interesa verlas porque estamos aprendiendo y tenemos que hacer las cosas fáciles.

+ +

Una función para detectar colisiones

+ +

Para lograr nuestro objetivo vamos a definir una función que, con un bucle, recorrerá todos los ladrillos y comparará la posición de cada uno con la posición de la bola, cada vez que se dibuje un fotograma. Para que el código sea más legible definiremos la variable "b" que almacenará el objeto ladrillo en cada vuelta de bucle:

+ +
function collisionDetection() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            // calculations
+        }
+    }
+}
+ +

Si el centro de la bola está dentro de las coordenadas de uno de nuestros ladrillos, cambiaremos la dirección de la bola. Se cumplirá que el centro de la bola está dentro de ladrillo si se cumplen al mismo tiempo estas cuatro condiciones:

+ + + +

Traducimos esto a JavaScript:

+ +
function collisionDetection() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                dy = -dy;
+            }
+        }
+    }
+}
+ +

Añade lo anterior a tu código, debajo de la función keyUpHandler().

+ +

Hacer que los ladrillos desaparezcan cuando reciben un golpe

+ +

El código anterior funcionará correctamente y la bola cambiará de dirección. El problema es que los ladrillos siguen donde están. Tenemos que imaginar una forma de ocuparnos de los que ya hemos golpeado con la bola. Podemos hacerlo añadiendo un parámetro extra para indicar si queremos pintar cada ladrillo en la pantalla o no. En la parte del código donde inicializamos los ladrillos, añadiremos una propiedad status a cada ladrillo. Cambia tu código fijándote en la línea que está resaltada:

+ +
var bricks = [];
+for(c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(r=0; r<brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0, status: 1 };
+    }
+}
+ +

A continuación consultaremos el "status" de cada ladrillo para saber si lo tenemos que dibujar o no. Si "status" vale 1, lo dibujaremos. Si vale 0, no lo dibujaremos porque habrá sido golpeado por la bola. Actualiza tu función drawBricks() para que quede así:

+ +
function drawBricks() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            if(bricks[c][r].status == 1) {
+                var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+                var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+                bricks[c][r].x = brickX;
+                bricks[c][r].y = brickY;
+                ctx.beginPath();
+                ctx.rect(brickX, brickY, brickWidth, brickHeight);
+                ctx.fillStyle = "#0095DD";
+                ctx.fill();
+                ctx.closePath();
+            }
+        }
+    }
+}
+ +

Actualizar el "status" en la función de detección de colisiones

+ +

Ahora tenemos que ocuparnos del valor de "status" en la función collisionDetection(): si el ladrillo está activo (status 1) comprobaremos si hay colisión. Si hay colisión, pondremos el "status" de ese ladrillo a 0 para no volver a pintarlo. Actualiza collisionDetection() así:

+ +
function collisionDetection() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                }
+            }
+        }
+    }
+}
+ +

Activar la función de detección de colisiones

+ +

Ya sólo falta llamar a la función collisionDetection() desde la función draw(). Añade la línea siguiente dentro de draw() function, justo después de la llamada a drawPaddle():

+ +
collisionDetection();
+
+ +

Compara tu código

+ +

Ahora se comprueban las colisiones cada vez que se dibuja un fotograma. Concretamente, miramos si la bola colisiona con cada ladrillo. ¡Ahora ya podemos romper ladrillos! :-

+ +

{{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/5/","","320")}}

+ +
+

Ejercicio: cambia el color de la bola cada vez que choque con un ladrillo.

+
+ +

Pasos siguientes

+ +

Definitivamente, lo estamos consiguiendo. ¡Adelanteeee! En el capítulo octavo nos ocuparemos de la Puntuación y fin del juego ganando.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html new file mode 100644 index 0000000000..59703d3bc7 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html @@ -0,0 +1,108 @@ +--- +title: Crea el lienzo (canvas) y dibuja en él +slug: >- + Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it +translation_of: >- + Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola")}}

+ +
+

Este es el primero de los 10 pasos del Tutorial del Lienzo (Canvas) para desarrollar juegos (Gamedev Canvas Tutorial). Puedes encontrar el código fuente como debería quedar tras completar esta lección en Gamedev-Canvas-workshop/lesson1.html.

+
+ +

Antes de que podamos programar la parte funcional del juego, necesitamos crear la estructura básica de la página que lo va a contener. Podemos hacerlo utilizando HTML y el elemento  {{htmlelement("canvas")}} .

+ +

El HTML del juego

+ +

La estructura del documento HTML es muy simple, porque todo el juego se visualizará dentro del elemento {{htmlelement("canvas")}}. Con tu editor de textos favorito, prepara un documento en blanco, guárdalo como index.html en un lugar adecuado, y escribe el siguiente código:

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Gamedev Canvas Workshop</title>
+    <style>
+    	* { padding: 0; margin: 0; }
+    	canvas { background: #eee; display: block; margin: 0 auto; }
+    </style>
+</head>
+<body>
+
+<canvas id="myCanvas" width="480" height="320"></canvas>
+
+<script>
+	// JavaScript code goes here
+</script>
+
+</body>
+</html>
+
+ +

En la cabecera (head) tenemos un charset, el título de la página {{htmlelement("title")}} y un poco de CSS básico. El {{htmlelement("body")}} contiene los elementos{{htmlelement("canvas")}} y {{htmlelement("script")}}. Representaremos el juego en el primero y escribiremos el código JavaScript que lo controla en el segundo. El elemento  {{htmlelement("canvas")}} tiene el id myCanvas para que podamos hacer referencia a él con facilidad, y mide 480 píxeles de ancho por 320 de alto. Todo el código JavaScript que vamos a escribir en este tutorial lo pondremos entre las etiquetas <script> y </script>.

+ +

El lienzo (canvas)

+ +

Para que podamos visualizar los gráficos en el elemento {{htmlelement("canvas")}}, primero tenemos que preparar una referencia a él en JavaScript. Añade lo siguiente después de la etiqueta <script>:

+ +
var canvas = document.getElementById("myCanvas");
+var ctx = canvas.getContext("2d");
+ +

Aquí estamos guardando una referencia al elemento {{htmlelement("canvas")}} en la variable canvas. Después estamos creando la variable ctx para guardar el contexto de gráficos 2D, que es la herramienta  que realmente utilizaremos para dibujar.

+ +

Veamos un fragmento de código de ejemplo que dibuja un cuadrado rojo en el canvas. Añade el código a continuación y abre el archivo index.html con un navegador para comprobar que funciona:

+ +
ctx.beginPath();
+ctx.rect(20, 40, 50, 50);
+ctx.fillStyle = "#FF0000";
+ctx.fill();
+ctx.closePath();
+ +

Todas las instrucciones están entre los métodos {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} y {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}. Estamos definiendo un rectángulo utilizando {{domxref("CanvasRenderingContext2D.rect()","rect()")}}: los dos primeros valores especifican las coordenadas de la esquina superior izquierda del rectángulo en el canvas, y  los otros dos sirven para indicar el ancho y el alto. En nuestro caso, el rectángulo se dibuja a 20 píxeles desde la izquierda de la pantalla y 40 píxeles desde la parte de arriba, y tiene 50 píxeles de ancho y 50 de alto, con lo que obtenemos un cuadrado perfecto. La propiedad {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} guarda un color que utilizará el método {{domxref("CanvasRenderingContext2D.fill()","fill()")}} para pintar el cuadrado que, en nuestro caso, será rojo.

+ +

Podemos dibujar otras cosas aparte de rectángulos. Aquí hay un fragmento de código que dibuja un círculo verde. Prueba a añadir esto al final de tu código JavaScript, guárdalo y recarga la página en el navegador:

+ +
ctx.beginPath();
+ctx.arc(240, 160, 20, 0, Math.PI*2, false);
+ctx.fillStyle = "green";
+ctx.fill();
+ctx.closePath();
+ +

Como puedes ver, estamos utilizando otra vez los métodos {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} y {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}. De lo que hay en medio, la parte más importante del código anterior es el método {{domxref("CanvasRenderingContext2D.arc()","arc()")}}. Tiene seis parámetros:

+ + + +

La propiedad {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} tiene un valor distinto al que habíamos puesto antes. Esto se debe a que, como ocurre en CSS, el color se puede especificar como un valor hexadecimal, como un nombre de color en inglés, la función rgba(), o cualquiera de los otros métodos de descripción de color que existen.

+ +

En lugar de utilizar {{domxref("CanvasRenderingContext2D.fill()","fill()")}} y rellenar las formas con colores, podemos utilizar {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}} para colorear únicamente el trazo exterior. Prueba a añadir también esto a tu código JavaScript:

+ +
ctx.beginPath();
+ctx.rect(160, 10, 100, 40);
+ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
+ctx.stroke();
+ctx.closePath();
+ +

El código anterior dibuja un rectángulo vacío con el perímetro azul. Gracias al canal alfa de la función rgba(), que es el cuarto valor (Red, Green, Blue, Alpha), el color azul será medio transparente.

+ +

Compara tu código

+ +

Aquí está el código fuente completo de la primera lección, ejecutándose en un JSFiddle:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}

+ +
+

Ejercicio: cambia el tamaño y el color de las figuras.

+
+ +

Pasos siguientes

+ +

Hemos preparado la estructura HTML básica y hemos aprendido un poquito a manejar el canvas. Para continuar, en el segundo capítulo averiguaremos cómo mover la bola en nuestro juego (Mueve la bola).

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html new file mode 100644 index 0000000000..a3bd5e2c2e --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html @@ -0,0 +1,95 @@ +--- +title: Terminando +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{Previous("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

+ +
+

Este es el último de los 10 pasos del Gamedev Canvas tutorial. Puedes encontrar el código fuente tal y como quedará al terminar esta lección en Gamedev-Canvas-workshop/lesson10.html.

+
+ +

Siempre es posible mejorar cualquier juego que hagamos. Por ejemplo, podemos dar vidas al jugador. Así, aunque pierda la bola una o dos veces, todavía puede intentar derribar todo el muro. También podemos mejorar los aspectos gráficos.

+ +

Dar vidas al jugador

+ +

Dar vidas es bastante sencillo. Primero, añade una variable para guardar el número de vidas que tiene en cada momento. Ponla después de las que ya tienes:

+ +
var lives = 3;
+ +

Mostrar por pantalla el número de vidas es prácticamente lo mismo que mostrar el contador de puntos. Añade la función siguiente detrás de la función drawScore():

+ +
function drawLives() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
+}
+ +

En lugar de terminar el juego inmediatamente, restaremos una vida hasta que ya no quede ninguna. También podemos colocar la bola y la paleta en la posición inicial cuando el jugador empiece con la vida siguiente. En la función draw() cambia las dos líneas siguientes...

+ +
alert("GAME OVER");
+document.location.reload();
+ +

... por estas otras:

+ +
lives--;
+if(!lives) {
+    alert("GAME OVER");
+    document.location.reload();
+}
+else {
+    x = canvas.width/2;
+    y = canvas.height-30;
+    dx = 2;
+    dy = -2;
+    paddleX = (canvas.width-paddleWidth)/2;
+}
+ +

Ahora, cuando la bola toca el fondo, restamos una vida. Si no queda ninguna, el jugador pierde y termina la partida. Si queda alguna, entonces colocamos la bola y la paleta en el centro, y hacemos que la bola vaya en la nueva dirección correcta y a la velocidad inicial.

+ +

Sacar por pantalla el contador de vidas

+ +

Tienes que añadir una llamada a drawLives() dentro de draw() debajo de la llamada a drawScore():

+ +
drawLives();
+
+ +

Mejorar el refresco con requestAnimationFrame()

+ +

Ahora vamos a ocuparnos de algo que no es particular de este juego, sino de la forma en la que se muestran las imágenes en pantalla.

+ +

{{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} ayuda al navegador a refrescar la imagen mejor que con el método {{domxref("windowTimers.setInterval()", "setInterval()")}} que estamos utilizando. Cambia la línea siguiente...

+ +
setInterval(draw, 10);
+ +

...por esta otra:

+ +
draw();
+ +

Y, ahora, al final de la función draw(), justo antes de la llave que la cierra, añade la línea siguiente, que hará que la función draw() se llame a sí misma una y otra vez:

+ +
requestAnimationFrame(draw);
+ +

Ahora draw() se ejecuta una y otra vez con un bucle requestAnimationFrame() pero, en lugar de hacerlo cada 10 milisegundos, dejamos que sea el navegadro quien decida cada cuánto tiempo. El navegador sincronizará el refresco, es decir, el número de fotogramas por segundo, a lo que sea capaz la máquina que está ejecutando el juego. De este modo la animación será más eficiente y más suave que el viejo método setInterval().

+ +

Compara tu código

+ +

Ya hemos terminado. ¡La versión final del juego está lista para publicar!

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/9temh0ta/","","320")}}

+ +
+

Ejercicio: cambia el número de vidas y el ángulo de la trayectoria de la bola cuando golpea la paleta.

+
+ +

Game over - de momento!

+ +

Enhorabuena, has terminado todas las lecciones. Ya has aprendido las técnicas básicas de manipulación del <canvas> y la lógica que hay detrás de los juegos 2D sencillos.

+ +

Ahora sería un buen momento para aprender a utilizar entornos de desarrollo (frameworks) y de continuar con el desarrollo de juegos. Puedes echar un vistazo a estas otra forma de realizar el mismo juego que has visto en 2D breakout game using Phaser, o de echar un vistazo al tutorial Cyber Orb built in Phaser. También puedes leer el contenido de Games section on MDN para inspirarte y seguir aprendiendo.

+ +

También puedes volve al índice de este tutorial. ¡Diviértete programando!

+ +

{{Previous("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html new file mode 100644 index 0000000000..d57ccef444 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html @@ -0,0 +1,75 @@ +--- +title: Fin del juego +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego +tags: + - Canvas + - Fin del juego + - JavaScript + - Tutorial + - graficos +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over +--- +
{{GamesSidebar}}
{{IncludeSubnav("/es-ES/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques")}}

+ +
+

Este es el quinto paso de 10 del Gamedev Canvas tutorial. Puedes ver como debería quedar el código fuente después de completar esta lección en Gamedev-Canvas-workshop/lesson5.html.

+
+ +

Es divertido ver la bola rebotando en las paredes y ser capaz de mover la pala pero, aparte de eso, el juego no hace nada y no tiene ningún progreso ni un objetivo final. Sería bueno desde el punto de vista del juego poder perder. La lógica asociada a perder en este juego es fácil de entender: si se te escapa la bola y alcanza el borde inferior de la pantalla, pierdes y se acabó el juego.

+ +

Implementar el final del juego

+ +

Intentemos implementar el final del juego en nuestro juego. Aquí está el trozo de código de la tercera lección en donde hicimos que la pelota rebotara en las paredes:

+ +
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+}
+
+if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+    dy = -dy;
+}
+ +

En lugar de dejar que la pelota rebote en las cuatro paredes, vamos a permitir que lo haga sólo en tres: izquierda, arriba y derecha. Alcanzar la pared inferior supondrá el fin del juego. Editaremos el segundo bloque if y lo convertiremos en un "if else" que activará el estado de "final de juego" cuando la pelota colisione con el borde inferior del terreno de juego. Por ahora nos conformaremos con mostrar un mensaje con la función alert() y con reiniciar el juego volviendo a cargar la página. Modifica el segundo if para que quede así:

+ +
if(y + dy < ballRadius) {
+    dy = -dy;
+} else if(y + dy > canvas.height-ballRadius) {
+    alert("GAME OVER");
+    document.location.reload();
+}
+ +

Hacer que la pala golpee la bola

+ +

Para terminar esta lección sólo nos falta detectar la colisión de la bola y la paleta para que pueda rebotar, volviendo hacia la zona de juego. La manera más sencilla de hacerlo es comprobar si el centro de la bola está entre los límites izquierdo y derecho de la paleta. Actualiza el último fragmento del código, el "if else" de antes, para que te quede así:

+ +
if(y + dy < ballRadius) {
+    dy = -dy;
+} else if(y + dy > canvas.height-ballRadius) {
+    if(x > paddleX && x < paddleX + paddleWidth) {
+        dy = -dy;
+    }
+    else {
+        alert("GAME OVER");
+        document.location.reload();
+    }
+}
+ +

Si la bola toca el borde inferior del lienzo (Canvas) debemos comprobar si golpea la pala. Si es así, entonces rebota como el jugador se imagina que va a ocurrir; si no, el juego ha terminado.

+ +

Compara tu código

+ +

Aquí tienes el código que funciona para que lo compares con el tuyo:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","320")}}

+ +
+

Ejercicio: haz que la bola se mueva más rápida cuando golpea la pala.

+
+ +

Siguientes pasos

+ +

Lo estamos haciendo bastante bien hasta ahora y nuestro juego está empezando a despertar interés ahora que se puede perder. Pero todavía falta algo. Vamos a pasar al sexto capítulo, Construir el muro de ladrillos, y crear algunos ladrillos para que la bola los destruya.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/index.html new file mode 100644 index 0000000000..10ea794d5f --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/index.html @@ -0,0 +1,52 @@ +--- +title: Famoso juego 2D usando JavaScript puro +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro +tags: + - 2D Canvas JavaScript Tutorial + - Principiante Juegos +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript +--- +
{{GamesSidebar}}
{{IncludeSubnav("/es-ES/docs/Games")}}
+ +

{{Next("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it")}}

+ +

En este tutorial paso a paso creamos un juego de la MDN, sencillo y muy famoso, escrito íntegramente en JavaScript puro. Todos los elementos gráficos aparecerán dentro de la etiqueta {{htmlelement("canvas")}} de HTML5.

+ +

Cada paso tiene ejemplos editables y listos para ejecutar, para que puedas ver qué aspecto debería tener el ejercicio en cada momento. Apenderás a utilizar el elemento {{htmlelement("canvas")}} para implementar mecánicas de juego fundamentales como la representación de imágenes, el movimiento, la detección de colisiones, los mecanismos de control y el final del juego ganando o perdiendo.

+ +

Para aprovechar al máximo esta serie de artículos necesitas tener ya un conocimiento básico o intermedio de JavaScript. Cuando termines este tutorial serás capaz de construir tus propios juegos Web.

+ +

Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.

+ +

Detalle de las lecciones

+ +

Todas las lecciones y las diferentes versiones del famoso juego MDN que estamos construyendo juntos están disponibles en GitHub:

+ +
    +
  1. Crea el lienzo (canvas) y dibuja en él
    2. +
  2. Mueve la bola
    3. +
  3. Rebota en las paredes
    4. +
  4. Control de la pala y el teclado
    5. +
  5. Fin del juego
    6. +
  6. Construye el muro de ladrillos
    7. +
  7. Detección de colisiones
    8. +
  8. Cuenta los puntos y gana
    9. +
  9. Controles del ratón
    10. +
  10. Finalizando
    11. +
+ +

Empezar con JavaScript puro es la mejor forma de adquirir un conocimiento sólido sobre desarrollo de juegos. Después, puedes escoger cualquier entorno de desarrollo (framework) que te guste y usarlo para tus proyectos. Los frameworks son simplemente herramientas construidas con el lenguaje JavaScript; por tanto aunque planees trabajar con ellas, es bueno aprender primero  sobre el mismo lenguaje para saber exactamente qué es lo que hay por debajo. Los frameworks aceleran el tiempo de desarrollo y ayudan a tener en cuenta las partes aburridas del juego, pero si algo no funciona como esperas, siempre puedes intentar depurarlo o simplemente escribir tu solución en JavaScript puro.

+ +
+

Nota: Si estás interesado en aprender sobre el desarrollo de juegos en 2D usando una entorno de desarrollo, consulta esta serie homóloga, famoso juego 2D usando Phaser.

+
+ +
+

Nota:  Esta serie de artículos puede usarse como material para talleres prácticos de desarrollo de juegos. También puedes hacer uso del kit de contenido canvas Gamedev  basado en este tutorial si quieres dar una charla sobre desarrollo de juegos en general.

+
+ +

Siguientes pasos

+ +

Vale, ¡vamos a empezar! Dirígete hacia el primer tema — Crea el lienzo (canvas) y dibuja en él.

+ +

{{Next("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it")}} 

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html new file mode 100644 index 0000000000..65e32f0ac2 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html @@ -0,0 +1,53 @@ +--- +title: Controles del ratón +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando")}}

+ +
+

Este es el noveno paso de 10 del tutorial Canvas para el desarrollo de juegos. Puedes encontrar el código y pegarle un vistazo después de completar esta lección Gamedev-Canvas-workshop/lesson9.html.

+
+ +

El juego en sí está terminado, así que ahora vamos a pulirlo. Ya le hemos puesto el control del teclado y ahora le añadiremos el control del ratón.

+ +

Detectar el movimiento del ratón

+ +

Detectar el movimiento del ratón es más fácil que detectar las pulsaciones de las teclas. Todo lo que necesitamos es un añadir "escuchador" al evento {{event("mousemove")}}.Añade esta línea destrás de los otros "listeners", justo debajo del evento keyup:

+ +
document.addEventListener("mousemove", mouseMoveHandler, false);
+ +

Asociar el movimiento de la pala con el movimiento del ratón

+ +

Podemos cambiar la posición de la pala basándonos en las coordenadas del puntero del ratón. Eso es lo que hace la función siguiente. Añádela detrás de la línea que acabas de añadir:

+ +
function mouseMoveHandler(e) {
+    var relativeX = e.clientX - canvas.offsetLeft;
+    if(relativeX > 0 && relativeX < canvas.width) {
+        paddleX = relativeX - paddleWidth/2;
+    }
+}
+ +

En esta función calculamos un valor relativeX, que es la posición horizontal del ratón en el "viewport" (e.clientX), menos la distancia entre el borde izquierdo del terreno de juego y el borde izquierdo del "viewport" (canvas.offsetLeft).

+ +

Si el valor resultante es mayor que cero y menor que el ancho del terreno de juego, es que el ratón está dentro de los límites, y calculamos la posición de la paleta poniéndole el valor relativeX menos la mitad del ancho de la paleta, para que el movimiento sea de verdad relativo a la mitad de la paleta.

+ +

Ahora, la paleta seguirá la posición del cursor del ratón pero, como restringimos el movimiento al <canvas>, no desaparecerá completamente por los lados.

+ +

Compara tu código

+ +

Aquí tienes el código para comparar:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/L3gngab5/","","320")}}

+ +
+

Ejercicio: ajusta los límites del movimiento de la pala para que siempre se vea la pala completa (ahora sólo se ve media en los laterales).

+
+ +

Pasos siguientes

+ +

Ya tenemos el juego terminado, pero aún lo podemos mejorar con algunos trucos Finalizando.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html new file mode 100644 index 0000000000..60a5df8c5a --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html @@ -0,0 +1,154 @@ +--- +title: Mueve la bola +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball +--- +
{{GamesSidebar}}
{{IncludeSubnav("/es-ES/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls")}}

+ +
+

Este es el segundo paso de los 10 del tutorial de Canvas para el desarrollo de juegos. Puedes encontrar el código fuente como debería quedar después de completar la lección en Gamedev-Canvas-workshop/lesson2.html.

+
+ +

Ya sabes cómo dibujar una pelota, lo has aprendido en el artículo anterior. Ahora vamos a hacer que se mueva. Técnicamente, estaremos pintando la pelota en la pantalla, borrándola y luego pintándola de nuevo en una posición ligeramente diferente cada fotograma para dar la impresión de movimiento, igual que se hace en las películas.

+ +

 

+ +

Definir un bucle de dibujo

+ +

 

+ +

Para actualizar el dibujo del lienzo en cada fotograma, necesitamos definir una función de dibujo que se ejecutará una y otra vez, cambiando una serie de variables para modificar la posición de cada personaje (sprite). Para que una misma función se ejecute una y otra vez puedes utilizar una función de sincronización de JavaScript, como {{domxref("WindowTimers.setInterval()", "setInterval()")}} or {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}.

+ +

Elimina todo el código JavaScript que tienes ahora mismo en de tu archivo HTML, excepto las dos primeras líneas, y añade lo siguiente debajo de ellas. La función draw() se ejecutará dentro de setInterval cada 10 milisegundos:

+ +
function draw() {
+    // código para dibujar
+}
+setInterval(draw, 10);
+ +

Gracias a la naturaleza infinita de setInterval, la función draw () se llamará cada 10 milisegundos por siempre, o hasta que lo detengamos. Ahora, vamos a dibujar la bola. Agrega lo siguiente dentro de tu función draw ():

+ +
ctx.beginPath();
+ctx.arc(50, 50, 10, 0, Math.PI*2);
+ctx.fillStyle = "#0095DD";
+ctx.fill();
+ctx.closePath();
+
+ +

Prueba tu código actualizado ahora — la bola debería repintarse en cada fotograma (frame).

+ +

Hacer que se mueva

+ +
+
Aunque la bola se está dibujando cada 10 milisegundos no se nota porque no hay movimiento, se dibuja una y otra vez en el mismo sitio.Vamos a cambiar eso. En primer lugar, en lugar de dibujar siempre en la posición (50, 50) definiremos un punto de inicio en la parte central inferior del lienzo en las variables llamadas x e y, a continuación, las utilizaremos para definir la posición en la que se dibuja el círculo.
+
+Primero, agrega las dos líneas siguientes a la función draw (), para definir x e y:
+
+ +

 

+ +
var x = canvas.width/2;
+var y = canvas.height-30;
+
+ +

 

+ +

A continuación actualiza la función draw() para usar las variables x e y en el método {{domxref("CanvasRenderingContext2D.arc()","arc()")}}, como se muestra en la siguiente línea resaltada:

+ +
function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+ +

Ahora viene la parte importante: queremos añadir un valor pequeño a x e y después de que cada fotograma se haya dibujado para que parezca que la pelota se está moviendo. Definamos estos valores pequeños como dx y dy, y establezcamos sus valores en 2 y -2 respectivamente. Agrega lo siguiente debajo de sus definiciones de variables x e y:

+ +
var dx = 2;
+var dy = -2;
+
+ +

Lo último que hay que hacer es actualizar x e y con nuestras variables dx y dy en cada fotograma, de modo que la bola será pintada en la nueva posición en cada actualización. Agrega las dos nuevas líneas siguientes indicadas a continuación a la función draw ():

+ +
function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}
+ +

Guarda el código de nuevo y pruébalo en tu navegador. Esto funciona bien, aunque parece que la bola está dejando un rastro detrás de ella:

+ +

+ +

Borrar el  lienzo antes de cada fotograma

+ +
+
La bola está dejando un rastro porque estamos pintando un nuevo círculo en cada fotograma sin borrar el anterior. No te preocupes, porque hay un método para borrar todo el contenido de lienzo: {{domxref ("CanvasRenderingContext2D.clearRect ()", "clearRect ()")}}. Este método tiene cuatro parámetros: las coordenadas x e y de la esquina superior izquierda de un rectángulo y las coordenadas x e y de la esquina inferior derecha de un rectángulo. En todo el área definida por ese rectángulo se borrará cualquier cosa que se haya pintado antes.
+
+ +
+
+
 
+
+
+ +

Añade la siguiente nueva línea resaltada a la función draw():

+ +
function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}
+
+ +

Guarda tu código y vuelve a probarlo. Esta vez verás el movimiento de la bola sin dejar rastro. Cada 10 milisegundos se borra todo el lienzo, se dibuja el círculo azul (nuestra pelota) en una posición determinada y los valores x e y se actualizan para el siguiente fotograma.

+ +

Limpiar el código

+ +

Vamos a añadir más y más comandos a la función draw () en los próximos artículos, por lo que es bueno mantenerlo lo más simple y limpio posible. Comencemos moviendo el código de dibujo de la bola a una función separada.
+
+ Reemplaza la función draw() con las dos funciones siguientes:

+ +
function drawBall() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBall();
+    x += dx;
+    y += dy;
+}
+ +

Compara tu código

+ +

Puedes comprobar el código terminado de este artículo en la demostración en vivo a continuación, y jugar con ella para entender mejor cómo funciona:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","415")}}

+ +
+

Ejercicio: intenta cambiar la velocidad de la bola en movimiento o la dirección hacia la que se mueve.

+
+ +

Siguientes pasos

+ +

Hemos dibujado nuestra bola y hemos hecho que se mueva, pero cuando supera el borde del canvas, desaparece. En el tercer capítulo exploraremos como hacer que rebote en las paredes.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html new file mode 100644 index 0000000000..81403423c7 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html @@ -0,0 +1,130 @@ +--- +title: Control de la pala y el teclado +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls +--- +
{{GamesSidebar}}
{{IncludeSubnav("/es/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego")}}

+ +
+

Este es el cuarto de los 10 pasos del Tutorial de Canvas para el desarrollo de juegos. Puedes encontrar el código fuente como debería quedar después de completar la lección en Gamedev-Canvas-workshop/lesson4.html.

+
+ +

 

+ +

La bola está rebotando en las paredes libremente y puedes estar mirándola toda la vida, pero, ahora mismo, no hay interactividad. ¡No es un juego si no puedes controlarlo! Vamos a añadirle la interacción del usuario: una paleta.

+ +

Definir una paleta para golpear la bola

+ +

Necesitamos una paleta para golpear la bola. Empezamos por definir variables para conseguirlo. Añade las variables siguientes en la parte de arriba de tu código, junto a las que ya tenías:

+ +
var paddleHeight = 10;
+var paddleWidth = 75;
+var paddleX = (canvas.width-paddleWidth)/2;
+ +

paddleHeight servirá para definir la altura de la paleta, paddleWidth la anchura y paddleX la posición en el eje X en la que empieza a dibujarse. Definimos una función que dibujará la paleta en la pantalla. Añade este código justo después de la función drawBall():

+ +
function drawPaddle() {
+    ctx.beginPath();
+    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+ +

Permitir que el usuario controle la paleta

+ +

Podemos dibujar la paleta donde queramos, pero debería responder a las acciones del usuario. Ha llegado la hora de implementar algunos controles de teclado. Vamos a necesitar:

+ + + +

Empezaremos por definir las variables que nos dirán si se ha pulsado un botón. Añade estas líneas donde has definido las demás variables:

+ +
var rightPressed = false;
+var leftPressed = false;
+ +

Las dos las inicializamos con el valor false porque al principio no están pulsados los botones. Para "escuchar" las pulsaciones de las teclas necesitamos definir dos "escuchadores de eventos" (event listeners). Añade las líneas siguientes justo antes de setInterval() al final de tu código:

+ +
document.addEventListener("keydown", keyDownHandler, false);
+document.addEventListener("keyup", keyUpHandler, false);
+ +

Cuando ocurra el evento keydown al pulsar cualquier tecla del teclado, la función keyDownHandler() se ejecutará. Cuando se liberará la tecla pulsada, se ejecutará la función keyUpHandler(). Añade esto después de las líneas del addEventListener() que acababas de escribir:

+ +
function keyDownHandler(e) {
+    if(e.keyCode == 39) {
+        rightPressed = true;
+    }
+    else if(e.keyCode == 37) {
+        leftPressed = true;
+    }
+}
+
+function keyUpHandler(e) {
+    if(e.keyCode == 39) {
+        rightPressed = false;
+    }
+    else if(e.keyCode == 37) {
+        leftPressed = false;
+    }
+}
+ +

Cuando pulsamos una tecla se ejecuta keyDownHandler(e), que pone en la variable "e" los datos que necesitamos. Efectivamente, e.keyCode nos va a decir qué tecla se ha pulsado. Si vale 37 es porque se ha pulsado la "flecha izquierda" del teclado. El código 39 representa a la "flecha derecha".

+ +

Pues bien, cuando se pulsará la "flecha izquierda" pondremos leftPressed a true.

+ +

Cuando se liberará la "flecha izquierda" pondremos leftPressed a false.

+ +

De igual forma procederá el programa con la "flecha derecha", detectando el código 39 y dando los valores oportunos a la variable rightPressed.

+ +

La lógica del movimiento de la paleta

+ +

Ya tenemos las variables que contienen la información sobre las teclas pulsadas, los escuchadores de eventos y las funciones relevantes. Ahora vamos a ocuparnos del código que utilizará todo eso y moverá la paleta en la pantalla. Dentro de la función draw() comprobaremos si está pulsada la flecha izquierda o la derecha cada vez que se dibuje un fotograma. Nuestro código podría tener este aspecto:

+ +
if(rightPressed) {
+    paddleX += 7;
+}
+else if(leftPressed) {
+    paddleX -= 7;
+}
+ +

Si se pulsa la flecha izquierda, la paleta se moverá 7 píxeles a la izquierda. Si se pulsa la flecha derecha, se moverá 7 píxeles a la derecha. Aunque esto funciona bien, la paleta desaparece en los laterales del terreno de juego si mantenemos pulsada una tecla demasiado tiempo. Podemos mejorar esto para que se mueva dentro de los límites del canvas, cambiando el código así:

+ +
if(rightPressed && paddleX < canvas.width-paddleWidth) {
+    paddleX += 7;
+}
+else if(leftPressed && paddleX > 0) {
+    paddleX -= 7;
+}
+ +

La posición paddleX que estamos utilizando variará entre 0 para la lado izquierdo y canvas.width-paddleWidth para el lado derecho, que es justo lo que queremos.

+ +

Añade el código anterior dentro de la función draw(), al final, justo antes de la llave que cierra.

+ +

Lo único que nos falta por hacer es llamar a la función drawPaddle() desde dentro de la función draw() para que dibuje la paleta dentro en la pantalla. Añade la línea siguiente dentro de draw(), justo antes de la línea que llama a la función drawBall():

+ +
drawPaddle();
+
+ +

Compara tu código

+ +

Aquí está el código que funciona, para que lo compares con el tuyo:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","320")}}

+ +
+

Ejercicio: haz que la paleta se mueva más deprisa o más despacio, o cambia su tamaño.

+
+ +

Pasos siguientes

+ +

Ahora mismo tenemos algo que parece un juego. El único problema es que todo lo que puedes hacer es golpear la bola con la paleta toda la vida (en realidad, ni siquiera la golpeas). Todo esto cambiará en el quinto capítulo, Fin del juego, cuando añadiremos un estado de "Game Over".

+ +
 
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html b/files/es/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html new file mode 100644 index 0000000000..b67a730e94 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html @@ -0,0 +1,92 @@ +--- +title: Poner un contador y terminar ganando +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

+ +
+

Este es el octavo capítulo de 10, del Gamedev Canvas tutorial. Puedes encontrar el código fuente como debería quedar tras este capítulo en Gamedev-Canvas-workshop/lesson8.html.

+
+ +

Destruir los ladrillos mola, pero para que el juego sea aún mejor, podría dar puntos cada vez que el jugador rompe un ladrillo, y mostrar un contador.

+ +

El contador

+ +

Si puedes ver el contador mientras juegas, puede que consigas impresionar a tus amigos. Necesitas una variable para guardar el contador. Añade esto a tu JavaScript, después de las otras definiciones de variables:

+ +
var score = 0;
+ +

También necesitas una función drawScore() para enseñar el contador por pantalla. Añade esto después de la función collisionDetection():

+ +
function drawScore() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Score: "+score, 8, 20);
+}
+ +

Dibujar texto en el <canvas> es similar a dibujar un círculo o cualquier otra figura. La definición del tipo de letra (fuente) se hace igual que en CSS, puedes fijar el tamaño y fuente con el método {{domxref("CanvasRenderingContext2D.font","font()")}} method. Despúes utilizas {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} para fijar el color y {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} para escribir el texto y el lugar en el que se va a dibujar. El primer parámetro es el texto en si y los otros dos son las coordenadas.

+ +

Para sumar un punto cada vez que se rompe un ladrillo, añade la línea que está marcada aquí debajo:

+ +
function collisionDetection() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                }
+            }
+        }
+    }
+}
+ +

Llamando a drawScore() (dibujar contador) desde la función draw() hace que se muestre el contador actualizado en la pantalla. Añade la línea siguiente en draw(), justo debajo de la llamada a drawPaddle():

+ +
drawScore();
+ +

Mostrar un mensaje de victoria cuando se hayan destruido todos los ladrillos

+ +

Lo de sumar puntos funciona, pero tiene un final. ¿Qué ocurrirá cuando no queden ladrillos? Precisamente ese es el principal objetivo del juego, tendrás que dibujar un mensaje de victoria. Añade las líneas marcadas a tu función collisionDetection():

+ +
function collisionDetection() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                    if(score == brickRowCount*brickColumnCount) {
+                        alert("YOU WIN, CONGRATULATIONS!");
+                        document.location.reload();
+                    }
+                }
+            }
+        }
+    }
+}
+ +

Gracias a esto, los jugadores pueden ganar cuando rompen todos los ladrillos, que es muy importante. La función document.location.reload() vuelve a cargar la página y el juego empieza de nuevo, una vez se hace clic sobre el botón del alert().

+ +

Compara tu código

+ +

Puedes comparar tu código con este:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/mvfkcydz/","","320")}}

+ +
+

Ejercicio: añade más puntos por ladrillo y muestra el contador cuando salga el alert() del final del juego con victoria.

+
+ +

Pasos siguientes

+ +

El juego, ahora mismo, ya tiene buena pinta. En la siguiente lección conseguirás que sea más atractivo porque añadirás el Control del ratón.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

diff --git a/files/es/games/tutorials/html5_gamedev_phaser_device_orientation/index.html b/files/es/games/tutorials/html5_gamedev_phaser_device_orientation/index.html new file mode 100644 index 0000000000..135193ec50 --- /dev/null +++ b/files/es/games/tutorials/html5_gamedev_phaser_device_orientation/index.html @@ -0,0 +1,437 @@ +--- +title: >- + Introducción al Desarrollo de Juegos en HTML5 con Phaser y la API de + Orientación a Dispositivos +slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation +tags: + - API Vibración + - API orientacion de dispositivos + - Canvas + - Desarrollo de videojuegos + - HTML5 + - Phaser +translation_of: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation +--- +
{{GamesSidebar}}

{{ draft() }}

+ +

Introducción

+ +

En este tutorial iremos a través del proceso de construcción de un juego en HTML5 para móviles que utilizará las APIs de Orientación para Dispositivos y Vibración para mejorar la jugabilidad y estará construido utilizando el framework Phaser. Se recomienda tener conocimientos básicos de JavaScript para sacar mayor provecho a este tutorial.

+ +

Ejemplo

+ +

Al finalizar este tutorial tendrás un juego demo completamente funcional: Cyber Orb. Se verá más o menos así:

+ +

+ +

Phaser framework

+ +

Phaser es un framework para construir juegos, de móvil o escritorio, en HTML5 . Es nuevo pero está creciendo velozmente gracias a la apasionada comunidad involucrada en el proceso de desarrollo. Puedes chequearlo en GitHub donde se encuentra como open source. Lee la documentación en línea y recorre su gran colección de ejemplos. El framework Phaser provee una serie de herramientas que acelerarán el desarrollo y te ayudaran a manejar las tareas genéricas necesarias para completar tu juego, para que así puedas concentrarte en la idea del juego en sí.

+ +

Empezando con el proyecto

+ +

Puedes ver el código fuente de Cyber Orb en GitHub. La estructura de carpetas no es nada complicada: el punto de partida es el archivo index.html donde inicializaremos el framework y configuraremos el canvas donde correrá el juego.

+ +

+ +

Puedes hacer clic en el archivo index desde tu navegador favorito para iniciar el juego y probarlo. También hay tres carpetas en el directorio: 

+ + + +

Configurando el canvas

+ +

Vamos a renderizar nuestro juego sobre el elemento <canvas>, pero no lo haremos manualmente  — de esto se ocupará el framework.  Vamos a configurarlo: nuestro punto de partida es el archivo index.html con el siguiente contenido. Puedes crearlo tú mismo si quieres hacer un seguimiento más detallado:

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Cyber Orb</title>
+    <style> body { margin: 0; background: #333; } </style>
+    <script src="src/phaser.min.js"></script>
+    <script src="src/Boot.js"></script>
+    <script src="src/Preloader.js"></script>
+    <script src="src/MainMenu.js"></script>
+    <script src="src/Game.js"></script>
+</head>
+<body>
+<script>
+(function() {
+    var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
+    game.state.add('Boot', Ball.Boot);
+    game.state.add('Preloader', Ball.Preloader);
+    game.state.add('MainMenu', Ball.MainMenu);
+    game.state.add('Game', Ball.Game);
+    game.state.start('Boot');
+})();
+</script>
+</body>
+</html>
+ +

Hasta ahora tenemos una simple página web HTML con el contenido básico en la sección <head>: configuración de caracteres, título, estilo y las inclusión de los archivos JavaScripts. El <body> contiene la inicialización del framework Phaser y las definiciones del estado del juego.

+ +
var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
+ +

La linea de arriba inicializará la intancia de Phaser — los argumentos son el ancho del <canvas>, su altura, el método de renderizado (estamos utilizando CANVAS pero también existen disponibles las opciones WEBGL y AUTO) y el ID opcional del contenedor DOM en el que queremos poner el <canvas>. Si no hay nada especificado en el último argumento o el elemento no es encontrado, el <canvas> será añadido a la etiqueta <body>. Sin el framework para añadir el elemento canvas hubieses tenido que escribir algo como esto dentro de la etiqueta <body>:

+ +
<canvas id='game' width='320' height='480'></canvas>
+ +

Es importante recordar que el framework está montando métodos útiles para acelerar un montón de cosas como la manipulación de imagenes o la administración de elementos, que serían más difíciles si tuvieramos que hacerlo manualmente.

+ +
+

Nota: Puedes leer este artículo: "Building Monster Wants Candy" para una introducción en profundidad a las funciones y métodos específicos de Phaser.

+
+ +

Volviendo a los estados del juego: La linea de abajo añade un nuevo estado al juego llamado Boot:

+ +
game.state.add('Boot', Ball.Boot);
+ +

El primer valor es el nombre del estado, el segundo es el objeto al que queremos asignárselo. El metodo start está iniciando el estado dado y haciendolo activo. Veamos qué es lo que son los estados realmente.

+ +
 
+ +

Gestionando los estados de juego

+ +

Los estados en Phaser son partes separadas de la lógica del juego, en nuestro caso los estamos cargando de archivos JavaScript independientes para un mejor mantenimiento. En este juego tenemos estados básicos: Boot, Preloader, MainMenu, Howto y Game. Boot se hará cargo de la inicialización de algunas opciones de configuración, Preloader cargará todos los elementos utilizados como los gráficos y el audio, MainMenu es el menu con el botón de inicio, Howto muestra las intrucciones de cómo jugar y el estado Game es el que finalmente te permite jugar el juego. Veamos rapidamente el contenido de esos estados.

+ +

Boot.js

+ +

El estado Boot es el primero en el juego.

+ +
var Ball = {
+    _WIDTH: 320,
+    _HEIGHT: 480
+};
+Ball.Boot = function(game) {};
+Ball.Boot.prototype = {
+    preload: function() {
+        this.load.image('preloaderBg', 'img/loading-bg.png');
+        this.load.image('preloaderBar', 'img/loading-bar.png');
+    },
+    create: function() {
+        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+        this.game.scale.pageAlignHorizontally = true;
+        this.game.scale.pageAlignVertically = true;
+        this.game.state.start('Preloader');
+    }
+};
+ +

El objeto principal Ball es definido y estamos añadiendo dos variables llamadas _WIDTH y _HEIGHT esos seran el ancho y la altura del canvas de nuestro juego, respectivamente — nos ayudarán a posicionar los elementos en la pantalla. Estamos cargando dos imagenes primero que serán usadas después en el estado Preload para mostrar el progreso de la carga de los demás elementos. La función create contiene algunas de las configuraciones básicas: estamos configurando la escala y la alineación del canvas, y avanzando al estado Preload cuando todo este listo.

+ +

Preloader.js

+ +

El estado Preloader se ocupa de cargar todos los elementos:

+ +
Ball.Preloader = function(game) {};
+Ball.Preloader.prototype = {
+    preload: function() {
+        this.preloadBg = this.add.sprite((Ball._WIDTH-297)*0.5, (Ball._HEIGHT-145)*0.5, 'preloaderBg');
+        this.preloadBar = this.add.sprite((Ball._WIDTH-158)*0.5, (Ball._HEIGHT-50)*0.5, 'preloaderBar');
+        this.load.setPreloadSprite(this.preloadBar);
+
+        this.load.image('ball', 'img/ball.png');
+        // ...
+        this.load.spritesheet('button-start', 'img/button-start.png', 146, 51);
+        // ...
+        this.load.audio('audio-bounce', ['audio/bounce.ogg', 'audio/bounce.mp3', 'audio/bounce.m4a']);
+    },
+    create: function() {
+        this.game.state.start('MainMenu');
+    }
+};
+ +

Para crear un nuevo botón tenemos el método add.button con la siguiente lista de argumentos opcionales:

+ + + +

El anchor.set colocará el punto de ancla en el botón con el cual se realizarán y aplicarán todos los cálculos de posición para el botón. En nuestro caso, está anclado a la mitad del borde izquierdo y al comienzo del borde superior, para así centrarlo de manera horizontal facilmente, sin necesidad de saber su ancho.

+ +

Cuando el boton de inicio es presionado, en lugar de saltar directamente a la acción, el juego mostrará la pantalla con las intrucciones para jugar.

+ +

Howto.js

+ +
Ball.Howto = function(game) {
+};
+Ball.Howto.prototype = {
+    create: function() {
+        this.buttonContinue = this.add.button(0, 0, 'screen-howtoplay', this.startGame, this);
+    },
+    startGame: function() {
+        this.game.state.start('Game');
+    }
+};
+ +

El estado Howto muesta las intrucciones de juego en la pantalla antes de comenzar el juego. Luego de clickear la pantalla el juego es lanzado.

+ +

Game.js

+ +

El estado Game del archivo Game.js es donde ocurre toda la magia. Todas las inicializaciones estan en la función create() (que se lanza una vez al comienzo del juego). Luego de eso, algunas funcionalidades requeriran más código para controlar — escribiremos nuestras propias funciones para manejar tareas más complicadas. En particular, toma nota de la función update() que es ejecutada en cada frame y actualiza cosas como la posición de la pelota.

+ +
Ball.Game = function(game) {};
+Ball.Game.prototype = {
+    create: function() {},
+    initLevels: function() {},
+    showLevel: function(level) {},
+    updateCounter: function() {},
+    managePause: function() {},
+    manageAudio: function() {},
+    update: function() {},
+    wallCollision: function() {},
+    handleOrientation: function(e) {},
+    finishLevel: function() {}
+};
+ +

Las funciones create y update son específicas del framework, mientras que otras seran nuestras propias creaciones:

+ + + +

Agregando la pelota y sus mecanismos de movimiento

+ +

Primero vamos a ir a la función create(), inicializamos el objeto ball y le asignamos unas cuantas propiedades:

+ +
this.ball = this.add.sprite(this.ballStartPos.x, this.ballStartPos.y, 'ball');
+this.ball.anchor.set(0.5);
+this.physics.enable(this.ball, Phaser.Physics.ARCADE);
+this.ball.body.setSize(18, 18);
+this.ball.body.bounce.set(0.3, 0.3);
+ +

Aqui estamos agregando un sprite en un lugar de la pantalla y utilizando la imagen de la pelota de los elementos gráficos ya cargados. También estamos configurando el anchor (ancla) que realizará los cálculos de física para el centro de la pelota, habilitando el motor de físicas Arcade (que manejara todas las físicas para el movimiento de la pelota), y estableciendo el tamaño del cuerpo para la detección de colisiones. La propiedad bounce es utilizada para configurar el 'rebote' de la pelota cuando golpea los obstaculos.

+ +

Controlando la pelota

+ +

Es genial tener lista la pelota para poder lanzarla en la zona del juego, pero también es importante poder realmente moverla! Ahora vamos a añadir la capacidad de controlar con el teclado la pelota en los dispositivos de escritorio, y luego pasaremos a la implementación de la API de Orientación de Dispositivo. Vamos a enfocarnos en el teclado primero añadiendo lo siguiente a la función create():

+ +
this.keys = this.game.input.keyboard.createCursorKeys();
+ +

Como puedes ver, hay una función especial de Phaser llamada createCursorKeys() que nos dará un objeto con controladores de evento para las cuatro teclas de flecha, que nos permitira jugar con: arriba, abajo, izquierda y derecha.

+ +

A continuación añadiremos el siguiente código a la función update(), para que sea ejecutado en cada frame. El objeto this.keys será chequeado con el input del jugador (las teclas que presione por ejemplo) así la pelota podrá reaccionar acorde, con una fuerza predefinida:

+ +
if(this.keys.left.isDown) {
+    this.ball.body.velocity.x -= this.movementForce;
+}
+else if(this.keys.right.isDown) {
+    this.ball.body.velocity.x += this.movementForce;
+}
+if(this.keys.up.isDown) {
+    this.ball.body.velocity.y -= this.movementForce;
+}
+else if(this.keys.down.isDown) {
+    this.ball.body.velocity.y += this.movementForce;
+}
+ +

De esa manera podemos verificar qué tecla es presionada en determinado frame y aplicar la fuerza definida a la pelota, así aumentar la velocidad en la dirección correcta.

+ +

Implementando la API de Orientación del Dispositivo

+ +

Probablemente la parte más interesante del juego es que utiliza la API de Orientación para Dispositivos móviles. Gracias a esto puedes jugar el juego inclinando el dispositivo en la dirección que quieres que la pelota ruede. Aquí está el código de la función create() responsable por esto:

+ +
window.addEventListener("deviceorientation", this.handleOrientation, true);
+ +

Vamos a añadir un detector de eventos al evento "deviceorientation" y vincularlo a la función handleOrientation, se ve como esto:

+ +
handleOrientation: function(e) {
+    var x = e.gamma;
+    var y = e.beta;
+    Ball._player.body.velocity.x += x;
+    Ball._player.body.velocity.y += y;
+}
+ +

Mientras más inclines el dispositivo, más fuerza se aplica a la pelota y la velocidad en la que se mueve es mayor.

+ +

+ +
+

Nota: Para encontrar más sobre implementar la orientación de los dispositivos y cómo se vé en código crudo, lee Keep it level: responding to device orientation changes.

+
+ +

Añadiendo el agujero

+ +

El principal objetivo del juego es mover la pelota desde la posición inicial a la posición final: un agujero en el suelo. Esta implementación es muy similar a la parte anterior en donde creamos la pelota, y también es añadida en la función create() de nuestro estado Game:

+ +
this.hole = this.add.sprite(Ball._WIDTH*0.5, 90, 'hole');
+this.physics.enable(this.hole, Phaser.Physics.ARCADE);
+this.hole.anchor.set(0.5);
+this.hole.body.setSize(2, 2);
+ +

La diferencia está en que el cuerpo del agujero se configura como inamovible por lo que no se moverá cuando acertamos con la pelota y tendrá calculada la detección de colisión (esto se tratará más adelante en este artículo).

+ +

Construyendo el laberinto de bloques

+ +

Para hacer más difícil el juego, y más interesante, añadiremos algunos obstaculos entre la pelota y la sálida. Podríamos usar un editor de niveles pero por motivo de este tutorial, vamos a crear algo nosotros mismos.

+ +

Para contener el bloque de información usaremos un array con los datos de nivel: para cada bloque almacenaremos las posiciones abolutas izquierda y superior en pixeles (x e y) y el tipo de bloque: horizontal o vertical (t con el valor 'w' para el ancho, y 'h' para la altura). Luego, para cargar el nivel analizaremos los datos y mostraremos los bloques especificos para ese nivel. En la función initLevels tenemos:

+ +
this.levelData = [
+    [
+        { x: 96, y: 224, t: 'w' }
+    ],
+    [
+        { x: 72, y: 320, t: 'w' },
+        { x: 200, y: 320, t: 'h' },
+        { x: 72, y: 150, t: 'w' }
+    ],
+    // ...
+];
+ +

Todos los elementos del array contienen una colección de bloques con una posición x e y y un valor t para cada uno. Luego de levelData pero dentro de la función initLevels, añadiremos los bloques dentro de un array en el loop for usando algunos de los métodos específicos del framework:

+ +
for(var i=0; i<this.maxLevels; i++) {
+    var newLevel = this.add.group();
+    newLevel.enableBody = true;
+    newLevel.physicsBodyType = Phaser.Physics.ARCADE;
+    for(var e=0; e<this.levelData[i].length; e++) {
+        var item = this.levelData[i][e];
+        newLevel.create(item.x, item.y, 'element-'+item.t);
+    }
+    newLevel.setAll('body.immovable', true);
+    newLevel.visible = false;
+    this.levels.push(newLevel);
+}
+ +

Primero, add.group() es usado para crear un nuevo grupo de items. Luego, el body tipe ARCADE se configura para permitir los cálculos de física. El método newLevel.create crea nuevos items en el grupo con posiciones superior e izquierda iniciales y su propia imagen. Si no quieres recorrer nuevamente la lista de elementos para agregar una propiedad a cada uno explicitamente, puedes usar setAll en un grupo para aplicarlo a todos los items en ese grupo.

+ +

Los objetos son almacenados en el array this.levels, el cual es por defecto invisible. Para cargar niveles específicos, nos aseguramos de que los niveles previos esten escondidos, y mostramos el nivel actual:

+ +
showLevel: function(level) {
+    var lvl = level | this.level;
+    if(this.levels[lvl-2]) {
+        this.levels[lvl-2].visible = false;
+    }
+    this.levels[lvl-1].visible = true;
+}
+ +

Gracias a eso el juego da al jugador un reto: ahora tiene que rodar la pelota a través del área de juego y guiarla por el laberinto construido por bloques. Es solo un ejemplo de cargar los niveles, y solo hay 5 puramente para mostrar la idea, pero podés trabajar en expandirlo por tu cuenta.

+ +

Detección de colisión

+ +

Hasta este punto tenemos la pelota, que puede ser controlada por el jugador, el agujero que se tiene que alcanzar y los obstáculos que bloquean el camino. Sin embargo, hay un problema: nuestro juego todavía no tiene ninguna detección de colisiones, así que no sucede nada cuando la pelota golpea los bloques, sólo los atraviesa. Vamos a arreglarlo! La buena noticia es que el framework se ocupará de calcular la detección de colisones, nosotros sólo debemos especificar los objetos con los que colisionará en la función update():

+ +
this.physics.arcade.collide(this.ball, this.borderGroup, this.wallCollision, null, this);
+this.physics.arcade.collide(this.ball, this.levels[this.level-1], this.wallCollision, null, this);
+ +

Esto le dirá al framework que ejecute la función wallCollision cuando la pelota golpee cualquiera de las paredes. Podemos usar la función wallCollision para añadir cualquier funcionalidad que querramos, como por ejemplo agregar el sonido de rebote e implementar la API de Vibración.

+ +

También debemos volver al objeto pelota y limitarlo a moverse sólo en la zona visible, para que no salga de la pantalla. Hay una función muy útil en Phaser que se llama collideWorldBounds:

+ +
ball.body.collideWorldBounds = true;
+ +

Hace exactamente lo que necesitamos: ahora la pelota rebotará en los bordes de la pantalla como de las paredes.

+ +

Añadiendo el sonido

+ +

Entre los elementos precargados hay una pista de audio (en varios formatos para asegurar la compatibilidad con el navegador), que podremos usar ahora. Debe primero ser definida en la función create():

+ +
this.bounceSound = this.game.add.audio('audio-bounce');
+ +

Si el estado del audio es true (es decir que el sonido del juego está activado) podremos reproducirlo en la función wallCollision:

+ +
if(this.audioStatus) {
+    this.bounceSound.play();
+}
+ +

Eso es todo: cargar y reproducir sonidos es sencillo con Phaser.

+ +

Implementando la API de Vibración

+ +

Cuando la detección de colisión funcione como es esperado, añadamos algunos efectos especiales con la ayuda de la API de Vibración.

+ +

La mejor forma de usarla en nuestro caso es haciendo que el teléfono vibre cada vez que la pelota golpee las paredes: dentro de la función wallCollision:

+ +
if("vibrate" in window.navigator) {
+    window.navigator.vibrate(100);
+}
+ +

Si el método vibrate es soportado por el navegador y está disponible en el objeto window.navigator, hará vibrar al telefono por 100 milisegundos. Eso es todo!

+ +

Añadiendo el tiempo transcurrido

+ +

Para mejorar la re-jugabilidad y dar a los jugadores la opción de competir entre ellos, almacenaremos el tiempo transcurrido: los jugadores entonces intentaran mejorar su tiempo de finalizacion. Para implementar esto en el juego tenemos que crear una variable para almacenar el número actual de segundos transcurrido desde el inicio del juego y mostrarselo al jugador durante el juego. Definamos primero las variables en la función create:

+ +
this.timer = 0; // time elapsed in the current level
+this.totalTimer = 0; // time elapsed in the whole game
+ +

Luego, podemos inicializar los objetos de texto necesarios para mostrar la información al usuario:

+ +
this.timerText = this.game.add.text(15, 15, "Time: "+this.timer, this.fontBig);
+this.totalTimeText = this.game.add.text(120, 30, "Total time: "+this.totalTimer, this.fontSmall);
+ +

Estamos definiendo la posición superior e izquierda del texto, el contenido que se muestra y el estilo aplicado al texto. Lo hemos impreso en pantalla, pero sería bueno actualizar los valores cada segundo:

+ +
this.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this);
+ +

Este bucle, también en la función create, ejecutará la función updateCounter cada segundo desde el comienzo del juego, así podemos aplicar los cambios acordes. Así es como se ve la función updateCounter completa:

+ +
updateCounter: function() {
+    this.timer++;
+    this.timerText.setText("Time: "+this.timer);
+    this.totalTimeText.setText("Total time: "+(this.totalTimer+this.timer));
+},
+ +

Como puedes ver estamos incrementando la variable this.timer y actualizando el contenido del objeto de texto con el valor actual en cada iteración, por lo que el jugador verá el tiempo transcurrido.

+ +

Terminando el nivel y el juego

+ +

La pelota está rodando en la pantalla, el temporizador funciona y tenemos el agujero al que tenemos que llegar. Vamos a configurar la posibilidad de finalizar el juego! La siguiente linea en la funcion update() añade un detector que se activa cuando la pelota llega al agujero.

+ +
this.physics.arcade.overlap(this.ball, this.hole, this.finishLevel, null, this);
+ +

Esto funciona de manera similar al método colide explicado anteriormente. Cuando la pelota se superpone con el agujero (en lugar de colisionar), la función finishLevel es ejecutada:

+ +
finishLevel: function() {
+    if(this.level >= this.maxLevels) {
+        this.totalTimer += this.timer;
+        alert('Congratulations, game completed!\nTotal time of play: '+this.totalTimer+' seconds!');
+        this.game.state.start('MainMenu');
+    }
+    else {
+        alert('Congratulations, level '+this.level+' completed!');
+        this.totalTimer += this.timer;
+        this.timer = 0;
+        this.level++;
+        this.timerText.setText("Time: "+this.timer);
+        this.totalTimeText.setText("Total time: "+this.totalTimer);
+        this.levelText.setText("Level: "+this.level+" / "+this.maxLevels);
+        this.ball.body.x = this.ballStartPos.x;
+        this.ball.body.y = this.ballStartPos.y;
+        this.ball.body.velocity.x = 0;
+        this.ball.body.velocity.y = 0;
+        this.showLevel();
+    }
+},
+ +

Si el nivel actual es igual al maximo número de niveles (5, en este caso), entonces el juego termina: recibiras un mensaje de felicitación junto con el numero de segundas transcurridos durante todo el juego, y un botoón para presionar que te llevará al menú principal.

+ +

Si el nivel actual es menor que 5, todas las variables necesarias se reinician y el siguiente nivel es cargado.

+ +

Ideas para nuevas características

+ +

Esto no es más que una demostración funcional de un juego que podría tener un montón de características adicionales. Por ejemplo podemos añadir poderes para recoger en el camino que harán que nuestra pelota ruede más rápido, otro podría detener el temporizador durante unos segundos o dar la pelota poderes especiales para atravesar obstáculos. También hay espacio para los obstáculos y trampas que harán más lenta la pelota, acelerar el tiempo o trampas de la propia pelota. Puedes crear más niveles con dificultades diferentes para cada uno. Incluso puedes obtener logros, tablas de clasificación y medallas para diferentes acciones en el juego. Hay un sinfín de posibilidades: sólo dependen de tu imaginación.

+ +

Resumen

+ +

Espero que este tutorial te ayude a introducirte dentro del desarrollo de los juegos 2D y te inspire a crear asombrosos juegos por tu cuenta. Puedes jugar el demo de Cyber Orb y chequear su código fuente en GitHub.

+ +

HTML5 nos da herramientas en bruto, los frameworks construidos sobre estas se están volviendo más rápidos y mejores, por lo que ahora es un gran momento para meterse en el desarrollo de juegos web. En este tutorial usamos Phaser, pero hay un gran número de otros frameworks que vale la pena considerar también, como ImpactJS, Construct 2 o PlayCanvas — depende de tus preferencias, habilidades de programación (o la falta de estas), el tamaño de tu proyecto, los requerimientos y otros aspectos. Deberías chequearlos todos y decidir cual es el que mejor se ajusta a tus necesidades.

diff --git a/files/es/games/tutorials/index.html b/files/es/games/tutorials/index.html new file mode 100644 index 0000000000..3a0807cc77 --- /dev/null +++ b/files/es/games/tutorials/index.html @@ -0,0 +1,10 @@ +--- +title: Workflows for different game types +slug: Games/Workflows +tags: + - NeedsTranslation + - TopicStub +translation_of: Games/Tutorials +--- +
{{GamesSidebar}}

This page will contain links to different article series covering different workflows for effectively creating different types of web games, whether you want to create a 2D or 3D game from scratch, or port a C++ or Flash game over to open web technologies.

+

For example, a 2D maze game with Phaser and the Device Orientation API.

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/bounce_off_the_walls/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/bounce_off_the_walls/index.html deleted file mode 100644 index d168aa0102..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/bounce_off_the_walls/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Rebota en las paredes -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls ---- -
{{GamesSidebar}}
-

{{IncludeSubnav("/es/docs/Games")}}

-
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado")}}

- -
-

Este es el tercer paso de 10 del  tutorial Canvas para el desarrollo de juegos. Puedes encontrar el código fuente y pegarle un vistazo después de completar esta lección Gamedev-Canvas-workshop/lesson3.html.

-
- -

Es agradable ver nuestra bola moviéndose, pero desaparece rápidamente de la pantalla, limitando la diversión que podemos tener con ella. Para superar esto, implementaremos una detección de colisión muy simple (que se explicará más adelante con más detalle) para hacer que la pelota rebote en los cuatro bordes del Canvas.

- -

Detección de colisión simple

- -

Para detectar la colisión verificamos si la bola está tocando (chocando con) la pared y si es así, cambiaremos la dirección de su movimiento en consecuencia.

- -

Para facilitar los cálculos, definamos una variable llamada ballRadius que mantendrá el radio del círculo dibujado y se utilizará para los cálculos. Añade esto a tu código, en algún lugar por debajo de las declaraciones de variables existentes:

- -
var ballRadius = 10;
- -

Ahora actualice la línea que dibuja la bola dentro de la funcion drawBall() a esto:

- -
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
- -

Rebotando arriba y abajo

- -

Hay cuatro paredes para rebotar la pelota - vamos a centrarnos en la de arriba en primer lugar. Tendremos que comprobar, en cada fotograma, si la pelota está tocando el borde superior del Canvas - si es así, invertiremos el movimiento de la bola para que empiece a moverse en la dirección opuesta y se mantenga dentro de los límites visibles. Recordando que el sistema de coordenadas comienza desde la parte superior izquierda, podemos llegar a algo como esto:

- -
if(y + dy < 0) {
-    dy = -dy;
-}
- -

Si el valor de y de la posición de la bola es menor que cero, cambie la dirección del movimiento en el eje y, estableciéndolo igual a sí mismo, invertido. Si la pelota se movía hacia arriba con una velocidad de 2 píxeles por fotograma, ahora se moverá "arriba" con una velocidad de -2 píxeles, lo que en realidad equivale a bajar a una velocidad de 2 píxeles por fotograma.

- -

El código anterior se ocuparía de que la pelota rebote desde el borde superior, así que ahora vamos a pensar en el borde inferior:

- -
if(y + dy > canvas.height) {
-    dy = -dy;
-}
- -

Si la posición y de la pelota es mayor que la altura del canvas (recuerde que contamos los valores y desde la parte superior izquierda, de modo que el borde superior empieza en 0 y el borde inferior está en 480 píxeles, la altura del canvas), entonces rebota del borde inferior invirtiendo el movimiento del eje y como antes.

- -

Podríamos fusionar esas dos sentencias en una para ahorrar código:

- -
if(y + dy > canvas.height || y + dy < 0) {
-    dy = -dy;
-}
- -

Si cualquiera de las dos afirmaciones es verdadera, invierte el movimiento de la pelota.

- -

Rebotando en la izquierda y derecha

- -

Tenemos el borde superior e inferior cubiertos, así que pensemos en los de izquierda y derecha. Es muy similar en realidad, todo lo que tienes que hacer es repetir las declaraciones de x en lugar de y:

- -
if(x + dx > canvas.width || x + dx < 0) {
-    dx = -dx;
-}
-
-if(y + dy > canvas.height || y + dy < 0) {
-    dy = -dy;
-}
- -

En este punto, debe insertar el bloque de código anterior en la función draw(), justo antes de la llave de cierre.

- -

¡La pelota sigue desapareciendo en la pared!

- -

Prueba tu código en este punto, y te quedarás impresionado - ¡ahora tenemos una pelota que rebotó en los cuatro bordes del canvas! Pero tenemos otro problema sin embargo - cuando la bola golpea cada pared se hunde en ella levemente antes de cambiar la dirección:

- -

- -

Esto es porque estamos calculando el punto de colisión de la pared y el centro de la bola, mientras que deberíamos hacerlo por su circunferencia. La bola debe rebotar justo después de que toca la pared, no cuando ya está a medio camino en la pared, así que vamos a ajustar nuestras declaraciones un poco para incluir eso. Actualice el último código que agregó, a esto:

- -
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
-    dx = -dx;
-}
-if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
-    dy = -dy;
-}
- -

Cuando la distancia entre el centro de la bola y el borde de la pared es exactamente igual que el radio de la pelota, cambiará la dirección del movimiento. Restando el radio de un ancho del eje y añadiéndolo al otro nos da la impresión de una adecuada detección de colisiones - la pelota rebota de las paredes como debería hacerlo.

- -

Compara tu código

- -

Chequea el código acabado para esta parte con el tuyo, y juega:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}

- -
-

Ejercicio: cambia el color de la bola a un color al azar, cada vez que golpea una pared.

-
- -

Siguientes pasos

- -

Ahora hemos llegado al punto donde nuestra pelota se mueve y permanece en el tablero de juego. En el capítulo cuarto, veremos la implementación del control de una pala - vea Control de Pala y teclado.

- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/construye_grupo_bloques/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/construye_grupo_bloques/index.html deleted file mode 100644 index 99c944764b..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/construye_grupo_bloques/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Construye el muro de ladrillos -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field ---- -
{{GamesSidebar}}
{{IncludeSubnav("/es/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones")}}

- -
-

Este es el sexto paso de 10 del Tutorial del Lienzo (Canvas) para desarrollar juegos (Gamedev Canvas Tutorial). Puedes encontrar el código fuente como debería quedar tras completar esta lección en Gamedev-Canvas-workshop/lesson6.html.

-
- -

Hemos cambiado la mecánica del juego y ahora ya podemos perder. Esto es genial porque significa que el juego finalmente se comporta como un juego. Sin embargo, pronto resultará aburrido si todo lo que puedes conseguir es hacer rebotar la pelota en las paredes y en la pala. Lo que el juego necesitamos es romper ladrillos con la bola. Ahora vamos a dibujar los ladrillos.

- -

Declarar e inicializar las variables de los ladrillos

- -

El propósito principal de esta lección consiste en escribir unas pocas líneas de código para los ladrillos, utilizando un bucle anidado que recorra una matriz bidimensional. Pero, antes, necesitamos preparar unas variables que definan la información sobre los ladrillos, como su ancho y alto, filas y columnas, etc. Añade estas líneas a tu programa, debajo de las otras variables que has definido antes:

- -
var brickRowCount = 3;
-var brickColumnCount = 5;
-var brickWidth = 75;
-var brickHeight = 20;
-var brickPadding = 10;
-var brickOffsetTop = 30;
-var brickOffsetLeft = 30;
- -

Aquí hemos definido el número de filas (Row) y columnas (Column) de ladrillos, su ancho (Width) y alto (Height), el hueco entre los ladrillos para que no se toquen (Padding), y un margen superior (Top) e izquierdo (Left) para que no se dibujen tocando los bordes.

- -

Guardaremos nuestros ladrillos en una matriz bidimensional que contendrá las columnas (c) de los ladrillos. Cada columna contendrá, a su vez, toda la fila (r) de ladrillos. Cada ladrillo se va a representar con un objeto con las posiciones "x" e "y" en las que se dibujará. Añade esto detrás de las definiciones de las variables:

- -
var bricks = [];
-for(c=0; c<brickColumnCount; c++) {
-    bricks[c] = [];
-    for(r=0; r<brickRowCount; r++) {
-        bricks[c][r] = { x: 0, y: 0 };
-    }
-}
- -

El código anterior pasará por las filas y las columnas y creará los ladrillos. TEN EN CUENTA que esos objetos que representan a los ladrillos también se utilizarán para detectar colisiones más adelante.

- -

Por si no lo terminas de entender... bricks[0][0] es el primer ladrillo (columna 0, fila 0) y se dibujará en "x" 0 e "y" 0. El siguiente ladrillo será el brick[0][1] (columna 0, fila 1) y se dibujará también en (0,0). Así, continuaremos hasta el final de la primera columna, que será el ladrillo bricks[0][2] porque hay 3 filas, de la 0 a la 2. Terminará así el bucle de dentro y seguirá el de fuera, valiendo ahora la "c" 1. Seguiremos recorriendo bricks[] hasta llegar a bricks[2][4], que es el último ladrillo.

- -

Dibujar los bloques

- -

Ahora vamos a crear una función para recorrer todos los bloques de la matriz y dibujarlos en la pantalla:

- -
function drawBricks() {
-    for(c=0; c<brickColumnCount; c++) {
-        for(r=0; r<brickRowCount; r++) {
-            bricks[c][r].x = 0;
-            bricks[c][r].y = 0;
-            ctx.beginPath();
-            ctx.rect(0, 0, brickWidth, brickHeight);
-            ctx.fillStyle = "#0095DD";
-            ctx.fill();
-            ctx.closePath();
-        }
-    }
-}
-
- -

Viene a ser lo mismo de antes, sólo que hemos añadido ctx.rect() para dibujar un rectángulo por cada ladrillo, además de otras llamadas a funciones para que, efectivamente, se dibuje el rectángulo.

- -

Cada ladrillo se dibujará en la posición (0, 0), tendrá un ancho brickWidth y un alto de brickHeight.

- -

Estupendo pero... ¡estamos dibujando todos los ladrillos en el mismo sitio! ¡Eso no puede ser!

- -

Vamos a calcular en qué posición "x" e "y" se tiene que dibujar cada ladrillo así:

- -
var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
-
- -

El primer ladrillo se dibujará arriba a la izquierda, concretamente en (brickoffsetLeft, brickOffsetTop), porque c y r valen 0.

- -

El siguiente ladrillo (columna 0, fila 1) se dibujará más abajo.

- -

Intenta hacer tú mismo los cálculos y verás cómo cada ladrillo de la misma columna se dibujará más abajo o más arriba según en qué fila se encuentre.

- -

También verás cómo cada ladrillo de la misma fila se dibujará más a la izquierda o a la derecha según en qué columna se encuentre.

- -

Vamos a terminar la función drawBricks() para que quede así:

- -
function drawBricks() {
-    for(c=0; c<brickColumnCount; c++) {
-        for(r=0; r<brickRowCount; r++) {
-            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
-            bricks[c][r].x = brickX;
-            bricks[c][r].y = brickY;
-            ctx.beginPath();
-            ctx.rect(brickX, brickY, brickWidth, brickHeight);
-            ctx.fillStyle = "#0095DD";
-            ctx.fill();
-            ctx.closePath();
-        }
-    }
-}
- -

Dibujar los bloques (ahora sí)

- -

Lo estamos haciendo muy bien, pero si has probado te habrás dado cuenta de que no se dibuja nada. ¿Qué es lo que falla?

- -

Pues, sencillamente, que tenemos definida la función drawBricks() pero no la llamamos desde ningún sitio.

- -

Añade drawBricks() dentro de draw(), justo antes de drawBall ():

- -
drawBricks();
-
- -

Compara tu código

- -

Compara tu código con este:

- -

{{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/2/","","320")}}

- -
-

Ejercicio: Prueba a cambiar el número de bloques por fila o columna, o sus posiciones (utiliza las variables que definiste al principio de este capítulo).

-
- -

Pasos siguientes

- -

¡Así que ahora tenemos ladrillos! Un gran avance pero... la pelota no los rompe, simplemente los atraviesa. En el siguiente capítulo lo arreglaremos: Detección de colisiones.

- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/control_pala_y_teclado/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/control_pala_y_teclado/index.html deleted file mode 100644 index 81403423c7..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/control_pala_y_teclado/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Control de la pala y el teclado -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls ---- -
{{GamesSidebar}}
{{IncludeSubnav("/es/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego")}}

- -
-

Este es el cuarto de los 10 pasos del Tutorial de Canvas para el desarrollo de juegos. Puedes encontrar el código fuente como debería quedar después de completar la lección en Gamedev-Canvas-workshop/lesson4.html.

-
- -

 

- -

La bola está rebotando en las paredes libremente y puedes estar mirándola toda la vida, pero, ahora mismo, no hay interactividad. ¡No es un juego si no puedes controlarlo! Vamos a añadirle la interacción del usuario: una paleta.

- -

Definir una paleta para golpear la bola

- -

Necesitamos una paleta para golpear la bola. Empezamos por definir variables para conseguirlo. Añade las variables siguientes en la parte de arriba de tu código, junto a las que ya tenías:

- -
var paddleHeight = 10;
-var paddleWidth = 75;
-var paddleX = (canvas.width-paddleWidth)/2;
- -

paddleHeight servirá para definir la altura de la paleta, paddleWidth la anchura y paddleX la posición en el eje X en la que empieza a dibujarse. Definimos una función que dibujará la paleta en la pantalla. Añade este código justo después de la función drawBall():

- -
function drawPaddle() {
-    ctx.beginPath();
-    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-}
- -

Permitir que el usuario controle la paleta

- -

Podemos dibujar la paleta donde queramos, pero debería responder a las acciones del usuario. Ha llegado la hora de implementar algunos controles de teclado. Vamos a necesitar:

- - - -

Empezaremos por definir las variables que nos dirán si se ha pulsado un botón. Añade estas líneas donde has definido las demás variables:

- -
var rightPressed = false;
-var leftPressed = false;
- -

Las dos las inicializamos con el valor false porque al principio no están pulsados los botones. Para "escuchar" las pulsaciones de las teclas necesitamos definir dos "escuchadores de eventos" (event listeners). Añade las líneas siguientes justo antes de setInterval() al final de tu código:

- -
document.addEventListener("keydown", keyDownHandler, false);
-document.addEventListener("keyup", keyUpHandler, false);
- -

Cuando ocurra el evento keydown al pulsar cualquier tecla del teclado, la función keyDownHandler() se ejecutará. Cuando se liberará la tecla pulsada, se ejecutará la función keyUpHandler(). Añade esto después de las líneas del addEventListener() que acababas de escribir:

- -
function keyDownHandler(e) {
-    if(e.keyCode == 39) {
-        rightPressed = true;
-    }
-    else if(e.keyCode == 37) {
-        leftPressed = true;
-    }
-}
-
-function keyUpHandler(e) {
-    if(e.keyCode == 39) {
-        rightPressed = false;
-    }
-    else if(e.keyCode == 37) {
-        leftPressed = false;
-    }
-}
- -

Cuando pulsamos una tecla se ejecuta keyDownHandler(e), que pone en la variable "e" los datos que necesitamos. Efectivamente, e.keyCode nos va a decir qué tecla se ha pulsado. Si vale 37 es porque se ha pulsado la "flecha izquierda" del teclado. El código 39 representa a la "flecha derecha".

- -

Pues bien, cuando se pulsará la "flecha izquierda" pondremos leftPressed a true.

- -

Cuando se liberará la "flecha izquierda" pondremos leftPressed a false.

- -

De igual forma procederá el programa con la "flecha derecha", detectando el código 39 y dando los valores oportunos a la variable rightPressed.

- -

La lógica del movimiento de la paleta

- -

Ya tenemos las variables que contienen la información sobre las teclas pulsadas, los escuchadores de eventos y las funciones relevantes. Ahora vamos a ocuparnos del código que utilizará todo eso y moverá la paleta en la pantalla. Dentro de la función draw() comprobaremos si está pulsada la flecha izquierda o la derecha cada vez que se dibuje un fotograma. Nuestro código podría tener este aspecto:

- -
if(rightPressed) {
-    paddleX += 7;
-}
-else if(leftPressed) {
-    paddleX -= 7;
-}
- -

Si se pulsa la flecha izquierda, la paleta se moverá 7 píxeles a la izquierda. Si se pulsa la flecha derecha, se moverá 7 píxeles a la derecha. Aunque esto funciona bien, la paleta desaparece en los laterales del terreno de juego si mantenemos pulsada una tecla demasiado tiempo. Podemos mejorar esto para que se mueva dentro de los límites del canvas, cambiando el código así:

- -
if(rightPressed && paddleX < canvas.width-paddleWidth) {
-    paddleX += 7;
-}
-else if(leftPressed && paddleX > 0) {
-    paddleX -= 7;
-}
- -

La posición paddleX que estamos utilizando variará entre 0 para la lado izquierdo y canvas.width-paddleWidth para el lado derecho, que es justo lo que queremos.

- -

Añade el código anterior dentro de la función draw(), al final, justo antes de la llave que cierra.

- -

Lo único que nos falta por hacer es llamar a la función drawPaddle() desde dentro de la función draw() para que dibuje la paleta dentro en la pantalla. Añade la línea siguiente dentro de draw(), justo antes de la línea que llama a la función drawBall():

- -
drawPaddle();
-
- -

Compara tu código

- -

Aquí está el código que funciona, para que lo compares con el tuyo:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","320")}}

- -
-

Ejercicio: haz que la paleta se mueva más deprisa o más despacio, o cambia su tamaño.

-
- -

Pasos siguientes

- -

Ahora mismo tenemos algo que parece un juego. El único problema es que todo lo que puedes hacer es golpear la bola con la paleta toda la vida (en realidad, ni siquiera la golpeas). Todo esto cambiará en el quinto capítulo, Fin del juego, cuando añadiremos un estado de "Game Over".

- -
 
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/controles_raton/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/controles_raton/index.html deleted file mode 100644 index 65e32f0ac2..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/controles_raton/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Controles del ratón -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls ---- -
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando")}}

- -
-

Este es el noveno paso de 10 del tutorial Canvas para el desarrollo de juegos. Puedes encontrar el código y pegarle un vistazo después de completar esta lección Gamedev-Canvas-workshop/lesson9.html.

-
- -

El juego en sí está terminado, así que ahora vamos a pulirlo. Ya le hemos puesto el control del teclado y ahora le añadiremos el control del ratón.

- -

Detectar el movimiento del ratón

- -

Detectar el movimiento del ratón es más fácil que detectar las pulsaciones de las teclas. Todo lo que necesitamos es un añadir "escuchador" al evento {{event("mousemove")}}.Añade esta línea destrás de los otros "listeners", justo debajo del evento keyup:

- -
document.addEventListener("mousemove", mouseMoveHandler, false);
- -

Asociar el movimiento de la pala con el movimiento del ratón

- -

Podemos cambiar la posición de la pala basándonos en las coordenadas del puntero del ratón. Eso es lo que hace la función siguiente. Añádela detrás de la línea que acabas de añadir:

- -
function mouseMoveHandler(e) {
-    var relativeX = e.clientX - canvas.offsetLeft;
-    if(relativeX > 0 && relativeX < canvas.width) {
-        paddleX = relativeX - paddleWidth/2;
-    }
-}
- -

En esta función calculamos un valor relativeX, que es la posición horizontal del ratón en el "viewport" (e.clientX), menos la distancia entre el borde izquierdo del terreno de juego y el borde izquierdo del "viewport" (canvas.offsetLeft).

- -

Si el valor resultante es mayor que cero y menor que el ancho del terreno de juego, es que el ratón está dentro de los límites, y calculamos la posición de la paleta poniéndole el valor relativeX menos la mitad del ancho de la paleta, para que el movimiento sea de verdad relativo a la mitad de la paleta.

- -

Ahora, la paleta seguirá la posición del cursor del ratón pero, como restringimos el movimiento al <canvas>, no desaparecerá completamente por los lados.

- -

Compara tu código

- -

Aquí tienes el código para comparar:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/L3gngab5/","","320")}}

- -
-

Ejercicio: ajusta los límites del movimiento de la pala para que siempre se vea la pala completa (ahora sólo se ve media en los laterales).

-
- -

Pasos siguientes

- -

Ya tenemos el juego terminado, pero aún lo podemos mejorar con algunos trucos Finalizando.

- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/create_the_canvas_and_draw_on_it/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/create_the_canvas_and_draw_on_it/index.html deleted file mode 100644 index 59703d3bc7..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/create_the_canvas_and_draw_on_it/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Crea el lienzo (canvas) y dibuja en él -slug: >- - Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it -translation_of: >- - Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it ---- -
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola")}}

- -
-

Este es el primero de los 10 pasos del Tutorial del Lienzo (Canvas) para desarrollar juegos (Gamedev Canvas Tutorial). Puedes encontrar el código fuente como debería quedar tras completar esta lección en Gamedev-Canvas-workshop/lesson1.html.

-
- -

Antes de que podamos programar la parte funcional del juego, necesitamos crear la estructura básica de la página que lo va a contener. Podemos hacerlo utilizando HTML y el elemento  {{htmlelement("canvas")}} .

- -

El HTML del juego

- -

La estructura del documento HTML es muy simple, porque todo el juego se visualizará dentro del elemento {{htmlelement("canvas")}}. Con tu editor de textos favorito, prepara un documento en blanco, guárdalo como index.html en un lugar adecuado, y escribe el siguiente código:

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title>Gamedev Canvas Workshop</title>
-    <style>
-    	* { padding: 0; margin: 0; }
-    	canvas { background: #eee; display: block; margin: 0 auto; }
-    </style>
-</head>
-<body>
-
-<canvas id="myCanvas" width="480" height="320"></canvas>
-
-<script>
-	// JavaScript code goes here
-</script>
-
-</body>
-</html>
-
- -

En la cabecera (head) tenemos un charset, el título de la página {{htmlelement("title")}} y un poco de CSS básico. El {{htmlelement("body")}} contiene los elementos{{htmlelement("canvas")}} y {{htmlelement("script")}}. Representaremos el juego en el primero y escribiremos el código JavaScript que lo controla en el segundo. El elemento  {{htmlelement("canvas")}} tiene el id myCanvas para que podamos hacer referencia a él con facilidad, y mide 480 píxeles de ancho por 320 de alto. Todo el código JavaScript que vamos a escribir en este tutorial lo pondremos entre las etiquetas <script> y </script>.

- -

El lienzo (canvas)

- -

Para que podamos visualizar los gráficos en el elemento {{htmlelement("canvas")}}, primero tenemos que preparar una referencia a él en JavaScript. Añade lo siguiente después de la etiqueta <script>:

- -
var canvas = document.getElementById("myCanvas");
-var ctx = canvas.getContext("2d");
- -

Aquí estamos guardando una referencia al elemento {{htmlelement("canvas")}} en la variable canvas. Después estamos creando la variable ctx para guardar el contexto de gráficos 2D, que es la herramienta  que realmente utilizaremos para dibujar.

- -

Veamos un fragmento de código de ejemplo que dibuja un cuadrado rojo en el canvas. Añade el código a continuación y abre el archivo index.html con un navegador para comprobar que funciona:

- -
ctx.beginPath();
-ctx.rect(20, 40, 50, 50);
-ctx.fillStyle = "#FF0000";
-ctx.fill();
-ctx.closePath();
- -

Todas las instrucciones están entre los métodos {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} y {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}. Estamos definiendo un rectángulo utilizando {{domxref("CanvasRenderingContext2D.rect()","rect()")}}: los dos primeros valores especifican las coordenadas de la esquina superior izquierda del rectángulo en el canvas, y  los otros dos sirven para indicar el ancho y el alto. En nuestro caso, el rectángulo se dibuja a 20 píxeles desde la izquierda de la pantalla y 40 píxeles desde la parte de arriba, y tiene 50 píxeles de ancho y 50 de alto, con lo que obtenemos un cuadrado perfecto. La propiedad {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} guarda un color que utilizará el método {{domxref("CanvasRenderingContext2D.fill()","fill()")}} para pintar el cuadrado que, en nuestro caso, será rojo.

- -

Podemos dibujar otras cosas aparte de rectángulos. Aquí hay un fragmento de código que dibuja un círculo verde. Prueba a añadir esto al final de tu código JavaScript, guárdalo y recarga la página en el navegador:

- -
ctx.beginPath();
-ctx.arc(240, 160, 20, 0, Math.PI*2, false);
-ctx.fillStyle = "green";
-ctx.fill();
-ctx.closePath();
- -

Como puedes ver, estamos utilizando otra vez los métodos {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} y {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}. De lo que hay en medio, la parte más importante del código anterior es el método {{domxref("CanvasRenderingContext2D.arc()","arc()")}}. Tiene seis parámetros:

- - - -

La propiedad {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} tiene un valor distinto al que habíamos puesto antes. Esto se debe a que, como ocurre en CSS, el color se puede especificar como un valor hexadecimal, como un nombre de color en inglés, la función rgba(), o cualquiera de los otros métodos de descripción de color que existen.

- -

En lugar de utilizar {{domxref("CanvasRenderingContext2D.fill()","fill()")}} y rellenar las formas con colores, podemos utilizar {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}} para colorear únicamente el trazo exterior. Prueba a añadir también esto a tu código JavaScript:

- -
ctx.beginPath();
-ctx.rect(160, 10, 100, 40);
-ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
-ctx.stroke();
-ctx.closePath();
- -

El código anterior dibuja un rectángulo vacío con el perímetro azul. Gracias al canal alfa de la función rgba(), que es el cuarto valor (Red, Green, Blue, Alpha), el color azul será medio transparente.

- -

Compara tu código

- -

Aquí está el código fuente completo de la primera lección, ejecutándose en un JSFiddle:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}

- -
-

Ejercicio: cambia el tamaño y el color de las figuras.

-
- -

Pasos siguientes

- -

Hemos preparado la estructura HTML básica y hemos aprendido un poquito a manejar el canvas. Para continuar, en el segundo capítulo averiguaremos cómo mover la bola en nuestro juego (Mueve la bola).

- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/deteccion_colisiones/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/deteccion_colisiones/index.html deleted file mode 100644 index e6d950b834..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/deteccion_colisiones/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Detección de colisiones -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win")}}

- -
-

Este es el séptimo paso de los 10 del juego "Gamedev Canvas tutorial". Puedes encontrar el código como deberá quedar después de completar la leción en Gamedev-Canvas-workshop/lesson7.html.

-
- -

Ya tenemos los ladrillos en la pantalla pero el juego todavía no es muy interesante, porque la bola los atraviesa. Tenemos que pensar una manera de detectar colisiones para que la bola pueda rebotar en los ladrillos y romperlos.

- -

Nosotros decidimos cómo implementar esto, por supuesto, pero puede ser complicado calcular si la bola está tocando el rectángulo o no, porque no hay funciones del <canvas> que sirvan para saberlo. En este tutorial vamos a hacerlo de la manera más fácil que existe: comprobaremos si el centro de la bola está tocando (colisionando) con cualquiera de los ladrillos. No siempre funcionará a la perfección y hay formas de detectar colisiones más sofisticadas que funcionan mejor, pero no nos interesa verlas porque estamos aprendiendo y tenemos que hacer las cosas fáciles.

- -

Una función para detectar colisiones

- -

Para lograr nuestro objetivo vamos a definir una función que, con un bucle, recorrerá todos los ladrillos y comparará la posición de cada uno con la posición de la bola, cada vez que se dibuje un fotograma. Para que el código sea más legible definiremos la variable "b" que almacenará el objeto ladrillo en cada vuelta de bucle:

- -
function collisionDetection() {
-    for(c=0; c<brickColumnCount; c++) {
-        for(r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            // calculations
-        }
-    }
-}
- -

Si el centro de la bola está dentro de las coordenadas de uno de nuestros ladrillos, cambiaremos la dirección de la bola. Se cumplirá que el centro de la bola está dentro de ladrillo si se cumplen al mismo tiempo estas cuatro condiciones:

- - - -

Traducimos esto a JavaScript:

- -
function collisionDetection() {
-    for(c=0; c<brickColumnCount; c++) {
-        for(r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                dy = -dy;
-            }
-        }
-    }
-}
- -

Añade lo anterior a tu código, debajo de la función keyUpHandler().

- -

Hacer que los ladrillos desaparezcan cuando reciben un golpe

- -

El código anterior funcionará correctamente y la bola cambiará de dirección. El problema es que los ladrillos siguen donde están. Tenemos que imaginar una forma de ocuparnos de los que ya hemos golpeado con la bola. Podemos hacerlo añadiendo un parámetro extra para indicar si queremos pintar cada ladrillo en la pantalla o no. En la parte del código donde inicializamos los ladrillos, añadiremos una propiedad status a cada ladrillo. Cambia tu código fijándote en la línea que está resaltada:

- -
var bricks = [];
-for(c=0; c<brickColumnCount; c++) {
-    bricks[c] = [];
-    for(r=0; r<brickRowCount; r++) {
-        bricks[c][r] = { x: 0, y: 0, status: 1 };
-    }
-}
- -

A continuación consultaremos el "status" de cada ladrillo para saber si lo tenemos que dibujar o no. Si "status" vale 1, lo dibujaremos. Si vale 0, no lo dibujaremos porque habrá sido golpeado por la bola. Actualiza tu función drawBricks() para que quede así:

- -
function drawBricks() {
-    for(c=0; c<brickColumnCount; c++) {
-        for(r=0; r<brickRowCount; r++) {
-            if(bricks[c][r].status == 1) {
-                var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-                var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
-                bricks[c][r].x = brickX;
-                bricks[c][r].y = brickY;
-                ctx.beginPath();
-                ctx.rect(brickX, brickY, brickWidth, brickHeight);
-                ctx.fillStyle = "#0095DD";
-                ctx.fill();
-                ctx.closePath();
-            }
-        }
-    }
-}
- -

Actualizar el "status" en la función de detección de colisiones

- -

Ahora tenemos que ocuparnos del valor de "status" en la función collisionDetection(): si el ladrillo está activo (status 1) comprobaremos si hay colisión. Si hay colisión, pondremos el "status" de ese ladrillo a 0 para no volver a pintarlo. Actualiza collisionDetection() así:

- -
function collisionDetection() {
-    for(c=0; c<brickColumnCount; c++) {
-        for(r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                }
-            }
-        }
-    }
-}
- -

Activar la función de detección de colisiones

- -

Ya sólo falta llamar a la función collisionDetection() desde la función draw(). Añade la línea siguiente dentro de draw() function, justo después de la llamada a drawPaddle():

- -
collisionDetection();
-
- -

Compara tu código

- -

Ahora se comprueban las colisiones cada vez que se dibuja un fotograma. Concretamente, miramos si la bola colisiona con cada ladrillo. ¡Ahora ya podemos romper ladrillos! :-

- -

{{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/5/","","320")}}

- -
-

Ejercicio: cambia el color de la bola cada vez que choque con un ladrillo.

-
- -

Pasos siguientes

- -

Definitivamente, lo estamos consiguiendo. ¡Adelanteeee! En el capítulo octavo nos ocuparemos de la Puntuación y fin del juego ganando.

- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/fin_del_juego/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/fin_del_juego/index.html deleted file mode 100644 index d57ccef444..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/fin_del_juego/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Fin del juego -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego -tags: - - Canvas - - Fin del juego - - JavaScript - - Tutorial - - graficos -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over ---- -
{{GamesSidebar}}
{{IncludeSubnav("/es-ES/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques")}}

- -
-

Este es el quinto paso de 10 del Gamedev Canvas tutorial. Puedes ver como debería quedar el código fuente después de completar esta lección en Gamedev-Canvas-workshop/lesson5.html.

-
- -

Es divertido ver la bola rebotando en las paredes y ser capaz de mover la pala pero, aparte de eso, el juego no hace nada y no tiene ningún progreso ni un objetivo final. Sería bueno desde el punto de vista del juego poder perder. La lógica asociada a perder en este juego es fácil de entender: si se te escapa la bola y alcanza el borde inferior de la pantalla, pierdes y se acabó el juego.

- -

Implementar el final del juego

- -

Intentemos implementar el final del juego en nuestro juego. Aquí está el trozo de código de la tercera lección en donde hicimos que la pelota rebotara en las paredes:

- -
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
-    dx = -dx;
-}
-
-if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
-    dy = -dy;
-}
- -

En lugar de dejar que la pelota rebote en las cuatro paredes, vamos a permitir que lo haga sólo en tres: izquierda, arriba y derecha. Alcanzar la pared inferior supondrá el fin del juego. Editaremos el segundo bloque if y lo convertiremos en un "if else" que activará el estado de "final de juego" cuando la pelota colisione con el borde inferior del terreno de juego. Por ahora nos conformaremos con mostrar un mensaje con la función alert() y con reiniciar el juego volviendo a cargar la página. Modifica el segundo if para que quede así:

- -
if(y + dy < ballRadius) {
-    dy = -dy;
-} else if(y + dy > canvas.height-ballRadius) {
-    alert("GAME OVER");
-    document.location.reload();
-}
- -

Hacer que la pala golpee la bola

- -

Para terminar esta lección sólo nos falta detectar la colisión de la bola y la paleta para que pueda rebotar, volviendo hacia la zona de juego. La manera más sencilla de hacerlo es comprobar si el centro de la bola está entre los límites izquierdo y derecho de la paleta. Actualiza el último fragmento del código, el "if else" de antes, para que te quede así:

- -
if(y + dy < ballRadius) {
-    dy = -dy;
-} else if(y + dy > canvas.height-ballRadius) {
-    if(x > paddleX && x < paddleX + paddleWidth) {
-        dy = -dy;
-    }
-    else {
-        alert("GAME OVER");
-        document.location.reload();
-    }
-}
- -

Si la bola toca el borde inferior del lienzo (Canvas) debemos comprobar si golpea la pala. Si es así, entonces rebota como el jugador se imagina que va a ocurrir; si no, el juego ha terminado.

- -

Compara tu código

- -

Aquí tienes el código que funciona para que lo compares con el tuyo:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","320")}}

- -
-

Ejercicio: haz que la bola se mueva más rápida cuando golpea la pala.

-
- -

Siguientes pasos

- -

Lo estamos haciendo bastante bien hasta ahora y nuestro juego está empezando a despertar interés ahora que se puede perder. Pero todavía falta algo. Vamos a pasar al sexto capítulo, Construir el muro de ladrillos, y crear algunos ladrillos para que la bola los destruya.

- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/index.html deleted file mode 100644 index 10ea794d5f..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Famoso juego 2D usando JavaScript puro -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro -tags: - - 2D Canvas JavaScript Tutorial - - Principiante Juegos -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript ---- -
{{GamesSidebar}}
{{IncludeSubnav("/es-ES/docs/Games")}}
- -

{{Next("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it")}}

- -

En este tutorial paso a paso creamos un juego de la MDN, sencillo y muy famoso, escrito íntegramente en JavaScript puro. Todos los elementos gráficos aparecerán dentro de la etiqueta {{htmlelement("canvas")}} de HTML5.

- -

Cada paso tiene ejemplos editables y listos para ejecutar, para que puedas ver qué aspecto debería tener el ejercicio en cada momento. Apenderás a utilizar el elemento {{htmlelement("canvas")}} para implementar mecánicas de juego fundamentales como la representación de imágenes, el movimiento, la detección de colisiones, los mecanismos de control y el final del juego ganando o perdiendo.

- -

Para aprovechar al máximo esta serie de artículos necesitas tener ya un conocimiento básico o intermedio de JavaScript. Cuando termines este tutorial serás capaz de construir tus propios juegos Web.

- -

Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.

- -

Detalle de las lecciones

- -

Todas las lecciones y las diferentes versiones del famoso juego MDN que estamos construyendo juntos están disponibles en GitHub:

- -
    -
  1. Crea el lienzo (canvas) y dibuja en él
    2. -
  2. Mueve la bola
    3. -
  3. Rebota en las paredes
    4. -
  4. Control de la pala y el teclado
    5. -
  5. Fin del juego
    6. -
  6. Construye el muro de ladrillos
    7. -
  7. Detección de colisiones
    8. -
  8. Cuenta los puntos y gana
    9. -
  9. Controles del ratón
    10. -
  10. Finalizando
    11. -
- -

Empezar con JavaScript puro es la mejor forma de adquirir un conocimiento sólido sobre desarrollo de juegos. Después, puedes escoger cualquier entorno de desarrollo (framework) que te guste y usarlo para tus proyectos. Los frameworks son simplemente herramientas construidas con el lenguaje JavaScript; por tanto aunque planees trabajar con ellas, es bueno aprender primero  sobre el mismo lenguaje para saber exactamente qué es lo que hay por debajo. Los frameworks aceleran el tiempo de desarrollo y ayudan a tener en cuenta las partes aburridas del juego, pero si algo no funciona como esperas, siempre puedes intentar depurarlo o simplemente escribir tu solución en JavaScript puro.

- -
-

Nota: Si estás interesado en aprender sobre el desarrollo de juegos en 2D usando una entorno de desarrollo, consulta esta serie homóloga, famoso juego 2D usando Phaser.

-
- -
-

Nota:  Esta serie de artículos puede usarse como material para talleres prácticos de desarrollo de juegos. También puedes hacer uso del kit de contenido canvas Gamedev  basado en este tutorial si quieres dar una charla sobre desarrollo de juegos en general.

-
- -

Siguientes pasos

- -

Vale, ¡vamos a empezar! Dirígete hacia el primer tema — Crea el lienzo (canvas) y dibuja en él.

- -

{{Next("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it")}} 

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/mueve_la_bola/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/mueve_la_bola/index.html deleted file mode 100644 index 60a5df8c5a..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/mueve_la_bola/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Mueve la bola -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball ---- -
{{GamesSidebar}}
{{IncludeSubnav("/es-ES/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls")}}

- -
-

Este es el segundo paso de los 10 del tutorial de Canvas para el desarrollo de juegos. Puedes encontrar el código fuente como debería quedar después de completar la lección en Gamedev-Canvas-workshop/lesson2.html.

-
- -

Ya sabes cómo dibujar una pelota, lo has aprendido en el artículo anterior. Ahora vamos a hacer que se mueva. Técnicamente, estaremos pintando la pelota en la pantalla, borrándola y luego pintándola de nuevo en una posición ligeramente diferente cada fotograma para dar la impresión de movimiento, igual que se hace en las películas.

- -

 

- -

Definir un bucle de dibujo

- -

 

- -

Para actualizar el dibujo del lienzo en cada fotograma, necesitamos definir una función de dibujo que se ejecutará una y otra vez, cambiando una serie de variables para modificar la posición de cada personaje (sprite). Para que una misma función se ejecute una y otra vez puedes utilizar una función de sincronización de JavaScript, como {{domxref("WindowTimers.setInterval()", "setInterval()")}} or {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}.

- -

Elimina todo el código JavaScript que tienes ahora mismo en de tu archivo HTML, excepto las dos primeras líneas, y añade lo siguiente debajo de ellas. La función draw() se ejecutará dentro de setInterval cada 10 milisegundos:

- -
function draw() {
-    // código para dibujar
-}
-setInterval(draw, 10);
- -

Gracias a la naturaleza infinita de setInterval, la función draw () se llamará cada 10 milisegundos por siempre, o hasta que lo detengamos. Ahora, vamos a dibujar la bola. Agrega lo siguiente dentro de tu función draw ():

- -
ctx.beginPath();
-ctx.arc(50, 50, 10, 0, Math.PI*2);
-ctx.fillStyle = "#0095DD";
-ctx.fill();
-ctx.closePath();
-
- -

Prueba tu código actualizado ahora — la bola debería repintarse en cada fotograma (frame).

- -

Hacer que se mueva

- -
-
Aunque la bola se está dibujando cada 10 milisegundos no se nota porque no hay movimiento, se dibuja una y otra vez en el mismo sitio.Vamos a cambiar eso. En primer lugar, en lugar de dibujar siempre en la posición (50, 50) definiremos un punto de inicio en la parte central inferior del lienzo en las variables llamadas x e y, a continuación, las utilizaremos para definir la posición en la que se dibuja el círculo.
-
-Primero, agrega las dos líneas siguientes a la función draw (), para definir x e y:
-
- -

 

- -
var x = canvas.width/2;
-var y = canvas.height-30;
-
- -

 

- -

A continuación actualiza la función draw() para usar las variables x e y en el método {{domxref("CanvasRenderingContext2D.arc()","arc()")}}, como se muestra en la siguiente línea resaltada:

- -
function draw() {
-    ctx.beginPath();
-    ctx.arc(x, y, 10, 0, Math.PI*2);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-}
-
- -

Ahora viene la parte importante: queremos añadir un valor pequeño a x e y después de que cada fotograma se haya dibujado para que parezca que la pelota se está moviendo. Definamos estos valores pequeños como dx y dy, y establezcamos sus valores en 2 y -2 respectivamente. Agrega lo siguiente debajo de sus definiciones de variables x e y:

- -
var dx = 2;
-var dy = -2;
-
- -

Lo último que hay que hacer es actualizar x e y con nuestras variables dx y dy en cada fotograma, de modo que la bola será pintada en la nueva posición en cada actualización. Agrega las dos nuevas líneas siguientes indicadas a continuación a la función draw ():

- -
function draw() {
-    ctx.beginPath();
-    ctx.arc(x, y, 10, 0, Math.PI*2);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-    x += dx;
-    y += dy;
-}
- -

Guarda el código de nuevo y pruébalo en tu navegador. Esto funciona bien, aunque parece que la bola está dejando un rastro detrás de ella:

- -

- -

Borrar el  lienzo antes de cada fotograma

- -
-
La bola está dejando un rastro porque estamos pintando un nuevo círculo en cada fotograma sin borrar el anterior. No te preocupes, porque hay un método para borrar todo el contenido de lienzo: {{domxref ("CanvasRenderingContext2D.clearRect ()", "clearRect ()")}}. Este método tiene cuatro parámetros: las coordenadas x e y de la esquina superior izquierda de un rectángulo y las coordenadas x e y de la esquina inferior derecha de un rectángulo. En todo el área definida por ese rectángulo se borrará cualquier cosa que se haya pintado antes.
-
- -
-
-
 
-
-
- -

Añade la siguiente nueva línea resaltada a la función draw():

- -
function draw() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.beginPath();
-    ctx.arc(x, y, 10, 0, Math.PI*2);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-    x += dx;
-    y += dy;
-}
-
- -

Guarda tu código y vuelve a probarlo. Esta vez verás el movimiento de la bola sin dejar rastro. Cada 10 milisegundos se borra todo el lienzo, se dibuja el círculo azul (nuestra pelota) en una posición determinada y los valores x e y se actualizan para el siguiente fotograma.

- -

Limpiar el código

- -

Vamos a añadir más y más comandos a la función draw () en los próximos artículos, por lo que es bueno mantenerlo lo más simple y limpio posible. Comencemos moviendo el código de dibujo de la bola a una función separada.
-
- Reemplaza la función draw() con las dos funciones siguientes:

- -
function drawBall() {
-    ctx.beginPath();
-    ctx.arc(x, y, 10, 0, Math.PI*2);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-}
-
-function draw() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    drawBall();
-    x += dx;
-    y += dy;
-}
- -

Compara tu código

- -

Puedes comprobar el código terminado de este artículo en la demostración en vivo a continuación, y jugar con ella para entender mejor cómo funciona:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","415")}}

- -
-

Ejercicio: intenta cambiar la velocidad de la bola en movimiento o la dirección hacia la que se mueve.

-
- -

Siguientes pasos

- -

Hemos dibujado nuestra bola y hemos hecho que se mueva, pero cuando supera el borde del canvas, desaparece. En el tercer capítulo exploraremos como hacer que rebote en las paredes.

- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/terminando/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/terminando/index.html deleted file mode 100644 index a3bd5e2c2e..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/terminando/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Terminando -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up ---- -
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{Previous("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

- -
-

Este es el último de los 10 pasos del Gamedev Canvas tutorial. Puedes encontrar el código fuente tal y como quedará al terminar esta lección en Gamedev-Canvas-workshop/lesson10.html.

-
- -

Siempre es posible mejorar cualquier juego que hagamos. Por ejemplo, podemos dar vidas al jugador. Así, aunque pierda la bola una o dos veces, todavía puede intentar derribar todo el muro. También podemos mejorar los aspectos gráficos.

- -

Dar vidas al jugador

- -

Dar vidas es bastante sencillo. Primero, añade una variable para guardar el número de vidas que tiene en cada momento. Ponla después de las que ya tienes:

- -
var lives = 3;
- -

Mostrar por pantalla el número de vidas es prácticamente lo mismo que mostrar el contador de puntos. Añade la función siguiente detrás de la función drawScore():

- -
function drawLives() {
-    ctx.font = "16px Arial";
-    ctx.fillStyle = "#0095DD";
-    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
-}
- -

En lugar de terminar el juego inmediatamente, restaremos una vida hasta que ya no quede ninguna. También podemos colocar la bola y la paleta en la posición inicial cuando el jugador empiece con la vida siguiente. En la función draw() cambia las dos líneas siguientes...

- -
alert("GAME OVER");
-document.location.reload();
- -

... por estas otras:

- -
lives--;
-if(!lives) {
-    alert("GAME OVER");
-    document.location.reload();
-}
-else {
-    x = canvas.width/2;
-    y = canvas.height-30;
-    dx = 2;
-    dy = -2;
-    paddleX = (canvas.width-paddleWidth)/2;
-}
- -

Ahora, cuando la bola toca el fondo, restamos una vida. Si no queda ninguna, el jugador pierde y termina la partida. Si queda alguna, entonces colocamos la bola y la paleta en el centro, y hacemos que la bola vaya en la nueva dirección correcta y a la velocidad inicial.

- -

Sacar por pantalla el contador de vidas

- -

Tienes que añadir una llamada a drawLives() dentro de draw() debajo de la llamada a drawScore():

- -
drawLives();
-
- -

Mejorar el refresco con requestAnimationFrame()

- -

Ahora vamos a ocuparnos de algo que no es particular de este juego, sino de la forma en la que se muestran las imágenes en pantalla.

- -

{{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} ayuda al navegador a refrescar la imagen mejor que con el método {{domxref("windowTimers.setInterval()", "setInterval()")}} que estamos utilizando. Cambia la línea siguiente...

- -
setInterval(draw, 10);
- -

...por esta otra:

- -
draw();
- -

Y, ahora, al final de la función draw(), justo antes de la llave que la cierra, añade la línea siguiente, que hará que la función draw() se llame a sí misma una y otra vez:

- -
requestAnimationFrame(draw);
- -

Ahora draw() se ejecuta una y otra vez con un bucle requestAnimationFrame() pero, en lugar de hacerlo cada 10 milisegundos, dejamos que sea el navegadro quien decida cada cuánto tiempo. El navegador sincronizará el refresco, es decir, el número de fotogramas por segundo, a lo que sea capaz la máquina que está ejecutando el juego. De este modo la animación será más eficiente y más suave que el viejo método setInterval().

- -

Compara tu código

- -

Ya hemos terminado. ¡La versión final del juego está lista para publicar!

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/9temh0ta/","","320")}}

- -
-

Ejercicio: cambia el número de vidas y el ángulo de la trayectoria de la bola cuando golpea la paleta.

-
- -

Game over - de momento!

- -

Enhorabuena, has terminado todas las lecciones. Ya has aprendido las técnicas básicas de manipulación del <canvas> y la lógica que hay detrás de los juegos 2D sencillos.

- -

Ahora sería un buen momento para aprender a utilizar entornos de desarrollo (frameworks) y de continuar con el desarrollo de juegos. Puedes echar un vistazo a estas otra forma de realizar el mismo juego que has visto en 2D breakout game using Phaser, o de echar un vistazo al tutorial Cyber Orb built in Phaser. También puedes leer el contenido de Games section on MDN para inspirarte y seguir aprendiendo.

- -

También puedes volve al índice de este tutorial. ¡Diviértete programando!

- -

{{Previous("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/track_the_score_and_win/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/track_the_score_and_win/index.html deleted file mode 100644 index b67a730e94..0000000000 --- a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/track_the_score_and_win/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Poner un contador y terminar ganando -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win ---- -
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

- -
-

Este es el octavo capítulo de 10, del Gamedev Canvas tutorial. Puedes encontrar el código fuente como debería quedar tras este capítulo en Gamedev-Canvas-workshop/lesson8.html.

-
- -

Destruir los ladrillos mola, pero para que el juego sea aún mejor, podría dar puntos cada vez que el jugador rompe un ladrillo, y mostrar un contador.

- -

El contador

- -

Si puedes ver el contador mientras juegas, puede que consigas impresionar a tus amigos. Necesitas una variable para guardar el contador. Añade esto a tu JavaScript, después de las otras definiciones de variables:

- -
var score = 0;
- -

También necesitas una función drawScore() para enseñar el contador por pantalla. Añade esto después de la función collisionDetection():

- -
function drawScore() {
-    ctx.font = "16px Arial";
-    ctx.fillStyle = "#0095DD";
-    ctx.fillText("Score: "+score, 8, 20);
-}
- -

Dibujar texto en el <canvas> es similar a dibujar un círculo o cualquier otra figura. La definición del tipo de letra (fuente) se hace igual que en CSS, puedes fijar el tamaño y fuente con el método {{domxref("CanvasRenderingContext2D.font","font()")}} method. Despúes utilizas {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} para fijar el color y {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} para escribir el texto y el lugar en el que se va a dibujar. El primer parámetro es el texto en si y los otros dos son las coordenadas.

- -

Para sumar un punto cada vez que se rompe un ladrillo, añade la línea que está marcada aquí debajo:

- -
function collisionDetection() {
-    for(c=0; c<brickColumnCount; c++) {
-        for(r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                    score++;
-                }
-            }
-        }
-    }
-}
- -

Llamando a drawScore() (dibujar contador) desde la función draw() hace que se muestre el contador actualizado en la pantalla. Añade la línea siguiente en draw(), justo debajo de la llamada a drawPaddle():

- -
drawScore();
- -

Mostrar un mensaje de victoria cuando se hayan destruido todos los ladrillos

- -

Lo de sumar puntos funciona, pero tiene un final. ¿Qué ocurrirá cuando no queden ladrillos? Precisamente ese es el principal objetivo del juego, tendrás que dibujar un mensaje de victoria. Añade las líneas marcadas a tu función collisionDetection():

- -
function collisionDetection() {
-    for(c=0; c<brickColumnCount; c++) {
-        for(r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                    score++;
-                    if(score == brickRowCount*brickColumnCount) {
-                        alert("YOU WIN, CONGRATULATIONS!");
-                        document.location.reload();
-                    }
-                }
-            }
-        }
-    }
-}
- -

Gracias a esto, los jugadores pueden ganar cuando rompen todos los ladrillos, que es muy importante. La función document.location.reload() vuelve a cargar la página y el juego empieza de nuevo, una vez se hace clic sobre el botón del alert().

- -

Compara tu código

- -

Puedes comparar tu código con este:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/mvfkcydz/","","320")}}

- -
-

Ejercicio: añade más puntos por ladrillo y muestra el contador cuando salga el alert() del final del juego con victoria.

-
- -

Pasos siguientes

- -

El juego, ahora mismo, ya tiene buena pinta. En la siguiente lección conseguirás que sea más atractivo porque añadirás el Control del ratón.

- -

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

diff --git a/files/es/games/workflows/html5_gamedev_phaser_device_orientation/index.html b/files/es/games/workflows/html5_gamedev_phaser_device_orientation/index.html deleted file mode 100644 index 135193ec50..0000000000 --- a/files/es/games/workflows/html5_gamedev_phaser_device_orientation/index.html +++ /dev/null @@ -1,437 +0,0 @@ ---- -title: >- - Introducción al Desarrollo de Juegos en HTML5 con Phaser y la API de - Orientación a Dispositivos -slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation -tags: - - API Vibración - - API orientacion de dispositivos - - Canvas - - Desarrollo de videojuegos - - HTML5 - - Phaser -translation_of: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation ---- -
{{GamesSidebar}}

{{ draft() }}

- -

Introducción

- -

En este tutorial iremos a través del proceso de construcción de un juego en HTML5 para móviles que utilizará las APIs de Orientación para Dispositivos y Vibración para mejorar la jugabilidad y estará construido utilizando el framework Phaser. Se recomienda tener conocimientos básicos de JavaScript para sacar mayor provecho a este tutorial.

- -

Ejemplo

- -

Al finalizar este tutorial tendrás un juego demo completamente funcional: Cyber Orb. Se verá más o menos así:

- -

- -

Phaser framework

- -

Phaser es un framework para construir juegos, de móvil o escritorio, en HTML5 . Es nuevo pero está creciendo velozmente gracias a la apasionada comunidad involucrada en el proceso de desarrollo. Puedes chequearlo en GitHub donde se encuentra como open source. Lee la documentación en línea y recorre su gran colección de ejemplos. El framework Phaser provee una serie de herramientas que acelerarán el desarrollo y te ayudaran a manejar las tareas genéricas necesarias para completar tu juego, para que así puedas concentrarte en la idea del juego en sí.

- -

Empezando con el proyecto

- -

Puedes ver el código fuente de Cyber Orb en GitHub. La estructura de carpetas no es nada complicada: el punto de partida es el archivo index.html donde inicializaremos el framework y configuraremos el canvas donde correrá el juego.

- -

- -

Puedes hacer clic en el archivo index desde tu navegador favorito para iniciar el juego y probarlo. También hay tres carpetas en el directorio: 

- - - -

Configurando el canvas

- -

Vamos a renderizar nuestro juego sobre el elemento <canvas>, pero no lo haremos manualmente  — de esto se ocupará el framework.  Vamos a configurarlo: nuestro punto de partida es el archivo index.html con el siguiente contenido. Puedes crearlo tú mismo si quieres hacer un seguimiento más detallado:

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title>Cyber Orb</title>
-    <style> body { margin: 0; background: #333; } </style>
-    <script src="src/phaser.min.js"></script>
-    <script src="src/Boot.js"></script>
-    <script src="src/Preloader.js"></script>
-    <script src="src/MainMenu.js"></script>
-    <script src="src/Game.js"></script>
-</head>
-<body>
-<script>
-(function() {
-    var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
-    game.state.add('Boot', Ball.Boot);
-    game.state.add('Preloader', Ball.Preloader);
-    game.state.add('MainMenu', Ball.MainMenu);
-    game.state.add('Game', Ball.Game);
-    game.state.start('Boot');
-})();
-</script>
-</body>
-</html>
- -

Hasta ahora tenemos una simple página web HTML con el contenido básico en la sección <head>: configuración de caracteres, título, estilo y las inclusión de los archivos JavaScripts. El <body> contiene la inicialización del framework Phaser y las definiciones del estado del juego.

- -
var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
- -

La linea de arriba inicializará la intancia de Phaser — los argumentos son el ancho del <canvas>, su altura, el método de renderizado (estamos utilizando CANVAS pero también existen disponibles las opciones WEBGL y AUTO) y el ID opcional del contenedor DOM en el que queremos poner el <canvas>. Si no hay nada especificado en el último argumento o el elemento no es encontrado, el <canvas> será añadido a la etiqueta <body>. Sin el framework para añadir el elemento canvas hubieses tenido que escribir algo como esto dentro de la etiqueta <body>:

- -
<canvas id='game' width='320' height='480'></canvas>
- -

Es importante recordar que el framework está montando métodos útiles para acelerar un montón de cosas como la manipulación de imagenes o la administración de elementos, que serían más difíciles si tuvieramos que hacerlo manualmente.

- -
-

Nota: Puedes leer este artículo: "Building Monster Wants Candy" para una introducción en profundidad a las funciones y métodos específicos de Phaser.

-
- -

Volviendo a los estados del juego: La linea de abajo añade un nuevo estado al juego llamado Boot:

- -
game.state.add('Boot', Ball.Boot);
- -

El primer valor es el nombre del estado, el segundo es el objeto al que queremos asignárselo. El metodo start está iniciando el estado dado y haciendolo activo. Veamos qué es lo que son los estados realmente.

- -
 
- -

Gestionando los estados de juego

- -

Los estados en Phaser son partes separadas de la lógica del juego, en nuestro caso los estamos cargando de archivos JavaScript independientes para un mejor mantenimiento. En este juego tenemos estados básicos: Boot, Preloader, MainMenu, Howto y Game. Boot se hará cargo de la inicialización de algunas opciones de configuración, Preloader cargará todos los elementos utilizados como los gráficos y el audio, MainMenu es el menu con el botón de inicio, Howto muestra las intrucciones de cómo jugar y el estado Game es el que finalmente te permite jugar el juego. Veamos rapidamente el contenido de esos estados.

- -

Boot.js

- -

El estado Boot es el primero en el juego.

- -
var Ball = {
-    _WIDTH: 320,
-    _HEIGHT: 480
-};
-Ball.Boot = function(game) {};
-Ball.Boot.prototype = {
-    preload: function() {
-        this.load.image('preloaderBg', 'img/loading-bg.png');
-        this.load.image('preloaderBar', 'img/loading-bar.png');
-    },
-    create: function() {
-        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
-        this.game.scale.pageAlignHorizontally = true;
-        this.game.scale.pageAlignVertically = true;
-        this.game.state.start('Preloader');
-    }
-};
- -

El objeto principal Ball es definido y estamos añadiendo dos variables llamadas _WIDTH y _HEIGHT esos seran el ancho y la altura del canvas de nuestro juego, respectivamente — nos ayudarán a posicionar los elementos en la pantalla. Estamos cargando dos imagenes primero que serán usadas después en el estado Preload para mostrar el progreso de la carga de los demás elementos. La función create contiene algunas de las configuraciones básicas: estamos configurando la escala y la alineación del canvas, y avanzando al estado Preload cuando todo este listo.

- -

Preloader.js

- -

El estado Preloader se ocupa de cargar todos los elementos:

- -
Ball.Preloader = function(game) {};
-Ball.Preloader.prototype = {
-    preload: function() {
-        this.preloadBg = this.add.sprite((Ball._WIDTH-297)*0.5, (Ball._HEIGHT-145)*0.5, 'preloaderBg');
-        this.preloadBar = this.add.sprite((Ball._WIDTH-158)*0.5, (Ball._HEIGHT-50)*0.5, 'preloaderBar');
-        this.load.setPreloadSprite(this.preloadBar);
-
-        this.load.image('ball', 'img/ball.png');
-        // ...
-        this.load.spritesheet('button-start', 'img/button-start.png', 146, 51);
-        // ...
-        this.load.audio('audio-bounce', ['audio/bounce.ogg', 'audio/bounce.mp3', 'audio/bounce.m4a']);
-    },
-    create: function() {
-        this.game.state.start('MainMenu');
-    }
-};
- -

Para crear un nuevo botón tenemos el método add.button con la siguiente lista de argumentos opcionales:

- - - -

El anchor.set colocará el punto de ancla en el botón con el cual se realizarán y aplicarán todos los cálculos de posición para el botón. En nuestro caso, está anclado a la mitad del borde izquierdo y al comienzo del borde superior, para así centrarlo de manera horizontal facilmente, sin necesidad de saber su ancho.

- -

Cuando el boton de inicio es presionado, en lugar de saltar directamente a la acción, el juego mostrará la pantalla con las intrucciones para jugar.

- -

Howto.js

- -
Ball.Howto = function(game) {
-};
-Ball.Howto.prototype = {
-    create: function() {
-        this.buttonContinue = this.add.button(0, 0, 'screen-howtoplay', this.startGame, this);
-    },
-    startGame: function() {
-        this.game.state.start('Game');
-    }
-};
- -

El estado Howto muesta las intrucciones de juego en la pantalla antes de comenzar el juego. Luego de clickear la pantalla el juego es lanzado.

- -

Game.js

- -

El estado Game del archivo Game.js es donde ocurre toda la magia. Todas las inicializaciones estan en la función create() (que se lanza una vez al comienzo del juego). Luego de eso, algunas funcionalidades requeriran más código para controlar — escribiremos nuestras propias funciones para manejar tareas más complicadas. En particular, toma nota de la función update() que es ejecutada en cada frame y actualiza cosas como la posición de la pelota.

- -
Ball.Game = function(game) {};
-Ball.Game.prototype = {
-    create: function() {},
-    initLevels: function() {},
-    showLevel: function(level) {},
-    updateCounter: function() {},
-    managePause: function() {},
-    manageAudio: function() {},
-    update: function() {},
-    wallCollision: function() {},
-    handleOrientation: function(e) {},
-    finishLevel: function() {}
-};
- -

Las funciones create y update son específicas del framework, mientras que otras seran nuestras propias creaciones:

- - - -

Agregando la pelota y sus mecanismos de movimiento

- -

Primero vamos a ir a la función create(), inicializamos el objeto ball y le asignamos unas cuantas propiedades:

- -
this.ball = this.add.sprite(this.ballStartPos.x, this.ballStartPos.y, 'ball');
-this.ball.anchor.set(0.5);
-this.physics.enable(this.ball, Phaser.Physics.ARCADE);
-this.ball.body.setSize(18, 18);
-this.ball.body.bounce.set(0.3, 0.3);
- -

Aqui estamos agregando un sprite en un lugar de la pantalla y utilizando la imagen de la pelota de los elementos gráficos ya cargados. También estamos configurando el anchor (ancla) que realizará los cálculos de física para el centro de la pelota, habilitando el motor de físicas Arcade (que manejara todas las físicas para el movimiento de la pelota), y estableciendo el tamaño del cuerpo para la detección de colisiones. La propiedad bounce es utilizada para configurar el 'rebote' de la pelota cuando golpea los obstaculos.

- -

Controlando la pelota

- -

Es genial tener lista la pelota para poder lanzarla en la zona del juego, pero también es importante poder realmente moverla! Ahora vamos a añadir la capacidad de controlar con el teclado la pelota en los dispositivos de escritorio, y luego pasaremos a la implementación de la API de Orientación de Dispositivo. Vamos a enfocarnos en el teclado primero añadiendo lo siguiente a la función create():

- -
this.keys = this.game.input.keyboard.createCursorKeys();
- -

Como puedes ver, hay una función especial de Phaser llamada createCursorKeys() que nos dará un objeto con controladores de evento para las cuatro teclas de flecha, que nos permitira jugar con: arriba, abajo, izquierda y derecha.

- -

A continuación añadiremos el siguiente código a la función update(), para que sea ejecutado en cada frame. El objeto this.keys será chequeado con el input del jugador (las teclas que presione por ejemplo) así la pelota podrá reaccionar acorde, con una fuerza predefinida:

- -
if(this.keys.left.isDown) {
-    this.ball.body.velocity.x -= this.movementForce;
-}
-else if(this.keys.right.isDown) {
-    this.ball.body.velocity.x += this.movementForce;
-}
-if(this.keys.up.isDown) {
-    this.ball.body.velocity.y -= this.movementForce;
-}
-else if(this.keys.down.isDown) {
-    this.ball.body.velocity.y += this.movementForce;
-}
- -

De esa manera podemos verificar qué tecla es presionada en determinado frame y aplicar la fuerza definida a la pelota, así aumentar la velocidad en la dirección correcta.

- -

Implementando la API de Orientación del Dispositivo

- -

Probablemente la parte más interesante del juego es que utiliza la API de Orientación para Dispositivos móviles. Gracias a esto puedes jugar el juego inclinando el dispositivo en la dirección que quieres que la pelota ruede. Aquí está el código de la función create() responsable por esto:

- -
window.addEventListener("deviceorientation", this.handleOrientation, true);
- -

Vamos a añadir un detector de eventos al evento "deviceorientation" y vincularlo a la función handleOrientation, se ve como esto:

- -
handleOrientation: function(e) {
-    var x = e.gamma;
-    var y = e.beta;
-    Ball._player.body.velocity.x += x;
-    Ball._player.body.velocity.y += y;
-}
- -

Mientras más inclines el dispositivo, más fuerza se aplica a la pelota y la velocidad en la que se mueve es mayor.

- -

- -
-

Nota: Para encontrar más sobre implementar la orientación de los dispositivos y cómo se vé en código crudo, lee Keep it level: responding to device orientation changes.

-
- -

Añadiendo el agujero

- -

El principal objetivo del juego es mover la pelota desde la posición inicial a la posición final: un agujero en el suelo. Esta implementación es muy similar a la parte anterior en donde creamos la pelota, y también es añadida en la función create() de nuestro estado Game:

- -
this.hole = this.add.sprite(Ball._WIDTH*0.5, 90, 'hole');
-this.physics.enable(this.hole, Phaser.Physics.ARCADE);
-this.hole.anchor.set(0.5);
-this.hole.body.setSize(2, 2);
- -

La diferencia está en que el cuerpo del agujero se configura como inamovible por lo que no se moverá cuando acertamos con la pelota y tendrá calculada la detección de colisión (esto se tratará más adelante en este artículo).

- -

Construyendo el laberinto de bloques

- -

Para hacer más difícil el juego, y más interesante, añadiremos algunos obstaculos entre la pelota y la sálida. Podríamos usar un editor de niveles pero por motivo de este tutorial, vamos a crear algo nosotros mismos.

- -

Para contener el bloque de información usaremos un array con los datos de nivel: para cada bloque almacenaremos las posiciones abolutas izquierda y superior en pixeles (x e y) y el tipo de bloque: horizontal o vertical (t con el valor 'w' para el ancho, y 'h' para la altura). Luego, para cargar el nivel analizaremos los datos y mostraremos los bloques especificos para ese nivel. En la función initLevels tenemos:

- -
this.levelData = [
-    [
-        { x: 96, y: 224, t: 'w' }
-    ],
-    [
-        { x: 72, y: 320, t: 'w' },
-        { x: 200, y: 320, t: 'h' },
-        { x: 72, y: 150, t: 'w' }
-    ],
-    // ...
-];
- -

Todos los elementos del array contienen una colección de bloques con una posición x e y y un valor t para cada uno. Luego de levelData pero dentro de la función initLevels, añadiremos los bloques dentro de un array en el loop for usando algunos de los métodos específicos del framework:

- -
for(var i=0; i<this.maxLevels; i++) {
-    var newLevel = this.add.group();
-    newLevel.enableBody = true;
-    newLevel.physicsBodyType = Phaser.Physics.ARCADE;
-    for(var e=0; e<this.levelData[i].length; e++) {
-        var item = this.levelData[i][e];
-        newLevel.create(item.x, item.y, 'element-'+item.t);
-    }
-    newLevel.setAll('body.immovable', true);
-    newLevel.visible = false;
-    this.levels.push(newLevel);
-}
- -

Primero, add.group() es usado para crear un nuevo grupo de items. Luego, el body tipe ARCADE se configura para permitir los cálculos de física. El método newLevel.create crea nuevos items en el grupo con posiciones superior e izquierda iniciales y su propia imagen. Si no quieres recorrer nuevamente la lista de elementos para agregar una propiedad a cada uno explicitamente, puedes usar setAll en un grupo para aplicarlo a todos los items en ese grupo.

- -

Los objetos son almacenados en el array this.levels, el cual es por defecto invisible. Para cargar niveles específicos, nos aseguramos de que los niveles previos esten escondidos, y mostramos el nivel actual:

- -
showLevel: function(level) {
-    var lvl = level | this.level;
-    if(this.levels[lvl-2]) {
-        this.levels[lvl-2].visible = false;
-    }
-    this.levels[lvl-1].visible = true;
-}
- -

Gracias a eso el juego da al jugador un reto: ahora tiene que rodar la pelota a través del área de juego y guiarla por el laberinto construido por bloques. Es solo un ejemplo de cargar los niveles, y solo hay 5 puramente para mostrar la idea, pero podés trabajar en expandirlo por tu cuenta.

- -

Detección de colisión

- -

Hasta este punto tenemos la pelota, que puede ser controlada por el jugador, el agujero que se tiene que alcanzar y los obstáculos que bloquean el camino. Sin embargo, hay un problema: nuestro juego todavía no tiene ninguna detección de colisiones, así que no sucede nada cuando la pelota golpea los bloques, sólo los atraviesa. Vamos a arreglarlo! La buena noticia es que el framework se ocupará de calcular la detección de colisones, nosotros sólo debemos especificar los objetos con los que colisionará en la función update():

- -
this.physics.arcade.collide(this.ball, this.borderGroup, this.wallCollision, null, this);
-this.physics.arcade.collide(this.ball, this.levels[this.level-1], this.wallCollision, null, this);
- -

Esto le dirá al framework que ejecute la función wallCollision cuando la pelota golpee cualquiera de las paredes. Podemos usar la función wallCollision para añadir cualquier funcionalidad que querramos, como por ejemplo agregar el sonido de rebote e implementar la API de Vibración.

- -

También debemos volver al objeto pelota y limitarlo a moverse sólo en la zona visible, para que no salga de la pantalla. Hay una función muy útil en Phaser que se llama collideWorldBounds:

- -
ball.body.collideWorldBounds = true;
- -

Hace exactamente lo que necesitamos: ahora la pelota rebotará en los bordes de la pantalla como de las paredes.

- -

Añadiendo el sonido

- -

Entre los elementos precargados hay una pista de audio (en varios formatos para asegurar la compatibilidad con el navegador), que podremos usar ahora. Debe primero ser definida en la función create():

- -
this.bounceSound = this.game.add.audio('audio-bounce');
- -

Si el estado del audio es true (es decir que el sonido del juego está activado) podremos reproducirlo en la función wallCollision:

- -
if(this.audioStatus) {
-    this.bounceSound.play();
-}
- -

Eso es todo: cargar y reproducir sonidos es sencillo con Phaser.

- -

Implementando la API de Vibración

- -

Cuando la detección de colisión funcione como es esperado, añadamos algunos efectos especiales con la ayuda de la API de Vibración.

- -

La mejor forma de usarla en nuestro caso es haciendo que el teléfono vibre cada vez que la pelota golpee las paredes: dentro de la función wallCollision:

- -
if("vibrate" in window.navigator) {
-    window.navigator.vibrate(100);
-}
- -

Si el método vibrate es soportado por el navegador y está disponible en el objeto window.navigator, hará vibrar al telefono por 100 milisegundos. Eso es todo!

- -

Añadiendo el tiempo transcurrido

- -

Para mejorar la re-jugabilidad y dar a los jugadores la opción de competir entre ellos, almacenaremos el tiempo transcurrido: los jugadores entonces intentaran mejorar su tiempo de finalizacion. Para implementar esto en el juego tenemos que crear una variable para almacenar el número actual de segundos transcurrido desde el inicio del juego y mostrarselo al jugador durante el juego. Definamos primero las variables en la función create:

- -
this.timer = 0; // time elapsed in the current level
-this.totalTimer = 0; // time elapsed in the whole game
- -

Luego, podemos inicializar los objetos de texto necesarios para mostrar la información al usuario:

- -
this.timerText = this.game.add.text(15, 15, "Time: "+this.timer, this.fontBig);
-this.totalTimeText = this.game.add.text(120, 30, "Total time: "+this.totalTimer, this.fontSmall);
- -

Estamos definiendo la posición superior e izquierda del texto, el contenido que se muestra y el estilo aplicado al texto. Lo hemos impreso en pantalla, pero sería bueno actualizar los valores cada segundo:

- -
this.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this);
- -

Este bucle, también en la función create, ejecutará la función updateCounter cada segundo desde el comienzo del juego, así podemos aplicar los cambios acordes. Así es como se ve la función updateCounter completa:

- -
updateCounter: function() {
-    this.timer++;
-    this.timerText.setText("Time: "+this.timer);
-    this.totalTimeText.setText("Total time: "+(this.totalTimer+this.timer));
-},
- -

Como puedes ver estamos incrementando la variable this.timer y actualizando el contenido del objeto de texto con el valor actual en cada iteración, por lo que el jugador verá el tiempo transcurrido.

- -

Terminando el nivel y el juego

- -

La pelota está rodando en la pantalla, el temporizador funciona y tenemos el agujero al que tenemos que llegar. Vamos a configurar la posibilidad de finalizar el juego! La siguiente linea en la funcion update() añade un detector que se activa cuando la pelota llega al agujero.

- -
this.physics.arcade.overlap(this.ball, this.hole, this.finishLevel, null, this);
- -

Esto funciona de manera similar al método colide explicado anteriormente. Cuando la pelota se superpone con el agujero (en lugar de colisionar), la función finishLevel es ejecutada:

- -
finishLevel: function() {
-    if(this.level >= this.maxLevels) {
-        this.totalTimer += this.timer;
-        alert('Congratulations, game completed!\nTotal time of play: '+this.totalTimer+' seconds!');
-        this.game.state.start('MainMenu');
-    }
-    else {
-        alert('Congratulations, level '+this.level+' completed!');
-        this.totalTimer += this.timer;
-        this.timer = 0;
-        this.level++;
-        this.timerText.setText("Time: "+this.timer);
-        this.totalTimeText.setText("Total time: "+this.totalTimer);
-        this.levelText.setText("Level: "+this.level+" / "+this.maxLevels);
-        this.ball.body.x = this.ballStartPos.x;
-        this.ball.body.y = this.ballStartPos.y;
-        this.ball.body.velocity.x = 0;
-        this.ball.body.velocity.y = 0;
-        this.showLevel();
-    }
-},
- -

Si el nivel actual es igual al maximo número de niveles (5, en este caso), entonces el juego termina: recibiras un mensaje de felicitación junto con el numero de segundas transcurridos durante todo el juego, y un botoón para presionar que te llevará al menú principal.

- -

Si el nivel actual es menor que 5, todas las variables necesarias se reinician y el siguiente nivel es cargado.

- -

Ideas para nuevas características

- -

Esto no es más que una demostración funcional de un juego que podría tener un montón de características adicionales. Por ejemplo podemos añadir poderes para recoger en el camino que harán que nuestra pelota ruede más rápido, otro podría detener el temporizador durante unos segundos o dar la pelota poderes especiales para atravesar obstáculos. También hay espacio para los obstáculos y trampas que harán más lenta la pelota, acelerar el tiempo o trampas de la propia pelota. Puedes crear más niveles con dificultades diferentes para cada uno. Incluso puedes obtener logros, tablas de clasificación y medallas para diferentes acciones en el juego. Hay un sinfín de posibilidades: sólo dependen de tu imaginación.

- -

Resumen

- -

Espero que este tutorial te ayude a introducirte dentro del desarrollo de los juegos 2D y te inspire a crear asombrosos juegos por tu cuenta. Puedes jugar el demo de Cyber Orb y chequear su código fuente en GitHub.

- -

HTML5 nos da herramientas en bruto, los frameworks construidos sobre estas se están volviendo más rápidos y mejores, por lo que ahora es un gran momento para meterse en el desarrollo de juegos web. En este tutorial usamos Phaser, pero hay un gran número de otros frameworks que vale la pena considerar también, como ImpactJS, Construct 2 o PlayCanvas — depende de tus preferencias, habilidades de programación (o la falta de estas), el tamaño de tu proyecto, los requerimientos y otros aspectos. Deberías chequearlos todos y decidir cual es el que mejor se ajusta a tus necesidades.

diff --git a/files/es/games/workflows/index.html b/files/es/games/workflows/index.html deleted file mode 100644 index 3a0807cc77..0000000000 --- a/files/es/games/workflows/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Workflows for different game types -slug: Games/Workflows -tags: - - NeedsTranslation - - TopicStub -translation_of: Games/Tutorials ---- -
{{GamesSidebar}}

This page will contain links to different article series covering different workflows for effectively creating different types of web games, whether you want to create a 2D or 3D game from scratch, or port a C++ or Flash game over to open web technologies.

-

For example, a 2D maze game with Phaser and the Device Orientation API.

diff --git "a/files/es/generaci\303\263n_de_guids/index.html" "b/files/es/generaci\303\263n_de_guids/index.html" deleted file mode 100644 index 6fb035653b..0000000000 --- "a/files/es/generaci\303\263n_de_guids/index.html" +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Generación de GUIDs -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/glossary/algorithm/index.html b/files/es/glossary/algorithm/index.html new file mode 100644 index 0000000000..e007ec918e --- /dev/null +++ b/files/es/glossary/algorithm/index.html @@ -0,0 +1,9 @@ +--- +title: Algoritmo +slug: Glossary/Algoritmo +tags: + - CodingScripting + - Glossary +translation_of: Glossary/Algorithm +--- +

Un algoritmo es un conjunto de instrucciones autocontenidas que realiza una función.

diff --git a/files/es/glossary/algoritmo/index.html b/files/es/glossary/algoritmo/index.html deleted file mode 100644 index e007ec918e..0000000000 --- a/files/es/glossary/algoritmo/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Algoritmo -slug: Glossary/Algoritmo -tags: - - CodingScripting - - Glossary -translation_of: Glossary/Algorithm ---- -

Un algoritmo es un conjunto de instrucciones autocontenidas que realiza una función.

diff --git a/files/es/glossary/argument/index.html b/files/es/glossary/argument/index.html new file mode 100644 index 0000000000..c3ccfb69ca --- /dev/null +++ b/files/es/glossary/argument/index.html @@ -0,0 +1,20 @@ +--- +title: Argumento +slug: Glossary/Argumento +translation_of: Glossary/Argument +--- +

Un argumento es un valor (primitivo u objeto) (Véase {{glossary("value")}},  {{Glossary("primitive")}}, {{Glossary("object")}}) pasado como valor de entrada a una función ({{Glossary("function")}}).

+ +

Saber más

+ +

Conocimiento general

+ + + +

Referencia técnica

+ + diff --git a/files/es/glossary/argumento/index.html b/files/es/glossary/argumento/index.html deleted file mode 100644 index c3ccfb69ca..0000000000 --- a/files/es/glossary/argumento/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Argumento -slug: Glossary/Argumento -translation_of: Glossary/Argument ---- -

Un argumento es un valor (primitivo u objeto) (Véase {{glossary("value")}},  {{Glossary("primitive")}}, {{Glossary("object")}}) pasado como valor de entrada a una función ({{Glossary("function")}}).

- -

Saber más

- -

Conocimiento general

- - - -

Referencia técnica

- - diff --git "a/files/es/glossary/arquitectura_de_la_informaci\303\263n/index.html" "b/files/es/glossary/arquitectura_de_la_informaci\303\263n/index.html" deleted file mode 100644 index 222ed88e59..0000000000 --- "a/files/es/glossary/arquitectura_de_la_informaci\303\263n/index.html" +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Arquitectura de la información -slug: Glossary/Arquitectura_de_la_información -tags: - - Arquitectura informacional - - Diseño - - Glosario -translation_of: Glossary/Information_architecture ---- -

La arquitectura de la información, aplicada al diseño y desarrollo web, es la práctica de organizar la información, contenido y funcionalidad de un sitio web para que presente la mejor experiencia de usuario posible, con información y servicios fáciles de usar y encontrar.

- -

Aprende más

- -

Conocimientos generales

- - diff --git a/files/es/glossary/array/index.html b/files/es/glossary/array/index.html new file mode 100644 index 0000000000..74b22dbedc --- /dev/null +++ b/files/es/glossary/array/index.html @@ -0,0 +1,41 @@ +--- +title: Arreglos (Matrices) +slug: Glossary/Arreglos +tags: + - Arreglos + - CodificaciónScripting + - Glosario + - JavaScript + - Matriz + - programacion +translation_of: Glossary/array +--- +

Un arreglo (matriz) es una colección ordenada de datos (tanto {{glossary("Primitivo", "primitivos")}} u {{glossary("Object", "objetos")}} dependiendo del lenguaje). Los arreglos (matrices) se emplean para almacenar multiples valores en una sola variable, frente a las variables que sólo pueden almacenar un valor (por cada variable).

+ +

Cada elemento del arreglo (matriz)  tiene un número al que está asociado, llamado "índice numérico" (numeric index), que permite acceder a él.

+ +

En JavaScript, los arreglos (matrices) comienzan a partir del índice cero y pueden ser manipulados con varios {{glossary("Método", "métodos")}}.

+ +

Un arreglo (matriz) en JavaScript se ve de esta forma:

+ +
var myArray = [1, 2, 3, 4];
+
+var catNamesArray = ["Jacqueline", "Sophia", "Autumn"];
+
+//Los arreglos en Javascript pueden guardar distintos tipos de datos como se muestra anteriormente
+
+
+ +

Saber más

+ +

Conocimiento general

+ + + +

Referencia técnica

+ + diff --git a/files/es/glossary/arreglos/index.html b/files/es/glossary/arreglos/index.html deleted file mode 100644 index 74b22dbedc..0000000000 --- a/files/es/glossary/arreglos/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Arreglos (Matrices) -slug: Glossary/Arreglos -tags: - - Arreglos - - CodificaciónScripting - - Glosario - - JavaScript - - Matriz - - programacion -translation_of: Glossary/array ---- -

Un arreglo (matriz) es una colección ordenada de datos (tanto {{glossary("Primitivo", "primitivos")}} u {{glossary("Object", "objetos")}} dependiendo del lenguaje). Los arreglos (matrices) se emplean para almacenar multiples valores en una sola variable, frente a las variables que sólo pueden almacenar un valor (por cada variable).

- -

Cada elemento del arreglo (matriz)  tiene un número al que está asociado, llamado "índice numérico" (numeric index), que permite acceder a él.

- -

En JavaScript, los arreglos (matrices) comienzan a partir del índice cero y pueden ser manipulados con varios {{glossary("Método", "métodos")}}.

- -

Un arreglo (matriz) en JavaScript se ve de esta forma:

- -
var myArray = [1, 2, 3, 4];
-
-var catNamesArray = ["Jacqueline", "Sophia", "Autumn"];
-
-//Los arreglos en Javascript pueden guardar distintos tipos de datos como se muestra anteriormente
-
-
- -

Saber más

- -

Conocimiento general

- - - -

Referencia técnica

- - diff --git a/files/es/glossary/asynchronous/index.html b/files/es/glossary/asynchronous/index.html new file mode 100644 index 0000000000..439f95eb37 --- /dev/null +++ b/files/es/glossary/asynchronous/index.html @@ -0,0 +1,31 @@ +--- +title: Asíncrono +slug: Glossary/Asíncrono +tags: + - Asíncrono + - Glosario + - Mecánicas de la Web + - Web +translation_of: Glossary/Asynchronous +--- +

El término asíncrono se refiere al concepto de que más de una cosa ocurre al mismo tiempo, o múltiples cosas relacionadas ocurren sin esperar a que la previa se haya completado. En informática, la palabra "asíncrono" se usa en los siguientes contextos:

+ +
+
Redes y comunicaciones
+
La comunicación asíncrona es un método de intercambio de mensajes entre dos o más partes, en la que cada parte recibe y procesa el mensaje cuando sea conveniente o posible de realizar, en vez de hacerlo inmediatamente al recibirlo. Adicionalmente, los mensajes pueden ser enviados sin esperar el acuse de recibo de los mismos, bajo el entendimiento de que si ocurre algún problema, quien los recibe solicitará las correcciones o manejara la situación.
+
Para los humanos, el correo electrónico es un método de comunicación asíncrono: el emisor envía el correo y el receptor lo leerá y responderá cuando le sea conveniente en vez de hacerlo de una vez. Ambos lados pueden continuar enviando y recibiendo mensajes cuando quiera que ellos deseen, en lugar de tener que programarse uno alrededor del otro.
+
Cuando el software se comunica de manera asíncrona, un programa puede realizar una solicitud de información a otra pieza de software (un servidor, por ejemplo), y continuar haciendo otras tareas mientras espera por la respuesta. Por ejemplo,la técnica de programación AJAX (Asynchronus JavaScript and {{Glossary("XML")}}) - usualmente llamada simplemente "Ajax", incluso a pesar de que usualmente en las aplicaciones modernas se utilice {{Glossary("JSON")}} en vez de XML - es un mecanismo por el que se solicitan tamaños relativamente pequeños de datos al servidor usando {{Glossary("HTTP")}} , siendo los resultados devueltos cuando estén disponibles más que de inmediato.
+
Diseño de Software
+
El diseño de software asíncrono amplía el concepto al construir código que permita a un programa solicitar que una tarea se realice al mismo tiempo que la tarea (o tareas) original, sin detenerse a esperar a que la primera se haya completado. Cuando la tarea secundaria se completa, la original es notificada usando un mecanismo acordado, de tal forma que sepa que el trabajo se ha completado y que el resultado, si es que existe, está disponible.
+
Existen diversas técnicas de programación para implementar software asíncrono. Vea el artículo Asynchronous JavaScript  para terner una introducción a ellos.
+
+
+ +

Saber más

+ +

Referencia técnica

+ + diff --git "a/files/es/glossary/as\303\255ncrono/index.html" "b/files/es/glossary/as\303\255ncrono/index.html" deleted file mode 100644 index 439f95eb37..0000000000 --- "a/files/es/glossary/as\303\255ncrono/index.html" +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Asíncrono -slug: Glossary/Asíncrono -tags: - - Asíncrono - - Glosario - - Mecánicas de la Web - - Web -translation_of: Glossary/Asynchronous ---- -

El término asíncrono se refiere al concepto de que más de una cosa ocurre al mismo tiempo, o múltiples cosas relacionadas ocurren sin esperar a que la previa se haya completado. En informática, la palabra "asíncrono" se usa en los siguientes contextos:

- -
-
Redes y comunicaciones
-
La comunicación asíncrona es un método de intercambio de mensajes entre dos o más partes, en la que cada parte recibe y procesa el mensaje cuando sea conveniente o posible de realizar, en vez de hacerlo inmediatamente al recibirlo. Adicionalmente, los mensajes pueden ser enviados sin esperar el acuse de recibo de los mismos, bajo el entendimiento de que si ocurre algún problema, quien los recibe solicitará las correcciones o manejara la situación.
-
Para los humanos, el correo electrónico es un método de comunicación asíncrono: el emisor envía el correo y el receptor lo leerá y responderá cuando le sea conveniente en vez de hacerlo de una vez. Ambos lados pueden continuar enviando y recibiendo mensajes cuando quiera que ellos deseen, en lugar de tener que programarse uno alrededor del otro.
-
Cuando el software se comunica de manera asíncrona, un programa puede realizar una solicitud de información a otra pieza de software (un servidor, por ejemplo), y continuar haciendo otras tareas mientras espera por la respuesta. Por ejemplo,la técnica de programación AJAX (Asynchronus JavaScript and {{Glossary("XML")}}) - usualmente llamada simplemente "Ajax", incluso a pesar de que usualmente en las aplicaciones modernas se utilice {{Glossary("JSON")}} en vez de XML - es un mecanismo por el que se solicitan tamaños relativamente pequeños de datos al servidor usando {{Glossary("HTTP")}} , siendo los resultados devueltos cuando estén disponibles más que de inmediato.
-
Diseño de Software
-
El diseño de software asíncrono amplía el concepto al construir código que permita a un programa solicitar que una tarea se realice al mismo tiempo que la tarea (o tareas) original, sin detenerse a esperar a que la primera se haya completado. Cuando la tarea secundaria se completa, la original es notificada usando un mecanismo acordado, de tal forma que sepa que el trabajo se ha completado y que el resultado, si es que existe, está disponible.
-
Existen diversas técnicas de programación para implementar software asíncrono. Vea el artículo Asynchronous JavaScript  para terner una introducción a ellos.
-
-
- -

Saber más

- -

Referencia técnica

- - diff --git a/files/es/glossary/atributo/index.html b/files/es/glossary/atributo/index.html deleted file mode 100644 index 42027cf072..0000000000 --- a/files/es/glossary/atributo/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Atributo -slug: Glossary/Atributo -translation_of: Glossary/Attribute ---- -

Un atributo amplía una etiqueta ({{Glossary("tag")}}), cambiando su comportamiento o proporcionando metadatos. Un atributo tiene la forma nombre=valor (especificando el identificador del atributo y el valor asociado al atributo).

- -

Saber más

- -

Referencia técnica

- - diff --git a/files/es/glossary/atributo_global/index.html b/files/es/glossary/atributo_global/index.html deleted file mode 100644 index 64afaf64ff..0000000000 --- a/files/es/glossary/atributo_global/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Atributo global -slug: Glossary/Atributo_global -tags: - - CodingScripting - - Glosario - - HTML - - atributo -translation_of: Web/HTML/Global_attributes -translation_of_original: Glossary/Global_attribute ---- -

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/glossary/attribute/index.html b/files/es/glossary/attribute/index.html new file mode 100644 index 0000000000..42027cf072 --- /dev/null +++ b/files/es/glossary/attribute/index.html @@ -0,0 +1,15 @@ +--- +title: Atributo +slug: Glossary/Atributo +translation_of: Glossary/Attribute +--- +

Un atributo amplía una etiqueta ({{Glossary("tag")}}), cambiando su comportamiento o proporcionando metadatos. Un atributo tiene la forma nombre=valor (especificando el identificador del atributo y el valor asociado al atributo).

+ +

Saber más

+ +

Referencia técnica

+ + diff --git a/files/es/glossary/base64/index.html b/files/es/glossary/base64/index.html new file mode 100644 index 0000000000..c8747777cd --- /dev/null +++ b/files/es/glossary/base64/index.html @@ -0,0 +1,345 @@ +--- +title: Base64 codificando y decodificando +slug: Web/API/WindowBase64/Base64_codificando_y_decodificando +translation_of: Glossary/Base64 +--- +

Base64 es un grupo de esquemas de codificación de binario a texto que representa los datos binarios mediante una cadena ASCII, traduciéndolos en una representación radix-64. El término Base64 se origina de un sistema de codificación de transmisión de contenido MIME específico.

+ +

Los esquemas de codificación Base64 son comúnmente usados cuando se necesita codificar datos binarios para que sean almacenados y transferidos sobre un medio diseñado para tratar con datos textuales. Esto es para asegurar que los datos se mantienen intactos y sin modificaciones durante la transmisión. Base64 es comúnmente usado en muchas aplicaciones, incluyendo la escritura de emails vía MIME y el almacenamiento de datos complejos en XML.

+ +

En JavaScript hay dos funciones para decodificar y codificar cadenas base64, respectivamente:

+ + + +

La función atob() decodifica una cadena de datos que ha sido codificada usando la codificación en base 64. Por el contrario, la función btoa() crea una cadena ASCII codificada en base 64 a partir de una "cadena" de datos binarios.

+ +

Ambas funciones trabajan sobre cadenas de texto. Si desea trabajar con ArrayBuffers, lea este párrafo.

+ + + + + + + + + + +
+

Documentación

+ +
+
data URIs
+
Los URIs de datos, definidos por RFC 2397, permiten a los creadores de contenido introducir pequeños ficheros en línea en documentos.
+
Base64
+
Artículo en Wikipedia sobre el sistema de codificación Base64.
+
{{domxref("WindowBase64.atob","atob()")}}
+
Decodifica una cadena de datos que ha sido codificada utilizando base-64.
+
{{domxref("WindowBase64.btoa","btoa()")}}
+
Crea una cadena ASCII codificada en base 64 a partir de una "cadena" de datos binarios.
+
The "Unicode Problem"
+
En la mayoría de navegadores, llamar a btoa() con una cadena Unicode causará una excepción Character Out Of Range. Este párrafo muestra algunas soluciones.
+
URIScheme
+
Lista de esquemas URI soportados por Mozilla.
+
StringView
+
En este artículo está publicada una librería hecha por nosotros con los siguientes objetivos:
+
+
    +
  • crear una interfaz al estilo de C para cadenas (es decir, arrays de códigos de caracteres — ArrayBufferView en JavaScript) basada en la interfaz  ArrayBuffer de JavaScript.
    • +
  • crear una colección de métodos para los que los objetos parecidos a cadenas (de ahora en adelante, stringViews) funcionen estrictamente en arrays de números más que en cadenas JavaScript inmutables.
    • +
  • trabajar con otras codificaciones Unicode diferentes de las DOMStrings UTF-16 por defecto de JavaScript.
    • +
+
+
+ +

Ver todo...

+ 		+

Herramientas

+ + + + + + +
+ + + +

El "Problema Unicode"

+ +

Como las DOMStrings son cadenas codificadas en 16 bits, en la mayoría de navegadores llamar a window.btoa sobre una cadena Unicode resultará en una excepción Character Out Of Range si un carácter excede el rango de los caracteres ASCII de 8 bits. Hay dos posibles métodos para resolver este problema:

+ + + +

Aquí están los dos posibles métodos:

+ +

Solución #1 – escapar la cadena antes de codificarla

+ +
function utf8_to_b64( str ) {
+  return window.btoa(unescape(encodeURIComponent( str )));
+}
+
+function b64_to_utf8( str ) {
+  return decodeURIComponent(escape(window.atob( str )));
+}
+
+// Uso:
+utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
+b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
+ +

Esta solución ha sido propuesta por Johan Sundström.

+ +

Otra posible solución sin utilizar las funciones 'unscape' y 'escape', ya obsoletas.

+ +
function b64EncodeUnicode(str) {
+    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
+        return String.fromCharCode('0x' + p1);
+    }));
+}
+ b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
+
+ +

Solución #2 – reescribir atob() y btoa() usando TypedArrays y UTF-8

+ +
Nota: El siguiente código también es útil para obtener un ArrayBuffer a partir de una cadena Base64 y/o viceversa (véase abajo). Para una librería completa de arrays tipados, vea este artículo.
+ +
"use strict";
+
+/*\
+|*|
+|*|  Base64 / binary data / UTF-8 strings utilities
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding
+|*|
+\*/
+
+/* Decodificación de cadena base64 en array de bytes */
+
+function b64ToUint6 (nChr) {
+
+  return nChr > 64 && nChr < 91 ?
+      nChr - 65
+    : nChr > 96 && nChr < 123 ?
+      nChr - 71
+    : nChr > 47 && nChr < 58 ?
+      nChr + 4
+    : nChr === 43 ?
+      62
+    : nChr === 47 ?
+      63
+    :
+      0;
+
+}
+
+function base64DecToArr (sBase64, nBlocksSize) {
+
+  var
+    sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
+    nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, taBytes = new Uint8Array(nOutLen);
+
+  for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
+    nMod4 = nInIdx & 3;
+    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
+    if (nMod4 === 3 || nInLen - nInIdx === 1) {
+      for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
+        taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
+      }
+      nUint24 = 0;
+
+    }
+  }
+
+  return taBytes;
+}
+
+/* Codificación de array en una cadena Base64 */
+
+function uint6ToB64 (nUint6) {
+
+  return nUint6 < 26 ?
+      nUint6 + 65
+    : nUint6 < 52 ?
+      nUint6 + 71
+    : nUint6 < 62 ?
+      nUint6 - 4
+    : nUint6 === 62 ?
+      43
+    : nUint6 === 63 ?
+      47
+    :
+      65;
+
+}
+
+function base64EncArr (aBytes) {
+
+  var nMod3 = 2, sB64Enc = "";
+
+  for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) {
+    nMod3 = nIdx % 3;
+    if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; }
+    nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24);
+    if (nMod3 === 2 || aBytes.length - nIdx === 1) {
+      sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63));
+      nUint24 = 0;
+    }
+  }
+
+  return sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + (nMod3 === 2 ? '' : nMod3 === 1 ? '=' : '==');
+
+}
+
+/* De array UTF-8 a DOMString y viceversa */
+
+function UTF8ArrToStr (aBytes) {
+
+  var sView = "";
+
+  for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) {
+    nPart = aBytes[nIdx];
+    sView += String.fromCharCode(
+      nPart > 251 && nPart < 254 && nIdx + 5 < nLen ? /* six bytes */
+        /* (nPart - 252 << 30) may be not so safe in ECMAScript! So...: */
+        (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 247 && nPart < 252 && nIdx + 4 < nLen ? /* five bytes */
+        (nPart - 248 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 239 && nPart < 248 && nIdx + 3 < nLen ? /* four bytes */
+        (nPart - 240 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 223 && nPart < 240 && nIdx + 2 < nLen ? /* three bytes */
+        (nPart - 224 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 191 && nPart < 224 && nIdx + 1 < nLen ? /* two bytes */
+        (nPart - 192 << 6) + aBytes[++nIdx] - 128
+      : /* nPart < 127 ? */ /* one byte */
+        nPart
+    );
+  }
+
+  return sView;
+
+}
+
+function strToUTF8Arr (sDOMStr) {
+
+  var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0;
+
+  /* mapeando... */
+
+  for (var nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) {
+    nChr = sDOMStr.charCodeAt(nMapIdx);
+    nArrLen += nChr < 0x80 ? 1 : nChr < 0x800 ? 2 : nChr < 0x10000 ? 3 : nChr < 0x200000 ? 4 : nChr < 0x4000000 ? 5 : 6;
+  }
+
+  aBytes = new Uint8Array(nArrLen);
+
+  /* transcripción... */
+
+  for (var nIdx = 0, nChrIdx = 0; nIdx < nArrLen; nChrIdx++) {
+    nChr = sDOMStr.charCodeAt(nChrIdx);
+    if (nChr < 128) {
+      /* un byte */
+      aBytes[nIdx++] = nChr;
+    } else if (nChr < 0x800) {
+      /* dos bytes */
+      aBytes[nIdx++] = 192 + (nChr >>> 6);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else if (nChr < 0x10000) {
+      /* tres bytes */
+      aBytes[nIdx++] = 224 + (nChr >>> 12);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else if (nChr < 0x200000) {
+      /* cuatro bytes */
+      aBytes[nIdx++] = 240 + (nChr >>> 18);
+      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else if (nChr < 0x4000000) {
+      /* cinco bytes */
+      aBytes[nIdx++] = 248 + (nChr >>> 24);
+      aBytes[nIdx++] = 128 + (nChr >>> 18 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else /* if (nChr <= 0x7fffffff) */ {
+      /* seis bytes */
+      aBytes[nIdx++] = 252 + (nChr >>> 30);
+      aBytes[nIdx++] = 128 + (nChr >>> 24 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 18 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    }
+  }
+
+  return aBytes;
+
+}
+
+ +

Tests

+ +
/* Tests */
+
+var sMyInput = "Base 64 \u2014 Mozilla Developer Network";
+
+var aMyUTF8Input = strToUTF8Arr(sMyInput);
+
+var sMyBase64 = base64EncArr(aMyUTF8Input);
+
+alert(sMyBase64);
+
+var aMyUTF8Output = base64DecToArr(sMyBase64);
+
+var sMyOutput = UTF8ArrToStr(aMyUTF8Output);
+
+alert(sMyOutput);
+ +

Apéndice: Decodificar una cadena Base64 en Uint8Array o ArrayBuffer

+ +

Estas funciones nos permiten crear también uint8Arrays o arrayBuffers a partir de cadenas codificadas en base 64:

+ +
var myArray = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network"
+
+var myBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network"
+
+alert(myBuffer.byteLength);
+ +
Nota: La función base64DecToArr(sBase64[, nBlocksSize]) devuelve un uint8Array de bytes. Si tu objetivo es construir un búfer de datos crudos de 16, 32 o 64 bits, usa el argumento nBlocksSize, que es el número de bytes de los que la propiedad uint8Array.buffer.bytesLength debe devolver un múltiplo (1 u omitido para ASCII, cadenas binarias o cadenas UTF-8 codificacas, 2 para cadenas UTF-16, 4 para cadenas UTF-32).
+ +

Para una librería más completa, véase StringView, una representación parecida a C de cadenas basadas en arrays tipados.

+ +

Véase también

+ + diff --git a/files/es/glossary/breadcrumb/index.html b/files/es/glossary/breadcrumb/index.html new file mode 100644 index 0000000000..0fe4ade2f7 --- /dev/null +++ b/files/es/glossary/breadcrumb/index.html @@ -0,0 +1,17 @@ +--- +title: Miga de pan +slug: Glossary/miga-de-pan +tags: + - Accesibilidad + - Glosario + - Miga de pan + - navegación +translation_of: Glossary/Breadcrumb +--- +

Una miga de pan, o rastro de migas de pan, es una ayuda a la navegación que se sitúa normalmente entre la cabecera del sitio y el contenido principal y muestra, bien la jerarquía de la página actual en relación con la estructura del sitio desde el nivel superior o bien una lista de los enlaces utilizados para llegar a la página actual en el orden en que se han visitado.

+ +

Una miga de pan para este documento se vería más o menos así:

+ +

MDN > Glosario > Miga de pan

+ +

Los rastros de migas de pan permiten a los usuarios conocer su situación dentro de un sitio web. Este tipo de navegación, si se construye correctamente, ayuda a los usuarios a saber dónde están dentro del sitio y cómo han llegado hasta ahí. También pueden ayudar al usuario a volver a donde estaba anteriormente y pueden reducir el número de clics necesario para llegar a una página de nivel superior.

diff --git a/files/es/glossary/cabecera_general/index.html b/files/es/glossary/cabecera_general/index.html deleted file mode 100644 index d27644dad0..0000000000 --- a/files/es/glossary/cabecera_general/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Cabecera general -slug: Glossary/Cabecera_general -translation_of: Glossary/General_header ---- -

Una cabecera general es una {{glossary('Header', 'cabecera HTTP')}} que puede ser utilizada tanto en mensajes de consultas como de respuestas pero que no se aplican al contenido en sí mismo. Dependiendo del contexto en que son usadas, las cabeceras generales pueden ser de {{glossary("Response header", "respuesta")}} o de {{glossary("request header", "consulta")}}. Sin embargo, no son {{glossary("entity header", "cabeceras de entidad.")}}.

- -

Las cabeceras generales más comunes son {{HTTPHeader('Date')}}, {{HTTPheader("Cache-Control")}} y {{HTTPHeader("Connection")}}.

diff --git a/files/es/glossary/cache/index.html b/files/es/glossary/cache/index.html new file mode 100644 index 0000000000..1c9b861ae8 --- /dev/null +++ b/files/es/glossary/cache/index.html @@ -0,0 +1,17 @@ +--- +title: Caché +slug: Glossary/Caché +tags: + - Glosario + - HTTP +translation_of: Glossary/Cache +--- +

La caché (o caché web) es un componente que almacena temporalmente respuestas HTTP para que puedan ser usadas por peticiones HTTP posteriores mientras cumplan ciertas condiciones.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git "a/files/es/glossary/cach\303\251/index.html" "b/files/es/glossary/cach\303\251/index.html" deleted file mode 100644 index 1c9b861ae8..0000000000 --- "a/files/es/glossary/cach\303\251/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Caché -slug: Glossary/Caché -tags: - - Glosario - - HTTP -translation_of: Glossary/Cache ---- -

La caché (o caché web) es un componente que almacena temporalmente respuestas HTTP para que puedan ser usadas por peticiones HTTP posteriores mientras cumplan ciertas condiciones.

- -

Saber más

- -

Conocimiento general

- - diff --git a/files/es/glossary/call_stack/index.html b/files/es/glossary/call_stack/index.html new file mode 100644 index 0000000000..f164d913ca --- /dev/null +++ b/files/es/glossary/call_stack/index.html @@ -0,0 +1,92 @@ +--- +title: Pila de llamadas +slug: Glossary/Pila_llamadas +tags: + - Glosario + - JavaScript + - Pila de llamadas +translation_of: Glossary/Call_stack +--- +

Una pila de llamadas es un mecanismo para que un intérprete (como el intérprete de JavaScript en un navegador web) realice un seguimiento de en que lugar se llama a múltiples {{glossary("function","funciones")}}, qué función se esta ejecutando actualmente y qué funciones son llamadas desde esa función, etc.

+ + + +

Ejemplo

+ +
function saludar() {
+   // [1] Código
+   diHola();
+   // [2] Código
+}
+function diHola() {
+   return "!Hola!";
+}
+
+// Invocar la función `saludar`
+saludar();
+
+// [3] Código
+
+ +

El código del ejemplo se ejecutaría de la siguiente manera:

+ +
    +
  1. Ignora todas las funciones hasta que alcanza la invocación de la función saludar().
    2. +
  2. Añade la función saludar() a la lista de la pila de llamadas. +
    +

    Lista de la pila de llamadas:
    + - saludar

    +
    +
    3. +
  3. Ejecuta todas las líneas de código de dentro de la función saludar().
    4. +
  4. Llega a la incovación de la función diHola().
    5. +
  5. Añade la función diHola() a la lista de la pila de llamadas. +
    +

    Lista de la pila de llamadas:
    + - saludar
    + - diHola

    +
    +
    6. +
  6. Ejecuta todas las líneas de código de dentro de la función diHola() hasta que llega al final.
    7. +
  7. Devuelve la ejecución a la línea que invocó a la función diHola() y continua con la ejecuación del resto de código de la función saludar().
    8. +
  8. Elimina la función diHola() de la lista de la pila de llamadas. +
    +

    Lista de la pila de llamadas:
    + - saludar

    +
    +
    9. +
  9. Cuando todo el código dentro de la función saludar() ha sido ejecutado, vuelve a la línea que la invocó y continua ejecutando el resto de código JavaScript.
    10. +
  10. Elimina la función saludar() de la lista de la pila de llamadas. +
    +

    Lista de la pila de llamadas:
    + VACÍA

    +
    +
    11. +
+ +

En resumen, empezamos con una lista de la pila llamadas vacía. Cuando invocamos una función, ésta es automáticamente añadida a la pila de llamadas. Una vez ha ejecutado todo su código, también de manera automática es eliminada de la pila de llamadas. Finalmente, la pila de llamadas vuelve a estar vacía.

+ +

Saber más

+ +

Conocimiento general

+ + + + diff --git a/files/es/glossary/caracter/index.html b/files/es/glossary/caracter/index.html deleted file mode 100644 index 5198607137..0000000000 --- a/files/es/glossary/caracter/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Caracter -slug: Glossary/Caracter -tags: - - CodingScripting - - Glosario - - String -translation_of: Glossary/Character ---- -

Un caracter es un símbolo (letras, números, puntuación) o un caracter de "control" que no se imprime (p. ej., Retorno de carro o guión suave — soft hypen). {{Glossary("UTF-8")}} es el conjunto de caracteres más común e incluye los grafemas de los lenguajes humanos más populares.

- -

Aprende más

- -

Conocimientos generales

- - diff --git a/files/es/glossary/card_sorting/index.html b/files/es/glossary/card_sorting/index.html new file mode 100644 index 0000000000..a9b2638bb2 --- /dev/null +++ b/files/es/glossary/card_sorting/index.html @@ -0,0 +1,18 @@ +--- +title: Clasificación por tarjetas (card sorting) +slug: Glossary/Clasificación_por_tarjetas_(card_sorting) +tags: + - Card sorting + - Diseño + - Glosario +translation_of: Glossary/Card_sorting +--- +

La clasificación por tarjetas (card sorting) es una técnica simple utilizada en la {{glossary("Information architecture", "arquitectura de la información")}} en la cual las personas involucradas en el diseño de una página web (u otro tipo de producto) están invitadas a describir el contenido / servicios / características que creen que el producto debería contener, para luego organizar estas características dentro de categorías o grupos. Esto se puede usar, por ejemplo, para determinar qué debe aparecer en cada página de una aplicación web. El nombre proviene del hecho de que a menudo la clasificación de las cartas se lleva a cabo literalmente escribiendo los elementos que se van a clasificar en tarjetas, y luego apilando las tarjetas.

+ +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/character/index.html b/files/es/glossary/character/index.html new file mode 100644 index 0000000000..5198607137 --- /dev/null +++ b/files/es/glossary/character/index.html @@ -0,0 +1,22 @@ +--- +title: Caracter +slug: Glossary/Caracter +tags: + - CodingScripting + - Glosario + - String +translation_of: Glossary/Character +--- +

Un caracter es un símbolo (letras, números, puntuación) o un caracter de "control" que no se imprime (p. ej., Retorno de carro o guión suave — soft hypen). {{Glossary("UTF-8")}} es el conjunto de caracteres más común e incluye los grafemas de los lenguajes humanos más populares.

+ +

Aprende más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/character_set/index.html b/files/es/glossary/character_set/index.html new file mode 100644 index 0000000000..27e5a7345c --- /dev/null +++ b/files/es/glossary/character_set/index.html @@ -0,0 +1,31 @@ +--- +title: Conjunto de caracteres +slug: Glossary/conjunto_de_caracteres +tags: + - Codificación de caracteres + - Conjunto de caracteres + - Glosario +translation_of: Glossary/character_set +--- +

Un conjunto de caracteres es un sistema de codificación para que las computadoras sepan cómo reconocer un {{Glossary("Character", "caracter")}}, incluidas letras, números, signos de puntuación y espacios en blanco.

+ +

En épocas anteriores, los países desarrollaron sus propios conjuntos de caracteres debido a los diferentes idiomas utilizados, como los códigos Kanji JIS (por ejemplo, Shift-JIS, EUC-JP, etc.) para japonés, Big5 para chino tradicional y KOI8-R para ruso. Sin embargo, {{Glossary("Unicode")}} se convirtió gradualmente en el conjunto de caracteres más aceptable por su soporte de idiomas universal.

+ +

Si un conjunto de caracteres se usa incorrectamente (por ejemplo, Unicode para un artículo codificado en Big5), es posible que no vean más que caracteres rotos, que se llaman {{Interwiki("wikipedia", "Mojibake")}}.

+ + diff --git a/files/es/glossary/cia/index.html b/files/es/glossary/cia/index.html new file mode 100644 index 0000000000..983f0d0447 --- /dev/null +++ b/files/es/glossary/cia/index.html @@ -0,0 +1,17 @@ +--- +title: CID +slug: Glossary/CID +tags: + - Glosario + - Seguridad +translation_of: Glossary/CIA +--- +

CID (Confidencialidad, Integridad, Disponibilidad) (también llamado la triada CID o la triada DIC) es un modelo que guía las políticas de una organización para la seguridad de la información.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/cid/index.html b/files/es/glossary/cid/index.html deleted file mode 100644 index 983f0d0447..0000000000 --- a/files/es/glossary/cid/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: CID -slug: Glossary/CID -tags: - - Glosario - - Seguridad -translation_of: Glossary/CIA ---- -

CID (Confidencialidad, Integridad, Disponibilidad) (también llamado la triada CID o la triada DIC) es un modelo que guía las políticas de una organización para la seguridad de la información.

- -

Saber más

- -

Conocimiento general

- - diff --git a/files/es/glossary/cifrado/index.html b/files/es/glossary/cifrado/index.html deleted file mode 100644 index e0679eca97..0000000000 --- a/files/es/glossary/cifrado/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Algoritmo criptográfico -slug: Glossary/Cifrado -tags: - - Criptografía - - Glosario - - Seguridad - - privacidad -translation_of: Glossary/Cipher ---- -

En {{glossary("cryptography", "criptografía")}}, un algoritmo criptográfico es un algoritmo que puede {{glossary("encryption", "encriptar")}} {{glossary("cleartext", "texto en lenguaje natural")}} para hacerlo ilegible, y para que sea {{glossary("decryption", "desencriptado")}} con el fin de recuperar el texto original.

- -

Los algoritmos de cifrado eran muy comunes mucho antes de la era de la información (e.g., cifrados por sustitucion y cifrados por transposición), pero ninguno de ellos era criptográficamente seguros excepto one-time pad.

- -

Los algoritmos modernos de cifrado están diseñados para resistir a {{glossary("attack", "ataques")}} descubiertos por un {{glossary("cryptanalysis", "criptoanalista")}}. No hay garantía de que todos los métodos de ataque hayan sido descubiertos, pero cada algoritmo es probado contra todos los tipos de ataque conocidos.

- -

Los algoritmos de cifrado funcionan de dos maneras, una es como cifrado por bloques en bloques sucesivos o buffers de datos, y la otra es como un cifrado en flujo en un flujo continuo de datos (generalmente de audio o vídeo).

- -

También son clasificados en función de cómo se manejan sus  {{glossary("key", "claves")}}:

- - - -

Saber más

- -

Conocimiento general

- - diff --git a/files/es/glossary/cipher/index.html b/files/es/glossary/cipher/index.html new file mode 100644 index 0000000000..e0679eca97 --- /dev/null +++ b/files/es/glossary/cipher/index.html @@ -0,0 +1,32 @@ +--- +title: Algoritmo criptográfico +slug: Glossary/Cifrado +tags: + - Criptografía + - Glosario + - Seguridad + - privacidad +translation_of: Glossary/Cipher +--- +

En {{glossary("cryptography", "criptografía")}}, un algoritmo criptográfico es un algoritmo que puede {{glossary("encryption", "encriptar")}} {{glossary("cleartext", "texto en lenguaje natural")}} para hacerlo ilegible, y para que sea {{glossary("decryption", "desencriptado")}} con el fin de recuperar el texto original.

+ +

Los algoritmos de cifrado eran muy comunes mucho antes de la era de la información (e.g., cifrados por sustitucion y cifrados por transposición), pero ninguno de ellos era criptográficamente seguros excepto one-time pad.

+ +

Los algoritmos modernos de cifrado están diseñados para resistir a {{glossary("attack", "ataques")}} descubiertos por un {{glossary("cryptanalysis", "criptoanalista")}}. No hay garantía de que todos los métodos de ataque hayan sido descubiertos, pero cada algoritmo es probado contra todos los tipos de ataque conocidos.

+ +

Los algoritmos de cifrado funcionan de dos maneras, una es como cifrado por bloques en bloques sucesivos o buffers de datos, y la otra es como un cifrado en flujo en un flujo continuo de datos (generalmente de audio o vídeo).

+ +

También son clasificados en función de cómo se manejan sus  {{glossary("key", "claves")}}:

+ + + +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/ciphertext/index.html b/files/es/glossary/ciphertext/index.html new file mode 100644 index 0000000000..65315ab297 --- /dev/null +++ b/files/es/glossary/ciphertext/index.html @@ -0,0 +1,19 @@ +--- +title: Texto Cifrado +slug: Glossary/TextoCifrado +tags: + - Cryptography + - Glossary + - Privacy + - Security +translation_of: Glossary/Ciphertext +--- +

En {{glossary("Cryptography", "Criptografía")}}, un texto cifrado es un mensaje codificado que transmite información pero no es legible a menos que se {{glossary("decryption","descifre")}} con el {{glossary("cipher", "algoritmo criptográfico")}} correcto y el secreto correcto (generalmente una {{glossary("key","clave")}}), reproduciendo el {{glossary("cleartext", "texto simple")}} original. La seguridad de un texto cifrado, y por lo tanto el secreto de la información contenida, depende de usar un cifrado seguro y mantener la clave en secreto.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git "a/files/es/glossary/clasificaci\303\263n_por_tarjetas_(card_sorting)/index.html" "b/files/es/glossary/clasificaci\303\263n_por_tarjetas_(card_sorting)/index.html" deleted file mode 100644 index a9b2638bb2..0000000000 --- "a/files/es/glossary/clasificaci\303\263n_por_tarjetas_(card_sorting)/index.html" +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Clasificación por tarjetas (card sorting) -slug: Glossary/Clasificación_por_tarjetas_(card_sorting) -tags: - - Card sorting - - Diseño - - Glosario -translation_of: Glossary/Card_sorting ---- -

La clasificación por tarjetas (card sorting) es una técnica simple utilizada en la {{glossary("Information architecture", "arquitectura de la información")}} en la cual las personas involucradas en el diseño de una página web (u otro tipo de producto) están invitadas a describir el contenido / servicios / características que creen que el producto debería contener, para luego organizar estas características dentro de categorías o grupos. Esto se puede usar, por ejemplo, para determinar qué debe aparecer en cada página de una aplicación web. El nombre proviene del hecho de que a menudo la clasificación de las cartas se lleva a cabo literalmente escribiendo los elementos que se van a clasificar en tarjetas, y luego apilando las tarjetas.

- -

Saber más

- -

Conocimientos generales

- - diff --git a/files/es/glossary/clausura/index.html b/files/es/glossary/clausura/index.html deleted file mode 100644 index 2f4cbbb479..0000000000 --- a/files/es/glossary/clausura/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Clausura -slug: Glossary/Clausura -tags: - - Glosario -translation_of: Glossary/Closure ---- -

Una clausura o closure es una función que guarda referencias del estado adyacente ({{glossary("scope", "ámbito léxico")}}). En otras palabras, una clausura permite acceder al ámbito de una función exterior desde una función interior. En {{glossary("JavaScript")}}, las clausuras se crean cada vez que una {{glossary("function","función")}} es creada.

- -

Saber más

- -

Conocimiento general

- - - -

Referencia técnica

- - diff --git a/files/es/glossary/clave/index.html b/files/es/glossary/clave/index.html deleted file mode 100644 index b228776065..0000000000 --- a/files/es/glossary/clave/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Clave -slug: Glossary/Clave -tags: - - Criptografía - - Glosario - - Seguridad -translation_of: Glossary/Key ---- -

Una clave es una pieza de información utilizada por un algoritmo criptográfico para el {{Glossary("encryption", "cifrado")}} y/o {{Glossary("decryption", "descifrado")}}. Los mensajes cifrados deben permanecer seguros incluso si todo lo relacionado con el {{Glossary("cryptosystem","sistema de cifrado")}}, excepto la clave, es de conocimiento público.

- -

En la {{Glossary("symmetric-key cryptography", "criptografía de clave simétrica")}}, la misma clave se utiliza tanto para el cifrado como para el descifrado. En la criptografía de clave pública, existen un par de claves relacionadas conocidas como clave pública y clave privada. La clave pública está disponible libremente, mientras que la clave privada se mantiene secreta. La clave pública puede cifrar mensajes que sólo la clave privada correspondiente puede descifrar, y viceversa.

- -

Saber más

- - diff --git a/files/es/glossary/closure/index.html b/files/es/glossary/closure/index.html new file mode 100644 index 0000000000..2f4cbbb479 --- /dev/null +++ b/files/es/glossary/closure/index.html @@ -0,0 +1,22 @@ +--- +title: Clausura +slug: Glossary/Clausura +tags: + - Glosario +translation_of: Glossary/Closure +--- +

Una clausura o closure es una función que guarda referencias del estado adyacente ({{glossary("scope", "ámbito léxico")}}). En otras palabras, una clausura permite acceder al ámbito de una función exterior desde una función interior. En {{glossary("JavaScript")}}, las clausuras se crean cada vez que una {{glossary("function","función")}} es creada.

+ +

Saber más

+ +

Conocimiento general

+ + + +

Referencia técnica

+ + diff --git a/files/es/glossary/cms/index.html b/files/es/glossary/cms/index.html new file mode 100644 index 0000000000..e4a67f504b --- /dev/null +++ b/files/es/glossary/cms/index.html @@ -0,0 +1,18 @@ +--- +title: Sistema de gestión de contenidos +slug: Glossary/Sistema_gestion_contenidos +tags: + - CMS + - Glosario + - Sistema de gestión de contenidos +translation_of: Glossary/CMS +--- +

Un sistema de gestión de contenidos o CMS es un programa informático que permite a los usuarios publicar, organizar, cambiar o eliminar diferentes tipos de contenido como texto, imágenes incrustadas, video, audio y código interactivo.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/coercion/index.html b/files/es/glossary/coercion/index.html deleted file mode 100644 index 02721fad10..0000000000 --- a/files/es/glossary/coercion/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Coerción -slug: Glossary/coercion -translation_of: Glossary/Type_coercion ---- -

La coerción es la conversión automática o implicita de valores de un tipo de dato a otro (Ejemplo: de cadena de texto a número). La conversión es similar a la coerción porque ambas convierten valores de un tipo de dato a otro pero con una diferencia clave - la coerción es implícita mientras que la conversión puede ser implícita o explícita.

- -

Examples

- -
const valor1 = '5';
-const valor2 = 9;
-let suma = valor1 + valor2;
-
-console.log(suma);
- -

En el ejemplo anterior, JavaScript ha coercido el 9 de nùmero a cadena de texto y luego ha concatenado los dos valores resultando en una cadena de texto de 59. JavaScript tuvo la opción de coercer a cadena de texto o número y decidió usar número.

- -

El compilador pudo haber coercido el 5 a un número y retornar el valor de 14, pero no lo hizo. Para retornar ese resultado, tendrías que convertir explícitamente el 5 a un número usando el método Number():

- -
sumar = Number(valor1) + valor2
- - diff --git a/files/es/glossary/conjunto_de_caracteres/index.html b/files/es/glossary/conjunto_de_caracteres/index.html deleted file mode 100644 index 27e5a7345c..0000000000 --- a/files/es/glossary/conjunto_de_caracteres/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Conjunto de caracteres -slug: Glossary/conjunto_de_caracteres -tags: - - Codificación de caracteres - - Conjunto de caracteres - - Glosario -translation_of: Glossary/character_set ---- -

Un conjunto de caracteres es un sistema de codificación para que las computadoras sepan cómo reconocer un {{Glossary("Character", "caracter")}}, incluidas letras, números, signos de puntuación y espacios en blanco.

- -

En épocas anteriores, los países desarrollaron sus propios conjuntos de caracteres debido a los diferentes idiomas utilizados, como los códigos Kanji JIS (por ejemplo, Shift-JIS, EUC-JP, etc.) para japonés, Big5 para chino tradicional y KOI8-R para ruso. Sin embargo, {{Glossary("Unicode")}} se convirtió gradualmente en el conjunto de caracteres más aceptable por su soporte de idiomas universal.

- -

Si un conjunto de caracteres se usa incorrectamente (por ejemplo, Unicode para un artículo codificado en Big5), es posible que no vean más que caracteres rotos, que se llaman {{Interwiki("wikipedia", "Mojibake")}}.

- - diff --git a/files/es/glossary/constant/index.html b/files/es/glossary/constant/index.html new file mode 100644 index 0000000000..41d4efb98a --- /dev/null +++ b/files/es/glossary/constant/index.html @@ -0,0 +1,20 @@ +--- +title: Constante +slug: Glossary/Constante +tags: + - CodingScripting + - Constante + - Glosario +translation_of: Glossary/Constant +--- +

Una constante es un valor que el programador no puede cambiar, por ejemplo números (1, 2, 42). Con {{glossary("variable","variables")}}, por otra parte, el programador puede asignar un nuevo {{glossary("value", "valor")}} a una variable cuyo nombre ya esté en uso.

+ +

Al igual que las variables, algunas constantes están unidas a identificadores. Por ejemplo, el identificador pi podría estar vinculado al valor 3.14... .

+ +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/constante/index.html b/files/es/glossary/constante/index.html deleted file mode 100644 index 41d4efb98a..0000000000 --- a/files/es/glossary/constante/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Constante -slug: Glossary/Constante -tags: - - CodingScripting - - Constante - - Glosario -translation_of: Glossary/Constant ---- -

Una constante es un valor que el programador no puede cambiar, por ejemplo números (1, 2, 42). Con {{glossary("variable","variables")}}, por otra parte, el programador puede asignar un nuevo {{glossary("value", "valor")}} a una variable cuyo nombre ya esté en uso.

- -

Al igual que las variables, algunas constantes están unidas a identificadores. Por ejemplo, el identificador pi podría estar vinculado al valor 3.14... .

- -

Saber más

- -

Conocimientos generales

- - diff --git "a/files/es/glossary/criptoan\303\241lisis/index.html" "b/files/es/glossary/criptoan\303\241lisis/index.html" deleted file mode 100644 index c56576e600..0000000000 --- "a/files/es/glossary/criptoan\303\241lisis/index.html" +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Criptoanálisis -slug: Glossary/Criptoanálisis -tags: - - Criptografía - - Glosario - - Seguridad - - privacidad -translation_of: Glossary/Cryptanalysis ---- -

El criptoanálisis es la rama de {{glossary ("cryptography","criptografía")}} que estudia cómo romper códigos y criptosistemas. El criptoanálisis crea técnicas para romper {{glossary ("cipher", "cifrados")}}, en particular por métodos más eficientes que una búsqueda por fuerza bruta. Además de los métodos tradicionales como el análisis de frecuencia y el índice de coincidencia, el criptoanálisis incluye métodos más recientes, como el criptoanálisis lineal o el criptoanálisis diferencial, que puede romper cifrados más avanzados.

- -

 

- -

Saber más

- -

Conocimiento general

- - diff --git "a/files/es/glossary/criptograf\303\255a/index.html" "b/files/es/glossary/criptograf\303\255a/index.html" deleted file mode 100644 index cfd3f498db..0000000000 --- "a/files/es/glossary/criptograf\303\255a/index.html" +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Criptografía -slug: Glossary/Criptografía -tags: - - Criptografía - - Glosario - - Seguridad - - privacidad -translation_of: Glossary/Cryptography ---- -

Criptografía, o criptología, es la ciencia que estudia como codificar y transmitir mensajes de manera segura. La criptografía diseña y estudia algoritmos que son usados para la codificación y decoficación de mensajes en un entorno inseguro y sus aplicaciones. Más que confidencialidad de información, la criptografía también aborda la identificación, autenticación, el no repudio y la integridad de la información. Para ello tambien estudia el uso de métodos criptográficos en contexto, criptosistemas.

- -

Aprende más

- -

Conocimiento general

- - diff --git a/files/es/glossary/cryptanalysis/index.html b/files/es/glossary/cryptanalysis/index.html new file mode 100644 index 0000000000..c56576e600 --- /dev/null +++ b/files/es/glossary/cryptanalysis/index.html @@ -0,0 +1,21 @@ +--- +title: Criptoanálisis +slug: Glossary/Criptoanálisis +tags: + - Criptografía + - Glosario + - Seguridad + - privacidad +translation_of: Glossary/Cryptanalysis +--- +

El criptoanálisis es la rama de {{glossary ("cryptography","criptografía")}} que estudia cómo romper códigos y criptosistemas. El criptoanálisis crea técnicas para romper {{glossary ("cipher", "cifrados")}}, en particular por métodos más eficientes que una búsqueda por fuerza bruta. Además de los métodos tradicionales como el análisis de frecuencia y el índice de coincidencia, el criptoanálisis incluye métodos más recientes, como el criptoanálisis lineal o el criptoanálisis diferencial, que puede romper cifrados más avanzados.

+ +

 

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/cryptography/index.html b/files/es/glossary/cryptography/index.html new file mode 100644 index 0000000000..cfd3f498db --- /dev/null +++ b/files/es/glossary/cryptography/index.html @@ -0,0 +1,21 @@ +--- +title: Criptografía +slug: Glossary/Criptografía +tags: + - Criptografía + - Glosario + - Seguridad + - privacidad +translation_of: Glossary/Cryptography +--- +

Criptografía, o criptología, es la ciencia que estudia como codificar y transmitir mensajes de manera segura. La criptografía diseña y estudia algoritmos que son usados para la codificación y decoficación de mensajes en un entorno inseguro y sus aplicaciones. Más que confidencialidad de información, la criptografía también aborda la identificación, autenticación, el no repudio y la integridad de la información. Para ello tambien estudia el uso de métodos criptográficos en contexto, criptosistemas.

+ +

Aprende más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/css_preprocessor/index.html b/files/es/glossary/css_preprocessor/index.html new file mode 100644 index 0000000000..7304385604 --- /dev/null +++ b/files/es/glossary/css_preprocessor/index.html @@ -0,0 +1,21 @@ +--- +title: Preprocesador CSS +slug: Glossary/Preprocesador_CSS +translation_of: Glossary/CSS_preprocessor +--- +

Un preprocesador CSS es un programa que te permite generar {{Glossary("CSS")}} a partir de la {{Glossary("syntax")}} única del preprocesador. Existen varios preprocesadores CSS de los cuales escoger, sin embargo la mayoría de preprocesadores CSS añadiran algunas características que no existen en CSS puro, como {{Glossary("variable")}}, mixins, selectores anidados, entre otros. Estas características hacen la estructura de CSS más legible y fácil de mantener.

+ +

Para utilizar un preprocesador CSS debes instalar un compilador CSS en tu web  {{Glossary("server")}}.

+ +

Aprende más

+ +

Conocimiento general

+ +

Estos son algunos de lo preprocesadores CSS más populares:

+ + diff --git a/files/es/glossary/data_structure/index.html b/files/es/glossary/data_structure/index.html new file mode 100644 index 0000000000..d01f1b0ac8 --- /dev/null +++ b/files/es/glossary/data_structure/index.html @@ -0,0 +1,18 @@ +--- +title: Estructura de datos +slug: Glossary/Estructura_de_datos +tags: + - Codificación + - Estructura de datos + - Glosario +translation_of: Glossary/Data_structure +--- +

Estructura de datos es una forma particular de organizar datos para que puedan ser usados eficientemente.

+ +

Aprende másEdit

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/decryption/index.html b/files/es/glossary/decryption/index.html new file mode 100644 index 0000000000..838c76438b --- /dev/null +++ b/files/es/glossary/decryption/index.html @@ -0,0 +1,33 @@ +--- +title: Descifrado +slug: Glossary/Descifrado +tags: + - Criptografía + - Glosario + - Seguridad + - privacidad +translation_of: Glossary/Decryption +--- +

 

+ +

En {{glossary("cryptography" ,"criptografía")}}, el descifrado es la conversión de {{glossary("Ciphertext", "texto cifrado")}} en {{glossary("Plaintext", "texto simple")}}.

+ +

El descifrado es una primitiva criptográfica: transforma un mensaje de texto cifrado en texto simple utilizando un algoritmo criptográfico llamado {{glossary("cipher", "cifrado")}}. Al igual que el cifrado, el descifrado en cifrados modernos se realiza mediante un algoritmo específico y una {{glossary("Key", "clave")}}. Dado que el algoritmo suele ser público, la clave debe permanecer secreta si el cifrado se mantiene seguro.

+ +

 

+ +

The decryption primitive.

+ +

El descifrado es el reverso del {{glossary("Encryption", "cifrado")}} y si la clave permanece secreta, el descifrado sin conocer el secreto específico, entonces el descifrado es matemáticamente difícil de realizar. El grado de dificultad depende de la seguridad del algoritmo criptográfico elegido, que está en constante evolución mediante el progreso del {{glossary("cryptanalysis", "criptoanálisis")}}.

+ +

 

+ +

 

+ +

Saber más

+ +

Referencia técnica

+ + diff --git a/files/es/glossary/descifrado/index.html b/files/es/glossary/descifrado/index.html deleted file mode 100644 index 838c76438b..0000000000 --- a/files/es/glossary/descifrado/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Descifrado -slug: Glossary/Descifrado -tags: - - Criptografía - - Glosario - - Seguridad - - privacidad -translation_of: Glossary/Decryption ---- -

 

- -

En {{glossary("cryptography" ,"criptografía")}}, el descifrado es la conversión de {{glossary("Ciphertext", "texto cifrado")}} en {{glossary("Plaintext", "texto simple")}}.

- -

El descifrado es una primitiva criptográfica: transforma un mensaje de texto cifrado en texto simple utilizando un algoritmo criptográfico llamado {{glossary("cipher", "cifrado")}}. Al igual que el cifrado, el descifrado en cifrados modernos se realiza mediante un algoritmo específico y una {{glossary("Key", "clave")}}. Dado que el algoritmo suele ser público, la clave debe permanecer secreta si el cifrado se mantiene seguro.

- -

 

- -

The decryption primitive.

- -

El descifrado es el reverso del {{glossary("Encryption", "cifrado")}} y si la clave permanece secreta, el descifrado sin conocer el secreto específico, entonces el descifrado es matemáticamente difícil de realizar. El grado de dificultad depende de la seguridad del algoritmo criptográfico elegido, que está en constante evolución mediante el progreso del {{glossary("cryptanalysis", "criptoanálisis")}}.

- -

 

- -

 

- -

Saber más

- -

Referencia técnica

- - diff --git a/files/es/glossary/dhtml/index.html b/files/es/glossary/dhtml/index.html new file mode 100644 index 0000000000..ee735a29bc --- /dev/null +++ b/files/es/glossary/dhtml/index.html @@ -0,0 +1,47 @@ +--- +title: DHTML +slug: DHTML +tags: + - DHTML + - Todas_las_Categorías +translation_of: Glossary/DHTML +--- +

+

+
DHTML es la abreviatura de "HTML dinámico".El término DHTML se usa generalmente para referirse al código del que están hechas las páginas web interactivas que no requieren la utilización de plugins tales como Flash o Java.El término abarca las funcionalidades disponibles para los desarrolladores web que utilizan las tecnologías HTML, CSS, Document Object Model, y JavaScript de forma combinada. +
+ + + + +
+

Documentación

+
Referencia de Objetos Clientes DOM +
Esta referencia de objetos clientes proporciona información sobre los objetos usados comúnmente en DHTML, y su intención es ayudar a determinar que propiedades están soportadas en cada navegador. +
+
DHTML Demostraciones del uso de DOM/Style +
Demostraciones de Modelo de Objetos del Documento(DOM) , Cross-browser widgets, y recursos adicionales para aprender sobre DOM. +
+
Solución a errores DHTML en Firefox 1.0.3 +
Tenga en cuenta que los problemas tratados en este artículo se han solucionado en la versión 1.0.4 de Firefox, y este documento solo es de aplicación a las versiones 1.0.3 del navegador. +
+

+

View All... +

+		 +

Comunidad

+
  • Ver foros en Mozilla ... +
+

{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }} +

+

Herramientas

+ +

Temas Relacionados

+
AJAX, CSS, DOM, HTML, JavaScript +
+
+

Categories +

Interwiki Language Links +


+

{{ languages( { "en": "en/DHTML", "fr": "fr/DHTML", "ja": "ja/DHTML", "ko": "ko/DHTML", "pl": "pl/DHTML", "pt": "pt/DHTML" } ) }} diff --git a/files/es/glossary/domain_name/index.html b/files/es/glossary/domain_name/index.html new file mode 100644 index 0000000000..e2c9e01c16 --- /dev/null +++ b/files/es/glossary/domain_name/index.html @@ -0,0 +1,15 @@ +--- +title: Nombre de dominio +slug: Glossary/Nombre_de_dominio +translation_of: Glossary/Domain_name +--- +

Un nombre de dominio es la dirección de un sitio web en {{Glossary("Internet")}}. Los nombres de dominio se utilizan en {{Glossary("URL","URLs")}} para identificar a qué servidor pertenece una página web específica. El nombre de dominio consiste en una secuencia jerárquica de nombres (etiquetas) separados por puntos y que terminan con una {{glossary("TLD","extensión")}}.

+ +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/dtd/index.html b/files/es/glossary/dtd/index.html deleted file mode 100644 index d59af84200..0000000000 --- a/files/es/glossary/dtd/index.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: DTD -slug: Glossary/DTD -translation_of: Glossary/Doctype -translation_of_original: Glossary/DTD ---- -

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

diff --git a/files/es/glossary/dynamic_typing/index.html b/files/es/glossary/dynamic_typing/index.html new file mode 100644 index 0000000000..c8ee61a087 --- /dev/null +++ b/files/es/glossary/dynamic_typing/index.html @@ -0,0 +1,24 @@ +--- +title: Tipado Dinámico +slug: Glossary/Tipado_dinámico +tags: + - Código + - Glosario + - LenguajeDeProgramación +translation_of: Glossary/Dynamic_typing +--- +

Los lenguajes de tipado dinámico son aquellos (como {{glossary("JavaScript")}}) donde el intérprete asigna a las {{glossary("variable","variables")}} un {{glossary("tipo")}} durante el tiempo de ejecución basado en su {{glossary("valor")}} en ese momento.

+ +

Ver más

+ +

Conoce sobre el tema

+ + + +

Conocimientos generales

+ + diff --git a/files/es/glossary/elemento/index.html b/files/es/glossary/elemento/index.html deleted file mode 100644 index a947c1e053..0000000000 --- a/files/es/glossary/elemento/index.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: elemento -slug: Glossary/elemento -tags: - - Junk ---- -

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/glossary/encriptaci\303\263n/index.html" "b/files/es/glossary/encriptaci\303\263n/index.html" deleted file mode 100644 index 4d98cc9ad5..0000000000 --- "a/files/es/glossary/encriptaci\303\263n/index.html" +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Encriptación -slug: Glossary/Encriptación -tags: - - Criptografía - - Glosario - - Seguridad - - privacidad -translation_of: Glossary/Encryption ---- -

En {{glossary("cryptography", "criptografía")}}, la encriptación es la conversión del {{glossary("cleartext", "lenguaje natural")}} en un texto codificado o {{glossary("ciphertext", "cifrado")}}. Un texto cifrado es utilizado para ser ilegible por lectores no autorizados.

- -

La encriptación es una primitiva criptográfica: transforma un mensaje en texto plano en un texto cifrado usando un {{glossary("cipher", "algoritmo criptográfico")}}. La encriptación en los algoritmos modernos se lleva a cabo usando un algoritmo específico y un secreto, llamado la {{glossary("key", "clave")}}. Ya que la mayoría de los algoritmos son públicos, la clave debe ser secreta para que la encriptación sea segura.

- -

How encryption works.

- -

Sin conocer el secreto, la operación inversa, {{glossary("decryption", "desencriptación")}}, es matemáticamente costosa de realizar. Cómo de difícil resulte depende de la seguridad del algoritmo criptográfico elegido y evoluciona con el progreso del {{glossary("cryptanalysis", "criptoanálisis")}}.

- -

Saber más

- - diff --git a/files/es/glossary/encryption/index.html b/files/es/glossary/encryption/index.html new file mode 100644 index 0000000000..4d98cc9ad5 --- /dev/null +++ b/files/es/glossary/encryption/index.html @@ -0,0 +1,23 @@ +--- +title: Encriptación +slug: Glossary/Encriptación +tags: + - Criptografía + - Glosario + - Seguridad + - privacidad +translation_of: Glossary/Encryption +--- +

En {{glossary("cryptography", "criptografía")}}, la encriptación es la conversión del {{glossary("cleartext", "lenguaje natural")}} en un texto codificado o {{glossary("ciphertext", "cifrado")}}. Un texto cifrado es utilizado para ser ilegible por lectores no autorizados.

+ +

La encriptación es una primitiva criptográfica: transforma un mensaje en texto plano en un texto cifrado usando un {{glossary("cipher", "algoritmo criptográfico")}}. La encriptación en los algoritmos modernos se lleva a cabo usando un algoritmo específico y un secreto, llamado la {{glossary("key", "clave")}}. Ya que la mayoría de los algoritmos son públicos, la clave debe ser secreta para que la encriptación sea segura.

+ +

How encryption works.

+ +

Sin conocer el secreto, la operación inversa, {{glossary("decryption", "desencriptación")}}, es matemáticamente costosa de realizar. Cómo de difícil resulte depende de la seguridad del algoritmo criptográfico elegido y evoluciona con el progreso del {{glossary("cryptanalysis", "criptoanálisis")}}.

+ +

Saber más

+ + diff --git a/files/es/glossary/entidad/index.html b/files/es/glossary/entidad/index.html deleted file mode 100644 index cc6ebf2682..0000000000 --- a/files/es/glossary/entidad/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Entidad -slug: Glossary/Entidad -tags: - - Caractères - - HTML - - entidad -translation_of: Glossary/Entity ---- -

Una entidad {{glossary("HTML")}} es un conjunto de caracteres ("string") que comienza con un ampersand (&) y termina con un punto y coma (;) . Las entidades son utilizadas frecuentemente para imprimir en pantalla caracteres reservados (aquellos que serían interpretados como HTML por el navegador) o invisibles (cómo tabulaciones). También pueden usarse para representar caracteres que no existan en algunos teclados, por ejemplo caracterés con tilde o diéresis. 

- -
-

Muchos caracteres tienen entidades con nombres fáciles de recordar, como las vocales con tilde (á) es &aacute;, (é) es &eacute; y así sucesivamente. Otro ejempo es el simbolo de copyright, (©) representado por la entidad &copy;. Al lidiar con entidades menos representativas de los caracteres que representan, es de gran ayuda utilizar una tabla de referencia o  un decodificador.

-
- -

Caracteres Reservados

- -

Algunos caracteres son reservados para uso en HTML, es decir que no pueden utilizarse sin que el navegador los interprete como parte del código HTML. Por ejemplo, al utilizar el simbolo para "menor a" (<), el navegador interpretara cualquier texto que siga como parte de una etiqueta.

- -

Para utilizar estos caracteres como texto, deben reemplazarse por la entidad que les corresponda, a saber:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterEntitdadNota
&&amp;Interpretado como el comienzo de una entidad HTML.
<&lt;Interpretado como la apertura de una etiqueta.
>&gt;Interpretado como el cierre de una etiqueta.
"&quot;Interpretado como apertura o cierre del valor de un  atributo.
- -

Aprende más

- -

Referencia técnica

- - diff --git a/files/es/glossary/entity/index.html b/files/es/glossary/entity/index.html new file mode 100644 index 0000000000..cc6ebf2682 --- /dev/null +++ b/files/es/glossary/entity/index.html @@ -0,0 +1,60 @@ +--- +title: Entidad +slug: Glossary/Entidad +tags: + - Caractères + - HTML + - entidad +translation_of: Glossary/Entity +--- +

Una entidad {{glossary("HTML")}} es un conjunto de caracteres ("string") que comienza con un ampersand (&) y termina con un punto y coma (;) . Las entidades son utilizadas frecuentemente para imprimir en pantalla caracteres reservados (aquellos que serían interpretados como HTML por el navegador) o invisibles (cómo tabulaciones). También pueden usarse para representar caracteres que no existan en algunos teclados, por ejemplo caracterés con tilde o diéresis. 

+ +
+

Muchos caracteres tienen entidades con nombres fáciles de recordar, como las vocales con tilde (á) es &aacute;, (é) es &eacute; y así sucesivamente. Otro ejempo es el simbolo de copyright, (©) representado por la entidad &copy;. Al lidiar con entidades menos representativas de los caracteres que representan, es de gran ayuda utilizar una tabla de referencia o  un decodificador.

+
+ +

Caracteres Reservados

+ +

Algunos caracteres son reservados para uso en HTML, es decir que no pueden utilizarse sin que el navegador los interprete como parte del código HTML. Por ejemplo, al utilizar el simbolo para "menor a" (<), el navegador interpretara cualquier texto que siga como parte de una etiqueta.

+ +

Para utilizar estos caracteres como texto, deben reemplazarse por la entidad que les corresponda, a saber:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterEntitdadNota
&&amp;Interpretado como el comienzo de una entidad HTML.
<&lt;Interpretado como la apertura de una etiqueta.
>&gt;Interpretado como el cierre de una etiqueta.
"&quot;Interpretado como apertura o cierre del valor de un  atributo.
+ +

Aprende más

+ +

Referencia técnica

+ + diff --git a/files/es/glossary/espacio_en_blanco/index.html b/files/es/glossary/espacio_en_blanco/index.html deleted file mode 100644 index db6014deae..0000000000 --- a/files/es/glossary/espacio_en_blanco/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Espacio en blanco -slug: Glossary/Espacio_en_blanco -tags: - - Glosario - - Gramática léxica - - espacioenblanco -translation_of: Glossary/Whitespace ---- -

El espacio en blanco es un conjunto de {{Glossary("Caracter", "caracteres")}} que se utiliza para mostrar espacios horizontales o verticales entre otros caracteres. A menudo se utilizan para separar fragmentos en {{Glossary("HTML")}}, {{Glossary("CSS")}}, {{Glossary("JavaScript")}} y otros lenguajes informáticos.Los caracteres de espacio en blanco y su uso varía de un lenguaje a otro.

- -

En HTML

- -

La HTML Living Standard especifica 5 caracteres ASCII como espacio en blanco: U+0009 TAB, U+000A LF, U+000C FF, U+000D CR y U+0020 ESPACIO. En forma de texto, se tratan como caracteres de espacio normal y los espacios en blanco secuenciales se contraen como un solo espacio en muchos casos (este comportamiento se puede cambiar mediante la propiedad CSS {{cssxref("white-space")}}. También se utilizan como separadores del nombre de un elemento y sus parámetros, nombres de clases, etc.

- -

En JavaScript

- -

La especificación del lenguaje ECMAScript® 2015 establece varios puntos de código Unicode como espacio en blanco: U+0009 CARACTERES de TABULACIÓN <TAB>, U+000B TABULACIÓN DE LÍNEA <VT>, U+000C FORM FEED <FF>, U+0020 ESPACIO <SP>, U+00A0 ESPACIO SIN ROTURA <NBSP>, U+FEFF ANCHO CERO NO -BREAK SPACE <ZWNBSP> y otra categoría “Zs” Cualquier otro punto de código Unicode “Separador, espacio” <USP>. Estos caracteres suelen ser innecesarios para la funcionalidad del código.

- - diff --git a/files/es/glossary/estructura_de_datos/index.html b/files/es/glossary/estructura_de_datos/index.html deleted file mode 100644 index d01f1b0ac8..0000000000 --- a/files/es/glossary/estructura_de_datos/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Estructura de datos -slug: Glossary/Estructura_de_datos -tags: - - Codificación - - Estructura de datos - - Glosario -translation_of: Glossary/Data_structure ---- -

Estructura de datos es una forma particular de organizar datos para que puedan ser usados eficientemente.

- -

Aprende másEdit

- -

Conocimiento general

- - diff --git a/files/es/glossary/first-class_function/index.html b/files/es/glossary/first-class_function/index.html new file mode 100644 index 0000000000..311f068470 --- /dev/null +++ b/files/es/glossary/first-class_function/index.html @@ -0,0 +1,111 @@ +--- +title: Funcion de primera clase +slug: Glossary/Funcion_de_primera_clase +translation_of: Glossary/First-class_Function +--- +

Un lenguaje de programación se dice que tiene Funciones de primera clase cuando las funciones en ese lenguaje son tratadas como cualquier otra variable. Por ejemplo, en ese lenguaje, una función puede ser pasada como argumento a otras funciones, puede ser retornada por otra función y puede ser asignada a una variable.

+ +

Ejemplo | Asignar función a una variable

+ +

JavaScript

+ +
const foo = function() {
+   console.log("foobar");
+}
+// Invocación usando una variable
+foo();
+
+ +

Asignamos una Función Anónima a una {{glossary("Variable")}}, la cual utilizamos para invocar la función añadiendo paréntesis () al final.

+ +
+

Aunque la función no sea anónima (función nombrada), se puede utilizar la variable para invocarla. Nombrar las funciones puede ser útil cuando estamos depurando el código. Pero no afectará como invocamos a la función.

+
+ +

Ejemplo | Pasar la función como argumento

+ +

JavaScript

+ +
function diHola() {
+   return "Hola ";
+}
+function saludar(saludo, nombre) {
+  console.log(saludo() + nombre);
+}
+// Pasamos `diHola` como argumento de la función `saludar`
+saludar(diHola, "JavaScript!");
+
+ +

Pasamos nuestra función diHola() como argumento de la función saludar(), esto explica como tratamos la función como un valor.

+ +
+

Una función que pasamos como argumento a otra función, se llama {{glossary("Callback function")}}. diHola es una función Callback.

+
+ +

Ejemplo | Devolver una función

+ +

JavaScript

+ +
function diHola() {
+   return function() {
+      console.log("¡Hola!");
+   }
+}
+
+ +

En este ejemplo; Necesitamos devolver una función desde otra función - Podemos devolver una función porque JavaScript trata la función como un value.

+ +
+

Una función que devuelve una función se llama Higher-Order Function.

+
+ +

Volviendo al ejemplo; Ahora, necesitamos invocar la función diHola y su  Función Anónima devuelta. Para ello, tenemos dos maneras:

+ +

1- Usando una variable

+ +
const diHola = function() {
+   return function() {
+      console.log("¡Hola!");
+   }
+}
+const miFuncion = diHola();
+miFuncion();
+
+ +

De esta manera, devolverá el mensaje ¡Hola!.

+ +
+

Debes usar otra variable para que devuelve el mensaje. Si invocas diHola directamente, devolvera la función en si misma sin invocar a la función devuelta.

+
+ +

2- Usando paréntesis doble

+ +
function diHola() {
+   return function() {
+      console.log("¡Hola!");
+   }
+}
+diHola()();
+
+ +

Usamos parétesis dobre ()() para invocar también a la función retornada.

+ + + +

Aprender más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/forbidden_header_name/index.html b/files/es/glossary/forbidden_header_name/index.html new file mode 100644 index 0000000000..e2f16bbecf --- /dev/null +++ b/files/es/glossary/forbidden_header_name/index.html @@ -0,0 +1,47 @@ +--- +title: Nombre de encabezado prohibido +slug: Glossary/Nombre_de_encabezado_prohibido +tags: + - Encabezados + - Fetch + - Glosario + - HTTP + - prohibido +translation_of: Glossary/Forbidden_header_name +--- +

Un nombre de encabezado prohibido es un nombre de encabezado HTTP que no se puede modificar mediante programación; específicamente, un nombre de encabezado de HTTP solicitud HTTP.

+ +

Contrasta con el {{Glossary("Forbidden response header name")}}.

+ +

La modificación de estas cabeceras está prohibida, por lo que el agente de usuario mantiene el control total sobre ellos. Los nombres que comienzan con `Sec-` están reservados para crear nuevos encabezados seguros a partir de las {{glossary("API","APIs")}} que usan Fetch que otorgan a los desarrolladores control sobre las cabeceras, como {{domxref("XMLHttpRequest")}}.

+ +

Los nombres de encabezado prohibidos comienzan con Proxy- or Sec-, o se componen de uno de estos:

+ + + +
+

Nota: El encabezadoUser-Agent ya no está prohibido, según la especificación — vea la lista de nombres prohibidos de encabezado (esta fue implementada en Firefox 43), por lo que ahora puede establecerse en un objecto Fetch Headers, a través de XHR setRequestHeader(), etc.

+
diff --git a/files/es/glossary/funcion_de_primera_clase/index.html b/files/es/glossary/funcion_de_primera_clase/index.html deleted file mode 100644 index 311f068470..0000000000 --- a/files/es/glossary/funcion_de_primera_clase/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Funcion de primera clase -slug: Glossary/Funcion_de_primera_clase -translation_of: Glossary/First-class_Function ---- -

Un lenguaje de programación se dice que tiene Funciones de primera clase cuando las funciones en ese lenguaje son tratadas como cualquier otra variable. Por ejemplo, en ese lenguaje, una función puede ser pasada como argumento a otras funciones, puede ser retornada por otra función y puede ser asignada a una variable.

- -

Ejemplo | Asignar función a una variable

- -

JavaScript

- -
const foo = function() {
-   console.log("foobar");
-}
-// Invocación usando una variable
-foo();
-
- -

Asignamos una Función Anónima a una {{glossary("Variable")}}, la cual utilizamos para invocar la función añadiendo paréntesis () al final.

- -
-

Aunque la función no sea anónima (función nombrada), se puede utilizar la variable para invocarla. Nombrar las funciones puede ser útil cuando estamos depurando el código. Pero no afectará como invocamos a la función.

-
- -

Ejemplo | Pasar la función como argumento

- -

JavaScript

- -
function diHola() {
-   return "Hola ";
-}
-function saludar(saludo, nombre) {
-  console.log(saludo() + nombre);
-}
-// Pasamos `diHola` como argumento de la función `saludar`
-saludar(diHola, "JavaScript!");
-
- -

Pasamos nuestra función diHola() como argumento de la función saludar(), esto explica como tratamos la función como un valor.

- -
-

Una función que pasamos como argumento a otra función, se llama {{glossary("Callback function")}}. diHola es una función Callback.

-
- -

Ejemplo | Devolver una función

- -

JavaScript

- -
function diHola() {
-   return function() {
-      console.log("¡Hola!");
-   }
-}
-
- -

En este ejemplo; Necesitamos devolver una función desde otra función - Podemos devolver una función porque JavaScript trata la función como un value.

- -
-

Una función que devuelve una función se llama Higher-Order Function.

-
- -

Volviendo al ejemplo; Ahora, necesitamos invocar la función diHola y su  Función Anónima devuelta. Para ello, tenemos dos maneras:

- -

1- Usando una variable

- -
const diHola = function() {
-   return function() {
-      console.log("¡Hola!");
-   }
-}
-const miFuncion = diHola();
-miFuncion();
-
- -

De esta manera, devolverá el mensaje ¡Hola!.

- -
-

Debes usar otra variable para que devuelve el mensaje. Si invocas diHola directamente, devolvera la función en si misma sin invocar a la función devuelta.

-
- -

2- Usando paréntesis doble

- -
function diHola() {
-   return function() {
-      console.log("¡Hola!");
-   }
-}
-diHola()();
-
- -

Usamos parétesis dobre ()() para invocar también a la función retornada.

- - - -

Aprender más

- -

Conocimiento general

- - diff --git "a/files/es/glossary/funci\303\263n/index.html" "b/files/es/glossary/funci\303\263n/index.html" deleted file mode 100644 index f67d9e90c8..0000000000 --- "a/files/es/glossary/funci\303\263n/index.html" +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Función -slug: Glossary/Función -tags: - - CodingScripting - - Glosario - - IIFE - - JavaScript -translation_of: Glossary/Function ---- -

Una función es un fragmento de código que puede ser llamado por otro código o por sí mismo, o por una {{Glossary("variable")}} que haga referencia a la función. Cuando se llama a una función, los {{Glossary("Argument", "argumentos")}} se pasan a la función como entrada, y la función puede devolver opcionalmente una salida. Una función en {{glossary("JavaScript")}} es también un {{glossary("object", "objeto")}}.

- -

El nombre de la función es un {{Glossary("identifier", "identificador")}} declarado como parte de una declaración de función o expresión de función. El {{Glossary("scope", "ámbito")}} de la función depende de si el nombre de la función es una declaración o una expresión.

- -

Diferentes tipos de funciones

- -

Una función anónima es una función que no tiene nombre:

- -
function () {};
-// o se puede usar la anotación con flecha ECMAScript 2015
-() => {};
-
- -

 

- -

Una función nombrada es una función con nombre:

- -
function foo() {};
-// o se puede usar la anotación con flecha ECMAScript 2015
-const foo = () => {};
-
- -

Una función interna es una función que está dentro de otra función (cuadrado en este caso). Una función externa es una función que contiene a otra función (sumarCuadrados en este caso):

- -
function sumarCuadradors(a,b) {
-   function cuadrado(x) {
-      return x * x;
-   }
-   return cuadrado(a) + cuadrado(b);
-};
-//Usando la anotación de flecha ECMAScript 2015
-const sumarCuadrados = (a,b) => {
-   const cuadrado = x => x*x;
-   return cuadrado(a) + cuadrado(b);
-};
-
- -

Una función recursiva es una función que se llama a sí misma. Mira {{Glossary("Recursion", "recursión")}}.

- -
function bucle(x) {
-   if (x >= 10)
-      return;
-   bucle(x + 1);
-};
-//Usando la anotación de flecha ECMAScript 2015
-const bucle = x => {
-   if (x >= 10)
-      return;
-   bucle(x + 1);
-};
-
- -

Una expresión de una función que se invoca inmediatamente ({{glossary("IIFE")}}, por sus siglas en inglés) es una función que se llama directamente después de que la función se haya cargado en el compilador del navegador. La forma de identificar un IIFE es ubicando el paréntesis izquierdo y derecho adicional al final de la declaración de la función.

- -
// Error (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
-/*
-​function foo() {
-    console.log('Hello Foo');
-}();
-*/
-
-(function foo() {
-    console.log("Hello Foo");
-}());
-
-(function food() {
-    console.log("Hello Food");
-})();
-
-
- -

Si desea obtener más información sobre las IIFE, consulte la siguiente página en Wikipedia: Immediately Invoked Function Expression

- -

Saber más

- -

Referencias técnicas

- - diff --git a/files/es/glossary/function/index.html b/files/es/glossary/function/index.html new file mode 100644 index 0000000000..f67d9e90c8 --- /dev/null +++ b/files/es/glossary/function/index.html @@ -0,0 +1,91 @@ +--- +title: Función +slug: Glossary/Función +tags: + - CodingScripting + - Glosario + - IIFE + - JavaScript +translation_of: Glossary/Function +--- +

Una función es un fragmento de código que puede ser llamado por otro código o por sí mismo, o por una {{Glossary("variable")}} que haga referencia a la función. Cuando se llama a una función, los {{Glossary("Argument", "argumentos")}} se pasan a la función como entrada, y la función puede devolver opcionalmente una salida. Una función en {{glossary("JavaScript")}} es también un {{glossary("object", "objeto")}}.

+ +

El nombre de la función es un {{Glossary("identifier", "identificador")}} declarado como parte de una declaración de función o expresión de función. El {{Glossary("scope", "ámbito")}} de la función depende de si el nombre de la función es una declaración o una expresión.

+ +

Diferentes tipos de funciones

+ +

Una función anónima es una función que no tiene nombre:

+ +
function () {};
+// o se puede usar la anotación con flecha ECMAScript 2015
+() => {};
+
+ +

 

+ +

Una función nombrada es una función con nombre:

+ +
function foo() {};
+// o se puede usar la anotación con flecha ECMAScript 2015
+const foo = () => {};
+
+ +

Una función interna es una función que está dentro de otra función (cuadrado en este caso). Una función externa es una función que contiene a otra función (sumarCuadrados en este caso):

+ +
function sumarCuadradors(a,b) {
+   function cuadrado(x) {
+      return x * x;
+   }
+   return cuadrado(a) + cuadrado(b);
+};
+//Usando la anotación de flecha ECMAScript 2015
+const sumarCuadrados = (a,b) => {
+   const cuadrado = x => x*x;
+   return cuadrado(a) + cuadrado(b);
+};
+
+ +

Una función recursiva es una función que se llama a sí misma. Mira {{Glossary("Recursion", "recursión")}}.

+ +
function bucle(x) {
+   if (x >= 10)
+      return;
+   bucle(x + 1);
+};
+//Usando la anotación de flecha ECMAScript 2015
+const bucle = x => {
+   if (x >= 10)
+      return;
+   bucle(x + 1);
+};
+
+ +

Una expresión de una función que se invoca inmediatamente ({{glossary("IIFE")}}, por sus siglas en inglés) es una función que se llama directamente después de que la función se haya cargado en el compilador del navegador. La forma de identificar un IIFE es ubicando el paréntesis izquierdo y derecho adicional al final de la declaración de la función.

+ +
// Error (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
+/*
+​function foo() {
+    console.log('Hello Foo');
+}();
+*/
+
+(function foo() {
+    console.log("Hello Foo");
+}());
+
+(function food() {
+    console.log("Hello Food");
+})();
+
+
+ +

Si desea obtener más información sobre las IIFE, consulte la siguiente página en Wikipedia: Immediately Invoked Function Expression

+ +

Saber más

+ +

Referencias técnicas

+ + diff --git a/files/es/glossary/general_header/index.html b/files/es/glossary/general_header/index.html new file mode 100644 index 0000000000..d27644dad0 --- /dev/null +++ b/files/es/glossary/general_header/index.html @@ -0,0 +1,8 @@ +--- +title: Cabecera general +slug: Glossary/Cabecera_general +translation_of: Glossary/General_header +--- +

Una cabecera general es una {{glossary('Header', 'cabecera HTTP')}} que puede ser utilizada tanto en mensajes de consultas como de respuestas pero que no se aplican al contenido en sí mismo. Dependiendo del contexto en que son usadas, las cabeceras generales pueden ser de {{glossary("Response header", "respuesta")}} o de {{glossary("request header", "consulta")}}. Sin embargo, no son {{glossary("entity header", "cabeceras de entidad.")}}.

+ +

Las cabeceras generales más comunes son {{HTTPHeader('Date')}}, {{HTTPheader("Cache-Control")}} y {{HTTPHeader("Connection")}}.

diff --git a/files/es/glossary/hilo_principal/index.html b/files/es/glossary/hilo_principal/index.html deleted file mode 100644 index 47cef4e428..0000000000 --- a/files/es/glossary/hilo_principal/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Hilo principal -slug: Glossary/Hilo_principal -tags: - - Actualización Web - - Glosario - - Referencia - - Web de rendimiento -translation_of: Glossary/Main_thread ---- -

El hilo principal es donde un navegador procesa eventos y pinturas del usuario. De manera predeterminada, el navegador usa un solo hilo para ejecutar todo el JavaScript en su página, así como para realizar el diseño, los reflujos y la recolección de basura. Esto significa que las funciones de JavaScript de larga duración pueden bloquear el hilo, lo que lleva a una página que no responde y a una mala experiencia del usuario.

- -

A menos que use intencionalmente un trabajador web, como un trabajador de servicio, JavaScript se ejecuta en el hilo principal, por lo que es fácil que un script provoque retrasos en el procesamiento o la pintura de eventos. Cuanto menos trabajo se requiera del hilo principal, más puede responder ese hilo a los eventos del usuario, pintar y, en general, responder al usuario.

- - diff --git a/files/es/glossary/identificador/index.html b/files/es/glossary/identificador/index.html deleted file mode 100644 index 63f26a35a8..0000000000 --- a/files/es/glossary/identificador/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Identificador -slug: Glossary/Identificador -tags: - - Campartir - - CodingScripting - - Glosario - - Novato - - Principiante -translation_of: Glossary/Identifier ---- -

Un Identificador es una secuencia de caracteres en el código que identifica una {{Glossary("Variable")}}, {{Glossary("Function", "función")}} o {{Glossary("Property", "propiedad")}}.

- -

En {{Glossary("JavaScript")}}, los identificadores distinguen entre mayúsculas y minúsculas y pueden contener letras {{Glossary("Unicode")}}, $, _, y dígitos (0-9), pero no puede comenzar con un dígito.

- -

Un identificador se diferencia de una cadena en que una {{Glossary("String", "cadena")}} son datos, mientras que un identificador es parte del código. En JavaScript, no hay forma de convertir identificadores en cadenas, pero a veces es posible procesar cadenas como identificadores.

- -

Aprende más

- -

Conocimientos generales

- - - - diff --git a/files/es/glossary/identifier/index.html b/files/es/glossary/identifier/index.html new file mode 100644 index 0000000000..63f26a35a8 --- /dev/null +++ b/files/es/glossary/identifier/index.html @@ -0,0 +1,39 @@ +--- +title: Identificador +slug: Glossary/Identificador +tags: + - Campartir + - CodingScripting + - Glosario + - Novato + - Principiante +translation_of: Glossary/Identifier +--- +

Un Identificador es una secuencia de caracteres en el código que identifica una {{Glossary("Variable")}}, {{Glossary("Function", "función")}} o {{Glossary("Property", "propiedad")}}.

+ +

En {{Glossary("JavaScript")}}, los identificadores distinguen entre mayúsculas y minúsculas y pueden contener letras {{Glossary("Unicode")}}, $, _, y dígitos (0-9), pero no puede comenzar con un dígito.

+ +

Un identificador se diferencia de una cadena en que una {{Glossary("String", "cadena")}} son datos, mientras que un identificador es parte del código. En JavaScript, no hay forma de convertir identificadores en cadenas, pero a veces es posible procesar cadenas como identificadores.

+ +

Aprende más

+ +

Conocimientos generales

+ + + + diff --git a/files/es/glossary/immutable/index.html b/files/es/glossary/immutable/index.html new file mode 100644 index 0000000000..534f00b6b6 --- /dev/null +++ b/files/es/glossary/immutable/index.html @@ -0,0 +1,23 @@ +--- +title: Inmutable +slug: Glossary/Inmutable +tags: + - CodingScripting + - Glosario +translation_of: Glossary/Immutable +--- +

Un {{glossary("object", "objeto")}} inmutable es aquel cuyo contenido no se puede cambiar.Un objeto puede ser inmutable por varias razones, por ejemplo:

+ + + +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/information_architecture/index.html b/files/es/glossary/information_architecture/index.html new file mode 100644 index 0000000000..222ed88e59 --- /dev/null +++ b/files/es/glossary/information_architecture/index.html @@ -0,0 +1,18 @@ +--- +title: Arquitectura de la información +slug: Glossary/Arquitectura_de_la_información +tags: + - Arquitectura informacional + - Diseño + - Glosario +translation_of: Glossary/Information_architecture +--- +

La arquitectura de la información, aplicada al diseño y desarrollo web, es la práctica de organizar la información, contenido y funcionalidad de un sitio web para que presente la mejor experiencia de usuario posible, con información y servicios fáciles de usar y encontrar.

+ +

Aprende más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/inmutable/index.html b/files/es/glossary/inmutable/index.html deleted file mode 100644 index 534f00b6b6..0000000000 --- a/files/es/glossary/inmutable/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Inmutable -slug: Glossary/Inmutable -tags: - - CodingScripting - - Glosario -translation_of: Glossary/Immutable ---- -

Un {{glossary("object", "objeto")}} inmutable es aquel cuyo contenido no se puede cambiar.Un objeto puede ser inmutable por varias razones, por ejemplo:

- - - -

Saber más

- -

Conocimientos generales

- - diff --git a/files/es/glossary/iu/index.html b/files/es/glossary/iu/index.html deleted file mode 100644 index 0b24558082..0000000000 --- a/files/es/glossary/iu/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: IU -slug: Glossary/IU -tags: - - Accesibilidad - - Diseño - - Glosario -translation_of: Glossary/UI ---- -

La Interfaz de Usuario (IU) es el medio que facilita la interacción entre el usuario y la máquina. En el campo de la informática, puede ser un teclado, un joystick, una pantalla, o un programa. En el caso del software, puede ser una entrada de línea de comandos, una página web, un formulario, o el front-end de cualquier aplicación.

- -

Saber más

- -

Conocimiento general

- - diff --git a/files/es/glossary/key/index.html b/files/es/glossary/key/index.html new file mode 100644 index 0000000000..b228776065 --- /dev/null +++ b/files/es/glossary/key/index.html @@ -0,0 +1,19 @@ +--- +title: Clave +slug: Glossary/Clave +tags: + - Criptografía + - Glosario + - Seguridad +translation_of: Glossary/Key +--- +

Una clave es una pieza de información utilizada por un algoritmo criptográfico para el {{Glossary("encryption", "cifrado")}} y/o {{Glossary("decryption", "descifrado")}}. Los mensajes cifrados deben permanecer seguros incluso si todo lo relacionado con el {{Glossary("cryptosystem","sistema de cifrado")}}, excepto la clave, es de conocimiento público.

+ +

En la {{Glossary("symmetric-key cryptography", "criptografía de clave simétrica")}}, la misma clave se utiliza tanto para el cifrado como para el descifrado. En la criptografía de clave pública, existen un par de claves relacionadas conocidas como clave pública y clave privada. La clave pública está disponible libremente, mientras que la clave privada se mantiene secreta. La clave pública puede cifrar mensajes que sólo la clave privada correspondiente puede descifrar, y viceversa.

+ +

Saber más

+ + diff --git a/files/es/glossary/localization/index.html b/files/es/glossary/localization/index.html new file mode 100644 index 0000000000..def1406446 --- /dev/null +++ b/files/es/glossary/localization/index.html @@ -0,0 +1,16 @@ +--- +title: Localización +slug: Localización +tags: + - Localización +translation_of: Glossary/Localization +--- +

  

+

La localización es el proceso de traducción de interfaces de usuario de un lenguaje a otro y adaptación para que una cultura extranjera lo comprenda. Estos recursos tratan sobre cómo hacer aplicaciones/extensiones de Mozilla localizables.

+
+ +

Documentación

Sistema de traducción de extensiones para NAVE
"Este documento tiene como principal objetivo fomentar la traducción de extensiones mediante un sistema escalable que, aunque inicialmente puede ser complicado de entender, al final, se minimiza el tiempo total empleado en generar un paquete de idioma con la traducción."
Creación de instaladores
Este documento explica cómo hacer instaladores de productos Mozilla 100% es-ES a partir del correspondiente instalador original en-US y los paquetes de idioma es-ES más, en algunos casos, archivos adicionales de personalización es-ES.
Escribir código localizable
Esta página te explica las buenas prácticas y directrices al tratar con código UI en relación a la localización. Está dirigido a desarrolladores de Mozilla y sus extensiones.
Localizando las descripciones de las extensiones
Para localizar la descripción de una extensión (secuencia que muestra arriba y abajo el nombre de la extensión en ventanas de extensiones), necesitas utilizar una clave especial para anular la descripción especificada en su archivo install.rdf. Este artículo contiene instrucciones de cómo modificar esta tecla de preferencia.

Ver todo...

Comunidad

  • En la comunidad Mozilla... en ingles

{{ DiscussionList("dev-l10n", "mozilla.dev.l10n") }}

Ver todo...

Herramientas

Ver todo...

Temas Relacionados

Extensiones, Desarrollando Mozilla, XUL
+

Categorías

+

Interwiki Language Links

+

  

+

{{ languages( { "de": "de/Lokalisierung", "en": "en/Localization", "fr": "fr/Localisation", "it": "it/Localization", "ja": "ja/Localization", "pl": "pl/Lokalizacja", "pt": "pt/Localiza\u00e7\u00e3o", "zh-tw": "zh_tw/\u672c\u5730\u5316" } ) }}

diff --git a/files/es/glossary/main_thread/index.html b/files/es/glossary/main_thread/index.html new file mode 100644 index 0000000000..47cef4e428 --- /dev/null +++ b/files/es/glossary/main_thread/index.html @@ -0,0 +1,30 @@ +--- +title: Hilo principal +slug: Glossary/Hilo_principal +tags: + - Actualización Web + - Glosario + - Referencia + - Web de rendimiento +translation_of: Glossary/Main_thread +--- +

El hilo principal es donde un navegador procesa eventos y pinturas del usuario. De manera predeterminada, el navegador usa un solo hilo para ejecutar todo el JavaScript en su página, así como para realizar el diseño, los reflujos y la recolección de basura. Esto significa que las funciones de JavaScript de larga duración pueden bloquear el hilo, lo que lleva a una página que no responde y a una mala experiencia del usuario.

+ +

A menos que use intencionalmente un trabajador web, como un trabajador de servicio, JavaScript se ejecuta en el hilo principal, por lo que es fácil que un script provoque retrasos en el procesamiento o la pintura de eventos. Cuanto menos trabajo se requiera del hilo principal, más puede responder ese hilo a los eventos del usuario, pintar y, en general, responder al usuario.

+ + diff --git a/files/es/glossary/metadata/index.html b/files/es/glossary/metadata/index.html new file mode 100644 index 0000000000..dddb546b28 --- /dev/null +++ b/files/es/glossary/metadata/index.html @@ -0,0 +1,24 @@ +--- +title: Metadato +slug: Glossary/Metadato +tags: + - CodingScripting + - Glosario + - HTML +translation_of: Glossary/Metadata +--- +

Los metadatos son, en su definición más simple, datos que describen otros datos. Por ejemplo, un documento {{glossary("HTML")}} son datos, pero HTML también puede contener metadatos en su elemento {{htmlelement("head")}} que describe el documento, como por ejemplo, quién lo escribió y su resumen.

+ +

Saber más

+ +

Conocimientos generales

+ + + +

HTML metadata

+ + diff --git a/files/es/glossary/metadato/index.html b/files/es/glossary/metadato/index.html deleted file mode 100644 index dddb546b28..0000000000 --- a/files/es/glossary/metadato/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Metadato -slug: Glossary/Metadato -tags: - - CodingScripting - - Glosario - - HTML -translation_of: Glossary/Metadata ---- -

Los metadatos son, en su definición más simple, datos que describen otros datos. Por ejemplo, un documento {{glossary("HTML")}} son datos, pero HTML también puede contener metadatos en su elemento {{htmlelement("head")}} que describe el documento, como por ejemplo, quién lo escribió y su resumen.

- -

Saber más

- -

Conocimientos generales

- - - -

HTML metadata

- - diff --git a/files/es/glossary/method/index.html b/files/es/glossary/method/index.html new file mode 100644 index 0000000000..b0539a9474 --- /dev/null +++ b/files/es/glossary/method/index.html @@ -0,0 +1,28 @@ +--- +title: Método +slug: Glossary/Método +tags: + - Glosario + - JavaScript +translation_of: Glossary/Method +--- +

Un metodo es una {{glossary("function", "función")}} la cual es {{glossary("property", "propiedad")}} de un {{glossary("Objecto", "Objeto")}}. Existen dos tipos de métodos: Métodos de Instancia los cuales son tareas integradas realizadas por la instacia de un objeto, y los Métodos Estáticos que son tareas que pueden ser llamadas directamente en el constructor de un objeto.

+ +
+

Nota: En JavaScript las funciones en si son objectos, asi que, en ese contexto, un método es de hecho un {{glossary("Object Reference", "objeto de referencia")}} a una función.

+
+ +

Aprender más

+ +

Aprender acerca de esto

+ + + +

Referencia Técnica

+ + diff --git a/files/es/glossary/miga-de-pan/index.html b/files/es/glossary/miga-de-pan/index.html deleted file mode 100644 index 0fe4ade2f7..0000000000 --- a/files/es/glossary/miga-de-pan/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Miga de pan -slug: Glossary/miga-de-pan -tags: - - Accesibilidad - - Glosario - - Miga de pan - - navegación -translation_of: Glossary/Breadcrumb ---- -

Una miga de pan, o rastro de migas de pan, es una ayuda a la navegación que se sitúa normalmente entre la cabecera del sitio y el contenido principal y muestra, bien la jerarquía de la página actual en relación con la estructura del sitio desde el nivel superior o bien una lista de los enlaces utilizados para llegar a la página actual en el orden en que se han visitado.

- -

Una miga de pan para este documento se vería más o menos así:

- -

MDN > Glosario > Miga de pan

- -

Los rastros de migas de pan permiten a los usuarios conocer su situación dentro de un sitio web. Este tipo de navegación, si se construye correctamente, ayuda a los usuarios a saber dónde están dentro del sitio y cómo han llegado hasta ahí. También pueden ayudar al usuario a volver a donde estaba anteriormente y pueden reducir el número de clics necesario para llegar a una página de nivel superior.

diff --git "a/files/es/glossary/m\303\251todo/index.html" "b/files/es/glossary/m\303\251todo/index.html" deleted file mode 100644 index b0539a9474..0000000000 --- "a/files/es/glossary/m\303\251todo/index.html" +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Método -slug: Glossary/Método -tags: - - Glosario - - JavaScript -translation_of: Glossary/Method ---- -

Un metodo es una {{glossary("function", "función")}} la cual es {{glossary("property", "propiedad")}} de un {{glossary("Objecto", "Objeto")}}. Existen dos tipos de métodos: Métodos de Instancia los cuales son tareas integradas realizadas por la instacia de un objeto, y los Métodos Estáticos que son tareas que pueden ser llamadas directamente en el constructor de un objeto.

- -
-

Nota: En JavaScript las funciones en si son objectos, asi que, en ese contexto, un método es de hecho un {{glossary("Object Reference", "objeto de referencia")}} a una función.

-
- -

Aprender más

- -

Aprender acerca de esto

- - - -

Referencia Técnica

- - diff --git a/files/es/glossary/nombre_de_dominio/index.html b/files/es/glossary/nombre_de_dominio/index.html deleted file mode 100644 index e2c9e01c16..0000000000 --- a/files/es/glossary/nombre_de_dominio/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Nombre de dominio -slug: Glossary/Nombre_de_dominio -translation_of: Glossary/Domain_name ---- -

Un nombre de dominio es la dirección de un sitio web en {{Glossary("Internet")}}. Los nombres de dominio se utilizan en {{Glossary("URL","URLs")}} para identificar a qué servidor pertenece una página web específica. El nombre de dominio consiste en una secuencia jerárquica de nombres (etiquetas) separados por puntos y que terminan con una {{glossary("TLD","extensión")}}.

- -

Saber más

- -

Conocimientos generales

- - diff --git a/files/es/glossary/nombre_de_encabezado_prohibido/index.html b/files/es/glossary/nombre_de_encabezado_prohibido/index.html deleted file mode 100644 index e2f16bbecf..0000000000 --- a/files/es/glossary/nombre_de_encabezado_prohibido/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Nombre de encabezado prohibido -slug: Glossary/Nombre_de_encabezado_prohibido -tags: - - Encabezados - - Fetch - - Glosario - - HTTP - - prohibido -translation_of: Glossary/Forbidden_header_name ---- -

Un nombre de encabezado prohibido es un nombre de encabezado HTTP que no se puede modificar mediante programación; específicamente, un nombre de encabezado de HTTP solicitud HTTP.

- -

Contrasta con el {{Glossary("Forbidden response header name")}}.

- -

La modificación de estas cabeceras está prohibida, por lo que el agente de usuario mantiene el control total sobre ellos. Los nombres que comienzan con `Sec-` están reservados para crear nuevos encabezados seguros a partir de las {{glossary("API","APIs")}} que usan Fetch que otorgan a los desarrolladores control sobre las cabeceras, como {{domxref("XMLHttpRequest")}}.

- -

Los nombres de encabezado prohibidos comienzan con Proxy- or Sec-, o se componen de uno de estos:

- - - -
-

Nota: El encabezadoUser-Agent ya no está prohibido, según la especificación — vea la lista de nombres prohibidos de encabezado (esta fue implementada en Firefox 43), por lo que ahora puede establecerse en un objecto Fetch Headers, a través de XHR setRequestHeader(), etc.

-
diff --git a/files/es/glossary/number/index.html b/files/es/glossary/number/index.html new file mode 100644 index 0000000000..6c1b7cd2b5 --- /dev/null +++ b/files/es/glossary/number/index.html @@ -0,0 +1,24 @@ +--- +title: Number +slug: Glossary/Numero +tags: + - Glosario + - JavaScript +translation_of: Glossary/Number +--- +

En {{Glossary("JavaScript")}}, Number es un tipo de datos numérico (double-precision 64-bit floating point format (IEEE 754)). En otros lenguajes de programación puede existir diferentes tipos numéricos, por ejemplo: Integers, Floats, Doubles, or Bignums.

+ +

Aprende más

+ +

Conocimientos generales

+ + + +

Referencia Técnica

+ + diff --git a/files/es/glossary/numero/index.html b/files/es/glossary/numero/index.html deleted file mode 100644 index 6c1b7cd2b5..0000000000 --- a/files/es/glossary/numero/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Number -slug: Glossary/Numero -tags: - - Glosario - - JavaScript -translation_of: Glossary/Number ---- -

En {{Glossary("JavaScript")}}, Number es un tipo de datos numérico (double-precision 64-bit floating point format (IEEE 754)). En otros lenguajes de programación puede existir diferentes tipos numéricos, por ejemplo: Integers, Floats, Doubles, or Bignums.

- -

Aprende más

- -

Conocimientos generales

- - - -

Referencia Técnica

- - diff --git a/files/es/glossary/object/index.html b/files/es/glossary/object/index.html new file mode 100644 index 0000000000..aeda572ea9 --- /dev/null +++ b/files/es/glossary/object/index.html @@ -0,0 +1,13 @@ +--- +title: Object +slug: Glossary/Objecto +translation_of: Glossary/Object +--- +

El Object se refiere a una estructura de datos que contiene datos e instrucciones para trabajar con los datos.  Algunas veces los Objects se refieren a cosas del mundo real, por ejemplo, un object de un coche o mapa en un juego de carreras. {{glossary("JavaScript")}}, Java, C++, y Python son ejemplos de {{glossary("OOP","programación orientada a objetos")}}.

+ +

Aprender más

+ + diff --git a/files/es/glossary/objecto/index.html b/files/es/glossary/objecto/index.html deleted file mode 100644 index aeda572ea9..0000000000 --- a/files/es/glossary/objecto/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Object -slug: Glossary/Objecto -translation_of: Glossary/Object ---- -

El Object se refiere a una estructura de datos que contiene datos e instrucciones para trabajar con los datos.  Algunas veces los Objects se refieren a cosas del mundo real, por ejemplo, un object de un coche o mapa en un juego de carreras. {{glossary("JavaScript")}}, Java, C++, y Python son ejemplos de {{glossary("OOP","programación orientada a objetos")}}.

- -

Aprender más

- - diff --git a/files/es/glossary/operador/index.html b/files/es/glossary/operador/index.html deleted file mode 100644 index 0385f67830..0000000000 --- a/files/es/glossary/operador/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Operador -slug: Glossary/Operador -tags: - - Glosario - - Scripting -translation_of: Glossary/Operator ---- -

Parte de la sintaxis reservada consistente en signos de puntuación o carácteres alfanuméricos que tienen funcionalidades incorporadas. Por ejemplo, "+" indica el operador suma y "!" indica el operador "not" (negación).

- -

Aprende más

- -

Referencias técnicas

- - diff --git a/files/es/glossary/operand/index.html b/files/es/glossary/operand/index.html new file mode 100644 index 0000000000..6a198905e3 --- /dev/null +++ b/files/es/glossary/operand/index.html @@ -0,0 +1,15 @@ +--- +title: Operando +slug: Glossary/Operando +tags: + - Codificación + - Glosario +translation_of: Glossary/Operand +--- +

Un operando es la parte de una instruccion que representa los datos manipulados por el {{glossary("Operator")}}. por ejemplo, cuando sumas dos numeros, los numeros son el operando y "+" es el operador.

+ +

Aprende mas

+ + diff --git a/files/es/glossary/operando/index.html b/files/es/glossary/operando/index.html deleted file mode 100644 index 6a198905e3..0000000000 --- a/files/es/glossary/operando/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Operando -slug: Glossary/Operando -tags: - - Codificación - - Glosario -translation_of: Glossary/Operand ---- -

Un operando es la parte de una instruccion que representa los datos manipulados por el {{glossary("Operator")}}. por ejemplo, cuando sumas dos numeros, los numeros son el operando y "+" es el operador.

- -

Aprende mas

- - diff --git a/files/es/glossary/operator/index.html b/files/es/glossary/operator/index.html new file mode 100644 index 0000000000..0385f67830 --- /dev/null +++ b/files/es/glossary/operator/index.html @@ -0,0 +1,17 @@ +--- +title: Operador +slug: Glossary/Operador +tags: + - Glosario + - Scripting +translation_of: Glossary/Operator +--- +

Parte de la sintaxis reservada consistente en signos de puntuación o carácteres alfanuméricos que tienen funcionalidades incorporadas. Por ejemplo, "+" indica el operador suma y "!" indica el operador "not" (negación).

+ +

Aprende más

+ +

Referencias técnicas

+ + diff --git a/files/es/glossary/pila_llamadas/index.html b/files/es/glossary/pila_llamadas/index.html deleted file mode 100644 index f164d913ca..0000000000 --- a/files/es/glossary/pila_llamadas/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Pila de llamadas -slug: Glossary/Pila_llamadas -tags: - - Glosario - - JavaScript - - Pila de llamadas -translation_of: Glossary/Call_stack ---- -

Una pila de llamadas es un mecanismo para que un intérprete (como el intérprete de JavaScript en un navegador web) realice un seguimiento de en que lugar se llama a múltiples {{glossary("function","funciones")}}, qué función se esta ejecutando actualmente y qué funciones son llamadas desde esa función, etc.

- - - -

Ejemplo

- -
function saludar() {
-   // [1] Código
-   diHola();
-   // [2] Código
-}
-function diHola() {
-   return "!Hola!";
-}
-
-// Invocar la función `saludar`
-saludar();
-
-// [3] Código
-
- -

El código del ejemplo se ejecutaría de la siguiente manera:

- -
    -
  1. Ignora todas las funciones hasta que alcanza la invocación de la función saludar().
    2. -
  2. Añade la función saludar() a la lista de la pila de llamadas. -
    -

    Lista de la pila de llamadas:
    - - saludar

    -
    -
    3. -
  3. Ejecuta todas las líneas de código de dentro de la función saludar().
    4. -
  4. Llega a la incovación de la función diHola().
    5. -
  5. Añade la función diHola() a la lista de la pila de llamadas. -
    -

    Lista de la pila de llamadas:
    - - saludar
    - - diHola

    -
    -
    6. -
  6. Ejecuta todas las líneas de código de dentro de la función diHola() hasta que llega al final.
    7. -
  7. Devuelve la ejecución a la línea que invocó a la función diHola() y continua con la ejecuación del resto de código de la función saludar().
    8. -
  8. Elimina la función diHola() de la lista de la pila de llamadas. -
    -

    Lista de la pila de llamadas:
    - - saludar

    -
    -
    9. -
  9. Cuando todo el código dentro de la función saludar() ha sido ejecutado, vuelve a la línea que la invocó y continua ejecutando el resto de código JavaScript.
    10. -
  10. Elimina la función saludar() de la lista de la pila de llamadas. -
    -

    Lista de la pila de llamadas:
    - VACÍA

    -
    -
    11. -
- -

En resumen, empezamos con una lista de la pila llamadas vacía. Cuando invocamos una función, ésta es automáticamente añadida a la pila de llamadas. Una vez ha ejecutado todo su código, también de manera automática es eliminada de la pila de llamadas. Finalmente, la pila de llamadas vuelve a estar vacía.

- -

Saber más

- -

Conocimiento general

- - - - diff --git a/files/es/glossary/plaintext/index.html b/files/es/glossary/plaintext/index.html new file mode 100644 index 0000000000..2c76ac8212 --- /dev/null +++ b/files/es/glossary/plaintext/index.html @@ -0,0 +1,14 @@ +--- +title: Texto Simple +slug: Glossary/TextoSimple +tags: + - Cryptography + - Glossary + - Security +translation_of: Glossary/Plaintext +--- +

Texto simple se refiere a la información que se está utilizando como entrada para un {{Glossary("algorithm", "algoritmo")}} de {{Glossary("encryption","cifrado")}}, o para el {{Glossary("ciphertext", "texto cifrado")}} que se ha descifrado.

+ +

Con frecuencia se usa indistintamente con el término texto claro, que se refiere de manera más general a cualquier información, como un documento de texto, una imagen, etc., que no se haya cifrado y que un humano o una computadora puedan leer sin procesamiento adicional.

+ +

 

diff --git a/files/es/glossary/preflight_peticion/index.html b/files/es/glossary/preflight_peticion/index.html deleted file mode 100644 index 6bd66f555a..0000000000 --- a/files/es/glossary/preflight_peticion/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Preflight petición -slug: Glossary/Preflight_peticion -translation_of: Glossary/Preflight_request ---- -

Una petición preflight CORS es una petición CORS realizada para comprobar si el protocolo {{Glossary("CORS")}} es comprendido.

- -

Es una petición {{HTTPMethod("OPTIONS")}}, que emplea tres cabeceras HTTP: {{HTTPHeader("Access-Control-Request-Method")}}, {{HTTPHeader("Access-Control-Request-Headers")}}, y la cabecera {{HTTPHeader("Origin")}} .

- -

Las peticiones preflight se lanzan automáticamente desde el navegador cuando son necesarias. Normalmente los desarrolladores front-end no necesitan realizar estas peticiones manualmente.

- -

Por ejemplo, un cliente puede preguntar si el servidor permite una petición {{HTTPMethod("DELETE")}} antes de enviar la petición DELETE usando una petición preflight:

- -
OPTIONS /resource/foo
-Access-Control-Request-Method: DELETE
-Access-Control-Request-Headers: origin, x-requested-with
-Origin: https://foo.bar.org
- -

Si el servidor lo permite responderá a la petición preflight con una cabecera de respuesta {{HTTPHeader("Access-Control-Allow-Methods")}} que incluirá el método DELETE:

- -
HTTP/1.1 200 OK
-Content-Length: 0
-Connection: keep-alive
-Access-Control-Allow-Origin: https://foo.bar.org
-Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
-Access-Control-Max-Age: 86400
- -

See also

- - diff --git a/files/es/glossary/preflight_request/index.html b/files/es/glossary/preflight_request/index.html new file mode 100644 index 0000000000..6bd66f555a --- /dev/null +++ b/files/es/glossary/preflight_request/index.html @@ -0,0 +1,33 @@ +--- +title: Preflight petición +slug: Glossary/Preflight_peticion +translation_of: Glossary/Preflight_request +--- +

Una petición preflight CORS es una petición CORS realizada para comprobar si el protocolo {{Glossary("CORS")}} es comprendido.

+ +

Es una petición {{HTTPMethod("OPTIONS")}}, que emplea tres cabeceras HTTP: {{HTTPHeader("Access-Control-Request-Method")}}, {{HTTPHeader("Access-Control-Request-Headers")}}, y la cabecera {{HTTPHeader("Origin")}} .

+ +

Las peticiones preflight se lanzan automáticamente desde el navegador cuando son necesarias. Normalmente los desarrolladores front-end no necesitan realizar estas peticiones manualmente.

+ +

Por ejemplo, un cliente puede preguntar si el servidor permite una petición {{HTTPMethod("DELETE")}} antes de enviar la petición DELETE usando una petición preflight:

+ +
OPTIONS /resource/foo
+Access-Control-Request-Method: DELETE
+Access-Control-Request-Headers: origin, x-requested-with
+Origin: https://foo.bar.org
+ +

Si el servidor lo permite responderá a la petición preflight con una cabecera de respuesta {{HTTPHeader("Access-Control-Allow-Methods")}} que incluirá el método DELETE:

+ +
HTTP/1.1 200 OK
+Content-Length: 0
+Connection: keep-alive
+Access-Control-Allow-Origin: https://foo.bar.org
+Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
+Access-Control-Max-Age: 86400
+ +

See also

+ + diff --git a/files/es/glossary/preprocesador_css/index.html b/files/es/glossary/preprocesador_css/index.html deleted file mode 100644 index 7304385604..0000000000 --- a/files/es/glossary/preprocesador_css/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Preprocesador CSS -slug: Glossary/Preprocesador_CSS -translation_of: Glossary/CSS_preprocessor ---- -

Un preprocesador CSS es un programa que te permite generar {{Glossary("CSS")}} a partir de la {{Glossary("syntax")}} única del preprocesador. Existen varios preprocesadores CSS de los cuales escoger, sin embargo la mayoría de preprocesadores CSS añadiran algunas características que no existen en CSS puro, como {{Glossary("variable")}}, mixins, selectores anidados, entre otros. Estas características hacen la estructura de CSS más legible y fácil de mantener.

- -

Para utilizar un preprocesador CSS debes instalar un compilador CSS en tu web  {{Glossary("server")}}.

- -

Aprende más

- -

Conocimiento general

- -

Estos son algunos de lo preprocesadores CSS más populares:

- - diff --git a/files/es/glossary/primitive/index.html b/files/es/glossary/primitive/index.html new file mode 100644 index 0000000000..1966a23803 --- /dev/null +++ b/files/es/glossary/primitive/index.html @@ -0,0 +1,125 @@ +--- +title: Primitivo +slug: Glossary/Primitivo +tags: + - CodingScripting + - Glosario + - JavaScript +translation_of: Glossary/Primitive +--- +

En {{Glossary("JavaScript")}}, un primitive (valor primitivo, tipo de dato primitivo) son datos que no son un {{Glossary("object", "objeto")}} y no tienen {{Glossary("method", "métodos")}}. Hay 6 tipos de datos primitivos: {{Glossary("string")}}, {{Glossary("number")}}, {{Glossary("bigint")}}, {{Glossary("boolean")}} , {{Glossary("undefined")}} y {{Glossary("symbol")}}. También hay {{Glossary("null")}}, que aparentemente es primitivo, pero de hecho es un caso especial para cada {{JSxRef("Object")}}: y cualquier tipo estructurado se deriva de null por la {{web.link("/es/docs/Learn/JavaScript/Objects/Inheritance", "Cadena de prototipos")}}.

+ +

La mayoría de las veces, un valor primitivo se representa directamente en el nivel más bajo de la implementación del lenguaje.

+ +

Todos los primitivos son inmutables, es decir, no se pueden modificar. Es importante no confundir un primitivo en sí mismo con un valor primitivo asignado a una variable. Se puede reasignar un nuevo valor a la variable, pero el valor existente no se puede cambiar de la misma forma en que se pueden modificar los objetos, los arreglos y las funciones.

+ +

Ejemplo

+ +

Este ejemplo te ayudará a comprender que los valores primitivos son inmutables.

+ +

JavaScript

+ +
// El uso de un método de cadena no modifica la cadena
+var bar = "baz";
+console.log(bar);               // baz
+bar.toUpperCase();
+console.log(bar);               // baz
+
+// El uso de un método de arreglo muta el arreglo
+var foo = [];
+console.log(foo);               // []
+foo.push("plugh");
+console.log(foo);               // ["plugh"]
+
+// La asignación le da al primitivo un nuevo valor (no lo muta)
+bar = bar.toUpperCase();       // BAZ
+
+ +

Un primitivo se puede reemplazar, pero no se puede modificar directamente.

+ +

Otro ejemplo [paso a paso]

+ +

El siguiente ejemplo te ayudará a analizar cómo se ocupa JavaScript de los primitivos.

+ +

JavaScript

+ +
// El primitivo
+let foo = 5;
+
+// Define una función que debería cambiar el valor primitivo
+function addTwo(num) {
+   num += 2;
+}
+// Otra función que intenta hacer lo mismo
+function addTwo_v2(foo) {
+   foo += 2;
+}
+
+// Llama a tu primera función mientras pasas el primitivo como argumento
+addTwo(foo);
+// Obtiene el valor primitivo actual
+console.log(foo);   // 5
+
+// Intenta de nuevo con tu segunda función...
+addTwo_v2(foo);
+console.log(foo);   // 5
+
+ +

¿Esperaba que fuera 7 en lugar de 5?, si es así, lee cómo se ejecuta este código:

+ + + +

Es por eso que los primitivos son inmutables: en lugar de cambiarlos directamente, modificas una copia, sin afectar el original.

+ +

Envolturas de objetos primitivos en JavaScript

+ +

A excepción de null y undefined, todos los valores primitivos tienen objetos equivalentes que envuelven los valores primitivos:

+ + + +

El método {{JSxRef("Objetos_globales/Object/valueOf"," valueOf()")}} del contenedor devuelve el valor primitivo.

+ +

Aprende más

+ +

Conocimientos generales

+ + + + diff --git a/files/es/glossary/primitivo/index.html b/files/es/glossary/primitivo/index.html deleted file mode 100644 index 1966a23803..0000000000 --- a/files/es/glossary/primitivo/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Primitivo -slug: Glossary/Primitivo -tags: - - CodingScripting - - Glosario - - JavaScript -translation_of: Glossary/Primitive ---- -

En {{Glossary("JavaScript")}}, un primitive (valor primitivo, tipo de dato primitivo) son datos que no son un {{Glossary("object", "objeto")}} y no tienen {{Glossary("method", "métodos")}}. Hay 6 tipos de datos primitivos: {{Glossary("string")}}, {{Glossary("number")}}, {{Glossary("bigint")}}, {{Glossary("boolean")}} , {{Glossary("undefined")}} y {{Glossary("symbol")}}. También hay {{Glossary("null")}}, que aparentemente es primitivo, pero de hecho es un caso especial para cada {{JSxRef("Object")}}: y cualquier tipo estructurado se deriva de null por la {{web.link("/es/docs/Learn/JavaScript/Objects/Inheritance", "Cadena de prototipos")}}.

- -

La mayoría de las veces, un valor primitivo se representa directamente en el nivel más bajo de la implementación del lenguaje.

- -

Todos los primitivos son inmutables, es decir, no se pueden modificar. Es importante no confundir un primitivo en sí mismo con un valor primitivo asignado a una variable. Se puede reasignar un nuevo valor a la variable, pero el valor existente no se puede cambiar de la misma forma en que se pueden modificar los objetos, los arreglos y las funciones.

- -

Ejemplo

- -

Este ejemplo te ayudará a comprender que los valores primitivos son inmutables.

- -

JavaScript

- -
// El uso de un método de cadena no modifica la cadena
-var bar = "baz";
-console.log(bar);               // baz
-bar.toUpperCase();
-console.log(bar);               // baz
-
-// El uso de un método de arreglo muta el arreglo
-var foo = [];
-console.log(foo);               // []
-foo.push("plugh");
-console.log(foo);               // ["plugh"]
-
-// La asignación le da al primitivo un nuevo valor (no lo muta)
-bar = bar.toUpperCase();       // BAZ
-
- -

Un primitivo se puede reemplazar, pero no se puede modificar directamente.

- -

Otro ejemplo [paso a paso]

- -

El siguiente ejemplo te ayudará a analizar cómo se ocupa JavaScript de los primitivos.

- -

JavaScript

- -
// El primitivo
-let foo = 5;
-
-// Define una función que debería cambiar el valor primitivo
-function addTwo(num) {
-   num += 2;
-}
-// Otra función que intenta hacer lo mismo
-function addTwo_v2(foo) {
-   foo += 2;
-}
-
-// Llama a tu primera función mientras pasas el primitivo como argumento
-addTwo(foo);
-// Obtiene el valor primitivo actual
-console.log(foo);   // 5
-
-// Intenta de nuevo con tu segunda función...
-addTwo_v2(foo);
-console.log(foo);   // 5
-
- -

¿Esperaba que fuera 7 en lugar de 5?, si es así, lee cómo se ejecuta este código:

- - - -

Es por eso que los primitivos son inmutables: en lugar de cambiarlos directamente, modificas una copia, sin afectar el original.

- -

Envolturas de objetos primitivos en JavaScript

- -

A excepción de null y undefined, todos los valores primitivos tienen objetos equivalentes que envuelven los valores primitivos:

- - - -

El método {{JSxRef("Objetos_globales/Object/valueOf"," valueOf()")}} del contenedor devuelve el valor primitivo.

- -

Aprende más

- -

Conocimientos generales

- - - - diff --git a/files/es/glossary/property/index.html b/files/es/glossary/property/index.html new file mode 100644 index 0000000000..07eae32e78 --- /dev/null +++ b/files/es/glossary/property/index.html @@ -0,0 +1,11 @@ +--- +title: Propiedad +slug: Glossary/propiedad +tags: + - Desambiguación + - Glosario +translation_of: Glossary/property +--- +

El término propiedad puede tener varios significados según el contexto. Se puede referir a:

+ +

\{{GlossaryDisambiguation}}

diff --git a/files/es/glossary/propiedad/index.html b/files/es/glossary/propiedad/index.html deleted file mode 100644 index 07eae32e78..0000000000 --- a/files/es/glossary/propiedad/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Propiedad -slug: Glossary/propiedad -tags: - - Desambiguación - - Glosario -translation_of: Glossary/property ---- -

El término propiedad puede tener varios significados según el contexto. Se puede referir a:

- -

\{{GlossaryDisambiguation}}

diff --git a/files/es/glossary/pseudo-clase/index.html b/files/es/glossary/pseudo-clase/index.html deleted file mode 100644 index b3984258d3..0000000000 --- a/files/es/glossary/pseudo-clase/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Pseudo-clase -slug: Glossary/Pseudo-clase -tags: - - CSS - - Glosario - - Pseudo-clase - - Selector - - Selectores -translation_of: Glossary/Pseudo-class ---- -

En CSS, un selector de pseudo-clase apunta a elementos dependiendo de su estado en lugar de en su información en el arbol del documento. Por ejemplo, el selector a{{ cssxref(":visited") }} aplica estilos solamente a los links que el usuario ha visitado.

- -

Aprender más

- -

Referencía técnica

- - diff --git a/files/es/glossary/pseudo-class/index.html b/files/es/glossary/pseudo-class/index.html new file mode 100644 index 0000000000..b3984258d3 --- /dev/null +++ b/files/es/glossary/pseudo-class/index.html @@ -0,0 +1,20 @@ +--- +title: Pseudo-clase +slug: Glossary/Pseudo-clase +tags: + - CSS + - Glosario + - Pseudo-clase + - Selector + - Selectores +translation_of: Glossary/Pseudo-class +--- +

En CSS, un selector de pseudo-clase apunta a elementos dependiendo de su estado en lugar de en su información en el arbol del documento. Por ejemplo, el selector a{{ cssxref(":visited") }} aplica estilos solamente a los links que el usuario ha visitado.

+ +

Aprender más

+ +

Referencía técnica

+ + diff --git a/files/es/glossary/pseudocode/index.html b/files/es/glossary/pseudocode/index.html new file mode 100644 index 0000000000..7a68d05ecb --- /dev/null +++ b/files/es/glossary/pseudocode/index.html @@ -0,0 +1,18 @@ +--- +title: Pseudocódigo +slug: Glossary/Pseudocódigo +tags: + - CodingScripting + - Glosario + - Pseudocódigo +translation_of: Glossary/Pseudocode +--- +

El pseudocódigo se refiere a la sintaxis del código que generalmente se usa para indicar a los humanos cómo funciona dicho código, o para ilustrar el diseño de un elemento. No funcionará si intentas ejecutarlo como código.

+ +

Saber más

+ +

Conocimientos generales

+ + diff --git "a/files/es/glossary/pseudoc\303\263digo/index.html" "b/files/es/glossary/pseudoc\303\263digo/index.html" deleted file mode 100644 index 7a68d05ecb..0000000000 --- "a/files/es/glossary/pseudoc\303\263digo/index.html" +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Pseudocódigo -slug: Glossary/Pseudocódigo -tags: - - CodingScripting - - Glosario - - Pseudocódigo -translation_of: Glossary/Pseudocode ---- -

El pseudocódigo se refiere a la sintaxis del código que generalmente se usa para indicar a los humanos cómo funciona dicho código, o para ilustrar el diseño de un elemento. No funcionará si intentas ejecutarlo como código.

- -

Saber más

- -

Conocimientos generales

- - diff --git a/files/es/glossary/recursion/index.html b/files/es/glossary/recursion/index.html new file mode 100644 index 0000000000..866ba64a33 --- /dev/null +++ b/files/es/glossary/recursion/index.html @@ -0,0 +1,18 @@ +--- +title: Recursión +slug: Glossary/Recursión +tags: + - CodingScripting + - Glosario +translation_of: Glossary/Recursion +--- +

Es el acto de una función llamándose a sí misma. La recursión es utilizada para resolver problemas que contienen subproblemas más pequeños. Una función recursiva puede recibir 2 entradas: un caso base (finaliza la recursión) o un un caso recursivo (continúa la recursión).

+ +

Saber más

+ +

Conocimiento general

+ + diff --git "a/files/es/glossary/recursi\303\263n/index.html" "b/files/es/glossary/recursi\303\263n/index.html" deleted file mode 100644 index 866ba64a33..0000000000 --- "a/files/es/glossary/recursi\303\263n/index.html" +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Recursión -slug: Glossary/Recursión -tags: - - CodingScripting - - Glosario -translation_of: Glossary/Recursion ---- -

Es el acto de una función llamándose a sí misma. La recursión es utilizada para resolver problemas que contienen subproblemas más pequeños. Una función recursiva puede recibir 2 entradas: un caso base (finaliza la recursión) o un un caso recursivo (continúa la recursión).

- -

Saber más

- -

Conocimiento general

- - diff --git a/files/es/glossary/safe/index.html b/files/es/glossary/safe/index.html new file mode 100644 index 0000000000..f5c1c42763 --- /dev/null +++ b/files/es/glossary/safe/index.html @@ -0,0 +1,40 @@ +--- +title: Seguro +slug: Glossary/seguro +translation_of: Glossary/safe +--- +

Un método  HTTP es seguro cuando no altera el estado del servidor. En otras palabras, un método HTTP es seguro solo cuando ejecuta una operación de lectura. Todos los métodos seguros también son {{glossary("idempotent")}} así como algunos, pero no todos, métodos inseguros como {{HTTPMethod("PUT")}}, o {{HTTPMethod("DELETE")}}.

+ +

Incluso si los métodos seguros tienen una semántica de solo lectura, los servidores pueden alterar su estado: por ejemplo, pueden registrar o mantener estadísticas. Lo importante aquí es que al llamar a un método seguro, el cliente no solicita ningún cambio en el servidor y, por lo tanto, no creará una carga o carga innecesaria para el servidor. Los navegadores pueden llamar a métodos seguros sin temor a causar ningún daño al servidor: esto les permite realizar actividades como la búsqueda previa sin riesgos. Los rastreadores web también confían en llamar a métodos seguros.

+ +

Los métodos seguros no solo sirven archivos estáticos; un servidor puede generar una respuesta a un método seguro sobre la marcha, siempre que el script de generación garantice la seguridad: no debe desencadenar efectos externos, como desencadenar un pedido en un sitio web de comercio electrónico.

+ +

Es responsabilidad de la aplicación en el servidor implementar la semántica segura correctamente, el propio servidor web, ya sea Apache, nginx o IIS, no puede imponerlo por sí mismo. En particular, una aplicación no debe permitir que {{HTTPMethod("GET")}} solicite alterar su estado.

+ +

Una petición de un método seguro, no cambia ningún estado en el servidor:

+ +
GET /pageX.html HTTP/1.1
+
+ +

Una petición de un método inseguro, puede cambiar el estado en el servidor:

+ +
POST /pageX.html HTTP/1.1
+ +

Una petición de un método idempotente pero no seguro:

+ +
DELETE /idX/delete HTTP/1.1
+ +

Vea también

+ +

Conocimientos generales

+ + + +

Conocimientos técnicos

+ + diff --git a/files/es/glossary/scm/index.html b/files/es/glossary/scm/index.html new file mode 100644 index 0000000000..be400de190 --- /dev/null +++ b/files/es/glossary/scm/index.html @@ -0,0 +1,20 @@ +--- +title: SCV +slug: Glossary/SCV +tags: + - CodingScripting + - Glosario + - SCV +translation_of: Glossary/SCM +--- +

Un SCV (sistema de control de versiones) es un sistema para gestionar código fuente. Normalmente se refiere al uso de software para manejar versiones de ficheros fuente. Un programador puede modificar ficheros de código fuente sin miedo a eliminar código que funciona, porque un SCV realiza un seguimiento de cómo el código fuente ha cambiado y quién ha realizado los cambios.

+ +

Algunos sistemas SCV son CVS, SVN y Git.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/scv/index.html b/files/es/glossary/scv/index.html deleted file mode 100644 index be400de190..0000000000 --- a/files/es/glossary/scv/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: SCV -slug: Glossary/SCV -tags: - - CodingScripting - - Glosario - - SCV -translation_of: Glossary/SCM ---- -

Un SCV (sistema de control de versiones) es un sistema para gestionar código fuente. Normalmente se refiere al uso de software para manejar versiones de ficheros fuente. Un programador puede modificar ficheros de código fuente sin miedo a eliminar código que funciona, porque un SCV realiza un seguimiento de cómo el código fuente ha cambiado y quién ha realizado los cambios.

- -

Algunos sistemas SCV son CVS, SVN y Git.

- -

Saber más

- -

Conocimiento general

- - diff --git a/files/es/glossary/seguro/index.html b/files/es/glossary/seguro/index.html deleted file mode 100644 index f5c1c42763..0000000000 --- a/files/es/glossary/seguro/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Seguro -slug: Glossary/seguro -translation_of: Glossary/safe ---- -

Un método  HTTP es seguro cuando no altera el estado del servidor. En otras palabras, un método HTTP es seguro solo cuando ejecuta una operación de lectura. Todos los métodos seguros también son {{glossary("idempotent")}} así como algunos, pero no todos, métodos inseguros como {{HTTPMethod("PUT")}}, o {{HTTPMethod("DELETE")}}.

- -

Incluso si los métodos seguros tienen una semántica de solo lectura, los servidores pueden alterar su estado: por ejemplo, pueden registrar o mantener estadísticas. Lo importante aquí es que al llamar a un método seguro, el cliente no solicita ningún cambio en el servidor y, por lo tanto, no creará una carga o carga innecesaria para el servidor. Los navegadores pueden llamar a métodos seguros sin temor a causar ningún daño al servidor: esto les permite realizar actividades como la búsqueda previa sin riesgos. Los rastreadores web también confían en llamar a métodos seguros.

- -

Los métodos seguros no solo sirven archivos estáticos; un servidor puede generar una respuesta a un método seguro sobre la marcha, siempre que el script de generación garantice la seguridad: no debe desencadenar efectos externos, como desencadenar un pedido en un sitio web de comercio electrónico.

- -

Es responsabilidad de la aplicación en el servidor implementar la semántica segura correctamente, el propio servidor web, ya sea Apache, nginx o IIS, no puede imponerlo por sí mismo. En particular, una aplicación no debe permitir que {{HTTPMethod("GET")}} solicite alterar su estado.

- -

Una petición de un método seguro, no cambia ningún estado en el servidor:

- -
GET /pageX.html HTTP/1.1
-
- -

Una petición de un método inseguro, puede cambiar el estado en el servidor:

- -
POST /pageX.html HTTP/1.1
- -

Una petición de un método idempotente pero no seguro:

- -
DELETE /idX/delete HTTP/1.1
- -

Vea también

- -

Conocimientos generales

- - - -

Conocimientos técnicos

- - diff --git a/files/es/glossary/sentencias/index.html b/files/es/glossary/sentencias/index.html deleted file mode 100644 index 501478a820..0000000000 --- a/files/es/glossary/sentencias/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Sentencias -slug: Glossary/Sentencias -tags: - - Glosario - - Principiante -translation_of: Glossary/Statement ---- -

En un lenguaje de programación, una sentencia es una línea de código al mando de una tarea Cada programa consiste en una secuencia de sentencias.

- -

Aprender más

- -

Referencia técnica

- - - -

Conocimientos generales

- - diff --git a/files/es/glossary/sincronico/index.html b/files/es/glossary/sincronico/index.html deleted file mode 100644 index cfe10edd6f..0000000000 --- a/files/es/glossary/sincronico/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Sincrónico -slug: Glossary/Sincronico -tags: - - Glosario - - Mecánicas - - Web - - WebMechanics -translation_of: Glossary/Synchronous ---- -

Sincrónico se refiere a la comunicación en tiempo real donde cada lado recibe (y si es necesario, procesa y responde) mensajes instantáneamente (o lo más cerca posible a instantáneamente).

- -

Un ejemplo humano es el teléfono — durante una llamada telefónica tiendes a responder a la otra persona inmediatamente.

- -

Muchos comandos de programación son también sincrónicos — por ejemplo cuando escribes en una calculadora, el entorno te devolverá el resultado instantáneamente, a menos que lo programes para no hacerlo.

- -

Aprende más

- -

Referencias técnicas

- - diff --git a/files/es/glossary/sistema_gestion_contenidos/index.html b/files/es/glossary/sistema_gestion_contenidos/index.html deleted file mode 100644 index e4a67f504b..0000000000 --- a/files/es/glossary/sistema_gestion_contenidos/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Sistema de gestión de contenidos -slug: Glossary/Sistema_gestion_contenidos -tags: - - CMS - - Glosario - - Sistema de gestión de contenidos -translation_of: Glossary/CMS ---- -

Un sistema de gestión de contenidos o CMS es un programa informático que permite a los usuarios publicar, organizar, cambiar o eliminar diferentes tipos de contenido como texto, imágenes incrustadas, video, audio y código interactivo.

- -

Saber más

- -

Conocimiento general

- - diff --git a/files/es/glossary/speculative_parsing/index.html b/files/es/glossary/speculative_parsing/index.html new file mode 100644 index 0000000000..6509450cf9 --- /dev/null +++ b/files/es/glossary/speculative_parsing/index.html @@ -0,0 +1,34 @@ +--- +title: Optimizar sus páginas para análisis especulativo +slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing +tags: + - Avanzado + - Desarrollo web + - HTML + - HTML5 +translation_of: Glossary/speculative_parsing +--- +

Tradicionalmente en los navegadores el analizador de HTML corre en el hilo de ejecución principal y se queda bloqueado después de una etiqueta </script> hasta que el código se haya recuperado y ejecutado. El analizador de HTML de Firefox 4 y posteriores soporta análisis especulativo fuera del hilo de ejecución principal. Este analiza anticipadamente mientras el codigo está siendo descargado y ejecutado. Como en Firefox 3.5 y 3.6, el analizador de HTML es el que inicia la carga especulativa de código, las hojas de estilos y las imagenes que va encontrando en el flujo de la página. Sin embargo en Firefox 4 y posteriores el analizador de HTML también ejecuta el algoritmo especulativo de la construcción del árbol HTML. La ventaja es que cuando lo especulado tiene exito, no hay necesidad de reanalizar la parte del archivo de entrada que ya fue analizada junto la descarga de código,  hojas de estilo y las imágenes. La desventaja es que se ha realizado un trabajo inútil cuando la especulación fracasa.

+ +

Este documento le ayuda a evitar este tipo de situaciones que hacen que la especulación falle y ralentize la carga de la página.

+ +

Haciendo cargas especulativas exitosas

+ +

Hay solo una regla para hacer cargas especulativas exitosas en scripts enlazados, hojas de estilo e imagenes:

+ + + +

Evitando perder la salida del generador de arbol

+ +

La generación de árbol especulativo falla cuando document.write() cambia el estado del generador de árbol de tal manera que el estado especulativo después del tag </script> no se mantiene cuando todo el contenido es inertado por document.write() ha sido analizado. Sin embargo, sólo usos inusuales de document.write() causa problemas. Aquí están las cosas a evitar:

+ + diff --git a/files/es/glossary/statement/index.html b/files/es/glossary/statement/index.html new file mode 100644 index 0000000000..501478a820 --- /dev/null +++ b/files/es/glossary/statement/index.html @@ -0,0 +1,23 @@ +--- +title: Sentencias +slug: Glossary/Sentencias +tags: + - Glosario + - Principiante +translation_of: Glossary/Statement +--- +

En un lenguaje de programación, una sentencia es una línea de código al mando de una tarea Cada programa consiste en una secuencia de sentencias.

+ +

Aprender más

+ +

Referencia técnica

+ + + +

Conocimientos generales

+ + diff --git a/files/es/glossary/static_typing/index.html b/files/es/glossary/static_typing/index.html new file mode 100644 index 0000000000..161ab31c61 --- /dev/null +++ b/files/es/glossary/static_typing/index.html @@ -0,0 +1,18 @@ +--- +title: Tipificación estática +slug: Glossary/Tipificación_estática +tags: + - CodingScripting + - Glossary + - Type +translation_of: Glossary/Static_typing +--- +

Un lenguaje de tipo estático es un lenguaje (como Java, C, o C++) en donde los tipos de variables se conocen en tiempo de compilación. En la mayoria de estos lenguajes, los tipos deben ser expresamente indicados por el programador; en otros casos (como en OCaml), la inferencia de tipos permite al programador no indicar sus tipos de variables.

+ +

Learn more

+ +

General knowledge

+ + diff --git a/files/es/glossary/synchronous/index.html b/files/es/glossary/synchronous/index.html new file mode 100644 index 0000000000..cfe10edd6f --- /dev/null +++ b/files/es/glossary/synchronous/index.html @@ -0,0 +1,24 @@ +--- +title: Sincrónico +slug: Glossary/Sincronico +tags: + - Glosario + - Mecánicas + - Web + - WebMechanics +translation_of: Glossary/Synchronous +--- +

Sincrónico se refiere a la comunicación en tiempo real donde cada lado recibe (y si es necesario, procesa y responde) mensajes instantáneamente (o lo más cerca posible a instantáneamente).

+ +

Un ejemplo humano es el teléfono — durante una llamada telefónica tiendes a responder a la otra persona inmediatamente.

+ +

Muchos comandos de programación son también sincrónicos — por ejemplo cuando escribes en una calculadora, el entorno te devolverá el resultado instantáneamente, a menos que lo programes para no hacerlo.

+ +

Aprende más

+ +

Referencias técnicas

+ + diff --git a/files/es/glossary/textocifrado/index.html b/files/es/glossary/textocifrado/index.html deleted file mode 100644 index 65315ab297..0000000000 --- a/files/es/glossary/textocifrado/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Texto Cifrado -slug: Glossary/TextoCifrado -tags: - - Cryptography - - Glossary - - Privacy - - Security -translation_of: Glossary/Ciphertext ---- -

En {{glossary("Cryptography", "Criptografía")}}, un texto cifrado es un mensaje codificado que transmite información pero no es legible a menos que se {{glossary("decryption","descifre")}} con el {{glossary("cipher", "algoritmo criptográfico")}} correcto y el secreto correcto (generalmente una {{glossary("key","clave")}}), reproduciendo el {{glossary("cleartext", "texto simple")}} original. La seguridad de un texto cifrado, y por lo tanto el secreto de la información contenida, depende de usar un cifrado seguro y mantener la clave en secreto.

- -

Saber más

- -

Conocimiento general

- - diff --git a/files/es/glossary/textosimple/index.html b/files/es/glossary/textosimple/index.html deleted file mode 100644 index 2c76ac8212..0000000000 --- a/files/es/glossary/textosimple/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Texto Simple -slug: Glossary/TextoSimple -tags: - - Cryptography - - Glossary - - Security -translation_of: Glossary/Plaintext ---- -

Texto simple se refiere a la información que se está utilizando como entrada para un {{Glossary("algorithm", "algoritmo")}} de {{Glossary("encryption","cifrado")}}, o para el {{Glossary("ciphertext", "texto cifrado")}} que se ha descifrado.

- -

Con frecuencia se usa indistintamente con el término texto claro, que se refiere de manera más general a cualquier información, como un documento de texto, una imagen, etc., que no se haya cifrado y que un humano o una computadora puedan leer sin procesamiento adicional.

- -

 

diff --git "a/files/es/glossary/tipado_din\303\241mico/index.html" "b/files/es/glossary/tipado_din\303\241mico/index.html" deleted file mode 100644 index c8ee61a087..0000000000 --- "a/files/es/glossary/tipado_din\303\241mico/index.html" +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Tipado Dinámico -slug: Glossary/Tipado_dinámico -tags: - - Código - - Glosario - - LenguajeDeProgramación -translation_of: Glossary/Dynamic_typing ---- -

Los lenguajes de tipado dinámico son aquellos (como {{glossary("JavaScript")}}) donde el intérprete asigna a las {{glossary("variable","variables")}} un {{glossary("tipo")}} durante el tiempo de ejecución basado en su {{glossary("valor")}} en ese momento.

- -

Ver más

- -

Conoce sobre el tema

- - - -

Conocimientos generales

- - diff --git "a/files/es/glossary/tipificaci\303\263n_est\303\241tica/index.html" "b/files/es/glossary/tipificaci\303\263n_est\303\241tica/index.html" deleted file mode 100644 index 161ab31c61..0000000000 --- "a/files/es/glossary/tipificaci\303\263n_est\303\241tica/index.html" +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Tipificación estática -slug: Glossary/Tipificación_estática -tags: - - CodingScripting - - Glossary - - Type -translation_of: Glossary/Static_typing ---- -

Un lenguaje de tipo estático es un lenguaje (como Java, C, o C++) en donde los tipos de variables se conocen en tiempo de compilación. En la mayoria de estos lenguajes, los tipos deben ser expresamente indicados por el programador; en otros casos (como en OCaml), la inferencia de tipos permite al programador no indicar sus tipos de variables.

- -

Learn more

- -

General knowledge

- - diff --git a/files/es/glossary/type_coercion/index.html b/files/es/glossary/type_coercion/index.html new file mode 100644 index 0000000000..02721fad10 --- /dev/null +++ b/files/es/glossary/type_coercion/index.html @@ -0,0 +1,22 @@ +--- +title: Coerción +slug: Glossary/coercion +translation_of: Glossary/Type_coercion +--- +

La coerción es la conversión automática o implicita de valores de un tipo de dato a otro (Ejemplo: de cadena de texto a número). La conversión es similar a la coerción porque ambas convierten valores de un tipo de dato a otro pero con una diferencia clave - la coerción es implícita mientras que la conversión puede ser implícita o explícita.

+ +

Examples

+ +
const valor1 = '5';
+const valor2 = 9;
+let suma = valor1 + valor2;
+
+console.log(suma);
+ +

En el ejemplo anterior, JavaScript ha coercido el 9 de nùmero a cadena de texto y luego ha concatenado los dos valores resultando en una cadena de texto de 59. JavaScript tuvo la opción de coercer a cadena de texto o número y decidió usar número.

+ +

El compilador pudo haber coercido el 5 a un número y retornar el valor de 14, pero no lo hizo. Para retornar ese resultado, tendrías que convertir explícitamente el 5 a un número usando el método Number():

+ +
sumar = Number(valor1) + valor2
+ + diff --git a/files/es/glossary/ui/index.html b/files/es/glossary/ui/index.html new file mode 100644 index 0000000000..0b24558082 --- /dev/null +++ b/files/es/glossary/ui/index.html @@ -0,0 +1,19 @@ +--- +title: IU +slug: Glossary/IU +tags: + - Accesibilidad + - Diseño + - Glosario +translation_of: Glossary/UI +--- +

La Interfaz de Usuario (IU) es el medio que facilita la interacción entre el usuario y la máquina. En el campo de la informática, puede ser un teclado, un joystick, una pantalla, o un programa. En el caso del software, puede ser una entrada de línea de comandos, una página web, un formulario, o el front-end de cualquier aplicación.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/validador/index.html b/files/es/glossary/validador/index.html deleted file mode 100644 index 8b105054a9..0000000000 --- a/files/es/glossary/validador/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Validador -slug: Glossary/Validador -tags: - - Glosario - - Principiante - - Seguridad -translation_of: Glossary/Validator ---- -

Un validador es un programa que comprueba errores de sintaxis en el código. Las validadores pueden ser creados para cualquier formato o lenguaje, pero en este contexto se habla de herramientas que comprueban {{Glossary("HTML")}}, {{Glossary("CSS")}}, y {{Glossary("XML")}}.

- -

Saber más

- -

Conocimiento general

- - diff --git a/files/es/glossary/validator/index.html b/files/es/glossary/validator/index.html new file mode 100644 index 0000000000..8b105054a9 --- /dev/null +++ b/files/es/glossary/validator/index.html @@ -0,0 +1,19 @@ +--- +title: Validador +slug: Glossary/Validador +tags: + - Glosario + - Principiante + - Seguridad +translation_of: Glossary/Validator +--- +

Un validador es un programa que comprueba errores de sintaxis en el código. Las validadores pueden ser creados para cualquier formato o lenguaje, pero en este contexto se habla de herramientas que comprueban {{Glossary("HTML")}}, {{Glossary("CSS")}}, y {{Glossary("XML")}}.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/valor/index.html b/files/es/glossary/valor/index.html deleted file mode 100644 index d0d2cc2bf8..0000000000 --- a/files/es/glossary/valor/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Valor -slug: Glossary/Valor -tags: - - CodingScripting - - Glosario -translation_of: Glossary/Value ---- -
{{jsSidebar}}
- -

En el contexto de datos o un objeto {{Glossary("Wrapper", "wrapper")}} alrededor de esos datos, el valor es el {{Glossary("Primitive", "valor primitivo")}} que contiene el contenedor de objetos. En el contexto de una {{Glossary("Variable", "variable")}} o {{Glossary("Property", "property")}}, el El valor puede ser primitivo o {{Glossary("Object reference", "Referencia de objeto")}}.

- -

Aprende más

- -

Conocimientos generales

- - diff --git a/files/es/glossary/value/index.html b/files/es/glossary/value/index.html new file mode 100644 index 0000000000..d0d2cc2bf8 --- /dev/null +++ b/files/es/glossary/value/index.html @@ -0,0 +1,19 @@ +--- +title: Valor +slug: Glossary/Valor +tags: + - CodingScripting + - Glosario +translation_of: Glossary/Value +--- +
{{jsSidebar}}
+ +

En el contexto de datos o un objeto {{Glossary("Wrapper", "wrapper")}} alrededor de esos datos, el valor es el {{Glossary("Primitive", "valor primitivo")}} que contiene el contenedor de objetos. En el contexto de una {{Glossary("Variable", "variable")}} o {{Glossary("Property", "property")}}, el El valor puede ser primitivo o {{Glossary("Object reference", "Referencia de objeto")}}.

+ +

Aprende más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/whitespace/index.html b/files/es/glossary/whitespace/index.html new file mode 100644 index 0000000000..db6014deae --- /dev/null +++ b/files/es/glossary/whitespace/index.html @@ -0,0 +1,45 @@ +--- +title: Espacio en blanco +slug: Glossary/Espacio_en_blanco +tags: + - Glosario + - Gramática léxica + - espacioenblanco +translation_of: Glossary/Whitespace +--- +

El espacio en blanco es un conjunto de {{Glossary("Caracter", "caracteres")}} que se utiliza para mostrar espacios horizontales o verticales entre otros caracteres. A menudo se utilizan para separar fragmentos en {{Glossary("HTML")}}, {{Glossary("CSS")}}, {{Glossary("JavaScript")}} y otros lenguajes informáticos.Los caracteres de espacio en blanco y su uso varía de un lenguaje a otro.

+ +

En HTML

+ +

La HTML Living Standard especifica 5 caracteres ASCII como espacio en blanco: U+0009 TAB, U+000A LF, U+000C FF, U+000D CR y U+0020 ESPACIO. En forma de texto, se tratan como caracteres de espacio normal y los espacios en blanco secuenciales se contraen como un solo espacio en muchos casos (este comportamiento se puede cambiar mediante la propiedad CSS {{cssxref("white-space")}}. También se utilizan como separadores del nombre de un elemento y sus parámetros, nombres de clases, etc.

+ +

En JavaScript

+ +

La especificación del lenguaje ECMAScript® 2015 establece varios puntos de código Unicode como espacio en blanco: U+0009 CARACTERES de TABULACIÓN <TAB>, U+000B TABULACIÓN DE LÍNEA <VT>, U+000C FORM FEED <FF>, U+0020 ESPACIO <SP>, U+00A0 ESPACIO SIN ROTURA <NBSP>, U+FEFF ANCHO CERO NO -BREAK SPACE <ZWNBSP> y otra categoría “Zs” Cualquier otro punto de código Unicode “Separador, espacio” <USP>. Estos caracteres suelen ser innecesarios para la funcionalidad del código.

+ + diff --git a/files/es/glossary/xform/index.html b/files/es/glossary/xform/index.html deleted file mode 100644 index 6590baacdd..0000000000 --- a/files/es/glossary/xform/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: XForm -slug: Glossary/XForm -translation_of: Glossary/XForms ---- -

XForms es una norma para la creación de formularios web y el procesamiento de datos de formulario en formato  {{glossary("XML")}}. Actualmente ningún navegador soporta Xforms—sugerimos en su lugar utilizar los formularios en HTML5 forms.

- -

Saber más

- -

Referencia técnica

- - diff --git a/files/es/glossary/xforms/index.html b/files/es/glossary/xforms/index.html new file mode 100644 index 0000000000..6590baacdd --- /dev/null +++ b/files/es/glossary/xforms/index.html @@ -0,0 +1,14 @@ +--- +title: XForm +slug: Glossary/XForm +translation_of: Glossary/XForms +--- +

XForms es una norma para la creación de formularios web y el procesamiento de datos de formulario en formato  {{glossary("XML")}}. Actualmente ningún navegador soporta Xforms—sugerimos en su lugar utilizar los formularios en HTML5 forms.

+ +

Saber más

+ +

Referencia técnica

+ + diff --git a/files/es/glossary/xhtml/index.html b/files/es/glossary/xhtml/index.html new file mode 100644 index 0000000000..63e9c8b5e7 --- /dev/null +++ b/files/es/glossary/xhtml/index.html @@ -0,0 +1,33 @@ +--- +title: XHTML +slug: XHTML +tags: + - HTML + - Todas_las_Categorías + - XHTML + - XML +translation_of: Glossary/XHTML +--- +

+

XHTML es a XML como HTML es a SGML. Es decir, XHTML es un lenguaje de marcado que es similar al HTML, pero con un sintaxis más estricta. Dos versiones de XHTML han sido terminadas por el W3C: +

+ +

Actualmente se encuentra en desarrollo XHTML 2, con cambios significativos en el vocabulario de elementos. Para más información sobre XHTML, lea: +

+ +

Herramientas

+ +

Ver todas... +

Categorías +

Interwiki enlaces a otros idiomas +

+
+
+{{ languages( { "en": "en/XHTML", "fr": "fr/XHTML", "it": "it/XHTML", "ja": "ja/XHTML", "pl": "pl/XHTML", "pt": "pt/XHTML" } ) }} diff --git "a/files/es/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/index.html" "b/files/es/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/index.html" deleted file mode 100644 index b4510b3822..0000000000 --- "a/files/es/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/index.html" +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Guía para el desarrollador de agregados para Firefox -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/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/introducci\303\263n_a_las_extensiones/index.html" "b/files/es/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/introducci\303\263n_a_las_extensiones/index.html" deleted file mode 100644 index b925716b8b..0000000000 --- "a/files/es/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/introducci\303\263n_a_las_extensiones/index.html" +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: Introducción a las extensiones -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/gu\303\255a_para_la_migraci\303\263n_a_cat\303\241logo/index.html" "b/files/es/gu\303\255a_para_la_migraci\303\263n_a_cat\303\241logo/index.html" deleted file mode 100644 index 1c76c3bd88..0000000000 --- "a/files/es/gu\303\255a_para_la_migraci\303\263n_a_cat\303\241logo/index.html" +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Guía para la migración a catálogo -slug: Guía_para_la_migración_a_catálogo -tags: - - NeedsContent - - Places ---- -

{{ Fx_minversion_header(3) }} -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/herramientas/index.html b/files/es/herramientas/index.html deleted file mode 100644 index 4cde340000..0000000000 --- a/files/es/herramientas/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Herramientas -slug: Herramientas -tags: - - Herramientas - - para_revisar ---- -

 

- -

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/how_to_create_a_dom_tree/index.html b/files/es/how_to_create_a_dom_tree/index.html deleted file mode 100644 index 25546a1704..0000000000 --- a/files/es/how_to_create_a_dom_tree/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Cómo crear un DOM tree -slug: How_to_create_a_DOM_tree -translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree ---- -

 

-

Esta página describe cómo usar el API DOM Core en JavaScript para crear o modificar objetos DOM. Es aplicable a todas las aplicaciones basadas en Gecko (como Mozilla Firefox) cuyo código tenga privilegios (como las extensiones) y a las que no (páginas web).

-

Creación dinámica de un DOM tree

-

Considere el siguiente documento XML:

-
<?xml version="1.0"?>
-<people>
-  <person first-name="eric" middle-initial="H" last-name="jung">
-    <address street="321 south st" city="denver" state="co" country="usa"/>
-    <address street="123 main st" city="arlington" state="ma" country="usa"/>
-  </person>
-
-  <person first-name="jed" last-name="brown">
-    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
-    <address street="123 west st" city="seattle" state="wa" country="usa"/>
-    <address street="321 south avenue" city="denver" state="co" country="usa"/>
-  </person>
-</people>
-
-

El W3C DOM API soportado por Mozilla, puede ser usado para crear una representación en memoria del documento anterior, como se ve a continuación:

-
var doc = document.implementation.createDocument("", "", null);
-var peopleElem = doc.createElement("people");
-
-var personElem1 = doc.createElement("person");
-personElem1.setAttribute("first-name", "eric");
-personElem1.setAttribute("middle-initial", "h");
-personElem1.setAttribute("last-name", "jung");
-
-var addressElem1 = doc.createElement("address");
-addressElem1.setAttribute("street", "321 south st");
-addressElem1.setAttribute("city", "denver");
-addressElem1.setAttribute("state", "co");
-addressElem1.setAttribute("country", "usa");
-personElem1.appendChild(addressElem1);
-
-var addressElem2 = doc.createElement("address");
-addressElem2.setAttribute("street", "123 main st");
-addressElem2.setAttribute("city", "arlington");
-addressElem2.setAttribute("state", "ma");
-addressElem2.setAttribute("country", "usa");
-personElem1.appendChild(addressElem2);
-
-var personElem2 = doc.createElement("person");
-personElem2.setAttribute("first-name", "jed");
-personElem2.setAttribute("last-name", "brown");
-
-var addressElem3 = doc.createElement("address");
-addressElem3.setAttribute("street", "321 north st");
-addressElem3.setAttribute("city", "atlanta");
-addressElem3.setAttribute("state", "ga");
-addressElem3.setAttribute("country", "usa");
-personElem2.appendChild(addressElem3);
-
-var addressElem4 = doc.createElement("address");
-addressElem4.setAttribute("street", "123 west st");
-addressElem4.setAttribute("city", "seattle");
-addressElem4.setAttribute("state", "wa");
-addressElem4.setAttribute("country", "usa");
-personElem2.appendChild(addressElem4);
-
-var addressElem5 = doc.createElement("address");
-addressElem5.setAttribute("street", "321 south avenue");
-addressElem5.setAttribute("city", "denver");
-addressElem5.setAttribute("state", "co");
-addressElem5.setAttribute("country", "usa");
-personElem2.appendChild(addressElem5);
-
-peopleElem.appendChild(personElem1);
-peopleElem.appendChild(personElem2);
-doc.appendChild(peopleElem);
-
-

Vea también el Capítulo DOM del Tutorial de XUL.

-

Se puede automatizar la creación de un DOM tree usando el JXON reverse algorithm (algoritmo inverso JXON) en asociación con la siguiente representación JSON:

-
{
-  "people": {
-    "person": [{
-      "address": [{
-        "@street": "321 south st",
-        "@city": "denver",
-        "@state": "co",
-        "@country": "usa"
-      }, {
-        "@street": "123 main st",
-        "@city": "arlington",
-        "@state": "ma",
-        "@country": "usa"
-      }],
-      "@first-name": "eric",
-      "@middle-initial": "H",
-      "@last-name": "jung"
-    }, {
-      "address": [{
-        "@street": "321 north st",
-        "@city": "atlanta",
-        "@state": "ga",
-        "@country": "usa"
-      }, {
-        "@street": "123 west st",
-        "@city": "seattle",
-        "@state": "wa",
-        "@country": "usa"
-      }, {
-        "@street": "321 south avenue",
-        "@city": "denver",
-        "@state": "co",
-        "@country": "usa"
-      }],
-      "@first-name": "jed",
-      "@last-name": "brown"
-    }]
-  }
-}
-
-

¿Ahora qué?

-

Los DOM trees pueden ser invocados usando expresiones XPath, convertidos a cadenas de texto, salvados a un archivo local o remoto usando XMLSerializer (sin tener que convertirlo primero a una cadena de texto), Enviados mediante POST a un servidor web (via XMLHttpRequest), transformados usando XSLT, XLink, convertidos a un objeto JavaScript a tráves del  algoritmo JXON, etc.

-

Adicionalmente se puede hacer uso de los DOM trees para modelar los datos que no estén bien formados para RDF (o si sólo no prefieres usar RDF). Otra aplicación que puedes darle, se relaciona a XUL (que es XML), la UI (interfaz) de tu aplicación puede ser manipulada dinámicamente, descargada, subida, guardada, cargada, convertida, o transformada fácilmente.

-

Vea también

- -

{{ languages( { "fr": "fr/Comment_cr\u00e9er_un_arbre_DOM", "ja": "ja/How_to_create_a_DOM_tree", "zh-cn": "zh-cn/How_to_create_a_DOM_tree" } ) }}

diff --git a/files/es/html/elemento/datalist/index.html b/files/es/html/elemento/datalist/index.html deleted file mode 100644 index 2f94162678..0000000000 --- a/files/es/html/elemento/datalist/index.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: datalist -slug: HTML/Elemento/datalist -tags: - - HTML5 ---- -

Redirigir datalist

diff --git a/files/es/html/elemento/form/index.html b/files/es/html/elemento/form/index.html deleted file mode 100644 index dd039bead3..0000000000 --- a/files/es/html/elemento/form/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: form -slug: HTML/Elemento/form ---- -

a

diff --git a/files/es/html/elemento/section/index.html b/files/es/html/elemento/section/index.html deleted file mode 100644 index dc632fa052..0000000000 --- a/files/es/html/elemento/section/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Section -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/html/html5/forms_in_html5/index.html b/files/es/html/html5/forms_in_html5/index.html deleted file mode 100644 index a0e77ec827..0000000000 --- a/files/es/html/html5/forms_in_html5/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Formularios en HTML5 -slug: HTML/HTML5/Forms_in_HTML5 -tags: - - Forms - - HTML - - 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 programar y diseñar que se necesitaba en HTML4. Las funcionalidades de los formularios en HTML5 brindan una experiencia mejor para los usuarios al permitir que los formularios tengan un comportamiento más consistente entre diferentes sitios web y al darle una devolución inmediata acerca de la información ingresada. También proveen esta experiencia a los usuarios que han deshabilitado javascript en sus navegadores.

- -

Este documento describe los elementos nuevos o que han cambiado 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.

- -
<label>Superhéroe favorito</label>
-<input list="superheroes" name="list" />
-<datalist id="superheroes">
-    <option label="Iron Man" value="Iron Man">
-    <option label="The Hulk" value="The Hulk">
-</datalist>
-
- -

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 IDs de otros elementos.

- -

El atributo placeholder

- -

El atributo {{ htmlattrxref("placeholder", "input") }} en elementos {{ HTMLElement("input") }} y {{ HTMLElement("textarea") }} provee una ayuda a los usuarios acerca de qué debe ser ingresado en el campo. El texto introducido en el placeholder no debe contener «enters» o saltos de línea.

- -
<input type="email" id="user-email" placeholder="e.g. john.doe@mozilla.com" required/>
-
- -

El atributo autofocus

- -

El atributo autofocus 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 de tipo boolean. 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 ser aplicado a un elemento <input> si el atributo {{ htmlattrxref("type", "input") }} hidden está seleccionado (esto quiere decir, no se puede enfocar automáticamente un elemento escondido).

- -
<input type="text" id="user" autofocus />
-
- -

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

- -

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

- - diff --git a/files/es/html/html5/formularios_en_html5/index.html b/files/es/html/html5/formularios_en_html5/index.html deleted file mode 100644 index 6e4cd130d6..0000000000 --- a/files/es/html/html5/formularios_en_html5/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Formularios en HTML5 -slug: HTML/HTML5/Formularios_en_HTML5 -tags: - - HTML - - HTML5 - - formulários - - para_revisar -translation_of: Learn/HTML/Forms/HTML5_updates ---- -

{{ 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/html/html5/html5_lista_elementos/index.html b/files/es/html/html5/html5_lista_elementos/index.html deleted file mode 100644 index 64595418c8..0000000000 --- a/files/es/html/html5/html5_lista_elementos/index.html +++ /dev/null @@ -1,599 +0,0 @@ ---- -title: Lista de Elementos HTML5 -slug: HTML/HTML5/HTML5_lista_elementos -translation_of: Web/HTML/Element -translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list ---- -

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/html/html5/html5_parser/index.html b/files/es/html/html5/html5_parser/index.html deleted file mode 100644 index 591fcbe865..0000000000 --- a/files/es/html/html5/html5_parser/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Analizador de HTML5 -slug: HTML/HTML5/HTML5_Parser -tags: - - HTML - - HTML5 - - para_revisar -translation_of: 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/html/html5/index.html b/files/es/html/html5/index.html deleted file mode 100644 index 054d21d534..0000000000 --- a/files/es/html/html5/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: HTML5 -slug: HTML/HTML5 -tags: - - API - - CSS3 - - Gráficos(2) - - HTML - - HTML5 - - Multimedia - - SVG - - conectividad - - graficos - - mejoras - - nuevo -translation_of: 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/html/html5/introducci\303\263n_a_html5/index.html" "b/files/es/html/html5/introducci\303\263n_a_html5/index.html" deleted file mode 100644 index 091a90f7af..0000000000 --- "a/files/es/html/html5/introducci\303\263n_a_html5/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Introducción a HTML5 -slug: HTML/HTML5/Introducción_a_HTML5 -tags: - - HTML - - HTML5 -translation_of: 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/html/html5/validacion_de_restricciones/index.html b/files/es/html/html5/validacion_de_restricciones/index.html deleted file mode 100644 index 04182a8fec..0000000000 --- a/files/es/html/html5/validacion_de_restricciones/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: Validación de restricciones -slug: HTML/HTML5/Validacion_de_restricciones -tags: - - CSS - - Guía - - HTML5 - - NecesitaContenido - - Selectores -translation_of: 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/incrustando_mozilla/comunidad/index.html b/files/es/incrustando_mozilla/comunidad/index.html deleted file mode 100644 index 70853c59a3..0000000000 --- a/files/es/incrustando_mozilla/comunidad/index.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Comunidad -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/indexeddb/index.html b/files/es/indexeddb/index.html deleted file mode 100644 index 91e216833a..0000000000 --- a/files/es/indexeddb/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: IndexedDB -slug: IndexedDB -tags: - - páginas_a_traducir ---- -

{{ 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/instalaci\303\263n_de_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" "b/files/es/instalaci\303\263n_de_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" deleted file mode 100644 index c1c1755bb9..0000000000 --- "a/files/es/instalaci\303\263n_de_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Instalación de motores de búsqueda desde páginas web -slug: Instalación_de_motores_de_búsqueda_desde_páginas_web -tags: - - Plugins_de_búsqueda ---- -

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/learn/accessibility/qu\303\251_es_la_accesibilidad/index.html" "b/files/es/learn/accessibility/qu\303\251_es_la_accesibilidad/index.html" deleted file mode 100644 index e92994e37c..0000000000 --- "a/files/es/learn/accessibility/qu\303\251_es_la_accesibilidad/index.html" +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: ¿Qué es la accesibilidad? -slug: Learn/Accessibility/Qué_es_la_accesibilidad -translation_of: Learn/Accessibility/What_is_accessibility ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}
- -

En este artículo se inicia el módulo con una explicación ampliada sobre qué es la accesibilidad. Esta visión general incluye qué grupos de personas necesitamos tener en cuenta y por qué, qué herramientas utilizan estas personas para interactuar con la web y cómo podemos hacer que la accesibilidad sea parte de nuestro flujo de trabajo de desarrollo web.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática y de lenguaje HTML y CSS.
Objetivo:Familiarizarse con la accesibilidad (qué es y cómo te afecta como desarrollador web).
- -

¿Qué es la accesibilidad?

- -

La accesibilidad hace que tus sitios web puedan ser utilizados por el mayor número de personas posible. Tradicionalmente, se ideó para las personas con discapacidad, pero la creación de sitios accesibles también beneficia a otros grupos, como los que utilizan los dispositivos móviles o los que tienen conexiones de red lentas.

- -

También podrías pensar en la accesibilidad como una forma de tratar a todos por igual y darles las mismas oportunidades, sin importar su capacidad o circunstancias. Al igual que es injusto excluir a alguien de un edificio porque vaya en silla de ruedas (generalmente, los edificios públicos modernos tienen rampas o ascensores), tampoco es correcto excluir a alguien de un sitio web porque tenga una discapacidad visual. Todos somos diferentes, pero todos somos humanos, y por lo tanto tenemos los mismos derechos.

- -

Por eso debemos hacer las cosas accesibles. En algunos países es obligado por ley proporcionar sitios web accesibles, lo que te puede abrir algunos mercados importantes que de otra manera no serían capaces de utilizar tus servicios o comprar tus productos.

- -

Crear sitios web accesibles nos beneficia a todos:

- - - -

¿Con que tipo de discapacidades nos encontraremos?

- -

Las personas con discapacidad son tan diversas como las personas sin discapacidad, y también lo son sus discapacidades. La clave está en pensar más allá de tu ordenador y en cómo utilizas la web y empezar a aprender acerca de cómo otros la utilizan. Tú no eres tus usuarios. A continuación explicaremos los principales tipos de discapacidad que vamos a considerar, junto con las herramientas especiales que se utilizan para acceder al contenido web (conocidas como tecnologías de apoyo o AT, de assistive technologies).

- -
-

Nota: La hoja informativa sobre discapacidad y salud de la Organización Mundial de la Salud establece que «Más de mil millones de personas, aproximadamente el 15% de la población mundial, tienen alguna forma de discapacidad» y «Entre 110 millones y 190 millones de adultos tienen dificultades funcionales significativas».

-
- -

Personas con discapacidad visual

- -

Las personas con discapacidad visual son aquellas con ceguera, poca visión o daltonismo. Muchas personas con discapacidad visual utilizan amplificadores de pantalla que consisten en lupas físicas o funciones de zoom por software. La mayoría de los navegadores y sistemas operativos de hoy en día tienen instaladas funciones de zoom. Algunos usuarios confían en los lectores de pantalla, un software que lee en voz alta los textos digitales. Algunos ejemplos de lectores de pantalla incluyen:

- - - -

Familiarizarse con los lectores de pantalla puede ser útil, así como configurar un lector de pantalla y jugar con él para aprender cómo funciona. Consulta nuestra guía de lectores de pantalla de prueba para la navegación cruzada para obtener más detalles sobre su uso. El vídeo siguiente proporciona un breve ejemplo de cómo es esta experiencia.

- -

{{EmbedYouTube("IK97XMibEws")}}

- -

En términos de estadística, la Organización Mundial de la Salud estima que «Alrededor de 285 millones de personas de todo el mundo tienen discapacidad visual: 39 millones son ciegas y 246 tienen visión reducida.» (Véase Discapacidad visual y ceguera). Esa es una población grande y significativa de usuarios (casi la misma población de los Estados Unidos de América), a la que simplemente perderás porque tu sitio web no está codificado correctamente.

- -

Personas con discapacidades auditivas

- -

También conocidas como personas con trastornos auditivos o personas sordas. Son un grupo de personas con niveles de audición bajos o nulos. Las personas con discapacidad auditiva usan AT (véase Dispositivos de asistencia para personas con trastornos auditivos, de voz, del habla o del lenguaje), pero en realidad no hay AT específicos para el uso del ordenador/web.

- -

Hay, sin embargo, técnicas específicas para ofrecer alternativas textuales a contenidos de audio, que van desde simples transcripciones hasta pistas de texto (es decir, subtítulos) que se pueden mostrar junto con el vídeo. Pero lo veremos más adelante.

- -

Las personas con discapacidad auditiva también representan una importante base de usuarios: «466 millones de personas en todo el mundo tienen pérdida auditiva discapacitante», dice la hoja informativa sobre Sordera y pérdida auditiva de la Organización Mundial de la Salud.

- -

Personas con discapacidad motriz

- -

Estas personas tienen discapacidades relativas a la movilidad, que pueden implicar problemas puramente físicos (como la pérdida de una extremidad o la parálisis) o trastornos neurológicos/genéticos que conducen a la debilidad o pérdida de control en las extremidades. Algunas personas simplemente pueden tener dificultades a la hora de mover el ratón, mientras que otras podrían verse más gravemente afectadas, tal vez estén paralizadas y necesiten utilizar un puntero de cabeza para interactuar con los ordenadores.

- -

Este tipo de discapacidad se da principalmente por la vejez, y no por cualquier trauma o condición específica, y también podría resultar de limitaciones en el hardware (algunos usuarios podrían no tener un ratón).

- -

La forma en que esto afecta al desarrollo web es el requisito de que los controles sean accesibles por el teclado. Hablaremos de la accesibilidad del teclado en artículos posteriores de este módulo, pero te recomendamos probar algunos sitios web utilizando solo el teclado para ver cómo funcionan. Por ejemplo, ¿se puede utilizar la tecla de tabulación para moverse entre los diferentes controles de un formulario web? Puedes encontrar más detalles sobre los controles del teclado en nuestro apartado Accesibilidad desde el teclado.

- -

Si nos basamos en las estadísticas, vemos que un número significativo de personas tienen problemas de movilidad. Los Centros para el Control y la Prevención de Enfermedades de Discapacidad y Funcionalidad (Adultos a partir de 18 años no registrados en una institución) de los Estados Unidos informan de que el porcentaje de adultos con alguna disfunción física en los EUA es del 16,1%.

- -

Personas con discapacidad cognitiva

- -

La discapacidad cognitiva engloba una amplia gama de discapacidades, desde las personas que presentan las capacidades intelectuales más limitadas hasta toda la población que tiene problemas a la hora de recordar por los síntomas de la edad. Este amplio abanico incluye a las personas con enfermedades mentales como la depresión y la esquizofrenia. También incluye a personas con dificultades de aprendizaje, como la dislexia y el trastorno por déficit de atención con hiperactividad. Es importante destacar que, aunque hay una gran diversidad dentro de las definiciones clínicas de alteraciones cognitivas, las personas que las experimentan tienen un conjunto común de problemas funcionales, que incluye dificultades a la hora de entender los contenidos, recordar cómo completar las tareas y confusión ante páginas web diseñadas de forma incoherente.

- -

Una buena base de accesibilidad para personas con deficiencias cognitivas incluye:

- - - -

Observaciones

- - - -

Implementa la accesibilidad en tu proyecto

- -

Un mito común de la accesibilidad es que se trata de un «extra añadido» que encarece tu proyecto. Este mito puede resultar cierto si:

- - - -

Sin embargo, si se tiene en cuenta la accesibilidad desde el inicio de un proyecto, el coste es muy reducido.

- -

Al planificar tu proyecto, debes tener en cuenta las pruebas de accesibilidad en la fase de pruebas, lo mismo que las pruebas para cualquier otro sector de público objetivo importante (por ejemplo, los navegadores de escritorio o los navegadores para dispositivo móvil). Somete tu proyecto a pruebas desde una etapa temprana y con frecuencia, idealmente con pruebas automatizadas para detectar carencias detectables en la programación, como la falta de textos alternativos en las imágenes o textos de enlace no adecuados (consulta Relaciones entre elementos y contexto). Y haz algunas pruebas con grupos de usuarios con discapacidad para ver cómo se desenvuelven con las características más complejas de tu sitio web. Por ejemplo:

- - - -

Puedes y debes tener en cuenta las áreas potencialmente problemáticas del contenido que habrá que modificar para proporcionarles accesibilidad, asegúrate de que se prueban a fondo y piensa en soluciones/alternativas. El contenido textual (como veremos en el próximo artículo) es fácil, pero ¿qué pasa con el contenido multimedia y con esos fantásticos gráficos 3D? Echa un ojo al presupuesto del proyecto y piensa en soluciones que estén a tu disposición para convertir tales contenidos en accesibles. Transcribir todos tus archivos multimedia es una opción posible, aunque cara.

- -

Seamos realistas. El «100% de accesibilidad» es un ideal inalcanzable, ya que siempre te encontrarás con algún tipo de caso límite en que un determinado usuario encuentra ciertos contenidos difíciles de usar, pero debes hacer todo lo que puedas. Si planeas incluir un gráfico 3D circular creado a partir de WebGL, es posible que desees incluir una tabla de datos como una representación alternativa accesible. O bien puedes simplemente incluir la tabla y deshacerte del gráfico circular 3D (todo el mundo puede acceder a la tabla, su codificación resulta más simple, y además consume menos recursos de la CPU y es de mantenimiento más fácil.

- -

Por otro lado, si trabajas en un sitio web de una galería que muestra obras de arte interesantes en 3D, no sería razonable esperar que cada obra de arte sea perfectamente accesible para las personas con discapacidad visual, ya que se trata de un medio completamente visual.

- -

Para demostrar que te importa y que has pensado en la accesibilidad, publica una declaración de accesibilidad en la página web que explique tu política de accesibilidad y los pasos realizados para hacer que el sitio web sea accesible. Si alguien se queja de que tiene un problema de accesibilidad: inicia un diálogo con ellos, se empático y toma las medidas razonables para tratar de solucionar el problema.

- -
-

Nota: Nuestro artículo sobre Cómo afrontar los problemas de accesibilidad más comunes expone los detalles de accesibilidad que es necesario tener más en cuenta.

-
- -

En resumen:

- - - -

Directrices de accesibilidad y la ley

- -

Hay numerosas listas de control y conjuntos de directrices en las cuales basar las pruebas de accesibilidad, por lo que podría parecer abrumador a primera vista. Nuestro consejo es que te familiarices con las áreas básicas en las que te interesa centrarte, así como que comprendas las estructuras de alto nivel de las directrices que son más relevantes para ti.

- - - -

Así, mientras que la WCAG es un conjunto de directrices, tu país probablemente tiene leyes que rigen la accesibilidad web, o al menos la accesibilidad de los servicios disponibles para el público (que incluyen sitios web, televisión, espacios físicos, etc.). Conocer estas leyes puede resultarte útil. Si no te preocupas por comprobar que tu contenido sea accesible, podrías incurrir en alguna responsabilidad legal, si la gente se queja.

- -

Suena serio, pero en realidad solo tienes que considerar la accesibilidad como la prioridad principal a la hora de desarrollar tu web, como ya hemos dicho. En caso de duda, asesórate por un abogado cualificado. Y como nosotros no lo somos, no vamos a ofrecer más consejos sobre este tema.

- -

API de accesibilidad

- -

Los navegadores web hacen uso de API de accesibilidad especiales (proporcionadas por el sistema operativo subyacente) que exponen información útil para las tecnologías de asistencia (AT, assistive technologies): la mayoría de AT tienden a utilizar información semántica, por lo que esta información no incluye información de estilo o JavaScript. Esta información se estructura en un árbol de datos, denominado árbol de accesibilidad.

- -

Los diferentes sistemas operativos disponen de diferentes API de accesibilidad:

- - - -

Cuando la información semántica nativa proporcionada por los elementos HTML de tus aplicaciones web falla, puedes complementarlo con características de la especificación WAI-ARIA, que añaden información semántica al árbol para mejorar la accesibilidad. Puedes aprender más acerca de WAI-ARIA en nuestro artículo de fundamentos WAI-ARIA.

- -

Resumen

- -

Este artículo debería haber dado una descripción detallada sobre la accesibilidad, mostrar por qué es importante y enseñar cómo puede encajar en tu flujo de trabajo. Ahora también deberías tener sed de conocimientos sobre los detalles de implementación que hacen que los sitios sean accesibles. Comenzaremos con esto en la sección siguiente, observando por qué HTML es una buena base para la accesibilidad.

- -

{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

- -

En este módulo

- - - -

Véase también

- - diff --git a/files/es/learn/accessibility/what_is_accessibility/index.html b/files/es/learn/accessibility/what_is_accessibility/index.html new file mode 100644 index 0000000000..e92994e37c --- /dev/null +++ b/files/es/learn/accessibility/what_is_accessibility/index.html @@ -0,0 +1,211 @@ +--- +title: ¿Qué es la accesibilidad? +slug: Learn/Accessibility/Qué_es_la_accesibilidad +translation_of: Learn/Accessibility/What_is_accessibility +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}
+ +

En este artículo se inicia el módulo con una explicación ampliada sobre qué es la accesibilidad. Esta visión general incluye qué grupos de personas necesitamos tener en cuenta y por qué, qué herramientas utilizan estas personas para interactuar con la web y cómo podemos hacer que la accesibilidad sea parte de nuestro flujo de trabajo de desarrollo web.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática y de lenguaje HTML y CSS.
Objetivo:Familiarizarse con la accesibilidad (qué es y cómo te afecta como desarrollador web).
+ +

¿Qué es la accesibilidad?

+ +

La accesibilidad hace que tus sitios web puedan ser utilizados por el mayor número de personas posible. Tradicionalmente, se ideó para las personas con discapacidad, pero la creación de sitios accesibles también beneficia a otros grupos, como los que utilizan los dispositivos móviles o los que tienen conexiones de red lentas.

+ +

También podrías pensar en la accesibilidad como una forma de tratar a todos por igual y darles las mismas oportunidades, sin importar su capacidad o circunstancias. Al igual que es injusto excluir a alguien de un edificio porque vaya en silla de ruedas (generalmente, los edificios públicos modernos tienen rampas o ascensores), tampoco es correcto excluir a alguien de un sitio web porque tenga una discapacidad visual. Todos somos diferentes, pero todos somos humanos, y por lo tanto tenemos los mismos derechos.

+ +

Por eso debemos hacer las cosas accesibles. En algunos países es obligado por ley proporcionar sitios web accesibles, lo que te puede abrir algunos mercados importantes que de otra manera no serían capaces de utilizar tus servicios o comprar tus productos.

+ +

Crear sitios web accesibles nos beneficia a todos:

+ + + +

¿Con que tipo de discapacidades nos encontraremos?

+ +

Las personas con discapacidad son tan diversas como las personas sin discapacidad, y también lo son sus discapacidades. La clave está en pensar más allá de tu ordenador y en cómo utilizas la web y empezar a aprender acerca de cómo otros la utilizan. Tú no eres tus usuarios. A continuación explicaremos los principales tipos de discapacidad que vamos a considerar, junto con las herramientas especiales que se utilizan para acceder al contenido web (conocidas como tecnologías de apoyo o AT, de assistive technologies).

+ +
+

Nota: La hoja informativa sobre discapacidad y salud de la Organización Mundial de la Salud establece que «Más de mil millones de personas, aproximadamente el 15% de la población mundial, tienen alguna forma de discapacidad» y «Entre 110 millones y 190 millones de adultos tienen dificultades funcionales significativas».

+
+ +

Personas con discapacidad visual

+ +

Las personas con discapacidad visual son aquellas con ceguera, poca visión o daltonismo. Muchas personas con discapacidad visual utilizan amplificadores de pantalla que consisten en lupas físicas o funciones de zoom por software. La mayoría de los navegadores y sistemas operativos de hoy en día tienen instaladas funciones de zoom. Algunos usuarios confían en los lectores de pantalla, un software que lee en voz alta los textos digitales. Algunos ejemplos de lectores de pantalla incluyen:

+ + + +

Familiarizarse con los lectores de pantalla puede ser útil, así como configurar un lector de pantalla y jugar con él para aprender cómo funciona. Consulta nuestra guía de lectores de pantalla de prueba para la navegación cruzada para obtener más detalles sobre su uso. El vídeo siguiente proporciona un breve ejemplo de cómo es esta experiencia.

+ +

{{EmbedYouTube("IK97XMibEws")}}

+ +

En términos de estadística, la Organización Mundial de la Salud estima que «Alrededor de 285 millones de personas de todo el mundo tienen discapacidad visual: 39 millones son ciegas y 246 tienen visión reducida.» (Véase Discapacidad visual y ceguera). Esa es una población grande y significativa de usuarios (casi la misma población de los Estados Unidos de América), a la que simplemente perderás porque tu sitio web no está codificado correctamente.

+ +

Personas con discapacidades auditivas

+ +

También conocidas como personas con trastornos auditivos o personas sordas. Son un grupo de personas con niveles de audición bajos o nulos. Las personas con discapacidad auditiva usan AT (véase Dispositivos de asistencia para personas con trastornos auditivos, de voz, del habla o del lenguaje), pero en realidad no hay AT específicos para el uso del ordenador/web.

+ +

Hay, sin embargo, técnicas específicas para ofrecer alternativas textuales a contenidos de audio, que van desde simples transcripciones hasta pistas de texto (es decir, subtítulos) que se pueden mostrar junto con el vídeo. Pero lo veremos más adelante.

+ +

Las personas con discapacidad auditiva también representan una importante base de usuarios: «466 millones de personas en todo el mundo tienen pérdida auditiva discapacitante», dice la hoja informativa sobre Sordera y pérdida auditiva de la Organización Mundial de la Salud.

+ +

Personas con discapacidad motriz

+ +

Estas personas tienen discapacidades relativas a la movilidad, que pueden implicar problemas puramente físicos (como la pérdida de una extremidad o la parálisis) o trastornos neurológicos/genéticos que conducen a la debilidad o pérdida de control en las extremidades. Algunas personas simplemente pueden tener dificultades a la hora de mover el ratón, mientras que otras podrían verse más gravemente afectadas, tal vez estén paralizadas y necesiten utilizar un puntero de cabeza para interactuar con los ordenadores.

+ +

Este tipo de discapacidad se da principalmente por la vejez, y no por cualquier trauma o condición específica, y también podría resultar de limitaciones en el hardware (algunos usuarios podrían no tener un ratón).

+ +

La forma en que esto afecta al desarrollo web es el requisito de que los controles sean accesibles por el teclado. Hablaremos de la accesibilidad del teclado en artículos posteriores de este módulo, pero te recomendamos probar algunos sitios web utilizando solo el teclado para ver cómo funcionan. Por ejemplo, ¿se puede utilizar la tecla de tabulación para moverse entre los diferentes controles de un formulario web? Puedes encontrar más detalles sobre los controles del teclado en nuestro apartado Accesibilidad desde el teclado.

+ +

Si nos basamos en las estadísticas, vemos que un número significativo de personas tienen problemas de movilidad. Los Centros para el Control y la Prevención de Enfermedades de Discapacidad y Funcionalidad (Adultos a partir de 18 años no registrados en una institución) de los Estados Unidos informan de que el porcentaje de adultos con alguna disfunción física en los EUA es del 16,1%.

+ +

Personas con discapacidad cognitiva

+ +

La discapacidad cognitiva engloba una amplia gama de discapacidades, desde las personas que presentan las capacidades intelectuales más limitadas hasta toda la población que tiene problemas a la hora de recordar por los síntomas de la edad. Este amplio abanico incluye a las personas con enfermedades mentales como la depresión y la esquizofrenia. También incluye a personas con dificultades de aprendizaje, como la dislexia y el trastorno por déficit de atención con hiperactividad. Es importante destacar que, aunque hay una gran diversidad dentro de las definiciones clínicas de alteraciones cognitivas, las personas que las experimentan tienen un conjunto común de problemas funcionales, que incluye dificultades a la hora de entender los contenidos, recordar cómo completar las tareas y confusión ante páginas web diseñadas de forma incoherente.

+ +

Una buena base de accesibilidad para personas con deficiencias cognitivas incluye:

+ + + +

Observaciones

+ + + +

Implementa la accesibilidad en tu proyecto

+ +

Un mito común de la accesibilidad es que se trata de un «extra añadido» que encarece tu proyecto. Este mito puede resultar cierto si:

+ + + +

Sin embargo, si se tiene en cuenta la accesibilidad desde el inicio de un proyecto, el coste es muy reducido.

+ +

Al planificar tu proyecto, debes tener en cuenta las pruebas de accesibilidad en la fase de pruebas, lo mismo que las pruebas para cualquier otro sector de público objetivo importante (por ejemplo, los navegadores de escritorio o los navegadores para dispositivo móvil). Somete tu proyecto a pruebas desde una etapa temprana y con frecuencia, idealmente con pruebas automatizadas para detectar carencias detectables en la programación, como la falta de textos alternativos en las imágenes o textos de enlace no adecuados (consulta Relaciones entre elementos y contexto). Y haz algunas pruebas con grupos de usuarios con discapacidad para ver cómo se desenvuelven con las características más complejas de tu sitio web. Por ejemplo:

+ + + +

Puedes y debes tener en cuenta las áreas potencialmente problemáticas del contenido que habrá que modificar para proporcionarles accesibilidad, asegúrate de que se prueban a fondo y piensa en soluciones/alternativas. El contenido textual (como veremos en el próximo artículo) es fácil, pero ¿qué pasa con el contenido multimedia y con esos fantásticos gráficos 3D? Echa un ojo al presupuesto del proyecto y piensa en soluciones que estén a tu disposición para convertir tales contenidos en accesibles. Transcribir todos tus archivos multimedia es una opción posible, aunque cara.

+ +

Seamos realistas. El «100% de accesibilidad» es un ideal inalcanzable, ya que siempre te encontrarás con algún tipo de caso límite en que un determinado usuario encuentra ciertos contenidos difíciles de usar, pero debes hacer todo lo que puedas. Si planeas incluir un gráfico 3D circular creado a partir de WebGL, es posible que desees incluir una tabla de datos como una representación alternativa accesible. O bien puedes simplemente incluir la tabla y deshacerte del gráfico circular 3D (todo el mundo puede acceder a la tabla, su codificación resulta más simple, y además consume menos recursos de la CPU y es de mantenimiento más fácil.

+ +

Por otro lado, si trabajas en un sitio web de una galería que muestra obras de arte interesantes en 3D, no sería razonable esperar que cada obra de arte sea perfectamente accesible para las personas con discapacidad visual, ya que se trata de un medio completamente visual.

+ +

Para demostrar que te importa y que has pensado en la accesibilidad, publica una declaración de accesibilidad en la página web que explique tu política de accesibilidad y los pasos realizados para hacer que el sitio web sea accesible. Si alguien se queja de que tiene un problema de accesibilidad: inicia un diálogo con ellos, se empático y toma las medidas razonables para tratar de solucionar el problema.

+ +
+

Nota: Nuestro artículo sobre Cómo afrontar los problemas de accesibilidad más comunes expone los detalles de accesibilidad que es necesario tener más en cuenta.

+
+ +

En resumen:

+ + + +

Directrices de accesibilidad y la ley

+ +

Hay numerosas listas de control y conjuntos de directrices en las cuales basar las pruebas de accesibilidad, por lo que podría parecer abrumador a primera vista. Nuestro consejo es que te familiarices con las áreas básicas en las que te interesa centrarte, así como que comprendas las estructuras de alto nivel de las directrices que son más relevantes para ti.

+ + + +

Así, mientras que la WCAG es un conjunto de directrices, tu país probablemente tiene leyes que rigen la accesibilidad web, o al menos la accesibilidad de los servicios disponibles para el público (que incluyen sitios web, televisión, espacios físicos, etc.). Conocer estas leyes puede resultarte útil. Si no te preocupas por comprobar que tu contenido sea accesible, podrías incurrir en alguna responsabilidad legal, si la gente se queja.

+ +

Suena serio, pero en realidad solo tienes que considerar la accesibilidad como la prioridad principal a la hora de desarrollar tu web, como ya hemos dicho. En caso de duda, asesórate por un abogado cualificado. Y como nosotros no lo somos, no vamos a ofrecer más consejos sobre este tema.

+ +

API de accesibilidad

+ +

Los navegadores web hacen uso de API de accesibilidad especiales (proporcionadas por el sistema operativo subyacente) que exponen información útil para las tecnologías de asistencia (AT, assistive technologies): la mayoría de AT tienden a utilizar información semántica, por lo que esta información no incluye información de estilo o JavaScript. Esta información se estructura en un árbol de datos, denominado árbol de accesibilidad.

+ +

Los diferentes sistemas operativos disponen de diferentes API de accesibilidad:

+ + + +

Cuando la información semántica nativa proporcionada por los elementos HTML de tus aplicaciones web falla, puedes complementarlo con características de la especificación WAI-ARIA, que añaden información semántica al árbol para mejorar la accesibilidad. Puedes aprender más acerca de WAI-ARIA en nuestro artículo de fundamentos WAI-ARIA.

+ +

Resumen

+ +

Este artículo debería haber dado una descripción detallada sobre la accesibilidad, mostrar por qué es importante y enseñar cómo puede encajar en tu flujo de trabajo. Ahora también deberías tener sed de conocimientos sobre los detalles de implementación que hacen que los sitios sean accesibles. Comenzaremos con esto en la sección siguiente, observando por qué HTML es una buena base para la accesibilidad.

+ +

{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

+ +

En este módulo

+ + + +

Véase también

+ + diff --git a/files/es/learn/aprender_y_obtener_ayuda/index.html b/files/es/learn/aprender_y_obtener_ayuda/index.html deleted file mode 100644 index a7f06d90d8..0000000000 --- a/files/es/learn/aprender_y_obtener_ayuda/index.html +++ /dev/null @@ -1,321 +0,0 @@ ---- -title: Aprender y obtener ayuda -slug: Learn/Aprender_y_obtener_ayuda -tags: - - Aprender - - Desarrollo web - - Principiante - - conseguir ayuda - - obtener ayuda -translation_of: Learn/Learning_and_getting_help ---- -

{{learnsidebar}}

- -

Es genial que dediques algo de tiempo a aprender un nuevo conjunto de habilidades, pero puedes emplear algunas buenas prácticas que harán que tu aprendizaje sea más efectivo. También hay momentos en los que te atascarás y te sentirás frustrado, incluso los desarrolladores web profesionales se sienten así regularmente, y vale la pena conocer las formas más efectivas de tratar de obtener ayuda para que puedas progresar en tu trabajo. Este artículo proporciona algunos consejos y sugerencias en ambas áreas que te ayudarán a obtener más provecho del aprendizaje del desarrollo web, así como una lectura adicional para que puedas obtener más información sobre cada subtema si lo deseas.

- -

Aprendizaje efectivo

- -

Sigamos adelante y pensemos en un aprendizaje efectivo.

- -

Diferentes métodos de aprendizaje

- -

Es interesante considerar que hay dos formas principales en las que tu cerebro aprende cosas — el aprendizaje enfocado y el aprendizaje difuso:

- - - -

A partir de los estudios que los neurocientíficos han realizado sobre la actividad cerebral, hemos descubierto que realmente no se puede participar en ambas formas de aprendizaje, o de pensamiento simultáneamente. Entonces, ¿cuál debes elegir? Puedes pensar que el aprendizaje enfocado es mejor para estudiar, pero en realidad, ambos son muy importantes.

- -

El pensamiento enfocado es excelente para concentrarte mucho en temas específicos, profundizar en la resolución de problemas y mejorar tu dominio de las técnicas requeridas, fortaleciendo las vías neuronales en tu cerebro donde se almacena esa información. Sin embargo, no es muy bueno para entender "el panorama general" y desbloquear nuevas vías neuronales cuando intentas comprender nuevos temas o resolver nuevos problemas que no has encontrado antes.

- -

Para eso, necesitas un pensamiento difuso. Esto es lo opuesto al enfoque — dejas que tu cerebro divague por el paisaje más amplio, buscando conexiones que no tenías antes, tocando cosas nuevas (o nuevas combinaciones de cosas) en las que luego puedes concentrarte para fortalecerlas y empezar a entender realmente lo que significan.

- -

Es por eso que generalmente es bueno leer primero un material introductorio para obtener una comprensión de alto nivel de un área, antes de saltar a los detalles específicos.

- -

También es la razón por la que, a veces, puedes quedar realmente atrapado en un problema, pero luego averiguar la respuesta cuando vas a tomar un café (o a caminar). Podrías:

- -
    -
  1. Saber cómo solucionar el problema A con la herramienta A.
    2. -
  2. Saber cómo solucionar el problema B con la herramienta B.
    3. -
  3. No saber cómo solucionar el problema C.
    4. -
- -

Supongamos que te enfocas en el problema C por un tiempo y te frustras porque no puedes encontrar la solución para resolverlo. Pero luego, después de caminar para tomar un poco de aire fresco, es posible que descubras que, mientras tu mente divaga, de repente estableces una conexión entre la herramienta A y la herramienta B, ¡y te das cuenta de que las puedes usar juntas para solucionar el problema C! No siempre es así de simple, pero también es sorprendente cuántas veces sucede. Esto también resalta la importancia de tomar descansos regulares cuando estás estudiando frente a la computadora.

- -

Diferentes materiales de aprendizaje

- -

También vale la pena mirar los diferentes tipos de materiales de aprendizaje disponibles, para ver cuáles son los más efectivos para que aprendas.

- -

Artículos textuales

- -

Encontrarás muchos artículos escritos en la web para enseñarte sobre diseño web. Como la mayor parte de este curso, por ejemplo. Algunos de los artículos serán tutoriales, para enseñarte una determinada técnica o concepto importante (como "aprender a crear un reproductor de video" o "Aprender el modelo de cajas CSS"), y algunos de los artículos serán material de referencia, para permitirte recordar detalles que hayas olvidado (como "¿cuál es la sintaxis de la propiedad background de CSS"?)

- -

MDN Web Docs es muy bueno para ambos tipos — el área en la que te encuentras actualmente es excelente para aprender técnicas y conceptos, y también tenemos varias secciones de referencia gigantes que te permiten buscar cualquier sintaxis que no puedas recordar.

- -

También hay varios otros recursos excelentes en la web, algunos de los cuales mencionaremos a continuación.

- -
-

Nota: el texto anterior debería haberte proporcionado un dato importante: ¡no se espera que recuerdes todo! Los desarrolladores web profesionales todo el tiempo usan herramientas como MDN Web Docs para buscar cosas que han olvidado. Como descubrirás a lo largo de estas líneas, aprender desarrollo web tiene más que ver con la resolución de problemas y patrones de aprendizaje que con el aprendizaje de muchas sintaxis.

-
- -

Videos

- -

También hay una serie de sitios que tienen contenido de aprendizaje de video en ellos. YouTube es obvio, con canales como Mozilla Layout Land, MozillaDeveloper y Google ChromeDevelopers que proporcionan muchos útiles videos. Muchas personas prefieren artículos textuales para un aprendizaje más profundo y material de referencia, y videos para explicaciones rápidas de conceptos y nuevas características, pero realmente depende de ti lo que prefieras aprender. Aquí no hay una respuesta correcta e incorrecta.

- -

Código de juegos interactivos

- -

Posiblemente seas el tipo de persona que prefiere instrucciones mínimas y preferirías saltar directamente y comenzar a jugar con el código. Este también es un enfoque razonable, y algunos sitios de aprendizaje tienden a favorecerlo. Codecademy, por ejemplo, es un sitio de aprendizaje donde los tutoriales consisten principalmente en editores de códigos interactivos en los que debes escribir directamente el código y ver si se logró el resultado deseado.

- -

Muchas páginas de referencia de documentos web de MDN también proporcionan ejemplos interactivos, donde puedes modificar el código y ver cómo cambia el resultado en vivo. Y tampoco hay nada de malo en crear tus propios ejemplos de código en tu computadora o en un editor de código en línea como JSBin, Codepen o Glitch. De hecho, ¡te invitarán a usarlos como parte de este curso cuando estés aprendiendo!

- -
-

Nota: Los editores de código en línea también son realmente útiles para compartir el código que has escrito, por ejemplo, si estás colaborando en el aprendizaje con otra persona que no se encuentra en la misma ubicación o se lo envías a alguien para pedir ayuda con eso. Puedes compartir la dirección web del ejemplo con ellos para que puedan verlo y ayudarte.

-
- -
-

Nota: Es posible que prefieras un método de aprendizaje sobre los demás, pero, de manera realista, probablemente terminarás con un enfoque híbrido. Y probablemente se te ocurran otros métodos además de los tres que cubrimos anteriormente.

-
- -

Haz un plan

- -

Es una buena idea crear un plan para ayudarte a lograr lo que quieres conseguir a través de tu aprendizaje.

- -

Una declaración de objetivos

- -

Suena tonto, pero ¿por qué no comenzar con una sola oración que diga lo que quieres lograr? Los siguientes tienen diferentes ámbitos, pero todos son realistas y alcanzables:

- - - -

Los siguientes no son tan razonables:

- - - -

¿Qué necesitas para llegar allí?

- -

Una vez que hayas descrito tu objetivo, es una buena idea investigar qué necesitarás para lograrlo. Por ejemplo:

- -

Materiales que necesito:

- - - -

Conocimiento que necesito:

- - - -

¿Cuánto tiempo y dinero costará?

- -

Calcula el tiempo y el costo para obtener estas cosas. Si necesitas trabajar para ganar dinero para comprar los materiales requeridos, entonces deberás tener en cuenta el tiempo para hacerlo. Una vez que tengas un estimado del tiempo, puedes comenzar a elaborar un plan para tu vida.

- -

¿Cuántas horas por semana necesitas invertir?

- -

Una vez que sepas lo que necesitas hacer y cuánto tiempo crees que te llevará, puedes comenzar a escribir un plan a seguir para lograr tu objetivo. Puede ser tan simple como:

- -

"Me llevará 500 horas aprender lo que necesito saber, y tengo un año para hacerlo, así que si asumo 2 semanas de vacaciones, tendré que trabajar en esto durante 10 horas por semana. Estoy gratis por las tardes y fines de semana, así que planearé mi tiempo en torno a eso".

- -

La cantidad de tiempo que puedes dedicar a esto, por supuesto, depende de cuáles sean tus circunstancias. Si estás en la escuela, entonces tienes mucho más tiempo libre que si tienes un trabajo y niños que mantener. Todavía es posible lograr tus objetivos, pero debes ser realista sobre la rapidez con que puedes lograrlo.

- -

Si estás haciendo un curso colegial o universitario para aprender desarrollo web, entonces la mayor parte de esta planificación la haces tú, ¡qué suerte!

- -

Cuando hayas elaborado un horario semanal, debes mantener un registro de lo que logras hacer cada semana en una simple hoja de cálculo o incluso en un cuaderno.

- -

Además, sería una buena idea tener algunos objetivos secundarios resueltos que te permitan realizar fácilmente un seguimiento de dónde te encuentras, por ejemplo:

- - - -

Sigue pensando en cuánto progreso estás haciendo y ajusta tu plan si es necesario.

- -

Mantente motivado

- -

Es difícil mantenerte motivado, especialmente si estás tratando de aprender una habilidad compleja como la programación o el desarrollo web. Lo que sigue son algunos consejos para mantenerte motivado y seguir trabajando:

- - - -

Resolución de problemas eficaz

- -

No hay una única forma efectiva de resolver todos los problemas (y aprender todo) lo relacionado con el diseño y desarrollo web, pero hay algunos consejos generales que te servirán en la mayoría de los casos.

- -

Romper las cosas en trozos

- -

Para empezar, cuando intentas implementar algo específico y parece realmente difícil entenderlo, debes tratar de dividirlo en múltiples problemas o fragmentos más pequeños.

- -

Por ejemplo, si estás considerando la tarea de "Crear un sitio web simple de dos columnas", la puedes desglosar de la siguiente manera:

- - - -

Luego, podrías desglosarlo aún más, por ejemplo, "Implementar menú de navegación horizontal" podría escribirse como:

- - - -

Cada uno de estos problemas no parece tan difícil de resolver como el gran problema que tuviste inicialmente. ¡Ahora solo tienes que empezar a resolverlos todos!

- -

Aprende y reconoce los patrones

- -

Como dijimos antes, el diseño/programación web se trata principalmente de resolución de problemas y patrones. Una vez que hayas escrito lo que necesitarás hacer para resolver un problema específico, puedes comenzar a descubrir qué características tecnológicas usar para resolverlo. Por ejemplo, los desarrolladores web profesionales han creado muchos menús de navegación horizontal, por lo que inmediatamente comenzarás a pensar en una solución como esta:

- -

Un menú de navegación generalmente se crea a partir de una lista de enlaces, algo así como:

- -
<ul>
-  <li>Primer elemento del menú</li>
-  <li>Segundo elemento del menú</li>
-  <li>Tercer elemento del menú</li>
-  <li>etc.</li>
-</ul>
-
- -

Para hacer que todos los elementos se asienten horizontalmente en una línea, la forma moderna más fácil es usar flexbox:

- -
ul {
-  display: flex;
-}
- -

Para eliminar el espacio innecesario y las viñetas, podemos hacer esto:

- -
ul {
-  list-style-type: none;
-  padding: 0;
-}
- -

etc.

- -

Si realmente eres un principiante en el desarrollo web, tendrás que estudiar y buscar en la web y encontrar soluciones para tales problemas. Si eres un desarrollador web profesional, probablemente recordarás la última vez que resolviste un problema similar, y solo tendrás que buscar algunos bits de la sintaxis que olvidaste desde entonces.

- -

Cuando encuentres soluciones a tales problemas, vale la pena escribir notas sobre lo que hiciste y mantener algunos ejemplos de código mínimos en un directorio en algún lugar para que puedas mirar hacia atrás en el trabajo anterior.

- -

Además, la web tiene {{web.link("/es/docs/Learn/Common_questions/What_are_browser_developer_tools", "herramientas de desarrollo")}} que te permiten ver el código utilizado para crear cualquier sitio en la web, si no tienes una solución a mano, un buen método de investigación es encontrar sitios web con características similares en la naturaleza y averiguar cómo lo hicieron.

- -
-

Nota: Observa cómo hablamos antes sobre el problema que estamos tratando de resolver primero, y la tecnología utilizada para resolverlo, en segundo lugar. Esta, casi siempre es la mejor manera de hacerlo — no comiences con una tecnología nueva y genial que desees usar, e intenta adaptarla a tu caso de uso.

-
- -
-

Nota: La solución más sencilla suele ser la mejor.

-
- -

Practica

- -

Cuanto más practiques la resolución de un problema, más fuertes serán las vías neuronales de tu cerebro en esa área y más fácil será recordar los detalles y la lógica de ese problema en particular.

- -

Sigue jugando con el código y practica más. Si se te acaban los problemas por resolver, busca algunas pruebas en línea, realiza algunos cursos más o pregunta a tus amigos y familiares (o escuela, o iglesia local) si hay algo que les gustaría que construyeras para ellos.

- -

Obtener ayuda

- -

El desarrollo web requiere que aprendas un complejo conjunto de habilidades — a veces estarás atascado y necesitarás ayuda. Como dijimos antes, incluso los desarrolladores profesionales regularmente necesitan ayuda para resolver problemas.

- -

Hay una variedad de formas de obtener ayuda, y la siguiente información son algunos consejos para hacerlo de manera más efectiva.

- -

Búsquedas web efectivas

- -

Una habilidad importante para aprender es el arte de las búsquedas web efectivas — ¿qué términos de búsqueda necesitas usar en tu motor de búsqueda favorito para encontrar los artículos que necesitas?

- -

A menudo es bastante obvio qué buscar. Por ejemplo:

- - - -

Si deseas buscar algo que tenga palabras de moda menos obvias, debes pensar en qué es más probable que te devuelva lo que deseas.

- - - -

Mensajes de error

- -

Si tienes un problema con algún código y aparece un mensaje de error específico, a menudo es una buena idea copiar el mensaje de error en tu motor de búsqueda y utilizarlo como término de búsqueda. Si otras personas han tenido el mismo problema, es probable que haya algunos artículos o publicaciones de blog al respecto en lugares como MDN o Stack Overflow.

- -
-

Nota: Stack Overflow es un sitio web realmente útil; básicamente es una enorme base de datos de preguntas y respuestas seleccionadas sobre diversas tecnologías y técnicas relacionadas. Probablemente encontrarás una respuesta que responda a tu pregunta. Si no, puedes hacer una pregunta y ver si alguien puede ayudarte.

-
- -

Prueba en el navegador

- -

A menudo es una buena idea ver si tu problema está afectando a todos los navegadores, o si solo ocurre en uno o en un pequeño número de navegadores. Si solo afecta a un navegador, por ejemplo, puedes usar ese navegador para limitar la búsqueda. Las búsquedas de ejemplo podrían verse así:

- - - -

Usa MDN

- -

El sitio en el que ya estás tiene una gran cantidad de información disponible, tanto material de referencia para buscar la sintaxis del código como guías/tutoriales para aprender técnicas.

- -

Hemos proporcionado la mayoría de las respuestas a las preguntas que tendrás sobre los fundamentos del desarrollo web en esta parte de MDN. Si estás atascado, es bueno volver a leer los artículos asociados para ver si te perdiste algo.

- -

Si no estás seguro de qué artículo leer, intenta buscar en MDN algunas palabras clave relacionadas (como se indicó anteriormente), o intenta una búsqueda web general. Para buscar en MDN, puedes usar la funcionalidad de búsqueda incorporada del sitio o mejor aún, usar tu motor de búsqueda favorito y poner "mdn" delante del término de búsqueda, por ejemplo, "diseño web receptivo mdn" o "backgrounf-color mdn".

- -

Otros recursos en línea

- -

Ya mencionamos Stack Overflow, pero hay otros recursos en línea que pueden ayudar.

- -

Es bueno encontrar una comunidad de la que formar parte, y obtendrás mucho respeto si intentas ayudar a otros a responder sus preguntas y también a hacer las tuyas. Otros buenos ejemplos incluyen:

- - - -

Sin embargo, también tiene sentido encontrar grupos útiles en sitios de redes sociales como Twitter o Facebook. Busca grupos que discutan los temas de desarrollo web que te interesen y únete. Sigue a las personas en Twitter que sabes que son influyentes, inteligentes o simplemente parecen compartir muchos consejos útiles.

- -

Encuentros físicos

- -

Por último, deberías intentar asistir a algunas reuniones físicas para conocer a otras personas de ideas afines, especialmente aquellas que atienden a principiantes. meetup.com es un buen lugar para encontrar reuniones físicas locales, y también puedes probar tu prensa local o lo que hay en los sitios.

- -

También puedes intentar asistir a conferencias web completas. Si bien estas pueden ser costosas, puedes intentar ofrecerte como voluntario con ellos, y muchas conferencias ofrecen boletos de tarifa reducida, por ejemplo, boletos de estudiante o diversidad.

- -

Ve también

- - diff --git a/files/es/learn/codificacion-scripting/index.html b/files/es/learn/codificacion-scripting/index.html deleted file mode 100644 index 0092ba899e..0000000000 --- a/files/es/learn/codificacion-scripting/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Codificación-Scripting -slug: Learn/codificacion-scripting -tags: - - Codificación - - Principiante - - Scripting -translation_of: Learn -translation_of_original: Learn/Coding-Scripting ---- -

REDIRIGE Aprende

diff --git a/files/es/learn/common_questions/common_web_layouts/index.html b/files/es/learn/common_questions/common_web_layouts/index.html new file mode 100644 index 0000000000..7e05cbcaad --- /dev/null +++ b/files/es/learn/common_questions/common_web_layouts/index.html @@ -0,0 +1,115 @@ +--- +title: ¿Qué contienen los diseños web comunes? +slug: Learn/Common_questions/diseños_web_comunes +tags: + - CSS + - Común + - Diseño + - Diseño Común + - HTML + - Principiante +translation_of: Learn/Common_questions/Common_web_layouts +--- +
{{IncludeSubnav("/en-US/Learn")}}
+ +
+

Cuando diseña páginas para su sitio web es bueno tener una idea de los diseños más comunes.

+
+ + + + + + + + + + + + +
Prerrequisitos:Asegúrese que usted ya ha pensado sobre lo que quiere lograr con su proyecto web.
Objetivo:Aprender dónde colocar las cosas en sus páginas web, y cómo hacerlo. 
+ +

Resumen

+ +

Existe una razón para que hablemos sobre diseño web. Se comienza con una página en blanco, y se pueden tomar muchas direcciones. Si no tienes mucha experiencia, comenzar con una página en blanco pudiera ser un poco temible. Nosotros tenemos alrededor de 25 años de experiencia y te daremos algunas reglas básicas para ayudarte a diseñar tu sitio. 

+ +

Aún ahora con el nuevo enfoque de la web para móviles, la mayoría de las páginas web principales son construídas a partir de las siguientes partes:

+ +
+
Encabezado
+
Visible en la parte superior de cada página de un sitio. Contiene información relevante para todas las páginas (como el nombre del sitio o el logo) y un sistema de navegación fácil de usar.
+
Contenido principal
+
Es el área más grande, contiene contenido único para la página actual.
+
Contenido secundario
+
1) Información complementaria del contenido principal; 2) información compartida entre un subconjunto de páginas; 3) sistema de navegación alternativo. De hecho, todo lo que no es absolutamente requerido por el contenido de la página principal. 
+
Pie de página
+
Visible en la parte inferior de cada página de un sitio. Análogamente al encabezado contiene información global, en este caso menos llamativa como avisos legales o información de contacto.
+
+ +

Estos elementos son bastante comunes en todos los factores de forma, pero pueden ser dispuestos de diferentes maneras. Aquí se presentan algunos ejemplos (1 representa encabezado, 2 pie de página; A contenido principal; B1, B2 barras laterales):

+ +

Diseño de una columna. Especialmente importante para navegadores de móviles de modo que no se llene la pequeña pantalla.

+ +

Example of a 1 column layout: Main on top and asides stacked beneath it.

+ +

Diseño de dos columnas. A menudo utilizado para tabletas, ya que tienen pantallas de tamaño medio.

+ +

 Example of a basic 2 column layout: One aside on the left column, and main on the right column. Example of a basic 2 column layout: One aside on the right column, and main on the left column.

+ +

Diseños de tres columnas. Solamene adecuado para escritorios con pantallas grandes. (Incluso muchos usuarios de escritorio prefieren ver cosas en pequeñas ventanas que en pantalla completa.)

+ +

Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column. Another example of a 3 column layout: Aside side by side on the left, Main on the right column. Another example of a 3 column layout: Aside side by side on the right, Main on the left column.

+ +

La verdadera diversión comienza cuando empiezas a mezclarlos todos juntos.

+ +

Example of mixed layout: Main on top and asides beneath it side by side. Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main. Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row.…

+ +

Estos son solo ejemplos y eres bastante libre de diseñar las cosas como quieras. Puedes notar que mientras el contenido se puede mover alrededor de la pantalla, siempre se mantiene el encabezado (1) en la parte superior y el pie de página (2) en la parte inferior. Además, el contenido principal (A) es lo más importante, así que dale la mayor parte del espacio. 

+ +

Estas son reglas del juego que puedes aprovechar. Desde luego, existen diseños complejos y excepciones. En otros artículos discutiremos cómo diseñar sitios responsivos (sitios que cambian en dependencia del tamaño de la pantalla) y sitios cuyos diseños varían entre las páginas. Por ahora, es mejor mantener tu diseño consistente en todo tu sitio. 

+ +

Aprendizaje activo

+ +

Aún no hay aprendizaje activo disponible. Por favor, considere contribuir.

+ +

Profundización

+ +

Estudiemos algunos ejemplos más concretos tomados de sitios web bien conocidos. 

+ +

Diseño de una columna

+ +

Aplicación de Invision. Un diseño típico de una columna proporcionando toda la información linealmente en una sola página. 

+ +

Example of a 1 column layout in the wild        1 column layout with header, main content, a stack of aside contents and a footer

+ +

Bastante sencillo. Sólo recuerda que muchas personas navegarán por tu sitio desde escritorios, así que haz tu contenido también utilizable allí.

+ +

Diseño de dos columnas.

+ +

Abduzeedo, un simple diseño de blog. Los blogs usualmente tienen dos columnas, una para el contenido principal que es más ancha y otra más estrecha para el contenido secundario (como widgets, niveles de navegación secundarios y anuncios). 

+ +

Example of a 2 column layout for a blog        A 2 column layout with the main content on the left column

+ +

En este ejemplo, mira la imagen (B1) justo debajo del encabezado. Está relacionada con el contenido principal, pero el contenido principal tiene sentido sin esta, de este modo pudieras pensar que la imagen forma parte del contenido principal o del lateral. En realidad no importa. Lo que importa es que si pones algo justo debajo del encabezado, debería ser parte del contenido principal o estar directamente relacionado con este. 

+ +

Es una trampa

+ +

MICA. Este es un poco más complicado. Parece un diseño de tres columnas...

+ +

Example of a false 3 columns layout        It looks like a 3 columns layout but actually, the aside content is floating around.

+ +

...pero no lo es. B1 y B2 flotan alrededor del contenido principal. Recuerda esa palabra "float"--te acordarás cuando empieces a aprender sobre {{Glossary("CSS")}}.

+ +

¿Por qué pensarías que es un diseño de tres columnas? Porque la imagen en la parte superior derecha está en forma de L, porque B1 parece una columna sosteniendo el conenido principal desplazado, y porque la "M" y la  "I" del logo MICA crean una línea de fuerza vertical.

+ +

Este es un buen ejemplo de diseño clásico que admite cierta creatividad. Los diseños simples son más fáciles de implementar, pero deje espacio expresar su creatividad en el área.

+ +

Un diseño mucho más complicado

+ +

La Opera de Paris.

+ +

An example of a tricky layout.        This is a 2 column layout but the header is overlaping the main content.

+ +

Básicamente un diseño de dos columnas, pero notarás muchos ajustes por aquí y por allá que rompen visualmente el diseño. Especialmente, el encabezado se superposiciona a la imagen del contenido principal. La manera en que la curva del menú del encabezado se une con la curva en el fondo de la imagen, hacen que el encabezado y el contenido principal parezcan un solo componente a pesar de que son técnicamente completamente distintos. 

+ +

Como ves, puedes crear maravillosos sitios web incluso sólo con diseños básicos. Échale una mirada a tus propios sitos web favoritos y pregúntate a ti mismo, ¿dónde está el encabezado, el pie de página, el contenido principal y el contenido secundario? Esto te inspirará para tu propio diseño y te dará buenas pistas sobre para cuáles diseños funciona y para cuáles no. 

diff --git a/files/es/learn/common_questions/cuanto_cuesta/index.html b/files/es/learn/common_questions/cuanto_cuesta/index.html deleted file mode 100644 index aeffd72c64..0000000000 --- a/files/es/learn/common_questions/cuanto_cuesta/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: ¿Cuánto cuesta hacer algo en la Web? -slug: Learn/Common_questions/Cuanto_cuesta -tags: - - Comenzando - - Herramientas de desarrollo web - - Principiante - - alojamiento - - costo - - hosting -translation_of: Learn/Common_questions/How_much_does_it_cost ---- -
-

Dedicarse a la web no es tan barato como parece. En este artículo discutimos cuánto puedes tener que gastar, y por qué.

-
- - - - - - - - - - - - -
Prerrequisitos:Deberías ya entender qué software necesitas, la diferencia entre una página web, un sitio web, etc., y qué es un nombre de dominio.
Objetivo:Examina el proceso completo para crear un sitio web y descubre cuánto te puede costar cada paso.
- -

Resumen

- -

Al lanzar un sitio web, puedes no gastar nada, o puede que el costo sea muy elevado. En este artículo discutimos acerca de cuánto cuesta todo y cómo obtienes lo que pagas (o no pagas).

- -

Software

- -

Editores de texto

- -

Probablemente tienes un editor de texto: tal como Notepad en Windows, Gedit en Linux, TextEdit en Mac. Le resultará más fácil escribir código si elige un editor que coloree el código, chequee la sintaxis y te ayude a mantener la estructura del programa. 

- -

Muchos editores son gratis, por ejemplo Atom, Brackets, Bluefish, TextWrangler, Eclipse, y Netbeans. Algunos, como Sublime Text, los puedes probar tanto como quieras, pero se te anima a pagar. Otros, como PhpStorm, pueden costar entre unas pocas docenas y 200 dólares, en dependencia del plan que pague. Algunos de ellos, como Microsoft Visual Studio, pueden costar cientos o miles de dólares; aunque Visual Studio Express is gratis para desarrolladores individuales o proyectos de código abierto. A menudo, los editores pagados tienen una versión de prueba.

- -

Para comenzar, le segerimos probar con diferentes editores, para tener un indicio de cuál trabaja mejor para ti. Si está solamente escribiendo código simple de {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("Javascript")}}, utilice un editor sencillo.

- -

El el precio no refleja de manera confiable la calidad o utilidad de un editor de texto. Tienes que probarlo por ti mismo y decidir si se ajusta a tus necesidades. Por ejemplo, Sublime Text es barato, pero tiene muhos plugins gratis que pueden extender su funcionalidad. 

- -

Editores de imágenes

- -

Tu sistema incluye seguramente un simple editor de imágenes, o visor: Paint en Windows, Eye of Gnome en Ubuntu, Preview en Mac. Estos programas son relativamente limitados, pronto gustarás tener un editor más potente para añadir capas, efectos y agrupamiento de imágenes.

- -

Los editores pueden ser gratis (GIMP, Paint.NET), de costo moderado (PaintShop Pro, menos de $100), o cientos de dólares (Adobe Photoshop).

- -

Puedes usar cualquiera de ellos, ya que tienen funciones similares, aunque algunos son tan completos que nunca vas a utilizar cada característica. Si en algún punto necesitas intercambiar proyectos con otros diseñadores, deberías descubrir qué herramientas utilizan. Los editores pueden exportar los proyectos finalizados a formatos de archivo estándares, pero cada editor guarda los proyectos actuales en su formato especializado. La mayoría de las imágenes en Internet están protegidas por los derechos de autor, por lo que es mejor chequear la licencia del aechivo antes de utilizarlo. Sitios como Pixabay proporcionan imágenes bajo la licencia CC0, así que la puedes usar, editar y publicar incluso con modificaciones para uso comercial.

- -

Editores de medios

- -

Si desea incluir video o audio en su sitio web, puede incrustar servicios online (por ejemplo YouTube, Vimeo, or Dailymotion), o incluir sus propios videos (ver más abajo los costos de ancho de banda).

- -

Para archivos de audio, puede encontrar software gratuito(Audacity, Wavosaur), o pagar hasta unos poco cientos de dólares (Sony Sound Forge, Adobe Audition). Sin embargo, el software de edición de vídeo puede ser gratis (PiTiVi, OpenShot for Linux, iMovie for Mac), menos de $100 (Adobe Premiere Elements), o varios cientos de dólares (Adobe Premiere Pro, Avid Media Composer, Final Cut Pro). El software recibido con tu cámara digital puede cubrir todas tus necesidades.

- -

Herramientas de publicación

- -

Además necesitas una forma de subir archivos: desde tu disco duro a un servidor web distante. Para hacer esto deberías utilizar una herramienta de publicación tal como un cliente  (S)FTP, RSync, o Git/GitHub.

- -

Cada sistema operativo incluye un cliente (S)FTP, como parte de su administrador de archivos. Windows Explorer, Nautilus (un administrador de archivos común en Linux), y Mac Finder inclueyen todos esta funcionalidad. Sin embargo, las personas a menudo seleccionan clientes (S)FTP dedicados a mostrar directorios locales y remotos y almacenar contraseñas de servidor.

- -

Si desea instalar un cliente (S)FTP, existen varias opciones seguras y gratuitas: por ejemplo, FileZilla para todas las plataformas, WinSCP para Windows, Cyberduck para Mac o Windows, y otros más.

- -

Debido a que el protocolo FTP es inseguro, deberías asegurarte de utilizar SFTP — la versión segura, encriptada de FTP que la mayoría de los sitios de alojamiento (en inglés hosting) actuales ofrecen por defecto— u otra solución segura como Rsync sobre SSH.

- - - -

Ya debes tener un navegador o puedes conseguirlo gratuito. Si lo necesitas, descarga Firefox aquí o Google Chrome aquí.

- -

Acceso a la web

- -

Computadora / módem

- -

Necesitas una computadora. El costo puede variar mucho, en dependencia de tu presupuesto, y dónde vivas. Para publicar un sitio web básico, sólo necesitas una computadora básica capaz de ejecutar, por lo que el nivel de entrada puede ser bastante bajo. 

- -

Por supuesto, necesitarás una computadora más formal si quieres producir diseños complicados, retocar fotos, o producir archivos de audio y vídeo. 

- -

Necesitas subir contenido a un servidor remoto (ver Alojamiento más abajo), por lo que necesitas un módem.Tu proveedor {{Glossary("ISP")}} puede venderte la conexión a internet por unos pocos dólares al mes, aunque tu presupuesto pudiera variar, en dependencia de tu localización.

- -

Acceso del Proveedor ISP

- -

Asegúrese de contar con suficiente {{Glossary("Ancho de banda", "ancho de banda")}}:

- - - -

Alojamiento

- -

Entendiendo el ancho de banda

- -

Los proveedores de alojamiento te cobran de acuerdo a cuánto {{Glossary("Ancho de banda", "ancho de banda")}} consume tu sitio web. . Esto depende de cuántas personaas, y robots de rastreo Web, accedan a tu contenido durante un tiempo dado, y cuánto espacio en el servidor tu contenido ocupa. Esta es la razón por la cual las personas usualmente almacenan sus videos en servicios dedicadostales como Youtube, Dailymotion, y Vimeo. Por ejemplo, tu proveedor puede tener un plan que incluye hasta varios miles de visitantes por díam por un uso “razonable”. Sea cuidadoso, puesto que puede variar mucho de un servidor de alojamiento a otro. Como regla de oro, reconozca que el servicio de alojamiento confiable, pagado y personal puede costar alrededor de 10 a 15 dólares al mes. 

- -
-

Note que que no existe el ancho de banda “ilimitado”. Si consumes una enorme cantidad de ancho de banda, espere pagar una enorme cantidad de dinero.

-
- -

Nombre de dominio

- -

Su nombre de dominio tiene que ser comprado a través de un proveedor de nombres (un registrador). Tu proveedor de alojamiento puede además ser un registrador (por ejemplo 1&1 y Gandi  son al mismo tiempo registradores y proveedores de alojamiento). El nombre de dominio usualmente cuesta $5-15 por año. Este costo varía en dependencia de:

- - - -

Alojamiento de aficionados vs. Alojamiento “empaquetado”

- -

Cuando deseas publicar un sitio web, puedes hacer todo por ti mismo: preparar una base de datos (si es necesaria), Sistema de Gestión de Contenidos, or {{Glossary("CMS")}} (como Wordpress, Dotclear, spip, etc.), subir tus propias plantillas o contenido preeditado.

- -

Pudieras utilizar el entorno de tu proveedor de alojamiento, por aproximadamente de 10 a 15 dólares al mes, o suscribirse directamente a un servicio de alojamiento con CMS pre-empaquetado (por ejemplo, Wordpress, Tumblr, Blogger). Para esta última no tienes que pagar nada, pero puedes tener menos control sobre las plantillas y otras opciones. 

- -

Alojamiento gratuito vs. alojamiento pagado

- -

Te pudieras preguntar, ¿por qué pago por mi alojamiento cuando existen tantos servicios gratuitos?

- - - -

Es mejor pagar el alojamiento que depender de alojamiento gratuito, ya que en la mayoría de los sitios pagados es posible trasladar tus archivos fácilmente y el tiempo de actividad está garantizado. La mayoría de los proveedores de alojamiento te dan un gran descuento para comenzar. 

- -

Algunas personan optan por un enfoque mixto. Por ejemplo, su blog principal en un sitio pagado con un nombre de dominio completo, y a su vez contenido espóntaneo, menos estratégico en un servicio de alojamiento gratuito.

- -

Agencias y alojamiento de sitios web profesionales

- -

Si desea un sitio web profesional, probablemente le pedirás a una agencia web que lo haga por ti.
-
- Aquí, los costos dependen de múltiples factores, tales como: 

- - - -

...y para alojamiento:

- - - -

En dependencia de cómo responda estas preguntas, su sitio pudiera costar miles hasta cientos de miles de dólares.

- -

Próximos pasos

- -

Ahora que entiende que cantidad de dinero su sitio puede costarle, es tiempo de comenzar a diseñar un sitio web y preparar su entorno de trabajo.

- - diff --git "a/files/es/learn/common_questions/dise\303\261os_web_comunes/index.html" "b/files/es/learn/common_questions/dise\303\261os_web_comunes/index.html" deleted file mode 100644 index 7e05cbcaad..0000000000 --- "a/files/es/learn/common_questions/dise\303\261os_web_comunes/index.html" +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: ¿Qué contienen los diseños web comunes? -slug: Learn/Common_questions/diseños_web_comunes -tags: - - CSS - - Común - - Diseño - - Diseño Común - - HTML - - Principiante -translation_of: Learn/Common_questions/Common_web_layouts ---- -
{{IncludeSubnav("/en-US/Learn")}}
- -
-

Cuando diseña páginas para su sitio web es bueno tener una idea de los diseños más comunes.

-
- - - - - - - - - - - - -
Prerrequisitos:Asegúrese que usted ya ha pensado sobre lo que quiere lograr con su proyecto web.
Objetivo:Aprender dónde colocar las cosas en sus páginas web, y cómo hacerlo. 
- -

Resumen

- -

Existe una razón para que hablemos sobre diseño web. Se comienza con una página en blanco, y se pueden tomar muchas direcciones. Si no tienes mucha experiencia, comenzar con una página en blanco pudiera ser un poco temible. Nosotros tenemos alrededor de 25 años de experiencia y te daremos algunas reglas básicas para ayudarte a diseñar tu sitio. 

- -

Aún ahora con el nuevo enfoque de la web para móviles, la mayoría de las páginas web principales son construídas a partir de las siguientes partes:

- -
-
Encabezado
-
Visible en la parte superior de cada página de un sitio. Contiene información relevante para todas las páginas (como el nombre del sitio o el logo) y un sistema de navegación fácil de usar.
-
Contenido principal
-
Es el área más grande, contiene contenido único para la página actual.
-
Contenido secundario
-
1) Información complementaria del contenido principal; 2) información compartida entre un subconjunto de páginas; 3) sistema de navegación alternativo. De hecho, todo lo que no es absolutamente requerido por el contenido de la página principal. 
-
Pie de página
-
Visible en la parte inferior de cada página de un sitio. Análogamente al encabezado contiene información global, en este caso menos llamativa como avisos legales o información de contacto.
-
- -

Estos elementos son bastante comunes en todos los factores de forma, pero pueden ser dispuestos de diferentes maneras. Aquí se presentan algunos ejemplos (1 representa encabezado, 2 pie de página; A contenido principal; B1, B2 barras laterales):

- -

Diseño de una columna. Especialmente importante para navegadores de móviles de modo que no se llene la pequeña pantalla.

- -

Example of a 1 column layout: Main on top and asides stacked beneath it.

- -

Diseño de dos columnas. A menudo utilizado para tabletas, ya que tienen pantallas de tamaño medio.

- -

 Example of a basic 2 column layout: One aside on the left column, and main on the right column. Example of a basic 2 column layout: One aside on the right column, and main on the left column.

- -

Diseños de tres columnas. Solamene adecuado para escritorios con pantallas grandes. (Incluso muchos usuarios de escritorio prefieren ver cosas en pequeñas ventanas que en pantalla completa.)

- -

Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column. Another example of a 3 column layout: Aside side by side on the left, Main on the right column. Another example of a 3 column layout: Aside side by side on the right, Main on the left column.

- -

La verdadera diversión comienza cuando empiezas a mezclarlos todos juntos.

- -

Example of mixed layout: Main on top and asides beneath it side by side. Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main. Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row.…

- -

Estos son solo ejemplos y eres bastante libre de diseñar las cosas como quieras. Puedes notar que mientras el contenido se puede mover alrededor de la pantalla, siempre se mantiene el encabezado (1) en la parte superior y el pie de página (2) en la parte inferior. Además, el contenido principal (A) es lo más importante, así que dale la mayor parte del espacio. 

- -

Estas son reglas del juego que puedes aprovechar. Desde luego, existen diseños complejos y excepciones. En otros artículos discutiremos cómo diseñar sitios responsivos (sitios que cambian en dependencia del tamaño de la pantalla) y sitios cuyos diseños varían entre las páginas. Por ahora, es mejor mantener tu diseño consistente en todo tu sitio. 

- -

Aprendizaje activo

- -

Aún no hay aprendizaje activo disponible. Por favor, considere contribuir.

- -

Profundización

- -

Estudiemos algunos ejemplos más concretos tomados de sitios web bien conocidos. 

- -

Diseño de una columna

- -

Aplicación de Invision. Un diseño típico de una columna proporcionando toda la información linealmente en una sola página. 

- -

Example of a 1 column layout in the wild        1 column layout with header, main content, a stack of aside contents and a footer

- -

Bastante sencillo. Sólo recuerda que muchas personas navegarán por tu sitio desde escritorios, así que haz tu contenido también utilizable allí.

- -

Diseño de dos columnas.

- -

Abduzeedo, un simple diseño de blog. Los blogs usualmente tienen dos columnas, una para el contenido principal que es más ancha y otra más estrecha para el contenido secundario (como widgets, niveles de navegación secundarios y anuncios). 

- -

Example of a 2 column layout for a blog        A 2 column layout with the main content on the left column

- -

En este ejemplo, mira la imagen (B1) justo debajo del encabezado. Está relacionada con el contenido principal, pero el contenido principal tiene sentido sin esta, de este modo pudieras pensar que la imagen forma parte del contenido principal o del lateral. En realidad no importa. Lo que importa es que si pones algo justo debajo del encabezado, debería ser parte del contenido principal o estar directamente relacionado con este. 

- -

Es una trampa

- -

MICA. Este es un poco más complicado. Parece un diseño de tres columnas...

- -

Example of a false 3 columns layout        It looks like a 3 columns layout but actually, the aside content is floating around.

- -

...pero no lo es. B1 y B2 flotan alrededor del contenido principal. Recuerda esa palabra "float"--te acordarás cuando empieces a aprender sobre {{Glossary("CSS")}}.

- -

¿Por qué pensarías que es un diseño de tres columnas? Porque la imagen en la parte superior derecha está en forma de L, porque B1 parece una columna sosteniendo el conenido principal desplazado, y porque la "M" y la  "I" del logo MICA crean una línea de fuerza vertical.

- -

Este es un buen ejemplo de diseño clásico que admite cierta creatividad. Los diseños simples son más fáciles de implementar, pero deje espacio expresar su creatividad en el área.

- -

Un diseño mucho más complicado

- -

La Opera de Paris.

- -

An example of a tricky layout.        This is a 2 column layout but the header is overlaping the main content.

- -

Básicamente un diseño de dos columnas, pero notarás muchos ajustes por aquí y por allá que rompen visualmente el diseño. Especialmente, el encabezado se superposiciona a la imagen del contenido principal. La manera en que la curva del menú del encabezado se une con la curva en el fondo de la imagen, hacen que el encabezado y el contenido principal parezcan un solo componente a pesar de que son técnicamente completamente distintos. 

- -

Como ves, puedes crear maravillosos sitios web incluso sólo con diseños básicos. Échale una mirada a tus propios sitos web favoritos y pregúntate a ti mismo, ¿dónde está el encabezado, el pie de página, el contenido principal y el contenido secundario? Esto te inspirará para tu propio diseño y te dará buenas pistas sobre para cuáles diseños funciona y para cuáles no. 

diff --git a/files/es/learn/common_questions/how_much_does_it_cost/index.html b/files/es/learn/common_questions/how_much_does_it_cost/index.html new file mode 100644 index 0000000000..aeffd72c64 --- /dev/null +++ b/files/es/learn/common_questions/how_much_does_it_cost/index.html @@ -0,0 +1,162 @@ +--- +title: ¿Cuánto cuesta hacer algo en la Web? +slug: Learn/Common_questions/Cuanto_cuesta +tags: + - Comenzando + - Herramientas de desarrollo web + - Principiante + - alojamiento + - costo + - hosting +translation_of: Learn/Common_questions/How_much_does_it_cost +--- +
+

Dedicarse a la web no es tan barato como parece. En este artículo discutimos cuánto puedes tener que gastar, y por qué.

+
+ + + + + + + + + + + + +
Prerrequisitos:Deberías ya entender qué software necesitas, la diferencia entre una página web, un sitio web, etc., y qué es un nombre de dominio.
Objetivo:Examina el proceso completo para crear un sitio web y descubre cuánto te puede costar cada paso.
+ +

Resumen

+ +

Al lanzar un sitio web, puedes no gastar nada, o puede que el costo sea muy elevado. En este artículo discutimos acerca de cuánto cuesta todo y cómo obtienes lo que pagas (o no pagas).

+ +

Software

+ +

Editores de texto

+ +

Probablemente tienes un editor de texto: tal como Notepad en Windows, Gedit en Linux, TextEdit en Mac. Le resultará más fácil escribir código si elige un editor que coloree el código, chequee la sintaxis y te ayude a mantener la estructura del programa. 

+ +

Muchos editores son gratis, por ejemplo Atom, Brackets, Bluefish, TextWrangler, Eclipse, y Netbeans. Algunos, como Sublime Text, los puedes probar tanto como quieras, pero se te anima a pagar. Otros, como PhpStorm, pueden costar entre unas pocas docenas y 200 dólares, en dependencia del plan que pague. Algunos de ellos, como Microsoft Visual Studio, pueden costar cientos o miles de dólares; aunque Visual Studio Express is gratis para desarrolladores individuales o proyectos de código abierto. A menudo, los editores pagados tienen una versión de prueba.

+ +

Para comenzar, le segerimos probar con diferentes editores, para tener un indicio de cuál trabaja mejor para ti. Si está solamente escribiendo código simple de {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("Javascript")}}, utilice un editor sencillo.

+ +

El el precio no refleja de manera confiable la calidad o utilidad de un editor de texto. Tienes que probarlo por ti mismo y decidir si se ajusta a tus necesidades. Por ejemplo, Sublime Text es barato, pero tiene muhos plugins gratis que pueden extender su funcionalidad. 

+ +

Editores de imágenes

+ +

Tu sistema incluye seguramente un simple editor de imágenes, o visor: Paint en Windows, Eye of Gnome en Ubuntu, Preview en Mac. Estos programas son relativamente limitados, pronto gustarás tener un editor más potente para añadir capas, efectos y agrupamiento de imágenes.

+ +

Los editores pueden ser gratis (GIMP, Paint.NET), de costo moderado (PaintShop Pro, menos de $100), o cientos de dólares (Adobe Photoshop).

+ +

Puedes usar cualquiera de ellos, ya que tienen funciones similares, aunque algunos son tan completos que nunca vas a utilizar cada característica. Si en algún punto necesitas intercambiar proyectos con otros diseñadores, deberías descubrir qué herramientas utilizan. Los editores pueden exportar los proyectos finalizados a formatos de archivo estándares, pero cada editor guarda los proyectos actuales en su formato especializado. La mayoría de las imágenes en Internet están protegidas por los derechos de autor, por lo que es mejor chequear la licencia del aechivo antes de utilizarlo. Sitios como Pixabay proporcionan imágenes bajo la licencia CC0, así que la puedes usar, editar y publicar incluso con modificaciones para uso comercial.

+ +

Editores de medios

+ +

Si desea incluir video o audio en su sitio web, puede incrustar servicios online (por ejemplo YouTube, Vimeo, or Dailymotion), o incluir sus propios videos (ver más abajo los costos de ancho de banda).

+ +

Para archivos de audio, puede encontrar software gratuito(Audacity, Wavosaur), o pagar hasta unos poco cientos de dólares (Sony Sound Forge, Adobe Audition). Sin embargo, el software de edición de vídeo puede ser gratis (PiTiVi, OpenShot for Linux, iMovie for Mac), menos de $100 (Adobe Premiere Elements), o varios cientos de dólares (Adobe Premiere Pro, Avid Media Composer, Final Cut Pro). El software recibido con tu cámara digital puede cubrir todas tus necesidades.

+ +

Herramientas de publicación

+ +

Además necesitas una forma de subir archivos: desde tu disco duro a un servidor web distante. Para hacer esto deberías utilizar una herramienta de publicación tal como un cliente  (S)FTP, RSync, o Git/GitHub.

+ +

Cada sistema operativo incluye un cliente (S)FTP, como parte de su administrador de archivos. Windows Explorer, Nautilus (un administrador de archivos común en Linux), y Mac Finder inclueyen todos esta funcionalidad. Sin embargo, las personas a menudo seleccionan clientes (S)FTP dedicados a mostrar directorios locales y remotos y almacenar contraseñas de servidor.

+ +

Si desea instalar un cliente (S)FTP, existen varias opciones seguras y gratuitas: por ejemplo, FileZilla para todas las plataformas, WinSCP para Windows, Cyberduck para Mac o Windows, y otros más.

+ +

Debido a que el protocolo FTP es inseguro, deberías asegurarte de utilizar SFTP — la versión segura, encriptada de FTP que la mayoría de los sitios de alojamiento (en inglés hosting) actuales ofrecen por defecto— u otra solución segura como Rsync sobre SSH.

+ + + +

Ya debes tener un navegador o puedes conseguirlo gratuito. Si lo necesitas, descarga Firefox aquí o Google Chrome aquí.

+ +

Acceso a la web

+ +

Computadora / módem

+ +

Necesitas una computadora. El costo puede variar mucho, en dependencia de tu presupuesto, y dónde vivas. Para publicar un sitio web básico, sólo necesitas una computadora básica capaz de ejecutar, por lo que el nivel de entrada puede ser bastante bajo. 

+ +

Por supuesto, necesitarás una computadora más formal si quieres producir diseños complicados, retocar fotos, o producir archivos de audio y vídeo. 

+ +

Necesitas subir contenido a un servidor remoto (ver Alojamiento más abajo), por lo que necesitas un módem.Tu proveedor {{Glossary("ISP")}} puede venderte la conexión a internet por unos pocos dólares al mes, aunque tu presupuesto pudiera variar, en dependencia de tu localización.

+ +

Acceso del Proveedor ISP

+ +

Asegúrese de contar con suficiente {{Glossary("Ancho de banda", "ancho de banda")}}:

+ + + +

Alojamiento

+ +

Entendiendo el ancho de banda

+ +

Los proveedores de alojamiento te cobran de acuerdo a cuánto {{Glossary("Ancho de banda", "ancho de banda")}} consume tu sitio web. . Esto depende de cuántas personaas, y robots de rastreo Web, accedan a tu contenido durante un tiempo dado, y cuánto espacio en el servidor tu contenido ocupa. Esta es la razón por la cual las personas usualmente almacenan sus videos en servicios dedicadostales como Youtube, Dailymotion, y Vimeo. Por ejemplo, tu proveedor puede tener un plan que incluye hasta varios miles de visitantes por díam por un uso “razonable”. Sea cuidadoso, puesto que puede variar mucho de un servidor de alojamiento a otro. Como regla de oro, reconozca que el servicio de alojamiento confiable, pagado y personal puede costar alrededor de 10 a 15 dólares al mes. 

+ +
+

Note que que no existe el ancho de banda “ilimitado”. Si consumes una enorme cantidad de ancho de banda, espere pagar una enorme cantidad de dinero.

+
+ +

Nombre de dominio

+ +

Su nombre de dominio tiene que ser comprado a través de un proveedor de nombres (un registrador). Tu proveedor de alojamiento puede además ser un registrador (por ejemplo 1&1 y Gandi  son al mismo tiempo registradores y proveedores de alojamiento). El nombre de dominio usualmente cuesta $5-15 por año. Este costo varía en dependencia de:

+ + + +

Alojamiento de aficionados vs. Alojamiento “empaquetado”

+ +

Cuando deseas publicar un sitio web, puedes hacer todo por ti mismo: preparar una base de datos (si es necesaria), Sistema de Gestión de Contenidos, or {{Glossary("CMS")}} (como Wordpress, Dotclear, spip, etc.), subir tus propias plantillas o contenido preeditado.

+ +

Pudieras utilizar el entorno de tu proveedor de alojamiento, por aproximadamente de 10 a 15 dólares al mes, o suscribirse directamente a un servicio de alojamiento con CMS pre-empaquetado (por ejemplo, Wordpress, Tumblr, Blogger). Para esta última no tienes que pagar nada, pero puedes tener menos control sobre las plantillas y otras opciones. 

+ +

Alojamiento gratuito vs. alojamiento pagado

+ +

Te pudieras preguntar, ¿por qué pago por mi alojamiento cuando existen tantos servicios gratuitos?

+ + + +

Es mejor pagar el alojamiento que depender de alojamiento gratuito, ya que en la mayoría de los sitios pagados es posible trasladar tus archivos fácilmente y el tiempo de actividad está garantizado. La mayoría de los proveedores de alojamiento te dan un gran descuento para comenzar. 

+ +

Algunas personan optan por un enfoque mixto. Por ejemplo, su blog principal en un sitio pagado con un nombre de dominio completo, y a su vez contenido espóntaneo, menos estratégico en un servicio de alojamiento gratuito.

+ +

Agencias y alojamiento de sitios web profesionales

+ +

Si desea un sitio web profesional, probablemente le pedirás a una agencia web que lo haga por ti.
+
+ Aquí, los costos dependen de múltiples factores, tales como: 

+ + + +

...y para alojamiento:

+ + + +

En dependencia de cómo responda estas preguntas, su sitio pudiera costar miles hasta cientos de miles de dólares.

+ +

Próximos pasos

+ +

Ahora que entiende que cantidad de dinero su sitio puede costarle, es tiempo de comenzar a diseñar un sitio web y preparar su entorno de trabajo.

+ + diff --git a/files/es/learn/common_questions/que_es_un_servidor_web/index.html b/files/es/learn/common_questions/que_es_un_servidor_web/index.html deleted file mode 100644 index 4969677db6..0000000000 --- a/files/es/learn/common_questions/que_es_un_servidor_web/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Que es un servidor WEB? -slug: Learn/Common_questions/Que_es_un_servidor_WEB -tags: - - Infraestructura - - Principiante - - necesitaEsquema -translation_of: Learn/Common_questions/What_is_a_web_server ---- -
-

En este articulo veremos que son los servidores, cómo funcionan y por qué son importantes.

-
- - - - - - - - - - - - -
Prerequisitos:Debes saber como funciona internet, y entendiendo la diferencia entre pagina web, sitio web, servidor y motor de busqueda
Objetivo:Aprender qué es un servidor web y comprender cómo funciona.
- -

Sumario

- -

Con "Servidor web" podemos referirnos a hardware o software, o a ambos trabajando juntos.

- -
    -
  1. En cuanto a hardware, un servidor web es una computadora que almacena los archivos que componen un sitio web (ej.  documentos HTML , imágenes, hojas de estilos CSS y archivo JavaScript) y los entrega al dispositivo del usuario final. Está conectado a internet y es accesible a través de un nombre de dominio como mozilla.org.
    2. -
  2. En cuanto a software, un servidor web tiene muchas partes encargadas del control sobre cómo tienen acceso los usuarios a los archivos, por lo menos un servidor HTTP. Un servidor HTTP es una pieza de software que comprende {{Glossary("URL","URLs")}} (direcciones web) y {{Glossary("HTTP")}} (el protocolo que tu navegador usa para ver las páginas web).
    3. -
- -

Al nivel más básico, siempre que un navegador necesite un archivo almacenado en un  servidor web, el navegador hará una solicitud al servidor mediante la vía HTTP. Cuando la petición llega al servidor web correcto (hardware), el  servidor HTTP  (software) envía el archivo antes solicitado, tambien a través de HTTP.

- -

Basic representation of a client/server connection through HTTP

- -

Para publicar un sitio web, necesitarás un servidor web dinámico o estático.

- -

Un servidor web estático, o pila, consiste en una computadora (hardware) con un servidor HTTP (software). Llamamos a este "estático" debido a que el servidor envía los archivos almacenados "tal cual" a tu navegador.

- -

Un servidor web dinámico consiste en un servidor web estático con un software extra , lo común es que sea una aplicación servidor y una  base de datos. Llamamos a esto "dinámico" por que la aplicacion servidor actualiza los archivos almacenados en la base de datos antes de enviarlos mediante el servidor HTTP.

- -

Por ejemplo, para ver la página que ves en tu navegador finalmente, el servidor aplicación puede mostrar el diseño HTML con contenido desde una base de datos. Sitios como MDN o Wikipedia tienen cientos de páginas web, que no son realmente archivos HTML, si no una estrucura HTML asociada a una gigantesca base de datos. Esto hace mas fácil y rápido el mantenimiento y entrega del contenido.

- -

Aprendizaje activo

- -

No hay aprendizaje activo disponible. Por favor, considere colaborar.

- -

Inmersión más profunda

- -

Para recuperar una página web, como ya dijimos, su navegador envía una solicitud al servidor web, que procede a buscar el archivo solicitado en su propio espacio de almacenamiento. Al encontrar el archivo, el servidor lo lee, lo procesa según sea necesario y lo envía al navegador. Veamos esos pasos con más detalle.

- -

Alojamiento de archivos (Hosting)

- -

Un servidor web primero debe almacenar los archivos del sitio web, es decir, todos los documentos HTML y sus medios relacionados, incluidas las imágenes, las hojas de estilo CSS, los archivos JavaScript, las fuentes y videos.

- -

Técnicamente, puede alojar todos esos archivos en su propia computadora, pero es mucho más conveniente almacenarlos en un servidor web dedicado que:

- - - -

Por todas estas razones, encontrar un buen proveedor de alojamiento es una parte clave del desarrollo de su sitio web. Investigue a través de los diversos servicios que ofrecen las compañías y elija uno que se ajuste a sus necesidades y a su presupuesto (los servicios van desde los gratuitos hasta los miles de dólares al mes). Puede encontrar mas información en este artículo.

- -

Una vez que configura una solución de alojamiento web, solo tiene que cargar sus archivos en su servidor web.

- -

Comunicación a través de HTTP

- -

En segundo lugar, un servidor web brinda soporte para HTTP (Hypertext Transfer Protocol ó  Protocolo de Transferencia de Hipertexto). Como su nombre lo indica, HTTP especifica cómo transferir hypertext (es decir, documentos web vinculados) entre dos computadoras.

- -

Un protocolo es un conjunto de reglas para la comunicación entre dos computadoras. HTTP es un protocolo textual, sin estado.

- -
-
Textual
-
Todos los comandos son de texto plano y legible para ser leído por humanos.
-
Sin estado
-
Ni el servidor ni el cliente recuerdan las comunicaciones anteriores. Por ejemplo, al confiar solo en HTTP, un servidor no puede recordar la contraseña que ingresó ni el paso que está realizando en una transacción. Necesita un servidor de aplicaciones para tareas como esa. (Cubriremos ese tipo de tecnología en otros artículos).
-
- -

HTTP proporciona reglas claras sobre cómo se comunican un cliente y un servidor. Cubriremos el propio HTTP en un artículo técnico más adelante. Por ahora, sólo sé consciente de estas cosas:

- - - -

The MDN 404 page as an example of such error page En un servidor web, el servidor HTTP es responsable de procesar y responder las solicitudes entrantes.

- -
    -
  1. Al recibir una solicitud, un servidor HTTP primero verifica si la URL solicitada coincide con un archivo existente.
    2. -
  2. Si es así, el servidor web envía el contenido del archivo de nuevo al navegador. Si no, un servidor de aplicaciones construye el archivo necesario.
    3. -
  3. Si ninguno de los procesos es posible, el servidor web devuelve un mensaje de error al navegador, generalmente "404 Not Found". ( Ese error es tan común que muchos diseñadores web pasan bastante tiempo diseñando páginas de error 404.)
    4. -
- -

Contenido Estático vs. Dinámico

- -

En términos generales, un servidor puede entregar contenido estático o dinámico. "Estático" significa "servido como está". Los sitios web estáticos son los más fáciles de configurar, por lo que le sugerimos que convierta su primer sitio en un sitio estático.

- -

"Dinámico" significa que el servidor procesa el contenido o incluso lo genera desde una base de datos. Esta solución proporciona más flexibilidad, pero se vuelve más difícil de manejar, lo que hace que sea mucho más complejo desarrollar el sitio web.

- -

Tomemos por ejemplo la página que estás leyendo en este momento. En el servidor web que lo aloja, hay un servidor de aplicaciones que toma el contenido del artículo de una base de datos, lo formatea, lo coloca dentro de algunas plantillas HTML y le envía los resultados. En este caso, el servidor de aplicaciones se llama Kuma y está desarrollado con Python (utilizando el framework Django). El equipo de Mozilla creó Kuma para las necesidades específicas de MDN, pero hay muchas aplicaciones similares basadas en otras tecnologías.

- -

Hay tantos servidores de aplicaciones que es resulta difícil sugerir uno en particular. Algunos servidores de aplicaciones se adaptan a categorías específicas de sitios web como blogs, wikis o tiendas electrónicas; otros, llamados CMS (Content Management Systems ó Sistemas de Gestión de Contenidos), son más genéricos. Si está desarrollando un sitio web dinámico, tómese el tiempo para elegir una herramienta que se adapte a sus necesidades. A menos que desee aprender algo de programación de servidores web (¡es un área emocionante!), no necesita crear su propio servidor de aplicaciones.

- -

Próximos pasos

- -

Ahora que estás familiarizado con los servidores web, podrías:

- - diff --git a/files/es/learn/common_questions/que_software_necesito/index.html b/files/es/learn/common_questions/que_software_necesito/index.html deleted file mode 100644 index 92687e7d13..0000000000 --- a/files/es/learn/common_questions/que_software_necesito/index.html +++ /dev/null @@ -1,226 +0,0 @@ ---- -title: ¿Qué software necesito para construir un sitio web? -slug: Learn/Common_questions/Que_software_necesito -tags: - - Build a website - - Building - - Mecanismos Web - - Principiante - - software -translation_of: Learn/Common_questions/What_software_do_I_need ---- -
-

En este artículo se explican cuales componentes de software necesita para editar, cargar, o visualizar un sitio web. 

-
- - - - - - - - - - - - -
Prerrequisitos:Deberías conocer acerca de la diferencia entre páginas web, sitios web, servidores web, y moteres de búsqueda.
Objetivo:Aprender qué componentes de software necesita si quiere editar, cargar o visualizar un sitio web.
- -

Resumen

- -

Puede descargar la mayoría de los programas que necesita para el desarrollo web de forma gratuita. Proporcionaremos unos enlaces en este artículo. 

- -

Necesitarás herramientas para:

- - - -

Casi todos los sistemas operativos incluyen por defecto un editor de texto y un navegador, el cual puedes usar para ver los sitios web. Como resultado, usualmente sólo necesitas adquirir software para la transferencia de archivos a tu servidor web.

- -

Aprendizaje activo

- -

No hay aprendizaje activo disponible todavía. Por favor, considere contribuir.

- -

Profundización

- -

Creción y edición de páginas web

- -

Para crear y editar un sitio web, necesita un editor de texto. Editores de texto crean y modifican archivos de texto sin formato.  Otros formatos, como {{Glossary("RTF")}}, te permiten añadirle formato, como negrita y señalado, esos no son adecuados para escribir páginas web. Debe pensar bien qué editor de texto usar, ya que trabajará intensamente con él mientras construye el sitio web.

- -

Todos los sistemas operativos de escritorio traen un editor de texto básico. Estos editores son muy sencillos, pero les faltan características especiales para codificar páginas web. Si desea algo un poco más elegante, hay muchas herramientas de terceros disponibles. Editores de terceros, a menudo viene con características extra, como coloreado de sintaxis, autocompletado, secciones expandibles y búsqueda de código. A continuación se muestra una lista de algunos editores:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Sistema operativoEditor incorporadoEditor de terceros
Windows - - - -
Mac OS - - - -
Linux - - - -
Chrome OS  - -
- -

Aquí se muestra una captura de pantalla de un editor de texto avanzado:

- -

Screenshot of Notepad++. 

- -

Esta es una captura de panalla de un editor de texto online:

- -

Screenshot of ShiftEdit

- -

Subir archivos a la Web

- -

Cuando tu sitio web está listo para visualización pública , tendrás que subir tus páginas web a tu servidor web. Puedes comprar espacio en un servidor de varios proveedores (vea el artículo ¿Cuánto cuesta hacer algo en la web?). Una vez que establezca qué proveedor utilizar, el proveedor le enviará un correo con la información de acceso, usualmente en la forma de una URL SFTP, nombre de usuario, contraseña, y otra información necesaria para conectarte con su servidor. Tenga en cuenta que el protocolo (S)FTP está actualmente algo pasado de moda, mientras otros sistemas de carga de archivos están comenzando a volverse populares como RSync y Git/GitHub.

- -
-

Note: FTP es inherentemente inseguro. Deberías asegurarte de que tu proveedor de alojamiento permite el uso de una conexión segura, por ejemplo SFTP o RSync sobre SSH.

-
- -

Subir archivos a un sitio web es un paso muy importante mientras se crea un sitio web, por lo que sete tema se abarca en detalle en un artículo aparte. Por ahora, se presenta una lista de clientes (S)FTP gratuitos:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Sistema operativo Software FTP 
Windows - - - -
Linux - -
 Mac OS - -
 Chrome OS - -  
- - - -

Como ya sabe, necesita un navegador para ver los sitios web. Existen docenas  de opciones de navegadores para uso personal, pero cuando usted está desarrollando un sitio web debe probarlo al menos con los navegadores principales siguientes, para estar seguro de que su sitio web funciona para la mayoría de las personas:  

- - - -

Si su sitio está destinado a un grupo específico (por ejemplo, una plataforma técnica o país), puede que tenga que probar el sitio con navegadores adicionales, como Opera, Konqueror, o UC Browser.

- -

Sin embargo las pruebas se dificultan debido a que algunos navegadores sólo funcionan en determinados sistemas operativos. Apple Safari se ejecuta en iOS y Mac OS, mientras Internet Explorer corre solamente en Windows. Lo mejor es aprovechar los servicios como Browsershots o Browserstack. Browsershots proporciona capturas de pantallas de tu sitio web en diferentes navegadores. Browserstack  realmente te otorga acceso remoto a máquinas virtuales de modo que puedes probar tu sitio en los entornos más comunes. De manera alternativa, puedes instalar tu propia máquina virtual, pero se necesita algo de experiencia. ( Si escoge este camino, Microsoft tiene algunas herramientas para desarrolladores incluso una máquina virtual lista para utilizar en modern.ie.)

- -

Sin falta ejecute algunas pruebas en dispositivos reales, especialmente en dispositivos móviles reales. Simulación de dispositivos móviles es una tecnología nueva, en evolución y menos confiable que la simulación de escritorio. Desde luego, los dispositivos móviles son costosos, por lo que le sugerimos echar un vistazo a la inictiva de Laboratorios de dispositivos abiertos. Puede además compartir dispositivos quiere probar en diferentes plataformas sin gastar mucho.

- -

Próximos pasos

- - - -

 

diff --git "a/files/es/learn/common_questions/qu\303\251_es_una_url/index.html" "b/files/es/learn/common_questions/qu\303\251_es_una_url/index.html" deleted file mode 100644 index ef50be60ad..0000000000 --- "a/files/es/learn/common_questions/qu\303\251_es_una_url/index.html" +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: ¿Qué es una URL? -slug: Learn/Common_questions/Qué_es_una_URL -translation_of: Learn/Common_questions/What_is_a_URL ---- -
-

Este artículo habla sobre las Uniform Resource Locators (URLs), explicando qué son y cómo se estructuran.

-
- - - - - - - - - - - - -
Prerequisitos:Primero necesitas saber Como funciona Internet, qué es un servidor Web y los conceptos detrás de los enlaces en la web.
Objetivo:Aprenderás lo que es una URL y como funcionan en la Web.
- -

Resumen

- -

Junto con el {{Glossary("Hypertext", "Hipertexto")}} y {{Glossary("HTTP")}}, las URL son uno de los conceptos claves de la Web. Es el mecanismo usado por los {{Glossary("Browser","navegadores")}} para obtener cualquier recurso publicadon en la web.

- -

URL significa Uniform Resource Locator (Localizador de Recursos Uniforme). Una URL no es más que una direccion que es dada a un recurso único en la Web. En teoria, cada URL valida apunta a un único recurso. Dichos recursos pueden ser páginas HTML, documentos CSS, imagenes, etc. En la practica, hay algunas excepciones, siendo la más común una URL apuntando a un recurso que ya no existe o que ha sido movido. Como el recurso representado por la URL y la URL en si son manejadas por el servidor Web, depende del dueño del servidor web manejar ese recurso y su URL asociada adecuadamente.

- -

Active Learning

- -

There is no active learning available yet. Please, consider contributing.

- -

Profundizando

- -

Conceptos básicos: anatomía de una URL

- -

Aquí hay algunos ejemplos de URL:

- -
https://developer.mozilla.org
-https://developer.mozilla.org/en-US/docs/Learn/
-https://developer.mozilla.org/en-US/search?q=URL
- -

Cualquiera de esas URL se puede escribir en la barra de direcciones de su navegador para indicarle que cargue la página (recurso) asociada.

- -

Una URL está compuesta de diferentes partes, algunas obligatorias y otras opcionales. Veamos las partes más importantes usando la siguiente URL:

- -
http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
- -
-
Protocol
-
http es el protocolo. La primera parte de la URL indica qué protocolo debe usar el navegador. Un protocolo es un método establecido para intercambiar o transferir datos alrededor de una red informática. Por lo general, para sitios web es el protocolo HTTP o su versión segura, HTTPS. La Web requiere uno de estos dos, pero los navegadores también saben cómo manejar otros protocolos como mailto: (para abrir un cliente de correo) o ftp: para manejar la transferencia de archivos, así que no se sorprenda si ve tales protocolos.
-
Domaine Name
-
www.example.com es el nombre de dominio. Indica qué servidor web se solicita. Alternativamente, es posible usar directamente un {{Glossary("dirección IP")}}, pero debido a que es menos conveniente, no se usa con frecuencia en la Web.
-
Port
-
:80 es el puerto. Indica la "puerta" técnica utilizada para acceder a los recursos en el servidor web. Por lo general, se omite si el servidor web utiliza los puertos estándar del protocolo HTTP (80 para HTTP y 443 para HTTPS) para otorgar acceso a sus recursos. De lo contrario es obligatorio.
-
Path to the file
-
/path/to/myfile.html es la ruta al recurso en el servidor web. En los primeros días de la Web, una ruta como esta representaba la ubicación de un archivo físico en el servidor web. Hoy en día, es principalmente una abstracción manejada por servidores web sin ninguna realidad física.
-
Parameters
-
?key1=value1&key2=value2 son parámetros adicionales proporcionados al servidor web. Esos parámetros son una lista de pares clave/valor separados con el símbolo &. El servidor web puede usar esos parámetros para hacer cosas adicionales antes de devolver el recurso. Cada servidor web tiene sus propias reglas con respecto a los parámetros, y la única forma confiable de saber si un servidor web específico está manejando parámetros es preguntando al propietario del servidor web.
-
Anchor
-
#SomewhereInTheDocument es un ancla para otra parte del recurso en sí. Un ancla representa una especie de "marcador" dentro del recurso, dando al navegador las instrucciones para mostrar el contenido ubicado en ese lugar "marcado". En un documento HTML, por ejemplo, el navegador se desplazará hasta el punto donde se define el ancla; en un video o documento de audio, el navegador intentará ir a la hora que representa el ancla. Vale la pena señalar que la parte después del #, también conocido como el identificador de fragmento, nunca se envía al servidor con la solicitud.
-
- -

{{Note('Existen algunas partes extras y reglas extras con respecto a las URL, pero no son relevantes para usuarios habituales o desarrolladores web. No se preocupe por esto, no necesita conocerlos para construir y usar URL completamente funcionales.')}}

- -

Puede pensar en una URL como una dirección de correo postal normal: el protocolo representa el servicio postal que desea utilizar, el nombre de dominio es la ciudad o el pueblo y el puerto es como el código postal; la ruta representa el edificio donde se debe entregar su correo; los parámetros representan información adicional como el número de apartamento en el edificio; y, finalmente, el ancla representa a la persona real a la que ha dirigido su correo.

- -

Cómo usar las URL

- -

Se puede escribir cualquier URL dentro de la barra de direcciones del navegador para acceder al recurso que se encuentra detrás. ¡Pero esto es sólo la punta del iceberg!

- -

El lenguaje {{Glossary("HTML")}} — que se discutirá más adelante — hace un uso extensivo de las URL:

- - - -
-

Nota: Al especificar URL para cargar recursos como parte de una página (como cuando se usa <script>, <audio>, <img>, <video> y similares), solo debe usar URL HTTP y HTTPS. El uso de FTP, por ejemplo, no es particularmente seguro y muchos navegadores ya no lo admiten.

-
- -

Otras tecnologías, como {{Glossary("CSS")}} o {{Glossary("JavaScript")}}, usan URLs ampliamente, y estos son realmente el corazón de la Web.

- -

URL absolutas vs URL relativas

- -

Lo que vimos arriba se llama URL absoluta, pero también hay algo llamado URL relativa. Examinemos lo que significa esa distinción con más detalle.

- -

Las partes requeridas de una URL dependen en gran medida del contexto en el que se utiliza la URL. En la barra de direcciones de su navegador, una URL no tiene ningún contexto, por lo que debe proporcionar una URL completa (o absoluta), como las que vimos anteriormente. No necesita incluir el protocolo (el navegador usa HTTP de manera predeterminada) o el puerto (que solo se requiere cuando el servidor web de destino está utilizando algún puerto inusual), pero todas las otras partes de la URL son necesarias.

- -

Cuando se usa una URL dentro de un documento, como en una página HTML, las cosas son un poco diferentes. Debido a que el navegador ya tiene la propia URL del documento, puede usar esta información para completar las partes faltantes de cualquier URL disponible dentro de ese documento. Podemos diferenciar entre una URL absoluta y una URL relativa mirando solo la parte de ruta de la URL. Si la parte de ruta de la URL comienza con el carácter "/", el navegador buscará ese recurso desde la raíz superior del servidor, sin referencia al contexto dado por el documento actual.

- -

Veamos algunos ejemplos para aclarar esto.

- -

Ejemplos de URL absolutas

- -
-
URL Completa (la misma que usamos antes)
-
- 
https://developer.mozilla.org/en-US/docs/Learn
-
-
Protocolo implícito
-
- 
//developer.mozilla.org/en-US/docs/Learn
- -

En este caso, el navegador llamará a esa URL con el mismo protocolo que el utilizado para cargar el documento que aloja esa URL.

-
-
Nombre de dominio implícito
-
- 
/en-US/docs/Learn
- -

Este es el caso de uso más común para una URL absoluta dentro de un documento HTML. El navegador utilizará el mismo protocolo y el mismo nombre de dominio que el utilizado para cargar el documento que aloja esa URL. Nota: no es posible omitir el nombre de dominio sin omitir también el protocolo.

-
-
- -

Ejemplos de URL relativas

- -

Para comprender mejor los siguientes ejemplos, supongamos que las URL se invocan desde el documento ubicado en la siguiente URL:https://developer.mozilla.org/en-US/docs/Learn

- -
-
Sub-recursos
-
- 
Skills/Infrastructure/Understanding_URLs
-
- Debido a que la URL no se inicia con /, el navegador intentará encontrar el documento en un subdirectorio del que contiene el recurso actual. Entonces, en este ejemplo, realmente queremos llegar a esta URL:https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs
-
Volviendo en el árbol de directorios
-
- 
../CSS/display
- -

En este caso, usamos el ../ convención de escritura, heredada del mundo del sistema de archivos UNIX, para decirle al navegador que queremos subir desde un directorio. Aquí queremos llegar a esta URL:https://developer.mozilla.org/en-US/docs/Learn/../CSS/display, que se puede simplificar a: https://developer.mozilla.org/en-US/docs/CSS/display

-
-
- -

URL semánticas

- -

A pesar de su sabor muy técnico, las URL representan un punto de entrada legible para un sitio web. Se pueden memorizar y cualquiera puede ingresarlos en la barra de direcciones de un navegador. Las personas están en el centro de la Web, por lo que se considera una buena práctica construir lo que se llama URL semánticas. Las URL semánticas usan palabras con un significado inherente que cualquier persona puede entender, independientemente de sus conocimientos técnicos.

- -

La semántica lingüística es, por supuesto, irrelevante para las computadoras. Probablemente has visto URL que parecen mashups de caracteres aleatorios. Pero hay muchas ventajas en la creación de URL legibles por humanos:

- - - -

Próximos pasos

- - diff --git a/files/es/learn/common_questions/using_github_pages/index.html b/files/es/learn/common_questions/using_github_pages/index.html new file mode 100644 index 0000000000..81a7138430 --- /dev/null +++ b/files/es/learn/common_questions/using_github_pages/index.html @@ -0,0 +1,103 @@ +--- +title: ¿Cómo se utiliza Github pages? +slug: Learn/Using_Github_pages +translation_of: Learn/Common_questions/Using_Github_pages +--- +

GitHub es un sitio "social coding". Te permite subir repositorios de código para almacenarlo en el sistema de control de versiones Git. Tu puedes colaborar en proyectos de código, y el sistema es código abierto por defecto, lo que significa que cualquiera en el mundo puede encontrar tu código en GitHub, usarlo, aprender de el, y mejorarlo. ¡Tú puedes hacer eso con el código de otras personas tambien! Este artículo provee una guía básica para publicar contenido usando la característica gh-pages de Github.

+ +

Publicando contenido

+ +

Github es una comunidad muy importante y útil para involucrarse, y Git/GitHub es un sistema de control de versiones muy popular — la mayoría de las empresas de tecnología ahora lo utilizan en su flujo de trabajo. GitHub tiene una característica muy útil llamada GitHub pages, que te permite publicar el código del sitio en vivo en la Web.

+ +

Configuración básica de Github

+ +
    +
  1. Primero que todo, instala Git en tu máquina. Este es el software del sistema de control de versiones subyacente en el que GitHub funciona.
    2. +
  2. Seguido, Regístrate para una cuenta de GitHub. Es simple y fácil.
    3. +
  3. Una vez te hayas registrado, inicia sesión en github.com con tu nombre de usuario y contraseña.
    4. +
+ +

Preparando tu código para subirlo

+ +

Tú puedes almacenar cualquier código que tu quieras en un repositorio de Github, pero para usar la característica páginas de Github con pleno efecto, tu código debe estar estructurado como un sitio web típico, por ejemplo que el punto de entrada primario sea un archivo HTML llamado index.html.

+ +

La otra cosa que necesitas hacer antes de seguir adelante es inicializar el directorio de código como un repositorio Git. para hacer esto:

+ +
    +
  1. Apunta la línea de comandos a tu directorio test-site (o como se llame el directorio que contiene tu sitio web). Para esto, usa el comando cd (Es decir "cambio de directorio"). Esto es lo que deberías digitar si has puesto tu sitio web en un directorio llamado test-site en tu escritorio: + + 
    cd Desktop/test-site
    +
    2. +
  2. Cuando la línea comandos está apuntando hacia el interior del directorio de tu sitio web, digita el siguiente comando, que le dice a la herramienta git para convertir el directorio en un repositorio git:
    3. +
  3. + 
    git init
    +
    4. +
+ +

An aside on command line interfaces

+ +

La mejor manera de subir tu código a Github es mediante la linea de comandos — esta es una ventana donde tú escribe comandos para hacer cosas como crear archivos y ejecutar programas, en lugar de hacer clic dentro de una interfaz de usuario. Se verá algo como esto:

+ +

+ +
+

Nota: Tú también podrías considerar una interfaz gráfica de usuario de Git para hacer el mismo trabajo, si te sientes incómodo con la linea de comandos.

+
+ +

Cada sistema operativo viene con una herramienta de línea de comandos:

+ + + +

Esto puede parecer un poco espantoso al principio, pero no te preocupes — que pronto conseguiras la caída de los conceptos básicos. Tú le dices a la computadora que haga algo en la terminal, digitando un comando y oprimiendo la tecla Enter, como se ha visto anteriormente.

+ +

Creando un repositorio para tu código

+ +
    +
  1. +

    A continuación, tu necesitas crear un nuevo repositorio para colocar tus archivos en el. Has clic en el signo más (+) en la parte superior derecha de la página de inicio de GitHub, luego escoge Nuevo Repositorio.

    +
    2. +
  2. En esta página, en la caja Nombre del Repositorio, digita el nombre para tu repositorio de código, por ejemplo my-repository.
    3. +
  3. También llena una descripción para decir lo que tu repositorio va a contener. Tu pantalla debe mostrar algo como esto:
    +
    4. +
  4. Has Clic en Crear repositorio; Esto debería llevarte a la siguiente página: 
    +
    5. +
+ +

Subiendo tus archivos a GitHub

+ +
    +
  1. En la página actual, tú estás interesado en la sección …o empujar un repositorio existente desde la línea de comandos. Tú deberias ver dos lineas de código listado en esta sección. Copia la totalidad de la primera línea, pégala en la línea de comandos, presiona la tecla Enter. El comando debería mostrarte algo como esto: + + 
    git remote add origin https://github.com/chrisdavidmills/my-repository.git
    +
    2. +
  2. A continuación, digita los siguientes dos comandos, presionando Enter despues de cada uno. Estos preparán el código para subirlo a GitHub, y pida a GIt que administre estos archivos. + 
    git add --all
+git commit -m 'adding my files to my repository'
    +
    3. +
  3. Por último, empuja el código hasta GitHub yendo a la página de GitHub en la que estas e ingresando en la terminal el segundo de los dos comandos que vimos …o empuje un repositorio existente desde la sección de línea de comandos: + 
    git push -u origin master
    +
    4. +
  4. Ahora necesitas crear la rama gh-pages de tu repositorio; actualiza la página actual y verá una página del repositorio algo así como la de abajo. Tú necesitas presionar el boton que dice Branch: master, digita gh-pages en el campo de texto, luego presiona el boton azul que dice Create branch: gh-pages. Esto crea una rama de código especial llamada gh-pages que es publicada en una ubicación especial. La URL toma la forma username.github.io/my-repository-name, asi en mi caso de ejemplo, la URL debería ser https://chrisdavidmills.github.io/my-repository. La página mostrada es la página index.html.
    +
    5. +
  5. Navega tu dirección web de GitHub pages en un nuevo ta del navegador, y tu deberias ver tu sitio en linea! Mandalo por correo electrónico a tus amigos y muestra tu dominio.
    6. +
+ +
+

Nota: Si te atascas, la página de inicio de GitHub Pages también es muy útil.

+
+ +

Un mayor conocimiento de GitHub

+ +

Si deseas realizar más cambios en su sitio de prueba y cargarlos en GitHub, simplemente tendrás que realizar el cambio en tus archivos como antes. A continuación, debes introducir los siguientes comandos (pulsando Intro después de cada uno) para empujar los cambios a GitHub:

+ +
git add --all
+git commit -m 'another commit'
+git push
+ +

Puedes reemplazar otro commit con un mensaje más adecuado para describir qué cambio acaba de hacer.

+ +

Apenas hemos arañado la superficie de Git.Para obtener más información, comience con el sitio de ayuda de GitHub.

diff --git a/files/es/learn/common_questions/what_is_a_url/index.html b/files/es/learn/common_questions/what_is_a_url/index.html new file mode 100644 index 0000000000..ef50be60ad --- /dev/null +++ b/files/es/learn/common_questions/what_is_a_url/index.html @@ -0,0 +1,152 @@ +--- +title: ¿Qué es una URL? +slug: Learn/Common_questions/Qué_es_una_URL +translation_of: Learn/Common_questions/What_is_a_URL +--- +
+

Este artículo habla sobre las Uniform Resource Locators (URLs), explicando qué son y cómo se estructuran.

+
+ + + + + + + + + + + + +
Prerequisitos:Primero necesitas saber Como funciona Internet, qué es un servidor Web y los conceptos detrás de los enlaces en la web.
Objetivo:Aprenderás lo que es una URL y como funcionan en la Web.
+ +

Resumen

+ +

Junto con el {{Glossary("Hypertext", "Hipertexto")}} y {{Glossary("HTTP")}}, las URL son uno de los conceptos claves de la Web. Es el mecanismo usado por los {{Glossary("Browser","navegadores")}} para obtener cualquier recurso publicadon en la web.

+ +

URL significa Uniform Resource Locator (Localizador de Recursos Uniforme). Una URL no es más que una direccion que es dada a un recurso único en la Web. En teoria, cada URL valida apunta a un único recurso. Dichos recursos pueden ser páginas HTML, documentos CSS, imagenes, etc. En la practica, hay algunas excepciones, siendo la más común una URL apuntando a un recurso que ya no existe o que ha sido movido. Como el recurso representado por la URL y la URL en si son manejadas por el servidor Web, depende del dueño del servidor web manejar ese recurso y su URL asociada adecuadamente.

+ +

Active Learning

+ +

There is no active learning available yet. Please, consider contributing.

+ +

Profundizando

+ +

Conceptos básicos: anatomía de una URL

+ +

Aquí hay algunos ejemplos de URL:

+ +
https://developer.mozilla.org
+https://developer.mozilla.org/en-US/docs/Learn/
+https://developer.mozilla.org/en-US/search?q=URL
+ +

Cualquiera de esas URL se puede escribir en la barra de direcciones de su navegador para indicarle que cargue la página (recurso) asociada.

+ +

Una URL está compuesta de diferentes partes, algunas obligatorias y otras opcionales. Veamos las partes más importantes usando la siguiente URL:

+ +
http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
+ +
+
Protocol
+
http es el protocolo. La primera parte de la URL indica qué protocolo debe usar el navegador. Un protocolo es un método establecido para intercambiar o transferir datos alrededor de una red informática. Por lo general, para sitios web es el protocolo HTTP o su versión segura, HTTPS. La Web requiere uno de estos dos, pero los navegadores también saben cómo manejar otros protocolos como mailto: (para abrir un cliente de correo) o ftp: para manejar la transferencia de archivos, así que no se sorprenda si ve tales protocolos.
+
Domaine Name
+
www.example.com es el nombre de dominio. Indica qué servidor web se solicita. Alternativamente, es posible usar directamente un {{Glossary("dirección IP")}}, pero debido a que es menos conveniente, no se usa con frecuencia en la Web.
+
Port
+
:80 es el puerto. Indica la "puerta" técnica utilizada para acceder a los recursos en el servidor web. Por lo general, se omite si el servidor web utiliza los puertos estándar del protocolo HTTP (80 para HTTP y 443 para HTTPS) para otorgar acceso a sus recursos. De lo contrario es obligatorio.
+
Path to the file
+
/path/to/myfile.html es la ruta al recurso en el servidor web. En los primeros días de la Web, una ruta como esta representaba la ubicación de un archivo físico en el servidor web. Hoy en día, es principalmente una abstracción manejada por servidores web sin ninguna realidad física.
+
Parameters
+
?key1=value1&key2=value2 son parámetros adicionales proporcionados al servidor web. Esos parámetros son una lista de pares clave/valor separados con el símbolo &. El servidor web puede usar esos parámetros para hacer cosas adicionales antes de devolver el recurso. Cada servidor web tiene sus propias reglas con respecto a los parámetros, y la única forma confiable de saber si un servidor web específico está manejando parámetros es preguntando al propietario del servidor web.
+
Anchor
+
#SomewhereInTheDocument es un ancla para otra parte del recurso en sí. Un ancla representa una especie de "marcador" dentro del recurso, dando al navegador las instrucciones para mostrar el contenido ubicado en ese lugar "marcado". En un documento HTML, por ejemplo, el navegador se desplazará hasta el punto donde se define el ancla; en un video o documento de audio, el navegador intentará ir a la hora que representa el ancla. Vale la pena señalar que la parte después del #, también conocido como el identificador de fragmento, nunca se envía al servidor con la solicitud.
+
+ +

{{Note('Existen algunas partes extras y reglas extras con respecto a las URL, pero no son relevantes para usuarios habituales o desarrolladores web. No se preocupe por esto, no necesita conocerlos para construir y usar URL completamente funcionales.')}}

+ +

Puede pensar en una URL como una dirección de correo postal normal: el protocolo representa el servicio postal que desea utilizar, el nombre de dominio es la ciudad o el pueblo y el puerto es como el código postal; la ruta representa el edificio donde se debe entregar su correo; los parámetros representan información adicional como el número de apartamento en el edificio; y, finalmente, el ancla representa a la persona real a la que ha dirigido su correo.

+ +

Cómo usar las URL

+ +

Se puede escribir cualquier URL dentro de la barra de direcciones del navegador para acceder al recurso que se encuentra detrás. ¡Pero esto es sólo la punta del iceberg!

+ +

El lenguaje {{Glossary("HTML")}} — que se discutirá más adelante — hace un uso extensivo de las URL:

+ + + +
+

Nota: Al especificar URL para cargar recursos como parte de una página (como cuando se usa <script>, <audio>, <img>, <video> y similares), solo debe usar URL HTTP y HTTPS. El uso de FTP, por ejemplo, no es particularmente seguro y muchos navegadores ya no lo admiten.

+
+ +

Otras tecnologías, como {{Glossary("CSS")}} o {{Glossary("JavaScript")}}, usan URLs ampliamente, y estos son realmente el corazón de la Web.

+ +

URL absolutas vs URL relativas

+ +

Lo que vimos arriba se llama URL absoluta, pero también hay algo llamado URL relativa. Examinemos lo que significa esa distinción con más detalle.

+ +

Las partes requeridas de una URL dependen en gran medida del contexto en el que se utiliza la URL. En la barra de direcciones de su navegador, una URL no tiene ningún contexto, por lo que debe proporcionar una URL completa (o absoluta), como las que vimos anteriormente. No necesita incluir el protocolo (el navegador usa HTTP de manera predeterminada) o el puerto (que solo se requiere cuando el servidor web de destino está utilizando algún puerto inusual), pero todas las otras partes de la URL son necesarias.

+ +

Cuando se usa una URL dentro de un documento, como en una página HTML, las cosas son un poco diferentes. Debido a que el navegador ya tiene la propia URL del documento, puede usar esta información para completar las partes faltantes de cualquier URL disponible dentro de ese documento. Podemos diferenciar entre una URL absoluta y una URL relativa mirando solo la parte de ruta de la URL. Si la parte de ruta de la URL comienza con el carácter "/", el navegador buscará ese recurso desde la raíz superior del servidor, sin referencia al contexto dado por el documento actual.

+ +

Veamos algunos ejemplos para aclarar esto.

+ +

Ejemplos de URL absolutas

+ +
+
URL Completa (la misma que usamos antes)
+
+ 
https://developer.mozilla.org/en-US/docs/Learn
+
+
Protocolo implícito
+
+ 
//developer.mozilla.org/en-US/docs/Learn
+ +

En este caso, el navegador llamará a esa URL con el mismo protocolo que el utilizado para cargar el documento que aloja esa URL.

+
+
Nombre de dominio implícito
+
+ 
/en-US/docs/Learn
+ +

Este es el caso de uso más común para una URL absoluta dentro de un documento HTML. El navegador utilizará el mismo protocolo y el mismo nombre de dominio que el utilizado para cargar el documento que aloja esa URL. Nota: no es posible omitir el nombre de dominio sin omitir también el protocolo.

+
+
+ +

Ejemplos de URL relativas

+ +

Para comprender mejor los siguientes ejemplos, supongamos que las URL se invocan desde el documento ubicado en la siguiente URL:https://developer.mozilla.org/en-US/docs/Learn

+ +
+
Sub-recursos
+
+ 
Skills/Infrastructure/Understanding_URLs
+
+ Debido a que la URL no se inicia con /, el navegador intentará encontrar el documento en un subdirectorio del que contiene el recurso actual. Entonces, en este ejemplo, realmente queremos llegar a esta URL:https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs
+
Volviendo en el árbol de directorios
+
+ 
../CSS/display
+ +

En este caso, usamos el ../ convención de escritura, heredada del mundo del sistema de archivos UNIX, para decirle al navegador que queremos subir desde un directorio. Aquí queremos llegar a esta URL:https://developer.mozilla.org/en-US/docs/Learn/../CSS/display, que se puede simplificar a: https://developer.mozilla.org/en-US/docs/CSS/display

+
+
+ +

URL semánticas

+ +

A pesar de su sabor muy técnico, las URL representan un punto de entrada legible para un sitio web. Se pueden memorizar y cualquiera puede ingresarlos en la barra de direcciones de un navegador. Las personas están en el centro de la Web, por lo que se considera una buena práctica construir lo que se llama URL semánticas. Las URL semánticas usan palabras con un significado inherente que cualquier persona puede entender, independientemente de sus conocimientos técnicos.

+ +

La semántica lingüística es, por supuesto, irrelevante para las computadoras. Probablemente has visto URL que parecen mashups de caracteres aleatorios. Pero hay muchas ventajas en la creación de URL legibles por humanos:

+ + + +

Próximos pasos

+ + diff --git a/files/es/learn/common_questions/what_is_a_web_server/index.html b/files/es/learn/common_questions/what_is_a_web_server/index.html new file mode 100644 index 0000000000..4969677db6 --- /dev/null +++ b/files/es/learn/common_questions/what_is_a_web_server/index.html @@ -0,0 +1,120 @@ +--- +title: Que es un servidor WEB? +slug: Learn/Common_questions/Que_es_un_servidor_WEB +tags: + - Infraestructura + - Principiante + - necesitaEsquema +translation_of: Learn/Common_questions/What_is_a_web_server +--- +
+

En este articulo veremos que son los servidores, cómo funcionan y por qué son importantes.

+
+ + + + + + + + + + + + +
Prerequisitos:Debes saber como funciona internet, y entendiendo la diferencia entre pagina web, sitio web, servidor y motor de busqueda
Objetivo:Aprender qué es un servidor web y comprender cómo funciona.
+ +

Sumario

+ +

Con "Servidor web" podemos referirnos a hardware o software, o a ambos trabajando juntos.

+ +
    +
  1. En cuanto a hardware, un servidor web es una computadora que almacena los archivos que componen un sitio web (ej.  documentos HTML , imágenes, hojas de estilos CSS y archivo JavaScript) y los entrega al dispositivo del usuario final. Está conectado a internet y es accesible a través de un nombre de dominio como mozilla.org.
    2. +
  2. En cuanto a software, un servidor web tiene muchas partes encargadas del control sobre cómo tienen acceso los usuarios a los archivos, por lo menos un servidor HTTP. Un servidor HTTP es una pieza de software que comprende {{Glossary("URL","URLs")}} (direcciones web) y {{Glossary("HTTP")}} (el protocolo que tu navegador usa para ver las páginas web).
    3. +
+ +

Al nivel más básico, siempre que un navegador necesite un archivo almacenado en un  servidor web, el navegador hará una solicitud al servidor mediante la vía HTTP. Cuando la petición llega al servidor web correcto (hardware), el  servidor HTTP  (software) envía el archivo antes solicitado, tambien a través de HTTP.

+ +

Basic representation of a client/server connection through HTTP

+ +

Para publicar un sitio web, necesitarás un servidor web dinámico o estático.

+ +

Un servidor web estático, o pila, consiste en una computadora (hardware) con un servidor HTTP (software). Llamamos a este "estático" debido a que el servidor envía los archivos almacenados "tal cual" a tu navegador.

+ +

Un servidor web dinámico consiste en un servidor web estático con un software extra , lo común es que sea una aplicación servidor y una  base de datos. Llamamos a esto "dinámico" por que la aplicacion servidor actualiza los archivos almacenados en la base de datos antes de enviarlos mediante el servidor HTTP.

+ +

Por ejemplo, para ver la página que ves en tu navegador finalmente, el servidor aplicación puede mostrar el diseño HTML con contenido desde una base de datos. Sitios como MDN o Wikipedia tienen cientos de páginas web, que no son realmente archivos HTML, si no una estrucura HTML asociada a una gigantesca base de datos. Esto hace mas fácil y rápido el mantenimiento y entrega del contenido.

+ +

Aprendizaje activo

+ +

No hay aprendizaje activo disponible. Por favor, considere colaborar.

+ +

Inmersión más profunda

+ +

Para recuperar una página web, como ya dijimos, su navegador envía una solicitud al servidor web, que procede a buscar el archivo solicitado en su propio espacio de almacenamiento. Al encontrar el archivo, el servidor lo lee, lo procesa según sea necesario y lo envía al navegador. Veamos esos pasos con más detalle.

+ +

Alojamiento de archivos (Hosting)

+ +

Un servidor web primero debe almacenar los archivos del sitio web, es decir, todos los documentos HTML y sus medios relacionados, incluidas las imágenes, las hojas de estilo CSS, los archivos JavaScript, las fuentes y videos.

+ +

Técnicamente, puede alojar todos esos archivos en su propia computadora, pero es mucho más conveniente almacenarlos en un servidor web dedicado que:

+ + + +

Por todas estas razones, encontrar un buen proveedor de alojamiento es una parte clave del desarrollo de su sitio web. Investigue a través de los diversos servicios que ofrecen las compañías y elija uno que se ajuste a sus necesidades y a su presupuesto (los servicios van desde los gratuitos hasta los miles de dólares al mes). Puede encontrar mas información en este artículo.

+ +

Una vez que configura una solución de alojamiento web, solo tiene que cargar sus archivos en su servidor web.

+ +

Comunicación a través de HTTP

+ +

En segundo lugar, un servidor web brinda soporte para HTTP (Hypertext Transfer Protocol ó  Protocolo de Transferencia de Hipertexto). Como su nombre lo indica, HTTP especifica cómo transferir hypertext (es decir, documentos web vinculados) entre dos computadoras.

+ +

Un protocolo es un conjunto de reglas para la comunicación entre dos computadoras. HTTP es un protocolo textual, sin estado.

+ +
+
Textual
+
Todos los comandos son de texto plano y legible para ser leído por humanos.
+
Sin estado
+
Ni el servidor ni el cliente recuerdan las comunicaciones anteriores. Por ejemplo, al confiar solo en HTTP, un servidor no puede recordar la contraseña que ingresó ni el paso que está realizando en una transacción. Necesita un servidor de aplicaciones para tareas como esa. (Cubriremos ese tipo de tecnología en otros artículos).
+
+ +

HTTP proporciona reglas claras sobre cómo se comunican un cliente y un servidor. Cubriremos el propio HTTP en un artículo técnico más adelante. Por ahora, sólo sé consciente de estas cosas:

+ + + +

The MDN 404 page as an example of such error page En un servidor web, el servidor HTTP es responsable de procesar y responder las solicitudes entrantes.

+ +
    +
  1. Al recibir una solicitud, un servidor HTTP primero verifica si la URL solicitada coincide con un archivo existente.
    2. +
  2. Si es así, el servidor web envía el contenido del archivo de nuevo al navegador. Si no, un servidor de aplicaciones construye el archivo necesario.
    3. +
  3. Si ninguno de los procesos es posible, el servidor web devuelve un mensaje de error al navegador, generalmente "404 Not Found". ( Ese error es tan común que muchos diseñadores web pasan bastante tiempo diseñando páginas de error 404.)
    4. +
+ +

Contenido Estático vs. Dinámico

+ +

En términos generales, un servidor puede entregar contenido estático o dinámico. "Estático" significa "servido como está". Los sitios web estáticos son los más fáciles de configurar, por lo que le sugerimos que convierta su primer sitio en un sitio estático.

+ +

"Dinámico" significa que el servidor procesa el contenido o incluso lo genera desde una base de datos. Esta solución proporciona más flexibilidad, pero se vuelve más difícil de manejar, lo que hace que sea mucho más complejo desarrollar el sitio web.

+ +

Tomemos por ejemplo la página que estás leyendo en este momento. En el servidor web que lo aloja, hay un servidor de aplicaciones que toma el contenido del artículo de una base de datos, lo formatea, lo coloca dentro de algunas plantillas HTML y le envía los resultados. En este caso, el servidor de aplicaciones se llama Kuma y está desarrollado con Python (utilizando el framework Django). El equipo de Mozilla creó Kuma para las necesidades específicas de MDN, pero hay muchas aplicaciones similares basadas en otras tecnologías.

+ +

Hay tantos servidores de aplicaciones que es resulta difícil sugerir uno en particular. Algunos servidores de aplicaciones se adaptan a categorías específicas de sitios web como blogs, wikis o tiendas electrónicas; otros, llamados CMS (Content Management Systems ó Sistemas de Gestión de Contenidos), son más genéricos. Si está desarrollando un sitio web dinámico, tómese el tiempo para elegir una herramienta que se adapte a sus necesidades. A menos que desee aprender algo de programación de servidores web (¡es un área emocionante!), no necesita crear su propio servidor de aplicaciones.

+ +

Próximos pasos

+ +

Ahora que estás familiarizado con los servidores web, podrías:

+ + diff --git a/files/es/learn/common_questions/what_software_do_i_need/index.html b/files/es/learn/common_questions/what_software_do_i_need/index.html new file mode 100644 index 0000000000..92687e7d13 --- /dev/null +++ b/files/es/learn/common_questions/what_software_do_i_need/index.html @@ -0,0 +1,226 @@ +--- +title: ¿Qué software necesito para construir un sitio web? +slug: Learn/Common_questions/Que_software_necesito +tags: + - Build a website + - Building + - Mecanismos Web + - Principiante + - software +translation_of: Learn/Common_questions/What_software_do_I_need +--- +
+

En este artículo se explican cuales componentes de software necesita para editar, cargar, o visualizar un sitio web. 

+
+ + + + + + + + + + + + +
Prerrequisitos:Deberías conocer acerca de la diferencia entre páginas web, sitios web, servidores web, y moteres de búsqueda.
Objetivo:Aprender qué componentes de software necesita si quiere editar, cargar o visualizar un sitio web.
+ +

Resumen

+ +

Puede descargar la mayoría de los programas que necesita para el desarrollo web de forma gratuita. Proporcionaremos unos enlaces en este artículo. 

+ +

Necesitarás herramientas para:

+ + + +

Casi todos los sistemas operativos incluyen por defecto un editor de texto y un navegador, el cual puedes usar para ver los sitios web. Como resultado, usualmente sólo necesitas adquirir software para la transferencia de archivos a tu servidor web.

+ +

Aprendizaje activo

+ +

No hay aprendizaje activo disponible todavía. Por favor, considere contribuir.

+ +

Profundización

+ +

Creción y edición de páginas web

+ +

Para crear y editar un sitio web, necesita un editor de texto. Editores de texto crean y modifican archivos de texto sin formato.  Otros formatos, como {{Glossary("RTF")}}, te permiten añadirle formato, como negrita y señalado, esos no son adecuados para escribir páginas web. Debe pensar bien qué editor de texto usar, ya que trabajará intensamente con él mientras construye el sitio web.

+ +

Todos los sistemas operativos de escritorio traen un editor de texto básico. Estos editores son muy sencillos, pero les faltan características especiales para codificar páginas web. Si desea algo un poco más elegante, hay muchas herramientas de terceros disponibles. Editores de terceros, a menudo viene con características extra, como coloreado de sintaxis, autocompletado, secciones expandibles y búsqueda de código. A continuación se muestra una lista de algunos editores:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sistema operativoEditor incorporadoEditor de terceros
Windows + + + +
Mac OS + + + +
Linux + + + +
Chrome OS  + +
+ +

Aquí se muestra una captura de pantalla de un editor de texto avanzado:

+ +

Screenshot of Notepad++. 

+ +

Esta es una captura de panalla de un editor de texto online:

+ +

Screenshot of ShiftEdit

+ +

Subir archivos a la Web

+ +

Cuando tu sitio web está listo para visualización pública , tendrás que subir tus páginas web a tu servidor web. Puedes comprar espacio en un servidor de varios proveedores (vea el artículo ¿Cuánto cuesta hacer algo en la web?). Una vez que establezca qué proveedor utilizar, el proveedor le enviará un correo con la información de acceso, usualmente en la forma de una URL SFTP, nombre de usuario, contraseña, y otra información necesaria para conectarte con su servidor. Tenga en cuenta que el protocolo (S)FTP está actualmente algo pasado de moda, mientras otros sistemas de carga de archivos están comenzando a volverse populares como RSync y Git/GitHub.

+ +
+

Note: FTP es inherentemente inseguro. Deberías asegurarte de que tu proveedor de alojamiento permite el uso de una conexión segura, por ejemplo SFTP o RSync sobre SSH.

+
+ +

Subir archivos a un sitio web es un paso muy importante mientras se crea un sitio web, por lo que sete tema se abarca en detalle en un artículo aparte. Por ahora, se presenta una lista de clientes (S)FTP gratuitos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sistema operativo Software FTP 
Windows + + + +
Linux + +
 Mac OS + +
 Chrome OS + +  
+ + + +

Como ya sabe, necesita un navegador para ver los sitios web. Existen docenas  de opciones de navegadores para uso personal, pero cuando usted está desarrollando un sitio web debe probarlo al menos con los navegadores principales siguientes, para estar seguro de que su sitio web funciona para la mayoría de las personas:  

+ + + +

Si su sitio está destinado a un grupo específico (por ejemplo, una plataforma técnica o país), puede que tenga que probar el sitio con navegadores adicionales, como Opera, Konqueror, o UC Browser.

+ +

Sin embargo las pruebas se dificultan debido a que algunos navegadores sólo funcionan en determinados sistemas operativos. Apple Safari se ejecuta en iOS y Mac OS, mientras Internet Explorer corre solamente en Windows. Lo mejor es aprovechar los servicios como Browsershots o Browserstack. Browsershots proporciona capturas de pantallas de tu sitio web en diferentes navegadores. Browserstack  realmente te otorga acceso remoto a máquinas virtuales de modo que puedes probar tu sitio en los entornos más comunes. De manera alternativa, puedes instalar tu propia máquina virtual, pero se necesita algo de experiencia. ( Si escoge este camino, Microsoft tiene algunas herramientas para desarrolladores incluso una máquina virtual lista para utilizar en modern.ie.)

+ +

Sin falta ejecute algunas pruebas en dispositivos reales, especialmente en dispositivos móviles reales. Simulación de dispositivos móviles es una tecnología nueva, en evolución y menos confiable que la simulación de escritorio. Desde luego, los dispositivos móviles son costosos, por lo que le sugerimos echar un vistazo a la inictiva de Laboratorios de dispositivos abiertos. Puede además compartir dispositivos quiere probar en diferentes plataformas sin gastar mucho.

+ +

Próximos pasos

+ + + +

 

diff --git a/files/es/learn/como_contribuir/index.html b/files/es/learn/como_contribuir/index.html deleted file mode 100644 index 6cc600f24d..0000000000 --- a/files/es/learn/como_contribuir/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: ¿Cómo contribuir al Área de Aprendizaje en MDN? -slug: Learn/Como_Contribuir -tags: - - Aprender - - Documentación - - Guía - - MDN Meta - - Principiante - - contribuir - - 'l10n:priority' -translation_of: Learn/How_to_contribute ---- -
{{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/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/es/learn/css/building_blocks/backgrounds_and_borders/index.html new file mode 100644 index 0000000000..0de93e1eb1 --- /dev/null +++ b/files/es/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -0,0 +1,306 @@ +--- +title: Fondos y bordes +slug: Learn/CSS/Building_blocks/Fondos_y_bordes +translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
+ +

En este artículo, veremos algunas de las cosas creativas que puedes hacer con los fondos y los bordes de CSS. Añadir degradados, imágenes de fondo o redondear esquinas; los fondos y los bordes son la solución para una gran cantidad de cuestiones de estilo en CSS.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, conocimientos básicos de HTML (véase Introducción al HTML) y nociones de CSS (véase Primeros pasos con el CSS).
Objetivo:Aprender a diseñar el fondo y los bordes de las cajas.
+ +

Aplicar estilo a los fondos en CSS

+ +

La propiedad {{cssxref ("background")}} de CSS es una propiedad abreviada de una serie de propiedades de fondo que vamos a ver en este artículo. Si descubres una propiedad de fondo compleja en una hoja de estilo, puede parecer un poco difícil de entender porque pueden estarse pasando muchos valores a la vez.

+ +
.box {
+  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
+  url(big-star.png) center no-repeat, rebeccapurple;
+} 
+
+ +

Más adelante en este tutorial regresaremos a cómo funcionan las propiedades abreviadas, pero primero echemos un vistazo a las diferentes cosas que puedes hacer con los fondos en CSS, a partir de observar las propiedades de fondo individuales.

+ +

Los colores de fondo

+ +

La propiedad {{cssxref ("background-color")}} define el color de fondo de cualquier elemento en CSS. La propiedad admite cualquier <color> válido. Un color de fondo (background-color) se extiende por debajo del contenido y el relleno del elemento.

+ +

En el ejemplo siguiente hemos utilizado varios valores de color para añadir un color de fondo a la caja, a un encabezado y a un elemento {{htmlelement ("span")}}.

+ +

Juega un poco con ellos; usa cualquier valor <color> disponible.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}

+ +

Las imágenes de fondo

+ +

La propiedad {{cssxref ("background-image")}} permite visualizar una imagen de fondo en un elemento. En el ejemplo siguiente hay dos cajas: una tiene una imagen de fondo que es más grande que la caja misma, la otra tiene una imagen pequeña en forma de estrella.

+ +

Este ejemplo demuestra dos cosas sobre las imágenes de fondo. De forma predeterminada, la imagen grande no se reduce para ajustarse a la caja, por lo que solo vemos una pequeña esquina de esta, mientras que la imagen pequeña aparece en forma de mosaico hasta llenar la caja. En este caso, la imagen es en realidad una sola estrella.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}

+ +

Si especificas un color de fondo además de una imagen de fondo, la imagen se muestra encima del color de fondo. Añade una propiedad background-color al ejemplo anterior y obsérvalo en acción.

+ +

Controlar background-repeat

+ +

La propiedad {{cssxref ("background-repeat")}} se usa para controlar el comportamiento de tipo mosaico de las imágenes. Los valores disponibles son:

+ + + +

Prueba estos valores en el ejemplo siguiente. Hemos establecido el valor no-repeat, así que solo verás una estrella. Prueba los diferentes valores (repeat-x y repeat-y) y observa cuáles son los efectos.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}

+ +

Dimensionar la imagen de fondo

+ +

En el ejemplo anterior hay una imagen grande que aparece recortada porque es más grande que el fondo. En este caso, podríamos usar la propiedad {{cssxref ("background-size")}}, que puede tomar valores de longitud o porcentaje, para ajustar el tamaño de la imagen para que quepa dentro del fondo.

+ +

También puedes utilizar palabras clave:

+ + + +

En el ejemplo siguiente hemos usado la imagen más grande del ejemplo anterior y unidades de longitud para establecer sus dimensiones dentro de la caja. Puedes ver que esto ha distorsionado la imagen.

+ +

Prueba lo siguiente:

+ + + +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}

+ +

Posicionar la imagen de fondo

+ +

La propiedad {{cssxref ("background-position")}} te permite elegir la posición en la que aparece la imagen de fondo dentro de la caja a la que está asociada. Para ello se utiliza un sistema de coordenadas en el que la esquina superior izquierda de la caja es (0,0), y la caja se coloca sobre los ejes horizontal (x) y vertical (y).

+ +
+

Nota: El valor predeterminado de background-position es (0,0).

+
+ +

Los valores de background-position más comunes toman dos valores independientes: un valor horizontal seguido de un valor vertical.

+ +

Puedes usar palabras clave como top y right (busca todas las demás en la página sobre la propiedad {{cssxref ("background-position")}}):

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top center;
+} 
+
+ +

Y también longitudes y porcentajes:

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: 20px 10%;
+} 
+
+ +

También puedes mezclar valores de palabras clave con longitudes o porcentajes, por ejemplo:

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px;
+}
+ +

Por último, también puedes usar una sintaxis de 4 valores para indicar una distancia desde ciertos bordes del cuadro: la unidad de longitud en este caso es un desplazamiento del valor que la precede. Entonces, en el CSS siguiente, colocamos el fondo a 20 px desde la parte superior y a 10 px desde la derecha:

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px right 10px;
+}
+ +

Utiliza el ejemplo siguiente para jugar con estos valores y mover la estrella por la caja.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}

+ +
+

Nota: background-position es una propiedad abreviada de {{cssxref("background-position-x")}} y {{cssxref("background-position-y")}}, que te permiten configurar los diferentes valores de posición del eje por separado.

+
+ +

Degradados de fondo

+ +

Un degradado, cuando se usa para un fondo, actúa como una imagen y también se establece usando la propiedad {{cssxref("background-image")}}.

+ +

Puedes leer más sobre los diferentes tipos de degradados y sobre qué puedes hacer con ellos en la página sobre el tipo de datos <gradient> de MDN. Una forma divertida de jugar con degradados es usar uno de los muchos generadores de degradados CSS que hay disponibles en la web, como este. Puedes crear un degradado y luego copiar y pegar el código fuente que lo genera.

+ +

Prueba algunos degradados diferentes en el ejemplo siguiente. En las dos cajas hay, respectivamente, un degradado lineal que se extiende por toda la caja, y un degradado radial con un tamaño establecido, que por lo tanto se repite.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}

+ +

Múltiples imágenes de fondo

+ +

También es posible poner múltiples imágenes de fondo: puedes especificar múltiples valores background-image para un solo atributo, separados cada uno por una coma.

+ +

Si haces esto, las imágenes de fondo pueden quedar superpuestas entre sí. Los fondos se superponen con la última imagen de fondo que hay en la parte inferior de la lista, y cada imagen anterior se apila encima de la que sigue en el código.

+ +
+

Nota: Los degradados se pueden mezclar con imágenes de fondo normales.

+
+ +

Las otras propiedades background-* también pueden tener valores múltiples separados por comas, de la misma manera que background-image:

+ +
background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
+background-repeat: no-repeat, repeat-x, repeat;
+background-position: 10px 20px,  top right;
+ +

Cada valor de las diversas propiedades coincide con los valores que están en la misma posición en las otras propiedades. Arriba, por ejemplo, el valor para la propiedad background-repeat de image1 será no-repeat. Sin embargo, ¿qué sucede cuando diferentes propiedades tienen una cantidad diferente de valores? La respuesta es que los valores que ocupan las posiciones más pequeñas se alternan cíclicamente: en el ejemplo anterior hay cuatro imágenes de fondo pero solo dos valores background-position. Los primeros dos valores de posición se aplicarán a las dos primeras imágenes, luego los valores volverán a asignarse cíclicamente: a image3 se le dará el primer valor de posición, y a image4 se le dará el segundo valor de posición.

+ +

Vamos a jugar. En el ejemplo siguiente hemos incluido dos imágenes. Para demostrar el orden de superposición, cambia la imagen de fondo que aparece primero en la lista. O juega con las otras propiedades para cambiar la posición, el tamaño o repite los valores.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}

+ +

Anclaje del fondo

+ +

Otra opción que hay disponible para fondos es especificar cómo se desplazan cuando se desplaza el contenido. Esto se controla con la propiedad {{cssxref ("background-attachment")}}, que puede tomar los valores siguientes:

+ + + +

La propiedad {{cssxref ("background-attachment")}} solo tiene efecto cuando hay contenido por el que puedas desplazarte, por lo que hemos preparado un ejemplo para demostrar las diferencias entre los tres valores: echa un vistazo a background-attachment.html (También puedes consultar el código fuente aquí).

+ +

Usar la propiedad abreviada para el fondo

+ +

Como mencionamos al comienzo de este artículo, a menudo verás fondos que están especificados usando la propiedad {{cssxref ("background")}}. Esta forma abreviada te permite configurar todas las diferentes propiedades a la vez.

+ +

Si utilizas varios fondos, debes especificar todas las propiedades para el primer fondo y luego añadir el fondo siguiente separado por una coma. En el ejemplo siguiente hay un degradado con un tamaño y una posición, luego un fondo de imagen con no-repeat y una posición y, por último, un color.

+ +

Al escribir los valores abreviados de las imágenes de fondo es necesario seguir algunas reglas, por ejemplo:

+ + + +

Consulta la página para el atributo {{cssxref ("background")}} de MDN para ver todas las posibilidades.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}

+ +

Consideraciones de accesibilidad con los fondos

+ +

Al colocar texto sobre una imagen o un color de fondo, debes asegurarte de que tiene suficiente contraste para que tus visitantes puedan leer el texto. Si estableces una imagen de fondo y el texto se coloca encima de la imagen, también debes especificar un color de fondo (background-color) que permita leer el texto si la imagen no se carga.

+ +

Los lectores de pantalla no pueden analizar las imágenes de fondo, por lo tanto, deben ser puramente decorativas; cualquier contenido importante debe ser parte de la página HTML y no debe estar contenido en un fondo.

+ +

Bordes

+ +

Al aprender sobre el modelo de cajas descubrimos cómo los bordes afectan al tamaño de nuestra caja. En este artículo veremos cómo usar los bordes de una manera creativa. Por lo general, cuando a un elemento le añadimos bordes con CSS, usamos una propiedad abreviada que establece el color, el ancho y el estilo del borde en una línea de CSS.

+ +

Podemos establecer un borde para los cuatro lados de una caja con {{cssxref ("border")}}:

+ +
.box {
+  border: 1px solid black;
+}
+ +

O podemos establecer solo un borde de la caja, por ejemplo:

+ +
.box {
+  border-top: 1px solid black;
+}
+ +

Cada una de las propiedades de estas propiedades abreviadas sería:

+ +
.box {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+}
+ +

Y las no abreviadas:

+ +
.box {
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: black;
+}
+ +
+

Nota: Estas propiedades para el borde superior, derecho, inferior e izquierdo también tienen propiedades lógicas asignadas que se relacionan con el modo de escritura del documento (por ejemplo, texto de izquierda a derecha o de derecha a izquierda, o de arriba a abajo). Exploraremos esto en la próxima lección, que expone el uso de diferentes direcciones de texto.

+
+ +

Hay una variedad de estilos que puedes usar para los bordes. En el ejemplo siguiente, hemos utilizado un estilo de borde diferente para los cuatro lados de la caja. Juega con el estilo, el ancho y el color del borde para ver cómo funcionan los bordes.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}

+ +

Esquinas redondeadas

+ +

El redondeo de esquinas en una caja se logra mediante el uso de la propiedad {{cssxref ("border-radius")}} y otras propiedades asociadas que se relacionan con cada esquina de la caja. Como valor pueden usarse dos longitudes o porcentajes: el primer valor define el radio horizontal y el segundo el radio vertical. En muchos casos, solo se pondrá un valor, que se utilizará para ambos.

+ +

Por ejemplo, para hacer que las cuatro esquinas de una caja tengan un radio de 10 píxeles:

+ +
.box {
+  border-radius: 10px;
+}
+ +

O para hacer que la esquina superior derecha tenga un radio horizontal de 1 em y un radio vertical del 10%:

+ +
.box {
+  border-top-right-radius: 1em 10%;
+}
+ +

En el ejemplo siguiente hemos establecido las cuatro esquinas, y luego cambiamos los valores de la esquina superior derecha para que sea diferente. Juega con los valores para cambiar las esquinas. Echa un vistazo a la página de la propiedad {{cssxref ("border-radius")}} para ver las opciones de sintaxis disponibles.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}

+ +

Pon a prueba tus habilidades

+ +

Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más relevante? Encontrarás más pruebas para verificar que retienes la información antes de seguir adelante en Test your skills: Backgrounds and Borders.

+ +

Resumen

+ +

En este artículo hemos expuesto bastantes conceptos y puedes ver que hay mucho para añadir a un fondo o a un borde de una caja. Explora las diferentes páginas de propiedades si deseas obtener más información sobre cualquiera de las características que hemos discutido. Todas las páginas de MDN contienen más ejemplos de uso, para que juegues y mejores tus conocimientos.

+ +

En el próximo artículo descubriremos cómo interacciona el modo de escritura de tu documento con tu CSS. ¿Qué sucede cuando el texto no fluye de izquierda a derecha?

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. Cascada y herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de cajas
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/cascada_y_herencia/index.html b/files/es/learn/css/building_blocks/cascada_y_herencia/index.html deleted file mode 100644 index 91a359181f..0000000000 --- a/files/es/learn/css/building_blocks/cascada_y_herencia/index.html +++ /dev/null @@ -1,333 +0,0 @@ ---- -title: Cascada y herencia -slug: Learn/CSS/Building_blocks/Cascada_y_herencia -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance ---- -
{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
- -

El objetivo de este artículo es desarrollar la comprensión de algunos de los conceptos fundamentales de CSS (cascada, especificidad y herencia) que controlan cómo se aplica el CSS al HTML y cómo se resuelven los conflictos.

- -

A medida que avances en este apartado verás que puede resultar menos relevante y un poco más académico que otros artículos, pero la comprensión de estas cuestiones te ahorrará problemas más adelante. Te animamos a que trabajes meticulosamente este apartado y verifiques que entiendes los conceptos antes de continuar.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y una idea de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Aprender qué son la cascada y la especificidad, y cómo funciona la herencia en CSS.
- -

Reglas conflictivas

- -

CSS significa hojas de estilo en cascada (cascading style sheets), y es muy importante entender la palabra cascada. La forma en que se comporta la cascada es la clave para comprender el CSS.

- -

En algún momento trabajarás en un proyecto y encontrarás que el CSS que pensabas que debería aplicarse a un elemento no funciona. Por lo general, el problema suele ser que has creado dos normas que podrían aplicarse al mismo elemento. La cascada, y el concepto estrechamente relacionado de especificidad son mecanismos que controlan qué regla se aplica cuando aparecen tales conflictos. Es posible que la regla que se apliuca finalmente a tu elemento no sea la que esperas, por lo que debes comprender cómo funcionan estos mecanismos.

- -

También es significativo el concepto de herencia, que significa que algunas propiedades CSS heredan por defecto los valores establecidos en el elemento padre, pero otras no. Esto también puede causar una respuesta diferente a la que esperas.

- -

Vamos a empezar por echar un vistazo rápido a los principales elementos que nos interesan, y a continuación veremos cómo interactúan entre sí y con tu CSS. Pueden resultar un poco difíciles de entender, pero a medida que practiques escribiendo CSS te resultará más fácil de entender la manera cómo funcionan.

- -

Cascada

- -

En un primer nivel de simplicidad, la cascada en las hojas de estilo significa que el orden de las reglas importa en CSS: cuando dos reglas tienen la misma especificidad, se aplica la que aparece en último lugar en el CSS.

- -

En el ejemplo siguiente tenemos dos reglas que pueden aplicarse al h1. El h1 acaba siendo de color azul porque estas normas tienen un selector idéntico y, por lo tanto, tienen la misma especificidad. Por esta razón, se aplica la última que aparece.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} 

- -

Especificidad

- -

La especificidad es el modo que tiene el navegador de decidir qué regla se aplica si diversas reglas tienen selectores diferentes pero podrían aplicarse a un mismo elemento. Básicamente, la especificidad mide cuán específica es la selección de un selector:

- - - -

Veamos un ejemplo. Aquí abajo encontrarás dos reglas que pueden aplicarse al elemento h1. Este elemento h1 termina siendo de color rojo: el selector de clase confiere a esta regla una mayor especificidad, así que se aplicará a pesar de la regla para el selector de elemento que aparece más abajo en el orden del código.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} 

- -

Profundizaremos en la especificidad más adelante.

- -

Herencia

- -

La herencia también debe entenderse en este contexto: algunos valores de las propiedades CSS que se han establecido para los elementos padre los heredan los elementos hijo, pero otros no.

- -

Por ejemplo, si para un elemento se establece el color (color) y el tipo de letra (font-family), cada elemento que se encuentre dentro de él también se mostrará de ese color y con ese tipo de letra, a menos que les se haya aplicado un color y un tipo de letra diferentes directamente.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 

- -

Algunas propiedades no se heredan. Por ejemplo, si para un elemento se establece un ancho {{cssxref("width")}} del 50%, sus descendientes no tendrán un 50% de ancho con respecto al de sus padres. Si este fuera el caso, ¡sería muy frustrante usar CSS!

- -
-

Nota: En las páginas de referencia de las propiedades CSS de MDN encontrarás un cuadro con información técnica (por lo general, en la parte inferior de la sección de especificaciones) que enumera una serie de puntos sobre cada propiedad, incluyendo cuáles se heredan y cuáles no. Véase, por ejemplo, la sección de especificaciones de la propiedad color.

-
- -

Comprender cómo trabajan juntos estos conceptos

- -

Estos tres conceptos controlan qué CSS se aplica a qué elemento. En las secciones siguientes veremos cómo funcionan en conjunto. A veces puede parecer un poco complicado, pero lo irás recordando a medida que ganes experiencia con el CSS, y siempre puedes consultar los detalles si se te olvidan. ¡Incluso los desarrolladores experimentados lo hacen!

- -

Comprender la herencia

- -

Vamos a empezar con la herencia. En el ejemplo siguiente tenemos un elemento {{HTMLElement( "ul")}} con dos niveles de listas no ordenadas anidadas en él. Hemos establecido para el <ul> exterior un borde, un relleno y un color de fuente.

- -

El color se ha aplicado a los hijos directos y también a los hijos indirectos: los elementos hijo <li> inmediatos y los que están dentro de la primera lista. A continuación, hemos añadido a la segunda lista anidada una clase especial y le hemos aplicado un color diferente, que los elementos hijo de esta heredarán.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} 

- -

La anchura (como se mencionó anteriormente), los márgenes, el relleno y los bordes no se heredan. Si los elementos hijo de nuestra lista heredaran los bordes, todas las listas y los elementos de lista ganarían un borde cada vez ¡y no es probable que vez quieras un efecto así!

- -

Las propiedades que se heredan por defecto y las que no son cuestión, en gran medida, de sentido común.

- -

Control de la herencia

- -

CSS proporciona cuatro valores de propiedad universales especiales para el control de la herencia. Todas las propiedades CSS aceptan estos valores.

- -
-
{{cssxref("inherit")}}
-
Establece que el valor de la propiedad que se aplica a un elemento determinado sea exactamente igual al del elemento padre. En la práctica, esto "activa la herencia".
-
{{cssxref("initial")}}
-
Establece que el valor de la propiedad que se aplica a un elemento seleccionado tenga el mismo valor que esté establecido para esa propiedad en la hoja de estilo por defecto del navegador.
-
{{cssxref("unset")}}
-
Restablece la propiedad a su valor natural, lo que significa que si la propiedad se hereda de forma natural, actúa como inherit, y en caso contrario como initial.
-
- -
-

Nota: También hay un valor más reciente, {{cssxref ("revert")}}, que todavía admiten pocos navegadores.

-
- -
-

Nota: Véase la sección El origen de las declaraciones CSS en el artículo Introducción al concepto de cascada en CSS para obtener más información sobre cada uno de estos valores y el modo en que funcionan.

-
- -

A continuación veremos una lista de enlaces y exploraremos cómo funcionan los valores universales. El ejemplo en vivo de abajo te permite jugar con el CSS y ver lo que sucede cuando se hacen cambios. Jugar con el código es la mejor forma de enfrentarse al HTML y el CSS.

- -

Por ejemplo:

- -
    -
  1. Se ha aplicado la clase my-class-1 al segundo elemento de lista. Esto establece por herencia el color del elemento <a> que está anidado en él. ¿Cómo cambia el color del enlace si quitamos esta regla?
    2. -
  2. ¿Entiendes por qué el tercer y el cuarto enlace se ven de este color? En caso contrario, comprueba la descripción de los valores anteriores.
    3. -
  3. ¿Cuál de los enlaces va a cambiar de color si se define un nuevo color para el elemento <a>, por ejemplo, a { color: red; }?
    4. -
- -

{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} 

- -

Restablecer todos los valores de propiedad

- -

La propiedad CSS abreviada all se puede utilizar para aplicar uno de estos valores de herencia a (casi) todas las propiedades a la vez. Su valor puede ser cualquiera de los valores de herencia (inherit, initial, unset, o revert). Es una forma práctica de deshacer los cambios realizados respecto al estilo para que puedas volver a un punto de partida conocido antes de empezar a introducir cambios.

- -

En el ejemplo siguiente hay dos bloques de cita. El primero ya tiene un estilo aplicado al propio elemento de cita, mientras que el segundo tiene una clase aplicada al bloque de cita que establece el valor all en unset.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} 

- -

Prueba a establecer el valor de all al resto de valores disponibles y observa la diferencia.

- -

Comprender la cascada

- -

Ahora entendemos por qué un párrafo que está anidado en la estructura del HTML es del mismo color que el CSS aplicado al cuerpo (body) del HTML y, a partir de los artículos de introducción sabemos cómo cambiar el CSS aplicado a algo en cualquier parte del documento, ya sea mediante la asignación de CSS a un elemento o la creación de una clase. Ahora vamos a echar un vistazo a la forma en que el concepto de cascada define qué reglas CSS se aplican cuando más de un elemento de estilo puede aplicar estilo a un elemento.

- -

Hay que considerar tres factores, que se enumeran a continuación en orden de importancia creciente. Los posteriores invalidan los anteriores:

- -
    -
  1. Orden en el código
    2. -
  2. Especificidad
    3. -
  3. Importancia
    4. -
- -

Vamos a explicarlos para ver cómo los navegadores determinan exactamente que CSS deben aplicar.

- -

Orden en el código

- -

Ya hemos visto cómo el orden en el código es importante en el concepto de cascada. Si tienes más de una regla con exactamente el mismo peso, la que ocupa el último lugar en el CSS gana. Puedes entenderlo como que las reglas que están más cerca del elemento considerado sobreescriben las anteriores hasta que la última gana y da formato al elemento.

- -

Especificidad

- -

Una vez entendido el hecho de que el orden de los elementos en el código es importante, te encontrarás en alguna situación en la que sabes cuál es la última norma en la hoja de estilo, pero se aplica una regla anterior. Esto se debe a que la regla anterior tiene una especificidad mayor, es decir, es más específica y, por lo tanto, el navegador la escoge como la que debe dar forma al elemento.

- -

Como hemos visto anteriormente en este mismo artículo, un selector de clase tiene más peso que un selector de elemento, por lo que las propiedades que se definen en la clase tienen prioridad sobre las que se aplican directamente en el elemento.

- -

Un elemento que hay que tener en cuenta es que aunque pensamos en términos de selectores y reglas que se aplican a lo que estos seleccionan, no es toda la regla lo que se sobrescribe, sino solo las propiedades que entran en conflicto.

- -

Este comportamiento ayuda a evitar repeticiones en el CSS. Una práctica común es definir estilos genéricos para los elementos básicos y luego, crear clases para los elementos que son diferentes. Por ejemplo, en la hoja de estilo que mostramos a continuación hemos definido estilos genéricos para los encabezados de nivel 2; posteriormente hemos creado algunas clases que solo cambian algunas de las propiedades y los valores. Los valores definidos inicialmente se aplican a todos los encabezados, y entonces los valores más específicos se aplican a los encabezados con las clases.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} 

- -

Ahora vamos a echar un vistazo a cómo el navegador calcula la especificidad. Ya sabemos que un selector de elemento tiene una especificidad baja y se puede sobrescribir con un elemento de clase. Esencialmente se otorga un valor de puntos a los diferentes tipos de selectores y la suma de estos establece la importancia de ese selector en particular, que a continuación puede evaluarse ante otras posibles coincidencias.

- -

La cantidad de especificidad de un selector se mide usando cuatro valores diferentes (o componentes), que pueden describirse como millares, centenas, decenas y unidades (cuatro dígitos individuales dispuestos en cuatro columnas):

- -
    -
  1. Millares: Se suma un punto en esta columna si la declaración está en un atributo de {{htmlattrxref ("style")}} o, como suelen denominarse, estilos en línea. Tales declaraciones no tienen selectores, por lo que su especificidad siempre es 1000.
    2. -
  2. Centenas: Se suma un punto en esta columna por cada selector con ID particular que esté contenido en el selector general.
    3. -
  3. Decenas: Se suma un punto en esta columna por cada selector de clase, de atributo o pseudoclase que estén contenidos en el selector general.
    4. -
  4. Unidades: Se suma un punto en esta columna por cada selector o pseudoelemento que esté contenido en el selector general.
    5. -
- -
-

Nota: El selector universal (*), los operadores de combinación (+, >, ~, ' ') y la pseudo-clase de negación (:not) no tienen ningún efecto sobre la especificidad.

-
- -

La tabla siguiente muestra algunos ejemplos concretos para ayudarte a entenderlo mejor. Analízalos y trata de entender por qué tienen la especificidad que les hemos dado. Aun no hemos explicado los selectores de forma detallada, pero puedes encontrar detalles de cada selector en los selectores de referencia de MDN.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorMillares:Centenas:Decenas:Unidades:Especificidad total
h100010001
h1 + p::first-letter00030003
li > a[href*="en-US"] > .inline-warning00220022
#identifier01000100
Sin selector, con una regla en el atributo de un elemento {{htmlattrxref("style")}}10001000
- -

Antes de continuar, vamos a ver un ejemplo:

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} 

- -

¿Qué pasa aquí? En primer lugar, estamos interesados solo en las primeras siete reglas de este ejemplo y, como te habrás dado cuenta, hemos incluido sus valores de especificidad en un comentario antes de cada una.

- - - -
    -
- -
-

Nota: Esto solo es un ejemplo aproximado para facilitar la comprensión. En realidad, cada tipo de selector tiene su nivel de especificidad propio, que no pueden sobrescribir los selectores con un nivel de especificidad menor. Por ejemplo, un millar de selectores de clase combinados no serían capaces de sobrescribir las reglas de un selector ID.

- -

Una forma más precisa de evaluar la especificidad sería anotar los niveles de especificidad individualmente de mayor a menor. Solo cuando hay empate entre las puntuaciones de los selectores dentro de un nivel especifico será necesario evaluar el nivel inferior siguiente; de lo contrario, puedes prescindir de los selectores de especificidad de los niveles inferiores, ya que nunca pueden sobrescribir los niveles de especificidad más altos.

-
- -

Propiedad !important

- -

Hay una pieza especial de CSS que se puede utilizar para anular todos los cálculos anteriores, sin embargo se debe tener mucho cuidado con su uso: !important. Se utiliza para convertir una propiedad y un valor particular en el elemento más específico, de modo que se invalidan las reglas normales de la cascada.

- -

Echa un vistazo a este ejemplo en el que se muestran dos párrafos, uno de los cuales tiene un elemento ID.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} 

- -

Vamos a observarlo con detenimiento para ver qué sucede. Elimina algunas de las propiedades para ver lo que sucede si te cuesta entender lo que ocurre:

- -
    -
  1. Verás que se han aplicado los valores de {{cssxref("color")}} y {{cssxref("padding")}} de la tercera regla pero no el de {{cssxref("background-color")}}. ¿Por qué? Deberían haberse aplicado para los tres porque las reglas que se encuentran más adelante en el orden en el código fuente prevalecen sobre las reglas anteriores.
    2. -
  2. Sin embargo, ganan las reglas que están antes porque los selectores de clase tienen mayor especificidad que selectores de elemento.
    3. -
  3. En ambos bloques de código hay una clase {{htmlattrxref("class")}} con el valor better, pero en el segundo bloque de código hay un {{htmlattrxref("id")}} con el valor winning. Puesto que los identificadores tienen una especificidad incluso mayor que las clases (solo puede haber un elemento con un determinado ID en cada página, mientras que puede haber muchos elementos de la misma clase: los selectores ID son muy específicos con lo que delimitan), el primer bloque de código tendría un fondo de color gris y ningún borde, según lo que especifica la clase, mientras que al segundo bloque de código se aplicarían tanto el color de fondo rojo como el borde negro de 1 píxel.
    4. -
  4. El segundo elemento, en cambio, se muestra con el fondo de color rojo pero sin borde. ¿Por qué? Porque la declaración !important que hay en la segunda regla, después de border: none significa que esta declaración tendrá más valor que la regla anterior, aunque el ID de esta tenga mayor especificidad.
    5. -
- -
-

Nota: La única manera de anular la declaración !important sería incluir otra declaración !important en una declaración con la misma especificidad que aparezca más adelante en el orden del código fuente, o con una especificidad superior.

-
- -

Es útil saber que !important existe para que sepas qué es cuando te lo encuentres en el código de otras personas. Sin embargo, te recomendamos encarecidamente que no lo utilices a menos que sea absolutamente necesario. !important cambia el modo en que suele funcionar la cascada, por lo que puede dificultar mucho la depuración de problemas en el CSS, especialmente en una hoja de estilo grande.

- -

Una situación en la que puede que tengas que utilizarlo es si trabajas en un CMS en el que no es posible editar los módulos básicos de CSS y realmente tienes que anular un estilo que no puede anularse de ninguna otra forma. Aun así, te recomendamos encarecidamente que evites su uso.

- -

El efecto de la ubicación del CSS

- -

Por último, resulta útil señalar que la importancia de una declaración CSS depende de la hoja de estilo en que se especifica (es posible que los usuarios configuren hojas de estilo personalizadas para anular los estilos de los desarrolladores, por ejemplo, porque el usuario podría tener alguna discapacidad visual, o bien porque desea configurar el tamaño de letra de todas las páginas web que visita para que sea el doble de grande y le proporcione una mayor facilidad de lectura).

- -

Resumen

- -

Las declaraciones contradictorias se aplicarán en el orden siguiente (recuerda que las últimas prevalecen sobre las anteriores):

- -
    -
  1. Declaraciones en las hojas de estilo de agente de usuario (por ejemplo, estilos predeterminados del navegador, que se utilizan cuando no hay otro estilo).
    2. -
  2. Declaraciones normales en las hojas de estilo del usuario (estilos personalizados creados por un usuario).
    3. -
  3. Declaraciones normales en las hojas de estilo de autor (los estilos que creamos nosotros, los desarrolladores web).
    4. -
  4. Declaraciones !important en las hojas de estilo de autor
    5. -
  5. Declaraciones !important en las hojas de estilo del usuario
    6. -
- -

Para los desarrolladores tiene sentido que sus hojas de estilo anulen a las de usuario para mantener el diseño según lo previsto, pero, como hemos visto, a veces los usuarios tienen buenas razones para anular las directrices de los desarrolladores web. Esto puede lograrse con el uso de !important en sus reglas.

- -

Pon a prueba tus habilidades

- -

Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para verificar que retienes esa einformación en Test your skills: the Cascade.

- -

¿Qué sigue?

- -

Si has entendido la mayor parte de este artículo, ¡enhorabuena! Has comenzado a familiarizarte con la mecánica fundamental del CSS. En el artículo siguiente vamos a ver con detalle los selectores.

- -

Si todavía no tienes una comprensión completa de los conceptos de cascada, especificidad y herencia, ¡no te preocupes! Es, sin duda, lo más complejo que hemos expuesto hasta ahora y es algo que incluso los desarrolladores web profesionales encuentran difícil. Te aconsejamos que regreses a este artículo cuantas veces necesites a medida que avances con el curso.

- -

Regresa a esta página si empiezas a toparte con problemas extraños o con que los estilos no se aplican de la forma que esperas. Podría ser un problema de especificidad.

- -

{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}

- -

En este módulo

- -
    -
  1. La cascada y la herencia
    2. -
  2. Selectores CSS - -
    3. -
  3. El modelo de caja
    4. -
  4. Fondos y bordes
    5. -
  5. El uso de diferentes direcciones de texto
    6. -
  6. El desbordamiento de los contenidos
    7. -
  7. Los valores y las unidades
    8. -
  8. Elementos de dimensionado en CSS
    9. -
  9. Imágenes, media y elementos de formulario
    10. -
  10. Aplicar estilo a las tablas
    11. -
  11. Depurar el CSS
    12. -
  12. Organizar el CSS
    13. -
diff --git a/files/es/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/es/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..91a359181f --- /dev/null +++ b/files/es/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,333 @@ +--- +title: Cascada y herencia +slug: Learn/CSS/Building_blocks/Cascada_y_herencia +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +
{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
+ +

El objetivo de este artículo es desarrollar la comprensión de algunos de los conceptos fundamentales de CSS (cascada, especificidad y herencia) que controlan cómo se aplica el CSS al HTML y cómo se resuelven los conflictos.

+ +

A medida que avances en este apartado verás que puede resultar menos relevante y un poco más académico que otros artículos, pero la comprensión de estas cuestiones te ahorrará problemas más adelante. Te animamos a que trabajes meticulosamente este apartado y verifiques que entiendes los conceptos antes de continuar.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y una idea de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Aprender qué son la cascada y la especificidad, y cómo funciona la herencia en CSS.
+ +

Reglas conflictivas

+ +

CSS significa hojas de estilo en cascada (cascading style sheets), y es muy importante entender la palabra cascada. La forma en que se comporta la cascada es la clave para comprender el CSS.

+ +

En algún momento trabajarás en un proyecto y encontrarás que el CSS que pensabas que debería aplicarse a un elemento no funciona. Por lo general, el problema suele ser que has creado dos normas que podrían aplicarse al mismo elemento. La cascada, y el concepto estrechamente relacionado de especificidad son mecanismos que controlan qué regla se aplica cuando aparecen tales conflictos. Es posible que la regla que se apliuca finalmente a tu elemento no sea la que esperas, por lo que debes comprender cómo funcionan estos mecanismos.

+ +

También es significativo el concepto de herencia, que significa que algunas propiedades CSS heredan por defecto los valores establecidos en el elemento padre, pero otras no. Esto también puede causar una respuesta diferente a la que esperas.

+ +

Vamos a empezar por echar un vistazo rápido a los principales elementos que nos interesan, y a continuación veremos cómo interactúan entre sí y con tu CSS. Pueden resultar un poco difíciles de entender, pero a medida que practiques escribiendo CSS te resultará más fácil de entender la manera cómo funcionan.

+ +

Cascada

+ +

En un primer nivel de simplicidad, la cascada en las hojas de estilo significa que el orden de las reglas importa en CSS: cuando dos reglas tienen la misma especificidad, se aplica la que aparece en último lugar en el CSS.

+ +

En el ejemplo siguiente tenemos dos reglas que pueden aplicarse al h1. El h1 acaba siendo de color azul porque estas normas tienen un selector idéntico y, por lo tanto, tienen la misma especificidad. Por esta razón, se aplica la última que aparece.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} 

+ +

Especificidad

+ +

La especificidad es el modo que tiene el navegador de decidir qué regla se aplica si diversas reglas tienen selectores diferentes pero podrían aplicarse a un mismo elemento. Básicamente, la especificidad mide cuán específica es la selección de un selector:

+ + + +

Veamos un ejemplo. Aquí abajo encontrarás dos reglas que pueden aplicarse al elemento h1. Este elemento h1 termina siendo de color rojo: el selector de clase confiere a esta regla una mayor especificidad, así que se aplicará a pesar de la regla para el selector de elemento que aparece más abajo en el orden del código.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} 

+ +

Profundizaremos en la especificidad más adelante.

+ +

Herencia

+ +

La herencia también debe entenderse en este contexto: algunos valores de las propiedades CSS que se han establecido para los elementos padre los heredan los elementos hijo, pero otros no.

+ +

Por ejemplo, si para un elemento se establece el color (color) y el tipo de letra (font-family), cada elemento que se encuentre dentro de él también se mostrará de ese color y con ese tipo de letra, a menos que les se haya aplicado un color y un tipo de letra diferentes directamente.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 

+ +

Algunas propiedades no se heredan. Por ejemplo, si para un elemento se establece un ancho {{cssxref("width")}} del 50%, sus descendientes no tendrán un 50% de ancho con respecto al de sus padres. Si este fuera el caso, ¡sería muy frustrante usar CSS!

+ +
+

Nota: En las páginas de referencia de las propiedades CSS de MDN encontrarás un cuadro con información técnica (por lo general, en la parte inferior de la sección de especificaciones) que enumera una serie de puntos sobre cada propiedad, incluyendo cuáles se heredan y cuáles no. Véase, por ejemplo, la sección de especificaciones de la propiedad color.

+
+ +

Comprender cómo trabajan juntos estos conceptos

+ +

Estos tres conceptos controlan qué CSS se aplica a qué elemento. En las secciones siguientes veremos cómo funcionan en conjunto. A veces puede parecer un poco complicado, pero lo irás recordando a medida que ganes experiencia con el CSS, y siempre puedes consultar los detalles si se te olvidan. ¡Incluso los desarrolladores experimentados lo hacen!

+ +

Comprender la herencia

+ +

Vamos a empezar con la herencia. En el ejemplo siguiente tenemos un elemento {{HTMLElement( "ul")}} con dos niveles de listas no ordenadas anidadas en él. Hemos establecido para el <ul> exterior un borde, un relleno y un color de fuente.

+ +

El color se ha aplicado a los hijos directos y también a los hijos indirectos: los elementos hijo <li> inmediatos y los que están dentro de la primera lista. A continuación, hemos añadido a la segunda lista anidada una clase especial y le hemos aplicado un color diferente, que los elementos hijo de esta heredarán.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} 

+ +

La anchura (como se mencionó anteriormente), los márgenes, el relleno y los bordes no se heredan. Si los elementos hijo de nuestra lista heredaran los bordes, todas las listas y los elementos de lista ganarían un borde cada vez ¡y no es probable que vez quieras un efecto así!

+ +

Las propiedades que se heredan por defecto y las que no son cuestión, en gran medida, de sentido común.

+ +

Control de la herencia

+ +

CSS proporciona cuatro valores de propiedad universales especiales para el control de la herencia. Todas las propiedades CSS aceptan estos valores.

+ +
+
{{cssxref("inherit")}}
+
Establece que el valor de la propiedad que se aplica a un elemento determinado sea exactamente igual al del elemento padre. En la práctica, esto "activa la herencia".
+
{{cssxref("initial")}}
+
Establece que el valor de la propiedad que se aplica a un elemento seleccionado tenga el mismo valor que esté establecido para esa propiedad en la hoja de estilo por defecto del navegador.
+
{{cssxref("unset")}}
+
Restablece la propiedad a su valor natural, lo que significa que si la propiedad se hereda de forma natural, actúa como inherit, y en caso contrario como initial.
+
+ +
+

Nota: También hay un valor más reciente, {{cssxref ("revert")}}, que todavía admiten pocos navegadores.

+
+ +
+

Nota: Véase la sección El origen de las declaraciones CSS en el artículo Introducción al concepto de cascada en CSS para obtener más información sobre cada uno de estos valores y el modo en que funcionan.

+
+ +

A continuación veremos una lista de enlaces y exploraremos cómo funcionan los valores universales. El ejemplo en vivo de abajo te permite jugar con el CSS y ver lo que sucede cuando se hacen cambios. Jugar con el código es la mejor forma de enfrentarse al HTML y el CSS.

+ +

Por ejemplo:

+ +
    +
  1. Se ha aplicado la clase my-class-1 al segundo elemento de lista. Esto establece por herencia el color del elemento <a> que está anidado en él. ¿Cómo cambia el color del enlace si quitamos esta regla?
    2. +
  2. ¿Entiendes por qué el tercer y el cuarto enlace se ven de este color? En caso contrario, comprueba la descripción de los valores anteriores.
    3. +
  3. ¿Cuál de los enlaces va a cambiar de color si se define un nuevo color para el elemento <a>, por ejemplo, a { color: red; }?
    4. +
+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} 

+ +

Restablecer todos los valores de propiedad

+ +

La propiedad CSS abreviada all se puede utilizar para aplicar uno de estos valores de herencia a (casi) todas las propiedades a la vez. Su valor puede ser cualquiera de los valores de herencia (inherit, initial, unset, o revert). Es una forma práctica de deshacer los cambios realizados respecto al estilo para que puedas volver a un punto de partida conocido antes de empezar a introducir cambios.

+ +

En el ejemplo siguiente hay dos bloques de cita. El primero ya tiene un estilo aplicado al propio elemento de cita, mientras que el segundo tiene una clase aplicada al bloque de cita que establece el valor all en unset.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} 

+ +

Prueba a establecer el valor de all al resto de valores disponibles y observa la diferencia.

+ +

Comprender la cascada

+ +

Ahora entendemos por qué un párrafo que está anidado en la estructura del HTML es del mismo color que el CSS aplicado al cuerpo (body) del HTML y, a partir de los artículos de introducción sabemos cómo cambiar el CSS aplicado a algo en cualquier parte del documento, ya sea mediante la asignación de CSS a un elemento o la creación de una clase. Ahora vamos a echar un vistazo a la forma en que el concepto de cascada define qué reglas CSS se aplican cuando más de un elemento de estilo puede aplicar estilo a un elemento.

+ +

Hay que considerar tres factores, que se enumeran a continuación en orden de importancia creciente. Los posteriores invalidan los anteriores:

+ +
    +
  1. Orden en el código
    2. +
  2. Especificidad
    3. +
  3. Importancia
    4. +
+ +

Vamos a explicarlos para ver cómo los navegadores determinan exactamente que CSS deben aplicar.

+ +

Orden en el código

+ +

Ya hemos visto cómo el orden en el código es importante en el concepto de cascada. Si tienes más de una regla con exactamente el mismo peso, la que ocupa el último lugar en el CSS gana. Puedes entenderlo como que las reglas que están más cerca del elemento considerado sobreescriben las anteriores hasta que la última gana y da formato al elemento.

+ +

Especificidad

+ +

Una vez entendido el hecho de que el orden de los elementos en el código es importante, te encontrarás en alguna situación en la que sabes cuál es la última norma en la hoja de estilo, pero se aplica una regla anterior. Esto se debe a que la regla anterior tiene una especificidad mayor, es decir, es más específica y, por lo tanto, el navegador la escoge como la que debe dar forma al elemento.

+ +

Como hemos visto anteriormente en este mismo artículo, un selector de clase tiene más peso que un selector de elemento, por lo que las propiedades que se definen en la clase tienen prioridad sobre las que se aplican directamente en el elemento.

+ +

Un elemento que hay que tener en cuenta es que aunque pensamos en términos de selectores y reglas que se aplican a lo que estos seleccionan, no es toda la regla lo que se sobrescribe, sino solo las propiedades que entran en conflicto.

+ +

Este comportamiento ayuda a evitar repeticiones en el CSS. Una práctica común es definir estilos genéricos para los elementos básicos y luego, crear clases para los elementos que son diferentes. Por ejemplo, en la hoja de estilo que mostramos a continuación hemos definido estilos genéricos para los encabezados de nivel 2; posteriormente hemos creado algunas clases que solo cambian algunas de las propiedades y los valores. Los valores definidos inicialmente se aplican a todos los encabezados, y entonces los valores más específicos se aplican a los encabezados con las clases.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} 

+ +

Ahora vamos a echar un vistazo a cómo el navegador calcula la especificidad. Ya sabemos que un selector de elemento tiene una especificidad baja y se puede sobrescribir con un elemento de clase. Esencialmente se otorga un valor de puntos a los diferentes tipos de selectores y la suma de estos establece la importancia de ese selector en particular, que a continuación puede evaluarse ante otras posibles coincidencias.

+ +

La cantidad de especificidad de un selector se mide usando cuatro valores diferentes (o componentes), que pueden describirse como millares, centenas, decenas y unidades (cuatro dígitos individuales dispuestos en cuatro columnas):

+ +
    +
  1. Millares: Se suma un punto en esta columna si la declaración está en un atributo de {{htmlattrxref ("style")}} o, como suelen denominarse, estilos en línea. Tales declaraciones no tienen selectores, por lo que su especificidad siempre es 1000.
    2. +
  2. Centenas: Se suma un punto en esta columna por cada selector con ID particular que esté contenido en el selector general.
    3. +
  3. Decenas: Se suma un punto en esta columna por cada selector de clase, de atributo o pseudoclase que estén contenidos en el selector general.
    4. +
  4. Unidades: Se suma un punto en esta columna por cada selector o pseudoelemento que esté contenido en el selector general.
    5. +
+ +
+

Nota: El selector universal (*), los operadores de combinación (+, >, ~, ' ') y la pseudo-clase de negación (:not) no tienen ningún efecto sobre la especificidad.

+
+ +

La tabla siguiente muestra algunos ejemplos concretos para ayudarte a entenderlo mejor. Analízalos y trata de entender por qué tienen la especificidad que les hemos dado. Aun no hemos explicado los selectores de forma detallada, pero puedes encontrar detalles de cada selector en los selectores de referencia de MDN.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorMillares:Centenas:Decenas:Unidades:Especificidad total
h100010001
h1 + p::first-letter00030003
li > a[href*="en-US"] > .inline-warning00220022
#identifier01000100
Sin selector, con una regla en el atributo de un elemento {{htmlattrxref("style")}}10001000
+ +

Antes de continuar, vamos a ver un ejemplo:

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} 

+ +

¿Qué pasa aquí? En primer lugar, estamos interesados solo en las primeras siete reglas de este ejemplo y, como te habrás dado cuenta, hemos incluido sus valores de especificidad en un comentario antes de cada una.

+ + + +
    +
+ +
+

Nota: Esto solo es un ejemplo aproximado para facilitar la comprensión. En realidad, cada tipo de selector tiene su nivel de especificidad propio, que no pueden sobrescribir los selectores con un nivel de especificidad menor. Por ejemplo, un millar de selectores de clase combinados no serían capaces de sobrescribir las reglas de un selector ID.

+ +

Una forma más precisa de evaluar la especificidad sería anotar los niveles de especificidad individualmente de mayor a menor. Solo cuando hay empate entre las puntuaciones de los selectores dentro de un nivel especifico será necesario evaluar el nivel inferior siguiente; de lo contrario, puedes prescindir de los selectores de especificidad de los niveles inferiores, ya que nunca pueden sobrescribir los niveles de especificidad más altos.

+
+ +

Propiedad !important

+ +

Hay una pieza especial de CSS que se puede utilizar para anular todos los cálculos anteriores, sin embargo se debe tener mucho cuidado con su uso: !important. Se utiliza para convertir una propiedad y un valor particular en el elemento más específico, de modo que se invalidan las reglas normales de la cascada.

+ +

Echa un vistazo a este ejemplo en el que se muestran dos párrafos, uno de los cuales tiene un elemento ID.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} 

+ +

Vamos a observarlo con detenimiento para ver qué sucede. Elimina algunas de las propiedades para ver lo que sucede si te cuesta entender lo que ocurre:

+ +
    +
  1. Verás que se han aplicado los valores de {{cssxref("color")}} y {{cssxref("padding")}} de la tercera regla pero no el de {{cssxref("background-color")}}. ¿Por qué? Deberían haberse aplicado para los tres porque las reglas que se encuentran más adelante en el orden en el código fuente prevalecen sobre las reglas anteriores.
    2. +
  2. Sin embargo, ganan las reglas que están antes porque los selectores de clase tienen mayor especificidad que selectores de elemento.
    3. +
  3. En ambos bloques de código hay una clase {{htmlattrxref("class")}} con el valor better, pero en el segundo bloque de código hay un {{htmlattrxref("id")}} con el valor winning. Puesto que los identificadores tienen una especificidad incluso mayor que las clases (solo puede haber un elemento con un determinado ID en cada página, mientras que puede haber muchos elementos de la misma clase: los selectores ID son muy específicos con lo que delimitan), el primer bloque de código tendría un fondo de color gris y ningún borde, según lo que especifica la clase, mientras que al segundo bloque de código se aplicarían tanto el color de fondo rojo como el borde negro de 1 píxel.
    4. +
  4. El segundo elemento, en cambio, se muestra con el fondo de color rojo pero sin borde. ¿Por qué? Porque la declaración !important que hay en la segunda regla, después de border: none significa que esta declaración tendrá más valor que la regla anterior, aunque el ID de esta tenga mayor especificidad.
    5. +
+ +
+

Nota: La única manera de anular la declaración !important sería incluir otra declaración !important en una declaración con la misma especificidad que aparezca más adelante en el orden del código fuente, o con una especificidad superior.

+
+ +

Es útil saber que !important existe para que sepas qué es cuando te lo encuentres en el código de otras personas. Sin embargo, te recomendamos encarecidamente que no lo utilices a menos que sea absolutamente necesario. !important cambia el modo en que suele funcionar la cascada, por lo que puede dificultar mucho la depuración de problemas en el CSS, especialmente en una hoja de estilo grande.

+ +

Una situación en la que puede que tengas que utilizarlo es si trabajas en un CMS en el que no es posible editar los módulos básicos de CSS y realmente tienes que anular un estilo que no puede anularse de ninguna otra forma. Aun así, te recomendamos encarecidamente que evites su uso.

+ +

El efecto de la ubicación del CSS

+ +

Por último, resulta útil señalar que la importancia de una declaración CSS depende de la hoja de estilo en que se especifica (es posible que los usuarios configuren hojas de estilo personalizadas para anular los estilos de los desarrolladores, por ejemplo, porque el usuario podría tener alguna discapacidad visual, o bien porque desea configurar el tamaño de letra de todas las páginas web que visita para que sea el doble de grande y le proporcione una mayor facilidad de lectura).

+ +

Resumen

+ +

Las declaraciones contradictorias se aplicarán en el orden siguiente (recuerda que las últimas prevalecen sobre las anteriores):

+ +
    +
  1. Declaraciones en las hojas de estilo de agente de usuario (por ejemplo, estilos predeterminados del navegador, que se utilizan cuando no hay otro estilo).
    2. +
  2. Declaraciones normales en las hojas de estilo del usuario (estilos personalizados creados por un usuario).
    3. +
  3. Declaraciones normales en las hojas de estilo de autor (los estilos que creamos nosotros, los desarrolladores web).
    4. +
  4. Declaraciones !important en las hojas de estilo de autor
    5. +
  5. Declaraciones !important en las hojas de estilo del usuario
    6. +
+ +

Para los desarrolladores tiene sentido que sus hojas de estilo anulen a las de usuario para mantener el diseño según lo previsto, pero, como hemos visto, a veces los usuarios tienen buenas razones para anular las directrices de los desarrolladores web. Esto puede lograrse con el uso de !important en sus reglas.

+ +

Pon a prueba tus habilidades

+ +

Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para verificar que retienes esa einformación en Test your skills: the Cascade.

+ +

¿Qué sigue?

+ +

Si has entendido la mayor parte de este artículo, ¡enhorabuena! Has comenzado a familiarizarte con la mecánica fundamental del CSS. En el artículo siguiente vamos a ver con detalle los selectores.

+ +

Si todavía no tienes una comprensión completa de los conceptos de cascada, especificidad y herencia, ¡no te preocupes! Es, sin duda, lo más complejo que hemos expuesto hasta ahora y es algo que incluso los desarrolladores web profesionales encuentran difícil. Te aconsejamos que regreses a este artículo cuantas veces necesites a medida que avances con el curso.

+ +

Regresa a esta página si empiezas a toparte con problemas extraños o con que los estilos no se aplican de la forma que esperas. Podría ser un problema de especificidad.

+ +

{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. La cascada y la herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de caja
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/contenido_desbordado/index.html b/files/es/learn/css/building_blocks/contenido_desbordado/index.html deleted file mode 100644 index 808a519c12..0000000000 --- a/files/es/learn/css/building_blocks/contenido_desbordado/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Contenido desbordado -slug: Learn/CSS/Building_blocks/Contenido_desbordado -translation_of: Learn/CSS/Building_blocks/Overflowing_content ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}
- -

En este artículo veremos otro concepto importante en CSS: el desbordamiento. El desbordamiento es lo que sucede cuando hay demasiado contenido para que pueda caber cómodamente en una caja. En esta guía aprenderás qué es y cómo administrarlo.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, conocimientos básicos de HTML (véase Introducción al HTML) y nociones de CSS (véase Primeros pasos con el CSS).
Objetivo:Comprender el desbordamiento y cómo gestionarlo.
- -

¿Qué es el desbordamiento?

- -

Ya sabemos que todo en CSS está dentro de una caja, y que podemos restringir el tamaño de estas cajas asignándoles los valores {{cssxref ("width")}} y {{cssxref ("height")}} (o {{cssxref("inline-size")}} y {{cssxref("block-size")}}). El desbordamiento es lo que sucede cuando hay demasiado contenido en una caja, y no cabe cómodamente en ella. El CSS te proporciona varias herramientas para administrar este desbordamiento, y además es un concepto que resulta útil de conocer desde las primeras etapas. Te encontrarás con situaciones de desbordamiento con bastante frecuencia al escribir CSS, especialmente cuando profundices en compaginación con CSS.

- -

El CSS trata de evitar «la pérdida de datos»

- -

Vamos a comenzar con dos ejemplos que demuestran cómo se comporta el CSS por defecto cuando ocurre un desbordamiento.

- -

El primero consiste en una caja que a la que se le ha restringido la dimensión al darle una altura. Luego hemos añadido más contenido del que cabe en la caja. El contenido se desborda y se distribuye desordenadamente sobre el párrafo que hay debajo de la caja.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}

- -

El segundo consiste en una palabra dentro de una caja cuya dimensión en línea está restringida. La caja se ha hecho demasiado pequeña para que esa palabra quepa, y se desborda.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}

- -

Te debes estar preguntando por qué el CSS ha tomado por defecto el enfoque más bien desarreglado de provocar el desbordamiento desordenado del contenido. ¿Por qué no ocultar el contenido adicional o hacer crecer la caja?

- -

Siempre que sea posible, el CSS no oculta su contenido; hacerlo provocaría la pérdida de datos, que generalmente es un problema. En términos de CSS, esto significa que una parte del contenido desaparece. El problema con que desaparezca contenido es que podría ser que no notaras que ha desaparecido. Tus visitantes podrían no darse cuenta de que ha desaparecido contenido. Si se trata del botón de envío de datos en un formulario, nadie podría completar el formulario, y ¡eso es un gran problema! Así que, en vez de esto, el CSS tiende a desbordarse de un modo que sea visible. Es probable que te des cuenta de ese desarreglo, o en el peor de los casos, que un visitante de tu sitio web te informe de que una parte del contenido se superpone y debas arreglarlo.

- -

Si has restringido el tamaño de una caja con una anchura o una altura determinadas, el CSS asume que sabes lo que haces y que gestionas correctamente el potencial de desbordamiento. En general, restringir el tamaño de un bloque es problemático cuando el texto se va a poner en una caja, porque puede haber más texto del que te esperabas al diseñar el sitio o el tamaño del texto puede ser mayor, por ejemplo, si el usuario lo aumenta.

- -

En los artículos siguientes veremos diferentes modos de controlar el tamaño que podrían ser menos propensos a desbordarse. Sin embargo, si necesitas un tamaño fijo, también puedes controlar cómo se comporta el desbordamiento. ¡Sigue leyendo!

- -

La propiedad overflow

- -

La propiedad {{cssxref ("overflow")}} es el modo como tomas el control del desbordamiento de un elemento y le dices al navegador cómo desea que se comporte. El valor predeterminado para la propiedad overflow es visible, por lo que, de forma predeterminada vamos a poder ver cuándo se desborda nuestro contenido.

- -

Si deseas cortar el contenido cuando se desborda, puedes establecer el valor overflow: hidden en tu caja, que hace exactamente lo que dice: ocultar el desbordamiento. Esto puede hacer que las cosas desaparezcan, por lo que solo debes utilizar esta opción si ocultar contenido no te va a causar ningún problema.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}

- -

Quizás te gustaría añadir barras de desplazamiento cuando el contenido se desborde. Si usas overflow: scroll, tu navegador siempre mostrará barras de desplazamiento, incluso cuando no haya suficiente contenido para que pueda desbordarse. Es posible que desees hacer esto, porque evita que aparezcan y desaparezcan barras de desplazamiento según el contenido.

- -

Si en la caja siguiente eliminas parte del contenido, observarás que las barras de desplazamiento permanecen aun sin que haya nada que desplazar (o, como mucho, solo las pistas de la barra de desplazamiento).

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}

- -

En el ejemplo anterior solo necesitamos desplazarnos en el eje y, sin embargo, obtenemos barras de desplazamiento en ambos ejes. En su lugar, puedes usar la propiedad {{cssxref ("overflow-y")}}, y establecer overflow-y: scroll para poder desplazarte solo por el eje y.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}

- -

También puedes desplazarte por el eje x usando {{cssxref ("overflow-x")}}, aunque esta no es una forma recomendada para manejar palabras largas. Si necesitas lidiar con una palabra larga en una caja pequeña, puedes consultar las propiedades {{cssxref ("word-break")}} o {{cssxref ("overflow-wrap")}}. Además, algunos de los métodos expuestos en el artículo Elementos de dimensionado en CSS pueden ayudarte a crear cuadros que se adapten mejor a cantidades variables de contenido.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}

- -

Al igual que con el desplazamiento, obtendrás una barra de desplazamiento en la dimensión de desplazamiento independientemente de si hay suficiente contenido para provocar una barra de desplazamiento.

- -
-

Nota: observa que puedes especificar un desplazamiento en x y en y utilizando la propiedad overflow y pasando dos valores. Si especificas dos palabras clave, la primera se aplica a overflow-x y la segunda a overflow-y. De lo contrario, tanto overflow-x como overflow-y se fijan en el mismo valor. Por ejemplo, overflow: scroll hidden establece overflow-x en scroll y overflow-y en hidden.

-
- -

Si deseas que aparezcan barras de desplazamiento solo si hay más contenido del que cabe en la caja, utiliza overflow: auto. En este caso, el navegador decide si muestra las barras de desplazamiento o no. Los navegadores de escritorio solo suelen hacerlo cuando hay contenido suficiente para causar desbordamiento.

- -

En el ejemplo siguiente, elimina parte del contenido hasta que quepa en la caja y observarás que las barras de desplazamiento desaparecen.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}

- -

overflow establece un contexto de formato de bloque

- -

En CSS hay un concepto conocido como block formatting context o BFC (contexto de formato de bloque). No es algo de lo que debas preocuparte demasiado en este momento, pero es útil saber que cuando usas un valor de overflow, como scroll o auto, creas un BFC. El resultado es que el contenido de la caja al que acabas de cambiar el valor overflow se convierte en un minidiseño propio. Las cosas que están fuera del contenedor no pueden meterse en él, y nada puede sobresalir de esa caja hacia el diseño circundante. Esto es para permitir un comportamiento con desplazamiento, porque para poder crear una experiencia de desplazamiento consistente todo el contenido de tu caja ha de estar contenido en algo, y no puede superponerse con otros elementos de la página.

- -

Desbordamiento no deseado en diseño web

- -

Los métodos de diseño modernos (explicados en el módulo Diseñar con el CSS) gestionan muy bien el desbordamiento. Han sido diseñados para hacer frente al hecho de que tendemos a no poder predecir cuánto contenido habrá en la web. Sin embargo, en el pasado, los desarrolladores a menudo usaban alturas fijas para tratar de alinear los fondos de cajas que en realidad no tenían relación entre sí. Este método era frágil y, en una aplicación heredada, ocasionalmente puede aparecer una caja en que el contenido se superpone a otro contenido de la página. Si ves esto, sabrás que se trata de desbordamiento. Lo ideal sería volver a calcular el diseño para no tener que confiar tamaños de caja fijos.

- -

Al desarrollar un sitio web, siempre debes tener en cuenta los problemas de desbordamiento. Debes probar diseños con cantidades grandes y pequeñas de contenido, aumentar el tamaño de letra... y asegurarte de que tu CSS puede hacerle frente sin ningún problema. Es probable que cambiar el valor de overflow para ocultar contenido o añadir barras de desplazamiento sea algo que debas reservar solo para unos pocos casos especiales, en que realmente desees una caja con barra de desplazamiento, por ejemplo.

- -

Pon a prueba tus conocimientos

- -

Hay mucho que absorber en esta lección. ¿Recuerdas la información más importante? Para comprobarlo, ve a Test your skills: overflow.

- -

Resumen

- -

Este breve artículo ha introducido el concepto de desbordamiento; ahora comprendes que el CSS intenta no hacer invisible el desbordamiento de contenido, porque esto provoca la pérdida de datos. Has descubierto que puedes gestionar el desbordamiento potencial y también que debes probar tu trabajo para asegurarte de que no causa un desbordamiento problemático accidentalmente.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}

- -

En este módulo

- -
    -
  1. Cascada y herencia
    2. -
  2. Selectores CSS - -
    3. -
  3. El modelo de cajas
    4. -
  4. Fondos y bordes
    5. -
  5. El uso de diferentes direcciones de texto
    6. -
  6. El desbordamiento de los contenidos
    7. -
  7. Valores y unidades
    8. -
  8. Elementos de dimensionado en el CSS
    9. -
  9. Imágenes, media y elementos de formulario
    10. -
  10. Estilo de las tablas
    11. -
  11. Depurar el CSS
    12. -
  12. Organizar el CSS
    13. -
diff --git a/files/es/learn/css/building_blocks/debugging_css/index.html b/files/es/learn/css/building_blocks/debugging_css/index.html new file mode 100644 index 0000000000..5f04fdd756 --- /dev/null +++ b/files/es/learn/css/building_blocks/debugging_css/index.html @@ -0,0 +1,198 @@ +--- +title: Depurar el CSS +slug: Learn/CSS/Building_blocks/Depurar_el_CSS +translation_of: Learn/CSS/Building_blocks/Debugging_CSS +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
+ +

Al escribir CSS te puedes encontrar que, a veces, alguna parte de tu CSS no hace lo que esperas. Tal vez creas que cierto selector debería coincidir con un elemento, pero no sucede nada; o una caja tiene un tamaño diferente al que esperabas. Este artículo te orientará sobre cómo solucionar un problema de CSS y te mostrará cómo las DevTools incluidas en todos los navegadores modernos pueden ayudarte a descubrir qué sucede.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con el CSS).
Objetivo:Conocer los conceptos básicos de las DevTools que hay en los navegadores y de cómo inspeccionar y editar el CSS de un modo fácil.
+ +

Cómo acceder a las DevTools de los navegadores

+ +

El artículo ¿Qué son las herramientas de desarrollo de los navegadores? es una guía actualizada que explica cómo acceder a las herramientas en varios navegadores y plataformas. Si bien puedes optar por desarrollar principalmente en un navegador en particular y, por lo tanto, te familiarizarás más con las herramientas incluidas en ese navegador, vale la pena saber cómo acceder a ellas en otros navegadores. Esto ayudará si haces pruebas de las representaciones que dan diferentes navegadores.

+ +

También te darás cuenta de que los diversos navegadores han optado por centrarse en áreas diferentes al crear sus DevTools. Por ejemplo, en Firefox hay algunas herramientas excelentes para trabajar visualmente con la compaginación con CSS, que te permiten inspeccionar y editar Compaginaciones de cuadrícula, Flexbox y formas. Sin embargo, todos los navegadores tienen herramientas fundamentales similares. Por ejemplo, para inspeccionar las propiedades y los valores que se aplican a los elementos de tu página, y hacer cambios desde el editor.

+ +

En este artículo veremos algunas características útiles de Firefox DevTools para trabajar con CSS. Para hacerlo, usaremos un archivo de ejemplo. Carga esto en una pestaña nueva si deseas seguir adelante y abre tus DevTools como se describe en el artículo del enlace anterior.

+ +

El DOM y "View Source"

+ +

Algo que puede hacer tropezar a los recién llegados a DevTools es la diferencia entre lo que ves cuando miras el código fuente de una página web, o miras el archivo HTML que colocas en el servidor, y lo que puedes ver en la ventana HTML de DevTools. Aunque ves más o menos lo mismo que puedes ver desde View Source (Ver código fuente de la página), hay algunas diferencias.

+ +

En el DOM procesado, el navegador puede haber corregido algunos HTML mal escritos por ti. Si cerraste un elemento incorrectamente, por ejemplo, por abrir con un <h2> y cerrar con un </h3>, el navegador descubre lo que ibas a hacer y el HTML del DOM cerrará ese <h2> de apertura correctamente con un </h2>. El navegador también normaliza todo el HTML, y el DOM también muestra los cambios que hace JavaScript.

+ +

En comparación, View Source es simplemente el código fuente HTML tal como está almacenado en el servidor. El árbol HTML de tus DevTools muestra exactamente lo que el navegador representa en un momento dado, y te da una idea de lo que sucede en realidad.

+ +

Inspección del CSS aplicado

+ +

Selecciona un elemento de tu página, ya sea haciendo clic con el botón derecho o pulsando la tecla ctrl para seleccionar la opción Inspect, o seleccionándolo del árbol HTML que hay a la izquierda de la pantalla de la interfaz DevTools. Selecciona el elemento con la clase box1; este es el primer elemento de la página con una caja alrededor.

+ +

La página de ejemplo para este tutorial con DevTools abiertas.

+ +

Si observasla  vista de reglas, que está a la derecha de tu HTML, deberías poder ver las propiedades y los valores CSS aplicados sobre ese elemento. Verás las reglas aplicadas directamente a la clase box1 y también el CSS que la caja hereda de su elemento padre, en este caso <body>. Esto es útil para cuando ves que se aplica un CSS que no esperabas. Tal vez se esté heredando de un elemento padre y necesites añadir una regla para sobrescribirlo en el contexto de este elemento.

+ +

También es útil la capacidad de expandir las propiedades abreviadas. En nuestro ejemplo se usa la abreviación margin.

+ +

Haz clic en la pequeña flecha para expandir la vista, que muestra las diferentes propiedades sin abreviar y sus valores.

+ +

Puedes activar y desactivar los valores en la vista de reglas, cuando ese panel esté activo; si mantienes el ratón sobre él, aparecerán casillas de verificación. Desmarca la casilla de verificación de una regla, por ejemplo border-radius, y el CSS dejará de aplicarse.

+ +

Puedes usar esto para hacer una comparación entre A y B, decidir si algo se ve mejor con una regla aplicada o sin aplicar, y también para ayudar a depurarlo. Por ejemplo, si un diseño falla e intentas determinar qué propiedad causa el problema.

+ +

Editar valores

+ +

Además de activar y desactivar las propiedades, puedes editar sus valores. ¿Quieres ver si quizá otro color se ve mejor, o deseas modificar algún tamaño? Las DevTools pueden ahorrarte mucho tiempo a la hora de editar una hoja de estilo y volver a cargar la página.

+ +

Selecciona box1 y haz clic en la muestra (el pequeño círculo de color) que muestra el color aplicado al borde. Se abrirá un selector de color y puedes probar con colores diferentes, que se actualizarán en tiempo real en la página. De manera similar puedes cambiar el ancho o el estilo del borde.

+ +

Ventana de aplicación de estilos de DevTools con un selector de color abierto.

+ +

Añadir una propiedad nueva

+ +

Puedes añadir propiedades usando las DevTools. ¿Te has dado cuenta de que quizá no quieres que tu caja herede el tamaño de letra del elemento <body> y quieres establecer tu propio tamaño de letra específico? Pruébalo en DevTools antes de añadirlo a tu archivo CSS.

+ +

Puedes hacer clic en la llave de cierre de la regla para comenzar a introducir una declaración nueva, y en ese momento puedes comenzar a escribir la nueva propiedad y DevTools te mostrará una lista de propiedades coincidentes que se completará automáticamente. Después de seleccionar font-size, introduce el valor que deseas probar. También puede hacer clic en el botón + para añadir una regla adicional con el mismo selector y tus reglas nuevas.

+ +

La ventana DevTools, que añade una propiedad nueva a las reglas, con el autocompletado para font-open

+ +
+

Nota: También hay otras funciones útiles en la vista de reglas; por ejemplo, las declaraciones con valores no válidos están tachadas. Puedes obtener más información en Examinar y editar CSS.

+
+ +

Comprender el modelo de cajas

+ +

En artículos anteriores hemos expuesto el modelo de cajas, y el hecho de que tengamos un modelo de cajas alternativo que cambia la forma en que se calcula el tamaño de los elementos en función del tamaño que les asignas, más el relleno y los bordes. Las DevTools realmente pueden ayudarte a comprender cómo se calcula el tamaño de un elemento.

+ +

El panel de disposición muestra un diagrama del modelo de cajas en el elemento seleccionado, junto con una descripción de las propiedades y los valores que cambian la forma en que el elemento se presenta. Esto incluye una descripción de las propiedades que puedes no haber utilizado explícitamente en el elemento, pero que tienen valores iniciales establecidos.

+ +

En esta ventana, una de las propiedades que se detallan es la propiedad box-sizing, que controla qué modelo de cajas usa el elemento.

+ +

Compara las dos cajas con las clases box1 y box2. Ambas tienen el mismo ancho aplicado (400 px), sin embargo, box1 es visualmente más ancha. En la ventana de diseño puedes ver que usa content-box. Este es el valor que toma el tamaño que asignas al elemento y luego añade el área de relleno y el ancho del borde.

+ +

El elemento con una clase box2 usa border-box, por lo que aquí el área de relleno y el borde se restan del tamaño que has asignado al elemento. Esto significa que el espacio que la caja ocupa en la página es el tamaño exacto que se ha especificado, en nuestro caso width: 400px.

+ +

La ventana de diseño de DevTools

+ +
+

Nota: Descubre más en Examinar e inspeccionar el modelo de cajas.

+
+ +

Resolver problemas de especificidad

+ +

A veces, durante el desarrollo, pero en particular cuando necesitas editar el CSS de un sitio ya publicado, te resultará difícil conseguir que se aplique un determinado CSS. No importa lo que hagas, el elemento simplemente no parece aceptar tu CSS. Lo que suele suceder aquí es que un selector más específico anula tus cambios, y en este caso DevTools te será de gran ayuda.

+ +

En nuestro archivo de ejemplo hay dos palabras incluidas en un elemento <em>. Uno se muestra en color naranja y el otro en rosa. En el CSS hemos aplicado:

+ +
em {
+  color: hotpink;
+  font-weight: bold;
+}
+ +

Sin embargo, un poco más arriba en la hoja de estilo hay una regla con un selector .special:

+ +
.special {
+  color: orange;
+}
+ +

Como recordarás del artículo sobre cascada y herencia, en que hablamos sobre la especificidad, los selectores de clase son más específicos que los selectores de elemento, por lo que este es el valor que se aplica. DevTools puede ayudarte a encontrar estos problemas, especialmente si la información está oculta en algún lugar de una extensa hoja de estilo.

+ +

Inspecciona <em> con la clase .special y DevTools te mostrará que el naranja es el color que se aplica, y también te muestra la propiedad color aplicada al em tachado. Aquí puedes ver que la clase anula el selector de elemento.

+ +

Selecciona un em y mira en DevTools qué solapa el color.

+ +

Descubre más sobre las DevTools de Firefox

+ +

Hay mucha información aquí en MDN sobre las DevTools de Firefox. Echa un vistazo a la sección principal de las DevTools, y consulta las Guías prácticas para obtener información más detallada sobre las cosas que hemos expuesto brevemente en este artículo.

+ +

Problemas al depurar en CSS

+ +

Las DevTools pueden ser de gran ayuda a la hora de resolver problemas con el CSS, pero ¿cómo resuelves una situación en la que el CSS no se comporta como esperas? Los siguientes pasos deberían ayudarte.

+ +

Aléjate del problema

+ +

Cualquier problema de código puede ser frustrante, especialmente los problemas de CSS, porque a menudo no recibes un mensaje de error que buscar en línea para ayudarte a encontrar una solución. Si te sientes frustrado, aléjate del problema por un tiempo: sal a caminar, tómate una copa, habla con un compañero de trabajo o trabaja en otra cosa por un tiempo. A veces, la solución aparece mágicamente cuando dejas de pensar en el problema, e incluso si no llega, trabajar en ello cuando te sientas más fresco te será mucho más fácil.

+ +

¿Tu HTML y CSS son válidos?

+ +

Los navegadores esperan que tu CSS y HTML estén escritos correctamente, sin embargo, los navegadores también son muy indulgentes y harán todo lo posible para mostrar tus páginas web incluso si tiene errores en el marcado o en la hoja de estilo. Si tienes errores en el código, el navegador trata de adivinar lo que quieres decir, y podría tomar una decisión diferente a lo que tenías en mente. Además, dos navegadores diferentes pueden hacer frente al problema de dos maneras diferentes. Por lo tanto, un buen primer paso es pasar tu HTML y CSS por un validador, que detectar cualquier error.

+ + + +

¿La propiedad y el valor son compatibles con el navegador?

+ +

Los navegadores simplemente ignoran el CSS que no entienden. Si la propiedad o el valor que utilizas no es compatible con el navegador en el que lo pruebas, no se romperá nada, pero ese CSS no se aplicará. Las DevTools en general destacan de alguna manera las propiedades y los valores que no son compatibles. En la captura de pantalla siguiente, el navegador no admite el valor de subcuadrícula {{cssxref ("grid-template-columns")}}.

+ +

Imagen de las DevTools del navegador con la cuadrícula-plantilla-columnas: subcuadrícula tachada porque el valor de la subcuadrícula no es compatible.

+ +

También puedes echar un vistazo a las tablas de compatibilidad de navegadores en la parte inferior de cada página de propiedades del proyecto MDN. Te muestran la compatibilidad de cada navegador para esa propiedad, a menudo desglosado si hay compatibilidad para un uso de la propiedad y no para otros. La tabla siguiente muestra los datos de compatibilidad para la propiedad {{cssxref ("shape-outside")}}.

+ +

{{compat("css.shape-outside")}}

+ +

¿Hay algo más que anule tu CSS?

+ +

Aquí es donde la información que has aprendido sobre la especificidad será muy útil. Si tienes algo más específico que anula lo que intentas hacer, puedes entrar en un juego muy frustrante de tratar de resolverlo sin saber qué tienes que resolver. Sin embargo, como hemos dicho, las DevTools te mostrarán qué CSS se ha aplicado y así puedes averiguar cómo hacer que el nuevo selector sea lo suficientemente específico como para anularlo.

+ +

Haz un caso de prueba reducido del problema

+ +

Si el problema no se resuelve con los pasos anteriores, deberás investigar un poco más. Lo mejor que puedes hacer en este momento es crear lo que se conoce como un caso de prueba reducido. Ser capaz de «reducir un problema» es una habilidad muy útil. Te ayudará a encontrar problemas en tu propio código y en el de tus colegas, y también te permitirá informar de errores y solicitar ayuda de manera más efectiva.

+ +

Un caso de prueba reducido es un ejemplo de código que muestra el problema de la manera más simple posible, sin contenido ni estilo circundante. Esto significa a menudo sacar el código problemático de tu diseño para hacer un pequeño ejemplo que solo muestre ese código o característica.

+ +

Para crear un caso de prueba reducido:

+ +
    +
  1. Si tu marcado se genera dinámicamente, por ejemplo desde un CMS, crea una versión estática de la salida que muestre el problema. Un sitio para compartir código como CodePen es útil para alojar casos de prueba reducidos, porque son accesibles en línea y puedes compartirlos fácilmente con tus colegas. Puedes comenzar por hacer un View Source de la página y copiar el HTML en CodePen, luego toma cualquier CSS y JavaScript relevante e inclúyelo también. Después de eso, puedes verificar si el problema sigue ahí.
    2. +
  2. Si eliminar el JavaScript no soluciona el problema, no incluyas el JavaScript. Si eliminar el JavaScript hace desaparecer el problema, elimina la mayor cantidad de JavaScript que puedas; deja solo las causas del problema.
    3. +
  3. Elimina cualquier HTML que no contribuya al problema. Elimina componentes o incluso elementos principales del diseño. Nuevamente, intenta reducir al mínimo la cantidad de código que aún muestra el problema.
    4. +
  4. Elimina cualquier CSS que no afecte al problema.
    5. +
+ +

En el proceso, puedes descubrir qué causa el problema, o al menos ser capaz de ponerlo o quitarlo al eliminar algo específico. Vale la pena añadir algunos comentarios a tu código a medida que vas descubriendo cosas. Si tienes que pedir ayuda, estos comentarios indicarán a la persona que te ayuda lo que ya has intentado. Esto puede proporcionarte bastante información para permitirte buscar posibles problemas por sondeo y soluciones alternativas.

+ +

Si todavía tienes dificultades para solucionar el problema, tener un caso de prueba reducido te ofrece algo con lo que pedir ayuda, publicarlo en un foro o mostrarlo a un compañero de trabajo. Es mucho más probable que obtengas ayuda si antes de pedir la ayuda muestras que has hecho el trabajo de reducir el problema e identificar dónde sucede exactamente. Un desarrollador más experimentado va a poder detectar el problema con rapidez y orientarte en la dirección correcta, y aunque no sea así, echarle un vistazo rápido a tu caso de prueba reducido y, con suerte, ofrecerte al menos algo de ayuda.

+ +

En el caso de que tu problema sea en realidad un error en un navegador, también puedes usar un caso de prueba reducido para presentar un informe de error al proveedor del navegador correspondiente (por ejemplo, en el sitio de Bugzilla de Mozilla).

+ +

A medida que adquieras más experiencia con CSS, descubrirás que vas adquiriendo rapidez para descubrir de dónde vienen los problemas. Sin embargo, incluso los más experimentados a veces nos preguntamos qué pasa. Adoptar un enfoque metódico, hacer un caso de prueba reducido y explicar el problema a otra persona suele dar un buen resultado para encontrar una solución.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. Cascada y herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de cajas
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/depurar_el_css/index.html b/files/es/learn/css/building_blocks/depurar_el_css/index.html deleted file mode 100644 index 5f04fdd756..0000000000 --- a/files/es/learn/css/building_blocks/depurar_el_css/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: Depurar el CSS -slug: Learn/CSS/Building_blocks/Depurar_el_CSS -translation_of: Learn/CSS/Building_blocks/Debugging_CSS ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
- -

Al escribir CSS te puedes encontrar que, a veces, alguna parte de tu CSS no hace lo que esperas. Tal vez creas que cierto selector debería coincidir con un elemento, pero no sucede nada; o una caja tiene un tamaño diferente al que esperabas. Este artículo te orientará sobre cómo solucionar un problema de CSS y te mostrará cómo las DevTools incluidas en todos los navegadores modernos pueden ayudarte a descubrir qué sucede.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con el CSS).
Objetivo:Conocer los conceptos básicos de las DevTools que hay en los navegadores y de cómo inspeccionar y editar el CSS de un modo fácil.
- -

Cómo acceder a las DevTools de los navegadores

- -

El artículo ¿Qué son las herramientas de desarrollo de los navegadores? es una guía actualizada que explica cómo acceder a las herramientas en varios navegadores y plataformas. Si bien puedes optar por desarrollar principalmente en un navegador en particular y, por lo tanto, te familiarizarás más con las herramientas incluidas en ese navegador, vale la pena saber cómo acceder a ellas en otros navegadores. Esto ayudará si haces pruebas de las representaciones que dan diferentes navegadores.

- -

También te darás cuenta de que los diversos navegadores han optado por centrarse en áreas diferentes al crear sus DevTools. Por ejemplo, en Firefox hay algunas herramientas excelentes para trabajar visualmente con la compaginación con CSS, que te permiten inspeccionar y editar Compaginaciones de cuadrícula, Flexbox y formas. Sin embargo, todos los navegadores tienen herramientas fundamentales similares. Por ejemplo, para inspeccionar las propiedades y los valores que se aplican a los elementos de tu página, y hacer cambios desde el editor.

- -

En este artículo veremos algunas características útiles de Firefox DevTools para trabajar con CSS. Para hacerlo, usaremos un archivo de ejemplo. Carga esto en una pestaña nueva si deseas seguir adelante y abre tus DevTools como se describe en el artículo del enlace anterior.

- -

El DOM y "View Source"

- -

Algo que puede hacer tropezar a los recién llegados a DevTools es la diferencia entre lo que ves cuando miras el código fuente de una página web, o miras el archivo HTML que colocas en el servidor, y lo que puedes ver en la ventana HTML de DevTools. Aunque ves más o menos lo mismo que puedes ver desde View Source (Ver código fuente de la página), hay algunas diferencias.

- -

En el DOM procesado, el navegador puede haber corregido algunos HTML mal escritos por ti. Si cerraste un elemento incorrectamente, por ejemplo, por abrir con un <h2> y cerrar con un </h3>, el navegador descubre lo que ibas a hacer y el HTML del DOM cerrará ese <h2> de apertura correctamente con un </h2>. El navegador también normaliza todo el HTML, y el DOM también muestra los cambios que hace JavaScript.

- -

En comparación, View Source es simplemente el código fuente HTML tal como está almacenado en el servidor. El árbol HTML de tus DevTools muestra exactamente lo que el navegador representa en un momento dado, y te da una idea de lo que sucede en realidad.

- -

Inspección del CSS aplicado

- -

Selecciona un elemento de tu página, ya sea haciendo clic con el botón derecho o pulsando la tecla ctrl para seleccionar la opción Inspect, o seleccionándolo del árbol HTML que hay a la izquierda de la pantalla de la interfaz DevTools. Selecciona el elemento con la clase box1; este es el primer elemento de la página con una caja alrededor.

- -

La página de ejemplo para este tutorial con DevTools abiertas.

- -

Si observasla  vista de reglas, que está a la derecha de tu HTML, deberías poder ver las propiedades y los valores CSS aplicados sobre ese elemento. Verás las reglas aplicadas directamente a la clase box1 y también el CSS que la caja hereda de su elemento padre, en este caso <body>. Esto es útil para cuando ves que se aplica un CSS que no esperabas. Tal vez se esté heredando de un elemento padre y necesites añadir una regla para sobrescribirlo en el contexto de este elemento.

- -

También es útil la capacidad de expandir las propiedades abreviadas. En nuestro ejemplo se usa la abreviación margin.

- -

Haz clic en la pequeña flecha para expandir la vista, que muestra las diferentes propiedades sin abreviar y sus valores.

- -

Puedes activar y desactivar los valores en la vista de reglas, cuando ese panel esté activo; si mantienes el ratón sobre él, aparecerán casillas de verificación. Desmarca la casilla de verificación de una regla, por ejemplo border-radius, y el CSS dejará de aplicarse.

- -

Puedes usar esto para hacer una comparación entre A y B, decidir si algo se ve mejor con una regla aplicada o sin aplicar, y también para ayudar a depurarlo. Por ejemplo, si un diseño falla e intentas determinar qué propiedad causa el problema.

- -

Editar valores

- -

Además de activar y desactivar las propiedades, puedes editar sus valores. ¿Quieres ver si quizá otro color se ve mejor, o deseas modificar algún tamaño? Las DevTools pueden ahorrarte mucho tiempo a la hora de editar una hoja de estilo y volver a cargar la página.

- -

Selecciona box1 y haz clic en la muestra (el pequeño círculo de color) que muestra el color aplicado al borde. Se abrirá un selector de color y puedes probar con colores diferentes, que se actualizarán en tiempo real en la página. De manera similar puedes cambiar el ancho o el estilo del borde.

- -

Ventana de aplicación de estilos de DevTools con un selector de color abierto.

- -

Añadir una propiedad nueva

- -

Puedes añadir propiedades usando las DevTools. ¿Te has dado cuenta de que quizá no quieres que tu caja herede el tamaño de letra del elemento <body> y quieres establecer tu propio tamaño de letra específico? Pruébalo en DevTools antes de añadirlo a tu archivo CSS.

- -

Puedes hacer clic en la llave de cierre de la regla para comenzar a introducir una declaración nueva, y en ese momento puedes comenzar a escribir la nueva propiedad y DevTools te mostrará una lista de propiedades coincidentes que se completará automáticamente. Después de seleccionar font-size, introduce el valor que deseas probar. También puede hacer clic en el botón + para añadir una regla adicional con el mismo selector y tus reglas nuevas.

- -

La ventana DevTools, que añade una propiedad nueva a las reglas, con el autocompletado para font-open

- -
-

Nota: También hay otras funciones útiles en la vista de reglas; por ejemplo, las declaraciones con valores no válidos están tachadas. Puedes obtener más información en Examinar y editar CSS.

-
- -

Comprender el modelo de cajas

- -

En artículos anteriores hemos expuesto el modelo de cajas, y el hecho de que tengamos un modelo de cajas alternativo que cambia la forma en que se calcula el tamaño de los elementos en función del tamaño que les asignas, más el relleno y los bordes. Las DevTools realmente pueden ayudarte a comprender cómo se calcula el tamaño de un elemento.

- -

El panel de disposición muestra un diagrama del modelo de cajas en el elemento seleccionado, junto con una descripción de las propiedades y los valores que cambian la forma en que el elemento se presenta. Esto incluye una descripción de las propiedades que puedes no haber utilizado explícitamente en el elemento, pero que tienen valores iniciales establecidos.

- -

En esta ventana, una de las propiedades que se detallan es la propiedad box-sizing, que controla qué modelo de cajas usa el elemento.

- -

Compara las dos cajas con las clases box1 y box2. Ambas tienen el mismo ancho aplicado (400 px), sin embargo, box1 es visualmente más ancha. En la ventana de diseño puedes ver que usa content-box. Este es el valor que toma el tamaño que asignas al elemento y luego añade el área de relleno y el ancho del borde.

- -

El elemento con una clase box2 usa border-box, por lo que aquí el área de relleno y el borde se restan del tamaño que has asignado al elemento. Esto significa que el espacio que la caja ocupa en la página es el tamaño exacto que se ha especificado, en nuestro caso width: 400px.

- -

La ventana de diseño de DevTools

- -
-

Nota: Descubre más en Examinar e inspeccionar el modelo de cajas.

-
- -

Resolver problemas de especificidad

- -

A veces, durante el desarrollo, pero en particular cuando necesitas editar el CSS de un sitio ya publicado, te resultará difícil conseguir que se aplique un determinado CSS. No importa lo que hagas, el elemento simplemente no parece aceptar tu CSS. Lo que suele suceder aquí es que un selector más específico anula tus cambios, y en este caso DevTools te será de gran ayuda.

- -

En nuestro archivo de ejemplo hay dos palabras incluidas en un elemento <em>. Uno se muestra en color naranja y el otro en rosa. En el CSS hemos aplicado:

- -
em {
-  color: hotpink;
-  font-weight: bold;
-}
- -

Sin embargo, un poco más arriba en la hoja de estilo hay una regla con un selector .special:

- -
.special {
-  color: orange;
-}
- -

Como recordarás del artículo sobre cascada y herencia, en que hablamos sobre la especificidad, los selectores de clase son más específicos que los selectores de elemento, por lo que este es el valor que se aplica. DevTools puede ayudarte a encontrar estos problemas, especialmente si la información está oculta en algún lugar de una extensa hoja de estilo.

- -

Inspecciona <em> con la clase .special y DevTools te mostrará que el naranja es el color que se aplica, y también te muestra la propiedad color aplicada al em tachado. Aquí puedes ver que la clase anula el selector de elemento.

- -

Selecciona un em y mira en DevTools qué solapa el color.

- -

Descubre más sobre las DevTools de Firefox

- -

Hay mucha información aquí en MDN sobre las DevTools de Firefox. Echa un vistazo a la sección principal de las DevTools, y consulta las Guías prácticas para obtener información más detallada sobre las cosas que hemos expuesto brevemente en este artículo.

- -

Problemas al depurar en CSS

- -

Las DevTools pueden ser de gran ayuda a la hora de resolver problemas con el CSS, pero ¿cómo resuelves una situación en la que el CSS no se comporta como esperas? Los siguientes pasos deberían ayudarte.

- -

Aléjate del problema

- -

Cualquier problema de código puede ser frustrante, especialmente los problemas de CSS, porque a menudo no recibes un mensaje de error que buscar en línea para ayudarte a encontrar una solución. Si te sientes frustrado, aléjate del problema por un tiempo: sal a caminar, tómate una copa, habla con un compañero de trabajo o trabaja en otra cosa por un tiempo. A veces, la solución aparece mágicamente cuando dejas de pensar en el problema, e incluso si no llega, trabajar en ello cuando te sientas más fresco te será mucho más fácil.

- -

¿Tu HTML y CSS son válidos?

- -

Los navegadores esperan que tu CSS y HTML estén escritos correctamente, sin embargo, los navegadores también son muy indulgentes y harán todo lo posible para mostrar tus páginas web incluso si tiene errores en el marcado o en la hoja de estilo. Si tienes errores en el código, el navegador trata de adivinar lo que quieres decir, y podría tomar una decisión diferente a lo que tenías en mente. Además, dos navegadores diferentes pueden hacer frente al problema de dos maneras diferentes. Por lo tanto, un buen primer paso es pasar tu HTML y CSS por un validador, que detectar cualquier error.

- - - -

¿La propiedad y el valor son compatibles con el navegador?

- -

Los navegadores simplemente ignoran el CSS que no entienden. Si la propiedad o el valor que utilizas no es compatible con el navegador en el que lo pruebas, no se romperá nada, pero ese CSS no se aplicará. Las DevTools en general destacan de alguna manera las propiedades y los valores que no son compatibles. En la captura de pantalla siguiente, el navegador no admite el valor de subcuadrícula {{cssxref ("grid-template-columns")}}.

- -

Imagen de las DevTools del navegador con la cuadrícula-plantilla-columnas: subcuadrícula tachada porque el valor de la subcuadrícula no es compatible.

- -

También puedes echar un vistazo a las tablas de compatibilidad de navegadores en la parte inferior de cada página de propiedades del proyecto MDN. Te muestran la compatibilidad de cada navegador para esa propiedad, a menudo desglosado si hay compatibilidad para un uso de la propiedad y no para otros. La tabla siguiente muestra los datos de compatibilidad para la propiedad {{cssxref ("shape-outside")}}.

- -

{{compat("css.shape-outside")}}

- -

¿Hay algo más que anule tu CSS?

- -

Aquí es donde la información que has aprendido sobre la especificidad será muy útil. Si tienes algo más específico que anula lo que intentas hacer, puedes entrar en un juego muy frustrante de tratar de resolverlo sin saber qué tienes que resolver. Sin embargo, como hemos dicho, las DevTools te mostrarán qué CSS se ha aplicado y así puedes averiguar cómo hacer que el nuevo selector sea lo suficientemente específico como para anularlo.

- -

Haz un caso de prueba reducido del problema

- -

Si el problema no se resuelve con los pasos anteriores, deberás investigar un poco más. Lo mejor que puedes hacer en este momento es crear lo que se conoce como un caso de prueba reducido. Ser capaz de «reducir un problema» es una habilidad muy útil. Te ayudará a encontrar problemas en tu propio código y en el de tus colegas, y también te permitirá informar de errores y solicitar ayuda de manera más efectiva.

- -

Un caso de prueba reducido es un ejemplo de código que muestra el problema de la manera más simple posible, sin contenido ni estilo circundante. Esto significa a menudo sacar el código problemático de tu diseño para hacer un pequeño ejemplo que solo muestre ese código o característica.

- -

Para crear un caso de prueba reducido:

- -
    -
  1. Si tu marcado se genera dinámicamente, por ejemplo desde un CMS, crea una versión estática de la salida que muestre el problema. Un sitio para compartir código como CodePen es útil para alojar casos de prueba reducidos, porque son accesibles en línea y puedes compartirlos fácilmente con tus colegas. Puedes comenzar por hacer un View Source de la página y copiar el HTML en CodePen, luego toma cualquier CSS y JavaScript relevante e inclúyelo también. Después de eso, puedes verificar si el problema sigue ahí.
    2. -
  2. Si eliminar el JavaScript no soluciona el problema, no incluyas el JavaScript. Si eliminar el JavaScript hace desaparecer el problema, elimina la mayor cantidad de JavaScript que puedas; deja solo las causas del problema.
    3. -
  3. Elimina cualquier HTML que no contribuya al problema. Elimina componentes o incluso elementos principales del diseño. Nuevamente, intenta reducir al mínimo la cantidad de código que aún muestra el problema.
    4. -
  4. Elimina cualquier CSS que no afecte al problema.
    5. -
- -

En el proceso, puedes descubrir qué causa el problema, o al menos ser capaz de ponerlo o quitarlo al eliminar algo específico. Vale la pena añadir algunos comentarios a tu código a medida que vas descubriendo cosas. Si tienes que pedir ayuda, estos comentarios indicarán a la persona que te ayuda lo que ya has intentado. Esto puede proporcionarte bastante información para permitirte buscar posibles problemas por sondeo y soluciones alternativas.

- -

Si todavía tienes dificultades para solucionar el problema, tener un caso de prueba reducido te ofrece algo con lo que pedir ayuda, publicarlo en un foro o mostrarlo a un compañero de trabajo. Es mucho más probable que obtengas ayuda si antes de pedir la ayuda muestras que has hecho el trabajo de reducir el problema e identificar dónde sucede exactamente. Un desarrollador más experimentado va a poder detectar el problema con rapidez y orientarte en la dirección correcta, y aunque no sea así, echarle un vistazo rápido a tu caso de prueba reducido y, con suerte, ofrecerte al menos algo de ayuda.

- -

En el caso de que tu problema sea en realidad un error en un navegador, también puedes usar un caso de prueba reducido para presentar un informe de error al proveedor del navegador correspondiente (por ejemplo, en el sitio de Bugzilla de Mozilla).

- -

A medida que adquieras más experiencia con CSS, descubrirás que vas adquiriendo rapidez para descubrir de dónde vienen los problemas. Sin embargo, incluso los más experimentados a veces nos preguntamos qué pasa. Adoptar un enfoque metódico, hacer un caso de prueba reducido y explicar el problema a otra persona suele dar un buen resultado para encontrar una solución.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}

- -

En este módulo

- -
    -
  1. Cascada y herencia
    2. -
  2. Selectores CSS - -
    3. -
  3. El modelo de cajas
    4. -
  4. Fondos y bordes
    5. -
  5. El uso de diferentes direcciones de texto
    6. -
  6. El desbordamiento de los contenidos
    7. -
  7. Los valores y las unidades
    8. -
  8. Elementos de dimensionado en CSS
    9. -
  9. Imágenes, media y elementos de formulario
    10. -
  10. Aplicar estilo a las tablas
    11. -
  11. Depurar el CSS
    12. -
  12. Organizar el CSS
    13. -
diff --git a/files/es/learn/css/building_blocks/dimensionar_elementos_en_css/index.html b/files/es/learn/css/building_blocks/dimensionar_elementos_en_css/index.html deleted file mode 100644 index 81759abccc..0000000000 --- a/files/es/learn/css/building_blocks/dimensionar_elementos_en_css/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Dimensionar elementos en CSS -slug: Learn/CSS/Building_blocks/Dimensionar_elementos_en_CSS -translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}
- -

En los diversos artículos vistos hasta ahora, has aprendido varias formas de dimensionar elementos en una página web utilizando CSS. Es importante que comprendas qué tamaños van a tener los diferentes elementos de tu diseño, y en este artículo vamos a resumir las diversas formas en que puedes asignar tamaños a los elementos con CSS y definir algunos términos relativos al dimensionado que te ayudarán en el futuro.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Comprender las diferentes formas en que podemos dimensionar las cosas en CSS.
- -

El tamaño natural o intrínseco de las cosas

- -

Los elementos HTML tienen un tamaño natural, establecido antes de que se vean afectados por cualquier código CSS. Un ejemplo sencillo es una imagen. Una imagen tiene un ancho y una altura que están definidos en el archivo de imagen que está incrustando en la página. Este tamaño se describe como el tamaño intrínseco, que proviene de la imagen misma.

- -

Si colocas una imagen en una página y no cambias su altura y ancho, ya sea usando atributos en la etiqueta <img> o el CSS, se mostrará con ese tamaño intrínseco. En el ejemplo siguiente le hemos dado un borde a la imagen para que puedas ver la extensión del archivo.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}

- -

Sin embargo, un elemento {{htmlelement ("div")}} vacío no tiene tamaño propio. Si añades un elemento {{htmlelement ("div")}} sin contenido a tu HTML, entonces debes darle un borde como hemos hecho con la imagen y verás una línea en la página. Se trata del borde del elemento replegado sobre sí mismo porque no hay contenido para mantenerlo abierto. En nuestro ejemplo siguiente, ese borde se extiende por todo el ancho del contenedor, porque es un elemento de nivel de bloque, un comportamiento con el que deberías comenzar a familiarizarte. No tiene altura (o tamaño en la dimensión de bloque) porque no hay contenido.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}

- -

En el ejemplo anterior, añade texto al elemento vacío. Ahora el borde contiene ese texto porque la altura del elemento queda definida por el contenido. Por lo tanto, el tamaño de este elemento <div> en la dimensión del bloque proviene del tamaño del contenido. Nuevamente, este es el tamaño intrínseco del elemento: su tamaño está definido por su contenido.

- -

Configurar un tamaño específico

- -

Por supuesto, podemos dar a los elementos de nuestro diseño un tamaño específico. Cuando asignas un tamaño a un elemento (al cual deberá ajustarse el contenido del elemento) nos referimos a este como tamaño extrínseco. Toma nuestro elemento <div> del ejemplo anterior: podemos darle valores específicos como {{cssxref ("width")}} y {{cssxref ("height")}}, y así tendrá ese tamaño sea cual sea su contenido. Como descubrimos en nuestro artículo anterior sobre el desbordamiento, una altura establecida puede causar el desbordamiento del contenido si hay más contenido del que cabe en el elemento.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}

- -

Debido a este problema de desbordamiento, fijar la altura de los elementos con longitudes o porcentajes es algo que debemos hacer con mucho cuidado en la web.

- -

El uso de porcentajes

- -

En muchos sentidos, los porcentajes actúan como unidades de longitud, y como discutimos en el artículo sobre valores y unidades, a menudo se pueden usar indistintamente con longitudes. Cuando usas un porcentaje, debes tener claro de qué es porcentaje. En el caso de una caja dentro de otro contenedor, si a la caja secundaria le asignas un porcentaje al ancho, será un porcentaje del ancho del contenedor principal.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}

- -

Esto se debe a que los porcentajes se refieren al tamaño del bloque contenedor. Sin un porcentaje aplicado, nuestro elemento <div> ocuparía el 100% del espacio disponible, porque es un elemento de nivel de bloque. Si le damos un ancho porcentual, este se convierte en un porcentaje del espacio que normalmente ocuparía.

- -

Porcentaje de márgenes y áreas de relleno

- -

Si configuras margins y padding como un porcentaje, puede que observes un comportamiento extraño. En el ejemplo siguiente hay una caja. Hemos asignado a la caja interna un margen ({{cssxref ("margin")}}) del 10% y una área de relleno ({{cssxref ("padding")}}) del 10%. El área de relleno y el margen de la parte superior e inferior de la caja son del mismo tamaño que el margen de la izquierda y de la derecha.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}

- -

Podrías esperar, por ejemplo, que el porcentaje de los márgenes superior e inferior sea un porcentaje de la altura del elemento, y el porcentaje de los márgenes izquierdo y derecho sea un porcentaje del ancho del elemento. Sin embargo, ¡este no es el caso!

- -

Cuando utilizas el margen y el área de relleno en porcentajes, el valor se calcula a partir del tamaño en línea del elemento, es decir, el ancho del elemento cuando se trabaja en un lenguaje horizontal. En nuestro ejemplo, todos los márgenes y el área de relleno son del 10% del ancho del elemento. Esto significa que puedes tener márgenes y relleno alrededor de la caja del mismo tamaño. Este es un hecho que vale la pena recordar si utilizas porcentajes de esta manera.

- -

Tamaños mínimo y máximo

- -

Además de asignar a las cosas un tamaño fijo, podemos pedirle al CSS que asigne a un elemento un tamaño mínimo o máximo. Si tienes una caja que puede contener una cantidad variable de contenido y deseas que tenga siempre al menos una altura determinada, puedes establecer la propiedad {{cssxref ("min-height")}}. La caja siempre tendrá al menos esta altura, pero crecerá si hay más contenido del que la caja puede contener.

- -

En el ejemplo siguiente puedes ver dos cuadros, ambos con una altura definida de 150 píxeles. La caja de la izquierda tiene 150 píxeles de alto; la de la derecha contiene contenido que necesita más espacio, por lo que su tamaño supera los 150 píxeles.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}

- -

Esto es muy útil para trabajar con cantidades de contenido variables y asimismo evitar desbordamientos.

- -

Un uso común de {{cssxref ("max-width")}} es para reducir el tamaño de las imágenes si no hay suficiente espacio para mostrarlas en su ancho intrínseco, al asegurarte de que no serán mayores que ese ancho.

- -

A modo de ejemplo, si para una imagen tienes que establecer width: 100% y su ancho intrínseco es menor que su contenedor, la imagen se verá obligada a expandirse y agrandarse, y se pixelará. Si su ancho intrínseco es mayor que su contenedor, se desbordará. No es probable que desees que suceda ninguno de estos casos.

- -

Si en lugar de ello usas max-width: 100%, la imagen puede encogerse con respecto a su tamaño intrínseco, pero no se agranda más allá del 100% de su tamaño.

- -

En el ejemplo siguiente hemos utilizado la misma imagen dos veces. La primera imagen tiene width: 100% y está en un contenedor que es más grande, por lo que se extiende hasta el ancho del contenedor. La segunda imagen tiene max-width: 100% y, por lo tanto, no se estira para llenar el recipiente. La tercera caja contiene la misma imagen de nuevo, también con max-width: 100%; pero en este caso puedes ver cómo se ha reducido para encajar en la caja.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}

- -

Esta técnica se utiliza para dar a las imágenes una respuesta adaptativa, de modo que se reduzcan adecuadamente cuando se visualizan en un dispositivo más pequeño. Sin embargo, no es conveniente usar esta técnica para cargar imágenes demasiado grandes y luego reducirlas en el navegador. Las imágenes deben tener el tamaño adecuado, no deben ser más grandes de lo que sea necesario para el tamaño más grande que se muestran en el diseño. Descargar imágenes muy grandes ralentizará tu sitio y puede costarles más dinero a los usuarios si tienen una conexión tarifada.

- -
-

Nota: Obtén más información sobre las técnicas adaptativas para las imágenes.

-
- -

Unidades de ventana gráfica

- -

La ventana gráfica es el área visible de tu página en el navegador que utilizas para ver un sitio, y también tiene un tamaño. En CSS hay unidades que asociadas con el tamaño de la ventana gráfica: las unidades vw para el ancho y vh para la altura. Con estas unidades puedes establecer tamaños relativos a la ventana gráfica del usuario.

- -

1vh es igual al 1% de la altura de visualización, y 1vw es igual al 1% de la anchura. Puedes usar estas unidades para dimensionar cajas, pero también texto. En el ejemplo siguiente hay un cuadro que tiene un tamaño de 20vh y 20vw. La caja contiene una letra A, a la que se le ha dado un valor para {{cssxref ("font-size")}} de 10vh.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}

- -

Si cambias los valores vh y vw, cambia el tamaño de la caja o de la letra; cambiar el tamaño de la ventana gráfica también cambia esos tamaños porque están dimensionados en relación con el de la ventana gráfica. Para ver el cambio del ejemplo cuando cambias el tamaño de la ventana gráfica, debes cargar el ejemplo en una ventana nueva del navegador, que pueda cambiar de tamaño (ya que tu ventana gráfica es el <iframe> incrustado que contiene el ejemplo que se muestra arriba). Abre el ejemplo, cambia el tamaño de la ventana del navegador y observa lo que ocurre con el tamaño de la caja y el texto.

- -

Cambiar los tamaños según la ventana gráfica puede ser útil en tus diseños. Por ejemplo, si deseas mostrar una sección principal a pantalla completa antes del resto del contenido, haz que esa parte de tu página de 100vh empuje el resto del contenido por debajo de la ventana gráfica, de modo que solo aparezca cuando desplacen los contenidos del documento con la barra de desplazamiento.

- -

Resumen

- -

Este artículo te ha dado un resumen de algunos problemas clave con los que puedes encontrarte al dimensionar cosas en la web. Cuando llegues al artículo Compaginar con CSS, el tamaño va a ser un aspecto muy importante para dominar los diferentes métodos de compaginación, por lo que, antes de continuar, vale la pena comprender los conceptos que hemos expuesto en este artículo.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}

- -

En este módulo

- -
    -
  1. Cascada y herencia
    2. -
  2. Selectores CSS - -
    3. -
  3. El modelo de cajas
    4. -
  4. Fondos y bordes
    5. -
  5. El uso de diferentes direcciones de texto
    6. -
  6. El desbordamiento de los contenidos
    7. -
  7. Los valores y las unidades
    8. -
  8. Elementos de dimensionado en CSS
    9. -
  9. Imágenes, media y elementos de formulario
    10. -
  10. Aplicar estilo a las tablas
    11. -
  11. Depurar el CSS
    12. -
  12. Organizar el CSS
    13. -
diff --git a/files/es/learn/css/building_blocks/el_modelo_de_caja/index.html b/files/es/learn/css/building_blocks/el_modelo_de_caja/index.html deleted file mode 100644 index dbc0d644f8..0000000000 --- a/files/es/learn/css/building_blocks/el_modelo_de_caja/index.html +++ /dev/null @@ -1,343 +0,0 @@ ---- -title: El modelo de caja -slug: Learn/CSS/Building_blocks/El_modelo_de_caja -translation_of: Learn/CSS/Building_blocks/The_box_model ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
- -

Todo en CSS tiene una caja alrededor, y comprender estas cajas es clave para poder crear diseños con CSS o para alinear elementos con otros elementos. En este artículo, echaremos un vistazo más de cerca al modelo de cajas en CSS con el que vas a poder crear diseños de compaginación más complejos con una comprensión de cómo funciona y la terminología relacionada.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de cómo trabajar con archivos, conocimientos básicos de HTML (véase Introducción al HTML) y nociones de CSS (véase Primeros pasos con CSS).
Objetivo:Aprender sobre el modelo de cajas en CSS, en qué consiste el modelo de cajas y cómo cambiar al modelo alternativo.
- -

Cajas en bloque y en línea

- -

En CSS, en general, hay dos tipos de cajas: cajas en bloque y cajas en línea. Estas características se refieren al modo como se comporta la caja en términos de flujo de página y en relación con otras cajas de la página:

- -

Si una caja se define como un bloque, se comportará de las maneras siguientes:

- - - -

A menos que decidamos cambiar el tipo de visualización a en línea, elementos como los encabezados (por ejemplo, <h1>) y todos los elementos <p> usan por defecto block como tipo de visualización externa.

- -

Si una caja tiene una visualización externa de tipo inline, entonces:

- - - -

El elemento <a>, que se utiliza para los enlaces, y los elementos <span>, <em> y <strong> son ejemplos de elementos que se muestran en línea por defecto.

- -

El tipo de caja que se aplica a un elemento está definido por los valores de propiedad {{cssxref ("display")}}, como block y inline, y se relaciona con el valor externo (outer) de visualización (display).

- -

Aparte: tipos de visualización interna y externa

- -

En este punto, será mejor que también expliquemos los tipos de visualización interna y externa. Como se mencionó anteriormente, las cajas en CSS tienen un tipo de visualización externa, que define si se trata de una caja en bloque o en línea.

- -

Sin embargo, las cajas también tienen un tipo de visualización interna, que determina cómo se disponen los elementos dentro de esa caja. De forma predeterminada, los elementos dentro de una caja se presentan en flujo normal, lo que significa que se comportan como otros elementos de tipo en bloque o en línea (como se explicó anteriormente).

- -

Sin embargo, podemos cambiar el tipo de visualización interna utilizando valores de display, como flex. Si en un elemento establecemos display: flex;, el tipo de visualización externa es de tipo bloque (block), pero el tipo de visualización interna cambia a flexible (flex). Cualquier elemento que sea hijo directo de esta caja pasará a comportarse como un elemento de tipo flex, de acuerdo con las reglas que se establecen en la especificación de Flexbox, tema que veremos más adelante.

- -
-

Nota: Para obtener más información acerca de los valores de visualización y el modo como funcionan las cajas en las disposiciones en bloque y en línea, echa un vistazo a la guía Disposiciones en bloque y en línea de MDN.

-
- -

A medida que vayas aprendiendo más detalles sobre el diseño CSS, te irás encontrando con el valor flex y con otros valores internos que puedan presentar tus cajas, por ejemplo, grid.

- -

Sin embargo, la disposición en bloque y en línea es la forma predeterminada cómo se comportan las cosas en la web; como ya dijimos, a veces esto se conoce como flujo normal, porque nuestras cajas se dispondrán en bloque o en línea, si no reciben ninguna otra instrucción.

- -

Ejemplos de diferentes tipos de visualización

- -

Sigamos adelante y veamos algunos ejemplos. A continuación tenemos tres elementos HTML diferentes, todos con visualización externa de tipo block. El primero es un párrafo, que tiene un borde añadido con CSS. El navegador representa esto como una caja en bloque, por lo que el párrafo comienza en una línea nueva y se expande por todo el ancho disponible.

- -

El segundo es una lista, que se presenta usando display: flex. Esto establece una disposición flexible para los elementos que están dentro del contenedor; sin embargo, la lista en sí misma es una caja que se comporta en bloque y, como el párrafo, se expande por todo el ancho del contenedor y fuerza un salto de línea al llegar al final de línea.

- -

Debajo hay un párrafo a nivel de bloque, dentro del cual hay dos elementos <span>. Estos elementos normalmente serían de tipo inline; sin embargo, uno de los elementos tiene una clase de bloque, y lo hemos establecido como display: block.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} 

- -

Podemos ver cómo se comportan los elementos inline en el ejemplo siguiente. Los elementos <span> del primer párrafo están en línea de manera predeterminada y, por lo tanto, no fuerzan ningún salto de línea.

- -

También hay un elemento <ul> que se establece como display: inline-flex, que crea una caja con un comportamiento de tipo en línea alrededor de algunos elementos de tipo flex.

- -

Finalmente, hay dos párrafos configurados con display: inline. El contenedor flexible en línea y los párrafos fluyen todos juntos en línea, en lugar de dividirse en líneas nuevas como lo harían si se mostraran como elementos de bloque.

- -

En el ejemplo puedes cambiar display: inline por display: block o display: inline-flex y por display: flex para alternar entre estos modos de visualización.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} 

- -

En artículos posteriores encontrarás cosas como el diseño flexible. El aspecto clave a recordar aquí es que cambiar el valor de la propiedad display puede cambiar entre el modo de visualización exterior en bloque y en línea de una caja, que cambia la forma en que se presenta junto con otros elementos en la disposición en pantalla.

- -

En el resto de este artículo, nos concentraremos en el tipo de visualización externa.

- -

¿Qué es el modelo de cajas CSS?

- -

El modelo de cajas CSS completo se aplica a cajas que presentan comportamiento en bloque; las cajas con comportamiento en línea solo usan una parte del comportamiento definido en el modelo de cajas. El modelo define cómo funcionan juntas las diferentes partes de una caja (margen, borde, relleno y contenido) para crear una caja que puedas ver en tu página. Para complicarlo un poco más, hay un modelo de cajas estándar y un modelo de cajas alternativo.

- -

Partes de una caja

- -

Al hacer una caja de tipo bloque en CSS tenemos los elementos siguientes:

- - - -

El diagrama siguiente muestra estas capas:

- -

Diagrama del modelo de cajas

- -

El modelo de cajas CSS estándar

- -

En el modelo de cajas estándar, cuando estableces los atributos width y height para una caja, defines el ancho y el alto del contenido de la caja. Cualquier área de relleno y borde se añade a ese ancho y alto para obtener el tamaño total que ocupa la caja. Esto se muestra en la imagen que encontrarás a continuación.

- -

Si suponemos que la caja tiene el CSS siguiente, que establece los valores para las propiedades width, height, margin, border, y padding:

- -
.box {
-  width: 350px;
-  height: 150px;
-  margin: 10px;
-  padding: 25px;
-  border: 5px solid black;
-}
-
- -

El espacio que ocupa nuestra caja usando el modelo de cajas estándar será en realidad de 410 px (350 + 25 + 25 + 5 + 5); y su altura, de 210 px (150 + 25 + 25 + 5 + 5), porque el área de relleno y el borde se añaden al ancho que se utiliza para el contenido de la caja.

- -

Mostrar el tamaño de la caja cuando se usa el modelo de cajas estándar.

- -
-

Nota: El margen no se cuenta para el tamaño real de la caja; por supuesto, afecta al espacio total que la caja ocupa en la página, pero solo al espacio de fuera de la caja. El área de la caja se termina en el borde, no se extiende hasta el margen.

-
- -

El modelo de cajas CSS alternativo

- -

Podrías pensar que es más bien incómodo tener que sumar el borde y el área de relleno para obtener el tamaño real de la caja, ¡y tienes razón! Por este motivo, CSS introdujo un modelo de caja alternativo algún tiempo después del modelo de cajas estándar. Con este modelo, cualquier ancho es el ancho de la caja visible en la página, por lo tanto, el ancho del área de contenido es ese ancho menos el ancho para el relleno y el borde. El mismo CSS que hemos usado antes daría entonces el resultado siguiente (ancho = 350 px, altura = 150 px).

- -

Mostrar el tamaño de la caja cuando se usa el modelo de cajas alternativo.

- -

Por defecto, los navegadores usan el modelo de cajas estándar. Si deseas activar el modelo de cajas alternativo para un elemento, hazlo configurando box-sizing: border-box. Con ello, le dices al navegador que tome como el borde de la caja el área definida por cualquier tamaño que establezcas.

- -
.box {
-  box-sizing: border-box;
-}
- -

Si quieres que todos tus elementos usen el modelo de cajas alternativo (opción común entre los desarrolladores) debes establecer la propiedad box-sizing en el elemento <html>. Luego debes configurar todos los demás elementos para que hereden ese valor, como se ve en el fragmento de código siguiente. Si deseas comprender qué hay detrás, consulta el artículo de CSS-Tricks sobre el tamaño de las cajas.

- -
html {
-  box-sizing: border-box;
-}
-*, *::before, *::after {
-  box-sizing: inherit;
-}
- -
-

Nota: Un dato curioso es que Internet Explorer usaba por defecto el modelo de cajas alternativo, y no disponía de ningún mecanismo para cambiarlo.

-
- -

Jugar con los modelos de cajas

- -

En el ejemplo siguiente puedes ver dos cajas. Ambas tienen una clase .box, lo que les da los mismos atributos width, height, margin, border y padding. La única diferencia es que la segunda caja se ha configurado para utilizar el modelo de cajas alternativo.

- -

¿Puedes cambiar el tamaño de la segunda caja (añadiendo CSS a la clase .alternate) para que su anchura y altura coincidan con las de la primera caja?

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} 

- -
-

Nota: Puedes encontrar la solución aquí.

-
- -

Utilizar las DevTools del navegador para ver el modelo de cajas

- -

Las herramientas del desarrollador de tu navegador pueden facilitar la comprensión del modelo de cajas. Si inspeccionas un elemento con las DevTools de Firefox, puedes ver el tamaño del elemento más su margen, área de relleno y borde. Inspeccionar un elemento de esta manera es un modo excelente de descubrir si tu caja es en realidad del tamaño que crees que es.

- -

Inspeccionar el modelo de cajas de un elemento utilizando Firefox DevTools

- -

Márgenes, relleno y bordes

- -

Ya has visto las propiedades {{cssxref ("margin")}}, {{cssxref ("padding")}} y {{cssxref ("border")}} que usamos en el ejemplo anterior. Las propiedades que hemos usado en ese ejemplo son propiedades abreviadas y nos permiten establecer los cuatro lados de la caja a la vez. Estas propiedades abreviadas también tienen propiedades sin abreviar equivalentes, que permiten tener control sobre los diferentes lados de la caja de forma individual.

- -

Vamos a explorar estas propiedades más detalladamente.

- -

Margen

- -

El margen es un espacio invisible que hay alrededor de la caja. Aleja el resto de elementos de la caja. Los márgenes pueden tener valores positivos o negativos. Establecer un margen negativo para un lado de tu caja puede hacer que se superponga con otros elementos de la página. Tanto si utilizas el modelo de cajas estándar como el alternativo, el margen siempre se añade después de haber calculado el tamaño de la caja que se ve.

- -

Podemos controlar todos los márgenes de un elemento a la vez usando la propiedad {{cssxref ("margin")}}, o cada lado individualmente usando las propiedades equivalentes sin abreviar:

- - - -

En el ejemplo siguiente, cambia los valores de margen para ver cómo se empuja la caja debido al espacio que el margen crea o se elimina (si es un margen negativo) entre este elemento y el elemento que lo contiene.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} 

- -

Colapso del margen

- -

Un punto clave a la hora de entender los márgenes es el concepto de colapso del margen. Si tienes dos elementos cuyos márgenes se tocan, esos márgenes se combinan para convertirse en un solo margen, cuyo tamaño es el del margen más grande.

- -

En el ejemplo siguiente hay dos párrafos. El párrafo superior tiene un atributo margin-bottom de 50 píxeles. El segundo párrafo tiene un atributo margin-top de 30 píxeles. Los márgenes colapsan, por lo que el margen real entre las cajas es de 50 píxeles, y no el total de ambos márgenes.

- -

Pruébalo ajustando el atributo margin-top del segundo párrafo a 0. El margen visible entre los dos párrafos no cambiará, sino que conservará los 50 píxeles fijados en el atributo bottom-margin del primer párrafo.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} 

- -

Hay una serie de reglas que establecen cuándo los márgenes colapsan y cuándo no. Para obtener más información, consulta la página web sobre entender el colapso de márgenes. Por ahora solo debes recordar que el colapso de los márgenes es algo que puede suceder. Si creas un espacio con márgenes y no obtienes el espacio que esperas, probablemente es que se haya producido algún colapso de márgenes.

- -

Bordes

- -

El borde se dibuja entre el margen y el área de relleno de una caja. Si utilizas el modelo de cajas estándar, el tamaño del borde se añade a los elementos width y height que establecen el alto y el ancho de la caja. Si utilizas el modelo de cajas alternativo, el tamaño del borde reduce el tamaño de la caja de contenido, porque ocupa una parte del alto y el ancho disponibles.

- -

Hay una gran cantidad de propiedades que sirven para aplicar estilo a los bordes: hay cuatro bordes y cada borde tiene un estilo, un ancho y un color que podemos modificar.

- -

Puedes establecer el ancho, el estilo o el color de los cuatro bordes a la vez utilizando la propiedad {{cssxref ("border")}}.

- -

Para establecer las propiedades de cada lado de forma individual, puedes utilizar:

- - - -

Para establecer el ancho, el estilo o el color de todos los lados, usa lo siguiente:

- - - -

Para establecer el ancho, el estilo o el color de un solo lado, puedes usar una de las propiedades no abreviadas:

- - - -

En el ejemplo siguiente, hemos utilizado varios ejemplos de la lista anterior para crear bordes. Juega con las diferentes propiedades para comprobar que entiendes cómo funcionan. Las páginas de MDN sobre las propiedades de los bordes te proporcionan información sobre los diferentes estilos entre los que puedes elegir para los bordes.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} 

- -

Relleno

- -

El relleno se encuentra entre el borde y el área de contenido. A diferencia de los márgenes, el relleno no puede tomar valores negativos, por lo que el valor debe ser 0 o positivo. Cualquier fondo aplicado a tu elemento se mostrará detrás del área de relleno y, generalmente, se usa para mantener el contenido alejado del borde.

- -

Podemos controlar el área de relleno para todos los lados de un mismo elemento usando la propiedad {{cssxref ("padding")}}, o para cada lado uno de los lados usando las propiedades equivalentes:

- - - -

Si cambias los valores para el elleno en la clase .box del ejemplo siguiente, puedes ver que cambia dónde comienza el texto en relación con la caja.

- -

También puedes cambiar el relleno en la clase .container, que abrirá el espacio entre el contenedor y la caja. El área de relleno se puede cambiar para cualquier elemento y abrirá espacio entre su borde y lo que esté dentro del elemento.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} 

- -

El modelo de cajas y las cajas en línea

- -

Todo lo anterior se aplica por completo a las cajas en bloque. Algunas de las propiedades también pueden aplicarse a las cajas en línea, como las que crea un elemento <span>.

- -

En el ejemplo siguiente hay un elemento <span> dentro de un párrafo al que hemos aplicado las propiedades width, height, margin, border, y padding Puedes ver que la anchura y la altura se ignoran. Se respetan el margen, el relleno y el borde, pero no cambian la relación de otro contenido con respecto a nuestra caja en línea, por lo que el relleno y el borde se superponen a otras palabras en el párrafo.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} 

- -

El uso de display: inline-block

- -

Hay un valor especial de display que proporciona un punto medio entre inline y block. Esto es útil para situaciones en las que no deseas que un elemento fuerce un salto de línea, pero sí deseas que se respeten las propiedades width y height para evitar superposiciones como la que se ve arriba.

- -

Un elemento con display: inline-block conforma un subconjunto de los elementos en bloque que ya conocemos:

- - - -

Sin embargo, no se fuerza un salto de línea, y solo se hace más grande que su contenido si añades las propiedades width y height explícitamente.

- -

En el ejemplo siguiente hemos añadido display: inline-block a nuestro elemento <span>. Cámbialo por display: block o elimina la línea para ver la diferencia entre ambos modelos de visualización.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} 

- -

Esto puede ser útil cuando deseas dar a un enlace un área de impacto más grande añadiendo padding. <a> es un elemento en línea como <span>; puedes usar display: inline-block para configurar el área de relleno para facilitar al usuario hacer clic en el enlace.

- -

Esto se ve con bastante frecuencia en las barras de navegación. La navegación siguiente se muestra en una fila usando flexbox y hemos añadido una área de relleno al elemento <a> porque queremos poder cambiar su color de fondo (background-color) cuando se pasa el ratón por encima de <a>. El área de relleno parece superponerse al borde del elemento <ul>. Esto se debe a que <a> es un elemento en línea.

- -

Añade display: inline-block a la regla con el selector .links-list a y verás cómo se soluciona este problema, al hacer que otros elementos respeten el área de relleno.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} 

- -

Pon a prueba tus habilidades

- -

Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más relevante? Encontrarás más pruebas para verificar que has retenido esa información en Test your skills: The Box Model.

- -

Resumen

- -

Eso es lo que hay que entender sobre el modelo de cajas. Es posible que en el futuro desees volver a este artículo si alguna vez te lías con los tamaños de las cajas en la disposición de tu página web.

- -

En el artículo siguiente veremos cómo se pueden usar los fondos y bordes para hacer que tus simples cajas presenten un aspecto más interesante.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}

- -

En este módulo

- -
    -
  1. Cascada y herencia
    2. -
  2. Selectores CSS - -
    3. -
  3. El modelo de cajas
    4. -
  4. Fondos y bordes
    5. -
  5. El uso de diferentes direcciones de texto
    6. -
  6. El desbordamiento de los contenidos
    7. -
  7. Los valores y las unidades
    8. -
  8. Elementos de dimensionado en CSS
    9. -
  9. Imágenes, media y elementos de formulario
    10. -
  10. Aplicar estilo a las tablas
    11. -
  11. Depurar el CSS
    12. -
  12. Organizar el CSS
    13. -
diff --git a/files/es/learn/css/building_blocks/fondos_y_bordes/index.html b/files/es/learn/css/building_blocks/fondos_y_bordes/index.html deleted file mode 100644 index 0de93e1eb1..0000000000 --- a/files/es/learn/css/building_blocks/fondos_y_bordes/index.html +++ /dev/null @@ -1,306 +0,0 @@ ---- -title: Fondos y bordes -slug: Learn/CSS/Building_blocks/Fondos_y_bordes -translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
- -

En este artículo, veremos algunas de las cosas creativas que puedes hacer con los fondos y los bordes de CSS. Añadir degradados, imágenes de fondo o redondear esquinas; los fondos y los bordes son la solución para una gran cantidad de cuestiones de estilo en CSS.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, conocimientos básicos de HTML (véase Introducción al HTML) y nociones de CSS (véase Primeros pasos con el CSS).
Objetivo:Aprender a diseñar el fondo y los bordes de las cajas.
- -

Aplicar estilo a los fondos en CSS

- -

La propiedad {{cssxref ("background")}} de CSS es una propiedad abreviada de una serie de propiedades de fondo que vamos a ver en este artículo. Si descubres una propiedad de fondo compleja en una hoja de estilo, puede parecer un poco difícil de entender porque pueden estarse pasando muchos valores a la vez.

- -
.box {
-  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
-  url(big-star.png) center no-repeat, rebeccapurple;
-} 
-
- -

Más adelante en este tutorial regresaremos a cómo funcionan las propiedades abreviadas, pero primero echemos un vistazo a las diferentes cosas que puedes hacer con los fondos en CSS, a partir de observar las propiedades de fondo individuales.

- -

Los colores de fondo

- -

La propiedad {{cssxref ("background-color")}} define el color de fondo de cualquier elemento en CSS. La propiedad admite cualquier <color> válido. Un color de fondo (background-color) se extiende por debajo del contenido y el relleno del elemento.

- -

En el ejemplo siguiente hemos utilizado varios valores de color para añadir un color de fondo a la caja, a un encabezado y a un elemento {{htmlelement ("span")}}.

- -

Juega un poco con ellos; usa cualquier valor <color> disponible.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}

- -

Las imágenes de fondo

- -

La propiedad {{cssxref ("background-image")}} permite visualizar una imagen de fondo en un elemento. En el ejemplo siguiente hay dos cajas: una tiene una imagen de fondo que es más grande que la caja misma, la otra tiene una imagen pequeña en forma de estrella.

- -

Este ejemplo demuestra dos cosas sobre las imágenes de fondo. De forma predeterminada, la imagen grande no se reduce para ajustarse a la caja, por lo que solo vemos una pequeña esquina de esta, mientras que la imagen pequeña aparece en forma de mosaico hasta llenar la caja. En este caso, la imagen es en realidad una sola estrella.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}

- -

Si especificas un color de fondo además de una imagen de fondo, la imagen se muestra encima del color de fondo. Añade una propiedad background-color al ejemplo anterior y obsérvalo en acción.

- -

Controlar background-repeat

- -

La propiedad {{cssxref ("background-repeat")}} se usa para controlar el comportamiento de tipo mosaico de las imágenes. Los valores disponibles son:

- - - -

Prueba estos valores en el ejemplo siguiente. Hemos establecido el valor no-repeat, así que solo verás una estrella. Prueba los diferentes valores (repeat-x y repeat-y) y observa cuáles son los efectos.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}

- -

Dimensionar la imagen de fondo

- -

En el ejemplo anterior hay una imagen grande que aparece recortada porque es más grande que el fondo. En este caso, podríamos usar la propiedad {{cssxref ("background-size")}}, que puede tomar valores de longitud o porcentaje, para ajustar el tamaño de la imagen para que quepa dentro del fondo.

- -

También puedes utilizar palabras clave:

- - - -

En el ejemplo siguiente hemos usado la imagen más grande del ejemplo anterior y unidades de longitud para establecer sus dimensiones dentro de la caja. Puedes ver que esto ha distorsionado la imagen.

- -

Prueba lo siguiente:

- - - -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}

- -

Posicionar la imagen de fondo

- -

La propiedad {{cssxref ("background-position")}} te permite elegir la posición en la que aparece la imagen de fondo dentro de la caja a la que está asociada. Para ello se utiliza un sistema de coordenadas en el que la esquina superior izquierda de la caja es (0,0), y la caja se coloca sobre los ejes horizontal (x) y vertical (y).

- -
-

Nota: El valor predeterminado de background-position es (0,0).

-
- -

Los valores de background-position más comunes toman dos valores independientes: un valor horizontal seguido de un valor vertical.

- -

Puedes usar palabras clave como top y right (busca todas las demás en la página sobre la propiedad {{cssxref ("background-position")}}):

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top center;
-} 
-
- -

Y también longitudes y porcentajes:

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: 20px 10%;
-} 
-
- -

También puedes mezclar valores de palabras clave con longitudes o porcentajes, por ejemplo:

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top 20px;
-}
- -

Por último, también puedes usar una sintaxis de 4 valores para indicar una distancia desde ciertos bordes del cuadro: la unidad de longitud en este caso es un desplazamiento del valor que la precede. Entonces, en el CSS siguiente, colocamos el fondo a 20 px desde la parte superior y a 10 px desde la derecha:

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top 20px right 10px;
-}
- -

Utiliza el ejemplo siguiente para jugar con estos valores y mover la estrella por la caja.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}

- -
-

Nota: background-position es una propiedad abreviada de {{cssxref("background-position-x")}} y {{cssxref("background-position-y")}}, que te permiten configurar los diferentes valores de posición del eje por separado.

-
- -

Degradados de fondo

- -

Un degradado, cuando se usa para un fondo, actúa como una imagen y también se establece usando la propiedad {{cssxref("background-image")}}.

- -

Puedes leer más sobre los diferentes tipos de degradados y sobre qué puedes hacer con ellos en la página sobre el tipo de datos <gradient> de MDN. Una forma divertida de jugar con degradados es usar uno de los muchos generadores de degradados CSS que hay disponibles en la web, como este. Puedes crear un degradado y luego copiar y pegar el código fuente que lo genera.

- -

Prueba algunos degradados diferentes en el ejemplo siguiente. En las dos cajas hay, respectivamente, un degradado lineal que se extiende por toda la caja, y un degradado radial con un tamaño establecido, que por lo tanto se repite.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}

- -

Múltiples imágenes de fondo

- -

También es posible poner múltiples imágenes de fondo: puedes especificar múltiples valores background-image para un solo atributo, separados cada uno por una coma.

- -

Si haces esto, las imágenes de fondo pueden quedar superpuestas entre sí. Los fondos se superponen con la última imagen de fondo que hay en la parte inferior de la lista, y cada imagen anterior se apila encima de la que sigue en el código.

- -
-

Nota: Los degradados se pueden mezclar con imágenes de fondo normales.

-
- -

Las otras propiedades background-* también pueden tener valores múltiples separados por comas, de la misma manera que background-image:

- -
background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
-background-repeat: no-repeat, repeat-x, repeat;
-background-position: 10px 20px,  top right;
- -

Cada valor de las diversas propiedades coincide con los valores que están en la misma posición en las otras propiedades. Arriba, por ejemplo, el valor para la propiedad background-repeat de image1 será no-repeat. Sin embargo, ¿qué sucede cuando diferentes propiedades tienen una cantidad diferente de valores? La respuesta es que los valores que ocupan las posiciones más pequeñas se alternan cíclicamente: en el ejemplo anterior hay cuatro imágenes de fondo pero solo dos valores background-position. Los primeros dos valores de posición se aplicarán a las dos primeras imágenes, luego los valores volverán a asignarse cíclicamente: a image3 se le dará el primer valor de posición, y a image4 se le dará el segundo valor de posición.

- -

Vamos a jugar. En el ejemplo siguiente hemos incluido dos imágenes. Para demostrar el orden de superposición, cambia la imagen de fondo que aparece primero en la lista. O juega con las otras propiedades para cambiar la posición, el tamaño o repite los valores.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}

- -

Anclaje del fondo

- -

Otra opción que hay disponible para fondos es especificar cómo se desplazan cuando se desplaza el contenido. Esto se controla con la propiedad {{cssxref ("background-attachment")}}, que puede tomar los valores siguientes:

- - - -

La propiedad {{cssxref ("background-attachment")}} solo tiene efecto cuando hay contenido por el que puedas desplazarte, por lo que hemos preparado un ejemplo para demostrar las diferencias entre los tres valores: echa un vistazo a background-attachment.html (También puedes consultar el código fuente aquí).

- -

Usar la propiedad abreviada para el fondo

- -

Como mencionamos al comienzo de este artículo, a menudo verás fondos que están especificados usando la propiedad {{cssxref ("background")}}. Esta forma abreviada te permite configurar todas las diferentes propiedades a la vez.

- -

Si utilizas varios fondos, debes especificar todas las propiedades para el primer fondo y luego añadir el fondo siguiente separado por una coma. En el ejemplo siguiente hay un degradado con un tamaño y una posición, luego un fondo de imagen con no-repeat y una posición y, por último, un color.

- -

Al escribir los valores abreviados de las imágenes de fondo es necesario seguir algunas reglas, por ejemplo:

- - - -

Consulta la página para el atributo {{cssxref ("background")}} de MDN para ver todas las posibilidades.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}

- -

Consideraciones de accesibilidad con los fondos

- -

Al colocar texto sobre una imagen o un color de fondo, debes asegurarte de que tiene suficiente contraste para que tus visitantes puedan leer el texto. Si estableces una imagen de fondo y el texto se coloca encima de la imagen, también debes especificar un color de fondo (background-color) que permita leer el texto si la imagen no se carga.

- -

Los lectores de pantalla no pueden analizar las imágenes de fondo, por lo tanto, deben ser puramente decorativas; cualquier contenido importante debe ser parte de la página HTML y no debe estar contenido en un fondo.

- -

Bordes

- -

Al aprender sobre el modelo de cajas descubrimos cómo los bordes afectan al tamaño de nuestra caja. En este artículo veremos cómo usar los bordes de una manera creativa. Por lo general, cuando a un elemento le añadimos bordes con CSS, usamos una propiedad abreviada que establece el color, el ancho y el estilo del borde en una línea de CSS.

- -

Podemos establecer un borde para los cuatro lados de una caja con {{cssxref ("border")}}:

- -
.box {
-  border: 1px solid black;
-}
- -

O podemos establecer solo un borde de la caja, por ejemplo:

- -
.box {
-  border-top: 1px solid black;
-}
- -

Cada una de las propiedades de estas propiedades abreviadas sería:

- -
.box {
-  border-width: 1px;
-  border-style: solid;
-  border-color: black;
-}
- -

Y las no abreviadas:

- -
.box {
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: black;
-}
- -
-

Nota: Estas propiedades para el borde superior, derecho, inferior e izquierdo también tienen propiedades lógicas asignadas que se relacionan con el modo de escritura del documento (por ejemplo, texto de izquierda a derecha o de derecha a izquierda, o de arriba a abajo). Exploraremos esto en la próxima lección, que expone el uso de diferentes direcciones de texto.

-
- -

Hay una variedad de estilos que puedes usar para los bordes. En el ejemplo siguiente, hemos utilizado un estilo de borde diferente para los cuatro lados de la caja. Juega con el estilo, el ancho y el color del borde para ver cómo funcionan los bordes.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}

- -

Esquinas redondeadas

- -

El redondeo de esquinas en una caja se logra mediante el uso de la propiedad {{cssxref ("border-radius")}} y otras propiedades asociadas que se relacionan con cada esquina de la caja. Como valor pueden usarse dos longitudes o porcentajes: el primer valor define el radio horizontal y el segundo el radio vertical. En muchos casos, solo se pondrá un valor, que se utilizará para ambos.

- -

Por ejemplo, para hacer que las cuatro esquinas de una caja tengan un radio de 10 píxeles:

- -
.box {
-  border-radius: 10px;
-}
- -

O para hacer que la esquina superior derecha tenga un radio horizontal de 1 em y un radio vertical del 10%:

- -
.box {
-  border-top-right-radius: 1em 10%;
-}
- -

En el ejemplo siguiente hemos establecido las cuatro esquinas, y luego cambiamos los valores de la esquina superior derecha para que sea diferente. Juega con los valores para cambiar las esquinas. Echa un vistazo a la página de la propiedad {{cssxref ("border-radius")}} para ver las opciones de sintaxis disponibles.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}

- -

Pon a prueba tus habilidades

- -

Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más relevante? Encontrarás más pruebas para verificar que retienes la información antes de seguir adelante en Test your skills: Backgrounds and Borders.

- -

Resumen

- -

En este artículo hemos expuesto bastantes conceptos y puedes ver que hay mucho para añadir a un fondo o a un borde de una caja. Explora las diferentes páginas de propiedades si deseas obtener más información sobre cualquiera de las características que hemos discutido. Todas las páginas de MDN contienen más ejemplos de uso, para que juegues y mejores tus conocimientos.

- -

En el próximo artículo descubriremos cómo interacciona el modo de escritura de tu documento con tu CSS. ¿Qué sucede cuando el texto no fluye de izquierda a derecha?

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}

- -

En este módulo

- -
    -
  1. Cascada y herencia
    2. -
  2. Selectores CSS - -
    3. -
  3. El modelo de cajas
    4. -
  4. Fondos y bordes
    5. -
  5. El uso de diferentes direcciones de texto
    6. -
  6. El desbordamiento de los contenidos
    7. -
  7. Los valores y las unidades
    8. -
  8. Elementos de dimensionado en CSS
    9. -
  9. Imágenes, media y elementos de formulario
    10. -
  10. Aplicar estilo a las tablas
    11. -
  11. Depurar el CSS
    12. -
  12. Organizar el CSS
    13. -
diff --git a/files/es/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/es/learn/css/building_blocks/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..b53db2df02 --- /dev/null +++ b/files/es/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -0,0 +1,117 @@ +--- +title: Comprensión de los fundamentos de CSS +slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension +tags: + - CSS + - Estilo + - Evaluación + - Modelo de Caja + - Principiante + - Selectores + - Sintaxis + - comentários + - reglas +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +
+
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
+ +

Has avanzado mucho en este módulo, debes sentirte orgulloso de haber llegado hasta el final. El último paso antes de terminar es intentar el examen del módulo — que incluye completar varios ejercicios para crear el último diseño — una tarjeta de presentación/de jugador/perfil de redes sociales.

+ + + + + + + + + + + + +
Prerrequisitos:Antes de intentar esta evaluación, debería haber revisado todos los artículos en este módulo.
Objetivo:Probar la comprensión de los fundamentos de la teoría, sintaxis y mecánica de CSS.
+ +

Punto de Partida

+ +

Para comenzar esta evaluación, debes:

+ + + +
+

Nota: Alternativamente, se puede utilizar un sitio como  JSBin o Thimble para hacer la evaluación. Puede pegar el HTML y completar el CSS en uno de estos editores en línea, y usar  esta URL para apuntar el elemento <img> al archivo de imagen. Si el editor en línea que estás usando no tiene un panel CSS separado, no dudes en ponerlo en un elemento <style> en el encabezado del documento.

+
+ +

Resumen del Proyecto

+ +

Se le ha proporcionado un poco de HTML puro y una imagen, y necesitas escribir el CSS necesario para darle estilo a una pequeña tarjeta de presentación en línea, que tal vez pueda servir como una tarjeta de jugador o de perfil en redes sociales. Las siguientes secciones describen lo que debes hacer.

+ +

Configuración básica:

+ + + +

Encargandonos de los selectores y conjuntos de reglas proporcionados:

+ + + +

Nuevos conjuntos de reglas que necesitas escribir:

+ + + +

Otras cosas en las que pensar:

+ + + +

Consejos y Sugerencias

+ + + +

Ejemplo

+ +

La siguiente captura de pantalla muestra un ejemplo de cómo debe ser el diseño terminado:

+ +

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

+ +

 

+ +

Evaluación

+ +

Si estás siguiendo esta evaluación como parte de un curso organizado, deberías ser capaz de entregar tu trabajo a tu profesor/mentor para que lo califique. Si eres autodidacta, entonces puedes obtener la guía de puntuación fácilmente preguntando en el hilo del Discurso del Área de Aprendizaje, o en el canal IRC #mdn en Mozilla IRC. Haz el ejercicio primero - ¡No hay nada que ganar haciendo trampa!

+ +

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

+
diff --git a/files/es/learn/css/building_blocks/handling_different_text_directions/index.html b/files/es/learn/css/building_blocks/handling_different_text_directions/index.html new file mode 100644 index 0000000000..fa21de66e5 --- /dev/null +++ b/files/es/learn/css/building_blocks/handling_different_text_directions/index.html @@ -0,0 +1,165 @@ +--- +title: Manejando diferentes direcciones de texto +slug: Learn/CSS/Building_blocks/Manejando_diferentes_direcciones_de_texto +tags: + - Aprendizaje + - CSS + - Diseño en bloque + - Diseño lineal + - Modos de escritura + - Principiante + - Propiedades lógicas +translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
+ +

Muchas de las propiedades y valores que hemos encontrado hasta ahora en nuestro aprendizaje de CSS han estado ligadas a las dimensiones físicas de nuestra pantalla. Creamos bordes arriba, a la derecha, abajo y a la izquierda de una caja, por ejemplo. Estas dimensiones físicas se ajustan adecuadamente al contenido que se visualiza de forma horizontal, y por defecto, la web tiende a apoyar lenguajes de izquierda a derecha, como el castellano o el francés, mejor que aquellos que se escriben de derecha a izquierda, como el árabe.

+ +

Sin embargo, en los últimos años, CSS ha evolucionado para soportar de mejor forma contenidos en diferente direccionalidad, incluyendo contenido de derecha a izquierda, pero también de arriba-abajo, como el japonés - Estas direccionalidades se llaman modos de escritura. En la medida que progresa tu estudio y comiences a trabajar con diseños, comprender los modos de escritura será de mucha utilidad para ti, por ello los explicaremos a continuación.

+ + + + + + + + + + + + +
Prerrequisitos:Literatura computacional básica, software básico instalado, conocimiento básico de manejo de archivos, HTML básico (Introducción a HTML), y una idea de cómo funciona CSS (Primeros pasos en CSS.)
Objetivo:Entender la importancia de los modos de escritura en el CSS moderno.
+ +

¿Qué son los modos de escritura?

+ +

Un modo de escritura en CSS se refiere a si el texto está escrito horizontal o verticalmente. La propiedad {{cssxref("writing-mode")}} permite cambiar de un modo a otro. No necesitas estar trabajando en un lenguaje que use un modo de escritura vertical para querer hacer esto - Podrías cambiar el modo de escritura de partes de tu diseño por razones creativas.

+ +

En el ejemplo siguiente existe un encabezado desplegado usando writing-mode: vertical-rl. El texto ahora aparece vertical. El texto vertical es común en diseño gráfico, y puede ser una forma de agregar un aspecto más interesante a tu diseño web.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}

+ +

Los tres valores posibles para la propiedad writing-mode son:

+ + + +

Así, la propiedad writing-mode está configurando en realidad la direccion en que los elementos de nivel bloque son desplegados en la página - ya sea de arriba abajo, derecha a izquierda, o de izquierda a derecha. Luego señala la dirección del flujo de texto en las frases.

+ +

Modos de escritura y diseño en bloque y lineal.

+ +

Ya hemos visto el diseño en bloque y lineal, y el hecho de que algunas cosas se muestran como elementos de bloque y otras como elementos lineales. Ésto se encuentra ligado al modo de escritura del documento, y no de la pantalla física. Los bloques sólo se presentan desde la parte superior a la inferior de la página si estas usando un modo de escritura que presente el texto horizontalmente, como el español.

+ +

Con el siguiente ejemplo quedará más claro. Si tienes dos cajas que contengan un heading y un paragraph. La primera usa writing-mode: horizontal-tb, un modo de escritura horizontal y desde la parte superior de la página a la base. La segunda usa writing-mode: vertical-rl; este es un modo de escritura vertical y de derecha a izquierda.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}

+ +

Cuando cambiamos el modo de escritura, estamos cambiando que dirección es en bloque y cuál es lineal. En un modo de escritura horizontal-tb El la direccion del bloque va de arriba abajo; en un modo de escritura vertical-rl el bloque corre de derecha a izquierda horizontalmente. De esta forma la dimensión del bloque es siempre la direccion en la que se muestran los bloques en el modo de escritura en uso. La dimensión lineal, es siempre la dirección en que fluye una frase.

+ +

Este dibujo muestra las dos dimensiones en un modo de escritura horizontal.Showing the block and inline axis for a horizontal writing mode.

+ +

Este dibujo muestra las dos dimensiones en un modo de escritura vertical.

+ +

Showing the block and inline axis for a vertical writing mode.

+ +

Una vez que empieces a observar el diseño CSS, y en particular los nuevos métodos de diseño, esta idea de bloque y lineal cobra mayor importancia. Será revisado más adelante.

+ +

Dirección

+ +

Además del modo de escritura también tenemos la dirección del texto. Como se mencionó antes, algunos idiomas como el Árabe se escriben horizontalmente, de derecha a izquierda. Esto no es algo que usarías en un sentido creativo. Si tu simplemente quieres alinear algún elemento a la derecha, existen otras formas de hacerlo. Sin embargo es importante entender esto como parte de la naturaleza del CSS. La web no es solo para lenguajes que son escritos de izquierda a derecha!

+ +

Debido al hecho de que el modo de escritura y la dirección del texto pueden cambiar, los nuevos métodos de diseño CSS no toman como referencia la izquierda y derecha, ni la parte superior e inferior. En su lugar, hablarán de inicio y fin junto con esta idea de en línea y bloque. No te preocupes mucho por eso en este momento, pero ten en cuenta estas ideas a medida que empiezas a mirar el diseño de una página web; va a ser de gran ayuda en tu entendimiento de CSS.

+ +

Valores y propiedades lógicas

+ +

La razón de hablar acerca de modos de escritura y dirección en este punto en tu aprendizaje, es por el hecho de que ya vimos muchas de estas propiedades que están atadas a las dimensiones físicas de la pantalla, y tienen más sentido cuando está en un modo de escritura horizontal.

+ +

Vamos a echarle un vistzo a nuestras dos cajas de nuevo, una con el modo escritura horizontal-tb y otro con vertical-rl. Le hemos dado a estas dos cajas un {{cssxref("width")}}. Puedes ver que cuando la caja está en el modo de escritura vertical, aún tiene una anchura, y esto está causando que el texto se desborde.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}

+ +

Lo que nosotros realmente queremos en este escenario, es esencialmente intercambiar altura y anchura junto con el modo de escritura. Cuando estamos en el modo de escritura vertical, queremos que la caja se expanda en la dimensión del bloque así como lo hace en el modo horizontal.

+ +

Para hacerlo más fácil, CSS ha desarrollado recientemente un conjunto de propiedades asignadas. Estas esencialmente reemplazan las propiedades físicas como width and height, con versiones lógicas o relativas al flujo.

+ +

La propiedad asignada a width cuando está en el modo de escritura horizontal se llama {{cssxref("inline-size")}}, se refiere al tamaño en la dimensión inline. La propiedad para height se llama {{cssxref("block-size")}} y es el tamaño en la dimensión de bloque. Puedes ver como funciona en el ejemplo de abajo, donde reemplazamos width con inline-size.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}

+ +

Propiedades lógicas margin, border y padding

+ +

En las últimas dos lecciones aprendimos acerca del modelo de cajas con CSS, y los bordes CSS. En las propiedades margin, border y padding vas a encontrar varias instancias de propiedades físicas, por ejemplo {{cssxref("margin-top")}}, {{cssxref("padding-left")}}, y {{cssxref("border-bottom")}}. Del mismo modo que tenemos asignaciones para ancho y alto, hay asignaciones para estas propiedades.

+ +

La propiedad margin-top está asignada a {{cssxref("margin-block-start")}}, esto siempre se va a referir al margen al inicio de la dimensión del bloque. 

+ +

La propiedad {{cssxref("padding-left")}} se asigna a {{cssxref("padding-inline-start")}}, el padding que se aplica al inicio de la dirección inline. Aquí será donde las oraciones comienzan en ese modo de escritura. La propiedad {{cssxref("border-bottom")}} se asigna a {{cssxref("border-block-end")}}, que es el borde del final de la dimensión del bloque.

+ +

Puedes ver una comparación entre las propiedades físicas y lógicas a continuación.

+ + + +

Si cambias el modo de escritura de las cajas asignando a la propiedad writing-mode en .box a vertical-rl, vas a ver como las propiedades físicas se quedan ligadas a sus direcciones físicas, mientras que las propiedades lógicas cambian con el modo de escritura.

+ +

También puedes ver que el {{htmlelement("h2")}} tiene  un border-bottom negro. ¿Puedes averiguar como hacer que el borde inferior siempre esté debajo del texto en ambos modos de escritura?

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}

+ +

Existe un gran número de propiedades cuando consideras cada uno de los bordes que puedes hacer a mano, y puedes ver todas las propiedades asignadas en la página de MDN para propiedades Lógicas y Valores

+ +

Valores lógicos

+ +

Hasta ahora hemos examinado los nombres de las propiedades lógicas. Existen también algunas propiedades que toman valores físicos de top, right, bottom, y left. Estos valores también tienen asignaciones a valores lógicos: block-start, inline-end, block-end, y inline-start.

+ +

Por ejemplo, puedes hacer que una imagen flote a la izquierda para hacer que el texto se ajuste alrededor de la imagen. Puedes reemplazar left con inline-start como se muestra en el ejemplo a continuación.

+ +

Cambia el modo de escritura en este ejemplo a vertical-rl para ver que sucede con la imagen. Cambia inline-start por inline-end para cambiar el modo en que flota.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}

+ +

Aquí también estamos usando valores lógicos de el margen para asegurar que el margen está en el sitio correcto sin importar que modo de escritura es.

+ +
+

Actualmente, solo Firefox soporta valores relativos de flujo para float. Si estás usando Google Chrome o Microsoft Edge, deberías ver que la imagen no flota.

+
+ +

¿Debería usar propiedades físicas o lógicas?

+ +

Las propiedades lógicas y los valores son más recientes que su equivalente físico, y por lo tanto se han implementado recientemente en los navegadores. Puedes revisar cualquier página de propiedades en MDN para ver hasta donde llega el soporte del navegador. Si no estás usando multiples modos de escritura, entonces, por ahora, deberías preferir usar las versiones físicas. Sin embargo, en última instancia, esperamos que la gente va a pasar a las versiones lógicas para la mayoría de las cosas, ya que tienen mucho sentido una vez que comienzas a tratar también con métodos de diseño como Flexbox y Grid.

+ +

¡Prueba tus habilidades!

+ +

Tenemos mucho terreno cubierto en este artículo, pero puedes recordad la información más importante? Puedes encontrar algunas pruebas adicionales para verificar que has retenido esta información antes de seguir adelante: Prueba tus habilidades: modos de escritura.

+ +

Resumen

+ +

Los conceptos explicados en esta lección son cada vez más importantes en CSS. Un entendimiento pleno de las direcciones en bloque y en línea, y como el flujo de texto cambia con la variación de los modos de escritura, van a ser de gran ayuda en el futuro. Te ayudará a entender CSS incluso si nunca usas un modo de escritura diferente al horizontal.

+ +

En el módulo siguiente, vamos a echar un buen vistazo al desbordamiento en CSS

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. Cascada y herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/images_media_form_elements/index.html b/files/es/learn/css/building_blocks/images_media_form_elements/index.html new file mode 100644 index 0000000000..db0f522728 --- /dev/null +++ b/files/es/learn/css/building_blocks/images_media_form_elements/index.html @@ -0,0 +1,193 @@ +--- +title: 'Imágenes, medios y elementos de formulario' +slug: Learn/CSS/Building_blocks/Imágenes_medios_y_elementos_de_formulario +translation_of: Learn/CSS/Building_blocks/Images_media_form_elements +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}
+ +

En este artículo vamos a ver cómo se tratan ciertos elementos especiales en CSS. Las imágenes y otros medios y los elementos de formulario presentan un comportamiento algo distinto que otros elementos CSS, como las cajas, en cuanto a aplicación de estilo. Comprender qué es y qué no es posible te ahorrará frustraciones, y en este artículo vamos a destacar algunas de las cuestiones principales que necesitas saber.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, conocimientos básicos de HTML (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Comprender el modo en que algunos elementos se comportan de manera inusual cuando se diseñan con CSS.
+ +

Elementos de reemplazo

+ +

Las imágenes y los vídeos se describen como elementos de reemplazo. Esto significa que el CSS no puede intervenir en aspectos del diseño interno de estos elementos, sino solo a su posición en la página y algunos otros aspectos. Sin embargo, como veremos, hay varias cosas que el CSS puede hacer con una imagen.

+ +

También se describen ciertos elementos de reemplazo que, como las imágenes y vídeos, presentan una relación de aspecto. Esto significa que tienen un tamaño definido tanto en la dimensión horizontal (x) como en la vertical (y), y por defecto se mostrarán con las dimensiones intrínsecas del archivo.

+ +

El tamaño de las imágenes

+ +

Como ya conoces de estos artículos, todo en CSS genera una caja. Si colocas una imagen dentro de una caja que es más pequeña o más grande que las dimensiones intrínsecas del archivo de imagen en cualquier dirección, aparecerá más pequeño que la caja o se desbordará. Debes decidir qué hacer con el desbordamiento.

+ +

En el ejemplo siguiente hay dos cajas, ambas de 200 píxeles de tamaño:

+ + + +

{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}

+ +

¿Qué podemos hacer con el problema del desbordado?

+ +

Como aprendimos en nuestro artículo anterior, una técnica común es hacer que el la propiedad {{cssxref ("max-width")}} de una imagen sea 100%. Esto permite que la imagen tenga un tamaño menor que la caja, pero no que tenga un tamaño mayor. Esta técnica funciona con otros elementos de reemplazo, como <video> o <iframe>.

+ +

Añade max-width: 100% al elemento <img> del ejemplo anterior. Verás que la imagen más pequeña permanece sin cambios, pero la más grande se reduce hasta caber en la caja.

+ +

Puedes tomar otras decisiones sobre las imágenes dentro de los contenedores. Por ejemplo, es posible que desees cambiar el tamaño de una imagen para que cubra una caja por completo.

+ +

La propiedad {{cssxref ("object-fit")}} puede ser de gran ayuda. Cuando se usa object-fit, el elemento de reemplazo puede dimensionarse para adaptarse a una caja de varias maneras.

+ +

A continuación, hemos utilizado el valor cover, que reduce el tamaño de la imagen a la vez que mantiene la relación de aspecto hasta que rellena toda la caja. Al mantenerse la relación de aspecto, la caja corta algunas partes de la imagen.

+ +

{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}

+ +

Si usamos el valor contain, la imagen se reduce hasta que es lo bastante pequeña para caber dentro de la caja. Esto puede dar lugar a un formato panorámico si la imagen no presenta la misma relación de aspecto que la caja.

+ +

También puedes probar el valor fill, que rellena la caja, pero no mantiene la relación de aspecto.

+ +

Elementos de reemplazo en una compaginación

+ +

A medida que vayas usando diversas técnicas de diseño CSS en elementos de reemplazo, irás descubriendo que se comportan de manera ligeramente diferente a otros elementos. Por ejemplo, en un diseño flexible o en un diseño de página de cuadrícula, los elementos se expanden por defecto hasta que llenan toda el área. En cambio, las imágenes no se expanden, sino que se alinean con el inicio del área de la cuadrícula o del contenedor flexible.

+ +

Puedes ver esto en el ejemplo siguiente, en que hay un contenedor de con dos columnas y dos filas, que tiene cuatro elementos. Todos los elementos <div> tienen un color de fondo y se estiran para llenar la fila y la columna. La imagen, sin embargo, no se expande.

+ +

{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}

+ +

Si sigues estos artículos en orden, no habrás llegado todavía a la compaginación. Ten en cuenta solo que cuando los elementos de reemplazo forman parte de una cuadrícula o un diseño flexible, presentan comportamientos predeterminados diferentes, en esencia para evitar que el diseño los expanda de manera extraña.

+ +

Para forzar que la imagen se expanda para llenar la celda de la cuadrícula en la que se encuentra, tendrías que hacer algo como lo siguiente:

+ +
img {
+  width: 100%;
+  height: 100%;
+}
+ +

Sin embargo, esto deformaría la imagen, por lo que probablemente no es lo que querrías hacer.

+ +

Los elementos de formulario

+ +

Los elementos de formulario pueden ser un problema si queremos diseñar con CSS, y el artículo sobre formularios web contiene guías detalladas sobre los aspectos más complicados relativos a este tema, que no vamos a repetir en este artículo. Hay algunos conceptos básicos clave que vale la pena destacar en esta sección.

+ +

Muchos controles de formulario se añaden con el elemento <input>: este elemento define desde campos de formulario simples, como entradas de texto, hasta campos más complejos añadidos en HTML5, como selectores de color y fecha. Hay algunos elementos adicionales, como <textarea> para la entrada de texto multilínea, y también elementos que se utilizan para contener y etiquetar partes de formularios como <fieldset> y <legend>.

+ +

El HTML5 también incluye atributos que permiten a los desarrolladores web indicar qué campos son obligatorios e incluso el tipo de contenido que debe introducirse. Si el usuario añade algo inesperado o deja un campo obligatorio en blanco, el navegador puede mostrar un mensaje de error. Los diversos navegadores no presentan ningún estilo coherente ni ninguna homogeneización en cuanto a la personalización que permiten para tales elementos.

+ +

Aplicar estilo a los elementos de entrada de texto

+ +

Los elementos que permiten la entrada de texto, como <input type="text">, algunos tipos específicos como <input type="email"> y el elemento <textarea> son bastante fáciles de diseñar y tienden a comportarse como otras cajas de tu página. Sin embargo, el estilo predeterminado de estos elementos es diferente según el sistema operativo y el navegador con el que el usuario visite el sitio.

+ +

En el ejemplo siguiente hemos diseñado algunas entradas de texto con CSS: puedes ver que algunos elementos como los bordes, los márgenes y el área de relleno se aplican como es de esperar. Utilizamos selectores de atributos para apuntar a los diferentes tipos de entrada. Intenta cambiar el aspecto de este formulario ajustando los bordes, añadiendo colores de fondo a los campos y cambiando las fuentes y área de relleno.

+ +

{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}

+ +
+

¡Importante!: Al cambiar el estilo de los elementos de formulario debes asegurarte de que para el usuario sigue siendo obvio que se trata de elementos de formulario. Podrías crear una entrada de formulario sin bordes y un fondo que sea casi indistinguible del contenido que lo rodea, pero esto haría que sea muy difícil de reconocer y completar.

+
+ +

Como se explica en los artículos sobre el diseño de formularios en la parte HTML de esta web, el sistema operativo presenta muchos de los tipos de entrada más complejos y son inaccesibles para el diseño. Por lo tanto, siempre debes suponer que los formularios se verán de manera bastante diferentes para los distintos visitantes, y deberás probar los formularios complejos en diversos navegadores.

+ +

Herencia y elementos de formulario

+ +

En algunos navegadores, los elementos de formulario no heredan el estilo de letra por defecto. Por lo tanto, si deseas asegurarte de que tus campos de formulario usan la letra que se define para el cuerpo o para un elemento principal, debes añadir esta regla a tu CSS.

+ +
button,
+input,
+select,
+textarea {
+  font-family : inherit;
+  font-size : 100%;
+}
+ +

Elementos de formulario y tamaño de la caja

+ +

Los elementos de formulario utilizan reglas diferentes en los diversos navegadores para el dimensionado de las cajas de los diferentes controles de formulario. Ya cubrimos la propiedad box-sizing en el artículo sobre el modelo de cajas. Puedes usar este conocimiento cuando diseñes formularios que garanticen una experiencia homogénea en cuanto a los anchos y las alturas de los elementos de formulario.

+ +

Por coherencia, es una buena idea establecer los márgenes y el área de relleno en 0 para todos los elementos, y luego establecerlos de nuevo al diseñar cada uno de los controles de formulario.

+ +
button,
+input,
+select,
+textarea {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+ +

Otros ajustes útiles

+ +

Además de las reglas ya mencionadas, también debes configurar overflow: auto en <textarea> para que Internet Explorer no muestre una barra de desplazamiento cuando no hay necesidad:

+ +
textarea {
+  overflow: auto;
+}
+ +

Ponerlo todo junto en un «Reinicio»

+ +

Como último paso podemos resumir las diversas propiedades expuestas en el «reinicio de formulario» siguiente para proporcionar una base coherente sobre la que trabajar. Esto incluye todos los elementos mencionados en las tres últimas secciones:

+ +
button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  padding: 0; margin: 0;
+}
+
+textarea {
+  overflow: auto;
+}
+ +
+

Nota: Muchos desarrolladores utilizan las hojas de estilo de normalización para crear un conjunto de estilos de línea base para usar en todos los proyectos. Por lo general, estas hojas hacen cosas similares a las que acabamos de describir y garantizan que cualquier cosa que pueda ser diferente en distintos navegadores tenga establecido un valor por defecto coherente antes de que tú hagas tu propio trabajo con el CSS. Aunque ya no son tan importantes como lo eran antes, porque los navegadores suelen ser más homogéneos que en el pasado. Sin embargo, si deseas ver un ejemplo, consulta Normalize.css, que es una hoja de estilo muy popular que muchos proyectos utilizan como base.

+
+ +

Para obtener más información sobre los formularios de estilo, echa un vistazo a los dos artículos en la sección HTML de estas guías.

+ + + +

Resumen

+ +

En este artículo hemos destacado algunas de las diferencias que se presentan cuando trabajas con imágenes o media, y otros elementos inusuales, en CSS. En el artículo siguiente veremos algunos consejos que te resultarán útiles cuando tengas que diseñar tablas HTML.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. Cascada y herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de cajas
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git "a/files/es/learn/css/building_blocks/im\303\241genes_medios_y_elementos_de_formulario/index.html" "b/files/es/learn/css/building_blocks/im\303\241genes_medios_y_elementos_de_formulario/index.html" deleted file mode 100644 index db0f522728..0000000000 --- "a/files/es/learn/css/building_blocks/im\303\241genes_medios_y_elementos_de_formulario/index.html" +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: 'Imágenes, medios y elementos de formulario' -slug: Learn/CSS/Building_blocks/Imágenes_medios_y_elementos_de_formulario -translation_of: Learn/CSS/Building_blocks/Images_media_form_elements ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}
- -

En este artículo vamos a ver cómo se tratan ciertos elementos especiales en CSS. Las imágenes y otros medios y los elementos de formulario presentan un comportamiento algo distinto que otros elementos CSS, como las cajas, en cuanto a aplicación de estilo. Comprender qué es y qué no es posible te ahorrará frustraciones, y en este artículo vamos a destacar algunas de las cuestiones principales que necesitas saber.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, conocimientos básicos de HTML (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Comprender el modo en que algunos elementos se comportan de manera inusual cuando se diseñan con CSS.
- -

Elementos de reemplazo

- -

Las imágenes y los vídeos se describen como elementos de reemplazo. Esto significa que el CSS no puede intervenir en aspectos del diseño interno de estos elementos, sino solo a su posición en la página y algunos otros aspectos. Sin embargo, como veremos, hay varias cosas que el CSS puede hacer con una imagen.

- -

También se describen ciertos elementos de reemplazo que, como las imágenes y vídeos, presentan una relación de aspecto. Esto significa que tienen un tamaño definido tanto en la dimensión horizontal (x) como en la vertical (y), y por defecto se mostrarán con las dimensiones intrínsecas del archivo.

- -

El tamaño de las imágenes

- -

Como ya conoces de estos artículos, todo en CSS genera una caja. Si colocas una imagen dentro de una caja que es más pequeña o más grande que las dimensiones intrínsecas del archivo de imagen en cualquier dirección, aparecerá más pequeño que la caja o se desbordará. Debes decidir qué hacer con el desbordamiento.

- -

En el ejemplo siguiente hay dos cajas, ambas de 200 píxeles de tamaño:

- - - -

{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}

- -

¿Qué podemos hacer con el problema del desbordado?

- -

Como aprendimos en nuestro artículo anterior, una técnica común es hacer que el la propiedad {{cssxref ("max-width")}} de una imagen sea 100%. Esto permite que la imagen tenga un tamaño menor que la caja, pero no que tenga un tamaño mayor. Esta técnica funciona con otros elementos de reemplazo, como <video> o <iframe>.

- -

Añade max-width: 100% al elemento <img> del ejemplo anterior. Verás que la imagen más pequeña permanece sin cambios, pero la más grande se reduce hasta caber en la caja.

- -

Puedes tomar otras decisiones sobre las imágenes dentro de los contenedores. Por ejemplo, es posible que desees cambiar el tamaño de una imagen para que cubra una caja por completo.

- -

La propiedad {{cssxref ("object-fit")}} puede ser de gran ayuda. Cuando se usa object-fit, el elemento de reemplazo puede dimensionarse para adaptarse a una caja de varias maneras.

- -

A continuación, hemos utilizado el valor cover, que reduce el tamaño de la imagen a la vez que mantiene la relación de aspecto hasta que rellena toda la caja. Al mantenerse la relación de aspecto, la caja corta algunas partes de la imagen.

- -

{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}

- -

Si usamos el valor contain, la imagen se reduce hasta que es lo bastante pequeña para caber dentro de la caja. Esto puede dar lugar a un formato panorámico si la imagen no presenta la misma relación de aspecto que la caja.

- -

También puedes probar el valor fill, que rellena la caja, pero no mantiene la relación de aspecto.

- -

Elementos de reemplazo en una compaginación

- -

A medida que vayas usando diversas técnicas de diseño CSS en elementos de reemplazo, irás descubriendo que se comportan de manera ligeramente diferente a otros elementos. Por ejemplo, en un diseño flexible o en un diseño de página de cuadrícula, los elementos se expanden por defecto hasta que llenan toda el área. En cambio, las imágenes no se expanden, sino que se alinean con el inicio del área de la cuadrícula o del contenedor flexible.

- -

Puedes ver esto en el ejemplo siguiente, en que hay un contenedor de con dos columnas y dos filas, que tiene cuatro elementos. Todos los elementos <div> tienen un color de fondo y se estiran para llenar la fila y la columna. La imagen, sin embargo, no se expande.

- -

{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}

- -

Si sigues estos artículos en orden, no habrás llegado todavía a la compaginación. Ten en cuenta solo que cuando los elementos de reemplazo forman parte de una cuadrícula o un diseño flexible, presentan comportamientos predeterminados diferentes, en esencia para evitar que el diseño los expanda de manera extraña.

- -

Para forzar que la imagen se expanda para llenar la celda de la cuadrícula en la que se encuentra, tendrías que hacer algo como lo siguiente:

- -
img {
-  width: 100%;
-  height: 100%;
-}
- -

Sin embargo, esto deformaría la imagen, por lo que probablemente no es lo que querrías hacer.

- -

Los elementos de formulario

- -

Los elementos de formulario pueden ser un problema si queremos diseñar con CSS, y el artículo sobre formularios web contiene guías detalladas sobre los aspectos más complicados relativos a este tema, que no vamos a repetir en este artículo. Hay algunos conceptos básicos clave que vale la pena destacar en esta sección.

- -

Muchos controles de formulario se añaden con el elemento <input>: este elemento define desde campos de formulario simples, como entradas de texto, hasta campos más complejos añadidos en HTML5, como selectores de color y fecha. Hay algunos elementos adicionales, como <textarea> para la entrada de texto multilínea, y también elementos que se utilizan para contener y etiquetar partes de formularios como <fieldset> y <legend>.

- -

El HTML5 también incluye atributos que permiten a los desarrolladores web indicar qué campos son obligatorios e incluso el tipo de contenido que debe introducirse. Si el usuario añade algo inesperado o deja un campo obligatorio en blanco, el navegador puede mostrar un mensaje de error. Los diversos navegadores no presentan ningún estilo coherente ni ninguna homogeneización en cuanto a la personalización que permiten para tales elementos.

- -

Aplicar estilo a los elementos de entrada de texto

- -

Los elementos que permiten la entrada de texto, como <input type="text">, algunos tipos específicos como <input type="email"> y el elemento <textarea> son bastante fáciles de diseñar y tienden a comportarse como otras cajas de tu página. Sin embargo, el estilo predeterminado de estos elementos es diferente según el sistema operativo y el navegador con el que el usuario visite el sitio.

- -

En el ejemplo siguiente hemos diseñado algunas entradas de texto con CSS: puedes ver que algunos elementos como los bordes, los márgenes y el área de relleno se aplican como es de esperar. Utilizamos selectores de atributos para apuntar a los diferentes tipos de entrada. Intenta cambiar el aspecto de este formulario ajustando los bordes, añadiendo colores de fondo a los campos y cambiando las fuentes y área de relleno.

- -

{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}

- -
-

¡Importante!: Al cambiar el estilo de los elementos de formulario debes asegurarte de que para el usuario sigue siendo obvio que se trata de elementos de formulario. Podrías crear una entrada de formulario sin bordes y un fondo que sea casi indistinguible del contenido que lo rodea, pero esto haría que sea muy difícil de reconocer y completar.

-
- -

Como se explica en los artículos sobre el diseño de formularios en la parte HTML de esta web, el sistema operativo presenta muchos de los tipos de entrada más complejos y son inaccesibles para el diseño. Por lo tanto, siempre debes suponer que los formularios se verán de manera bastante diferentes para los distintos visitantes, y deberás probar los formularios complejos en diversos navegadores.

- -

Herencia y elementos de formulario

- -

En algunos navegadores, los elementos de formulario no heredan el estilo de letra por defecto. Por lo tanto, si deseas asegurarte de que tus campos de formulario usan la letra que se define para el cuerpo o para un elemento principal, debes añadir esta regla a tu CSS.

- -
button,
-input,
-select,
-textarea {
-  font-family : inherit;
-  font-size : 100%;
-}
- -

Elementos de formulario y tamaño de la caja

- -

Los elementos de formulario utilizan reglas diferentes en los diversos navegadores para el dimensionado de las cajas de los diferentes controles de formulario. Ya cubrimos la propiedad box-sizing en el artículo sobre el modelo de cajas. Puedes usar este conocimiento cuando diseñes formularios que garanticen una experiencia homogénea en cuanto a los anchos y las alturas de los elementos de formulario.

- -

Por coherencia, es una buena idea establecer los márgenes y el área de relleno en 0 para todos los elementos, y luego establecerlos de nuevo al diseñar cada uno de los controles de formulario.

- -
button,
-input,
-select,
-textarea {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
- -

Otros ajustes útiles

- -

Además de las reglas ya mencionadas, también debes configurar overflow: auto en <textarea> para que Internet Explorer no muestre una barra de desplazamiento cuando no hay necesidad:

- -
textarea {
-  overflow: auto;
-}
- -

Ponerlo todo junto en un «Reinicio»

- -

Como último paso podemos resumir las diversas propiedades expuestas en el «reinicio de formulario» siguiente para proporcionar una base coherente sobre la que trabajar. Esto incluye todos los elementos mencionados en las tres últimas secciones:

- -
button,
-input,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  box-sizing: border-box;
-  padding: 0; margin: 0;
-}
-
-textarea {
-  overflow: auto;
-}
- -
-

Nota: Muchos desarrolladores utilizan las hojas de estilo de normalización para crear un conjunto de estilos de línea base para usar en todos los proyectos. Por lo general, estas hojas hacen cosas similares a las que acabamos de describir y garantizan que cualquier cosa que pueda ser diferente en distintos navegadores tenga establecido un valor por defecto coherente antes de que tú hagas tu propio trabajo con el CSS. Aunque ya no son tan importantes como lo eran antes, porque los navegadores suelen ser más homogéneos que en el pasado. Sin embargo, si deseas ver un ejemplo, consulta Normalize.css, que es una hoja de estilo muy popular que muchos proyectos utilizan como base.

-
- -

Para obtener más información sobre los formularios de estilo, echa un vistazo a los dos artículos en la sección HTML de estas guías.

- - - -

Resumen

- -

En este artículo hemos destacado algunas de las diferencias que se presentan cuando trabajas con imágenes o media, y otros elementos inusuales, en CSS. En el artículo siguiente veremos algunos consejos que te resultarán útiles cuando tengas que diseñar tablas HTML.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}

- -

En este módulo

- -
    -
  1. Cascada y herencia
    2. -
  2. Selectores CSS - -
    3. -
  3. El modelo de cajas
    4. -
  4. Fondos y bordes
    5. -
  5. El uso de diferentes direcciones de texto
    6. -
  6. El desbordamiento de los contenidos
    7. -
  7. Los valores y las unidades
    8. -
  8. Elementos de dimensionado en CSS
    9. -
  9. Imágenes, media y elementos de formulario
    10. -
  10. Aplicar estilo a las tablas
    11. -
  11. Depurar el CSS
    12. -
  12. Organizar el CSS
    13. -
diff --git a/files/es/learn/css/building_blocks/manejando_diferentes_direcciones_de_texto/index.html b/files/es/learn/css/building_blocks/manejando_diferentes_direcciones_de_texto/index.html deleted file mode 100644 index fa21de66e5..0000000000 --- a/files/es/learn/css/building_blocks/manejando_diferentes_direcciones_de_texto/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Manejando diferentes direcciones de texto -slug: Learn/CSS/Building_blocks/Manejando_diferentes_direcciones_de_texto -tags: - - Aprendizaje - - CSS - - Diseño en bloque - - Diseño lineal - - Modos de escritura - - Principiante - - Propiedades lógicas -translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
- -

Muchas de las propiedades y valores que hemos encontrado hasta ahora en nuestro aprendizaje de CSS han estado ligadas a las dimensiones físicas de nuestra pantalla. Creamos bordes arriba, a la derecha, abajo y a la izquierda de una caja, por ejemplo. Estas dimensiones físicas se ajustan adecuadamente al contenido que se visualiza de forma horizontal, y por defecto, la web tiende a apoyar lenguajes de izquierda a derecha, como el castellano o el francés, mejor que aquellos que se escriben de derecha a izquierda, como el árabe.

- -

Sin embargo, en los últimos años, CSS ha evolucionado para soportar de mejor forma contenidos en diferente direccionalidad, incluyendo contenido de derecha a izquierda, pero también de arriba-abajo, como el japonés - Estas direccionalidades se llaman modos de escritura. En la medida que progresa tu estudio y comiences a trabajar con diseños, comprender los modos de escritura será de mucha utilidad para ti, por ello los explicaremos a continuación.

- - - - - - - - - - - - -
Prerrequisitos:Literatura computacional básica, software básico instalado, conocimiento básico de manejo de archivos, HTML básico (Introducción a HTML), y una idea de cómo funciona CSS (Primeros pasos en CSS.)
Objetivo:Entender la importancia de los modos de escritura en el CSS moderno.
- -

¿Qué son los modos de escritura?

- -

Un modo de escritura en CSS se refiere a si el texto está escrito horizontal o verticalmente. La propiedad {{cssxref("writing-mode")}} permite cambiar de un modo a otro. No necesitas estar trabajando en un lenguaje que use un modo de escritura vertical para querer hacer esto - Podrías cambiar el modo de escritura de partes de tu diseño por razones creativas.

- -

En el ejemplo siguiente existe un encabezado desplegado usando writing-mode: vertical-rl. El texto ahora aparece vertical. El texto vertical es común en diseño gráfico, y puede ser una forma de agregar un aspecto más interesante a tu diseño web.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}

- -

Los tres valores posibles para la propiedad writing-mode son:

- - - -

Así, la propiedad writing-mode está configurando en realidad la direccion en que los elementos de nivel bloque son desplegados en la página - ya sea de arriba abajo, derecha a izquierda, o de izquierda a derecha. Luego señala la dirección del flujo de texto en las frases.

- -

Modos de escritura y diseño en bloque y lineal.

- -

Ya hemos visto el diseño en bloque y lineal, y el hecho de que algunas cosas se muestran como elementos de bloque y otras como elementos lineales. Ésto se encuentra ligado al modo de escritura del documento, y no de la pantalla física. Los bloques sólo se presentan desde la parte superior a la inferior de la página si estas usando un modo de escritura que presente el texto horizontalmente, como el español.

- -

Con el siguiente ejemplo quedará más claro. Si tienes dos cajas que contengan un heading y un paragraph. La primera usa writing-mode: horizontal-tb, un modo de escritura horizontal y desde la parte superior de la página a la base. La segunda usa writing-mode: vertical-rl; este es un modo de escritura vertical y de derecha a izquierda.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}

- -

Cuando cambiamos el modo de escritura, estamos cambiando que dirección es en bloque y cuál es lineal. En un modo de escritura horizontal-tb El la direccion del bloque va de arriba abajo; en un modo de escritura vertical-rl el bloque corre de derecha a izquierda horizontalmente. De esta forma la dimensión del bloque es siempre la direccion en la que se muestran los bloques en el modo de escritura en uso. La dimensión lineal, es siempre la dirección en que fluye una frase.

- -

Este dibujo muestra las dos dimensiones en un modo de escritura horizontal.Showing the block and inline axis for a horizontal writing mode.

- -

Este dibujo muestra las dos dimensiones en un modo de escritura vertical.

- -

Showing the block and inline axis for a vertical writing mode.

- -

Una vez que empieces a observar el diseño CSS, y en particular los nuevos métodos de diseño, esta idea de bloque y lineal cobra mayor importancia. Será revisado más adelante.

- -

Dirección

- -

Además del modo de escritura también tenemos la dirección del texto. Como se mencionó antes, algunos idiomas como el Árabe se escriben horizontalmente, de derecha a izquierda. Esto no es algo que usarías en un sentido creativo. Si tu simplemente quieres alinear algún elemento a la derecha, existen otras formas de hacerlo. Sin embargo es importante entender esto como parte de la naturaleza del CSS. La web no es solo para lenguajes que son escritos de izquierda a derecha!

- -

Debido al hecho de que el modo de escritura y la dirección del texto pueden cambiar, los nuevos métodos de diseño CSS no toman como referencia la izquierda y derecha, ni la parte superior e inferior. En su lugar, hablarán de inicio y fin junto con esta idea de en línea y bloque. No te preocupes mucho por eso en este momento, pero ten en cuenta estas ideas a medida que empiezas a mirar el diseño de una página web; va a ser de gran ayuda en tu entendimiento de CSS.

- -

Valores y propiedades lógicas

- -

La razón de hablar acerca de modos de escritura y dirección en este punto en tu aprendizaje, es por el hecho de que ya vimos muchas de estas propiedades que están atadas a las dimensiones físicas de la pantalla, y tienen más sentido cuando está en un modo de escritura horizontal.

- -

Vamos a echarle un vistzo a nuestras dos cajas de nuevo, una con el modo escritura horizontal-tb y otro con vertical-rl. Le hemos dado a estas dos cajas un {{cssxref("width")}}. Puedes ver que cuando la caja está en el modo de escritura vertical, aún tiene una anchura, y esto está causando que el texto se desborde.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}

- -

Lo que nosotros realmente queremos en este escenario, es esencialmente intercambiar altura y anchura junto con el modo de escritura. Cuando estamos en el modo de escritura vertical, queremos que la caja se expanda en la dimensión del bloque así como lo hace en el modo horizontal.

- -

Para hacerlo más fácil, CSS ha desarrollado recientemente un conjunto de propiedades asignadas. Estas esencialmente reemplazan las propiedades físicas como width and height, con versiones lógicas o relativas al flujo.

- -

La propiedad asignada a width cuando está en el modo de escritura horizontal se llama {{cssxref("inline-size")}}, se refiere al tamaño en la dimensión inline. La propiedad para height se llama {{cssxref("block-size")}} y es el tamaño en la dimensión de bloque. Puedes ver como funciona en el ejemplo de abajo, donde reemplazamos width con inline-size.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}

- -

Propiedades lógicas margin, border y padding

- -

En las últimas dos lecciones aprendimos acerca del modelo de cajas con CSS, y los bordes CSS. En las propiedades margin, border y padding vas a encontrar varias instancias de propiedades físicas, por ejemplo {{cssxref("margin-top")}}, {{cssxref("padding-left")}}, y {{cssxref("border-bottom")}}. Del mismo modo que tenemos asignaciones para ancho y alto, hay asignaciones para estas propiedades.

- -

La propiedad margin-top está asignada a {{cssxref("margin-block-start")}}, esto siempre se va a referir al margen al inicio de la dimensión del bloque. 

- -

La propiedad {{cssxref("padding-left")}} se asigna a {{cssxref("padding-inline-start")}}, el padding que se aplica al inicio de la dirección inline. Aquí será donde las oraciones comienzan en ese modo de escritura. La propiedad {{cssxref("border-bottom")}} se asigna a {{cssxref("border-block-end")}}, que es el borde del final de la dimensión del bloque.

- -

Puedes ver una comparación entre las propiedades físicas y lógicas a continuación.

- - - -

Si cambias el modo de escritura de las cajas asignando a la propiedad writing-mode en .box a vertical-rl, vas a ver como las propiedades físicas se quedan ligadas a sus direcciones físicas, mientras que las propiedades lógicas cambian con el modo de escritura.

- -

También puedes ver que el {{htmlelement("h2")}} tiene  un border-bottom negro. ¿Puedes averiguar como hacer que el borde inferior siempre esté debajo del texto en ambos modos de escritura?

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}

- -

Existe un gran número de propiedades cuando consideras cada uno de los bordes que puedes hacer a mano, y puedes ver todas las propiedades asignadas en la página de MDN para propiedades Lógicas y Valores

- -

Valores lógicos

- -

Hasta ahora hemos examinado los nombres de las propiedades lógicas. Existen también algunas propiedades que toman valores físicos de top, right, bottom, y left. Estos valores también tienen asignaciones a valores lógicos: block-start, inline-end, block-end, y inline-start.

- -

Por ejemplo, puedes hacer que una imagen flote a la izquierda para hacer que el texto se ajuste alrededor de la imagen. Puedes reemplazar left con inline-start como se muestra en el ejemplo a continuación.

- -

Cambia el modo de escritura en este ejemplo a vertical-rl para ver que sucede con la imagen. Cambia inline-start por inline-end para cambiar el modo en que flota.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}

- -

Aquí también estamos usando valores lógicos de el margen para asegurar que el margen está en el sitio correcto sin importar que modo de escritura es.

- -
-

Actualmente, solo Firefox soporta valores relativos de flujo para float. Si estás usando Google Chrome o Microsoft Edge, deberías ver que la imagen no flota.

-
- -

¿Debería usar propiedades físicas o lógicas?

- -

Las propiedades lógicas y los valores son más recientes que su equivalente físico, y por lo tanto se han implementado recientemente en los navegadores. Puedes revisar cualquier página de propiedades en MDN para ver hasta donde llega el soporte del navegador. Si no estás usando multiples modos de escritura, entonces, por ahora, deberías preferir usar las versiones físicas. Sin embargo, en última instancia, esperamos que la gente va a pasar a las versiones lógicas para la mayoría de las cosas, ya que tienen mucho sentido una vez que comienzas a tratar también con métodos de diseño como Flexbox y Grid.

- -

¡Prueba tus habilidades!

- -

Tenemos mucho terreno cubierto en este artículo, pero puedes recordad la información más importante? Puedes encontrar algunas pruebas adicionales para verificar que has retenido esta información antes de seguir adelante: Prueba tus habilidades: modos de escritura.

- -

Resumen

- -

Los conceptos explicados en esta lección son cada vez más importantes en CSS. Un entendimiento pleno de las direcciones en bloque y en línea, y como el flujo de texto cambia con la variación de los modos de escritura, van a ser de gran ayuda en el futuro. Te ayudará a entender CSS incluso si nunca usas un modo de escritura diferente al horizontal.

- -

En el módulo siguiente, vamos a echar un buen vistazo al desbordamiento en CSS

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}

- -

En este módulo

- -
    -
  1. Cascada y herencia
    2. -
  2. Selectores CSS - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git a/files/es/learn/css/building_blocks/overflowing_content/index.html b/files/es/learn/css/building_blocks/overflowing_content/index.html new file mode 100644 index 0000000000..808a519c12 --- /dev/null +++ b/files/es/learn/css/building_blocks/overflowing_content/index.html @@ -0,0 +1,123 @@ +--- +title: Contenido desbordado +slug: Learn/CSS/Building_blocks/Contenido_desbordado +translation_of: Learn/CSS/Building_blocks/Overflowing_content +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}
+ +

En este artículo veremos otro concepto importante en CSS: el desbordamiento. El desbordamiento es lo que sucede cuando hay demasiado contenido para que pueda caber cómodamente en una caja. En esta guía aprenderás qué es y cómo administrarlo.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, conocimientos básicos de HTML (véase Introducción al HTML) y nociones de CSS (véase Primeros pasos con el CSS).
Objetivo:Comprender el desbordamiento y cómo gestionarlo.
+ +

¿Qué es el desbordamiento?

+ +

Ya sabemos que todo en CSS está dentro de una caja, y que podemos restringir el tamaño de estas cajas asignándoles los valores {{cssxref ("width")}} y {{cssxref ("height")}} (o {{cssxref("inline-size")}} y {{cssxref("block-size")}}). El desbordamiento es lo que sucede cuando hay demasiado contenido en una caja, y no cabe cómodamente en ella. El CSS te proporciona varias herramientas para administrar este desbordamiento, y además es un concepto que resulta útil de conocer desde las primeras etapas. Te encontrarás con situaciones de desbordamiento con bastante frecuencia al escribir CSS, especialmente cuando profundices en compaginación con CSS.

+ +

El CSS trata de evitar «la pérdida de datos»

+ +

Vamos a comenzar con dos ejemplos que demuestran cómo se comporta el CSS por defecto cuando ocurre un desbordamiento.

+ +

El primero consiste en una caja que a la que se le ha restringido la dimensión al darle una altura. Luego hemos añadido más contenido del que cabe en la caja. El contenido se desborda y se distribuye desordenadamente sobre el párrafo que hay debajo de la caja.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}

+ +

El segundo consiste en una palabra dentro de una caja cuya dimensión en línea está restringida. La caja se ha hecho demasiado pequeña para que esa palabra quepa, y se desborda.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}

+ +

Te debes estar preguntando por qué el CSS ha tomado por defecto el enfoque más bien desarreglado de provocar el desbordamiento desordenado del contenido. ¿Por qué no ocultar el contenido adicional o hacer crecer la caja?

+ +

Siempre que sea posible, el CSS no oculta su contenido; hacerlo provocaría la pérdida de datos, que generalmente es un problema. En términos de CSS, esto significa que una parte del contenido desaparece. El problema con que desaparezca contenido es que podría ser que no notaras que ha desaparecido. Tus visitantes podrían no darse cuenta de que ha desaparecido contenido. Si se trata del botón de envío de datos en un formulario, nadie podría completar el formulario, y ¡eso es un gran problema! Así que, en vez de esto, el CSS tiende a desbordarse de un modo que sea visible. Es probable que te des cuenta de ese desarreglo, o en el peor de los casos, que un visitante de tu sitio web te informe de que una parte del contenido se superpone y debas arreglarlo.

+ +

Si has restringido el tamaño de una caja con una anchura o una altura determinadas, el CSS asume que sabes lo que haces y que gestionas correctamente el potencial de desbordamiento. En general, restringir el tamaño de un bloque es problemático cuando el texto se va a poner en una caja, porque puede haber más texto del que te esperabas al diseñar el sitio o el tamaño del texto puede ser mayor, por ejemplo, si el usuario lo aumenta.

+ +

En los artículos siguientes veremos diferentes modos de controlar el tamaño que podrían ser menos propensos a desbordarse. Sin embargo, si necesitas un tamaño fijo, también puedes controlar cómo se comporta el desbordamiento. ¡Sigue leyendo!

+ +

La propiedad overflow

+ +

La propiedad {{cssxref ("overflow")}} es el modo como tomas el control del desbordamiento de un elemento y le dices al navegador cómo desea que se comporte. El valor predeterminado para la propiedad overflow es visible, por lo que, de forma predeterminada vamos a poder ver cuándo se desborda nuestro contenido.

+ +

Si deseas cortar el contenido cuando se desborda, puedes establecer el valor overflow: hidden en tu caja, que hace exactamente lo que dice: ocultar el desbordamiento. Esto puede hacer que las cosas desaparezcan, por lo que solo debes utilizar esta opción si ocultar contenido no te va a causar ningún problema.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}

+ +

Quizás te gustaría añadir barras de desplazamiento cuando el contenido se desborde. Si usas overflow: scroll, tu navegador siempre mostrará barras de desplazamiento, incluso cuando no haya suficiente contenido para que pueda desbordarse. Es posible que desees hacer esto, porque evita que aparezcan y desaparezcan barras de desplazamiento según el contenido.

+ +

Si en la caja siguiente eliminas parte del contenido, observarás que las barras de desplazamiento permanecen aun sin que haya nada que desplazar (o, como mucho, solo las pistas de la barra de desplazamiento).

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}

+ +

En el ejemplo anterior solo necesitamos desplazarnos en el eje y, sin embargo, obtenemos barras de desplazamiento en ambos ejes. En su lugar, puedes usar la propiedad {{cssxref ("overflow-y")}}, y establecer overflow-y: scroll para poder desplazarte solo por el eje y.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}

+ +

También puedes desplazarte por el eje x usando {{cssxref ("overflow-x")}}, aunque esta no es una forma recomendada para manejar palabras largas. Si necesitas lidiar con una palabra larga en una caja pequeña, puedes consultar las propiedades {{cssxref ("word-break")}} o {{cssxref ("overflow-wrap")}}. Además, algunos de los métodos expuestos en el artículo Elementos de dimensionado en CSS pueden ayudarte a crear cuadros que se adapten mejor a cantidades variables de contenido.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}

+ +

Al igual que con el desplazamiento, obtendrás una barra de desplazamiento en la dimensión de desplazamiento independientemente de si hay suficiente contenido para provocar una barra de desplazamiento.

+ +
+

Nota: observa que puedes especificar un desplazamiento en x y en y utilizando la propiedad overflow y pasando dos valores. Si especificas dos palabras clave, la primera se aplica a overflow-x y la segunda a overflow-y. De lo contrario, tanto overflow-x como overflow-y se fijan en el mismo valor. Por ejemplo, overflow: scroll hidden establece overflow-x en scroll y overflow-y en hidden.

+
+ +

Si deseas que aparezcan barras de desplazamiento solo si hay más contenido del que cabe en la caja, utiliza overflow: auto. En este caso, el navegador decide si muestra las barras de desplazamiento o no. Los navegadores de escritorio solo suelen hacerlo cuando hay contenido suficiente para causar desbordamiento.

+ +

En el ejemplo siguiente, elimina parte del contenido hasta que quepa en la caja y observarás que las barras de desplazamiento desaparecen.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}

+ +

overflow establece un contexto de formato de bloque

+ +

En CSS hay un concepto conocido como block formatting context o BFC (contexto de formato de bloque). No es algo de lo que debas preocuparte demasiado en este momento, pero es útil saber que cuando usas un valor de overflow, como scroll o auto, creas un BFC. El resultado es que el contenido de la caja al que acabas de cambiar el valor overflow se convierte en un minidiseño propio. Las cosas que están fuera del contenedor no pueden meterse en él, y nada puede sobresalir de esa caja hacia el diseño circundante. Esto es para permitir un comportamiento con desplazamiento, porque para poder crear una experiencia de desplazamiento consistente todo el contenido de tu caja ha de estar contenido en algo, y no puede superponerse con otros elementos de la página.

+ +

Desbordamiento no deseado en diseño web

+ +

Los métodos de diseño modernos (explicados en el módulo Diseñar con el CSS) gestionan muy bien el desbordamiento. Han sido diseñados para hacer frente al hecho de que tendemos a no poder predecir cuánto contenido habrá en la web. Sin embargo, en el pasado, los desarrolladores a menudo usaban alturas fijas para tratar de alinear los fondos de cajas que en realidad no tenían relación entre sí. Este método era frágil y, en una aplicación heredada, ocasionalmente puede aparecer una caja en que el contenido se superpone a otro contenido de la página. Si ves esto, sabrás que se trata de desbordamiento. Lo ideal sería volver a calcular el diseño para no tener que confiar tamaños de caja fijos.

+ +

Al desarrollar un sitio web, siempre debes tener en cuenta los problemas de desbordamiento. Debes probar diseños con cantidades grandes y pequeñas de contenido, aumentar el tamaño de letra... y asegurarte de que tu CSS puede hacerle frente sin ningún problema. Es probable que cambiar el valor de overflow para ocultar contenido o añadir barras de desplazamiento sea algo que debas reservar solo para unos pocos casos especiales, en que realmente desees una caja con barra de desplazamiento, por ejemplo.

+ +

Pon a prueba tus conocimientos

+ +

Hay mucho que absorber en esta lección. ¿Recuerdas la información más importante? Para comprobarlo, ve a Test your skills: overflow.

+ +

Resumen

+ +

Este breve artículo ha introducido el concepto de desbordamiento; ahora comprendes que el CSS intenta no hacer invisible el desbordamiento de contenido, porque esto provoca la pérdida de datos. Has descubierto que puedes gestionar el desbordamiento potencial y también que debes probar tu trabajo para asegurarte de que no causa un desbordamiento problemático accidentalmente.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. Cascada y herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de cajas
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Valores y unidades
    8. +
  8. Elementos de dimensionado en el CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Estilo de las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/selectores_css/combinadores/index.html b/files/es/learn/css/building_blocks/selectores_css/combinadores/index.html deleted file mode 100644 index 54f416456d..0000000000 --- a/files/es/learn/css/building_blocks/selectores_css/combinadores/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Combinadores -slug: Learn/CSS/Building_blocks/Selectores_CSS/Combinadores -translation_of: Learn/CSS/Building_blocks/Selectors/Combinators ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

- -

Los últimos selectores que veremos son los llamados selectores de combinación. Se llaman así porqué combinan otros selectores de manera que proporciona una relación útil entre ellos y la ubicación del contenido en el documento.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción al HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con el CSS).
Objetivo:Conocer los diferentes selectores de combinación que se pueden utilizar en el CSS.
- -

Selector de descendientes

- -

Ya hemos visto los selectores de descendientes en artículos anteriores (selectores con espacios entre ellos):

- -
body article p
- -

Estos selectores seleccionan elementos que son descendientes de otros selectores. No es necesario que sean hijos directos.

- -

En el ejemplo siguiente seleccionamos solo el elemento <p> que hay dentro de un elemento con una clase .box.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

- -

Selector de combinación de elementos hijo

- -

El selector de combinación de elementos hijo es un símbolo de «mayor que» (>), que selecciona solo cuando los selectores identifican elementos que son hijos directos. Los elementos descendientes que se encuentran más abajo en la jerarquía no se seleccionan. Por ejemplo, para seleccionar solo los elementos <p> que son hijos directos de elementos <article>:

- -
article > p
- -

En el ejemplo siguiente hay una lista ordenada anidada dentro de otra lista no ordenada. Utilizamos los selectores de elementos hijo para seleccionar solo los elementos <li> que son hijos directos de <ul> y les aplicamos un borde superior.

- -

Si eliminamos el símbolo > que lo identifica como un selector de elementos hijo, lo convertimos en un selector de elementos descendientes y se aplicará el borde rojo a todos los elementos <li>.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

- -

Hermanos adyacentes

- -

El selector de elementos hermanos adyacentes (+) se utiliza para seleccionar un elemento que se encuentra justo al lado de otro elemento en el mismo nivel de la jerarquía. Por ejemplo, para seleccionar todos los elementos <img> que aparecen justo después de elementos <p>:

- -
p + img
- -

El caso de uso más común es modificar el párrafo que va justo después del título, como en el ejemplo siguiente. Vamos a buscar un párrafo que sea directamente adyacente a <h1> y le vamos a aplicar un estilo.

- -

Si insertas algún otro elemento, como <h2> entre las etiquetas <h1> y <p>, verás que el selector ya no selecciona el párrafo y no se muestra con los mismos colores de fondo y de primer plano que cuando es adyacente.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

- -

Hermanos generales

- -

Si deseas seleccionar los hermanos de un elemento, incluso si no son directamente adyacentes, puedes utilizar el combinador de hermanos general (~). Por ejemplo, para seleccionar todos los elementos <img> que aparecen después de los elementos <p>, hacemos esto:

- -
p ~ img
- -

En el ejemplo siguiente seleccionamos todos los elementos <p> que vienen después de <h1>, y aunque en el documento también hay un <div>, se selecciona incluso la etiqueta <p> que viene después.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

- -

El uso de selectores de combinación

- -

Puedes combinar cualquiera de los selectores de los artículos anteriores con selectores de combinación para seleccionar una parte del documento. Por ejemplo, podrías utilizar el código siguiente para seleccionar elementos de una lista con una clase «a» que son hijos directos de <ul>:

- -
ul > li[class="a"]  {  }
- -

Ten cuidado cuando creas largas listas de selectores que seleccionan partes del documento muy específicas. Te será difícil volver a utilizar las reglas CSS porque has definido un selector muy específico para la ubicación del elemento en el marcado.

- -

A menudo es mejor crear una clase sencilla y aplicarla al elemento en cuestión. Dicho esto, tu conocimiento de los selectores de combinación te será muy útil si necesitas modificar algo del documento y no puedes acceder al código HTML (tal vez porque se haya generado a partir de CMS).

- -

Comprueba tus habilidades

- -

Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para verificar que retienes esa información en Test your skills: Selectors.

- -

Continuamos

- -

Esta es la última sección de nuestros artículos sobre selectores. A continuación vamos a pasar a otra parte importante del CSS: el modelo de caja CSS.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

- -

En este módulo

- -
    -
  1. La cascada y la herencia
    2. -
  2. Selectores CSS - -
    3. -
  3. El modelo de caja
    4. -
  4. Fondos y bordes
    5. -
  5. El uso de diferentes direcciones de texto
    6. -
  6. El desbordamiento de los contenidos
    7. -
  7. Los valores y las unidades
    8. -
  8. Elementos de dimensionado en CSS
    9. -
  9. Elementos de imagen, de media y de formulario
    10. -
  10. Estilo de las tablas
    11. -
  11. Depurar el CSS
    12. -
  12. Organizar el CSS
    13. -
diff --git a/files/es/learn/css/building_blocks/selectores_css/index.html b/files/es/learn/css/building_blocks/selectores_css/index.html deleted file mode 100644 index d0ea61da20..0000000000 --- a/files/es/learn/css/building_blocks/selectores_css/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: Selectores CSS -slug: Learn/CSS/Building_blocks/Selectores_CSS -translation_of: Learn/CSS/Building_blocks/Selectors ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
- -

En {{Glossary( "CSS")}} los selectores se utilizan para delimitar los elementos {{glossary("HTML")}} de nuestra página web a los que queremos aplicar estilo. Hay una amplia variedad de selectores CSS, lo que permite una gran precisión a la hora de seleccionar elementos a los que aplicar estilo. En este artículo y sus subartículos veremos con detalle todos los tipos y el modo como funcionan.

- - - - - - - - - - - - -
Prerrequisitos:Nociones básicas de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, conocimientos básicos de HTML (véase Introducción a HTML) y una idea de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Aprender con detalle cómo funcionan los selectores CSS.
- -

¿Qué es un selector?

- -

En un artículo anterior explicamos qué son los selectores. Un selector CSS es la primera parte de una regla CSS. Es un patrón de elementos y otros términos que indican al navegador qué elementos HTML se seleccionan para aplicarles una regla que incluye los valores de las propiedades CSS. El elemento o los elementos seleccionados por el selector se denominan sujeto del selector.

- -

Fragmento de código con el elemento h1 resaltado.

- -

En artículos anteriores ya has visto algunos selectores y has aprendido que hay diversas maneras de organizar el documento. Por ejemplo, seleccionando un elemento, como h1, o seleccionando una clase, como .special.

- -

En CSS, los selectores se definen en la especificación de selectores de CSS correspondiente; al igual que cualquier otro elemento de CSS, es necesario que los navegadores los admitan para que funcionen. La mayoría de los selectores que encontrarás se definen en especificación de nivel 3 de selectores, que es una especificación consolidada y, por lo tanto, la mayoría de navegadores admitirán esos selectores.

- -

Listas de selectores

- -

Si más de un elemento utiliza el mismo CSS, puedes combinar los selectores en una lista de selectores para que la regla se aplique a cada uno de los selectores individuales. Por ejemplo, si tengo el mismo CSS para un h1 y para una clase .special, los puedo escribir como dos reglas separadas.

- -
h1 {
-  color: blue;
-}
-
-.special {
-  color: blue;
-}
- -

También los podrías combinar en una lista de selectores, separándolos con una coma.

- -
h1, .special {
-  color: blue;
-}
- -

Es posible dejar un espacio en blanco tanto antes como después de la coma. Incluso puede resultar más legible si cada selector se encuentra en una línea distinta.

- -
h1,
-.special {
-  color: blue;
-}
- -

En el ejemplo siguiente, intenta combinar los dos selectores de modo que tengan la misma declaración. El aspecto visual debe permanecer igual tras la combinación.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

- -

Cuando agrupas los selectores de esta manera, si alguno de los selectores no es válido, el navegador sencillamente ignora toda la regla.

- -

En el ejemplo siguiente, la regla que corresponde al selector de clase que no es válido se ignora, mientras que el estilo se aplica al elemento h1.

- -
h1 {
-  color: blue;
-}
-
-..special {
-  color: blue;
-}
- -

Sin embargo, si se combinan, toda la regla se considera no válida y no se aplicará estilo ni a h1 ni a la clase.

- -
h1, ..special {
-  color: blue;
-}
- -

Tipos de selectores

- -

Hay diferentes agrupaciones de selectores, y conocer qué tipo de selector necesitas te ayudará a encontrar la herramienta adecuada para tu trabajo. En estos subartículos vamos a ver los diferentes grupos de selectores con más detalle.

- -

Selectores de tipo, de clase y de ID

- -

Este grupo incluye selectores que delimitan un elemento HTML, como por ejemplo un <h1>.

- -
h1 { }
- -

También incluye selectores que delimitan una clase:

- -
.box { }
- -

o un ID:

- -
#unique { }
- -

Selectores de atributo

- -

Este grupo de selectores te proporciona diferentes formas de seleccionar elementos según la presencia de un atributo determinado en un elemento:

- -
a[title] { }
- -

O incluso hacer una selección basada en la presencia de un atributo que tiene un valor particular asignado:

- -
a[href="https://example.com"] { }
- -

Las pseudoclases y los pseudoelementos

- -

Este grupo de selectores incluye pseudoclases, que aplican estilo a ciertos estados de un elemento. La pseudoclase :hover, por ejemplo, selecciona un elemento solo cuando se le pasa el ratón por encima.

- -
a: hover {}
- -

También incluye pseudoelementos, que seleccionan una parte determinada de un elemento en vez del elemento en sí. Por ejemplo, ::first-line siempre selecciona la primera línea del texto que se encuentra dentro de un elemento (<p>, en el ejemplo siguiente), y actúa como si un elemento <span> hubiera delimitado la primera línea, seleccionado y aplicado estilo.

- -
p::first-line { }
- -

Combinadores

- -

El último grupo de selectores combina otros selectores con el fin de delimitar elementos de nuestros documentos. El ejemplo siguiente selecciona los párrafos que son hijos directos del elemento <article> utilizando el operador de combinación hijo (>):

- -
article > p { }
- -

Próximos pasos

- -

Echa un vistazo a esta tabla de referencia de selectores que contiene enlaces directos a los distintos tipos de selectores que se explican en nuestra sección de aprendizaje o en MDN, o bien sigue adelante e inicia tu viaje para averiguar cómo funcionan en Selectores de tipo, de clase y de ID.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

- -

Tabla de referencia de selectores

- -

La tabla que te mostramos a continuación proporciona una descripción general de los selectores que puedes utilizar junto con enlaces a diversas páginas de esta guía que te mostrarán cómo utilizar cada tipo de selector. También hemos incluido un enlace a la página MDN de cada selector para poder comprobar la información sobre los navegadores que lo admiten. Puedes utilizarlo como referencia para volver cuando necesites buscar los selectores a medida que avanzas con la materia o mientras experimentas con CSS por tu cuenta.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorEjemploTutorial de aprendizaje de CSS
Selector de tipoh1 {  }Los tipos de selectores
Selector universal* {  }El selector universal
Selector de clase.box {  }Los selectores de clase
Selector de ID#unique { }Los selectores de ID
Selector de atributoa[title] {  }Los selectores de atributo
Pseudoclasep:first-child { }Las pseudoclases
Pseudoelementop::first-line { }Los pseudoelementos
Operadores de combinación descendentesarticle pOperadores de combinación descendentes
Operador de combinación de elementos hijoarticle > pOperadores de combinación de elementos hijo
Operador de combinación de elementos hermanos adyacentesh1 + pHermanos adyacentes
Operador de combinación general de elementos hermanosh1 ~ pHermanos generales
- -

En este módulo

- -
    -
  1. La cascada y la herencia
    2. -
  2. Selectores CSS - -
    3. -
  3. El modelo de caja
    4. -
  4. Fondos y bordes
    5. -
  5. El uso de diferentes direcciones de texto
    6. -
  6. El desbordamiento de los contenidos
    7. -
  7. Los valores y las unidades
    8. -
  8. Elementos de dimensionado en CSS
    9. -
  9. Imágenes, media y elementos de formulario
    10. -
  10. Aplicar estilo a las tablas
    11. -
  11. Depurar el CSS
    12. -
  12. Organizar el CSS
    13. -
diff --git a/files/es/learn/css/building_blocks/selectores_css/pseudo-clases_y_pseudo-elementos/index.html b/files/es/learn/css/building_blocks/selectores_css/pseudo-clases_y_pseudo-elementos/index.html deleted file mode 100644 index f48dfdcbd5..0000000000 --- a/files/es/learn/css/building_blocks/selectores_css/pseudo-clases_y_pseudo-elementos/index.html +++ /dev/null @@ -1,397 +0,0 @@ ---- -title: Pseudoclases y pseudoelementos -slug: Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos -translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

- -

El conjunto de selectores que estudiaremos en este artículo se conocen como pseudoclases y pseudoelementos. Hay muchos y a menudo sirven para fines muy específicos. Una vez que sepas cómo usarlos, puedes echar un vistazo a la lista para ver si alguno sirve para la página que quieres crear. Una vez más, la página correspondiente de MDN resulta muy útil para conocer qué navegadores los admiten o no.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con el CSS).
Objetivo:Obtener información sobre los selectores de pseudoclases y pseudoelementos.
- -

¿Qué es una pseudoclase?

- -

Una pseudoclase es un selector que marca los elementos que están en un estado específico, por ejemplo, los que son el primer elemento de su tipo, o aquellos por los que el cursor les pasa por encima. Tienden a actuar como si hubieras aplicado una clase en una parte determinada del documento y, a menudo, ayudan a reducir el exceso de clases y proporcionan un marcado más flexible y fácil de mantener.

- -

Las pseudoclases son palabras clave que comienzan con dos puntos:

- -
:pseudo-class-name
- -

Ejemplos simples de pseudoclases

- -

Echemos un vistazo a algunos ejemplos. Si queremos el primer párrafo de un artículo en letra más grande y en negrita, podemos añadir una clase a ese párrafo y luego añadirle CSS a esa clase, como se muestra en este ejemplo:

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}

- -

Sin embargo, podría ser complicado de mantener. ¿Y si añadiésemos un párrafo nuevo en la parte superior del documento? Habría que mover la clase para que quede antes del nuevo párrafo. En lugar de añadir la clase, podríamos utilizar el selector de pseudoclase {{cssxref(":first-child")}}, que siempre seleccionará el primer elemento hijo del artículo, y de esta forma no tendremos que editar el código HTML (esto no siempre es posible, tal vez debido a que lo genera un CMS).

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

- -

Todas las pseudoclases se comportan del mismo modo. Seleccionan un fragmento del documento que está en un estado determinado y se comportan como si se hubiera añadido una clase a su HTML. Echa un vistazo a otros ejemplos en MDN:

- - - -
-

Nota: Es válido escribir pseudoclases y pseudoelementos sin que les preceda un selector de elemento. En el ejemplo anterior, podría escribirse :first-child y la regla se aplicaríaa cualquier elemento que sea el primer hijo de un elemento <article>, no solo un párrafo primer hijo. :first-child equivale a *:first-child. Pero normalmente se quiere más control y hay que ser más específico.

-
- -

Pseudoclases de acción de usuario

- -

Algunas pseudoclases solo intervienen cuando el usuario interactúa con el documento de alguna manera. Estas pseudoclases de acción de usuario, que también reciben el nombre de pseudoclases dinámicas, actúan como si se añadiese una clase al elemento cuando el usuario interactúa con él. Algunos ejemplos son:

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

- -

¿Qué es un pseudoelemento?

- -

Los pseudoelementos se comportan de manera similar. Sin embargo, actúan como si hubieras añadido un elemento HTML totalmente nuevo en el marcado, en lugar de haber aplicado una clase nueva a los elementos presentes. Los pseudoelementos empiezan con un doble signo de dos puntos ::.

- -
::pseudo-element-name
- -
-

Nota: Algunos de los primeros pseudoelementos utilizaban la sintaxis de un solo signo de dos puntos, así que puede ser que en ocasiones los veas escritos de esta forma en algún código o ejemplo. Los navegadores modernos leen tanto los pseudoelementos con la sintaxis de los dos puntos simple como la de los dos puntos doble para garantizar la compatibilidad retrospectiva.

-
- -

Por ejemplo, si deseas seleccionar la primera línea de un párrafo simplemente puedes delimitarlo con el elemento <span> y utilizar un selector de elementos. Sin embargo, fallará si el número de palabras que has delimitado resulta ser más largo o más corto que el ancho del elemento padre. Ya que normalmente no sabemos cuántas palabras caben en una línea porque esto cambia con el ancho de la pantalla o con los cambios de tamaño de la letra, no es posible hacer esto introduciendo solo HTML.

- -

El pseudoelemento ::first-line soluciona este problema: no importa si el número de palabras aumenta o disminuye, siempre se selecciona la primera línea.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}

- -

Actúa como si hubiera un elemento <span> mágicamente delimitando esa primera línea, que se actualiza cada vez que la longitud de la línea cambia.

- -

Puedes observar que en ambos párrafos se selecciona la primera línea.

- -

Combinar pseudoclases y pseudoelementos

- -

Si quieres poner en negrita la primera línea del primer párrafo, puedes encadenar los selectores :first-child y ::first-line. Añade al ejemplo anterior el CSS siguiente. Queremos que se seleccione la primera línea del primer elemento <p> que esté dentro de un elemento <article>.

- -
article p:first-child::first-line {
-  font-size: 120%;
-  font-weight: bold;
-}
- -

Generar contenido con ::before y ::after

- -

Hay un par de pseudoelementos especiales que se utilizan junto con la propiedad de content para introducir contenido en el documento usando el CSS.

- -

Puedes utilizarlos para insertar una cadena de texto, como en el ejemplo siguiente. Intenta cambiar el valor del texto de la propiedad {{cssxref("content")}} y observa el cambio en la salida. También puedes cambiar el pseudoelemento ::before por ::after y verás que el texto se inserta al final del elemento, en lugar de al principio.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}

- -

Sin embargo, en realidad no es habitual insertar cadenas de texto desde el CSS, porque ese texto resulta inaccesible para algunos lectores de pantalla y puede ser difícil de buscar y modificar en el futuro.

- -

Un uso más adecuado de estos pseudoelementos es insertar un icono. Por ejemplo, la pequeña flecha que añadimos en el ejemplo siguiente es un indicador visual que no queremos que el lector de pantalla muestre:

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}

- -

Estos pseudoelementos también se utilizan con frecuencia para insertar una cadena vacía a la que luego se le puede aplicar estilo, como a cualquier otro elemento de la página.

- -

En el ejemplo siguiente hemos añadido una cadena vacía mediante el pseudoelemento ::before. Le hemos asociado display: block para poder aplicarle estilo para que tenga una anchura y una altura determinadas. A continuación, utilizamos el CSS para aplicar estilo de la misma forma que lo haríamos con cualquier otro elemento. Juega con el CSS y cambia la forma en que se ve y se comporta.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}

- -

El uso de los pseudoelementos ::before y ::after, junto con la propiedad content se conoce como «contenido generado» en CSS, y verás que esta técnica se utiliza a menudo para diversas tareas. Un buen ejemplo es la página web CSS Arrow Please, que te ayuda a generar una flecha con CSS. Echa un vistazo al CSS a medida que creas tu flecha y verás cómo funcionan los pseudoelementos {{cssxref("::before")}} y {{cssxref("::after")}}. Cada vez que veas estos selectores, echa un vistazo a la propiedad {{cssxref("content")}} para ver qué se añade al documento.

- -

Sección de referencia

- -

Hay un gran número de pseudoclases y pseudoelementos, así que resulta útil tener una lista para ir consultándolos. A continuación encontrarás un par de tablas con enlaces a sus páginas de referencia en MDN. Tómalas como referencia para ver de qué dispones para seleccionar qué tipos de elementos.

- -

Las pseudoclases

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorDescripción
{{ Cssxref(":active") }}Selecciona un elemento cuando el usuario lo activa (por ejemplo, con un clic).
{{ Cssxref(":any-link") }}Selecciona los estados :link y :visited de un enlace.
{{ Cssxref(":blank") }}Selecciona un elemento <input> cuyo valor de entrada está vacío.
{{ Cssxref(":checked") }}Selecciona un botón de opción o casilla de verificación en el estado que determines.
{{ Cssxref(":current") }}Selecciona el elemento que se muestra en ese momento, o un ancestro de ese elemento.
{{ Cssxref(":default") }}Selecciona uno o más elementos de interfaz de usuario cuyo valor es el predeterminado de entre un conjunto de elementos similares.
{{ Cssxref(":dir") }}Selecciona un elemento según su direccionalidad (valor del atributo dir de HTML o propiedad direction de CSS).
{{ Cssxref(":disabled") }}Selecciona elementos de la interfaz de usuario que están en estado inactivo.
{{ Cssxref(":empty") }}Selecciona un elemento que no tiene elementos hijo, excepto por algún espacio en blanco opcional.
{{ Cssxref(":enabled") }}Selecciona elementos de la interfaz de usuario que están en estado activo.
{{ Cssxref(":first") }}En Paged Media, selecciona la primera página.
{{ Cssxref(":first-child") }}Selecciona el primero entre elementos hermanos.
{{ Cssxref(":first-of-type") }}Selecciona el primero entre un tipo determinado de elementos hermanos.
{{ Cssxref(":focus") }}Selecciona el elemento que tiene el foco.
{{ Cssxref(":focus-visible")}}Selecciona el elemento que tiene el foco cuando el foco tiene que estar visible para el usuario.
{{ Cssxref(":focus-within") }}Selecciona el elemento que tiene el foco y el elemento con un descendiente que tiene el foco.
{{ Cssxref(":future") }}Selecciona los elementos que van después del elemento en curso.
{{ Cssxref(":hover") }}Selecciona un elemento cuando el usuario interactúa con él.
{{ Cssxref(":indeterminate") }}Selecciona elementos de interfaz de usuario cuyo valor está en un estado no determinado, por lo general se trata de casillas de verificación.
{{ Cssxref(":in-range") }}Selecciona un elemento cuyo valor se encuentra dentro de un rango de valores determinado.
{{ Cssxref(":invalid") }}Selecciona un elemento, como por ejemplo un <input>, cuyo estado es no válido.
{{ Cssxref(":lang") }}Selecciona un elemento según el idioma (valor del atributo lang de HTML).
{{ Cssxref(":last-child") }}Selecciona el último elemento de entre sus elementos hermanos.
{{ Cssxref(":last-of-type") }}Selecciona el último de entre los elementos hermanos de un tipo determinado.
{{ Cssxref(":left") }}En Paged Media selecciona las páginas de la izquierda.
{{ Cssxref(":link")}}Selecciona los enlaces no visitados.
{{ Cssxref(":local-link")}}Selecciona los enlaces que dirigen a páginas que se encuentran en la misma página web que el documento activo.
{{ Cssxref(":is", ":is()")}}Selecciona cualquiera de los selectores de la lista de selección que se pase como valor de este selector.
{{ Cssxref(":not") }}Selecciona elementos que otros selectores no han seleccionado antes y que se han pasado como valor de este selector.
{{ Cssxref(":nth-child") }}Selecciona elementos de entre una lista de elementos hermanos. Los elementos hermanos están relacionados por una fórmula del tipo an + b (por ejemplo, 2n + 1 seleccionaría los elementos 1, 3, 5, 7, etc., es decir, todos los impares).
{{ Cssxref(":nth-of-type") }}Selecciona elementos de entre una lista de elementos hermanos de un tipo determinado (por ejemplo, todos los elementos <p>). Los elementos hermanos están relacionados por una fórmula del tipo an + b (por ejemplo, 2n + 1 relacionaría en la secuencia ese tipo de elementos, los números 1, 3, 5, 7, etc., es decir, todos los impares).
{{ Cssxref(":nth-last-child") }}Selecciona elementos de entre una lista de elementos hermanos, contando hacia atrás desde el final. Los elementos hermanos están relacionados por una fórmula del tipo an+b (por ejemplo, 2n + 1 relacionaría en la secuencia el último de los elementos de este tipo con el que se encuentra dos por delante, y así sucesivamente. Todos los impares, contando desde el final).
{{ Cssxref(":nth-last-of-type") }}Selecciona los elementos de entre una lista de elementos hermanos que son de un tipo determinado (por ejemplo, elementos <p>), contando hacia atrás desde el final. Los elementos hermanos están relacionados por una fórmula del tipo an+b (por ejemplo, 2n + 1 relacionaría en la secuencia el último de los elementos de ese tipo con el que se encuentra dos por delante, y así sucesivamente. Todos los impares, contando desde el final).
{{ Cssxref(":only-child") }}Selecciona un elemento que no tiene elementos hermanos.
{{ Cssxref(":only-of-type") }}Selecciona un elemento que es el único de su tipo entre sus elementos hermanos.
{{ Cssxref(":optional") }}Selecciona los elementos de formulario que son innecesarios.
{{ Cssxref(":out-of-range") }}Selecciona un elemento cuyo valor está fuera de rango.
{{ Cssxref(":past") }}Selecciona los elementos que se encuentran antes del elemento activo.
{{ Cssxref(":placeholder-shown") }}Selecciona el elemento de entrada que muestra texto de marcador de posición.
{{ Cssxref(":playing") }}Selecciona un elemento que representa un audio, un vídeo o un recurso similar que se puede «reproducir» o «pausar», cuando el elemento está «en reproducción».
{{ Cssxref(":paused") }}Selecciona un elemento que representa un audio, un vídeo o un recurso similar que se puede “«reproducir» o «pausar» cuando el elemento está «pausado».
{{ Cssxref(":read-only") }}Selecciona los elementos que el usuario no puede modificar.
{{ Cssxref(":read-write") }}Selecciona los elementos que el usuario puede modificar.
{{ Cssxref(":required") }}Selecciona los elementos de formulario que son necesarios.
{{ Cssxref(":right") }}En Paged Media selecciona las páginas de la derecha.
{{ Cssxref(":root") }}Selecciona un elemento que es la raíz del documento.
{{ Cssxref(":scope") }}Selecciona cualquier elemento de ámbito.
{{ Cssxref(":valid") }}Selecciona un elemento como <input>, en un estado válido.
{{ Cssxref(":target") }}Selecciona el elemento al que apunta la URL activa (es decir, cuyo ID coincide con el identificador de fragmento de la URL activo).
{{ Cssxref(":visited") }}Selecciona los enlaces visitados.
- -

Pseudoelementos

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorDescripción
{{ Cssxref("::after") }}Selecciona el elemento al que se puede aplicar estilo que aparece a continuación del contenido del elemento que lo origina.
{{ Cssxref("::before") }}Selecciona el elemento al que se puede aplicar estilo que aparece antes del contenido del elemento que lo origina.
{{ Cssxref("::first-letter") }}Selecciona la primera letra del elemento.
{{ Cssxref("::first-line") }}Selecciona la primera línea del elemento de contenido.
{{ Cssxref("::grammar-error") }}Selecciona una parte del documento que contiene un error de gramática indicado por el navegador.
{{ Cssxref("::selection") }}Selecciona la parte del documento que ha sido seleccionada.
{{ Cssxref("::spelling-error") }}Selecciona una parte del documento que contiene un error de ortografía indicado por el navegador.
- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

- -

En este módulo

- -
    -
  1. La cascada y la herencia
    2. -
  2. Selectores CSS - -
    3. -
  3. El modelo de caja
    4. -
  4. Fondos y bordes
    5. -
  5. El uso de diferentes direcciones de texto
    6. -
  6. El desbordamiento de los contenidos
    7. -
  7. Los valores y las unidades
    8. -
  8. Elementos de dimensionado en CSS
    9. -
  9. Elementos de imagen, de media y de formulario
    10. -
  10. Aplicar estilo a las tablas
    11. -
  11. Depurar el CSS
    12. -
  12. Organizar el CSS
    13. -
diff --git a/files/es/learn/css/building_blocks/selectores_css/selectores_de_atributos/index.html b/files/es/learn/css/building_blocks/selectores_css/selectores_de_atributos/index.html deleted file mode 100644 index 057c38c18d..0000000000 --- a/files/es/learn/css/building_blocks/selectores_css/selectores_de_atributos/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Selectores de atributo -slug: Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos -translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

- -

Como ya explicamos en los artículos de HTML, los elementos pueden tener atributos que proporcionan un nivel de detalle mayor sobre el elemento que delimitan. En el CSS puedes utilizar selectores de atributo para seleccionar elementos definidos con unos atributos determinados. En este artículo veremos cómo utilizar estos selectores tan útiles.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Aprender a identificar y utilizar selectores de atributo.
- -

Selectores de presencia y valor

- -

Estos selectores permiten seleccionar un elemento solo a partir de la presencia de un atributo (por ejemplo href) o a partir de varias coincidencias diferentes con respecto al valor del atributo.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorEjemploDescripción
[attr]a[title]Relaciona elementos con un mismo nombre de atributo, attr (el valor que se indica entre corchetes).
[attr=value]a[href="https://example.com"]Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor es exactamente el mismo, value (la cadena de caracteres que se indica entre corchetes).
[attr~=value]p[class~="special"] -

Relaciona los elementos con un mismo nombre de atributo, attr, cuyo valor es exactamente value, o los elementos con un mismo atributo attr que contiene uno o más valores de los cuales, al menos uno, coincide con value.

- -

Ten en cuenta que en una lista que incluya más de un valor, los distintos valores se separan con un espacio.

-
[attr|=value]div[lang|="zh"]Relaciona los elementos con un mismo nombre de atributo, attr, cuyo valor puede ser exactamente value o puede comenzar con value seguido inmediatamente por un guion.
- -

En el ejemplo siguiente puedes observar cómo se utilizan estos selectores.

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}

- -

Selectores coincidentes con subcadenas

- -

Estos selectores permiten un tipo más avanzado de relación entre las subcadenas de caracteres que constituyen el valor del atributo. Por ejemplo, si tienes las clases box-warning y box-error y quieres encontrar todos los elementos que empiezan con la cadena de caracteres “box-”, puedes seleccionarlas ambas con [class^="box-"].

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorEjemploDescripción
[attr^=value]li[class^="box-"]Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor empieza exactamente con la subcadena de caracteres value.
[attr$=value]li[class$="-box"]Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor termina exactamente con la subcadena de caracteres value.
[attr*= ]li[class*="box"]Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor incluye al menos una ocurrencia de la subcadena value en algún punto de la cadena.
- -

El ejemplo siguiente muestra cómo se usan estos selectores:

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

- -

Mayúsculas y minúsculas

- -

Si quieres relacionar los valores de atributo tanto si están escritos en mayúsculas como en minúsculas, puedes utilizar el valor i antes del paréntesis de cierre. Este indicador informa al navegador de que debe relacionar todos los caracteres ASCII independientemente de si las letras son mayúsculas o minúsculas. Sin este indicador, los valores se relacionarán según las directrices del lenguaje del documento con respecto a la distinción entre mayúsculas y minúsculas; en el caso del HTML, se distinguirá entre mayúsculas y minúsculas.

- -

En el ejemplo siguiente, el primer selector relaciona valores que empiezan con a; luego, solo coincide el primer elemento de la lista porque los otros dos comienzan con una A mayúscula. El segundo selector utiliza el indicador de no distinción entre mayúsculas y minúsculas, así que relaciona todos los elementos de la lista.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

- -
-

Nota: Recientemente se ha creado un valor s, que obliga a establecer la distinción de mayúsculas y minúsculas en contextos en que no se suele establecer esta distinción. Sin embargo, pocos navegadores lo utilizan y no resulta demasiado útil en un contexto HTML.

-
- -

Próximos pasos

- -

Ahora que hemos terminado con los selectores de atributo, puedes avanzar al artículo siguiente y leer acerca de los selectores de pseudoclases y pseudoelementos.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

- -

En este módulo

- -
    -
  1. La cascada y la herencia
    2. -
  2. Selectores CSS - -
    3. -
  3. El modelo de caja
    4. -
  4. Fondos y bordes
    5. -
  5. El uso de diferentes direcciones de texto
    6. -
  6. El desbordamiento de los contenidos
    7. -
  7. Los valores y las unidades
    8. -
  8. Elementos de dimensionado en CSS
    9. -
  9. Imágenes, media y elementos de formulario
    10. -
  10. Aplicar estilo a las tablas
    11. -
  11. Depurar el CSS
    12. -
  12. Organizar el CSS
    13. -
diff --git a/files/es/learn/css/building_blocks/selectores_css/selectores_de_tipo_clase_e_id/index.html b/files/es/learn/css/building_blocks/selectores_css/selectores_de_tipo_clase_e_id/index.html deleted file mode 100644 index 01b3963f8a..0000000000 --- a/files/es/learn/css/building_blocks/selectores_css/selectores_de_tipo_clase_e_id/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: 'Selectores de tipo, clase e ID' -slug: Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID -translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

- -

En este artículo vamos a echar un vistazo a los selectores más simples de que dispones y que seguramente serán los que utilices con mayor frecuencia.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Conocer los diferentes selectores CSS que podemos utilizar para aplicar CSS a un documento.
- -

Tipos de selectores

- -

Un selector de tipo también recibe el nombre de selector de nombre de etiqueta o selector de elemento porque selecciona un elemento/etiqueta HTML del documento. En el ejemplo siguiente hemos utilizado los selectores span, em y strong. Se aplica estilo a todas las instancias de los elementos <span>, <em> y <strong>.

- -

Trata de añadir una regla CSS que seleccione el elemento <h1> y cambie su color para que se vea azul.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}

- -

El selector universal

- -

El selector universal se indica con un asterisco (*) y selecciona todos los elementos del documento (o del elemento padre si está encadenado con otro elemento y un operador de combinación descendente, por ejemplo). En el ejemplo siguiente hemos utilizado el selector universal para eliminar los márgenes en todos los elementos. Esto significa que en lugar de la opción predeterminada de aplicación de estilos del navegador, que muestra los títulos de encabezado y los párrafos separados por un margen de respeto, todo se mostrará pegado y no resultará tan fácil distinguir los diversos párrafos.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}

- -

Es posible observar este tipo de comportamiento en las «hojas de estilo de puesta a cero» (o «hojas de estilo reset»), que anulan el formato del navegador. Fueron muy populares en un momento dado; sin embargo, excluir todo el estilo significa que luego tienes que ponerlo todo de nuevo. Por este motivo tendemos a utilizar el selector universal con mucho cuidado, y para situaciones muy específicas como la que se describe a continuación.

- -

Uso del selector universal para facilitar la legibilidad de tus selectores

- -

Uno de los usos del selector universal es facilitar la legibilidad de los selectores y clarificar sus funciones. Por ejemplo, si quiero seleccionar el primer elemento hijo de cualquier elemento <article> y poner ese elemento, cualquiera que sea, en negrita, puedo utilizar el selector {{cssxref(":first-child")}}, que veremos con mayor detalle más adelante en el artículo de pseudoclases y pseudoelementos, como selector descendente junto con el selector de elemento <article>: 

- -
article :first-child {
-
-}
- -

Sin embargo, esto podría confundirse con article:first-child, que selecciona cualquier elemento <article> que sea el primer elemento hijo de otro elemento.

- -

Para evitar esta confusión podemos añadir al selector :first-child el selector universal. De este modo la función del selector resulta obvia: seleccionará cualquier elemento que entre en la jerarquía de primer hijo de un elemento <article>:

- -
article *:first-child {
-
-}
- -

Selectores de clase

- -

El selector de clase comienza con un punto (.) y selecciona todo elemento del documento que esté afectado por esa clase. En el ejemplo siguiente hemos creado una clase llamada .highlight y la hemos aplicado en varios lugares del documento. Todos los elementos a los que se aplique esta clase se resaltarán en amarillo.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}

- -

Delimitación de clases en elementos particulares

- -

Puedes crear un selector que seleccionará los elementos concretos que estén afectados por esa clase. En el ejemplo siguiente vamos a introducir un resaltado en un elemento <span> con una clase highlight del de los títulos <h1> con clase highlight. Para ello hay que anexar esa clase al selector de tipo correspondiente al elemento que queremos delimitar, sin dejar entre ellos ningún espacio.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}

- -

Este enfoque hace el elemento CSS menos reutilizable porque la clase solo se aplicará a ese elemento en particular y tendrás que agregar otro selector en caso que quieras que las normas también se apliquen a otros elementos.

- -

Delimitar un elemento afectado por más de una clase

- -

Puedes aplicar más de una clase a un elemento y delimitarlos de forma individual o seleccionar el elemento cuando todas las clases están presentes en el selector. Puede ser útil cuando se trabaja con componentes que se pueden combinar de maneras diferentes en tu página web.

- -

En el ejemplo siguiente hay un elemento <div> que contiene una nota. El borde gris se aplica cuando la caja tiene una clase notebox. Si además tiene una clase warning o danger, la propiedad {{cssxref("border-color")}} cambia.

- -

Para decirle al navegador que solo queremos seleccionar el elemento si incluye todas estas clases, las encadenamos juntas sin ningún espacio entre ellas.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}

- -

Selectores de ID

- -

Un selector de ID comienza con un carácter # en lugar de un punto, pero se utiliza básicamente de la misma manera que un selector de clase. Sin embargo, un ID se puede utilizar una sola vez en cada documento, y a cada elemento solo se le puede aplicar un único id. Puede seleccionar un elemento que tenga propiedad id y ese ID puede ir precedido de un selector de tipo que seleccionará el elemento solo si el elemento y el ID coinciden. En el ejemplo siguiente puedes ver todos estos usos:

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}

- -
-

Nota: Como aprendimos en el artículo sobre la especificidad, un ID tiene una especificidad muy alta y anula la mayoría de los otros selectores. Esto puede dificultar su uso. En la mayoría de los casos es preferible añadir una clase al elemento en lugar de utilizar un ID. Sin embargo, si el ID es la única manera de seleccionar el elemento (tal vez porque no tengas acceso al marcado y, por lo tanto, no lo puedes editar) no hay ningún problema en utilizarlo.

-
- -

En el próximo artículo

- -

Seguiremos con la descripción de los selectores examinando los selectores de atributo.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

- -

En este módulo

- -
    -
  1. La cascada y la herencia
    2. -
  2. Selectores CSS - -
    3. -
  3. El modelo de caja
    4. -
  4. Fondos y bordes
    5. -
  5. El uso de diferentes direcciones de texto
    6. -
  6. El desbordamiento de los contenidos
    7. -
  7. Los valores y las unidades
    8. -
  8. Elementos de dimensionado en CSS
    9. -
  9. Imágenes, media y elementos de formulario
    10. -
  10. Aplicar estilo a las tablas
    11. -
  11. Depurar el CSS
    12. -
  12. Organizar el CSS
    13. -
diff --git a/files/es/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/es/learn/css/building_blocks/selectors/attribute_selectors/index.html new file mode 100644 index 0000000000..057c38c18d --- /dev/null +++ b/files/es/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -0,0 +1,154 @@ +--- +title: Selectores de atributo +slug: Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos +translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

+ +

Como ya explicamos en los artículos de HTML, los elementos pueden tener atributos que proporcionan un nivel de detalle mayor sobre el elemento que delimitan. En el CSS puedes utilizar selectores de atributo para seleccionar elementos definidos con unos atributos determinados. En este artículo veremos cómo utilizar estos selectores tan útiles.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Aprender a identificar y utilizar selectores de atributo.
+ +

Selectores de presencia y valor

+ +

Estos selectores permiten seleccionar un elemento solo a partir de la presencia de un atributo (por ejemplo href) o a partir de varias coincidencias diferentes con respecto al valor del atributo.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorEjemploDescripción
[attr]a[title]Relaciona elementos con un mismo nombre de atributo, attr (el valor que se indica entre corchetes).
[attr=value]a[href="https://example.com"]Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor es exactamente el mismo, value (la cadena de caracteres que se indica entre corchetes).
[attr~=value]p[class~="special"] +

Relaciona los elementos con un mismo nombre de atributo, attr, cuyo valor es exactamente value, o los elementos con un mismo atributo attr que contiene uno o más valores de los cuales, al menos uno, coincide con value.

+ +

Ten en cuenta que en una lista que incluya más de un valor, los distintos valores se separan con un espacio.

+
[attr|=value]div[lang|="zh"]Relaciona los elementos con un mismo nombre de atributo, attr, cuyo valor puede ser exactamente value o puede comenzar con value seguido inmediatamente por un guion.
+ +

En el ejemplo siguiente puedes observar cómo se utilizan estos selectores.

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}

+ +

Selectores coincidentes con subcadenas

+ +

Estos selectores permiten un tipo más avanzado de relación entre las subcadenas de caracteres que constituyen el valor del atributo. Por ejemplo, si tienes las clases box-warning y box-error y quieres encontrar todos los elementos que empiezan con la cadena de caracteres “box-”, puedes seleccionarlas ambas con [class^="box-"].

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorEjemploDescripción
[attr^=value]li[class^="box-"]Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor empieza exactamente con la subcadena de caracteres value.
[attr$=value]li[class$="-box"]Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor termina exactamente con la subcadena de caracteres value.
[attr*= ]li[class*="box"]Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor incluye al menos una ocurrencia de la subcadena value en algún punto de la cadena.
+ +

El ejemplo siguiente muestra cómo se usan estos selectores:

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

+ +

Mayúsculas y minúsculas

+ +

Si quieres relacionar los valores de atributo tanto si están escritos en mayúsculas como en minúsculas, puedes utilizar el valor i antes del paréntesis de cierre. Este indicador informa al navegador de que debe relacionar todos los caracteres ASCII independientemente de si las letras son mayúsculas o minúsculas. Sin este indicador, los valores se relacionarán según las directrices del lenguaje del documento con respecto a la distinción entre mayúsculas y minúsculas; en el caso del HTML, se distinguirá entre mayúsculas y minúsculas.

+ +

En el ejemplo siguiente, el primer selector relaciona valores que empiezan con a; luego, solo coincide el primer elemento de la lista porque los otros dos comienzan con una A mayúscula. El segundo selector utiliza el indicador de no distinción entre mayúsculas y minúsculas, así que relaciona todos los elementos de la lista.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

+ +
+

Nota: Recientemente se ha creado un valor s, que obliga a establecer la distinción de mayúsculas y minúsculas en contextos en que no se suele establecer esta distinción. Sin embargo, pocos navegadores lo utilizan y no resulta demasiado útil en un contexto HTML.

+
+ +

Próximos pasos

+ +

Ahora que hemos terminado con los selectores de atributo, puedes avanzar al artículo siguiente y leer acerca de los selectores de pseudoclases y pseudoelementos.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. La cascada y la herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de caja
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/selectors/combinators/index.html b/files/es/learn/css/building_blocks/selectors/combinators/index.html new file mode 100644 index 0000000000..54f416456d --- /dev/null +++ b/files/es/learn/css/building_blocks/selectors/combinators/index.html @@ -0,0 +1,111 @@ +--- +title: Combinadores +slug: Learn/CSS/Building_blocks/Selectores_CSS/Combinadores +translation_of: Learn/CSS/Building_blocks/Selectors/Combinators +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

Los últimos selectores que veremos son los llamados selectores de combinación. Se llaman así porqué combinan otros selectores de manera que proporciona una relación útil entre ellos y la ubicación del contenido en el documento.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción al HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con el CSS).
Objetivo:Conocer los diferentes selectores de combinación que se pueden utilizar en el CSS.
+ +

Selector de descendientes

+ +

Ya hemos visto los selectores de descendientes en artículos anteriores (selectores con espacios entre ellos):

+ +
body article p
+ +

Estos selectores seleccionan elementos que son descendientes de otros selectores. No es necesario que sean hijos directos.

+ +

En el ejemplo siguiente seleccionamos solo el elemento <p> que hay dentro de un elemento con una clase .box.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

+ +

Selector de combinación de elementos hijo

+ +

El selector de combinación de elementos hijo es un símbolo de «mayor que» (>), que selecciona solo cuando los selectores identifican elementos que son hijos directos. Los elementos descendientes que se encuentran más abajo en la jerarquía no se seleccionan. Por ejemplo, para seleccionar solo los elementos <p> que son hijos directos de elementos <article>:

+ +
article > p
+ +

En el ejemplo siguiente hay una lista ordenada anidada dentro de otra lista no ordenada. Utilizamos los selectores de elementos hijo para seleccionar solo los elementos <li> que son hijos directos de <ul> y les aplicamos un borde superior.

+ +

Si eliminamos el símbolo > que lo identifica como un selector de elementos hijo, lo convertimos en un selector de elementos descendientes y se aplicará el borde rojo a todos los elementos <li>.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

+ +

Hermanos adyacentes

+ +

El selector de elementos hermanos adyacentes (+) se utiliza para seleccionar un elemento que se encuentra justo al lado de otro elemento en el mismo nivel de la jerarquía. Por ejemplo, para seleccionar todos los elementos <img> que aparecen justo después de elementos <p>:

+ +
p + img
+ +

El caso de uso más común es modificar el párrafo que va justo después del título, como en el ejemplo siguiente. Vamos a buscar un párrafo que sea directamente adyacente a <h1> y le vamos a aplicar un estilo.

+ +

Si insertas algún otro elemento, como <h2> entre las etiquetas <h1> y <p>, verás que el selector ya no selecciona el párrafo y no se muestra con los mismos colores de fondo y de primer plano que cuando es adyacente.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

+ +

Hermanos generales

+ +

Si deseas seleccionar los hermanos de un elemento, incluso si no son directamente adyacentes, puedes utilizar el combinador de hermanos general (~). Por ejemplo, para seleccionar todos los elementos <img> que aparecen después de los elementos <p>, hacemos esto:

+ +
p ~ img
+ +

En el ejemplo siguiente seleccionamos todos los elementos <p> que vienen después de <h1>, y aunque en el documento también hay un <div>, se selecciona incluso la etiqueta <p> que viene después.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

+ +

El uso de selectores de combinación

+ +

Puedes combinar cualquiera de los selectores de los artículos anteriores con selectores de combinación para seleccionar una parte del documento. Por ejemplo, podrías utilizar el código siguiente para seleccionar elementos de una lista con una clase «a» que son hijos directos de <ul>:

+ +
ul > li[class="a"]  {  }
+ +

Ten cuidado cuando creas largas listas de selectores que seleccionan partes del documento muy específicas. Te será difícil volver a utilizar las reglas CSS porque has definido un selector muy específico para la ubicación del elemento en el marcado.

+ +

A menudo es mejor crear una clase sencilla y aplicarla al elemento en cuestión. Dicho esto, tu conocimiento de los selectores de combinación te será muy útil si necesitas modificar algo del documento y no puedes acceder al código HTML (tal vez porque se haya generado a partir de CMS).

+ +

Comprueba tus habilidades

+ +

Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para verificar que retienes esa información en Test your skills: Selectors.

+ +

Continuamos

+ +

Esta es la última sección de nuestros artículos sobre selectores. A continuación vamos a pasar a otra parte importante del CSS: el modelo de caja CSS.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. La cascada y la herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de caja
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Elementos de imagen, de media y de formulario
    10. +
  10. Estilo de las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/selectors/index.html b/files/es/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..d0ea61da20 --- /dev/null +++ b/files/es/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,223 @@ +--- +title: Selectores CSS +slug: Learn/CSS/Building_blocks/Selectores_CSS +translation_of: Learn/CSS/Building_blocks/Selectors +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

En {{Glossary( "CSS")}} los selectores se utilizan para delimitar los elementos {{glossary("HTML")}} de nuestra página web a los que queremos aplicar estilo. Hay una amplia variedad de selectores CSS, lo que permite una gran precisión a la hora de seleccionar elementos a los que aplicar estilo. En este artículo y sus subartículos veremos con detalle todos los tipos y el modo como funcionan.

+ + + + + + + + + + + + +
Prerrequisitos:Nociones básicas de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, conocimientos básicos de HTML (véase Introducción a HTML) y una idea de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Aprender con detalle cómo funcionan los selectores CSS.
+ +

¿Qué es un selector?

+ +

En un artículo anterior explicamos qué son los selectores. Un selector CSS es la primera parte de una regla CSS. Es un patrón de elementos y otros términos que indican al navegador qué elementos HTML se seleccionan para aplicarles una regla que incluye los valores de las propiedades CSS. El elemento o los elementos seleccionados por el selector se denominan sujeto del selector.

+ +

Fragmento de código con el elemento h1 resaltado.

+ +

En artículos anteriores ya has visto algunos selectores y has aprendido que hay diversas maneras de organizar el documento. Por ejemplo, seleccionando un elemento, como h1, o seleccionando una clase, como .special.

+ +

En CSS, los selectores se definen en la especificación de selectores de CSS correspondiente; al igual que cualquier otro elemento de CSS, es necesario que los navegadores los admitan para que funcionen. La mayoría de los selectores que encontrarás se definen en especificación de nivel 3 de selectores, que es una especificación consolidada y, por lo tanto, la mayoría de navegadores admitirán esos selectores.

+ +

Listas de selectores

+ +

Si más de un elemento utiliza el mismo CSS, puedes combinar los selectores en una lista de selectores para que la regla se aplique a cada uno de los selectores individuales. Por ejemplo, si tengo el mismo CSS para un h1 y para una clase .special, los puedo escribir como dos reglas separadas.

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

También los podrías combinar en una lista de selectores, separándolos con una coma.

+ +
h1, .special {
+  color: blue;
+}
+ +

Es posible dejar un espacio en blanco tanto antes como después de la coma. Incluso puede resultar más legible si cada selector se encuentra en una línea distinta.

+ +
h1,
+.special {
+  color: blue;
+}
+ +

En el ejemplo siguiente, intenta combinar los dos selectores de modo que tengan la misma declaración. El aspecto visual debe permanecer igual tras la combinación.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

+ +

Cuando agrupas los selectores de esta manera, si alguno de los selectores no es válido, el navegador sencillamente ignora toda la regla.

+ +

En el ejemplo siguiente, la regla que corresponde al selector de clase que no es válido se ignora, mientras que el estilo se aplica al elemento h1.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

Sin embargo, si se combinan, toda la regla se considera no válida y no se aplicará estilo ni a h1 ni a la clase.

+ +
h1, ..special {
+  color: blue;
+}
+ +

Tipos de selectores

+ +

Hay diferentes agrupaciones de selectores, y conocer qué tipo de selector necesitas te ayudará a encontrar la herramienta adecuada para tu trabajo. En estos subartículos vamos a ver los diferentes grupos de selectores con más detalle.

+ +

Selectores de tipo, de clase y de ID

+ +

Este grupo incluye selectores que delimitan un elemento HTML, como por ejemplo un <h1>.

+ +
h1 { }
+ +

También incluye selectores que delimitan una clase:

+ +
.box { }
+ +

o un ID:

+ +
#unique { }
+ +

Selectores de atributo

+ +

Este grupo de selectores te proporciona diferentes formas de seleccionar elementos según la presencia de un atributo determinado en un elemento:

+ +
a[title] { }
+ +

O incluso hacer una selección basada en la presencia de un atributo que tiene un valor particular asignado:

+ +
a[href="https://example.com"] { }
+ +

Las pseudoclases y los pseudoelementos

+ +

Este grupo de selectores incluye pseudoclases, que aplican estilo a ciertos estados de un elemento. La pseudoclase :hover, por ejemplo, selecciona un elemento solo cuando se le pasa el ratón por encima.

+ +
a: hover {}
+ +

También incluye pseudoelementos, que seleccionan una parte determinada de un elemento en vez del elemento en sí. Por ejemplo, ::first-line siempre selecciona la primera línea del texto que se encuentra dentro de un elemento (<p>, en el ejemplo siguiente), y actúa como si un elemento <span> hubiera delimitado la primera línea, seleccionado y aplicado estilo.

+ +
p::first-line { }
+ +

Combinadores

+ +

El último grupo de selectores combina otros selectores con el fin de delimitar elementos de nuestros documentos. El ejemplo siguiente selecciona los párrafos que son hijos directos del elemento <article> utilizando el operador de combinación hijo (>):

+ +
article > p { }
+ +

Próximos pasos

+ +

Echa un vistazo a esta tabla de referencia de selectores que contiene enlaces directos a los distintos tipos de selectores que se explican en nuestra sección de aprendizaje o en MDN, o bien sigue adelante e inicia tu viaje para averiguar cómo funcionan en Selectores de tipo, de clase y de ID.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

Tabla de referencia de selectores

+ +

La tabla que te mostramos a continuación proporciona una descripción general de los selectores que puedes utilizar junto con enlaces a diversas páginas de esta guía que te mostrarán cómo utilizar cada tipo de selector. También hemos incluido un enlace a la página MDN de cada selector para poder comprobar la información sobre los navegadores que lo admiten. Puedes utilizarlo como referencia para volver cuando necesites buscar los selectores a medida que avanzas con la materia o mientras experimentas con CSS por tu cuenta.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorEjemploTutorial de aprendizaje de CSS
Selector de tipoh1 {  }Los tipos de selectores
Selector universal* {  }El selector universal
Selector de clase.box {  }Los selectores de clase
Selector de ID#unique { }Los selectores de ID
Selector de atributoa[title] {  }Los selectores de atributo
Pseudoclasep:first-child { }Las pseudoclases
Pseudoelementop::first-line { }Los pseudoelementos
Operadores de combinación descendentesarticle pOperadores de combinación descendentes
Operador de combinación de elementos hijoarticle > pOperadores de combinación de elementos hijo
Operador de combinación de elementos hermanos adyacentesh1 + pHermanos adyacentes
Operador de combinación general de elementos hermanosh1 ~ pHermanos generales
+ +

En este módulo

+ +
    +
  1. La cascada y la herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de caja
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/es/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html new file mode 100644 index 0000000000..f48dfdcbd5 --- /dev/null +++ b/files/es/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -0,0 +1,397 @@ +--- +title: Pseudoclases y pseudoelementos +slug: Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos +translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

+ +

El conjunto de selectores que estudiaremos en este artículo se conocen como pseudoclases y pseudoelementos. Hay muchos y a menudo sirven para fines muy específicos. Una vez que sepas cómo usarlos, puedes echar un vistazo a la lista para ver si alguno sirve para la página que quieres crear. Una vez más, la página correspondiente de MDN resulta muy útil para conocer qué navegadores los admiten o no.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con el CSS).
Objetivo:Obtener información sobre los selectores de pseudoclases y pseudoelementos.
+ +

¿Qué es una pseudoclase?

+ +

Una pseudoclase es un selector que marca los elementos que están en un estado específico, por ejemplo, los que son el primer elemento de su tipo, o aquellos por los que el cursor les pasa por encima. Tienden a actuar como si hubieras aplicado una clase en una parte determinada del documento y, a menudo, ayudan a reducir el exceso de clases y proporcionan un marcado más flexible y fácil de mantener.

+ +

Las pseudoclases son palabras clave que comienzan con dos puntos:

+ +
:pseudo-class-name
+ +

Ejemplos simples de pseudoclases

+ +

Echemos un vistazo a algunos ejemplos. Si queremos el primer párrafo de un artículo en letra más grande y en negrita, podemos añadir una clase a ese párrafo y luego añadirle CSS a esa clase, como se muestra en este ejemplo:

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}

+ +

Sin embargo, podría ser complicado de mantener. ¿Y si añadiésemos un párrafo nuevo en la parte superior del documento? Habría que mover la clase para que quede antes del nuevo párrafo. En lugar de añadir la clase, podríamos utilizar el selector de pseudoclase {{cssxref(":first-child")}}, que siempre seleccionará el primer elemento hijo del artículo, y de esta forma no tendremos que editar el código HTML (esto no siempre es posible, tal vez debido a que lo genera un CMS).

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

+ +

Todas las pseudoclases se comportan del mismo modo. Seleccionan un fragmento del documento que está en un estado determinado y se comportan como si se hubiera añadido una clase a su HTML. Echa un vistazo a otros ejemplos en MDN:

+ + + +
+

Nota: Es válido escribir pseudoclases y pseudoelementos sin que les preceda un selector de elemento. En el ejemplo anterior, podría escribirse :first-child y la regla se aplicaríaa cualquier elemento que sea el primer hijo de un elemento <article>, no solo un párrafo primer hijo. :first-child equivale a *:first-child. Pero normalmente se quiere más control y hay que ser más específico.

+
+ +

Pseudoclases de acción de usuario

+ +

Algunas pseudoclases solo intervienen cuando el usuario interactúa con el documento de alguna manera. Estas pseudoclases de acción de usuario, que también reciben el nombre de pseudoclases dinámicas, actúan como si se añadiese una clase al elemento cuando el usuario interactúa con él. Algunos ejemplos son:

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

+ +

¿Qué es un pseudoelemento?

+ +

Los pseudoelementos se comportan de manera similar. Sin embargo, actúan como si hubieras añadido un elemento HTML totalmente nuevo en el marcado, en lugar de haber aplicado una clase nueva a los elementos presentes. Los pseudoelementos empiezan con un doble signo de dos puntos ::.

+ +
::pseudo-element-name
+ +
+

Nota: Algunos de los primeros pseudoelementos utilizaban la sintaxis de un solo signo de dos puntos, así que puede ser que en ocasiones los veas escritos de esta forma en algún código o ejemplo. Los navegadores modernos leen tanto los pseudoelementos con la sintaxis de los dos puntos simple como la de los dos puntos doble para garantizar la compatibilidad retrospectiva.

+
+ +

Por ejemplo, si deseas seleccionar la primera línea de un párrafo simplemente puedes delimitarlo con el elemento <span> y utilizar un selector de elementos. Sin embargo, fallará si el número de palabras que has delimitado resulta ser más largo o más corto que el ancho del elemento padre. Ya que normalmente no sabemos cuántas palabras caben en una línea porque esto cambia con el ancho de la pantalla o con los cambios de tamaño de la letra, no es posible hacer esto introduciendo solo HTML.

+ +

El pseudoelemento ::first-line soluciona este problema: no importa si el número de palabras aumenta o disminuye, siempre se selecciona la primera línea.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}

+ +

Actúa como si hubiera un elemento <span> mágicamente delimitando esa primera línea, que se actualiza cada vez que la longitud de la línea cambia.

+ +

Puedes observar que en ambos párrafos se selecciona la primera línea.

+ +

Combinar pseudoclases y pseudoelementos

+ +

Si quieres poner en negrita la primera línea del primer párrafo, puedes encadenar los selectores :first-child y ::first-line. Añade al ejemplo anterior el CSS siguiente. Queremos que se seleccione la primera línea del primer elemento <p> que esté dentro de un elemento <article>.

+ +
article p:first-child::first-line {
+  font-size: 120%;
+  font-weight: bold;
+}
+ +

Generar contenido con ::before y ::after

+ +

Hay un par de pseudoelementos especiales que se utilizan junto con la propiedad de content para introducir contenido en el documento usando el CSS.

+ +

Puedes utilizarlos para insertar una cadena de texto, como en el ejemplo siguiente. Intenta cambiar el valor del texto de la propiedad {{cssxref("content")}} y observa el cambio en la salida. También puedes cambiar el pseudoelemento ::before por ::after y verás que el texto se inserta al final del elemento, en lugar de al principio.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}

+ +

Sin embargo, en realidad no es habitual insertar cadenas de texto desde el CSS, porque ese texto resulta inaccesible para algunos lectores de pantalla y puede ser difícil de buscar y modificar en el futuro.

+ +

Un uso más adecuado de estos pseudoelementos es insertar un icono. Por ejemplo, la pequeña flecha que añadimos en el ejemplo siguiente es un indicador visual que no queremos que el lector de pantalla muestre:

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}

+ +

Estos pseudoelementos también se utilizan con frecuencia para insertar una cadena vacía a la que luego se le puede aplicar estilo, como a cualquier otro elemento de la página.

+ +

En el ejemplo siguiente hemos añadido una cadena vacía mediante el pseudoelemento ::before. Le hemos asociado display: block para poder aplicarle estilo para que tenga una anchura y una altura determinadas. A continuación, utilizamos el CSS para aplicar estilo de la misma forma que lo haríamos con cualquier otro elemento. Juega con el CSS y cambia la forma en que se ve y se comporta.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}

+ +

El uso de los pseudoelementos ::before y ::after, junto con la propiedad content se conoce como «contenido generado» en CSS, y verás que esta técnica se utiliza a menudo para diversas tareas. Un buen ejemplo es la página web CSS Arrow Please, que te ayuda a generar una flecha con CSS. Echa un vistazo al CSS a medida que creas tu flecha y verás cómo funcionan los pseudoelementos {{cssxref("::before")}} y {{cssxref("::after")}}. Cada vez que veas estos selectores, echa un vistazo a la propiedad {{cssxref("content")}} para ver qué se añade al documento.

+ +

Sección de referencia

+ +

Hay un gran número de pseudoclases y pseudoelementos, así que resulta útil tener una lista para ir consultándolos. A continuación encontrarás un par de tablas con enlaces a sus páginas de referencia en MDN. Tómalas como referencia para ver de qué dispones para seleccionar qué tipos de elementos.

+ +

Las pseudoclases

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorDescripción
{{ Cssxref(":active") }}Selecciona un elemento cuando el usuario lo activa (por ejemplo, con un clic).
{{ Cssxref(":any-link") }}Selecciona los estados :link y :visited de un enlace.
{{ Cssxref(":blank") }}Selecciona un elemento <input> cuyo valor de entrada está vacío.
{{ Cssxref(":checked") }}Selecciona un botón de opción o casilla de verificación en el estado que determines.
{{ Cssxref(":current") }}Selecciona el elemento que se muestra en ese momento, o un ancestro de ese elemento.
{{ Cssxref(":default") }}Selecciona uno o más elementos de interfaz de usuario cuyo valor es el predeterminado de entre un conjunto de elementos similares.
{{ Cssxref(":dir") }}Selecciona un elemento según su direccionalidad (valor del atributo dir de HTML o propiedad direction de CSS).
{{ Cssxref(":disabled") }}Selecciona elementos de la interfaz de usuario que están en estado inactivo.
{{ Cssxref(":empty") }}Selecciona un elemento que no tiene elementos hijo, excepto por algún espacio en blanco opcional.
{{ Cssxref(":enabled") }}Selecciona elementos de la interfaz de usuario que están en estado activo.
{{ Cssxref(":first") }}En Paged Media, selecciona la primera página.
{{ Cssxref(":first-child") }}Selecciona el primero entre elementos hermanos.
{{ Cssxref(":first-of-type") }}Selecciona el primero entre un tipo determinado de elementos hermanos.
{{ Cssxref(":focus") }}Selecciona el elemento que tiene el foco.
{{ Cssxref(":focus-visible")}}Selecciona el elemento que tiene el foco cuando el foco tiene que estar visible para el usuario.
{{ Cssxref(":focus-within") }}Selecciona el elemento que tiene el foco y el elemento con un descendiente que tiene el foco.
{{ Cssxref(":future") }}Selecciona los elementos que van después del elemento en curso.
{{ Cssxref(":hover") }}Selecciona un elemento cuando el usuario interactúa con él.
{{ Cssxref(":indeterminate") }}Selecciona elementos de interfaz de usuario cuyo valor está en un estado no determinado, por lo general se trata de casillas de verificación.
{{ Cssxref(":in-range") }}Selecciona un elemento cuyo valor se encuentra dentro de un rango de valores determinado.
{{ Cssxref(":invalid") }}Selecciona un elemento, como por ejemplo un <input>, cuyo estado es no válido.
{{ Cssxref(":lang") }}Selecciona un elemento según el idioma (valor del atributo lang de HTML).
{{ Cssxref(":last-child") }}Selecciona el último elemento de entre sus elementos hermanos.
{{ Cssxref(":last-of-type") }}Selecciona el último de entre los elementos hermanos de un tipo determinado.
{{ Cssxref(":left") }}En Paged Media selecciona las páginas de la izquierda.
{{ Cssxref(":link")}}Selecciona los enlaces no visitados.
{{ Cssxref(":local-link")}}Selecciona los enlaces que dirigen a páginas que se encuentran en la misma página web que el documento activo.
{{ Cssxref(":is", ":is()")}}Selecciona cualquiera de los selectores de la lista de selección que se pase como valor de este selector.
{{ Cssxref(":not") }}Selecciona elementos que otros selectores no han seleccionado antes y que se han pasado como valor de este selector.
{{ Cssxref(":nth-child") }}Selecciona elementos de entre una lista de elementos hermanos. Los elementos hermanos están relacionados por una fórmula del tipo an + b (por ejemplo, 2n + 1 seleccionaría los elementos 1, 3, 5, 7, etc., es decir, todos los impares).
{{ Cssxref(":nth-of-type") }}Selecciona elementos de entre una lista de elementos hermanos de un tipo determinado (por ejemplo, todos los elementos <p>). Los elementos hermanos están relacionados por una fórmula del tipo an + b (por ejemplo, 2n + 1 relacionaría en la secuencia ese tipo de elementos, los números 1, 3, 5, 7, etc., es decir, todos los impares).
{{ Cssxref(":nth-last-child") }}Selecciona elementos de entre una lista de elementos hermanos, contando hacia atrás desde el final. Los elementos hermanos están relacionados por una fórmula del tipo an+b (por ejemplo, 2n + 1 relacionaría en la secuencia el último de los elementos de este tipo con el que se encuentra dos por delante, y así sucesivamente. Todos los impares, contando desde el final).
{{ Cssxref(":nth-last-of-type") }}Selecciona los elementos de entre una lista de elementos hermanos que son de un tipo determinado (por ejemplo, elementos <p>), contando hacia atrás desde el final. Los elementos hermanos están relacionados por una fórmula del tipo an+b (por ejemplo, 2n + 1 relacionaría en la secuencia el último de los elementos de ese tipo con el que se encuentra dos por delante, y así sucesivamente. Todos los impares, contando desde el final).
{{ Cssxref(":only-child") }}Selecciona un elemento que no tiene elementos hermanos.
{{ Cssxref(":only-of-type") }}Selecciona un elemento que es el único de su tipo entre sus elementos hermanos.
{{ Cssxref(":optional") }}Selecciona los elementos de formulario que son innecesarios.
{{ Cssxref(":out-of-range") }}Selecciona un elemento cuyo valor está fuera de rango.
{{ Cssxref(":past") }}Selecciona los elementos que se encuentran antes del elemento activo.
{{ Cssxref(":placeholder-shown") }}Selecciona el elemento de entrada que muestra texto de marcador de posición.
{{ Cssxref(":playing") }}Selecciona un elemento que representa un audio, un vídeo o un recurso similar que se puede «reproducir» o «pausar», cuando el elemento está «en reproducción».
{{ Cssxref(":paused") }}Selecciona un elemento que representa un audio, un vídeo o un recurso similar que se puede “«reproducir» o «pausar» cuando el elemento está «pausado».
{{ Cssxref(":read-only") }}Selecciona los elementos que el usuario no puede modificar.
{{ Cssxref(":read-write") }}Selecciona los elementos que el usuario puede modificar.
{{ Cssxref(":required") }}Selecciona los elementos de formulario que son necesarios.
{{ Cssxref(":right") }}En Paged Media selecciona las páginas de la derecha.
{{ Cssxref(":root") }}Selecciona un elemento que es la raíz del documento.
{{ Cssxref(":scope") }}Selecciona cualquier elemento de ámbito.
{{ Cssxref(":valid") }}Selecciona un elemento como <input>, en un estado válido.
{{ Cssxref(":target") }}Selecciona el elemento al que apunta la URL activa (es decir, cuyo ID coincide con el identificador de fragmento de la URL activo).
{{ Cssxref(":visited") }}Selecciona los enlaces visitados.
+ +

Pseudoelementos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorDescripción
{{ Cssxref("::after") }}Selecciona el elemento al que se puede aplicar estilo que aparece a continuación del contenido del elemento que lo origina.
{{ Cssxref("::before") }}Selecciona el elemento al que se puede aplicar estilo que aparece antes del contenido del elemento que lo origina.
{{ Cssxref("::first-letter") }}Selecciona la primera letra del elemento.
{{ Cssxref("::first-line") }}Selecciona la primera línea del elemento de contenido.
{{ Cssxref("::grammar-error") }}Selecciona una parte del documento que contiene un error de gramática indicado por el navegador.
{{ Cssxref("::selection") }}Selecciona la parte del documento que ha sido seleccionada.
{{ Cssxref("::spelling-error") }}Selecciona una parte del documento que contiene un error de ortografía indicado por el navegador.
+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. La cascada y la herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de caja
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Elementos de imagen, de media y de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/es/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html new file mode 100644 index 0000000000..01b3963f8a --- /dev/null +++ b/files/es/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -0,0 +1,117 @@ +--- +title: 'Selectores de tipo, clase e ID' +slug: Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID +translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

+ +

En este artículo vamos a echar un vistazo a los selectores más simples de que dispones y que seguramente serán los que utilices con mayor frecuencia.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Conocer los diferentes selectores CSS que podemos utilizar para aplicar CSS a un documento.
+ +

Tipos de selectores

+ +

Un selector de tipo también recibe el nombre de selector de nombre de etiqueta o selector de elemento porque selecciona un elemento/etiqueta HTML del documento. En el ejemplo siguiente hemos utilizado los selectores span, em y strong. Se aplica estilo a todas las instancias de los elementos <span>, <em> y <strong>.

+ +

Trata de añadir una regla CSS que seleccione el elemento <h1> y cambie su color para que se vea azul.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}

+ +

El selector universal

+ +

El selector universal se indica con un asterisco (*) y selecciona todos los elementos del documento (o del elemento padre si está encadenado con otro elemento y un operador de combinación descendente, por ejemplo). En el ejemplo siguiente hemos utilizado el selector universal para eliminar los márgenes en todos los elementos. Esto significa que en lugar de la opción predeterminada de aplicación de estilos del navegador, que muestra los títulos de encabezado y los párrafos separados por un margen de respeto, todo se mostrará pegado y no resultará tan fácil distinguir los diversos párrafos.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}

+ +

Es posible observar este tipo de comportamiento en las «hojas de estilo de puesta a cero» (o «hojas de estilo reset»), que anulan el formato del navegador. Fueron muy populares en un momento dado; sin embargo, excluir todo el estilo significa que luego tienes que ponerlo todo de nuevo. Por este motivo tendemos a utilizar el selector universal con mucho cuidado, y para situaciones muy específicas como la que se describe a continuación.

+ +

Uso del selector universal para facilitar la legibilidad de tus selectores

+ +

Uno de los usos del selector universal es facilitar la legibilidad de los selectores y clarificar sus funciones. Por ejemplo, si quiero seleccionar el primer elemento hijo de cualquier elemento <article> y poner ese elemento, cualquiera que sea, en negrita, puedo utilizar el selector {{cssxref(":first-child")}}, que veremos con mayor detalle más adelante en el artículo de pseudoclases y pseudoelementos, como selector descendente junto con el selector de elemento <article>: 

+ +
article :first-child {
+
+}
+ +

Sin embargo, esto podría confundirse con article:first-child, que selecciona cualquier elemento <article> que sea el primer elemento hijo de otro elemento.

+ +

Para evitar esta confusión podemos añadir al selector :first-child el selector universal. De este modo la función del selector resulta obvia: seleccionará cualquier elemento que entre en la jerarquía de primer hijo de un elemento <article>:

+ +
article *:first-child {
+
+}
+ +

Selectores de clase

+ +

El selector de clase comienza con un punto (.) y selecciona todo elemento del documento que esté afectado por esa clase. En el ejemplo siguiente hemos creado una clase llamada .highlight y la hemos aplicado en varios lugares del documento. Todos los elementos a los que se aplique esta clase se resaltarán en amarillo.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}

+ +

Delimitación de clases en elementos particulares

+ +

Puedes crear un selector que seleccionará los elementos concretos que estén afectados por esa clase. En el ejemplo siguiente vamos a introducir un resaltado en un elemento <span> con una clase highlight del de los títulos <h1> con clase highlight. Para ello hay que anexar esa clase al selector de tipo correspondiente al elemento que queremos delimitar, sin dejar entre ellos ningún espacio.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}

+ +

Este enfoque hace el elemento CSS menos reutilizable porque la clase solo se aplicará a ese elemento en particular y tendrás que agregar otro selector en caso que quieras que las normas también se apliquen a otros elementos.

+ +

Delimitar un elemento afectado por más de una clase

+ +

Puedes aplicar más de una clase a un elemento y delimitarlos de forma individual o seleccionar el elemento cuando todas las clases están presentes en el selector. Puede ser útil cuando se trabaja con componentes que se pueden combinar de maneras diferentes en tu página web.

+ +

En el ejemplo siguiente hay un elemento <div> que contiene una nota. El borde gris se aplica cuando la caja tiene una clase notebox. Si además tiene una clase warning o danger, la propiedad {{cssxref("border-color")}} cambia.

+ +

Para decirle al navegador que solo queremos seleccionar el elemento si incluye todas estas clases, las encadenamos juntas sin ningún espacio entre ellas.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}

+ +

Selectores de ID

+ +

Un selector de ID comienza con un carácter # en lugar de un punto, pero se utiliza básicamente de la misma manera que un selector de clase. Sin embargo, un ID se puede utilizar una sola vez en cada documento, y a cada elemento solo se le puede aplicar un único id. Puede seleccionar un elemento que tenga propiedad id y ese ID puede ir precedido de un selector de tipo que seleccionará el elemento solo si el elemento y el ID coinciden. En el ejemplo siguiente puedes ver todos estos usos:

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}

+ +
+

Nota: Como aprendimos en el artículo sobre la especificidad, un ID tiene una especificidad muy alta y anula la mayoría de los otros selectores. Esto puede dificultar su uso. En la mayoría de los casos es preferible añadir una clase al elemento en lugar de utilizar un ID. Sin embargo, si el ID es la única manera de seleccionar el elemento (tal vez porque no tengas acceso al marcado y, por lo tanto, no lo puedes editar) no hay ningún problema en utilizarlo.

+
+ +

En el próximo artículo

+ +

Seguiremos con la descripción de los selectores examinando los selectores de atributo.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. La cascada y la herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de caja
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/sizing_items_in_css/index.html b/files/es/learn/css/building_blocks/sizing_items_in_css/index.html new file mode 100644 index 0000000000..81759abccc --- /dev/null +++ b/files/es/learn/css/building_blocks/sizing_items_in_css/index.html @@ -0,0 +1,129 @@ +--- +title: Dimensionar elementos en CSS +slug: Learn/CSS/Building_blocks/Dimensionar_elementos_en_CSS +translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}
+ +

En los diversos artículos vistos hasta ahora, has aprendido varias formas de dimensionar elementos en una página web utilizando CSS. Es importante que comprendas qué tamaños van a tener los diferentes elementos de tu diseño, y en este artículo vamos a resumir las diversas formas en que puedes asignar tamaños a los elementos con CSS y definir algunos términos relativos al dimensionado que te ayudarán en el futuro.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Comprender las diferentes formas en que podemos dimensionar las cosas en CSS.
+ +

El tamaño natural o intrínseco de las cosas

+ +

Los elementos HTML tienen un tamaño natural, establecido antes de que se vean afectados por cualquier código CSS. Un ejemplo sencillo es una imagen. Una imagen tiene un ancho y una altura que están definidos en el archivo de imagen que está incrustando en la página. Este tamaño se describe como el tamaño intrínseco, que proviene de la imagen misma.

+ +

Si colocas una imagen en una página y no cambias su altura y ancho, ya sea usando atributos en la etiqueta <img> o el CSS, se mostrará con ese tamaño intrínseco. En el ejemplo siguiente le hemos dado un borde a la imagen para que puedas ver la extensión del archivo.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}

+ +

Sin embargo, un elemento {{htmlelement ("div")}} vacío no tiene tamaño propio. Si añades un elemento {{htmlelement ("div")}} sin contenido a tu HTML, entonces debes darle un borde como hemos hecho con la imagen y verás una línea en la página. Se trata del borde del elemento replegado sobre sí mismo porque no hay contenido para mantenerlo abierto. En nuestro ejemplo siguiente, ese borde se extiende por todo el ancho del contenedor, porque es un elemento de nivel de bloque, un comportamiento con el que deberías comenzar a familiarizarte. No tiene altura (o tamaño en la dimensión de bloque) porque no hay contenido.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}

+ +

En el ejemplo anterior, añade texto al elemento vacío. Ahora el borde contiene ese texto porque la altura del elemento queda definida por el contenido. Por lo tanto, el tamaño de este elemento <div> en la dimensión del bloque proviene del tamaño del contenido. Nuevamente, este es el tamaño intrínseco del elemento: su tamaño está definido por su contenido.

+ +

Configurar un tamaño específico

+ +

Por supuesto, podemos dar a los elementos de nuestro diseño un tamaño específico. Cuando asignas un tamaño a un elemento (al cual deberá ajustarse el contenido del elemento) nos referimos a este como tamaño extrínseco. Toma nuestro elemento <div> del ejemplo anterior: podemos darle valores específicos como {{cssxref ("width")}} y {{cssxref ("height")}}, y así tendrá ese tamaño sea cual sea su contenido. Como descubrimos en nuestro artículo anterior sobre el desbordamiento, una altura establecida puede causar el desbordamiento del contenido si hay más contenido del que cabe en el elemento.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}

+ +

Debido a este problema de desbordamiento, fijar la altura de los elementos con longitudes o porcentajes es algo que debemos hacer con mucho cuidado en la web.

+ +

El uso de porcentajes

+ +

En muchos sentidos, los porcentajes actúan como unidades de longitud, y como discutimos en el artículo sobre valores y unidades, a menudo se pueden usar indistintamente con longitudes. Cuando usas un porcentaje, debes tener claro de qué es porcentaje. En el caso de una caja dentro de otro contenedor, si a la caja secundaria le asignas un porcentaje al ancho, será un porcentaje del ancho del contenedor principal.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}

+ +

Esto se debe a que los porcentajes se refieren al tamaño del bloque contenedor. Sin un porcentaje aplicado, nuestro elemento <div> ocuparía el 100% del espacio disponible, porque es un elemento de nivel de bloque. Si le damos un ancho porcentual, este se convierte en un porcentaje del espacio que normalmente ocuparía.

+ +

Porcentaje de márgenes y áreas de relleno

+ +

Si configuras margins y padding como un porcentaje, puede que observes un comportamiento extraño. En el ejemplo siguiente hay una caja. Hemos asignado a la caja interna un margen ({{cssxref ("margin")}}) del 10% y una área de relleno ({{cssxref ("padding")}}) del 10%. El área de relleno y el margen de la parte superior e inferior de la caja son del mismo tamaño que el margen de la izquierda y de la derecha.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}

+ +

Podrías esperar, por ejemplo, que el porcentaje de los márgenes superior e inferior sea un porcentaje de la altura del elemento, y el porcentaje de los márgenes izquierdo y derecho sea un porcentaje del ancho del elemento. Sin embargo, ¡este no es el caso!

+ +

Cuando utilizas el margen y el área de relleno en porcentajes, el valor se calcula a partir del tamaño en línea del elemento, es decir, el ancho del elemento cuando se trabaja en un lenguaje horizontal. En nuestro ejemplo, todos los márgenes y el área de relleno son del 10% del ancho del elemento. Esto significa que puedes tener márgenes y relleno alrededor de la caja del mismo tamaño. Este es un hecho que vale la pena recordar si utilizas porcentajes de esta manera.

+ +

Tamaños mínimo y máximo

+ +

Además de asignar a las cosas un tamaño fijo, podemos pedirle al CSS que asigne a un elemento un tamaño mínimo o máximo. Si tienes una caja que puede contener una cantidad variable de contenido y deseas que tenga siempre al menos una altura determinada, puedes establecer la propiedad {{cssxref ("min-height")}}. La caja siempre tendrá al menos esta altura, pero crecerá si hay más contenido del que la caja puede contener.

+ +

En el ejemplo siguiente puedes ver dos cuadros, ambos con una altura definida de 150 píxeles. La caja de la izquierda tiene 150 píxeles de alto; la de la derecha contiene contenido que necesita más espacio, por lo que su tamaño supera los 150 píxeles.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}

+ +

Esto es muy útil para trabajar con cantidades de contenido variables y asimismo evitar desbordamientos.

+ +

Un uso común de {{cssxref ("max-width")}} es para reducir el tamaño de las imágenes si no hay suficiente espacio para mostrarlas en su ancho intrínseco, al asegurarte de que no serán mayores que ese ancho.

+ +

A modo de ejemplo, si para una imagen tienes que establecer width: 100% y su ancho intrínseco es menor que su contenedor, la imagen se verá obligada a expandirse y agrandarse, y se pixelará. Si su ancho intrínseco es mayor que su contenedor, se desbordará. No es probable que desees que suceda ninguno de estos casos.

+ +

Si en lugar de ello usas max-width: 100%, la imagen puede encogerse con respecto a su tamaño intrínseco, pero no se agranda más allá del 100% de su tamaño.

+ +

En el ejemplo siguiente hemos utilizado la misma imagen dos veces. La primera imagen tiene width: 100% y está en un contenedor que es más grande, por lo que se extiende hasta el ancho del contenedor. La segunda imagen tiene max-width: 100% y, por lo tanto, no se estira para llenar el recipiente. La tercera caja contiene la misma imagen de nuevo, también con max-width: 100%; pero en este caso puedes ver cómo se ha reducido para encajar en la caja.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}

+ +

Esta técnica se utiliza para dar a las imágenes una respuesta adaptativa, de modo que se reduzcan adecuadamente cuando se visualizan en un dispositivo más pequeño. Sin embargo, no es conveniente usar esta técnica para cargar imágenes demasiado grandes y luego reducirlas en el navegador. Las imágenes deben tener el tamaño adecuado, no deben ser más grandes de lo que sea necesario para el tamaño más grande que se muestran en el diseño. Descargar imágenes muy grandes ralentizará tu sitio y puede costarles más dinero a los usuarios si tienen una conexión tarifada.

+ +
+

Nota: Obtén más información sobre las técnicas adaptativas para las imágenes.

+
+ +

Unidades de ventana gráfica

+ +

La ventana gráfica es el área visible de tu página en el navegador que utilizas para ver un sitio, y también tiene un tamaño. En CSS hay unidades que asociadas con el tamaño de la ventana gráfica: las unidades vw para el ancho y vh para la altura. Con estas unidades puedes establecer tamaños relativos a la ventana gráfica del usuario.

+ +

1vh es igual al 1% de la altura de visualización, y 1vw es igual al 1% de la anchura. Puedes usar estas unidades para dimensionar cajas, pero también texto. En el ejemplo siguiente hay un cuadro que tiene un tamaño de 20vh y 20vw. La caja contiene una letra A, a la que se le ha dado un valor para {{cssxref ("font-size")}} de 10vh.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}

+ +

Si cambias los valores vh y vw, cambia el tamaño de la caja o de la letra; cambiar el tamaño de la ventana gráfica también cambia esos tamaños porque están dimensionados en relación con el de la ventana gráfica. Para ver el cambio del ejemplo cuando cambias el tamaño de la ventana gráfica, debes cargar el ejemplo en una ventana nueva del navegador, que pueda cambiar de tamaño (ya que tu ventana gráfica es el <iframe> incrustado que contiene el ejemplo que se muestra arriba). Abre el ejemplo, cambia el tamaño de la ventana del navegador y observa lo que ocurre con el tamaño de la caja y el texto.

+ +

Cambiar los tamaños según la ventana gráfica puede ser útil en tus diseños. Por ejemplo, si deseas mostrar una sección principal a pantalla completa antes del resto del contenido, haz que esa parte de tu página de 100vh empuje el resto del contenido por debajo de la ventana gráfica, de modo que solo aparezca cuando desplacen los contenidos del documento con la barra de desplazamiento.

+ +

Resumen

+ +

Este artículo te ha dado un resumen de algunos problemas clave con los que puedes encontrarte al dimensionar cosas en la web. Cuando llegues al artículo Compaginar con CSS, el tamaño va a ser un aspecto muy importante para dominar los diferentes métodos de compaginación, por lo que, antes de continuar, vale la pena comprender los conceptos que hemos expuesto en este artículo.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. Cascada y herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de cajas
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/the_box_model/index.html b/files/es/learn/css/building_blocks/the_box_model/index.html new file mode 100644 index 0000000000..dbc0d644f8 --- /dev/null +++ b/files/es/learn/css/building_blocks/the_box_model/index.html @@ -0,0 +1,343 @@ +--- +title: El modelo de caja +slug: Learn/CSS/Building_blocks/El_modelo_de_caja +translation_of: Learn/CSS/Building_blocks/The_box_model +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
+ +

Todo en CSS tiene una caja alrededor, y comprender estas cajas es clave para poder crear diseños con CSS o para alinear elementos con otros elementos. En este artículo, echaremos un vistazo más de cerca al modelo de cajas en CSS con el que vas a poder crear diseños de compaginación más complejos con una comprensión de cómo funciona y la terminología relacionada.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de cómo trabajar con archivos, conocimientos básicos de HTML (véase Introducción al HTML) y nociones de CSS (véase Primeros pasos con CSS).
Objetivo:Aprender sobre el modelo de cajas en CSS, en qué consiste el modelo de cajas y cómo cambiar al modelo alternativo.
+ +

Cajas en bloque y en línea

+ +

En CSS, en general, hay dos tipos de cajas: cajas en bloque y cajas en línea. Estas características se refieren al modo como se comporta la caja en términos de flujo de página y en relación con otras cajas de la página:

+ +

Si una caja se define como un bloque, se comportará de las maneras siguientes:

+ + + +

A menos que decidamos cambiar el tipo de visualización a en línea, elementos como los encabezados (por ejemplo, <h1>) y todos los elementos <p> usan por defecto block como tipo de visualización externa.

+ +

Si una caja tiene una visualización externa de tipo inline, entonces:

+ + + +

El elemento <a>, que se utiliza para los enlaces, y los elementos <span>, <em> y <strong> son ejemplos de elementos que se muestran en línea por defecto.

+ +

El tipo de caja que se aplica a un elemento está definido por los valores de propiedad {{cssxref ("display")}}, como block y inline, y se relaciona con el valor externo (outer) de visualización (display).

+ +

Aparte: tipos de visualización interna y externa

+ +

En este punto, será mejor que también expliquemos los tipos de visualización interna y externa. Como se mencionó anteriormente, las cajas en CSS tienen un tipo de visualización externa, que define si se trata de una caja en bloque o en línea.

+ +

Sin embargo, las cajas también tienen un tipo de visualización interna, que determina cómo se disponen los elementos dentro de esa caja. De forma predeterminada, los elementos dentro de una caja se presentan en flujo normal, lo que significa que se comportan como otros elementos de tipo en bloque o en línea (como se explicó anteriormente).

+ +

Sin embargo, podemos cambiar el tipo de visualización interna utilizando valores de display, como flex. Si en un elemento establecemos display: flex;, el tipo de visualización externa es de tipo bloque (block), pero el tipo de visualización interna cambia a flexible (flex). Cualquier elemento que sea hijo directo de esta caja pasará a comportarse como un elemento de tipo flex, de acuerdo con las reglas que se establecen en la especificación de Flexbox, tema que veremos más adelante.

+ +
+

Nota: Para obtener más información acerca de los valores de visualización y el modo como funcionan las cajas en las disposiciones en bloque y en línea, echa un vistazo a la guía Disposiciones en bloque y en línea de MDN.

+
+ +

A medida que vayas aprendiendo más detalles sobre el diseño CSS, te irás encontrando con el valor flex y con otros valores internos que puedan presentar tus cajas, por ejemplo, grid.

+ +

Sin embargo, la disposición en bloque y en línea es la forma predeterminada cómo se comportan las cosas en la web; como ya dijimos, a veces esto se conoce como flujo normal, porque nuestras cajas se dispondrán en bloque o en línea, si no reciben ninguna otra instrucción.

+ +

Ejemplos de diferentes tipos de visualización

+ +

Sigamos adelante y veamos algunos ejemplos. A continuación tenemos tres elementos HTML diferentes, todos con visualización externa de tipo block. El primero es un párrafo, que tiene un borde añadido con CSS. El navegador representa esto como una caja en bloque, por lo que el párrafo comienza en una línea nueva y se expande por todo el ancho disponible.

+ +

El segundo es una lista, que se presenta usando display: flex. Esto establece una disposición flexible para los elementos que están dentro del contenedor; sin embargo, la lista en sí misma es una caja que se comporta en bloque y, como el párrafo, se expande por todo el ancho del contenedor y fuerza un salto de línea al llegar al final de línea.

+ +

Debajo hay un párrafo a nivel de bloque, dentro del cual hay dos elementos <span>. Estos elementos normalmente serían de tipo inline; sin embargo, uno de los elementos tiene una clase de bloque, y lo hemos establecido como display: block.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} 

+ +

Podemos ver cómo se comportan los elementos inline en el ejemplo siguiente. Los elementos <span> del primer párrafo están en línea de manera predeterminada y, por lo tanto, no fuerzan ningún salto de línea.

+ +

También hay un elemento <ul> que se establece como display: inline-flex, que crea una caja con un comportamiento de tipo en línea alrededor de algunos elementos de tipo flex.

+ +

Finalmente, hay dos párrafos configurados con display: inline. El contenedor flexible en línea y los párrafos fluyen todos juntos en línea, en lugar de dividirse en líneas nuevas como lo harían si se mostraran como elementos de bloque.

+ +

En el ejemplo puedes cambiar display: inline por display: block o display: inline-flex y por display: flex para alternar entre estos modos de visualización.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} 

+ +

En artículos posteriores encontrarás cosas como el diseño flexible. El aspecto clave a recordar aquí es que cambiar el valor de la propiedad display puede cambiar entre el modo de visualización exterior en bloque y en línea de una caja, que cambia la forma en que se presenta junto con otros elementos en la disposición en pantalla.

+ +

En el resto de este artículo, nos concentraremos en el tipo de visualización externa.

+ +

¿Qué es el modelo de cajas CSS?

+ +

El modelo de cajas CSS completo se aplica a cajas que presentan comportamiento en bloque; las cajas con comportamiento en línea solo usan una parte del comportamiento definido en el modelo de cajas. El modelo define cómo funcionan juntas las diferentes partes de una caja (margen, borde, relleno y contenido) para crear una caja que puedas ver en tu página. Para complicarlo un poco más, hay un modelo de cajas estándar y un modelo de cajas alternativo.

+ +

Partes de una caja

+ +

Al hacer una caja de tipo bloque en CSS tenemos los elementos siguientes:

+ + + +

El diagrama siguiente muestra estas capas:

+ +

Diagrama del modelo de cajas

+ +

El modelo de cajas CSS estándar

+ +

En el modelo de cajas estándar, cuando estableces los atributos width y height para una caja, defines el ancho y el alto del contenido de la caja. Cualquier área de relleno y borde se añade a ese ancho y alto para obtener el tamaño total que ocupa la caja. Esto se muestra en la imagen que encontrarás a continuación.

+ +

Si suponemos que la caja tiene el CSS siguiente, que establece los valores para las propiedades width, height, margin, border, y padding:

+ +
.box {
+  width: 350px;
+  height: 150px;
+  margin: 10px;
+  padding: 25px;
+  border: 5px solid black;
+}
+
+ +

El espacio que ocupa nuestra caja usando el modelo de cajas estándar será en realidad de 410 px (350 + 25 + 25 + 5 + 5); y su altura, de 210 px (150 + 25 + 25 + 5 + 5), porque el área de relleno y el borde se añaden al ancho que se utiliza para el contenido de la caja.

+ +

Mostrar el tamaño de la caja cuando se usa el modelo de cajas estándar.

+ +
+

Nota: El margen no se cuenta para el tamaño real de la caja; por supuesto, afecta al espacio total que la caja ocupa en la página, pero solo al espacio de fuera de la caja. El área de la caja se termina en el borde, no se extiende hasta el margen.

+
+ +

El modelo de cajas CSS alternativo

+ +

Podrías pensar que es más bien incómodo tener que sumar el borde y el área de relleno para obtener el tamaño real de la caja, ¡y tienes razón! Por este motivo, CSS introdujo un modelo de caja alternativo algún tiempo después del modelo de cajas estándar. Con este modelo, cualquier ancho es el ancho de la caja visible en la página, por lo tanto, el ancho del área de contenido es ese ancho menos el ancho para el relleno y el borde. El mismo CSS que hemos usado antes daría entonces el resultado siguiente (ancho = 350 px, altura = 150 px).

+ +

Mostrar el tamaño de la caja cuando se usa el modelo de cajas alternativo.

+ +

Por defecto, los navegadores usan el modelo de cajas estándar. Si deseas activar el modelo de cajas alternativo para un elemento, hazlo configurando box-sizing: border-box. Con ello, le dices al navegador que tome como el borde de la caja el área definida por cualquier tamaño que establezcas.

+ +
.box {
+  box-sizing: border-box;
+}
+ +

Si quieres que todos tus elementos usen el modelo de cajas alternativo (opción común entre los desarrolladores) debes establecer la propiedad box-sizing en el elemento <html>. Luego debes configurar todos los demás elementos para que hereden ese valor, como se ve en el fragmento de código siguiente. Si deseas comprender qué hay detrás, consulta el artículo de CSS-Tricks sobre el tamaño de las cajas.

+ +
html {
+  box-sizing: border-box;
+}
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+ +
+

Nota: Un dato curioso es que Internet Explorer usaba por defecto el modelo de cajas alternativo, y no disponía de ningún mecanismo para cambiarlo.

+
+ +

Jugar con los modelos de cajas

+ +

En el ejemplo siguiente puedes ver dos cajas. Ambas tienen una clase .box, lo que les da los mismos atributos width, height, margin, border y padding. La única diferencia es que la segunda caja se ha configurado para utilizar el modelo de cajas alternativo.

+ +

¿Puedes cambiar el tamaño de la segunda caja (añadiendo CSS a la clase .alternate) para que su anchura y altura coincidan con las de la primera caja?

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} 

+ +
+

Nota: Puedes encontrar la solución aquí.

+
+ +

Utilizar las DevTools del navegador para ver el modelo de cajas

+ +

Las herramientas del desarrollador de tu navegador pueden facilitar la comprensión del modelo de cajas. Si inspeccionas un elemento con las DevTools de Firefox, puedes ver el tamaño del elemento más su margen, área de relleno y borde. Inspeccionar un elemento de esta manera es un modo excelente de descubrir si tu caja es en realidad del tamaño que crees que es.

+ +

Inspeccionar el modelo de cajas de un elemento utilizando Firefox DevTools

+ +

Márgenes, relleno y bordes

+ +

Ya has visto las propiedades {{cssxref ("margin")}}, {{cssxref ("padding")}} y {{cssxref ("border")}} que usamos en el ejemplo anterior. Las propiedades que hemos usado en ese ejemplo son propiedades abreviadas y nos permiten establecer los cuatro lados de la caja a la vez. Estas propiedades abreviadas también tienen propiedades sin abreviar equivalentes, que permiten tener control sobre los diferentes lados de la caja de forma individual.

+ +

Vamos a explorar estas propiedades más detalladamente.

+ +

Margen

+ +

El margen es un espacio invisible que hay alrededor de la caja. Aleja el resto de elementos de la caja. Los márgenes pueden tener valores positivos o negativos. Establecer un margen negativo para un lado de tu caja puede hacer que se superponga con otros elementos de la página. Tanto si utilizas el modelo de cajas estándar como el alternativo, el margen siempre se añade después de haber calculado el tamaño de la caja que se ve.

+ +

Podemos controlar todos los márgenes de un elemento a la vez usando la propiedad {{cssxref ("margin")}}, o cada lado individualmente usando las propiedades equivalentes sin abreviar:

+ + + +

En el ejemplo siguiente, cambia los valores de margen para ver cómo se empuja la caja debido al espacio que el margen crea o se elimina (si es un margen negativo) entre este elemento y el elemento que lo contiene.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} 

+ +

Colapso del margen

+ +

Un punto clave a la hora de entender los márgenes es el concepto de colapso del margen. Si tienes dos elementos cuyos márgenes se tocan, esos márgenes se combinan para convertirse en un solo margen, cuyo tamaño es el del margen más grande.

+ +

En el ejemplo siguiente hay dos párrafos. El párrafo superior tiene un atributo margin-bottom de 50 píxeles. El segundo párrafo tiene un atributo margin-top de 30 píxeles. Los márgenes colapsan, por lo que el margen real entre las cajas es de 50 píxeles, y no el total de ambos márgenes.

+ +

Pruébalo ajustando el atributo margin-top del segundo párrafo a 0. El margen visible entre los dos párrafos no cambiará, sino que conservará los 50 píxeles fijados en el atributo bottom-margin del primer párrafo.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} 

+ +

Hay una serie de reglas que establecen cuándo los márgenes colapsan y cuándo no. Para obtener más información, consulta la página web sobre entender el colapso de márgenes. Por ahora solo debes recordar que el colapso de los márgenes es algo que puede suceder. Si creas un espacio con márgenes y no obtienes el espacio que esperas, probablemente es que se haya producido algún colapso de márgenes.

+ +

Bordes

+ +

El borde se dibuja entre el margen y el área de relleno de una caja. Si utilizas el modelo de cajas estándar, el tamaño del borde se añade a los elementos width y height que establecen el alto y el ancho de la caja. Si utilizas el modelo de cajas alternativo, el tamaño del borde reduce el tamaño de la caja de contenido, porque ocupa una parte del alto y el ancho disponibles.

+ +

Hay una gran cantidad de propiedades que sirven para aplicar estilo a los bordes: hay cuatro bordes y cada borde tiene un estilo, un ancho y un color que podemos modificar.

+ +

Puedes establecer el ancho, el estilo o el color de los cuatro bordes a la vez utilizando la propiedad {{cssxref ("border")}}.

+ +

Para establecer las propiedades de cada lado de forma individual, puedes utilizar:

+ + + +

Para establecer el ancho, el estilo o el color de todos los lados, usa lo siguiente:

+ + + +

Para establecer el ancho, el estilo o el color de un solo lado, puedes usar una de las propiedades no abreviadas:

+ + + +

En el ejemplo siguiente, hemos utilizado varios ejemplos de la lista anterior para crear bordes. Juega con las diferentes propiedades para comprobar que entiendes cómo funcionan. Las páginas de MDN sobre las propiedades de los bordes te proporcionan información sobre los diferentes estilos entre los que puedes elegir para los bordes.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} 

+ +

Relleno

+ +

El relleno se encuentra entre el borde y el área de contenido. A diferencia de los márgenes, el relleno no puede tomar valores negativos, por lo que el valor debe ser 0 o positivo. Cualquier fondo aplicado a tu elemento se mostrará detrás del área de relleno y, generalmente, se usa para mantener el contenido alejado del borde.

+ +

Podemos controlar el área de relleno para todos los lados de un mismo elemento usando la propiedad {{cssxref ("padding")}}, o para cada lado uno de los lados usando las propiedades equivalentes:

+ + + +

Si cambias los valores para el elleno en la clase .box del ejemplo siguiente, puedes ver que cambia dónde comienza el texto en relación con la caja.

+ +

También puedes cambiar el relleno en la clase .container, que abrirá el espacio entre el contenedor y la caja. El área de relleno se puede cambiar para cualquier elemento y abrirá espacio entre su borde y lo que esté dentro del elemento.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} 

+ +

El modelo de cajas y las cajas en línea

+ +

Todo lo anterior se aplica por completo a las cajas en bloque. Algunas de las propiedades también pueden aplicarse a las cajas en línea, como las que crea un elemento <span>.

+ +

En el ejemplo siguiente hay un elemento <span> dentro de un párrafo al que hemos aplicado las propiedades width, height, margin, border, y padding Puedes ver que la anchura y la altura se ignoran. Se respetan el margen, el relleno y el borde, pero no cambian la relación de otro contenido con respecto a nuestra caja en línea, por lo que el relleno y el borde se superponen a otras palabras en el párrafo.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} 

+ +

El uso de display: inline-block

+ +

Hay un valor especial de display que proporciona un punto medio entre inline y block. Esto es útil para situaciones en las que no deseas que un elemento fuerce un salto de línea, pero sí deseas que se respeten las propiedades width y height para evitar superposiciones como la que se ve arriba.

+ +

Un elemento con display: inline-block conforma un subconjunto de los elementos en bloque que ya conocemos:

+ + + +

Sin embargo, no se fuerza un salto de línea, y solo se hace más grande que su contenido si añades las propiedades width y height explícitamente.

+ +

En el ejemplo siguiente hemos añadido display: inline-block a nuestro elemento <span>. Cámbialo por display: block o elimina la línea para ver la diferencia entre ambos modelos de visualización.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} 

+ +

Esto puede ser útil cuando deseas dar a un enlace un área de impacto más grande añadiendo padding. <a> es un elemento en línea como <span>; puedes usar display: inline-block para configurar el área de relleno para facilitar al usuario hacer clic en el enlace.

+ +

Esto se ve con bastante frecuencia en las barras de navegación. La navegación siguiente se muestra en una fila usando flexbox y hemos añadido una área de relleno al elemento <a> porque queremos poder cambiar su color de fondo (background-color) cuando se pasa el ratón por encima de <a>. El área de relleno parece superponerse al borde del elemento <ul>. Esto se debe a que <a> es un elemento en línea.

+ +

Añade display: inline-block a la regla con el selector .links-list a y verás cómo se soluciona este problema, al hacer que otros elementos respeten el área de relleno.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} 

+ +

Pon a prueba tus habilidades

+ +

Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más relevante? Encontrarás más pruebas para verificar que has retenido esa información en Test your skills: The Box Model.

+ +

Resumen

+ +

Eso es lo que hay que entender sobre el modelo de cajas. Es posible que en el futuro desees volver a este artículo si alguna vez te lías con los tamaños de las cajas en la disposición de tu página web.

+ +

En el artículo siguiente veremos cómo se pueden usar los fondos y bordes para hacer que tus simples cajas presenten un aspecto más interesante.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. Cascada y herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de cajas
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/valores_y_unidades_css/index.html b/files/es/learn/css/building_blocks/valores_y_unidades_css/index.html deleted file mode 100644 index 4470746bc8..0000000000 --- a/files/es/learn/css/building_blocks/valores_y_unidades_css/index.html +++ /dev/null @@ -1,392 +0,0 @@ ---- -title: Valores y unidades CSS -slug: Learn/CSS/Building_blocks/Valores_y_unidades_CSS -translation_of: Learn/CSS/Building_blocks/Values_and_units ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
- -

Todas las propiedades que se utilizan en CSS tienen un valor o un conjunto de valores que esa propiedad admite, y echar un vistazo a cualquier página de propiedades en MDN te ayudará a comprender qué valores admite una propiedad en particular. En este artículo veremos algunos de los valores y unidades más comunes en uso.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con el CSS).
Objetivo:Conocer los diferentes tipos de valores y unidades que admiten las propiedades CSS.
- -

¿Qué es un valor CSS?

- -

En las especificaciones CSS y en las páginas de propiedades de este proyecto MDN, podrás detectar los valores porque estarán escritos entre corchetes angulares, como <color> o <length>. Cuando veas que el valor <color> es válido para una propiedad en particular, significa que para esa propiedad puedes usar como valor cualquier color válido de entre los que se enumeran en la página de referencia de la propiedad <color>.

- -
-

Nota: También verás valores CSS denominados tipos de datos. Los términos son básicamente intercambiables: cuando veas algo en CSS denominado ‘tipo de datos’, en realidad es solo una forma elegante de decir ‘valor’.

-
- -
-

Nota: Sí, hay una tendencia de denotar los valores CSS entre corchetes angulares, para diferenciarlos de las propiedades CSS (por ejemplo, la propiedad {{cssxref ("color")}} con respecto al tipo de dato <color>). Aunque podría generarte confusión entre los tipos de datos CSS y los elementos HTML, porque ambos usan corchetes angulares, es poco probable porque se usan en contextos muy diferentes.

-
- -

En el ejemplo siguiente hemos establecido el color de nuestro encabezado con una palabra clave y el fondo con la función rgb():

- -
h1 {
-  color: black;
-  background-color: rgb(197,93,161);
-} 
-
- -

Un valor en CSS es una forma de definir una colección de subvalores admitidos. Esto significa que si ves <color> como válido, no necesitas preguntarte cuáles de los diferentes tipos de valor de color puedes usar: palabras clave, valores hexadecimales, funciones rgb(), etc. Puedes usar cualquier valor <color> disponible siempre que tu navegador lo admita. La página de MDN te dará información sobre lo que admite cada navegador para cada valor. Por ejemplo, puedes ver que en la sección de compatibilidad de navegadores de la página para <color> se enumeran diferentes tipos de valores de color y los navegadores que los admiten.

- -

Echemos un vistazo a algunos de los tipos de valores y unidades con los que puedes encontrar con frecuencia, con ejemplos para que puedas probar diferentes valores posibles.

- -

Números, longitudes y porcentajes

- -

Al utilizar CSS te puedes encontrar con varios tipos de datos numéricos. Todos los siguientes están clasificados como tipos de datos numéricos:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Tipo de datosDescripción
<integer>Un <integer> es un número entero, como 1024 o -55.
<number>Un <number> representa un número decimal; puede tener o no un punto de separación decimal con un componente fraccionario, por ejemplo: 0,255, 128 o -1,2.
<dimension>Una <dimension> es un <number> con una unidad asociada, por ejemplo: 45deg (grados), 5s (segundos) o 10px (píxeles). <dimension> es una categoría general que incluye los tipos <length>, <angle>, <time> y <resolution>.
<percentage>Un <percentage> representa una fracción de algún otro valor, por ejemplo, 50%. Los valores de porcentaje siempre son relativos a otra cantidad, por ejemplo, la longitud de un elemento es relativa a la longitud de su elemento padre.
- -

Longitudes

- -

El tipo numérico con el que te vas a encontrar con mayor frecuencia es <length>, por ejemplo, 10px (píxeles) o 30em. En CSS se utilizan dos longitudes diferentes: relativa y absoluta. Es importante conocer la diferencia para entender qué dimensiones van a tener las cosas.

- -

Unidades de longitud absoluta

- -

Todas las unidades siguientes son unidades de longitud absoluta: no son relativas a nada más y en general se considera que siempre tienen el mismo tamaño.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UnidadNombreEquivale a
cmCentímetros1cm = 96px/2,54
mmMilímetros1mm = 1/10 de 1cm
QCuartos de milímetros1Q = 1/40 de 1cm
inPulgadas1in = 2,54cm = 96px
pcPicas1pc = 1/16 de 1in
ptPuntos1pt = 1/72 de 1in
pxPíxeles1px = 1/96 de 1in
- -

La mayoría de estos valores son más útiles cuando se usan en una salida en formato impreso que en la salida de pantalla. Por ejemplo, normalmente no usamos cm (centímetros) en pantalla. El único valor que usarás de forma frecuente es px (píxeles).

- -

Unidades de longitud relativa

- -

Las unidades de longitud relativa son relativas a algo más, por ejemplo, al tamaño de letra del elemento principal o al tamaño de la ventana gráfica. La ventaja de usar unidades relativas es que con una planificación cuidadosa puedes lograr que el tamaño del texto u otros elementos escalen en relación con todo lo demás en la página. En la tabla siguiente se enumeran algunas de las unidades más útiles para el desarrollo web.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UnidadRelativa a
emTamaño de letra del elemento padre, en el caso de propiedades tipográficas como {{cssxref("font-size")}}, y tamaño de la fuente del propio elemento en el caso de otras propiedades, como {{cssxref("width")}}.
exAltura x de la fuente del elemento.
chLa medida de avance (ancho) del glifo "0" de la letra del elemento.
remTamaño de la letra del elemento raíz.
lhAltura de la línea del elemento.
vw1% del ancho de la ventana gráfica.
vh1% de la altura de la ventana gráfica.
vmin1% de la dimensión más pequeña de la ventana gráfica.
vmax1% de la dimensión más grande de la ventana gráfica.
- -

Un ejemplo de análisis

- -

En el ejemplo siguiente puedes ver cómo se comportan algunas unidades de longitud relativa y absoluta. La primera caja tiene un ancho ({{cssxref ("width")}}) establecido en píxeles. Como unidad absoluta, este ancho será siempre el mismo aunque lo demás cambie.

- -

La segunda caja tiene un ancho establecido en unidades vw (ancho de ventana). Este valor es relativo al ancho de la ventana gráfica, por lo que 10vw es el 10 por ciento del ancho de la ventana gráfica. Si cambiases el ancho de la ventana de tu navegador, el tamaño de la caja cambiaría. Sin embargo, esto no te va a funcionar porque este ejemplo se ha incrustado en la página usando <iframe>. Para verlo en acción debes probar el ejemplo después de abrirlo en una pestaña independiente de tu navegador.

- -

La tercera caja utiliza unidades em. Son unidades relativas al tamaño de la letra. Hemos establecido un tamaño de fuente de 1em en el contenido {{htmlelement ("div")}}, que tiene una clase .wrapper. Si cambias este valor a 1.5em, verás que el tamaño de letra de todos los elementos aumenta, pero solo se amplía el ancho en el último elemento, porque el ancho es relativo a ese tamaño de letra.

- -

Después de seguir las instrucciones anteriores, juega un poco más con los valores para ver qué obtienes.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

- -

ems y rems

- -

em y rem son las dos longitudes relativas que es probable que encuentres con mayor frecuencia al cambiar el tamaño de cualquier cosa, de cajas a texto. Vale la pena entender cómo funcionan y las diferencias entre ellos, especialmente cuando comienzas a abordar temas más complejos como aplicar estilos a texto o compaginar con CSS. El ejemplo siguiente te proporciona una muestra.

- -

El HTML es un conjunto de listas anidadas: hay tres listas en total y ambos ejemplos tienen el mismo HTML. La única diferencia es que el primero tiene una clase ems y el segundo una clase rems.

- -

Para empezar, configuramos un tamaño de letra de 16px en el elemento <html>.

- -

En definitiva, la unidad em significa «el tamaño de letra de mi elemento padre». Los elementos {{htmlelement ("li")}} dentro de un elemento {{htmlelement ("ul")}} con una clase de ems toman el tamaño con respecto a su elemento padre. Por lo tanto, en cada nivel de anidamiento sucesivo, el tamaño de letra aumenta progresivamente, porque en cada uno el tamaño de letra está establecido en 1.3em (1,3 veces el tamaño de letra de su elemento padre).

- -

En definitiva, la unidad rem significa «el tamaño de letra del elemento raíz». (‘rem’ viene de «root em»). Los elementos {{htmlelement ("li")}} dentro de un elemento {{htmlelement ("ul")}} con una clase de rems toman su tamaño del elemento raíz (<html>). Esto significa que el tamaño de letra no aumenta en cada nivel sucesivo de anidamiento.

- -

Sin embargo, si cambias el atributo font-size de <html> en el CSS, verás que todo lo demás cambia en relación con él, tanto la letra cuyo tamaño está especificado en unidades rem como la que lo está en unidades em.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} 

- -

Porcentajes

- -

En muchos casos, un porcentaje es tratado de la misma manera que una longitud. Lo que sucede con los porcentajes es que siempre se establecen en relación con otro valor. Por ejemplo, si estableces el atributo font-size de un elemento como un porcentaje, será un porcentaje del font-size del elemento padre. Si usas un porcentaje para un valor width, será un porcentaje del atributo width del elemento padre.

- -

En el ejemplo siguiente, las dos cajas con el tamaño especificado en unidades de porcentaje y las dos cajas con el tamaño especificado en unidades de píxel tienen los mismos nombres de clase. En ambos conjuntos de cajas, los anchos de las cajas son de 200 píxeles y de 40%, respectivamente.

- -

La diferencia es que el segundo conjunto de dos cajas está dentro de un contenedor que tiene 400 píxeles de ancho. La segunda caja de 200 px de ancho tiene el mismo ancho que la primera, pero la segunda caja de 40% ahora es el 40% de 400 px, ¡mucho más estrecha que la primera!

- -

Cambia el ancho del contenedor o el valor de porcentaje para ver cómo funciona.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 

- -

El ejemplo siguiente tiene tamaños de letra establecidos en porcentajes. Cada elemento <li> tiene un atributo font-size del 80%, por lo tanto, los elementos de la lista anidada se vuelven progresivamente más pequeños a medida que heredan su tamaño del elemento padre.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} 

- -

Observa que aunque muchos valores admiten unidades de longitud o porcentaje, algunos solo admiten unidades de longitud. Puedes ver qué valores admite cada propiedad en las páginas de referencia correspondientes del proyecto MDN. Si el valor admitido incluye <length-percentage>, puedes usar una unidad de longitud o un porcentaje. Si el valor admitido solo incluye <length>, no es posible utilizar un porcentaje.

- -

Números

- -

Algunos valores aceptan números sin ninguna unidad asociada. Un ejemplo de una propiedad que acepta un número sin unidades es la propiedad opacity, que controla la opacidad de un elemento (cuán transparente es). Esta propiedad admite un número entre 0 (totalmente transparente) y 1 (totalmente opaco).

- -

En el ejemplo siguiente, asigna al valor de opacity diversos valores decimales entre 0 y 1 para ver cómo la caja y su contenido cambian su opacidad.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} 

- -
-

Nota: Cuando en CSS utilizas un número como valor, no debe estar entre comillas.

-
- -

Color

- -

En CSS hay muchas formas de especificar el color, algunas de las cuales se implementaron más recientemente que otras. En todas partes en CSS se pueden usar los mismos valores de color, tanto para especificar el color del texto como el color de fondo, o de cualquier otra cosa.

- -

El sistema de colores estándar disponible en los ordenadores modernos es de 24 bits, lo que permite visualizar aproximadamente 16,7 millones de colores distintos a partir de una combinación de diferentes canales de rojo, verde y azul con 256 valores diferentes por canal (256 x 256 x 256 = 16.777.216). Echemos un vistazo a algunas de las formas en que podemos especificar colores en CSS.

- -
-

Nota: En este artículo vamos a ver los métodos comunes para especificar colores que admiten los navegadores; hay otros métodos no tan comunes que no admiten todos los navegadores.

-
- -

Palabras clave para los colores

- -

Muy a menudo, en los ejemplos de este artículo o en cualquier otra página de MDN, verás que se utilizan las palabras clave para los colores, ya que son una forma simple y comprensible de especificar colores. Hay una multitud de estas palabras clave, ¡algunas de las cuales tienen nombres de lo más curiosos! Puedes ver una lista completa en la página para el valor <color>.

- -

Juega con diferentes valores de color en los ejemplos en vivo que encontrarás a continuación, para adquirir una idea más clara de cómo funcionan.

- -

Los valores hexadecimales RGB

- -

El siguiente tipo de valores de color que es probable que encuentres son los códigos hexadecimales. Cada valor hexadecimal consiste en un símbolo de hashtag/almohadilla (#) seguido de seis cifras hexadecimales, cada una de las cuales puede tomar uno de los 16 valores entre el 0 y la f (que representa el 15), por ejemplo: 0123456789abcdef. Cada par de cifras representa uno de los canales (rojo, verde y azul) y nos permite especificar cualesquiera de los 256 valores disponibles para cada uno (16 x 16 = 256).

- -

Estos valores son un poco más complejos y menos fáciles de entender, pero son mucho más versátiles que las palabras clave: puedes usar valores hexadecimales para representar cualquier color que desees usar en tu combinación de colores.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} 

- -

Una vez más, cambia los valores para ver cómo varían los colores.

- -

Valores RGB y RGBA

- -

El tercer esquema del que hablaremos aquí es RGB. Un valor RGB es una función rgb() que recibe tres parámetros que representan los valores de los canales rojo, verde y azul del color, de modo muy similar a los valores hexadecimales. La diferencia con RGB es que cada canal está representado no por dos dígitos hexadecimales, sino por un número decimal entre el 0 y el 255, lo que de algún modo resulta algo más fácil de entender.

- -

Vamos a reescribir nuestro último ejemplo para utilizar colores RGB:

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 

- -

También puedes usar colores RGBA: estos funcionan exactamente de la misma manera que los colores RGB, por lo que puedes usar cualquier valor RGB; sin embargo, hay un cuarto valor que representa el canal alfa del color, que controla la opacidad. Si estableces este valor en 0, el color será completamente transparente, mientras que en 1 será completamente opaco. Los valores intermedios le confieren diferentes niveles de transparencia.

- -
-

Nota: Establecer un canal alfa en un color representa una diferencia clave para usar la propiedad {{cssxref ("opacity")}} que vimos anteriormente. Cuando usas la opacidad, el elemento y todo lo que contiene es opaco, mientras que cuando usas colores RGBA, solo son opacos los que especificas.

-
- -

En el ejemplo siguiente hemos añadido una imagen de fondo al bloque que contiene nuestras cajas de color. También hemos configurado las cajas para que tengan diferentes valores de opacidad: observa que el fondo se muestra más cuanto menor es el valor del canal alfa.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

- -

En este ejemplo, cambia los valores del canal alfa y observa cómo afecta a la salida de color.

- -
-

Nota: En algún momento, los navegadores modernos se actualizaron para que rgba() y rgb(), y hsl() y hsla() (ver más abajo) se convirtieran en alias puros el uno del otro y comenzaran a comportarse exactamente igual. Así, por ejemplo, tanto rgba() como rgb() admiten colores con y sin valores de canal alfa. Cambia el rgba() del ejemplo anterior por rgb() y observa si los colores aún funcionan. El estilo que uses depende de ti, pero separar las definiciones de los colores transparentes y las de los no transparentes con el uso de funciones diferentes mejora la ejecución de los navegadores y puede actuar como un indicador visual de dónde se definen colores transparentes en tu código.

-
- -

Los valores HSL y HSLA

- -

Un poco menos compatible que RGB es el modelo de color HSL (no compatible con las antiguas versiones de Internet Explorer), que se implementó después de mucha insistencia por parte de los diseñadores. En lugar de los valores rojo, verde y azul, la función hsl() admite valores de matiz, saturación y luminosidad, que se utilizan para distinguir entre los 16,7 millones de colores, pero de una manera diferente:

- - - -

Podemos adaptar el ejemplo con colores RGB para usar colores HSL, así:

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} 

- -

Al igual que RGB tiene un equivalente RGBA, HSL tiene un equivalente HSLA, que le proporciona la misma capacidad para especificar el canal alfa. Demostramos esto a continuación cambiando nuestro ejemplo RGBA para usar colores HSLA.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} 

- -

Puedes usar cualquiera de estos valores de color en tus proyectos. Es probable que para la mayoría de los proyectos te decidas por una paleta de colores y luego uses esos colores (y tu método elegido para especificar el color) en todo el proyecto. También puedes mezclar y combinar diversos modelos de color, sin embargo, por coherencia, en general es mejor si todo el proyecto usa el mismo.

- -

Imágenes

- -

El tipo de datos <image> se usa cuando una imagen es un valor válido. Puede ser un archivo de imagen real al que apunta una función url(), o un degradado.

- -

En el ejemplo siguiente mostramos una imagen y un gradiente en uso como un valor para la propiedad CSS background-image.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} 

- -
-

Nota: hay otros valores posibles para <image>, pero son más nuevos y aún hay pocos navegadores que los admiten. Consulta la página de MDN para el tipo de dato <image> si deseas saber más sobre ellos.

-
- -

Posición

- -

El tipo de dato <position> representa un conjunto de coordenadas 2D que se utiliza para colocar un elemento, por ejemplo una imagen de fondo (con el atributo background-position). Puede tomar palabras clave como top, left, bottom, right y center para alinear los elementos con los límites específicos de una caja de dos dimensiones, y también longitudes, que representan desplazamientos desde los bordes superior e izquierdo de la caja.

- -

Un valor de posición típico consta de dos valores: el primero establece la posición horizontal, y el segundo la vertical. Si solo especificas valores para un eje, el otro usará center por defecto.

- -

En el ejemplo siguiente hemos colocado una imagen de fondo a 40px de la parte superior, y a la derecha del contenedor con una palabra clave.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} 

- -

Juega un poco con estos valores y observa cómo cambia la posición de la imagen.

- -

Cadenas e identificadores

- -

En los ejemplos anteriores hemos visto casos en que se usan palabras clave como valores (por ejemplo, palabras clave para <color>, como red, black, rebeccapurple y goldenrod). Estas palabras clave normalmente se describen como identificadores, un valor especial que el CSS entiende. Como tales, no se escriben entre comillas (es decir, no se tratan como cadenas).

- -

Hay casos en el CSS en que debes usar cadenas, por ejemplo, al especificar el contenido que generas. En este caso, el valor se escribe entre comillas para mostrar que se trata de una cadena de caracteres. En el ejemplo siguiente hemos usado palabras clave para el color, sin entrecomillar, y también una cadena caracteres, de contenido generado, entrecomillada.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} 

- -

Funciones

- -

El último tipo de valor que vamos a analizar es el grupo de valores conocidos como funciones. En programación, una función es un bloque de código reutilizable que es posible ejecutar varias veces para completar una tarea repetitiva con el mínimo esfuerzo tanto por parte del desarrollador como del ordenador. Las funciones suelen asociarse a lenguajes como JavaScript, Python o C++, pero también hay funciones en CSS, como valores de código propietario. Ya hemos visto funciones en acción en la sección sobre los colores: rgb(), hsl(), etc. El valor que se utiliza para devolver una imagen de un archivo, en este caso url(), también es una función.

- -

Un valor que se comporta más como algo que puedes encontrar en un lenguaje de programación tradicional es la función calc(). Esta función te proporciona la capacidad de hacer cálculos simples en tu CSS. Es particularmente útil si deseas calcular valores que no puedes definir al escribir el CSS para tu proyecto y necesitas que el navegador lo haga durante la ejecución.

- -

Por ejemplo, a continuación usamos calc() para hacer que la caja tenga 20% + 100px de ancho. El 20% se calcula a partir del ancho del contenedor principal .wrapper y, por lo tanto, cambiará si ese ancho cambia. No podemos hacer este cálculo de antemano porque no sabemos cuál será el 20% del elemento padre, por lo que usamos calc() para decirle al navegador que lo haga por nosotros.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

- -

Pon a prueba tus conocimientos

- -

Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para comprobar que retienes esa información antes de seguir en Test your skills: Values and units.

- -

Resumen

- -

Esta ha sido una revisión rápida de los tipos de valores y unidades más comunes que te puedes encontrar. Puedes echar un vistazo a todos los diferentes tipos en la página de referencia de valores y unidades CSS; encontrarás muchos de estos mientras trabajas en estos artículos.

- -

Lo que debes recordar es que cada propiedad tiene una lista definida de valores admisibles, y cada valor incluye una definición que explica cuáles son sus subvalores. A continuación puedes buscar los detalles aquí, en MDN.

- -

Por ejemplo, comprender que <image> también te permite crear un degradado de color es útil, ¡pero quizás no sea un conocimiento obvio!

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

- -

En este módulo

- -
    -
  1. Cascada y herencia
    2. -
  2. Selectores CSS - -
    3. -
  3. El modelo de caja
    4. -
  4. Fondos y bordes
    5. -
  5. El uso de diferentes direcciones de texto
    6. -
  6. El desbordamiento de los contenidos
    7. -
  7. Los valores y las unidades
    8. -
  8. Elementos de dimensionado en CSS
    9. -
  9. Imágenes, media y elementos de formulario
    10. -
  10. Aplicar estilo a las tablas
    11. -
  11. Depurar el CSS
    12. -
  12. Organizar el CSS
    13. -
diff --git a/files/es/learn/css/building_blocks/values_and_units/index.html b/files/es/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..4470746bc8 --- /dev/null +++ b/files/es/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,392 @@ +--- +title: Valores y unidades CSS +slug: Learn/CSS/Building_blocks/Valores_y_unidades_CSS +translation_of: Learn/CSS/Building_blocks/Values_and_units +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
+ +

Todas las propiedades que se utilizan en CSS tienen un valor o un conjunto de valores que esa propiedad admite, y echar un vistazo a cualquier página de propiedades en MDN te ayudará a comprender qué valores admite una propiedad en particular. En este artículo veremos algunos de los valores y unidades más comunes en uso.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con el CSS).
Objetivo:Conocer los diferentes tipos de valores y unidades que admiten las propiedades CSS.
+ +

¿Qué es un valor CSS?

+ +

En las especificaciones CSS y en las páginas de propiedades de este proyecto MDN, podrás detectar los valores porque estarán escritos entre corchetes angulares, como <color> o <length>. Cuando veas que el valor <color> es válido para una propiedad en particular, significa que para esa propiedad puedes usar como valor cualquier color válido de entre los que se enumeran en la página de referencia de la propiedad <color>.

+ +
+

Nota: También verás valores CSS denominados tipos de datos. Los términos son básicamente intercambiables: cuando veas algo en CSS denominado ‘tipo de datos’, en realidad es solo una forma elegante de decir ‘valor’.

+
+ +
+

Nota: Sí, hay una tendencia de denotar los valores CSS entre corchetes angulares, para diferenciarlos de las propiedades CSS (por ejemplo, la propiedad {{cssxref ("color")}} con respecto al tipo de dato <color>). Aunque podría generarte confusión entre los tipos de datos CSS y los elementos HTML, porque ambos usan corchetes angulares, es poco probable porque se usan en contextos muy diferentes.

+
+ +

En el ejemplo siguiente hemos establecido el color de nuestro encabezado con una palabra clave y el fondo con la función rgb():

+ +
h1 {
+  color: black;
+  background-color: rgb(197,93,161);
+} 
+
+ +

Un valor en CSS es una forma de definir una colección de subvalores admitidos. Esto significa que si ves <color> como válido, no necesitas preguntarte cuáles de los diferentes tipos de valor de color puedes usar: palabras clave, valores hexadecimales, funciones rgb(), etc. Puedes usar cualquier valor <color> disponible siempre que tu navegador lo admita. La página de MDN te dará información sobre lo que admite cada navegador para cada valor. Por ejemplo, puedes ver que en la sección de compatibilidad de navegadores de la página para <color> se enumeran diferentes tipos de valores de color y los navegadores que los admiten.

+ +

Echemos un vistazo a algunos de los tipos de valores y unidades con los que puedes encontrar con frecuencia, con ejemplos para que puedas probar diferentes valores posibles.

+ +

Números, longitudes y porcentajes

+ +

Al utilizar CSS te puedes encontrar con varios tipos de datos numéricos. Todos los siguientes están clasificados como tipos de datos numéricos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipo de datosDescripción
<integer>Un <integer> es un número entero, como 1024 o -55.
<number>Un <number> representa un número decimal; puede tener o no un punto de separación decimal con un componente fraccionario, por ejemplo: 0,255, 128 o -1,2.
<dimension>Una <dimension> es un <number> con una unidad asociada, por ejemplo: 45deg (grados), 5s (segundos) o 10px (píxeles). <dimension> es una categoría general que incluye los tipos <length>, <angle>, <time> y <resolution>.
<percentage>Un <percentage> representa una fracción de algún otro valor, por ejemplo, 50%. Los valores de porcentaje siempre son relativos a otra cantidad, por ejemplo, la longitud de un elemento es relativa a la longitud de su elemento padre.
+ +

Longitudes

+ +

El tipo numérico con el que te vas a encontrar con mayor frecuencia es <length>, por ejemplo, 10px (píxeles) o 30em. En CSS se utilizan dos longitudes diferentes: relativa y absoluta. Es importante conocer la diferencia para entender qué dimensiones van a tener las cosas.

+ +

Unidades de longitud absoluta

+ +

Todas las unidades siguientes son unidades de longitud absoluta: no son relativas a nada más y en general se considera que siempre tienen el mismo tamaño.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnidadNombreEquivale a
cmCentímetros1cm = 96px/2,54
mmMilímetros1mm = 1/10 de 1cm
QCuartos de milímetros1Q = 1/40 de 1cm
inPulgadas1in = 2,54cm = 96px
pcPicas1pc = 1/16 de 1in
ptPuntos1pt = 1/72 de 1in
pxPíxeles1px = 1/96 de 1in
+ +

La mayoría de estos valores son más útiles cuando se usan en una salida en formato impreso que en la salida de pantalla. Por ejemplo, normalmente no usamos cm (centímetros) en pantalla. El único valor que usarás de forma frecuente es px (píxeles).

+ +

Unidades de longitud relativa

+ +

Las unidades de longitud relativa son relativas a algo más, por ejemplo, al tamaño de letra del elemento principal o al tamaño de la ventana gráfica. La ventaja de usar unidades relativas es que con una planificación cuidadosa puedes lograr que el tamaño del texto u otros elementos escalen en relación con todo lo demás en la página. En la tabla siguiente se enumeran algunas de las unidades más útiles para el desarrollo web.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnidadRelativa a
emTamaño de letra del elemento padre, en el caso de propiedades tipográficas como {{cssxref("font-size")}}, y tamaño de la fuente del propio elemento en el caso de otras propiedades, como {{cssxref("width")}}.
exAltura x de la fuente del elemento.
chLa medida de avance (ancho) del glifo "0" de la letra del elemento.
remTamaño de la letra del elemento raíz.
lhAltura de la línea del elemento.
vw1% del ancho de la ventana gráfica.
vh1% de la altura de la ventana gráfica.
vmin1% de la dimensión más pequeña de la ventana gráfica.
vmax1% de la dimensión más grande de la ventana gráfica.
+ +

Un ejemplo de análisis

+ +

En el ejemplo siguiente puedes ver cómo se comportan algunas unidades de longitud relativa y absoluta. La primera caja tiene un ancho ({{cssxref ("width")}}) establecido en píxeles. Como unidad absoluta, este ancho será siempre el mismo aunque lo demás cambie.

+ +

La segunda caja tiene un ancho establecido en unidades vw (ancho de ventana). Este valor es relativo al ancho de la ventana gráfica, por lo que 10vw es el 10 por ciento del ancho de la ventana gráfica. Si cambiases el ancho de la ventana de tu navegador, el tamaño de la caja cambiaría. Sin embargo, esto no te va a funcionar porque este ejemplo se ha incrustado en la página usando <iframe>. Para verlo en acción debes probar el ejemplo después de abrirlo en una pestaña independiente de tu navegador.

+ +

La tercera caja utiliza unidades em. Son unidades relativas al tamaño de la letra. Hemos establecido un tamaño de fuente de 1em en el contenido {{htmlelement ("div")}}, que tiene una clase .wrapper. Si cambias este valor a 1.5em, verás que el tamaño de letra de todos los elementos aumenta, pero solo se amplía el ancho en el último elemento, porque el ancho es relativo a ese tamaño de letra.

+ +

Después de seguir las instrucciones anteriores, juega un poco más con los valores para ver qué obtienes.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

+ +

ems y rems

+ +

em y rem son las dos longitudes relativas que es probable que encuentres con mayor frecuencia al cambiar el tamaño de cualquier cosa, de cajas a texto. Vale la pena entender cómo funcionan y las diferencias entre ellos, especialmente cuando comienzas a abordar temas más complejos como aplicar estilos a texto o compaginar con CSS. El ejemplo siguiente te proporciona una muestra.

+ +

El HTML es un conjunto de listas anidadas: hay tres listas en total y ambos ejemplos tienen el mismo HTML. La única diferencia es que el primero tiene una clase ems y el segundo una clase rems.

+ +

Para empezar, configuramos un tamaño de letra de 16px en el elemento <html>.

+ +

En definitiva, la unidad em significa «el tamaño de letra de mi elemento padre». Los elementos {{htmlelement ("li")}} dentro de un elemento {{htmlelement ("ul")}} con una clase de ems toman el tamaño con respecto a su elemento padre. Por lo tanto, en cada nivel de anidamiento sucesivo, el tamaño de letra aumenta progresivamente, porque en cada uno el tamaño de letra está establecido en 1.3em (1,3 veces el tamaño de letra de su elemento padre).

+ +

En definitiva, la unidad rem significa «el tamaño de letra del elemento raíz». (‘rem’ viene de «root em»). Los elementos {{htmlelement ("li")}} dentro de un elemento {{htmlelement ("ul")}} con una clase de rems toman su tamaño del elemento raíz (<html>). Esto significa que el tamaño de letra no aumenta en cada nivel sucesivo de anidamiento.

+ +

Sin embargo, si cambias el atributo font-size de <html> en el CSS, verás que todo lo demás cambia en relación con él, tanto la letra cuyo tamaño está especificado en unidades rem como la que lo está en unidades em.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} 

+ +

Porcentajes

+ +

En muchos casos, un porcentaje es tratado de la misma manera que una longitud. Lo que sucede con los porcentajes es que siempre se establecen en relación con otro valor. Por ejemplo, si estableces el atributo font-size de un elemento como un porcentaje, será un porcentaje del font-size del elemento padre. Si usas un porcentaje para un valor width, será un porcentaje del atributo width del elemento padre.

+ +

En el ejemplo siguiente, las dos cajas con el tamaño especificado en unidades de porcentaje y las dos cajas con el tamaño especificado en unidades de píxel tienen los mismos nombres de clase. En ambos conjuntos de cajas, los anchos de las cajas son de 200 píxeles y de 40%, respectivamente.

+ +

La diferencia es que el segundo conjunto de dos cajas está dentro de un contenedor que tiene 400 píxeles de ancho. La segunda caja de 200 px de ancho tiene el mismo ancho que la primera, pero la segunda caja de 40% ahora es el 40% de 400 px, ¡mucho más estrecha que la primera!

+ +

Cambia el ancho del contenedor o el valor de porcentaje para ver cómo funciona.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 

+ +

El ejemplo siguiente tiene tamaños de letra establecidos en porcentajes. Cada elemento <li> tiene un atributo font-size del 80%, por lo tanto, los elementos de la lista anidada se vuelven progresivamente más pequeños a medida que heredan su tamaño del elemento padre.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} 

+ +

Observa que aunque muchos valores admiten unidades de longitud o porcentaje, algunos solo admiten unidades de longitud. Puedes ver qué valores admite cada propiedad en las páginas de referencia correspondientes del proyecto MDN. Si el valor admitido incluye <length-percentage>, puedes usar una unidad de longitud o un porcentaje. Si el valor admitido solo incluye <length>, no es posible utilizar un porcentaje.

+ +

Números

+ +

Algunos valores aceptan números sin ninguna unidad asociada. Un ejemplo de una propiedad que acepta un número sin unidades es la propiedad opacity, que controla la opacidad de un elemento (cuán transparente es). Esta propiedad admite un número entre 0 (totalmente transparente) y 1 (totalmente opaco).

+ +

En el ejemplo siguiente, asigna al valor de opacity diversos valores decimales entre 0 y 1 para ver cómo la caja y su contenido cambian su opacidad.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} 

+ +
+

Nota: Cuando en CSS utilizas un número como valor, no debe estar entre comillas.

+
+ +

Color

+ +

En CSS hay muchas formas de especificar el color, algunas de las cuales se implementaron más recientemente que otras. En todas partes en CSS se pueden usar los mismos valores de color, tanto para especificar el color del texto como el color de fondo, o de cualquier otra cosa.

+ +

El sistema de colores estándar disponible en los ordenadores modernos es de 24 bits, lo que permite visualizar aproximadamente 16,7 millones de colores distintos a partir de una combinación de diferentes canales de rojo, verde y azul con 256 valores diferentes por canal (256 x 256 x 256 = 16.777.216). Echemos un vistazo a algunas de las formas en que podemos especificar colores en CSS.

+ +
+

Nota: En este artículo vamos a ver los métodos comunes para especificar colores que admiten los navegadores; hay otros métodos no tan comunes que no admiten todos los navegadores.

+
+ +

Palabras clave para los colores

+ +

Muy a menudo, en los ejemplos de este artículo o en cualquier otra página de MDN, verás que se utilizan las palabras clave para los colores, ya que son una forma simple y comprensible de especificar colores. Hay una multitud de estas palabras clave, ¡algunas de las cuales tienen nombres de lo más curiosos! Puedes ver una lista completa en la página para el valor <color>.

+ +

Juega con diferentes valores de color en los ejemplos en vivo que encontrarás a continuación, para adquirir una idea más clara de cómo funcionan.

+ +

Los valores hexadecimales RGB

+ +

El siguiente tipo de valores de color que es probable que encuentres son los códigos hexadecimales. Cada valor hexadecimal consiste en un símbolo de hashtag/almohadilla (#) seguido de seis cifras hexadecimales, cada una de las cuales puede tomar uno de los 16 valores entre el 0 y la f (que representa el 15), por ejemplo: 0123456789abcdef. Cada par de cifras representa uno de los canales (rojo, verde y azul) y nos permite especificar cualesquiera de los 256 valores disponibles para cada uno (16 x 16 = 256).

+ +

Estos valores son un poco más complejos y menos fáciles de entender, pero son mucho más versátiles que las palabras clave: puedes usar valores hexadecimales para representar cualquier color que desees usar en tu combinación de colores.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} 

+ +

Una vez más, cambia los valores para ver cómo varían los colores.

+ +

Valores RGB y RGBA

+ +

El tercer esquema del que hablaremos aquí es RGB. Un valor RGB es una función rgb() que recibe tres parámetros que representan los valores de los canales rojo, verde y azul del color, de modo muy similar a los valores hexadecimales. La diferencia con RGB es que cada canal está representado no por dos dígitos hexadecimales, sino por un número decimal entre el 0 y el 255, lo que de algún modo resulta algo más fácil de entender.

+ +

Vamos a reescribir nuestro último ejemplo para utilizar colores RGB:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 

+ +

También puedes usar colores RGBA: estos funcionan exactamente de la misma manera que los colores RGB, por lo que puedes usar cualquier valor RGB; sin embargo, hay un cuarto valor que representa el canal alfa del color, que controla la opacidad. Si estableces este valor en 0, el color será completamente transparente, mientras que en 1 será completamente opaco. Los valores intermedios le confieren diferentes niveles de transparencia.

+ +
+

Nota: Establecer un canal alfa en un color representa una diferencia clave para usar la propiedad {{cssxref ("opacity")}} que vimos anteriormente. Cuando usas la opacidad, el elemento y todo lo que contiene es opaco, mientras que cuando usas colores RGBA, solo son opacos los que especificas.

+
+ +

En el ejemplo siguiente hemos añadido una imagen de fondo al bloque que contiene nuestras cajas de color. También hemos configurado las cajas para que tengan diferentes valores de opacidad: observa que el fondo se muestra más cuanto menor es el valor del canal alfa.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

+ +

En este ejemplo, cambia los valores del canal alfa y observa cómo afecta a la salida de color.

+ +
+

Nota: En algún momento, los navegadores modernos se actualizaron para que rgba() y rgb(), y hsl() y hsla() (ver más abajo) se convirtieran en alias puros el uno del otro y comenzaran a comportarse exactamente igual. Así, por ejemplo, tanto rgba() como rgb() admiten colores con y sin valores de canal alfa. Cambia el rgba() del ejemplo anterior por rgb() y observa si los colores aún funcionan. El estilo que uses depende de ti, pero separar las definiciones de los colores transparentes y las de los no transparentes con el uso de funciones diferentes mejora la ejecución de los navegadores y puede actuar como un indicador visual de dónde se definen colores transparentes en tu código.

+
+ +

Los valores HSL y HSLA

+ +

Un poco menos compatible que RGB es el modelo de color HSL (no compatible con las antiguas versiones de Internet Explorer), que se implementó después de mucha insistencia por parte de los diseñadores. En lugar de los valores rojo, verde y azul, la función hsl() admite valores de matiz, saturación y luminosidad, que se utilizan para distinguir entre los 16,7 millones de colores, pero de una manera diferente:

+ + + +

Podemos adaptar el ejemplo con colores RGB para usar colores HSL, así:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} 

+ +

Al igual que RGB tiene un equivalente RGBA, HSL tiene un equivalente HSLA, que le proporciona la misma capacidad para especificar el canal alfa. Demostramos esto a continuación cambiando nuestro ejemplo RGBA para usar colores HSLA.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} 

+ +

Puedes usar cualquiera de estos valores de color en tus proyectos. Es probable que para la mayoría de los proyectos te decidas por una paleta de colores y luego uses esos colores (y tu método elegido para especificar el color) en todo el proyecto. También puedes mezclar y combinar diversos modelos de color, sin embargo, por coherencia, en general es mejor si todo el proyecto usa el mismo.

+ +

Imágenes

+ +

El tipo de datos <image> se usa cuando una imagen es un valor válido. Puede ser un archivo de imagen real al que apunta una función url(), o un degradado.

+ +

En el ejemplo siguiente mostramos una imagen y un gradiente en uso como un valor para la propiedad CSS background-image.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} 

+ +
+

Nota: hay otros valores posibles para <image>, pero son más nuevos y aún hay pocos navegadores que los admiten. Consulta la página de MDN para el tipo de dato <image> si deseas saber más sobre ellos.

+
+ +

Posición

+ +

El tipo de dato <position> representa un conjunto de coordenadas 2D que se utiliza para colocar un elemento, por ejemplo una imagen de fondo (con el atributo background-position). Puede tomar palabras clave como top, left, bottom, right y center para alinear los elementos con los límites específicos de una caja de dos dimensiones, y también longitudes, que representan desplazamientos desde los bordes superior e izquierdo de la caja.

+ +

Un valor de posición típico consta de dos valores: el primero establece la posición horizontal, y el segundo la vertical. Si solo especificas valores para un eje, el otro usará center por defecto.

+ +

En el ejemplo siguiente hemos colocado una imagen de fondo a 40px de la parte superior, y a la derecha del contenedor con una palabra clave.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} 

+ +

Juega un poco con estos valores y observa cómo cambia la posición de la imagen.

+ +

Cadenas e identificadores

+ +

En los ejemplos anteriores hemos visto casos en que se usan palabras clave como valores (por ejemplo, palabras clave para <color>, como red, black, rebeccapurple y goldenrod). Estas palabras clave normalmente se describen como identificadores, un valor especial que el CSS entiende. Como tales, no se escriben entre comillas (es decir, no se tratan como cadenas).

+ +

Hay casos en el CSS en que debes usar cadenas, por ejemplo, al especificar el contenido que generas. En este caso, el valor se escribe entre comillas para mostrar que se trata de una cadena de caracteres. En el ejemplo siguiente hemos usado palabras clave para el color, sin entrecomillar, y también una cadena caracteres, de contenido generado, entrecomillada.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} 

+ +

Funciones

+ +

El último tipo de valor que vamos a analizar es el grupo de valores conocidos como funciones. En programación, una función es un bloque de código reutilizable que es posible ejecutar varias veces para completar una tarea repetitiva con el mínimo esfuerzo tanto por parte del desarrollador como del ordenador. Las funciones suelen asociarse a lenguajes como JavaScript, Python o C++, pero también hay funciones en CSS, como valores de código propietario. Ya hemos visto funciones en acción en la sección sobre los colores: rgb(), hsl(), etc. El valor que se utiliza para devolver una imagen de un archivo, en este caso url(), también es una función.

+ +

Un valor que se comporta más como algo que puedes encontrar en un lenguaje de programación tradicional es la función calc(). Esta función te proporciona la capacidad de hacer cálculos simples en tu CSS. Es particularmente útil si deseas calcular valores que no puedes definir al escribir el CSS para tu proyecto y necesitas que el navegador lo haga durante la ejecución.

+ +

Por ejemplo, a continuación usamos calc() para hacer que la caja tenga 20% + 100px de ancho. El 20% se calcula a partir del ancho del contenedor principal .wrapper y, por lo tanto, cambiará si ese ancho cambia. No podemos hacer este cálculo de antemano porque no sabemos cuál será el 20% del elemento padre, por lo que usamos calc() para decirle al navegador que lo haga por nosotros.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

+ +

Pon a prueba tus conocimientos

+ +

Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para comprobar que retienes esa información antes de seguir en Test your skills: Values and units.

+ +

Resumen

+ +

Esta ha sido una revisión rápida de los tipos de valores y unidades más comunes que te puedes encontrar. Puedes echar un vistazo a todos los diferentes tipos en la página de referencia de valores y unidades CSS; encontrarás muchos de estos mientras trabajas en estos artículos.

+ +

Lo que debes recordar es que cada propiedad tiene una lista definida de valores admisibles, y cada valor incluye una definición que explica cuáles son sus subvalores. A continuación puedes buscar los detalles aquí, en MDN.

+ +

Por ejemplo, comprender que <image> también te permite crear un degradado de color es útil, ¡pero quizás no sea un conocimiento obvio!

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. Cascada y herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de caja
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git "a/files/es/learn/css/css_layout/dise\303\261o_receptivo/index.html" "b/files/es/learn/css/css_layout/dise\303\261o_receptivo/index.html" deleted file mode 100644 index 4ddb7a94db..0000000000 --- "a/files/es/learn/css/css_layout/dise\303\261o_receptivo/index.html" +++ /dev/null @@ -1,324 +0,0 @@ ---- -title: Diseño receptivo -slug: Learn/CSS/CSS_layout/Diseño_receptivo -translation_of: Learn/CSS/CSS_layout/Responsive_Design ---- -
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
- -

En los primeros días del diseño web, las páginas se diseñaban para llenar un tamaño de pantalla en particular. Si el usuario tenía una pantalla más grande o más pequeña que la del diseñador, los resultados esperados iban desde barras de desplazamiento no deseadas hasta longitudes de línea excesivamente largas y un mal uso del espacio. A medida que estuvieron disponibles tamaños de pantalla más diversos, apareció el concepto de diseño web responsivo (RWD, responsive web design), un conjunto de prácticas que permite a las páginas web alterar su diseño y apariencia para adaptarse a diferentes anchos de pantalla, resoluciones, etc. Es una idea que cambió la forma en que diseñamos para una web multidispositivo, y en este artículo te ayudaremos a comprender las principales técnicas que necesitas saber para dominarlo.

- - - - - - - - - - - - -
Prerrequisitos:Conceptos básicos de HTML (véase Introducción al HTML) y nociones de cómo funciona el CSS (véase Primeros pasos en CSS y Los elementos básicos del CSS).
Objetivo:Comprender los conceptos fundamentales y la historia del diseño responsivo.
- -

Diseños de sitios web históricos

- -

En un momento de la historia, solo tenías dos opciones al diseñar un sitio web:

- - - -

Estos dos enfoques tendían a dar como resultado un sitio web que se veía mejor ¡en la pantalla de la persona que diseñaba el sitio! El sitio líquido dio como resultado un diseño encogido en las pantallas que eran más pequeñas (como se ve a continuación) o longitudes de línea interminables en las pantallas que eran más grandes.

- -
Un diseño de página con dos columnas encogidas en una ventana gráfica del tamaño de un teléfono móvil. -
-
- -
-

Nota: Observa este ejemplo y su código fuente de un diseño líquido sencillo. Amplía o reduce la ventana del navegador y observa cómo cambia su aspecto en diferentes tamaños.

-
- -

El sitio de ancho fijo se arriesgaba a una barra de desplazamiento horizontal en pantallas que eran más pequeñas que el ancho del sitio (como se ve a continuación), y a un gran espacio en blanco en los bordes del diseño en las pantallas que eran más grandes.

- -
Un diseño con una barra de desplazamiento horizontal en una ventana de teléfono móvil. -
-
- -
-

Nota: Observa este ejemplo y su código fuente de un diseño sencillo con un ancho fijo. Nuevamente, cambia el tamaño de la ventana del navegador y observa el resultado.

-
- -
-

Nota: Las capturas de pantalla anteriores se han tomado usando el modo de diseño responsivo de las herramientas DevTools de Firefox.

-
- -

A medida que la web móvil comenzó a hacerse realidad con los primeros teléfonos con funciones, las empresas que deseaban adoptar los dispositivos móviles solían crear una versión especial de su sitio web para dispositivo móvil, con una URL diferente (a menudo algo así como m.example.com o example.mobi). Esto significaba que había que desarrollar y actualizar dos versiones independientes del sitio web.

- -

Además, estos sitios web para dispositivos móviles a menudo ofrecían una experiencia muy reducida. A medida que los dispositivos móviles se volvían más potentes y capaces de mostrar sitios web completos, esto resultaba frustrante para los usuarios de dispositivos móviles, que se veían atrapados en la versión móvil del sitio web y no podían acceder a la información que sabían que había en la versión de escritorio, que incluía todas las funciones del sitio web.

- -

Diseño flexible antes del diseño responsivo

- -

Se desarrollaron varios enfoques para tratar de resolver los inconvenientes de los métodos líquidos o de ancho fijo para crear sitios web. En 2004, Cameron Adams escribió una publicación titulada Resolution dependent layout, que describe un método para crear un diseño que podría adaptarse a diferentes resoluciones de pantalla. Este enfoque requería JavaScript para detectar la resolución de la pantalla y cargar el CSS correcto.

- -

Zoe Mickley Gillenwater fue determinante en su trabajo de descripción y formalización de los diversos modos en que se podían crear sitios web flexibles para intentar encontrar una situación intermedia entre llenar toda la pantalla o tener un tamaño completamente fijo.

- -

Diseño responsivo

- -

El término diseño responsivo fue acuñado por Ethan Marcotte en 2010, y describía el uso combinado de tres técnicas.

- -
    -
  1. La primera era la idea de las redes fluidas, algo que ya exploraba Gillenwater, y que puede leerse en el artículo de Marcotte, Fluid Grids (publicado en 2009 en A list apart).
    2. -
  2. La segunda técnica era la idea de las imágenes fluidas. Usando una técnica muy simple de establecer la propiedad de max-width al 100%, las imágenes se reducían si su columna de contención se volvía más estrecha que el tamaño intrínseco de la imagen, pero nunca se expandía. Esto permite reducir una imagen para que se ajuste a una columna de tamaño flexible, en lugar de que desborde, pero no se expande ni se pixela si la columna se ensancha más que la imagen.
    3. -
  3. El tercer componente clave era la consulta a los media. Las consultas a los media habilitan el tipo de cambio de diseño que Cameron Adams había explorado previamente usando JavaScript, pero usando solo CSS. En lugar de tener un único diseño para todos los tamaños de pantalla, el diseño podría cambiarse. Las barras laterales pueden reposicionarse en una pantalla más pequeña, o puede mostrarse una navegación alternativa.
    4. -
- -

Es importante comprender que el diseño web responsivo no es una tecnología independiente: es un término utilizado para describir un enfoque para el diseño web, o un conjunto de buenas prácticas utilizado para crear un diseño que puede responder según el dispositivo que se utiliza para ver un contenido. En la exploración original de Marcotte, esto significaba cuadrículas flexibles (mediante elementos flotantes) y consultas de media; sin embargo, en los casi 10 años desde que se escribió ese artículo, trabajar de manera responsiva se ha convertido en la norma. Los métodos de diseño CSS modernos son inherentemente responsivos, y la plataforma web dispone de herramientas integradas nuevas que facilitan el diseño de sitios web responsivos.

- -

El resto de este artículo te indicará las diversas características de la plataforma web que puedas querer utilizar para crear un sitio responsivo.

- -

La consulta a los media

- -

El diseño responsivo solo pudo surgir gracias a la consulta a los media. La especificación de nivel 3 de consulta a los media se convirtió en una candidata a Recomendación en 2009, lo que significa que se consideró lista para su implementación en los navegadores. Las consultas a los media nos permiten ejecutar una serie de pruebas (por ejemplo, si la pantalla del usuario es mayor que un ancho o una resolución determinados) y aplicar CSS selectivamente para diseñar la página de manera que resulte adecuada a las necesidades del usuario.

- -

Por ejemplo, la consulta a los media siguiente explora si la página web que se muestra lo hace como un medio de pantalla (por lo tanto, no es un documento impreso) y si la ventana tiene al menos 800 píxeles de ancho. El CSS para el selector .container solo se aplicará si ambas condiciones son ciertas.

- -
@media screen and (min-width: 800px) {
-  .container {
-    margin: 1em 2em;
-  }
-} 
-
- -

Puedes añadir múltiples consultas a los media dentro de una hoja de estilo, y ajustar todo tu diseño o solo partes de él para que se adapte mejor a los diferentes tamaños de pantalla. Los puntos en los que se introduce una consulta a los media y se cambia el diseño se conocen como puntos de interrupción.

- -

Un enfoque común cuando se usan las consultas a los media es crear un diseño sencillo de una sola columna para dispositivos de pantalla estrecha (por ejemplo, teléfonos móviles), luego implementar un diseño en columnas para pantallas más grandes cuando se sabe que hay suficiente ancho de pantalla para manejarlo. Esto se describe a menudo como diseño primero móvil.

- -

Obtén más información sobre las consultas a los media en la documentación de MDN.

- -

Cuadrículas flexibles

- -

Los sitios responsivos no solo cambian su diseño entre puntos de interrupción, sino que se construyen sobre cuadrículas flexibles. Una cuadrícula flexible significa que no tienes que centrarte en todos los tamaños de dispositivo posibles y construir para ellos un diseño en píxeles perfecto. Ese enfoque sería imposible dada la gran cantidad de dispositivos de tamaños diferentes que hay, y el hecho de que, al menos en la versión de escritorio, las personas no siempre tienen la ventana de su navegador maximizada.

- -

Al usar una cuadrícula flexible, solo necesitas añadir un punto de interrupción y cambiar el diseño en el punto en que el contenido comienza a verse mal. Por ejemplo, si las longitudes de las líneas se vuelven interminablemente largas a medida que el tamaño de la pantalla aumenta, o una caja se encoje hasta un ancho de dos palabras en cada línea a medida que el tamaño de la pantalla se reduce.

- -

En los primeros días del diseño responsivo, nuestra única opción para el diseño de páginas web era usar elementos flotantes. Los diseños de pantalla con elementos flotantes flexibles se lograban dando a cada elemento un ancho porcentual asegurándose de que para toda la página no alcanzara más del 100%. En su trabajo original sobre cuadrículas fluidas, Marcotte detalló una fórmula para tomar un diseño de página web diseñado usando píxeles y convertirlo en porcentajes.

- -
target / context = result 
-
- -

Por ejemplo, si el tamaño de nuestra columna de destino es de 60 píxeles y el contexto (o contenedor) en el que se encuentra es de 960 píxeles, dividimos 60 por 960 para obtener un valor que podemos usar en nuestro CSS, después de mover el separador de cifras decimales dos posiciones a la derecha.

- -
.col {
-  width: 6.25%; /* 60 / 960 = 0.0625 */
-} 
-
- -

Este enfoque se encuentra hoy en muchos lugares de la web, y aquí está documentado en la sección de compaginación de nuestro artículo sobre métodos de compaginación heredados. Es probable que encuentres sitios web que utilizan este enfoque en su trabajo, por lo que vale la pena entenderlo, aunque no vas a construir un sitio web moderno utilizando una cuadrícula flexible basada en elementos flotantes.

- -

El ejemplo siguiente muestra un diseño responsivo sencillo que utiliza consultas a los medios y una cuadrícula flexible. En pantallas estrechas, el diseño de página muestra las cajas en columna una encima de la otra:

- -
Una vista de un dispositivo móvil con un diseño de página con cajas en columna vertical una encima de la otra. -
-
- -

En pantallas más anchas se pasa a dos columnas:

- -
Una vista de un dispositivo de escritorio con un diseño a dos columnas. -
-
- -
-

Nota: Puedes encontrar el ejemplo en vivo y el código fuente de este ejemplo en GitHub.

-
- -

Tecnologías modernas de diseño de páginas web

- -

Los métodos modernos de diseño de páginas web, como el diseño en columnas, Flexbox y Grid son responsivos por defecto. Todos estos métodos asumen que tratas de crear una cuadrícula flexible y te proporcionan los modos más fáciles de hacerlo.

- -

Multicol

- -

El más antiguo de estos métodos de diseño de páginas web es multicol. Cuando especificas un atributo column-count, esto indica en cuántas columnas deseas dividir tu contenido. El navegador entonces calcula el tamaño de estas columnas, que cambiará de acuerdo con el tamaño de la pantalla.

- -
.container {
-  column-count: 3;
-} 
-
- -

Si en lugar de ello estableces el atributo column-width, especificas un ancho mínimo. El navegador crea tantas columnas de ese ancho como quepan cómodamente en el contenedor, y reparte el espacio entre todas las columnas. Por lo tanto, el número de columnas cambia según la cantidad de espacio que hay.

- -
.container {
-  column-width: 10em;
-} 
-
- -

Flexbox

- -

En el método Flexbox, los elementos flexibles se encogen y distribuyen el espacio entre los elementos según el espacio que hay en su contenedor, según su comportamiento inicial. Al cambiar los valores de flex-grow y flex-shrink, puedes indicar cómo deseas que se comporten los elementos cuando a su alrededor hay más o menos espacio.

- -

En el ejemplo siguiente, los elementos flexibles ocupan cada uno la misma cantidad de espacio en el contenedor flexible, al utilizar la abreviatura flex: 1 como se describe en el artículo Flexbox: Dimensionamiento flexible de los elementos flex.

- -
.container {
-  display: flex;
-}
-
-.item {
-  flex: 1;
-} 
-
- -
-

Nota: Como ejemplo, hemos reconstruido el anterior diseño de página responsivo sencillo, esta vez usando Flexbox. Puedes ver que ya no necesitamos usar valores de porcentaje extraños para calcular el tamaño de las columnas: ejemplo, código fuente.

-
- -

Cuadrículas CSS

- -

En el diseño de cuadrículas con CSS, la unidad fr permite la distribución del espacio disponible en las trazas de la cuadrícula. El ejemplo siguiente crea un contenedor de cuadrícula con tres trazas dimensionadas a 1fr. Esto crea tres columnas, cada una de las cuales ocupa una parte del espacio que hay disponible en el contenedor. Puedes obtener más información sobre este enfoque para crear una cuadrícula en el módulo Aprender a diseñar cuadrículas en Cuadrículas flexibles con la unidad fr.

- -
.container {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-} 
-
- -
-

Nota: La versión del diseño de página en cuadrícula es aún más simple, ya que podemos definir las columnas en .wrapper: ejemplo, código fuente.

-
- -

Imágenes responsivas

- -

El enfoque más simple para las imágenes responsivas es el que se describe en los primeros artículos de Marcotte sobre diseño responsivo. Básicamente, tomar una imagen que tenga el tamaño más grande que puedas necesitar, y reducirla. Este continúa siendo un enfoque utilizado hoy en día, y en la mayoría de las hojas de estilo encontrarás en alguna parte el CSS siguiente:

- -
img {
-  max-width: 100%:
-} 
-
- -

Hay inconvenientes obvios en este enfoque. La imagen puede mostrarse mucho más pequeña que su tamaño intrínseco, lo que representa una pérdida de ancho de banda: un usuario de dispositivo móvil puede descargar una imagen que sea varias veces el tamaño de lo que ve en realidad en la ventana del navegador. Además, es posible que no desees la misma relación de aspecto de la imagen en dispositivos móviles y en ordenadores de escritorio. Por ejemplo, podría ser bueno tener una imagen cuadrada para dispositivos móviles, pero mostrar la misma escena que una imagen horizontal en el escritorio. O bien es posible que, reconociendo el tamaño más pequeño de una imagen en dispositivos móviles, desees mostrar una imagen diferente, que se entienda mejor en un tamaño de pantalla pequeño. Estas cosas no se pueden lograr simplemente reduciendo una imagen.

- -

Las imágenes responsivas, que utilizan el elemento {{htmlelement ("picture")}} y los atributos {{htmlelement ("img")}} srcset y sizes resuelven ambos problemas. Puedes proporcionar varios tamaños junto con «sugerencias» (metadatos que describen el tamaño de pantalla y la resolución para que la imagen sea la más adecuada), y el navegador elije la imagen que resulta más adecuada para cada dispositivo, y se asegura de que el usuario descarga un tamaño de imagen apropiado para el dispositivo que utiliza.

- -

También puedes usar imágenes de director artístico, que proporcionan un recorte o una imagen completamente diferente para diferentes tamaños de pantalla.

- -

Puedes encontrar una guía detallada de imágenes responsivas en el artículo sobre Aprender HTML en MDN.

- -

Tipografía responsiva

- -

Un elemento de diseño responsivo que todavía no hemos tratado en trabajos anteriores es la idea de la tipografía responsiva. Este concepto describe esencialmente el hecho de cambiar el tamaño de letra según el espacio de pantalla que reflejan las consultas a media.

- -

En este ejemplo, queremos establecer que nuestro encabezado de nivel 1 sea 4rem, lo que significa que será cuatro veces nuestro tamaño de letra base. ¡Es un título muy grande! Solo queremos este título de encabezado gigante en los tamaños de pantalla más grandes, por lo tanto, primero creamos un título de encabezado más pequeño y luego usamos las consultas a los media para sobrescribirlo con el tamaño más grande si sabemos que el usuario tiene un tamaño de pantalla de al menos 1200px.

- -
html {
-  font-size: 1em;
-}
-
-h1 {
-  font-size: 2rem;
-}
-
-@media (min-width: 1200px) {
-  h1 {
-    font-size: 4rem;
-  }
-} 
-
- -

Hemos editado nuestro ejemplo anterior de cuadrícula responsiva para incluir también el tipo de respuesta utilizando el método descrito. Puedes ver cómo el título de encabezado cambia de tamaño cuando el diseño para a la versión de dos columnas.

- -

En la versión para dispositivo móvil, el encabezado es más pequeño:

- -
Un diseño de elementos apilados en columna con un tamaño de título de encabezado pequeño. -
-
- -

Sin embargo, en las versiones de escritorio vemos un tamaño de título de encabezado más grande:

- -
Un diseño en dos columnas con un título grande. -
-
- -
-

Nota: Observa este ejemplo en: ejemplo, código fuente.

-
- -

Como muestra este enfoque sobre la tipografía, no es necesario restringir las consultas a medios a cambiar solo el diseño de página. Se pueden usar para ajustar cualquier elemento y hacerlo más útil o atractivo según los diversos tamaños de pantalla.

- -

El uso de unidades de ventana gráfica para tipografía responsiva

- -

Un enfoque interesante es utilizar las unidades de ventana gráfica vw para habilitar la tipografía responsiva. 1vw es igual al uno por ciento del ancho de la ventana gráfica, lo que significa que si configuras el tamaño del tipo de letra con vw, siempre estará en relación con el tamaño de la ventana gráfica.

- -
h1 {
-  font-size: 6vw;
-}
- -

El problema de hacer esto es que el usuario pierde la posibilidad de ampliar cualquier conjunto de texto configurado en unidades vw, porque ese texto siempre está en relación con el tamaño de la ventana gráfica. Por lo tanto, nunca hay que establecer texto utilizando solo unidades de ventana.

- -

Hay una solución, que implica el uso de la función calc(). Si añades la unidad vw a un valor establecido con un tamaño fijo, como em o rem, el texto continúa siendo ampliable. Esencialmente, la unidad vw se añade sobre ese valor ampliado:

- -
h1 {
-  font-size: calc(1.5rem + 3vw);
-}
- -

Esto significa que necesitamos especificar el tamaño de letra para el título de encabezado una sola vez, en lugar de configurarlo para dispositivos móviles y redefinirlo en las consultas a medios. Luego, el tipo de letra aumenta gradualmente a medida que aumenta el tamaño de la ventana gráfica.

- -
-

Observa un ejemplo en: ejemplo, código fuente.

-
- -

La metaetiqueta viewport

- -

Si observas el tipo de letra de una página HTML responsiva, en general vas a encontrar la siguiente etiqueta {{htmlelement ("meta")}} en la cabecera del documento.

- -
<meta name="viewport" content="width=device-width,initial-scale=1">
-
- -

Esta metaetiqueta informa a los navegadores de los dispositivos móviles que deben establecer el ancho de la ventana gráfica al ancho del dispositivo y escalar el documento al 100% de ese tamaño, de modo que el documento se mostrará al tamaño optimizado para esos dispositivos móviles.

- -

¿Por qué esto es necesario? Porque los navegadores de los dispositivos móviles tienden a mentir sobre el ancho de su ventana gráfica.

- -

Esta metaetiqueta existe porque cuando se lanzó el iPhone original y la gente comenzó a ver sitios web en una pequeña pantalla de teléfono móvil, la mayoría de los sitios web no estaban optimizados para dispositivos móviles. Por lo tanto, el navegador móvil establecía el ancho de la ventana gráfica en 960 píxeles, representaba la página con ese ancho y mostraba el resultado como una versión reducida del diseño del escritorio. Otros navegadores de dispositivos móviles (por ejemplo, en Google Android) hicieron lo mismo. Los usuarios podían acercarse y desplazarse por el sitio web para ver las partes que les interesaban, pero se veía mal. Todavía verás esto hoy en día si tienes la desgracia de encontrarte con un sitio web que no tiene un diseño de página responsivo.

- -

El problema es que tu diseño responsivo con puntos de interrupción y consultas a media no va a funcionar según lo previsto en los navegadores de dispositivos móviles, si tienes un diseño de pantalla estrecho que se inicia con un ancho de ventana de 480px o menos, pero la ventana gráfica está configurada en 960px. E cambio, al configurar width=device-width anulas el ancho predeterminado width=960px de Apple con el ancho real del dispositivo, y tus consultas a media funcionarán según lo previsto.

- -

Por lo tanto, siempre debes incluir la línea de HTML anterior en la cabecera de tus documentos.

- -

Con la metaetiqueta viewport puedes usar otras configuraciones, aunque, en general vas a querer usar la línea anterior.

- - - -

Deberías evitar el uso de minimum-scale y maximum-scale, y en particular establecer user-scalable en no. Hay que permitir a los usuarios hacer zoom tanto o tan poco como lo necesiten; evitarlo provoca problemas de accesibilidad.

- -
-

Nota: Hay una @regla CSS establecida para reemplazar la metaetiqueta viewport: @viewport. Sin embargo, tiene poca compatibilidad con los navegadores. Se implementó en Internet Explorer y Edge, pero una vez que se lance el navegador Edge basado en Chromium, dejará de formar parte del navegador Edge.

-
- -

Resumen

- -

El diseño responsivo se refiere a un diseño página de un sitio web o una aplicación que responde al entorno en el que se visualiza. Abarca una serie de características y técnicas de CSS y HTML, y ahora es esencialmente el modo como construimos los sitios web de forma predeterminada. Piensa en los sitios web que visitas con tu dispositivo móvil; probablemente sea inusual encontrar un sitio web que tenga la versión de escritorio reducida o en que necesites desplazarse hacia los lados para encontrar las cosas. Esto se debe a que la web se ha movido a este enfoque de diseño responsivo.

- -

Además, lograr diseños responsivos se ha vuelto mucho más fácil con la ayuda de los métodos de diseño que has aprendido en estos artículos. Si eres nuevo en el desarrollo web, hoy tienes muchas más herramientas a tu disposición que en los primeros días del diseño de página responsivo. Por lo tanto, vale la pena verificar la antigüedad de los materiales que consultas. Si bien los artículos históricos continúan siendo útiles, el uso moderno de CSS y HTML facilita mucho la creación de diseños elegantes y útiles, sin importar con qué dispositivo el visitante visita el sitio.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}

- -

En este módulo

- - diff --git a/files/es/learn/css/css_layout/flujo_normal/index.html b/files/es/learn/css/css_layout/flujo_normal/index.html deleted file mode 100644 index ffc873938f..0000000000 --- a/files/es/learn/css/css_layout/flujo_normal/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Flujo normal -slug: Learn/CSS/CSS_layout/Flujo_normal -translation_of: Learn/CSS/CSS_layout/Normal_Flow ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

Este artículo explica el flujo normal, o la forma en que se presentan los elementos de la página web si no cambias su compaginación.

- - - - - - - - - - - - -
Prerrequisitos:Conceptos básicos de HTML (véase Introducción al HTML) y nociones de cómo funciona el CSS (véase Introducción al CSS).
Objetivo:Conocer cómo los navegadores presentan de forma predeterminada las páginas web antes de comenzar a hacer cambios.
- -

Como se detalla en el último artículo de introducción al diseño, los elementos en una página web se distribuyen según el flujo normal si no se aplica ningún CSS que cambie la forma en la que se comportan. Y, como comenzamos a descubrir, puedes cambiar el comportamiento de los elementos, ya sea ajustando su posición en este flujo normal o eliminándolos de este por completo. Comenzar con un documento coherente y bien estructurado que sea legible en el flujo normal es la mejor manera de comenzar cualquier página web. Asegura que tu contenido sea legible, incluso si el usuario usa un navegador muy limitado o un dispositivo como un lector de pantalla que lee el contenido de la página. Además, como el flujo normal está diseñado para que un documento sea legible, al comenzar de esta manera, trabajas en el documento en lugar de luchar contra él a medida que haces cambios en su diseño.

- -

Antes de profundizar en los diferentes métodos de diseño, vale la pena revisar algunas de las cosas que ya debes haber estudiado en artículos anteriores con respecto al flujo normal de los documentos.

- -

¿Cómo se presentan por defecto los elementos?

- -

En primer lugar, se toma de las cajas de cada uno de los elementos el contenido, luego se añade cualquier área de relleno, borde y margen alrededor de ellas; es el modelo de cajas que hemos visto antes.

- -

De manera predeterminada, el contenido de un elemento de nivel de bloque es el 100% del ancho de su elemento padre y su altura viene determinada por su contenido. Los elementos en línea tienen su altura y anchura determinados por su contenido. No puedes establecer el ancho o la altura de los elementos en línea, simplemente se ubican dentro del contenido de los elementos de nivel de bloque. Si deseas controlar el tamaño de un elemento en línea de esta manera, debes configurarlo para que se comporte como un elemento de nivel de bloque con display: block; (o incluso, display: inline-block;, que combina características de ambos).

- -

Esto explica los elementos individuales, pero ¿qué hay del modo como los elementos interactúan entre sí? El flujo de diseño normal (mencionado en el artículo de introducción al diseño) es el sistema mediante el cual los elementos se colocan en la ventana gráfica del navegador. De manera predeterminada, los elementos de nivel de bloque se presentan en la dirección del flujo del bloque, en función del modo de escritura de los padres (initial: horizontal-tb): cada uno aparecerá en una línea nueva debajo de la última, y estarán separados por cualquier margen que se establezca en ellos. Por lo tanto, en inglés, o en cualquier otro modo de escritura horizontal y de arriba a abajo, los elementos de nivel de bloque se disponen verticalmente.

- -

Los elementos en línea se comportan de manera diferente: no aparecen en líneas nuevas; en su lugar, se asientan en la misma línea entre sí y con cualquier contenido de texto adyacente (o envuelto), siempre que tengan espacio dentro del ancho del elemento de nivel de bloque primario. Si no hay espacio, el texto o los elementos que desborden bajarán a la línea siguiente.

- -

Si dos elementos adyacentes tienen algún margen configurado y los dos márgenes se tocan, se mantiene el mayor de los dos y el menor desaparece; esto se llama colapso del margen, y ya lo hemos visto antes.

- -

Echemos un vistazo a un ejemplo sencillo que explica todo esto:

- -
-
<h1>Flujo de los documentos básicos</h1>
-
-<p>Soy un elemento básico de nivel de bloque. Mis elementos de nivel de bloque adyacentes se encuentran en líneas nuevas debajo de mí.</p>
-
-<p>Cubrimos por defecto el 100% del ancho de nuestro elemento principal, y somos tan altos como nuestro contenido secundario. Nuestro ancho y alto total es nuestro contenido + área de relleno + ancho/alto del borde.</p>
-
-<p>Estamos separados por nuestros márgenes. Debido al colapso del margen, estamos separados por el ancho de uno de nuestros márgenes, no por ambos.</p>
-
-<p>Los elementos en línea <span>como este</span> y <span>este otro</span> se ubican en la misma y la de los nodos de texto adyacentes, mientras hay espacio en la misma línea. Si un elemento en línea desborda, <span>sigue por la línea siguiente, si es posible (como la que contiene este texto)</span>, o simplemente pasa a una línea nueva, como hace esta imagen: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-  background: rgba(255,84,104,0.3);
-  border: 2px solid rgb(255,84,104);
-  padding: 10px;
-  margin: 10px;
-}
-
-span {
-  background: white;
-  border: 1px solid black;
-}
-
- -

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

- -

Resumen

- -

Ahora que comprendes el flujo normal y cómo el navegador presenta las cosas por defecto, continúa para comprender cómo cambiar esta pantalla predeterminada para crear el diseño que necesitas.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

En este módulo

- - diff --git "a/files/es/learn/css/css_layout/introducci\303\263n/index.html" "b/files/es/learn/css/css_layout/introducci\303\263n/index.html" deleted file mode 100644 index 2f409d97c3..0000000000 --- "a/files/es/learn/css/css_layout/introducci\303\263n/index.html" +++ /dev/null @@ -1,701 +0,0 @@ ---- -title: Introducción al diseño en CSS -slug: Learn/CSS/CSS_layout/Introducción -translation_of: Learn/CSS/CSS_layout/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}
- -

Este artículo resumirá algunas de las características de diseño de páginas web con CSS que ya hemos mencionado en módulos anteriores, como los diferentes valores de {{cssxref ("display")}}, e introducirá algunos de los conceptos que vamos a tratar en este módulo.

- - - - - - - - - - - - -
Prerrequisitos:Conceptos básicos de HTML (véase Introducción al HTML) y nociones de cómo funciona el CSS (véase Introducción al CSS).
Objetivo:Proporcionar una visión general de las técnicas de diseño de páginas web con CSS. Cada técnica se puede aprender con mayor detalle en tutoriales posteriores.
- -

Las técnicas de diseño de páginas web con CSS nos permiten controlar dónde se ubican los elementos que están contenidos en una página web en relación con su posición predeterminada en el flujo de diseño normal, así como el resto de elementos a su alrededor, su contenedor principal o la vista/ventana principal. Las técnicas de diseño de páginas web que trataremos con más detalle en este módulo son:

- - - -

Cada técnica tiene sus usos, ventajas y desventajas, y ninguna técnica está diseñada para usarse de forma aislada. Si entiendes para qué se ha diseñado cada método, te será fácil comprender cuál es la mejor herramienta de diseño para cada tarea.

- -

Flujo normal

- -

El flujo normal es el modo como el navegador presenta las páginas HTML de forma predeterminada cuando no haces nada para controlar el diseño de página. Echemos un vistazo rápido a un ejemplo HTML:

- -
<p>Amo a mi gato.</p>
-
-<ul>
-  <li>Comprar comida para gatos</li>
-  <li>Ejercicio</li>
-  <li>Anímate amigo</li>
-</ul>
-
-<p>¡Fin!</p>
- -

Por defecto, el navegador mostrará este código de la manera siguiente:

- -

{{ EmbedLiveSample('Normal_flow', '100%', 200) }}

- -

Observa aquí cómo se muestra el HTML en el orden exacto en que aparece en el código fuente, con los elementos uno debajo del otro: el primer párrafo, seguido de la lista desordenada, y a continuación el segundo párrafo.

- -

Los elementos que aparecen uno debajo del otro se describen como elementos de bloque, en contraposición con los elementos de línea, que aparecen uno al lado del otro, como las palabras de un párrafo.

- -
-

Nota: La dirección en la que se presentan los contenidos de un elemento de bloque se describe como dirección de los bloques. La dirección de los bloques va de arriba a abajo en un idioma como el español, cuyo modo de escritura es horizontal. Sería horizontal en cualquier idioma con un modo de escritura vertical, como el japonés. Correspondientemente, la dirección de línea es la dirección en la que los contenidos de línea (por ejemplo, una frase) se disponen.

-
- -

Cuando usas CSS para crear un diseño de página web, alejas los elementos del flujo normal, pero para muchos de los elementos de tu página, el flujo normal proporciona exactamente el diseño que necesitas. Por esta razón resulta tan importante comenzar con un documento HTML bien estructurado, porque te permite trabajar ya con la forma en que las cosas se presentan por defecto, en lugar de tener que luchar contra ello.

- -

Los métodos que permiten cambiar la disposición de los elementos en CSS son los siguientes:

- - - -

La propiedad display

- -

Los métodos principales para lograr el diseño de páginas web con CSS son todos los valores de la propiedad display. Esta propiedad permite cambiar la forma predeterminada en que algo se muestra. Todo en flujo normal tiene un valor de display, utilizado como la forma como se comportan por defecto los elementos en los que están configurados. Por ejemplo, el hecho de que los párrafos en español se muestran uno debajo del otro se debe a que presentan la configuración display: block. Si creas un enlace alrededor de un texto dentro de un párrafo, ese enlace permanece en línea con el resto del texto y no se divide al pasar a una línea nueva. Esto se debe a que el elemento {{htmlelement ("a")}} es por defecto display: inline.

- -

Puedes cambiar este comportamiento predeterminado de visualización (display). Por ejemplo, el elemento {{htmlelement ("li")}} es display: block de forma predeterminada, lo que significa que los elementos de la lista se muestran uno debajo del otro en nuestro documento en español. Si cambiamos el valor de visualización a inline, ahora se muestran uno al lado del otro, como lo harían las palabras de una frase. El hecho de que puedas cambiar el valor de display de cualquier elemento significa que puedes elegir elementos HTML por su significado semántico, sin preocuparte por cómo se verán. La forma en que se ven es algo que puedes cambiar.

- -

Además de poder cambiar la presentación predeterminada de un elemento block a un elemento inline y viceversa, hay algunos métodos de diseño de página más poderosos que se inician como un valor de display. Sin embargo, cuando los uses, en general vas a necesitar propiedades adicionales. Los dos valores más importantes para nuestros propósitos cuando hablamos del diseño de páginas web son display: flex y display: grid.

- -

Flexbox

- -

Flexbox es el nombre corto del módulo de diseño de cajas flexibles, pensado para facilitarnos la distribución de las cosas en una dimensión, ya sea como una fila o como una columna. Para usar el método Flexbox, aplica display: flex al elemento padre de los elementos que deseas distribuir; todos sus elementos hijo directos se convierten en elementos flexibles. Vamos a verlo en un ejemplo sencillo.

- -

El marcado HTML siguiente nos proporciona un elemento contenedor con una clase wrapper dentro del cual hay tres elementos {{htmlelement ("div")}}. Por defecto, estos elementos se mostrarían como elementos de bloque, uno debajo del otro, en nuestro documento en español.

- -

Sin embargo, si añadimos display: flex al elemento padre, los tres elementos se organizan en columnas. Esto se debe a que se convierten en elementos flexibles y se ven afectados por algunos valores iniciales que el método Flexbox establece en el contenedor flexible. Se muestran en una fila porque el valor inicial de {{cssxref ("flex-direction")}} establecido en su elemento padre es row. Todos parecen expandirse hasta la altura del elemento de más altura, porque el valor inicial de la propiedad {{cssxref ("align-items")}} establecida en su elemento primario es stretch. Esto significa que los artículos se expanden hasta la altura del contenedor flexible, que en este caso está definida por el artículo de mayor altura. Todos los artículos se alinean al comienzo del contenedor y dejan el espacio que sobra al final de la fila.

- -
- - -
.wrapper {
-  display: flex;
-}
-
- -
<div class="wrapper">
-  <div class="box1">Uno</div>
-  <div class="box2">Dos</div>
-  <div class="box3">Tres</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Flex_1', '300', '200') }}

- -

Además de las propiedades anteriores, que pueden aplicarse a contenedores flexibles, también hay propiedades que pueden aplicarse a los elementos flexibles. Estas propiedades, entre otras cosas, pueden cambiar el comportamiento de estos elementos flexibles y permitirles expandirse y contraerse para adaptarse al espacio disponible.

- -

Como un ejemplo sencillo de esto podemos añadir la propiedad {{cssxref ("flex")}} a todos nuestros elementos secundarios, con un valor de 1. Esto hará que todos los elementos crezcan y llenen el contenedor, en lugar de dejar espacio al final. Si hay más espacio, los artículos se ensancharán; si hay menos espacio, se volverán más estrechos. Además, si añades al código otro elemento, todos los elementos se volverán más pequeños para dejarle espacio; ajustarán el tamaño para ocupar la misma cantidad de espacio, cualquiera que sea.

- -
- - -
.wrapper {
-    display: flex;
-}
-
-.wrapper > div {
-    flex: 1;
-}
-
- -
<div class="wrapper">
-    <div class="box1">Uno</div>
-    <div class="box2">Dos</div>
-    <div class="box3">Tres</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Flex_2', '300', '200') }}

- -
-

Nota: Esta ha sido una breve introducción de lo que permite el método Flexbox. Para obtener más información, consulta nuestro artículo sobre Flexbox.

-
- -

Diseño de cuadrícula

- -

Mientras que el método Flexbox está pensado para distribuir elementos unidimensionalmente, el diseño de cuadrícula está diseñado para distribuir elementos en dos dimensiones: alinear elementos en filas y columnas.

- -

Una vez más, puedes activar el diseño de páginas web en cuadrícula con un valor de visualización específico: display: grid. El ejemplo siguiente utiliza un marcado similar al del ejemplo del método Flexbox, con un contenedor y algunos elementos secundarios. Además de usar display: grid, también definimos algunos tramos de filas y columnas en el elemento padre con las propiedades {{cssxref("grid-template-rows")}} y {{cssxref("grid-template-columns")}}. Hemos definido tres columnas, cada una de 1fr, y dos filas de 100px. No necesitamos poner ninguna regla sobre los elementos secundarios porque se colocan automáticamente en las celdas que nuestra cuadrícula ha creado.

- -
- - -
.wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 100px;
-    grid-gap: 10px;
-}
-
- -
<div class="wrapper">
-    <div class="box1">Uno</div>
-    <div class="box2">Dos</div>
-    <div class="box3">Tres</div>
-    <div class="box4">Cuatro</div>
-    <div class="box5">Cinco</div>
-    <div class="box6">Seis</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Grid_1', '300', '330') }}

- -

Cuando ya tienes una cuadrícula, se puede colocar tus elementos en ella explícitamente en lugar de confiar en el comportamiento de colocación automática que hemos visto arriba. En el segundo ejemplo, hemos definido la misma cuadrícula, pero esta vez con tres elementos secundarios. Hemos establecido la línea de inicio y final de cada elemento con las propiedades {{cssxref ("grid-column")}} y {{cssxref ("grid-row")}}. Esto hace que los elementos abarquen varios tramos.

- -
- - -
.wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 100px;
-    grid-gap: 10px;
-}
-
-.box1 {
-    grid-column: 2 / 4;
-    grid-row: 1;
-}
-
-.box2 {
-    grid-column: 1;
-    grid-row: 1 / 3;
-}
-
-.box3 {
-    grid-row: 2;
-    grid-column: 3;
-}
-
- -
<div class="wrapper">
-    <div class="box1">Uno</div>
-    <div class="box2">Dos</div>
-    <div class="box3">Tres</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Grid_2', '300', '330') }}

- -
-

Nota: Estos dos ejemplos son solo una pequeña parte del poder del diseño de cuadrículas; para obtener más información, consulta nuestro artículo sobre Diseñar cuadrículas.

-
- -

El resto de esta guía expone otros métodos de diseño de páginas web que son menos importantes para las estructuras principales de diseño de tu página web, pero que pueden serte de ayuda para tareas específicas. Si entiendes la naturaleza de cada una de las tareas de diseño de una página web, vas a descubrir enseguida que a menudo vas a ser capaz de discernir qué tipo de diseño se adapta mejor a cada componente de tu diseño particular.

- -

Floats

- -

El método de flotación de un elemento cambia el comportamiento de ese elemento y de los elementos de nivel de bloque que lo siguen en el flujo normal. El elemento es desplazado hacia la izquierda o hacia la derecha y es eliminado del flujo normal, y el contenido circundante flota alrededor de este elemento.

- -

La propiedad {{cssxref ("float")}} tiene cuatro valores posibles:

- - - -

En el ejemplo siguiente, establecemos una flotación a la izquierda para un elemento <div> y le damos un {{cssxref ("margin")}} a la derecha para mantener el texto alejado del elemento. Esto nos da el efecto del texto envuelto alrededor de ese cuadro, y es la mayor parte de lo que necesitas saber sobre la flotación, tal como se utiliza en el diseño web moderno.

- -
- - -
<h1>Ejemplo sencillo de flotación</h1>
-
-<div class="box">Float</div>
-
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-
- -
-.box {
-    float: left;
-    width: 150px;
-    height: 150px;
-    margin-right: 30px;
-}
-
-
- -

{{ EmbedLiveSample('Float_1', '100%', 600) }}

- -
-

Nota: El método de flotación se explica al completo en nuestro artículo sobre las propiedades float y clear. El método de flotación es el que se usaba para crear diseños de columnas antes de la aparición de técnicas como los métodos Flexbox y diseño en rejillas. En la red aún puedes toparte con estos métodos. Vamos a exponer todo esto en el artículo sobre métodos de diseño heredados.

-
- -

Técnicas de posicionamiento

- -

El posicionamiento permite mover un elemento desde donde se colocaría cuando está en flujo normal a otra ubicación. El posicionamiento no es un método para crear diseños de página principal, se trata más bien de administrar y ajustar la posición de elementos específicos en la página.

- -

Sin embargo, hay técnicas útiles para ciertos patrones de diseños de páginas web que se basan en la propiedad {{cssxref ("position")}}. Comprender el posicionamiento también ayuda a comprender el flujo normal y qué implica sacar un elemento del flujo normal.

- -

Hay cinco tipos de posicionamiento que debes conocer:

- - - -

Ejemplo sencillo de posicionamiento

- -

Para familiarizarte con estas técnicas de diseño de página, te mostraremos un par de ejemplos rápidos. Todos nuestros ejemplos contarán con el mismo HTML, que es el siguiente:

- -
<h1>Posicionamiento</h1>
-
-<p>Soy un elemento básico de nivel de bloque.</p>
-<p class="positioned">Soy un elemento básico de nivel de bloque.</p>
-<p>Soy un elemento básico de nivel de bloque.</p>
- -

Aplicaremos a este HTML un estilo predeterminado definido por el CSS siguiente:

- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-    background-color: rgb(207,232,220);
-    border: 2px solid rgb(79,185,227);
-    padding: 10px;
-    margin: 10px;
-    border-radius: 5px;
-}
-
- -

La salida que se obtiene es la siguiente:

- -

{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}

- -

El posicionamiento relativo

- -

El posicionamiento relativo permite compensar un elemento desde la posición por defecto que tendría en flujo normal. Esto significa que podrías hacer una tarea como mover un icono un poco hacia abajo para que se alinee con una etiqueta de texto. Para ello, podríamos añadir la regla de posicionamiento relativo siguiente:

- -
.positioned {
-  position: relative;
-  top: 30px;
-  left: 30px;
-}
- -

Aquí asignamos el valor relative a la propiedad {{cssxref ("position")}} de nuestro párrafo del medio: esto no hace nada por sí solo, así que también añadimos las propiedades {{cssxref ("top")}} y {{cssxref ( "left")}}, que sirven para mover el elemento afectado hacia abajo y a la derecha. Esto puede parecer lo contrario de lo que esperabas, pero debes pensar en ello como un elemento al que se empuja por sus lados superior e izquierdo, lo que resulta en un movimiento a la derecha y abajo.

- -

Añadir este código dará el resultado siguiente:

- -
- - -
.positioned {
-  position: relative;
-  background: rgba(255,84,104,.3);
-  border: 2px solid rgb(255,84,104);
-  top: 30px;
-  left: 30px;
-}
-
- -

{{ EmbedLiveSample('Relative_1', '100%', 300) }}

- -

El posicionamiento absoluto

- -

El posicionamiento absoluto se utiliza para eliminar por completo un elemento del flujo normal y colocarlo mediante desplazamientos desde los bordes de un bloque contenedor.

- -

Volviendo a nuestro ejemplo original no posicionado, podríamos añadir la regla CSS siguiente para implementar el posicionamiento absoluto:

- -
.positioned {
-  position: absolute;
-  top: 30px;
-  left: 30px;
-}
- -

Aquí le damos a la propiedad {{cssxref ("position")}} de nuestro párrafo del medio un valor de absolute, y le asignamos las mismas propiedades {{cssxref ("top")}} y {{cssxref ("left")}}. Sin embargo, ahora añadir este código da el resultado siguiente:

- -
- - -
.positioned {
-    position: absolute;
-    background: rgba(255,84,104,.3);
-    border: 2px solid rgb(255,84,104);
-    top: 30px;
-    left: 30px;
-}
-
- -

{{ EmbedLiveSample('Absolute_1', '100%', 300) }}

- -

¡Este resultado es muy diferente! El elemento posicionado ahora se ha separado por completo del resto del diseño de la página y se superpone encima de este. Los otros dos párrafos ahora se asientan juntos, como si su hermano con posicionamiento absoluto no existiera. Las propiedades {{cssxref ("top")}} y {{cssxref ("left")}} tienen un efecto diferente en elementos con posicionamiento absoluto que en elementos con posicionamiento relativo. En este caso, los desplazamientos se han calculado desde la parte superior e izquierda de la página. Es posible cambiar el elemento padre para que se convierta en este tipo de contenedor, y lo veremos en el artículo sobre posicionamiento.

- -

Posicionamiento fijo

- -

El posicionamiento fijo elimina nuestro elemento del flujo de documentos de la misma manera que el posicionamiento absoluto. Sin embargo, en lugar de contar los desplazamientos en relación con el contenedor, se cuentan con respecto a la ventana gráfica. Como el elemento permanece fijo en relación con la ventana gráfica, podemos crear efectos como un menú que permanece fijo mientras la página se desplaza por debajo de él.

- -

En este ejemplo nuestro HTML tiene tres párrafos de texto para poder tener una página que se desplace, y un cuadro al que asignamos la propiedad position: fixed.

- -
<h1>Posicionamiento fijo</h1>
-
-<div class="positioned">Fijo</div>
-
-<p>Párrafo 1.</p>
-<p>Párrafo 2.</p>
-<p>Párrafo 3.</p>
-
- -
- - -
.positioned {
-    position: fixed;
-    top: 30px;
-    left: 30px;
-}
-
- -

{{ EmbedLiveSample('Fixed_1', '100%', 200) }}

- -

Posicionamiento pegajoso

- -

El posicionamiento pegajoso es el último método de posicionamiento que tenemos a nuestra disposición. Mezcla el posicionamiento estático predeterminado con el posicionamiento fijo. Cuando un elemento tiene la propiedad position: sticky, se desplaza en flujo normal hasta que se alcanzan los desplazamientos con respecto a la ventana gráfica que hemos definido. En ese punto se queda «atascado» como si tuviera configurado un valor position: fixed.

- -
- - -
.positioned {
-  position: sticky;
-  top: 30px;
-  left: 30px;
-}
-
- -

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

- -
-

Nota: para obtener más información sobre el posicionamiento, consulta nuestro artículo Posicionamiento.

-
- -

Diseño de tablas

- -

Las tablas HTML sirven para mostrar datos tabulados, pero hace muchos años, antes incluso de que el CSS básico fuera compatible de forma fiable en todos los navegadores, los desarrolladores web también usaban tablas para hacer el diseño completo de una página web, colocando en las diversas filas y columnas de una tabla los títulos de encabezado de la página, los pies de página, las diferentes columnas, etc. Esto funcionó en ese momento, pero presenta muchos problemas: los diseños de tabla no son flexibles, requieren mucho código de marcado, son difíciles de depurar y no son semánticamente correctos (por ejemplo, los usuarios de lectores de pantalla tienen problemas para navegar por estos diseños de página web con tablas).

- -

El aspecto que presenta una tabla en una página web cuando usas el código de marcado de una tabla se debe a un conjunto de propiedades CSS que definen el diseño de la tabla. Estas propiedades se pueden usar para diseñar elementos que no son tablas, un uso que a veces se describe como «usar tablas CSS».

- -

El ejemplo siguiente muestra uno de esos usos; el uso de tablas CSS para el diseño debe considerarse en este punto un método heredado, para aquellas situaciones en las que tienes navegadores muy antiguos que no son compatibles con los métodos Flexbox o Grid.

- -

Veamos un ejemplo. Primero, un código de marcado sencillo que crea un formulario HTML. Cada elemento de entrada tiene una etiqueta, y también hemos incluido un título dentro de un párrafo. Cada par etiqueta/entrada está delimitado por un elemento {{htmlelement ("div")}}, con fines de compaginación.

- -
<form>
-  <p>En primer lugar, díganos su nombre y edad.</p>
-  <div>
-    <label for="fname">Nombre:</label>
-    <input type="text" id="fname">
-  </div>
-  <div>
-    <label for="lname">Apellidos:</label>
-    <input type="text" id="lname">
-  </div>
-  <div>
-    <label for="age">Edad:</label>
-    <input type="text" id="age">
-  </div>
-</form>
- -

Ahora, el CSS para nuestro ejemplo. La mayor parte del CSS es bastante común, excepto por los usos de la propiedad {{cssxref ("display")}}. A los elementos {{htmlelement ("form")}}, {{htmlelement ("div")}}, {{htmlelement ("label")}} y {{htmlelement ("input")}} se les dice que se muestren como una tabla, filas de tabla y celdas de tabla, respectivamente; actuarán básicamente como marcas de tabla HTML, y lograrán por defecto la alineación perfecta de las etiquetas y las entradas. Todo lo que hay que hacer es añadir un poco de tamaños, márgenes, etc., para que todo se vea un poco mejor, ¡y listo!

- -

Observa que se la ha proporcionado al párrafo de encabezado display: table-caption;, lo que hace que actúe como una celda de encabezado ({{htmlelement ("caption")}}) de la tabla; y con caption-side: bottom; se le dice a la celda de encabezado que se asiente en la parte inferior de la tabla con fines de aplicación de estilo, aunque en el código fuente el marcado está antes que los elementos <input>. Esto permite un poco de flexibilidad.

- -
html {
-  font-family: sans-serif;
-}
-
-form {
-  display: table;
-  margin: 0 auto;
-}
-
-form div {
-  display: table-row;
-}
-
-form label, form input {
-  display: table-cell;
-  margin-bottom: 10px;
-}
-
-form label {
-  width: 200px;
-  padding-right: 5%;
-  text-align: right;
-}
-
-form input {
-  width: 300px;
-}
-
-form p {
-  display: table-caption;
-  caption-side: bottom;
-  width: 300px;
-  color: #999;
-  font-style: italic;
-}
- -

Esto nos da el resultado siguiente:

- -

{{ EmbedLiveSample('Table_layout', '100%', '170') }}

- -

También puedes ver este ejemplo en vivo en css-tables-example.html (ver el código fuente).

- -

Diseño en columnas

- -

El módulo de diseño en columnas nos proporciona un modo de distribuir el contenido en columnas, de forma similar al modo como el texto fluye en un periódico. Aunque en un contexto web leer en columnas de arriba a abajo no resulta tan útil porque podría obligar a los usuarios a tener que hacer desplazamientos de arriba a abajo, la técnica de organizar el contenido en columnas también puede tener su utilidad.

- -

Para convertir un bloque en un contenedor, utilizamos la propiedad {{cssxref ("column-count")}}, que le dice al navegador cuántas columnas nos gustaría tener, o {{cssxref ("column-width")}}, que le dice al navegador que llene el contenedor con tantas columnas de al menos ese ancho.

- -

En el ejemplo siguiente comenzamos con un bloque de HTML dentro de un elemento <div> que contiene una clase container.

- -
<div class="container">
-    <H1>Diseño en columnas</ h1>
-
-    <p>Párrafo 1.</p>
-    <p>Párrafo 2.</p>
-
-</div>
-
- -

Utilizamos un column-width de 200 píxeles en ese contenedor, que crea en el navegador tantas columnas de 200 píxeles como quepan en el contenedor y luego comparte el espacio restante entre las columnas creadas.

- -
- - -
    .container {
-        column-width: 200px;
-    }
-
- -

{{ EmbedLiveSample('Multicol_1', '100%', 200) }}

- -

Resumen

- -

Este artículo ha proporcionado un breve resumen de todas las tecnologías de diseño que debes conocer. ¡Sigue leyendo para obtener más información sobre cada tecnología individual!

- -

{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}

- -

En este módulo

- - diff --git a/files/es/learn/css/css_layout/introduction/index.html b/files/es/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..2f409d97c3 --- /dev/null +++ b/files/es/learn/css/css_layout/introduction/index.html @@ -0,0 +1,701 @@ +--- +title: Introducción al diseño en CSS +slug: Learn/CSS/CSS_layout/Introducción +translation_of: Learn/CSS/CSS_layout/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}
+ +

Este artículo resumirá algunas de las características de diseño de páginas web con CSS que ya hemos mencionado en módulos anteriores, como los diferentes valores de {{cssxref ("display")}}, e introducirá algunos de los conceptos que vamos a tratar en este módulo.

+ + + + + + + + + + + + +
Prerrequisitos:Conceptos básicos de HTML (véase Introducción al HTML) y nociones de cómo funciona el CSS (véase Introducción al CSS).
Objetivo:Proporcionar una visión general de las técnicas de diseño de páginas web con CSS. Cada técnica se puede aprender con mayor detalle en tutoriales posteriores.
+ +

Las técnicas de diseño de páginas web con CSS nos permiten controlar dónde se ubican los elementos que están contenidos en una página web en relación con su posición predeterminada en el flujo de diseño normal, así como el resto de elementos a su alrededor, su contenedor principal o la vista/ventana principal. Las técnicas de diseño de páginas web que trataremos con más detalle en este módulo son:

+ + + +

Cada técnica tiene sus usos, ventajas y desventajas, y ninguna técnica está diseñada para usarse de forma aislada. Si entiendes para qué se ha diseñado cada método, te será fácil comprender cuál es la mejor herramienta de diseño para cada tarea.

+ +

Flujo normal

+ +

El flujo normal es el modo como el navegador presenta las páginas HTML de forma predeterminada cuando no haces nada para controlar el diseño de página. Echemos un vistazo rápido a un ejemplo HTML:

+ +
<p>Amo a mi gato.</p>
+
+<ul>
+  <li>Comprar comida para gatos</li>
+  <li>Ejercicio</li>
+  <li>Anímate amigo</li>
+</ul>
+
+<p>¡Fin!</p>
+ +

Por defecto, el navegador mostrará este código de la manera siguiente:

+ +

{{ EmbedLiveSample('Normal_flow', '100%', 200) }}

+ +

Observa aquí cómo se muestra el HTML en el orden exacto en que aparece en el código fuente, con los elementos uno debajo del otro: el primer párrafo, seguido de la lista desordenada, y a continuación el segundo párrafo.

+ +

Los elementos que aparecen uno debajo del otro se describen como elementos de bloque, en contraposición con los elementos de línea, que aparecen uno al lado del otro, como las palabras de un párrafo.

+ +
+

Nota: La dirección en la que se presentan los contenidos de un elemento de bloque se describe como dirección de los bloques. La dirección de los bloques va de arriba a abajo en un idioma como el español, cuyo modo de escritura es horizontal. Sería horizontal en cualquier idioma con un modo de escritura vertical, como el japonés. Correspondientemente, la dirección de línea es la dirección en la que los contenidos de línea (por ejemplo, una frase) se disponen.

+
+ +

Cuando usas CSS para crear un diseño de página web, alejas los elementos del flujo normal, pero para muchos de los elementos de tu página, el flujo normal proporciona exactamente el diseño que necesitas. Por esta razón resulta tan importante comenzar con un documento HTML bien estructurado, porque te permite trabajar ya con la forma en que las cosas se presentan por defecto, en lugar de tener que luchar contra ello.

+ +

Los métodos que permiten cambiar la disposición de los elementos en CSS son los siguientes:

+ + + +

La propiedad display

+ +

Los métodos principales para lograr el diseño de páginas web con CSS son todos los valores de la propiedad display. Esta propiedad permite cambiar la forma predeterminada en que algo se muestra. Todo en flujo normal tiene un valor de display, utilizado como la forma como se comportan por defecto los elementos en los que están configurados. Por ejemplo, el hecho de que los párrafos en español se muestran uno debajo del otro se debe a que presentan la configuración display: block. Si creas un enlace alrededor de un texto dentro de un párrafo, ese enlace permanece en línea con el resto del texto y no se divide al pasar a una línea nueva. Esto se debe a que el elemento {{htmlelement ("a")}} es por defecto display: inline.

+ +

Puedes cambiar este comportamiento predeterminado de visualización (display). Por ejemplo, el elemento {{htmlelement ("li")}} es display: block de forma predeterminada, lo que significa que los elementos de la lista se muestran uno debajo del otro en nuestro documento en español. Si cambiamos el valor de visualización a inline, ahora se muestran uno al lado del otro, como lo harían las palabras de una frase. El hecho de que puedas cambiar el valor de display de cualquier elemento significa que puedes elegir elementos HTML por su significado semántico, sin preocuparte por cómo se verán. La forma en que se ven es algo que puedes cambiar.

+ +

Además de poder cambiar la presentación predeterminada de un elemento block a un elemento inline y viceversa, hay algunos métodos de diseño de página más poderosos que se inician como un valor de display. Sin embargo, cuando los uses, en general vas a necesitar propiedades adicionales. Los dos valores más importantes para nuestros propósitos cuando hablamos del diseño de páginas web son display: flex y display: grid.

+ +

Flexbox

+ +

Flexbox es el nombre corto del módulo de diseño de cajas flexibles, pensado para facilitarnos la distribución de las cosas en una dimensión, ya sea como una fila o como una columna. Para usar el método Flexbox, aplica display: flex al elemento padre de los elementos que deseas distribuir; todos sus elementos hijo directos se convierten en elementos flexibles. Vamos a verlo en un ejemplo sencillo.

+ +

El marcado HTML siguiente nos proporciona un elemento contenedor con una clase wrapper dentro del cual hay tres elementos {{htmlelement ("div")}}. Por defecto, estos elementos se mostrarían como elementos de bloque, uno debajo del otro, en nuestro documento en español.

+ +

Sin embargo, si añadimos display: flex al elemento padre, los tres elementos se organizan en columnas. Esto se debe a que se convierten en elementos flexibles y se ven afectados por algunos valores iniciales que el método Flexbox establece en el contenedor flexible. Se muestran en una fila porque el valor inicial de {{cssxref ("flex-direction")}} establecido en su elemento padre es row. Todos parecen expandirse hasta la altura del elemento de más altura, porque el valor inicial de la propiedad {{cssxref ("align-items")}} establecida en su elemento primario es stretch. Esto significa que los artículos se expanden hasta la altura del contenedor flexible, que en este caso está definida por el artículo de mayor altura. Todos los artículos se alinean al comienzo del contenedor y dejan el espacio que sobra al final de la fila.

+ +
+ + +
.wrapper {
+  display: flex;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">Uno</div>
+  <div class="box2">Dos</div>
+  <div class="box3">Tres</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_1', '300', '200') }}

+ +

Además de las propiedades anteriores, que pueden aplicarse a contenedores flexibles, también hay propiedades que pueden aplicarse a los elementos flexibles. Estas propiedades, entre otras cosas, pueden cambiar el comportamiento de estos elementos flexibles y permitirles expandirse y contraerse para adaptarse al espacio disponible.

+ +

Como un ejemplo sencillo de esto podemos añadir la propiedad {{cssxref ("flex")}} a todos nuestros elementos secundarios, con un valor de 1. Esto hará que todos los elementos crezcan y llenen el contenedor, en lugar de dejar espacio al final. Si hay más espacio, los artículos se ensancharán; si hay menos espacio, se volverán más estrechos. Además, si añades al código otro elemento, todos los elementos se volverán más pequeños para dejarle espacio; ajustarán el tamaño para ocupar la misma cantidad de espacio, cualquiera que sea.

+ +
+ + +
.wrapper {
+    display: flex;
+}
+
+.wrapper > div {
+    flex: 1;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Uno</div>
+    <div class="box2">Dos</div>
+    <div class="box3">Tres</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_2', '300', '200') }}

+ +
+

Nota: Esta ha sido una breve introducción de lo que permite el método Flexbox. Para obtener más información, consulta nuestro artículo sobre Flexbox.

+
+ +

Diseño de cuadrícula

+ +

Mientras que el método Flexbox está pensado para distribuir elementos unidimensionalmente, el diseño de cuadrícula está diseñado para distribuir elementos en dos dimensiones: alinear elementos en filas y columnas.

+ +

Una vez más, puedes activar el diseño de páginas web en cuadrícula con un valor de visualización específico: display: grid. El ejemplo siguiente utiliza un marcado similar al del ejemplo del método Flexbox, con un contenedor y algunos elementos secundarios. Además de usar display: grid, también definimos algunos tramos de filas y columnas en el elemento padre con las propiedades {{cssxref("grid-template-rows")}} y {{cssxref("grid-template-columns")}}. Hemos definido tres columnas, cada una de 1fr, y dos filas de 100px. No necesitamos poner ninguna regla sobre los elementos secundarios porque se colocan automáticamente en las celdas que nuestra cuadrícula ha creado.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Uno</div>
+    <div class="box2">Dos</div>
+    <div class="box3">Tres</div>
+    <div class="box4">Cuatro</div>
+    <div class="box5">Cinco</div>
+    <div class="box6">Seis</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_1', '300', '330') }}

+ +

Cuando ya tienes una cuadrícula, se puede colocar tus elementos en ella explícitamente en lugar de confiar en el comportamiento de colocación automática que hemos visto arriba. En el segundo ejemplo, hemos definido la misma cuadrícula, pero esta vez con tres elementos secundarios. Hemos establecido la línea de inicio y final de cada elemento con las propiedades {{cssxref ("grid-column")}} y {{cssxref ("grid-row")}}. Esto hace que los elementos abarquen varios tramos.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Uno</div>
+    <div class="box2">Dos</div>
+    <div class="box3">Tres</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_2', '300', '330') }}

+ +
+

Nota: Estos dos ejemplos son solo una pequeña parte del poder del diseño de cuadrículas; para obtener más información, consulta nuestro artículo sobre Diseñar cuadrículas.

+
+ +

El resto de esta guía expone otros métodos de diseño de páginas web que son menos importantes para las estructuras principales de diseño de tu página web, pero que pueden serte de ayuda para tareas específicas. Si entiendes la naturaleza de cada una de las tareas de diseño de una página web, vas a descubrir enseguida que a menudo vas a ser capaz de discernir qué tipo de diseño se adapta mejor a cada componente de tu diseño particular.

+ +

Floats

+ +

El método de flotación de un elemento cambia el comportamiento de ese elemento y de los elementos de nivel de bloque que lo siguen en el flujo normal. El elemento es desplazado hacia la izquierda o hacia la derecha y es eliminado del flujo normal, y el contenido circundante flota alrededor de este elemento.

+ +

La propiedad {{cssxref ("float")}} tiene cuatro valores posibles:

+ + + +

En el ejemplo siguiente, establecemos una flotación a la izquierda para un elemento <div> y le damos un {{cssxref ("margin")}} a la derecha para mantener el texto alejado del elemento. Esto nos da el efecto del texto envuelto alrededor de ese cuadro, y es la mayor parte de lo que necesitas saber sobre la flotación, tal como se utiliza en el diseño web moderno.

+ +
+ + +
<h1>Ejemplo sencillo de flotación</h1>
+
+<div class="box">Float</div>
+
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+
+
+ +
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+
+
+ +

{{ EmbedLiveSample('Float_1', '100%', 600) }}

+ +
+

Nota: El método de flotación se explica al completo en nuestro artículo sobre las propiedades float y clear. El método de flotación es el que se usaba para crear diseños de columnas antes de la aparición de técnicas como los métodos Flexbox y diseño en rejillas. En la red aún puedes toparte con estos métodos. Vamos a exponer todo esto en el artículo sobre métodos de diseño heredados.

+
+ +

Técnicas de posicionamiento

+ +

El posicionamiento permite mover un elemento desde donde se colocaría cuando está en flujo normal a otra ubicación. El posicionamiento no es un método para crear diseños de página principal, se trata más bien de administrar y ajustar la posición de elementos específicos en la página.

+ +

Sin embargo, hay técnicas útiles para ciertos patrones de diseños de páginas web que se basan en la propiedad {{cssxref ("position")}}. Comprender el posicionamiento también ayuda a comprender el flujo normal y qué implica sacar un elemento del flujo normal.

+ +

Hay cinco tipos de posicionamiento que debes conocer:

+ + + +

Ejemplo sencillo de posicionamiento

+ +

Para familiarizarte con estas técnicas de diseño de página, te mostraremos un par de ejemplos rápidos. Todos nuestros ejemplos contarán con el mismo HTML, que es el siguiente:

+ +
<h1>Posicionamiento</h1>
+
+<p>Soy un elemento básico de nivel de bloque.</p>
+<p class="positioned">Soy un elemento básico de nivel de bloque.</p>
+<p>Soy un elemento básico de nivel de bloque.</p>
+ +

Aplicaremos a este HTML un estilo predeterminado definido por el CSS siguiente:

+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+
+ +

La salida que se obtiene es la siguiente:

+ +

{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}

+ +

El posicionamiento relativo

+ +

El posicionamiento relativo permite compensar un elemento desde la posición por defecto que tendría en flujo normal. Esto significa que podrías hacer una tarea como mover un icono un poco hacia abajo para que se alinee con una etiqueta de texto. Para ello, podríamos añadir la regla de posicionamiento relativo siguiente:

+ +
.positioned {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}
+ +

Aquí asignamos el valor relative a la propiedad {{cssxref ("position")}} de nuestro párrafo del medio: esto no hace nada por sí solo, así que también añadimos las propiedades {{cssxref ("top")}} y {{cssxref ( "left")}}, que sirven para mover el elemento afectado hacia abajo y a la derecha. Esto puede parecer lo contrario de lo que esperabas, pero debes pensar en ello como un elemento al que se empuja por sus lados superior e izquierdo, lo que resulta en un movimiento a la derecha y abajo.

+ +

Añadir este código dará el resultado siguiente:

+ +
+ + +
.positioned {
+  position: relative;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Relative_1', '100%', 300) }}

+ +

El posicionamiento absoluto

+ +

El posicionamiento absoluto se utiliza para eliminar por completo un elemento del flujo normal y colocarlo mediante desplazamientos desde los bordes de un bloque contenedor.

+ +

Volviendo a nuestro ejemplo original no posicionado, podríamos añadir la regla CSS siguiente para implementar el posicionamiento absoluto:

+ +
.positioned {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}
+ +

Aquí le damos a la propiedad {{cssxref ("position")}} de nuestro párrafo del medio un valor de absolute, y le asignamos las mismas propiedades {{cssxref ("top")}} y {{cssxref ("left")}}. Sin embargo, ahora añadir este código da el resultado siguiente:

+ +
+ + +
.positioned {
+    position: absolute;
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    top: 30px;
+    left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Absolute_1', '100%', 300) }}

+ +

¡Este resultado es muy diferente! El elemento posicionado ahora se ha separado por completo del resto del diseño de la página y se superpone encima de este. Los otros dos párrafos ahora se asientan juntos, como si su hermano con posicionamiento absoluto no existiera. Las propiedades {{cssxref ("top")}} y {{cssxref ("left")}} tienen un efecto diferente en elementos con posicionamiento absoluto que en elementos con posicionamiento relativo. En este caso, los desplazamientos se han calculado desde la parte superior e izquierda de la página. Es posible cambiar el elemento padre para que se convierta en este tipo de contenedor, y lo veremos en el artículo sobre posicionamiento.

+ +

Posicionamiento fijo

+ +

El posicionamiento fijo elimina nuestro elemento del flujo de documentos de la misma manera que el posicionamiento absoluto. Sin embargo, en lugar de contar los desplazamientos en relación con el contenedor, se cuentan con respecto a la ventana gráfica. Como el elemento permanece fijo en relación con la ventana gráfica, podemos crear efectos como un menú que permanece fijo mientras la página se desplaza por debajo de él.

+ +

En este ejemplo nuestro HTML tiene tres párrafos de texto para poder tener una página que se desplace, y un cuadro al que asignamos la propiedad position: fixed.

+ +
<h1>Posicionamiento fijo</h1>
+
+<div class="positioned">Fijo</div>
+
+<p>Párrafo 1.</p>
+<p>Párrafo 2.</p>
+<p>Párrafo 3.</p>
+
+ +
+ + +
.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Fixed_1', '100%', 200) }}

+ +

Posicionamiento pegajoso

+ +

El posicionamiento pegajoso es el último método de posicionamiento que tenemos a nuestra disposición. Mezcla el posicionamiento estático predeterminado con el posicionamiento fijo. Cuando un elemento tiene la propiedad position: sticky, se desplaza en flujo normal hasta que se alcanzan los desplazamientos con respecto a la ventana gráfica que hemos definido. En ese punto se queda «atascado» como si tuviera configurado un valor position: fixed.

+ +
+ + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

+ +
+

Nota: para obtener más información sobre el posicionamiento, consulta nuestro artículo Posicionamiento.

+
+ +

Diseño de tablas

+ +

Las tablas HTML sirven para mostrar datos tabulados, pero hace muchos años, antes incluso de que el CSS básico fuera compatible de forma fiable en todos los navegadores, los desarrolladores web también usaban tablas para hacer el diseño completo de una página web, colocando en las diversas filas y columnas de una tabla los títulos de encabezado de la página, los pies de página, las diferentes columnas, etc. Esto funcionó en ese momento, pero presenta muchos problemas: los diseños de tabla no son flexibles, requieren mucho código de marcado, son difíciles de depurar y no son semánticamente correctos (por ejemplo, los usuarios de lectores de pantalla tienen problemas para navegar por estos diseños de página web con tablas).

+ +

El aspecto que presenta una tabla en una página web cuando usas el código de marcado de una tabla se debe a un conjunto de propiedades CSS que definen el diseño de la tabla. Estas propiedades se pueden usar para diseñar elementos que no son tablas, un uso que a veces se describe como «usar tablas CSS».

+ +

El ejemplo siguiente muestra uno de esos usos; el uso de tablas CSS para el diseño debe considerarse en este punto un método heredado, para aquellas situaciones en las que tienes navegadores muy antiguos que no son compatibles con los métodos Flexbox o Grid.

+ +

Veamos un ejemplo. Primero, un código de marcado sencillo que crea un formulario HTML. Cada elemento de entrada tiene una etiqueta, y también hemos incluido un título dentro de un párrafo. Cada par etiqueta/entrada está delimitado por un elemento {{htmlelement ("div")}}, con fines de compaginación.

+ +
<form>
+  <p>En primer lugar, díganos su nombre y edad.</p>
+  <div>
+    <label for="fname">Nombre:</label>
+    <input type="text" id="fname">
+  </div>
+  <div>
+    <label for="lname">Apellidos:</label>
+    <input type="text" id="lname">
+  </div>
+  <div>
+    <label for="age">Edad:</label>
+    <input type="text" id="age">
+  </div>
+</form>
+ +

Ahora, el CSS para nuestro ejemplo. La mayor parte del CSS es bastante común, excepto por los usos de la propiedad {{cssxref ("display")}}. A los elementos {{htmlelement ("form")}}, {{htmlelement ("div")}}, {{htmlelement ("label")}} y {{htmlelement ("input")}} se les dice que se muestren como una tabla, filas de tabla y celdas de tabla, respectivamente; actuarán básicamente como marcas de tabla HTML, y lograrán por defecto la alineación perfecta de las etiquetas y las entradas. Todo lo que hay que hacer es añadir un poco de tamaños, márgenes, etc., para que todo se vea un poco mejor, ¡y listo!

+ +

Observa que se la ha proporcionado al párrafo de encabezado display: table-caption;, lo que hace que actúe como una celda de encabezado ({{htmlelement ("caption")}}) de la tabla; y con caption-side: bottom; se le dice a la celda de encabezado que se asiente en la parte inferior de la tabla con fines de aplicación de estilo, aunque en el código fuente el marcado está antes que los elementos <input>. Esto permite un poco de flexibilidad.

+ +
html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 300px;
+  color: #999;
+  font-style: italic;
+}
+ +

Esto nos da el resultado siguiente:

+ +

{{ EmbedLiveSample('Table_layout', '100%', '170') }}

+ +

También puedes ver este ejemplo en vivo en css-tables-example.html (ver el código fuente).

+ +

Diseño en columnas

+ +

El módulo de diseño en columnas nos proporciona un modo de distribuir el contenido en columnas, de forma similar al modo como el texto fluye en un periódico. Aunque en un contexto web leer en columnas de arriba a abajo no resulta tan útil porque podría obligar a los usuarios a tener que hacer desplazamientos de arriba a abajo, la técnica de organizar el contenido en columnas también puede tener su utilidad.

+ +

Para convertir un bloque en un contenedor, utilizamos la propiedad {{cssxref ("column-count")}}, que le dice al navegador cuántas columnas nos gustaría tener, o {{cssxref ("column-width")}}, que le dice al navegador que llene el contenedor con tantas columnas de al menos ese ancho.

+ +

En el ejemplo siguiente comenzamos con un bloque de HTML dentro de un elemento <div> que contiene una clase container.

+ +
<div class="container">
+    <H1>Diseño en columnas</ h1>
+
+    <p>Párrafo 1.</p>
+    <p>Párrafo 2.</p>
+
+</div>
+
+ +

Utilizamos un column-width de 200 píxeles en ese contenedor, que crea en el navegador tantas columnas de 200 píxeles como quepan en el contenedor y luego comparte el espacio restante entre las columnas creadas.

+ +
+ + +
    .container {
+        column-width: 200px;
+    }
+
+ +

{{ EmbedLiveSample('Multicol_1', '100%', 200) }}

+ +

Resumen

+ +

Este artículo ha proporcionado un breve resumen de todas las tecnologías de diseño que debes conocer. ¡Sigue leyendo para obtener más información sobre cada tecnología individual!

+ +

{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/css/css_layout/normal_flow/index.html b/files/es/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..ffc873938f --- /dev/null +++ b/files/es/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,95 @@ +--- +title: Flujo normal +slug: Learn/CSS/CSS_layout/Flujo_normal +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

Este artículo explica el flujo normal, o la forma en que se presentan los elementos de la página web si no cambias su compaginación.

+ + + + + + + + + + + + +
Prerrequisitos:Conceptos básicos de HTML (véase Introducción al HTML) y nociones de cómo funciona el CSS (véase Introducción al CSS).
Objetivo:Conocer cómo los navegadores presentan de forma predeterminada las páginas web antes de comenzar a hacer cambios.
+ +

Como se detalla en el último artículo de introducción al diseño, los elementos en una página web se distribuyen según el flujo normal si no se aplica ningún CSS que cambie la forma en la que se comportan. Y, como comenzamos a descubrir, puedes cambiar el comportamiento de los elementos, ya sea ajustando su posición en este flujo normal o eliminándolos de este por completo. Comenzar con un documento coherente y bien estructurado que sea legible en el flujo normal es la mejor manera de comenzar cualquier página web. Asegura que tu contenido sea legible, incluso si el usuario usa un navegador muy limitado o un dispositivo como un lector de pantalla que lee el contenido de la página. Además, como el flujo normal está diseñado para que un documento sea legible, al comenzar de esta manera, trabajas en el documento en lugar de luchar contra él a medida que haces cambios en su diseño.

+ +

Antes de profundizar en los diferentes métodos de diseño, vale la pena revisar algunas de las cosas que ya debes haber estudiado en artículos anteriores con respecto al flujo normal de los documentos.

+ +

¿Cómo se presentan por defecto los elementos?

+ +

En primer lugar, se toma de las cajas de cada uno de los elementos el contenido, luego se añade cualquier área de relleno, borde y margen alrededor de ellas; es el modelo de cajas que hemos visto antes.

+ +

De manera predeterminada, el contenido de un elemento de nivel de bloque es el 100% del ancho de su elemento padre y su altura viene determinada por su contenido. Los elementos en línea tienen su altura y anchura determinados por su contenido. No puedes establecer el ancho o la altura de los elementos en línea, simplemente se ubican dentro del contenido de los elementos de nivel de bloque. Si deseas controlar el tamaño de un elemento en línea de esta manera, debes configurarlo para que se comporte como un elemento de nivel de bloque con display: block; (o incluso, display: inline-block;, que combina características de ambos).

+ +

Esto explica los elementos individuales, pero ¿qué hay del modo como los elementos interactúan entre sí? El flujo de diseño normal (mencionado en el artículo de introducción al diseño) es el sistema mediante el cual los elementos se colocan en la ventana gráfica del navegador. De manera predeterminada, los elementos de nivel de bloque se presentan en la dirección del flujo del bloque, en función del modo de escritura de los padres (initial: horizontal-tb): cada uno aparecerá en una línea nueva debajo de la última, y estarán separados por cualquier margen que se establezca en ellos. Por lo tanto, en inglés, o en cualquier otro modo de escritura horizontal y de arriba a abajo, los elementos de nivel de bloque se disponen verticalmente.

+ +

Los elementos en línea se comportan de manera diferente: no aparecen en líneas nuevas; en su lugar, se asientan en la misma línea entre sí y con cualquier contenido de texto adyacente (o envuelto), siempre que tengan espacio dentro del ancho del elemento de nivel de bloque primario. Si no hay espacio, el texto o los elementos que desborden bajarán a la línea siguiente.

+ +

Si dos elementos adyacentes tienen algún margen configurado y los dos márgenes se tocan, se mantiene el mayor de los dos y el menor desaparece; esto se llama colapso del margen, y ya lo hemos visto antes.

+ +

Echemos un vistazo a un ejemplo sencillo que explica todo esto:

+ +
+
<h1>Flujo de los documentos básicos</h1>
+
+<p>Soy un elemento básico de nivel de bloque. Mis elementos de nivel de bloque adyacentes se encuentran en líneas nuevas debajo de mí.</p>
+
+<p>Cubrimos por defecto el 100% del ancho de nuestro elemento principal, y somos tan altos como nuestro contenido secundario. Nuestro ancho y alto total es nuestro contenido + área de relleno + ancho/alto del borde.</p>
+
+<p>Estamos separados por nuestros márgenes. Debido al colapso del margen, estamos separados por el ancho de uno de nuestros márgenes, no por ambos.</p>
+
+<p>Los elementos en línea <span>como este</span> y <span>este otro</span> se ubican en la misma y la de los nodos de texto adyacentes, mientras hay espacio en la misma línea. Si un elemento en línea desborda, <span>sigue por la línea siguiente, si es posible (como la que contiene este texto)</span>, o simplemente pasa a una línea nueva, como hace esta imagen: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}
+
+ +

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

+ +

Resumen

+ +

Ahora que comprendes el flujo normal y cómo el navegador presenta las cosas por defecto, continúa para comprender cómo cambiar esta pantalla predeterminada para crear el diseño que necesitas.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/css/css_layout/responsive_design/index.html b/files/es/learn/css/css_layout/responsive_design/index.html new file mode 100644 index 0000000000..4ddb7a94db --- /dev/null +++ b/files/es/learn/css/css_layout/responsive_design/index.html @@ -0,0 +1,324 @@ +--- +title: Diseño receptivo +slug: Learn/CSS/CSS_layout/Diseño_receptivo +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
+ +

En los primeros días del diseño web, las páginas se diseñaban para llenar un tamaño de pantalla en particular. Si el usuario tenía una pantalla más grande o más pequeña que la del diseñador, los resultados esperados iban desde barras de desplazamiento no deseadas hasta longitudes de línea excesivamente largas y un mal uso del espacio. A medida que estuvieron disponibles tamaños de pantalla más diversos, apareció el concepto de diseño web responsivo (RWD, responsive web design), un conjunto de prácticas que permite a las páginas web alterar su diseño y apariencia para adaptarse a diferentes anchos de pantalla, resoluciones, etc. Es una idea que cambió la forma en que diseñamos para una web multidispositivo, y en este artículo te ayudaremos a comprender las principales técnicas que necesitas saber para dominarlo.

+ + + + + + + + + + + + +
Prerrequisitos:Conceptos básicos de HTML (véase Introducción al HTML) y nociones de cómo funciona el CSS (véase Primeros pasos en CSS y Los elementos básicos del CSS).
Objetivo:Comprender los conceptos fundamentales y la historia del diseño responsivo.
+ +

Diseños de sitios web históricos

+ +

En un momento de la historia, solo tenías dos opciones al diseñar un sitio web:

+ + + +

Estos dos enfoques tendían a dar como resultado un sitio web que se veía mejor ¡en la pantalla de la persona que diseñaba el sitio! El sitio líquido dio como resultado un diseño encogido en las pantallas que eran más pequeñas (como se ve a continuación) o longitudes de línea interminables en las pantallas que eran más grandes.

+ +
Un diseño de página con dos columnas encogidas en una ventana gráfica del tamaño de un teléfono móvil. +
+
+ +
+

Nota: Observa este ejemplo y su código fuente de un diseño líquido sencillo. Amplía o reduce la ventana del navegador y observa cómo cambia su aspecto en diferentes tamaños.

+
+ +

El sitio de ancho fijo se arriesgaba a una barra de desplazamiento horizontal en pantallas que eran más pequeñas que el ancho del sitio (como se ve a continuación), y a un gran espacio en blanco en los bordes del diseño en las pantallas que eran más grandes.

+ +
Un diseño con una barra de desplazamiento horizontal en una ventana de teléfono móvil. +
+
+ +
+

Nota: Observa este ejemplo y su código fuente de un diseño sencillo con un ancho fijo. Nuevamente, cambia el tamaño de la ventana del navegador y observa el resultado.

+
+ +
+

Nota: Las capturas de pantalla anteriores se han tomado usando el modo de diseño responsivo de las herramientas DevTools de Firefox.

+
+ +

A medida que la web móvil comenzó a hacerse realidad con los primeros teléfonos con funciones, las empresas que deseaban adoptar los dispositivos móviles solían crear una versión especial de su sitio web para dispositivo móvil, con una URL diferente (a menudo algo así como m.example.com o example.mobi). Esto significaba que había que desarrollar y actualizar dos versiones independientes del sitio web.

+ +

Además, estos sitios web para dispositivos móviles a menudo ofrecían una experiencia muy reducida. A medida que los dispositivos móviles se volvían más potentes y capaces de mostrar sitios web completos, esto resultaba frustrante para los usuarios de dispositivos móviles, que se veían atrapados en la versión móvil del sitio web y no podían acceder a la información que sabían que había en la versión de escritorio, que incluía todas las funciones del sitio web.

+ +

Diseño flexible antes del diseño responsivo

+ +

Se desarrollaron varios enfoques para tratar de resolver los inconvenientes de los métodos líquidos o de ancho fijo para crear sitios web. En 2004, Cameron Adams escribió una publicación titulada Resolution dependent layout, que describe un método para crear un diseño que podría adaptarse a diferentes resoluciones de pantalla. Este enfoque requería JavaScript para detectar la resolución de la pantalla y cargar el CSS correcto.

+ +

Zoe Mickley Gillenwater fue determinante en su trabajo de descripción y formalización de los diversos modos en que se podían crear sitios web flexibles para intentar encontrar una situación intermedia entre llenar toda la pantalla o tener un tamaño completamente fijo.

+ +

Diseño responsivo

+ +

El término diseño responsivo fue acuñado por Ethan Marcotte en 2010, y describía el uso combinado de tres técnicas.

+ +
    +
  1. La primera era la idea de las redes fluidas, algo que ya exploraba Gillenwater, y que puede leerse en el artículo de Marcotte, Fluid Grids (publicado en 2009 en A list apart).
    2. +
  2. La segunda técnica era la idea de las imágenes fluidas. Usando una técnica muy simple de establecer la propiedad de max-width al 100%, las imágenes se reducían si su columna de contención se volvía más estrecha que el tamaño intrínseco de la imagen, pero nunca se expandía. Esto permite reducir una imagen para que se ajuste a una columna de tamaño flexible, en lugar de que desborde, pero no se expande ni se pixela si la columna se ensancha más que la imagen.
    3. +
  3. El tercer componente clave era la consulta a los media. Las consultas a los media habilitan el tipo de cambio de diseño que Cameron Adams había explorado previamente usando JavaScript, pero usando solo CSS. En lugar de tener un único diseño para todos los tamaños de pantalla, el diseño podría cambiarse. Las barras laterales pueden reposicionarse en una pantalla más pequeña, o puede mostrarse una navegación alternativa.
    4. +
+ +

Es importante comprender que el diseño web responsivo no es una tecnología independiente: es un término utilizado para describir un enfoque para el diseño web, o un conjunto de buenas prácticas utilizado para crear un diseño que puede responder según el dispositivo que se utiliza para ver un contenido. En la exploración original de Marcotte, esto significaba cuadrículas flexibles (mediante elementos flotantes) y consultas de media; sin embargo, en los casi 10 años desde que se escribió ese artículo, trabajar de manera responsiva se ha convertido en la norma. Los métodos de diseño CSS modernos son inherentemente responsivos, y la plataforma web dispone de herramientas integradas nuevas que facilitan el diseño de sitios web responsivos.

+ +

El resto de este artículo te indicará las diversas características de la plataforma web que puedas querer utilizar para crear un sitio responsivo.

+ +

La consulta a los media

+ +

El diseño responsivo solo pudo surgir gracias a la consulta a los media. La especificación de nivel 3 de consulta a los media se convirtió en una candidata a Recomendación en 2009, lo que significa que se consideró lista para su implementación en los navegadores. Las consultas a los media nos permiten ejecutar una serie de pruebas (por ejemplo, si la pantalla del usuario es mayor que un ancho o una resolución determinados) y aplicar CSS selectivamente para diseñar la página de manera que resulte adecuada a las necesidades del usuario.

+ +

Por ejemplo, la consulta a los media siguiente explora si la página web que se muestra lo hace como un medio de pantalla (por lo tanto, no es un documento impreso) y si la ventana tiene al menos 800 píxeles de ancho. El CSS para el selector .container solo se aplicará si ambas condiciones son ciertas.

+ +
@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} 
+
+ +

Puedes añadir múltiples consultas a los media dentro de una hoja de estilo, y ajustar todo tu diseño o solo partes de él para que se adapte mejor a los diferentes tamaños de pantalla. Los puntos en los que se introduce una consulta a los media y se cambia el diseño se conocen como puntos de interrupción.

+ +

Un enfoque común cuando se usan las consultas a los media es crear un diseño sencillo de una sola columna para dispositivos de pantalla estrecha (por ejemplo, teléfonos móviles), luego implementar un diseño en columnas para pantallas más grandes cuando se sabe que hay suficiente ancho de pantalla para manejarlo. Esto se describe a menudo como diseño primero móvil.

+ +

Obtén más información sobre las consultas a los media en la documentación de MDN.

+ +

Cuadrículas flexibles

+ +

Los sitios responsivos no solo cambian su diseño entre puntos de interrupción, sino que se construyen sobre cuadrículas flexibles. Una cuadrícula flexible significa que no tienes que centrarte en todos los tamaños de dispositivo posibles y construir para ellos un diseño en píxeles perfecto. Ese enfoque sería imposible dada la gran cantidad de dispositivos de tamaños diferentes que hay, y el hecho de que, al menos en la versión de escritorio, las personas no siempre tienen la ventana de su navegador maximizada.

+ +

Al usar una cuadrícula flexible, solo necesitas añadir un punto de interrupción y cambiar el diseño en el punto en que el contenido comienza a verse mal. Por ejemplo, si las longitudes de las líneas se vuelven interminablemente largas a medida que el tamaño de la pantalla aumenta, o una caja se encoje hasta un ancho de dos palabras en cada línea a medida que el tamaño de la pantalla se reduce.

+ +

En los primeros días del diseño responsivo, nuestra única opción para el diseño de páginas web era usar elementos flotantes. Los diseños de pantalla con elementos flotantes flexibles se lograban dando a cada elemento un ancho porcentual asegurándose de que para toda la página no alcanzara más del 100%. En su trabajo original sobre cuadrículas fluidas, Marcotte detalló una fórmula para tomar un diseño de página web diseñado usando píxeles y convertirlo en porcentajes.

+ +
target / context = result 
+
+ +

Por ejemplo, si el tamaño de nuestra columna de destino es de 60 píxeles y el contexto (o contenedor) en el que se encuentra es de 960 píxeles, dividimos 60 por 960 para obtener un valor que podemos usar en nuestro CSS, después de mover el separador de cifras decimales dos posiciones a la derecha.

+ +
.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} 
+
+ +

Este enfoque se encuentra hoy en muchos lugares de la web, y aquí está documentado en la sección de compaginación de nuestro artículo sobre métodos de compaginación heredados. Es probable que encuentres sitios web que utilizan este enfoque en su trabajo, por lo que vale la pena entenderlo, aunque no vas a construir un sitio web moderno utilizando una cuadrícula flexible basada en elementos flotantes.

+ +

El ejemplo siguiente muestra un diseño responsivo sencillo que utiliza consultas a los medios y una cuadrícula flexible. En pantallas estrechas, el diseño de página muestra las cajas en columna una encima de la otra:

+ +
Una vista de un dispositivo móvil con un diseño de página con cajas en columna vertical una encima de la otra. +
+
+ +

En pantallas más anchas se pasa a dos columnas:

+ +
Una vista de un dispositivo de escritorio con un diseño a dos columnas. +
+
+ +
+

Nota: Puedes encontrar el ejemplo en vivo y el código fuente de este ejemplo en GitHub.

+
+ +

Tecnologías modernas de diseño de páginas web

+ +

Los métodos modernos de diseño de páginas web, como el diseño en columnas, Flexbox y Grid son responsivos por defecto. Todos estos métodos asumen que tratas de crear una cuadrícula flexible y te proporcionan los modos más fáciles de hacerlo.

+ +

Multicol

+ +

El más antiguo de estos métodos de diseño de páginas web es multicol. Cuando especificas un atributo column-count, esto indica en cuántas columnas deseas dividir tu contenido. El navegador entonces calcula el tamaño de estas columnas, que cambiará de acuerdo con el tamaño de la pantalla.

+ +
.container {
+  column-count: 3;
+} 
+
+ +

Si en lugar de ello estableces el atributo column-width, especificas un ancho mínimo. El navegador crea tantas columnas de ese ancho como quepan cómodamente en el contenedor, y reparte el espacio entre todas las columnas. Por lo tanto, el número de columnas cambia según la cantidad de espacio que hay.

+ +
.container {
+  column-width: 10em;
+} 
+
+ +

Flexbox

+ +

En el método Flexbox, los elementos flexibles se encogen y distribuyen el espacio entre los elementos según el espacio que hay en su contenedor, según su comportamiento inicial. Al cambiar los valores de flex-grow y flex-shrink, puedes indicar cómo deseas que se comporten los elementos cuando a su alrededor hay más o menos espacio.

+ +

En el ejemplo siguiente, los elementos flexibles ocupan cada uno la misma cantidad de espacio en el contenedor flexible, al utilizar la abreviatura flex: 1 como se describe en el artículo Flexbox: Dimensionamiento flexible de los elementos flex.

+ +
.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} 
+
+ +
+

Nota: Como ejemplo, hemos reconstruido el anterior diseño de página responsivo sencillo, esta vez usando Flexbox. Puedes ver que ya no necesitamos usar valores de porcentaje extraños para calcular el tamaño de las columnas: ejemplo, código fuente.

+
+ +

Cuadrículas CSS

+ +

En el diseño de cuadrículas con CSS, la unidad fr permite la distribución del espacio disponible en las trazas de la cuadrícula. El ejemplo siguiente crea un contenedor de cuadrícula con tres trazas dimensionadas a 1fr. Esto crea tres columnas, cada una de las cuales ocupa una parte del espacio que hay disponible en el contenedor. Puedes obtener más información sobre este enfoque para crear una cuadrícula en el módulo Aprender a diseñar cuadrículas en Cuadrículas flexibles con la unidad fr.

+ +
.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} 
+
+ +
+

Nota: La versión del diseño de página en cuadrícula es aún más simple, ya que podemos definir las columnas en .wrapper: ejemplo, código fuente.

+
+ +

Imágenes responsivas

+ +

El enfoque más simple para las imágenes responsivas es el que se describe en los primeros artículos de Marcotte sobre diseño responsivo. Básicamente, tomar una imagen que tenga el tamaño más grande que puedas necesitar, y reducirla. Este continúa siendo un enfoque utilizado hoy en día, y en la mayoría de las hojas de estilo encontrarás en alguna parte el CSS siguiente:

+ +
img {
+  max-width: 100%:
+} 
+
+ +

Hay inconvenientes obvios en este enfoque. La imagen puede mostrarse mucho más pequeña que su tamaño intrínseco, lo que representa una pérdida de ancho de banda: un usuario de dispositivo móvil puede descargar una imagen que sea varias veces el tamaño de lo que ve en realidad en la ventana del navegador. Además, es posible que no desees la misma relación de aspecto de la imagen en dispositivos móviles y en ordenadores de escritorio. Por ejemplo, podría ser bueno tener una imagen cuadrada para dispositivos móviles, pero mostrar la misma escena que una imagen horizontal en el escritorio. O bien es posible que, reconociendo el tamaño más pequeño de una imagen en dispositivos móviles, desees mostrar una imagen diferente, que se entienda mejor en un tamaño de pantalla pequeño. Estas cosas no se pueden lograr simplemente reduciendo una imagen.

+ +

Las imágenes responsivas, que utilizan el elemento {{htmlelement ("picture")}} y los atributos {{htmlelement ("img")}} srcset y sizes resuelven ambos problemas. Puedes proporcionar varios tamaños junto con «sugerencias» (metadatos que describen el tamaño de pantalla y la resolución para que la imagen sea la más adecuada), y el navegador elije la imagen que resulta más adecuada para cada dispositivo, y se asegura de que el usuario descarga un tamaño de imagen apropiado para el dispositivo que utiliza.

+ +

También puedes usar imágenes de director artístico, que proporcionan un recorte o una imagen completamente diferente para diferentes tamaños de pantalla.

+ +

Puedes encontrar una guía detallada de imágenes responsivas en el artículo sobre Aprender HTML en MDN.

+ +

Tipografía responsiva

+ +

Un elemento de diseño responsivo que todavía no hemos tratado en trabajos anteriores es la idea de la tipografía responsiva. Este concepto describe esencialmente el hecho de cambiar el tamaño de letra según el espacio de pantalla que reflejan las consultas a media.

+ +

En este ejemplo, queremos establecer que nuestro encabezado de nivel 1 sea 4rem, lo que significa que será cuatro veces nuestro tamaño de letra base. ¡Es un título muy grande! Solo queremos este título de encabezado gigante en los tamaños de pantalla más grandes, por lo tanto, primero creamos un título de encabezado más pequeño y luego usamos las consultas a los media para sobrescribirlo con el tamaño más grande si sabemos que el usuario tiene un tamaño de pantalla de al menos 1200px.

+ +
html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} 
+
+ +

Hemos editado nuestro ejemplo anterior de cuadrícula responsiva para incluir también el tipo de respuesta utilizando el método descrito. Puedes ver cómo el título de encabezado cambia de tamaño cuando el diseño para a la versión de dos columnas.

+ +

En la versión para dispositivo móvil, el encabezado es más pequeño:

+ +
Un diseño de elementos apilados en columna con un tamaño de título de encabezado pequeño. +
+
+ +

Sin embargo, en las versiones de escritorio vemos un tamaño de título de encabezado más grande:

+ +
Un diseño en dos columnas con un título grande. +
+
+ +
+

Nota: Observa este ejemplo en: ejemplo, código fuente.

+
+ +

Como muestra este enfoque sobre la tipografía, no es necesario restringir las consultas a medios a cambiar solo el diseño de página. Se pueden usar para ajustar cualquier elemento y hacerlo más útil o atractivo según los diversos tamaños de pantalla.

+ +

El uso de unidades de ventana gráfica para tipografía responsiva

+ +

Un enfoque interesante es utilizar las unidades de ventana gráfica vw para habilitar la tipografía responsiva. 1vw es igual al uno por ciento del ancho de la ventana gráfica, lo que significa que si configuras el tamaño del tipo de letra con vw, siempre estará en relación con el tamaño de la ventana gráfica.

+ +
h1 {
+  font-size: 6vw;
+}
+ +

El problema de hacer esto es que el usuario pierde la posibilidad de ampliar cualquier conjunto de texto configurado en unidades vw, porque ese texto siempre está en relación con el tamaño de la ventana gráfica. Por lo tanto, nunca hay que establecer texto utilizando solo unidades de ventana.

+ +

Hay una solución, que implica el uso de la función calc(). Si añades la unidad vw a un valor establecido con un tamaño fijo, como em o rem, el texto continúa siendo ampliable. Esencialmente, la unidad vw se añade sobre ese valor ampliado:

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

Esto significa que necesitamos especificar el tamaño de letra para el título de encabezado una sola vez, en lugar de configurarlo para dispositivos móviles y redefinirlo en las consultas a medios. Luego, el tipo de letra aumenta gradualmente a medida que aumenta el tamaño de la ventana gráfica.

+ +
+

Observa un ejemplo en: ejemplo, código fuente.

+
+ +

La metaetiqueta viewport

+ +

Si observas el tipo de letra de una página HTML responsiva, en general vas a encontrar la siguiente etiqueta {{htmlelement ("meta")}} en la cabecera del documento.

+ +
<meta name="viewport" content="width=device-width,initial-scale=1">
+
+ +

Esta metaetiqueta informa a los navegadores de los dispositivos móviles que deben establecer el ancho de la ventana gráfica al ancho del dispositivo y escalar el documento al 100% de ese tamaño, de modo que el documento se mostrará al tamaño optimizado para esos dispositivos móviles.

+ +

¿Por qué esto es necesario? Porque los navegadores de los dispositivos móviles tienden a mentir sobre el ancho de su ventana gráfica.

+ +

Esta metaetiqueta existe porque cuando se lanzó el iPhone original y la gente comenzó a ver sitios web en una pequeña pantalla de teléfono móvil, la mayoría de los sitios web no estaban optimizados para dispositivos móviles. Por lo tanto, el navegador móvil establecía el ancho de la ventana gráfica en 960 píxeles, representaba la página con ese ancho y mostraba el resultado como una versión reducida del diseño del escritorio. Otros navegadores de dispositivos móviles (por ejemplo, en Google Android) hicieron lo mismo. Los usuarios podían acercarse y desplazarse por el sitio web para ver las partes que les interesaban, pero se veía mal. Todavía verás esto hoy en día si tienes la desgracia de encontrarte con un sitio web que no tiene un diseño de página responsivo.

+ +

El problema es que tu diseño responsivo con puntos de interrupción y consultas a media no va a funcionar según lo previsto en los navegadores de dispositivos móviles, si tienes un diseño de pantalla estrecho que se inicia con un ancho de ventana de 480px o menos, pero la ventana gráfica está configurada en 960px. E cambio, al configurar width=device-width anulas el ancho predeterminado width=960px de Apple con el ancho real del dispositivo, y tus consultas a media funcionarán según lo previsto.

+ +

Por lo tanto, siempre debes incluir la línea de HTML anterior en la cabecera de tus documentos.

+ +

Con la metaetiqueta viewport puedes usar otras configuraciones, aunque, en general vas a querer usar la línea anterior.

+ + + +

Deberías evitar el uso de minimum-scale y maximum-scale, y en particular establecer user-scalable en no. Hay que permitir a los usuarios hacer zoom tanto o tan poco como lo necesiten; evitarlo provoca problemas de accesibilidad.

+ +
+

Nota: Hay una @regla CSS establecida para reemplazar la metaetiqueta viewport: @viewport. Sin embargo, tiene poca compatibilidad con los navegadores. Se implementó en Internet Explorer y Edge, pero una vez que se lance el navegador Edge basado en Chromium, dejará de formar parte del navegador Edge.

+
+ +

Resumen

+ +

El diseño responsivo se refiere a un diseño página de un sitio web o una aplicación que responde al entorno en el que se visualiza. Abarca una serie de características y técnicas de CSS y HTML, y ahora es esencialmente el modo como construimos los sitios web de forma predeterminada. Piensa en los sitios web que visitas con tu dispositivo móvil; probablemente sea inusual encontrar un sitio web que tenga la versión de escritorio reducida o en que necesites desplazarse hacia los lados para encontrar las cosas. Esto se debe a que la web se ha movido a este enfoque de diseño responsivo.

+ +

Además, lograr diseños responsivos se ha vuelto mucho más fácil con la ayuda de los métodos de diseño que has aprendido en estos artículos. Si eres nuevo en el desarrollo web, hoy tienes muchas más herramientas a tu disposición que en los primeros días del diseño de página responsivo. Por lo tanto, vale la pena verificar la antigüedad de los materiales que consultas. Si bien los artículos históricos continúan siendo útiles, el uso moderno de CSS y HTML facilita mucho la creación de diseños elegantes y útiles, sin importar con qué dispositivo el visitante visita el sitio.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/css/css_layout/soporte_a_navegadores_antiguos/index.html b/files/es/learn/css/css_layout/soporte_a_navegadores_antiguos/index.html deleted file mode 100644 index 18065a1da5..0000000000 --- a/files/es/learn/css/css_layout/soporte_a_navegadores_antiguos/index.html +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: Soporte a navegadores antiguos -slug: Learn/CSS/CSS_layout/Soporte_a_navegadores_antiguos -translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

- -

En este módulo recomendamos utilizar Flexbox y Grid como las herramientas principales para tus diseños. Sin embargo, habrá visitantes a tu sitio web que usen navegadores antiguos o navegadores que no admiten los métodos que has utilizado. Este siempre será el caso en la red: a medida que se desarrollan funciones nuevas, los diferentes navegadores priorizan cosas diferentes. Este artículo explica cómo usar técnicas web modernas sin perjudicar a los usuarios con tecnologías más antiguas.

- - - - - - - - - - - - -
Prerrequisitos:Conceptos básicos de HTML (véase Introducción al HTML) y nociones de cómo funciona el CSS (véase Introducción al CSS).
Objetivo:Comprender cómo proporcionar compatibilidad para tus diseños en navegadores antiguos que podrían no admitir las funciones que deseas utilizar.
- -

¿Cuál es la vista del navegador para tu sitio?

- -

Cada sitio web es diferente en términos de público objetivo. Antes de decidir el enfoque a seguir, averigua la cantidad de visitantes que visitan tu sitio que utilizan navegadores antiguos. Esto es sencillo si se trata de un sitio web que simplemente modificas o reemplazas, porque probablemente haya análisis disponibles que te indiquen la tecnología que la gente utiliza. Si el sitio no tiene funciones de análisis o se trata de un sitio nuevo, hay sitios como Statcounter que pueden proporcionar estadísticas filtradas por ubicación.

- -

También debes considerar el tipo de dispositivos y la forma en que las personas usan tu sitio; por ejemplo, puedes esperar un número de dispositivos móviles superior al promedio. La accesibilidad y las personas que utilizan tecnología de asistencia siempre deben tenerse en cuenta, pero para algunos sitios pueden ser aspectos aún más críticos. Según experiencia propia, los desarrolladores a menudo se preocupan demasiado por la experiencia de usuario de un 1% de usuarios que usan una versión antigua de Internet Explorer, y no consideran en absoluto el número mucho mayor de usuarios que tiene necesidades de accesibilidad especiales.

- -

¿Qué compatibilidad presentan las funciones que vas a usar?

- -

Una vez conozcas qué tipo de navegadores utiliza la gente que accede a tu sitio, puedes evaluar cualquier tecnología que desees utilizar según su compatibilidad y con qué facilidad es posible proporcionar una alternativa a los visitantes que no disponen de esa tecnología. Tratamos de facilitarte esta experiencia proporcionando información de compatibilidad de los navegadores en cada una de las páginas que detallan una propiedad CSS. Por ejemplo, echa un vistazo a la página de {{cssxref ("grid-template-columns")}}. En la parte inferior de esta página hay una tabla que enumera los navegadores principales, junto con la versión en la que comenzaron a admitir esta propiedad.

- -

- -

Otra forma popular de averiguar la compatibilidad de una característica es el sitio web Can I Use. Este sitio enumera la mayoría de las características de la Plataforma Web con información sobre el estado de compatibilidad de tu navegador. Puedes ver las estadísticas de uso por ubicación, cosa que resulta útil si trabajas en un sitio cuyos usuarios son de un territorio particular. Incluso puedes vincular tu cuenta de Google Analytics para obtener un análisis basado en tus datos de usuario.

- -

Conocer las tecnologías de tus usuarios y las compatibilidades de las funciones que tal vez quieras usar te proporcionan una buena base para tomar todas tus decisiones y saber cuál es la mejor manera de dar compatibilidad a todos tus usuarios.

- -

Compatibilidad no significa «verse igual»

- -

Es posible que un sitio web no tenga el mismo aspecto en todos los navegadores, porque algunos de tus usuarios lo verán en un teléfono y otros en el ordenador. Del mismo modo, algunos de tus usuarios tendrán una versión antigua del navegador y otros el navegador más reciente. Es posible que algunos de tus usuarios estén escuchando el contenido leído por un lector de pantalla, o hayan ampliado la página para poderla leer. Dar compatibilidad a todos significa servir una versión de tus contenidos diseñada estratégicamente para que se vea genial con los navegadores modernos, pero aún sea utilizable en un nivel básico para los usuarios con navegadores más antiguos.

- -

Un nivel básico de compatibilidad proviene de estructurar bien tus contenidos para que el flujo normal de tu página tenga sentido. Un usuario con un teléfono con funciones muy limitadas puede que no obtenga buena parte de tu CSS, pero el contenido fluirá de una manera que la lectura resulte fácil. Por lo tanto, un documento HTML bien estructurado siempre debe ser tu punto de partida. ¿Tu contenido tiene sentido si eliminas tu hoja de estilo?

- -

Una opción es dejar esta vista simple del sitio como alternativa para las personas que utilizan navegadores muy antiguos o limitados. Si la cantidad de personas que visitan el sitio con estos navegadores es pequeña, quizá no tenga sentido comercial dedicar tiempo a tratar de proporcionarles una experiencia similar a la de las personas que utilizan navegadores modernos. Sería mejor dedicar el tiempo a cosas que proporcionen accesibilidad al sitio, y servir así a muchos más usuarios. Hay un punto medio entre una página HTML simple y todos esos recursos, y CSS realmente ha logrado que proporcionar estas soluciones alternativas resulte bastante sencillo.

- -

Crear soluciones alternativas en CSS

- -

Las especificaciones CSS contienen información que explica qué hace el navegador cuando se aplican dos métodos de diseño al mismo elemento. Esto significa que hay una definición de lo que sucede si un elemento flotante, por ejemplo, también es un elemento Grid que usa diseño de cuadrícula CSS. Combina esta información con el conocimiento de que los navegadores ignoran el CSS que no entienden, y tienes una manera de crear diseños simples utilizando las técnicas heredadas que ya hemos expuesto, que luego se sobrescriben con tu diseño de cuadrícula en los navegadores modernos que lo entienden.

- -

En el ejemplo siguiente hemos especificado tres elementos de flotación <div> para que se muestren en una fila. Cualquier navegador que no sea compatible con el método de compaginación CSS Grid verá la hilera de cajas como un diseño con el método de flotación. Un elemento de flotación que se convierte en un elemento de cuadrícula pierde el comportamiento de flotación, lo que significa que al convertir el contenedor en un contenedor de cuadrícula, los elementos de flotación se convierten en elementos de cuadrícula. Si el navegador admite el diseño de cuadrícula, muestra la vista de cuadrícula; si no, ignora las propiedades relacionadas con el diseño de cuadrícula y utiliza el diseño de flotación.

- -
-
* {box-sizing: border-box;}
-
-.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  max-width: 400px;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
-.item {
-  float: left;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-}
-
- -
<div class="wrapper">
-  <div class="item">Artículo uno</div>
-  <div class="item">Artículo dos</div>
-  <div class="item">Artículo tres</div>
-</div>
-
- -

{{ EmbedLiveSample('Example1', '100%', '200') }}

-
- -
-

Nota: La propiedad {{cssxref ("clear")}} tampoco tiene efecto una vez que el elemento al que se le aplica se convierte en un elemento de cuadrícula, por lo que podrías tener una compaginación con un pie clear, que luego pase a ser un elemento de compaginación en cuadrícula.

-
- -

Métodos de soluciones alternativas

- -

Numerosos métodos de compaginación se pueden usar de manera similar a este ejemplo con comportamiento de flotación. Puedes elegir el que tenga más sentido para el patrón de compaginación que necesitas crear.

- -
-
float y clear
-
Como se muestra arriba, las propiedades float o clear dejan de afectar a la compaginación si los elementos afectados por estas propiedades pasan a ser de tipo flexible o de cuadrícula.
-
display: inline-block;
-
Este método se puede utilizar para crear compaginaciones en columnas; si un elemento tiene establecido un comportamiento display: inline-block pero se convierte a elemento con compaginación de tipo flexible o de cuadrícula, el comportamiento inline-block se ignora.
-
display: table;
-
El método de creación de tablas CSS que se describe en la introducción de estos artículos puede utilizarse como opción alternativa. Los elementos que tienen diseños de tabla CSS pierden este comportamiento si se convierten en elementos con comportamiento flexible o de cuadrícula. Es importante destacar que no se crearán las cajas sin nombre que fueron creadas para arreglar la estructura de tabla.
-
Compaginación en columnas
-
Para ciertos tipos de compaginación puedes usar multi-col como opción alternativa; si tu contenedor tiene alguna propiedad column-* definida y se convierte en un contenedor con comportamiento de cuadrícula, se anula el comportamiento en columnas.
-
Flexbox como opción alternativa a la cuadrícula
-
Flexbox tiene una compatibilidad mayor con los navegadores que Grid porque es compatible con Internet Explorer 10 y 11, aunque te recomendamos que consultes la información que encontrarás más adelante en este artículo sobre la compatibilidad bastante irregular y confusa de Flexbox en navegadores más antiguos. Si conviertes un contenedor flexible en un contenedor de cuadrícula, se ignorará cualquier propiedad flex aplicada a los elementos secundarios.
-
- -

Observa que si usas el CSS de esta manera puedes proporcionar una experiencia de usuario decente para ajustar muchas compaginaciones en navegadores antiguos. Añadimos una compaginación más simple basada en técnicas antiguas y con buena compatibilidad, y luego usamos el CSS más nuevo para crear la compaginación que va a ver más del 90% de tu público. Sin embargo, hay casos en los que el código alternativo va a tener que incluir algo que también van a interpretar los navegadores nuevos. Un buen ejemplo de esto es si queremos añadir anchos en porcentaje a nuestros elementos de flotación para que el aspecto de las columnas reproduzca mejor la visualización en cuadrícula, expandiendo para llenar el contenedor.

- -

En la compaginación de flotación, el porcentaje se calcula con respecto al contenedor: 33,333% es un tercio del ancho del contenedor. Sin embargo, en el método Grid ese 33,333% se calcula con respecto al área de la cuadrícula en la que el elemento está ubicado, por lo que en realidad se convierte en un tercio del tamaño que queremos una vez que se introduce la compaginación en cuadrícula.

- -
-
* {box-sizing: border-box;}
-
-.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  max-width: 400px;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
-.item {
-  float: left;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-  width: 33.333%;
-}
-
- -
<div class="wrapper">
-  <div class="item">Artículo uno</div>
-  <div class="item">Artículo dos</div>
-  <div class="item">Artículo tres</div>
-</div>
-
- -

{{ EmbedLiveSample('Example2', '100%', '200') }}

-
- -

Para tratar este problema, necesitamos tener un modo de detectar si Grid es compatible y, por lo tanto, si anulará el ancho. El CSS tiene una solución.

- -

Consultar las propiedades

- -

Consultar las propiedades te permite comprobar si un navegador admite alguna característica CSS en particular. Esto significa que puedes escribir algunos CSS para navegadores que no admitan una propiedad determinada y luego verificar si el navegador es compatible, y añadir tu elegante diseño de ser así.

- -

Si añadimos al ejemplo anterior una consulta de las propiedades, podemos usarla para volver a establecer a auto los anchos de nuestros elementos, si sabemos que hay compatibilidad para la compaginación en cuadrícula.

- -
-
* {box-sizing: border-box;}
-
-.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  max-width: 400px;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
-.item {
-  float: left;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-  width: 33.333%;
-}
-
-@supports (display: grid) {
-  .item {
-      width: auto;
-  }
-}
-
- -
<div class="wrapper">
-  <div class="item">Elemento uno</div>
-  <div class="item">Elemento dos</div>
-  <div class="item">Elemento tres</div>
-</div>
-
- -

{{ EmbedLiveSample('Example3', '100%', '200') }}

-
- -

La compatibilidad para la consulta de propiedades es muy buena en todos los navegadores modernos, pero debes tener en cuenta que son los navegadores que no admiten CSS Grid los que tampoco admiten la consulta de propiedades. Esto significa que para esos navegadores funcionará un enfoque como el que acabamos de detallar. Lo que hacemos es escribir primero nuestro CSS anterior sin hacer ninguna consulta de propiedades. Los navegadores que no admiten Grid y que no admiten la consulta de propiedades utilizan esa información de diseño que pueden entender e ignoran por completo todo lo demás. Los navegadores que admiten la consulta de propiedades también admiten CSS Grid y, por lo tanto, ejecutan el código de cuadrícula y el código de la consulta de propiedades.

- -

La especificación para la consulta de propiedades también incluye la posibilidad de probar si un navegador no admite una propiedad; esto solo es útil si el navegador admite consultas de propiedades. En el futuro bastará con el enfoque de verificar la falta de compatibilidad, porque los navegadores que no tienen compatibilidad para la consulta de propiedades desaparecen. Por ahora, sin embargo, utiliza el enfoque de usar el CSS anterior y luego sobrescribirlo para obtener la mejor compatibilidad.

- -

Versiones anteriores de Flexbox

- -

En versiones anteriores de navegadores, puedes encontrar versiones anteriores de la especificación Flexbox. En el momento de escribir esto se trata principalmente de un problema con Internet Explorer 10, que usa el prefijo -ms- para Flexbox. Esto también significa que algunos artículos y tutoriales están obsoletos; esta guía útil te ayuda a verificarlo y también puede ayudarte si necesitas compatibilidad Flexbox en navegadores muy antiguos.

- -

La versión prefijada de Grid de Internet Explorer 10 y 11

- -

La especificación CSS Grid se prototipó inicialmente en Internet Explorer 10; esto significa que si bien IE10 e IE11 no tienen compatibilidad de cuadrícula moderna, sí tienen una versión de compaginación en cuadrícula, que es muy útil, aunque diferente de la especificación moderna que documentamos en este sitio. Las implementaciones de IE10 y 11 tienen el prefijo -ms-, lo que significa que puedes usarlo para estos navegadores y los navegadores que no sean de Microsoft lo ignorarán. Sin embargo, Edge todavía comprende la sintaxis anterior, así que ten cuidado de que todo se sobrescriba de forma segura en tu cuadrícula de CSS moderna.

- -

La guía de Mejora progresiva en la compaginación en cuadrícula puede ayudarte a comprender la versión de la cuadrícula de Internet Explorer, y hemos incluido algunos enlaces útiles adicionales al final de este artículo. Sin embargo, a menos que tengas una gran cantidad de visitantes con versiones anteriores de Internet Explorer, puede que te resulte mejor centrarte en crear una reserva que funcione para todos los navegadores no compatibles.

- -

Pruebas con navegadores antiguos

- -

Dado que la mayoría de los navegadores ya son compatibles con Flexbox y Grid, puede resultar en efecto difícil hacer pruebas con navegadores más antiguos. Una forma es utilizar una herramienta de prueba en línea como Sauce Labs, como se detalla en el módulo de comprobación de compatibilidad entre navegadores.

- -

También puedes descargar e instalar máquinas virtuales y ejecutar versiones anteriores de navegadores en un entorno de tu propio ordenador. Tener acceso a versiones anteriores de Internet Explorer es particularmente útil, y para ese propósito, Microsoft ha puesto a disposición de los usuarios una variedad de máquinas virtuales de descarga gratuita. Están disponibles para los sistemas operativos Mac, Windows y Linux, por lo que resultan una manera excelente de hacer pruebas con los navegadores Windows antiguos y modernos, incluso si no utilizas una computadora con sistema Windows.

- -

Resumen

- -

Ahora tienes el conocimiento para usar con confianza técnicas como Grid y Flexbox, crear soluciones alternativas para navegadores más antiguos y utilizar cualquier técnica nueva que pueda surgir en el futuro.

- -

Ver también

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

- -

En este módulo

- - diff --git a/files/es/learn/css/css_layout/supporting_older_browsers/index.html b/files/es/learn/css/css_layout/supporting_older_browsers/index.html new file mode 100644 index 0000000000..18065a1da5 --- /dev/null +++ b/files/es/learn/css/css_layout/supporting_older_browsers/index.html @@ -0,0 +1,237 @@ +--- +title: Soporte a navegadores antiguos +slug: Learn/CSS/CSS_layout/Soporte_a_navegadores_antiguos +translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

En este módulo recomendamos utilizar Flexbox y Grid como las herramientas principales para tus diseños. Sin embargo, habrá visitantes a tu sitio web que usen navegadores antiguos o navegadores que no admiten los métodos que has utilizado. Este siempre será el caso en la red: a medida que se desarrollan funciones nuevas, los diferentes navegadores priorizan cosas diferentes. Este artículo explica cómo usar técnicas web modernas sin perjudicar a los usuarios con tecnologías más antiguas.

+ + + + + + + + + + + + +
Prerrequisitos:Conceptos básicos de HTML (véase Introducción al HTML) y nociones de cómo funciona el CSS (véase Introducción al CSS).
Objetivo:Comprender cómo proporcionar compatibilidad para tus diseños en navegadores antiguos que podrían no admitir las funciones que deseas utilizar.
+ +

¿Cuál es la vista del navegador para tu sitio?

+ +

Cada sitio web es diferente en términos de público objetivo. Antes de decidir el enfoque a seguir, averigua la cantidad de visitantes que visitan tu sitio que utilizan navegadores antiguos. Esto es sencillo si se trata de un sitio web que simplemente modificas o reemplazas, porque probablemente haya análisis disponibles que te indiquen la tecnología que la gente utiliza. Si el sitio no tiene funciones de análisis o se trata de un sitio nuevo, hay sitios como Statcounter que pueden proporcionar estadísticas filtradas por ubicación.

+ +

También debes considerar el tipo de dispositivos y la forma en que las personas usan tu sitio; por ejemplo, puedes esperar un número de dispositivos móviles superior al promedio. La accesibilidad y las personas que utilizan tecnología de asistencia siempre deben tenerse en cuenta, pero para algunos sitios pueden ser aspectos aún más críticos. Según experiencia propia, los desarrolladores a menudo se preocupan demasiado por la experiencia de usuario de un 1% de usuarios que usan una versión antigua de Internet Explorer, y no consideran en absoluto el número mucho mayor de usuarios que tiene necesidades de accesibilidad especiales.

+ +

¿Qué compatibilidad presentan las funciones que vas a usar?

+ +

Una vez conozcas qué tipo de navegadores utiliza la gente que accede a tu sitio, puedes evaluar cualquier tecnología que desees utilizar según su compatibilidad y con qué facilidad es posible proporcionar una alternativa a los visitantes que no disponen de esa tecnología. Tratamos de facilitarte esta experiencia proporcionando información de compatibilidad de los navegadores en cada una de las páginas que detallan una propiedad CSS. Por ejemplo, echa un vistazo a la página de {{cssxref ("grid-template-columns")}}. En la parte inferior de esta página hay una tabla que enumera los navegadores principales, junto con la versión en la que comenzaron a admitir esta propiedad.

+ +

+ +

Otra forma popular de averiguar la compatibilidad de una característica es el sitio web Can I Use. Este sitio enumera la mayoría de las características de la Plataforma Web con información sobre el estado de compatibilidad de tu navegador. Puedes ver las estadísticas de uso por ubicación, cosa que resulta útil si trabajas en un sitio cuyos usuarios son de un territorio particular. Incluso puedes vincular tu cuenta de Google Analytics para obtener un análisis basado en tus datos de usuario.

+ +

Conocer las tecnologías de tus usuarios y las compatibilidades de las funciones que tal vez quieras usar te proporcionan una buena base para tomar todas tus decisiones y saber cuál es la mejor manera de dar compatibilidad a todos tus usuarios.

+ +

Compatibilidad no significa «verse igual»

+ +

Es posible que un sitio web no tenga el mismo aspecto en todos los navegadores, porque algunos de tus usuarios lo verán en un teléfono y otros en el ordenador. Del mismo modo, algunos de tus usuarios tendrán una versión antigua del navegador y otros el navegador más reciente. Es posible que algunos de tus usuarios estén escuchando el contenido leído por un lector de pantalla, o hayan ampliado la página para poderla leer. Dar compatibilidad a todos significa servir una versión de tus contenidos diseñada estratégicamente para que se vea genial con los navegadores modernos, pero aún sea utilizable en un nivel básico para los usuarios con navegadores más antiguos.

+ +

Un nivel básico de compatibilidad proviene de estructurar bien tus contenidos para que el flujo normal de tu página tenga sentido. Un usuario con un teléfono con funciones muy limitadas puede que no obtenga buena parte de tu CSS, pero el contenido fluirá de una manera que la lectura resulte fácil. Por lo tanto, un documento HTML bien estructurado siempre debe ser tu punto de partida. ¿Tu contenido tiene sentido si eliminas tu hoja de estilo?

+ +

Una opción es dejar esta vista simple del sitio como alternativa para las personas que utilizan navegadores muy antiguos o limitados. Si la cantidad de personas que visitan el sitio con estos navegadores es pequeña, quizá no tenga sentido comercial dedicar tiempo a tratar de proporcionarles una experiencia similar a la de las personas que utilizan navegadores modernos. Sería mejor dedicar el tiempo a cosas que proporcionen accesibilidad al sitio, y servir así a muchos más usuarios. Hay un punto medio entre una página HTML simple y todos esos recursos, y CSS realmente ha logrado que proporcionar estas soluciones alternativas resulte bastante sencillo.

+ +

Crear soluciones alternativas en CSS

+ +

Las especificaciones CSS contienen información que explica qué hace el navegador cuando se aplican dos métodos de diseño al mismo elemento. Esto significa que hay una definición de lo que sucede si un elemento flotante, por ejemplo, también es un elemento Grid que usa diseño de cuadrícula CSS. Combina esta información con el conocimiento de que los navegadores ignoran el CSS que no entienden, y tienes una manera de crear diseños simples utilizando las técnicas heredadas que ya hemos expuesto, que luego se sobrescriben con tu diseño de cuadrícula en los navegadores modernos que lo entienden.

+ +

En el ejemplo siguiente hemos especificado tres elementos de flotación <div> para que se muestren en una fila. Cualquier navegador que no sea compatible con el método de compaginación CSS Grid verá la hilera de cajas como un diseño con el método de flotación. Un elemento de flotación que se convierte en un elemento de cuadrícula pierde el comportamiento de flotación, lo que significa que al convertir el contenedor en un contenedor de cuadrícula, los elementos de flotación se convierten en elementos de cuadrícula. Si el navegador admite el diseño de cuadrícula, muestra la vista de cuadrícula; si no, ignora las propiedades relacionadas con el diseño de cuadrícula y utiliza el diseño de flotación.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+ +
<div class="wrapper">
+  <div class="item">Artículo uno</div>
+  <div class="item">Artículo dos</div>
+  <div class="item">Artículo tres</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example1', '100%', '200') }}

+
+ +
+

Nota: La propiedad {{cssxref ("clear")}} tampoco tiene efecto una vez que el elemento al que se le aplica se convierte en un elemento de cuadrícula, por lo que podrías tener una compaginación con un pie clear, que luego pase a ser un elemento de compaginación en cuadrícula.

+
+ +

Métodos de soluciones alternativas

+ +

Numerosos métodos de compaginación se pueden usar de manera similar a este ejemplo con comportamiento de flotación. Puedes elegir el que tenga más sentido para el patrón de compaginación que necesitas crear.

+ +
+
float y clear
+
Como se muestra arriba, las propiedades float o clear dejan de afectar a la compaginación si los elementos afectados por estas propiedades pasan a ser de tipo flexible o de cuadrícula.
+
display: inline-block;
+
Este método se puede utilizar para crear compaginaciones en columnas; si un elemento tiene establecido un comportamiento display: inline-block pero se convierte a elemento con compaginación de tipo flexible o de cuadrícula, el comportamiento inline-block se ignora.
+
display: table;
+
El método de creación de tablas CSS que se describe en la introducción de estos artículos puede utilizarse como opción alternativa. Los elementos que tienen diseños de tabla CSS pierden este comportamiento si se convierten en elementos con comportamiento flexible o de cuadrícula. Es importante destacar que no se crearán las cajas sin nombre que fueron creadas para arreglar la estructura de tabla.
+
Compaginación en columnas
+
Para ciertos tipos de compaginación puedes usar multi-col como opción alternativa; si tu contenedor tiene alguna propiedad column-* definida y se convierte en un contenedor con comportamiento de cuadrícula, se anula el comportamiento en columnas.
+
Flexbox como opción alternativa a la cuadrícula
+
Flexbox tiene una compatibilidad mayor con los navegadores que Grid porque es compatible con Internet Explorer 10 y 11, aunque te recomendamos que consultes la información que encontrarás más adelante en este artículo sobre la compatibilidad bastante irregular y confusa de Flexbox en navegadores más antiguos. Si conviertes un contenedor flexible en un contenedor de cuadrícula, se ignorará cualquier propiedad flex aplicada a los elementos secundarios.
+
+ +

Observa que si usas el CSS de esta manera puedes proporcionar una experiencia de usuario decente para ajustar muchas compaginaciones en navegadores antiguos. Añadimos una compaginación más simple basada en técnicas antiguas y con buena compatibilidad, y luego usamos el CSS más nuevo para crear la compaginación que va a ver más del 90% de tu público. Sin embargo, hay casos en los que el código alternativo va a tener que incluir algo que también van a interpretar los navegadores nuevos. Un buen ejemplo de esto es si queremos añadir anchos en porcentaje a nuestros elementos de flotación para que el aspecto de las columnas reproduzca mejor la visualización en cuadrícula, expandiendo para llenar el contenedor.

+ +

En la compaginación de flotación, el porcentaje se calcula con respecto al contenedor: 33,333% es un tercio del ancho del contenedor. Sin embargo, en el método Grid ese 33,333% se calcula con respecto al área de la cuadrícula en la que el elemento está ubicado, por lo que en realidad se convierte en un tercio del tamaño que queremos una vez que se introduce la compaginación en cuadrícula.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+ +
<div class="wrapper">
+  <div class="item">Artículo uno</div>
+  <div class="item">Artículo dos</div>
+  <div class="item">Artículo tres</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example2', '100%', '200') }}

+
+ +

Para tratar este problema, necesitamos tener un modo de detectar si Grid es compatible y, por lo tanto, si anulará el ancho. El CSS tiene una solución.

+ +

Consultar las propiedades

+ +

Consultar las propiedades te permite comprobar si un navegador admite alguna característica CSS en particular. Esto significa que puedes escribir algunos CSS para navegadores que no admitan una propiedad determinada y luego verificar si el navegador es compatible, y añadir tu elegante diseño de ser así.

+ +

Si añadimos al ejemplo anterior una consulta de las propiedades, podemos usarla para volver a establecer a auto los anchos de nuestros elementos, si sabemos que hay compatibilidad para la compaginación en cuadrícula.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+@supports (display: grid) {
+  .item {
+      width: auto;
+  }
+}
+
+ +
<div class="wrapper">
+  <div class="item">Elemento uno</div>
+  <div class="item">Elemento dos</div>
+  <div class="item">Elemento tres</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example3', '100%', '200') }}

+
+ +

La compatibilidad para la consulta de propiedades es muy buena en todos los navegadores modernos, pero debes tener en cuenta que son los navegadores que no admiten CSS Grid los que tampoco admiten la consulta de propiedades. Esto significa que para esos navegadores funcionará un enfoque como el que acabamos de detallar. Lo que hacemos es escribir primero nuestro CSS anterior sin hacer ninguna consulta de propiedades. Los navegadores que no admiten Grid y que no admiten la consulta de propiedades utilizan esa información de diseño que pueden entender e ignoran por completo todo lo demás. Los navegadores que admiten la consulta de propiedades también admiten CSS Grid y, por lo tanto, ejecutan el código de cuadrícula y el código de la consulta de propiedades.

+ +

La especificación para la consulta de propiedades también incluye la posibilidad de probar si un navegador no admite una propiedad; esto solo es útil si el navegador admite consultas de propiedades. En el futuro bastará con el enfoque de verificar la falta de compatibilidad, porque los navegadores que no tienen compatibilidad para la consulta de propiedades desaparecen. Por ahora, sin embargo, utiliza el enfoque de usar el CSS anterior y luego sobrescribirlo para obtener la mejor compatibilidad.

+ +

Versiones anteriores de Flexbox

+ +

En versiones anteriores de navegadores, puedes encontrar versiones anteriores de la especificación Flexbox. En el momento de escribir esto se trata principalmente de un problema con Internet Explorer 10, que usa el prefijo -ms- para Flexbox. Esto también significa que algunos artículos y tutoriales están obsoletos; esta guía útil te ayuda a verificarlo y también puede ayudarte si necesitas compatibilidad Flexbox en navegadores muy antiguos.

+ +

La versión prefijada de Grid de Internet Explorer 10 y 11

+ +

La especificación CSS Grid se prototipó inicialmente en Internet Explorer 10; esto significa que si bien IE10 e IE11 no tienen compatibilidad de cuadrícula moderna, sí tienen una versión de compaginación en cuadrícula, que es muy útil, aunque diferente de la especificación moderna que documentamos en este sitio. Las implementaciones de IE10 y 11 tienen el prefijo -ms-, lo que significa que puedes usarlo para estos navegadores y los navegadores que no sean de Microsoft lo ignorarán. Sin embargo, Edge todavía comprende la sintaxis anterior, así que ten cuidado de que todo se sobrescriba de forma segura en tu cuadrícula de CSS moderna.

+ +

La guía de Mejora progresiva en la compaginación en cuadrícula puede ayudarte a comprender la versión de la cuadrícula de Internet Explorer, y hemos incluido algunos enlaces útiles adicionales al final de este artículo. Sin embargo, a menos que tengas una gran cantidad de visitantes con versiones anteriores de Internet Explorer, puede que te resulte mejor centrarte en crear una reserva que funcione para todos los navegadores no compatibles.

+ +

Pruebas con navegadores antiguos

+ +

Dado que la mayoría de los navegadores ya son compatibles con Flexbox y Grid, puede resultar en efecto difícil hacer pruebas con navegadores más antiguos. Una forma es utilizar una herramienta de prueba en línea como Sauce Labs, como se detalla en el módulo de comprobación de compatibilidad entre navegadores.

+ +

También puedes descargar e instalar máquinas virtuales y ejecutar versiones anteriores de navegadores en un entorno de tu propio ordenador. Tener acceso a versiones anteriores de Internet Explorer es particularmente útil, y para ese propósito, Microsoft ha puesto a disposición de los usuarios una variedad de máquinas virtuales de descarga gratuita. Están disponibles para los sistemas operativos Mac, Windows y Linux, por lo que resultan una manera excelente de hacer pruebas con los navegadores Windows antiguos y modernos, incluso si no utilizas una computadora con sistema Windows.

+ +

Resumen

+ +

Ahora tienes el conocimiento para usar con confianza técnicas como Grid y Flexbox, crear soluciones alternativas para navegadores más antiguos y utilizar cualquier técnica nueva que pueda surgir en el futuro.

+ +

Ver también

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/css/first_steps/comenzando_css/index.html b/files/es/learn/css/first_steps/comenzando_css/index.html deleted file mode 100644 index 1da9edb582..0000000000 --- a/files/es/learn/css/first_steps/comenzando_css/index.html +++ /dev/null @@ -1,264 +0,0 @@ ---- -title: Empezar con CSS -slug: Learn/CSS/First_steps/Comenzando_CSS -tags: - - Aprender - - CSS - - Clases - - Ejemplo - - Elementos - - Estado - - Principiante - - Selectores - - Sintaxis -translation_of: Learn/CSS/First_steps/Getting_started ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
- -

En este artículo aplicaremos CSS a un documento HTML sencillo para aprender algunos elementos prácticos sobre este lenguaje.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajo con archivos y conceptos básicos de HTML (véase Introducción al HTML).
Objetivo:Comprender los conceptos básicos para vincular un documento CSS a un archivo HTML y dar a un texto un formato sencillo con CSS.
- -

Empezamos con algo de HTML

- -

Nuestro punto de partida es un documento HTML. Puedes copiar el código de abajo si quieres trabajar en tu ordenador. Guarda el siguiente código como index.html en una carpeta de tu equipo.

- -
<!doctype html>
-<html lang="es">
-<head>
-    <meta charset="utf-8">
-    <title>Empezamos con el CSS</title>
-</head>
-
-<body>
-
-    <h1>Soy un título de nivel uno</h1>
-
-    <p>Este es un párrafo de texto. En el texto hay un <span>elemento span</span>
-y también un <a href="http://example.com">enlace</a>.</p>
-
-    <p>Este es el segundo párrafo. Contiene un elemento <em>destacado</em>.</p>
-
-    <ul>
-        <li>Punto uno</li>
-        <li>Punto dos</li>
-        <li>Punto <em>tres</em></li>
-    </ul>
-
-</body>
-
-</html>
-
- -
-

Nota: Si lees esto en un dispositivo o un entorno donde no puedes crear archivos fácilmente, no te preocupes. A continuación hay editores de código en vivo que van a permitirte escribir ejemplos de código en esta misma página.

-
- -

Agregar CSS a un documento

- -

Lo primero que se debe hacer es decirle al documento HTML que hay algunas reglas CSS que queremos que use. Hay tres formas diferentes de aplicar CSS a un documento HTML, sin embargo, por ahora, veremos la forma más habitual y útil de hacerlo: vincular el CSS desde el encabezado del documento.

- -

Crea un archivo en la misma carpeta que tu documento HTML y guárdalo como styles.css. La extensión .css muestra que es un archivo CSS.

- -

Para vincular styles.css a index.html, añade la siguiente línea en algún lugar dentro del {{htmlelement ("head")}} del documento HTML:

- -
<link rel="stylesheet" href="styles.css">
- -

Este elemento {{htmlelement ("link")}} le dice al navegador que hay una hoja de estilo con el atributo rel y la ubicación de esa hoja de estilo como el valor del atributo href. Puedes probar si el CSS funciona añadiendo una regla a styles.css. Usando el editor de código, añade lo siguiente al archivo CSS:

- -
h1 {
-  color: red;
-}
- -

Guarda los archivos HTML y CSS antes de volver a cargar la página en un navegador web. Ahora el título de nivel uno de la parte superior del documento debería ser rojo. Si esto sucede, ¡felicidades!: has aplicado correctamente un poco de CSS a un documento HTML. Si no lo hace, verifica que hayas escrito todo correctamente.

- -

Puedes continuar trabajando en styles.css localmente o usar nuestro editor interactivo para continuar con este tutorial. El editor interactivo actúa como si el CSS del primer panel estuviera vinculado al documento HTML, tal como lo hemos hecho con el documento anterior.

- -

Dar formato a elementos HTML

- -

Al poner nuestro título de encabezado en rojo, ya hemos demostrado que podemos elegir un elemento HTML y darle formato. Hacemos esto con un selector de elementos: un selector que coincide directamente con el nombre de un elemento HTML. Para determinar todos los párrafos del documento, se usa el selector p. Para hacer que todos los párrafos se vean verdes se usa:

- -
p {
-  color: green;
-}
- -

Puedes determinar múltiples selectores a la vez, separándolos con una coma. Si queremos que todos los párrafos y todos los elementos de la lista sean verdes, el código se verá así:

- -
p, li {
-    color: green;
-}
- -

Pruébalo en el editor interactivo que encontrarás a continuación (edita los cuadros de código) o en tu documento CSS.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

- -

Cambiar el comportamiento predeterminado de los elementos

- -

Cuando miramos un documento HTML bien marcado, incluso con algo tan simple como nuestro ejemplo, podemos ver que el navegador facilita la legibilidad de este documento HTML al añadir un estilo predeterminado. Los títulos se muestran grandes y en negrita, y la lista tiene viñetas. Esto sucede porque los navegadores tienen hojas de estilo internas que contienen estilos predeterminados, los cuales se aplican a todas las páginas por defecto. Sin ellos, todo el texto se uniría en un grupo y tendríamos que darle formato desde cero. Todos los navegadores modernos muestran el contenido HTML por defecto de la misma manera.

- -

Sin embargo, a menudo querrás algo diferente a la elección que ha hecho el navegador. Esto se puede solucionar con el simple hecho de escoger el elemento HTML que deseas cambiar y utilizar una regla CSS para cambiar su apariencia.  Un buen ejemplo es <ul>, que muestra una lista desordenada. Tiene viñetas y, si decidimos que no las queremos, podemos eliminarlas de este modo:

- -
li {
-  list-style-type: none;
-}
- -

Ahora, intenta añadir esto a tu CSS.

- -

Es muy conveniente consultar en MDN la propiedad list-style-type para ver qué valores admite. Echa un vistazo a la página de list-style-type y encontrarás un ejemplo interactivo en la parte superior para probar diferentes valores (todos los permitidos se detallan más abajo en esa misma página).

- -

Al mirar esa página, descubrirás que, además de eliminar las viñetas de la lista, también puedes cambiarlas. Intenta cambiarlas por unas cuadradas utilizando el valor square.

- -

Añadir una clase

- -

Hasta ahora, hemos utilizado elementos cuyo nombre se basa en el nombre de elemento que reciben en HTML. Esto funciona siempre que se desee que todos los elementos de ese tipo tengan el mismo aspecto en el documento. La mayoría de las veces no es el caso, por lo que deberás encontrar una manera de seleccionar un subconjunto de los elementos sin que cambien los demás. La forma más común de hacer esto es añadir una clase al elemento HTML y determinarla.

- -

En tu documento HTML, añade al segundo elemento de la lista un atributo de clase. Debería verse así:

- -
<ul>
-  <li>Punto uno</li>
-  <li class = "special">Punto dos</li>
-  <li>Punto <em>tres</em></li>
-</ul>
- -

En tu CSS, puedes seleccionar una clase special creando un selector que comience con un carácter de punto final. Añade lo siguiente a tu archivo CSS:

- -
.special {
-  color: orange;
-  font-weight: bold;
-}
- -

Guarda y actualiza para ver cuál es el resultado.

- -

Puedes aplicar la clase special a cualquier elemento de la página que desees que tenga el mismo aspecto que este elemento de lista. Por ejemplo, es posible que desees que el <span> del párrafo también sea naranja y en negrita. Intenta añadirle una class special, luego vuelve a cargar la página y observa qué sucede.

- -

A veces verás reglas con un selector que enumera el selector de elementos HTML junto con la clase:

- -
li.special {
-  color: orange;
-  font-weight: bold;
-}
- -

Esta sintaxis significa «determina cualquier elemento li que tenga una clase special». Si hicieras esto, ya no podrías aplicar la clase a un elemento <span> u otro elemento simplemente añadiéndole la clase; tendrías que añadir ese elemento a la lista de selectores:

- -
li.special,
-span.special {
-  color: orange;
-  font-weight: bold;
-}
- -

Como puedes imaginar, algunas clases pueden aplicarse a muchos elementos y no queremos tener que seguir editando el CSS cada vez que algo nuevo necesita adoptar ese estilo. Por lo tanto, a veces es mejor eludir el elemento y simplemente referirse a la clase, a menos que sepas que vas a querer crear algunas reglas especiales para un solo elemento y tal vez quieras asegurarte de que no se apliquen a otros elementos.

- -

Dar formato según la ubicación en un documento

- -

Hay momentos en los que querrás que algo se vea diferente en función de dónde esté en el documento. Hay múltiples selectores que pueden hacerlo, pero por ahora veremos solo un par. En nuestro documento hay dos elementos <em>: uno dentro de un párrafo y el otro dentro de un elemento de la lista. Para seleccionar solo un <em> que esté anidado dentro de un elemento <li>, podemos usar un selector llamado combinador descendente, que simplemente toma la forma de un espacio entre otros dos selectores.

- -

Añade la siguiente regla a la hoja de estilo.

- -
li em {
-  color: rebeccapurple;
-}
- -

Este selector separará cualquier elemento <em> que esté dentro de (un descendiente de) <li>. Entonces, en tu documento de ejemplo, deberías encontrar que el <em> del tercer elemento de la lista es morado, pero el que hay en el párrafo no ha cambiado.

- -

Otra cosa que puedes probar es dar formato un párrafo que venga directamente a continuación de un título que esté en el mismo nivel de jerarquía en el HTML. Para hacerlo, coloca un + (un combinador hermano adyacente) entre los selectores.

- -

Intenta añadir también esta regla a la hoja de estilo:

- -
h1 + p {
-  font-size: 200%;
-}
- -

El ejemplo que encontrarás a continuación incluye las dos reglas anteriores. Intenta añadir una regla para que un span dentro de un párrafo se vuelva rojo. Sabrás si lo has hecho bien si el <span> en el primer párrafo se vuelve rojo pero el que hay en el primer elemento de la lista no cambia de color.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}

- -
-

Nota: Como puedes ver, el CSS nos ofrece varias formas de seleccionar elementos, y hasta ahora solo hemos arañado la superficie. Examinaremos todos estos selectores y muchos más en los artículos correspondientes a Selectores que encontrarás más adelante.

-
- -

Dar formato según el estado

- -

El último tipo de estilo que veremos en este tutorial es la capacidad de dar formato a los elementos en función de su estado. Un ejemplo sencillo es el estilo de los enlaces. Cuando damos formato a un enlace, necesitamos seleccionar el elemento <a> (anclaje). Tiene diferentes estados dependiendo de si se ha visitado o no, se pasa por encima, o se presiona con el teclado o se hace clic (se activa). Puedes usar CSS para dar formato a estos diferentes estados. El CSS que encontrarás a continuación presenta en color rosa los enlaces que no se han visitado y en verde los que sí.

- -
a:link {
-  color: pink;
-}
-
-a:visited {
-  color: green;
-}
- -

Puedes cambiar la apariencia del enlace, por ejemplo, eliminando el subrayado, lo que se logra mediante la siguiente regla:

- -
a:hover {
-  text-decoration: none;
-}
- -

En el ejemplo que encontrarás a continuación, puedes jugar con diferentes valores para los distintos estados de un enlace. Hemos añadido las reglas anteriores y ahora nos damos cuenta de que el color rosa es demasiado claro y difícil de leer, ¿por qué no cambiarlo a otro que se vea mejor? ¿Puedes poner los enlaces en negrita?

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 

- -

Hemos eliminado el subrayado del enlace cuando el ratón se pasa por encima, y se puede eliminar de todos los estados de un enlace. Sin embargo, vale la pena recordar que en una página web real deberás asegurarte de que los visitantes sepan reconocer que se trata de un enlace. Que aparezca subrayado puede ser una pista importante para que las personas se den cuenta de que pueden hacer clic en una palabra dentro del párrafo, ya que es a lo que están acostumbrados. Al igual que con todo en CSS, existe la posibilidad de que tus cambios resten accesibilidad al documento. Intentaremos resaltar estas posibles dificultades en los lugares apropiados.

- -
-

Nota: a menudo verás que se menciona la accesibilidad en estas lecciones y en MDN. Cuando hablamos de accesibilidad nos referimos al requisito de que nuestras páginas web sean comprensibles y usables para todas las personas.

- -

Puede que tu visitante acceda a la página desde un ordenador con ratón o trackpad, o un teléfono inteligente con pantalla táctil. O puede que use un lector de pantalla que lea el contenido del documento, así como puede que necesite un tamaño de texto más grande o navegar por la página usando solo el teclado.

- -

Un documento HTML simple es, generalmente, accesible para todos. Es importante que el documento no pierda accesibilidad a medida que vayas aplicándole estilo.

-
- -

Combinaciones de selectores y combinadores

- -

Vale la pena señalar que puedes hacer múltiples combinaciones de selectores y combinadores. Por ejemplo:

- -
/* selecciona cualquier elemento <span> que se encuentre dentro de un <p>, que esté dentro de un <artículo> */
-artículo p span { ... }
-
-/* selecciona cualquier <p> que se encuentre directamente después de <ul>, que va directamente después de <h1> */
-h1 + ul + p { ... }
- -

También puedes combinar varios tipos juntos. Intenta añadir lo siguiente al código:

- -
body h1 + p .special {
-  color: yellow;
-  background-color: black;
-  padding: 5px;
-}
- -

Dará formato a cualquier elemento con la clase special, dentro de un elemento <p> que venga justo después de <h1>, el cual se encuentra dentro de <body>. ¡Uf!

- -

En el HTML original que proporcionamos, el único elemento al que esto aplica estilo es <span class="special">.

- -

No te preocupes si ahora mismo te parece complicado: irás acostumbrarte a medida que escribas más CSS.

- -

Para terminar

- -

En este tutorial, hemos visto varias formas con las que se puede diseñar un documento usando CSS. Desarrollaremos este conocimiento a medida que avancemos con el resto de las lecciones. Sin embargo, ahora ya sabes lo suficiente como para aplicar estilo al texto, aplicar CSS en función de diferentes formas de determinar elementos en el documento y buscar propiedades y valores en la documentación de MDN.

- -

En el próximo artículo, veremos cómo se estructura el CSS.

- -

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

- -

En este módulo

- -
    -
  1. ¿Qué es el CSS?
    2. -
  2. Empezar con CSS
    3. -
  3. Cómo se estructura el CSS
    4. -
  4. Cómo funciona el CSS
    5. -
  5. Pon en práctica tus conocimientos nuevos
    6. -
diff --git a/files/es/learn/css/first_steps/como_funciona_css/index.html b/files/es/learn/css/first_steps/como_funciona_css/index.html deleted file mode 100644 index 920212e080..0000000000 --- a/files/es/learn/css/first_steps/como_funciona_css/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Cómo funciona CSS -slug: Learn/CSS/First_steps/Como_funciona_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works ---- -

{{LearnSidebar}}
- {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

- -

Hemos aprendido los conceptos básicos de CSS, para qué sirve y cómo escribir hojas de estilo simples. En esta lección vamos a echar un vistazo a cómo un navegador crea una página web a partir de CSS y HTML.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de cómo trabajar con archivos y conceptos básicos de HTML (véase Introducción a HTML).
Objetivo:Entender los conceptos básicos de cómo el navegador analiza el CSS y el HTML y lo que sucede cuando encuentra un CSS que no entiende.
- -

¿Cómo funciona realmente el CSS?

- -

Cuando un navegador muestra un documento, ha de combinar el contenido con la información de estilo del documento. Procesa el documento en una serie de etapas, que enumeraremos a continuación. Ten en cuenta que este es un modelo muy simplificado de lo que sucede cuando un navegador carga una página web y que cada navegador gestiona el proceso de manera diferente. Pero esto es más o menos lo que sucede.

- -
    -
  1. El navegador carga el HTML (por ejemplo, lo recibe de la red).
    2. -
  2. Convierte el {{Glossary("HTML")}} en un {{Glossary("DOM")}} (Modelo de objetos del documento). El DOM representa el documento en la memoria del ordenador. Lo explicaremos más detalladamente en la sección siguiente.
    3. -
  3. Entonces, el navegador va a buscar la mayor parte de los recursos vinculados al documento HTML, como las imágenes y los videos incrustados... ¡y también el CSS vinculado! JavaScript aparece un poco más adelante en el proceso, pero no vamos a hablar de ello aún para evitar complicar las cosas.
    4. -
  4. El navegador analiza el CSS y ordena en diferentes «cubos» las diferentes reglas según el tipo de selector. Por ejemplo, elemento, clase, ID, y así sucesivamente. Para cada tipo de selector que encuentres, calcula qué reglas deben aplicarse y a qué nodos en el DOM se les aplica el estilo según corresponda (este paso intermedio se llama árbol de renderización).
    5. -
  5. El árbol de renderización presenta la estructura en que los nodos deben aparecer después de aplicarle las reglas.
    6. -
  6. En la pantalla se muestra el aspecto visual de la página (esta etapa se llama pintura).
    7. -
- -

El siguiente diagrama ofrece una visión sencilla de este proceso.

- -

- -

Acerca del DOM

- -

Un DOM tiene una estructura en forma de árbol. Cada elemento, atributo o bloque en el lenguaje de marcado se convierte en un {{Glossary("Node/DOM","nodo DOM")}} con estructura de árbol. Los nodos se definen por su relación con otros nodos DOM. Algunos elementos son padres de nodos secundarios, y estos nodos hijos tienen hermanos.

- -

Comprender el DOM te ayuda a diseñar, depurar y mantener tu CSS porque en el DOM es donde tu CSS se encuentra con el contenido del documento. Cuando comiences a trabajar con las herramientas DevTools (o herramientas del desarrollador) del navegador, te moverás por el DOM mientras seleccionas elementos con el fin de ver qué reglas se aplican.

- -

Una representación real de un DOM

- -

En lugar de una explicación larga y aburrida, veamos un ejemplo para entender cómo un código HTML se convierte en DOM.

- -

Tomemos el siguiente código HTML:

- -
<p>
-  Usaremos:
-  <span>Hojas</span>
-  <span>de estilo</span>
-  <span>en cascada</span>
-</p>
-
- -

En el DOM, el nodo que se corresponde con nuestro elemento <p> es un padre. Sus hijos son un nodo de texto y los tres nodos correspondientes a nuestros elementos <span>. Los nodos SPAN son también los padres, y los nodos de texto sus hijos:

- -
P
-├─ "Usaremos:"
-├─ SPAN
-|  └─ "Hojas"
-├─ SPAN
-|  └─ "de estilo"
-└─ SPAN
-   └─ "en cascada"
-
- -

Así es como un navegador interpreta el código HTML anterior, interpreta el árbol DOM y luego lo muestra en el navegador, así:

- -

{{EmbedLiveSample('Una_representación_real_de_un_DOM', '100%', 55)}}

- - - -

La aplicación de CSS al DOM

- -

Pongamos que hemos añadido un poco de CSS a nuestro documento, para darle estilo. Una vez más, el HTML es el siguiente:

- -
<p>
-  Usaremos:
-  <span>Hojas</span>
-  <span>de estilo</span>
-  <span>en cascada</span>
-</p>
- -

Supongamos que le aplicamos el CSS siguiente:

- -
span {
-  border: 1px solid black;
-  background-color: lime;
-}
- -

El navegador analizará el código HTML y creará un DOM a partir de este. A continuación, analizará el CSS. Dado que la única regla disponible en el CSS tiene un selector span, el navegador ¡ordenará el CSS muy rápidamente! Aplicará la regla a cada uno de los tres <span>, que mostrarán en pantalla la representación visual final.

- -

La salida actualizada es la siguiente:

- -

{{EmbedLiveSample ( 'La_aplicación_de_CSS_al_DOM', '100%', 55)}}

- -

En nuestro artículo Depurar el CSS que encontrarás en el siguiente módulo, vamos a utilizar las herramientas DevTools del navegador para depurar posibles problemas en el CSS. También aprenderemos más sobre cómo el navegador interpreta el CSS.

- -

¿Qué ocurre si un navegador encuentra CSS que no entiende?

- -

En una lección anterior mencionamos que no todos los navegadores implementan las novedades de CSS en el mismo momento. Además, no todo el mundo utiliza la última versión de un navegador. Dado que el CSS está en desarrollo constante y, por lo tanto, por delante de lo que los navegadores pueden reconocer, puede que te preguntes qué sucede si un navegador encuentra un selector o una declaración CSS que no reconoce.

- -

La respuesta es que no hace nada y simplemente pasa a la siguiente parte del CSS.

- -

Si un navegador analiza tus reglas y encuentra una propiedad o un valor que no entiende, lo ignora y avanza hasta la declaración siguiente. Esto sucederá si has cometido un error y has escrito mal una propiedad o un valor, o si la propiedad o el valor son demasiado nuevos y el navegador aún no los admite.

- -

Del mismo modo, si un navegador encuentra un selector que no entiende, lo ignorará y pasará al siguiente.

- -

En el siguiente ejemplo hemos utilizado la ortografía británica para la propiedad color, que invalida la propiedad porque no la reconoce. Así que el párrafo no se muestra en azul. Sin embargo, se han aplicado todos los demás estilos del CSS; solo se ha ignorado la línea que no es válida.

- -
-
<p>Quiero este texto en grande, en negrita y en color azul.</p>
- -
p {
-  font-weight: bold;
-  colour: blue; /* Ortografía incorrecta de la propiedad color */
-  font-size: 200%;
-}
-
- -

{{EmbedLiveSample('Skipping_example', '100%', 200)}}

- -

Este comportamiento es muy útil. Significa que puedes utilizar el CSS nuevo como una mejora, a sabiendas de que no se producirá ningún error si no se entiende: o bien el navegador entiende la característica nueva o no lo hace. Combinado con el funcionamiento del modo en cascada con el hecho de que los navegadores utilizarán la última CSS que encuentren en la hoja de estilo, cuando haya dos reglas con el mismo nivel de especificidad, también puedes ofrecer alternativas para los navegadores que no admiten el CSS nuevo.

- -

Esto funciona especialmente bien cuando quieres utilizar un valor que es bastante nuevo que no admiten todos los navegadores. Por ejemplo, algunos navegadores antiguos no entienden calc() como valor. Podríamos dar un valor de sustitución para el ancho de una caja en píxeles, y a continuación dar un ancho con un valor calc() de 100% - 50px. Los navegadores antiguos usarán la versión en píxeles y harán caso omiso de la indicación calc(), porque no la entienden. Los navegadores nuevos interpretarán la línea del ancho en píxeles, pero la anularán al llegar a la línea de calc() porque aparece después en la cascada.

- -
.box {
-  width: 500px;
-  width: calc(100% - 50px);
-}
- -

En lecciones posteriores veremos muchas más formas de cómo admitir navegadores diferentes.

- -

Y finalmente

- -

Casi has terminado este módulo; solo nos queda una cosa más por hacer. En el próximo artículo, pondrás en práctica tu conocimiento nuevo para cambiar el estilo de un ejemplo y probarte con un poco de CSS en el proceso.

- -

{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

- -

En este módulo

- -
    -
  1. ¿Qué es CSS?
    2. -
  2. Empezar con CSS
    3. -
  3. Cómo se estructura el CSS
    4. -
  4. Cómo funciona el CSS
    5. -
  5. Pon en práctica tus conocimientos nuevos
    6. -
diff --git a/files/es/learn/css/first_steps/como_se_estructura_css/index.html b/files/es/learn/css/first_steps/como_se_estructura_css/index.html deleted file mode 100644 index a3e9bb94b8..0000000000 --- a/files/es/learn/css/first_steps/como_se_estructura_css/index.html +++ /dev/null @@ -1,512 +0,0 @@ ---- -title: Cómo se estructura el CSS -slug: Learn/CSS/First_steps/Como_se_estructura_CSS -translation_of: Learn/CSS/First_steps/How_CSS_is_structured ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
- -

Ahora que ya sabes qué es el CSS y conoces sus conceptos básicos, es hora de profundizar un poco más en la estructura del lenguaje en sí. Ya hemos visto muchos de los conceptos que aparecen en este artículo; puedes volver para recapitular si más adelante encuentras conceptos confusos.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajo con archivos, conceptos básicos de HTML (véase Introducción al HTML) y una idea de cómo funciona el CSS.
Objetivo:Aprender en detalle las estructuras de sintaxis fundamentales de CSS.
- -

Aplicar CSS al HTML

- -

Lo primero que veremos son los tres métodos para aplicar CSS a un documento.

- -

Hoja de estilo externa

- -

En Empezar con el CSS, vinculamos una hoja de estilo externa a nuestra página. Este es el método más común y útil para adjuntar CSS a un documento, porque puedes vincular el CSS a varias páginas y dar estilo a todas ellas con la misma hoja de estilo. En la mayoría de los casos, las diferentes páginas de un sitio web se verán más o menos iguales, de modo que puedes usar el mismo conjunto de reglas para el aspecto y la interacción básicos.

- -

Una hoja de estilo externa significa que el CSS está escrito en un archivo independiente con una extensión .css y que lo vinculas desde un elemento <link> de HTML:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Mi experimento CSS</title>
-    <link rel="stylesheet" href="styles.css">
-  </head>
-  <body>
-    <h1>¡Hola, mundo!</h1>
-    <p>Este es mi primer ejemplo de CSS</p>
-  </body>
-</html>
- -

El archivo CSS podría parecerse a esto:

- -
h1 {
-  color: blue;
-  background-color: yellow;
-  border: 1px solid black;
-}
-
-p {
-  color: red;
-}
- -

El atributo href del elemento {{htmlelement("link")}} tiene que hacer referencia a un archivo de tu sistema de archivos.

- -

En el ejemplo anterior, el archivo CSS está en la misma carpeta que el documento HTML, pero puedes colocarlo en otro lugar y especificar la ruta adecuada. Por ejemplo:

- -
<!-- Dentro de un subdirectorio llamado styles dentro del directorio de trabajo -->
-<link rel="stylesheet" href="styles/style.css">
-
-<!-- Dentro de un subdirectorio llamado general, que está en un subdirectorio llamado styles, dentro del directorio de trabajo -->
-<link rel="stylesheet" href="styles/general/style.css">
-
-<!-- Sube un nivel de directorio, y luego dentro de un subdirectorio llamado styles -->
-<link rel="stylesheet" href="../styles/style.css">
- -

Hoja de estilo interna

- -

Una hoja de estilo interna es cuando no hay ningún archivo CSS externo, sino que colocas tu CSS dentro de un elemento {{htmlelement("style")}} contenido dentro del elemento {{htmlelement("head")}} del HTML.

- -

En este caso, el HTML se vería así:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Mi experimento CSS</title>
-    <style>
-      h1 {
-        color: blue;
-        background-color: yellow;
-        border: 1px solid black;
-      }
-
-      p {
-        color: red;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>¡Hola, mundo!</h1>
-    <p>Este es mi primer ejemplo de CSS</p>
-  </body>
-</html>
- -

Esto puede ser útil en algunas circunstancias (tal vez estés trabajando con un sistema de administración de contenido donde no sea posible modificar los archivos CSS directamente), pero no es tan eficiente como las hojas de estilo externas: en una página web, deberías repetir el CSS en cada página y actualizarlo en varios lugares en caso de que hubiera que hacer cambios.

- -

Estilos en línea

- -

Los estilos en línea son declaraciones CSS que afectan a un solo elemento, contenido dentro de un atributo de style:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Mi experimento CSS</title>
-  </head>
-  <body>
-    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">¡Hola mundo!</h1>
-    <p style="color:red;">Este es mi primer ejemplo de CSS</p>
-  </body>
-</html>
- -

¡No hagas esto a menos que realmente tengas que hacerlo! Es realmente malo a la hora de realizar el mantenimiento (puede que tengas que actualizar la misma información varias veces en un mismo documento), y además mezcla tu información CSS para la presentación con tu información HTML para la estructura, lo que dificulta la lectura y la comprensión del código. Mantener los diferentes tipos de código separados facilita trabajar con ellos.

- -

Hay ciertos lugares donde los estilos en línea son más comunes, o incluso aconsejables. Es posible que tengas que recurrir a ellos si realmente tu entorno de trabajo es restrictivo (tal vez el CMS solo te permita editar el cuerpo del HTML). También verás que se usan mucho en el correo electrónico en formato HTML para lograr la máxima compatibilidad con el mayor número de clientes.

- -

Juguemos con el CSS de este artículo

- -

En este artículo hay mucho CSS con el que jugar. Para hacerlo, recomendamos crear un nuevo directorio/carpeta en el ordenador, dentro de la cual deberás crear una copia de los siguientes dos archivos:

- -

index.html:

- -
<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Mis experimentos CSS</title>
-    <link rel="stylesheet" href="styles.css">
-  </head>
-  <body>
-
-    <p>Crea tu HTML de prueba aquí</p>
-
-  </body>
-</html>
- -

styles.css:

- -
/* Crea tu CSS de prueba aquí */
-
-p {
-  color: red;
-}
- -

Entonces, cuando te encuentres con un CSS con el que desees experimentar, reemplaza el contenido <body> del HTML con algo de HTML sin estilos y añade CSS a tu archivo de CSS para darle estilo.

- -

Si no estás en un sistema donde puedas crear archivos fácilmente, puedes utilizar el editor interactivo que encontrarás a continuación para experimentar.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} 

- -

¡Sigue leyendo y disfruta!

- -

Selectores

- -

No se puede hablar de CSS sin mencionar los selectores, de los cuales ya hemos descubierto varios tipos diferentes en la lección Empezar con el CSS. Un selector es, como determinamos, un elemento de nuestro documento HTML para aplicarle estilo. Si los estilos no se aplican correctamente, es probable que el selector no coincida con lo que crees que debería coincidir.

- -

Cada regla CSS comienza con un selector o una lista de selectores que indican al navegador a qué elemento o elementos deben aplicarse dichas reglas. Todos los siguientes son ejemplos de selectores válidos o listas de selectores.

- -
h1
-a:link
-.manythings
-#onething
-*
-.box p
-.box p:first-child
-h1, h2, .intro
- -

Prueba a crear algunas reglas CSS que usen los selectores anteriores y algo de HTML sin estilos. Si no conoces alguna de las sintaxis anteriores, ¡prueba a buscarla en MDN!

- -
-

Nota: Aprenderás mucho más sobre los selectores en nuestros tutoriales sobre selectores CSS de la próxima lección.

-
- -

Especificidad

- -

A menudo habrá situaciones en las que dos selectores podrían determinar un mismo elemento HTML. Considera la siguiente hoja de estilo, en que definimos una regla con un selector p que establecerá los párrafos en color azul, y también una clase que establecerá los elementos seleccionados en color rojo.

- -
.special {
-  color: red;
-}
-
-p {
-  color: blue;
-}
- -

Digamos que en nuestro documento HTML hay un párrafo con una clase special. Ambas reglas podrían aplicarse. ¿Cuál ganará? ¿De qué color crees que será nuestro párrafo?

- -
<p class="special">¿De qué color soy?</p>
- -

El lenguaje CSS tiene reglas para controlar cuál ganará en caso de colisión; reciben el nombre de cascada y especificidad. En el siguiente bloque de códigos hemos definido dos reglas para el selector p, pero el párrafo termina siendo de color azul. Esto se debe a que la declaración que lo establece en azul aparece más abajo en la hoja de estilo, y los estilos posteriores anulan a los anteriores. Así funciona la regla de la cascada.

- -
p {
-  color: red;
-}
-
-p {
-  color: blue;
-}
- -

Sin embargo, en el caso de nuestro primer bloque, que contiene un selector de clase y otro de elementos, la clase ganará. Esto hará que el párrafo sea rojo, incluso aunque aparezca antes en la hoja de estilo. Una clase se describe de forma más específica o con más especificidad que el selector de elementos, razón por la que gana.

- -

Prueba el ejemplo anterior: añade el HTML a tu experimento, luego pon las dos reglas p { ... } a tu hoja de estilo. A continuación, cambia el primer selector p por .special para ver cómo cambia el estilo.

- -

Las reglas de especificidad y de cascada pueden parecer un poco complicadas al principio. Son más fáciles de entender a medida que se van adquiriendo conocimientos de CSS. En nuestro artículo sobre Cascada y herencia, que abordaremos en la próxima lección, se explicará en detalle, incluyendo cómo calcular la especificidad. Por ahora, solo has de saber que existe y que a veces el CSS no se aplica como esperas porque algo más en la hoja de estilo tiene una mayor especificidad. El hecho de identificar que más de una regla podría aplicarse a un elemento es el primer paso para solucionar estos problemas.

- -

Propiedades y valores

- -

En su nivel más básico, el CSS consta de dos componentes básicos:

- - - -

La siguiente imagen resalta una sola propiedad y valor. El nombre de la propiedad es color y el valor blue.

- -

Una declaración resaltada en el CSS

- -

Una propiedad emparejada con un valor se denomina declaración CSS. Las declaraciones CSS se colocan dentro de los bloques de declaración CSS. La siguiente imagen muestra nuestro CSS con el bloque de declaración resaltado.

- -

Un bloque de declaración resaltado

- -

Finalmente, los bloques de declaración CSS se combinan con selectores para producir conjuntos de reglas CSS (o reglas CSS). Nuestra imagen contiene dos reglas, una para el selector h1 y otra para el selector p. La regla para h1 está resaltada.

- -

La regla para h1 resaltada

- -

Establecer las propiedades de CSS según valores específicos es la función principal del lenguaje CSS. El motor CSS calcula qué declaraciones se aplican a cada elemento de una página para darle la compaginación y los estilos adecuados.

- -
-

Importante: Las propiedades y valores de CSS son sensibles a mayúsculas y minúsculas. La propiedad y el valor de cada par están separados por dos puntos (:).

-
- -

Prueba a buscar diferentes valores de las siguientes propiedades y escribe reglas CSS que se puedan aplicar a diferentes elementos HTML:

- - - -
-

Importante: Si una propiedad es desconocida o si un valor no es válido para una propiedad determinada, la declaración se considera inválida y el motor CSS del navegador la ignora por completo.

-
- -
-

Importante: En CSS (y otros estándares web) se ha acordado establecer como estándar la ortografía en inglés de los EE. UU. para solucionar las incertidumbres idiomáticas. Por ejemplo, siempre hay que escribir color. Si se escribe colour, no funcionará.

-
- -

Las funciones

- -

Si bien la mayoría de valores son palabras clave relativamente simples o valores numéricos, es posible que algunos valores tomen la forma de una función. Un ejemplo sería la función calc(). Esta función te permite hacer operaciones matemáticas sencillas desde tu CSS, por ejemplo:

- -
-
<div class="external"> <div class="box">La caja interior es del 90% - 30px.</div></div>
- -
.outer {
-  border: 5px solid black;
-}
-
-.box {
-  padding: 10px;
-  width: calc(90% - 30px);
-  background-color: rebeccapurple;
-  color: white;
-}
-
- -

Esto se traduce así:

- -

{{EmbedLiveSample('calc_example', '100%', 200)}}

- -

Una función consta del nombre de la función y, a continuación, unos paréntesis entre los que se colocan los valores permitidos para esa función. En el caso del ejemplo calc() anterior, pedimos que el ancho de esta caja sea del 90% del ancho del bloque que la contiene, menos 30 píxeles. Esto no es algo que podamos calcular con anticipación y simplemente introducir el valor en el CSS, ya que no sabemos cuál será el 90%. Como con todos los valores, la página correspondiente del proyecto MDN tendrá ejemplos de uso para que puedas ver cómo funciona.

- -

Otro ejemplo serían los diversos valores para {{cssxref ("transform")}}, como rotate().

- -
-
<div class="box"></div>
- -
.box {
-  margin: 30px;
-  width: 100px;
-  height: 100px;
-  background-color: rebeccapurple;
-  transform: rotate(0.8turn)
-}
-
- -

El resultado del código anterior se ve así:

- -

{{EmbedLiveSample('transform_example', '100%', 200)}}

- -

Prueba a buscar diferentes valores de las siguientes propiedades y escribe reglas CSS que se apliquen a diferentes elementos HTML:

- - - -

@rules

- -

Las @rules (leído "at-rules" en inglés) dan al CSS algunas instrucciones sobre cómo comportarse. Algunas @rules son simples, con el nombre de la regla y un valor. Por ejemplo, para importar una hoja de estilo adicional a tu hoja de estilo CSS principal, puedes usar @import:

- -
@import 'styles2.css';
- -

Una de las @rules más comunes con las que te encontrarás es @media, que permite usar consultas a medios para aplicar CSS solo cuando se dan ciertas condiciones (por ejemplo, cuando la resolución de la pantalla supera un valor determinado o la anchura supera un valor concreto).

- -

En el CSS que se muestra a continuación, tenemos una hoja de estilo que le da al elemento <body> un color de fondo rosado. Sin embargo, luego usamos @media para crear una sección de nuestra hoja de estilo que solo se aplicará en los navegadores con una ventana gráfica de más de 30em de ancho. Si el navegador es más ancho que 30em, el color de fondo será azul.

- -
body {
-  background-color: pink;
-}
-
-@media (min-width: 30em) {
-  body {
-    background-color: blue;
-  }
-}
- -

Encontrarás otras @rules a lo largo de estas lecciones.

- -

Prueba a añadir una consulta a medios en tu CSS que cambie los estilos según el ancho de la ventana gráfica. Cambia el ancho de la ventana de tu navegador para ver el resultado.

- -

Abreviaturas

- -

Algunas propiedades como {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}} y {{ cssxref("margin")}} se llaman propiedades abreviadas. Esto se debe a que permiten establecer varios valores de propiedad en una sola línea, lo que ahorra tiempo y ordena el código.

- -

Por ejemplo, esta línea:

- -
/* En propiedades abreviadas con 4 valores, como margin y padding (relleno), los valores se aplican
-   según el orden: arriba, derecha, abajo e izquierda (en sentido horario desde la parte superior). También hay otros
-   tipos de abreviaturas, como las propiedades abreviadas con 2 valores que establecen el relleno/margen,
-   arriba/abajo, y luego izquierda/derecha */
-padding: 10px 15px 15px 5px;
- -

Hace lo mismo que todas estas juntas:

- -
padding-top: 10px;
-padding-right: 15px;
-padding-bottom: 15px;
-padding-left: 5px;
- -

Mientras que esta línea:

- -
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
- -

Hace lo mismo que todas estas juntas:

- -
background-color: red;
-background-image: url(bg-graphic.png);
-background-position: 10px 10px;
-background-repeat: repeat-x;
-background-scroll: fixed;
- -

Ahora mismo no pretendemos enseñarlos exhaustivamente: encontrarás muchos ejemplos más adelante en el curso. Te aconsejamos que busques los nombres de las propiedades abreviadas en nuestra referencia CSS para obtener más información.

- -

Prueba a añadir las declaraciones anteriores a tu CSS para ver cómo afecta al estilo de tu HTML. Experimenta con diferentes valores.

- -
-

Advertencia: Si bien las propiedades abreviadas a menudo permiten ahorrarte valores, luego restablecerán a sus valores iniciales cualquier valor que no incluyas. Esto asegura que se use un conjunto de valores razonable. Sin embargo, puede resultar confuso si esperas que la propiedad abreviada solo cambie los valores que has introducido.

-
- -

Comentarios

- -

Al igual que con el HTML, te recomendamos que hagas comentarios en tu CSS para que te ayuden a comprender cómo funciona su código cuando vuelvas a utilizarlo al cabo de varios meses, así como para ayudar a otros que vayan a trabajar con él a entenderlo.

- -

Los comentarios en el CSS comienzan con /* y terminan con */. En el bloque de código que encontrarás a continuación, hemos usado comentarios para marcar el inicio de las diferentes secciones de código. Esto es útil para ayudarnos a movernos por la base de código a medida que aumenta: puedes buscar los comentarios en tu editor de código.

- -
/* con elementos básicos de aplicación de estilo */
-/* -------------------------------------------------------------------------------------------- */
-body {
-  font: 1em/150% Helvética, Arial, sans-serif;
-  padding: 1em;
-  margin: 0 auto;
-  max-width: 33em;
-}
-
-@media (min-width: 70em) {
-  /* Prestemos especial atención al tamaño de fuente global. En una pantalla o una ventana grande,
-     aumentamos el tamaño de la fuente para conseguir una mejor legibilidad */
-  body {
-    font-size: 130%;
-  }
-}
-
-h1 {font-size: 1.5em;}
-
-/* Familiarización con algunos elementos anidados específicos en el DOM */
-/* -------------------------------------------------------------------------------------------- */
-div p, #id:first-line {
-  background-color: red;
-  border-radius: 3px;
-}
-
-div p {
-  margin: 0;
-  padding: 1em;
-}
-
-div p + p {
-  padding-top: 0;
-}
- -

Los comentarios también son útiles para comentar temporalmente ciertas partes del código con fines de prueba, por ejemplo, si tratas de encontrar qué parte de tu código causa un error. En el siguiente ejemplo, hemos comentado las reglas para el selector .special.

- -
/*.special {
-  color: red;
-}*/
-
-p {
-  color: blue;
-}
- -

Añade algunos comentarios al CSS para acostumbrarte a usarlos.

- -

Espacio en blanco

- -

Por espacio en blanco nos referimos los espacios en sí, tabuladores y retornos de carro o intros. De la misma manera que el HTML, el navegador ignora el espacio en blanco dentro del CSS. El valor del espacio en blanco es que puede mejorar la legibilidad.

- -

En el siguiente ejemplo, cada declaración (y el principio/fin de regla) está en una línea propia; esta es posiblemente una buena forma de escribir el CSS, ya que facilita el mantenimiento y la comprensión:

- -
body {
-  font: 1em/150% Helvética, Arial, sans-serif;
-  padding: 1em;
-  margin: 0 auto;
-  max-width: 33em;
-}
-
-@media (min-width: 70em) {
-  body {
-    font-size: 130%;
-  }
-}
-
-h1 {
-  font-size: 1.5em;
-}
-
-div p,
-#id:first-line {
-  background-color: red;
-  border-radius: 3px;
-}
-
-div p {
-  margin: 0;
-  padding: 1em;
-}
-
-div p + p {
-  padding-top: 0;
-}
-
- -

Podrías escribir exactamente el mismo CSS eliminando la mayoría de los espacios en blanco; este bloque de código es funcionalmente idéntico al primer ejemplo, pero seguro que estarás de acuerdo en que resulta algo más difícil de leer:

- -
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
-@media (min-width: 70em) { body {font-size: 130%;} }
-
-h1 {font-size: 1.5em;}
-
-div p, #id:first-line {background-color: red; border-radius: 3px;}
-div p {margin: 0; padding: 1em;}
-div p + p {padding-top: 0;}
-
- -

La manera que elijas para disponer el código suele ser una preferencia personal, aunque cuando comiences a trabajar en equipo es posible que encuentres que el equipo ya tiene su propia guía de estilo que especifica una convención acordada a seguir.

- -
-

Importante: Aunque los valores de las declaraciones CSS se separan por espacios, los nombres de propiedad nunca tienen espacios.

-
- -

Por ejemplo, las siguientes declaraciones de CSS son válidas:

- -
margin: 0 auto;
-padding-left: 10px;
- -

Pero las siguientes no lo son:

- -
margin: 0auto;
-padding- left: 10px;
- -

¿Ves los errores de espaciado? 0auto no se reconoce como un valor válido para la propiedad de margin (0 y auto son dos valores separados) y el navegador no reconoce padding- como una propiedad válida. El valor correcto de propiedad (padding-left) se ha separado por un espacio perdido.

- -

Debes asegurarte siempre de separar los valores distintos entre sí por al menos un espacio, pero mantén los nombres de las propiedades y los valores de las propiedades juntos.

- -

Prueba a jugar con los espacios en blanco de tu CSS y observa qué es lo que se rompe y lo que no.

- -

¿Qué sigue?

- -

Resulta útil entender un poco cómo el navegador toma tu HTML y tu CSS y los convierte en una página web, razón por la cual en el próximo artículo (Cómo funciona el CSS) veremos ese proceso.

- -

{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

En este modulo

- -
    -
  1. ¿Qué es el CSS?
    2. -
  2. Empezar con el CSS
    3. -
  3. Cómo se estructura el CSS
    4. -
  4. Cómo funciona CSS
    5. -
  5. Pon en práctica tus conocimientos nuevos
    6. -
diff --git a/files/es/learn/css/first_steps/getting_started/index.html b/files/es/learn/css/first_steps/getting_started/index.html new file mode 100644 index 0000000000..1da9edb582 --- /dev/null +++ b/files/es/learn/css/first_steps/getting_started/index.html @@ -0,0 +1,264 @@ +--- +title: Empezar con CSS +slug: Learn/CSS/First_steps/Comenzando_CSS +tags: + - Aprender + - CSS + - Clases + - Ejemplo + - Elementos + - Estado + - Principiante + - Selectores + - Sintaxis +translation_of: Learn/CSS/First_steps/Getting_started +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
+ +

En este artículo aplicaremos CSS a un documento HTML sencillo para aprender algunos elementos prácticos sobre este lenguaje.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajo con archivos y conceptos básicos de HTML (véase Introducción al HTML).
Objetivo:Comprender los conceptos básicos para vincular un documento CSS a un archivo HTML y dar a un texto un formato sencillo con CSS.
+ +

Empezamos con algo de HTML

+ +

Nuestro punto de partida es un documento HTML. Puedes copiar el código de abajo si quieres trabajar en tu ordenador. Guarda el siguiente código como index.html en una carpeta de tu equipo.

+ +
<!doctype html>
+<html lang="es">
+<head>
+    <meta charset="utf-8">
+    <title>Empezamos con el CSS</title>
+</head>
+
+<body>
+
+    <h1>Soy un título de nivel uno</h1>
+
+    <p>Este es un párrafo de texto. En el texto hay un <span>elemento span</span>
+y también un <a href="http://example.com">enlace</a>.</p>
+
+    <p>Este es el segundo párrafo. Contiene un elemento <em>destacado</em>.</p>
+
+    <ul>
+        <li>Punto uno</li>
+        <li>Punto dos</li>
+        <li>Punto <em>tres</em></li>
+    </ul>
+
+</body>
+
+</html>
+
+ +
+

Nota: Si lees esto en un dispositivo o un entorno donde no puedes crear archivos fácilmente, no te preocupes. A continuación hay editores de código en vivo que van a permitirte escribir ejemplos de código en esta misma página.

+
+ +

Agregar CSS a un documento

+ +

Lo primero que se debe hacer es decirle al documento HTML que hay algunas reglas CSS que queremos que use. Hay tres formas diferentes de aplicar CSS a un documento HTML, sin embargo, por ahora, veremos la forma más habitual y útil de hacerlo: vincular el CSS desde el encabezado del documento.

+ +

Crea un archivo en la misma carpeta que tu documento HTML y guárdalo como styles.css. La extensión .css muestra que es un archivo CSS.

+ +

Para vincular styles.css a index.html, añade la siguiente línea en algún lugar dentro del {{htmlelement ("head")}} del documento HTML:

+ +
<link rel="stylesheet" href="styles.css">
+ +

Este elemento {{htmlelement ("link")}} le dice al navegador que hay una hoja de estilo con el atributo rel y la ubicación de esa hoja de estilo como el valor del atributo href. Puedes probar si el CSS funciona añadiendo una regla a styles.css. Usando el editor de código, añade lo siguiente al archivo CSS:

+ +
h1 {
+  color: red;
+}
+ +

Guarda los archivos HTML y CSS antes de volver a cargar la página en un navegador web. Ahora el título de nivel uno de la parte superior del documento debería ser rojo. Si esto sucede, ¡felicidades!: has aplicado correctamente un poco de CSS a un documento HTML. Si no lo hace, verifica que hayas escrito todo correctamente.

+ +

Puedes continuar trabajando en styles.css localmente o usar nuestro editor interactivo para continuar con este tutorial. El editor interactivo actúa como si el CSS del primer panel estuviera vinculado al documento HTML, tal como lo hemos hecho con el documento anterior.

+ +

Dar formato a elementos HTML

+ +

Al poner nuestro título de encabezado en rojo, ya hemos demostrado que podemos elegir un elemento HTML y darle formato. Hacemos esto con un selector de elementos: un selector que coincide directamente con el nombre de un elemento HTML. Para determinar todos los párrafos del documento, se usa el selector p. Para hacer que todos los párrafos se vean verdes se usa:

+ +
p {
+  color: green;
+}
+ +

Puedes determinar múltiples selectores a la vez, separándolos con una coma. Si queremos que todos los párrafos y todos los elementos de la lista sean verdes, el código se verá así:

+ +
p, li {
+    color: green;
+}
+ +

Pruébalo en el editor interactivo que encontrarás a continuación (edita los cuadros de código) o en tu documento CSS.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

+ +

Cambiar el comportamiento predeterminado de los elementos

+ +

Cuando miramos un documento HTML bien marcado, incluso con algo tan simple como nuestro ejemplo, podemos ver que el navegador facilita la legibilidad de este documento HTML al añadir un estilo predeterminado. Los títulos se muestran grandes y en negrita, y la lista tiene viñetas. Esto sucede porque los navegadores tienen hojas de estilo internas que contienen estilos predeterminados, los cuales se aplican a todas las páginas por defecto. Sin ellos, todo el texto se uniría en un grupo y tendríamos que darle formato desde cero. Todos los navegadores modernos muestran el contenido HTML por defecto de la misma manera.

+ +

Sin embargo, a menudo querrás algo diferente a la elección que ha hecho el navegador. Esto se puede solucionar con el simple hecho de escoger el elemento HTML que deseas cambiar y utilizar una regla CSS para cambiar su apariencia.  Un buen ejemplo es <ul>, que muestra una lista desordenada. Tiene viñetas y, si decidimos que no las queremos, podemos eliminarlas de este modo:

+ +
li {
+  list-style-type: none;
+}
+ +

Ahora, intenta añadir esto a tu CSS.

+ +

Es muy conveniente consultar en MDN la propiedad list-style-type para ver qué valores admite. Echa un vistazo a la página de list-style-type y encontrarás un ejemplo interactivo en la parte superior para probar diferentes valores (todos los permitidos se detallan más abajo en esa misma página).

+ +

Al mirar esa página, descubrirás que, además de eliminar las viñetas de la lista, también puedes cambiarlas. Intenta cambiarlas por unas cuadradas utilizando el valor square.

+ +

Añadir una clase

+ +

Hasta ahora, hemos utilizado elementos cuyo nombre se basa en el nombre de elemento que reciben en HTML. Esto funciona siempre que se desee que todos los elementos de ese tipo tengan el mismo aspecto en el documento. La mayoría de las veces no es el caso, por lo que deberás encontrar una manera de seleccionar un subconjunto de los elementos sin que cambien los demás. La forma más común de hacer esto es añadir una clase al elemento HTML y determinarla.

+ +

En tu documento HTML, añade al segundo elemento de la lista un atributo de clase. Debería verse así:

+ +
<ul>
+  <li>Punto uno</li>
+  <li class = "special">Punto dos</li>
+  <li>Punto <em>tres</em></li>
+</ul>
+ +

En tu CSS, puedes seleccionar una clase special creando un selector que comience con un carácter de punto final. Añade lo siguiente a tu archivo CSS:

+ +
.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Guarda y actualiza para ver cuál es el resultado.

+ +

Puedes aplicar la clase special a cualquier elemento de la página que desees que tenga el mismo aspecto que este elemento de lista. Por ejemplo, es posible que desees que el <span> del párrafo también sea naranja y en negrita. Intenta añadirle una class special, luego vuelve a cargar la página y observa qué sucede.

+ +

A veces verás reglas con un selector que enumera el selector de elementos HTML junto con la clase:

+ +
li.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Esta sintaxis significa «determina cualquier elemento li que tenga una clase special». Si hicieras esto, ya no podrías aplicar la clase a un elemento <span> u otro elemento simplemente añadiéndole la clase; tendrías que añadir ese elemento a la lista de selectores:

+ +
li.special,
+span.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Como puedes imaginar, algunas clases pueden aplicarse a muchos elementos y no queremos tener que seguir editando el CSS cada vez que algo nuevo necesita adoptar ese estilo. Por lo tanto, a veces es mejor eludir el elemento y simplemente referirse a la clase, a menos que sepas que vas a querer crear algunas reglas especiales para un solo elemento y tal vez quieras asegurarte de que no se apliquen a otros elementos.

+ +

Dar formato según la ubicación en un documento

+ +

Hay momentos en los que querrás que algo se vea diferente en función de dónde esté en el documento. Hay múltiples selectores que pueden hacerlo, pero por ahora veremos solo un par. En nuestro documento hay dos elementos <em>: uno dentro de un párrafo y el otro dentro de un elemento de la lista. Para seleccionar solo un <em> que esté anidado dentro de un elemento <li>, podemos usar un selector llamado combinador descendente, que simplemente toma la forma de un espacio entre otros dos selectores.

+ +

Añade la siguiente regla a la hoja de estilo.

+ +
li em {
+  color: rebeccapurple;
+}
+ +

Este selector separará cualquier elemento <em> que esté dentro de (un descendiente de) <li>. Entonces, en tu documento de ejemplo, deberías encontrar que el <em> del tercer elemento de la lista es morado, pero el que hay en el párrafo no ha cambiado.

+ +

Otra cosa que puedes probar es dar formato un párrafo que venga directamente a continuación de un título que esté en el mismo nivel de jerarquía en el HTML. Para hacerlo, coloca un + (un combinador hermano adyacente) entre los selectores.

+ +

Intenta añadir también esta regla a la hoja de estilo:

+ +
h1 + p {
+  font-size: 200%;
+}
+ +

El ejemplo que encontrarás a continuación incluye las dos reglas anteriores. Intenta añadir una regla para que un span dentro de un párrafo se vuelva rojo. Sabrás si lo has hecho bien si el <span> en el primer párrafo se vuelve rojo pero el que hay en el primer elemento de la lista no cambia de color.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}

+ +
+

Nota: Como puedes ver, el CSS nos ofrece varias formas de seleccionar elementos, y hasta ahora solo hemos arañado la superficie. Examinaremos todos estos selectores y muchos más en los artículos correspondientes a Selectores que encontrarás más adelante.

+
+ +

Dar formato según el estado

+ +

El último tipo de estilo que veremos en este tutorial es la capacidad de dar formato a los elementos en función de su estado. Un ejemplo sencillo es el estilo de los enlaces. Cuando damos formato a un enlace, necesitamos seleccionar el elemento <a> (anclaje). Tiene diferentes estados dependiendo de si se ha visitado o no, se pasa por encima, o se presiona con el teclado o se hace clic (se activa). Puedes usar CSS para dar formato a estos diferentes estados. El CSS que encontrarás a continuación presenta en color rosa los enlaces que no se han visitado y en verde los que sí.

+ +
a:link {
+  color: pink;
+}
+
+a:visited {
+  color: green;
+}
+ +

Puedes cambiar la apariencia del enlace, por ejemplo, eliminando el subrayado, lo que se logra mediante la siguiente regla:

+ +
a:hover {
+  text-decoration: none;
+}
+ +

En el ejemplo que encontrarás a continuación, puedes jugar con diferentes valores para los distintos estados de un enlace. Hemos añadido las reglas anteriores y ahora nos damos cuenta de que el color rosa es demasiado claro y difícil de leer, ¿por qué no cambiarlo a otro que se vea mejor? ¿Puedes poner los enlaces en negrita?

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 

+ +

Hemos eliminado el subrayado del enlace cuando el ratón se pasa por encima, y se puede eliminar de todos los estados de un enlace. Sin embargo, vale la pena recordar que en una página web real deberás asegurarte de que los visitantes sepan reconocer que se trata de un enlace. Que aparezca subrayado puede ser una pista importante para que las personas se den cuenta de que pueden hacer clic en una palabra dentro del párrafo, ya que es a lo que están acostumbrados. Al igual que con todo en CSS, existe la posibilidad de que tus cambios resten accesibilidad al documento. Intentaremos resaltar estas posibles dificultades en los lugares apropiados.

+ +
+

Nota: a menudo verás que se menciona la accesibilidad en estas lecciones y en MDN. Cuando hablamos de accesibilidad nos referimos al requisito de que nuestras páginas web sean comprensibles y usables para todas las personas.

+ +

Puede que tu visitante acceda a la página desde un ordenador con ratón o trackpad, o un teléfono inteligente con pantalla táctil. O puede que use un lector de pantalla que lea el contenido del documento, así como puede que necesite un tamaño de texto más grande o navegar por la página usando solo el teclado.

+ +

Un documento HTML simple es, generalmente, accesible para todos. Es importante que el documento no pierda accesibilidad a medida que vayas aplicándole estilo.

+
+ +

Combinaciones de selectores y combinadores

+ +

Vale la pena señalar que puedes hacer múltiples combinaciones de selectores y combinadores. Por ejemplo:

+ +
/* selecciona cualquier elemento <span> que se encuentre dentro de un <p>, que esté dentro de un <artículo> */
+artículo p span { ... }
+
+/* selecciona cualquier <p> que se encuentre directamente después de <ul>, que va directamente después de <h1> */
+h1 + ul + p { ... }
+ +

También puedes combinar varios tipos juntos. Intenta añadir lo siguiente al código:

+ +
body h1 + p .special {
+  color: yellow;
+  background-color: black;
+  padding: 5px;
+}
+ +

Dará formato a cualquier elemento con la clase special, dentro de un elemento <p> que venga justo después de <h1>, el cual se encuentra dentro de <body>. ¡Uf!

+ +

En el HTML original que proporcionamos, el único elemento al que esto aplica estilo es <span class="special">.

+ +

No te preocupes si ahora mismo te parece complicado: irás acostumbrarte a medida que escribas más CSS.

+ +

Para terminar

+ +

En este tutorial, hemos visto varias formas con las que se puede diseñar un documento usando CSS. Desarrollaremos este conocimiento a medida que avancemos con el resto de las lecciones. Sin embargo, ahora ya sabes lo suficiente como para aplicar estilo al texto, aplicar CSS en función de diferentes formas de determinar elementos en el documento y buscar propiedades y valores en la documentación de MDN.

+ +

En el próximo artículo, veremos cómo se estructura el CSS.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

+ +

En este módulo

+ +
    +
  1. ¿Qué es el CSS?
    2. +
  2. Empezar con CSS
    3. +
  3. Cómo se estructura el CSS
    4. +
  4. Cómo funciona el CSS
    5. +
  5. Pon en práctica tus conocimientos nuevos
    6. +
diff --git a/files/es/learn/css/first_steps/how_css_is_structured/index.html b/files/es/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..a3e9bb94b8 --- /dev/null +++ b/files/es/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,512 @@ +--- +title: Cómo se estructura el CSS +slug: Learn/CSS/First_steps/Como_se_estructura_CSS +translation_of: Learn/CSS/First_steps/How_CSS_is_structured +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
+ +

Ahora que ya sabes qué es el CSS y conoces sus conceptos básicos, es hora de profundizar un poco más en la estructura del lenguaje en sí. Ya hemos visto muchos de los conceptos que aparecen en este artículo; puedes volver para recapitular si más adelante encuentras conceptos confusos.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajo con archivos, conceptos básicos de HTML (véase Introducción al HTML) y una idea de cómo funciona el CSS.
Objetivo:Aprender en detalle las estructuras de sintaxis fundamentales de CSS.
+ +

Aplicar CSS al HTML

+ +

Lo primero que veremos son los tres métodos para aplicar CSS a un documento.

+ +

Hoja de estilo externa

+ +

En Empezar con el CSS, vinculamos una hoja de estilo externa a nuestra página. Este es el método más común y útil para adjuntar CSS a un documento, porque puedes vincular el CSS a varias páginas y dar estilo a todas ellas con la misma hoja de estilo. En la mayoría de los casos, las diferentes páginas de un sitio web se verán más o menos iguales, de modo que puedes usar el mismo conjunto de reglas para el aspecto y la interacción básicos.

+ +

Una hoja de estilo externa significa que el CSS está escrito en un archivo independiente con una extensión .css y que lo vinculas desde un elemento <link> de HTML:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mi experimento CSS</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>¡Hola, mundo!</h1>
+    <p>Este es mi primer ejemplo de CSS</p>
+  </body>
+</html>
+ +

El archivo CSS podría parecerse a esto:

+ +
h1 {
+  color: blue;
+  background-color: yellow;
+  border: 1px solid black;
+}
+
+p {
+  color: red;
+}
+ +

El atributo href del elemento {{htmlelement("link")}} tiene que hacer referencia a un archivo de tu sistema de archivos.

+ +

En el ejemplo anterior, el archivo CSS está en la misma carpeta que el documento HTML, pero puedes colocarlo en otro lugar y especificar la ruta adecuada. Por ejemplo:

+ +
<!-- Dentro de un subdirectorio llamado styles dentro del directorio de trabajo -->
+<link rel="stylesheet" href="styles/style.css">
+
+<!-- Dentro de un subdirectorio llamado general, que está en un subdirectorio llamado styles, dentro del directorio de trabajo -->
+<link rel="stylesheet" href="styles/general/style.css">
+
+<!-- Sube un nivel de directorio, y luego dentro de un subdirectorio llamado styles -->
+<link rel="stylesheet" href="../styles/style.css">
+ +

Hoja de estilo interna

+ +

Una hoja de estilo interna es cuando no hay ningún archivo CSS externo, sino que colocas tu CSS dentro de un elemento {{htmlelement("style")}} contenido dentro del elemento {{htmlelement("head")}} del HTML.

+ +

En este caso, el HTML se vería así:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mi experimento CSS</title>
+    <style>
+      h1 {
+        color: blue;
+        background-color: yellow;
+        border: 1px solid black;
+      }
+
+      p {
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>¡Hola, mundo!</h1>
+    <p>Este es mi primer ejemplo de CSS</p>
+  </body>
+</html>
+ +

Esto puede ser útil en algunas circunstancias (tal vez estés trabajando con un sistema de administración de contenido donde no sea posible modificar los archivos CSS directamente), pero no es tan eficiente como las hojas de estilo externas: en una página web, deberías repetir el CSS en cada página y actualizarlo en varios lugares en caso de que hubiera que hacer cambios.

+ +

Estilos en línea

+ +

Los estilos en línea son declaraciones CSS que afectan a un solo elemento, contenido dentro de un atributo de style:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mi experimento CSS</title>
+  </head>
+  <body>
+    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">¡Hola mundo!</h1>
+    <p style="color:red;">Este es mi primer ejemplo de CSS</p>
+  </body>
+</html>
+ +

¡No hagas esto a menos que realmente tengas que hacerlo! Es realmente malo a la hora de realizar el mantenimiento (puede que tengas que actualizar la misma información varias veces en un mismo documento), y además mezcla tu información CSS para la presentación con tu información HTML para la estructura, lo que dificulta la lectura y la comprensión del código. Mantener los diferentes tipos de código separados facilita trabajar con ellos.

+ +

Hay ciertos lugares donde los estilos en línea son más comunes, o incluso aconsejables. Es posible que tengas que recurrir a ellos si realmente tu entorno de trabajo es restrictivo (tal vez el CMS solo te permita editar el cuerpo del HTML). También verás que se usan mucho en el correo electrónico en formato HTML para lograr la máxima compatibilidad con el mayor número de clientes.

+ +

Juguemos con el CSS de este artículo

+ +

En este artículo hay mucho CSS con el que jugar. Para hacerlo, recomendamos crear un nuevo directorio/carpeta en el ordenador, dentro de la cual deberás crear una copia de los siguientes dos archivos:

+ +

index.html:

+ +
<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Mis experimentos CSS</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+
+    <p>Crea tu HTML de prueba aquí</p>
+
+  </body>
+</html>
+ +

styles.css:

+ +
/* Crea tu CSS de prueba aquí */
+
+p {
+  color: red;
+}
+ +

Entonces, cuando te encuentres con un CSS con el que desees experimentar, reemplaza el contenido <body> del HTML con algo de HTML sin estilos y añade CSS a tu archivo de CSS para darle estilo.

+ +

Si no estás en un sistema donde puedas crear archivos fácilmente, puedes utilizar el editor interactivo que encontrarás a continuación para experimentar.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} 

+ +

¡Sigue leyendo y disfruta!

+ +

Selectores

+ +

No se puede hablar de CSS sin mencionar los selectores, de los cuales ya hemos descubierto varios tipos diferentes en la lección Empezar con el CSS. Un selector es, como determinamos, un elemento de nuestro documento HTML para aplicarle estilo. Si los estilos no se aplican correctamente, es probable que el selector no coincida con lo que crees que debería coincidir.

+ +

Cada regla CSS comienza con un selector o una lista de selectores que indican al navegador a qué elemento o elementos deben aplicarse dichas reglas. Todos los siguientes son ejemplos de selectores válidos o listas de selectores.

+ +
h1
+a:link
+.manythings
+#onething
+*
+.box p
+.box p:first-child
+h1, h2, .intro
+ +

Prueba a crear algunas reglas CSS que usen los selectores anteriores y algo de HTML sin estilos. Si no conoces alguna de las sintaxis anteriores, ¡prueba a buscarla en MDN!

+ +
+

Nota: Aprenderás mucho más sobre los selectores en nuestros tutoriales sobre selectores CSS de la próxima lección.

+
+ +

Especificidad

+ +

A menudo habrá situaciones en las que dos selectores podrían determinar un mismo elemento HTML. Considera la siguiente hoja de estilo, en que definimos una regla con un selector p que establecerá los párrafos en color azul, y también una clase que establecerá los elementos seleccionados en color rojo.

+ +
.special {
+  color: red;
+}
+
+p {
+  color: blue;
+}
+ +

Digamos que en nuestro documento HTML hay un párrafo con una clase special. Ambas reglas podrían aplicarse. ¿Cuál ganará? ¿De qué color crees que será nuestro párrafo?

+ +
<p class="special">¿De qué color soy?</p>
+ +

El lenguaje CSS tiene reglas para controlar cuál ganará en caso de colisión; reciben el nombre de cascada y especificidad. En el siguiente bloque de códigos hemos definido dos reglas para el selector p, pero el párrafo termina siendo de color azul. Esto se debe a que la declaración que lo establece en azul aparece más abajo en la hoja de estilo, y los estilos posteriores anulan a los anteriores. Así funciona la regla de la cascada.

+ +
p {
+  color: red;
+}
+
+p {
+  color: blue;
+}
+ +

Sin embargo, en el caso de nuestro primer bloque, que contiene un selector de clase y otro de elementos, la clase ganará. Esto hará que el párrafo sea rojo, incluso aunque aparezca antes en la hoja de estilo. Una clase se describe de forma más específica o con más especificidad que el selector de elementos, razón por la que gana.

+ +

Prueba el ejemplo anterior: añade el HTML a tu experimento, luego pon las dos reglas p { ... } a tu hoja de estilo. A continuación, cambia el primer selector p por .special para ver cómo cambia el estilo.

+ +

Las reglas de especificidad y de cascada pueden parecer un poco complicadas al principio. Son más fáciles de entender a medida que se van adquiriendo conocimientos de CSS. En nuestro artículo sobre Cascada y herencia, que abordaremos en la próxima lección, se explicará en detalle, incluyendo cómo calcular la especificidad. Por ahora, solo has de saber que existe y que a veces el CSS no se aplica como esperas porque algo más en la hoja de estilo tiene una mayor especificidad. El hecho de identificar que más de una regla podría aplicarse a un elemento es el primer paso para solucionar estos problemas.

+ +

Propiedades y valores

+ +

En su nivel más básico, el CSS consta de dos componentes básicos:

+ + + +

La siguiente imagen resalta una sola propiedad y valor. El nombre de la propiedad es color y el valor blue.

+ +

Una declaración resaltada en el CSS

+ +

Una propiedad emparejada con un valor se denomina declaración CSS. Las declaraciones CSS se colocan dentro de los bloques de declaración CSS. La siguiente imagen muestra nuestro CSS con el bloque de declaración resaltado.

+ +

Un bloque de declaración resaltado

+ +

Finalmente, los bloques de declaración CSS se combinan con selectores para producir conjuntos de reglas CSS (o reglas CSS). Nuestra imagen contiene dos reglas, una para el selector h1 y otra para el selector p. La regla para h1 está resaltada.

+ +

La regla para h1 resaltada

+ +

Establecer las propiedades de CSS según valores específicos es la función principal del lenguaje CSS. El motor CSS calcula qué declaraciones se aplican a cada elemento de una página para darle la compaginación y los estilos adecuados.

+ +
+

Importante: Las propiedades y valores de CSS son sensibles a mayúsculas y minúsculas. La propiedad y el valor de cada par están separados por dos puntos (:).

+
+ +

Prueba a buscar diferentes valores de las siguientes propiedades y escribe reglas CSS que se puedan aplicar a diferentes elementos HTML:

+ + + +
+

Importante: Si una propiedad es desconocida o si un valor no es válido para una propiedad determinada, la declaración se considera inválida y el motor CSS del navegador la ignora por completo.

+
+ +
+

Importante: En CSS (y otros estándares web) se ha acordado establecer como estándar la ortografía en inglés de los EE. UU. para solucionar las incertidumbres idiomáticas. Por ejemplo, siempre hay que escribir color. Si se escribe colour, no funcionará.

+
+ +

Las funciones

+ +

Si bien la mayoría de valores son palabras clave relativamente simples o valores numéricos, es posible que algunos valores tomen la forma de una función. Un ejemplo sería la función calc(). Esta función te permite hacer operaciones matemáticas sencillas desde tu CSS, por ejemplo:

+ +
+
<div class="external"> <div class="box">La caja interior es del 90% - 30px.</div></div>
+ +
.outer {
+  border: 5px solid black;
+}
+
+.box {
+  padding: 10px;
+  width: calc(90% - 30px);
+  background-color: rebeccapurple;
+  color: white;
+}
+
+ +

Esto se traduce así:

+ +

{{EmbedLiveSample('calc_example', '100%', 200)}}

+ +

Una función consta del nombre de la función y, a continuación, unos paréntesis entre los que se colocan los valores permitidos para esa función. En el caso del ejemplo calc() anterior, pedimos que el ancho de esta caja sea del 90% del ancho del bloque que la contiene, menos 30 píxeles. Esto no es algo que podamos calcular con anticipación y simplemente introducir el valor en el CSS, ya que no sabemos cuál será el 90%. Como con todos los valores, la página correspondiente del proyecto MDN tendrá ejemplos de uso para que puedas ver cómo funciona.

+ +

Otro ejemplo serían los diversos valores para {{cssxref ("transform")}}, como rotate().

+ +
+
<div class="box"></div>
+ +
.box {
+  margin: 30px;
+  width: 100px;
+  height: 100px;
+  background-color: rebeccapurple;
+  transform: rotate(0.8turn)
+}
+
+ +

El resultado del código anterior se ve así:

+ +

{{EmbedLiveSample('transform_example', '100%', 200)}}

+ +

Prueba a buscar diferentes valores de las siguientes propiedades y escribe reglas CSS que se apliquen a diferentes elementos HTML:

+ + + +

@rules

+ +

Las @rules (leído "at-rules" en inglés) dan al CSS algunas instrucciones sobre cómo comportarse. Algunas @rules son simples, con el nombre de la regla y un valor. Por ejemplo, para importar una hoja de estilo adicional a tu hoja de estilo CSS principal, puedes usar @import:

+ +
@import 'styles2.css';
+ +

Una de las @rules más comunes con las que te encontrarás es @media, que permite usar consultas a medios para aplicar CSS solo cuando se dan ciertas condiciones (por ejemplo, cuando la resolución de la pantalla supera un valor determinado o la anchura supera un valor concreto).

+ +

En el CSS que se muestra a continuación, tenemos una hoja de estilo que le da al elemento <body> un color de fondo rosado. Sin embargo, luego usamos @media para crear una sección de nuestra hoja de estilo que solo se aplicará en los navegadores con una ventana gráfica de más de 30em de ancho. Si el navegador es más ancho que 30em, el color de fondo será azul.

+ +
body {
+  background-color: pink;
+}
+
+@media (min-width: 30em) {
+  body {
+    background-color: blue;
+  }
+}
+ +

Encontrarás otras @rules a lo largo de estas lecciones.

+ +

Prueba a añadir una consulta a medios en tu CSS que cambie los estilos según el ancho de la ventana gráfica. Cambia el ancho de la ventana de tu navegador para ver el resultado.

+ +

Abreviaturas

+ +

Algunas propiedades como {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}} y {{ cssxref("margin")}} se llaman propiedades abreviadas. Esto se debe a que permiten establecer varios valores de propiedad en una sola línea, lo que ahorra tiempo y ordena el código.

+ +

Por ejemplo, esta línea:

+ +
/* En propiedades abreviadas con 4 valores, como margin y padding (relleno), los valores se aplican
+   según el orden: arriba, derecha, abajo e izquierda (en sentido horario desde la parte superior). También hay otros
+   tipos de abreviaturas, como las propiedades abreviadas con 2 valores que establecen el relleno/margen,
+   arriba/abajo, y luego izquierda/derecha */
+padding: 10px 15px 15px 5px;
+ +

Hace lo mismo que todas estas juntas:

+ +
padding-top: 10px;
+padding-right: 15px;
+padding-bottom: 15px;
+padding-left: 5px;
+ +

Mientras que esta línea:

+ +
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
+ +

Hace lo mismo que todas estas juntas:

+ +
background-color: red;
+background-image: url(bg-graphic.png);
+background-position: 10px 10px;
+background-repeat: repeat-x;
+background-scroll: fixed;
+ +

Ahora mismo no pretendemos enseñarlos exhaustivamente: encontrarás muchos ejemplos más adelante en el curso. Te aconsejamos que busques los nombres de las propiedades abreviadas en nuestra referencia CSS para obtener más información.

+ +

Prueba a añadir las declaraciones anteriores a tu CSS para ver cómo afecta al estilo de tu HTML. Experimenta con diferentes valores.

+ +
+

Advertencia: Si bien las propiedades abreviadas a menudo permiten ahorrarte valores, luego restablecerán a sus valores iniciales cualquier valor que no incluyas. Esto asegura que se use un conjunto de valores razonable. Sin embargo, puede resultar confuso si esperas que la propiedad abreviada solo cambie los valores que has introducido.

+
+ +

Comentarios

+ +

Al igual que con el HTML, te recomendamos que hagas comentarios en tu CSS para que te ayuden a comprender cómo funciona su código cuando vuelvas a utilizarlo al cabo de varios meses, así como para ayudar a otros que vayan a trabajar con él a entenderlo.

+ +

Los comentarios en el CSS comienzan con /* y terminan con */. En el bloque de código que encontrarás a continuación, hemos usado comentarios para marcar el inicio de las diferentes secciones de código. Esto es útil para ayudarnos a movernos por la base de código a medida que aumenta: puedes buscar los comentarios en tu editor de código.

+ +
/* con elementos básicos de aplicación de estilo */
+/* -------------------------------------------------------------------------------------------- */
+body {
+  font: 1em/150% Helvética, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  /* Prestemos especial atención al tamaño de fuente global. En una pantalla o una ventana grande,
+     aumentamos el tamaño de la fuente para conseguir una mejor legibilidad */
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {font-size: 1.5em;}
+
+/* Familiarización con algunos elementos anidados específicos en el DOM */
+/* -------------------------------------------------------------------------------------------- */
+div p, #id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+ +

Los comentarios también son útiles para comentar temporalmente ciertas partes del código con fines de prueba, por ejemplo, si tratas de encontrar qué parte de tu código causa un error. En el siguiente ejemplo, hemos comentado las reglas para el selector .special.

+ +
/*.special {
+  color: red;
+}*/
+
+p {
+  color: blue;
+}
+ +

Añade algunos comentarios al CSS para acostumbrarte a usarlos.

+ +

Espacio en blanco

+ +

Por espacio en blanco nos referimos los espacios en sí, tabuladores y retornos de carro o intros. De la misma manera que el HTML, el navegador ignora el espacio en blanco dentro del CSS. El valor del espacio en blanco es que puede mejorar la legibilidad.

+ +

En el siguiente ejemplo, cada declaración (y el principio/fin de regla) está en una línea propia; esta es posiblemente una buena forma de escribir el CSS, ya que facilita el mantenimiento y la comprensión:

+ +
body {
+  font: 1em/150% Helvética, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+div p,
+#id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+
+ +

Podrías escribir exactamente el mismo CSS eliminando la mayoría de los espacios en blanco; este bloque de código es funcionalmente idéntico al primer ejemplo, pero seguro que estarás de acuerdo en que resulta algo más difícil de leer:

+ +
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+@media (min-width: 70em) { body {font-size: 130%;} }
+
+h1 {font-size: 1.5em;}
+
+div p, #id:first-line {background-color: red; border-radius: 3px;}
+div p {margin: 0; padding: 1em;}
+div p + p {padding-top: 0;}
+
+ +

La manera que elijas para disponer el código suele ser una preferencia personal, aunque cuando comiences a trabajar en equipo es posible que encuentres que el equipo ya tiene su propia guía de estilo que especifica una convención acordada a seguir.

+ +
+

Importante: Aunque los valores de las declaraciones CSS se separan por espacios, los nombres de propiedad nunca tienen espacios.

+
+ +

Por ejemplo, las siguientes declaraciones de CSS son válidas:

+ +
margin: 0 auto;
+padding-left: 10px;
+ +

Pero las siguientes no lo son:

+ +
margin: 0auto;
+padding- left: 10px;
+ +

¿Ves los errores de espaciado? 0auto no se reconoce como un valor válido para la propiedad de margin (0 y auto son dos valores separados) y el navegador no reconoce padding- como una propiedad válida. El valor correcto de propiedad (padding-left) se ha separado por un espacio perdido.

+ +

Debes asegurarte siempre de separar los valores distintos entre sí por al menos un espacio, pero mantén los nombres de las propiedades y los valores de las propiedades juntos.

+ +

Prueba a jugar con los espacios en blanco de tu CSS y observa qué es lo que se rompe y lo que no.

+ +

¿Qué sigue?

+ +

Resulta útil entender un poco cómo el navegador toma tu HTML y tu CSS y los convierte en una página web, razón por la cual en el próximo artículo (Cómo funciona el CSS) veremos ese proceso.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

En este modulo

+ +
    +
  1. ¿Qué es el CSS?
    2. +
  2. Empezar con el CSS
    3. +
  3. Cómo se estructura el CSS
    4. +
  4. Cómo funciona CSS
    5. +
  5. Pon en práctica tus conocimientos nuevos
    6. +
diff --git a/files/es/learn/css/first_steps/how_css_works/index.html b/files/es/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..920212e080 --- /dev/null +++ b/files/es/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,156 @@ +--- +title: Cómo funciona CSS +slug: Learn/CSS/First_steps/Como_funciona_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{LearnSidebar}}
+ {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

+ +

Hemos aprendido los conceptos básicos de CSS, para qué sirve y cómo escribir hojas de estilo simples. En esta lección vamos a echar un vistazo a cómo un navegador crea una página web a partir de CSS y HTML.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de cómo trabajar con archivos y conceptos básicos de HTML (véase Introducción a HTML).
Objetivo:Entender los conceptos básicos de cómo el navegador analiza el CSS y el HTML y lo que sucede cuando encuentra un CSS que no entiende.
+ +

¿Cómo funciona realmente el CSS?

+ +

Cuando un navegador muestra un documento, ha de combinar el contenido con la información de estilo del documento. Procesa el documento en una serie de etapas, que enumeraremos a continuación. Ten en cuenta que este es un modelo muy simplificado de lo que sucede cuando un navegador carga una página web y que cada navegador gestiona el proceso de manera diferente. Pero esto es más o menos lo que sucede.

+ +
    +
  1. El navegador carga el HTML (por ejemplo, lo recibe de la red).
    2. +
  2. Convierte el {{Glossary("HTML")}} en un {{Glossary("DOM")}} (Modelo de objetos del documento). El DOM representa el documento en la memoria del ordenador. Lo explicaremos más detalladamente en la sección siguiente.
    3. +
  3. Entonces, el navegador va a buscar la mayor parte de los recursos vinculados al documento HTML, como las imágenes y los videos incrustados... ¡y también el CSS vinculado! JavaScript aparece un poco más adelante en el proceso, pero no vamos a hablar de ello aún para evitar complicar las cosas.
    4. +
  4. El navegador analiza el CSS y ordena en diferentes «cubos» las diferentes reglas según el tipo de selector. Por ejemplo, elemento, clase, ID, y así sucesivamente. Para cada tipo de selector que encuentres, calcula qué reglas deben aplicarse y a qué nodos en el DOM se les aplica el estilo según corresponda (este paso intermedio se llama árbol de renderización).
    5. +
  5. El árbol de renderización presenta la estructura en que los nodos deben aparecer después de aplicarle las reglas.
    6. +
  6. En la pantalla se muestra el aspecto visual de la página (esta etapa se llama pintura).
    7. +
+ +

El siguiente diagrama ofrece una visión sencilla de este proceso.

+ +

+ +

Acerca del DOM

+ +

Un DOM tiene una estructura en forma de árbol. Cada elemento, atributo o bloque en el lenguaje de marcado se convierte en un {{Glossary("Node/DOM","nodo DOM")}} con estructura de árbol. Los nodos se definen por su relación con otros nodos DOM. Algunos elementos son padres de nodos secundarios, y estos nodos hijos tienen hermanos.

+ +

Comprender el DOM te ayuda a diseñar, depurar y mantener tu CSS porque en el DOM es donde tu CSS se encuentra con el contenido del documento. Cuando comiences a trabajar con las herramientas DevTools (o herramientas del desarrollador) del navegador, te moverás por el DOM mientras seleccionas elementos con el fin de ver qué reglas se aplican.

+ +

Una representación real de un DOM

+ +

En lugar de una explicación larga y aburrida, veamos un ejemplo para entender cómo un código HTML se convierte en DOM.

+ +

Tomemos el siguiente código HTML:

+ +
<p>
+  Usaremos:
+  <span>Hojas</span>
+  <span>de estilo</span>
+  <span>en cascada</span>
+</p>
+
+ +

En el DOM, el nodo que se corresponde con nuestro elemento <p> es un padre. Sus hijos son un nodo de texto y los tres nodos correspondientes a nuestros elementos <span>. Los nodos SPAN son también los padres, y los nodos de texto sus hijos:

+ +
P
+├─ "Usaremos:"
+├─ SPAN
+|  └─ "Hojas"
+├─ SPAN
+|  └─ "de estilo"
+└─ SPAN
+   └─ "en cascada"
+
+ +

Así es como un navegador interpreta el código HTML anterior, interpreta el árbol DOM y luego lo muestra en el navegador, así:

+ +

{{EmbedLiveSample('Una_representación_real_de_un_DOM', '100%', 55)}}

+ + + +

La aplicación de CSS al DOM

+ +

Pongamos que hemos añadido un poco de CSS a nuestro documento, para darle estilo. Una vez más, el HTML es el siguiente:

+ +
<p>
+  Usaremos:
+  <span>Hojas</span>
+  <span>de estilo</span>
+  <span>en cascada</span>
+</p>
+ +

Supongamos que le aplicamos el CSS siguiente:

+ +
span {
+  border: 1px solid black;
+  background-color: lime;
+}
+ +

El navegador analizará el código HTML y creará un DOM a partir de este. A continuación, analizará el CSS. Dado que la única regla disponible en el CSS tiene un selector span, el navegador ¡ordenará el CSS muy rápidamente! Aplicará la regla a cada uno de los tres <span>, que mostrarán en pantalla la representación visual final.

+ +

La salida actualizada es la siguiente:

+ +

{{EmbedLiveSample ( 'La_aplicación_de_CSS_al_DOM', '100%', 55)}}

+ +

En nuestro artículo Depurar el CSS que encontrarás en el siguiente módulo, vamos a utilizar las herramientas DevTools del navegador para depurar posibles problemas en el CSS. También aprenderemos más sobre cómo el navegador interpreta el CSS.

+ +

¿Qué ocurre si un navegador encuentra CSS que no entiende?

+ +

En una lección anterior mencionamos que no todos los navegadores implementan las novedades de CSS en el mismo momento. Además, no todo el mundo utiliza la última versión de un navegador. Dado que el CSS está en desarrollo constante y, por lo tanto, por delante de lo que los navegadores pueden reconocer, puede que te preguntes qué sucede si un navegador encuentra un selector o una declaración CSS que no reconoce.

+ +

La respuesta es que no hace nada y simplemente pasa a la siguiente parte del CSS.

+ +

Si un navegador analiza tus reglas y encuentra una propiedad o un valor que no entiende, lo ignora y avanza hasta la declaración siguiente. Esto sucederá si has cometido un error y has escrito mal una propiedad o un valor, o si la propiedad o el valor son demasiado nuevos y el navegador aún no los admite.

+ +

Del mismo modo, si un navegador encuentra un selector que no entiende, lo ignorará y pasará al siguiente.

+ +

En el siguiente ejemplo hemos utilizado la ortografía británica para la propiedad color, que invalida la propiedad porque no la reconoce. Así que el párrafo no se muestra en azul. Sin embargo, se han aplicado todos los demás estilos del CSS; solo se ha ignorado la línea que no es válida.

+ +
+
<p>Quiero este texto en grande, en negrita y en color azul.</p>
+ +
p {
+  font-weight: bold;
+  colour: blue; /* Ortografía incorrecta de la propiedad color */
+  font-size: 200%;
+}
+
+ +

{{EmbedLiveSample('Skipping_example', '100%', 200)}}

+ +

Este comportamiento es muy útil. Significa que puedes utilizar el CSS nuevo como una mejora, a sabiendas de que no se producirá ningún error si no se entiende: o bien el navegador entiende la característica nueva o no lo hace. Combinado con el funcionamiento del modo en cascada con el hecho de que los navegadores utilizarán la última CSS que encuentren en la hoja de estilo, cuando haya dos reglas con el mismo nivel de especificidad, también puedes ofrecer alternativas para los navegadores que no admiten el CSS nuevo.

+ +

Esto funciona especialmente bien cuando quieres utilizar un valor que es bastante nuevo que no admiten todos los navegadores. Por ejemplo, algunos navegadores antiguos no entienden calc() como valor. Podríamos dar un valor de sustitución para el ancho de una caja en píxeles, y a continuación dar un ancho con un valor calc() de 100% - 50px. Los navegadores antiguos usarán la versión en píxeles y harán caso omiso de la indicación calc(), porque no la entienden. Los navegadores nuevos interpretarán la línea del ancho en píxeles, pero la anularán al llegar a la línea de calc() porque aparece después en la cascada.

+ +
.box {
+  width: 500px;
+  width: calc(100% - 50px);
+}
+ +

En lecciones posteriores veremos muchas más formas de cómo admitir navegadores diferentes.

+ +

Y finalmente

+ +

Casi has terminado este módulo; solo nos queda una cosa más por hacer. En el próximo artículo, pondrás en práctica tu conocimiento nuevo para cambiar el estilo de un ejemplo y probarte con un poco de CSS en el proceso.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

+ +

En este módulo

+ +
    +
  1. ¿Qué es CSS?
    2. +
  2. Empezar con CSS
    3. +
  3. Cómo se estructura el CSS
    4. +
  4. Cómo funciona el CSS
    5. +
  5. Pon en práctica tus conocimientos nuevos
    6. +
diff --git "a/files/es/learn/css/first_steps/qu\303\251_es_css/index.html" "b/files/es/learn/css/first_steps/qu\303\251_es_css/index.html" deleted file mode 100644 index eb4f8e8a8a..0000000000 --- "a/files/es/learn/css/first_steps/qu\303\251_es_css/index.html" +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: ¿Qué es el CSS? -slug: Learn/CSS/First_steps/Qué_es_CSS -tags: - - Beginner - - CSS - - Introduction to CSS - - Learn - - Modules - - Specifications - - Syntax -translation_of: Learn/CSS/First_steps/What_is_CSS ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
- -

Las hojas de estilo en cascada ({{Glossary("CSS")}}, cascading style sheets) permiten crear páginas web atractivas. Pero ¿cómo funcionan realmente? En este artículo explicaremos qué es el CSS con un ejemplo de sintaxis sencillo y describiremos algunos términos clave sobre este lenguaje.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, tener instalado el software básico, conocimientos básicos de cómo trabajar con archivos y nociones de HTML (véase Introducción al HTML).
Objetivo:Aprender qué es CSS.
- -

En el módulo Introducción al HTML, exponemos qué es el HTML y cómo se usa para definir documentos destinados a leerse en un navegador web. Los títulos se verán más grandes que el texto y los párrafos empezarán en una línea nueva y habrá un espacio entre ellos. Los enlaces aparecerán en un color diferente y subrayados para distinguirlos del resto del texto. Vienen predeterminados por el navegador y, en la práctica, son estilos muy básicos que el navegador aplica al HTML para asegurarse, básicamente, de que sean legibles incluso si el autor de la página no especifica un estilo explícito.

- -

Los estilos predeterminados utilizados por el navegador

- -

Sin embargo, Internet sería un lugar muy aburrido si todas las páginas web se vieran así. Usando CSS se pueden controlar con precisión cómo se ven los elementos HTML en el navegador, que presentará para las etiquetas de marcado el diseño que cada uno desee.

- -

¿Para qué sirve el CSS?

- -

Como hemos mencionado, el CSS es un lenguaje informático que especifica cómo se presentan los documentos a los usuarios: cómo se diseñan, compaginan, etc.

- -

Un documento suele ser un archivo de texto estructurado con un lenguaje de marcado: {{Glossary("HTML")}} es el más común, pero también existen otros como {{Glossary("SVG")}} o {{Glossary("XML")}}.

- -

Presentar un documento a un usuario significa convertirlo en un formulario que el público pueda utilizar. Los {{Glossary("Navegador", "navegadores")}}, como por ejemplo {{Glossary("Mozilla Firefox", "Firefox")}}, {{Glossary("Google Chrome", "Chrome")}} o {{Glossary("Microsoft Edge", "Edge")}}, están diseñados para presentar documentos visualmente en una pantalla de ordenador, un proyector o una impresora.

- -
-

Nota: Un navegador también recibe el nombre de {{Glossary("Agente de usuario", "agente de usuario")}}, que consiste en un programa informático que representa a una persona dentro del sistema. Los navegadores son el modelo principal de agente de usuario en el que pensamos cuando hablamos de CSS, pero no son el único. Hay otros documentos de usuario disponibles, como los que convierten documentos HTML y CSS en PDF para imprimir.

-
- -

El CSS se puede usar para estilos de texto muy básicos como, por ejemplo, cambiar el color y el tamaño de los encabezados y los enlaces. Se puede utilizar para crear un diseño, como podría ser convertir una columna de texto en una composición con un área de contenido principal y una barra lateral para información relacionada. Incluso se puede usar para crear efectos de animación. Echa un vistazo a los enlaces de este párrafo para ver ejemplos específicos.

- -

Sintaxis del CSS

- -

El CSS es un lenguaje basado en reglas: cada usuario define las reglas que especifican los grupos de estilos que van a aplicarse a elementos particulares o grupos de elementos de la página web. Por ejemplo: «Quiero que el encabezado principal de mi página se muestre en letras grandes de color rojo».

- -

El código siguiente muestra una regla CSS muy simple que proporcionaría el estilo descrito en el párrafo anterior:

- -
h1 {
-    color: red;
-    font-size: 5em;
-}
- -

La regla se abre con un {{Glossary("CSS Selector", "selector")}}. Este selecciona el elemento HTML que vamos a diseñar. En este caso, diseñaremos encabezados de nivel uno ({{htmlelement ("h1")}}).

- -

Luego tenemos un conjunto de llaves { }. Entre estas habrá una o más declaraciones, que tomarán la forma de pares de propiedad y valor. Cada par especifica cada una de las propiedades de los elementos seleccionados y el valor que queremos dar a esa propiedad.

- -

Antes de los dos puntos, tenemos la propiedad; y después, el valor. Las {{Glossary("property/CSS", "propiedades")}} CSS admiten diferentes valores, dependiendo de qué propiedad se esté especificando. En el ejemplo anterior, tenemos la propiedad color, que puede tomar varios valores de color. También tenemos la propiedad de font-size, que puede tomar varias unidades de tamaño como valor.

- -

Una hoja de estilo CSS contendrá muchas de estas reglas, escritas una tras otra.

- -
h1 {
-    color: red;
-    font-size: 5em;
-}
-
-p {
-    color: black;
-}
- -

Algunos valores se aprenden rápidamente, mientras que otros deberán buscarse. Las páginas de propiedades individuales que hay en el proyecto MDN proporcionan una forma rápida de buscar propiedades y sus valores en caso de olvidarlos o desear saber qué más se puede usar como valor.

- -
-

Nota: Puedes encontrar enlaces a todas las páginas de las propiedades CSS (junto con otras características CSS) enumeradas en la referencia CSS del proyecto MDN. Alternativamente, deberías acostumbrarte a buscar «mdn css-feature-name» en tu motor de búsqueda favorito siempre que necesites obtener más información sobre una función CSS. Por ejemplo, intenta buscar «mdn color» y «mdn font-size».

-
- -

Módulos CSS

- -

Como hay tantas cosas que se podrían diseñar usando CSS, el lenguaje se divide en módulos. Verás referencias a estos módulos a medida que explores en MDN y observarás que muchas de las páginas de documentación están organizadas en torno a un módulo en particular. Por ejemplo, puedes echar un vistazo a la referencia MDN del módulo Fondos y bordes para averiguar cuál es su propósito, qué otras propiedades y características diferentes contiene. También encontrarás enlaces a la especificación CSS que define la tecnología (ver más abajo).

- -

En esta fase, no debes preocuparte demasiado sobre cómo se estructura el CSS, sin embargo, puede facilitarte la búsqueda de información si, por ejemplo, sabes que es probable que cierta propiedad se encuentre entre otras similares y, por lo tanto, en la misma especificación. 

- -

Volvamos al módulo de Fondos y bordes para un ejemplo específico: puedes pensar que tiene lógica que las propiedades background-color y border-color se definan en este módulo. Y llevas toda la razón.

- -

Especificaciones CSS

- -

Todas las tecnologías de estándares web (HTML, CSS, JavaScript, etc.) se definen en extensos documentos denominados especificaciones, publicados por organizaciones de estándares (como {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} o {{glossary("Khronos")}}) que definen con precisión cómo se supone que deben comportarse esas tecnologías.

- -

El caso de CSS no es diferente: lo desarrolla un grupo del W3C llamado CSS Working Group. Este grupo está compuesto por representantes de proveedores de navegadores y otras compañías interesadas en CSS. También hay otras personas, conocidas como expertos invitados, que actúan como voces independientes y no están vinculados a ninguna organización.

- -

El CSS Working Group desarrolla o especifica características nuevas del CSS. Algunas veces lo hacen porque un navegador en particular está interesado en alguna capacidad, otras porque los diseñadores y desarrolladores web piden una característica, y otras porque el grupo ha identificado un requisito. El CSS está en desarrollo constante y todos los días presenta nuevas características disponibles. Sin embargo, un elemento clave sobre el CSS es que toda la comunidad se esfuerza mucho en no cambiar nunca nada que pueda perjudicar los sitios web antiguos. ¡Un sitio web creado en el año 2000, que utiliza el poco CSS disponible que había en ese momento, aún debería poder utilizarse hoy en día!

- -

Como recién llegado al CSS, es probable que encuentres las especificaciones abrumadoras: están destinadas a que los ingenieros las utilicen para implementar soporte de sus características en los agentes de usuario en que trabajan, no para que lo lean los desarrolladores web para comprender el CSS. Muchos desarrolladores experimentados preferirán consultar la documentación disponible en MDN u otros tutoriales. Sin embargo, vale la pena saber que existen y comprender la relación que hay entre el CSS que estás utilizando, el soporte del navegador (ver más abajo) y las especificaciones.

- -

Soporte del navegador

- -

Una vez se ha especificado el CSS, solo es útil en el desarrollo de páginas web si uno o más navegadores lo han implementado. Esto significa que el código se ha escrito para convertir las instrucciones que se especifican en nuestro archivo CSS en algo que se pueda mostrar en pantalla. Veremos este proceso más en profundidad en el artículo Cómo funciona el CSS. Es inusual que todos los navegadores puedan implementar una misma característica al mismo tiempo, por lo que suele haber una brecha en la que se pueden usar algunas partes del CSS en algunos navegadores pero no en otros. Por este motivo, es útil poder verificar el estado de implementación. En cada una de las páginas de propiedades que hay en la MDN se puede ver el estado de la propiedad de interés, por lo que se puede saber si será posible utilizarla en un sitio web.

- -

Lo que sigue es el gráfico de datos de compatibilidad para la propiedad CSS font-family.

- -

{{Compat("css.properties.font-family")}}

- -

¿Qué viene ahora?

- -

Ahora que comprendes mínimamente qué es el CSS, pasemos a Comenzar con CSS, donde puedes empezar a escribir algo de CSS tú mismo.

- -

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

- -

En este módulo

- -
    -
  1. ¿Qué es el CSS?
    2. -
  2. Comenzar con CSS
    3. -
  3. Cómo se estructura el CSS
    4. -
  4. Cómo funciona el CSS
    5. -
  5. Pon en práctica tus conocimientos nuevos
    6. -
diff --git a/files/es/learn/css/first_steps/usa_tu_nuevo_conocimiento/index.html b/files/es/learn/css/first_steps/usa_tu_nuevo_conocimiento/index.html deleted file mode 100644 index bff4f103bf..0000000000 --- a/files/es/learn/css/first_steps/usa_tu_nuevo_conocimiento/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Usa tu nuevo conocimiento -slug: Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento -tags: - - Aprendizaje - - CSS - - Principiante -translation_of: Learn/CSS/First_steps/Using_your_new_knowledge ---- -

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

Con las cosas que has aprendido en las últimas lecciones, puedes darle formato a documentos de texto simple utilizando CSS para agregar tu propio estilo a ellos. Esta evaluación te da una posibilidad de hacer eso.

- - - - - - - - - - - - -
Prerrequisitos:Antes de intentar esta evaluación, deberías haber trabajado a través del módulo de CSS básico, y también comprender HTML básico (estudia la Introducción a HTML).
Objetivo:Utilizar algún CSS y probar conocimiento recién adquirido.
- -

Punto de partida

- -

Puedes trabajar en el editor en vivo más abajo, o puedes descargar el punto de partida para trabajar con tu propio editor. Esta es una página HTML, con el inicio del CSS en el <head> del documento. Si prefieres, puedes mover este CSS a un archivo separado cuando crees el ejemplo en tu computador. Alternativamente, puedes usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.

- -
-

Nota: Si te atascas, pide ayuda — mira la sección Evaluación o ayuda adicional al final de esta página.

-
- -

Trabajando con CSS

- -

Los siguientes ejemplos muestran una biografía, que ha sido estilizada usando CSS. Las propiedades CSS que se han utilizado son las siguientes - cada una enlaza a su página de propiedades en MDN, que te entregará más ejemplos de su uso:

- - - -

Se ha usado una mezcla de selectores, elementos de estilo como <h1> y <h2>, y también una clase para el título del trabajo.

- -

Usa CSS para cambiar el aspecto de esta biografía, cambiando los valores de las propiedades iniciales.

- -
    -
  1. Coloca en rosado el nivel <h1>, usando el color CSS hotpink.
    2. -
  2. Da al encabezado un {{cssxref("border-bottom")}} de 10px con puntos (dotted), que use el color CSS purple.
    3. -
  3. Coloca en cursiva el <h2>.
    4. -
  4. Al ul utilizado para los detalles de contacto un  {{cssxref("background-color")}}  #eeeeee, y un {{cssxref("border")}} de 5px solid purple. Usa algo de {{cssxref("padding")}} para empujar el texto lejos del borde.
    5. -
  5. Cambia los enlaces a verde cuando pase el cursor sobre ellos.
    6. -
- -

Deberías conseguir algo parecido a esta página:

- -

Screenshot of how the example should look after completing the assessment.

- -

Posteriormente intenta buscar algunas propiedades no mencionadas en esta página en la referencia de CSS de MDN y ¡arriésgate!.

- -

Recuerda que no existen respuestas equivocadas acá - En esta etapa en tu aprendizaje puedes tener un poco de diversión.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

- -

Evaluación o ayuda adicional

- -

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

- -
    -
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch.
    2. -
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: -
      -
    • Un título descriptivo como "Requiero evaluacion para Primeros pasos en CSS".
      • -
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • -
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • -
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • -
    -
    3. -
- -

¿Qué sigue?

- -

Felicitaciones por completar este primer modulo!. Deberías tener un buen entendimiento general de CSS, y ser capaz de comprender bastante de los que está sucediendo en una hoja de estilo. En el módulo siguiente, bloques de construccion CSS, revisaremos en profundidad algunas áreas clave.

- -

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

En este módulo

- -
    -
  1. ¿Qué es CSS?
    2. -
  2. Empezando con CSS
    3. -
  3. Cómo se estructura el CSS
    4. -
  4. Cómo funciona CSS
    5. -
  5. Usa tu nuevo conocimiento
    6. -
diff --git a/files/es/learn/css/first_steps/using_your_new_knowledge/index.html b/files/es/learn/css/first_steps/using_your_new_knowledge/index.html new file mode 100644 index 0000000000..bff4f103bf --- /dev/null +++ b/files/es/learn/css/first_steps/using_your_new_knowledge/index.html @@ -0,0 +1,100 @@ +--- +title: Usa tu nuevo conocimiento +slug: Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento +tags: + - Aprendizaje + - CSS + - Principiante +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +--- +

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

Con las cosas que has aprendido en las últimas lecciones, puedes darle formato a documentos de texto simple utilizando CSS para agregar tu propio estilo a ellos. Esta evaluación te da una posibilidad de hacer eso.

+ + + + + + + + + + + + +
Prerrequisitos:Antes de intentar esta evaluación, deberías haber trabajado a través del módulo de CSS básico, y también comprender HTML básico (estudia la Introducción a HTML).
Objetivo:Utilizar algún CSS y probar conocimiento recién adquirido.
+ +

Punto de partida

+ +

Puedes trabajar en el editor en vivo más abajo, o puedes descargar el punto de partida para trabajar con tu propio editor. Esta es una página HTML, con el inicio del CSS en el <head> del documento. Si prefieres, puedes mover este CSS a un archivo separado cuando crees el ejemplo en tu computador. Alternativamente, puedes usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.

+ +
+

Nota: Si te atascas, pide ayuda — mira la sección Evaluación o ayuda adicional al final de esta página.

+
+ +

Trabajando con CSS

+ +

Los siguientes ejemplos muestran una biografía, que ha sido estilizada usando CSS. Las propiedades CSS que se han utilizado son las siguientes - cada una enlaza a su página de propiedades en MDN, que te entregará más ejemplos de su uso:

+ + + +

Se ha usado una mezcla de selectores, elementos de estilo como <h1> y <h2>, y también una clase para el título del trabajo.

+ +

Usa CSS para cambiar el aspecto de esta biografía, cambiando los valores de las propiedades iniciales.

+ +
    +
  1. Coloca en rosado el nivel <h1>, usando el color CSS hotpink.
    2. +
  2. Da al encabezado un {{cssxref("border-bottom")}} de 10px con puntos (dotted), que use el color CSS purple.
    3. +
  3. Coloca en cursiva el <h2>.
    4. +
  4. Al ul utilizado para los detalles de contacto un  {{cssxref("background-color")}}  #eeeeee, y un {{cssxref("border")}} de 5px solid purple. Usa algo de {{cssxref("padding")}} para empujar el texto lejos del borde.
    5. +
  5. Cambia los enlaces a verde cuando pase el cursor sobre ellos.
    6. +
+ +

Deberías conseguir algo parecido a esta página:

+ +

Screenshot of how the example should look after completing the assessment.

+ +

Posteriormente intenta buscar algunas propiedades no mencionadas en esta página en la referencia de CSS de MDN y ¡arriésgate!.

+ +

Recuerda que no existen respuestas equivocadas acá - En esta etapa en tu aprendizaje puedes tener un poco de diversión.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

+ +

Evaluación o ayuda adicional

+ +

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

+ +
    +
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch.
    2. +
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: +
      +
    • Un título descriptivo como "Requiero evaluacion para Primeros pasos en CSS".
      • +
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • +
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • +
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • +
    +
    3. +
+ +

¿Qué sigue?

+ +

Felicitaciones por completar este primer modulo!. Deberías tener un buen entendimiento general de CSS, y ser capaz de comprender bastante de los que está sucediendo en una hoja de estilo. En el módulo siguiente, bloques de construccion CSS, revisaremos en profundidad algunas áreas clave.

+ +

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

En este módulo

+ +
    +
  1. ¿Qué es CSS?
    2. +
  2. Empezando con CSS
    3. +
  3. Cómo se estructura el CSS
    4. +
  4. Cómo funciona CSS
    5. +
  5. Usa tu nuevo conocimiento
    6. +
diff --git a/files/es/learn/css/first_steps/what_is_css/index.html b/files/es/learn/css/first_steps/what_is_css/index.html new file mode 100644 index 0000000000..eb4f8e8a8a --- /dev/null +++ b/files/es/learn/css/first_steps/what_is_css/index.html @@ -0,0 +1,127 @@ +--- +title: ¿Qué es el CSS? +slug: Learn/CSS/First_steps/Qué_es_CSS +tags: + - Beginner + - CSS + - Introduction to CSS + - Learn + - Modules + - Specifications + - Syntax +translation_of: Learn/CSS/First_steps/What_is_CSS +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
+ +

Las hojas de estilo en cascada ({{Glossary("CSS")}}, cascading style sheets) permiten crear páginas web atractivas. Pero ¿cómo funcionan realmente? En este artículo explicaremos qué es el CSS con un ejemplo de sintaxis sencillo y describiremos algunos términos clave sobre este lenguaje.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener instalado el software básico, conocimientos básicos de cómo trabajar con archivos y nociones de HTML (véase Introducción al HTML).
Objetivo:Aprender qué es CSS.
+ +

En el módulo Introducción al HTML, exponemos qué es el HTML y cómo se usa para definir documentos destinados a leerse en un navegador web. Los títulos se verán más grandes que el texto y los párrafos empezarán en una línea nueva y habrá un espacio entre ellos. Los enlaces aparecerán en un color diferente y subrayados para distinguirlos del resto del texto. Vienen predeterminados por el navegador y, en la práctica, son estilos muy básicos que el navegador aplica al HTML para asegurarse, básicamente, de que sean legibles incluso si el autor de la página no especifica un estilo explícito.

+ +

Los estilos predeterminados utilizados por el navegador

+ +

Sin embargo, Internet sería un lugar muy aburrido si todas las páginas web se vieran así. Usando CSS se pueden controlar con precisión cómo se ven los elementos HTML en el navegador, que presentará para las etiquetas de marcado el diseño que cada uno desee.

+ +

¿Para qué sirve el CSS?

+ +

Como hemos mencionado, el CSS es un lenguaje informático que especifica cómo se presentan los documentos a los usuarios: cómo se diseñan, compaginan, etc.

+ +

Un documento suele ser un archivo de texto estructurado con un lenguaje de marcado: {{Glossary("HTML")}} es el más común, pero también existen otros como {{Glossary("SVG")}} o {{Glossary("XML")}}.

+ +

Presentar un documento a un usuario significa convertirlo en un formulario que el público pueda utilizar. Los {{Glossary("Navegador", "navegadores")}}, como por ejemplo {{Glossary("Mozilla Firefox", "Firefox")}}, {{Glossary("Google Chrome", "Chrome")}} o {{Glossary("Microsoft Edge", "Edge")}}, están diseñados para presentar documentos visualmente en una pantalla de ordenador, un proyector o una impresora.

+ +
+

Nota: Un navegador también recibe el nombre de {{Glossary("Agente de usuario", "agente de usuario")}}, que consiste en un programa informático que representa a una persona dentro del sistema. Los navegadores son el modelo principal de agente de usuario en el que pensamos cuando hablamos de CSS, pero no son el único. Hay otros documentos de usuario disponibles, como los que convierten documentos HTML y CSS en PDF para imprimir.

+
+ +

El CSS se puede usar para estilos de texto muy básicos como, por ejemplo, cambiar el color y el tamaño de los encabezados y los enlaces. Se puede utilizar para crear un diseño, como podría ser convertir una columna de texto en una composición con un área de contenido principal y una barra lateral para información relacionada. Incluso se puede usar para crear efectos de animación. Echa un vistazo a los enlaces de este párrafo para ver ejemplos específicos.

+ +

Sintaxis del CSS

+ +

El CSS es un lenguaje basado en reglas: cada usuario define las reglas que especifican los grupos de estilos que van a aplicarse a elementos particulares o grupos de elementos de la página web. Por ejemplo: «Quiero que el encabezado principal de mi página se muestre en letras grandes de color rojo».

+ +

El código siguiente muestra una regla CSS muy simple que proporcionaría el estilo descrito en el párrafo anterior:

+ +
h1 {
+    color: red;
+    font-size: 5em;
+}
+ +

La regla se abre con un {{Glossary("CSS Selector", "selector")}}. Este selecciona el elemento HTML que vamos a diseñar. En este caso, diseñaremos encabezados de nivel uno ({{htmlelement ("h1")}}).

+ +

Luego tenemos un conjunto de llaves { }. Entre estas habrá una o más declaraciones, que tomarán la forma de pares de propiedad y valor. Cada par especifica cada una de las propiedades de los elementos seleccionados y el valor que queremos dar a esa propiedad.

+ +

Antes de los dos puntos, tenemos la propiedad; y después, el valor. Las {{Glossary("property/CSS", "propiedades")}} CSS admiten diferentes valores, dependiendo de qué propiedad se esté especificando. En el ejemplo anterior, tenemos la propiedad color, que puede tomar varios valores de color. También tenemos la propiedad de font-size, que puede tomar varias unidades de tamaño como valor.

+ +

Una hoja de estilo CSS contendrá muchas de estas reglas, escritas una tras otra.

+ +
h1 {
+    color: red;
+    font-size: 5em;
+}
+
+p {
+    color: black;
+}
+ +

Algunos valores se aprenden rápidamente, mientras que otros deberán buscarse. Las páginas de propiedades individuales que hay en el proyecto MDN proporcionan una forma rápida de buscar propiedades y sus valores en caso de olvidarlos o desear saber qué más se puede usar como valor.

+ +
+

Nota: Puedes encontrar enlaces a todas las páginas de las propiedades CSS (junto con otras características CSS) enumeradas en la referencia CSS del proyecto MDN. Alternativamente, deberías acostumbrarte a buscar «mdn css-feature-name» en tu motor de búsqueda favorito siempre que necesites obtener más información sobre una función CSS. Por ejemplo, intenta buscar «mdn color» y «mdn font-size».

+
+ +

Módulos CSS

+ +

Como hay tantas cosas que se podrían diseñar usando CSS, el lenguaje se divide en módulos. Verás referencias a estos módulos a medida que explores en MDN y observarás que muchas de las páginas de documentación están organizadas en torno a un módulo en particular. Por ejemplo, puedes echar un vistazo a la referencia MDN del módulo Fondos y bordes para averiguar cuál es su propósito, qué otras propiedades y características diferentes contiene. También encontrarás enlaces a la especificación CSS que define la tecnología (ver más abajo).

+ +

En esta fase, no debes preocuparte demasiado sobre cómo se estructura el CSS, sin embargo, puede facilitarte la búsqueda de información si, por ejemplo, sabes que es probable que cierta propiedad se encuentre entre otras similares y, por lo tanto, en la misma especificación. 

+ +

Volvamos al módulo de Fondos y bordes para un ejemplo específico: puedes pensar que tiene lógica que las propiedades background-color y border-color se definan en este módulo. Y llevas toda la razón.

+ +

Especificaciones CSS

+ +

Todas las tecnologías de estándares web (HTML, CSS, JavaScript, etc.) se definen en extensos documentos denominados especificaciones, publicados por organizaciones de estándares (como {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} o {{glossary("Khronos")}}) que definen con precisión cómo se supone que deben comportarse esas tecnologías.

+ +

El caso de CSS no es diferente: lo desarrolla un grupo del W3C llamado CSS Working Group. Este grupo está compuesto por representantes de proveedores de navegadores y otras compañías interesadas en CSS. También hay otras personas, conocidas como expertos invitados, que actúan como voces independientes y no están vinculados a ninguna organización.

+ +

El CSS Working Group desarrolla o especifica características nuevas del CSS. Algunas veces lo hacen porque un navegador en particular está interesado en alguna capacidad, otras porque los diseñadores y desarrolladores web piden una característica, y otras porque el grupo ha identificado un requisito. El CSS está en desarrollo constante y todos los días presenta nuevas características disponibles. Sin embargo, un elemento clave sobre el CSS es que toda la comunidad se esfuerza mucho en no cambiar nunca nada que pueda perjudicar los sitios web antiguos. ¡Un sitio web creado en el año 2000, que utiliza el poco CSS disponible que había en ese momento, aún debería poder utilizarse hoy en día!

+ +

Como recién llegado al CSS, es probable que encuentres las especificaciones abrumadoras: están destinadas a que los ingenieros las utilicen para implementar soporte de sus características en los agentes de usuario en que trabajan, no para que lo lean los desarrolladores web para comprender el CSS. Muchos desarrolladores experimentados preferirán consultar la documentación disponible en MDN u otros tutoriales. Sin embargo, vale la pena saber que existen y comprender la relación que hay entre el CSS que estás utilizando, el soporte del navegador (ver más abajo) y las especificaciones.

+ +

Soporte del navegador

+ +

Una vez se ha especificado el CSS, solo es útil en el desarrollo de páginas web si uno o más navegadores lo han implementado. Esto significa que el código se ha escrito para convertir las instrucciones que se especifican en nuestro archivo CSS en algo que se pueda mostrar en pantalla. Veremos este proceso más en profundidad en el artículo Cómo funciona el CSS. Es inusual que todos los navegadores puedan implementar una misma característica al mismo tiempo, por lo que suele haber una brecha en la que se pueden usar algunas partes del CSS en algunos navegadores pero no en otros. Por este motivo, es útil poder verificar el estado de implementación. En cada una de las páginas de propiedades que hay en la MDN se puede ver el estado de la propiedad de interés, por lo que se puede saber si será posible utilizarla en un sitio web.

+ +

Lo que sigue es el gráfico de datos de compatibilidad para la propiedad CSS font-family.

+ +

{{Compat("css.properties.font-family")}}

+ +

¿Qué viene ahora?

+ +

Ahora que comprendes mínimamente qué es el CSS, pasemos a Comenzar con CSS, donde puedes empezar a escribir algo de CSS tú mismo.

+ +

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

+ +

En este módulo

+ +
    +
  1. ¿Qué es el CSS?
    2. +
  2. Comenzar con CSS
    3. +
  3. Cómo se estructura el CSS
    4. +
  4. Cómo funciona el CSS
    5. +
  5. Pon en práctica tus conocimientos nuevos
    6. +
diff --git a/files/es/learn/css/howto/css_faq/index.html b/files/es/learn/css/howto/css_faq/index.html new file mode 100644 index 0000000000..36c2fa1317 --- /dev/null +++ b/files/es/learn/css/howto/css_faq/index.html @@ -0,0 +1,118 @@ +--- +title: Preguntas frecuentes sobre CSS +slug: Web/CSS/Preguntas_frecuentes_sobre_CSS +tags: + - CSS + - Proyecto MDC +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

Mi CSS es válida, pero no se representa correctamente

+

Los navegadores utilizan la declaración DOCTYPE para elegir entre mostrar el documento usando un modo que sea más compatible con los estándares de la Web o mostrarlo con los fallos de los navegadores antiguos. El uso de una declaración DOCTYPE correcta y moderna al inicio del código HTML mejorará el cumplimiento de los estándares del navegador.

+

Los navegadores modernos tienen fundamentalmente dos modos de renderizado:

+ +

Los navegadores basados en Gecko tienen un tercer Modo casi estándar que tiene solo una peculiaridades menores.

+

Esta es una lista de las declaraciones DOCTYPE más utilizadas que activarán el Modo estándar o el Modo casi estándar:

+
<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.0 Transitional / / EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+

Diferencia entre id y class

+

Los elementos HTML pueden tener un atributo id y / o un atributo class. El atributo id asigna un nombre a un elemento determinado y debe haber un solo elemento con ese nombre. El atributo class asigna un elemento a una determinada clase y en general no puede haber más de un elemento con el mismo atributo class. CSS te permite aplicar estilos a un atributo id y / o class concreto.

+

Utiliza un estilo específico de id cuando desees restringir las reglas de estilo a un bloque o elemento concreto. Este estilo lo usará un solo elemento con ese id concreto.

+

Usa un estilo específico de class cuando desees aplicar las reglas de estilo a una determinada clase de bloques y elementos.

+

Consulta Selectores CSS

+

Restaurar el valor de la propiedad predeterminado

+

Debido a que CSS no proporciona una palabra clave "predeterminada", la única manera de restaurar el valor predeterminado de una propiedad es volver a declarar explícitamente dicha propiedad.

+

Por lo tanto, debes tener especial cuidado al escribir reglas de estilo usando selectores (por ejemplo, los selectores por nombre de etiqueta, como p ) que tal vez desees reemplazar con reglas más específicas (como las que usan id o selectores de clase), porque el valor predeterminado original no puede restablecerse automáticamente.

+

Debido a la naturaleza en cascada de CSS, es una buena práctica definir reglas de estilo de una manera lo más concreta posible para evitar aplicar estilo a elementos a los que no se tenía previsto aplicar.

+

Estilos derivados

+

CSS no permite que se defina un estilo según los términos de otro. (Consulta la nota de Eric Meyer acerca de la postura del Grupo de trabajo). Sin embargo, la asignación de múltiples clases a un solo elemento puede proporcionar el mismo efecto.

+

Asignación de múltiples clases

+

A los elementos HTML se les pueden asignar varias clases listándolas  en el atributo class, con un espacio en blanco para separarlas.

+
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... contenido de las noticias de hoy ...
+</ div>
+
+

Si la misma propiedad se declara en ambas reglas, el conflicto se resuelve primero a través de la especificidad, a continuación, según el orden de las declaraciones CSS. El orden de las clases en el atributo class no es relevante.

+

Normas de estilo que no funcionan

+

Las reglas de estilo que son sintácticamente correctas pueden no aplicarse en determinadas situaciones. Puedes utilizar las Reglas de estilo de CSS del Inspector DOM para depurar los problemas de este tipo, pero los casos más frecuentes en los que se ignoran las reglas de estilo se enumeran a continuación.

+
Jerarquía de los elementos HTML
+

La forma en que se aplican los estilos CSS a los elementos HTML depende también de la jerarquía de los elementos. Es importante recordar que una regla que se aplica a un descendiente reemplaza el estilo del padre, a pesar de la especificidad o la prioridad de las reglas CSS.

+
.news { color: black; }
+. corpName {font-weight: bold; color: red;}
+
+<!-- el texto de la noticia es negro, pero el nombre de la empresa va en rojo y negrita -->
+<div class="news">
+   (Reuters) <span class="corpName"> General Electric </ span> (GE.NYS) anunció el jueves ...
+</ div>
+
+

En el caso de jerarquías HTML complejas, si parece que se ignora una regla, comprueba si el elemento está dentro de otro elemento con un estilo diferente.

+
Regla de estilo explícitamente redefinida
+

En las hojas de estilo CSS el orden es importante. Si defines una regla y luego vuelves a definirla, se usará la última definición.

+
#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  otras reglas             */
+/*  otras reglas             */
+/*  otras reglas             */
+.stockSymbol { font-weight: normal; }
+
+<!-- la mayor parte del texto va en negrita, con excepción de "GE", que va en rojo y no en negrita -->
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</ div>
+
+

Para evitar este tipo de errores, intenta definir las reglas solo una vez para un selector determinado y agrupa todas las reglas que pertenecen a ese selector.

+
Uso de una propiedad abreviada
+

Está bien usar las propiedades abreviadas para la definición de reglas de estilo, ya que utiliza una sintaxis muy compacta. Usar la abreviatura con sólo algunos atributos es posible y correcto, pero hay que recordar que los atributos no declarados se restablecen a los valores predeterminados automáticamente. Esto significa que una norma anterior para un solo atributo podría ser reemplazada implícitamente.

+
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</ div>
+
+

En el ejemplo anterior el problema se produjo en las reglas que pertencían a distintos elementos, pero puede ocurrir también para el mismo elemento, porque el orden de las reglas es importante.

+
#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana; / * font-weight es ahora normal * /
+}
+
+
Uso del selector *
+

El selector * se refiere a cualquier elemento y tiene que utilizarse con especial cuidado.

+
body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+<div id="section">
+   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
+</ div>
+
+

En este ejemplo, el selector body * aplica la regla a todos los elementos dentro del cuerpo (body), en cualquier nivel de jerarquía, incluyendo redtext. Así font-weight: bold; aplicada a la clase boldtext se reemplaza por font-weight: normal; aplicada a redtext.

+
Especificidad en CSS
+

Cuando se aplican múltiples reglas a un determinado elemento, la norma escogida depende de su especificidad de estilo. El estilo en línea (en los atributos HTML style) es lo primero, seguido por los selectores id, a continuación, los selectores class y, finalmente, los selectores element-name.

+
div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+<div id="orange" class="green" style="color: red;">This is red</div>
+
+

Las reglas son más complicadas cuando el selector tiene varias partes. Se puede encontrar más información detallada acerca de cómo se calcula la especificidad del selector en el capítulo 6.4.3 de la Especificación CSS 2.1

+

¿Qué hacen las propiedades -moz-*?

+

Por favor, consulta la página Extensiones CSS de Mozilla.

+

 

+

{{ languages( { "en": "en/Common_CSS_Questions", "pl": "pl/Cz\u0119ste_pytania_o_CSS", "zh-tw": "zh_tw/CSS_\u4e00\u822c\u554f\u984c" } ) }}

diff --git a/files/es/learn/css/howto/generated_content/index.html b/files/es/learn/css/howto/generated_content/index.html new file mode 100644 index 0000000000..605e87f9e2 --- /dev/null +++ b/files/es/learn/css/howto/generated_content/index.html @@ -0,0 +1,178 @@ +--- +title: Usando CSS para generar contenido +slug: Learn/CSS/Sábercomo/Generated_content +tags: + - CSS + - Fundamentos + - Guía + - Principiante + - Web + - graficos +translation_of: Learn/CSS/Howto/Generated_content +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color") }}Esta es la 9ª sección del tutorial CSS Getting Started; Describe algunas formas en las que puede utilizar CSS para agregar contenido cuando se muestra un documento. Modifica su hoja de estilo para agregar contenido de texto y una imagen.

+ +

Informacion: Contenido

+ +

Una de las ventajas importantes de CSS es que le ayuda a separar el estilo de un documento de su contenido. Sin embargo, hay situaciones en las que tiene sentido especificar cierto contenido como parte de la hoja de estilo, no como parte del documento.

+ +

El contenido especificado en una hoja de estilo puede consistir en texto o imágenes. Especifica el contenido de su hoja de estilos cuando el contenido está estrechamente vinculado a la estructura del documento.

+ +
+
+

Más detalles

+ +

Especificar contenido en una hoja de estilo puede causar complicaciones. Por ejemplo, es posible que tenga versiones de idioma diferentes de su documento que comparten una hoja de estilo. Si parte de la hoja de estilo tiene que ser traducida, significa que debe colocar las partes de la hoja de estilos en archivos separados y organizar para que se vincule con las versiones de idioma adecuado de su documento.

+ +

Estas complicaciones no surgen si el contenido especificado incluye símbolos o imágenes que se aplican en todos los idiomas y culturas.

+ +

El contenido especificado en una hoja de estilo no se convierte en parte del DOM.

+
+
+ +

Texto contenido

+ +

CSS puede insertar contenido de texto antes o después de un elemento. Para especificar esto, haga una regla y agregue {{cssxref (':: before')}} o {{cssxref (':: after')}} al selector. En la declaración, especifique la propiedad {{cssxref ('content')}} con el contenido de texto como su valor.

+ +
+
Ejemplo
+ +

HTML

+ +
Un texto donde necesito <span class="ref">alguna cosa</span>
+
+ +

CSS

+ +
.ref::before {
+  font-weight: negrita;
+  color: navy;
+  content: "Reference: ";
+}
+ +

Output

+ +

{{ EmbedLiveSample('Text_content', 600, 30) }}

+
+ +
+
Mas detalles
+ +

El conjunto de caracteres de una hoja de estilo es UTF-8 de forma predeterminada, pero se puede especificar en el vínculo o en la hoja de estilos o en otras formas. Para obtener más información, consulte 4. 4 Representación de hoja de estilo CSS en la especificación CSS.

+ +

Los caracteres individuales también se pueden especificar mediante un mecanismo de escape que utiliza la barra invertida como el carácter de escape. Por ejemplo, \ 265B es el símbolo del ajedrez para una reina negra ♛. Para obtener más información, consulte Referencia a caracteres no representados en una codificación de caracteres y también Caracteres y caso en la Especificación CSS.

+
+ +

Imagen contenido

+ +

Para agregar una imagen antes o después de un elemento, puede especificar la URL de un archivo de imagen en el valor de la propiedad {{cssxref ('content')}}.

+ +
+
Ejemplo
+ +

Esta regla añade un espacio y un icono después de cada enlace que tiene el glosario de clases:

+ +
a.glossary:after {content: " " url("../images/glossary-icon.gif");}
+
+
+ +

Para agregar una imagen como fondo de un elemento, especifique la URL de un archivo de imagen en el valor de la propiedad {{cssxref ('background')}}. Esta es una propiedad abreviada que especifica el color de fondo, la imagen, cómo se repite la imagen y algunos otros detalles.

+ +
+
Ejemplo
+ +

Esta regla establece el fondo de un elemento específico, utilizando una URL para especificar un archivo de imagen.

+ +

El selector especifica el id del elemento. El valor no-repeat hace que la imagen aparezca sólo una vez:

+ +
#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
+
+
+ +
+
Mas detalles
+ +

Para obtener información sobre las propiedades individuales que afectan a los fondos y sobre otras opciones al especificar imágenes de fondo, consulte {{Cssxref ('fondo')}}, página de referencia.

+
+ +

Acción: Añadir una imagen de fondo

+ +

Esta imagen es un cuadrado blanco con una línea azul en la parte inferior:

+ + + + + + + +
Image:Blue-rule.png
+ +
    +
  1. Descargue el archivo de imagen en el mismo directorio que su archivo CSS. (Por ejemplo, haga clic con el botón derecho del ratón para obtener un menú contextual y, a continuación, seleccione Guardar imagen como y especifique el directorio que está utilizando para este tutorial).
    2. +
  2. Edit your CSS file and add this rule to the body, setting a background image for the entire page.
    3. +
  3. + 
    background: url("Blue-rule.png");
+
    + +

    La repetición de valor es la predeterminada, por lo que no es necesario especificarla. La imagen se repite horizontal y verticalmente, dando una apariencia como papel de escribir forrado:

    + +
    +

    Image:Blue-rule-ground.png

    + +
    +
    +

    Cascading Style Sheets

    +
    + +
    +

    Cascading Style Sheets

    +
    +
    +
    +
    4. +
+ +
+
Reto
+ +

Descarga esta imagen:

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

Agrega una nueva regla a tu hoja de estilos, luego, agrega la imagen al inicio de cada linea:

+ +
+

Image:Blue-rule-ground.png

+ +
+
image:Yellow-pin.png Cascading Style Sheets
+ +
image:Yellow-pin.png Cascading Style Sheets
+
+
+ +
+
Possible solution
+ +

Add this rule to your stylesheet:

+ +
p:before{
+  content: url("yellow-pin.png");
+}
+
+ +

 

+Hide solution
+Ver la solución a este reto.
+ +

Qué sigue?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Una forma común en que las hojas de estilos agregan contenido es marcando los elementos en las listas. La siguiente sección describe cómo especificar estilos para una lista de elementos.

diff --git a/files/es/learn/css/howto/index.html b/files/es/learn/css/howto/index.html new file mode 100644 index 0000000000..ffff1653c0 --- /dev/null +++ b/files/es/learn/css/howto/index.html @@ -0,0 +1,81 @@ +--- +title: Usa CSS para resolver problemas comunes +slug: Learn/CSS/Sábercomo +translation_of: Learn/CSS/Howto +--- +
{{LearnSidebar}}
+ +

Los siguientes enlaces apuntan a soluciones comunes a los problemas cotidianos que necesitará resolver con CSS.

+ +

Casos de uso común

+ +
+
+

Básicos

+ + + +

CSS y texto

+ + +
+ +
+

Cajas y diseños

+ + +
+
+ +

Uncommon or advanced techniques

+ +

Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest use cases you may face.

+ +

General

+ + + +

Advanced effects

+ + + +

Layout

+ + diff --git a/files/es/learn/css/introduction_to_css/fundamental_css_comprehension/index.html b/files/es/learn/css/introduction_to_css/fundamental_css_comprehension/index.html deleted file mode 100644 index b53db2df02..0000000000 --- a/files/es/learn/css/introduction_to_css/fundamental_css_comprehension/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Comprensión de los fundamentos de CSS -slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension -tags: - - CSS - - Estilo - - Evaluación - - Modelo de Caja - - Principiante - - Selectores - - Sintaxis - - comentários - - reglas -translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension ---- -
-
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
- -

Has avanzado mucho en este módulo, debes sentirte orgulloso de haber llegado hasta el final. El último paso antes de terminar es intentar el examen del módulo — que incluye completar varios ejercicios para crear el último diseño — una tarjeta de presentación/de jugador/perfil de redes sociales.

- - - - - - - - - - - - -
Prerrequisitos:Antes de intentar esta evaluación, debería haber revisado todos los artículos en este módulo.
Objetivo:Probar la comprensión de los fundamentos de la teoría, sintaxis y mecánica de CSS.
- -

Punto de Partida

- -

Para comenzar esta evaluación, debes:

- - - -
-

Nota: Alternativamente, se puede utilizar un sitio como  JSBin o Thimble para hacer la evaluación. Puede pegar el HTML y completar el CSS en uno de estos editores en línea, y usar  esta URL para apuntar el elemento <img> al archivo de imagen. Si el editor en línea que estás usando no tiene un panel CSS separado, no dudes en ponerlo en un elemento <style> en el encabezado del documento.

-
- -

Resumen del Proyecto

- -

Se le ha proporcionado un poco de HTML puro y una imagen, y necesitas escribir el CSS necesario para darle estilo a una pequeña tarjeta de presentación en línea, que tal vez pueda servir como una tarjeta de jugador o de perfil en redes sociales. Las siguientes secciones describen lo que debes hacer.

- -

Configuración básica:

- - - -

Encargandonos de los selectores y conjuntos de reglas proporcionados:

- - - -

Nuevos conjuntos de reglas que necesitas escribir:

- - - -

Otras cosas en las que pensar:

- - - -

Consejos y Sugerencias

- - - -

Ejemplo

- -

La siguiente captura de pantalla muestra un ejemplo de cómo debe ser el diseño terminado:

- -

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

- -

 

- -

Evaluación

- -

Si estás siguiendo esta evaluación como parte de un curso organizado, deberías ser capaz de entregar tu trabajo a tu profesor/mentor para que lo califique. Si eres autodidacta, entonces puedes obtener la guía de puntuación fácilmente preguntando en el hilo del Discurso del Área de Aprendizaje, o en el canal IRC #mdn en Mozilla IRC. Haz el ejercicio primero - ¡No hay nada que ganar haciendo trampa!

- -

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

-
diff --git a/files/es/learn/css/styling_text/fuentes_web/index.html b/files/es/learn/css/styling_text/fuentes_web/index.html deleted file mode 100644 index 7bfa162217..0000000000 --- a/files/es/learn/css/styling_text/fuentes_web/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: Fuentes web -slug: Learn/CSS/Styling_text/Fuentes_web -translation_of: Learn/CSS/Styling_text/Web_fonts ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
- -

En el primer artículo del módulo, exploramos las características básicas del CSS disponibles para aplicar estilos a tipos de letra y al texto. En este artículo vamos a ir más lejos: exploraremos en detalle las tipografías web, que permiten que te descargues tipos de letra personalizados junto con tu página web para lograr un estilo de texto más variado y personalizado.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, conceptos básicos de HTML (véase Introducción al HTML) y de CSS (véase Introducción al CSS), texto CSS y los fundamentos de la fuente.
Objetivo:Aprender a aplicar tipos de letra a una página web, ya sea desde un servicio de terceros o desde tu código.
- -

Resumen de las familias de tipos de letra

- -

Como observamos en el artículo Texto y tipos de letra, puedes controlar los tipos de letra que aplicas a tu HTML con la propiedad {{cssxref ("font-family")}}. Este atributo toma uno o más nombres de familia de tipos de letra y el navegador recorre esta lista hasta que encuentra un tipo de letra disponible en el sistema en el que se ejecuta:

- -
p {
-  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
-}
- -

Este sistema funciona bien, pero las opciones de tipo de letra tradicionales de los desarrolladores web eran limitadas. Solo hay un puñado de tipos de letra que puedes garantizar que están disponibles en todos los sistemas comunes: las llamadas fuentes seguras para la web. Puedes usar la lista de tipos de letra para especificar cuáles prefieres, seguido de alternativas seguras para la web y del tipo de letra predeterminado del sistema. El problema es que esto añade trabajo extra en términos de pruebas para asegurarte de que tus diseños se ven bien con cada tipo de letra, etc.

- -

Tipografías web

- -

Hay una alternativa, sin embargo, que funciona muy bien hasta con versiones posteriores a la versión 6 de Internet Explorer. Las tipografías web son una función del CSS que te permite especificar los archivos de tipo de letra que se van a descargar junto con tu sitio web a medida que el usuario acceda a ellos, lo que significa que cualquier navegador que admita tipografías web puede disponer de los tipos de letra que especificas. ¡Increíble! Observa a continuación la sintaxis que se necesita.

- -

En primer lugar, tienes un bloque {{cssxref ("@font-face")}} al comienzo del CSS, que especifica los archivos de los tipos de letra que quieres que se descarguen:

- -
@font-face {
-  font-family: "myFont";
-  src: url("myFont.woff");
-}
- -

A continuación, puedes usar el nombre de la familia de tipos de letra especificado en @font-face para aplicar tu tipo de letra personalizado a cualquier elemento que desees:

- -
html {
-  font-family: "myFont", "Bitstream Vera Serif", serif;
-}
- -

La sintaxis es un poco más compleja; más adelante la veremos más detalladamente.

- -

Hay dos cosas importantes a tener en cuenta acerca de las tipografías web:

- -
    -
  1. Los navegadores admiten diferentes formatos de tipos de letra, por lo que necesitarás más de un formato de tipos de letra para conseguir una compatibilidad decente entre navegadores. Por ejemplo, la mayoría de los navegadores modernos admiten WOFF/WOFF2 (Web Open Font Format, versiones 1 y 2), el formato más eficiente disponible. Pero las versiones antiguas de Internet Explorer solo admiten tipos de letra con formato EOT (Embedded Open Type) y es posible que debas incluir una versión SVG del tipo de letra para soportar versiones antiguas de navegadores iPhone y Android. A continuación te mostraremos cómo generar el código necesario.
    2. -
  2. Generalmente las fuentes no son de uso gratuito. Debes pagar por ellas y/o respetar otras condiciones de licencia, como acreditar al creador del tipo de letra en el código (o en tu sitio web). Los tipos de letra no deben robarse, ni debes utilizarlos sin otorgar a su creador el crédito apropiado.
    3. -
- -
-

Nota: ¡Los tipos de letra seguros para web como tecnología han sido compatibles con Internet Explorer desde su versión 4!

-
- -

Aprendizaje activo: Un ejemplo de tipo de letra seguro para web

- -

Con esto en mente, vamos a construir un ejemplo básico de uso de un tipo de letra seguro para web a partir de los principios básicos. Es difícil hacer un ejemplo de demostración de este aspecto con un ejemplo en vivo incrustado, por lo tanto, nos gustaría que siguieses los pasos que se detallan en las secciones siguientes para que te hagas una idea de cómo funciona el proceso.

- -

Como punto de partida hay que utilizar los archivos web-font-start.html y web-font-start.css a los que añadir tu código (véase el ejemplo en vivo). Haz una copia de estos archivos en un directorio nuevo de tu equipo. En el archivo web-font-start.css, encontrarás un poco de CSS para trabajar con el aspecto y los tipos de letra básicos del ejemplo.

- -

Encontrar tipos de letra

- -

Para este ejemplo, utilizaremos dos tipografías web: una para los títulos de encabezado y otra para el texto base. Para empezar, hay que encontrar los archivos que contienen el tipo de letra. Los tipos de letra se crean en estudios de diseño y se guardan en diversos formatos de archivo. En general, hay tres tipos de sitios donde puedes obtener fuentes:

- - - -

Vamos a ver algunos tipos de letra. Ve a Font Squirrel y elige dos tipos de letra: uno que te resulte agradable e interesante para los títulos (quizá una buena tipografía de tipo Display o Slab Serif), y otro un poco menos llamativo y más legible para los párrafos. Cuando encuentres los tipos de letra, pulsa el botón de descarga y guarda el archivo en el mismo directorio que los archivos HTML y CSS que guardaste anteriormente. No importa si son TTF (True Type Fonts) u OTF (Open Type Fonts).

- -

En cada caso, descomprime el paquete de tipos de letra (las tipografías web generalmente se distribuyen en archivos ZIP que contienen los archivos con el tipo de letra y la información de la licencia). En el paquete puede haber más de un archivo con tipos de letra: algunos tipos de letra se distribuyen por familias, con diferentes variantes disponibles, por ejemplo: thin, medium, bold, italic, thin italic, etc. Para este ejemplo, solo queremos que te quedes con un solo archivo de fuente para cada opción.

- -
-

Nota: En la sección «Encontrar tipos de letra» en la columna de la derecha, puedes hacer clic en las diferentes etiquetas y clasificaciones para filtrar las opciones.

-
- -

Generar el código

- -

Ahora deberás generar el código que necesitas (y aplicar el estilo al tipo de letra). Para cada tipo de letra, sigue estos pasos:

- -
    -
  1. Asegúrate de cumplir con todos los requisitos de la licencia, sobre todo si vas a usarlo en un proyecto comercial y/o en una web.
    2. -
  2. Ve a Webfont Generator de Fontsquirrel.
    3. -
  3. Sube tus dos archivos de tipo de letra con el botón Cargar Fuentes.
    4. -
  4. Marca la casilla de verificación con el texto «Sí, las fuentes que elijo pueden utilizarse legalmente para una página web».
    5. -
  5. Haz clic en Descarga tu paquete.
    6. -
- -

Una vez que el generador haya finalizado el procesamiento, deberías obtener un archivo ZIP para descargar; guárdalo en el mismo directorio que tus archivos HTML y CSS.

- -

El código de tu ejemplo de demostración

- -

En este punto, descomprime el paquete con los tipos de letra web que acabas de generar. En el directorio descomprimido verás tres elementos útiles:

- - - -

Para implementar estos tipos de letra en tu ejemplo de demostración, sigue estos pasos:

- -
    -
  1. Cambia el nombre del directorio descomprimido a algo fácil y simple, como fonts.
    2. -
  2. Abre el archivo stylesheet.css y copia los dos bloques @font-face incluidos en tu archivo web-font-start.css. Debes ponerlos en la parte superior, antes de cualquier elemento CSS, ya que los tipos de letra deben importarse antes que los puedas utilizar en tu sitio web.
    3. -
  3. Cada una de las funciones url() apunta a un archivo de tipo de letra que tenemos que importar a nuestro CSS. Necesitamos asegurarnos de que las rutas a los archivos son correctas, así que añade fonts/ al inicio de cada ruta (ajusta la ruta como sea necesario).
    4. -
  4. Ahora puedes usar estos tipos de letra en tu lista de tipos de letra, al igual que cualquier tipo de letra seguro o predeterminado del sistema. Por ejemplo: - 
    font-family: 'zantrokeregular', serif;
    -
    5. -
- -

Con tu ejemplo de demostración, deberías obtener una página con unos agradables tipos de letra. Debido a que los tipos de letra se crean en diferentes tamaños, es posible que tengas que ajustar el tamaño, el espaciado, etc., para conseguir una apariencia más ordenada.

- -

- -
-

Nota: Si tienes problemas para lograr que esto funcione, no dudes en comparar tu versión con nuestros archivos terminados, consulta web-font-finished.html y web-font-finished.css (ejecuta el ejemplo terminado en vivo).

-
- -

Los servicios de tipos de letra en línea

- -

Los servicios de tipos de letra en línea en general guardan tipos de letra y los proporcionan a los usuarios, por lo que no tienes que preocuparte por escribir el código @font-face, solo necesitas insertar una o dos sencillas líneas de código en tu sitio web para que todo funcione. Los ejemplos incluyen Adobe Fonts y Cloud.typography. La mayoría de estos servicios se basan en suscripciones de pago, con la excepción notable de Google Fonts, un servicio gratuito y muy útil, sobre todo para trabajos de prueba rápida y escritura de ejemplos de demostración.

- -

La mayoría de estos servicios son fáciles de usar, por lo que no vamos a exponerlos en gran detalle. Vamos a echar un vistazo rápido a las fuentes de Google, para que te hagas una idea. De nuevo, usa copias de web-font-start.html y web-font-start.css como punto de partida.

- -
    -
  1. Ve a Google Fonts.
    2. -
  2. Usa los filtros del lado izquierdo para indicar los tipos de letra que deseas escoger y elige un par de tipos de letra que te gusten.
    3. -
  3. Para seleccionar una familia de tipos de letra, pulsa el botón ⊕ que encontrarás al lado.
    4. -
  4. Cuando hayas elegido las familias de tipos de letra, pulsa la barra [número] familias seleccionadas que encontrarás en la parte inferior de la página.
    5. -
  5. En la pantalla resultante, primero debes copiar la línea de código HTML que se muestra y pegarla en el encabezado de tu archivo HTML. Ponlo encima del elemento {{HTMLElement("link")}}, de modo que el tipo de letra se importe correctamente antes de intentar utilizarlo en tu CSS.
    6. -
  6. Luego, debes copiar las declaraciones CSS enumeradas en tu CSS según corresponda para aplicar los tipos de letra personalizados a tu HTML.
    7. -
- -
-

Nota: Puedes encontrar una versión completa en google-font.html y google-font.css, si necesitas comparar tu trabajo con el nuestro (consúltalo en vivo).

-
- -

@font-face con más detalle

- -

Vamos a explorar que la sintaxis correspondiente a @font-face que te ha generado Fontsquirrel. Uno de los bloques se verá así:

- -
@font-face {
-  font-family: 'ciclefina';
-  src: url('fonts/cicle_fina-webfont.eot');
-  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
-         url('fonts/cicle_fina-webfont.woff') format('woff'),
-         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
-         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
- -

Esto se conoce como «sintaxis @font-face a prueba de balas» desde una publicación de Paul Irish, en los tiempos en que @font-face empezaba a popularizarse (Bulletproof @font-face Syntax). Vamos a ver qué hace:

- - - -
-

Nota: También puedes especificar los valores particulares {{cssxref ("font-variant")}} y {{cssxref ("font-stretch")}} para tus tipos de letra seguros para web. En los navegadores más nuevos también puedes especificar un valor {{cssxref ("unicode-range")}}, que es un rango de caracteres específicos que debes usar aparte del tipo de letra seguro para web en los navegadores que incluyan esta opción. Solo se descargaran los caracteres especificados y te ahorrarás descargas innecesarias. Creating Custom Font Stacks with Unicode-Range de Drew McLellan proporciona algunas ideas útiles sobre cómo hacer uso de todo esto.

-
- -

Tipos de letra variables

- -

Los navegadores disponen hoy de una tecnología de tipos de letra reciente llamada tipos de letra variables: se trata de tipos de letra que permiten incorporar muchas variaciones diferentes de un tipo de letra en un solo archivo, en lugar de tener un archivo separado para cada ancho, grosor o estilo. Es demasiado avanzado para nuestro curso para principiantes, pero si te apetece avanzar y echarles un vistazo, lee nuestra guía de tipos de letra variables.

- -

Resumen

- -

Ahora que has leído nuestros artículos sobre nociones de aplicación de estilo al texto, es hora de evaluar cuánto has retenido del módulo a partir de la creación de una composición tipográfica de una página de inicio de una escuela comunitaria.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

- -

En este módulo

- - diff --git a/files/es/learn/css/styling_text/web_fonts/index.html b/files/es/learn/css/styling_text/web_fonts/index.html new file mode 100644 index 0000000000..7bfa162217 --- /dev/null +++ b/files/es/learn/css/styling_text/web_fonts/index.html @@ -0,0 +1,197 @@ +--- +title: Fuentes web +slug: Learn/CSS/Styling_text/Fuentes_web +translation_of: Learn/CSS/Styling_text/Web_fonts +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
+ +

En el primer artículo del módulo, exploramos las características básicas del CSS disponibles para aplicar estilos a tipos de letra y al texto. En este artículo vamos a ir más lejos: exploraremos en detalle las tipografías web, que permiten que te descargues tipos de letra personalizados junto con tu página web para lograr un estilo de texto más variado y personalizado.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, conceptos básicos de HTML (véase Introducción al HTML) y de CSS (véase Introducción al CSS), texto CSS y los fundamentos de la fuente.
Objetivo:Aprender a aplicar tipos de letra a una página web, ya sea desde un servicio de terceros o desde tu código.
+ +

Resumen de las familias de tipos de letra

+ +

Como observamos en el artículo Texto y tipos de letra, puedes controlar los tipos de letra que aplicas a tu HTML con la propiedad {{cssxref ("font-family")}}. Este atributo toma uno o más nombres de familia de tipos de letra y el navegador recorre esta lista hasta que encuentra un tipo de letra disponible en el sistema en el que se ejecuta:

+ +
p {
+  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}
+ +

Este sistema funciona bien, pero las opciones de tipo de letra tradicionales de los desarrolladores web eran limitadas. Solo hay un puñado de tipos de letra que puedes garantizar que están disponibles en todos los sistemas comunes: las llamadas fuentes seguras para la web. Puedes usar la lista de tipos de letra para especificar cuáles prefieres, seguido de alternativas seguras para la web y del tipo de letra predeterminado del sistema. El problema es que esto añade trabajo extra en términos de pruebas para asegurarte de que tus diseños se ven bien con cada tipo de letra, etc.

+ +

Tipografías web

+ +

Hay una alternativa, sin embargo, que funciona muy bien hasta con versiones posteriores a la versión 6 de Internet Explorer. Las tipografías web son una función del CSS que te permite especificar los archivos de tipo de letra que se van a descargar junto con tu sitio web a medida que el usuario acceda a ellos, lo que significa que cualquier navegador que admita tipografías web puede disponer de los tipos de letra que especificas. ¡Increíble! Observa a continuación la sintaxis que se necesita.

+ +

En primer lugar, tienes un bloque {{cssxref ("@font-face")}} al comienzo del CSS, que especifica los archivos de los tipos de letra que quieres que se descarguen:

+ +
@font-face {
+  font-family: "myFont";
+  src: url("myFont.woff");
+}
+ +

A continuación, puedes usar el nombre de la familia de tipos de letra especificado en @font-face para aplicar tu tipo de letra personalizado a cualquier elemento que desees:

+ +
html {
+  font-family: "myFont", "Bitstream Vera Serif", serif;
+}
+ +

La sintaxis es un poco más compleja; más adelante la veremos más detalladamente.

+ +

Hay dos cosas importantes a tener en cuenta acerca de las tipografías web:

+ +
    +
  1. Los navegadores admiten diferentes formatos de tipos de letra, por lo que necesitarás más de un formato de tipos de letra para conseguir una compatibilidad decente entre navegadores. Por ejemplo, la mayoría de los navegadores modernos admiten WOFF/WOFF2 (Web Open Font Format, versiones 1 y 2), el formato más eficiente disponible. Pero las versiones antiguas de Internet Explorer solo admiten tipos de letra con formato EOT (Embedded Open Type) y es posible que debas incluir una versión SVG del tipo de letra para soportar versiones antiguas de navegadores iPhone y Android. A continuación te mostraremos cómo generar el código necesario.
    2. +
  2. Generalmente las fuentes no son de uso gratuito. Debes pagar por ellas y/o respetar otras condiciones de licencia, como acreditar al creador del tipo de letra en el código (o en tu sitio web). Los tipos de letra no deben robarse, ni debes utilizarlos sin otorgar a su creador el crédito apropiado.
    3. +
+ +
+

Nota: ¡Los tipos de letra seguros para web como tecnología han sido compatibles con Internet Explorer desde su versión 4!

+
+ +

Aprendizaje activo: Un ejemplo de tipo de letra seguro para web

+ +

Con esto en mente, vamos a construir un ejemplo básico de uso de un tipo de letra seguro para web a partir de los principios básicos. Es difícil hacer un ejemplo de demostración de este aspecto con un ejemplo en vivo incrustado, por lo tanto, nos gustaría que siguieses los pasos que se detallan en las secciones siguientes para que te hagas una idea de cómo funciona el proceso.

+ +

Como punto de partida hay que utilizar los archivos web-font-start.html y web-font-start.css a los que añadir tu código (véase el ejemplo en vivo). Haz una copia de estos archivos en un directorio nuevo de tu equipo. En el archivo web-font-start.css, encontrarás un poco de CSS para trabajar con el aspecto y los tipos de letra básicos del ejemplo.

+ +

Encontrar tipos de letra

+ +

Para este ejemplo, utilizaremos dos tipografías web: una para los títulos de encabezado y otra para el texto base. Para empezar, hay que encontrar los archivos que contienen el tipo de letra. Los tipos de letra se crean en estudios de diseño y se guardan en diversos formatos de archivo. En general, hay tres tipos de sitios donde puedes obtener fuentes:

+ + + +

Vamos a ver algunos tipos de letra. Ve a Font Squirrel y elige dos tipos de letra: uno que te resulte agradable e interesante para los títulos (quizá una buena tipografía de tipo Display o Slab Serif), y otro un poco menos llamativo y más legible para los párrafos. Cuando encuentres los tipos de letra, pulsa el botón de descarga y guarda el archivo en el mismo directorio que los archivos HTML y CSS que guardaste anteriormente. No importa si son TTF (True Type Fonts) u OTF (Open Type Fonts).

+ +

En cada caso, descomprime el paquete de tipos de letra (las tipografías web generalmente se distribuyen en archivos ZIP que contienen los archivos con el tipo de letra y la información de la licencia). En el paquete puede haber más de un archivo con tipos de letra: algunos tipos de letra se distribuyen por familias, con diferentes variantes disponibles, por ejemplo: thin, medium, bold, italic, thin italic, etc. Para este ejemplo, solo queremos que te quedes con un solo archivo de fuente para cada opción.

+ +
+

Nota: En la sección «Encontrar tipos de letra» en la columna de la derecha, puedes hacer clic en las diferentes etiquetas y clasificaciones para filtrar las opciones.

+
+ +

Generar el código

+ +

Ahora deberás generar el código que necesitas (y aplicar el estilo al tipo de letra). Para cada tipo de letra, sigue estos pasos:

+ +
    +
  1. Asegúrate de cumplir con todos los requisitos de la licencia, sobre todo si vas a usarlo en un proyecto comercial y/o en una web.
    2. +
  2. Ve a Webfont Generator de Fontsquirrel.
    3. +
  3. Sube tus dos archivos de tipo de letra con el botón Cargar Fuentes.
    4. +
  4. Marca la casilla de verificación con el texto «Sí, las fuentes que elijo pueden utilizarse legalmente para una página web».
    5. +
  5. Haz clic en Descarga tu paquete.
    6. +
+ +

Una vez que el generador haya finalizado el procesamiento, deberías obtener un archivo ZIP para descargar; guárdalo en el mismo directorio que tus archivos HTML y CSS.

+ +

El código de tu ejemplo de demostración

+ +

En este punto, descomprime el paquete con los tipos de letra web que acabas de generar. En el directorio descomprimido verás tres elementos útiles:

+ + + +

Para implementar estos tipos de letra en tu ejemplo de demostración, sigue estos pasos:

+ +
    +
  1. Cambia el nombre del directorio descomprimido a algo fácil y simple, como fonts.
    2. +
  2. Abre el archivo stylesheet.css y copia los dos bloques @font-face incluidos en tu archivo web-font-start.css. Debes ponerlos en la parte superior, antes de cualquier elemento CSS, ya que los tipos de letra deben importarse antes que los puedas utilizar en tu sitio web.
    3. +
  3. Cada una de las funciones url() apunta a un archivo de tipo de letra que tenemos que importar a nuestro CSS. Necesitamos asegurarnos de que las rutas a los archivos son correctas, así que añade fonts/ al inicio de cada ruta (ajusta la ruta como sea necesario).
    4. +
  4. Ahora puedes usar estos tipos de letra en tu lista de tipos de letra, al igual que cualquier tipo de letra seguro o predeterminado del sistema. Por ejemplo: + 
    font-family: 'zantrokeregular', serif;
    +
    5. +
+ +

Con tu ejemplo de demostración, deberías obtener una página con unos agradables tipos de letra. Debido a que los tipos de letra se crean en diferentes tamaños, es posible que tengas que ajustar el tamaño, el espaciado, etc., para conseguir una apariencia más ordenada.

+ +

+ +
+

Nota: Si tienes problemas para lograr que esto funcione, no dudes en comparar tu versión con nuestros archivos terminados, consulta web-font-finished.html y web-font-finished.css (ejecuta el ejemplo terminado en vivo).

+
+ +

Los servicios de tipos de letra en línea

+ +

Los servicios de tipos de letra en línea en general guardan tipos de letra y los proporcionan a los usuarios, por lo que no tienes que preocuparte por escribir el código @font-face, solo necesitas insertar una o dos sencillas líneas de código en tu sitio web para que todo funcione. Los ejemplos incluyen Adobe Fonts y Cloud.typography. La mayoría de estos servicios se basan en suscripciones de pago, con la excepción notable de Google Fonts, un servicio gratuito y muy útil, sobre todo para trabajos de prueba rápida y escritura de ejemplos de demostración.

+ +

La mayoría de estos servicios son fáciles de usar, por lo que no vamos a exponerlos en gran detalle. Vamos a echar un vistazo rápido a las fuentes de Google, para que te hagas una idea. De nuevo, usa copias de web-font-start.html y web-font-start.css como punto de partida.

+ +
    +
  1. Ve a Google Fonts.
    2. +
  2. Usa los filtros del lado izquierdo para indicar los tipos de letra que deseas escoger y elige un par de tipos de letra que te gusten.
    3. +
  3. Para seleccionar una familia de tipos de letra, pulsa el botón ⊕ que encontrarás al lado.
    4. +
  4. Cuando hayas elegido las familias de tipos de letra, pulsa la barra [número] familias seleccionadas que encontrarás en la parte inferior de la página.
    5. +
  5. En la pantalla resultante, primero debes copiar la línea de código HTML que se muestra y pegarla en el encabezado de tu archivo HTML. Ponlo encima del elemento {{HTMLElement("link")}}, de modo que el tipo de letra se importe correctamente antes de intentar utilizarlo en tu CSS.
    6. +
  6. Luego, debes copiar las declaraciones CSS enumeradas en tu CSS según corresponda para aplicar los tipos de letra personalizados a tu HTML.
    7. +
+ +
+

Nota: Puedes encontrar una versión completa en google-font.html y google-font.css, si necesitas comparar tu trabajo con el nuestro (consúltalo en vivo).

+
+ +

@font-face con más detalle

+ +

Vamos a explorar que la sintaxis correspondiente a @font-face que te ha generado Fontsquirrel. Uno de los bloques se verá así:

+ +
@font-face {
+  font-family: 'ciclefina';
+  src: url('fonts/cicle_fina-webfont.eot');
+  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
+         url('fonts/cicle_fina-webfont.woff') format('woff'),
+         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
+         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+ +

Esto se conoce como «sintaxis @font-face a prueba de balas» desde una publicación de Paul Irish, en los tiempos en que @font-face empezaba a popularizarse (Bulletproof @font-face Syntax). Vamos a ver qué hace:

+ + + +
+

Nota: También puedes especificar los valores particulares {{cssxref ("font-variant")}} y {{cssxref ("font-stretch")}} para tus tipos de letra seguros para web. En los navegadores más nuevos también puedes especificar un valor {{cssxref ("unicode-range")}}, que es un rango de caracteres específicos que debes usar aparte del tipo de letra seguro para web en los navegadores que incluyan esta opción. Solo se descargaran los caracteres especificados y te ahorrarás descargas innecesarias. Creating Custom Font Stacks with Unicode-Range de Drew McLellan proporciona algunas ideas útiles sobre cómo hacer uso de todo esto.

+
+ +

Tipos de letra variables

+ +

Los navegadores disponen hoy de una tecnología de tipos de letra reciente llamada tipos de letra variables: se trata de tipos de letra que permiten incorporar muchas variaciones diferentes de un tipo de letra en un solo archivo, en lugar de tener un archivo separado para cada ancho, grosor o estilo. Es demasiado avanzado para nuestro curso para principiantes, pero si te apetece avanzar y echarles un vistazo, lee nuestra guía de tipos de letra variables.

+ +

Resumen

+ +

Ahora que has leído nuestros artículos sobre nociones de aplicación de estilo al texto, es hora de evaluar cuánto has retenido del módulo a partir de la creación de una composición tipográfica de una página de inicio de una escuela comunitaria.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

+ +

En este módulo

+ + diff --git "a/files/es/learn/css/s\303\241bercomo/generated_content/index.html" "b/files/es/learn/css/s\303\241bercomo/generated_content/index.html" deleted file mode 100644 index 605e87f9e2..0000000000 --- "a/files/es/learn/css/s\303\241bercomo/generated_content/index.html" +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Usando CSS para generar contenido -slug: Learn/CSS/Sábercomo/Generated_content -tags: - - CSS - - Fundamentos - - Guía - - Principiante - - Web - - graficos -translation_of: Learn/CSS/Howto/Generated_content ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color") }}Esta es la 9ª sección del tutorial CSS Getting Started; Describe algunas formas en las que puede utilizar CSS para agregar contenido cuando se muestra un documento. Modifica su hoja de estilo para agregar contenido de texto y una imagen.

- -

Informacion: Contenido

- -

Una de las ventajas importantes de CSS es que le ayuda a separar el estilo de un documento de su contenido. Sin embargo, hay situaciones en las que tiene sentido especificar cierto contenido como parte de la hoja de estilo, no como parte del documento.

- -

El contenido especificado en una hoja de estilo puede consistir en texto o imágenes. Especifica el contenido de su hoja de estilos cuando el contenido está estrechamente vinculado a la estructura del documento.

- -
-
-

Más detalles

- -

Especificar contenido en una hoja de estilo puede causar complicaciones. Por ejemplo, es posible que tenga versiones de idioma diferentes de su documento que comparten una hoja de estilo. Si parte de la hoja de estilo tiene que ser traducida, significa que debe colocar las partes de la hoja de estilos en archivos separados y organizar para que se vincule con las versiones de idioma adecuado de su documento.

- -

Estas complicaciones no surgen si el contenido especificado incluye símbolos o imágenes que se aplican en todos los idiomas y culturas.

- -

El contenido especificado en una hoja de estilo no se convierte en parte del DOM.

-
-
- -

Texto contenido

- -

CSS puede insertar contenido de texto antes o después de un elemento. Para especificar esto, haga una regla y agregue {{cssxref (':: before')}} o {{cssxref (':: after')}} al selector. En la declaración, especifique la propiedad {{cssxref ('content')}} con el contenido de texto como su valor.

- -
-
Ejemplo
- -

HTML

- -
Un texto donde necesito <span class="ref">alguna cosa</span>
-
- -

CSS

- -
.ref::before {
-  font-weight: negrita;
-  color: navy;
-  content: "Reference: ";
-}
- -

Output

- -

{{ EmbedLiveSample('Text_content', 600, 30) }}

-
- -
-
Mas detalles
- -

El conjunto de caracteres de una hoja de estilo es UTF-8 de forma predeterminada, pero se puede especificar en el vínculo o en la hoja de estilos o en otras formas. Para obtener más información, consulte 4. 4 Representación de hoja de estilo CSS en la especificación CSS.

- -

Los caracteres individuales también se pueden especificar mediante un mecanismo de escape que utiliza la barra invertida como el carácter de escape. Por ejemplo, \ 265B es el símbolo del ajedrez para una reina negra ♛. Para obtener más información, consulte Referencia a caracteres no representados en una codificación de caracteres y también Caracteres y caso en la Especificación CSS.

-
- -

Imagen contenido

- -

Para agregar una imagen antes o después de un elemento, puede especificar la URL de un archivo de imagen en el valor de la propiedad {{cssxref ('content')}}.

- -
-
Ejemplo
- -

Esta regla añade un espacio y un icono después de cada enlace que tiene el glosario de clases:

- -
a.glossary:after {content: " " url("../images/glossary-icon.gif");}
-
-
- -

Para agregar una imagen como fondo de un elemento, especifique la URL de un archivo de imagen en el valor de la propiedad {{cssxref ('background')}}. Esta es una propiedad abreviada que especifica el color de fondo, la imagen, cómo se repite la imagen y algunos otros detalles.

- -
-
Ejemplo
- -

Esta regla establece el fondo de un elemento específico, utilizando una URL para especificar un archivo de imagen.

- -

El selector especifica el id del elemento. El valor no-repeat hace que la imagen aparezca sólo una vez:

- -
#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
-
-
- -
-
Mas detalles
- -

Para obtener información sobre las propiedades individuales que afectan a los fondos y sobre otras opciones al especificar imágenes de fondo, consulte {{Cssxref ('fondo')}}, página de referencia.

-
- -

Acción: Añadir una imagen de fondo

- -

Esta imagen es un cuadrado blanco con una línea azul en la parte inferior:

- - - - - - - -
Image:Blue-rule.png
- -
    -
  1. Descargue el archivo de imagen en el mismo directorio que su archivo CSS. (Por ejemplo, haga clic con el botón derecho del ratón para obtener un menú contextual y, a continuación, seleccione Guardar imagen como y especifique el directorio que está utilizando para este tutorial).
    2. -
  2. Edit your CSS file and add this rule to the body, setting a background image for the entire page.
    3. -
  3. - 
    background: url("Blue-rule.png");
-
    - -

    La repetición de valor es la predeterminada, por lo que no es necesario especificarla. La imagen se repite horizontal y verticalmente, dando una apariencia como papel de escribir forrado:

    - -
    -

    Image:Blue-rule-ground.png

    - -
    -
    -

    Cascading Style Sheets

    -
    - -
    -

    Cascading Style Sheets

    -
    -
    -
    -
    4. -
- -
-
Reto
- -

Descarga esta imagen:

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

Agrega una nueva regla a tu hoja de estilos, luego, agrega la imagen al inicio de cada linea:

- -
-

Image:Blue-rule-ground.png

- -
-
image:Yellow-pin.png Cascading Style Sheets
- -
image:Yellow-pin.png Cascading Style Sheets
-
-
- -
-
Possible solution
- -

Add this rule to your stylesheet:

- -
p:before{
-  content: url("yellow-pin.png");
-}
-
- -

 

-Hide solution
-Ver la solución a este reto.
- -

Qué sigue?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Una forma común en que las hojas de estilos agregan contenido es marcando los elementos en las listas. La siguiente sección describe cómo especificar estilos para una lista de elementos.

diff --git "a/files/es/learn/css/s\303\241bercomo/index.html" "b/files/es/learn/css/s\303\241bercomo/index.html" deleted file mode 100644 index ffff1653c0..0000000000 --- "a/files/es/learn/css/s\303\241bercomo/index.html" +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Usa CSS para resolver problemas comunes -slug: Learn/CSS/Sábercomo -translation_of: Learn/CSS/Howto ---- -
{{LearnSidebar}}
- -

Los siguientes enlaces apuntan a soluciones comunes a los problemas cotidianos que necesitará resolver con CSS.

- -

Casos de uso común

- -
-
-

Básicos

- - - -

CSS y texto

- - -
- -
-

Cajas y diseños

- - -
-
- -

Uncommon or advanced techniques

- -

Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest use cases you may face.

- -

General

- - - -

Advanced effects

- - - -

Layout

- - diff --git a/files/es/learn/desarrollo_web_front-end/index.html b/files/es/learn/desarrollo_web_front-end/index.html deleted file mode 100644 index f58a9ad486..0000000000 --- a/files/es/learn/desarrollo_web_front-end/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: Desarrollo web Front-end -slug: Learn/Desarrollo_web_Front-end -tags: - - Aprender - - CSS - - De lado del cliente - - Estándar Web - - Estándares web - - Front-end - - HTML - - Herramientas - - JavaScript - - Novato - - Principiante -translation_of: Learn/Front-end_web_developer ---- -

{{learnsidebar}}

- -

¡Bienvenido a la ruta de aprendizaje para desarrolladores de la interfaz de usuario web!

- -

Aquí se te proporciona un curso estructurado que te enseñará todo lo que necesitas saber para convertirte en un desarrollador de la interfaz de usuario web. Simplemente trabaja en cada sección, aprendiendo nuevas habilidades (o mejorando las existentes) sobre la marcha. Cada sección incluye desafíos y ejercicios para evaluar tu comprensión antes de seguir adelante.

- -

Temas tratados

- -

Los temas tratados son:

- - - -

Puedes trabajar en las secciones en orden, pero cada una también es autónoma. Por ejemplo, si ya conoces HTML, puedes pasar a la sección CSS.

- -

Prerrequisitos

- -

No necesitas conocimientos previos para empezar este curso. Todo lo que necesitas es una computadora que pueda ejecutar navegadores web modernos, una conexión a Internet y la voluntad de aprender.

- -

Si no estás seguro de si el desarrollo de la interfaz de usuario web es para ti, y/o deseas una breve introducción antes de comenzar un curso más largo y completo, consulta una {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la Web")}}.

- -

Cómo obtener ayuda

- -

Hemos tratado de hacer que el desarrollo de la interfaz de usuario web sea lo más cómodo posible, pero probablemente todavía quedes encallado porque no entiendes algo o porque algún código simplemente no funciona.

- -

No entres en pánico. Todos hemos encallado, sin importar que seamos desarrolladores web principiantes o profesionales. El artículo {{web.link("/es/docs/Learn/Learning_and_getting_help", "Aprender y obtener ayuda")}} te brinda una serie de consejos para buscar información y ayudarte a ti mismo. Si aún estás atascado, no dudes en publicar una pregunta en nuestro Foro de discusión.

- -

Empecemos. ¡Diviértete!

- -

El camino del aprendizaje

- -

Primeros pasos

- -

Tiempo para completar: 1.5 a 2 horas

- -

Prerrequisitos

- -

Nada excepto conocimientos básicos de informática.

- -

¿Cómo sabré que estoy listo para seguir adelante?

- -

No hay evaluaciones en esta parte del curso. Pero asegúrate de no saltarla. Es importante prepararte para trabajar en la resolución de los ejercicios más adelante en el curso.

- -

Guías

- - - -

Semántica y estructura con HTML

- -

Tiempo para completar: 35 a 50 horas

- -

Prerrequisitos

- -

Nada, excepto: conocimientos básicos de informática y un entorno de desarrollo web básico.

- -

¿Cómo sabré que estoy listo para seguir adelante?

- -

Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.

- -

Módulos

- - - -

Estilo y diseño con CSS

- -

Tiempo para completar: 90 a 120 horas

- -

Prerrequisitos

- -

Es recomendable que tengas conocimientos básicos de HTML antes de comenzar a aprender CSS. Primero deberías estudiar {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}} por lo menos.

- -

¿Cómo sabré que estoy listo para seguir adelante?

- -

Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.

- -

Módulos

- - - -

Recursos adicionales

- - - -

Interactividad con JavaScript

- -

Tiempo para completar: 135 a 185 horas

- -

Prerrequisitos

- -

Es recomendable que tengas conocimientos básicos de HTML antes de comenzar a aprender JavaScript. Primero deberías estudiar {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}} por lo menos.

- -

¿Cómo sabré que estoy listo para seguir adelante?

- -

Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.

- -

Módulos

- - - -

Formularios web — Trabajar con datos del usuario

- -

Tiempo para completar: 40 a 50 horas

- -

Prerrequisitos

- -

Los formularios requieren conocimientos de HTML, CSS y JavaScript. Dada la complejidad de trabajar con formularios, es un tema dedicado.

- -

¿Cómo sabré que estoy listo para seguir adelante?

- -

Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.

- -

Módulos

- - - -

Hacer que la web funcione para todos

- -

Tiempo para completar: 60 a 75 horas

- -

Prerrequisitos

- -

Es una buena idea conocer HTML, CSS y JavaScript antes de trabajar en esta sección. Muchas de las técnicas y mejores prácticas se refieren a múltiples tecnologías.

- -

¿Cómo sabré que estoy listo para seguir adelante?

- -

Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.

- -

Módulos

- - - -

Herramientas modernas

- -

Tiempo para completar: 55 a 90 horas

- -

Prerrequisitos

- -

Es una buena idea conocer HTML, CSS y JavaScript antes de trabajar en esta sección, ya que las herramientas analizadas funcionan junto con muchas de estas tecnologías.

- -

¿Cómo sabré que estoy listo para seguir adelante?

- -

No hay artículos de evaluación específicos en este conjunto de módulos. Los tutoriales de casos de estudio al final del segundo y tercer módulo te preparan para comprender los conceptos básicos de las herramientas modernas.

- -

Módulos

- - diff --git a/files/es/learn/forms/basic_native_form_controls/index.html b/files/es/learn/forms/basic_native_form_controls/index.html new file mode 100644 index 0000000000..c8a2651837 --- /dev/null +++ b/files/es/learn/forms/basic_native_form_controls/index.html @@ -0,0 +1,326 @@ +--- +title: Controles de formulario originales +slug: Learn/HTML/Forms/The_native_form_widgets +translation_of: Learn/Forms/Basic_native_form_controls +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}
+ +

En el artículo anterior, marcamos un ejemplo de formulario web funcional, presentamos algunos controles de formulario y elementos estructurales comunes, y nos centramos en las mejores prácticas de accesibilidad. A continuación, veremos con detalle las funciones de los diferentes controles de formulario, o widgets, y estudiaremos todas las diferentes opciones de que se dispone para la recopilación de diferentes tipos de datos. En este artículo en particular, veremos el conjunto original de controles de formulario, disponible en todos los navegadores desde los primeros días de la web.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática y de lenguaje HTML.
Objetivo:Comprender en detalle el conjunto original de controles de formulario originales disponibles en los navegadores para la recopilación de datos y su implementación con HTML.
+ +

Ya conoces algunos elementos de formulario, incluidos {{HTMLelement ('form')}}, {{HTMLelement ('fieldset')}}, {{HTMLelement ('legend')}}, {{HTMLelement ('textarea' )}}, {{HTMLelement ('label')}}, {{HTMLelement ('button')}} y {{HTMLelement ('input')}}. Este artículo expone:

+ + + +
+

Nota: Las características que se consideran en este artículo son compatibles con todos los navegadores, lo que no es el caso para todos los controles de formulario. En los próximos dos artículos vamos a exponer los controles de formulario que se han añadido a HTML5 más recientemente. Si quieres una referencia más avanzada, consulta nuestra referencia a elementos de formulario HTML, y en particular nuestra extensa referencia a tipos <input>.

+
+ +

Campos de entrada de texto

+ +

Los campos de texto {{htmlelement ("input")}} son los controles de formulario más básicos. Son un modo muy cómodo de permitir al usuario introducir cualquier tipo de datos, y ya hemos visto algunos ejemplos sencillos.

+ +
+

Nota: Los campos de texto de los formularios HTML son controles de entrada de texto sencillos sin formato. Esto significa que no puedes usarlos para aplicar una edición enriquecida (negrita, cursiva, etc.). Todos los controles de formulario que encuentres con texto enriquecido son controles de formulario personalizados creados con HTML, CSS y JavaScript.

+
+ +

Todos los controles de texto básicos comparten algunos comportamientos comunes:

+ + + +
+

Nota: El elemento {{htmlelement ("input")}} es único entre los elementos HTML porque puede tomar muchas formas diferentes según el valor de su atributo. Se utiliza para crear la mayoría de los tipos de controles de formulario, que incluyen campos de texto de una sola línea, controles para la fecha y la hora, controles sin introducción de texto, como casillas de verificación, botones de opción y selectores de color, y botones.

+
+ +

Campos de texto de una sola línea

+ +

Un campo de texto de una sola línea se crea utilizando un elemento {{HTMLElement ("input")}} cuyo valor de atributo {{htmlattrxref ("type","input")}} se establece en text, u omitiendo por completo el atributo {{htmlattrxref ( "type","input")}} (text es el valor predeterminado). El valor text de este atributo también es el valor alternativo si el navegador no reconoce el valor que has especificado para el atributo {{htmlattrxref ("type","input")}} (por ejemplo, si especificas type="color" y el navegador no está dotado en origen de un control de selección de colores).

+ +
+

Nota: Puedes encontrar ejemplos de todos los tipos de campo de texto de una sola línea en GitHub en single-line-text-fields.html (o consultarlo en vivo).

+
+ +

Aquí hay un ejemplo básico de campo de texto de una sola línea:

+ +
<input type="text" id="comment" name="comment" value="I'm a text field">
+ +

Los campos de texto de una sola línea solo tienen una restricción verdadera: si escribes el texto con saltos de línea, el navegador elimina esos saltos de línea antes de enviar los datos al servidor.

+ +

La captura de pantalla siguiente muestra los tipos de entrada de texto predeterminado, activo (con el foco) y deshabilitado en Firefox 71 y Safari en macOS y en Chrome 79 y Edge 18 en Windows 10.

+ +

Captura de pantalla del atributo deshabilitado y predeterminado: estilo para una entrada de texto activa (con el foco) en Firefox, Safari, Chrome y Edge.

+ +
+

Nota: HTML5 ha mejorado el campo de texto básico original de una sola línea al añadir valores especiales para el atributo {{htmlattrxref ("type", "input")}} que imponen restricciones de validación específicas y otras características, por ejemplo, específicas para introducir direcciones URL o números. Los expondremos en el artículo siguiente: Los tipos de entrada en HTML5.

+
+ +

Campo de contraseña

+ +

Uno de los tipos de entrada originales era el tipo de campo de texto password:

+ +
<input type="password" id="pwd" name="pwd">
+ +

El valor de la contraseña no añade restricciones especiales al texto que se introduce, pero oculta el valor que se introduce en el campo (por ejemplo, con puntos o asteriscos) para impedir que otros puedan leerlo.

+ +

Ten en cuenta que esto es solo una función de interfaz de usuario; a menos que envíes tu formulario en modo seguro, se enviará como texto plano, lo que es malo desde el punto de vista de la seguridad porque alguien con malas intenciones podría interceptar tus datos y robar tus contraseñas, datos de tarjetas de crédito o cualquier otra cosa que hayas enviado. La mejor manera de proteger a los usuarios de esto es alojar cualquier página que contenga formularios en una ubicación de conexión segura (es decir, en una dirección https://), de modo que los datos se cifren antes de enviarse.

+ +

Los navegadores reconocen las implicaciones de seguridad de enviar datos de formulario por una conexión insegura y disponen de mensajes de advertencia para disuadir a los usuarios de usar formularios no seguros. Para obtener más información sobre las implementaciones de Firefox al respecto, consulta el artículo Contraseñas inseguras.

+ +

Contenido oculto

+ +

Otro control de texto original es el tipo de entrada hidden. Se usa para crear un control de formulario que es invisible para el usuario, pero que aun así se envía al servidor junto con el resto de los datos del formulario una vez se transmiten; por ejemplo, es posible que desees enviar una marca de tiempo al servidor que indique cuándo se realizó un pedido. Al estar oculto, el usuario no puede ver ni editar su valor intencionadamente, el control nunca recibirá el foco y un lector de pantalla tampoco lo detectará.

+ +
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
+
+ +

Si creas un elemento así, es necesario establecer sus atributos name y value. Su valor puede establecerse dinámicamente a través de JavaScript. El tipo de entrada oculta no debe tener ninguna etiqueta asociada.

+ +

Otros tipos de entrada de texto, como {{HTMLElement ("input / search", "search")}}, {{HTMLElement ("input / url", "url")}} y {{HTMLElement ("input / tel" , "tel")}}, se añadieron con HTML5. Se tratarán en el próximo artículo: Tipos de entrada HTML5.

+ +

Elementos de selección: casillas de verificación y botones de opción

+ +

Los elementos de selección (o checkable items, en inglés) son controles cuyo estado puede cambiar cuando se hace clic en ellos o en sus etiquetas asociadas. Hay dos tipos de elementos de selección: las casillas de verificación (o check boxes) y los botones de opción (o radio buttons). Ambos usan el atributo checked para indicar si el control de formulario está seleccionado por defecto o no.

+ +

Vale la pena señalar que estos controles no se comportan exactamente como otros controles de formulario. Para la mayoría de los controles de formulario, cuando se envía el formulario, se envían todos los controles que tienen un atributo name, incluso si en ellos no se ha introducido ningún valor. En el caso de elementos de selección, sus valores se envían solo si están seleccionados. Si no están seleccionados, no se envía nada, ni siquiera su nombre. Si están seleccionados pero no tienen ningún valor asignado, el nombre se envía con el valor on.

+ +
+

Nota: Puedes encontrar los ejemplos de esta sección en GitHub como checkable-items.html (o consultarlos en vivo).

+
+ +

Para una usabilidad/accesibilidad óptima, te recomendamos delimitar cada lista de elementos que estén relacionados entre sí dentro de un elemento {{htmlelement ("fieldset")}} con un elemento {{htmlelement ("legend")}} que proporcione una descripción general de la lista. Cada par individual de elementos {{htmlelement ("label")}}/{{htmlelement ("input")}} ha de estar contenido en un elemento de lista propio (o similar). El elemento {{htmlelement ('label')}} asociado se coloca en general inmediatamente después del botón de opción o la casilla de verificación, con las instrucciones para el grupo de botones de opción o casillas de verificación, que suelen ser el contenido del elemento {{htmlelement ("legend")}}. Observa las estructuras de ejemplo en los ejemplos asociados anteriores.

+ +

Casillas de verificación

+ +

Las casillas de verificación se crean estableciendo el atributo type del elemento {{HTMLElement ("input")}} en el valor {{HTMLElement ("input / checkbox", "checkbox")}}.

+ +
<input type="checkbox" id="carrots" name="carrots" value="carrots" checked>
+
+ +

Al incluir el atributo checked, la casilla de verificación se marca automáticamente cuando se carga la página. Al hacer clic en la casilla de verificación o en su etiqueta asociada, la casilla de verificación se activa o desactiva.

+ +

Las capturas de pantalla siguientes muestran casillas de verificación predeterminadas, activas (con el foco) y deshabilitadas en Firefox 71 y Safari 13 en macOS y Chrome 79 y Edge 18 en Windows 10:

+ +

Casillas de verificación predeterminadas, activas y deshabilitadas en Firefox 71 y Safari 13 en Mac y Chrome 79 y Edge 18 en Windows 10

+ +
+

Nota: Las casillas de verificación y los botones de opción con atributo checked al cargarse coinciden con la pseudoclase {{cssxref (':default')}}, incluso aunque ya no estén seleccionadas. Las que están seleccionadas coinciden con la pseudoclase {{cssxref(':checked')}}.

+
+ +

Debido a su naturaleza activa-inactiva, las casillas de verificación se consideran botones de conmutación, y muchos desarrolladores y diseñadores han ampliado el estilo de casilla de verificación predeterminado para crear botones que parecen interruptores de conmutación. Aquí puedes ver un ejemplo en acción (observa también el código fuente).

+ +

Botón de opción

+ +

Un botón de opción se crea estableciendo el atributo {{htmlattrxref ("type", "input")}} del elemento {{HTMLElement ("input")}} en el valor radio:

+ +
<input type="radio" id="soup" name="meal" checked>
+ +

Es posible asociar diversos botones de opción. Si comparten el mismo valor de atributo {{htmlattrxref ("name", "input")}}, se considera que están en el mismo grupo de botones. Solo un botón dentro de un grupo puede estar activado en cada momento. Esto significa que cuando uno de ellos se selecciona, todos los demás se deseleccionan automáticamente. Al enviar el formulario, solo se envía el valor del botón de opción seleccionado. Si ninguno de ellos está seleccionado, se considera que el conjunto completo de botones de opción está en un estado desconocido y no se envía ningún valor con el formulario. Cuando en un grupo de botones con el mismo nombre se selecciona uno de los botones de opción, no es posible deseleccionar todos los botones sin reiniciar el formulario.

+ +
<fieldset>
+  <legend>¿Cuál es tu comida favorita?</legend>
+  <ul>
+    <li>
+      <label for="soup">Sopa</label>
+      <input type="radio" id="soup" name="meal" value="soup" checked>
+    </li>
+    <li>
+      <label for="curry">Curry</label>
+      <input type="radio" id="curry" name="meal" value="curry">
+    </li>
+    <li>
+      <label for="pizza">Pizza</label>
+      <input type="radio" id="pizza" name="meal" value="pizza">
+    </li>
+  </ul>
+</fieldset>
+ +

Las capturas de pantalla siguientes muestran botones de opción sin seleccionar y seleccionados, algunos con el foco y otros desactivados sin seleccionar y seleccionados, en Firefox 71 y Safari 13 en MacOS y Chrome 79 y Edge 18 en Windows 10.

+ +

Botones de opción en Firefox 71 y Safari 13 en Mac y Chrome 79 y Edge 18 en Windows 10

+ +

Botones

+ +

El botón de opción no es realmente un botón, a pesar de su nombre; sigamos adelante y echemos un vistazo a los controles de formulario que son botones propiamente. Hay tres tipos de entrada según el tipo de botones que se utilicen:

+ +
+
submit
+
Envía los datos del formulario al servidor. Para los elementos {{HTMLElement ("button")}}, omitir el atributo type (o introducir un valor de tipo no válido) da como resultado un botón de envío (submit).
+
reset
+
Restablece todos los controles de formulario a sus valores por defecto.
+
button
+
Botones que no tienen efecto automático, pero que se pueden personalizar con código JavaScript.
+
+ +

Además, el elemento {{htmlelement ("button")}} puede tomar un atributo type para imitar estos tres tipos de entrada. La diferencia principal entre los dos es que los elementos <button> propiamente admiten aplicación de estilo en mayor medida.

+ +
+

Nota: El tipo de entrada image también se representa como un botón. También desarrollaremos este tema más adelante.

+
+ +
+

Nota: Puedes encontrar los ejemplos de esta sección en GitHub como button-examples.html (o consultarlos en vivo).

+
+ +

A continuación puedes encontrar ejemplos de cada tipo de botón <input>, junto con el tipo de botón equivalente.

+ +

enviar

+ +
<button type="submit">
+    Este es un <strong>botón de envío</strong>
+</button>
+
+<input type="submit" value="Este es un botón de envío">
+ +

reiniciar

+ +
<button type="reset">
+    Este es un <strong>botón de reinicio</strong>
+</button>
+
+<input type="reset" value="Este es un botón de reinicio">
+ +

anónimo

+ +
<button type="button">
+    Este es un <strong>botón anónimo</strong>
+</button>
+
+<input type="button" value="Este es un botón anónimo">
+ +

Los botones siempre se comportan igual, independientemente de su usas un elemento {{HTMLElement ("button")}} o un elemento {{HTMLElement ("input")}}. Sin embargo, como puedes ver en los ejemplos, los elementos {{HTMLElement ("button")}} te permiten usar HTML en tu contenido, que se inserta entre las etiquetas <button> de apertura y cierre. Los elementos {{HTMLElement ("input")}}, por otro lado, son elementos vacíos; el contenido que muestran está inserto en el atributo value y, por lo tanto, solo acepta contenido de texto sin formato.

+ +

Los ejemplos siguientes muestran los tipos de entrada de botones predeterminados, activos y deshabilitados: en Firefox 71 y Safari 13 en macOS, y Chrome 79 y Edge 18 en Windows 10.

+ +

Tipos de entrada de botones predeterminados, activos y deshabilitados en Firefox 71 y Safari 13 en Mac y Chrome 79 y Edge 18 en Windows 10

+ +

Botón de imagen

+ +

El control botón de imagen se muestra exactamente como un elemento {{HTMLElement ("img")}}, excepto que cuando el usuario hace clic en él, se comporta como un botón de envío.

+ +

Se crea un botón de imagen usando un elemento {{HTMLElement ("input")}} con su atributo {{htmlattrxref ("type","input")}} establecido en el valor image. Este elemento admite exactamente el mismo conjunto de atributos que el elemento {{HTMLElement ("img")}}, además de todos los atributos que admiten el resto de botones de formulario.

+ +
<input type="image" alt="¡Púlsame!" src="my-img.png" width="80" height="30">
+ +

Si el botón de imagen se usa para enviar un formulario, este control no envía su valor; en lugar de ello se envían las coordenadas X e Y del clic que se ha hecho sobre la imagen (las coordenadas son relativas a la imagen, lo que significa que la esquina superior izquierda de la imagen representa la coordenada (0, 0)). Las coordenadas se envían como dos pares clave/valor:

+ + + +

Por ejemplo, cuando haces clic en las coordenadas (123, 456) de la imagen y se hace el envío por el método get, verás los valores añadidos a la URL de la manera siguiente:

+ +
http://foo.com?pos.x=123&pos.y=456
+ +

Esta es una forma muy cómoda de construir un «mapa dinámico». La forma en que se envían y recuperan estos valores se detalla en el artículo Enviar los datos del formulario.

+ +

Selector de archivos

+ +

Hay un último tipo de <input> que nos llegó a principios del HTML: el tipo entrada de archivo. Los formularios pueden enviar archivos a un servidor (esta acción específica también se detalla en el artículo Enviar los datos del formulario). El control de selección de archivos se puede usar para elegir uno o más archivos para enviar.

+ +

Para crear un control de selección de archivos, utilizas el elemento {{HTMLElement ("input")}} con su atributo {{htmlattrxref ("type","input")}} establecido en file. Es posible restringir los tipos de archivos que se aceptan utilizando el atributo {{htmlattrxref ("accept","input")}}. Además, puedes permitir que el usuario elija más de un archivo añadiendo el atributo {{htmlattrxref ("multiple","input")}}.

+ +

Ejemplo

+ +

En este ejemplo, se crea un control de selección de archivos que solicita archivos de imágenes gráficas. El usuario puede seleccionar múltiples archivos en este caso.

+ +
<input type="file" name="file" id="file" accept="image/*" multiple>
+ +

En algunos dispositivos móviles, el control de selección de archivos puede acceder a fotos, vídeos y audio capturados directamente por la cámara y el micrófono del dispositivo y añadir información de captura al atributo accept de la manera siguiente:

+ +
<input type="file" accept="image/*;capture=camera">
+<input type="file" accept="video/*;capture=camcorder">
+<input type="file" accept="audio/*;capture=microphone">
+ +

Atributos comunes

+ +

Muchos de los elementos que se utilizan para definir controles de formulario tienen sus atributos específicos propios. Sin embargo, hay un conjunto de atributos que son comunes para todos los elementos de formulario. Ya has conocido algunos, pero a continuación encontrarás una lista de esos atributos comunes para referencias futuras:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nombre del atributoValor por defectoDescripción
autofocusfalseEste atributo booleano te permite especificar que el elemento ha de tener el foco de entrada automáticamente cuando se carga la página. En un documento, solo un elemento asociado a un formulario puede tener este atributo especificado.
disabledfalseEste atributo booleano indica que el usuario no puede interactuar con el elemento. Si no se especifica este atributo, el elemento hereda su configuración del elemento que lo contiene, por ejemplo, {{HTMLElement ("fieldset")}}. Si el elemento que lo contiene no tiene el atributo establecido en disabled, el elemento está habilitado.
formEl elemento <form> con el que está asociado el control, que se usa cuando no está anidado dentro de ese formulario. El valor del atributo debe ser el atributo id de un elemento {{HTMLElement ("form")}} del mismo documento. Esto te permite asociar un formulario con un control de formulario que esté fuera de aquel, incluso si está dentro de un elemento de formulario diferente.
nameEl nombre del elemento; se envía con los datos del formulario.
valueEl valor inicial del elemento.
+ +

Conclusión

+ +

Este artículo ha expuesto los tipos de entrada más antiguos: el conjunto original que se introdujo en los primeros días de HTML, que es compatible con todos los navegadores. En el artículo siguiente veremos los valores del atributo type que se han añadido en HTML5 más recientemente.

+ +

{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}

+ +

En este módulo

+ + + +

Temas avanzados

+ + diff --git a/files/es/learn/forms/form_validation/index.html b/files/es/learn/forms/form_validation/index.html new file mode 100644 index 0000000000..e967b68973 --- /dev/null +++ b/files/es/learn/forms/form_validation/index.html @@ -0,0 +1,845 @@ +--- +title: Validación de formularios de datos +slug: Learn/HTML/Forms/Validacion_formulario_datos +tags: + - Ejemplo + - Guía + - HTML + - Intermedio + - JavaScript + - Web + - formulários +translation_of: Learn/Forms/Form_validation +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
+ +

Antes de enviar datos al servidor, es importante asegurarse de que se completan todos los controles de formulario requeridos, y en el formato correcto. Esto se denomina validación de formulario en el lado del cliente y ayuda a garantizar que los datos que se envían coinciden con los requisitos establecidos en los diversos controles de formulario. Este artículo te guiará por los conceptos básicos y ejemplos de validación de formularios en el lado del cliente.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, y entender cómo funcionan el HTML, el CSS y el JavaScript.
Objetivo:Entender qué es la validación de formularios en el lado del cliente, porqué es importante y cómo aplicar diversas técnicas para implementarla.
+ +

La validación en el lado del cliente es una verificación inicial y una característica importante para garantizar una buena experiencia de usuario; mediante la detección de datos no válidos en el lado del cliente, el usuario puede corregirlos de inmediato. Si el servidor lo recibe y, a continuación, lo rechaza; se produce un retraso considerable en la comunicación entre el servidor y el cliente que insta al usuario a corregir sus datos.

+ +

Sin embargo, ¡la validación en el lado del cliente no debe considerarse una medida de seguridad exhaustiva! Tus aplicaciones siempre deben realizar comprobaciones de seguridad de los datos enviados por el formulario en el lado del servidor, así como también en el lado del cliente, porque la validación en el lado del cliente es demasiado fácil de evitar, por lo que los usuarios malintencionados pueden enviar fácilmente datos incorrectos a tu servidor. Lee Seguridad en los sitios web para ver qué podría suceder. Cómo implementar la validación en el lado del servidor está fuera del alcance de este módulo, pero debes tenerlo en cuenta.

+ +

¿Qué es la validación de formularios?

+ +

Ve a cualquier sitio web popular que incluya un formulario de registro y observa que proporcionan comentarios cuando no introduces tus datos en el formato que se espera. Recibirás mensajes como:

+ + + +

Esto se llama validación de formulario. Cuando introduces los datos, el navegador y/o el servidor web verifican que estén en el formato correcto y dentro de las restricciones establecidas por la aplicación. La validación realizada en el navegador se denomina validación en el lado del cliente, mientras que la validación realizada en el servidor se denomina validación en el lado del servidor. En este capítulo nos centraremos en la validación en el lado del cliente.

+ +

Si la información está en el formato correcto, la aplicación permite que los datos se envíen al servidor y (en general) que se guarden en una base de datos; si la información no está en el formato correcto, da al usuario un mensaje de error que explica lo que debe corregir y le permite volver a intentarlo.

+ +

Queremos que completar formularios web sea lo más fácil posible. Entonces, ¿por qué insistimos en validar nuestros formularios? Hay tres razones principales:

+ + + +
Atención: No confíes nunca en los datos que se pasan al servidor desde el cliente. Incluso si tu formulario se valida correctamente y evita la introducción de datos con formato incorrecto en el lado del cliente, un usuario malintencionado puede alterar la petición de red.
+ +

Diferentes tipos de validación en el lado del cliente

+ +

Hay dos tipos diferentes de validación por parte del cliente que encontrarás en la web:

+ + + +

Usar la validación de formulario incorporada

+ +

Una de las características más importantes de los controles de formulario de HTML5 es la capacidad de validar la mayoría de los datos de usuario sin depender de JavaScript. Esto se realiza mediante el uso de atributos de validación en los elementos del formulario. Los hemos visto anteriormente en el curso, pero recapitulamos aquí:

+ + + +

Si los datos que se introducen en un campo de formulario siguen todas las reglas que especifican los atributos anteriores, se consideran válidos. Si no, se consideran no válidos.

+ +

Cuando un elemento es válido, se cumplen los aspectos siguientes:

+ + + +

Cuando un elemento no es válido, se cumplen los aspectos siguientes:

+ + + +
+

Nota: Hay varios errores que evitan que el formulario se envíe, incluidos {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} o {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}} o {{domxref('validityState.customError','customError')}}.

+
+ +

Ejemplos de validación de formularios incorporados

+ +

En esta sección probaremos algunos de los atributos que hemos comentado antes.

+ +

Archivo de inicio sencillo

+ +

Vamos a empezar con un ejemplo sencillo: una entrada que te permite elegir si prefieres un plátano o una cereza. Este ejemplo implica una simple entrada ({{HTMLElement("input")}}) de texto con una etiqueta ({{htmlelement("label")}}) asociada y un botón de envío ({{htmlelement ("button")}}). Puedes encontrar el código fuente en GitHub en fruit-start.html y el ejemplo en vivo a continuación.

+ +
<form>
+  <label for="choose">¿Prefieres un plátano o una cereza?</label>
+  <input id="choose" name="i_like">
+  <button>Enviar</button>
+</form>
+ +
input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}
+ +

{{EmbedLiveSample("Archivo_de_inicio_sencillo", "100%", 80)}}

+ +

Para empezar, haz una copia de fruit-start.html en un nuevo directorio de tu disco duro.

+ +

El atributo required

+ +

La característica de validación de HTML5 más simple es el atributo required. Añade este atributo al elemento para que una entrada sea obligatoria. Cuando se establece este atributo, el elemento coincide con la pseudoclase de la interfaz de usuario {{cssxref(':required')}} y el formulario no se envía; muestra un mensaje de error al enviarlo si la entrada está vacía. Si está vacía, la entrada también se considera inválida, coincidiendo con la pseudoclase de interfaz de usuario {{cssxref(':invalid')}}.

+ +

Añade un atributo required a tu entrada, como se muestra a continuación.

+ +
<form>
+  <label for="choose">¿Prefieres un plátano o una cereza? (requerido) </label>
+  <input id="choose" name="i_like" required>
+  <button>Enviar</button>
+</form>
+ +

Ten en cuenta el CSS que en el archivo de ejemplo se ha incluido:

+ +
input:invalid {
+  border: 2px dashed red;
+}
+
+input:invalid:required {
+  background-image: linear-gradient(to right, pink, lightgreen);
+}
+
+input:valid {
+  border: 2px solid black;
+}
+ +

Este CSS da un borde discontinuo rojo cuando la entrada no es válida, y un borde negro sólido más sutil cuando es válida. También añadimos un gradiente de fondo cuando la entrada es obligatoria y no válida. Prueba el nuevo comportamiento en el ejemplo siguiente:

+ +

{{EmbedLiveSample("El_atributo_required", "100%", 80)}}

+ +
+

Nota: Puedes encontrar este ejemplo en vivo en GitHub como fruit-validation.html (consulta también el código fuente).

+
+ +

Intenta enviar el formulario sin introducir ningún valor. Observa que la entrada no válida recibe el cursor, aparece un mensaje de error predeterminado («Complete este campo») y el formulario no se puede enviar.

+ +

La presencia del atributo required en cualquier elemento que admite este atributo significa que el elemento coincide con la pseudoclase {{cssxref(':required')}}, tenga o no un valor. Si en el elemento {{HTMLElement("input")}} no se ha introducido ningún valor, input coincidirá con la pseudoclase {{cssxref(':invalid')}}.

+ +
+

Nota: Para una buena experiencia de usuario, indica al usuario que campos de formulario se requieren. No solo es una buena experiencia de usuario, sino que lo exigen las pautas de accesibilidad de WCAG. Además, solo requiere que los usuarios introduzcan los datos que realmente necesitas: Por ejemplo, ¿por qué realmente necesitas saber el género o el tratamiento de alguien?

+
+ +

Validación de una expresión regular

+ +

Otra característica útil de validación es el atributo pattern, que espera una expresión regular como valor. Una expresión regular (regex) es un patrón que se puede usar para establecer combinaciones de caracteres en cadenas de texto, por lo que las expresiones regulares son ideales para la validación de formularios y sirven para una gran variedad de otros usos en JavaScript.

+ +

Las expresiones regulares son bastante complejas y no vamos a exponerlas exhaustivamente en este artículo. A continuación hay algunos ejemplos para que te hagas una idea de cómo funcionan.

+ + + +

Hay muchas más posibilidades que no exponemos aquí. Para obtener una lista completa y muchos ejemplos, consulta nuestro documento de expresiones regulares.

+ +

Implementemos un ejemplo. Actualiza tu HTML para añadir un atributo pattern como este:

+ +
<form>
+  <label for="choose">¿Prefieres un plátano o una cereza?</label>
+  <input id="choose" name="i_like" required pattern="[Pp]látano|[Cc]ereza ">
+  <button>Enviar</button>
+</form>
+
+ + + +

Esto nos da la siguiente actualización; pruébalo:

+ +

{{EmbedLiveSample("Validación de una expresión regular", "100%", 80)}}

+ +
+

Nota: Puedes encontrar este ejemplo en vivo en GitHub como fruit-pattern.html (consulta también su código fuente).

+
+ +

En este ejemplo, el elemento {{HTMLElement("input")}} acepta uno de los cuatro valores posibles: las cadenas «plátano», «Plátano», «cereza» o «Cereza». Las expresiones regulares distinguen entre mayúsculas y minúsculas, pero hemos hecho que admita versiones en mayúsculas y minúsculas utilizando un patrón «Aa» adicional anidado dentro de corchetes.

+ +

En este punto, intenta cambiar el valor dentro del atributo pattern para que se vean iguales que algunos de los ejemplos vistos anteriormente, y observa que esto afecta a los valores que puedes añadir para que el valor de entrada sea válido. Intenta escribir algo por tu cuenta y mira cómo va. ¡Haz que estén relacionadas con la fruta siempre que sea posible para que tus ejemplos tengan sentido!

+ +

Si un valor no vacío de {{HTMLElement("input")}} no coincide con el patrón de la expresión regular, input coincidirá con la pseudoclase {{cssxref(':invalid')}}.

+ +
+

Nota: Algunos tipos de elementos {{HTMLElement ("input")}} no necesitan validar una expresión regular con el atributo pattern. Especificar el tipo de correo electrónico (email), por ejemplo, valida el valor de las entradas con un patrón de dirección de correo electrónico bien formado o un patrón que coincida con una lista de direcciones de correo electrónico separadas por comas si tiene el atributo multiple.

+
+ +
+

Nota: El elemento {{HTMLElement("textarea")}} no admite el atributo pattern.

+
+ +

Restringir la longitud de tus entradas

+ +

Puedes restringir la longitud de los caracteres de todos los campos de texto creados por {{HTMLElement("input")}} o {{HTMLElement("textarea")}} utilizando los atributos minlength y maxlength. Un campo no es válido si tiene un valor y ese valor tiene menos caracteres que el valor de longitud mínima (minlength), o más que el valor de longitud máxima (maxlength).

+ +

Los navegadores a menudo no permiten que el usuario escriba un valor más largo de lo esperado en los campos de texto. Lo que otorga una mejor experiencia de usuario que maxlength es proporcionar comentarios de recuento de caracteres de manera accesible y permitirles editar su contenido a un tamaño más reducido. Un ejemplo de esto es el límite de caracteres de Twitter. JavaScript, incluidas las soluciones que utilizan maxlength, se puede utilizar para proporcionar esta funcionalidad.

+ +

Restringir los valores de tus entradas

+ +

Los atributos min y max se pueden usar para proporcionar a los campos numéricos (es decir, <input type="number">) un rango de valores válidos. El campo no será válido si contiene un valor fuera de este rango.

+ +

Veamos otro ejemplo. Crea una nueva copia del archivo fruit-start.html.

+ +

Ahora elimina el contenido del elemento <body> y reemplázalo con lo siguiente:

+ +
<form>
+  <div>
+    <label for="choose">¿Prefieres un plátano o una cereza?</label>
+    <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6">
+  </div>
+  <div>
+    <label for="number">¿Cuántos te gustaría comer?</label>
+    <input type="number" id="number" name="amount" value="1" min="1" max="10">
+  </div>
+  <div>
+    <button>Enviar</button>
+  </div>
+</form>
+ + + + + +

Aquí está el ejemplo que se ejecuta en vivo:

+ +

{{EmbedLiveSample("Restringir_los_valores_de_tus_entradas", "100%", 100)}}

+ +
+

Nota: Puedes encontrar este ejemplo en vivo en GitHub como fruit-length.html (consulta también su código fuente).

+
+ +
+

Nota: <input type="number"> (y otros tipos, como range y date) también pueden tomar un atributo step, que especifica en qué incremento aumenta o disminuye el valor cuando se utilizan los controles de entrada (como el botones numéricos arriba y abajo). En el ejemplo anterior no hemos incluido un atributo step, por lo que el valor predeterminado es 1. Esto significa que los valores de coma flotante, como 3.2, también se mostrarán como no válidos.

+
+ +

Ejemplo completo

+ +

Aquí hay un ejemplo completo que muestra el uso de las funciones de validación integradas en HTML. En primer lugar, un poco de HTML:

+ +
<form>
+  <p>
+    <fieldset>
+      <legend>¿Tienes carné de conducir?<abbr title="Este campo es obligatorio" aria-label="required">*</abbr></legend>
+      <!-- Solo se puede seleccionar un botón de opción en un grupo con el mismo nombre,
+           y, por lo tanto, solo un botón de opción en un grupo con el mismo nombre que tiene marcado el atributo «requerido»
+           basta para hacer de una selección un requisito -->
+      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Sí</label>
+      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label>
+    </fieldset>
+  </p>
+  <p>
+    <label for="n1">¿Qué edad tienes?</label>
+    <!-- El atributo pattern puede actuar como una alternativa para los navegadores que
+         no implementan el tipo de entrada de número, pero admiten el atributo pattern.
+         Ten en cuenta que los navegadores que admiten el atributo pattern lo harán
+         fallar silenciosamente cuando se use con un campo numérico.
+         Su uso aquí solo actúa como una alternativa -->
+     <input type="number" min="12" max="120" step="1" id="n1" name="age"
+           pattern="\d+">
+  </p>
+  <p>
+    <label for="t1">¿Cuál es tu fruta favorita?<abbr title="Este campo es obligatorio" aria-label="required">*</abbr></label>
+    <input type="text" id="t1" name="fruit" list="l1" required
+           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range ">
+    <datalist id="l1">
+      <option>Plátano</option>
+      <option>Cereza</option>
+      <option>Manzana</option>
+      <option>Fresa</option>
+      <option>Limón</option>
+      <option>Naranja</option>
+     </datalist>
+  </p>
+  <p>
+    <label for="t2">¿Cuál es tu dirección de correo electrónico? </label>
+    <input type="email" id="t2" name="email">
+  </p>
+  <p>
+    <label for="t3">Deja un mensaje</label>
+    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
+  </p>
+  <p>
+    <button>Enviar</button>
+  </p>
+</form>
+ +

Y ahora, algo de CSS para añadir estilo al HTML:

+ +
form {
+  font: 1em sans-serif;
+  max-width: 320px;
+}
+
+p > label {
+  display: block;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="number"],
+textarea,
+fieldset {
+  width : 100%;
+  border: 1px solid #333;
+  box-sizing: border-box;
+}
+
+input:invalid {
+  box-shadow: 0 0 5px 1px red;
+}
+
+input:focus:invalid {
+  box-shadow: none;
+}
+ +

Esto se traduce de la siguiente manera:

+ +

{{EmbedLiveSample("Ejemplo_completo", "100%", 420)}}

+ +

Consulta Atributos relacionados con la validación para obtener una lista completa de los atributos que se pueden usar para restringir los valores de entrada y los tipos de entrada que los admiten.

+ +
+

Nota: Puedes encontrar este ejemplo en vivo en GitHub como full-example.html (consulta también su código fuente).

+
+ +

Validar formularios utilizando JavaScript

+ +

Debes usar JavaScript si quieres controlar la apariencia de los mensajes de error nativos o tratar con navegadores heredados que no admiten la validación de formularios incorporados en HTML. En esta sección veremos las diferentes formas de hacer esto.

+ +

La API de validación de restricciones

+ +

La mayoría de los navegadores admiten la API de validación de restricciones, que consta de un conjunto de métodos y propiedades disponibles en las interfaces DOM de elementos de formulario siguientes:

+ + + +

La API de validación de restricciones hace que las propiedades siguientes estén disponibles en los elementos anteriores.

+ + + +

La API de validación de restricciones también pone a disposición los siguientes métodos en los elementos anteriores.

+ + + +

Implementar un mensaje de error personalizado

+ +

Como has visto en los ejemplos de restricciones de validación de HTML5 anteriores, cada vez que un usuario intenta enviar un formulario no válido, el navegador muestra un mensaje de error. La forma en que se muestra este mensaje depende del navegador.

+ +

Estos mensajes automatizados tienen dos inconvenientes:

+ + + +

Ejemplo de un mensaje de error en francés en una página de Firefox en inglés

+ +

La personalización de estos mensajes de error es uno de los casos de uso más comunes de la API de validación de restricciones. Veamos un ejemplo simple de cómo hacer esto.

+ +

Comenzaremos con un HTML simple (siéntete libre de poner esto en un archivo HTML en blanco; usa una copia nueva de fruit-start.html como base, si lo deseas):

+ +
<form>
+  <label for="mail">Me gustaría que me proporcionara una dirección de correo electrónico:<label>
+  <input type="email" id="mail" name="mail">
+  <button>Enviar</button>
+</form>
+ +

Y añade a la página el JavaScript siguiente:

+ +
const email = document.getElementById("mail");
+
+email.addEventListener("input", function (event) {
+  if (email.validity.typeMismatch) {
+    email.setCustomValidity("¡Se esperaba una dirección de correo electrónico!");
+  } else {
+    email.setCustomValidity("");
+  }
+});
+ +

Aquí guardamos una referencia para la entrada de la dirección de correo electrónico, luego le añadimos un detector de eventos que ejecuta el código de content cada vez que el valor de la entrada cambia.

+ +

Dentro del código que contiene, verificamos si la propiedad validity.typeMismatch de la entrada de la dirección de correo electrónico devuelve true, lo que significa que el valor que contiene no coincide con el patrón para una dirección de correo electrónico bien formada. Si es así, llamamos al método setCustomValidity() con un mensaje personalizado. Esto hace que la entrada no sea válida, de modo que cuando intentas enviar el formulario, el envío falla y se muestra el mensaje de error personalizado.

+ +

Si la propiedad validity.typeMismatch devuelve false, llamamos al método setCustomValidity() con una cadena vacía. Esto hace que la entrada sea válida, y el formulario se envía.

+ +

Puedes probarlo a continuación:

+ +

{{EmbedGHLiveSample("/en-US/learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}

+ +
+

Nota: Puede encontrar este ejemplo vivo en GitHub como custom-error-message.html (véase también su código fuente).

+
+ +

Un ejemplo más detallado

+ +

Ahora que hemos visto un ejemplo realmente sencillo, veamos cómo podemos usar esta API para construir una validación personalizada un poco más compleja.

+ +

En primer lugar, el código HTML. Una vez más, siéntete libre de construir esto junto con nosotros:

+ +
<form novalidate>
+  <p>
+    <label for="mail">
+      <span>Por favor, introduzca una dirección de correo electrónico: </span>
+      <input type="email" id="mail" name="mail" required minlength="8">
+      <span class="error" aria-live="polite"></span>
+    </label>
+  </p>
+  <button>Enviar</button>
+</form>
+ +

Este sencillo formulario usa el atributo novalidate para desactivar la validación automática del navegador; esto permite que nuestra secuencia de comandos tome control sobre la validación. Sin embargo, esto no deshabilita la compatibilidad para la API de validación de restricciones ni la aplicación de pseudoclases de CSS como {{cssxref(":valid")}}, etc. Eso significa que, aunque el navegador no verifica automáticamente la validez del formulario antes de enviar los datos, puedes hacerlo tú mismo y diseñar el formulario en consecuencia.

+ +

Nuestra entrada para validar es <input type="email">, que es obligatoria y tiene una longitud mínima (minlength) de 8 caracteres. Vamos a verificar esto con nuestro propio código para que muestre un mensaje de error personalizado para cada elemento.

+ +

Nuestro objetivo es mostrar los mensajes de error dentro de un elemento <span>. El atributo aria-live se establece en ese <span> para asegurar que todo el mundo podrá ver nuestro mensaje de error personalizado, incluidos los usuarios de lectores de pantalla.

+ +
+

Nota: Un punto clave a tener en cuenta es que establecer el atributo novalidate en el formulario impide que el formulario muestre sus propios cuadros de diálogo de error, y nos permite mostrar los mensajes de error personalizados en el DOM de la manera que nosotros elijamos.

+
+ +

Ahora aplicaremos algo de CSS básico para mejorar ligeramente el aspecto del formulario y proporcionar algunos comentarios visuales cuando los datos de entrada no sean válidos:

+ +
body {
+  font: 1em sans-serif;
+  width: 200px;
+  padding: 0;
+  margin : 0 auto;
+}
+
+p * {
+  display: block;
+}
+
+input[type=email]{
+  -webkit-appearance: none;
+  appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  box-sizing: border-box;
+}
+
+/* Este es nuestro diseño para los campos no válidos */
+input:invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+
+/* Este es el diseño para nuestros mensajes de error */
+.error {
+  width : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +

Vamos a ver el JavaScript que implementa la validación de error personalizada.

+ +
// Hay muchas formas de elegir un nodo DOM; aquí obtenemos el formulario y, a continuación, el campo de entrada
+// del correo electrónico, así como el elemento span en el que colocaremos el mensaje de error.
+const form  = document.getElementsByTagName('form')[0];
+
+const email = document.getElementById('mail');
+const emailError = document.querySelector('#mail + span.error');
+
+email.addEventListener('input', function (event) {
+  // Cada vez que el usuario escribe algo, verificamos si
+  // los campos del formulario son válidos.
+
+  if (email.validity.valid) {
+    // En caso de que haya un mensaje de error visible, si el campo
+    // es válido, eliminamos el mensaje de error.
+    emailError.innerHTML = ''; // Restablece el contenido del mensaje
+    emailError.className = 'error'; // Restablece el estado visual del mensaje
+  } else {
+    // Si todavía hay un error, muestra el error exacto
+    showError();
+  }
+});
+
+form.addEventListener('submit', function (event) {
+  // si el campo de correo electrónico es válido, dejamos que el formulario se envíe
+
+  if(!email.validity.valid) {
+    // Si no es así, mostramos un mensaje de error apropiado
+    showError();
+    // Luego evitamos que se envíe el formulario cancelando el evento
+    event.preventDefault();
+  }
+});
+
+function showError() {
+  if(email.validity.valueMissing) {
+    // Si el campo está vacío
+    // muestra el mensaje de error siguiente.
+    emailError.textContent = 'Debe introducir una dirección de correo electrónico.';
+  } else if(email.validity.typeMismatch) {
+    // Si el campo no contiene una dirección de correo electrónico
+    // muestra el mensaje de error siguiente.
+    emailError.textContent = 'El valor introducido debe ser una dirección de correo electrónico.';
+  } else if(email.validity.tooShort) {
+    // Si los datos son demasiado cortos
+    // muestra el mensaje de error siguiente.
+    emailError.textContent = 'El correo electrónico debe tener al menos ${ email.minLength } caracteres; ha introducido ${ email.value.length }.';
+  }
+
+  // Establece el estilo apropiado
+  emailError.className = 'error activo';
+}
+ +

Los comentarios explican las cosas bastante bien, pero de una manera muy breve:

+ + + +

Este es el resultado:

+ +

{{EmbedGHLiveSample("/en-US/learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}

+ +
+

Nota: Puedes encontrar este ejemplo en vivo en GitHub como detailed-custom-validation.html (consulta también su código fuente).

+
+ +

La API de validación de restricciones te proporciona una herramienta poderosa para manejar la validación de formularios, y te permite tener un control enorme sobre la interfaz de usuario más allá de lo que puedas hacer solo con HTML y CSS.

+ +
+

Nota: Para obtener más información, consulta nuestra guía de validación de restricciones y la referencia de API de validación de restricciones.

+
+ +

Validar formularios sin una API incorporada

+ +

En algunos casos, como la compatibilidad heredada del navegador o los controles personalizados, no podrás o no querrás usar la API de validación de restricciones. Todavía puedes usar JavaScript para validar tu formulario, pero vas a tener que escribirlo.

+ +

Antes de validar el formulario, hazte estas preguntas:

+ +
+
¿Qué tipo de validación debería realizar?
+
Debes determinar cómo validar los datos: operaciones de cadena, conversión de tipos, expresiones regulares, etc. Tú decides.
+
¿Qué debo hacer si el formulario no se valida?
+
Esto es claramente un problema de la interfaz de usuario. Tienes que decidir cómo se comportará el formulario. ¿El formulario va a enviar los datos de todos modos? ¿Deberías resaltar los campos que dan error? ¿Deberías mostrar mensajes de error?
+
¿Cómo puedo ayudar al usuario a corregir datos no válidos?
+
Para reducir la frustración del usuario, es muy importante proporcionar tanta información útil como sea posible para guiarlo a fin de que corrija sus entradas de datos. Debes ofrecer sugerencias por adelantado para que sepan lo que se espera de ellos, así como mensajes de error claros. Si deseas profundizar en los requisitos de interfaz de usuario para la validación de formularios, aquí hay algunos artículos útiles que debes leer: + +
+
+ +

Un ejemplo que no usa la API de validación de restricciones

+ +

Para ilustrar esto, mostramos una versión simplificada del ejemplo anterior que funciona con navegadores con compatibilidad heredada.

+ +

El HTML es casi el mismo; solo hemos eliminado las funciones de validación de HTML.

+ +
<form>
+  <p>
+    <label for="mail">
+        <span>Por favor, introduzca una dirección de correo electrónico: </span>
+        <input type="text" class="mail" id="mail" name="mail">
+        <span class="error" aria-live="polite"></span>
+    </label>
+  </p>
+  <!-- Algunos navegadores con compatibilidad heredada deben tener el atributo «type»
+       establecido explícitamente en el elemento «button» de «submit»-->
+  <button type="submit">Enviar</button>
+</form>
+ +

Del mismo modo, no es necesario cambiar mucho el CSS; acabamos de convertir la pseudoclase {{cssxref(":invalid")}} de CSS en una clase real y evitamos usar el selector de atributos que no funciona en Internet Explorer 6.

+ +
body {
+  font: 1em sans-serif;
+  width: 200px;
+  padding: 0;
+  margin : 0 auto;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input.mail {
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  box-sizing: border-box;
+}
+
+/* Este es nuestro diseño para los campos no válidos */
+input.invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus.invalid {
+  outline: none;
+}
+
+/* Este es el diseño para nuestros mensajes de error */
+.error {
+  width : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +

Los grandes cambios están en el código JavaScript, que necesita hacer mucho más trabajo pesado.

+ +
// Hay menos formas de elegir un nodo DOM con navegadores antiguos
+const form  = document.getElementsByTagName('form')[0];
+const email = document.getElementById('mail');
+
+// Lo siguiente es un truco para llegar al siguiente nodo de elementos hermanos en el DOM
+// Esto es peligroso porque puedes construir fácilmente un bucle infinito.
+// En los navegadores modernos es mejor usar element.nextElementSibling
+let error = email;
+while ((error = error.nextSibling).nodeType != 1);
+
+// según la especificación HTML5
+const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+// Muchos navegadores antiguos no son compatibles con el método addEventListener.
+// Aquí hay una manera simple de manejar esto; está lejos de ser la única.
+function addEvent(element, event, callback) {
+  let previousEventCallBack = element["on"+event];
+  element["on"+event] = function (e) {
+    const output = callback(e);
+
+    // Una devolución de llamada que devuelve «false» detiene la cadena de devolución de llamada
+    // e interrumpe la ejecución de la devolución de llamada del evento.
+    if (output === false) return false;
+
+    if (typeof previousEventCallBack === 'function') {
+      output = previousEventCallBack(e);
+      if(output === false) return false;
+    }
+  }
+};
+
+// Ahora podemos reconstruir nuestra restricción de validación
+// Debido a que no confiamos en la pseudoclase de CSS, tenemos que
+// establecer explícitamente la clase valid/invalid en nuestro campo de correo electrónico
+addEvent(window, "load", function () {
+  // Aquí probamos si el campo está vacío (recuerda, el campo no es obligatorio)
+  // Si no es así, verificamos si su contenido es una dirección de correo electrónico con el formato correcto.
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  email.className = test ? "valid" : "invalid";
+});
+
+// Esto define lo que sucede cuando el usuario escribe en el campo
+addEvent(email, "input", function () {
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+  if (test) {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  } else {
+    email.className = "invalid";
+  }
+});
+
+// Esto define lo que sucede cuando el usuario intenta enviar los datos.
+addEvent(form, "submit", function () {
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  if (!test) {
+    email.className = "invalid";
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+
+    // Algunos navegadores antiguos no son compatibles con el método event.preventDefault ()
+    return false;
+  } else {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  }
+});
+ +

El resultado es el siguiente:

+ +

{{EmbedLiveSample("Validar_formularios_sin_una_API_incorporada", "100%", 130)}}

+ +

Como puedes ver, no es tan difícil construir un sistema de validación por tu cuenta. La parte difícil es hacer que sea lo suficientemente genérico para que se pueda usar en diferentes plataformas y en cualquier forma. Hay muchas bibliotecas de archivos disponibles para realizar la validación de formularios, como por ejemplo Validate.js

+ +

.

+ +

Prueba tus habilidades!

+ +

Has llegado al final de este artículo pero ¿puedes recordar la información más importante?Puedes encontrar pruebas adicionales para comprovar que has comprendido la información antes de que continue — visita Prueba tus habilidades: Validación de formularios.

+ +

Resumen

+ +

La validación de formularios en el lado del cliente a veces requiere JavaScript si deseas personalizar el estilo y los mensajes de error, pero siempre requiere que pienses cuidadosamente en el usuario. Recuerda que siempre debes ayudar a tus usuarios a corregir los datos que proporcionan. Para ese fin, asegúrate de:

+ + + +

Una vez que hayas verificado que el formulario se ha completado correctamente, puedes proceder a enviarlo. Vamos a exponer el envío de los datos del formulario en el próximo artículo.

+ +

{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

+ +

En este módulo

+ + + +

Temas avanzados

+ + diff --git a/files/es/learn/forms/how_to_build_custom_form_controls/index.html b/files/es/learn/forms/how_to_build_custom_form_controls/index.html new file mode 100644 index 0000000000..73ae6e6590 --- /dev/null +++ b/files/es/learn/forms/how_to_build_custom_form_controls/index.html @@ -0,0 +1,786 @@ +--- +title: Cómo crear widgets de formularios personalizados +slug: Learn/HTML/Forms/como_crear_widgets_de_formularios_personalizados +translation_of: Learn/Forms/How_to_build_custom_form_controls +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
+ +

Hay muchos casos donde los widgets de formularios HTML disponibles simplemente no son suficientes. si desea establecer un estilo avanzado en algunos widgets como el elemento {{HTMLElement("select")}} o si desea proporcionar comportamientos personalizados, no tiene más opción que crear sus propios widgets.

+ +

En este aartículo, veremos cómo construir dicho widget. Para ello, trabajaremos con un ejemplo: Reconstruir el elemento {{HTMLElement("select")}}.

+ +
+

Nota: Nos enfocaremos en construir los widgets, no en cómo hacer que el código sea genérico y reutilizable; eso implicaría algún código JavaScript no trivial y manipulación del DOM en un contexto desconocido, y eso está fuera del alcance de este artículo.

+
+ +

Diseño, estructura, y semántica

+ +

Antes de crear un widget personalizado, debería iniciar por averiguar exactamente qué es lo que desea. Esto le ahorarrá tiempo considerable. En particular, es importante definir claramente todos los estados de su widget. Para hacer esto, es bueno comenzar con un widget existente, cuyos estados y comportamientos son bien conocidos, por lo que simplemente puede imitarlos tanto como sea posible.

+ +

En nuestro ejemplo, reconstruiremos el elemento {{HTMLElement("select")}}. Este es el resultado que queremos lograr:

+ +

The three states of a select box

+ +

Esta captura de pantall muestra los tres estados principales de nuestro widget: el estado normal (a la izquiera); el estado activo (en el centro) y el estado abierto (a la derecha).

+ +

En términos de comportamiento, queremos que nuestro widget sea utilizable tanto con un ratón como con un teclado, al igual que cualquier widget nativo. Comencemos por definir cómo el widget llega a cada estado:

+ +
+
El widget está en su estado normal cuando:
+
+
    +
  • La página carga
    • +
  • El widget estaba activo y el usuario hace clic en cualquier lugar fuera del widget
    • +
  • El widget estaba activo y el usuario mueve el foco a otro widget usando el teclado
    • +
+ +
+

Nota: Mover el foco al rededor de la página generalmente se hace presionando la tecla de tabulación, pero este no es el estándar en todas partes. Por ejemplo, el ciclo a través de enlaces en una página se realiza en Safari de forma predeterminada usando la combinación combinación Opction+Tab.

+
+
+
El widget está en su estado activo cuando:
+
+
    +
  • El usuario hace clic en él
    • +
  • El usuario presiona la tecla tab y obtiene foco
    • +
  • El widget estaba en su estado abierto y el usuario hace clic en el widget.
    • +
+
+
El widget está en su estado abierto cuando:
+
+
    +
  • El widget está en cualquier otro estado diferente a abierto y el usuario hace clic en él.
    • +
+
+
+ +

Una vez que sabemos cómo cambiar los estados, es importante definir cómo cambiar el valor del widget:

+ +
+
El valor cambia cuando:
+
+
    +
  • El usuario hace clic en una opción cuando el widget está en estado abierto
    • +
  • El usuario pulsa las teclas de flecha hacia arriba o hacia abajocuando el widget está en estado activo
    • +
+
+
+ +

Finalmente, definamos cómo se comportarán las opciones del widget:

+ + + +

Para los fines de nuestro ejemplo, nos detendremos con eso; sin embargo, si eres un lector cuidadoso, notarás que faltan algunos comportamientos. Por ejemplo, ¿qué crees que sucederá si el usuario pulsa la tecla de tabulación mientras el widget está en estado abierto? La respuesta es ... nada. OK, el comportamiento correcto parece obvio, pero el hecho es que, como no está definido en nuestras especificaciones, es muy fácil pasar por alto este comportamiento. Esto es especialmente cierto en un entorno de equipo cuando las personas que diseñan el comportamiento del widget son diferentes de las que lo implementan.

+ +

Otro ejemplo divertido: ¿qué pasará si el usuario pulsa las teclas de flecha hacia arriba o hacia abajo mientras el widget está en estado abierto? Este es un poco más complicado. Si considera que el estado activo y el estado abierto son completamente diferentes, la respuesta es nuevamente "no pasará nada" porque no definimos ninguna interacción de teclado para el estado abierto. Por otro lado, si considera que el estado activo y el estado abierto se superponen un poco, el valor puede cambiar pero la opción definitivamente no se resaltará en consecuencia, una vez más porque no definimos ninguna interacción del teclado sobre las opciones cuando el widget es en su estado abierto (solo hemos definido lo que debería suceder cuando se abre el widget, pero nada después de eso).

+ +

En nuestro ejemplo, las especificaciones faltantes son obvias, así que las manejaremos, pero puede ser un problema real en widgets nuevos y exóticos, para los cuales nadie tiene la menor idea de cuál es el comportamiento correcto. Por lo tanto, siempre es bueno pasar tiempo en esta etapa de diseño, porque si defines un comportamiento deficiente u olvidas definir uno, será muy difícil redefinirlo una vez que los usuarios se hayan acostumbrado. Si tiene dudas, solicite las opiniones de los demás y, si tiene el presupuesto para ello, no dude en realizar las pruebas de usuario. Este proceso se llama Diseño UX. Si desea obtener más información sobre este tema, debe consultar los siguientes recursos útiles:

+ + + +
+

Nota: Ademas, en la mayoría de los sistemas hay una forma de abrir el elemento {{HTMLElement("select")}} para ver todas las opciones disponibles (esto es lo mismo que hacer clic en el elemento {{HTMLElement("select")}} con un ratón). Esto se logra con Alt+Flecha abajo en Windows y no fué implementado en nuestro ejemplo —pero sería facil hacerlo, ya que el mecanismo ya se implementó para el evento clic.

+
+ +

Definiendo la estructura y semántica HTML

+ +

Ahora que se ha decidido la funcionalidad básica del widget, es hora de comenzar a construir nuestro widget. El primer paso es definir su estructura HTML y darle una semántica básica. Esto es lo que necesitamos para reconstruir un elemento {{HTMLElement("select")}}:

+ +
<!-- Este es nuestro contenedor principal para nuestro widget.
+     El atributo tabindex es lo que permite al usuario enforcar el widget.
+     Veremos más adelante que es mejor configurarlo a través de JavaScript. -->
+<div class="select" tabindex="0">
+
+  <!-- Este contenedor será usado para mostrar el valor actual del widget -->
+  <span class="value">Cherry</span>
+
+  <!-- Este contenedor contedrá todas las opciones disponibles para nuestro widget.
+       Como es una lista, tiene sentido usar el elemento ul. -->
+  <ul class="optList">
+    <!-- Cada opción solo contiene el valor que se mostrará, veremos más tarde
+         cómo manejar el valor real que será enviado con el formulario de datos -->
+    <li class="option">Cherry</li>
+    <li class="option">Lemon</li>
+    <li class="option">Banana</li>
+    <li class="option">Strawberry</li>
+    <li class="option">Apple</li>
+  </ul>
+
+</div>
+ +

Tenga en cuanta el uso de nombres de clases; estos identifican cada parte relevante independientemente de los elementos HTML subyacentes reales utilizados. Esto es importante para garantizar que no vinculamos nuestro CSS y JavaScript a una estructura HTML sólida, de modo que podamos realizar cambios despues en la implementación sin romper el código que usa el widget. Pro ejemplo, si desea implementar el equivalente del elemento {{HTMLElement("optgroup")}}.

+ +

Creating the look and feel using CSS

+ +

Now that we have a structure, we can start designing our widget. The whole point of building this custom widget is to be able to style this widget exactly as we want. To that end, we will split our CSS work into two parts: the first part will be the CSS rules absolutely necessary to have our widget behave like a {{HTMLElement("select")}} element, and the second part will consist of the fancy styles used to make it look the way we want.

+ +

Required styles

+ +

The required styles are those necessary to handle the three states of our widget.

+ +
.select {
+  /* This will create a positioning context for the list of options */
+  position: relative;
+
+  /* This will make our widget become part of the text flow and sizable at the same time */
+  display : inline-block;
+}
+ +

We need an extra class active to define the look and feel of our widget when it is in its active state. Because our widget is focusable, we double this custom style with the {{cssxref(":focus")}} pseudo-class in order to be sure they will behave the same.

+ +
.select.active,
+.select:focus {
+  outline: none;
+
+  /* This box-shadow property is not exactly required, however it's so important to be sure
+     the active state is visible that we use it as a default value, feel free to override it. */
+  box-shadow: 0 0 3px 1px #227755;
+}
+ +

Now, let's handle the list of options:

+ +
/* The .select selector here is syntactic sugar to be sure the classes we define are
+   the ones inside our widget. */
+.select .optList {
+  /* This will make sure our list of options will be displayed below the value
+     and out of the HTML flow */
+  position : absolute;
+  top      : 100%;
+  left     : 0;
+}
+ +

We need an extra class to handle when the list of options is hidden. This is necessary in order to manage the differences between the active state and the open state that do not exactly match.

+ +
.select .optList.hidden {
+  /* This is a simple way to hide the list in an accessible way,
+     we will talk more about accessibility in the end */
+  max-height: 0;
+  visibility: hidden;
+}
+ +

Beautification

+ +

So now that we have the basic functionality in place, the fun can start. The following is just an example of what is possible, and will match the screenshot at the beginning of this article. However, you should feel free to experiment and see what you can come up with.

+ +
.select {
+  /* All sizes will be expressed with the em value for accessibility reasons
+     (to make sure the widget remains resizable if the user uses the
+     browser's zoom in a text-only mode). The computations are made
+     assuming 1em == 16px which is the default value in most browsers.
+     If you are lost with px to em conversion, try http://riddle.pl/emcalc/ */
+  font-size   : 0.625em; /* this (10px) is the new font size context for em value in this context */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* We need extra room for the down arrow we will add */
+  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : .2em solid #000; /* 2px */
+  border-radius : .4em; /* 4px */
+  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  /* The first declaration is for browsers that do not support linear gradients.
+     The second declaration is because WebKit based browsers haven't unprefixed it yet.
+     If you want to support legacy browsers, try http://www.colorzilla.com/gradient-editor/ */
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  /* Because the value can be wider than our widget, we have to make sure it will not
+     change the widget's width */
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  vertical-align: top;
+
+  /* And if the content overflows, it's better to have a nice ellipsis. */
+  white-space  : nowrap;
+  text-overflow: ellipsis;
+}
+ +

We don't need an extra element to design the down arrow; instead, we're using the {{cssxref(":after")}} pseudo-element. However, it could also be implemented using a simple background image on the select class.

+ +
.select:after {
+  content : "▼"; /* We use the unicode caracter U+25BC; see http://www.utf8-chartable.de */
+  position: absolute;
+  z-index : 1; /* This will be important to keep the arrow from overlapping the list of options */
+  top     : 0;
+  right   : 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  height  : 100%;
+  width   : 2em;  /* 20px */
+  padding-top : .1em; /* 1px */
+
+  border-left  : .2em solid #000; /* 2px */
+  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
+
+  background-color : #000;
+  color : #FFF;
+  text-align : center;
+}
+ +

Next, let's style the list of options:

+ +
.select .optList {
+  z-index : 2; /* We explicitly said the list of options will always overlap the down arrow */
+
+  /* this will reset the default style of the ul element */
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* This will ensure that even if the values are smaller than the widget,
+     the list of options will be as large as the widget itself */
+  min-width : 100%;
+
+  /* In case the list is too long, its content will overflow vertically
+     (which will add a vertical scrollbar automatically) but never horizontally
+     (because we haven't set a width, the list will adjust its width automatically.
+     If it can't, the content will be truncated) */
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  border: .2em solid #000; /* 2px */
+  border-top-width : .1em; /* 1px */
+  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
+  background: #f0f0f0;
+}
+ +

For the options, we need to add a highlight class to be able to identify the value the user will pick (or has picked).

+ +
.select .option {
+  padding: .2em .3em; /* 2px 3px */
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

So here's the result with our three states:

+ + + + + + + + + + + + + + + + + + + +
Basic stateActive stateOpen state
{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}
Check out the source code
+ +

Bring your widget to life with JavaScript

+ +

Now that our design and structure are ready, we can write the JavaScript code to make the widget actually work.

+ +
+

Warning: The following code is educational and should not be used as-is. Among many things, as we'll see, it is not future-proof and it will not work on legacy browsers. It also has redundant parts that should be optimized in production code.

+
+ +
+

Note: Creating reusable widgets is something that can be a bit tricky. The W3C Web Component draft is one of the answers to this specific issue. The X-Tag project is a test implementation of this specification; we encourage you to take a look at it.

+
+ +

Why isn't it working?

+ +

Before we start, it's important to remember something very important about JavaScript: inside a browser, it's an unreliable technology. When you are building custom widgets, you'll have to rely on JavaScript because it's a necessary thread to tie everything together. However, there are many cases in which JavaScript isn't able to run in the browser:

+ + + +

Because of these risks, it's really important to seriously consider what will happen if JavaScript isn't working. Dealing in detail with this issue is out of the scope of this article because it's closely linked to how you want to make your script generic and reusable, but we'll consider the basics of this in our example.

+ +

In our example, if our JavaScript code isn't running, we'll fall back to displaying a standard {{HTMLElement("select")}} element. To achieve this, we need two things.

+ +

First, we need to add a regular {{HTMLElement("select")}} element before each use of our custom widget. This is actually also required in order to be able to send data from our custom widget along with the rest of our form data; more about this later.

+ +
<body class="no-widget">
+  <form>
+    <select name="myFruit">
+      <option>Cherry</option>
+      <option>Lemon</option>
+      <option>Banana</option>
+      <option>Strawberry</option>
+      <option>Apple</option>
+    </select>
+
+    <div class="select">
+      <span class="value">Cherry</span>
+      <ul class="optList hidden">
+        <li class="option">Cherry</li>
+        <li class="option">Lemon</li>
+        <li class="option">Banana</li>
+        <li class="option">Strawberry</li>
+        <li class="option">Apple</li>
+      </ul>
+    </div>
+  </form>
+
+</body>
+ +

Second, we need two new classes to let us hide the unneeded element (that is, the "real" {{HTMLElement("select")}} element if our script isn't running, or the custom widget if it is running). Note that by default, our HTML code hides our custom widget.

+ +
.widget select,
+.no-widget .select {
+  /* This CSS selector basically says:
+     - either we have set the body class to "widget" and thus we hide the actual {{HTMLElement("select")}} element
+     - or we have not changed the body class, therefore the body class is still "no-widget",
+       so the elements whose class is "select" must be hidden */
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+ +

Now we just need a JavaScript switch to determine if the script is running or not. This switch is very simple: if at page load time our script is running, it will remove the no-widget class and add the widget class, thereby swapping the visibility of the {{HTMLElement("select")}} element and of the custom widget.

+ +
window.addEventListener("load", function () {
+  document.body.classList.remove("no-widget");
+  document.body.classList.add("widget");
+});
+ + + + + + + + + + + + + + + + + +
Without JSWith JS
{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}
Check out the source code
+ +
+

Note: If you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the {{HTMLElement("select")}} elements, and to dynamically add the DOM tree representing the custom widget after every {{HTMLElement("select")}} element in the page.

+
+ +

Making the job easier

+ +

In the code we are about to build, we will use the standard DOM API to do all the work we need. However, although DOM API support has gotten much better in browsers, there are always issues with legacy browsers (especially with good old Internet Explorer).

+ +

If you want to avoid trouble with legacy browsers, there are two ways to do so: using a dedicated framework such as jQuery, $dom, prototype, Dojo, YUI, or the like, or by polyfilling the missing feature you want to use (which can easily be done through conditional loading, with the yepnope library for example).

+ +

The features we plan to use are the following (ordered from the riskiest to the safest):

+ +
    +
  1. {{domxref("element.classList","classList")}}
    2. +
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. +
  3. forEach (This is not DOM but modern JavaScript)
    4. +
  4. {{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. +
+ +

Beyond the availability of those specific features, there is still one issue remaining before starting. The object returned by the {{domxref("element.querySelectorAll","querySelectorAll()")}} function is a {{domxref("NodeList")}} rather than an Array. This is important because Array objects support the forEach function, but {{domxref("NodeList")}} doesn't. Because {{domxref("NodeList")}} really looks like an Array and because forEach is so convenient to use, we can easily add the support of forEach to {{domxref("NodeList")}} in order to make our life easier, like so:

+ +
NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+ +

We weren't kidding when we said it's easy to do.

+ +

Building event callbacks

+ +

The ground is ready, we can now start to define all the functions that will be used each time the user interacts with our widget.

+ +
// This function will be used each time we want to deactivate a custom widget
+// It takes one parameter
+// select : the DOM node with the `select` class to deactivate
+function deactivateSelect(select) {
+
+  // If the widget is not active there is nothing to do
+  if (!select.classList.contains('active')) return;
+
+  // We need to get the list of options for the custom widget
+  var optList = select.querySelector('.optList');
+
+  // We close the list of option
+  optList.classList.add('hidden');
+
+  // and we deactivate the custom widget itself
+  select.classList.remove('active');
+}
+
+// This function will be used each time the user wants to (de)activate the widget
+// It takes two parameters:
+// select : the DOM node with the `select` class to activate
+// selectList : the list of all the DOM nodes with the `select` class
+function activeSelect(select, selectList) {
+
+  // If the widget is already active there is nothing to do
+  if (select.classList.contains('active')) return;
+
+  // We have to turn off the active state on all custom widgets
+  // Because the deactivateSelect function fulfill all the requirement of the
+  // forEach callback function, we use it directly without using an intermediate
+  // anonymous function.
+  selectList.forEach(deactivateSelect);
+
+  // And we turn on the active state for this specific widget
+  select.classList.add('active');
+}
+
+// This function will be used each time the user wants to open/closed the list of options
+// It takes one parameter:
+// select : the DOM node with the list to toggle
+function toggleOptList(select) {
+
+  // The list is kept from the widget
+  var optList = select.querySelector('.optList');
+
+  // We change the class of the list to show/hide it
+  optList.classList.toggle('hidden');
+}
+
+// This function will be used each time we need to highlight an option
+// It takes two parameters:
+// select : the DOM node with the `select` class containing the option to highlight
+// option : the DOM node with the `option` class to highlight
+function highlightOption(select, option) {
+
+  // We get the list of all option available for our custom select element
+  var optionList = select.querySelectorAll('.option');
+
+  // We remove the highlight from all options
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  // We highlight the right option
+  option.classList.add('highlight');
+};
+ +

That's all you need in order to handle the various states of the custom widget.

+ +

Next, we bind these functions to the appropriate events:

+ +
// We handle the event binding when the document is loaded.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Each custom widget needs to be initialized
+  selectList.forEach(function (select) {
+
+    // as well as all its `option` elements
+    var optionList = select.querySelectorAll('.option');
+
+    // Each time a user hovers their mouse over an option, we highlight the given option
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        // Note: the `select` and `option` variable are closures
+        // available in the scope of our function call.
+        highlightOption(select, option);
+      });
+    });
+
+    // Each times the user click on a custom select element
+    select.addEventListener('click', function (event) {
+      // Note: the `select` variable is a closure
+      // available in the scope of our function call.
+
+      // We toggle the visibility of the list of options
+      toggleOptList(select);
+    });
+
+    // In case the widget gain focus
+    // The widget gains the focus each time the user clicks on it or each time
+    // they use the tabulation key to access the widget
+    select.addEventListener('focus', function (event) {
+      // Note: the `select` and `selectList` variable are closures
+      // available in the scope of our function call.
+
+      // We activate the widget
+      activeSelect(select, selectList);
+    });
+
+    // In case the widget loose focus
+    select.addEventListener('blur', function (event) {
+      // Note: the `select` variable is a closure
+      // available in the scope of our function call.
+
+      // We deactivate the widget
+      deactivateSelect(select);
+    });
+  });
+});
+ +

At that point, our widget will change state according to our design, but its value doesn't get updated yet. We'll handle that next.

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}
Check out the source code
+ +

Handling the widget's value

+ +

Now that our widget is working, we have to add code to update its value according to user input and make it possible to send the value along with form data.

+ +

The easiest way to do this is to use a native widget under the hood. Such a widget will keep track of the value with all the built-in controls provided by the browser, and the value will be sent as usual when a form is submitted. There's no point in reinventing the wheel when we can have all this done for us.

+ +

As seen previously, we already use a native select widget as a fallback for accessibility reasons; we can simply synchronize its value with that of our custom widget:

+ +
// This function updates the displayed value and synchronizes it with the native widget.
+// It takes two parameters:
+// select : the DOM node with the class `select` containing the value to update
+// index  : the index of the value to be selected
+function updateValue(select, index) {
+  // We need to get the native widget for the given custom widget
+  // In our example, that native widget is a sibling of the custom widget
+  var nativeWidget = select.previousElementSibling;
+
+  // We also need  to get the value placeholder of our custom widget
+  var value = select.querySelector('.value');
+
+  // And we need the whole list of options
+  var optionList = select.querySelectorAll('.option');
+
+  // We set the selected index to the index of our choice
+  nativeWidget.selectedIndex = index;
+
+  // We update the value placeholder accordingly
+  value.innerHTML = optionList[index].innerHTML;
+
+  // And we highlight the corresponding option of our custom widget
+  highlightOption(select, optionList[index]);
+};
+
+// This function returns the current selected index in the native widget
+// It takes one parameter:
+// select : the DOM node with the class `select` related to the native widget
+function getIndex(select) {
+  // We need to access the native widget for the given custom widget
+  // In our example, that native widget is a sibling of the custom widget
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};
+ +

With these two functions, we can bind the native widgets to the custom ones:

+ +
// We handle event binding when the document is loaded.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Each custom widget needs to be initialized
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    // We make our custom widget focusable
+    select.tabIndex = 0;
+
+    // We make the native widget no longer focusable
+    select.previousElementSibling.tabIndex = -1;
+
+    // We make sure that the default selected value is correctly displayed
+    updateValue(select, selectedIndex);
+
+    // Each time a user clicks on an option, we update the value accordingly
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    // Each time a user uses their keyboard on a focused widget, we update the value accordingly
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      // When the user hits the down arrow, we jump to the next option
+      if (event.keyCode === 40 && index < length - 1) { index++; }
+
+      // When the user hits the up arrow, we jump to the previous option
+      if (event.keyCode === 38 && index > 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});
+ +

In the code above, it's worth noting the use of the tabIndex property. Using this property is necessary to ensure that the native widget will never gain focus, and to make sure that our custom widget gains focus when the user uses his keyboard or his mouse.

+ +

With that, we're done! Here's the result:

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}
Check out the source code
+ +

But wait a second, are we really done?

+ +

Make it accessible

+ +

We have built something that works and though we're far from a fully-featured select box, it works nicely. But what we've done is nothing more than fiddle with the DOM. It has no real semantics, and even though it looks like a select box, from the browser's point of view it isn't one, so assistive technologies won't be able to understand it's a select box. In short, this pretty new select box isn't accessible!

+ +

Fortunately, there is a solution and it's called ARIA. ARIA stands for "Accessible Rich Internet Application", and it's a W3C specification specifically designed for what we are doing here: making web applications and custom widgets accessible. It's basically a set of attributes that extend HTML so that we can better describe roles, states and properties as though the element we've just devised was the native element it tries to pass for. Using these attributes is dead simple, so let's do it.

+ +

The role attribute

+ +

The key attribute used by ARIA is the role attribute. The role attribute accepts a value that defines what an element is used for. Each role defines its own requirements and behaviors. In our example, we will use the listbox role. It's a "composite role", which means elements with that role expect to have children, each with a specific role (in this case, at least one child with the option role).

+ +

It's also worth noting that ARIA defines roles that are applied by default to standard HTML markup. For example, the {{HTMLElement("table")}} element matches the role grid, and the {{HTMLElement("ul")}} element matches the role list. Because we use a {{HTMLElement("ul")}} element, we want to make sure the listbox role of our widget will supersede the list role of the {{HTMLElement("ul")}} element. To that end, we will use the role presentation. This role is designed to let us indicate that an element has no special meaning, and is used solely to present information. We will apply it to our {{HTMLElement("ul")}} element.

+ +

To support the listbox role, we just have to update our HTML like this:

+ +
<!-- We add the role="listbox" attribute to our top element -->
+<div class="select" role="listbox">
+  <span class="value">Cherry</span>
+  <!-- We also add the role="presentation" to the ul element -->
+  <ul class="optList" role="presentation">
+    <!-- And we add the role="option" attribute to all the li elements -->
+    <li role="option" class="option">Cherry</li>
+    <li role="option" class="option">Lemon</li>
+    <li role="option" class="option">Banana</li>
+    <li role="option" class="option">Strawberry</li>
+    <li role="option" class="option">Apple</li>
+  </ul>
+</div>
+ +
+

Note: Including both the role attribute and a class attribute is only necessary if you want to support legacy browsers that do not support the CSS attribute selectors.

+
+ +

The aria-selected attribute

+ +

Using the role attribute is not enough. ARIA also provides many states and property attributes. The more and better you use them, the better your widget will be understood by assistive technologies. In our case, we will limit our usage to one attribute: aria-selected.

+ +

The aria-selected attribute is used to mark which option is currently selected; this lets assistive technologies inform the user what the current selection is. We will use it dynamically with JavaScript to mark the selected option each time the user chooses one. To that end, we need to revise our updateValue() function:

+ +
function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  // We make sure that all the options are not selected
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  // We make sure the chosen option is selected
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};
+ +

Here is the final result of all these changes (you'll get a better feel for this by trying it with an assistive technology such as NVDA or VoiceOver):

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}
Check out the final source code
+ +

Conclusion

+ +

We have seen all the basics of building a custom form widget, but as you can see it's not trivial to do, and often it's better and easier to rely on third-party libraries instead of coding them from scratch yourself (unless, of course, your goal is to build such a library).

+ +

Here are a few libraries you should consider before coding your own:

+ + + +

If you want to move forward, the code in this example needs some improvement before it becomes generic and reusable. This is an exercise you can try to perform. Two hints to help you in this: the first argument for all our functions is the same, which means those functions need the same context. Building an object to share that context would be wise. Also, you need to make it feature-proof; that is, it needs to be able to work better with a variety of browsers whose compatibility with the Web standards they use vary. Have fun!

+ +

{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git a/files/es/learn/forms/how_to_structure_a_web_form/index.html b/files/es/learn/forms/how_to_structure_a_web_form/index.html new file mode 100644 index 0000000000..45f58520d1 --- /dev/null +++ b/files/es/learn/forms/how_to_structure_a_web_form/index.html @@ -0,0 +1,320 @@ +--- +title: Cómo estructurar un formulario HTML +slug: Learn/HTML/Forms/How_to_structure_an_HTML_form +translation_of: Learn/Forms/How_to_structure_a_web_form +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}
+ +

Una vez examinados los conceptos básicos, vamos a ver más en detalle los elementos que se utilizan para proporcionar estructura y significado a las diferentes partes de un formulario.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática y de lenguajes HTML.
Objetivo:Entender cómo se estructuran los formularios HTML y se les proporciona semántica para dotarlos de criterios de usabilidad y accesibilidad.
+ +

La flexibilidad que presentan los formularios los convierte en una de las estructuras más complejas en HTML, puesto que puedes crear cualquier tipo de formulario básico a partir de los elementos y atributos destinados a esta función. El uso de una estructura correcta al crear un formulario HTML te ayudará a garantizar que el formulario presente las características de usabilidad y accesibilidad adecuadas.

+ +

El elemento <form>

+ +

El elemento {{HTMLElement ("form")}} define formalmente un formulario y los atributos que determinan el comportamiento del formulario. Cada vez que desees crear un formulario HTML, debes empezar utilizando este elemento y anidando todo el contenido dentro de él. Muchas tecnologías de asistencia y complementos del navegador pueden descubrir elementos {{HTMLElement ("form")}} e implementar códigos de apoyo (hooks) especiales para que sean más fáciles de usar.

+ +

Ya lo vimos en el artículo anterior.

+ +
Advertencia: Está estrictamente prohibido anidar un formulario dentro de otro formulario. Anidar formularios no es una buena idea porque puede ocasionar comportamientos impredecibles.
+ +

Siempre es posible usar controles de formulario fuera de un elemento {{HTMLElement ("form")}}. Si la haces, por defecto ese control no tiene nada que ver con ningún formulario, a menos que lo asocies a algún formulario con el atributo form. Esto se introdujo para permitir vincular explícitamente un control a un formulario, incluso si este no está dentro de él.

+ +

A continuación vamos a exponer los elementos estructurales que encontrarás en un formulario.

+ +

Los elementos <fieldset> y <legend>

+ +

El elemento {{HTMLElement ("fieldset")}} es una forma cómoda de crear grupos de controles de formulario (también denominados widgets) que comparten el mismo propósito, con fines semánticos y de aplicación de estilo. Puedes etiquetar un elemento {{HTMLElement ("fieldset")}} incluyendo un elemento {{HTMLElement ("legend")}} justo debajo de la etiqueta de apertura {{HTMLElement ("fieldset")}}. El contenido textual del elemento {{HTMLElement ("legend")}} describe formalmente el propósito del elemento {{HTMLElement ("fieldset")}} que está incluido dentro.

+ +

Muchas tecnologías de asistencia utilizarán el elemento {{HTMLElement ("legend")}} como si fuera una parte de la etiqueta de cada control dentro del elemento {{HTMLElement ("fieldset")}} correspondiente. Por ejemplo, algunos lectores de pantalla como Jaws y NVDA leerán el contenido de la leyenda antes de decir la etiqueta de cada control.

+ +

Un pequeño ejemplo:

+ +
<form>
+  <fieldset>
+    <legend>Tamaño del zumo de fruta</legend>
+    <p>
+      <input type="radio" name="size" id="size_1" value="small">
+      <label for="size_1">Pequeño</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_2" value="medium">
+      <label for="size_2">Mediano</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_3" value="large">
+      <label for="size_3">Grande</label>
+    </p>
+  </fieldset>
+</form>
+ +
+

Nota: Puedes encontrar este ejemplo en fieldset-legend.html (consúltalo en vivo).

+
+ +

Al leer el formulario anterior, un lector de pantalla dirá «Tamaño del zumo de fruta: pequeño» para el primer control de formulario, «Tamaño del zumo de fruta: mediano» para el segundo y «Tamaño del zumo de fruta: grande» para el tercero.

+ +

El caso de uso que se muestra en este ejemplo es uno de los más importantes. Cada vez que tengas un conjunto de botones de opción, debes anidarlos dentro de un elemento {{HTMLElement ("fieldset")}}. Hay otros casos de uso y el elemento {{HTMLElement ("fieldset")}} también se puede usar en general para seccionar un formulario. Idealmente, los formularios largos deberían tener una extensión de varias páginas, pero si un formulario se alarga y ha de estar contenido en una sola página, colocar las diferentes secciones relacionadas dentro de diferentes conjuntos de campos mejora su usabilidad.

+ +

Debido a la influencia que tiene sobre las tecnologías de asistencia, el elemento {{HTMLElement ("fieldset")}} es uno de los elementos clave para crear formularios accesibles. Sin embargo, no hay que abusar de él. Si es posible, cada vez que crees un formulario, intenta escuchar cómo lo interpreta un lector de pantalla. Si suena raro, intenta mejorar la estructura del formulario.

+ +

El elemento <label>

+ +

Como vimos en el artículo anterior, el elemento {{HTMLElement ("label")}} es la forma formal de definir una etiqueta para un control de un formulario HTML. Este es el elemento más importante si deseas crear formularios accesibles porque cuando se implementan correctamente, los lectores de pantalla leen la etiqueta de un elemento de formulario junto con las instrucciones relacionadas, y esto además resulta muy útil para los usuarios videntes. Tomemos este ejemplo que vimos en el artículo anterior:

+ +
<label for="name">Nombre:</label> <input type="text" id="name" name="user_name">
+ +

Con la etiqueta <label> asociada correctamente con <input> por su atributo for (que contiene el atributo id del elemento <input>), un lector de pantalla leerá algo como «Nombre, editar texto».

+ +

Hay otra forma de asociar un control de formulario con una etiqueta: asociarlo implícitamente anidando el control de formulario dentro de <label>.

+ +
<label for="name">
+  Nombre: <input type="text" id="name" name="user_name">
+</label>
+ +

Incluso en estos casos, se aconseja establecer el atributo for para garantizar que todas las tecnologías de asistencia comprendan la relación entre la etiqueta y el control de formulario.

+ +

Si no hay ninguna etiqueta, o si el control de formulario no está asociado implícita o explícitamente con alguna etiqueta, un lector de pantalla leerá algo así como «Editar texto en blanco», lo cual no es de mucha ayuda.

+ +

¡También se puede hacer clic en las etiquetas!

+ +

Otra ventaja de configurar correctamente las etiquetas es que puedes hacer clic o pulsar en la etiqueta para activar el control de formulario correspondiente. Esto es útil para controles como entradas de texto, donde puedes hacer clic tanto en la etiqueta como en la entrada de texto para proporcionar el foco al control de formulario, pero es útil especialmente para botones de opción y casillas de verificación, porque la zona sensible de este control puede ser muy pequeña, y puede ser útil para facilitar su activación.

+ +

Por ejemplo, al hacer clic en el texto de la etiqueta «Me gustan las cerezas» del ejemplo siguiente, cambiará el estado seleccionado de la casilla de verificación taste_cherry:

+ +
<form>
+  <p>
+    <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry">
+    <label for="taste_1">Me gustan las cerezas</label>
+  </p>
+  <p>
+    <input type="checkbox" id="taste_2" name="taste_banana" value="banana">
+    <label for="taste_2">Me gustan los plátanos</label>
+  </p>
+</form>
+ +
+

Nota: Puedes encontrar este ejemplo en checkbox-label.html (consúltalo en vivo).

+
+ +

Etiquetas múltiples

+ +

Estrictamente hablando, es posible poner varias etiquetas en un solo control de formulario, pero no suele ser una buena idea porque algunas tecnologías de asistencia pueden tener problemas para manejarlas. En caso de tener varias etiquetas, hay que anidar el control de formulario y sus etiquetas dentro de un único elemento {{htmlelement ("label")}}.

+ +

Consideremos este ejemplo:

+ +
<p>Los campos obligatorios se marcan con un <abbr title = "required">*</abbr>.</p>
+
+<!-- Así que esto: -->
+<div>
+  <label for="username">Nombre:</label>
+  <input type="text" name="username">
+  <label for="username"><abbr title="required" aria-label="required">*</abbr></label>
+</div>
+
+<!-- sería mejor hacerlo así: -->
+<div>
+  <label for="username">
+    <span>Nombre:</span>
+    <input id="username" type="text" name="username">
+    <abbr title="required" aria-label="required">*</abbr>
+  </label>
+</div>
+
+<!-- Pero probablemente lo mejor es esto: -->
+<div>
+  <label for="username">Nombre: <abbr title="required" aria-label="required">*</abbr></label>
+  <input id="username" type="text" name="username">
+</div>
+ +

{{EmbedLiveSample("Etiquetas_múltiples", 120, 120)}}

+ +

El párrafo de la parte superior establece una regla para los elementos que son obligatorios. La regla ha de incluirse antes de usarse para que tanto los usuarios videntes como los usuarios que utilizan tecnologías de asistencia y lectores de pantalla, sepan lo que significa antes de encontrar un elemento obligatorio. Pero si bien esto ayuda a informar a los usuarios de lo que significa un asterisco, no es posible confiar plenamente en ello. Cuando un lector de pantalla se encuentre con un asterisco pronunciará «estrella». Cuando un usuario vidente pase el ratón por encima, debería aparecer una etiqueta de «obligatorio», lo cual se logra con el uso del atributo title. Pero los títulos que se leen en voz alta dependen de la configuración del lector de pantalla, por lo que es más fiable incluir también el atributo aria-label, que los lectores de pantalla siempre leen.

+ +

Las variantes anteriores aumentan en efectividad a medida que se avanza por ellas:

+ + + +
+

Nota: Es posible que obtengas resultados ligeramente diferentes dependiendo de tu lector de pantalla. Esta prueba se hizo con VoiceOver (NVDA se comporta de manera similar). Nos encantaría conocer tus experiencias.

+
+ +
+

Nota: Puedes encontrar este ejemplo en GitHub como required-labels.html (o consultarlo en vivo). No pruebes el ejemplo con las dos o tres versiones sin los comentarios porque los lectores de pantalla se confundirán si hay múltiples etiquetas y múltiples entradas con el mismo ID.

+
+ +

Estructuras HTML comunes que se utilizan en los formularios

+ +

Más allá de las estructuras específicas de los formularios web, es bueno recordar que el marcado de los formularios es solo HTML. Esto significa que puedes usar todo el poder del HTML para estructurar un formulario web.

+ +

Como puedes ver en los ejemplos, es una práctica común delimitar una etiqueta y su control de formulario con un elemento {{HTMLElement ("li")}} dentro de una lista {{HTMLElement ("ul")}} o {{HTMLElement ("ol")}}. Los elementos {{HTMLElement ("p")}} y {{HTMLElement ("div")}} también se usan con frecuencia. Se recomiendan las listas para estructurar múltiples casillas de verificación o botones de opción.

+ +

Además del elemento {{HTMLElement ("fieldset")}}, también es una práctica común usar títulos HTML (por ejemplo, {{htmlelement ("h1")}}, {{htmlelement ("h2")}}), y seccionar (por ejemplo, {{htmlelement ("section")}}), para estructurar formas complejas.

+ +

Depende de ti, sobre todo, encontrar un estilo de codificación cómodo que dé como resultado formas con buena accesibilidad y usabilidad. Las secciones independientes con funciones diferentes deben estar contenidas en elementos {{htmlelement ("section")}} separados, con elementos {{htmlelement ("fieldset")}} para contener botones de opción.

+ +

Aprendizaje activo: construir una estructura de formulario

+ +

Pongamos en práctica estas ideas y creemos un formulario un poco más complicado: un formulario de pago. Este formulario contendrá una serie de tipos de control que quizás aún no comprendas. No te preocupes por esto por ahora; en el artículo siguiente descubrirás cómo funcionan (Los controles básicos de formulario originales). Por ahora, lee con detenimiento las descripciones y sigue las instrucciones, y empieza a formarte una idea de qué elementos de delimitación se utilizan para estructurar el formulario y por qué.

+ +
    +
  1. Para comenzar, haz una copia local de nuestro archivo de plantilla en blanco y el CSS de nuestro formulario de pago en un nuevo directorio de tu ordenador.
    2. +
  2. Añade dentro del elemento HTML {{htmlelement ("head")}} la línea siguiente para aplicar el CSS al HTML: + 
    <link href="payment-form.css" rel="stylesheet">
    +
    3. +
  3. A continuación, añade el elemento externo {{htmlelement ("form")}} para crear tu formulario: + 
    <form>
+
+</form>
    +
    4. +
  4. Añade un encabezado y un párrafo dentro de las etiquetas <form>> para informar a los usuarios cómo se marcan los campos obligatorios: + 
    <h1>Forma de pago</h1>
+<p>Los campos obligatorios van seguidos de <strong> <abbr title = "required"> * </abbr> </strong>.</p>
    +
    5. +
  5. A continuación añadimos al formulario una sección de código más grande, justo debajo de nuestra entrada anterior. Aquí verás que delimitamos con un elemento {{htmlelement ("section")}} independiente los campos con la información de contacto. Además, hay un conjunto de dos botones de opción, cada uno de los cuales colocamos dentro de su elemento de lista ({{htmlelement ("li")}}) propio. También hay dos entradas de texto estándar {{htmlelement ("input")}} y sus elementos {{htmlelement ("label")}} asociados, cada uno anidado dentro de un elemento {{htmlelement ("p")}} y una entrada de texto para introducir una contraseña. Añade este código a tu formulario: + 
    <section>
+    <h2>Información de contacto</h2>
+    <fieldset>
+      <legend>Título</legend>
+      <ul>
+          <li>
+            <label for="title_1">
+              <input type="radio" id="title_1" name="title" value="K" >
+              Rey
+            </label>
+          </li>
+          <li>
+            <label for="title_2">
+              <input type="radio" id="title_2" name="title" value="Q">
+              Reina
+            </label>
+          </li>
+          <li>
+            <label for="title_3">
+              <input type="radio" id="title_3" name="title" value="J">
+              Bufón
+            </label>
+          </li>
+      </ul>
+    </fieldset>
+    <p>
+      <label for="name">
+        <span>Nombre:</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="text" id="name" name="username">
+    </p>
+    <p>
+      <label for="mail">
+        <Span>Correo electrónico:</ span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="email" id="mail" name="usermail">
+    </p>
+    <p>
+      <label for="pwd">
+        <span>Contraseña:</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="password" id="pwd" name="password">
+    </p>
+</section>
    +
    6. +
  6. La segunda <section> de nuestro formulario es la información de pago. Hay tres controles diferentes, junto con sus etiquetas, cada uno contenido dentro de un elemento <p>. El primero es un menú desplegable ({{htmlelement ("select")}}) para seleccionar el tipo de tarjeta de crédito. El segundo es un elemento <input> de tipo tel, para introducir un número de tarjeta de crédito. Si bien podríamos haber usado el tipo number, no queremos una interfaz de usuario con control de número. El último es un elemento <input> de tipo date, para introducir la fecha de caducidad de la tarjeta; aparecerá como un control de selección de fecha en navegadores compatibles, y como una entrada de texto normal en navegadores no compatibles. Estos tipos de entrada más nuevos volverán a aparecer en el artículo Tipos de entrada HTML5.
    +
    + Introduce los datos siguientes a continuación de la sección anterior: + 
    <section>
+    <h2>Información de pago</h2>
+    <p>
+      <label for="card">
+        <span>Tipo de tarjeta:</span>
+      </label>
+      <select id="card" name="usercard">
+        <option value="visa">Visa</option>
+        <option value="mc">Mastercard</option>
+        <option value="amex">American Express</option>
+      </select>
+    </p>
+    <p>
+      <label for="number">
+        <span>Número de tarjeta:</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="tel" id="number" name="cardnumber">
+    </p>
+    <p>
+      <label for="date">
+        <span>Fecha de caducidad:</span>
+        <strong><abbr title="required">*</abbr></strong>
+        <em>el formato mm/aa</em>
+      </label>
+      <input type="date" id="date" name="expiration">
+    </p>
+</section>
    +
    7. +
  7. La última sección que añadimos es mucho más simple y contiene solo un {{htmlelement ("button")}} de tipo submit, para enviar los datos del formulario. Añádelo al final de tu formulario: + 
    <p> <button type="submit">Validar el pago</button> </p>
    +
    8. +
+ +

Debajo puedes ver en acción el formulario terminado (también lo encontrarás en GitHub; consulta el código fuente de nuestro payment-form.html y ejecútalo en vivo):

+ +

{{EmbedLiveSample("A_payment_form","100%",620, "", "/en-US/Learn/Forms/How_to_structure_a_web_form/Example")}}

+ +

¡Prueba tus habilidades!

+ +

Has llegado al final de este artículo pero ¿puedes recordar la información más importante? Puedes encontrar pruebas adicionales para comprobar que has comprendido la información antes de continuar — visita Prueba tus habilidades: Estructura de formularios.

+ +

Resumen

+ +

Ahora tienes todos los conocimientos necesarios para estructurar adecuadamente tus formularios web. Expondremos muchas de las características que se presentan aquí en los artículos siguientes, y el próximo artículo analizará con más detalle el uso de todos los diferentes tipos de controles de formulario que vas a querer usar para recopilar la información de tus usuarios.

+ +

Ver también

+ + + +

{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}

+ +

En este módulo

+ + + +

Temas avanzados

+ + diff --git a/files/es/learn/forms/html5_input_types/index.html b/files/es/learn/forms/html5_input_types/index.html new file mode 100644 index 0000000000..d463399e93 --- /dev/null +++ b/files/es/learn/forms/html5_input_types/index.html @@ -0,0 +1,276 @@ +--- +title: Tipos de input de HTML5 +slug: Learn/HTML/Forms/Tipos_input_HTML5 +translation_of: Learn/Forms/HTML5_input_types +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/Basic_native_form_controls", "Learn/Forms/Other_form_controls", "Learn/Forms")}}
+ +

En el artículo anterior vimos el elemento {{htmlelement("input")}} y los valores de su atributo type, disponibles desde los inicios de HTML. Ahora veremos en detalle la funcionalidad de los controles de formulario más recientes, incluyendo algunos tipos de input nuevos, los cuales fueron añadidos en HTML5 para permitir la recolección de tipos de datos específicos

+ + + + + + + + + + + + +
Requisitos previos:Formación básica en informática, y una comprensión básica de HTML.
Objetivo:Entender los valores de tipo input disponibles más recientes para crear controles de formulario nativos, y cómo implementarlos utilizando HTML.
+ +
+

Nota: La mayoría de las características discutidas en este artículo tienen un amplio soporte en todos los navegadores, anotaremos cualquier excepción. Si quieres más detalles referente al soporte de navegadores, deberías consultar nuestra referéncia de elementos de formulario HTML, y en particular nuestra referéncia extensiva de Tipos de <input>.

+
+ +

Debido a que la apariéncia de un control de formulario puede ser algo distinta con respecto a unas especificaciones del diseñador, los desarrolladores web a veces construyen sus propios controles de formulario personalizados. Cubrimos este aspecto en un tutorial avanzado: Cómo construir widgets de formulario personalizados.

+ +

Campo de dirección de correo electrónico

+ +

Este tipo de campo se define utilizando el valor  email en el atributo {{htmlattrxref("type","input")}} del elemento <input>:

+ +
<input type="email" id="email" name="email">
+ +

Cuando se utiliza este valor {{htmlattrxref("type","input")}} , se le obliga al usuario a escribir dentro del campo una dirección de correo electrónico válida. Cualquier otro contenido ocasiona que el navegador muestre un mensaje de error cuando se envía el formulario. Puedes verlo en acción en la siguiente captura de pantalla

+ +

An invalid email input showing the message "Please enter an email address."

+ +

Puedes utilizar también el atributo multiple en combinación con el tipo inputemail para permitir que sean introducidas varias direcciones de correo electrónico separadas por comas en el mismo input:

+ +
<input type="email" id="email" name="email" multiple>
+ +

En algunos dispositivos, en particular dispositivos táctiles con teclados dinámicos como los smart phones, debería presentarse un teclado virtual que es más adecuado para introducir direcciones de correo electrónico, incluyendo la tecla @. Mira como ejemplo la siguiente captura de pantalla del teclado de Firefox para Android:

+ +

firefox for android email keyboard, with ampersand displayed by default.

+ +
+

Nota: Puedes encontrar ejemplos sobre los tipos de entrada de texto básicos en Ejemplos input básicos (Consulta también el código fuente).

+
+ +

Mejorar la experiéncia del usuario para usuarios con estos dispositivos, es otra buena razón para utilizar estos tipos de input más recientes.

+ +

Validación del lado cliente

+ +

Como puedes haber visto anteriormente, email, junto con otros tipos de input más recientes, proporciona la validación de errores en el lado cliente de forma predeterminada, realizados por el navegador antes de que los datos obtenidos se envíen al servidor. Es una ayuda útil guiar a los usuarios a rellenar un formulario de forma precisa y puede ahorrar tiempo: es útil saber de inmediato que tu dato no es correcto, en vez de tener que esperar el viaje de ida y vuelta al servidor.

+ +

Pero no debería ser considerado una medida de seguridad exhaustiva! Tus aplicaciones siempre deben realizar comprobaciones de seguridad en cada dato, tanto en el lado servidor como en el lado cliente debido a que la validación en el lado cliente es muy fácil desactivarla, por lo que usuarios malintencionados pueden enviar fácilmente datos incorrectos al servidor. Lee Seguridad en el sitio web para tener una idea de lo que podría ocurrir; Implementar validación en el lado servidor está más allá del alcance de este módulo-guía, pero debería tenerlo en cuenta.

+ +

Ten en cuenta que a@b es una dirección de correo electrónico válida de acuerdo a las restricciones proporcionadaas por defecto. Esto es debido a que el tipo de input email, permite por defecto direcciones de correo electrónico de una intranet. Para implementar un comportamiento diferente de validación puedes utilizar el atributo pattern, y también puedes utilizar mensajes de error personalizados; Hablaremos de cómo utilizar estas características en Validación de formularios en el lado cliente en un artículo posterior.

+ +
+

Nota: Si los datos introducidos no son una dirección de correo electrónico, habrá coincidéncia con la pseudo clase {{cssxref(':invalid')}}, y la propiedad {{domxref('validityState.typeMismatch')}} devolverá true.

+
+ +

Campo de búsqueda

+ +

Los campos de búsqueda están destinados a ser utilizados para crear cajas de búsqueda en páginas y aplicaciones. Este tipo de campo se define utilizando el valor search en su atributo {{htmlattrxref("type","input")}}:

+ +
<input type="search" id="search" name="search">
+ +

La diferéncia principal entre un campo text y un campo search, es la forma en que el navegador aplica estilo a su apariéncia. A menudo los campos search se muestran con bordes redondeados; y a veces también muestran una "Ⓧ", el cual despeja el campo de cualquier valor cuando se pulsa sobre él. Adicionalmente, en dispositivos con teclado dinámico, la tecla enter del teclado puede leer "search" o mostrar un icono de lupa.

+ +

La captura de pantalla siguiente muestra un campo de búsqueda con contenido, en Firefox 71, Safari 13, y Chrome 79 en macOS, y Edge 18 y Chrome 79 en Windows 10. Ten en cuenta que el icono de reseteo sólo aparece si el campo tiene un valor y, aparte de Safari, sólo se muestra cuando el campo tiene el foco.

+ +

Screenshots of search fields on several platforms.

+ +

Otra característica que vale la pena señalar es que se puede guardar los valores de un campo search automáticamente y reutilizarse en múltiples páginas del mismo sitio web para ofrecer autocompletado. Esta característica suele ocurrir de forma automática en la mayoría de navegadores modernos.

+ +

Campo número de teléfono

+ +

Se puede crear un campo especial para introducir números de teléfono utilizando tel como valor del atributo {{htmlattrxref("type","input")}}:

+ +
<input type="tel" id="tel" name="tel">
+ +

Cuando se accede desde un dispositivo táctil con teclados dinámicos, muchos de ellos mostrarán un teclado numérico cuando se encuentren con type="tel", lo que significa que este tipo es útil no sólo para ser utilizado para números de teléfono, sino también cuando sea útil un teclado numérico.

+ +

La siguiente captura de pantalla del teclado de Firefox para Android proporciona un ejemplo:

+ +

firefox for android email keyboard, with ampersand displayed by default.

+ +

Debido a la gran variedad de formatos de número de teléfono existentes, este tipo de campo no cumple con ningún tipo de restricción sobre el valor introducido por el usuario. (Esto significa que puede incluir letras, etc...).

+ +

Como mencionamos anteriormente, se puede utilizar el atributo pattern para que asuma restricciones, sobre el cuál aprenderemos en Validación de formulario en el lado cliente.

+ +

Campo URL

+ +

Se puede crear un tipo especial de campo para introducir URLs utilizando el valor url para el atributo {{htmlattrxref("type","input")}}:

+ +
<input type="url" id="url" name="url">
+ +

Este tipo añade restricciones de validación en el campo. El navegador informará de un error si no se introdujo el protocolo (como http:), o si de algún modo el URL está mal formado. En dispositivos con teclados dinámicos a menudo mostrará por defecto algunas o todas las teclas como los dos puntos, el punto, y la barra inclinada.

+ +

Mira el siguiente ejemplo tomado de Firefox para Android:

+ +

firefox for android email keyboard, with ampersand displayed by default.

+ +
Nota: Solo porque el URL esté bien formado no significa necesariamente que la dirección al que hace referéncia exista!
+ +

Campo numérico

+ +

Se pueden crear controles para introducir números con el {{htmlattrxref("type","input")}} number de {{HTMLElement("input")}}. Este control se parece a un campo de texto pero solo permite números de punto flotante, y normalmente proporciona botones deslizadores para incrementar o reducir el valor del control. En dispositivos con teclados dinámicos generalmente se muestra el teclado numérico.

+ +

La siguiente captura de pantalla tomada de Firefox para Android proporciona un ejemplo:

+ +

firefox for android email keyboard, with ampersand displayed by default.

+ +

Con el tipo de input number  puedes limitar los valores mínimo y máximo permitidos definiendo los atributos {{htmlattrxref("min","input")}} y  {{htmlattrxref("max","input")}}.

+ +

También puedes utilizar el atributo step para cambiar el incremento y decremento causado por los botones deslizadores. Por defecto, el tipo de input number sólo valida si el número es un entero. Para permitir números decimales, especifica step="any". Si se omite, su valor por defecto es 1, lo que significa que solo son válidos números enteros.

+ +

Miremos algunos ejemplos. El primero de los siguientes crea un control numérico cuyo valor está restringido a cualquier valor entre 1 y 10, y sus botones cambian su valor en incrementos o decrementos de 2.

+ +
<input type="number" name="age" id="age" min="1" max="10" step="2">
+ +

El segundo crea un control numérico cuyo valor está restringido a cualquier valor entre el 0 y 1 ambos inclusive, y sus botones cambian su valor en incrementos o decrementos de 0.01.

+ +
<input type="number" name="change" id="pennies" min="0" max="1" step="0.01">
+ +

El tipo de input number tiene sentido cuando esté limitado el rango de valores válidos, por ejemplo la edad de una persona o su altura. Si el rango es demasiado grande para que los cambios de incremento tengan sentido ( por ejemplo los códigos postales de USA, cuyo rango va de 00001 a 99999), entonces sería una mejor opción utilizar el tipo tel: proporciona el teclado numérico mientras que omite el componente de interfaz de usuario de los deslizadores de número.

+ +
+

Ten en cuenta que: En versiones inferiores a la 10 de Internet Explorer no se soportan las entradas number

+
+ +

Slider controls

+ +

Otra forma de tomar un número es usando un slider. Podrás observar cómo son bastantes parecidas a los sitios inmobiliarios, dónde quieres determinar un máximo de precio por propiedad y filtrar tu búsqueda en el. Observaremos un ejemplo en vivo.

+ +

{{EmbedGHLiveSample("learning-area/html/forms/range-example/index.html", '100%', 200)}}

+ +

Usage-wise, sliders are less accurate than text fields. Therefore, they are used to pick a number whose precise value is not necessarily important.

+ +

A slider is created using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value range. The slider-thumb can be moved via mouse or touch, or with the arrows of the keypad.

+ +

It's important to properly configure your slider. To that end, it's highly recommended that you set the min, max, and step attributes which set the minimum, maximum and increment values, respectively.

+ +

Let's look at the code behind the above example, so you can see how its done. First of all, the basic HTML:

+ +
<label for="price">Choose a maximum house price: </label>
+<input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000">
+<output class="price-output" for="price"></output>
+ +

This example creates a slider whose value may range between 50000 and 500000, which increments/decrements by 100 at a time. We've given it default value of 250000, using the value attribute.

+ +

One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. This is why we've included an {{htmlelement("output")}} element — to contain the current value (we'll also look at this element in the next article). You could display an input value or the output of a calculation inside any element, but <output> is special — like <label>, it can take a for attribute that allows you to associate it with the element or elements that the output value came from.

+ +

To actually display the current value, and update it as it changed, you must use JavaScript, but this is relatively easy to do:

+ +
const price = document.querySelector('#price')
+const output = document.querySelector('.price-output')
+
+output.textContent = price.value
+
+price.addEventListener('input', function() {
+  output.textContent = price.value
+});
+ +

Here we store references to the range input and the output in two variables. Then we immediately set the output's textContent to the current value of the input. Finally, an event listener is set to ensure that whenever the range slider is moved, the output's textContent is updated to the new value.

+ +
+

Note: range inputs are not supported in versions of Internet Explorer below 10.

+
+ +

Date and time pickers

+ +

Gathering date and time values has traditionally been a nightmare for web developers. For good user experience, it is important to provide a calendar selection UI, enabling users to select dates without necessating context switching to a native calendar application or potentially entering them in differing formats that are hard to parse. The last minute of the previous millenium can be expressed in the following different ways, for example: 1999/12/31, 23:59 or 12/31/99T11:59PM.

+ +

HTML date controls are available to handle this specific kind of data, providing calendar widgets and making the data uniform.

+ +

A date and time control is created using the {{HTMLElement("input")}} element and an appropriate value for the {{htmlattrxref("type","input")}} attribute, depending on whether you wish to collect dates, times, or both. Here's a live example that falls back to {{htmlelement("select")}} elements in non-supporting browsers:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/datetime-local-picker-fallback/index.html", '100%', 200)}}

+ +

Let's look at the different available types in brief. Note that the usage of these types is quite complex, especially considering browser support (see below); to find out the full details, follow the links below to the reference pages for each type, including detailed examples.

+ +

datetime-local

+ +

<input type="datetime-local"> creates a widget to display and pick a date with time with no specific time zone information.

+ +
<input type="datetime-local" name="datetime" id="datetime">
+ +

month

+ +

<input type="month"> creates a widget to display and pick a month with a year.

+ +
<input type="month" name="month" id="month">
+ +

time

+ +

<input type="time"> creates a widget to display and pick a time value. While time may display in 12-hour format, the value returned is in 24-hour format.

+ +
<input type="time" name="time" id="time">
+ +

week

+ +

<input type="week"> creates a widget to display and pick a week number and its year.

+ +

Weeks start on Monday and run to Sunday. Additionally, the first week 1 of each year contains the first Thursday of that year—which may not include the first day of the year, or may include the last few days of the previous year.

+ +
<input type="week" name="week" id="week">
+ +

Constraining date/time values

+ +

All date and time controls can be constrained using the min and max attributes, with further constraining possible via the step attribute (whose value varies according to input type).

+ +
<label for="myDate">When are you available this summer?</label>
+<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" step="7" id="myDate">
+ +

Browser support for date/time inputs

+ +

You should be warned that the date and time widgets don't have the best browser support. At the moment, Chrome, Edge, and Opera support them well, but there is no support in Internet Explorer, Safari has some mobile support (but no desktop support), and Firefox supports time and date only.

+ +

The reference pages linked to above provide suggestions on how to program fallbacks for non-supporting browsers; another option is to consider using a JavaScript library to provide a date picker. Most modern frameworks have good components available to provide this functionality, and there are standalone libraries available to (see Top date picker javascript plugins and libraries for some suggestions).

+ +

Color picker control

+ +

Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc.

+ +

A color control can be created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value color:

+ +
<input type="color" name="color" id="color">
+ +

When supported, clicking a color control will tend to display the operating system's default color picking functionality for you to actually make your choice with. The following screenshot taken on Firefox for macOS provides an example:

+ +

firefox for android email keyboard, with ampersand displayed by default.

+ +

And here is a live example for you to try out:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/color-example/index.html", '100%', 200)}}

+ +

The value returned is always a lowercase 6-value hexidecimal color.

+ +
+

Note: color inputs are not supported in Internet Explorer.

+
+ +

Summary

+ +

That brings us to the end of our tour of the HTML5 form input types. There are a few other control types that cannot be easily grouped together due to their very specific behaviors, but which are still essential to know about. We cover those in the next article.

+ +

{{PreviousMenuNext("Learn/Forms/Basic_native_form_controls", "Learn/Forms/Other_form_controls", "Learn/Forms")}}

+ +

In this module

+ + + +

Advanced Topics

+ + diff --git a/files/es/learn/forms/index.html b/files/es/learn/forms/index.html new file mode 100644 index 0000000000..a0e77ec827 --- /dev/null +++ b/files/es/learn/forms/index.html @@ -0,0 +1,118 @@ +--- +title: Formularios en HTML5 +slug: HTML/HTML5/Forms_in_HTML5 +tags: + - Forms + - HTML + - 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 programar y diseñar que se necesitaba en HTML4. Las funcionalidades de los formularios en HTML5 brindan una experiencia mejor para los usuarios al permitir que los formularios tengan un comportamiento más consistente entre diferentes sitios web y al darle una devolución inmediata acerca de la información ingresada. También proveen esta experiencia a los usuarios que han deshabilitado javascript en sus navegadores.

+ +

Este documento describe los elementos nuevos o que han cambiado 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.

+ +
<label>Superhéroe favorito</label>
+<input list="superheroes" name="list" />
+<datalist id="superheroes">
+    <option label="Iron Man" value="Iron Man">
+    <option label="The Hulk" value="The Hulk">
+</datalist>
+
+ +

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 IDs de otros elementos.

+ +

El atributo placeholder

+ +

El atributo {{ htmlattrxref("placeholder", "input") }} en elementos {{ HTMLElement("input") }} y {{ HTMLElement("textarea") }} provee una ayuda a los usuarios acerca de qué debe ser ingresado en el campo. El texto introducido en el placeholder no debe contener «enters» o saltos de línea.

+ +
<input type="email" id="user-email" placeholder="e.g. john.doe@mozilla.com" required/>
+
+ +

El atributo autofocus

+ +

El atributo autofocus 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 de tipo boolean. 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 ser aplicado a un elemento <input> si el atributo {{ htmlattrxref("type", "input") }} hidden está seleccionado (esto quiere decir, no se puede enfocar automáticamente un elemento escondido).

+ +
<input type="text" id="user" autofocus />
+
+ +

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

+ +

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

+ + diff --git a/files/es/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/es/learn/forms/property_compatibility_table_for_form_controls/index.html new file mode 100644 index 0000000000..115b5580fe --- /dev/null +++ b/files/es/learn/forms/property_compatibility_table_for_form_controls/index.html @@ -0,0 +1,2003 @@ +--- +title: Tabla de compatibilidad de propiedades CSS para controles de formulario +slug: Learn/HTML/Forms/Property_compatibility_table_for_form_controls +translation_of: Learn/Forms/Property_compatibility_table_for_form_controls +--- +
{{learnsidebar}}
+ +

Las siguientes tablas de compatibilidad intentan resumir el estado del soporte de CSS para formularios HTML. Debido a la complejidad de los formularios CSS y HTML, estas tablas no se pueden considerar una referencia perfecta. Sin embargo, le darán una buena idea de lo que se puede y no se puede hacer, lo que le ayudará al aprender a hacer las cosas.

+ +

Cómo leer las tablas

+ +

Valores

+ +

Para cada propiedad, hay cuatro valores posibles:

+ +
+
Si
+
Existe un soporte razonablemente consistente para la propiedad en todos los navegadores. Es posible que aún enfrente efectos secundarios extraños en ciertos casos extremos.
+
Parcial
+
Si bien la propiedad funciona, con frecuencia puede enfrentar efectos secundarios extraños o inconsistencias. Probablemente debería evitar estas propiedades a menos que primero domine esos efectos secundarios.
+
No
+
La propiedad simplemente no funciona o es tan inconsistente que no es confiable.
+
n.a.
+
La propiedad no tiene ningún significado para este tipo de widget.
+
+ +

Representación

+ +

Para cada propiedad hay dos representaciones posibles:

+ +
+
N (Normal)
+
Indica que la propiedad se aplica tal cual
+
T (Retocada)
+
Indica que la propiedad se aplica con la regla adicional como se muestra a continuación:
+
+ +
* {
+  /* Turn off the native look and feel */
+  -webkit-appearance: none;
+  appearance: none;
+
+/* for Internet Explorer */
+  background: none;
+}
+ +

Tablas de compatibilidad

+ +

Comportamientos globales

+ +

Algunos comportamientos son comunes a muchos navegadores a nivel global::

+ +
+
{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}
+
El uso de una de estas propiedades puede desactivar parcial o totalmente la apariencia nativa de los widgets en algunos navegadores. Tenga cuidado cuando los use.
+
{{cssxref("line-height")}}
+
Esta propiedad se admite de forma inconsistente en todos los navegadores y debe evitarla.
+
{{cssxref("text-decoration")}}
+
Esta propiedad no es compatible con el navegador Opera en widgets de formulario.
+
{{cssxref("text-overflow")}}
+
Opera, Safari, y IE9 no admiten esta propiedad en widgets de formulario.
+
{{cssxref("text-shadow")}}
+
Opera no admite {{cssxref("text-shadow")}} en widgets de formularios e IE9 no lo admite en absoluto.
+
+ +

Text fields

+ +

See the {{htmlelement("input/text", "text")}}, {{htmlelement("input/search", "search")}}, and {{htmlelement("input/password", "password")}} input types.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}Partial[1][2]Yes +
    +
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields.
    2. +
  2. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    3. +
+
{{cssxref("border")}}Partial[1][2]Yes +
    +
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields.
    2. +
  2. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    3. +
+
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}Partial[1][2]Yes +
    +
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields.
    2. +
  2. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    3. +
+
Text and font
{{cssxref("color")}}[1]YesYes +
    +
  1. If the {{cssxref("border-color")}} property is not set, some WebKit based browsers will apply the {{cssxref("color")}} property to the border as well as the font on {{htmlelement("textarea")}}s.
    2. +
+
{{cssxref("font")}}YesYesSee the note about {{cssxref("line-height")}}
{{cssxref("letter-spacing")}}YesYes
{{cssxref("text-align")}}YesYes
{{cssxref("text-decoration")}}PartialPartialSee the note about Opera
{{cssxref("text-indent")}}Partial[1]Partial[1] +
    +
  1. IE9 supports this property only on {{htmlelement("textarea")}}s, whereas Opera only supports it on single line text fields.
    2. +
+
{{cssxref("text-overflow")}}PartialPartial
{{cssxref("text-shadow")}}PartialPartial
{{cssxref("text-transform")}}YesYes
Border and background
{{cssxref("background")}}Partial[1]Yes +
    +
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    2. +
+
{{cssxref("border-radius")}}Partial[1][2]Yes +
    +
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    2. +
  2. On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.
    3. +
+
{{cssxref("box-shadow")}}NoPartial[1] +
    +
  1. IE9 does not support this property.
    2. +
+
+ +

Buttons

+ +

See the {{htmlelement("input/button", "button")}},  {{htmlelement("input/submit", "submit")}}, and {{htmlelement("input/reset", "reset")}} input types and the {{htmlelement("button")}} element.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}Partial[1]Yes +
    +
  1. This property is not applied on WebKit based browsers on Mac OSX or iOS.
    2. +
+
{{cssxref("border")}}PartialYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}Partial[1]Yes +
    +
  1. This property is not applied on WebKit based browsers on Mac OSX or iOS.
    2. +
+
Text and font
{{cssxref("color")}}YesYes
{{cssxref("font")}}YesYesSee the note about {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}YesYes
{{cssxref("text-align")}}NoNo
{{cssxref("text-decoration")}}PartialYes
{{cssxref("text-indent")}}YesYes
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}PartialPartial
{{cssxref("text-transform")}}YesYes
Border and background
{{cssxref("background")}}YesYes
{{cssxref("border-radius")}}Yes[1]Yes[1] +
    +
  1. On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.
    2. +
+
{{cssxref("box-shadow")}}NoPartial[1] +
    +
  1. IE9 does not support this property.
    2. +
+
+ +

Number

+ +

See the  {{htmlelement("input/number", "number")}} input type. There is no standard way to change the style of spinners used to change the value of the field, with the spinners on Safari being outside the field.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}Partial[1]Partial[1] +
    +
  1. On Opera, the spinners are zoomed in, which can hide the content of the field.
    2. +
+
{{cssxref("border")}}YesYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}Partial[1]Partial[1] +
    +
  1. On Opera, the spinners are zoomed in, which can hide the content of the field.
    2. +
+
Text and font
{{cssxref("color")}}YesYes
{{cssxref("font")}}YesYesSee the note about {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}YesYes
{{cssxref("text-align")}}YesYes
{{cssxref("text-decoration")}}PartialPartial
{{cssxref("text-indent")}}YesYes
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}PartialPartial
{{cssxref("text-transform")}}N.A.N.A.
Border and background
{{cssxref("background")}}NoNo +

Supported but there is too much inconsistency between browsers to be reliable.

+
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
+ +

Check boxes and radio buttons

+ +

See the {{htmlelement("input/checkbox", "checkbox")}} and {{htmlelement("input/radio", "radio")}} input types.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}No[1]No[1] +
    +
  1. Some browsers add extra margins and others stretch the widget.
    2. +
+
{{cssxref("height")}}No[1]No[1] +
    +
  1. Some browsers add extra margins and others stretch the widget.
    2. +
+
{{cssxref("border")}}NoNo
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}NoNo
Text and font
{{cssxref("color")}}N.A.N.A.
{{cssxref("font")}}N.A.N.A.
{{cssxref("letter-spacing")}}N.A.N.A.
{{cssxref("text-align")}}N.A.N.A.
{{cssxref("text-decoration")}}N.A.N.A.
{{cssxref("text-indent")}}N.A.N.A.
{{cssxref("text-overflow")}}N.A.N.A.
{{cssxref("text-shadow")}}N.A.N.A.
{{cssxref("text-transform")}}N.A.N.A.
Border and background
{{cssxref("background")}}NoNo
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
+ +

Select boxes (single line)

+ +

See the {{htmlelement("select")}},  {{htmlelement("optgroup")}} and  {{htmlelement("option")}} elements.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}Partial[1]Partial[1] +
    +
  1. This property is okay on the {{htmlelement("select")}} element, but it cannot be the case on the {{htmlelement("option")}} or {{htmlelement("optgroup")}} elements.
    2. +
+
{{cssxref("height")}}NoYes
{{cssxref("border")}}PartialYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}No[1]Partial[2] +
    +
  1. The property is applied, but in an inconsistent way between browsers on Mac OSX.
    2. +
  2. The property is well applied on the {{htmlelement("select")}} element, but is inconsistently handled on {{htmlelement("option")}} and {{htmlelement("optgroup")}} elements.
    3. +
+
Text and font
{{cssxref("color")}}Partial[1]Partial[1] +
    +
  1. On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on {{htmlelement("option")}} and {{htmlelement("optgroup")}} elements.
    2. +
+
{{cssxref("font")}}Partial[1]Partial[1] +
    +
  1. On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on {{htmlelement("option")}} and {{htmlelement("optgroup")}} elements.
    2. +
+
{{cssxref("letter-spacing")}}Partial[1]Partial[1] +
    +
  1. IE9 does not support this property on {{htmlelement("select")}}, {{htmlelement("option")}}, and {{htmlelement("optgroup")}} elements; WebKit based browsers on Mac OSX do not support this property on {{htmlelement("option")}} and {{htmlelement("optgroup")}} elements.
    2. +
+
{{cssxref("text-align")}}No[1]No[1] +
    +
  1. IE9 on Windows 7 and WebKit based browsers on Mac OSX do not support this property on this widget.
    2. +
+
{{cssxref("text-decoration")}}Partial[1]Partial[1] +
    +
  1. Only Firefox provides full support for this property. Opera does not support this property at all and other browsers only support it on the {{htmlelement("select")}} element.
    2. +
+
{{cssxref("text-indent")}}Partial[1][2]Partial[1][2] +
    +
  1. Most of the browsers only support this property on the {{htmlelement("select")}} element.
    2. +
  2. IE9 does not support this property.
    3. +
+
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}Partial[1][2]Partial[1][2] +
    +
  1. Most of the browsers only support this property on the {{htmlelement("select")}} element.
    2. +
  2. IE9 does not support this property.
    3. +
+
{{cssxref("text-transform")}}Partial[1]Partial[1] +
    +
  1. Most of the browsers only support this property on the {{htmlelement("select")}} element.
    2. +
+
Border and background
{{cssxref("background")}}Partial[1]Partial[1] +
    +
  1. Most of the browsers only support this property on the {{htmlelement("select")}} element.
    2. +
+
{{cssxref("border-radius")}}Partial[1]Partial[1]
{{cssxref("box-shadow")}}NoPartial[1]
+ +

Note Firefox does not provide any way to change the down arrow on the {{htmlelement("select")}} element.

+ +

Select boxes (multiline)

+ +

See the {{htmlelement("select")}}, {{htmlelement("optgroup")}} and  {{htmlelement("option")}} elements and the size attribute.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}YesYes
{{cssxref("border")}}YesYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}Partial[1]Partial[1] +
    +
  1. Opera does not support {{cssxref("padding-top")}} and {{cssxref("padding-bottom")}} on the {{htmlelement("select")}} element.
    2. +
+
Text and font
{{cssxref("color")}}YesYes
{{cssxref("font")}}YesYesSee the note about {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}Partial[1]Partial[1] +
    +
  1. IE9 does not support this property on {{htmlelement("select")}}, {{htmlelement("option")}}, and {{htmlelement("optgroup")}} elements; WebKit based browsers on Mac OSX do not support this property on {{htmlelement("option")}} and {{htmlelement("optgroup")}} elements.
    2. +
+
{{cssxref("text-align")}}No[1]No[1] +
    +
  1. IE9 on Windows 7 and WebKit based browser on Mac OSX do not support this property on this widget.
    2. +
+
{{cssxref("text-decoration")}}No[1]No[1] +
    +
  1. Only supported by Firefox and IE9+.
    2. +
+
{{cssxref("text-indent")}}NoNo
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}NoNo
{{cssxref("text-transform")}}Partial[1]Partial[1] +
    +
  1. Most of the browsers only support this property on the {{htmlelement("select")}} element.
    2. +
+
Border and background
{{cssxref("background")}}YesYes
{{cssxref("border-radius")}}Yes[1]Yes[1] +
    +
  1. On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.
    2. +
+
{{cssxref("box-shadow")}}NoPartial[1] +
    +
  1. IE9 does not support this property.
    2. +
+
+ +

Datalist

+ +

See the {{htmlelement("datalist")}} and {{htmlelement("input")}} elements and the list attribute.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}NoNo
{{cssxref("height")}}NoNo
{{cssxref("border")}}NoNo
{{cssxref("margin")}}NoNo
{{cssxref("padding")}}NoNo
Text and font
{{cssxref("color")}}NoNo
{{cssxref("font")}}NoNo
{{cssxref("letter-spacing")}}NoNo
{{cssxref("text-align")}}NoNo
{{cssxref("text-decoration")}}NoNo
{{cssxref("text-indent")}}NoNo
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}NoNo
{{cssxref("text-transform")}}NoNo
Border and background
{{cssxref("background")}}NoNo
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
+ +

File picker

+ +

See the {{htmlelement("input/file", "file")}} input type.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}NoNo
{{cssxref("height")}}NoNo
{{cssxref("border")}}NoNo
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}NoNo
Text and font
{{cssxref("color")}}YesYes
{{cssxref("font")}}No[1]No[1] +
    +
  1. Supported, but there is too much inconsistency between browsers to be reliable.
    2. +
+
{{cssxref("letter-spacing")}}Partial[1]Partial[1] +
    +
  1. Many browsers apply this property to the select button.
    2. +
+
{{cssxref("text-align")}}NoNo
{{cssxref("text-decoration")}}NoNo
{{cssxref("text-indent")}}Partial[1]Partial[1] +
    +
  1. It acts more or less like an extra left margin outside the widget.
    2. +
+
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}NoNo
{{cssxref("text-transform")}}NoNo
Border and background
{{cssxref("background")}}No[1]No[1] +
    +
  1. Supported, but there is too much inconsistency between browsers to be reliable.
    2. +
+
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoPartial[1] +
    +
  1. IE9 does not support this property.
    2. +
+
+ +

Date pickers

+ +

See the {{htmlelement("input/date", "date")}} and {{htmlelement("input/time", "time")}} input types. Many properties are supported, but there is too much inconstency between browsers to be reliable.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}NoNo
{{cssxref("height")}}NoNo
{{cssxref("border")}}NoNo
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}NoNo
Text and font
{{cssxref("color")}}NoNo
{{cssxref("font")}}NoNo
{{cssxref("letter-spacing")}}NoNo
{{cssxref("text-align")}}NoNo
{{cssxref("text-decoration")}}NoNo
{{cssxref("text-indent")}}NoNo
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}NoNo
{{cssxref("text-transform")}}NoNo
Border and background
{{cssxref("background")}}NoNo
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
+ +

Color pickers

+ +

See the {{htmlelement("input/color", "color")}} input type:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}No[1]Yes +
    +
  1. Opera handles this like a select widget with the same restriction.
    2. +
+
{{cssxref("border")}}YesYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}No[1]Yes +
    +
  1. Opera handles this like a select widget with the same restriction.
    2. +
+
Text and font
{{cssxref("color")}}N.A.N.A.
{{cssxref("font")}}N.A.N.A.
{{cssxref("letter-spacing")}}N.A.N.A.
{{cssxref("text-align")}}N.A.N.A.
{{cssxref("text-decoration")}}N.A.N.A.
{{cssxref("text-indent")}}N.A.N.A.
{{cssxref("text-overflow")}}N.A.N.A.
{{cssxref("text-shadow")}}N.A.N.A.
{{cssxref("text-transform")}}N.A.N.A.
Border and background
{{cssxref("background")}}No[1]No[1] +
    +
  1. Supported, but there is too much inconsistency between browsers to be reliable.
    2. +
+
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
+ +

Meters and progress

+ +

See the {{htmlelement("meter")}} and {{htmlelement("progress")}} elements:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}YesYes
{{cssxref("border")}}PartialYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}YesPartial[1] +
    +
  1. Chrome hides the {{htmlelement("progress")}} and {{htmlelement("meter")}} element when the {{cssxref("padding")}} property is applied on a tweaked element.
    2. +
+
Text and font
{{cssxref("color")}}N.A.N.A.
{{cssxref("font")}}N.A.N.A.
{{cssxref("letter-spacing")}}N.A.N.A.
{{cssxref("text-align")}}N.A.N.A.
{{cssxref("text-decoration")}}N.A.N.A.
{{cssxref("text-indent")}}N.A.N.A.
{{cssxref("text-overflow")}}N.A.N.A.
{{cssxref("text-shadow")}}N.A.N.A.
{{cssxref("text-transform")}}N.A.N.A.
Border and background
{{cssxref("background")}}No[1]No[1] +
    +
  1. Supported, but there is too much inconsistency between browsers to be reliable.
    2. +
+
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
+ +

Range

+ +

See the {{htmlelement("input/range", "range")}} input type. There is no standard way to change the style of the range grip and Opera has no way to tweak the default rendering of the range widget.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}Partial[1]Partial[1] +
    +
  1. Chrome and Opera add some extra space around the widget, whereas Opera on Windows 7 stretches the range grip.
    2. +
+
{{cssxref("border")}}NoYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}Partial[1]Yes +
    +
  1. The {{cssxref("padding")}} is applied, but has no visual effect.
    2. +
+
Text and font
{{cssxref("color")}}N.A.N.A.
{{cssxref("font")}}N.A.N.A.
{{cssxref("letter-spacing")}}N.A.N.A.
{{cssxref("text-align")}}N.A.N.A.
{{cssxref("text-decoration")}}N.A.N.A.
{{cssxref("text-indent")}}N.A.N.A.
{{cssxref("text-overflow")}}N.A.N.A.
{{cssxref("text-shadow")}}N.A.N.A.
{{cssxref("text-transform")}}N.A.N.A.
Border and background
{{cssxref("background")}}No[1]No[1] +
    +
  1. Supported, but there is too much inconsistency between browsers to be reliable.
    2. +
+
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
+ +

Image buttons

+ +

See the {{htmlelement("input/image", "image")}} input type:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}YesYes
{{cssxref("border")}}YesYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}YesYes
Text and font
{{cssxref("color")}}N.A.N.A.
{{cssxref("font")}}N.A.N.A.
{{cssxref("letter-spacing")}}N.A.N.A.
{{cssxref("text-align")}}N.A.N.A.
{{cssxref("text-decoration")}}N.A.N.A.
{{cssxref("text-indent")}}N.A.N.A.
{{cssxref("text-overflow")}}N.A.N.A.
{{cssxref("text-shadow")}}N.A.N.A.
{{cssxref("text-transform")}}N.A.N.A.
Border and background
{{cssxref("background")}}YesYes
{{cssxref("border-radius")}}Partial[1]Partial[1] +
    +
  1. IE9 does not support this property.
    2. +
+
{{cssxref("box-shadow")}}Partial[1]Partial[1] +
    +
  1. IE9 does not support this property.
    2. +
+
+ +

See also

+ +

Learning path

+ + + +

Advanced Topics

+ + diff --git a/files/es/learn/forms/sending_and_retrieving_form_data/index.html b/files/es/learn/forms/sending_and_retrieving_form_data/index.html new file mode 100644 index 0000000000..d6ca2161a4 --- /dev/null +++ b/files/es/learn/forms/sending_and_retrieving_form_data/index.html @@ -0,0 +1,328 @@ +--- +title: Sending form data +slug: Learn/HTML/Forms/Sending_and_retrieving_form_data +translation_of: Learn/Forms/Sending_and_retrieving_form_data +--- +
{{LearnSidebar}} {{PreviousMenuNext("Aprende / HTML / Formularios / The_native_form_widgets", "Aprender / html / Formularios / Form_validation", "Aprender / html / Forms")}}
+ +

En este artículo se analiza lo que sucede cuando un usuario envía un formulario - ¿A dónde van los datos y cómo los manejamos cuando llegan allí? - También tenemos en cuenta algunos de los problemas de seguridad asociados con el envío de los datos del formulario.

+ + + + + + + + + + + + +
Requisitos previos:Conocimientos básicos de informática, una comprensión de HTML , y conocimientos básicos de HTTP y programación del lado del servidor .
Objetivo:Para entender lo que sucede cuando se envía los datos del formulario, incluyendo la obtención de una idea básica de cómo se procesan los datos en el servidor
+ +

¿A dónde van los datos?

+ +

Aquí vamos a discutir lo que ocurre con los datos cuando se envía un formulario.

+ +

Sobre la arquitectura cliente / servidor

+ +

La web se basa en una arquitectura cliente / servidor muy básica que se puede resumir de la siguiente manera: un cliente (normalmente un navegador Web) envía una petición a un servidor (la mayoría de las veces un servidor web como Apache , Nginx , IIS , Tomcat , etc.), utilizando el protocolo HTTP . El servidor responde a la solicitud utilizando el mismo protocolo.

+ +

Un esquema básico de la arquitectura cliente Web / servidor

+ +

En el lado del cliente, un formulario HTML no es más que una manera fácil de usar conveniente para configurar una petición HTTP para enviar datos a un servidor. Esto permite al usuario para proporcionar información a ser entregada en la petición HTTP.

+ +
+

Nota : Para tener una mejor idea de cómo funcionan las arquitecturas cliente-servidor, lea nuestra programación de páginas web del lado del servidor, módulo: primeros pasos. En el lado del cliente: Debes definir como envías los datos.

+
+ +

El elemento {{HTMLElement ( "form")}} define cómo se enviarán los datos. Todos sus atributos están diseñados para que pueda configurar la solicitud que se enviará cuando un usuario pulsa un botón de envío. Los dos atributos más importantes son {{htmlattrxref ( "acción", "forma")}} y {{htmlattrxref ( "método", "forma")}}.

+ +

El atributo {{htmlattrxref ( "acción", "forma")}}.

+ +

Este atributo define el lugar donde los datos se envian. Su valor debe ser una dirección URL válida. Si no se proporciona este atributo, los datos serán enviados a la dirección URL de la página que contiene el formulario.

+ +

En este ejemplo, los datos se envían a una dirección URL absoluta - http://foo.com:

+ +
<Acción del formulario = "http://foo.com">
+ +

Aquí, nosotros usamos una URL relativa - los datos se envían a una dirección URL diferente en el servidor:

+ +
<Acción del formulario = "/ somewhere_else">
+ +

Cuando se especifica sin atributos, como abajo, el {{HTMLElement ( "form")}} los datos se envían a la misma página en que la "forma" está presente :

+ +
<Form>
+ +

Muchas páginas más antiguas utilizan la siguiente notación para indicar que los datos deben ser enviados a la misma página que contiene el formulario; Esto fue necesario porque hasta HTML5, el atributo {{htmlattrxref ( "acción", "form")}} fue requerido . Esto ya no es necesario.

+ +
<Form action = "#">
+ +
+

Nota: Es posible especificar una dirección URL que utiliza el protocolo HTTPS (HTTP seguro). Al hacer esto, los datos se cifran junto con el resto de la solicitud, incluso si el propio formulario está alojado en una página insegura se accede a través de HTTPS. Por otro lado, si el formulario está alojado en una página segura, pero se especifica una dirección URL HTTP insegura con el atributo {{htmlattrxref ( "acción", "form")}} , todos los navegadores mostrarán una advertencia de seguridad para el usuario cada vez  que intenten enviar datos, ya que estos no se pueden cifrar.

+
+ +

El atributo {{htmlattrxref ( "método", "form")}}

+ +

Este atributo define cómo se envían los datos. El protocolo HTTP proporciona varias formas de realizar una solicitud; Los datos del formulario HTML se pueden transmitir a través de un número de diferentes queridos, los más comunes de los cuales son el método GET y el método POST.

+ +

Para entender la diferencia entre estos dos métodos, vamos a dar un paso atrás y examinar cómo funciona HTTP. Cada vez que desee llegar a un recurso en la Web, el navegador envía una petición a una URL. Una petición HTTP consta de dos partes: un encabezado que contiene un conjunto de metadatos mundial sobre las capacidades del navegador, y un cuerpo que puede contener la información necesaria paraque el servidor pueda procesar la petición específica.

+ +
El método GET
+ +

El método GET es  utilizado por el navegador para pedir al servidor que se envíe de vuelta un recurso dado: "Hey servidor, quiero conseguir este recurso." En este caso, el navegador envía un cuerpo vacío. Debido a que el cuerpo está vacío, si un formulario se envía utilizando este método, los datos enviados al servidor se anexan a la URL.

+ +

Considere la siguiente forma:

+ +
<form action="http://foo.com" method="get">
+  <div>
+    <label for="decir"> ¿Qué saludo quiere decir? </label>
+    <input name="decir" id="decir" value="Hola">
+  </div>
+  <div>
+    <label for="para"> ¿A quién se lo quiere decir? </label>
+    <input name="para" value="mamá">
+  </div>
+  <div>
+    <button> Botón enviar mis saludos </ button>
+  </div>
+</form>
+ +

Dado que el método GETha conseguido el recurso, verá en la URL lo siguiente en la barra de direcciones del navegador www.foo.com/?say=Hi&to=Mom  cuando se envía el formulario.

+ +

Los datos se añaden a la URL como una serie de pares de nombre / valor. Después que la dirección web URL ha terminado, se incluye un signo de interrogación ( ?) seguido de los pares de nombre / valor, cada uno separado por un signo ( &). En este caso estamos pasando dos piezas de datos en el servidor:

+ + + +

La solicitud HTTP se ve así:

+ +
GET /? = Decir Hola & a = mamá HTTP / 1.1
+Anfitrión: foo.com
+ +
+

Nota : Puede encontrar este ejemplo en GitHub - ver llegar-method.html ( verlo en directo también ).

+
+ +
El método POST
+ +

El POSTmétodo es un poco diferente. Es el método que el navegador utiliza para comunicarse con el servidor cuando se pide una respuesta que tenga en cuenta los datos proporcionados en el cuerpo de la petición HTTP: "Hey servidor, echa un vistazo a estos datos y envíame de vuelta un resultado apropiado." Si un formulario se envía utilizando este método, los datos se anexan al cuerpo de la petición HTTP.

+ +

Veamos un ejemplo - se trata de algo similar a como se vió en el método GETdel apartado anterior, pero con el {{htmlattrxref ( "método", "form")}} atributo establecido post.

+ +
<Form action = "http://foo.com" method = "post">
+  <Div>
+    <Label for = "dice"> Lo saludo qué quiere decir? </ Label>
+    <Input name = "decir" id = "decir" value = "Hola">
+  </ Div>
+  <Div>
+    <Label for = "para"> ¿Quién usted quiere decir que a? </ Label>
+    <Input name = "a" value = "mamá">
+  </ Div>
+  <Div>
+    <> Botón enviar mis saludos </ botón>
+  </ Div>
+</ Form>
+ +

Cuando el formulario se envía mediante el método POST, no se obtienen los datos adjuntos en la dirección URL, y la solicitud HTTP se parece a esto y los datos son incluidos en el cuerpo de la petición en su lugar:

+ +
POST / HTTP/1.1
+Anfitrión: foo.com
+Content-Type: application / x-www-form-urlencoded
+Content-Length: 13
+
+decir = Hi & a = mamá
+ +

La cabecera Content-Length indica el tamaño del cuerpo, y la cabecera Content-Type indica el tipo de recurso que se envía al servidor. Discutiremos estas cabeceras más adelante.

+ +
+

Nota : Puede encontrar este ejemplo en GitHub - ver post-method.html ( verlo en directo también ).

+
+ +

Visualización de peticiones HTTP

+ +

Las peticiones HTTP nunca se muestran al usuario (si quieres verlos, es necesario utilizar herramientas como el Monitor de red Firefox o las herramientas de desarrollo de Chrome ). A modo de ejemplo, los datos del formulario se muestran a continuación en la pestaña de Chrome red:

+ +

+ +

Lo único que se muestra al usuario es la dirección URL llamada. Como mencionamos anteriormente, con una peticiónGET del usuario,se verán los datos en su barra de direcciones, pero con una petición POST no será de esta manera. Esto puede ser muy importante por dos razones:

+ +
    +
  1. Si necesita enviar una contraseña (o cualquier otra pieza sensible de los datos), nunca utilice el métodoGET o se arriesga a mostrar en la barra de direcciones, lo que sería muy inseguro.
    2. +
  2. Si necesita enviar una gran cantidad de datos, el método POSt es preferible debido a que algunos navegadores limitan los tamaños de las direcciones URL. Además, muchos servidores limitan la longitud de las URL que aceptan.
    3. +
+ +

En el lado  Servidor: la recuperación de los datos

+ +

Sea cual sea el método HTTP que elija, el servidor recibe una cadena que será analizada con el fin de obtener los datos como una lista de pares clave / valor. La forma de acceder a esta lista depende de la plataforma de desarrollo que use y de las estructuras específicas que pueda estar usando con él. La tecnología se utiliza también determina cómo se manejan claves duplicadas; A menudo,se da prioridad al valor recibido más recientemente para una clave dada .

+ +

Ejemplo: PHP Raw

+ +

PHP ofrece algunos objetos globales para acceder a los datos. Suponiendo que usted ha utilizado el métodoPOST, el siguiente ejemplo sólo toma los datos y lo muestra al usuario. Por supuesto, lo que se hace con los datos depende de usted. Es posible visualizarlos, almacenarlos en una base de datos, enviarlos por correo electrónico, o procesarlos de alguna otra manera.

+ +
<? Php
+  // La variable global $ _POST que permite acceder a los datos enviados con el método POST por su nombre
+  // Para acceder a los datos enviados con el método GET, puede usar $ _GET
+  $ = Decir htmlspecialchars ($ _POST [ 'decir']);
+  $ A = htmlspecialchars ($ _POST [ 'a']);
+
+  echo $ digamos, '', $ a;
+?>
+ +

Este ejemplo muestra una página con los datos que enviamos. Esto se puede ver en acción en nuestro archivo ejemplo php-example.html - que contiene un ejemplo similar en forma como el que hemos visto antes, con un methodcon parámetro posty un action con parámetro php-example.php Cuando se envía, envía los datos del formulario al script php-ejemplo.php , que contiene el código de PHP que se ha visto en el bloque anterior. Cuando se ejecuta este código, la salida en el navegador es Hi Mom.

+ +

+ +
+

Nota : Este ejemplo no funcionará cuando se carga en un navegador localmente - los navegadores no pueden interpretar  código PHP, por lo que cuando se envía el formulario en el navegador sólo  se puede ofrecer la descarga del archivo PHP para usted. Para conseguir que funcione, es necesario ejecutar el ejemplo a través de un servidor PHP de algún tipo. Buenas opciones para probar PHP locales son MAMP (Mac y Windows) y AMPPS (Mac, Windows, Linux).

+
+ +

Ejemplo: Python

+ +

Este ejemplo muestra como se puede utilizar Python para hacer la misma cosa - mostrar los datos presentados en una página web. Se utiliza el framework Flask para la prestación de las plantillas, el manejo de la presentación de datos de formulario, etc (ver python-example.py ).

+ +
from flask import Flask, render_template, request
+app = Flask(__name__)
+
+@app.route('/', methods=['GET', 'POST'])
+def form():
+    return render_template('form.html')
+
+@app.route('/hello', methods=['GET', 'POST'])
+def hello():
+    return render_template('greeting.html', say=request.form['say'], to=request.form['to'])
+
+if __name__ == "__main__":
+    app.run()
+ +

Las dos plantillas de referencia en el código anterior son los siguientes:

+ + + +
+

Nota : Una vez más, este código no funcionará si sólo intenta cargarlo en un navegador directamente. Python funciona un poco diferente a PHP - Para ejecutar este código local que necesita para instalar Python / PIP , a continuación, instalar el frasco utilizando pip3 install flask. En este punto, usted debe ser capaz de ejecutar el ejemplo utilizando python3 python-example.py, a continuación, deberá navegar a localhost:5000en su barra de direcciones.

+
+ +

Otros lenguajes y frameworks

+ +

Hay muchas otras tecnologías del lado del servidor que puede utilizar para el manejo de formularios, incluyendo Perl , Java , .Net , Rubí , etc. Sólo tiene que elegir el que más le guste. Dicho esto, vale la pena señalar que es muy raro de usar estas tecnologías directamente porque esto puede ser complicado. Es más común el uso de uno de los muchos marcos de trabajo para un manejo más fácil del código, tales como:

+ + + +

Vale la pena señalar que incluso el uso de estos marcos, trabajar con formularios no es necesariamente fácil . Pero es mucho más fácil que tratar de escribir toda la funcionalidad  a partir de cero, además, le ahorrará mucho tiempo.

+ +
+

Nota : Está más allá del alcance de este artículo para enseñarle cualquier lenguaje del lado del servidor o marcos de trabajo. Los enlaces de arriba le dará un poco de ayuda,en caso de que desee aprender.

+
+ +

Un caso especial: el envío de archivos

+ +

El envío de archivos con formularios HTML es un caso especial. Los archivos son datos binarios - o considerados como tal - mientras que todos los demás datos son datos de texto. Debido a que HTTP es un protocolo de texto, existen requisitos especiales para el manejo de datos binarios.

+ +

El {{htmlattrxref ( "enctype", "form")}} atributo

+ +

Este atributo le permite especificar el valor de la cabecera Content-Type HTTP incluido en la solicitud que se genera cuando se envía el formulario. Esta cabecera es muy importante porque le dice al servidor qué tipo de datos se está enviando. Por defecto, su valor es application/x-www-form-urlencoded. En términos humanos, esto significa: "Estos son datos de formulario que han sido codificados dentro de los parámetros de la URL."

+ +

Si desea enviar archivos, es necesario tomar tres pasos adicionales:

+ + + +

Por ejemplo:

+ +
<Form method = "post" enctype = "multipart / form-data">
+  <Div>
+    <Label for = "archivo"> ​​Elija un archivo </ label>
+    <Input type = "file" id = "file" name = "myFile">
+  </ Div>
+  <Div>
+    <> Botón Enviar el archivo </ botón>
+  </ Div>
+</ Form>
+ +
+

Nota: Algunos navegadores son compatibles con la {{htmlattrxref ( "múltiple", "input")}} atributo en el elemento {{HTMLElement ( "input")}}, lo que permite elegir más de un archivo  para subir con un único elemento <input> . Cómo el servidor gestiona los archivos realmente depende de la tecnología utilizada en el servidor. Como se mencionó anteriormente, el uso de un marco le hará la vida mucho más fácil.

+
+ +
+

Advertencia: Muchos servidores están configurados con un límite de tamaño para los archivos y las peticiones HTTP con el fin de prevenir el abuso. Es importante comprobar este límite con el administrador del servidor antes de enviar un archivo.

+
+ +

Precauciones de seguridad comunes

+ +

Cada vez que envíe datos a un servidor, debe tener en cuenta la seguridad de sus formularios HTML que son con mucho, los vectores de ataque más comunes (en lugares donde ocurren los ataques contra servidores). Los problemas nunca vienen de los formulariosHTML mismos - sino que proceden de cómo el servidor maneja los datos.

+ +

Dependiendo de lo que estés haciendo, hay algunos problemas de seguridad muy conocidos con los que te enfrentarás:

+ +

XSS y CSRF

+ +

Cross-Site Scripting (XSS) y Cross-Site Request Falsification (CSRF) son tipos comunes de ataques que se producen cuando se muestran los datos enviados por un usuario y que son devueltos a otro usuario para otro uso.

+ +

XSS permite a los atacantes inyectar secuencias de comandos del lado del cliente en páginas Web visitadas por otros usuarios. Una vulnerabilidad de secuencias de comandos entre sitios, puede ser utilizada por los atacantes para eludir los controles de acceso, como la política del mismo origen . El efecto de estos ataques pueden ir desde una pequeña molestia a un riesgo de seguridad.

+ +

Los ataques CSRF son similares a los ataques XSS porque comienzan de la misma manera - mediante la inyección de comandos de cliente en páginas Web - pero su objetivo es diferente. Los atacantes CSRF tratan de escalar privilegios  de un usuario de mayores privilegios (por ejemplo, un administrador de sitio) para realizar una acción que no deberían ser capaces de hacer (por ejemplo, el envío de datos a un usuario no fiable).

+ +

Los ataques XSS explotan la confianza depositada a un usuario de un sitio web, mientras que los ataques CSRF abusan de la confianza que un sitio web ofrece para sus usuarios.

+ +

Para evitar estos ataques, siempre se deben comprobar los datos que un usuario envía a su servidor y (si es necesario mostrarlos) trate de no mostrar el contenido HTML provisto por el usuario. En su lugar, se deben procesar los datos proporcionados por el usuario para no mostrarlos al pie de la letra. Casi todos los marcos de trabajo (frameworks) en el mercado hoy implementan un filtro mínimo que eliminan el código HTML {{HTMLElement ( "script")}}, {{HTMLElement ( "iframe")}} y {{HTMLElement ( "objeto")}} si fuesen enviados por cualquier usuario. Esto ayuda a mitigar el riesgo, pero no necesariamente lo erradica.

+ +

Inyección SQL

+ +

La inyección de SQL es un tipo de ataque que intenta realizar acciones en una base de datos utilizada por el sitio web de destino. Esto normalmente implica el envío de una petición SQL con la esperanza de que el servidor la ejecutará (por lo general cuando el servidor de aplicaciones intenta almacenar los datos enviados por un usuario). Esto es en realidad uno de los principales vectores de ataque contra los sitios web  .

+ +

Las consecuencias pueden ser terribles, que van desde la pérdida de datos o hasta que los ataques  tomen el control de la infraestructura de todo el sitio web mediante el uso de una escalada de privilegios. Esta es una amenaza muy seria y nunca debe almacenar los datos enviados por un usuario sin realizar alguna sanitización (por ejemplo, mediante el uso mysql_real_escape_string()de una infraestructura de PHP / MySQL).

+ +

Inyección de cabecera HTTP y la inyección de correo electrónico

+ +

Este tipo de ataques pueden ocurrir cuando su aplicación se basa cabeceras HTTP o mensajes de correo electrónico basado en la entrada de datos por un usuario en un formulario. Estos no dañan directamente su servidor o afectan a sus usuarios, pero son una puerta abierta a problemas más profundos tales como el secuestro de sesión o ataques de phishing.

+ +

Estos ataques son en su mayoría en silencio, y pueden volver a su servidor en un zombi .

+ +

Sea paranoico: Nunca confíe en sus usuarios

+ +

Entonces, ¿cómo se lucha contra estas amenazas? Este es un tema mucho más allá de esta guía, pero hay algunas reglas a tener en cuenta. La regla más importante es: nunca vuelva a confiar en sus usuarios, incluyáse a sí mismo; incluso un usuario de confianza podría haber sido secuestrado.

+ +

Todos los datos que vienen a su servidor deben comprobarse y ser desinfectados. Siempre. Sin excepción.

+ + + +

Debería evitar muchos o  la mayoría de estos problemas, si sigue estas tres reglas, pero siempre es una buena idea  obtener una revisión de seguridad realizada por una tercera parte competente. No asuma que usted ha visto todos los posibles problemas.

+ +
+

Nota : La seguridad del sitio web el artículo de nuestro lado del servidor tema de aprendizaje analiza las amenazas anteriores y las posibles soluciones con más detalle.

+
+ +

Conclusión

+ +

Como se puede ver, el envío de los datos del formulario es fácil, pero asegurar una aplicación puede ser complicado. Sólo recuerde que un desarrollador de aplicaciones para usuario no es el que debe definir el modelo de seguridad de los datos. Sí, como veremos, es posible realizar la validación de los datos del lado del cliente , pero el servidor no puede confiar en esta validación porque no tiene manera de saber realmente lo que  sucede en el lado del cliente.

+ +

Ver también

+ +

Si desea obtener más información sobre la seguridad de una aplicación web, se puede excavar en estos recursos:

+ + + +

{{PreviousMenuNext ( "Aprende / html / Formularios / The_native_form_widgets", "Saber / html / Formularios / Form_validation", "Aprender / html / Forms")}}

diff --git a/files/es/learn/forms/styling_web_forms/index.html b/files/es/learn/forms/styling_web_forms/index.html new file mode 100644 index 0000000000..26b4173ee8 --- /dev/null +++ b/files/es/learn/forms/styling_web_forms/index.html @@ -0,0 +1,345 @@ +--- +title: Estilizando formularios HTML +slug: Learn/HTML/Forms/Styling_HTML_forms +translation_of: Learn/Forms/Styling_web_forms +--- +

En este artículo aprenderemos como utilizar CSS con formularios HTML  para hacerlos más atractivos. Aunque parezca extraño, esto es algo que puede llegar a ser complicado. Por razones históricas y técnicas, los widgets de formulario no suelen llevarse bien con CSS. Por este motivo, muchos desarrolladores prefieren construir sus propios widgets para tener el control de su aspecto en vez de utilizar los nativos. De todas formas, con los modernos navegadores, los diseñadores web cada vez tienen  más control sobre el diseño de los elementos de formulario. Vamos a profundizar en esto.

+ +

¿Porqué es tan difícil aplicar estilos a formularios con CSS?

+ +

En los principios de la Web —allá por1995—se añadieron los controles de formulario en la 2ª especificación HTML. Debido a la complejidad de los widgets de formulario, los implementadores prefirieron dejar que el sistema operativo subyacente se encargara de su manejo y presentación.

+ +

Pocos años después,  se creó CSS y lo que era una necesidad técnica— es decir, el uso de widgets nativos para implementar controles de formulario—empezó a requerir estilizado. Y en los primeros días de CSS, el estilizado de formularios no fué una prioridad.

+ +

Por otra parte, como los usuarios estaban acostumbrados a la apariencia visual de sus plataformas respectivas, los fabricantes de navegadores fueron reacios a hacer que los controles de formularios pudieran recibir estilos.

+ +

Hoy en día, ni siquiera uno solo de los navegadores actuales implementa completamente a CSS 2.1. Afortunadamente, con el tiempo, los fabricantes de navegadores han ido mejorado su soporte a CSS para los elementos de formulario e, incluso considerando que su usabilidad tiene mala reputación, actualmente, ya se puede usar CSS para estilizar formularios HTML.

+ +

No todos los widgets se crean igual con CSS

+ +

Actualmente aun se encuentran dificultades cuando se utiliza CSS con formularios; estos problemas se pueden dividir en tres categorías.

+ +

El bueno

+ +

A algunos elementos se les puede dar estilo con pocos o ningún problema independientemente de la plataforma. Entre estos se incluyen los siguientes elementos estructurales:

+ +
    +
  1. {{HTMLElement("form")}}
    2. +
  2. {{HTMLElement("fieldset")}}
    3. +
  3. {{HTMLElement("label")}}
    4. +
  4. <output>
    5. +
+ +

Esto también incluye todos los campos de texto (tanto los de línea simple como los de línea múltiple) y los botones.

+ +
    +
+ +

El malo

+ +

Hay otros elementos a los que raramente se les puede aplicar estilos y pueden llegar a requerir  técnicas complejas y ocasionalmente necesitan conocimientos avanzados de CSS3.

+ +

Entre estos se incluyen el elemento {{HTMLElement("legend")}} ; que no puede posicionarse adecuadamente en todas las plataformas.  Los elementos checkbox y los botones de radio no permiten que se le apliquen estilos directamente;  de todas formas, gracias a CSS3 esto puede soslayarse. Al contenido de  placeholder no se le puede aplicar estilo de ninguna forma convencional; sin embargo, todos los navegadores que lo implementan  también implementan pseudo-elementos o pseudo-clases propietarias que permiten darles estilo.

+ +

Veremos como trabajar con estos casos específicos en el artículo Advanced styling for HTML forms.

+ +

El feo

+ +

En algunos elementos, simplemente no se puede utilizar CSS. Estos son todos los elementos avanzados de interface de usuario tales como los controles range, color, o date, e igualmente pasa con los widgets desplegables como select, option, optgropup y datalist. Respecto al selector de archivos, es bien sabido que no puede aplicarse estilo en absoluto. Los nuevos elementos progress y meter también caen dentro de esta categoría.

+ +

El principal problema con todos estos widgets viene de que todos ellos tienen una estructura muy compleja y CSS no es lo suficientemente expresivo para estilizar cada una de sus sutiles partes. Si lo que se quiere es personalizar estos widgets se deberá recurrir a javaScript para construir un árbol DOM que te permita acceder a ellos. Para aprender como conseguirlo mirar en el artículo How to build custom form widgets.

+ +

Estilizado básico

+ +

Aplicar estilos a elementos que son fáciles de estilizar con CSS, no debería suponer ninguna dificultad ya que básicamente se comportan como cualquier otro elemento HTML. De todas formas, el agente de usuario de estilos para cada navegador puede mostrar pequeñas inconsistencias por lo que a continuación daremos algunos trucos para ayudar a aplicar estilos más cómodamente.

+ +

Campos de búsqueda

+ +

Las cajas de búsqueda son el único tipo de campo de texto que pueden ofrecer más dificultad al aplicar estilos. En los navegadores basados en webkit (Chrome, Safari, etc.) se debe lidiar con la propiedad -webkit-. Discutiremos esta propiedad más tarde en el artículo: Advanced styling for HTML forms.

+ +

Ejemplo

+ +
<form>
+  <input type="search">
+</form>
+
+ +
input[type=search] {
+  border: 1px dotted #999;
+  border-radius: 0;
+
+  -webkit-appearance: none;
+}
+ +

This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance

+ +

En esta captura de pantalla pueden verse dos campos de búsqueda en Chrome, ambos campos tienen definido el borde como en nuestro ejemplo, pero el primero no utiliza -webkit- mientras que el segundo si lo hace con -webkit-appearance:none. Las diferencias son evidentes.

+ +

Fuentes y texto

+ +

Las fuentes y capacidades de texto de CSS  se pueden utilizar sin problemas en cualquier widget (y sí, se puede utilizar @font-face en formularios). De todas formas, el comportamiento de los navegadores no es siempre consistente. Por defecto, algunos widgets no heredan font-family ni font-size de sus antecesores. Y muchos navegadores utilizan la apariencia por defecto. Para mantener la coherencia de los formularios con el resto de elementos se deben añadir las siguientes reglas a la hoja de estilos:

+ +
button, input, select, textarea {
+  font-family : inherit;
+  font-size   : 100%;
+}
+ +

La siguiente captura de pantalla muestra estas incosistencias; a la izquierda la apariencia por defecto en Firefox sobre Mac OS X, usando las fuentes por defecto de la plataforma. A la derecha los mismos elementos aplicando nuestras reglas de armonización de fuentes.

+ +

This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization

+ +

Hay muchas controversia sobre si los formularios tienen mejor aspecto usando los estilos por defecto del sistema o usando estilos personalizados que coincidan con el resto del contenido. Como diseñador del sitio o aplicación Web esta decisión  es suya.

+ +

Modelo de cajas

+ +

Todos los campos de texto tienen soporte completo para las propiedades relacionadas con el modelo de cajas de CSS (width, height, padding, margin y border). Igual que antes, los navegadores se remiten a los estilos por defecto del sistema cuando muestran estos widgets. A cada cual te corresponde el como combinarlos dentro del resto de contenido. Si  se quieres mantener el aspecto nativo de los widgets, entonces hay que afrontar pequeñas inconsistencias de tamaño.

+ +

Esto es porque cada widget tiene sus propias reglas para el orden, margen y padding. Por lo que si quieres darle el mismo tamaño a varios widgets diferentes se debe usar la propiedad box-sizing: 

+ +
input, textarea, select, button {
+  width : 150px;
+  margin: 0;
+
+  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
+     -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
+          box-sizing: border-box;
+}
+ +

This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing.

+ +

En la captura de pantalla de arriba, la columna la izquierda es sin utilizar box-sizing, mientras que la de la derecha usa esta propiedad con el valor border-box. Obsérvese cómo esto permite asegurar que todos los elementos ocupan la misma cantidad de espacio, independientemente de las reglas por defecto de la plataforma.

+ +

Posicionado

+ +

El posicionado de formularios HTML no es generalmente  un problema; sin embargo, hay dos elementos a los que prestar una especial atención:

+ +

legend

+ +

El elemento legend no tiene problemas de estilizado a excepción de las reglas de posición. En los navegadores el elemento legend se posiciona encima del borde superior de su antecesor fieldset. No existe ninguna posibilidad de colocarlo dentro del flujo HTML más allá del borde superior. Sin embargo se puede posicionar de forma relativa o absoluta mediante la propiedad position. En cualquier caso sigue siendo parte del borde de fieldset.

+ +

Debido a que el elemento legend es muy importante por razones de accesibilidad (esto es lo que leen las tecnologías de asistencia como parte de las etiquetas de cada elemento de formulario dentro del fieldset), bastante menudo se empareja con un título que se oculta pero siendo aun accesible, de la forma siguiente:

+ +
HTML
+ +
<fieldset>
+  <legend>Hi!</legend>
+  <h1>Hello</h1>
+</fieldset>
+ +
CSS
+ +
legend {
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+ +

textarea

+ +

Por defecto, todos los navegadores consideran el elemento textarea como un inline block alineado con la línea base del texto. Esto es algo que raramente es lo que en realidad se quiere. Para convertir este elemento de un inline-block a uno tipo block, se realiza bastante fácilmente utilizando la propiedad display. Si lo que quieres es utilizarlo inline, es corriente cambiar la alineación vertical: 

+ +
textarea {
+  vertical-align: top;
+}
+ +

Ejemplo

+ +

Vamos a ver un ejemplo de como aplicar estilo a un formulario HTML. Esto nos ayudará a tener las ideas más claras. A continuación construiremos el siguiente formulario de contacto de esta postal:

+ +

This is what we want to achieve with HTML and CSS

+ +

HTML

+ +

El HTML  incluye poco más de lo que se utiliza en el primer artículo de esta guía; apenas el título y algún ID más.

+ +
<form>
+  <h1>to: Mozilla</h1>
+
+  <div id="from">
+    <label for="name">from:</label>
+    <input type="text" id="name" name="user_name">
+  </div>
+
+  <div id="reply">
+    <label for="mail">reply:</label>
+    <input type="email" id="mail" name="user_email">
+  </div>
+
+  <div id="message">
+    <label for="msg">Your message:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </div>
+
+  <div class="button">
+    <button type="submit">Send your message</button>
+  </div>
+</form>
+ +

CSS

+ +

¿Aqui es donde empieza la diversión! Antes de empezar a codificar, necesitamos tres elementos adicionales:

+ +
    +
  1. El fondo de la postal
    2. +
  2. Una fuente tipográfica: la "Secret Typewriter" de fontsquirrel.com
    3. +
  3. Una fuente manuscrita: la "Journal" fde fontsquirrel.com
    4. +
+ +

Ahora podemos repasar el código. Primero preparamos las bases definiendo las reglas  @font-face y los elementos básicos de <body> y <form> 

+ +
@font-face{
+  font-family : "handwriting";
+
+  src : url('journal.eot');
+  src : url('journal.eot?') format('eot'),
+        url('journal.woff') format('woff'),
+        url('journal.ttf') format('truetype');
+}
+
+@font-face{
+  font-family : "typewriter";
+
+  src : url('veteran_typewriter.eot');
+  src : url('veteran_typewriter.eot?') format('eot'),
+        url('veteran_typewriter.woff') format('woff'),
+        url('veteran_typewriter.ttf') format('truetype');
+}
+
+body {
+  font  : 21px sans-serif;
+
+  padding : 2em;
+  margin  : 0;
+
+  background : #222;
+}
+
+form {
+  position: relative;
+
+  width  : 740px;
+  height : 498px;
+  margin : 0 auto;
+
+  background: #FFF url(background.jpg);
+}
+ +

Ahora podemos posicionar los elementos, incluidos el título y los elementos del formulario.

+ +
h1 {
+  position : absolute;
+  left : 415px;
+  top  : 185px;
+
+  font : 1em "typewriter", sans-serif;
+}
+
+#from {
+  position: absolute;
+  left : 398px;
+  top  : 235px;
+}
+
+#reply {
+  position: absolute;
+  left : 390px;
+  top  : 285px;
+}
+
+#message {
+  position: absolute;
+  left : 20px;
+  top  : 70px;
+}
+ +

Aquí es donde empezamos a trabajar los propios elementos. Primero, nos aseguramos que los elementos  <label> reciben la fuente correcta.

+ +
label {
+  font : .8em "typewriter", sans-serif;
+}
+ +

Los campos de texto necesitan algunas reglas comunes. Dicho simplemente, le quitamos bordes y fondos y redefinimos el padding y margin.

+ +
input, textarea {
+  font    : .9em/1.5em "handwriting", sans-serif;
+
+  border  : none;
+  padding : 0 10px;
+  margin  : 0;
+  width   : 240px;
+
+  background: none;
+}
+ +

Cuando uno de estos campos recibe el foco, vamos a resaltarlo con un fondo transparente gris claro. Tome nota de que es importante añadir la propiedad  outline  para quitar el resaltado de enfoque añadido por defecto por algunos navegadores.

+ +
input:focus, textarea:focus {
+  background   : rgba(0,0,0,.1);
+  border-radius: 5px;
+  outline      : none;
+}
+ +

Ahora que nuestros campos de texto están terminados, necesitamos ajustar como se muestran los campos de simple y múltiple línea para que coincidan, ya que lo normal es que por defecto no se vean igual.

+ +

El campo de línea simple requiere de algunos trucos para que se vean bien en Internet Explorer. Internet Explorer no define la altura de los campos basándose en la altura natural de la fuente (lo cual es el comportamiento normal del resto de navegadores). Para corregir esto necesitamos añadir explícitamente la altura a los campos de la siguiente forma:

+ +
input {
+    height: 2.5em; /* for IE */
+    vertical-align: middle; /* This is optional but it makes legacy IEs look better */
+}
+ +

Los elementos <textarea> se muestran por defecto como bloques, Las dos cosas importantes aquí son las propiedades  resize y overflow. Ya que nuestro diseño es de tamaño fijo, utilizaremos la propiedad resize para impedir que el usuario pueda cambiar el tamaño de los campos multilínea. La propiedad  overflow  se utiliza para que el campo se muestre de forma más consistente a través de diversos navegadores; algunos de ellos ponen por defecto esta propiedad en auto, pero en nuestro caso, es mejor asegurarse de que todos estén en auto.

+ +
textarea {
+  display : block;
+
+  padding : 10px;
+  margin  : 10px 0 0 -10px;
+  width   : 340px;
+  height  : 360px;
+
+  resize  : none;
+  overflow: auto;
+}
+ +

El elemento <button> se acomoda muy bien a CSS; se puede hacer lo que se quiera con el, ¡incluso utilizando pseudo-elementos!

+ +
button {
+  position     : absolute;
+  left         : 440px;
+  top          : 360px;
+
+  padding      : 5px;
+
+  font         : bold .6em sans-serif;
+  border       : 2px solid #333;
+  border-radius: 5px;
+  background   : none;
+
+  cursor       : pointer;
+
+-webkit-transform: rotate(-1.5deg);
+   -moz-transform: rotate(-1.5deg);
+    -ms-transform: rotate(-1.5deg);
+     -o-transform: rotate(-1.5deg);
+        transform: rotate(-1.5deg);
+}
+
+button:after {
+  content: " >>>";
+}
+
+button:hover,
+button:focus {
+  outline   : none;
+  background: #000;
+  color   : #FFF;
+}
+ +

Y ¡listo! Sientase libre de probarlo usted mismo; como comprobará ¡esto funciona!

+ +

Conclusión

+ +

Como puede verse, mientras que queramos construir formularios solo con campos de texto y botones, es sencillo aplicarles estilos con CSS. Si desea saber más pequeños trucos de CSS que le hagan más fácil la vida al trabajar con formularios, echele un vistazo a la parte de formularios de the normalize.css project.

+ +

En el próximo artículo, veremos como manejar widgets de formulario de la categoría de "el malo" y "el feo".

diff --git a/files/es/learn/forms/test_your_skills_colon__html5_controls/index.html b/files/es/learn/forms/test_your_skills_colon__html5_controls/index.html new file mode 100644 index 0000000000..b73c8d4442 --- /dev/null +++ b/files/es/learn/forms/test_your_skills_colon__html5_controls/index.html @@ -0,0 +1,75 @@ +--- +title: 'Prueba tus habilidades: controles HTML5' +slug: 'Learn/HTML/Forms/Prueba_tus_habilidades:_controles_HTML5' +tags: + - Aprendizaje + - Evaluación + - Formulário + - HTML5 + - Principiante +translation_of: 'Learn/Forms/Test_your_skills:_HTML5_controls' +--- +
{{learnsidebar}}
+ +

El objetivo de esta prueba es evaluar si has comprendido nuestro artículo The HTML5 input types.

+ +
+

Nota: Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.
+
+ Si te atascas, pide ayuda — mira la sección Evaluación o ayuda adicional al final de esta página.

+
+ +

Controles HTML5 1

+ +

Primero exploraremos algunos de los tipos nuevos de input en HTML5. Crea las etiquetas input apropiadas para que un usuario actualice sus detalles para:

+ +
    +
  1. Email
    2. +
  2. Website
    3. +
  3. Número de teléfono
    4. +
  4. Color favorito
    5. +
+ +

Intenta actualizar el código en vivo más abajo para retrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/tasks/html5-controls/html5-controls1.html", '100%', 700)}}

+ +
+

Descarga el código inicial de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Controles HTML5 2

+ +

A continuación, queremos que implementes un control deslizante para permitir al usuario escoger el número máximo de personas para invitar a su fiesta.

+ +
    +
  1. Implemente un control deslizante básico que acompañe a la etiqueta provista.
    2. +
  2. Establezca un valor minimo de 1, uno máximo de 30 y un valor inicial de 10.
    3. +
  3. Crea un elemento de salida correspondiente para poner el valor actual del deslizador. Asígnale la clase invite-output, y asocialo semanticamente con le entrada. Si haces esto correctamente, el JavaScript incluido en la página automáticamente actualizará el valor cuando se deslice el control.
    4. +
+ +

Intenta actualizar el código en vivo más abajo para retrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/tasks/html5-controls/html5-controls2.html", '100%', 700)}}

+ +
+

Descarga el código inicial de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Evaluación o ayuda adicional

+ +

Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.

+ +

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

+ +
    +
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.
    2. +
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: +
      +
    • Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de controles HTML5 1".
      • +
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • +
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • +
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • +
    +
    3. +
diff --git a/files/es/learn/forms/test_your_skills_colon__other_controls/index.html b/files/es/learn/forms/test_your_skills_colon__other_controls/index.html new file mode 100644 index 0000000000..1496025a8d --- /dev/null +++ b/files/es/learn/forms/test_your_skills_colon__other_controls/index.html @@ -0,0 +1,87 @@ +--- +title: 'Prueba tus habilidades: Otros controles' +slug: 'Learn/HTML/Forms/Prueba_tus_habilidades:_Otros_controles' +translation_of: 'Learn/Forms/Test_your_skills:_Other_controls' +--- +
{{learnsidebar}}
+ +

El objetivo de esta pueba de habilidad es evaluar si has comprendido nuestro artículo Otros controles de formulario.

+ +
+

Nota: Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.
+
+ Si te atascas, pide ayuda — mira la sección Evaluación o ayuda adicional al final de esta página.

+
+ +

Otros controles 1

+ +

En nuestra primera evaluación de "Otros controles", te pediremos crear una entrada de texto de líneas múltiples.

+ +
    +
  1. Crea una entrada básica de texto de múltiples líneas.
    2. +
  2. Asócialo semánticamente con la etiqueta de "Comentario" asociado.
    3. +
  3. Define la entrada con 35 columnas y 10 filas de espacio en cual agregar comentarios.
    4. +
  4. Define para los comentatios una longitud máxima de 100 caracteres.
    5. +
+ +

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/tasks/other-controls/other-controls1.html", '100%', 700)}}

+ +
+

Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Otros controles 2

+ +

Ahora es tiempo de implementar un menú desplegable, para permitir al usuario escoger su comida favorita de las opciones entregadas.

+ +
    +
  1. Crea tu estructura de caja básica.
    2. +
  2. Asóciala semánticamente con la etiqueta de "comentarios" entregada.
    3. +
  3. Dentro de la lista, divide las opciones en 2 subgrupos - "principales" y "meriendas".
    4. +
+ +

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/tasks/other-controls/other-controls2.html", '100%', 700)}}

+ +
+

Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Otros controles 3

+ +

En la tarea final de esta evaluación, comenzaremos con la misma lista de opciones de comida. Sin embargo, esta vez queremos hacer las cosas de otra forma:

+ +
    +
  1. Crea una entrada de texto básica, que esté asociada semánticamente con la etiqueta entregada.
    2. +
  2. Coloca las opciones de comida en una lista que pueda ser asociada con una entrada de formulario.
    3. +
  3. Asocia la lista con tu entrada de texto, de forma que cuando escribas caracteres, cualquier opción de la lista que coincida con la secuencia de caracteres ingresada, aparezca en un listado desplegable como sugerencia de autocompletado.
    4. +
+ +

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/tasks/other-controls/other-controls3.html", '100%', 700)}}

+ +
+

Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Evaluación o ayuda adicional

+ +

Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.

+ +

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

+ +
    +
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.
    2. +
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: +
      +
    • Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de Otros controles 1".
      • +
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • +
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • +
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • +
    +
    3. +
diff --git a/files/es/learn/forms/your_first_form/index.html b/files/es/learn/forms/your_first_form/index.html new file mode 100644 index 0000000000..df9d73bc60 --- /dev/null +++ b/files/es/learn/forms/your_first_form/index.html @@ -0,0 +1,305 @@ +--- +title: Mi primer formulario HTML +slug: Learn/HTML/Forms/Your_first_HTML_form +tags: + - Ejemplo + - Guía + - HTML + - Principiante + - Web + - formulários +translation_of: Learn/Forms/Your_first_form +--- +
{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}
+ +

El primer artículo de nuestra serie te proporciona una primera experiencia de creación de un formulario web, que incluye diseñar un formulario sencillo con controles de formulario adecuados y otros elementos HTML, añadir un poco de estilo muy simple con CSS y describir cómo se envían los datos a un servidor. Ampliaremos cada uno de estos subtemas más adelante.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática y de lenguaje HTML.
Objetivo:Familiarizarse con los formularios web, para qué se usan, cómo diseñarlos y qué elementos HTML básicos vas a necesitar para casos sencillos.
+ +

¿Qué son los formularios web?

+ +

Los formularios web son uno de los principales puntos de interacción entre un usuario y un sitio web o aplicación. Los formularios permiten a los usuarios la introducción de datos, que generalmente se envían a un servidor web para su procesamiento y almacenamiento (consulta Enviar los datos de un formulario más adelante en el módulo), o se usan en el lado del cliente para provocar de alguna manera una actualización inmediata de la interfaz (por ejemplo, se añade otro elemento a una lista, o se muestra u oculta una función de interfaz de usuario).

+ +

El HTML de un formulario web está compuesto por uno o más controles de formulario (a veces llamados widgets), además de algunos elementos adicionales que ayudan a estructurar el formulario general; a menudo se los conoce como formularios HTML. Los controles pueden ser campos de texto de una o varias líneas, cajas desplegables, botones, casillas de verificación o botones de opción, y se crean principalmente con el elemento {{htmlelement("input")}}, aunque hay algunos otros elementos que también hay que conocer.

+ +

Los controles de formulario también se pueden programar para forzar la introducción de formatos o valores específicos (validación de formulario), y se combinan con etiquetas de texto que describen su propósito para los usuarios con y sin discapacidad visual.

+ +

Diseñar tu formulario

+ +

Antes de comenzar a escribir código, siempre es mejor dar un paso atrás y tomarte el tiempo necesario para pensar en tu formulario. Diseñar una maqueta rápida te ayudará a definir el conjunto de datos adecuado que deseas pedirle al usuario que introduzca. Desde el punto de vista de la experiencia del usuario (UX), es importante recordar que cuanto más grande es tu formulario, más te arriesgas a frustrar a las personas y perder usuarios. Tiene que ser simple y conciso: solicita solo los datos que necesitas.

+ +

Diseñar formularios es un paso importante cuando creas un sitio web o una aplicación. Va más allá del alcance de este artículo exponer la experiencia de usuario de los formularios, pero si deseas profundizar en ese tema, puedes leer los artículos siguientes:

+ + + +

En este artículo, vamos a crear un formulario de contacto sencillo. Hagamos un esbozo.

+ +

Esbozo aproximado del formulario que vamos a construir

+ +

Nuestro formulario va a tener tres campos de texto y un botón. Le pedimos al usuario su nombre, su correo electrónico y el mensaje que desea enviar. Al pulsar el botón sus datos se enviarán a un servidor web.

+ +

Aprendizaje activo: La implementación de nuestro formulario HTML

+ +

De acuerdo, intentemos crear el HTML para nuestro formulario. Vamos a utilizar los elementos HTML siguientes: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}} y {{HTMLelement("button")}}.

+ +

Antes de continuar, haz una copia local de nuestra plantilla HTML simple: introduce aquí tu formulario HTML.

+ +

El elemento {{HTMLelement("form")}}

+ +

Todos los formularios comienzan con un elemento {{HTMLelement("form")}}, como este:

+ +
<form action="/my-handling-form-page" method="post">
+
+</form>
+ +

Este elemento define formalmente un formulario. Es un elemento contenedor, como un elemento {{HTMLelement("section")}} o {{HTMLelement("footer")}}, pero específico para contener formularios; también admite algunos atributos específicos para la configuración de la forma en que se comporta el formulario. Todos sus atributos son opcionales, pero es una práctica estándar establecer siempre al menos los atributos action y method:

+ + + +
+

Nota: Veremos cómo funcionan esos atributos en nuestro artículo Enviar los datos de un formulario que encontrarás más adelante.

+
+ +

Por ahora, añade el elemento {{htmlelement("form")}} anterior a tu elemento HTML {{htmlelement("body")}}.

+ +

Los elementos {{HTMLelement("label")}}, {{HTMLelement("input")}} y {{HTMLelement("textarea")}}

+ +

Nuestro formulario de contacto no es complejo: la parte para la entrada de datos contiene tres campos de texto, cada uno con su elemento {{HTMLelement("label")}} correspondiente:

+ + + +

En términos de código HTML, para implementar estos controles de formulario necesitamos algo como lo siguiente:

+ +
<form action="/my-handling-form-page" method="post">
+ <ul>
+  <li>
+    <label for="name">Nombre:</label>
+    <input type="text" id="name" name="user_name">
+  </li>
+  <li>
+    <label for="mail">Correo electrónico:</label>
+    <input type="email" id="mail" name="user_mail">
+  </li>
+  <li>
+    <label for="msg">Mensaje:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </li>
+ </ul>
+</form>
+ +

Actualiza el código de tu formulario para que se vea como el anterior.

+ +

Los elementos {{HTMLelement("li")}} están ahí para estructurar nuestro código convenientemente y facilitar la aplicación de estilo (ver más adelante en el artículo). Por motivos de usabilidad y accesibilidad incluimos una etiqueta explícita para cada control de formulario. Ten en cuenta el uso del atributo for en todos los elementos {{HTMLelement("label")}}, que toma como valor el id del control de formulario con el que está asociado; así es como asocias un formulario con su etiqueta.

+ +

Hacer esto presenta muchas ventajas porque la etiqueta está asociada al control del formulario y permite que los usuarios con ratón, panel táctil y dispositivos táctiles hagan clic en la etiqueta para activar el control correspondiente, y también proporciona accesibilidad con un nombre que los lectores de pantalla leen a sus usuarios. Encontrarás más detalles sobre las etiquetas de los formularios en Cómo estructurar un formulario web.

+ +

En el elemento {{HTMLelement("input")}}, el atributo más importante es type. Este atributo es muy importante porque define la forma en que el elemento {{HTMLelement("input")}} aparece y se comporta. Encontrarás más información sobre esto en el artículo sobre Controles de formularios nativos básicos más adelante.

+ + + +

Por último, pero no por ello menos importante, ten en cuenta la sintaxis de <input> en contraposición con la de <textarea></textarea>. Esta es una de las rarezas del HTML. La etiqueta <input> es un elemento vacío, lo que significa que no necesita una etiqueta de cierre. El elemento {{HTMLElement("textarea")}} no es un elemento vacío, lo que significa que debe cerrarse con la etiqueta de cierre adecuada. Esto tiene un impacto en una característica específica de los formularios: el modo en que defines el valor predeterminado. Para definir el valor predeterminado de un elemento {{HTMLElement("input")}}, debes usar el atributo value de esta manera:

+ +
<input type="text" value="por defecto este elemento se llena con este texto">
+ +

Por otro lado, si deseas definir un valor predeterminado para un elemento {{HTMLElement("textarea")}}, lo colocas entre las etiquetas de apertura y cierre del elemento {{HTMLElement("textarea")}}, así:

+ +
<textarea>
+Por defecto, este elemento contiene este texto
+</textarea>
+ +

El elemento {{HTMLelement("button")}}

+ +

El marcado de nuestro formulario está casi completo; solo necesitamos añadir un botón para permitir que el usuario envíe sus datos una vez que haya completado el formulario. Esto se hace con el elemento {{HTMLelement("button")}}; añade lo siguiente justo encima de la etiqueta de cierre </form>:

+ +
<li class="button">
+  <button type="submit">Envíe su mensaje</button>
+</li>
+ +

El elemento {{htmlelement("button")}} también acepta un atributo de type, que a su vez acepta uno de estos tres valores: submit, reset o button.

+ + + +
+

Nota: También puedes usar el elemento {{HTMLElement("input")}} con el atributo type correspondiente para generar un botón, por ejemplo <input type="submit">. La ventaja principal del elemento {{HTMLelement("button")}} es que el elemento {{HTMLelement("input")}} solo permite texto sin formato en su etiqueta, mientras que el elemento {{HTMLelement("button")}} permite contenido HTML completo, lo que permite generar botones creativos más complejos.

+
+ +

Aplicar estilo básico a un formulario

+ +

Ahora que has terminado de escribir el código HTML de tu formulario, guárdalo y observa lo que ocurre en un navegador. Por ahora, se verá bastante feo.

+ +
+

Nota: Si crees que no has escrito bien el código HTML, compáralo con nuestro ejemplo final: véase first-form.html (ver en vivo).

+
+ +

Resulta notablemente difícil aplicar estilo a los formularios. Está más allá del alcance de este artículo enseñarte cómo aplicar estilo a los formularios en detalle, por lo que por el momento solo vamos a exponer cómo añadir un poco de CSS para que se vea un poco bien.

+ +

En primer lugar, añade un elemento {{htmlelement("style")}} a tu página, dentro de la cabecera del HTML. Debe quedar así:

+ +
<style>
+
+</style>
+ +

Dentro de las etiquetas style, añade el código CSS siguiente:

+ +
form {
+  /* Centrar el formulario en la página */
+  margin: 0 auto;
+  width: 400px;
+  /* Esquema del formulario */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+form li + li {
+  margin-top: 1em;
+}
+
+label {
+  /* Tamaño y alineación uniforme */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input,
+textarea {
+  /* Para asegurarse de que todos los campos de texto tienen la misma configuración de letra
+     Por defecto, las áreas de texto tienen un tipo de letra monoespaciada */
+  font: 1em sans-serif;
+
+  /* Tamaño uniforme del campo de texto */
+  width: 300px;
+  box-sizing: border-box;
+
+  /* Hacer coincidir los bordes del campo del formulario */
+  border: 1px solid #999;
+}
+
+input:focus,
+textarea:focus {
+  /* Destacado adicional para elementos que tienen el cursor */
+  border-color: #000;
+}
+
+textarea {
+  /* Alinear los campos de texto multilínea con sus etiquetas */
+  vertical-align: top;
+
+  /* Proporcionar espacio para escribir texto */
+  height: 5em;
+}
+
+.button {
+  /* Alinear los botones con los campos de texto */
+  padding-left: 90px; /* mismo tamaño que los elementos de la etiqueta */
+}
+
+button {
+  /* Este margen adicional representa aproximadamente el mismo espacio que el espacio
+     entre las etiquetas y sus campos de texto */
+  margin-left: .5em;
+}
+ +

Guarda y vuelve a cargar, y observa que tu formulario presenta un aspecto mucho menos feo.

+ +
+

Nota: Puedes encontrar nuestra versión en GitHub en first-form-styled.html (ver en vivo).

+
+ +

Enviar los datos del formulario a un servidor web

+ +

La última parte, y quizás la más complicada, es manejar los datos del formulario en el lado del servidor. El elemento {{HTMLelement("form")}} define dónde y cómo enviar los datos gracias a los atributos action y method.

+ +

Proporcionamos un nombre (name) a cada control de formulario. Los nombres son importantes tanto en el lado del cliente como del servidor; le dicen al navegador qué nombre debe dar a cada dato y, en el lado del servidor, dejan que el servidor maneje cada dato por su nombre. Los datos del formulario se envían al servidor como pares de nombre/valor.

+ +

Para poner nombre a los diversos datos que se introducen en un formulario, debes usar el atributo name en cada control de formulario que recopila un dato específico. Veamos de nuevo algunos de nuestros códigos de formulario:

+ +
<form action="/my-handling-form-page" method="post">
+ <ul>
+  <li>
+    <label for="name">Nombre:</label>
+    <input type="text" id="name" name="user_name" />
+  </li>
+  <li>
+    <label for="mail">Correo electrónico:</label>
+    <input type="email" id="mail" name="user_email" />
+  </li>
+  <li>
+    <label for="msg">Mensaje:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </li>
+
+  ...
+
+ +

En nuestro ejemplo, el formulario envía tres datos denominados «user_name», «user_email» y «user_message». Esos datos se envían a la URL «/my-handling-form-page» utilizando el método post de HTTP.

+ +

En el lado del servidor, la secuencia de comandos de la URL «/my-handling-form-page» recibe los datos como una lista de tres elementos clave/valor contenidos en la solicitud HTTP. La forma en que este script maneja esos datos depende de ti. Cada lenguaje de servidor (PHP, Python, Ruby, Java, C#, etc.) tiene su propio mecanismo de manipulación de datos de formulario. No profundizaremos sobre el tema en esta guía, pero si deseas obtener más información, proporcionamos algunos ejemplos en nuestro artículo Enviar los datos de un formulario que encontrarás más adelante.

+ +

Resumen

+ +

¡Enhorabuena!, has creado tu primer formulario web. Debería verse así:

+ +

{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }}

+ +

Pero esto es solo el comienzo: ahora ha llegado el momento de profundizar en el tema. Los formularios tienen mucho más potencial de lo que hemos visto aquí y los artículos siguientes de este módulo te ayudarán a dominarlo.

+ +

{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}

+ +

En este módulo

+ + + +

Temas avanzados

+ + diff --git a/files/es/learn/front-end_web_developer/index.html b/files/es/learn/front-end_web_developer/index.html new file mode 100644 index 0000000000..f58a9ad486 --- /dev/null +++ b/files/es/learn/front-end_web_developer/index.html @@ -0,0 +1,201 @@ +--- +title: Desarrollo web Front-end +slug: Learn/Desarrollo_web_Front-end +tags: + - Aprender + - CSS + - De lado del cliente + - Estándar Web + - Estándares web + - Front-end + - HTML + - Herramientas + - JavaScript + - Novato + - Principiante +translation_of: Learn/Front-end_web_developer +--- +

{{learnsidebar}}

+ +

¡Bienvenido a la ruta de aprendizaje para desarrolladores de la interfaz de usuario web!

+ +

Aquí se te proporciona un curso estructurado que te enseñará todo lo que necesitas saber para convertirte en un desarrollador de la interfaz de usuario web. Simplemente trabaja en cada sección, aprendiendo nuevas habilidades (o mejorando las existentes) sobre la marcha. Cada sección incluye desafíos y ejercicios para evaluar tu comprensión antes de seguir adelante.

+ +

Temas tratados

+ +

Los temas tratados son:

+ + + +

Puedes trabajar en las secciones en orden, pero cada una también es autónoma. Por ejemplo, si ya conoces HTML, puedes pasar a la sección CSS.

+ +

Prerrequisitos

+ +

No necesitas conocimientos previos para empezar este curso. Todo lo que necesitas es una computadora que pueda ejecutar navegadores web modernos, una conexión a Internet y la voluntad de aprender.

+ +

Si no estás seguro de si el desarrollo de la interfaz de usuario web es para ti, y/o deseas una breve introducción antes de comenzar un curso más largo y completo, consulta una {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la Web")}}.

+ +

Cómo obtener ayuda

+ +

Hemos tratado de hacer que el desarrollo de la interfaz de usuario web sea lo más cómodo posible, pero probablemente todavía quedes encallado porque no entiendes algo o porque algún código simplemente no funciona.

+ +

No entres en pánico. Todos hemos encallado, sin importar que seamos desarrolladores web principiantes o profesionales. El artículo {{web.link("/es/docs/Learn/Learning_and_getting_help", "Aprender y obtener ayuda")}} te brinda una serie de consejos para buscar información y ayudarte a ti mismo. Si aún estás atascado, no dudes en publicar una pregunta en nuestro Foro de discusión.

+ +

Empecemos. ¡Diviértete!

+ +

El camino del aprendizaje

+ +

Primeros pasos

+ +

Tiempo para completar: 1.5 a 2 horas

+ +

Prerrequisitos

+ +

Nada excepto conocimientos básicos de informática.

+ +

¿Cómo sabré que estoy listo para seguir adelante?

+ +

No hay evaluaciones en esta parte del curso. Pero asegúrate de no saltarla. Es importante prepararte para trabajar en la resolución de los ejercicios más adelante en el curso.

+ +

Guías

+ + + +

Semántica y estructura con HTML

+ +

Tiempo para completar: 35 a 50 horas

+ +

Prerrequisitos

+ +

Nada, excepto: conocimientos básicos de informática y un entorno de desarrollo web básico.

+ +

¿Cómo sabré que estoy listo para seguir adelante?

+ +

Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.

+ +

Módulos

+ + + +

Estilo y diseño con CSS

+ +

Tiempo para completar: 90 a 120 horas

+ +

Prerrequisitos

+ +

Es recomendable que tengas conocimientos básicos de HTML antes de comenzar a aprender CSS. Primero deberías estudiar {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}} por lo menos.

+ +

¿Cómo sabré que estoy listo para seguir adelante?

+ +

Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.

+ +

Módulos

+ + + +

Recursos adicionales

+ + + +

Interactividad con JavaScript

+ +

Tiempo para completar: 135 a 185 horas

+ +

Prerrequisitos

+ +

Es recomendable que tengas conocimientos básicos de HTML antes de comenzar a aprender JavaScript. Primero deberías estudiar {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}} por lo menos.

+ +

¿Cómo sabré que estoy listo para seguir adelante?

+ +

Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.

+ +

Módulos

+ + + +

Formularios web — Trabajar con datos del usuario

+ +

Tiempo para completar: 40 a 50 horas

+ +

Prerrequisitos

+ +

Los formularios requieren conocimientos de HTML, CSS y JavaScript. Dada la complejidad de trabajar con formularios, es un tema dedicado.

+ +

¿Cómo sabré que estoy listo para seguir adelante?

+ +

Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.

+ +

Módulos

+ + + +

Hacer que la web funcione para todos

+ +

Tiempo para completar: 60 a 75 horas

+ +

Prerrequisitos

+ +

Es una buena idea conocer HTML, CSS y JavaScript antes de trabajar en esta sección. Muchas de las técnicas y mejores prácticas se refieren a múltiples tecnologías.

+ +

¿Cómo sabré que estoy listo para seguir adelante?

+ +

Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.

+ +

Módulos

+ + + +

Herramientas modernas

+ +

Tiempo para completar: 55 a 90 horas

+ +

Prerrequisitos

+ +

Es una buena idea conocer HTML, CSS y JavaScript antes de trabajar en esta sección, ya que las herramientas analizadas funcionan junto con muchas de estas tecnologías.

+ +

¿Cómo sabré que estoy listo para seguir adelante?

+ +

No hay artículos de evaluación específicos en este conjunto de módulos. Los tutoriales de casos de estudio al final del segundo y tercer módulo te preparan para comprender los conceptos básicos de las herramientas modernas.

+ +

Módulos

+ + diff --git "a/files/es/learn/getting_started_with_the_web/c\303\263mo_funciona_la_web/index.html" "b/files/es/learn/getting_started_with_the_web/c\303\263mo_funciona_la_web/index.html" deleted file mode 100644 index 546baf0309..0000000000 --- "a/files/es/learn/getting_started_with_the_web/c\303\263mo_funciona_la_web/index.html" +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Cómo funciona la web -slug: Learn/Getting_started_with_the_web/Cómo_funciona_la_Web -tags: - - Cliente - - DNS - - HTTP - - IP - - Infraestructura - - Internet - - Principiante - - Protocolos - - Servidor - - TCP - - Web -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works ---- -
{{LearnSidebar()}}
- -
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
- -
-

Cómo funciona la web proporciona una vista simplificada de lo que sucede cuando ves una página web en un navegador web de tu computador o teléfono.

-
- -

Esta teoría no es esencial para escribir código web a corto plazo, pero en poco tiempo empezarás a beneficiarte realmente al entender lo que está sucediendo en el fondo.

- -

Los clientes y servidores

- -

Las computadoras conectadas a la web se llaman clientes y servidores. Un diagrama simplificado de cómo interactúan se vería así:

- -

- - - -

Las otras partes de la caja de herramientas

- -

El cliente y el servidor que describimos anteriormente, no cuentan toda la historia. Hay muchas otras partes involucradas y vamos a describirlas a continuación.

- -

Por ahora, imaginemos que la web es un camino. En un extremo de la carretera, está el cliente, que es como tu casa. En el extremo opuesto del camino, está el servidor, que es una tienda en la que deseas comprar algo.

- -

- -

Además del cliente y el servidor, también tenemos que saludar a:

- - - -

Entonces, ¿qué sucede exactamente?

- -

Cuando escribes una dirección web en el navegador (usando nuestra analogía para ir a la tienda):

- -
    -
  1. El navegador va al servidor DNS y encuentra la dirección real del servidor donde el sitio web vive (encontrar la dirección de la tienda).
    2. -
  2. El navegador envía un mensaje de petición HTTP al servidor, pidiéndole que envíe una copia de la página web para el cliente (ir a la tienda y hacer un pedido). Este mensaje y todos los datos enviados entre el cliente y el servidor, se envían a través de tu conexión a Internet usando TCP/IP.
    3. -
  3. Siempre que el servidor apruebe la solicitud del cliente, el servidor enviará al cliente un mensaje «200 OK», que significa, «¡por supuesto que puedes ver ese sitio web! Aquí está.», y comenzará a enviar los archivos de la página web al navegador como una serie de pequeños trozos llamados paquetes de datos (la tienda te entrega tus productos y los llevas de regreso a casa).
    4. -
  4. El navegador reúne los pequeños trozos, forma un sitio web completo y te lo muestra (llegas a casa con tus nuevas compras).
    5. -
- -

Explicación de los DNS

- -

Las direcciones webs reales no son las agradables y fácilmente recordables secuencias que tecleas en la barra de direcciones para encontrar tus sitios webs favoritos. En realidad, se trata de secuencias de números, algo como 63.245.217.105.

- -

Lo anterior se llama dirección IP y representa un lugar único en la web. Sin embargo, no es muy fácil de recordar, ¿verdad? Por eso se inventaron los servidores de nombres de dominio. Estos son servidores especiales que hacen coincidir una dirección web tecleada desde tu navegador («mozilla.org», por ejemplo) con la dirección real del sitio web (IP).

- -

Los sitios webs se pueden acceder directamente a través de sus direcciones IP. Intenta acceder a la página web de Mozilla escribiendo 63.245.217.105 en la barra de dirección de una nueva pestaña en tu navegador. Puedes encontrar la dirección IP de un sitio web escribiendo su dominio en una herramienta como IP Checker.

- -

Un nombre de dominio es más que otra forma de una dirección IP

- -

Explicación de los paquetes

- -

Anteriormente hemos utilizado el término paquetes para describir el formato en que los datos se envían desde el servidor al cliente. ¿Qué significa esto? Básicamente, que los datos se envían a través de la web como miles de trozos pequeños, permitiendo que muchos usuarios pueden descargar la misma página web al mismo tiempo. Si los sitios web fueran enviados como grandes trozos, sólo un usuario podría descargarlos a la vez, lo que volvería a la web muy ineficiente y poco divertida.

- -

Ver también

- - - -

Crédito

- -

Foto de la calle: Street Composing, por Kevin D.

- -

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

diff --git a/files/es/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/es/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..0c7f8c4121 --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,120 @@ +--- +title: Manejo de archivos +slug: Learn/Getting_started_with_the_web/Manejando_los_archivos +tags: + - Archivos + - Guía + - HTML + - Novato + - Principiante + - Scripting + - Sitios Web + - 'l10n:priority' + - teorias +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

Un sitio web consta de muchos archivos: texto del contenido, código, hojas de estilo, contenido multimedia, etc. Cuando estás creando un sitio web, necesitas ensamblar estos archivos en una estructura sensible en tu computadora local, asegurarte de que puedan comunicarse entre sí y hacer que todo su contenido se vea bien antes de que eventualmente {{web.link("/es/Learn/Getting_started_with_the_web/Publishing_your_website", "los cargues en un servidor")}}. El manejo de archivos analiza algunos problemas que debes tener en cuenta, para que puedas configurar una estructura de archivos adecuada para tu sitio web.

+
+ +

¿Dónde debería estar tu sitio web en tu computadora?

+ +

Cuando estés trabajando en un sitio web localmente en tu computadora, debes mantener todos los archivos relacionados en un solo directorio que refleje la estructura de archivos del sitio web publicado en el servidor. Este directorio se puede ubicar en cualquier lugar que desees, pero debes colocarlo en algún lugar donde lo puedas encontrar fácilmente, tal vez en tu escritorio, en tu directorio de inicio o en la raíz de tu disco duro.

+ +
    +
  1. Elige un lugar para almacenar los proyectos de tus sitios web. Dentro del lugar elegido, crea un nuevo directorio llamado proyectosweb (o algo similar). Aquí es donde vivirán todos los proyectos de tus sitios web.
    2. +
  2. Dentro de este primer directorio, crea otro directorio para almacenar tu primer sitio web. Llámalo pruebasitio (o algo más imaginativo).
    3. +
+ +

Una acotación sobre la envoltura y el espaciado

+ +

Notarás que a lo largo de este artículo, te pedimos que nombres los directorios y archivos completamente en minúsculas sin espacios. Esto es porque:

+ +
    +
  1. Muchas computadoras, particularmente los servidores web, distinguen entre mayúsculas y minúsculas. Entonces, por ejemplo, si colocas una imagen en tu sitio web en pruebasitio/MiImagen.jpg y luego, en un archivo diferente intentas invocar la imagen como pruebasitio/miimagen.jpg, puede que no funcione.
    2. +
  2. Los navegadores, servidores web y lenguajes de programación no manejan los espacios de manera consistente. Por ejemplo, si usas espacios en tu nombre de archivo, algunos sistemas pueden tratar el nombre de archivo como dos nombres de archivo. Algunos servidores reemplazarán las áreas en tus nombres de archivo con "%20" (el código de caracteres para espacios en URI), lo cual provocará que todos tus enlaces se rompan. Es mejor separar las palabras con guiones, en lugar de guiones bajos: mi-archivo.html vs. mi_archivo.html.
    3. +
+ +

La respuesta corta es que debes usar un guión para los nombres de tus archivos. El motor de búsqueda de Google trata un guión como un separador de palabras, pero no considera un guión bajo de esa manera. Por estos motivos, es mejor adquirir el hábito de escribir los nombres de los directorios y archivos en minúsculas, sin espacios y con palabras separadas por guiones, al menos hasta que sepas lo que estás haciendo. De esa manera, tropezarás con menos problemas en el futuro.

+ +

¿Qué estructura debe tener tu sitio web?

+ +

A continuación, veamos qué estructura debería tener tu sitio de prueba. Las cosas más comunes que tendrás en cualquier proyecto de sitio web que crees son un archivo de índice HTML y directorios para contener imágenes, archivos de estilo y archivos de script. Crea estos ahora:

+ +
    +
  1. index.html: Este archivo generalmente tendrá el contenido de tu página de inicio, es decir, el texto y las imágenes que las personas ven cuando visitan tu sitio por primera vez. Usando tu editor de texto, crea un nuevo archivo llamado index.html y guárdalo dentro de tu directorio pruebasitio.
    2. +
  2. Directorio images: Este directorio contendrá todas las imágenes que utilices en tu sitio. Crea un directorio llamado images, dentro de tu directorio pruebasitio.
    3. +
  3. Directorio styles: Este directorio contendrá el código CSS que se utiliza para aplicar estilo al contenido (por ejemplo, configurar el texto y los colores de fondo). Crea un directorio llamado styles, dentro de tu directorio pruebasitio.
    4. +
  4. Directorio scripts: Este directorio contendrá todo el código JavaScript utilizado para agregar funcionalidad interactiva a tu sitio (por ejemplo, botones que cargan datos cuando se hace clic en ellos). Crea un directorio llamado scripts, dentro de tu directorio pruebasitio.
    5. +
+ +
+

Nota: En las computadoras con Windows, es posible que tengas problemas para ver los nombres de los archivos, porque de manera predeterminada, Windows tiene activada una opción llamada Ocultar extensiones para tipos de archivos conocidos. Generalmente, la puedes desactivar yendo al Explorador de Windows, seleccionando la opción Opciones de directorio..., desmarcando la casilla de verificación Ocultar extensiones para tipos de archivo conocidos y luego haciendo clic en Aceptar. Para obtener información más específica sobre tu versión de Windows, puedes buscar en la web.

+
+ +

Rutas de archivo

+ +

Para que los archivos se comuniquen entre sí, debes proporcionar una ruta de archivo entre ellos, básicamente una ruta, para que un archivo sepa dónde está otro. Para demostrarlo, insertaremos un poco de HTML en nuestro archivo index.html y haremos que muestre la imagen que elegiste en el artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Imágenes", "¿Cómo se verá tu sitio web?")}}

+ +
    +
  1. Copia la imagen que elegiste anteriormente en tu directorio images.
    2. +
  2. Abre tu archivo index.html e inserta el siguiente código en el archivo exactamente como se muestra. Por ahora, no te preocupes por lo que significa todo esto; veremos las estructuras con más detalle más adelante en la serie. + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mi página de prueba</title>
+  </head>
+  <body>
+    <img src="" alt="Mi imagen de prueba">
+  </body>
+</html>
    +
    3. +
  3. La línea <img src="" alt="Mi imagen de prueba"> es el código HTML que inserta una imagen en la página. Necesitamos decirle al HTML dónde está la imagen. La imagen está dentro del directorio images, que está en el mismo directorio que index.html. Para recorrer la estructura del archivo desde index.html hasta nuestra imagen, la ruta del archivo que necesitamos es images/nombre-archivo-imagen. Por ejemplo, nuestra imagen se llama firefox-icon.png, por lo que la ruta del archivo es images/firefox-icon.png.
    4. +
  4. Inserta la ruta del archivo en tu código HTML entre las comillas dobles del código src="".
    5. +
  5. Guarda tu archivo HTML, luego cárgalo en tu navegador web (haz doble clic en el archivo). ¡Deberías ver tu nueva página web mostrando tu imagen!
    6. +
+ +

Una captura de pantalla del sitio web básico que muestra solo el logotipo de Firefox: un zorro en llamas envolviendo el mundo

+ +

Algunas reglas generales para las rutas de archivo:

+ + + +

Por ahora, esto es todo lo que necesitas saber.

+ +
+

Nota: El sistema de archivos de Windows tiende a utilizar barras invertidas, no barras diagonales, p. ej. C:\windows. Esto no importa en HTML, incluso si estás desarrollando tu sitio web en Windows, debes usar barras diagonales en tu código.

+
+ +

¿Qué más se debería hacer?

+ +

Eso es todo por ahora. La estructura de tu directorio debería verse así:

+ +

Una estructura de archivos en mac os x finder, que muestra un directorio de imágenes con una imagen, directorios de estilos y scripts vacíos, y un archivo index.html

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

+ + + +

En este módulo

+ + diff --git a/files/es/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/es/learn/getting_started_with_the_web/how_the_web_works/index.html new file mode 100644 index 0000000000..546baf0309 --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -0,0 +1,100 @@ +--- +title: Cómo funciona la web +slug: Learn/Getting_started_with_the_web/Cómo_funciona_la_Web +tags: + - Cliente + - DNS + - HTTP + - IP + - Infraestructura + - Internet + - Principiante + - Protocolos + - Servidor + - TCP + - Web +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +
{{LearnSidebar()}}
+ +
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+ +
+

Cómo funciona la web proporciona una vista simplificada de lo que sucede cuando ves una página web en un navegador web de tu computador o teléfono.

+
+ +

Esta teoría no es esencial para escribir código web a corto plazo, pero en poco tiempo empezarás a beneficiarte realmente al entender lo que está sucediendo en el fondo.

+ +

Los clientes y servidores

+ +

Las computadoras conectadas a la web se llaman clientes y servidores. Un diagrama simplificado de cómo interactúan se vería así:

+ +

+ + + +

Las otras partes de la caja de herramientas

+ +

El cliente y el servidor que describimos anteriormente, no cuentan toda la historia. Hay muchas otras partes involucradas y vamos a describirlas a continuación.

+ +

Por ahora, imaginemos que la web es un camino. En un extremo de la carretera, está el cliente, que es como tu casa. En el extremo opuesto del camino, está el servidor, que es una tienda en la que deseas comprar algo.

+ +

+ +

Además del cliente y el servidor, también tenemos que saludar a:

+ + + +

Entonces, ¿qué sucede exactamente?

+ +

Cuando escribes una dirección web en el navegador (usando nuestra analogía para ir a la tienda):

+ +
    +
  1. El navegador va al servidor DNS y encuentra la dirección real del servidor donde el sitio web vive (encontrar la dirección de la tienda).
    2. +
  2. El navegador envía un mensaje de petición HTTP al servidor, pidiéndole que envíe una copia de la página web para el cliente (ir a la tienda y hacer un pedido). Este mensaje y todos los datos enviados entre el cliente y el servidor, se envían a través de tu conexión a Internet usando TCP/IP.
    3. +
  3. Siempre que el servidor apruebe la solicitud del cliente, el servidor enviará al cliente un mensaje «200 OK», que significa, «¡por supuesto que puedes ver ese sitio web! Aquí está.», y comenzará a enviar los archivos de la página web al navegador como una serie de pequeños trozos llamados paquetes de datos (la tienda te entrega tus productos y los llevas de regreso a casa).
    4. +
  4. El navegador reúne los pequeños trozos, forma un sitio web completo y te lo muestra (llegas a casa con tus nuevas compras).
    5. +
+ +

Explicación de los DNS

+ +

Las direcciones webs reales no son las agradables y fácilmente recordables secuencias que tecleas en la barra de direcciones para encontrar tus sitios webs favoritos. En realidad, se trata de secuencias de números, algo como 63.245.217.105.

+ +

Lo anterior se llama dirección IP y representa un lugar único en la web. Sin embargo, no es muy fácil de recordar, ¿verdad? Por eso se inventaron los servidores de nombres de dominio. Estos son servidores especiales que hacen coincidir una dirección web tecleada desde tu navegador («mozilla.org», por ejemplo) con la dirección real del sitio web (IP).

+ +

Los sitios webs se pueden acceder directamente a través de sus direcciones IP. Intenta acceder a la página web de Mozilla escribiendo 63.245.217.105 en la barra de dirección de una nueva pestaña en tu navegador. Puedes encontrar la dirección IP de un sitio web escribiendo su dominio en una herramienta como IP Checker.

+ +

Un nombre de dominio es más que otra forma de una dirección IP

+ +

Explicación de los paquetes

+ +

Anteriormente hemos utilizado el término paquetes para describir el formato en que los datos se envían desde el servidor al cliente. ¿Qué significa esto? Básicamente, que los datos se envían a través de la web como miles de trozos pequeños, permitiendo que muchos usuarios pueden descargar la misma página web al mismo tiempo. Si los sitios web fueran enviados como grandes trozos, sólo un usuario podría descargarlos a la vez, lo que volvería a la web muy ineficiente y poco divertida.

+ +

Ver también

+ + + +

Crédito

+ +

Foto de la calle: Street Composing, por Kevin D.

+ +

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

diff --git a/files/es/learn/getting_started_with_the_web/instalacion_de_software_basico/index.html b/files/es/learn/getting_started_with_the_web/instalacion_de_software_basico/index.html deleted file mode 100644 index 84ffdcf666..0000000000 --- a/files/es/learn/getting_started_with_the_web/instalacion_de_software_basico/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Instalación de software básico -slug: Learn/Getting_started_with_the_web/Instalacion_de_software_basico -tags: - - Aprender - - Configuración - - Herramientas - - Navegadores - - Novato - - Principiantes - - aprende - - buscador - - editor de textos - - instalar - - 'l10n:priority' -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
- -
-

La Instalación de software básico, te muestra las herramientas que necesitas para hacer el desarrollo web simple, y la forma de instalarlas correctamente.

-
- -

¿Qué herramientas usan los profesionales?

- - - -

Ahora mismo: ¿qué herramientas necesitas realmente?

- -

Esto parece una lista espeluznante pero, afortunadamente, puedes comenzar a trabajar en el desarrollo web sin saber nada de la mayoría de estas herramientas. En este artículo solo tendrás que configurar lo mínimo: un editor de texto y algunos navegadores web modernos.

- -

Instalación de un editor de texto

- -

Probablemente ya tengas un editor de texto básico instalado en tu computadora. De manera predeterminada Windows incluye el {{Interwiki("wikipedia", "Bloc de notas")}} y OS X viene con {{Interwiki("wikipedia", "TextEdit")}}. Las distros (versiones) de Linux varían: Ubuntu viene con {{Interwiki("wikipedia", "Gedit")}}; distribuciones basadas en KDE suelen traer Kate o Kwrite.

- -

Para el desarrollo Web, probablemente hay cosas mejores que el Bloc de notas o TextEdit. Una recomendación puede ser empezar con Brackets, un editor gratuito que ofrece vistas previas en vivo y sugerencias de código.

- -

Instalación de navegadores web modernos

- -

Por ahora, solo tendrás que instalar un par de navegadores web de escritorio para poner a prueba tu código. Selecciona tu sistema operativo y pulsa los enlaces pertinentes para descargar los instaladores de tus navegadores preferidos:

- - - -

Antes de continuar, deberías instalar al menos dos de estos navegadores y tenerlos disponibles para pruebas.

- -
-

Nota: Internet Explorer no es compatible con algunas funciones web modernas y es posible que no puedas ejecutar tu proyecto. Por lo general, no necesitas preocuparte por hacer que tus proyectos web sean compatibles con él, ya que muy pocas personas todavía lo usan; ciertamente, no te preocupes demasiado por él mientras aprendes. En ocasiones, es posible que te encuentres con un proyecto que requiera soporte.

-
- -

Instalación de un servidor web local

- -

Algunos ejemplos necesitarás ejecutarlos a través de un servidor web para que funcionen exitosamente. Puedes encontrar cómo hacer esto en {{web.link("/es/docs/Learn/Common_questions/set_up_a_local_testing_server", "¿Cómo se configura un servidor de prueba local?")}}

- -

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

- -

En este módulo

- - diff --git a/files/es/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/es/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..84ffdcf666 --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,83 @@ +--- +title: Instalación de software básico +slug: Learn/Getting_started_with_the_web/Instalacion_de_software_basico +tags: + - Aprender + - Configuración + - Herramientas + - Navegadores + - Novato + - Principiantes + - aprende + - buscador + - editor de textos + - instalar + - 'l10n:priority' +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
+ +
+

La Instalación de software básico, te muestra las herramientas que necesitas para hacer el desarrollo web simple, y la forma de instalarlas correctamente.

+
+ +

¿Qué herramientas usan los profesionales?

+ + + +

Ahora mismo: ¿qué herramientas necesitas realmente?

+ +

Esto parece una lista espeluznante pero, afortunadamente, puedes comenzar a trabajar en el desarrollo web sin saber nada de la mayoría de estas herramientas. En este artículo solo tendrás que configurar lo mínimo: un editor de texto y algunos navegadores web modernos.

+ +

Instalación de un editor de texto

+ +

Probablemente ya tengas un editor de texto básico instalado en tu computadora. De manera predeterminada Windows incluye el {{Interwiki("wikipedia", "Bloc de notas")}} y OS X viene con {{Interwiki("wikipedia", "TextEdit")}}. Las distros (versiones) de Linux varían: Ubuntu viene con {{Interwiki("wikipedia", "Gedit")}}; distribuciones basadas en KDE suelen traer Kate o Kwrite.

+ +

Para el desarrollo Web, probablemente hay cosas mejores que el Bloc de notas o TextEdit. Una recomendación puede ser empezar con Brackets, un editor gratuito que ofrece vistas previas en vivo y sugerencias de código.

+ +

Instalación de navegadores web modernos

+ +

Por ahora, solo tendrás que instalar un par de navegadores web de escritorio para poner a prueba tu código. Selecciona tu sistema operativo y pulsa los enlaces pertinentes para descargar los instaladores de tus navegadores preferidos:

+ + + +

Antes de continuar, deberías instalar al menos dos de estos navegadores y tenerlos disponibles para pruebas.

+ +
+

Nota: Internet Explorer no es compatible con algunas funciones web modernas y es posible que no puedas ejecutar tu proyecto. Por lo general, no necesitas preocuparte por hacer que tus proyectos web sean compatibles con él, ya que muy pocas personas todavía lo usan; ciertamente, no te preocupes demasiado por él mientras aprendes. En ocasiones, es posible que te encuentres con un proyecto que requiera soporte.

+
+ +

Instalación de un servidor web local

+ +

Algunos ejemplos necesitarás ejecutarlos a través de un servidor web para que funcionen exitosamente. Puedes encontrar cómo hacer esto en {{web.link("/es/docs/Learn/Common_questions/set_up_a_local_testing_server", "¿Cómo se configura un servidor de prueba local?")}}

+ +

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/getting_started_with_the_web/la_web_y_los_estandares_web/index.html b/files/es/learn/getting_started_with_the_web/la_web_y_los_estandares_web/index.html deleted file mode 100644 index daf6e77d18..0000000000 --- a/files/es/learn/getting_started_with_the_web/la_web_y_los_estandares_web/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: La web y los estándares web -slug: Learn/Getting_started_with_the_web/La_web_y_los_estandares_web -tags: - - Estándares web - - Front-end - - Interfáz de Usuario - - Novato - - Principiante - - Web - - aprende -translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards ---- -

{{learnsidebar}}

- -

Este artículo proporciona algunos antecedentes útiles sobre la Web — cómo surgió, qué son las tecnologías web estándar, cómo funcionan juntas, por qué "desarrollador web" es una gran carrera para elegir y qué tipos de mejores prácticas aprenderás a través de este curso.

- -

Breve historia de la web

- -

Mantendremos esto muy breve, ya que hay muchos artículos (más) detallados de la historia de la web, a los que enlazaremos más adelante (también intenta buscar "historia de la web" en tu motor de búsqueda favorito y ve lo que obtienes, si estás interesado en más detalles).

- -

A fines de la década de 1960, las fuerzas armadas de EE. UU. desarrollaron una red de comunicación llamada {{Glossary("Arpanet")}}. Esta se puede considerar una precursora de la Web, ya que trabajó en la {{interwiki("wikipedia", "conmutación de paquetes")}} y presentó la primera implementación de la {{interwiki("wikipedia", "Familia de protocolos de internet")}} TCP/IP. Estas dos tecnologías forman la base de la infraestructura sobre la que se construye Internet.

- -

En 1980, Tim Berners-Lee (a menudo denominado TimBL) escribió un programa de block de notas llamado ENQUIRE, que presentaba el concepto de enlaces entre diferentes nodos. ¿Te suena familiar?

- -

Avanzó rápidamente hasta 1989, y TimBL escribió Gestión de la información: una propuesta e hipertexto en el CERN; estas dos publicaciones juntas proporcionaron los antecedentes de cómo funcionaría la web. Recibieron una buena cantidad de interés, suficiente para convencer a los jefes de TimBL de que le permitieran seguir adelante y creara un sistema de hipertexto global.

- -

A finales de 1990, TimBL había creado todo lo necesario para ejecutar la primera versión de la web: {{web.link("/es/docs/Web/HTTP", "HTTP")}}, {{web.link("/es/docs/Web/HTML", "HTML")}}, el primer navegador web, que se llamaba {{interwiki("wikipedia", "WorldWideWeb")}}, un servidor HTTP y algunas páginas web para mirar.

- -

En los años siguientes, la web explotó, se lanzaron varios navegadores, se instalaron miles de servidores web y se crearon millones de páginas web. Bien, este es un muy sencillo resumen de lo que sucedió, pero les prometí un breve resumen.

- -

Un último dato importante para compartir es que en 1994, TimBL fundó el {{interwiki("wikipedia", "World Wide Web Consortium")}} (W3C), una organización que reúne a representantes de muchas empresas de tecnología diferentes para trabajar juntos en la creación de especificaciones de tecnología web. Después de eso, siguieron otras tecnologías como {{web.link("/es/docs/Web/CSS", "CSS")}} y {{web.link("/es/docs/Web/JavaScript", "JavaScript")}}, y la web comenzó a parecerse más a la web que conocemos hoy.

- -

Estándares web

- -

Los estándares web son las tecnologías que utilizamos para crear sitios web. Estos estándares existen como extensos documentos técnicos llamados especificaciones, que detallan exactamente cómo debería funcionar la tecnología. Estos documentos no son muy útiles para aprender a usar las tecnologías que describen (es por eso que tenemos sitios como MDN Web Docs), sino que están pensados ​​para que los utilicen los ingenieros de software para implementar esas tecnologías (generalmente en los navegadores web).

- -

Por ejemplo, el lleno de vida Estándar HTML describe exactamente cómo se debe implementar HTML (todos los elementos HTML y sus APIs asociadas y otras tecnologías circundantes).

- -

Los estándares web son creados por organismos de estándares — instituciones que invitan a grupos de personas de diferentes compañías de tecnología a unirse y acordar cómo deberían funcionar las tecnologías de la mejor manera posible para cumplir con todos sus casos de uso. El W3C es el organismo de estándares web más conocido, pero hay otros como WHATWG (que fueron responsables de la modernización del lenguaje HTML), ECMA (que publica el estándar para ECMAScript, en el que se basa JavaScript), Khronos (que publica tecnologías para gráficos 3D, como WebGL) y otras.

- -

Estándares "abiertos"

- -

Uno de los aspectos clave de los estándares web, que TimBL y el W3C acordaron desde el principio, es que la web (y las tecnologías web) deben ser libres tanto para contribuir como para usar, y no estar gravadas por patentes/licencias. Por lo tanto, cualquiera puede escribir el código para crear un sitio web de forma gratuita y cualquiera puede contribuir al proceso de creación de estándares, donde se escriben las especificaciones.

- -

Debido a que las tecnologías web se crean abiertamente, en colaboración entre muchas empresas diferentes, significa que ninguna empresa las puede controlar, lo cual es algo realmente bueno. No querrías que una sola empresa decidiera repentinamente poner toda la web detrás de un muro de pago, o lanzar una nueva versión de HTML que todos tienen que comprar para continuar creando sitios web, o peor aún, simplemente decidiendo que ya no están interesados, y simplemente apagarlas.

- -

Esto permite que la web siga siendo un recurso público de libre acceso.

- -

No rompas la web

- -

Otra frase que escucharás sobre los estándares web abiertos es "no rompas la web" — la idea es que cualquier tecnología web nueva que se introduzca debe ser compatible con versiones anteriores (es decir, los sitios web antiguos seguirán funcionando) y compatibles con versiones posteriores (las tecnologías futuras a su vez serán compatibles con las que tenemos actualmente). A medida que avances en el material de aprendizaje que se presenta aquí, comenzarás a aprender cómo se hace posible esto con un trabajo de diseño e implementación muy inteligente.

- -

Ser desarrollador web es bueno

- -

La industria web es un mercado muy atractivo para ingresar si estás buscando trabajo. Las cifras publicadas recientemente dicen que actualmente hay alrededor de 19 millones de desarrolladores web en el mundo, y esa cifra se establecerá en más del doble en la próxima década. Y al mismo tiempo, hay una escasez de habilidades en la industria, entonces, ¿qué mejor momento para aprender sobre desarrollo web?

- -

Sin embargo, no todo es diversión y juegos — crear sitios web es una propuesta más complicada de lo que solía ser, y tendrás que dedicar algo de tiempo a estudiar todas las diferentes tecnologías que necesitas usar, todas las técnicas y las mejores prácticas que necesitas conocer y todos los patrones típicos que se te pedirá que implementes. Te tomará unos meses comenzar realmente a involucrarte en él, y luego deberás seguir aprendiendo para que tu conocimiento se mantenga actualizado con todas las nuevas herramientas y funciones que aparecen en la plataforma web, y seguir practicando y perfeccionando tu oficio.

- -

Lo único constante es el cambio.

- -

¿Esto suena difícil? No te preocupes: nuestro objetivo es brindarte todo lo que necesitas saber para comenzar, y las cosas serán más fáciles. Una vez que aceptes el cambio constante y la incertidumbre de la web, comenzarás a disfrutar. Como parte de la comunidad web, tendrás toda una red de contactos y material útil para ayudarte, y comenzarás a disfrutar de las posibilidades creativas que brinda.

- -

Ahora eres un creativo digital. Disfruta de la experiencia y el potencial de ganarte la vida.

- -

Descripción de las tecnologías web modernas

- -

Hay una serie de tecnologías que debes aprender si deseas ser un desarrollador web front-end. En esta sección las describiremos brevemente. Para obtener una explicación más detallada de cómo funcionan juntas algunas de ellas, lee nuestro artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works", "Cómo funciona la web")}}.

- - - -

Probablemente estés leyendo estas palabras dentro de un navegador web en este mismo momento (a menos que las hayas impreso o estés utilizando tecnología de asistencia, como un lector de pantalla para leerlas). Los navegadores web son los programas de software que la gente usa para consumir la web e incluyen Firefox, Chrome, Opera, Safari y Edge.

- -

HTTP

- -

El Protocolo de transferencia de hipertexto, o {{web.link("/es/docs/Web/HTTP/Basics_of_HTTP", "HTTP")}}, es un protocolo de mensajería que permite a los navegadores web comunicarse con los servidores web (donde se almacenan los sitios web). Una conversación típica es algo así como

- -
"Hola servidor web. ¿Me puedes dar los archivos que necesito para renderizar bbc.co.uk"?
-
-"Seguro navegador web — aquí los tienes"
-
-[Descarga archivos y renderiza la página web]
- -

La sintaxis real de los mensajes HTTP (llamados peticiones y respuestas) no es tan legible para los humanos, pero esto te da una idea básica.

- -

HTML, CSS y JavaScript

- -

{{web.link("/es/docs/Web/HTML", "HTML")}}, {{web.link("/es/docs/Web/CSS", "CSS")}} y {{web.link("/es/docs/Web/JavaScript", "JavaScript")}} son las tres tecnologías principales que utilizarás para crear un sitio web:

- - - -

Herramientas

- -

Una vez que hayas aprendido las tecnologías "sin procesar" que se pueden usar para crear páginas web (como HTML, CSS y JavaScript), pronto comenzarás a encontrar varias herramientas que puedes usar para hacer tu trabajo más fácil y/o más eficiente. Algunos ejemplos incluyen:

- - - -

Marcos de desarrollo y lenguajes de lado del servidor

- -

HTML, CSS y JavaScript son lenguajes de la interfaz del usuario ("front-end" o del lado del cliente), lo cual significa que los ejecuta el navegador para producir la interfaz del sitio web que los usuarios pueden utilizar.

- -

Hay otra clase de lenguajes llamados lenguajes de la interfaz de admiración ("back-end" o de lado del servidor), lo cual significa que se ejecutan en el servidor antes de que el resultado se envíe al navegador para que se muestre. Un uso típico de un lenguaje de lado del servidor es obtener algunos datos de una base de datos y generar algo de HTML para contener los datos, antes de enviar el HTML al navegador para mostrárselo al usuario.

- -

Los lenguajes de lado del servidor de ejemplo incluyen ASP.NET, Python, PHP y NodeJS.

- -

Mejores prácticas web

- -

Hemos hablado brevemente sobre las tecnologías que utilizarás para crear sitios web. Ahora analicemos las mejores prácticas que debes emplear para asegurarte de que estás utilizando esas tecnologías de la mejor manera posible.

- -

Al hacer desarrollo web, la principal causa de incertidumbre proviene del hecho de que no sabes qué combinación de tecnologías utilizará cada usuario para ver tu sitio web:

- - - -

Debido a que no sabes exactamente qué usarán tus usuarios, debes diseñar a la defensiva — hacer que tu sitio web sea lo más flexible posible, de modo que todos los usuarios anteriores puedan hacer uso de él, incluso si no todos obtienen la misma experiencia. En resumen, estamos tratando de hacer que la web funcione para todos, tanto como sea posible.

- -

Encontrarás los siguientes conceptos en algún momento de tus estudios.

- - - -

Ve también

- - diff --git a/files/es/learn/getting_started_with_the_web/manejando_los_archivos/index.html b/files/es/learn/getting_started_with_the_web/manejando_los_archivos/index.html deleted file mode 100644 index 0c7f8c4121..0000000000 --- a/files/es/learn/getting_started_with_the_web/manejando_los_archivos/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Manejo de archivos -slug: Learn/Getting_started_with_the_web/Manejando_los_archivos -tags: - - Archivos - - Guía - - HTML - - Novato - - Principiante - - Scripting - - Sitios Web - - 'l10n:priority' - - teorias -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
- -
-

Un sitio web consta de muchos archivos: texto del contenido, código, hojas de estilo, contenido multimedia, etc. Cuando estás creando un sitio web, necesitas ensamblar estos archivos en una estructura sensible en tu computadora local, asegurarte de que puedan comunicarse entre sí y hacer que todo su contenido se vea bien antes de que eventualmente {{web.link("/es/Learn/Getting_started_with_the_web/Publishing_your_website", "los cargues en un servidor")}}. El manejo de archivos analiza algunos problemas que debes tener en cuenta, para que puedas configurar una estructura de archivos adecuada para tu sitio web.

-
- -

¿Dónde debería estar tu sitio web en tu computadora?

- -

Cuando estés trabajando en un sitio web localmente en tu computadora, debes mantener todos los archivos relacionados en un solo directorio que refleje la estructura de archivos del sitio web publicado en el servidor. Este directorio se puede ubicar en cualquier lugar que desees, pero debes colocarlo en algún lugar donde lo puedas encontrar fácilmente, tal vez en tu escritorio, en tu directorio de inicio o en la raíz de tu disco duro.

- -
    -
  1. Elige un lugar para almacenar los proyectos de tus sitios web. Dentro del lugar elegido, crea un nuevo directorio llamado proyectosweb (o algo similar). Aquí es donde vivirán todos los proyectos de tus sitios web.
    2. -
  2. Dentro de este primer directorio, crea otro directorio para almacenar tu primer sitio web. Llámalo pruebasitio (o algo más imaginativo).
    3. -
- -

Una acotación sobre la envoltura y el espaciado

- -

Notarás que a lo largo de este artículo, te pedimos que nombres los directorios y archivos completamente en minúsculas sin espacios. Esto es porque:

- -
    -
  1. Muchas computadoras, particularmente los servidores web, distinguen entre mayúsculas y minúsculas. Entonces, por ejemplo, si colocas una imagen en tu sitio web en pruebasitio/MiImagen.jpg y luego, en un archivo diferente intentas invocar la imagen como pruebasitio/miimagen.jpg, puede que no funcione.
    2. -
  2. Los navegadores, servidores web y lenguajes de programación no manejan los espacios de manera consistente. Por ejemplo, si usas espacios en tu nombre de archivo, algunos sistemas pueden tratar el nombre de archivo como dos nombres de archivo. Algunos servidores reemplazarán las áreas en tus nombres de archivo con "%20" (el código de caracteres para espacios en URI), lo cual provocará que todos tus enlaces se rompan. Es mejor separar las palabras con guiones, en lugar de guiones bajos: mi-archivo.html vs. mi_archivo.html.
    3. -
- -

La respuesta corta es que debes usar un guión para los nombres de tus archivos. El motor de búsqueda de Google trata un guión como un separador de palabras, pero no considera un guión bajo de esa manera. Por estos motivos, es mejor adquirir el hábito de escribir los nombres de los directorios y archivos en minúsculas, sin espacios y con palabras separadas por guiones, al menos hasta que sepas lo que estás haciendo. De esa manera, tropezarás con menos problemas en el futuro.

- -

¿Qué estructura debe tener tu sitio web?

- -

A continuación, veamos qué estructura debería tener tu sitio de prueba. Las cosas más comunes que tendrás en cualquier proyecto de sitio web que crees son un archivo de índice HTML y directorios para contener imágenes, archivos de estilo y archivos de script. Crea estos ahora:

- -
    -
  1. index.html: Este archivo generalmente tendrá el contenido de tu página de inicio, es decir, el texto y las imágenes que las personas ven cuando visitan tu sitio por primera vez. Usando tu editor de texto, crea un nuevo archivo llamado index.html y guárdalo dentro de tu directorio pruebasitio.
    2. -
  2. Directorio images: Este directorio contendrá todas las imágenes que utilices en tu sitio. Crea un directorio llamado images, dentro de tu directorio pruebasitio.
    3. -
  3. Directorio styles: Este directorio contendrá el código CSS que se utiliza para aplicar estilo al contenido (por ejemplo, configurar el texto y los colores de fondo). Crea un directorio llamado styles, dentro de tu directorio pruebasitio.
    4. -
  4. Directorio scripts: Este directorio contendrá todo el código JavaScript utilizado para agregar funcionalidad interactiva a tu sitio (por ejemplo, botones que cargan datos cuando se hace clic en ellos). Crea un directorio llamado scripts, dentro de tu directorio pruebasitio.
    5. -
- -
-

Nota: En las computadoras con Windows, es posible que tengas problemas para ver los nombres de los archivos, porque de manera predeterminada, Windows tiene activada una opción llamada Ocultar extensiones para tipos de archivos conocidos. Generalmente, la puedes desactivar yendo al Explorador de Windows, seleccionando la opción Opciones de directorio..., desmarcando la casilla de verificación Ocultar extensiones para tipos de archivo conocidos y luego haciendo clic en Aceptar. Para obtener información más específica sobre tu versión de Windows, puedes buscar en la web.

-
- -

Rutas de archivo

- -

Para que los archivos se comuniquen entre sí, debes proporcionar una ruta de archivo entre ellos, básicamente una ruta, para que un archivo sepa dónde está otro. Para demostrarlo, insertaremos un poco de HTML en nuestro archivo index.html y haremos que muestre la imagen que elegiste en el artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Imágenes", "¿Cómo se verá tu sitio web?")}}

- -
    -
  1. Copia la imagen que elegiste anteriormente en tu directorio images.
    2. -
  2. Abre tu archivo index.html e inserta el siguiente código en el archivo exactamente como se muestra. Por ahora, no te preocupes por lo que significa todo esto; veremos las estructuras con más detalle más adelante en la serie. - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Mi página de prueba</title>
-  </head>
-  <body>
-    <img src="" alt="Mi imagen de prueba">
-  </body>
-</html>
    -
    3. -
  3. La línea <img src="" alt="Mi imagen de prueba"> es el código HTML que inserta una imagen en la página. Necesitamos decirle al HTML dónde está la imagen. La imagen está dentro del directorio images, que está en el mismo directorio que index.html. Para recorrer la estructura del archivo desde index.html hasta nuestra imagen, la ruta del archivo que necesitamos es images/nombre-archivo-imagen. Por ejemplo, nuestra imagen se llama firefox-icon.png, por lo que la ruta del archivo es images/firefox-icon.png.
    4. -
  4. Inserta la ruta del archivo en tu código HTML entre las comillas dobles del código src="".
    5. -
  5. Guarda tu archivo HTML, luego cárgalo en tu navegador web (haz doble clic en el archivo). ¡Deberías ver tu nueva página web mostrando tu imagen!
    6. -
- -

Una captura de pantalla del sitio web básico que muestra solo el logotipo de Firefox: un zorro en llamas envolviendo el mundo

- -

Algunas reglas generales para las rutas de archivo:

- - - -

Por ahora, esto es todo lo que necesitas saber.

- -
-

Nota: El sistema de archivos de Windows tiende a utilizar barras invertidas, no barras diagonales, p. ej. C:\windows. Esto no importa en HTML, incluso si estás desarrollando tu sitio web en Windows, debes usar barras diagonales en tu código.

-
- -

¿Qué más se debería hacer?

- -

Eso es todo por ahora. La estructura de tu directorio debería verse así:

- -

Una estructura de archivos en mac os x finder, que muestra un directorio de imágenes con una imagen, directorios de estilos y scripts vacíos, y un archivo index.html

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

- - - -

En este módulo

- - diff --git a/files/es/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/es/learn/getting_started_with_the_web/the_web_and_web_standards/index.html new file mode 100644 index 0000000000..daf6e77d18 --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/the_web_and_web_standards/index.html @@ -0,0 +1,172 @@ +--- +title: La web y los estándares web +slug: Learn/Getting_started_with_the_web/La_web_y_los_estandares_web +tags: + - Estándares web + - Front-end + - Interfáz de Usuario + - Novato + - Principiante + - Web + - aprende +translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards +--- +

{{learnsidebar}}

+ +

Este artículo proporciona algunos antecedentes útiles sobre la Web — cómo surgió, qué son las tecnologías web estándar, cómo funcionan juntas, por qué "desarrollador web" es una gran carrera para elegir y qué tipos de mejores prácticas aprenderás a través de este curso.

+ +

Breve historia de la web

+ +

Mantendremos esto muy breve, ya que hay muchos artículos (más) detallados de la historia de la web, a los que enlazaremos más adelante (también intenta buscar "historia de la web" en tu motor de búsqueda favorito y ve lo que obtienes, si estás interesado en más detalles).

+ +

A fines de la década de 1960, las fuerzas armadas de EE. UU. desarrollaron una red de comunicación llamada {{Glossary("Arpanet")}}. Esta se puede considerar una precursora de la Web, ya que trabajó en la {{interwiki("wikipedia", "conmutación de paquetes")}} y presentó la primera implementación de la {{interwiki("wikipedia", "Familia de protocolos de internet")}} TCP/IP. Estas dos tecnologías forman la base de la infraestructura sobre la que se construye Internet.

+ +

En 1980, Tim Berners-Lee (a menudo denominado TimBL) escribió un programa de block de notas llamado ENQUIRE, que presentaba el concepto de enlaces entre diferentes nodos. ¿Te suena familiar?

+ +

Avanzó rápidamente hasta 1989, y TimBL escribió Gestión de la información: una propuesta e hipertexto en el CERN; estas dos publicaciones juntas proporcionaron los antecedentes de cómo funcionaría la web. Recibieron una buena cantidad de interés, suficiente para convencer a los jefes de TimBL de que le permitieran seguir adelante y creara un sistema de hipertexto global.

+ +

A finales de 1990, TimBL había creado todo lo necesario para ejecutar la primera versión de la web: {{web.link("/es/docs/Web/HTTP", "HTTP")}}, {{web.link("/es/docs/Web/HTML", "HTML")}}, el primer navegador web, que se llamaba {{interwiki("wikipedia", "WorldWideWeb")}}, un servidor HTTP y algunas páginas web para mirar.

+ +

En los años siguientes, la web explotó, se lanzaron varios navegadores, se instalaron miles de servidores web y se crearon millones de páginas web. Bien, este es un muy sencillo resumen de lo que sucedió, pero les prometí un breve resumen.

+ +

Un último dato importante para compartir es que en 1994, TimBL fundó el {{interwiki("wikipedia", "World Wide Web Consortium")}} (W3C), una organización que reúne a representantes de muchas empresas de tecnología diferentes para trabajar juntos en la creación de especificaciones de tecnología web. Después de eso, siguieron otras tecnologías como {{web.link("/es/docs/Web/CSS", "CSS")}} y {{web.link("/es/docs/Web/JavaScript", "JavaScript")}}, y la web comenzó a parecerse más a la web que conocemos hoy.

+ +

Estándares web

+ +

Los estándares web son las tecnologías que utilizamos para crear sitios web. Estos estándares existen como extensos documentos técnicos llamados especificaciones, que detallan exactamente cómo debería funcionar la tecnología. Estos documentos no son muy útiles para aprender a usar las tecnologías que describen (es por eso que tenemos sitios como MDN Web Docs), sino que están pensados ​​para que los utilicen los ingenieros de software para implementar esas tecnologías (generalmente en los navegadores web).

+ +

Por ejemplo, el lleno de vida Estándar HTML describe exactamente cómo se debe implementar HTML (todos los elementos HTML y sus APIs asociadas y otras tecnologías circundantes).

+ +

Los estándares web son creados por organismos de estándares — instituciones que invitan a grupos de personas de diferentes compañías de tecnología a unirse y acordar cómo deberían funcionar las tecnologías de la mejor manera posible para cumplir con todos sus casos de uso. El W3C es el organismo de estándares web más conocido, pero hay otros como WHATWG (que fueron responsables de la modernización del lenguaje HTML), ECMA (que publica el estándar para ECMAScript, en el que se basa JavaScript), Khronos (que publica tecnologías para gráficos 3D, como WebGL) y otras.

+ +

Estándares "abiertos"

+ +

Uno de los aspectos clave de los estándares web, que TimBL y el W3C acordaron desde el principio, es que la web (y las tecnologías web) deben ser libres tanto para contribuir como para usar, y no estar gravadas por patentes/licencias. Por lo tanto, cualquiera puede escribir el código para crear un sitio web de forma gratuita y cualquiera puede contribuir al proceso de creación de estándares, donde se escriben las especificaciones.

+ +

Debido a que las tecnologías web se crean abiertamente, en colaboración entre muchas empresas diferentes, significa que ninguna empresa las puede controlar, lo cual es algo realmente bueno. No querrías que una sola empresa decidiera repentinamente poner toda la web detrás de un muro de pago, o lanzar una nueva versión de HTML que todos tienen que comprar para continuar creando sitios web, o peor aún, simplemente decidiendo que ya no están interesados, y simplemente apagarlas.

+ +

Esto permite que la web siga siendo un recurso público de libre acceso.

+ +

No rompas la web

+ +

Otra frase que escucharás sobre los estándares web abiertos es "no rompas la web" — la idea es que cualquier tecnología web nueva que se introduzca debe ser compatible con versiones anteriores (es decir, los sitios web antiguos seguirán funcionando) y compatibles con versiones posteriores (las tecnologías futuras a su vez serán compatibles con las que tenemos actualmente). A medida que avances en el material de aprendizaje que se presenta aquí, comenzarás a aprender cómo se hace posible esto con un trabajo de diseño e implementación muy inteligente.

+ +

Ser desarrollador web es bueno

+ +

La industria web es un mercado muy atractivo para ingresar si estás buscando trabajo. Las cifras publicadas recientemente dicen que actualmente hay alrededor de 19 millones de desarrolladores web en el mundo, y esa cifra se establecerá en más del doble en la próxima década. Y al mismo tiempo, hay una escasez de habilidades en la industria, entonces, ¿qué mejor momento para aprender sobre desarrollo web?

+ +

Sin embargo, no todo es diversión y juegos — crear sitios web es una propuesta más complicada de lo que solía ser, y tendrás que dedicar algo de tiempo a estudiar todas las diferentes tecnologías que necesitas usar, todas las técnicas y las mejores prácticas que necesitas conocer y todos los patrones típicos que se te pedirá que implementes. Te tomará unos meses comenzar realmente a involucrarte en él, y luego deberás seguir aprendiendo para que tu conocimiento se mantenga actualizado con todas las nuevas herramientas y funciones que aparecen en la plataforma web, y seguir practicando y perfeccionando tu oficio.

+ +

Lo único constante es el cambio.

+ +

¿Esto suena difícil? No te preocupes: nuestro objetivo es brindarte todo lo que necesitas saber para comenzar, y las cosas serán más fáciles. Una vez que aceptes el cambio constante y la incertidumbre de la web, comenzarás a disfrutar. Como parte de la comunidad web, tendrás toda una red de contactos y material útil para ayudarte, y comenzarás a disfrutar de las posibilidades creativas que brinda.

+ +

Ahora eres un creativo digital. Disfruta de la experiencia y el potencial de ganarte la vida.

+ +

Descripción de las tecnologías web modernas

+ +

Hay una serie de tecnologías que debes aprender si deseas ser un desarrollador web front-end. En esta sección las describiremos brevemente. Para obtener una explicación más detallada de cómo funcionan juntas algunas de ellas, lee nuestro artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works", "Cómo funciona la web")}}.

+ + + +

Probablemente estés leyendo estas palabras dentro de un navegador web en este mismo momento (a menos que las hayas impreso o estés utilizando tecnología de asistencia, como un lector de pantalla para leerlas). Los navegadores web son los programas de software que la gente usa para consumir la web e incluyen Firefox, Chrome, Opera, Safari y Edge.

+ +

HTTP

+ +

El Protocolo de transferencia de hipertexto, o {{web.link("/es/docs/Web/HTTP/Basics_of_HTTP", "HTTP")}}, es un protocolo de mensajería que permite a los navegadores web comunicarse con los servidores web (donde se almacenan los sitios web). Una conversación típica es algo así como

+ +
"Hola servidor web. ¿Me puedes dar los archivos que necesito para renderizar bbc.co.uk"?
+
+"Seguro navegador web — aquí los tienes"
+
+[Descarga archivos y renderiza la página web]
+ +

La sintaxis real de los mensajes HTTP (llamados peticiones y respuestas) no es tan legible para los humanos, pero esto te da una idea básica.

+ +

HTML, CSS y JavaScript

+ +

{{web.link("/es/docs/Web/HTML", "HTML")}}, {{web.link("/es/docs/Web/CSS", "CSS")}} y {{web.link("/es/docs/Web/JavaScript", "JavaScript")}} son las tres tecnologías principales que utilizarás para crear un sitio web:

+ + + +

Herramientas

+ +

Una vez que hayas aprendido las tecnologías "sin procesar" que se pueden usar para crear páginas web (como HTML, CSS y JavaScript), pronto comenzarás a encontrar varias herramientas que puedes usar para hacer tu trabajo más fácil y/o más eficiente. Algunos ejemplos incluyen:

+ + + +

Marcos de desarrollo y lenguajes de lado del servidor

+ +

HTML, CSS y JavaScript son lenguajes de la interfaz del usuario ("front-end" o del lado del cliente), lo cual significa que los ejecuta el navegador para producir la interfaz del sitio web que los usuarios pueden utilizar.

+ +

Hay otra clase de lenguajes llamados lenguajes de la interfaz de admiración ("back-end" o de lado del servidor), lo cual significa que se ejecutan en el servidor antes de que el resultado se envíe al navegador para que se muestre. Un uso típico de un lenguaje de lado del servidor es obtener algunos datos de una base de datos y generar algo de HTML para contener los datos, antes de enviar el HTML al navegador para mostrárselo al usuario.

+ +

Los lenguajes de lado del servidor de ejemplo incluyen ASP.NET, Python, PHP y NodeJS.

+ +

Mejores prácticas web

+ +

Hemos hablado brevemente sobre las tecnologías que utilizarás para crear sitios web. Ahora analicemos las mejores prácticas que debes emplear para asegurarte de que estás utilizando esas tecnologías de la mejor manera posible.

+ +

Al hacer desarrollo web, la principal causa de incertidumbre proviene del hecho de que no sabes qué combinación de tecnologías utilizará cada usuario para ver tu sitio web:

+ + + +

Debido a que no sabes exactamente qué usarán tus usuarios, debes diseñar a la defensiva — hacer que tu sitio web sea lo más flexible posible, de modo que todos los usuarios anteriores puedan hacer uso de él, incluso si no todos obtienen la misma experiencia. En resumen, estamos tratando de hacer que la web funcione para todos, tanto como sea posible.

+ +

Encontrarás los siguientes conceptos en algún momento de tus estudios.

+ + + +

Ve también

+ + diff --git a/files/es/learn/herramientas_y_pruebas/cross_browser_testing/index.html b/files/es/learn/herramientas_y_pruebas/cross_browser_testing/index.html deleted file mode 100644 index 73bd6299a1..0000000000 --- a/files/es/learn/herramientas_y_pruebas/cross_browser_testing/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Cross browser testing -slug: Learn/Herramientas_y_pruebas/Cross_browser_testing -translation_of: Learn/Tools_and_testing/Cross_browser_testing ---- -
{{LearnSidebar}}
- -

Este módulo se centra en probar proyectos web en diferentes navegadores. Nos fijamos en la identificación de su público objetivo (por ejemplo, qué usuarios, navegadores y dispositivos son los que más le preocupan?), cómo realizar las pruebas, los principales problemas a los que se enfrentará con los diferentes tipos de código y cómo mitigarlos, qué herramientas son las más útiles para ayudarle a probar y solucionar problemas, y cómo utilizar la automatización para acelerar las pruebas.

- -

Prerequisitos

- -

Debería aprender los conceptos básicos de los lenguajes HTML, CSS y JavaScript básicos antes de intentar utilizar las herramientas que se detallan aquí.

- -

Guías

- -
-
Introducción a la prueba de navegadores cruzados
-
Este artículo comienza el módulo proporcionando una visión general del tema de la prueba de navegadores cruzados, respondiendo a preguntas como "¿qué es la prueba de navegadores cruzados? y "¿cuáles son los tipos de problemas más comunes que se encuentran?
-
Estrategias para la realización de las pruebas
-
-

A continuación, profundizamos en la realización de pruebas, la identificación de un público objetivo (por ejemplo, qué navegadores, dispositivos y otros segmentos deben ser probados), estrategias de pruebas de baja fiabilidad (obtenga una gama de dispositivos y algunas máquinas virtuales y realice pruebas ad-hoc cuando sea necesario), estrategias de alta tecnología (automatización, uso de aplicaciones de pruebas dedicadas), y pruebas con grupos de usuarios.

-
-
Manejo de problemas comunes de HTML y CSS
-
-

Con el conjunto de escenas, ahora veremos específicamente los problemas comunes entre navegadores que encontrará en código HTML y CSS, y qué herramientas se pueden usar para evitar que ocurran problemas o para solucionarlos. Esto incluye el código de hilado, la entrega de prefijos CSS, el uso de herramientas de desarrollo de navegadores para localizar problemas, el uso de polifiltros para añadir soporte a los navegadores, la solución de problemas de diseño con capacidad de respuesta, y mucho más.

-
-
Manejo de problemas comunes de JavaScript
-
-

Ahora veremos los problemas comunes de JavaScript en todos los navegadores y cómo solucionarlos. Esto incluye información sobre el uso de herramientas de desarrollo del navegador para localizar y solucionar problemas, el uso de polifondos y bibliotecas para solucionar los problemas, el funcionamiento de las funciones modernas de JavaScript en navegadores antiguos, y mucho más.

-
-
Manejo de problemas comunes de accesibilidad
-
A continuación, nos centramos en la accesibilidad, proporcionando información sobre problemas comunes, cómo realizar pruebas sencillas y cómo utilizar las herramientas de auditoría/automatización para encontrar problemas de accesibilidad.
-
Implementación de la detección de características
-
La detección de funciones implica determinar si un navegador soporta un determinado bloque de código, y ejecutar un código diferente dependiendo de si lo hace (o no), de modo que el navegador siempre puede proporcionar una experiencia de trabajo en lugar de bloquearse/error en algunos navegadores. Este artículo detalla cómo escribir su propia detección de características simples, cómo usar una biblioteca para acelerar la implementación y características nativas para la detección de características como @supports.
-
Introducción a las pruebas automatizadas
-
La realización manual de pruebas en varios navegadores y dispositivos, varias veces al día, puede resultar tediosa y consumir mucho tiempo. Para manejar esto eficientemente, debe familiarizarse con las herramientas de automatización. En este artículo, analizamos lo que está disponible, cómo utilizar los corredores de tareas y los conceptos básicos de cómo utilizar las aplicaciones de automatización de pruebas de navegadores comerciales, como Sauce Labs y Browser Stack.
-
Configuración de su propio entorno de automatización de pruebas
-
En este artículo, le enseñaremos cómo instalar su propio entorno de automatización y ejecutar sus propias pruebas utilizando Selenium/WebDriver y una biblioteca de pruebas como Selenium-webdriver for Node. También veremos cómo integrar su entorno de pruebas local con aplicaciones comerciales como las que se comentaron en el artículo anterior.
-
diff --git a/files/es/learn/herramientas_y_pruebas/github/index.html b/files/es/learn/herramientas_y_pruebas/github/index.html deleted file mode 100644 index 62646f1cc4..0000000000 --- a/files/es/learn/herramientas_y_pruebas/github/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Git y GitHub -slug: Learn/Herramientas_y_pruebas/GitHub -tags: - - Aprender - - GitHub - - Principiante - - Web - - git -translation_of: Learn/Tools_and_testing/GitHub ---- -
{{LearnSidebar}}
- -

Todos los desarrolladores utilizarán algún tipo de sistema de control de versiones ( VCS ), una herramienta que les permita colaborar con otros desarrolladores en un proyecto sin peligro de que sobrescriban el trabajo de los demás, y volver a las versiones anteriores de la base de código si existe un problema descubierto más tarde. El VCS más popular (al menos entre los desarrolladores web) es Git, junto con GitHub, un sitio que proporciona alojamiento para tus repositorios y varias herramientas para trabajar con ellos. Este módulo tiene como objetivo enseñarte lo que necesitas saber sobre ambos.

- -

Introducción

- -

Los VCS son esenciales para el desarrollo de software:

- - - -

Los VCS proporcionan herramientas para satisfacer las necesidades anteriores. Git es un ejemplo de VCS, y GitHub es un sitio web + infraestructura que proporciona un servidor Git más una serie de herramientas realmente útiles para trabajar con repositorios git individuales o en equipo, como informar problemas con el código, herramientas de revisión, características de administración de proyectos tal como asignación de tareas, estados de tareas, y más.

- -
-

Nota: Git en realidad es un sistema de control de versiones distribuido, lo cual significa que se realiza una copia completa del repositorio que contiene la base de código en tu computadora (y en la de todos los demás). Realizas cambios en tu propia copia, y luego empujas esos cambios nuevamente al servidor, donde un administrador decidirá si fusiona tus cambios con la copia maestra.

-
- -

¿Quieres convertirte en un desarrollador web front-end?

- -

Hemos preparado un curso que incluye toda la información esencial que necesitas para alcanzar tu objetivo.

- -
-

Comenzar

-
- -

Prerequisitos

- -

Para usar Git y GitHub, necesitas:

- - - -

En términos de conocimiento previo, no necesitas saber nada sobre desarrollo web, Git/GitHub o VCS para iniciar este módulo. Sin embargo, se recomienda que conozcas algo de codificación para que tengas conocimientos informáticos razonables y algún código para almacenar en tus repositorios.

- -

También es preferible que tengas algunos conocimientos básicos de la terminal, por ejemplo, moverte entre directorios, crear archivos y modificar la variable del sistema PATH.

- -
-

Nota: Github no es el único sitio/conjunto de herramientas que puedes usar con Git. Hay otras alternativas, como GitLab, que podrías probar, y también podrías intentar configurar tu propio servidor Git y usarlo en lugar de GitHub. Solo nos hemos quedado con GitHub en este curso para proporcionar una forma única que funciona.

-
- -

Guías

- -

Ten en cuenta que los enlaces a continuación te llevan a recursos en sitios externos. Eventualmente intentaremos tener nuestro propio curso Git/GitHub dedicado, pero por ahora, esto te ayudará a familiarizarte con el tema en cuestión.

- -
-
Hola mundo (de GitHub)
-
Este es un buen lugar para comenzar: esta guía práctica te permite comenzar a usar GitHub, aprender los conceptos básicos de Git, como crear repositorios y ramas, realizar confirmaciones, abrir y fusionar solicitudes de extracción.
-
Manual de Git (en GitHub)
-
Este Manual de Git profundiza un poco más, explicando qué es un VCS, qué es un repositorio, cómo funciona el modelo básico de GitHub, comandos y ejemplos de Git, y más.
-
Bifurcación de proyectos (de GitHub)
-
Bifurcar proyectos es esencial cuando deseas contribuir al código de otra persona. Esta guía explica cómo.
-
Acerca de las solicitudes de extracción (de GitHub)
-
Una útil guía para administrar las solicitudes de extracción, la forma en que los cambios de código sugeridos se entregan a los repositorios de las personas para su consideración.
-
Dominando las incidencias (de GitHub)
-
Las incidencias son como un foro para tu proyecto GitHub, donde las personas pueden hacer preguntas e informar problemas, y tú puede administrar las actualizaciones (por ejemplo, asignar personas para solucionar problemas, aclarar el problema, informar a las personas que las cosas están solucionadas). Este artículo te brinda lo que necesitas saber sobre las incidencias.
-
- -
-

Nota: Hay mucho más que puedes hacer con Git y GitHub, pero creemos que lo anterior representa lo mínimo que necesitas saber para comenzar a usar Git de manera efectiva. A medida que profundices en Git, comenzarás a darte cuenta de que es fácil equivocarse cuando comienzas a usar comandos más complicados. No te preocupes, incluso los desarrolladores web profesionales encuentran a Git confuso a veces, y a menudo resuelven problemas buscando soluciones en la web, o consultando sitios como Reglas de vuelo para Git y Dangit, ¡git!

-
- -

Ve también

- - diff --git a/files/es/learn/herramientas_y_pruebas/index.html b/files/es/learn/herramientas_y_pruebas/index.html deleted file mode 100644 index a147c98f65..0000000000 --- a/files/es/learn/herramientas_y_pruebas/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Herramientas y pruebas -slug: Learn/Herramientas_y_pruebas -tags: - - Accesibilidad - - Aprender - - Aterrizaje - - CSS - - CodificaciónDeSecuenciasDeComandos - - HTML - - Herramientas - - JavaScript - - Navegador cruzado - - Principiante - - Pruebas de usuario - - Tema - - Testing - - automatización -translation_of: Learn/Tools_and_testing ---- -
-

{{LearnSidebar}}

- -

Una vez que haya comenzado a sentirse cómodo programando con tecnologías web básicas (como HTML, CSS y JavaScript), y comience a adquirir más experiencia, leer más recursos y aprender más trucos y consejos, comenzará a encontrar todos tipo de herramientas, desde CSS y JavaScript ya enrollados, aplicaciones de prueba y automatización, y muchas más. A medida que sus proyectos web se vuelvan más grandes y complejos, querrá comenzar a aprovechar algunas de estas herramientas y elaborar planes de prueba confiables para su código. Esta parte del área de aprendizaje tiene como objetivo brindarle lo que necesita para comenzar y tomar decisiones informadas.

-
- -

 

- -

{{LearnSidebar}}

- -

La industria de la web es un lugar emocionante para trabajar, pero no está exenta de complicaciones. Las tecnologías principales que utilizamos para crear sitios web son bastante estables ahora, pero se están agregando nuevas características todo el tiempo, y nuevas herramientas, que facilitan el trabajo con estas tecnologías y están construidas sobre estas tecnologías, aparecen constantemente. Además de eso, todavía tenemos que mantener la compatibilidad entre navegadores en la parte superior de nuestras mentes y asegurarnos de que nuestro código sigue las mejores prácticas que permiten que nuestros proyectos funcionen en diferentes navegadores y dispositivos que nuestros usuarios utilizan para navegar por la Web, y ser utilizable por personas con discapacidad.

- -

Determinar qué herramientas debería usar puede ser un proceso difícil, por lo que hemos escrito este conjunto de artículos para informarle qué tipos de herramientas están disponibles, qué pueden hacer por usted y cómo hacer uso de los favoritos actuales de la industria.

- -

 

- -
-

Nota: Debido a que aparecen nuevas herramientas y las antiguas pasan de moda todo el tiempo, hemos redactado deliberadamente este material para que sea lo más neutral posible. Queremos enfocarnos ante todo en los tipos generales de tareas que estas herramientas lo ayudarán a lograr. y seguir prescribiendo herramientas específicas al mínimo. Obviamente, necesitamos mostrar el uso de las herramientas para demostrar técnicas específicas, pero ten en cuenta que no necesariamente recomendamos estas herramientas como la mejor o la única forma de hacer las cosas; en la mayoría de los casos, existen otras formas, pero queremos brindarte una idea clara. Metodología que funciona.

-
- -

Camino de aprendizaje

- -

 

- -

Debería aprender los conceptos básicos de los lenguajes HTML, CSS, y JavaScript antes de intentar usar las herramientas que se detallan aquí. Por ejemplo, deberá conocer los fundamentos de estos idiomas antes de comenzar a depurar problemas en códigos web complejos, o hacer un uso efectivo de las bibliotecas de JavaScript, o escribir pruebas y ejecutarlas en su código utilizando corredores de prueba, etc.

- -

Primero necesitas una base sólida.

- -

 

- -

Módulos

- -
-
Herramientas de desarrollo web en el mundo real (TBD)
-
En este módulo, exploramos los diferentes tipos de herramientas de desarrollo web disponibles. Esto incluye la revisión de los tipos de tareas más comunes a las que se le puede pedir que resuelva, cómo pueden encajar en un flujo de trabajo y las mejores herramientas disponibles actualmente para llevar a cabo esas tareas.
-
Pruebas de navegadores cruzados
-
Este módulo analiza específicamente el área de prueba de proyectos web en diferentes navegadores. Aquí vemos cómo identificar a su público objetivo (por ejemplo, qué usuarios, navegadores y dispositivos necesita preocuparse más), cómo realizar las pruebas, los principales problemas que enfrentará con los diferentes tipos de código y cómo solucionar o mitigue esos problemas, qué herramientas son más útiles para ayudarlo a probar y solucionar problemas, y cómo utilizar la automatización para acelerar las pruebas.
-
diff --git a/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/index.html b/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/index.html deleted file mode 100644 index e9bdd36eca..0000000000 --- a/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Entendiendo los frameworks de JavaScript del lado del cliente -slug: Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks -tags: - - Aprender - - Principiante -translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks ---- -
{{LearnSidebar}}
- -

Los frameworks de JavaScript son una parte esencial del desarrollo web front-end moderno, los cuales proveen a los desarrolladores herramientas probadas y testeadas para la creación de aplicaciones web interactivas y escalables. Muchas empresas modernas utilizan frameworks como parte estándar de sus herramientas, por lo que muchos trabajos de desarrollo front-end en la actualidad requieren experiencia en frameworks.

- -

Como aspirante a desarrollador front-end, puede resultar difícil saber por dónde empezar cuando se trata de aprender sobre frameworks; hay muchos frameworks diferentes para elegir, nuevas opciones surgen todo el tiempo. En su mayoría funcionan de forma similar, pero hacen algunas cosas de manera diferente, y hay algunas cosas específicas con las que se debe tener cuidado a la hora de usar frameworks.

- -

En esta serie de artículos, tenemos como objetivo brindarte un punto de partida cómodo que te sirva de ayuda para comenzar a aprender sobre frameworks. Nuestra intención no es enseñarte, de manera exhaustiva, todo lo que se necesita saber sobre React/ReactDOM, o Vue, o algún otro framework en específico; la documetación de los equipos de los frameworks (entre otros recursos) ya cumplen esta función. En su lugar, queremos brindarte respaldo y responder primero a preguntas más fundamentales como:

- - - -

Después de esto, proveeremos algunos tutoriales que cubren los aspectos básicos de algunos de los diferentes frameworks que existen, de manera que puedas tener el contexto y la familiaridad suficientes para poder empezar a profundizar por tu propia cuenta. Queremos que avances y aprendas sobre los frameworks de manera pragmática, de forma tal que se tengan presente las buenas prácticas esenciales de la plataforma web, como lo es la accesibilidad.

- -

Empieza ahora con "Introducción a los frameworks del lado del cliente"

- -

Prerrequisitos

- -

Antes de intentar aprender sobre los frameworks del lado del cliente, es recomendable que conozcamos los conceptos básicos de los principales lenguajes de la web: HTML, CSS, y —especialmente— JavaScript.

- -

Como resultado, tu código será más consistente y profesional, por lo que podrás solucionar problemas con mayor confianza si comprende las características fundamentales de la plataforma web sobre las que se basan los frameworks.

- -

Guías introductorias

- -
-
1. Introducción a los frameworks del lado del cliente
-
Comenzamos nuestro estudio sobre los frameworks con una descripción general del área, repasando un poco de historia sobre JavaScript y los frameworks, por qué estos existen, y qué nos brindan; por donde empezar al momento de escoger un framework por aprender y qué alternativas existen a los frameworks del lado del cliente.
-
2. Características principales de los frameworks
-
Cada framework destacado de JavaScript tiene un enfoque diferente para actualizar el DOM, manejar los eventos del navegador, y brindarte una experiencia de desarrollo satisfactoria. En este artículo, exploraremos las características principales de "los cuatro grandes" frameworks, observando cómo estos tienden a operar desde un nivel alto, al igual que las diferencias entre ellos.
-
- -

Tutoriales de React

- -
-

Nota: Los tutoriales de React se probaron por última vez en mayo de 2020, con React/ReactDOM 16.13.1 y create-react-app 3.4.1.

- -

Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación React en nuestro repositorio todo-react. Para una versión en vivo, consulta https://mdn.github.io/todo-react-build/.

-
- -
-
1. Primeros pasos en React
-
En este artículo conoceremos React. Descubriremos algunos detalles sobre su trasfondo y casos de uso, configuraremos una cadena básica de herramientas para React en nuestra computadora local, crearemos y jugaremos con una aplicación inicial sencilla, mientras aprendemos —durante el proceso— un poco acerca de cómo funciona React.
-
2. Comenzando con nuestra lista de tareas de React
-
Digamos que se nos ha encomendado la tarea de crear una prueba de concepto (Proof of Concept — PoC) en React: una aplicación que permita a los usuarios agregar, editar y eliminar tareas en las que se quiera trabajar, pero que también permita marcar las tareas como completadas sin eliminarlas. Este artículo te guiará en la organización de la estructura y los estilos básicos del componente App, de manera que esté listo para la definición e interactividad de componentes individuales, los cuales agregaremos más adelante.
-
3. Basando nuestra aplicación React en componentes
-
Hasta este momento, nuestra aplicación no hace gran cosa. Antes de que podamos hacerla funcionar, tenemos que dividirla en componentes descriptivos y manejables. React no tiene reglas estrictas para lo que, se considera o no, un componente, ¡eso depende de ti! En este artículo, te mostraremos una forma raznoable de dividir nuestra aplicación en componentes.
-
4. Interactividad en React: eventos y estado
-
Habiendo elaborado nuestro plan de componentes, es hora de comenzar a actualizar nuestra aplicación, para que pase de ser una interfaz de usuario completamente estática a una que nos permita, realmente, interactuar y cambiar las cosas. Es eso mismo lo que haremos en este artículo, profundizando en los eventos y el estado a medida que avancemos.
-
5. Interactividad en React: edición, filtrado, renderizado condicional
-
A medida que nos acercamos al final de nuestro viaje en React (al menos por ahora), agregaremos los toques finales a las áreas principales de funcionalidad en nuestra aplicación de lista de tareas. Esto incluye permitir la edición de tareas existentes y el filtrado de la lista de tareas entre todas las tareas, las completadas, y las incompletas. A lo largo del capítulo, veremos la renderización condicional de la interfaz de usuario.
-
6. Accesibilidad en React
-
En el artículo final de nuestro tutorial, nos enfocaremos en la accesibilidad (broma intencional), incluyendo la gestión del enfoque en React, la cual puede mejorar la usabilidad y reducir la confusión para usuarios que navegan tanto, a través de lectores de pantalla, como solo del teclado.
-
7. Recursos sobre React
-
En nuestro artículo final, te brindamos una lista de recursos sobre React, los cuales podrás utilizar para avanzar más en tu aprendizaje.
-
- -

Tutoriales de Ember

- -
-

Nota: Los tutoriales de Ember se probaron por última vez en mayo de 2020, con Ember/Ember CLI versión 3.18.0.

- -

Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación Ember en nuestro repositorio ember-todomvc-tutorial. Para una versión en vivo, consulta https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ (esto también incluye algunas características adicionales que no se cubren en este tutorial).

-
- -
-
1. Primeros pasos en Ember
-
En nuestro primer artículo de Ember veremos cómo funciona Ember y para qué resulta útil, instalaremos la cadena de herramientas de Ember de manera local, crearemos una aplicación de muestra, y luego realizaremos una configuración inicial para prepararla para el desarrollo.
-
2. Estructura de una aplicación Ember y cómo se basa en componentes
-
En este artículo, continuaremos planificando la estructura de nuestra aplicación Ember TodoMVC, agregando el HTML necesario y luego dividiendo esa estructura HTML en componentes.
-
3. Interactividad de Ember: eventos, clases, y estado
-
En este punto, comenzaremos a agregar un poco de interactividad a nuestra aplicación, dándole la capacidad de agregar y mostrar nuevos elementos de tareas por hacer. A medida que avanzamos, veremos el uso de eventos en Ember, la creación de clases de componentes para contener código JavaScript que controle las funciones interactivas, y la configuración de un servicio para hacer seguimiento del estado de los datos de nuestra aplicación.
-
4. Interactividad de Ember: funcionalidad del footer, renderizado condicional
-
Ahora es momento de comenzar a abordar la funcionalidad del footer en nuestra aplicación. Aquí haremos que el contador de tareas pendientes se actualice de manera que muestre el número correcto de tareas pendientes por completar, y aplicaremos correctamente los estilos a las tareas completadas (es decir, aquellos donde la casilla de verificación ha sido marcada). También conectaremos nuestro botón "Borrar completados". A lo largo del capítulo, aprenderemos sobre el uso de la renderización condicional en nuestras plantillas.
-
5. Enrutamiento en Ember
-
En este artículo aprendemos sobre enrutamiento o el filtrado basado en URL, como a veces se lo denomina. Lo usaremos para proporcionar una URL única para cada una de las tres vistas de tareas: "Todas", "Activas" y "Completadas".
-
6. Recursos sobre y solución de problemas
-
En nuestro artículo final sobre Ember, te proporcionamos una lista de recursos que puedes utilizar para avanzar más en tu aprendizaje, además de información útil para la solución problemas y otra información.
-
- -

Tutoriales de Vue

- -
-

Nota: Los tutoriales de Vue se probaron por última vez en mayo de 2020, con Vue 2.6.11.

- -

Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación Vue en nuestro repositorio todo-vue. Para una verisón en vivo, consulta https://mdn.github.io/todo-vue/dist/.

-
- -
-
1. Primeros pasos en Vue
-
A continuación, presentamos Vue, el tercero de nuestros frameworks. En este artículo, veremos un poco sobre el origen de Vue, aprenderemos cómo instalarlo y crear un nuevo proyecto, estudiaremos la estructura de alto nivel de todo el proyecto y de un componente individual, veremos cómo ejecutar el proyecto localmente y prepararlo para comenzar a construir nuestro ejemplo.
-
2. Creando nuestro primer componente de Vue
-
Ahora es momento de profundizar en Vue y crear nuestro propio componente personalizado: comenzaremos creando un componente para representar cada elemento en la lista de tareas. Durante el artículo, aprenderemos sobre algunos conceptos importantes, como llamar a componentes dentro de otros componentes, pasarles datos a través de props y guardar el estado de los datos.
-
3. Renderizando una lista de componentes de Vue
-
En este punto, tenemos un componente completamente funcional; ahora estamos listos para agregar varios componentes ToDoItem a nuestra aplicación. En este artículo, veremos cómo agregar un conjunto de datos de elementos de tareas a nuestro componente App.vue, el cual luego repasaremos en bucle, mostrando dentro de los componentes de ToDoItem mediante el uso de la directiva v-for.
-
4. Agregar una nueva forma de tareas pendientes: eventos, métodos y modelos de Vue
-
Ahora tenemos datos de muestra listos y un ciclo que toma cada bit de datos y lo renderiza dentro de un ToDoItem en nuestra aplicación. Lo que realmente necesitamos a continuación es la capacidad de permitirle a nuestros usuarios que introuduzcan sus propios elementos de tareas pendientes en la aplicación, y para ello, necesitaremos un <input> de texto, un evento para efectuar una vez se envíen los datos, un método por accionar al momento del envío para agregar los datos y volver a renderizar la lista, y un modelo para controlar los datos. Esto es lo que cubriremos en este artículo.
-
5. Agregando estilos a los componentes de Vue con CSS
-
Por fin ha llegado el momento de hacer que nuestra aplicación luzca un poco mejor. En este artículo, exploraremos las diferentes formas de agregar estilos a los componentes de Vue con CSS.
-
6. Usando propiedades calculadas de Vue
-
En este artículo, agregaremos un contador que muestre el número de tareas completadas, utilizando una función de Vue llamada propiedades calculadas. Estos funcionan de manera similar a los métodos, pero solo se vuelven a ejecutar cuando cambia una de sus dependencias.
-
7. Renderización condicional en Vue: editando tareas existentes
-
Ahora es momento de agregar una de las principales piezas de la funcionalidad que aún nos falta: la capacidad de editar tareas existentes. Para hacer esto, aprovecharemos las capacidades de renderizado condicional de Vue, es decir, v-if y v-else, los cuales nos permiten alternar entre la vista de una tarea existente y una vista de edición donde podremos actualizar las etiquetas de las tareas. También veremos cómo agregar funcionalidad para eliminar tareas.
-
8. Gestión de enfoque con Vue refs
-
Ya estamos cerca de terminar con Vue. La última funcionalidad a considerar es la gestión del enfoque, o dicho de otra manera, cómo podemos mejorar la accesibilidad de nuestra aplicación desde el teclado. Veremos el uso de Vue refs para manejar esto, una característica avanzada que nos permite tener acceso directo a los nodos DOM subyacentes debajo del DOM virtual, o acceso directo desde un componente a la estructura DOM interna de un componente interno.
-
9. Recursos sobre Vue
-
Ahora, completaremos nuestro estudio de Vue brindándote una lista de recursos que podrás utilizar para avanzar en tu aprendizaje, además de algunos otros consejos útiles.
-
- -

¿Cuales frameworks hemos escogido?

- -

Hacemos pública nuestra serie inicial de artículos con guías enfocadas en tres de los principales frameworks que existen: React/ReactDOM, Ember, y Vue. Esto se debe a varias un razones:

- - - -

Queremos decir esto desde un principio: no hemos escogido los frameworks en los que nos estamos enfocando porque pensamos que son los mejores o porque los respaldamos de alguna manera. Simplemente, consideramos que obtienen una puntuación alta de acuerdo a los criterios anteriores.

- -

Ten en cuenta que esperábamos poder incluir más frameworks en la publicación inicial, pero que decidimos publicar el contenido y agregar, más adelante, otras guías, en lugar de retrasarlo más. Si tu framework favorito no se encuentra listado en este contenido y te gustaría ayudar a cambiar esto, ¡no dudes en discutirlo con nosotros! Puedes contactarnos a través de Matrix, o Discourse, o enviarnos un correo electrónico a la lista mdn-admins.

diff --git a/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/react_getting_started/index.html b/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/react_getting_started/index.html deleted file mode 100644 index 09c28f11a9..0000000000 --- a/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/react_getting_started/index.html +++ /dev/null @@ -1,476 +0,0 @@ ---- -title: Primeros pasos en React -slug: >- - Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started -tags: - - Aprender - - Aprendiz - - Principiante -translation_of: >- - Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
- -

En este artículo conoceremos React. Descubriremos algunos detalles sobre su trasfondo y casos de uso, configuraremos una cadena básica de herramientas para React en nuestra computadora local, crearemos y jugaremos con una aplicación inicial sencilla, mientras aprendemos —durante el proceso— un poco acerca de cómo funciona React.

- - - - - - - - - - - - -
Prerrequisitos: -

Familiaridad con los lenguajes HTML, CSS, y JavaScript, conocimiento del terminal/línea de comandos.

- -

React usa una sintaxis HTML-en-JavaScript llamada JSX (JavaScript y XML). Estar familiarizado con HTML y JavaScript te ayudará a aprender JSX, y a identificar —en una mejor manera— si los errores en tu aplicación están relacionados con JavaScript o con el más específico dominio de React.

-
Objetivo:Configurar un entorno de desarrollo local para React, crear una aplicación inicial, y entender los aspectos básicos de su funcionamiento.
- -

Hola, React

- -

Como su eslogan oficial señala, React es una biblioteca para construir interfaces de usuario. React no es un framework — ni siquiera se limita a la web. React es utilizado con otras bibliotecas para renderizar en ciertos entornos. Por ejemplo, React Native puede usarse para desarrollar aplicaciones móviles; React 360 permite crear aplicaciones de realidad virtual; además de otras posibilidades.

- -

Al desarrollar para la web, los desarrolladores usan React en conjunto con ReactDOM. React y ReactDOM son, a menudo, considerados al igual que —y utilizados para resolver los mismo problemas que— otros verdaderos frameworks de desarrollo web. Cuando nos referimos a React como un "framework", estamos trabajando con este significado coloquial.

- -

El objetivo principal de React es minimizar los errores que ocurren cuando los desarrolladores construyen interfaces de usuario. Esto lo hace mediante el uso de componentes — piezas de código lógicas y auto-contenidas que describen una parte de la interfaz del usuario. Estos componentes se pueden juntar para crear una interfaz de usuario completa, y React abstrae la mayor parte del trabajo de renderizado, permitiéndote enfocarte en el diseño de la interfaz.

- -

Casos de uso

- -

A diferencia de los otros frameworks vistos en este módulo, React no impone reglas estrictas sobre convenciones de código u organización de archivos. Esto le permite a los equipos establecer las convenciones que funcionen mejor para ellos y adoptar React de la manera en que deseen. React puede manejar un solo botón, algunas piezas de una interfaz o la interfaz de usuario completa de una aplicación.

- -

Si bien React puede usarse para pequeñas piezas de una interfaz, no resulta tan sencillo "introducirlo" en una aplicación como sería el caso de una biblioteca como jQuery —o incluso de un framework, como Vue—, por lo que viene a ser más abordable cuando construimos una aplicación completamente con React.

- -

Además, muchos de los beneficios de la experiencia del desarrollador de una aplicación React, como codificar interfaces con JSX, requieren un proceso de compilación. Agregar un compilador como Babel a un sitio web hace que el código se ejecute de manera lenta, por lo que los desarrolladores a menudo configuran dichas herramientas con un paso de compilación. Podrá decirse que React tiene un gran requisito de herramientas, pero se puede aprender.

- -

Este artículo se enfocará en el caso de uso de usar React para renderizar la interfaz de usuario completa de una aplicación, usando herramientas proporcionadas por la propia herramienta de Facebook create-react-app.

- -

¿Cómo React usa JavaScript?

- -

React utiliza características modernas de JavaScript para muchos de sus patrones. El punto donde más se aleja de JavaScript se refleja en el uso de la sintaxis JSX, la que, a su vez, amplía la sintaxis de JavaScript para que código similar a HTML pueda formar parte del mismo. Por ejemplo:

- -
const heading = <h1>Mozilla Developer Network</h1>;
- -

Esta constante "heading" se conoce como una expresión JSX. React puede usarla para representar la etiqueta <h1> en nuestra aplicación.

- -

Supongamos que, por razones semánticas, queremos envolver nuestro encabezado en una etiqueta <header>. El enfoque JSX nos permite anidar nuestros elementos entre sí, tal como lo hacemos con HTML:

- -
const header = (
-  <header>
-    <h1>Mozilla Developer Network</h1>
-  </header>
-);
- -
-

Nota: Los paréntesis en el fragmento anterior no son exclusivos de JSX y no tienen ningún efecto en la aplicación. Son una señal para ti (y tu computadora) de que las múltiples líneas de código que contiene forman parte de una misma expresión. También podríamos escribir la expresión del encabezado de esta manera:

- -
const header = <header>
-    <h1>Mozilla Developer Network</h1>
-</header>
- -

Sin embargo, esto luce un poco raro, ya que la etiqueta <header> que inicia la expresión no tiene sangría en la misma posición que su correspondiente etiqueta de cierre.

-
- -

Por supuesto, tu navegador no puede leer JSX sin ayuda. Al compilarla (usando una herramienta como Babel o Parcel), nuestra expresión de encabezado se vería así:

- -
const header = React.createElement("header", null,
-  React.createElement("h1", null, "Mozilla Developer Network")
-);
- -

Es posible omitir el paso de la compilación y usar React.createElement() para codificar la interfaz de usuario tú mismo. Sin embargo, al hacer esto, perderías el beneficio declarativo de JSX y tu código resultaría más difícil de leer. La compilación es un paso adicional en el proceso de desarrollo, pero muchos desarrolladores de la comunidad React piensan que la legibilidad de JSX vale la pena. Además, las herramientas populares hacen que la compilación de JSX a JavaScript sea parte de su proceso de configuración. No tendrás que configurar la compilación tú mismo, a menos que así lo quieras.

- -

Dado que JSX es una combinación de HTML y JavaScript, algunos desarrolladores lo encuentran intuitivo. Otros dicen que su naturaleza combinada lo hace confuso. Sin embargo, una vez que te sientas cómodo con JSX, te permitirá crear interfaces de usuario de forma más rápida e intuitiva, y permitirá que otros comprendan mejor tu base de código de un vistazo.

- -

Para leer más sobre JSX, consulta el artículo JSX en profundidad del equipo de React.

- -

Configurando tu primera aplicación React

- -

Hay muchas maneras de usar React, pero usaremos la herramienta create-react-app de la interfaz de línea de comandos (CLI, por sus siglas en inglés), como se mencionó anteriormente, la cual acelera el proceso de desarrollo de una aplicación React al instalar algunos paquetes y crear algunos archivos por ti, manejando las herramientas descritas anteriormente.

- -

Es posible agregar React a un sitio website sin usar create-react-app copiando algunos elementos <script> en un archivo HTML, pero la CLI de create-react-app es un punto de partida común para las aplicaciones React. Su uso te permitirá dedicar más tiempo a crear tu aplicación y menos a preocuparte por la configuración.

- -

Requerimientos

- -

Para usar create-react-app, necesitas tener instalado Node.js. Se recomienda utilizar la versión de soporte a largo plazo (LTS, por sus siglas en inglés). Node incluye npm (el administrador de paquetes de nodos), y npx (el ejecutor de paquetes de nodos).

- -

También puedes usar el administrador de paquetes Yarn como alternativa, pero asumiremos que estarás usando npm en estos tutoriales. Consulta Conceptos básicos de administración de paquetes para obtener más información sobre npm y yarn.

- -

Si estás usando Windows, necesitarás instalar algún software para darle paridad con el terminal Unix/macOS, y así poder usar los comandos del terminal mencionados en este tutorial. Gitbash (el cual viene como parte del conjunto de herramientas git para Windows) o el Subsistema de Windows para Linux (WSL, por sus siglas en inglés) son ambos adecuados. Consulte el Curso intensivo de línea de comandos para obtener más información sobre estos y sobre los comandos de terminal en general.

- -

También ten en cuenta que React y ReactDOM producen aplicaciones que solo funcionan en un conjunto bastante moderno de navegadores (IE9+ a través de algunos polyfills). Se recomienda el uso de un navegador moderno como Firefox, Safari o Chrome cuando trabajes con estos tutoriales.

- -

Además, consulta lo siguiente para obtener más información:

- - - -

Inicializando tu aplicación

- -

create-react-app recibe un argumento: el nombre que te gustaría darle a tu aplicación. create-react-app usa este nombre para crear una nueva carpeta, luego crea los archivos necesarios dentro de la misma. Asegúrate de cd al lugar donde te gustaría que se guarde tu aplicación en tu disco duro, luego ejecuta lo siguiente en tu terminal:

- -
npx create-react-app moz-todo-react
- -

Esto crea una carpeta moz-todo-react, y hace varias cosas dentro de la misma:

- - - -
-

Nota: si tienes instalado el administrador de paquetes yarn, create-react-app lo usará por defecto en lugar de npm. Si tienes ambos administradores de paquetes instalados y quieres, explícitamente, usar npm, puedes agregar el indicador --use-npm cuando ejecutes create-react-app:

- -
npx create-react-app moz-todo-react --use-npm
-
- -

create-react-app mostrará una serie de mensajes en tu terminal mientras opera, ¡lo cual es normal! Esto puede tardar unos minutos, por lo que ahora podría ser un buen momento para preparar una taza de té.

- -

Una vez completado el proceso, cd a la carpeta moz-todo-react y ejecuta el comando npm start. Los scripts instalados por create-react-app comenzarán a servirse en un servidor local en localhost:3000 y abrirán la aplicación en una nueva pestaña del navegador. Tu navegador mostrará algo como esto:

- -

Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application

- -

Estructura de la aplicación

- -

create-react-app nos provee todo lo que necesitamos para desarrollar una aplicación React. Su estructura inicial de archivos luce así:

- -
moz-todo-react
-├── README.md
-├── node_modules
-├── package.json
-├── package-lock.json
-├── .gitignore
-├── public
-│   ├── favicon.ico
-│   ├── index.html
-│   └── manifest.json
-└── src
-    ├── App.css
-    ├── App.js
-    ├── App.test.js
-    ├── index.css
-    ├── index.js
-    ├── logo.svg
-    └── serviceWorker.js
- -

La carpeta src es donde pasaremos la mayor parte de nuestro tiempo, ya que es donde reside el código fuente de nuestra aplicación.

- -

La carpeta public contiene archivos que serán leidos por tu navegador mientras desarrollas la aplicación; el más importante de ellos es index.html. React introduce tu código en este archivo de manera que tu navegador pueda ejecutarlo. Hay alguno que otro marcado que ayuda a create-react-app a funcionar, así que ten cuidado de no editarlo a menos que sepas lo que estás haciendo. Deberías cambiar el texto dentro del elemento <title> en este archivo para reflejar el título de tu aplicación. ¡Los títulos de página precisos son importantes para la accesibilidad!

- -

La carpeta public también será publicada cuando crees y despliegues una versión para producción de tu aplicación. No cubriremos el despliegue en este tutorial, pero deberías poder usar una solución similar a la descrita en nuestro tutorial Despliegue de nuestra aplicación.

- -

El archivo package.json contiene información sobre nuestro proyecto que Node.js/npm usa para mantenerlo organizado. Este archivo no es exclusivo de las aplicaciones React; create-react-app simplemente lo completa. No es necesario que entiendas este archivo en lo absoluto para completar este tutorial, sin embargo, si deseas obtener más información al respecto, puedes leer What is the file `package.json`? en NodeJS.org; también hablamos de ello en nuestro tutorial Conceptos básicos de administración de paquetes.

- -

Explorando nuestro primer componente React — <App/>

- -

En React, un componente es un módulo reutilizable que representa una parte de nuestra aplicación. Estas partes pueden ser grandes o pequeñas, pero, generalmente, están bien definidas: tienen un propósito único y obvio.

- -

Abramos src/App.js, ya que nuestro navegador nos pide que lo editemos. Este archivo contiene nuestro primer componente —App—, y algunas otras líneas de código:

- -
import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-export default App;
- -

El archivo App.js se compone de tres partes principales: algunas declaraciones import en la parte superior, el componente App en el medio, y una declaración export en la parte inferior. La mayoría de los componentes de React siguen este patrón.

- -

Declaraciones import

- -

Las declaraciones import en la parte superior del archivo le permiten a App.js utilizar código que ha sido definido en otra parte. Revisemos estas declaraciones más detalladamente.

- -
import React from 'react';
-import logo from './logo.svg';
-import './App.css';
- -

La primera declaración importa la biblioteca React como tal. Dado que React convierte el JSX que escribimos en React.createElement(), todos los componentes de React deben importar el módulo React. Si omites este paso, tu aplicación producirá un error.

- -

La segunda declaración importa un logotipo de './logo.svg'. Observa el uso de ./ al principio de la ruta y la extensión .svg al final — estos nos indican que el archivo es local y que no es un archivo JavaScript. De hecho, el archivo logo.svg reside en nuestra carpeta raíz.

- -

No hace falta proveer una ruta o extensión al importar el módulo React, ya que este no es un archivo local. En cambio, aparece como una dependencia en nuestro archivo package.json. ¡Ten cuidado con esta distinción mientras trabajas en esta lección!

- -

La tercera declaración importa el CSS relacionado con nuestro componente App. Observa que no hay nombre de variable ni de directiva from. Esta sintaxis de importación en particular no es propia de la sintaxis de módulos de JavaScript. Esta proviene de Webpack, la herramienta que create-react-app usa para agrupar todos nuestros archivos JavaScript y enviarlos al navegador.

- -

El componente App

- -

Después de las importaciones, tenemos una función llamada App. Mientras que una mayor parte de la comunidad JavaScript prefiere nombres tipo camel-case como helloWorld, los componentes de React usan nombres de variables tipo pascal-case, como HelloWorld, para dejar en claro que un determinado elemento JSX es un componente de React y no una etiqueta HTML normal. Si llegaras a cambiar el nombre de la función App por app, tu navegador te mostraría un error.

- -

Vamos a darle un vistazo más detallado a App.

- -
function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
- -

La función App devuelve una expresión JSX. Esta expresión define lo que tu navegador presenta en última instancia al DOM.

- -

Algunos elementos de la expresión tienen atributos, los cuales se escriben igual que en HTML, siguiendo un patrón de atributo="valor". En la línea 3, la etiqueta de apertura <div> tiene un atributo className. Este es equivalente al atributo class de HTML, pues dado que JSX es JavaScript, no podemos usar la palabra class —la cual está reservada—, lo que significa que JavaScript ya la usa para un propósito específico y causaría problemas en nuestro código. Algunos otros atributos HTML también se escriben de manera diferente en JSX (de como se escriben en HTML), por el mismo tipo de razón. Los revisaremos a medida que nos crucemos con estos.

- -

Tómate un momento para cambiar la etiqueta <p> en la línea 6 para que diga "¡Hola, mundo!", luego guarda los cambios. Notarás que este cambio se procesa inmediatamente en el servidor de desarrollo que se ejecuta en http://localhost:3000 en tu navegador. Ahora elimina la etiqueta <a> y guarda los cambios; el enlace "Learn React" habrá desaparecido.

- -

Ahora, tu componente App debería lucir así:

- -
function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          ¡Hola, mundo!
-        </p>
-      </header>
-    </div>
-  );
-}
- -

Declaraciones export

- -

En la parte inferior del archivo App.js, la declaración export default App hace que nuestro componente App esté disponible para otros módulos.

- -

Explorando el index

- -

Vamos a abrir el archivo src/index.js, ya que es en este donde el componente App está siendo utilizado. Este archivo es el punto de entrada para nuestra aplicación, e inicialmente luce así:

- -
import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
-
-ReactDOM.render(<App />, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
- -

Al gual que App.js, el archivo comienza importando todos los módulos JS y otros activos que necesita para ejecutarse. src/index.css contiene estilos globales que se aplican a toda nuestra aplicación. Podemos ver que nuestro componente App también es importado acá; su importación es posible gracias a la declaración export en la parte inferior de App.js.

- -

En la línea 7, se invoca la función ReactDOM.render() de React con dos argumentos:

- - - -

Todo esto le indica a React que queremos renderizar nuestra aplicación React con el componente App como raíz, o primer componente.

- -
-

Nota: En JSX, los componentes de React y los elementos HTML deben tener, obligatoriamente, barras diagonales de cierre. Escribir solo <App> o solo <img> provocará un error.

-
- -

Los Service workers son interesantes piezas de código que ayudan al rendimiento de las aplicaciones y permiten que las funciones de tus aplicaciones web funcionen sin conexión, pero estas no están dentro del alcance de este artículo. Puedes eliminar la línea 5, así como las líneas 9 a 12.

- -

Finalmente, tu archivo index.js debería verse así:

- -
import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-
-ReactDOM.render(<App />, document.getElementById('root'));
- -

Variables y props

- -

A continuación, usaremos algunas de nuestras habilidades de JavaScript para lograr sentirnos un poco más cómodos editando componentes y trabajando con datos en React. Hablaremos sobre cómo se usan las variables dentro de JSX, e introduciremos props, que son una forma de pasar datos a un componente (al que luego se puede acceder usando variables).

- -

Variables en JSX

- -

De vuelta en App.js, enfoquémonos en la línea 9:

- -
<img src={logo} className="App-logo" alt="logo" />
- -

Aquí, el valor del atributo src de la etiqueta <img /> está entre llaves. Así es como JSX reconoce las variables. Al encontrarse con {logo}, React sabrá que nos referimos a la importación del logotipo en la línea 2 de nuestra aplicación, y luego recuperará el archivo del logo y lo renderizará.

- -

Vamos a intentar crear una variable propia. Antes de la declaración return de App, agrega const subject = "React";. Tu componente App ahora debería verse así:

- -
function App() {
-  const subject = "React";
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          ¡Hola, mundo!
-        </p>
-      </header>
-    </div>
-  );
-}
- -

Cambia la línea 8, de manera que se use la variable subject en vez de la palabra "mundo", así:

- -
function App() {
-  const subject = "React";
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          ¡Hola, {subject}!
-        </p>
-      </header>
-    </div>
-  );
-}
- -

Al guardar, tu navegador debería mostrar "¡Hola, React!" en vez de "¡Hola, mundo!"

- -

Las variables son convenientes, pero la que acabamos de configurar no hace gran uso de las funciones de React. Es allí donde entran los props.

- -

Props de componentes

- -

Un prop es cualquier dato que se pasa a un componente de React. Los props se escriben dentro de las llamadas a los componentes y utilizan la misma sintaxis que los atributos HTML: prop="value". Abramos index.js y démosle a la llamada de nuestro <App/> su primer prop.

- -

Agrega un prop de subject a la llamada del componente <App />, con un valor de Clarice. Al terminar, tu código debería verse similar a este:

- -
ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));
- -

Volviendo a App.js, vamos a revisar nuevamente la función App como tal, la cual se lee así (acortando la declaración return por razones de brevedad):

- -
function App() {
-  const subject = "React";
-  return (
-    // return statement
-  );
-}
- -

Cambia la declaración de la función App de manera que tome props como un parámetro, y elimina la constante subject. Al igual que cualquier otro parámetro de una función, puedes pasar props a console.log() para imprimirlos en la consola de tu navegador. Continúa, haciendo esto antes de la declaración return, así:

- -
function App(props) {
-  console.log(props);
-  return (
-    // return statement
-  );
-}
- -

Guarda tu archivo y revisa la consola JavaScript de tu navegador. Deberías ver registrado algo como esto:

- -
Object { subject: "Clarice" }
- -

La propiedad subject del objeto corresponde al prop subject que agregamos a la llamada de nuestro componente <App />, y la cadena Clarice corresponde a su valor. Los props de componentes en React siempre se recopilan en objetos de esta manera.

- -

Ahora que subject es uno de nuestros props, usémoslo en App.js. Cambia la constante subject de manera que, en vez de definirla como la cadena React, estés leyendo el valor de props.subject. También puedes eliminar console.log(), si así lo quieres.

- -
function App(props) {
-  const subject = props.subject;
-  return (
-    // return statement
-  );
-}
- -

Una vez guardes, la aplicación debería darte la bienvenida con un "¡Hola, Clarice!". Si regresas a index.js, editas el valor de subject, y guardas, el texto cambiará.

- -

Resumen

- -

Esto nos lleva al final de nuestra introducción a React, la cual incluye cómo instalarlo de manera local, cómo crear una aplicación inicial, y cómo funcionan los conceptos básicos. En el próximo artículo comenzaremos a construir nuestra primera aplicación como tal: una lista de tareas pendientes. Sin embargo, antes de ello, recapitulemos algunas de las cosas que hemos aprendido.

- -

En React:

- - - -

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

- -

En este módulo

- - diff --git a/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/vue_primeros_pasos/index.html b/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/vue_primeros_pasos/index.html deleted file mode 100644 index ea24ac2a81..0000000000 --- a/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/vue_primeros_pasos/index.html +++ /dev/null @@ -1,294 +0,0 @@ ---- -title: Primeros pasos con Vue -slug: >- - Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/Vue_primeros_pasos -translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
- -

Ahora vamos a introducir Vue, el tercero de nuestros frameworks. En este articulo vamos a ver un poco del background de Vue, aprenderemos cómo instalarlo y a crear un nuevo proyecto, estudiar la estructura de alto nivel de todo el proyecto y un componente individual, sabremos como correr el proyecto localmente, y tenerlo preparado para empezar a construir nuestro ejemplo.

- - - - - - - - - - - - -
Pre-requisitos: -

Familiaridad con los motores de los lenguajes  HTML, CSS, y  JavaScript languages, conocimiento del terminal/command line.

- -

Los componentes Vue son escritos como una combinacion de objectos Javascript que administran los datos de la app y una sintaxis de plantilla basada en HTML que se enlaza con la estructura DOM subyacente. Para la instalación, y para usar algunas de las caracteristicas mas avanzadas de Vue (como Componentes de archivos simples o renderizado de funciones), vas a necesitar un terminar con node + npm instalados.

-
Objetivo:Configurar un entorno de desarrollo local de Vue, crear una app de inicio y entender los principios de su funcionamiento.
- -

Un Vue más claro

- -

Vue es un framework moderno de Javascript que proveé facilidades muy utiles para el mejoramiento progresivo- al contrario de otros frameworks, puedes usar Vue para mejorar un HTML exstente. Esto permite usar Vue como un remplazo agregado para una libreria como JQuery.

- -

Habiendo dicho esto, tambien puedes usar Vue para escribir completamente una aplicación de una sola página(SPAs).This allows you to create markup managed entirely by Vue, which can improve developer experience and performance when dealing with complex applications. It also allows you to take advantage of libraries for client-side routing and state management when you need to. Additionally, Vue takes a "middle ground" approach to tooling like client-side routing and state management. While the Vue core team maintains suggested libraries for these functions, they are not directly bundled into Vue. This allows you to select a different routing/state management library if they better fit your application.

- -

In addition to allowing you to progressively integrate Vue into your applications, Vue also provides a progressive approach to writing markup. Like most frameworks, Vue lets you create reusable blocks of markup via components. Most of the time, Vue components are written using a special HTML template syntax. When you need more control than the HTML syntax allows, you can write JSX or plain JavaScript functions to define your  components.

- -

As you work through this tutorial, you might want to keep the Vue guide and API documentation open in other tabs, so you can refer to them if you want more information on any sub topic.
- For a good (but potentially biased) comparison between Vue and many of the other frameworks, see Vue Docs: Comparison with Other Frameworks.

- -

Installation

- -

To use Vue in an existing site, you can drop one of the following <script> elements onto a page. This allows you to start using Vue on existing sites, which is why Vue prides itself on being a progressive framework. This is a great option when migrating an existing project using a library like JQuery to Vue. With this method, you can use a lot of the core features of Vue, such as the attributes, custom components, and data-management.

- - - -

However, this approach has some limitations. To build more complex apps, you’ll want to use the Vue NPM package. This will let you use advanced features of Vue and take advantage of bundlers like WebPack. To make building apps with Vue easier, there is a CLI to streamline the development process. To use the npm package & the CLI you will need:

- -
    -
  1. Node.js 8.11+ installed.
    2. -
  2. npm or yarn.
    3. -
- -
-

Note: If you don't have the above installed, find out more about installing npm and Node.js here.

-
- -

To install the CLI, run the following command in your terminal:

- -
npm install --global @vue/cli
- -

Or if you'd prefer to use yarn:

- -
yarn global add @vue/cli
- -

Once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run vue create <project-name>. The CLI will then give you a list of project configurations you can use. There are a few preset ones, and you can make your own. These options let you configure things like TypeScript, linting, vue-router, testing, and more.

- -

We’ll look at using this below.

- -

Initializing a new project

- -

To explore various features of Vue, we will be building up a sample todo list app. We'll begin by using the Vue CLI to create a new app framework to build our app into. Follow the steps below:

- -
    -
  1. In terminal, cd to where you'd like to create your sample app, then run vue create moz-todo-vue.
    2. -
  2. Use the arrow keys and Enter to select the "Manually select features" option.
    3. -
  3. The first menu you’ll be presented with allows you to choose which features you want to include in your project. Make sure that "Babel" and "Linter / Formatter" are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press Enter to proceed.
    4. -
  4. Next you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit Enter again. This will help us catch common errors, but not be overly opinionated.
    5. -
  5. Next you are asked to configure what kind of automated linting we want. Select "Lint on save". This will check for errors when we save a file inside the project. Hit Enter to continue.
    6. -
  6. Now, you will select how we want your config files to be managed. "In dedicated config files" will put your config settings for things like ESLint into their own, dedicated files. The other option, "In package.json", will put all of your config settings into the app's package.json file. Select "In dedicated config files" and push Enter.
    7. -
  7. Finally, you are asked if you want to save this as a preset for future options. This is entirely up to you. If you like these settings over the existing presets and want to use them again, type y , otherwise type n.
    8. -
- -

The CLI will now begin scaffolding out your project, and installing all of your dependencies.

- -

If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag --packageManager=<package-manager>, when you run vue create.  So if you wanted to create the moz-todo-vue project with npm and you'd previously chosen yarn, you’d run vue create moz-todo-vue --packageManager=npm.

- -
-

Note: We've not gone over all of the options here, but you can find more information on the CLI in the Vue docs.

-
- -

Project structure

- -

If everything went successfully, the CLI should have created a series of files and directories for your project. The most significant ones are as follows:

- - - -
-

Note: Depending on the options you select when creating a new project, there might be other directories present (for example, if you choose a router, you will also have a views directory).

-
- -

.vue files (single file components)

- -

Like in many front-end frameworks, components are a central part of building apps in Vue. These components let you break a large application into discrete building blocks that can be created and managed separately, and transfer data between each other as required. These small blocks can help you reason about and test your code.

- -

While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using Single File Components, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in .vue. These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components.

- -

As a bonus, projects created with the Vue CLI are configured to use .vue files with Webpack out of the box. In fact, if you look inside the src folder in the project we created with the CLI, you'll see your first .vue file: App.vue.

- -

Let's explore this now.

- -

App.vue

- -

Open your App.vue file — you’ll see that it has three parts: <template>, <script>, and <style>, which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.

- -

<template> contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.

- -
-

Note: By setting the lang attribute on the <template> tag, you can use Pug template syntax instead of standard HTML — <template lang="pug">. We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.

-
- -

<script> contains all of the non-display logic of your component. Most importantly, your <script> tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a render() function.

- -

In the case of App.vue, our default export sets the name of the component to app and registers the HelloWorld component by adding it into the components property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.

- -
import HelloWorld from './components/HelloWorld.vue';
-
-export default {
-  name: 'app',
-  components: {
-    //You can register components locally here.
-    HelloWorld
-  }
-};
- -
-

Note: If you want to use TypeScript syntax, you need to set the lang attribute on the <script> tag to signify to the compiler that you're using TypeScript — <script lang="ts">.

-
- -

<style> is where you write your CSS for the component. If you add a scoped attribute — <style scoped> — Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.

- -
-

Note: If you select a CSS pre-processor when creating the project via the CLI, you can add a lang attribute to the <style> tag so that the contents can be processed by Webpack at build time. For example, <style lang="scss"> will allow you to use SCSS syntax in your styling information.

-
- -

Running the app locally

- -

The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a serve command to the project’s package.json file as an npm script, so you can easily run it.

- -

In your terminal, try running npm run serve (or yarn serve if you prefer yarn). Your terminal should output something like the following:

- -
INFO  Starting development server...
-98% after emitting CopyPlugin
-
- DONE  Compiled successfully in 18121ms
-
-  App running at:
-  - Local:   <http://localhost:8080/>
-  - Network: <http://192.168.1.9:8080/>
-
-  Note that the development build is not optimized.
-  To create a production build, run npm run build.
- -

If you navigate to the “local” address in a new browser tab (this should be something like http://localhost:8080 as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.

- -

default vue app render, with vue logo, welcome message, and some documentation links

- -

Making a couple of changes

- -

Let's make our first change to the app — we’ll delete the Vue logo. Open the App.vue file, and delete the <img> element from the template section:

- -
<img alt="Vue logo" src="./assets/logo.png">
- -

If your server is still running, you should see the logo removed from the rendered site almost instantly. Let’s also remove the HelloWorld component from our template.

- -

First of all delete this line:

- -
<HelloWorld msg="Welcome to Your Vue.js App"/>
- -

If you save your App.vue file now, the rendered app will throw an error because we’ve registered the component but are not using it. We also need to remove the lines from inside the <script> element that import and register the component:

- -

Delete these lines now:

- -
import HelloWorld from './components/HelloWorld.vue'
- -
components: {
-  HelloWorld
-}
- -

Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside <template>.

- -

Let’s add a new <h1> inside <div id="app">. Since we’re going to be creating a todo list app below, let's set our header text to "To-Do List". Add it like so:

- -
<template>
-  <div id="app">
-    <h1>To-Do List</h1>
-  </div>
-</template>
- -

App.vue will now show our heading, as you'd expect.

- -

Summary

- -

Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes.

- -

With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos.

- -

In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.

- -

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

- -

In this module

- - diff --git a/files/es/learn/herramientas_y_pruebas/understanding_client-side_tools/index.html b/files/es/learn/herramientas_y_pruebas/understanding_client-side_tools/index.html deleted file mode 100644 index 6221b0382f..0000000000 --- a/files/es/learn/herramientas_y_pruebas/understanding_client-side_tools/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Understanding client-side web development tools -slug: Learn/Herramientas_y_pruebas/Understanding_client-side_tools -tags: - - Aprender - - CSS - - Despliegue - - HTML - - Herramientas - - JavaScript - - Novatos - - Transformación - - client-side - - lado del cliente -translation_of: Learn/Tools_and_testing/Understanding_client-side_tools ---- -
{{LearnSidebar}}
- -

Las herramientas del lado del cliente (client-side en inglés) pueden ser intimidantes, pero esta serie de artículos tiene como propósito ilustrar el propósito de algunos de los tipos de herramientas client-side, explicar las herramientas que puedes integrar, cómo instalarlas usando administradores de paquetes y cómo controlarlas usando la línea de comandos. Terminanos esta sección dando un ejemplo de cadena de herramientas para mostrarte cómo puedes ser más productivo

- -

Inicia ahora con nuestra "Introducción a las herraminetas client-side"

- -

Requisitos previos

- -

Debes aprender el núcleo básico de los lenguajes HTML, CSS y JavaScript, antes de intentar usar las herramientas aquí descritas.

- -
-

¿Quieres convertirte en un desarrollador front-end?

- -

Tenemos un curso que incluye toda la información esencial que necesitas para lograr tu objetivo.

-Inicia ahora
- -

Guías

- -
-
1. Introducción a las herramientas client-side
-
En este artículo damos una introducción a las herramientas modernas de la web, los tipos de herramientas disponibles, donde te las puedes encontrar en el cliclo de desarrollo de aplicaciones web y como buscar ayuda con las herramientas individuales.
-
2. Introducción a la linea de comandos
-
En tu proceso de desarrollo seguramente vas a requeria correr algunos comandos en la terminal (o "línea de comandos"). Este artículo da una introducción a la terminal, los comandos básicos que vas a necesitar para utilizarla, cómo integrar diferentes comandos y cómo agregar tu propia interfaz de línea de comandos (command line interface - CLI en inglés).
-
3. Introducción al manejo de paquetes
-
En este artículo exploramos los sistemas de administración de paquetes en detalle para entender cómo los podemos usar en nuestros proyectos, ya sea para instalar dependencias a nuestro proyecto, descargar actualizaciones y mucho más.
-
4. Introduciendo una cadena de herramientas completa
-
En los últimos dos artículos en esta serie vamos a solidificar tu conocimiento de las herramientas para el desarrollo web construyendo una cadena de herramients. Iniciaremos configurando un ambiente de desarrollo y colocando herramentas de transformación para desplegar nuestra aplicación en Netlify. En este artículo introducimos un estudio de caso, configuramos nuestro ambiente de desarrollo y configuramos herramientas de transformación de código.
-
5. Desplegando nuestra aplicación
-
En el artículo final de esta serie, utilizamos nuestra cadena de herramientas que construimos en el artículo previo y la extendemos para desplegar nuestra aplicación muestra. Subimos nuestro código a GitHub, desplegamos usando Netlify e incluso te enseñamos a realizar una prueba en el proceso.
-
diff --git a/files/es/learn/html/como/index.html b/files/es/learn/html/como/index.html deleted file mode 100644 index 095e5bc54e..0000000000 --- a/files/es/learn/html/como/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Solución de problemas comunes de HTML -slug: Learn/HTML/como -tags: - - CodificacióndeSecuenciadeComandos - - HTML -translation_of: Learn/HTML/Howto ---- -

{{LearnSidebar}}

- -

Los siguientes enlaces brindan soluciones puntuales a los problemas más comunes a los que te enfrentarás a diario en HTML.

- -
-
-

Estructura básica

- -

La principal aplicación de HTML es la estructuración del documento. Si eres nuevo en HTML debes empezar aquí.

- - - -

Semántica básica textos

- -

HTML se especializa en suministrar información semántica del documento, así que HTML soluciona muchas dudas que puede tener sobre como transmitir su mensaje a través de un documento.

- - -
- -
-

Hipervínculos

- -

Uno de las principales razones por las que HTML hace más fácil la navegación son los {{Glossary("hyperlink", "hipervínculos")}}, que pueden ser usados de diferentes formas:

- - - -

Imágenes y multimedia

- - - -

Scripts y estilización

- -

HTML únicamente define la estructura del documento. Para solucionar los problemas de presentación usamos {{glossary("CSS")}}, o usamos scripts para hacer la página interactiva.

- - - -

Contenido integrado

- - -
-
- -

Problemas avanzados o raros

- -

Más allá de lo basico, HTML es muy rico y ofrece características avanzadas para solucionar problemas complejos. Estos artículos te ayudarán a abordar estos casos menos comunes:

- -
-
-

Formularios

- -

Los formularios son una estructura compleja en HTML para enviar datos desde una pagina web al servidor. Te animamos a que revises la guia completa. Aquí es por donde deberías empezar:

- - - -

Información tabular

- -

Alguna información, llamada datos tabulares, necesita ser organizada en tablas mediante filas y columnas. Siendo ésta una de las estructuras más complejas de HTML, no es fácil dominarla:

- - - -

Representación de datos

- - - -

Rendimiento

- - -
- -
-

Semántica avanzada de texto

- - - -

Imágenes y multimedia avanzada

- - - -

Internacionalización

- -

HTML no es monolingüe. Éste proporciona herramientas para manejar problemas comunes de internacionalización.

- - -
-
- -

     

diff --git a/files/es/learn/html/como/usando_atributos_de_datos/index.html b/files/es/learn/html/como/usando_atributos_de_datos/index.html deleted file mode 100644 index 7629974833..0000000000 --- a/files/es/learn/html/como/usando_atributos_de_datos/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Uso de atributos de datos -slug: Learn/HTML/como/Usando_atributos_de_datos -translation_of: Learn/HTML/Howto/Use_data_attributes ---- -
{{LearnSidebar}}
- -

HTML5 está diseñado de forma tal que sea fácil extender los datos asociados a un elemento en particular sin necesidad de que tengan un significado definido. Los atributos data-*  permiten almacenar información adicional sobre un elemento HTML cualquiera sin tener que recurrir a artilugios tales como la utilización de atributos no estándar, propiedades adicionales en el DOM o {{domxref("Node.setUserData()")}}.

- -

Sintaxis HTML

- -

La sintáxis es simple. Un atributo cualquiera cuyo nombre comience con data-es un atributo de datos. Supongamos que tenemos un artículo y deseamos almacenar información adicional que no tiene ninguna representación visual. En ese caso, alcanza con que hagamos uso de los atributos data:

- -
<article
-  id="electriccars"
-  data-columns="3"
-  data-index-number="12314"
-  data-parent="cars">
-...
-</article>
- -

Acceso a través de JavaScript

- -

Leer los valores de estos atributos en JavaScript también es muy sencillo. Puede usar {{domxref("Element.getAttribute", "getAttribute()")}} con su nombre HTML completo para leerlos, pero el estándar define una forma más simple: un {{domxref("DOMStringMap")}} puede leer a través de una propiedad {{domxref("HTMLElement.dataset", "dataset")}}.

- -

Para obtener un atributo data a través del dataset del objeto, obtenga la propiedad por la parte del nombre del atributo despues de data- (tenga en cuenta que los guiones son convertidos en camelCase).

- -
var article = document.getElementById('electriccars');
-
-article.dataset.columns // "3"
-article.dataset.indexNumber // "12314"
-article.dataset.parent // "cars"
- -

Cada propiedad es una cadena y se puede leer y escribir. En el caso anterior, establecer article.dataset.columns = 5 cambiaría ese atributo a "5".

- -

Acceso a través de CSS

- -

Tenga en cuenta que, debido a que los atributos de datos son atributos simples de HTML, incluso puede acceder a ellos desde CSS. Por ejemplo, para mostrar los data-parent en el artículo, puede usar el contenido generado en CSS con la función {{cssxref("attr")}}:

- -
article::before {
-  content: attr(data-parent);
-}
- -

También puede usar los selectores de atributos en CSS para cambiar los estilos de acuerdo a las priopiedades de datos:

- -
article[data-columns='3'] {
-  width: 400px;
-}
-article[data-columns='4'] {
-  width: 600px;
-}
- -

Puede ver todo esto trabajando junto en este ejemplo de JSBin.

- -

Los atributos de datos también se pueden almacenar para que contengan información que cambia constantemente, como los puntajes en un juego. Usando los selectores de CSS y el acceso a JavaScript aquí, esto le permite crear algunos efectos ingeniosos sin tener que escribir sus propias rutinas de visualización. Consulte este screencast para ver un ejemplo utilizando contenido generado y transacciones CSS (Ejemplo JSBin).

- -

Los valores de datos son cadenas de caracteres. Los valores numéricos deben ser citados en el selector para que el estilo surta efecto.

- -

Problemas

- -

No almacene el contenido que debería ser visible y accesible en los atributos de datos, ya que las tecnologías de asistencia, no pueden acceder a ellos. Ademas, los rastreadores de búsqueda no pueden indexar los valores de los atributos de datos.

- -

Los principales problemas a considerar son el soporte y rendimiento en Internet Explorer. Internet Explorer 11 y superiores, proporcionan soporte para el estándar, pero todas las versiones anteriores no son compatibles con dataset. Para admitir IE 10 e inferiores, debe acceder a los atributos de datos con {{domxref("Element.getAttribute", "getAttribute()")}} en su lugar. Ademas, el rendimiento de lectura de los atributos de datos en comparación con el almacenamiento de estos datos en un objeto JS normal es deficiente.

- -

Dicho esto, sin embargo, para metadatos asociados a elementos personalizados, son una gran solución.

- -

En Firefox 49.0.2 (y quizás versiones anteriores), los atributos de datos que exceden los 1022 caracteres no serán leídos por Javascript (EcmaScript 4).

- -

Ver también

- - diff --git a/files/es/learn/html/forms/como_crear_widgets_de_formularios_personalizados/index.html b/files/es/learn/html/forms/como_crear_widgets_de_formularios_personalizados/index.html deleted file mode 100644 index 73ae6e6590..0000000000 --- a/files/es/learn/html/forms/como_crear_widgets_de_formularios_personalizados/index.html +++ /dev/null @@ -1,786 +0,0 @@ ---- -title: Cómo crear widgets de formularios personalizados -slug: Learn/HTML/Forms/como_crear_widgets_de_formularios_personalizados -translation_of: Learn/Forms/How_to_build_custom_form_controls ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
- -

Hay muchos casos donde los widgets de formularios HTML disponibles simplemente no son suficientes. si desea establecer un estilo avanzado en algunos widgets como el elemento {{HTMLElement("select")}} o si desea proporcionar comportamientos personalizados, no tiene más opción que crear sus propios widgets.

- -

En este aartículo, veremos cómo construir dicho widget. Para ello, trabajaremos con un ejemplo: Reconstruir el elemento {{HTMLElement("select")}}.

- -
-

Nota: Nos enfocaremos en construir los widgets, no en cómo hacer que el código sea genérico y reutilizable; eso implicaría algún código JavaScript no trivial y manipulación del DOM en un contexto desconocido, y eso está fuera del alcance de este artículo.

-
- -

Diseño, estructura, y semántica

- -

Antes de crear un widget personalizado, debería iniciar por averiguar exactamente qué es lo que desea. Esto le ahorarrá tiempo considerable. En particular, es importante definir claramente todos los estados de su widget. Para hacer esto, es bueno comenzar con un widget existente, cuyos estados y comportamientos son bien conocidos, por lo que simplemente puede imitarlos tanto como sea posible.

- -

En nuestro ejemplo, reconstruiremos el elemento {{HTMLElement("select")}}. Este es el resultado que queremos lograr:

- -

The three states of a select box

- -

Esta captura de pantall muestra los tres estados principales de nuestro widget: el estado normal (a la izquiera); el estado activo (en el centro) y el estado abierto (a la derecha).

- -

En términos de comportamiento, queremos que nuestro widget sea utilizable tanto con un ratón como con un teclado, al igual que cualquier widget nativo. Comencemos por definir cómo el widget llega a cada estado:

- -
-
El widget está en su estado normal cuando:
-
-
    -
  • La página carga
    • -
  • El widget estaba activo y el usuario hace clic en cualquier lugar fuera del widget
    • -
  • El widget estaba activo y el usuario mueve el foco a otro widget usando el teclado
    • -
- -
-

Nota: Mover el foco al rededor de la página generalmente se hace presionando la tecla de tabulación, pero este no es el estándar en todas partes. Por ejemplo, el ciclo a través de enlaces en una página se realiza en Safari de forma predeterminada usando la combinación combinación Opction+Tab.

-
-
-
El widget está en su estado activo cuando:
-
-
    -
  • El usuario hace clic en él
    • -
  • El usuario presiona la tecla tab y obtiene foco
    • -
  • El widget estaba en su estado abierto y el usuario hace clic en el widget.
    • -
-
-
El widget está en su estado abierto cuando:
-
-
    -
  • El widget está en cualquier otro estado diferente a abierto y el usuario hace clic en él.
    • -
-
-
- -

Una vez que sabemos cómo cambiar los estados, es importante definir cómo cambiar el valor del widget:

- -
-
El valor cambia cuando:
-
-
    -
  • El usuario hace clic en una opción cuando el widget está en estado abierto
    • -
  • El usuario pulsa las teclas de flecha hacia arriba o hacia abajocuando el widget está en estado activo
    • -
-
-
- -

Finalmente, definamos cómo se comportarán las opciones del widget:

- - - -

Para los fines de nuestro ejemplo, nos detendremos con eso; sin embargo, si eres un lector cuidadoso, notarás que faltan algunos comportamientos. Por ejemplo, ¿qué crees que sucederá si el usuario pulsa la tecla de tabulación mientras el widget está en estado abierto? La respuesta es ... nada. OK, el comportamiento correcto parece obvio, pero el hecho es que, como no está definido en nuestras especificaciones, es muy fácil pasar por alto este comportamiento. Esto es especialmente cierto en un entorno de equipo cuando las personas que diseñan el comportamiento del widget son diferentes de las que lo implementan.

- -

Otro ejemplo divertido: ¿qué pasará si el usuario pulsa las teclas de flecha hacia arriba o hacia abajo mientras el widget está en estado abierto? Este es un poco más complicado. Si considera que el estado activo y el estado abierto son completamente diferentes, la respuesta es nuevamente "no pasará nada" porque no definimos ninguna interacción de teclado para el estado abierto. Por otro lado, si considera que el estado activo y el estado abierto se superponen un poco, el valor puede cambiar pero la opción definitivamente no se resaltará en consecuencia, una vez más porque no definimos ninguna interacción del teclado sobre las opciones cuando el widget es en su estado abierto (solo hemos definido lo que debería suceder cuando se abre el widget, pero nada después de eso).

- -

En nuestro ejemplo, las especificaciones faltantes son obvias, así que las manejaremos, pero puede ser un problema real en widgets nuevos y exóticos, para los cuales nadie tiene la menor idea de cuál es el comportamiento correcto. Por lo tanto, siempre es bueno pasar tiempo en esta etapa de diseño, porque si defines un comportamiento deficiente u olvidas definir uno, será muy difícil redefinirlo una vez que los usuarios se hayan acostumbrado. Si tiene dudas, solicite las opiniones de los demás y, si tiene el presupuesto para ello, no dude en realizar las pruebas de usuario. Este proceso se llama Diseño UX. Si desea obtener más información sobre este tema, debe consultar los siguientes recursos útiles:

- - - -
-

Nota: Ademas, en la mayoría de los sistemas hay una forma de abrir el elemento {{HTMLElement("select")}} para ver todas las opciones disponibles (esto es lo mismo que hacer clic en el elemento {{HTMLElement("select")}} con un ratón). Esto se logra con Alt+Flecha abajo en Windows y no fué implementado en nuestro ejemplo —pero sería facil hacerlo, ya que el mecanismo ya se implementó para el evento clic.

-
- -

Definiendo la estructura y semántica HTML

- -

Ahora que se ha decidido la funcionalidad básica del widget, es hora de comenzar a construir nuestro widget. El primer paso es definir su estructura HTML y darle una semántica básica. Esto es lo que necesitamos para reconstruir un elemento {{HTMLElement("select")}}:

- -
<!-- Este es nuestro contenedor principal para nuestro widget.
-     El atributo tabindex es lo que permite al usuario enforcar el widget.
-     Veremos más adelante que es mejor configurarlo a través de JavaScript. -->
-<div class="select" tabindex="0">
-
-  <!-- Este contenedor será usado para mostrar el valor actual del widget -->
-  <span class="value">Cherry</span>
-
-  <!-- Este contenedor contedrá todas las opciones disponibles para nuestro widget.
-       Como es una lista, tiene sentido usar el elemento ul. -->
-  <ul class="optList">
-    <!-- Cada opción solo contiene el valor que se mostrará, veremos más tarde
-         cómo manejar el valor real que será enviado con el formulario de datos -->
-    <li class="option">Cherry</li>
-    <li class="option">Lemon</li>
-    <li class="option">Banana</li>
-    <li class="option">Strawberry</li>
-    <li class="option">Apple</li>
-  </ul>
-
-</div>
- -

Tenga en cuanta el uso de nombres de clases; estos identifican cada parte relevante independientemente de los elementos HTML subyacentes reales utilizados. Esto es importante para garantizar que no vinculamos nuestro CSS y JavaScript a una estructura HTML sólida, de modo que podamos realizar cambios despues en la implementación sin romper el código que usa el widget. Pro ejemplo, si desea implementar el equivalente del elemento {{HTMLElement("optgroup")}}.

- -

Creating the look and feel using CSS

- -

Now that we have a structure, we can start designing our widget. The whole point of building this custom widget is to be able to style this widget exactly as we want. To that end, we will split our CSS work into two parts: the first part will be the CSS rules absolutely necessary to have our widget behave like a {{HTMLElement("select")}} element, and the second part will consist of the fancy styles used to make it look the way we want.

- -

Required styles

- -

The required styles are those necessary to handle the three states of our widget.

- -
.select {
-  /* This will create a positioning context for the list of options */
-  position: relative;
-
-  /* This will make our widget become part of the text flow and sizable at the same time */
-  display : inline-block;
-}
- -

We need an extra class active to define the look and feel of our widget when it is in its active state. Because our widget is focusable, we double this custom style with the {{cssxref(":focus")}} pseudo-class in order to be sure they will behave the same.

- -
.select.active,
-.select:focus {
-  outline: none;
-
-  /* This box-shadow property is not exactly required, however it's so important to be sure
-     the active state is visible that we use it as a default value, feel free to override it. */
-  box-shadow: 0 0 3px 1px #227755;
-}
- -

Now, let's handle the list of options:

- -
/* The .select selector here is syntactic sugar to be sure the classes we define are
-   the ones inside our widget. */
-.select .optList {
-  /* This will make sure our list of options will be displayed below the value
-     and out of the HTML flow */
-  position : absolute;
-  top      : 100%;
-  left     : 0;
-}
- -

We need an extra class to handle when the list of options is hidden. This is necessary in order to manage the differences between the active state and the open state that do not exactly match.

- -
.select .optList.hidden {
-  /* This is a simple way to hide the list in an accessible way,
-     we will talk more about accessibility in the end */
-  max-height: 0;
-  visibility: hidden;
-}
- -

Beautification

- -

So now that we have the basic functionality in place, the fun can start. The following is just an example of what is possible, and will match the screenshot at the beginning of this article. However, you should feel free to experiment and see what you can come up with.

- -
.select {
-  /* All sizes will be expressed with the em value for accessibility reasons
-     (to make sure the widget remains resizable if the user uses the
-     browser's zoom in a text-only mode). The computations are made
-     assuming 1em == 16px which is the default value in most browsers.
-     If you are lost with px to em conversion, try http://riddle.pl/emcalc/ */
-  font-size   : 0.625em; /* this (10px) is the new font size context for em value in this context */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* We need extra room for the down arrow we will add */
-  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : .2em solid #000; /* 2px */
-  border-radius : .4em; /* 4px */
-  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  /* The first declaration is for browsers that do not support linear gradients.
-     The second declaration is because WebKit based browsers haven't unprefixed it yet.
-     If you want to support legacy browsers, try http://www.colorzilla.com/gradient-editor/ */
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  /* Because the value can be wider than our widget, we have to make sure it will not
-     change the widget's width */
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  vertical-align: top;
-
-  /* And if the content overflows, it's better to have a nice ellipsis. */
-  white-space  : nowrap;
-  text-overflow: ellipsis;
-}
- -

We don't need an extra element to design the down arrow; instead, we're using the {{cssxref(":after")}} pseudo-element. However, it could also be implemented using a simple background image on the select class.

- -
.select:after {
-  content : "▼"; /* We use the unicode caracter U+25BC; see http://www.utf8-chartable.de */
-  position: absolute;
-  z-index : 1; /* This will be important to keep the arrow from overlapping the list of options */
-  top     : 0;
-  right   : 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  height  : 100%;
-  width   : 2em;  /* 20px */
-  padding-top : .1em; /* 1px */
-
-  border-left  : .2em solid #000; /* 2px */
-  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
-
-  background-color : #000;
-  color : #FFF;
-  text-align : center;
-}
- -

Next, let's style the list of options:

- -
.select .optList {
-  z-index : 2; /* We explicitly said the list of options will always overlap the down arrow */
-
-  /* this will reset the default style of the ul element */
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* This will ensure that even if the values are smaller than the widget,
-     the list of options will be as large as the widget itself */
-  min-width : 100%;
-
-  /* In case the list is too long, its content will overflow vertically
-     (which will add a vertical scrollbar automatically) but never horizontally
-     (because we haven't set a width, the list will adjust its width automatically.
-     If it can't, the content will be truncated) */
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  border: .2em solid #000; /* 2px */
-  border-top-width : .1em; /* 1px */
-  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
-  background: #f0f0f0;
-}
- -

For the options, we need to add a highlight class to be able to identify the value the user will pick (or has picked).

- -
.select .option {
-  padding: .2em .3em; /* 2px 3px */
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

So here's the result with our three states:

- - - - - - - - - - - - - - - - - - - -
Basic stateActive stateOpen state
{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}
Check out the source code
- -

Bring your widget to life with JavaScript

- -

Now that our design and structure are ready, we can write the JavaScript code to make the widget actually work.

- -
-

Warning: The following code is educational and should not be used as-is. Among many things, as we'll see, it is not future-proof and it will not work on legacy browsers. It also has redundant parts that should be optimized in production code.

-
- -
-

Note: Creating reusable widgets is something that can be a bit tricky. The W3C Web Component draft is one of the answers to this specific issue. The X-Tag project is a test implementation of this specification; we encourage you to take a look at it.

-
- -

Why isn't it working?

- -

Before we start, it's important to remember something very important about JavaScript: inside a browser, it's an unreliable technology. When you are building custom widgets, you'll have to rely on JavaScript because it's a necessary thread to tie everything together. However, there are many cases in which JavaScript isn't able to run in the browser:

- - - -

Because of these risks, it's really important to seriously consider what will happen if JavaScript isn't working. Dealing in detail with this issue is out of the scope of this article because it's closely linked to how you want to make your script generic and reusable, but we'll consider the basics of this in our example.

- -

In our example, if our JavaScript code isn't running, we'll fall back to displaying a standard {{HTMLElement("select")}} element. To achieve this, we need two things.

- -

First, we need to add a regular {{HTMLElement("select")}} element before each use of our custom widget. This is actually also required in order to be able to send data from our custom widget along with the rest of our form data; more about this later.

- -
<body class="no-widget">
-  <form>
-    <select name="myFruit">
-      <option>Cherry</option>
-      <option>Lemon</option>
-      <option>Banana</option>
-      <option>Strawberry</option>
-      <option>Apple</option>
-    </select>
-
-    <div class="select">
-      <span class="value">Cherry</span>
-      <ul class="optList hidden">
-        <li class="option">Cherry</li>
-        <li class="option">Lemon</li>
-        <li class="option">Banana</li>
-        <li class="option">Strawberry</li>
-        <li class="option">Apple</li>
-      </ul>
-    </div>
-  </form>
-
-</body>
- -

Second, we need two new classes to let us hide the unneeded element (that is, the "real" {{HTMLElement("select")}} element if our script isn't running, or the custom widget if it is running). Note that by default, our HTML code hides our custom widget.

- -
.widget select,
-.no-widget .select {
-  /* This CSS selector basically says:
-     - either we have set the body class to "widget" and thus we hide the actual {{HTMLElement("select")}} element
-     - or we have not changed the body class, therefore the body class is still "no-widget",
-       so the elements whose class is "select" must be hidden */
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
- -

Now we just need a JavaScript switch to determine if the script is running or not. This switch is very simple: if at page load time our script is running, it will remove the no-widget class and add the widget class, thereby swapping the visibility of the {{HTMLElement("select")}} element and of the custom widget.

- -
window.addEventListener("load", function () {
-  document.body.classList.remove("no-widget");
-  document.body.classList.add("widget");
-});
- - - - - - - - - - - - - - - - - -
Without JSWith JS
{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}
Check out the source code
- -
-

Note: If you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the {{HTMLElement("select")}} elements, and to dynamically add the DOM tree representing the custom widget after every {{HTMLElement("select")}} element in the page.

-
- -

Making the job easier

- -

In the code we are about to build, we will use the standard DOM API to do all the work we need. However, although DOM API support has gotten much better in browsers, there are always issues with legacy browsers (especially with good old Internet Explorer).

- -

If you want to avoid trouble with legacy browsers, there are two ways to do so: using a dedicated framework such as jQuery, $dom, prototype, Dojo, YUI, or the like, or by polyfilling the missing feature you want to use (which can easily be done through conditional loading, with the yepnope library for example).

- -

The features we plan to use are the following (ordered from the riskiest to the safest):

- -
    -
  1. {{domxref("element.classList","classList")}}
    2. -
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. -
  3. forEach (This is not DOM but modern JavaScript)
    4. -
  4. {{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. -
- -

Beyond the availability of those specific features, there is still one issue remaining before starting. The object returned by the {{domxref("element.querySelectorAll","querySelectorAll()")}} function is a {{domxref("NodeList")}} rather than an Array. This is important because Array objects support the forEach function, but {{domxref("NodeList")}} doesn't. Because {{domxref("NodeList")}} really looks like an Array and because forEach is so convenient to use, we can easily add the support of forEach to {{domxref("NodeList")}} in order to make our life easier, like so:

- -
NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
- -

We weren't kidding when we said it's easy to do.

- -

Building event callbacks

- -

The ground is ready, we can now start to define all the functions that will be used each time the user interacts with our widget.

- -
// This function will be used each time we want to deactivate a custom widget
-// It takes one parameter
-// select : the DOM node with the `select` class to deactivate
-function deactivateSelect(select) {
-
-  // If the widget is not active there is nothing to do
-  if (!select.classList.contains('active')) return;
-
-  // We need to get the list of options for the custom widget
-  var optList = select.querySelector('.optList');
-
-  // We close the list of option
-  optList.classList.add('hidden');
-
-  // and we deactivate the custom widget itself
-  select.classList.remove('active');
-}
-
-// This function will be used each time the user wants to (de)activate the widget
-// It takes two parameters:
-// select : the DOM node with the `select` class to activate
-// selectList : the list of all the DOM nodes with the `select` class
-function activeSelect(select, selectList) {
-
-  // If the widget is already active there is nothing to do
-  if (select.classList.contains('active')) return;
-
-  // We have to turn off the active state on all custom widgets
-  // Because the deactivateSelect function fulfill all the requirement of the
-  // forEach callback function, we use it directly without using an intermediate
-  // anonymous function.
-  selectList.forEach(deactivateSelect);
-
-  // And we turn on the active state for this specific widget
-  select.classList.add('active');
-}
-
-// This function will be used each time the user wants to open/closed the list of options
-// It takes one parameter:
-// select : the DOM node with the list to toggle
-function toggleOptList(select) {
-
-  // The list is kept from the widget
-  var optList = select.querySelector('.optList');
-
-  // We change the class of the list to show/hide it
-  optList.classList.toggle('hidden');
-}
-
-// This function will be used each time we need to highlight an option
-// It takes two parameters:
-// select : the DOM node with the `select` class containing the option to highlight
-// option : the DOM node with the `option` class to highlight
-function highlightOption(select, option) {
-
-  // We get the list of all option available for our custom select element
-  var optionList = select.querySelectorAll('.option');
-
-  // We remove the highlight from all options
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  // We highlight the right option
-  option.classList.add('highlight');
-};
- -

That's all you need in order to handle the various states of the custom widget.

- -

Next, we bind these functions to the appropriate events:

- -
// We handle the event binding when the document is loaded.
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // Each custom widget needs to be initialized
-  selectList.forEach(function (select) {
-
-    // as well as all its `option` elements
-    var optionList = select.querySelectorAll('.option');
-
-    // Each time a user hovers their mouse over an option, we highlight the given option
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        // Note: the `select` and `option` variable are closures
-        // available in the scope of our function call.
-        highlightOption(select, option);
-      });
-    });
-
-    // Each times the user click on a custom select element
-    select.addEventListener('click', function (event) {
-      // Note: the `select` variable is a closure
-      // available in the scope of our function call.
-
-      // We toggle the visibility of the list of options
-      toggleOptList(select);
-    });
-
-    // In case the widget gain focus
-    // The widget gains the focus each time the user clicks on it or each time
-    // they use the tabulation key to access the widget
-    select.addEventListener('focus', function (event) {
-      // Note: the `select` and `selectList` variable are closures
-      // available in the scope of our function call.
-
-      // We activate the widget
-      activeSelect(select, selectList);
-    });
-
-    // In case the widget loose focus
-    select.addEventListener('blur', function (event) {
-      // Note: the `select` variable is a closure
-      // available in the scope of our function call.
-
-      // We deactivate the widget
-      deactivateSelect(select);
-    });
-  });
-});
- -

At that point, our widget will change state according to our design, but its value doesn't get updated yet. We'll handle that next.

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}
Check out the source code
- -

Handling the widget's value

- -

Now that our widget is working, we have to add code to update its value according to user input and make it possible to send the value along with form data.

- -

The easiest way to do this is to use a native widget under the hood. Such a widget will keep track of the value with all the built-in controls provided by the browser, and the value will be sent as usual when a form is submitted. There's no point in reinventing the wheel when we can have all this done for us.

- -

As seen previously, we already use a native select widget as a fallback for accessibility reasons; we can simply synchronize its value with that of our custom widget:

- -
// This function updates the displayed value and synchronizes it with the native widget.
-// It takes two parameters:
-// select : the DOM node with the class `select` containing the value to update
-// index  : the index of the value to be selected
-function updateValue(select, index) {
-  // We need to get the native widget for the given custom widget
-  // In our example, that native widget is a sibling of the custom widget
-  var nativeWidget = select.previousElementSibling;
-
-  // We also need  to get the value placeholder of our custom widget
-  var value = select.querySelector('.value');
-
-  // And we need the whole list of options
-  var optionList = select.querySelectorAll('.option');
-
-  // We set the selected index to the index of our choice
-  nativeWidget.selectedIndex = index;
-
-  // We update the value placeholder accordingly
-  value.innerHTML = optionList[index].innerHTML;
-
-  // And we highlight the corresponding option of our custom widget
-  highlightOption(select, optionList[index]);
-};
-
-// This function returns the current selected index in the native widget
-// It takes one parameter:
-// select : the DOM node with the class `select` related to the native widget
-function getIndex(select) {
-  // We need to access the native widget for the given custom widget
-  // In our example, that native widget is a sibling of the custom widget
-  var nativeWidget = select.previousElementSibling;
-
-  return nativeWidget.selectedIndex;
-};
- -

With these two functions, we can bind the native widgets to the custom ones:

- -
// We handle event binding when the document is loaded.
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // Each custom widget needs to be initialized
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option'),
-        selectedIndex = getIndex(select);
-
-    // We make our custom widget focusable
-    select.tabIndex = 0;
-
-    // We make the native widget no longer focusable
-    select.previousElementSibling.tabIndex = -1;
-
-    // We make sure that the default selected value is correctly displayed
-    updateValue(select, selectedIndex);
-
-    // Each time a user clicks on an option, we update the value accordingly
-    optionList.forEach(function (option, index) {
-      option.addEventListener('click', function (event) {
-        updateValue(select, index);
-      });
-    });
-
-    // Each time a user uses their keyboard on a focused widget, we update the value accordingly
-    select.addEventListener('keyup', function (event) {
-      var length = optionList.length,
-          index  = getIndex(select);
-
-      // When the user hits the down arrow, we jump to the next option
-      if (event.keyCode === 40 && index < length - 1) { index++; }
-
-      // When the user hits the up arrow, we jump to the previous option
-      if (event.keyCode === 38 && index > 0) { index--; }
-
-      updateValue(select, index);
-    });
-  });
-});
- -

In the code above, it's worth noting the use of the tabIndex property. Using this property is necessary to ensure that the native widget will never gain focus, and to make sure that our custom widget gains focus when the user uses his keyboard or his mouse.

- -

With that, we're done! Here's the result:

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}
Check out the source code
- -

But wait a second, are we really done?

- -

Make it accessible

- -

We have built something that works and though we're far from a fully-featured select box, it works nicely. But what we've done is nothing more than fiddle with the DOM. It has no real semantics, and even though it looks like a select box, from the browser's point of view it isn't one, so assistive technologies won't be able to understand it's a select box. In short, this pretty new select box isn't accessible!

- -

Fortunately, there is a solution and it's called ARIA. ARIA stands for "Accessible Rich Internet Application", and it's a W3C specification specifically designed for what we are doing here: making web applications and custom widgets accessible. It's basically a set of attributes that extend HTML so that we can better describe roles, states and properties as though the element we've just devised was the native element it tries to pass for. Using these attributes is dead simple, so let's do it.

- -

The role attribute

- -

The key attribute used by ARIA is the role attribute. The role attribute accepts a value that defines what an element is used for. Each role defines its own requirements and behaviors. In our example, we will use the listbox role. It's a "composite role", which means elements with that role expect to have children, each with a specific role (in this case, at least one child with the option role).

- -

It's also worth noting that ARIA defines roles that are applied by default to standard HTML markup. For example, the {{HTMLElement("table")}} element matches the role grid, and the {{HTMLElement("ul")}} element matches the role list. Because we use a {{HTMLElement("ul")}} element, we want to make sure the listbox role of our widget will supersede the list role of the {{HTMLElement("ul")}} element. To that end, we will use the role presentation. This role is designed to let us indicate that an element has no special meaning, and is used solely to present information. We will apply it to our {{HTMLElement("ul")}} element.

- -

To support the listbox role, we just have to update our HTML like this:

- -
<!-- We add the role="listbox" attribute to our top element -->
-<div class="select" role="listbox">
-  <span class="value">Cherry</span>
-  <!-- We also add the role="presentation" to the ul element -->
-  <ul class="optList" role="presentation">
-    <!-- And we add the role="option" attribute to all the li elements -->
-    <li role="option" class="option">Cherry</li>
-    <li role="option" class="option">Lemon</li>
-    <li role="option" class="option">Banana</li>
-    <li role="option" class="option">Strawberry</li>
-    <li role="option" class="option">Apple</li>
-  </ul>
-</div>
- -
-

Note: Including both the role attribute and a class attribute is only necessary if you want to support legacy browsers that do not support the CSS attribute selectors.

-
- -

The aria-selected attribute

- -

Using the role attribute is not enough. ARIA also provides many states and property attributes. The more and better you use them, the better your widget will be understood by assistive technologies. In our case, we will limit our usage to one attribute: aria-selected.

- -

The aria-selected attribute is used to mark which option is currently selected; this lets assistive technologies inform the user what the current selection is. We will use it dynamically with JavaScript to mark the selected option each time the user chooses one. To that end, we need to revise our updateValue() function:

- -
function updateValue(select, index) {
-  var nativeWidget = select.previousElementSibling;
-  var value = select.querySelector('.value');
-  var optionList = select.querySelectorAll('.option');
-
-  // We make sure that all the options are not selected
-  optionList.forEach(function (other) {
-    other.setAttribute('aria-selected', 'false');
-  });
-
-  // We make sure the chosen option is selected
-  optionList[index].setAttribute('aria-selected', 'true');
-
-  nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
-  highlightOption(select, optionList[index]);
-};
- -

Here is the final result of all these changes (you'll get a better feel for this by trying it with an assistive technology such as NVDA or VoiceOver):

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}
Check out the final source code
- -

Conclusion

- -

We have seen all the basics of building a custom form widget, but as you can see it's not trivial to do, and often it's better and easier to rely on third-party libraries instead of coding them from scratch yourself (unless, of course, your goal is to build such a library).

- -

Here are a few libraries you should consider before coding your own:

- - - -

If you want to move forward, the code in this example needs some improvement before it becomes generic and reusable. This is an exercise you can try to perform. Two hints to help you in this: the first argument for all our functions is the same, which means those functions need the same context. Building an object to share that context would be wise. Also, you need to make it feature-proof; that is, it needs to be able to work better with a variety of browsers whose compatibility with the Web standards they use vary. Have fun!

- -

{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}

- -

 

- -

In this module

- - - -

 

diff --git a/files/es/learn/html/forms/how_to_structure_an_html_form/index.html b/files/es/learn/html/forms/how_to_structure_an_html_form/index.html deleted file mode 100644 index 45f58520d1..0000000000 --- a/files/es/learn/html/forms/how_to_structure_an_html_form/index.html +++ /dev/null @@ -1,320 +0,0 @@ ---- -title: Cómo estructurar un formulario HTML -slug: Learn/HTML/Forms/How_to_structure_an_HTML_form -translation_of: Learn/Forms/How_to_structure_a_web_form ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}
- -

Una vez examinados los conceptos básicos, vamos a ver más en detalle los elementos que se utilizan para proporcionar estructura y significado a las diferentes partes de un formulario.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática y de lenguajes HTML.
Objetivo:Entender cómo se estructuran los formularios HTML y se les proporciona semántica para dotarlos de criterios de usabilidad y accesibilidad.
- -

La flexibilidad que presentan los formularios los convierte en una de las estructuras más complejas en HTML, puesto que puedes crear cualquier tipo de formulario básico a partir de los elementos y atributos destinados a esta función. El uso de una estructura correcta al crear un formulario HTML te ayudará a garantizar que el formulario presente las características de usabilidad y accesibilidad adecuadas.

- -

El elemento <form>

- -

El elemento {{HTMLElement ("form")}} define formalmente un formulario y los atributos que determinan el comportamiento del formulario. Cada vez que desees crear un formulario HTML, debes empezar utilizando este elemento y anidando todo el contenido dentro de él. Muchas tecnologías de asistencia y complementos del navegador pueden descubrir elementos {{HTMLElement ("form")}} e implementar códigos de apoyo (hooks) especiales para que sean más fáciles de usar.

- -

Ya lo vimos en el artículo anterior.

- -
Advertencia: Está estrictamente prohibido anidar un formulario dentro de otro formulario. Anidar formularios no es una buena idea porque puede ocasionar comportamientos impredecibles.
- -

Siempre es posible usar controles de formulario fuera de un elemento {{HTMLElement ("form")}}. Si la haces, por defecto ese control no tiene nada que ver con ningún formulario, a menos que lo asocies a algún formulario con el atributo form. Esto se introdujo para permitir vincular explícitamente un control a un formulario, incluso si este no está dentro de él.

- -

A continuación vamos a exponer los elementos estructurales que encontrarás en un formulario.

- -

Los elementos <fieldset> y <legend>

- -

El elemento {{HTMLElement ("fieldset")}} es una forma cómoda de crear grupos de controles de formulario (también denominados widgets) que comparten el mismo propósito, con fines semánticos y de aplicación de estilo. Puedes etiquetar un elemento {{HTMLElement ("fieldset")}} incluyendo un elemento {{HTMLElement ("legend")}} justo debajo de la etiqueta de apertura {{HTMLElement ("fieldset")}}. El contenido textual del elemento {{HTMLElement ("legend")}} describe formalmente el propósito del elemento {{HTMLElement ("fieldset")}} que está incluido dentro.

- -

Muchas tecnologías de asistencia utilizarán el elemento {{HTMLElement ("legend")}} como si fuera una parte de la etiqueta de cada control dentro del elemento {{HTMLElement ("fieldset")}} correspondiente. Por ejemplo, algunos lectores de pantalla como Jaws y NVDA leerán el contenido de la leyenda antes de decir la etiqueta de cada control.

- -

Un pequeño ejemplo:

- -
<form>
-  <fieldset>
-    <legend>Tamaño del zumo de fruta</legend>
-    <p>
-      <input type="radio" name="size" id="size_1" value="small">
-      <label for="size_1">Pequeño</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_2" value="medium">
-      <label for="size_2">Mediano</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_3" value="large">
-      <label for="size_3">Grande</label>
-    </p>
-  </fieldset>
-</form>
- -
-

Nota: Puedes encontrar este ejemplo en fieldset-legend.html (consúltalo en vivo).

-
- -

Al leer el formulario anterior, un lector de pantalla dirá «Tamaño del zumo de fruta: pequeño» para el primer control de formulario, «Tamaño del zumo de fruta: mediano» para el segundo y «Tamaño del zumo de fruta: grande» para el tercero.

- -

El caso de uso que se muestra en este ejemplo es uno de los más importantes. Cada vez que tengas un conjunto de botones de opción, debes anidarlos dentro de un elemento {{HTMLElement ("fieldset")}}. Hay otros casos de uso y el elemento {{HTMLElement ("fieldset")}} también se puede usar en general para seccionar un formulario. Idealmente, los formularios largos deberían tener una extensión de varias páginas, pero si un formulario se alarga y ha de estar contenido en una sola página, colocar las diferentes secciones relacionadas dentro de diferentes conjuntos de campos mejora su usabilidad.

- -

Debido a la influencia que tiene sobre las tecnologías de asistencia, el elemento {{HTMLElement ("fieldset")}} es uno de los elementos clave para crear formularios accesibles. Sin embargo, no hay que abusar de él. Si es posible, cada vez que crees un formulario, intenta escuchar cómo lo interpreta un lector de pantalla. Si suena raro, intenta mejorar la estructura del formulario.

- -

El elemento <label>

- -

Como vimos en el artículo anterior, el elemento {{HTMLElement ("label")}} es la forma formal de definir una etiqueta para un control de un formulario HTML. Este es el elemento más importante si deseas crear formularios accesibles porque cuando se implementan correctamente, los lectores de pantalla leen la etiqueta de un elemento de formulario junto con las instrucciones relacionadas, y esto además resulta muy útil para los usuarios videntes. Tomemos este ejemplo que vimos en el artículo anterior:

- -
<label for="name">Nombre:</label> <input type="text" id="name" name="user_name">
- -

Con la etiqueta <label> asociada correctamente con <input> por su atributo for (que contiene el atributo id del elemento <input>), un lector de pantalla leerá algo como «Nombre, editar texto».

- -

Hay otra forma de asociar un control de formulario con una etiqueta: asociarlo implícitamente anidando el control de formulario dentro de <label>.

- -
<label for="name">
-  Nombre: <input type="text" id="name" name="user_name">
-</label>
- -

Incluso en estos casos, se aconseja establecer el atributo for para garantizar que todas las tecnologías de asistencia comprendan la relación entre la etiqueta y el control de formulario.

- -

Si no hay ninguna etiqueta, o si el control de formulario no está asociado implícita o explícitamente con alguna etiqueta, un lector de pantalla leerá algo así como «Editar texto en blanco», lo cual no es de mucha ayuda.

- -

¡También se puede hacer clic en las etiquetas!

- -

Otra ventaja de configurar correctamente las etiquetas es que puedes hacer clic o pulsar en la etiqueta para activar el control de formulario correspondiente. Esto es útil para controles como entradas de texto, donde puedes hacer clic tanto en la etiqueta como en la entrada de texto para proporcionar el foco al control de formulario, pero es útil especialmente para botones de opción y casillas de verificación, porque la zona sensible de este control puede ser muy pequeña, y puede ser útil para facilitar su activación.

- -

Por ejemplo, al hacer clic en el texto de la etiqueta «Me gustan las cerezas» del ejemplo siguiente, cambiará el estado seleccionado de la casilla de verificación taste_cherry:

- -
<form>
-  <p>
-    <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry">
-    <label for="taste_1">Me gustan las cerezas</label>
-  </p>
-  <p>
-    <input type="checkbox" id="taste_2" name="taste_banana" value="banana">
-    <label for="taste_2">Me gustan los plátanos</label>
-  </p>
-</form>
- -
-

Nota: Puedes encontrar este ejemplo en checkbox-label.html (consúltalo en vivo).

-
- -

Etiquetas múltiples

- -

Estrictamente hablando, es posible poner varias etiquetas en un solo control de formulario, pero no suele ser una buena idea porque algunas tecnologías de asistencia pueden tener problemas para manejarlas. En caso de tener varias etiquetas, hay que anidar el control de formulario y sus etiquetas dentro de un único elemento {{htmlelement ("label")}}.

- -

Consideremos este ejemplo:

- -
<p>Los campos obligatorios se marcan con un <abbr title = "required">*</abbr>.</p>
-
-<!-- Así que esto: -->
-<div>
-  <label for="username">Nombre:</label>
-  <input type="text" name="username">
-  <label for="username"><abbr title="required" aria-label="required">*</abbr></label>
-</div>
-
-<!-- sería mejor hacerlo así: -->
-<div>
-  <label for="username">
-    <span>Nombre:</span>
-    <input id="username" type="text" name="username">
-    <abbr title="required" aria-label="required">*</abbr>
-  </label>
-</div>
-
-<!-- Pero probablemente lo mejor es esto: -->
-<div>
-  <label for="username">Nombre: <abbr title="required" aria-label="required">*</abbr></label>
-  <input id="username" type="text" name="username">
-</div>
- -

{{EmbedLiveSample("Etiquetas_múltiples", 120, 120)}}

- -

El párrafo de la parte superior establece una regla para los elementos que son obligatorios. La regla ha de incluirse antes de usarse para que tanto los usuarios videntes como los usuarios que utilizan tecnologías de asistencia y lectores de pantalla, sepan lo que significa antes de encontrar un elemento obligatorio. Pero si bien esto ayuda a informar a los usuarios de lo que significa un asterisco, no es posible confiar plenamente en ello. Cuando un lector de pantalla se encuentre con un asterisco pronunciará «estrella». Cuando un usuario vidente pase el ratón por encima, debería aparecer una etiqueta de «obligatorio», lo cual se logra con el uso del atributo title. Pero los títulos que se leen en voz alta dependen de la configuración del lector de pantalla, por lo que es más fiable incluir también el atributo aria-label, que los lectores de pantalla siempre leen.

- -

Las variantes anteriores aumentan en efectividad a medida que se avanza por ellas:

- - - -
-

Nota: Es posible que obtengas resultados ligeramente diferentes dependiendo de tu lector de pantalla. Esta prueba se hizo con VoiceOver (NVDA se comporta de manera similar). Nos encantaría conocer tus experiencias.

-
- -
-

Nota: Puedes encontrar este ejemplo en GitHub como required-labels.html (o consultarlo en vivo). No pruebes el ejemplo con las dos o tres versiones sin los comentarios porque los lectores de pantalla se confundirán si hay múltiples etiquetas y múltiples entradas con el mismo ID.

-
- -

Estructuras HTML comunes que se utilizan en los formularios

- -

Más allá de las estructuras específicas de los formularios web, es bueno recordar que el marcado de los formularios es solo HTML. Esto significa que puedes usar todo el poder del HTML para estructurar un formulario web.

- -

Como puedes ver en los ejemplos, es una práctica común delimitar una etiqueta y su control de formulario con un elemento {{HTMLElement ("li")}} dentro de una lista {{HTMLElement ("ul")}} o {{HTMLElement ("ol")}}. Los elementos {{HTMLElement ("p")}} y {{HTMLElement ("div")}} también se usan con frecuencia. Se recomiendan las listas para estructurar múltiples casillas de verificación o botones de opción.

- -

Además del elemento {{HTMLElement ("fieldset")}}, también es una práctica común usar títulos HTML (por ejemplo, {{htmlelement ("h1")}}, {{htmlelement ("h2")}}), y seccionar (por ejemplo, {{htmlelement ("section")}}), para estructurar formas complejas.

- -

Depende de ti, sobre todo, encontrar un estilo de codificación cómodo que dé como resultado formas con buena accesibilidad y usabilidad. Las secciones independientes con funciones diferentes deben estar contenidas en elementos {{htmlelement ("section")}} separados, con elementos {{htmlelement ("fieldset")}} para contener botones de opción.

- -

Aprendizaje activo: construir una estructura de formulario

- -

Pongamos en práctica estas ideas y creemos un formulario un poco más complicado: un formulario de pago. Este formulario contendrá una serie de tipos de control que quizás aún no comprendas. No te preocupes por esto por ahora; en el artículo siguiente descubrirás cómo funcionan (Los controles básicos de formulario originales). Por ahora, lee con detenimiento las descripciones y sigue las instrucciones, y empieza a formarte una idea de qué elementos de delimitación se utilizan para estructurar el formulario y por qué.

- -
    -
  1. Para comenzar, haz una copia local de nuestro archivo de plantilla en blanco y el CSS de nuestro formulario de pago en un nuevo directorio de tu ordenador.
    2. -
  2. Añade dentro del elemento HTML {{htmlelement ("head")}} la línea siguiente para aplicar el CSS al HTML: - 
    <link href="payment-form.css" rel="stylesheet">
    -
    3. -
  3. A continuación, añade el elemento externo {{htmlelement ("form")}} para crear tu formulario: - 
    <form>
-
-</form>
    -
    4. -
  4. Añade un encabezado y un párrafo dentro de las etiquetas <form>> para informar a los usuarios cómo se marcan los campos obligatorios: - 
    <h1>Forma de pago</h1>
-<p>Los campos obligatorios van seguidos de <strong> <abbr title = "required"> * </abbr> </strong>.</p>
    -
    5. -
  5. A continuación añadimos al formulario una sección de código más grande, justo debajo de nuestra entrada anterior. Aquí verás que delimitamos con un elemento {{htmlelement ("section")}} independiente los campos con la información de contacto. Además, hay un conjunto de dos botones de opción, cada uno de los cuales colocamos dentro de su elemento de lista ({{htmlelement ("li")}}) propio. También hay dos entradas de texto estándar {{htmlelement ("input")}} y sus elementos {{htmlelement ("label")}} asociados, cada uno anidado dentro de un elemento {{htmlelement ("p")}} y una entrada de texto para introducir una contraseña. Añade este código a tu formulario: - 
    <section>
-    <h2>Información de contacto</h2>
-    <fieldset>
-      <legend>Título</legend>
-      <ul>
-          <li>
-            <label for="title_1">
-              <input type="radio" id="title_1" name="title" value="K" >
-              Rey
-            </label>
-          </li>
-          <li>
-            <label for="title_2">
-              <input type="radio" id="title_2" name="title" value="Q">
-              Reina
-            </label>
-          </li>
-          <li>
-            <label for="title_3">
-              <input type="radio" id="title_3" name="title" value="J">
-              Bufón
-            </label>
-          </li>
-      </ul>
-    </fieldset>
-    <p>
-      <label for="name">
-        <span>Nombre:</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="text" id="name" name="username">
-    </p>
-    <p>
-      <label for="mail">
-        <Span>Correo electrónico:</ span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="email" id="mail" name="usermail">
-    </p>
-    <p>
-      <label for="pwd">
-        <span>Contraseña:</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="password" id="pwd" name="password">
-    </p>
-</section>
    -
    6. -
  6. La segunda <section> de nuestro formulario es la información de pago. Hay tres controles diferentes, junto con sus etiquetas, cada uno contenido dentro de un elemento <p>. El primero es un menú desplegable ({{htmlelement ("select")}}) para seleccionar el tipo de tarjeta de crédito. El segundo es un elemento <input> de tipo tel, para introducir un número de tarjeta de crédito. Si bien podríamos haber usado el tipo number, no queremos una interfaz de usuario con control de número. El último es un elemento <input> de tipo date, para introducir la fecha de caducidad de la tarjeta; aparecerá como un control de selección de fecha en navegadores compatibles, y como una entrada de texto normal en navegadores no compatibles. Estos tipos de entrada más nuevos volverán a aparecer en el artículo Tipos de entrada HTML5.
    -
    - Introduce los datos siguientes a continuación de la sección anterior: - 
    <section>
-    <h2>Información de pago</h2>
-    <p>
-      <label for="card">
-        <span>Tipo de tarjeta:</span>
-      </label>
-      <select id="card" name="usercard">
-        <option value="visa">Visa</option>
-        <option value="mc">Mastercard</option>
-        <option value="amex">American Express</option>
-      </select>
-    </p>
-    <p>
-      <label for="number">
-        <span>Número de tarjeta:</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="tel" id="number" name="cardnumber">
-    </p>
-    <p>
-      <label for="date">
-        <span>Fecha de caducidad:</span>
-        <strong><abbr title="required">*</abbr></strong>
-        <em>el formato mm/aa</em>
-      </label>
-      <input type="date" id="date" name="expiration">
-    </p>
-</section>
    -
    7. -
  7. La última sección que añadimos es mucho más simple y contiene solo un {{htmlelement ("button")}} de tipo submit, para enviar los datos del formulario. Añádelo al final de tu formulario: - 
    <p> <button type="submit">Validar el pago</button> </p>
    -
    8. -
- -

Debajo puedes ver en acción el formulario terminado (también lo encontrarás en GitHub; consulta el código fuente de nuestro payment-form.html y ejecútalo en vivo):

- -

{{EmbedLiveSample("A_payment_form","100%",620, "", "/en-US/Learn/Forms/How_to_structure_a_web_form/Example")}}

- -

¡Prueba tus habilidades!

- -

Has llegado al final de este artículo pero ¿puedes recordar la información más importante? Puedes encontrar pruebas adicionales para comprobar que has comprendido la información antes de continuar — visita Prueba tus habilidades: Estructura de formularios.

- -

Resumen

- -

Ahora tienes todos los conocimientos necesarios para estructurar adecuadamente tus formularios web. Expondremos muchas de las características que se presentan aquí en los artículos siguientes, y el próximo artículo analizará con más detalle el uso de todos los diferentes tipos de controles de formulario que vas a querer usar para recopilar la información de tus usuarios.

- -

Ver también

- - - -

{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}

- -

En este módulo

- - - -

Temas avanzados

- - diff --git a/files/es/learn/html/forms/index.html b/files/es/learn/html/forms/index.html deleted file mode 100644 index c607c7993a..0000000000 --- a/files/es/learn/html/forms/index.html +++ /dev/null @@ -1,366 +0,0 @@ ---- -title: Formularios HTML -slug: Learn/HTML/Forms -tags: - - Featured - - Forms - - Formulario(2) - - Guide - - Guía - - HTML - - NeedsTranslation - - TopicStub - - Web -translation_of: Learn/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/learn/html/forms/property_compatibility_table_for_form_controls/index.html b/files/es/learn/html/forms/property_compatibility_table_for_form_controls/index.html deleted file mode 100644 index 115b5580fe..0000000000 --- a/files/es/learn/html/forms/property_compatibility_table_for_form_controls/index.html +++ /dev/null @@ -1,2003 +0,0 @@ ---- -title: Tabla de compatibilidad de propiedades CSS para controles de formulario -slug: Learn/HTML/Forms/Property_compatibility_table_for_form_controls -translation_of: Learn/Forms/Property_compatibility_table_for_form_controls ---- -
{{learnsidebar}}
- -

Las siguientes tablas de compatibilidad intentan resumir el estado del soporte de CSS para formularios HTML. Debido a la complejidad de los formularios CSS y HTML, estas tablas no se pueden considerar una referencia perfecta. Sin embargo, le darán una buena idea de lo que se puede y no se puede hacer, lo que le ayudará al aprender a hacer las cosas.

- -

Cómo leer las tablas

- -

Valores

- -

Para cada propiedad, hay cuatro valores posibles:

- -
-
Si
-
Existe un soporte razonablemente consistente para la propiedad en todos los navegadores. Es posible que aún enfrente efectos secundarios extraños en ciertos casos extremos.
-
Parcial
-
Si bien la propiedad funciona, con frecuencia puede enfrentar efectos secundarios extraños o inconsistencias. Probablemente debería evitar estas propiedades a menos que primero domine esos efectos secundarios.
-
No
-
La propiedad simplemente no funciona o es tan inconsistente que no es confiable.
-
n.a.
-
La propiedad no tiene ningún significado para este tipo de widget.
-
- -

Representación

- -

Para cada propiedad hay dos representaciones posibles:

- -
-
N (Normal)
-
Indica que la propiedad se aplica tal cual
-
T (Retocada)
-
Indica que la propiedad se aplica con la regla adicional como se muestra a continuación:
-
- -
* {
-  /* Turn off the native look and feel */
-  -webkit-appearance: none;
-  appearance: none;
-
-/* for Internet Explorer */
-  background: none;
-}
- -

Tablas de compatibilidad

- -

Comportamientos globales

- -

Algunos comportamientos son comunes a muchos navegadores a nivel global::

- -
-
{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}
-
El uso de una de estas propiedades puede desactivar parcial o totalmente la apariencia nativa de los widgets en algunos navegadores. Tenga cuidado cuando los use.
-
{{cssxref("line-height")}}
-
Esta propiedad se admite de forma inconsistente en todos los navegadores y debe evitarla.
-
{{cssxref("text-decoration")}}
-
Esta propiedad no es compatible con el navegador Opera en widgets de formulario.
-
{{cssxref("text-overflow")}}
-
Opera, Safari, y IE9 no admiten esta propiedad en widgets de formulario.
-
{{cssxref("text-shadow")}}
-
Opera no admite {{cssxref("text-shadow")}} en widgets de formularios e IE9 no lo admite en absoluto.
-
- -

Text fields

- -

See the {{htmlelement("input/text", "text")}}, {{htmlelement("input/search", "search")}}, and {{htmlelement("input/password", "password")}} input types.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}Partial[1][2]Yes -
    -
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields.
    2. -
  2. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    3. -
-
{{cssxref("border")}}Partial[1][2]Yes -
    -
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields.
    2. -
  2. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    3. -
-
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}Partial[1][2]Yes -
    -
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields.
    2. -
  2. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    3. -
-
Text and font
{{cssxref("color")}}[1]YesYes -
    -
  1. If the {{cssxref("border-color")}} property is not set, some WebKit based browsers will apply the {{cssxref("color")}} property to the border as well as the font on {{htmlelement("textarea")}}s.
    2. -
-
{{cssxref("font")}}YesYesSee the note about {{cssxref("line-height")}}
{{cssxref("letter-spacing")}}YesYes
{{cssxref("text-align")}}YesYes
{{cssxref("text-decoration")}}PartialPartialSee the note about Opera
{{cssxref("text-indent")}}Partial[1]Partial[1] -
    -
  1. IE9 supports this property only on {{htmlelement("textarea")}}s, whereas Opera only supports it on single line text fields.
    2. -
-
{{cssxref("text-overflow")}}PartialPartial
{{cssxref("text-shadow")}}PartialPartial
{{cssxref("text-transform")}}YesYes
Border and background
{{cssxref("background")}}Partial[1]Yes -
    -
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    2. -
-
{{cssxref("border-radius")}}Partial[1][2]Yes -
    -
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    2. -
  2. On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.
    3. -
-
{{cssxref("box-shadow")}}NoPartial[1] -
    -
  1. IE9 does not support this property.
    2. -
-
- -

Buttons

- -

See the {{htmlelement("input/button", "button")}},  {{htmlelement("input/submit", "submit")}}, and {{htmlelement("input/reset", "reset")}} input types and the {{htmlelement("button")}} element.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}Partial[1]Yes -
    -
  1. This property is not applied on WebKit based browsers on Mac OSX or iOS.
    2. -
-
{{cssxref("border")}}PartialYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}Partial[1]Yes -
    -
  1. This property is not applied on WebKit based browsers on Mac OSX or iOS.
    2. -
-
Text and font
{{cssxref("color")}}YesYes
{{cssxref("font")}}YesYesSee the note about {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}YesYes
{{cssxref("text-align")}}NoNo
{{cssxref("text-decoration")}}PartialYes
{{cssxref("text-indent")}}YesYes
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}PartialPartial
{{cssxref("text-transform")}}YesYes
Border and background
{{cssxref("background")}}YesYes
{{cssxref("border-radius")}}Yes[1]Yes[1] -
    -
  1. On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.
    2. -
-
{{cssxref("box-shadow")}}NoPartial[1] -
    -
  1. IE9 does not support this property.
    2. -
-
- -

Number

- -

See the  {{htmlelement("input/number", "number")}} input type. There is no standard way to change the style of spinners used to change the value of the field, with the spinners on Safari being outside the field.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}Partial[1]Partial[1] -
    -
  1. On Opera, the spinners are zoomed in, which can hide the content of the field.
    2. -
-
{{cssxref("border")}}YesYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}Partial[1]Partial[1] -
    -
  1. On Opera, the spinners are zoomed in, which can hide the content of the field.
    2. -
-
Text and font
{{cssxref("color")}}YesYes
{{cssxref("font")}}YesYesSee the note about {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}YesYes
{{cssxref("text-align")}}YesYes
{{cssxref("text-decoration")}}PartialPartial
{{cssxref("text-indent")}}YesYes
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}PartialPartial
{{cssxref("text-transform")}}N.A.N.A.
Border and background
{{cssxref("background")}}NoNo -

Supported but there is too much inconsistency between browsers to be reliable.

-
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
- -

Check boxes and radio buttons

- -

See the {{htmlelement("input/checkbox", "checkbox")}} and {{htmlelement("input/radio", "radio")}} input types.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}No[1]No[1] -
    -
  1. Some browsers add extra margins and others stretch the widget.
    2. -
-
{{cssxref("height")}}No[1]No[1] -
    -
  1. Some browsers add extra margins and others stretch the widget.
    2. -
-
{{cssxref("border")}}NoNo
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}NoNo
Text and font
{{cssxref("color")}}N.A.N.A.
{{cssxref("font")}}N.A.N.A.
{{cssxref("letter-spacing")}}N.A.N.A.
{{cssxref("text-align")}}N.A.N.A.
{{cssxref("text-decoration")}}N.A.N.A.
{{cssxref("text-indent")}}N.A.N.A.
{{cssxref("text-overflow")}}N.A.N.A.
{{cssxref("text-shadow")}}N.A.N.A.
{{cssxref("text-transform")}}N.A.N.A.
Border and background
{{cssxref("background")}}NoNo
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
- -

Select boxes (single line)

- -

See the {{htmlelement("select")}},  {{htmlelement("optgroup")}} and  {{htmlelement("option")}} elements.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}Partial[1]Partial[1] -
    -
  1. This property is okay on the {{htmlelement("select")}} element, but it cannot be the case on the {{htmlelement("option")}} or {{htmlelement("optgroup")}} elements.
    2. -
-
{{cssxref("height")}}NoYes
{{cssxref("border")}}PartialYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}No[1]Partial[2] -
    -
  1. The property is applied, but in an inconsistent way between browsers on Mac OSX.
    2. -
  2. The property is well applied on the {{htmlelement("select")}} element, but is inconsistently handled on {{htmlelement("option")}} and {{htmlelement("optgroup")}} elements.
    3. -
-
Text and font
{{cssxref("color")}}Partial[1]Partial[1] -
    -
  1. On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on {{htmlelement("option")}} and {{htmlelement("optgroup")}} elements.
    2. -
-
{{cssxref("font")}}Partial[1]Partial[1] -
    -
  1. On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on {{htmlelement("option")}} and {{htmlelement("optgroup")}} elements.
    2. -
-
{{cssxref("letter-spacing")}}Partial[1]Partial[1] -
    -
  1. IE9 does not support this property on {{htmlelement("select")}}, {{htmlelement("option")}}, and {{htmlelement("optgroup")}} elements; WebKit based browsers on Mac OSX do not support this property on {{htmlelement("option")}} and {{htmlelement("optgroup")}} elements.
    2. -
-
{{cssxref("text-align")}}No[1]No[1] -
    -
  1. IE9 on Windows 7 and WebKit based browsers on Mac OSX do not support this property on this widget.
    2. -
-
{{cssxref("text-decoration")}}Partial[1]Partial[1] -
    -
  1. Only Firefox provides full support for this property. Opera does not support this property at all and other browsers only support it on the {{htmlelement("select")}} element.
    2. -
-
{{cssxref("text-indent")}}Partial[1][2]Partial[1][2] -
    -
  1. Most of the browsers only support this property on the {{htmlelement("select")}} element.
    2. -
  2. IE9 does not support this property.
    3. -
-
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}Partial[1][2]Partial[1][2] -
    -
  1. Most of the browsers only support this property on the {{htmlelement("select")}} element.
    2. -
  2. IE9 does not support this property.
    3. -
-
{{cssxref("text-transform")}}Partial[1]Partial[1] -
    -
  1. Most of the browsers only support this property on the {{htmlelement("select")}} element.
    2. -
-
Border and background
{{cssxref("background")}}Partial[1]Partial[1] -
    -
  1. Most of the browsers only support this property on the {{htmlelement("select")}} element.
    2. -
-
{{cssxref("border-radius")}}Partial[1]Partial[1]
{{cssxref("box-shadow")}}NoPartial[1]
- -

Note Firefox does not provide any way to change the down arrow on the {{htmlelement("select")}} element.

- -

Select boxes (multiline)

- -

See the {{htmlelement("select")}}, {{htmlelement("optgroup")}} and  {{htmlelement("option")}} elements and the size attribute.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}YesYes
{{cssxref("border")}}YesYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}Partial[1]Partial[1] -
    -
  1. Opera does not support {{cssxref("padding-top")}} and {{cssxref("padding-bottom")}} on the {{htmlelement("select")}} element.
    2. -
-
Text and font
{{cssxref("color")}}YesYes
{{cssxref("font")}}YesYesSee the note about {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}Partial[1]Partial[1] -
    -
  1. IE9 does not support this property on {{htmlelement("select")}}, {{htmlelement("option")}}, and {{htmlelement("optgroup")}} elements; WebKit based browsers on Mac OSX do not support this property on {{htmlelement("option")}} and {{htmlelement("optgroup")}} elements.
    2. -
-
{{cssxref("text-align")}}No[1]No[1] -
    -
  1. IE9 on Windows 7 and WebKit based browser on Mac OSX do not support this property on this widget.
    2. -
-
{{cssxref("text-decoration")}}No[1]No[1] -
    -
  1. Only supported by Firefox and IE9+.
    2. -
-
{{cssxref("text-indent")}}NoNo
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}NoNo
{{cssxref("text-transform")}}Partial[1]Partial[1] -
    -
  1. Most of the browsers only support this property on the {{htmlelement("select")}} element.
    2. -
-
Border and background
{{cssxref("background")}}YesYes
{{cssxref("border-radius")}}Yes[1]Yes[1] -
    -
  1. On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.
    2. -
-
{{cssxref("box-shadow")}}NoPartial[1] -
    -
  1. IE9 does not support this property.
    2. -
-
- -

Datalist

- -

See the {{htmlelement("datalist")}} and {{htmlelement("input")}} elements and the list attribute.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}NoNo
{{cssxref("height")}}NoNo
{{cssxref("border")}}NoNo
{{cssxref("margin")}}NoNo
{{cssxref("padding")}}NoNo
Text and font
{{cssxref("color")}}NoNo
{{cssxref("font")}}NoNo
{{cssxref("letter-spacing")}}NoNo
{{cssxref("text-align")}}NoNo
{{cssxref("text-decoration")}}NoNo
{{cssxref("text-indent")}}NoNo
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}NoNo
{{cssxref("text-transform")}}NoNo
Border and background
{{cssxref("background")}}NoNo
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
- -

File picker

- -

See the {{htmlelement("input/file", "file")}} input type.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}NoNo
{{cssxref("height")}}NoNo
{{cssxref("border")}}NoNo
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}NoNo
Text and font
{{cssxref("color")}}YesYes
{{cssxref("font")}}No[1]No[1] -
    -
  1. Supported, but there is too much inconsistency between browsers to be reliable.
    2. -
-
{{cssxref("letter-spacing")}}Partial[1]Partial[1] -
    -
  1. Many browsers apply this property to the select button.
    2. -
-
{{cssxref("text-align")}}NoNo
{{cssxref("text-decoration")}}NoNo
{{cssxref("text-indent")}}Partial[1]Partial[1] -
    -
  1. It acts more or less like an extra left margin outside the widget.
    2. -
-
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}NoNo
{{cssxref("text-transform")}}NoNo
Border and background
{{cssxref("background")}}No[1]No[1] -
    -
  1. Supported, but there is too much inconsistency between browsers to be reliable.
    2. -
-
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoPartial[1] -
    -
  1. IE9 does not support this property.
    2. -
-
- -

Date pickers

- -

See the {{htmlelement("input/date", "date")}} and {{htmlelement("input/time", "time")}} input types. Many properties are supported, but there is too much inconstency between browsers to be reliable.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}NoNo
{{cssxref("height")}}NoNo
{{cssxref("border")}}NoNo
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}NoNo
Text and font
{{cssxref("color")}}NoNo
{{cssxref("font")}}NoNo
{{cssxref("letter-spacing")}}NoNo
{{cssxref("text-align")}}NoNo
{{cssxref("text-decoration")}}NoNo
{{cssxref("text-indent")}}NoNo
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}NoNo
{{cssxref("text-transform")}}NoNo
Border and background
{{cssxref("background")}}NoNo
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
- -

Color pickers

- -

See the {{htmlelement("input/color", "color")}} input type:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}No[1]Yes -
    -
  1. Opera handles this like a select widget with the same restriction.
    2. -
-
{{cssxref("border")}}YesYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}No[1]Yes -
    -
  1. Opera handles this like a select widget with the same restriction.
    2. -
-
Text and font
{{cssxref("color")}}N.A.N.A.
{{cssxref("font")}}N.A.N.A.
{{cssxref("letter-spacing")}}N.A.N.A.
{{cssxref("text-align")}}N.A.N.A.
{{cssxref("text-decoration")}}N.A.N.A.
{{cssxref("text-indent")}}N.A.N.A.
{{cssxref("text-overflow")}}N.A.N.A.
{{cssxref("text-shadow")}}N.A.N.A.
{{cssxref("text-transform")}}N.A.N.A.
Border and background
{{cssxref("background")}}No[1]No[1] -
    -
  1. Supported, but there is too much inconsistency between browsers to be reliable.
    2. -
-
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
- -

Meters and progress

- -

See the {{htmlelement("meter")}} and {{htmlelement("progress")}} elements:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}YesYes
{{cssxref("border")}}PartialYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}YesPartial[1] -
    -
  1. Chrome hides the {{htmlelement("progress")}} and {{htmlelement("meter")}} element when the {{cssxref("padding")}} property is applied on a tweaked element.
    2. -
-
Text and font
{{cssxref("color")}}N.A.N.A.
{{cssxref("font")}}N.A.N.A.
{{cssxref("letter-spacing")}}N.A.N.A.
{{cssxref("text-align")}}N.A.N.A.
{{cssxref("text-decoration")}}N.A.N.A.
{{cssxref("text-indent")}}N.A.N.A.
{{cssxref("text-overflow")}}N.A.N.A.
{{cssxref("text-shadow")}}N.A.N.A.
{{cssxref("text-transform")}}N.A.N.A.
Border and background
{{cssxref("background")}}No[1]No[1] -
    -
  1. Supported, but there is too much inconsistency between browsers to be reliable.
    2. -
-
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
- -

Range

- -

See the {{htmlelement("input/range", "range")}} input type. There is no standard way to change the style of the range grip and Opera has no way to tweak the default rendering of the range widget.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}Partial[1]Partial[1] -
    -
  1. Chrome and Opera add some extra space around the widget, whereas Opera on Windows 7 stretches the range grip.
    2. -
-
{{cssxref("border")}}NoYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}Partial[1]Yes -
    -
  1. The {{cssxref("padding")}} is applied, but has no visual effect.
    2. -
-
Text and font
{{cssxref("color")}}N.A.N.A.
{{cssxref("font")}}N.A.N.A.
{{cssxref("letter-spacing")}}N.A.N.A.
{{cssxref("text-align")}}N.A.N.A.
{{cssxref("text-decoration")}}N.A.N.A.
{{cssxref("text-indent")}}N.A.N.A.
{{cssxref("text-overflow")}}N.A.N.A.
{{cssxref("text-shadow")}}N.A.N.A.
{{cssxref("text-transform")}}N.A.N.A.
Border and background
{{cssxref("background")}}No[1]No[1] -
    -
  1. Supported, but there is too much inconsistency between browsers to be reliable.
    2. -
-
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
- -

Image buttons

- -

See the {{htmlelement("input/image", "image")}} input type:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}YesYes
{{cssxref("border")}}YesYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}YesYes
Text and font
{{cssxref("color")}}N.A.N.A.
{{cssxref("font")}}N.A.N.A.
{{cssxref("letter-spacing")}}N.A.N.A.
{{cssxref("text-align")}}N.A.N.A.
{{cssxref("text-decoration")}}N.A.N.A.
{{cssxref("text-indent")}}N.A.N.A.
{{cssxref("text-overflow")}}N.A.N.A.
{{cssxref("text-shadow")}}N.A.N.A.
{{cssxref("text-transform")}}N.A.N.A.
Border and background
{{cssxref("background")}}YesYes
{{cssxref("border-radius")}}Partial[1]Partial[1] -
    -
  1. IE9 does not support this property.
    2. -
-
{{cssxref("box-shadow")}}Partial[1]Partial[1] -
    -
  1. IE9 does not support this property.
    2. -
-
- -

See also

- -

Learning path

- - - -

Advanced Topics

- - diff --git a/files/es/learn/html/forms/prueba_tus_habilidades_colon__controles_html5/index.html b/files/es/learn/html/forms/prueba_tus_habilidades_colon__controles_html5/index.html deleted file mode 100644 index b73c8d4442..0000000000 --- a/files/es/learn/html/forms/prueba_tus_habilidades_colon__controles_html5/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: 'Prueba tus habilidades: controles HTML5' -slug: 'Learn/HTML/Forms/Prueba_tus_habilidades:_controles_HTML5' -tags: - - Aprendizaje - - Evaluación - - Formulário - - HTML5 - - Principiante -translation_of: 'Learn/Forms/Test_your_skills:_HTML5_controls' ---- -
{{learnsidebar}}
- -

El objetivo de esta prueba es evaluar si has comprendido nuestro artículo The HTML5 input types.

- -
-

Nota: Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.
-
- Si te atascas, pide ayuda — mira la sección Evaluación o ayuda adicional al final de esta página.

-
- -

Controles HTML5 1

- -

Primero exploraremos algunos de los tipos nuevos de input en HTML5. Crea las etiquetas input apropiadas para que un usuario actualice sus detalles para:

- -
    -
  1. Email
    2. -
  2. Website
    3. -
  3. Número de teléfono
    4. -
  4. Color favorito
    5. -
- -

Intenta actualizar el código en vivo más abajo para retrear el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/html/forms/tasks/html5-controls/html5-controls1.html", '100%', 700)}}

- -
-

Descarga el código inicial de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Controles HTML5 2

- -

A continuación, queremos que implementes un control deslizante para permitir al usuario escoger el número máximo de personas para invitar a su fiesta.

- -
    -
  1. Implemente un control deslizante básico que acompañe a la etiqueta provista.
    2. -
  2. Establezca un valor minimo de 1, uno máximo de 30 y un valor inicial de 10.
    3. -
  3. Crea un elemento de salida correspondiente para poner el valor actual del deslizador. Asígnale la clase invite-output, y asocialo semanticamente con le entrada. Si haces esto correctamente, el JavaScript incluido en la página automáticamente actualizará el valor cuando se deslice el control.
    4. -
- -

Intenta actualizar el código en vivo más abajo para retrear el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/html/forms/tasks/html5-controls/html5-controls2.html", '100%', 700)}}

- -
-

Descarga el código inicial de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Evaluación o ayuda adicional

- -

Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.

- -

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

- -
    -
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.
    2. -
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: -
      -
    • Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de controles HTML5 1".
      • -
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • -
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • -
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • -
    -
    3. -
diff --git a/files/es/learn/html/forms/prueba_tus_habilidades_colon__otros_controles/index.html b/files/es/learn/html/forms/prueba_tus_habilidades_colon__otros_controles/index.html deleted file mode 100644 index 1496025a8d..0000000000 --- a/files/es/learn/html/forms/prueba_tus_habilidades_colon__otros_controles/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: 'Prueba tus habilidades: Otros controles' -slug: 'Learn/HTML/Forms/Prueba_tus_habilidades:_Otros_controles' -translation_of: 'Learn/Forms/Test_your_skills:_Other_controls' ---- -
{{learnsidebar}}
- -

El objetivo de esta pueba de habilidad es evaluar si has comprendido nuestro artículo Otros controles de formulario.

- -
-

Nota: Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.
-
- Si te atascas, pide ayuda — mira la sección Evaluación o ayuda adicional al final de esta página.

-
- -

Otros controles 1

- -

En nuestra primera evaluación de "Otros controles", te pediremos crear una entrada de texto de líneas múltiples.

- -
    -
  1. Crea una entrada básica de texto de múltiples líneas.
    2. -
  2. Asócialo semánticamente con la etiqueta de "Comentario" asociado.
    3. -
  3. Define la entrada con 35 columnas y 10 filas de espacio en cual agregar comentarios.
    4. -
  4. Define para los comentatios una longitud máxima de 100 caracteres.
    5. -
- -

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/html/forms/tasks/other-controls/other-controls1.html", '100%', 700)}}

- -
-

Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Otros controles 2

- -

Ahora es tiempo de implementar un menú desplegable, para permitir al usuario escoger su comida favorita de las opciones entregadas.

- -
    -
  1. Crea tu estructura de caja básica.
    2. -
  2. Asóciala semánticamente con la etiqueta de "comentarios" entregada.
    3. -
  3. Dentro de la lista, divide las opciones en 2 subgrupos - "principales" y "meriendas".
    4. -
- -

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/html/forms/tasks/other-controls/other-controls2.html", '100%', 700)}}

- -
-

Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Otros controles 3

- -

En la tarea final de esta evaluación, comenzaremos con la misma lista de opciones de comida. Sin embargo, esta vez queremos hacer las cosas de otra forma:

- -
    -
  1. Crea una entrada de texto básica, que esté asociada semánticamente con la etiqueta entregada.
    2. -
  2. Coloca las opciones de comida en una lista que pueda ser asociada con una entrada de formulario.
    3. -
  3. Asocia la lista con tu entrada de texto, de forma que cuando escribas caracteres, cualquier opción de la lista que coincida con la secuencia de caracteres ingresada, aparezca en un listado desplegable como sugerencia de autocompletado.
    4. -
- -

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/html/forms/tasks/other-controls/other-controls3.html", '100%', 700)}}

- -
-

Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Evaluación o ayuda adicional

- -

Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.

- -

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

- -
    -
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.
    2. -
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: -
      -
    • Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de Otros controles 1".
      • -
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • -
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • -
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • -
    -
    3. -
diff --git a/files/es/learn/html/forms/sending_and_retrieving_form_data/index.html b/files/es/learn/html/forms/sending_and_retrieving_form_data/index.html deleted file mode 100644 index d6ca2161a4..0000000000 --- a/files/es/learn/html/forms/sending_and_retrieving_form_data/index.html +++ /dev/null @@ -1,328 +0,0 @@ ---- -title: Sending form data -slug: Learn/HTML/Forms/Sending_and_retrieving_form_data -translation_of: Learn/Forms/Sending_and_retrieving_form_data ---- -
{{LearnSidebar}} {{PreviousMenuNext("Aprende / HTML / Formularios / The_native_form_widgets", "Aprender / html / Formularios / Form_validation", "Aprender / html / Forms")}}
- -

En este artículo se analiza lo que sucede cuando un usuario envía un formulario - ¿A dónde van los datos y cómo los manejamos cuando llegan allí? - También tenemos en cuenta algunos de los problemas de seguridad asociados con el envío de los datos del formulario.

- - - - - - - - - - - - -
Requisitos previos:Conocimientos básicos de informática, una comprensión de HTML , y conocimientos básicos de HTTP y programación del lado del servidor .
Objetivo:Para entender lo que sucede cuando se envía los datos del formulario, incluyendo la obtención de una idea básica de cómo se procesan los datos en el servidor
- -

¿A dónde van los datos?

- -

Aquí vamos a discutir lo que ocurre con los datos cuando se envía un formulario.

- -

Sobre la arquitectura cliente / servidor

- -

La web se basa en una arquitectura cliente / servidor muy básica que se puede resumir de la siguiente manera: un cliente (normalmente un navegador Web) envía una petición a un servidor (la mayoría de las veces un servidor web como Apache , Nginx , IIS , Tomcat , etc.), utilizando el protocolo HTTP . El servidor responde a la solicitud utilizando el mismo protocolo.

- -

Un esquema básico de la arquitectura cliente Web / servidor

- -

En el lado del cliente, un formulario HTML no es más que una manera fácil de usar conveniente para configurar una petición HTTP para enviar datos a un servidor. Esto permite al usuario para proporcionar información a ser entregada en la petición HTTP.

- -
-

Nota : Para tener una mejor idea de cómo funcionan las arquitecturas cliente-servidor, lea nuestra programación de páginas web del lado del servidor, módulo: primeros pasos. En el lado del cliente: Debes definir como envías los datos.

-
- -

El elemento {{HTMLElement ( "form")}} define cómo se enviarán los datos. Todos sus atributos están diseñados para que pueda configurar la solicitud que se enviará cuando un usuario pulsa un botón de envío. Los dos atributos más importantes son {{htmlattrxref ( "acción", "forma")}} y {{htmlattrxref ( "método", "forma")}}.

- -

El atributo {{htmlattrxref ( "acción", "forma")}}.

- -

Este atributo define el lugar donde los datos se envian. Su valor debe ser una dirección URL válida. Si no se proporciona este atributo, los datos serán enviados a la dirección URL de la página que contiene el formulario.

- -

En este ejemplo, los datos se envían a una dirección URL absoluta - http://foo.com:

- -
<Acción del formulario = "http://foo.com">
- -

Aquí, nosotros usamos una URL relativa - los datos se envían a una dirección URL diferente en el servidor:

- -
<Acción del formulario = "/ somewhere_else">
- -

Cuando se especifica sin atributos, como abajo, el {{HTMLElement ( "form")}} los datos se envían a la misma página en que la "forma" está presente :

- -
<Form>
- -

Muchas páginas más antiguas utilizan la siguiente notación para indicar que los datos deben ser enviados a la misma página que contiene el formulario; Esto fue necesario porque hasta HTML5, el atributo {{htmlattrxref ( "acción", "form")}} fue requerido . Esto ya no es necesario.

- -
<Form action = "#">
- -
-

Nota: Es posible especificar una dirección URL que utiliza el protocolo HTTPS (HTTP seguro). Al hacer esto, los datos se cifran junto con el resto de la solicitud, incluso si el propio formulario está alojado en una página insegura se accede a través de HTTPS. Por otro lado, si el formulario está alojado en una página segura, pero se especifica una dirección URL HTTP insegura con el atributo {{htmlattrxref ( "acción", "form")}} , todos los navegadores mostrarán una advertencia de seguridad para el usuario cada vez  que intenten enviar datos, ya que estos no se pueden cifrar.

-
- -

El atributo {{htmlattrxref ( "método", "form")}}

- -

Este atributo define cómo se envían los datos. El protocolo HTTP proporciona varias formas de realizar una solicitud; Los datos del formulario HTML se pueden transmitir a través de un número de diferentes queridos, los más comunes de los cuales son el método GET y el método POST.

- -

Para entender la diferencia entre estos dos métodos, vamos a dar un paso atrás y examinar cómo funciona HTTP. Cada vez que desee llegar a un recurso en la Web, el navegador envía una petición a una URL. Una petición HTTP consta de dos partes: un encabezado que contiene un conjunto de metadatos mundial sobre las capacidades del navegador, y un cuerpo que puede contener la información necesaria paraque el servidor pueda procesar la petición específica.

- -
El método GET
- -

El método GET es  utilizado por el navegador para pedir al servidor que se envíe de vuelta un recurso dado: "Hey servidor, quiero conseguir este recurso." En este caso, el navegador envía un cuerpo vacío. Debido a que el cuerpo está vacío, si un formulario se envía utilizando este método, los datos enviados al servidor se anexan a la URL.

- -

Considere la siguiente forma:

- -
<form action="http://foo.com" method="get">
-  <div>
-    <label for="decir"> ¿Qué saludo quiere decir? </label>
-    <input name="decir" id="decir" value="Hola">
-  </div>
-  <div>
-    <label for="para"> ¿A quién se lo quiere decir? </label>
-    <input name="para" value="mamá">
-  </div>
-  <div>
-    <button> Botón enviar mis saludos </ button>
-  </div>
-</form>
- -

Dado que el método GETha conseguido el recurso, verá en la URL lo siguiente en la barra de direcciones del navegador www.foo.com/?say=Hi&to=Mom  cuando se envía el formulario.

- -

Los datos se añaden a la URL como una serie de pares de nombre / valor. Después que la dirección web URL ha terminado, se incluye un signo de interrogación ( ?) seguido de los pares de nombre / valor, cada uno separado por un signo ( &). En este caso estamos pasando dos piezas de datos en el servidor:

- - - -

La solicitud HTTP se ve así:

- -
GET /? = Decir Hola & a = mamá HTTP / 1.1
-Anfitrión: foo.com
- -
-

Nota : Puede encontrar este ejemplo en GitHub - ver llegar-method.html ( verlo en directo también ).

-
- -
El método POST
- -

El POSTmétodo es un poco diferente. Es el método que el navegador utiliza para comunicarse con el servidor cuando se pide una respuesta que tenga en cuenta los datos proporcionados en el cuerpo de la petición HTTP: "Hey servidor, echa un vistazo a estos datos y envíame de vuelta un resultado apropiado." Si un formulario se envía utilizando este método, los datos se anexan al cuerpo de la petición HTTP.

- -

Veamos un ejemplo - se trata de algo similar a como se vió en el método GETdel apartado anterior, pero con el {{htmlattrxref ( "método", "form")}} atributo establecido post.

- -
<Form action = "http://foo.com" method = "post">
-  <Div>
-    <Label for = "dice"> Lo saludo qué quiere decir? </ Label>
-    <Input name = "decir" id = "decir" value = "Hola">
-  </ Div>
-  <Div>
-    <Label for = "para"> ¿Quién usted quiere decir que a? </ Label>
-    <Input name = "a" value = "mamá">
-  </ Div>
-  <Div>
-    <> Botón enviar mis saludos </ botón>
-  </ Div>
-</ Form>
- -

Cuando el formulario se envía mediante el método POST, no se obtienen los datos adjuntos en la dirección URL, y la solicitud HTTP se parece a esto y los datos son incluidos en el cuerpo de la petición en su lugar:

- -
POST / HTTP/1.1
-Anfitrión: foo.com
-Content-Type: application / x-www-form-urlencoded
-Content-Length: 13
-
-decir = Hi & a = mamá
- -

La cabecera Content-Length indica el tamaño del cuerpo, y la cabecera Content-Type indica el tipo de recurso que se envía al servidor. Discutiremos estas cabeceras más adelante.

- -
-

Nota : Puede encontrar este ejemplo en GitHub - ver post-method.html ( verlo en directo también ).

-
- -

Visualización de peticiones HTTP

- -

Las peticiones HTTP nunca se muestran al usuario (si quieres verlos, es necesario utilizar herramientas como el Monitor de red Firefox o las herramientas de desarrollo de Chrome ). A modo de ejemplo, los datos del formulario se muestran a continuación en la pestaña de Chrome red:

- -

- -

Lo único que se muestra al usuario es la dirección URL llamada. Como mencionamos anteriormente, con una peticiónGET del usuario,se verán los datos en su barra de direcciones, pero con una petición POST no será de esta manera. Esto puede ser muy importante por dos razones:

- -
    -
  1. Si necesita enviar una contraseña (o cualquier otra pieza sensible de los datos), nunca utilice el métodoGET o se arriesga a mostrar en la barra de direcciones, lo que sería muy inseguro.
    2. -
  2. Si necesita enviar una gran cantidad de datos, el método POSt es preferible debido a que algunos navegadores limitan los tamaños de las direcciones URL. Además, muchos servidores limitan la longitud de las URL que aceptan.
    3. -
- -

En el lado  Servidor: la recuperación de los datos

- -

Sea cual sea el método HTTP que elija, el servidor recibe una cadena que será analizada con el fin de obtener los datos como una lista de pares clave / valor. La forma de acceder a esta lista depende de la plataforma de desarrollo que use y de las estructuras específicas que pueda estar usando con él. La tecnología se utiliza también determina cómo se manejan claves duplicadas; A menudo,se da prioridad al valor recibido más recientemente para una clave dada .

- -

Ejemplo: PHP Raw

- -

PHP ofrece algunos objetos globales para acceder a los datos. Suponiendo que usted ha utilizado el métodoPOST, el siguiente ejemplo sólo toma los datos y lo muestra al usuario. Por supuesto, lo que se hace con los datos depende de usted. Es posible visualizarlos, almacenarlos en una base de datos, enviarlos por correo electrónico, o procesarlos de alguna otra manera.

- -
<? Php
-  // La variable global $ _POST que permite acceder a los datos enviados con el método POST por su nombre
-  // Para acceder a los datos enviados con el método GET, puede usar $ _GET
-  $ = Decir htmlspecialchars ($ _POST [ 'decir']);
-  $ A = htmlspecialchars ($ _POST [ 'a']);
-
-  echo $ digamos, '', $ a;
-?>
- -

Este ejemplo muestra una página con los datos que enviamos. Esto se puede ver en acción en nuestro archivo ejemplo php-example.html - que contiene un ejemplo similar en forma como el que hemos visto antes, con un methodcon parámetro posty un action con parámetro php-example.php Cuando se envía, envía los datos del formulario al script php-ejemplo.php , que contiene el código de PHP que se ha visto en el bloque anterior. Cuando se ejecuta este código, la salida en el navegador es Hi Mom.

- -

- -
-

Nota : Este ejemplo no funcionará cuando se carga en un navegador localmente - los navegadores no pueden interpretar  código PHP, por lo que cuando se envía el formulario en el navegador sólo  se puede ofrecer la descarga del archivo PHP para usted. Para conseguir que funcione, es necesario ejecutar el ejemplo a través de un servidor PHP de algún tipo. Buenas opciones para probar PHP locales son MAMP (Mac y Windows) y AMPPS (Mac, Windows, Linux).

-
- -

Ejemplo: Python

- -

Este ejemplo muestra como se puede utilizar Python para hacer la misma cosa - mostrar los datos presentados en una página web. Se utiliza el framework Flask para la prestación de las plantillas, el manejo de la presentación de datos de formulario, etc (ver python-example.py ).

- -
from flask import Flask, render_template, request
-app = Flask(__name__)
-
-@app.route('/', methods=['GET', 'POST'])
-def form():
-    return render_template('form.html')
-
-@app.route('/hello', methods=['GET', 'POST'])
-def hello():
-    return render_template('greeting.html', say=request.form['say'], to=request.form['to'])
-
-if __name__ == "__main__":
-    app.run()
- -

Las dos plantillas de referencia en el código anterior son los siguientes:

- - - -
-

Nota : Una vez más, este código no funcionará si sólo intenta cargarlo en un navegador directamente. Python funciona un poco diferente a PHP - Para ejecutar este código local que necesita para instalar Python / PIP , a continuación, instalar el frasco utilizando pip3 install flask. En este punto, usted debe ser capaz de ejecutar el ejemplo utilizando python3 python-example.py, a continuación, deberá navegar a localhost:5000en su barra de direcciones.

-
- -

Otros lenguajes y frameworks

- -

Hay muchas otras tecnologías del lado del servidor que puede utilizar para el manejo de formularios, incluyendo Perl , Java , .Net , Rubí , etc. Sólo tiene que elegir el que más le guste. Dicho esto, vale la pena señalar que es muy raro de usar estas tecnologías directamente porque esto puede ser complicado. Es más común el uso de uno de los muchos marcos de trabajo para un manejo más fácil del código, tales como:

- - - -

Vale la pena señalar que incluso el uso de estos marcos, trabajar con formularios no es necesariamente fácil . Pero es mucho más fácil que tratar de escribir toda la funcionalidad  a partir de cero, además, le ahorrará mucho tiempo.

- -
-

Nota : Está más allá del alcance de este artículo para enseñarle cualquier lenguaje del lado del servidor o marcos de trabajo. Los enlaces de arriba le dará un poco de ayuda,en caso de que desee aprender.

-
- -

Un caso especial: el envío de archivos

- -

El envío de archivos con formularios HTML es un caso especial. Los archivos son datos binarios - o considerados como tal - mientras que todos los demás datos son datos de texto. Debido a que HTTP es un protocolo de texto, existen requisitos especiales para el manejo de datos binarios.

- -

El {{htmlattrxref ( "enctype", "form")}} atributo

- -

Este atributo le permite especificar el valor de la cabecera Content-Type HTTP incluido en la solicitud que se genera cuando se envía el formulario. Esta cabecera es muy importante porque le dice al servidor qué tipo de datos se está enviando. Por defecto, su valor es application/x-www-form-urlencoded. En términos humanos, esto significa: "Estos son datos de formulario que han sido codificados dentro de los parámetros de la URL."

- -

Si desea enviar archivos, es necesario tomar tres pasos adicionales:

- - - -

Por ejemplo:

- -
<Form method = "post" enctype = "multipart / form-data">
-  <Div>
-    <Label for = "archivo"> ​​Elija un archivo </ label>
-    <Input type = "file" id = "file" name = "myFile">
-  </ Div>
-  <Div>
-    <> Botón Enviar el archivo </ botón>
-  </ Div>
-</ Form>
- -
-

Nota: Algunos navegadores son compatibles con la {{htmlattrxref ( "múltiple", "input")}} atributo en el elemento {{HTMLElement ( "input")}}, lo que permite elegir más de un archivo  para subir con un único elemento <input> . Cómo el servidor gestiona los archivos realmente depende de la tecnología utilizada en el servidor. Como se mencionó anteriormente, el uso de un marco le hará la vida mucho más fácil.

-
- -
-

Advertencia: Muchos servidores están configurados con un límite de tamaño para los archivos y las peticiones HTTP con el fin de prevenir el abuso. Es importante comprobar este límite con el administrador del servidor antes de enviar un archivo.

-
- -

Precauciones de seguridad comunes

- -

Cada vez que envíe datos a un servidor, debe tener en cuenta la seguridad de sus formularios HTML que son con mucho, los vectores de ataque más comunes (en lugares donde ocurren los ataques contra servidores). Los problemas nunca vienen de los formulariosHTML mismos - sino que proceden de cómo el servidor maneja los datos.

- -

Dependiendo de lo que estés haciendo, hay algunos problemas de seguridad muy conocidos con los que te enfrentarás:

- -

XSS y CSRF

- -

Cross-Site Scripting (XSS) y Cross-Site Request Falsification (CSRF) son tipos comunes de ataques que se producen cuando se muestran los datos enviados por un usuario y que son devueltos a otro usuario para otro uso.

- -

XSS permite a los atacantes inyectar secuencias de comandos del lado del cliente en páginas Web visitadas por otros usuarios. Una vulnerabilidad de secuencias de comandos entre sitios, puede ser utilizada por los atacantes para eludir los controles de acceso, como la política del mismo origen . El efecto de estos ataques pueden ir desde una pequeña molestia a un riesgo de seguridad.

- -

Los ataques CSRF son similares a los ataques XSS porque comienzan de la misma manera - mediante la inyección de comandos de cliente en páginas Web - pero su objetivo es diferente. Los atacantes CSRF tratan de escalar privilegios  de un usuario de mayores privilegios (por ejemplo, un administrador de sitio) para realizar una acción que no deberían ser capaces de hacer (por ejemplo, el envío de datos a un usuario no fiable).

- -

Los ataques XSS explotan la confianza depositada a un usuario de un sitio web, mientras que los ataques CSRF abusan de la confianza que un sitio web ofrece para sus usuarios.

- -

Para evitar estos ataques, siempre se deben comprobar los datos que un usuario envía a su servidor y (si es necesario mostrarlos) trate de no mostrar el contenido HTML provisto por el usuario. En su lugar, se deben procesar los datos proporcionados por el usuario para no mostrarlos al pie de la letra. Casi todos los marcos de trabajo (frameworks) en el mercado hoy implementan un filtro mínimo que eliminan el código HTML {{HTMLElement ( "script")}}, {{HTMLElement ( "iframe")}} y {{HTMLElement ( "objeto")}} si fuesen enviados por cualquier usuario. Esto ayuda a mitigar el riesgo, pero no necesariamente lo erradica.

- -

Inyección SQL

- -

La inyección de SQL es un tipo de ataque que intenta realizar acciones en una base de datos utilizada por el sitio web de destino. Esto normalmente implica el envío de una petición SQL con la esperanza de que el servidor la ejecutará (por lo general cuando el servidor de aplicaciones intenta almacenar los datos enviados por un usuario). Esto es en realidad uno de los principales vectores de ataque contra los sitios web  .

- -

Las consecuencias pueden ser terribles, que van desde la pérdida de datos o hasta que los ataques  tomen el control de la infraestructura de todo el sitio web mediante el uso de una escalada de privilegios. Esta es una amenaza muy seria y nunca debe almacenar los datos enviados por un usuario sin realizar alguna sanitización (por ejemplo, mediante el uso mysql_real_escape_string()de una infraestructura de PHP / MySQL).

- -

Inyección de cabecera HTTP y la inyección de correo electrónico

- -

Este tipo de ataques pueden ocurrir cuando su aplicación se basa cabeceras HTTP o mensajes de correo electrónico basado en la entrada de datos por un usuario en un formulario. Estos no dañan directamente su servidor o afectan a sus usuarios, pero son una puerta abierta a problemas más profundos tales como el secuestro de sesión o ataques de phishing.

- -

Estos ataques son en su mayoría en silencio, y pueden volver a su servidor en un zombi .

- -

Sea paranoico: Nunca confíe en sus usuarios

- -

Entonces, ¿cómo se lucha contra estas amenazas? Este es un tema mucho más allá de esta guía, pero hay algunas reglas a tener en cuenta. La regla más importante es: nunca vuelva a confiar en sus usuarios, incluyáse a sí mismo; incluso un usuario de confianza podría haber sido secuestrado.

- -

Todos los datos que vienen a su servidor deben comprobarse y ser desinfectados. Siempre. Sin excepción.

- - - -

Debería evitar muchos o  la mayoría de estos problemas, si sigue estas tres reglas, pero siempre es una buena idea  obtener una revisión de seguridad realizada por una tercera parte competente. No asuma que usted ha visto todos los posibles problemas.

- -
-

Nota : La seguridad del sitio web el artículo de nuestro lado del servidor tema de aprendizaje analiza las amenazas anteriores y las posibles soluciones con más detalle.

-
- -

Conclusión

- -

Como se puede ver, el envío de los datos del formulario es fácil, pero asegurar una aplicación puede ser complicado. Sólo recuerde que un desarrollador de aplicaciones para usuario no es el que debe definir el modelo de seguridad de los datos. Sí, como veremos, es posible realizar la validación de los datos del lado del cliente , pero el servidor no puede confiar en esta validación porque no tiene manera de saber realmente lo que  sucede en el lado del cliente.

- -

Ver también

- -

Si desea obtener más información sobre la seguridad de una aplicación web, se puede excavar en estos recursos:

- - - -

{{PreviousMenuNext ( "Aprende / html / Formularios / The_native_form_widgets", "Saber / html / Formularios / Form_validation", "Aprender / html / Forms")}}

diff --git a/files/es/learn/html/forms/styling_html_forms/index.html b/files/es/learn/html/forms/styling_html_forms/index.html deleted file mode 100644 index 26b4173ee8..0000000000 --- a/files/es/learn/html/forms/styling_html_forms/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: Estilizando formularios HTML -slug: Learn/HTML/Forms/Styling_HTML_forms -translation_of: Learn/Forms/Styling_web_forms ---- -

En este artículo aprenderemos como utilizar CSS con formularios HTML  para hacerlos más atractivos. Aunque parezca extraño, esto es algo que puede llegar a ser complicado. Por razones históricas y técnicas, los widgets de formulario no suelen llevarse bien con CSS. Por este motivo, muchos desarrolladores prefieren construir sus propios widgets para tener el control de su aspecto en vez de utilizar los nativos. De todas formas, con los modernos navegadores, los diseñadores web cada vez tienen  más control sobre el diseño de los elementos de formulario. Vamos a profundizar en esto.

- -

¿Porqué es tan difícil aplicar estilos a formularios con CSS?

- -

En los principios de la Web —allá por1995—se añadieron los controles de formulario en la 2ª especificación HTML. Debido a la complejidad de los widgets de formulario, los implementadores prefirieron dejar que el sistema operativo subyacente se encargara de su manejo y presentación.

- -

Pocos años después,  se creó CSS y lo que era una necesidad técnica— es decir, el uso de widgets nativos para implementar controles de formulario—empezó a requerir estilizado. Y en los primeros días de CSS, el estilizado de formularios no fué una prioridad.

- -

Por otra parte, como los usuarios estaban acostumbrados a la apariencia visual de sus plataformas respectivas, los fabricantes de navegadores fueron reacios a hacer que los controles de formularios pudieran recibir estilos.

- -

Hoy en día, ni siquiera uno solo de los navegadores actuales implementa completamente a CSS 2.1. Afortunadamente, con el tiempo, los fabricantes de navegadores han ido mejorado su soporte a CSS para los elementos de formulario e, incluso considerando que su usabilidad tiene mala reputación, actualmente, ya se puede usar CSS para estilizar formularios HTML.

- -

No todos los widgets se crean igual con CSS

- -

Actualmente aun se encuentran dificultades cuando se utiliza CSS con formularios; estos problemas se pueden dividir en tres categorías.

- -

El bueno

- -

A algunos elementos se les puede dar estilo con pocos o ningún problema independientemente de la plataforma. Entre estos se incluyen los siguientes elementos estructurales:

- -
    -
  1. {{HTMLElement("form")}}
    2. -
  2. {{HTMLElement("fieldset")}}
    3. -
  3. {{HTMLElement("label")}}
    4. -
  4. <output>
    5. -
- -

Esto también incluye todos los campos de texto (tanto los de línea simple como los de línea múltiple) y los botones.

- -
    -
- -

El malo

- -

Hay otros elementos a los que raramente se les puede aplicar estilos y pueden llegar a requerir  técnicas complejas y ocasionalmente necesitan conocimientos avanzados de CSS3.

- -

Entre estos se incluyen el elemento {{HTMLElement("legend")}} ; que no puede posicionarse adecuadamente en todas las plataformas.  Los elementos checkbox y los botones de radio no permiten que se le apliquen estilos directamente;  de todas formas, gracias a CSS3 esto puede soslayarse. Al contenido de  placeholder no se le puede aplicar estilo de ninguna forma convencional; sin embargo, todos los navegadores que lo implementan  también implementan pseudo-elementos o pseudo-clases propietarias que permiten darles estilo.

- -

Veremos como trabajar con estos casos específicos en el artículo Advanced styling for HTML forms.

- -

El feo

- -

En algunos elementos, simplemente no se puede utilizar CSS. Estos son todos los elementos avanzados de interface de usuario tales como los controles range, color, o date, e igualmente pasa con los widgets desplegables como select, option, optgropup y datalist. Respecto al selector de archivos, es bien sabido que no puede aplicarse estilo en absoluto. Los nuevos elementos progress y meter también caen dentro de esta categoría.

- -

El principal problema con todos estos widgets viene de que todos ellos tienen una estructura muy compleja y CSS no es lo suficientemente expresivo para estilizar cada una de sus sutiles partes. Si lo que se quiere es personalizar estos widgets se deberá recurrir a javaScript para construir un árbol DOM que te permita acceder a ellos. Para aprender como conseguirlo mirar en el artículo How to build custom form widgets.

- -

Estilizado básico

- -

Aplicar estilos a elementos que son fáciles de estilizar con CSS, no debería suponer ninguna dificultad ya que básicamente se comportan como cualquier otro elemento HTML. De todas formas, el agente de usuario de estilos para cada navegador puede mostrar pequeñas inconsistencias por lo que a continuación daremos algunos trucos para ayudar a aplicar estilos más cómodamente.

- -

Campos de búsqueda

- -

Las cajas de búsqueda son el único tipo de campo de texto que pueden ofrecer más dificultad al aplicar estilos. En los navegadores basados en webkit (Chrome, Safari, etc.) se debe lidiar con la propiedad -webkit-. Discutiremos esta propiedad más tarde en el artículo: Advanced styling for HTML forms.

- -

Ejemplo

- -
<form>
-  <input type="search">
-</form>
-
- -
input[type=search] {
-  border: 1px dotted #999;
-  border-radius: 0;
-
-  -webkit-appearance: none;
-}
- -

This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance

- -

En esta captura de pantalla pueden verse dos campos de búsqueda en Chrome, ambos campos tienen definido el borde como en nuestro ejemplo, pero el primero no utiliza -webkit- mientras que el segundo si lo hace con -webkit-appearance:none. Las diferencias son evidentes.

- -

Fuentes y texto

- -

Las fuentes y capacidades de texto de CSS  se pueden utilizar sin problemas en cualquier widget (y sí, se puede utilizar @font-face en formularios). De todas formas, el comportamiento de los navegadores no es siempre consistente. Por defecto, algunos widgets no heredan font-family ni font-size de sus antecesores. Y muchos navegadores utilizan la apariencia por defecto. Para mantener la coherencia de los formularios con el resto de elementos se deben añadir las siguientes reglas a la hoja de estilos:

- -
button, input, select, textarea {
-  font-family : inherit;
-  font-size   : 100%;
-}
- -

La siguiente captura de pantalla muestra estas incosistencias; a la izquierda la apariencia por defecto en Firefox sobre Mac OS X, usando las fuentes por defecto de la plataforma. A la derecha los mismos elementos aplicando nuestras reglas de armonización de fuentes.

- -

This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization

- -

Hay muchas controversia sobre si los formularios tienen mejor aspecto usando los estilos por defecto del sistema o usando estilos personalizados que coincidan con el resto del contenido. Como diseñador del sitio o aplicación Web esta decisión  es suya.

- -

Modelo de cajas

- -

Todos los campos de texto tienen soporte completo para las propiedades relacionadas con el modelo de cajas de CSS (width, height, padding, margin y border). Igual que antes, los navegadores se remiten a los estilos por defecto del sistema cuando muestran estos widgets. A cada cual te corresponde el como combinarlos dentro del resto de contenido. Si  se quieres mantener el aspecto nativo de los widgets, entonces hay que afrontar pequeñas inconsistencias de tamaño.

- -

Esto es porque cada widget tiene sus propias reglas para el orden, margen y padding. Por lo que si quieres darle el mismo tamaño a varios widgets diferentes se debe usar la propiedad box-sizing: 

- -
input, textarea, select, button {
-  width : 150px;
-  margin: 0;
-
-  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
-     -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
-          box-sizing: border-box;
-}
- -

This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing.

- -

En la captura de pantalla de arriba, la columna la izquierda es sin utilizar box-sizing, mientras que la de la derecha usa esta propiedad con el valor border-box. Obsérvese cómo esto permite asegurar que todos los elementos ocupan la misma cantidad de espacio, independientemente de las reglas por defecto de la plataforma.

- -

Posicionado

- -

El posicionado de formularios HTML no es generalmente  un problema; sin embargo, hay dos elementos a los que prestar una especial atención:

- -

legend

- -

El elemento legend no tiene problemas de estilizado a excepción de las reglas de posición. En los navegadores el elemento legend se posiciona encima del borde superior de su antecesor fieldset. No existe ninguna posibilidad de colocarlo dentro del flujo HTML más allá del borde superior. Sin embargo se puede posicionar de forma relativa o absoluta mediante la propiedad position. En cualquier caso sigue siendo parte del borde de fieldset.

- -

Debido a que el elemento legend es muy importante por razones de accesibilidad (esto es lo que leen las tecnologías de asistencia como parte de las etiquetas de cada elemento de formulario dentro del fieldset), bastante menudo se empareja con un título que se oculta pero siendo aun accesible, de la forma siguiente:

- -
HTML
- -
<fieldset>
-  <legend>Hi!</legend>
-  <h1>Hello</h1>
-</fieldset>
- -
CSS
- -
legend {
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
- -

textarea

- -

Por defecto, todos los navegadores consideran el elemento textarea como un inline block alineado con la línea base del texto. Esto es algo que raramente es lo que en realidad se quiere. Para convertir este elemento de un inline-block a uno tipo block, se realiza bastante fácilmente utilizando la propiedad display. Si lo que quieres es utilizarlo inline, es corriente cambiar la alineación vertical: 

- -
textarea {
-  vertical-align: top;
-}
- -

Ejemplo

- -

Vamos a ver un ejemplo de como aplicar estilo a un formulario HTML. Esto nos ayudará a tener las ideas más claras. A continuación construiremos el siguiente formulario de contacto de esta postal:

- -

This is what we want to achieve with HTML and CSS

- -

HTML

- -

El HTML  incluye poco más de lo que se utiliza en el primer artículo de esta guía; apenas el título y algún ID más.

- -
<form>
-  <h1>to: Mozilla</h1>
-
-  <div id="from">
-    <label for="name">from:</label>
-    <input type="text" id="name" name="user_name">
-  </div>
-
-  <div id="reply">
-    <label for="mail">reply:</label>
-    <input type="email" id="mail" name="user_email">
-  </div>
-
-  <div id="message">
-    <label for="msg">Your message:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </div>
-
-  <div class="button">
-    <button type="submit">Send your message</button>
-  </div>
-</form>
- -

CSS

- -

¿Aqui es donde empieza la diversión! Antes de empezar a codificar, necesitamos tres elementos adicionales:

- -
    -
  1. El fondo de la postal
    2. -
  2. Una fuente tipográfica: la "Secret Typewriter" de fontsquirrel.com
    3. -
  3. Una fuente manuscrita: la "Journal" fde fontsquirrel.com
    4. -
- -

Ahora podemos repasar el código. Primero preparamos las bases definiendo las reglas  @font-face y los elementos básicos de <body> y <form> 

- -
@font-face{
-  font-family : "handwriting";
-
-  src : url('journal.eot');
-  src : url('journal.eot?') format('eot'),
-        url('journal.woff') format('woff'),
-        url('journal.ttf') format('truetype');
-}
-
-@font-face{
-  font-family : "typewriter";
-
-  src : url('veteran_typewriter.eot');
-  src : url('veteran_typewriter.eot?') format('eot'),
-        url('veteran_typewriter.woff') format('woff'),
-        url('veteran_typewriter.ttf') format('truetype');
-}
-
-body {
-  font  : 21px sans-serif;
-
-  padding : 2em;
-  margin  : 0;
-
-  background : #222;
-}
-
-form {
-  position: relative;
-
-  width  : 740px;
-  height : 498px;
-  margin : 0 auto;
-
-  background: #FFF url(background.jpg);
-}
- -

Ahora podemos posicionar los elementos, incluidos el título y los elementos del formulario.

- -
h1 {
-  position : absolute;
-  left : 415px;
-  top  : 185px;
-
-  font : 1em "typewriter", sans-serif;
-}
-
-#from {
-  position: absolute;
-  left : 398px;
-  top  : 235px;
-}
-
-#reply {
-  position: absolute;
-  left : 390px;
-  top  : 285px;
-}
-
-#message {
-  position: absolute;
-  left : 20px;
-  top  : 70px;
-}
- -

Aquí es donde empezamos a trabajar los propios elementos. Primero, nos aseguramos que los elementos  <label> reciben la fuente correcta.

- -
label {
-  font : .8em "typewriter", sans-serif;
-}
- -

Los campos de texto necesitan algunas reglas comunes. Dicho simplemente, le quitamos bordes y fondos y redefinimos el padding y margin.

- -
input, textarea {
-  font    : .9em/1.5em "handwriting", sans-serif;
-
-  border  : none;
-  padding : 0 10px;
-  margin  : 0;
-  width   : 240px;
-
-  background: none;
-}
- -

Cuando uno de estos campos recibe el foco, vamos a resaltarlo con un fondo transparente gris claro. Tome nota de que es importante añadir la propiedad  outline  para quitar el resaltado de enfoque añadido por defecto por algunos navegadores.

- -
input:focus, textarea:focus {
-  background   : rgba(0,0,0,.1);
-  border-radius: 5px;
-  outline      : none;
-}
- -

Ahora que nuestros campos de texto están terminados, necesitamos ajustar como se muestran los campos de simple y múltiple línea para que coincidan, ya que lo normal es que por defecto no se vean igual.

- -

El campo de línea simple requiere de algunos trucos para que se vean bien en Internet Explorer. Internet Explorer no define la altura de los campos basándose en la altura natural de la fuente (lo cual es el comportamiento normal del resto de navegadores). Para corregir esto necesitamos añadir explícitamente la altura a los campos de la siguiente forma:

- -
input {
-    height: 2.5em; /* for IE */
-    vertical-align: middle; /* This is optional but it makes legacy IEs look better */
-}
- -

Los elementos <textarea> se muestran por defecto como bloques, Las dos cosas importantes aquí son las propiedades  resize y overflow. Ya que nuestro diseño es de tamaño fijo, utilizaremos la propiedad resize para impedir que el usuario pueda cambiar el tamaño de los campos multilínea. La propiedad  overflow  se utiliza para que el campo se muestre de forma más consistente a través de diversos navegadores; algunos de ellos ponen por defecto esta propiedad en auto, pero en nuestro caso, es mejor asegurarse de que todos estén en auto.

- -
textarea {
-  display : block;
-
-  padding : 10px;
-  margin  : 10px 0 0 -10px;
-  width   : 340px;
-  height  : 360px;
-
-  resize  : none;
-  overflow: auto;
-}
- -

El elemento <button> se acomoda muy bien a CSS; se puede hacer lo que se quiera con el, ¡incluso utilizando pseudo-elementos!

- -
button {
-  position     : absolute;
-  left         : 440px;
-  top          : 360px;
-
-  padding      : 5px;
-
-  font         : bold .6em sans-serif;
-  border       : 2px solid #333;
-  border-radius: 5px;
-  background   : none;
-
-  cursor       : pointer;
-
--webkit-transform: rotate(-1.5deg);
-   -moz-transform: rotate(-1.5deg);
-    -ms-transform: rotate(-1.5deg);
-     -o-transform: rotate(-1.5deg);
-        transform: rotate(-1.5deg);
-}
-
-button:after {
-  content: " >>>";
-}
-
-button:hover,
-button:focus {
-  outline   : none;
-  background: #000;
-  color   : #FFF;
-}
- -

Y ¡listo! Sientase libre de probarlo usted mismo; como comprobará ¡esto funciona!

- -

Conclusión

- -

Como puede verse, mientras que queramos construir formularios solo con campos de texto y botones, es sencillo aplicarles estilos con CSS. Si desea saber más pequeños trucos de CSS que le hagan más fácil la vida al trabajar con formularios, echele un vistazo a la parte de formularios de the normalize.css project.

- -

En el próximo artículo, veremos como manejar widgets de formulario de la categoría de "el malo" y "el feo".

diff --git a/files/es/learn/html/forms/the_native_form_widgets/index.html b/files/es/learn/html/forms/the_native_form_widgets/index.html deleted file mode 100644 index c8a2651837..0000000000 --- a/files/es/learn/html/forms/the_native_form_widgets/index.html +++ /dev/null @@ -1,326 +0,0 @@ ---- -title: Controles de formulario originales -slug: Learn/HTML/Forms/The_native_form_widgets -translation_of: Learn/Forms/Basic_native_form_controls ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}
- -

En el artículo anterior, marcamos un ejemplo de formulario web funcional, presentamos algunos controles de formulario y elementos estructurales comunes, y nos centramos en las mejores prácticas de accesibilidad. A continuación, veremos con detalle las funciones de los diferentes controles de formulario, o widgets, y estudiaremos todas las diferentes opciones de que se dispone para la recopilación de diferentes tipos de datos. En este artículo en particular, veremos el conjunto original de controles de formulario, disponible en todos los navegadores desde los primeros días de la web.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática y de lenguaje HTML.
Objetivo:Comprender en detalle el conjunto original de controles de formulario originales disponibles en los navegadores para la recopilación de datos y su implementación con HTML.
- -

Ya conoces algunos elementos de formulario, incluidos {{HTMLelement ('form')}}, {{HTMLelement ('fieldset')}}, {{HTMLelement ('legend')}}, {{HTMLelement ('textarea' )}}, {{HTMLelement ('label')}}, {{HTMLelement ('button')}} y {{HTMLelement ('input')}}. Este artículo expone:

- - - -
-

Nota: Las características que se consideran en este artículo son compatibles con todos los navegadores, lo que no es el caso para todos los controles de formulario. En los próximos dos artículos vamos a exponer los controles de formulario que se han añadido a HTML5 más recientemente. Si quieres una referencia más avanzada, consulta nuestra referencia a elementos de formulario HTML, y en particular nuestra extensa referencia a tipos <input>.

-
- -

Campos de entrada de texto

- -

Los campos de texto {{htmlelement ("input")}} son los controles de formulario más básicos. Son un modo muy cómodo de permitir al usuario introducir cualquier tipo de datos, y ya hemos visto algunos ejemplos sencillos.

- -
-

Nota: Los campos de texto de los formularios HTML son controles de entrada de texto sencillos sin formato. Esto significa que no puedes usarlos para aplicar una edición enriquecida (negrita, cursiva, etc.). Todos los controles de formulario que encuentres con texto enriquecido son controles de formulario personalizados creados con HTML, CSS y JavaScript.

-
- -

Todos los controles de texto básicos comparten algunos comportamientos comunes:

- - - -
-

Nota: El elemento {{htmlelement ("input")}} es único entre los elementos HTML porque puede tomar muchas formas diferentes según el valor de su atributo. Se utiliza para crear la mayoría de los tipos de controles de formulario, que incluyen campos de texto de una sola línea, controles para la fecha y la hora, controles sin introducción de texto, como casillas de verificación, botones de opción y selectores de color, y botones.

-
- -

Campos de texto de una sola línea

- -

Un campo de texto de una sola línea se crea utilizando un elemento {{HTMLElement ("input")}} cuyo valor de atributo {{htmlattrxref ("type","input")}} se establece en text, u omitiendo por completo el atributo {{htmlattrxref ( "type","input")}} (text es el valor predeterminado). El valor text de este atributo también es el valor alternativo si el navegador no reconoce el valor que has especificado para el atributo {{htmlattrxref ("type","input")}} (por ejemplo, si especificas type="color" y el navegador no está dotado en origen de un control de selección de colores).

- -
-

Nota: Puedes encontrar ejemplos de todos los tipos de campo de texto de una sola línea en GitHub en single-line-text-fields.html (o consultarlo en vivo).

-
- -

Aquí hay un ejemplo básico de campo de texto de una sola línea:

- -
<input type="text" id="comment" name="comment" value="I'm a text field">
- -

Los campos de texto de una sola línea solo tienen una restricción verdadera: si escribes el texto con saltos de línea, el navegador elimina esos saltos de línea antes de enviar los datos al servidor.

- -

La captura de pantalla siguiente muestra los tipos de entrada de texto predeterminado, activo (con el foco) y deshabilitado en Firefox 71 y Safari en macOS y en Chrome 79 y Edge 18 en Windows 10.

- -

Captura de pantalla del atributo deshabilitado y predeterminado: estilo para una entrada de texto activa (con el foco) en Firefox, Safari, Chrome y Edge.

- -
-

Nota: HTML5 ha mejorado el campo de texto básico original de una sola línea al añadir valores especiales para el atributo {{htmlattrxref ("type", "input")}} que imponen restricciones de validación específicas y otras características, por ejemplo, específicas para introducir direcciones URL o números. Los expondremos en el artículo siguiente: Los tipos de entrada en HTML5.

-
- -

Campo de contraseña

- -

Uno de los tipos de entrada originales era el tipo de campo de texto password:

- -
<input type="password" id="pwd" name="pwd">
- -

El valor de la contraseña no añade restricciones especiales al texto que se introduce, pero oculta el valor que se introduce en el campo (por ejemplo, con puntos o asteriscos) para impedir que otros puedan leerlo.

- -

Ten en cuenta que esto es solo una función de interfaz de usuario; a menos que envíes tu formulario en modo seguro, se enviará como texto plano, lo que es malo desde el punto de vista de la seguridad porque alguien con malas intenciones podría interceptar tus datos y robar tus contraseñas, datos de tarjetas de crédito o cualquier otra cosa que hayas enviado. La mejor manera de proteger a los usuarios de esto es alojar cualquier página que contenga formularios en una ubicación de conexión segura (es decir, en una dirección https://), de modo que los datos se cifren antes de enviarse.

- -

Los navegadores reconocen las implicaciones de seguridad de enviar datos de formulario por una conexión insegura y disponen de mensajes de advertencia para disuadir a los usuarios de usar formularios no seguros. Para obtener más información sobre las implementaciones de Firefox al respecto, consulta el artículo Contraseñas inseguras.

- -

Contenido oculto

- -

Otro control de texto original es el tipo de entrada hidden. Se usa para crear un control de formulario que es invisible para el usuario, pero que aun así se envía al servidor junto con el resto de los datos del formulario una vez se transmiten; por ejemplo, es posible que desees enviar una marca de tiempo al servidor que indique cuándo se realizó un pedido. Al estar oculto, el usuario no puede ver ni editar su valor intencionadamente, el control nunca recibirá el foco y un lector de pantalla tampoco lo detectará.

- -
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
-
- -

Si creas un elemento así, es necesario establecer sus atributos name y value. Su valor puede establecerse dinámicamente a través de JavaScript. El tipo de entrada oculta no debe tener ninguna etiqueta asociada.

- -

Otros tipos de entrada de texto, como {{HTMLElement ("input / search", "search")}}, {{HTMLElement ("input / url", "url")}} y {{HTMLElement ("input / tel" , "tel")}}, se añadieron con HTML5. Se tratarán en el próximo artículo: Tipos de entrada HTML5.

- -

Elementos de selección: casillas de verificación y botones de opción

- -

Los elementos de selección (o checkable items, en inglés) son controles cuyo estado puede cambiar cuando se hace clic en ellos o en sus etiquetas asociadas. Hay dos tipos de elementos de selección: las casillas de verificación (o check boxes) y los botones de opción (o radio buttons). Ambos usan el atributo checked para indicar si el control de formulario está seleccionado por defecto o no.

- -

Vale la pena señalar que estos controles no se comportan exactamente como otros controles de formulario. Para la mayoría de los controles de formulario, cuando se envía el formulario, se envían todos los controles que tienen un atributo name, incluso si en ellos no se ha introducido ningún valor. En el caso de elementos de selección, sus valores se envían solo si están seleccionados. Si no están seleccionados, no se envía nada, ni siquiera su nombre. Si están seleccionados pero no tienen ningún valor asignado, el nombre se envía con el valor on.

- -
-

Nota: Puedes encontrar los ejemplos de esta sección en GitHub como checkable-items.html (o consultarlos en vivo).

-
- -

Para una usabilidad/accesibilidad óptima, te recomendamos delimitar cada lista de elementos que estén relacionados entre sí dentro de un elemento {{htmlelement ("fieldset")}} con un elemento {{htmlelement ("legend")}} que proporcione una descripción general de la lista. Cada par individual de elementos {{htmlelement ("label")}}/{{htmlelement ("input")}} ha de estar contenido en un elemento de lista propio (o similar). El elemento {{htmlelement ('label')}} asociado se coloca en general inmediatamente después del botón de opción o la casilla de verificación, con las instrucciones para el grupo de botones de opción o casillas de verificación, que suelen ser el contenido del elemento {{htmlelement ("legend")}}. Observa las estructuras de ejemplo en los ejemplos asociados anteriores.

- -

Casillas de verificación

- -

Las casillas de verificación se crean estableciendo el atributo type del elemento {{HTMLElement ("input")}} en el valor {{HTMLElement ("input / checkbox", "checkbox")}}.

- -
<input type="checkbox" id="carrots" name="carrots" value="carrots" checked>
-
- -

Al incluir el atributo checked, la casilla de verificación se marca automáticamente cuando se carga la página. Al hacer clic en la casilla de verificación o en su etiqueta asociada, la casilla de verificación se activa o desactiva.

- -

Las capturas de pantalla siguientes muestran casillas de verificación predeterminadas, activas (con el foco) y deshabilitadas en Firefox 71 y Safari 13 en macOS y Chrome 79 y Edge 18 en Windows 10:

- -

Casillas de verificación predeterminadas, activas y deshabilitadas en Firefox 71 y Safari 13 en Mac y Chrome 79 y Edge 18 en Windows 10

- -
-

Nota: Las casillas de verificación y los botones de opción con atributo checked al cargarse coinciden con la pseudoclase {{cssxref (':default')}}, incluso aunque ya no estén seleccionadas. Las que están seleccionadas coinciden con la pseudoclase {{cssxref(':checked')}}.

-
- -

Debido a su naturaleza activa-inactiva, las casillas de verificación se consideran botones de conmutación, y muchos desarrolladores y diseñadores han ampliado el estilo de casilla de verificación predeterminado para crear botones que parecen interruptores de conmutación. Aquí puedes ver un ejemplo en acción (observa también el código fuente).

- -

Botón de opción

- -

Un botón de opción se crea estableciendo el atributo {{htmlattrxref ("type", "input")}} del elemento {{HTMLElement ("input")}} en el valor radio:

- -
<input type="radio" id="soup" name="meal" checked>
- -

Es posible asociar diversos botones de opción. Si comparten el mismo valor de atributo {{htmlattrxref ("name", "input")}}, se considera que están en el mismo grupo de botones. Solo un botón dentro de un grupo puede estar activado en cada momento. Esto significa que cuando uno de ellos se selecciona, todos los demás se deseleccionan automáticamente. Al enviar el formulario, solo se envía el valor del botón de opción seleccionado. Si ninguno de ellos está seleccionado, se considera que el conjunto completo de botones de opción está en un estado desconocido y no se envía ningún valor con el formulario. Cuando en un grupo de botones con el mismo nombre se selecciona uno de los botones de opción, no es posible deseleccionar todos los botones sin reiniciar el formulario.

- -
<fieldset>
-  <legend>¿Cuál es tu comida favorita?</legend>
-  <ul>
-    <li>
-      <label for="soup">Sopa</label>
-      <input type="radio" id="soup" name="meal" value="soup" checked>
-    </li>
-    <li>
-      <label for="curry">Curry</label>
-      <input type="radio" id="curry" name="meal" value="curry">
-    </li>
-    <li>
-      <label for="pizza">Pizza</label>
-      <input type="radio" id="pizza" name="meal" value="pizza">
-    </li>
-  </ul>
-</fieldset>
- -

Las capturas de pantalla siguientes muestran botones de opción sin seleccionar y seleccionados, algunos con el foco y otros desactivados sin seleccionar y seleccionados, en Firefox 71 y Safari 13 en MacOS y Chrome 79 y Edge 18 en Windows 10.

- -

Botones de opción en Firefox 71 y Safari 13 en Mac y Chrome 79 y Edge 18 en Windows 10

- -

Botones

- -

El botón de opción no es realmente un botón, a pesar de su nombre; sigamos adelante y echemos un vistazo a los controles de formulario que son botones propiamente. Hay tres tipos de entrada según el tipo de botones que se utilicen:

- -
-
submit
-
Envía los datos del formulario al servidor. Para los elementos {{HTMLElement ("button")}}, omitir el atributo type (o introducir un valor de tipo no válido) da como resultado un botón de envío (submit).
-
reset
-
Restablece todos los controles de formulario a sus valores por defecto.
-
button
-
Botones que no tienen efecto automático, pero que se pueden personalizar con código JavaScript.
-
- -

Además, el elemento {{htmlelement ("button")}} puede tomar un atributo type para imitar estos tres tipos de entrada. La diferencia principal entre los dos es que los elementos <button> propiamente admiten aplicación de estilo en mayor medida.

- -
-

Nota: El tipo de entrada image también se representa como un botón. También desarrollaremos este tema más adelante.

-
- -
-

Nota: Puedes encontrar los ejemplos de esta sección en GitHub como button-examples.html (o consultarlos en vivo).

-
- -

A continuación puedes encontrar ejemplos de cada tipo de botón <input>, junto con el tipo de botón equivalente.

- -

enviar

- -
<button type="submit">
-    Este es un <strong>botón de envío</strong>
-</button>
-
-<input type="submit" value="Este es un botón de envío">
- -

reiniciar

- -
<button type="reset">
-    Este es un <strong>botón de reinicio</strong>
-</button>
-
-<input type="reset" value="Este es un botón de reinicio">
- -

anónimo

- -
<button type="button">
-    Este es un <strong>botón anónimo</strong>
-</button>
-
-<input type="button" value="Este es un botón anónimo">
- -

Los botones siempre se comportan igual, independientemente de su usas un elemento {{HTMLElement ("button")}} o un elemento {{HTMLElement ("input")}}. Sin embargo, como puedes ver en los ejemplos, los elementos {{HTMLElement ("button")}} te permiten usar HTML en tu contenido, que se inserta entre las etiquetas <button> de apertura y cierre. Los elementos {{HTMLElement ("input")}}, por otro lado, son elementos vacíos; el contenido que muestran está inserto en el atributo value y, por lo tanto, solo acepta contenido de texto sin formato.

- -

Los ejemplos siguientes muestran los tipos de entrada de botones predeterminados, activos y deshabilitados: en Firefox 71 y Safari 13 en macOS, y Chrome 79 y Edge 18 en Windows 10.

- -

Tipos de entrada de botones predeterminados, activos y deshabilitados en Firefox 71 y Safari 13 en Mac y Chrome 79 y Edge 18 en Windows 10

- -

Botón de imagen

- -

El control botón de imagen se muestra exactamente como un elemento {{HTMLElement ("img")}}, excepto que cuando el usuario hace clic en él, se comporta como un botón de envío.

- -

Se crea un botón de imagen usando un elemento {{HTMLElement ("input")}} con su atributo {{htmlattrxref ("type","input")}} establecido en el valor image. Este elemento admite exactamente el mismo conjunto de atributos que el elemento {{HTMLElement ("img")}}, además de todos los atributos que admiten el resto de botones de formulario.

- -
<input type="image" alt="¡Púlsame!" src="my-img.png" width="80" height="30">
- -

Si el botón de imagen se usa para enviar un formulario, este control no envía su valor; en lugar de ello se envían las coordenadas X e Y del clic que se ha hecho sobre la imagen (las coordenadas son relativas a la imagen, lo que significa que la esquina superior izquierda de la imagen representa la coordenada (0, 0)). Las coordenadas se envían como dos pares clave/valor:

- - - -

Por ejemplo, cuando haces clic en las coordenadas (123, 456) de la imagen y se hace el envío por el método get, verás los valores añadidos a la URL de la manera siguiente:

- -
http://foo.com?pos.x=123&pos.y=456
- -

Esta es una forma muy cómoda de construir un «mapa dinámico». La forma en que se envían y recuperan estos valores se detalla en el artículo Enviar los datos del formulario.

- -

Selector de archivos

- -

Hay un último tipo de <input> que nos llegó a principios del HTML: el tipo entrada de archivo. Los formularios pueden enviar archivos a un servidor (esta acción específica también se detalla en el artículo Enviar los datos del formulario). El control de selección de archivos se puede usar para elegir uno o más archivos para enviar.

- -

Para crear un control de selección de archivos, utilizas el elemento {{HTMLElement ("input")}} con su atributo {{htmlattrxref ("type","input")}} establecido en file. Es posible restringir los tipos de archivos que se aceptan utilizando el atributo {{htmlattrxref ("accept","input")}}. Además, puedes permitir que el usuario elija más de un archivo añadiendo el atributo {{htmlattrxref ("multiple","input")}}.

- -

Ejemplo

- -

En este ejemplo, se crea un control de selección de archivos que solicita archivos de imágenes gráficas. El usuario puede seleccionar múltiples archivos en este caso.

- -
<input type="file" name="file" id="file" accept="image/*" multiple>
- -

En algunos dispositivos móviles, el control de selección de archivos puede acceder a fotos, vídeos y audio capturados directamente por la cámara y el micrófono del dispositivo y añadir información de captura al atributo accept de la manera siguiente:

- -
<input type="file" accept="image/*;capture=camera">
-<input type="file" accept="video/*;capture=camcorder">
-<input type="file" accept="audio/*;capture=microphone">
- -

Atributos comunes

- -

Muchos de los elementos que se utilizan para definir controles de formulario tienen sus atributos específicos propios. Sin embargo, hay un conjunto de atributos que son comunes para todos los elementos de formulario. Ya has conocido algunos, pero a continuación encontrarás una lista de esos atributos comunes para referencias futuras:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nombre del atributoValor por defectoDescripción
autofocusfalseEste atributo booleano te permite especificar que el elemento ha de tener el foco de entrada automáticamente cuando se carga la página. En un documento, solo un elemento asociado a un formulario puede tener este atributo especificado.
disabledfalseEste atributo booleano indica que el usuario no puede interactuar con el elemento. Si no se especifica este atributo, el elemento hereda su configuración del elemento que lo contiene, por ejemplo, {{HTMLElement ("fieldset")}}. Si el elemento que lo contiene no tiene el atributo establecido en disabled, el elemento está habilitado.
formEl elemento <form> con el que está asociado el control, que se usa cuando no está anidado dentro de ese formulario. El valor del atributo debe ser el atributo id de un elemento {{HTMLElement ("form")}} del mismo documento. Esto te permite asociar un formulario con un control de formulario que esté fuera de aquel, incluso si está dentro de un elemento de formulario diferente.
nameEl nombre del elemento; se envía con los datos del formulario.
valueEl valor inicial del elemento.
- -

Conclusión

- -

Este artículo ha expuesto los tipos de entrada más antiguos: el conjunto original que se introdujo en los primeros días de HTML, que es compatible con todos los navegadores. En el artículo siguiente veremos los valores del atributo type que se han añadido en HTML5 más recientemente.

- -

{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}

- -

En este módulo

- - - -

Temas avanzados

- - diff --git a/files/es/learn/html/forms/tipos_input_html5/index.html b/files/es/learn/html/forms/tipos_input_html5/index.html deleted file mode 100644 index d463399e93..0000000000 --- a/files/es/learn/html/forms/tipos_input_html5/index.html +++ /dev/null @@ -1,276 +0,0 @@ ---- -title: Tipos de input de HTML5 -slug: Learn/HTML/Forms/Tipos_input_HTML5 -translation_of: Learn/Forms/HTML5_input_types ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Forms/Basic_native_form_controls", "Learn/Forms/Other_form_controls", "Learn/Forms")}}
- -

En el artículo anterior vimos el elemento {{htmlelement("input")}} y los valores de su atributo type, disponibles desde los inicios de HTML. Ahora veremos en detalle la funcionalidad de los controles de formulario más recientes, incluyendo algunos tipos de input nuevos, los cuales fueron añadidos en HTML5 para permitir la recolección de tipos de datos específicos

- - - - - - - - - - - - -
Requisitos previos:Formación básica en informática, y una comprensión básica de HTML.
Objetivo:Entender los valores de tipo input disponibles más recientes para crear controles de formulario nativos, y cómo implementarlos utilizando HTML.
- -
-

Nota: La mayoría de las características discutidas en este artículo tienen un amplio soporte en todos los navegadores, anotaremos cualquier excepción. Si quieres más detalles referente al soporte de navegadores, deberías consultar nuestra referéncia de elementos de formulario HTML, y en particular nuestra referéncia extensiva de Tipos de <input>.

-
- -

Debido a que la apariéncia de un control de formulario puede ser algo distinta con respecto a unas especificaciones del diseñador, los desarrolladores web a veces construyen sus propios controles de formulario personalizados. Cubrimos este aspecto en un tutorial avanzado: Cómo construir widgets de formulario personalizados.

- -

Campo de dirección de correo electrónico

- -

Este tipo de campo se define utilizando el valor  email en el atributo {{htmlattrxref("type","input")}} del elemento <input>:

- -
<input type="email" id="email" name="email">
- -

Cuando se utiliza este valor {{htmlattrxref("type","input")}} , se le obliga al usuario a escribir dentro del campo una dirección de correo electrónico válida. Cualquier otro contenido ocasiona que el navegador muestre un mensaje de error cuando se envía el formulario. Puedes verlo en acción en la siguiente captura de pantalla

- -

An invalid email input showing the message "Please enter an email address."

- -

Puedes utilizar también el atributo multiple en combinación con el tipo inputemail para permitir que sean introducidas varias direcciones de correo electrónico separadas por comas en el mismo input:

- -
<input type="email" id="email" name="email" multiple>
- -

En algunos dispositivos, en particular dispositivos táctiles con teclados dinámicos como los smart phones, debería presentarse un teclado virtual que es más adecuado para introducir direcciones de correo electrónico, incluyendo la tecla @. Mira como ejemplo la siguiente captura de pantalla del teclado de Firefox para Android:

- -

firefox for android email keyboard, with ampersand displayed by default.

- -
-

Nota: Puedes encontrar ejemplos sobre los tipos de entrada de texto básicos en Ejemplos input básicos (Consulta también el código fuente).

-
- -

Mejorar la experiéncia del usuario para usuarios con estos dispositivos, es otra buena razón para utilizar estos tipos de input más recientes.

- -

Validación del lado cliente

- -

Como puedes haber visto anteriormente, email, junto con otros tipos de input más recientes, proporciona la validación de errores en el lado cliente de forma predeterminada, realizados por el navegador antes de que los datos obtenidos se envíen al servidor. Es una ayuda útil guiar a los usuarios a rellenar un formulario de forma precisa y puede ahorrar tiempo: es útil saber de inmediato que tu dato no es correcto, en vez de tener que esperar el viaje de ida y vuelta al servidor.

- -

Pero no debería ser considerado una medida de seguridad exhaustiva! Tus aplicaciones siempre deben realizar comprobaciones de seguridad en cada dato, tanto en el lado servidor como en el lado cliente debido a que la validación en el lado cliente es muy fácil desactivarla, por lo que usuarios malintencionados pueden enviar fácilmente datos incorrectos al servidor. Lee Seguridad en el sitio web para tener una idea de lo que podría ocurrir; Implementar validación en el lado servidor está más allá del alcance de este módulo-guía, pero debería tenerlo en cuenta.

- -

Ten en cuenta que a@b es una dirección de correo electrónico válida de acuerdo a las restricciones proporcionadaas por defecto. Esto es debido a que el tipo de input email, permite por defecto direcciones de correo electrónico de una intranet. Para implementar un comportamiento diferente de validación puedes utilizar el atributo pattern, y también puedes utilizar mensajes de error personalizados; Hablaremos de cómo utilizar estas características en Validación de formularios en el lado cliente en un artículo posterior.

- -
-

Nota: Si los datos introducidos no son una dirección de correo electrónico, habrá coincidéncia con la pseudo clase {{cssxref(':invalid')}}, y la propiedad {{domxref('validityState.typeMismatch')}} devolverá true.

-
- -

Campo de búsqueda

- -

Los campos de búsqueda están destinados a ser utilizados para crear cajas de búsqueda en páginas y aplicaciones. Este tipo de campo se define utilizando el valor search en su atributo {{htmlattrxref("type","input")}}:

- -
<input type="search" id="search" name="search">
- -

La diferéncia principal entre un campo text y un campo search, es la forma en que el navegador aplica estilo a su apariéncia. A menudo los campos search se muestran con bordes redondeados; y a veces también muestran una "Ⓧ", el cual despeja el campo de cualquier valor cuando se pulsa sobre él. Adicionalmente, en dispositivos con teclado dinámico, la tecla enter del teclado puede leer "search" o mostrar un icono de lupa.

- -

La captura de pantalla siguiente muestra un campo de búsqueda con contenido, en Firefox 71, Safari 13, y Chrome 79 en macOS, y Edge 18 y Chrome 79 en Windows 10. Ten en cuenta que el icono de reseteo sólo aparece si el campo tiene un valor y, aparte de Safari, sólo se muestra cuando el campo tiene el foco.

- -

Screenshots of search fields on several platforms.

- -

Otra característica que vale la pena señalar es que se puede guardar los valores de un campo search automáticamente y reutilizarse en múltiples páginas del mismo sitio web para ofrecer autocompletado. Esta característica suele ocurrir de forma automática en la mayoría de navegadores modernos.

- -

Campo número de teléfono

- -

Se puede crear un campo especial para introducir números de teléfono utilizando tel como valor del atributo {{htmlattrxref("type","input")}}:

- -
<input type="tel" id="tel" name="tel">
- -

Cuando se accede desde un dispositivo táctil con teclados dinámicos, muchos de ellos mostrarán un teclado numérico cuando se encuentren con type="tel", lo que significa que este tipo es útil no sólo para ser utilizado para números de teléfono, sino también cuando sea útil un teclado numérico.

- -

La siguiente captura de pantalla del teclado de Firefox para Android proporciona un ejemplo:

- -

firefox for android email keyboard, with ampersand displayed by default.

- -

Debido a la gran variedad de formatos de número de teléfono existentes, este tipo de campo no cumple con ningún tipo de restricción sobre el valor introducido por el usuario. (Esto significa que puede incluir letras, etc...).

- -

Como mencionamos anteriormente, se puede utilizar el atributo pattern para que asuma restricciones, sobre el cuál aprenderemos en Validación de formulario en el lado cliente.

- -

Campo URL

- -

Se puede crear un tipo especial de campo para introducir URLs utilizando el valor url para el atributo {{htmlattrxref("type","input")}}:

- -
<input type="url" id="url" name="url">
- -

Este tipo añade restricciones de validación en el campo. El navegador informará de un error si no se introdujo el protocolo (como http:), o si de algún modo el URL está mal formado. En dispositivos con teclados dinámicos a menudo mostrará por defecto algunas o todas las teclas como los dos puntos, el punto, y la barra inclinada.

- -

Mira el siguiente ejemplo tomado de Firefox para Android:

- -

firefox for android email keyboard, with ampersand displayed by default.

- -
Nota: Solo porque el URL esté bien formado no significa necesariamente que la dirección al que hace referéncia exista!
- -

Campo numérico

- -

Se pueden crear controles para introducir números con el {{htmlattrxref("type","input")}} number de {{HTMLElement("input")}}. Este control se parece a un campo de texto pero solo permite números de punto flotante, y normalmente proporciona botones deslizadores para incrementar o reducir el valor del control. En dispositivos con teclados dinámicos generalmente se muestra el teclado numérico.

- -

La siguiente captura de pantalla tomada de Firefox para Android proporciona un ejemplo:

- -

firefox for android email keyboard, with ampersand displayed by default.

- -

Con el tipo de input number  puedes limitar los valores mínimo y máximo permitidos definiendo los atributos {{htmlattrxref("min","input")}} y  {{htmlattrxref("max","input")}}.

- -

También puedes utilizar el atributo step para cambiar el incremento y decremento causado por los botones deslizadores. Por defecto, el tipo de input number sólo valida si el número es un entero. Para permitir números decimales, especifica step="any". Si se omite, su valor por defecto es 1, lo que significa que solo son válidos números enteros.

- -

Miremos algunos ejemplos. El primero de los siguientes crea un control numérico cuyo valor está restringido a cualquier valor entre 1 y 10, y sus botones cambian su valor en incrementos o decrementos de 2.

- -
<input type="number" name="age" id="age" min="1" max="10" step="2">
- -

El segundo crea un control numérico cuyo valor está restringido a cualquier valor entre el 0 y 1 ambos inclusive, y sus botones cambian su valor en incrementos o decrementos de 0.01.

- -
<input type="number" name="change" id="pennies" min="0" max="1" step="0.01">
- -

El tipo de input number tiene sentido cuando esté limitado el rango de valores válidos, por ejemplo la edad de una persona o su altura. Si el rango es demasiado grande para que los cambios de incremento tengan sentido ( por ejemplo los códigos postales de USA, cuyo rango va de 00001 a 99999), entonces sería una mejor opción utilizar el tipo tel: proporciona el teclado numérico mientras que omite el componente de interfaz de usuario de los deslizadores de número.

- -
-

Ten en cuenta que: En versiones inferiores a la 10 de Internet Explorer no se soportan las entradas number

-
- -

Slider controls

- -

Otra forma de tomar un número es usando un slider. Podrás observar cómo son bastantes parecidas a los sitios inmobiliarios, dónde quieres determinar un máximo de precio por propiedad y filtrar tu búsqueda en el. Observaremos un ejemplo en vivo.

- -

{{EmbedGHLiveSample("learning-area/html/forms/range-example/index.html", '100%', 200)}}

- -

Usage-wise, sliders are less accurate than text fields. Therefore, they are used to pick a number whose precise value is not necessarily important.

- -

A slider is created using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value range. The slider-thumb can be moved via mouse or touch, or with the arrows of the keypad.

- -

It's important to properly configure your slider. To that end, it's highly recommended that you set the min, max, and step attributes which set the minimum, maximum and increment values, respectively.

- -

Let's look at the code behind the above example, so you can see how its done. First of all, the basic HTML:

- -
<label for="price">Choose a maximum house price: </label>
-<input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000">
-<output class="price-output" for="price"></output>
- -

This example creates a slider whose value may range between 50000 and 500000, which increments/decrements by 100 at a time. We've given it default value of 250000, using the value attribute.

- -

One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. This is why we've included an {{htmlelement("output")}} element — to contain the current value (we'll also look at this element in the next article). You could display an input value or the output of a calculation inside any element, but <output> is special — like <label>, it can take a for attribute that allows you to associate it with the element or elements that the output value came from.

- -

To actually display the current value, and update it as it changed, you must use JavaScript, but this is relatively easy to do:

- -
const price = document.querySelector('#price')
-const output = document.querySelector('.price-output')
-
-output.textContent = price.value
-
-price.addEventListener('input', function() {
-  output.textContent = price.value
-});
- -

Here we store references to the range input and the output in two variables. Then we immediately set the output's textContent to the current value of the input. Finally, an event listener is set to ensure that whenever the range slider is moved, the output's textContent is updated to the new value.

- -
-

Note: range inputs are not supported in versions of Internet Explorer below 10.

-
- -

Date and time pickers

- -

Gathering date and time values has traditionally been a nightmare for web developers. For good user experience, it is important to provide a calendar selection UI, enabling users to select dates without necessating context switching to a native calendar application or potentially entering them in differing formats that are hard to parse. The last minute of the previous millenium can be expressed in the following different ways, for example: 1999/12/31, 23:59 or 12/31/99T11:59PM.

- -

HTML date controls are available to handle this specific kind of data, providing calendar widgets and making the data uniform.

- -

A date and time control is created using the {{HTMLElement("input")}} element and an appropriate value for the {{htmlattrxref("type","input")}} attribute, depending on whether you wish to collect dates, times, or both. Here's a live example that falls back to {{htmlelement("select")}} elements in non-supporting browsers:

- -

{{EmbedGHLiveSample("learning-area/html/forms/datetime-local-picker-fallback/index.html", '100%', 200)}}

- -

Let's look at the different available types in brief. Note that the usage of these types is quite complex, especially considering browser support (see below); to find out the full details, follow the links below to the reference pages for each type, including detailed examples.

- -

datetime-local

- -

<input type="datetime-local"> creates a widget to display and pick a date with time with no specific time zone information.

- -
<input type="datetime-local" name="datetime" id="datetime">
- -

month

- -

<input type="month"> creates a widget to display and pick a month with a year.

- -
<input type="month" name="month" id="month">
- -

time

- -

<input type="time"> creates a widget to display and pick a time value. While time may display in 12-hour format, the value returned is in 24-hour format.

- -
<input type="time" name="time" id="time">
- -

week

- -

<input type="week"> creates a widget to display and pick a week number and its year.

- -

Weeks start on Monday and run to Sunday. Additionally, the first week 1 of each year contains the first Thursday of that year—which may not include the first day of the year, or may include the last few days of the previous year.

- -
<input type="week" name="week" id="week">
- -

Constraining date/time values

- -

All date and time controls can be constrained using the min and max attributes, with further constraining possible via the step attribute (whose value varies according to input type).

- -
<label for="myDate">When are you available this summer?</label>
-<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" step="7" id="myDate">
- -

Browser support for date/time inputs

- -

You should be warned that the date and time widgets don't have the best browser support. At the moment, Chrome, Edge, and Opera support them well, but there is no support in Internet Explorer, Safari has some mobile support (but no desktop support), and Firefox supports time and date only.

- -

The reference pages linked to above provide suggestions on how to program fallbacks for non-supporting browsers; another option is to consider using a JavaScript library to provide a date picker. Most modern frameworks have good components available to provide this functionality, and there are standalone libraries available to (see Top date picker javascript plugins and libraries for some suggestions).

- -

Color picker control

- -

Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc.

- -

A color control can be created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value color:

- -
<input type="color" name="color" id="color">
- -

When supported, clicking a color control will tend to display the operating system's default color picking functionality for you to actually make your choice with. The following screenshot taken on Firefox for macOS provides an example:

- -

firefox for android email keyboard, with ampersand displayed by default.

- -

And here is a live example for you to try out:

- -

{{EmbedGHLiveSample("learning-area/html/forms/color-example/index.html", '100%', 200)}}

- -

The value returned is always a lowercase 6-value hexidecimal color.

- -
-

Note: color inputs are not supported in Internet Explorer.

-
- -

Summary

- -

That brings us to the end of our tour of the HTML5 form input types. There are a few other control types that cannot be easily grouped together due to their very specific behaviors, but which are still essential to know about. We cover those in the next article.

- -

{{PreviousMenuNext("Learn/Forms/Basic_native_form_controls", "Learn/Forms/Other_form_controls", "Learn/Forms")}}

- -

In this module

- - - -

Advanced Topics

- - diff --git a/files/es/learn/html/forms/validacion_formulario_datos/index.html b/files/es/learn/html/forms/validacion_formulario_datos/index.html deleted file mode 100644 index e967b68973..0000000000 --- a/files/es/learn/html/forms/validacion_formulario_datos/index.html +++ /dev/null @@ -1,845 +0,0 @@ ---- -title: Validación de formularios de datos -slug: Learn/HTML/Forms/Validacion_formulario_datos -tags: - - Ejemplo - - Guía - - HTML - - Intermedio - - JavaScript - - Web - - formulários -translation_of: Learn/Forms/Form_validation ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
- -

Antes de enviar datos al servidor, es importante asegurarse de que se completan todos los controles de formulario requeridos, y en el formato correcto. Esto se denomina validación de formulario en el lado del cliente y ayuda a garantizar que los datos que se envían coinciden con los requisitos establecidos en los diversos controles de formulario. Este artículo te guiará por los conceptos básicos y ejemplos de validación de formularios en el lado del cliente.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, y entender cómo funcionan el HTML, el CSS y el JavaScript.
Objetivo:Entender qué es la validación de formularios en el lado del cliente, porqué es importante y cómo aplicar diversas técnicas para implementarla.
- -

La validación en el lado del cliente es una verificación inicial y una característica importante para garantizar una buena experiencia de usuario; mediante la detección de datos no válidos en el lado del cliente, el usuario puede corregirlos de inmediato. Si el servidor lo recibe y, a continuación, lo rechaza; se produce un retraso considerable en la comunicación entre el servidor y el cliente que insta al usuario a corregir sus datos.

- -

Sin embargo, ¡la validación en el lado del cliente no debe considerarse una medida de seguridad exhaustiva! Tus aplicaciones siempre deben realizar comprobaciones de seguridad de los datos enviados por el formulario en el lado del servidor, así como también en el lado del cliente, porque la validación en el lado del cliente es demasiado fácil de evitar, por lo que los usuarios malintencionados pueden enviar fácilmente datos incorrectos a tu servidor. Lee Seguridad en los sitios web para ver qué podría suceder. Cómo implementar la validación en el lado del servidor está fuera del alcance de este módulo, pero debes tenerlo en cuenta.

- -

¿Qué es la validación de formularios?

- -

Ve a cualquier sitio web popular que incluya un formulario de registro y observa que proporcionan comentarios cuando no introduces tus datos en el formato que se espera. Recibirás mensajes como:

- - - -

Esto se llama validación de formulario. Cuando introduces los datos, el navegador y/o el servidor web verifican que estén en el formato correcto y dentro de las restricciones establecidas por la aplicación. La validación realizada en el navegador se denomina validación en el lado del cliente, mientras que la validación realizada en el servidor se denomina validación en el lado del servidor. En este capítulo nos centraremos en la validación en el lado del cliente.

- -

Si la información está en el formato correcto, la aplicación permite que los datos se envíen al servidor y (en general) que se guarden en una base de datos; si la información no está en el formato correcto, da al usuario un mensaje de error que explica lo que debe corregir y le permite volver a intentarlo.

- -

Queremos que completar formularios web sea lo más fácil posible. Entonces, ¿por qué insistimos en validar nuestros formularios? Hay tres razones principales:

- - - -
Atención: No confíes nunca en los datos que se pasan al servidor desde el cliente. Incluso si tu formulario se valida correctamente y evita la introducción de datos con formato incorrecto en el lado del cliente, un usuario malintencionado puede alterar la petición de red.
- -

Diferentes tipos de validación en el lado del cliente

- -

Hay dos tipos diferentes de validación por parte del cliente que encontrarás en la web:

- - - -

Usar la validación de formulario incorporada

- -

Una de las características más importantes de los controles de formulario de HTML5 es la capacidad de validar la mayoría de los datos de usuario sin depender de JavaScript. Esto se realiza mediante el uso de atributos de validación en los elementos del formulario. Los hemos visto anteriormente en el curso, pero recapitulamos aquí:

- - - -

Si los datos que se introducen en un campo de formulario siguen todas las reglas que especifican los atributos anteriores, se consideran válidos. Si no, se consideran no válidos.

- -

Cuando un elemento es válido, se cumplen los aspectos siguientes:

- - - -

Cuando un elemento no es válido, se cumplen los aspectos siguientes:

- - - -
-

Nota: Hay varios errores que evitan que el formulario se envíe, incluidos {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} o {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}} o {{domxref('validityState.customError','customError')}}.

-
- -

Ejemplos de validación de formularios incorporados

- -

En esta sección probaremos algunos de los atributos que hemos comentado antes.

- -

Archivo de inicio sencillo

- -

Vamos a empezar con un ejemplo sencillo: una entrada que te permite elegir si prefieres un plátano o una cereza. Este ejemplo implica una simple entrada ({{HTMLElement("input")}}) de texto con una etiqueta ({{htmlelement("label")}}) asociada y un botón de envío ({{htmlelement ("button")}}). Puedes encontrar el código fuente en GitHub en fruit-start.html y el ejemplo en vivo a continuación.

- -
<form>
-  <label for="choose">¿Prefieres un plátano o una cereza?</label>
-  <input id="choose" name="i_like">
-  <button>Enviar</button>
-</form>
- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:valid {
-  border: 2px solid black;
-}
- -

{{EmbedLiveSample("Archivo_de_inicio_sencillo", "100%", 80)}}

- -

Para empezar, haz una copia de fruit-start.html en un nuevo directorio de tu disco duro.

- -

El atributo required

- -

La característica de validación de HTML5 más simple es el atributo required. Añade este atributo al elemento para que una entrada sea obligatoria. Cuando se establece este atributo, el elemento coincide con la pseudoclase de la interfaz de usuario {{cssxref(':required')}} y el formulario no se envía; muestra un mensaje de error al enviarlo si la entrada está vacía. Si está vacía, la entrada también se considera inválida, coincidiendo con la pseudoclase de interfaz de usuario {{cssxref(':invalid')}}.

- -

Añade un atributo required a tu entrada, como se muestra a continuación.

- -
<form>
-  <label for="choose">¿Prefieres un plátano o una cereza? (requerido) </label>
-  <input id="choose" name="i_like" required>
-  <button>Enviar</button>
-</form>
- -

Ten en cuenta el CSS que en el archivo de ejemplo se ha incluido:

- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:invalid:required {
-  background-image: linear-gradient(to right, pink, lightgreen);
-}
-
-input:valid {
-  border: 2px solid black;
-}
- -

Este CSS da un borde discontinuo rojo cuando la entrada no es válida, y un borde negro sólido más sutil cuando es válida. También añadimos un gradiente de fondo cuando la entrada es obligatoria y no válida. Prueba el nuevo comportamiento en el ejemplo siguiente:

- -

{{EmbedLiveSample("El_atributo_required", "100%", 80)}}

- -
-

Nota: Puedes encontrar este ejemplo en vivo en GitHub como fruit-validation.html (consulta también el código fuente).

-
- -

Intenta enviar el formulario sin introducir ningún valor. Observa que la entrada no válida recibe el cursor, aparece un mensaje de error predeterminado («Complete este campo») y el formulario no se puede enviar.

- -

La presencia del atributo required en cualquier elemento que admite este atributo significa que el elemento coincide con la pseudoclase {{cssxref(':required')}}, tenga o no un valor. Si en el elemento {{HTMLElement("input")}} no se ha introducido ningún valor, input coincidirá con la pseudoclase {{cssxref(':invalid')}}.

- -
-

Nota: Para una buena experiencia de usuario, indica al usuario que campos de formulario se requieren. No solo es una buena experiencia de usuario, sino que lo exigen las pautas de accesibilidad de WCAG. Además, solo requiere que los usuarios introduzcan los datos que realmente necesitas: Por ejemplo, ¿por qué realmente necesitas saber el género o el tratamiento de alguien?

-
- -

Validación de una expresión regular

- -

Otra característica útil de validación es el atributo pattern, que espera una expresión regular como valor. Una expresión regular (regex) es un patrón que se puede usar para establecer combinaciones de caracteres en cadenas de texto, por lo que las expresiones regulares son ideales para la validación de formularios y sirven para una gran variedad de otros usos en JavaScript.

- -

Las expresiones regulares son bastante complejas y no vamos a exponerlas exhaustivamente en este artículo. A continuación hay algunos ejemplos para que te hagas una idea de cómo funcionan.

- - - -

Hay muchas más posibilidades que no exponemos aquí. Para obtener una lista completa y muchos ejemplos, consulta nuestro documento de expresiones regulares.

- -

Implementemos un ejemplo. Actualiza tu HTML para añadir un atributo pattern como este:

- -
<form>
-  <label for="choose">¿Prefieres un plátano o una cereza?</label>
-  <input id="choose" name="i_like" required pattern="[Pp]látano|[Cc]ereza ">
-  <button>Enviar</button>
-</form>
-
- - - -

Esto nos da la siguiente actualización; pruébalo:

- -

{{EmbedLiveSample("Validación de una expresión regular", "100%", 80)}}

- -
-

Nota: Puedes encontrar este ejemplo en vivo en GitHub como fruit-pattern.html (consulta también su código fuente).

-
- -

En este ejemplo, el elemento {{HTMLElement("input")}} acepta uno de los cuatro valores posibles: las cadenas «plátano», «Plátano», «cereza» o «Cereza». Las expresiones regulares distinguen entre mayúsculas y minúsculas, pero hemos hecho que admita versiones en mayúsculas y minúsculas utilizando un patrón «Aa» adicional anidado dentro de corchetes.

- -

En este punto, intenta cambiar el valor dentro del atributo pattern para que se vean iguales que algunos de los ejemplos vistos anteriormente, y observa que esto afecta a los valores que puedes añadir para que el valor de entrada sea válido. Intenta escribir algo por tu cuenta y mira cómo va. ¡Haz que estén relacionadas con la fruta siempre que sea posible para que tus ejemplos tengan sentido!

- -

Si un valor no vacío de {{HTMLElement("input")}} no coincide con el patrón de la expresión regular, input coincidirá con la pseudoclase {{cssxref(':invalid')}}.

- -
-

Nota: Algunos tipos de elementos {{HTMLElement ("input")}} no necesitan validar una expresión regular con el atributo pattern. Especificar el tipo de correo electrónico (email), por ejemplo, valida el valor de las entradas con un patrón de dirección de correo electrónico bien formado o un patrón que coincida con una lista de direcciones de correo electrónico separadas por comas si tiene el atributo multiple.

-
- -
-

Nota: El elemento {{HTMLElement("textarea")}} no admite el atributo pattern.

-
- -

Restringir la longitud de tus entradas

- -

Puedes restringir la longitud de los caracteres de todos los campos de texto creados por {{HTMLElement("input")}} o {{HTMLElement("textarea")}} utilizando los atributos minlength y maxlength. Un campo no es válido si tiene un valor y ese valor tiene menos caracteres que el valor de longitud mínima (minlength), o más que el valor de longitud máxima (maxlength).

- -

Los navegadores a menudo no permiten que el usuario escriba un valor más largo de lo esperado en los campos de texto. Lo que otorga una mejor experiencia de usuario que maxlength es proporcionar comentarios de recuento de caracteres de manera accesible y permitirles editar su contenido a un tamaño más reducido. Un ejemplo de esto es el límite de caracteres de Twitter. JavaScript, incluidas las soluciones que utilizan maxlength, se puede utilizar para proporcionar esta funcionalidad.

- -

Restringir los valores de tus entradas

- -

Los atributos min y max se pueden usar para proporcionar a los campos numéricos (es decir, <input type="number">) un rango de valores válidos. El campo no será válido si contiene un valor fuera de este rango.

- -

Veamos otro ejemplo. Crea una nueva copia del archivo fruit-start.html.

- -

Ahora elimina el contenido del elemento <body> y reemplázalo con lo siguiente:

- -
<form>
-  <div>
-    <label for="choose">¿Prefieres un plátano o una cereza?</label>
-    <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6">
-  </div>
-  <div>
-    <label for="number">¿Cuántos te gustaría comer?</label>
-    <input type="number" id="number" name="amount" value="1" min="1" max="10">
-  </div>
-  <div>
-    <button>Enviar</button>
-  </div>
-</form>
- - - - - -

Aquí está el ejemplo que se ejecuta en vivo:

- -

{{EmbedLiveSample("Restringir_los_valores_de_tus_entradas", "100%", 100)}}

- -
-

Nota: Puedes encontrar este ejemplo en vivo en GitHub como fruit-length.html (consulta también su código fuente).

-
- -
-

Nota: <input type="number"> (y otros tipos, como range y date) también pueden tomar un atributo step, que especifica en qué incremento aumenta o disminuye el valor cuando se utilizan los controles de entrada (como el botones numéricos arriba y abajo). En el ejemplo anterior no hemos incluido un atributo step, por lo que el valor predeterminado es 1. Esto significa que los valores de coma flotante, como 3.2, también se mostrarán como no válidos.

-
- -

Ejemplo completo

- -

Aquí hay un ejemplo completo que muestra el uso de las funciones de validación integradas en HTML. En primer lugar, un poco de HTML:

- -
<form>
-  <p>
-    <fieldset>
-      <legend>¿Tienes carné de conducir?<abbr title="Este campo es obligatorio" aria-label="required">*</abbr></legend>
-      <!-- Solo se puede seleccionar un botón de opción en un grupo con el mismo nombre,
-           y, por lo tanto, solo un botón de opción en un grupo con el mismo nombre que tiene marcado el atributo «requerido»
-           basta para hacer de una selección un requisito -->
-      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Sí</label>
-      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label>
-    </fieldset>
-  </p>
-  <p>
-    <label for="n1">¿Qué edad tienes?</label>
-    <!-- El atributo pattern puede actuar como una alternativa para los navegadores que
-         no implementan el tipo de entrada de número, pero admiten el atributo pattern.
-         Ten en cuenta que los navegadores que admiten el atributo pattern lo harán
-         fallar silenciosamente cuando se use con un campo numérico.
-         Su uso aquí solo actúa como una alternativa -->
-     <input type="number" min="12" max="120" step="1" id="n1" name="age"
-           pattern="\d+">
-  </p>
-  <p>
-    <label for="t1">¿Cuál es tu fruta favorita?<abbr title="Este campo es obligatorio" aria-label="required">*</abbr></label>
-    <input type="text" id="t1" name="fruit" list="l1" required
-           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range ">
-    <datalist id="l1">
-      <option>Plátano</option>
-      <option>Cereza</option>
-      <option>Manzana</option>
-      <option>Fresa</option>
-      <option>Limón</option>
-      <option>Naranja</option>
-     </datalist>
-  </p>
-  <p>
-    <label for="t2">¿Cuál es tu dirección de correo electrónico? </label>
-    <input type="email" id="t2" name="email">
-  </p>
-  <p>
-    <label for="t3">Deja un mensaje</label>
-    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
-  </p>
-  <p>
-    <button>Enviar</button>
-  </p>
-</form>
- -

Y ahora, algo de CSS para añadir estilo al HTML:

- -
form {
-  font: 1em sans-serif;
-  max-width: 320px;
-}
-
-p > label {
-  display: block;
-}
-
-input[type="text"],
-input[type="email"],
-input[type="number"],
-textarea,
-fieldset {
-  width : 100%;
-  border: 1px solid #333;
-  box-sizing: border-box;
-}
-
-input:invalid {
-  box-shadow: 0 0 5px 1px red;
-}
-
-input:focus:invalid {
-  box-shadow: none;
-}
- -

Esto se traduce de la siguiente manera:

- -

{{EmbedLiveSample("Ejemplo_completo", "100%", 420)}}

- -

Consulta Atributos relacionados con la validación para obtener una lista completa de los atributos que se pueden usar para restringir los valores de entrada y los tipos de entrada que los admiten.

- -
-

Nota: Puedes encontrar este ejemplo en vivo en GitHub como full-example.html (consulta también su código fuente).

-
- -

Validar formularios utilizando JavaScript

- -

Debes usar JavaScript si quieres controlar la apariencia de los mensajes de error nativos o tratar con navegadores heredados que no admiten la validación de formularios incorporados en HTML. En esta sección veremos las diferentes formas de hacer esto.

- -

La API de validación de restricciones

- -

La mayoría de los navegadores admiten la API de validación de restricciones, que consta de un conjunto de métodos y propiedades disponibles en las interfaces DOM de elementos de formulario siguientes:

- - - -

La API de validación de restricciones hace que las propiedades siguientes estén disponibles en los elementos anteriores.

- - - -

La API de validación de restricciones también pone a disposición los siguientes métodos en los elementos anteriores.

- - - -

Implementar un mensaje de error personalizado

- -

Como has visto en los ejemplos de restricciones de validación de HTML5 anteriores, cada vez que un usuario intenta enviar un formulario no válido, el navegador muestra un mensaje de error. La forma en que se muestra este mensaje depende del navegador.

- -

Estos mensajes automatizados tienen dos inconvenientes:

- - - -

Ejemplo de un mensaje de error en francés en una página de Firefox en inglés

- -

La personalización de estos mensajes de error es uno de los casos de uso más comunes de la API de validación de restricciones. Veamos un ejemplo simple de cómo hacer esto.

- -

Comenzaremos con un HTML simple (siéntete libre de poner esto en un archivo HTML en blanco; usa una copia nueva de fruit-start.html como base, si lo deseas):

- -
<form>
-  <label for="mail">Me gustaría que me proporcionara una dirección de correo electrónico:<label>
-  <input type="email" id="mail" name="mail">
-  <button>Enviar</button>
-</form>
- -

Y añade a la página el JavaScript siguiente:

- -
const email = document.getElementById("mail");
-
-email.addEventListener("input", function (event) {
-  if (email.validity.typeMismatch) {
-    email.setCustomValidity("¡Se esperaba una dirección de correo electrónico!");
-  } else {
-    email.setCustomValidity("");
-  }
-});
- -

Aquí guardamos una referencia para la entrada de la dirección de correo electrónico, luego le añadimos un detector de eventos que ejecuta el código de content cada vez que el valor de la entrada cambia.

- -

Dentro del código que contiene, verificamos si la propiedad validity.typeMismatch de la entrada de la dirección de correo electrónico devuelve true, lo que significa que el valor que contiene no coincide con el patrón para una dirección de correo electrónico bien formada. Si es así, llamamos al método setCustomValidity() con un mensaje personalizado. Esto hace que la entrada no sea válida, de modo que cuando intentas enviar el formulario, el envío falla y se muestra el mensaje de error personalizado.

- -

Si la propiedad validity.typeMismatch devuelve false, llamamos al método setCustomValidity() con una cadena vacía. Esto hace que la entrada sea válida, y el formulario se envía.

- -

Puedes probarlo a continuación:

- -

{{EmbedGHLiveSample("/en-US/learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}

- -
-

Nota: Puede encontrar este ejemplo vivo en GitHub como custom-error-message.html (véase también su código fuente).

-
- -

Un ejemplo más detallado

- -

Ahora que hemos visto un ejemplo realmente sencillo, veamos cómo podemos usar esta API para construir una validación personalizada un poco más compleja.

- -

En primer lugar, el código HTML. Una vez más, siéntete libre de construir esto junto con nosotros:

- -
<form novalidate>
-  <p>
-    <label for="mail">
-      <span>Por favor, introduzca una dirección de correo electrónico: </span>
-      <input type="email" id="mail" name="mail" required minlength="8">
-      <span class="error" aria-live="polite"></span>
-    </label>
-  </p>
-  <button>Enviar</button>
-</form>
- -

Este sencillo formulario usa el atributo novalidate para desactivar la validación automática del navegador; esto permite que nuestra secuencia de comandos tome control sobre la validación. Sin embargo, esto no deshabilita la compatibilidad para la API de validación de restricciones ni la aplicación de pseudoclases de CSS como {{cssxref(":valid")}}, etc. Eso significa que, aunque el navegador no verifica automáticamente la validez del formulario antes de enviar los datos, puedes hacerlo tú mismo y diseñar el formulario en consecuencia.

- -

Nuestra entrada para validar es <input type="email">, que es obligatoria y tiene una longitud mínima (minlength) de 8 caracteres. Vamos a verificar esto con nuestro propio código para que muestre un mensaje de error personalizado para cada elemento.

- -

Nuestro objetivo es mostrar los mensajes de error dentro de un elemento <span>. El atributo aria-live se establece en ese <span> para asegurar que todo el mundo podrá ver nuestro mensaje de error personalizado, incluidos los usuarios de lectores de pantalla.

- -
-

Nota: Un punto clave a tener en cuenta es que establecer el atributo novalidate en el formulario impide que el formulario muestre sus propios cuadros de diálogo de error, y nos permite mostrar los mensajes de error personalizados en el DOM de la manera que nosotros elijamos.

-
- -

Ahora aplicaremos algo de CSS básico para mejorar ligeramente el aspecto del formulario y proporcionar algunos comentarios visuales cuando los datos de entrada no sean válidos:

- -
body {
-  font: 1em sans-serif;
-  width: 200px;
-  padding: 0;
-  margin : 0 auto;
-}
-
-p * {
-  display: block;
-}
-
-input[type=email]{
-  -webkit-appearance: none;
-  appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  box-sizing: border-box;
-}
-
-/* Este es nuestro diseño para los campos no válidos */
-input:invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus:invalid {
-  outline: none;
-}
-
-/* Este es el diseño para nuestros mensajes de error */
-.error {
-  width : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -

Vamos a ver el JavaScript que implementa la validación de error personalizada.

- -
// Hay muchas formas de elegir un nodo DOM; aquí obtenemos el formulario y, a continuación, el campo de entrada
-// del correo electrónico, así como el elemento span en el que colocaremos el mensaje de error.
-const form  = document.getElementsByTagName('form')[0];
-
-const email = document.getElementById('mail');
-const emailError = document.querySelector('#mail + span.error');
-
-email.addEventListener('input', function (event) {
-  // Cada vez que el usuario escribe algo, verificamos si
-  // los campos del formulario son válidos.
-
-  if (email.validity.valid) {
-    // En caso de que haya un mensaje de error visible, si el campo
-    // es válido, eliminamos el mensaje de error.
-    emailError.innerHTML = ''; // Restablece el contenido del mensaje
-    emailError.className = 'error'; // Restablece el estado visual del mensaje
-  } else {
-    // Si todavía hay un error, muestra el error exacto
-    showError();
-  }
-});
-
-form.addEventListener('submit', function (event) {
-  // si el campo de correo electrónico es válido, dejamos que el formulario se envíe
-
-  if(!email.validity.valid) {
-    // Si no es así, mostramos un mensaje de error apropiado
-    showError();
-    // Luego evitamos que se envíe el formulario cancelando el evento
-    event.preventDefault();
-  }
-});
-
-function showError() {
-  if(email.validity.valueMissing) {
-    // Si el campo está vacío
-    // muestra el mensaje de error siguiente.
-    emailError.textContent = 'Debe introducir una dirección de correo electrónico.';
-  } else if(email.validity.typeMismatch) {
-    // Si el campo no contiene una dirección de correo electrónico
-    // muestra el mensaje de error siguiente.
-    emailError.textContent = 'El valor introducido debe ser una dirección de correo electrónico.';
-  } else if(email.validity.tooShort) {
-    // Si los datos son demasiado cortos
-    // muestra el mensaje de error siguiente.
-    emailError.textContent = 'El correo electrónico debe tener al menos ${ email.minLength } caracteres; ha introducido ${ email.value.length }.';
-  }
-
-  // Establece el estilo apropiado
-  emailError.className = 'error activo';
-}
- -

Los comentarios explican las cosas bastante bien, pero de una manera muy breve:

- - - -

Este es el resultado:

- -

{{EmbedGHLiveSample("/en-US/learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}

- -
-

Nota: Puedes encontrar este ejemplo en vivo en GitHub como detailed-custom-validation.html (consulta también su código fuente).

-
- -

La API de validación de restricciones te proporciona una herramienta poderosa para manejar la validación de formularios, y te permite tener un control enorme sobre la interfaz de usuario más allá de lo que puedas hacer solo con HTML y CSS.

- -
-

Nota: Para obtener más información, consulta nuestra guía de validación de restricciones y la referencia de API de validación de restricciones.

-
- -

Validar formularios sin una API incorporada

- -

En algunos casos, como la compatibilidad heredada del navegador o los controles personalizados, no podrás o no querrás usar la API de validación de restricciones. Todavía puedes usar JavaScript para validar tu formulario, pero vas a tener que escribirlo.

- -

Antes de validar el formulario, hazte estas preguntas:

- -
-
¿Qué tipo de validación debería realizar?
-
Debes determinar cómo validar los datos: operaciones de cadena, conversión de tipos, expresiones regulares, etc. Tú decides.
-
¿Qué debo hacer si el formulario no se valida?
-
Esto es claramente un problema de la interfaz de usuario. Tienes que decidir cómo se comportará el formulario. ¿El formulario va a enviar los datos de todos modos? ¿Deberías resaltar los campos que dan error? ¿Deberías mostrar mensajes de error?
-
¿Cómo puedo ayudar al usuario a corregir datos no válidos?
-
Para reducir la frustración del usuario, es muy importante proporcionar tanta información útil como sea posible para guiarlo a fin de que corrija sus entradas de datos. Debes ofrecer sugerencias por adelantado para que sepan lo que se espera de ellos, así como mensajes de error claros. Si deseas profundizar en los requisitos de interfaz de usuario para la validación de formularios, aquí hay algunos artículos útiles que debes leer: - -
-
- -

Un ejemplo que no usa la API de validación de restricciones

- -

Para ilustrar esto, mostramos una versión simplificada del ejemplo anterior que funciona con navegadores con compatibilidad heredada.

- -

El HTML es casi el mismo; solo hemos eliminado las funciones de validación de HTML.

- -
<form>
-  <p>
-    <label for="mail">
-        <span>Por favor, introduzca una dirección de correo electrónico: </span>
-        <input type="text" class="mail" id="mail" name="mail">
-        <span class="error" aria-live="polite"></span>
-    </label>
-  </p>
-  <!-- Algunos navegadores con compatibilidad heredada deben tener el atributo «type»
-       establecido explícitamente en el elemento «button» de «submit»-->
-  <button type="submit">Enviar</button>
-</form>
- -

Del mismo modo, no es necesario cambiar mucho el CSS; acabamos de convertir la pseudoclase {{cssxref(":invalid")}} de CSS en una clase real y evitamos usar el selector de atributos que no funciona en Internet Explorer 6.

- -
body {
-  font: 1em sans-serif;
-  width: 200px;
-  padding: 0;
-  margin : 0 auto;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input.mail {
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  box-sizing: border-box;
-}
-
-/* Este es nuestro diseño para los campos no válidos */
-input.invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus.invalid {
-  outline: none;
-}
-
-/* Este es el diseño para nuestros mensajes de error */
-.error {
-  width : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -

Los grandes cambios están en el código JavaScript, que necesita hacer mucho más trabajo pesado.

- -
// Hay menos formas de elegir un nodo DOM con navegadores antiguos
-const form  = document.getElementsByTagName('form')[0];
-const email = document.getElementById('mail');
-
-// Lo siguiente es un truco para llegar al siguiente nodo de elementos hermanos en el DOM
-// Esto es peligroso porque puedes construir fácilmente un bucle infinito.
-// En los navegadores modernos es mejor usar element.nextElementSibling
-let error = email;
-while ((error = error.nextSibling).nodeType != 1);
-
-// según la especificación HTML5
-const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-
-// Muchos navegadores antiguos no son compatibles con el método addEventListener.
-// Aquí hay una manera simple de manejar esto; está lejos de ser la única.
-function addEvent(element, event, callback) {
-  let previousEventCallBack = element["on"+event];
-  element["on"+event] = function (e) {
-    const output = callback(e);
-
-    // Una devolución de llamada que devuelve «false» detiene la cadena de devolución de llamada
-    // e interrumpe la ejecución de la devolución de llamada del evento.
-    if (output === false) return false;
-
-    if (typeof previousEventCallBack === 'function') {
-      output = previousEventCallBack(e);
-      if(output === false) return false;
-    }
-  }
-};
-
-// Ahora podemos reconstruir nuestra restricción de validación
-// Debido a que no confiamos en la pseudoclase de CSS, tenemos que
-// establecer explícitamente la clase valid/invalid en nuestro campo de correo electrónico
-addEvent(window, "load", function () {
-  // Aquí probamos si el campo está vacío (recuerda, el campo no es obligatorio)
-  // Si no es así, verificamos si su contenido es una dirección de correo electrónico con el formato correcto.
-  const test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  email.className = test ? "valid" : "invalid";
-});
-
-// Esto define lo que sucede cuando el usuario escribe en el campo
-addEvent(email, "input", function () {
-  const test = email.value.length === 0 || emailRegExp.test(email.value);
-  if (test) {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  } else {
-    email.className = "invalid";
-  }
-});
-
-// Esto define lo que sucede cuando el usuario intenta enviar los datos.
-addEvent(form, "submit", function () {
-  const test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  if (!test) {
-    email.className = "invalid";
-    error.innerHTML = "I expect an e-mail, darling!";
-    error.className = "error active";
-
-    // Algunos navegadores antiguos no son compatibles con el método event.preventDefault ()
-    return false;
-  } else {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  }
-});
- -

El resultado es el siguiente:

- -

{{EmbedLiveSample("Validar_formularios_sin_una_API_incorporada", "100%", 130)}}

- -

Como puedes ver, no es tan difícil construir un sistema de validación por tu cuenta. La parte difícil es hacer que sea lo suficientemente genérico para que se pueda usar en diferentes plataformas y en cualquier forma. Hay muchas bibliotecas de archivos disponibles para realizar la validación de formularios, como por ejemplo Validate.js

- -

.

- -

Prueba tus habilidades!

- -

Has llegado al final de este artículo pero ¿puedes recordar la información más importante?Puedes encontrar pruebas adicionales para comprovar que has comprendido la información antes de que continue — visita Prueba tus habilidades: Validación de formularios.

- -

Resumen

- -

La validación de formularios en el lado del cliente a veces requiere JavaScript si deseas personalizar el estilo y los mensajes de error, pero siempre requiere que pienses cuidadosamente en el usuario. Recuerda que siempre debes ayudar a tus usuarios a corregir los datos que proporcionan. Para ese fin, asegúrate de:

- - - -

Una vez que hayas verificado que el formulario se ha completado correctamente, puedes proceder a enviarlo. Vamos a exponer el envío de los datos del formulario en el próximo artículo.

- -

{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

- -

En este módulo

- - - -

Temas avanzados

- - diff --git a/files/es/learn/html/forms/your_first_html_form/index.html b/files/es/learn/html/forms/your_first_html_form/index.html deleted file mode 100644 index df9d73bc60..0000000000 --- a/files/es/learn/html/forms/your_first_html_form/index.html +++ /dev/null @@ -1,305 +0,0 @@ ---- -title: Mi primer formulario HTML -slug: Learn/HTML/Forms/Your_first_HTML_form -tags: - - Ejemplo - - Guía - - HTML - - Principiante - - Web - - formulários -translation_of: Learn/Forms/Your_first_form ---- -
{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}
- -

El primer artículo de nuestra serie te proporciona una primera experiencia de creación de un formulario web, que incluye diseñar un formulario sencillo con controles de formulario adecuados y otros elementos HTML, añadir un poco de estilo muy simple con CSS y describir cómo se envían los datos a un servidor. Ampliaremos cada uno de estos subtemas más adelante.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática y de lenguaje HTML.
Objetivo:Familiarizarse con los formularios web, para qué se usan, cómo diseñarlos y qué elementos HTML básicos vas a necesitar para casos sencillos.
- -

¿Qué son los formularios web?

- -

Los formularios web son uno de los principales puntos de interacción entre un usuario y un sitio web o aplicación. Los formularios permiten a los usuarios la introducción de datos, que generalmente se envían a un servidor web para su procesamiento y almacenamiento (consulta Enviar los datos de un formulario más adelante en el módulo), o se usan en el lado del cliente para provocar de alguna manera una actualización inmediata de la interfaz (por ejemplo, se añade otro elemento a una lista, o se muestra u oculta una función de interfaz de usuario).

- -

El HTML de un formulario web está compuesto por uno o más controles de formulario (a veces llamados widgets), además de algunos elementos adicionales que ayudan a estructurar el formulario general; a menudo se los conoce como formularios HTML. Los controles pueden ser campos de texto de una o varias líneas, cajas desplegables, botones, casillas de verificación o botones de opción, y se crean principalmente con el elemento {{htmlelement("input")}}, aunque hay algunos otros elementos que también hay que conocer.

- -

Los controles de formulario también se pueden programar para forzar la introducción de formatos o valores específicos (validación de formulario), y se combinan con etiquetas de texto que describen su propósito para los usuarios con y sin discapacidad visual.

- -

Diseñar tu formulario

- -

Antes de comenzar a escribir código, siempre es mejor dar un paso atrás y tomarte el tiempo necesario para pensar en tu formulario. Diseñar una maqueta rápida te ayudará a definir el conjunto de datos adecuado que deseas pedirle al usuario que introduzca. Desde el punto de vista de la experiencia del usuario (UX), es importante recordar que cuanto más grande es tu formulario, más te arriesgas a frustrar a las personas y perder usuarios. Tiene que ser simple y conciso: solicita solo los datos que necesitas.

- -

Diseñar formularios es un paso importante cuando creas un sitio web o una aplicación. Va más allá del alcance de este artículo exponer la experiencia de usuario de los formularios, pero si deseas profundizar en ese tema, puedes leer los artículos siguientes:

- - - -

En este artículo, vamos a crear un formulario de contacto sencillo. Hagamos un esbozo.

- -

Esbozo aproximado del formulario que vamos a construir

- -

Nuestro formulario va a tener tres campos de texto y un botón. Le pedimos al usuario su nombre, su correo electrónico y el mensaje que desea enviar. Al pulsar el botón sus datos se enviarán a un servidor web.

- -

Aprendizaje activo: La implementación de nuestro formulario HTML

- -

De acuerdo, intentemos crear el HTML para nuestro formulario. Vamos a utilizar los elementos HTML siguientes: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}} y {{HTMLelement("button")}}.

- -

Antes de continuar, haz una copia local de nuestra plantilla HTML simple: introduce aquí tu formulario HTML.

- -

El elemento {{HTMLelement("form")}}

- -

Todos los formularios comienzan con un elemento {{HTMLelement("form")}}, como este:

- -
<form action="/my-handling-form-page" method="post">
-
-</form>
- -

Este elemento define formalmente un formulario. Es un elemento contenedor, como un elemento {{HTMLelement("section")}} o {{HTMLelement("footer")}}, pero específico para contener formularios; también admite algunos atributos específicos para la configuración de la forma en que se comporta el formulario. Todos sus atributos son opcionales, pero es una práctica estándar establecer siempre al menos los atributos action y method:

- - - -
-

Nota: Veremos cómo funcionan esos atributos en nuestro artículo Enviar los datos de un formulario que encontrarás más adelante.

-
- -

Por ahora, añade el elemento {{htmlelement("form")}} anterior a tu elemento HTML {{htmlelement("body")}}.

- -

Los elementos {{HTMLelement("label")}}, {{HTMLelement("input")}} y {{HTMLelement("textarea")}}

- -

Nuestro formulario de contacto no es complejo: la parte para la entrada de datos contiene tres campos de texto, cada uno con su elemento {{HTMLelement("label")}} correspondiente:

- - - -

En términos de código HTML, para implementar estos controles de formulario necesitamos algo como lo siguiente:

- -
<form action="/my-handling-form-page" method="post">
- <ul>
-  <li>
-    <label for="name">Nombre:</label>
-    <input type="text" id="name" name="user_name">
-  </li>
-  <li>
-    <label for="mail">Correo electrónico:</label>
-    <input type="email" id="mail" name="user_mail">
-  </li>
-  <li>
-    <label for="msg">Mensaje:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </li>
- </ul>
-</form>
- -

Actualiza el código de tu formulario para que se vea como el anterior.

- -

Los elementos {{HTMLelement("li")}} están ahí para estructurar nuestro código convenientemente y facilitar la aplicación de estilo (ver más adelante en el artículo). Por motivos de usabilidad y accesibilidad incluimos una etiqueta explícita para cada control de formulario. Ten en cuenta el uso del atributo for en todos los elementos {{HTMLelement("label")}}, que toma como valor el id del control de formulario con el que está asociado; así es como asocias un formulario con su etiqueta.

- -

Hacer esto presenta muchas ventajas porque la etiqueta está asociada al control del formulario y permite que los usuarios con ratón, panel táctil y dispositivos táctiles hagan clic en la etiqueta para activar el control correspondiente, y también proporciona accesibilidad con un nombre que los lectores de pantalla leen a sus usuarios. Encontrarás más detalles sobre las etiquetas de los formularios en Cómo estructurar un formulario web.

- -

En el elemento {{HTMLelement("input")}}, el atributo más importante es type. Este atributo es muy importante porque define la forma en que el elemento {{HTMLelement("input")}} aparece y se comporta. Encontrarás más información sobre esto en el artículo sobre Controles de formularios nativos básicos más adelante.

- - - -

Por último, pero no por ello menos importante, ten en cuenta la sintaxis de <input> en contraposición con la de <textarea></textarea>. Esta es una de las rarezas del HTML. La etiqueta <input> es un elemento vacío, lo que significa que no necesita una etiqueta de cierre. El elemento {{HTMLElement("textarea")}} no es un elemento vacío, lo que significa que debe cerrarse con la etiqueta de cierre adecuada. Esto tiene un impacto en una característica específica de los formularios: el modo en que defines el valor predeterminado. Para definir el valor predeterminado de un elemento {{HTMLElement("input")}}, debes usar el atributo value de esta manera:

- -
<input type="text" value="por defecto este elemento se llena con este texto">
- -

Por otro lado, si deseas definir un valor predeterminado para un elemento {{HTMLElement("textarea")}}, lo colocas entre las etiquetas de apertura y cierre del elemento {{HTMLElement("textarea")}}, así:

- -
<textarea>
-Por defecto, este elemento contiene este texto
-</textarea>
- -

El elemento {{HTMLelement("button")}}

- -

El marcado de nuestro formulario está casi completo; solo necesitamos añadir un botón para permitir que el usuario envíe sus datos una vez que haya completado el formulario. Esto se hace con el elemento {{HTMLelement("button")}}; añade lo siguiente justo encima de la etiqueta de cierre </form>:

- -
<li class="button">
-  <button type="submit">Envíe su mensaje</button>
-</li>
- -

El elemento {{htmlelement("button")}} también acepta un atributo de type, que a su vez acepta uno de estos tres valores: submit, reset o button.

- - - -
-

Nota: También puedes usar el elemento {{HTMLElement("input")}} con el atributo type correspondiente para generar un botón, por ejemplo <input type="submit">. La ventaja principal del elemento {{HTMLelement("button")}} es que el elemento {{HTMLelement("input")}} solo permite texto sin formato en su etiqueta, mientras que el elemento {{HTMLelement("button")}} permite contenido HTML completo, lo que permite generar botones creativos más complejos.

-
- -

Aplicar estilo básico a un formulario

- -

Ahora que has terminado de escribir el código HTML de tu formulario, guárdalo y observa lo que ocurre en un navegador. Por ahora, se verá bastante feo.

- -
-

Nota: Si crees que no has escrito bien el código HTML, compáralo con nuestro ejemplo final: véase first-form.html (ver en vivo).

-
- -

Resulta notablemente difícil aplicar estilo a los formularios. Está más allá del alcance de este artículo enseñarte cómo aplicar estilo a los formularios en detalle, por lo que por el momento solo vamos a exponer cómo añadir un poco de CSS para que se vea un poco bien.

- -

En primer lugar, añade un elemento {{htmlelement("style")}} a tu página, dentro de la cabecera del HTML. Debe quedar así:

- -
<style>
-
-</style>
- -

Dentro de las etiquetas style, añade el código CSS siguiente:

- -
form {
-  /* Centrar el formulario en la página */
-  margin: 0 auto;
-  width: 400px;
-  /* Esquema del formulario */
-  padding: 1em;
-  border: 1px solid #CCC;
-  border-radius: 1em;
-}
-
-ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-form li + li {
-  margin-top: 1em;
-}
-
-label {
-  /* Tamaño y alineación uniforme */
-  display: inline-block;
-  width: 90px;
-  text-align: right;
-}
-
-input,
-textarea {
-  /* Para asegurarse de que todos los campos de texto tienen la misma configuración de letra
-     Por defecto, las áreas de texto tienen un tipo de letra monoespaciada */
-  font: 1em sans-serif;
-
-  /* Tamaño uniforme del campo de texto */
-  width: 300px;
-  box-sizing: border-box;
-
-  /* Hacer coincidir los bordes del campo del formulario */
-  border: 1px solid #999;
-}
-
-input:focus,
-textarea:focus {
-  /* Destacado adicional para elementos que tienen el cursor */
-  border-color: #000;
-}
-
-textarea {
-  /* Alinear los campos de texto multilínea con sus etiquetas */
-  vertical-align: top;
-
-  /* Proporcionar espacio para escribir texto */
-  height: 5em;
-}
-
-.button {
-  /* Alinear los botones con los campos de texto */
-  padding-left: 90px; /* mismo tamaño que los elementos de la etiqueta */
-}
-
-button {
-  /* Este margen adicional representa aproximadamente el mismo espacio que el espacio
-     entre las etiquetas y sus campos de texto */
-  margin-left: .5em;
-}
- -

Guarda y vuelve a cargar, y observa que tu formulario presenta un aspecto mucho menos feo.

- -
-

Nota: Puedes encontrar nuestra versión en GitHub en first-form-styled.html (ver en vivo).

-
- -

Enviar los datos del formulario a un servidor web

- -

La última parte, y quizás la más complicada, es manejar los datos del formulario en el lado del servidor. El elemento {{HTMLelement("form")}} define dónde y cómo enviar los datos gracias a los atributos action y method.

- -

Proporcionamos un nombre (name) a cada control de formulario. Los nombres son importantes tanto en el lado del cliente como del servidor; le dicen al navegador qué nombre debe dar a cada dato y, en el lado del servidor, dejan que el servidor maneje cada dato por su nombre. Los datos del formulario se envían al servidor como pares de nombre/valor.

- -

Para poner nombre a los diversos datos que se introducen en un formulario, debes usar el atributo name en cada control de formulario que recopila un dato específico. Veamos de nuevo algunos de nuestros códigos de formulario:

- -
<form action="/my-handling-form-page" method="post">
- <ul>
-  <li>
-    <label for="name">Nombre:</label>
-    <input type="text" id="name" name="user_name" />
-  </li>
-  <li>
-    <label for="mail">Correo electrónico:</label>
-    <input type="email" id="mail" name="user_email" />
-  </li>
-  <li>
-    <label for="msg">Mensaje:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </li>
-
-  ...
-
- -

En nuestro ejemplo, el formulario envía tres datos denominados «user_name», «user_email» y «user_message». Esos datos se envían a la URL «/my-handling-form-page» utilizando el método post de HTTP.

- -

En el lado del servidor, la secuencia de comandos de la URL «/my-handling-form-page» recibe los datos como una lista de tres elementos clave/valor contenidos en la solicitud HTTP. La forma en que este script maneja esos datos depende de ti. Cada lenguaje de servidor (PHP, Python, Ruby, Java, C#, etc.) tiene su propio mecanismo de manipulación de datos de formulario. No profundizaremos sobre el tema en esta guía, pero si deseas obtener más información, proporcionamos algunos ejemplos en nuestro artículo Enviar los datos de un formulario que encontrarás más adelante.

- -

Resumen

- -

¡Enhorabuena!, has creado tu primer formulario web. Debería verse así:

- -

{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }}

- -

Pero esto es solo el comienzo: ahora ha llegado el momento de profundizar en el tema. Los formularios tienen mucho más potencial de lo que hemos visto aquí y los artículos siguientes de este módulo te ayudarán a dominarlo.

- -

{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}

- -

En este módulo

- - - -

Temas avanzados

- - diff --git a/files/es/learn/html/howto/author_fast-loading_html_pages/index.html b/files/es/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..b44128e05d --- /dev/null +++ b/files/es/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,53 @@ +--- +title: Consejos para la creación de páginas HTML de carga rápida +slug: Web/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida +tags: + - Consejos + - HTML + - Rapido + - Tips +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

Consejos para la creación de páginas HTML de carga rápida

+ +

Estos consejos estan basados en conocimiento común y experimentación.

+ +

Una página web optimizada no solo provee una mayor respuesta a su sitio por parte de los visitantes, sino que también reduce la carga en su servidores web y en su conexión de internet. Esto puede ser crucial para sitios con alto volumen o sitios que tienen un pico de trafico debido a circunstancias inucuales como noticias de ultima hora.

+ +

Optimizar la carga de páginas no es solo para el contenido que será visto atraves de una estrecha conexión telefónica o dispositivos móviles. Es tan importante para el contenido de banda ancha y puede conducir a mejoras espectaculares incluso para sus visitantes con las conexiones más rápidas.

+ +

Consejos

+ +

Reducir el peso de las páginas web

+ +

El peso de las páginas web es por mucho el factor más importante en el rendimiento de carga de una página.

+ +

Reducir el peso de la página mediante la eliminación de espacios en blanco innecesarios y comentarios, comunmente se coonoce como minimalización, y al mover "inline-script" y "CSS" a un archivo externo, puede mejorar el rendimiento de la descarga con minimas necesidades de otros cambios en la estructura de la página.

+ +

Herramientas como HTML Tidy pueden quitar automáticamente espacios en blanco y las líneas en blanco adicionales de código fuente HTML valido. Otras herramientas pueden "comprimir" JavaScript al reformatear el codigo fuente o por ofuscación la fuente y la sustitución de los identificadores largos con versiones mas cortas.

+ +

Minimizar el número de archivos

+ +

Reducir el número de archivos referentes en una pagina web baja el número de conexiones HTTP requeridas para bajar la página.

+ +

Dependiendo de la configuración de cache de un navegador, puede enviar una petición "If-Modified-Since" al servidor web para cada "CSS", JavaScript o archivo de imágen, preguntando si el archivo ha sido modificado desde la ultima vez que fué descargado.

+ +

Al reducir el número de archivos que son refereciados dentro de una página web, se reduce el tiempo necesario para que estas solicitudes se envíen, y para que  sus respuestas que se reciban.

+ +

Si se usan muchas imágenes de fondo en sus "CSS", puedes reducir la cantidad de busquedas HTTP necesarias al combinar las imagenes en una, conocido como "image sprite". Luego solamente se aplica la misma imagen cada vez que lo necesite para un fondo, ajustando las coordenadas el eje (X / Y) adecuadamente. Estas técnica trabaja mejor con elementos que tendrán dimensiones limitadas, no funcionará para todos los usos de imagenes de fondo, sin embargo, la menor cantidad de pedidos HTTP y el uso de una única imágen en caché puede reducir el timepo de carga de una página.

+ +

Demasiado tiempo gastado en consultar la ultima modificación de los archivos referenciados puede demorar la pantalla inicial de una página web, ya que el explorador debe comprobar la fecha de modificación de cada archivo CSS o JavaScript, antes de pintar la página.

+ +

Reducir la busqueda de dominios

+ +

Debido a que cada dominio separado cuesta tiempo en una busqeuda DNS, el tiempo de carga de la página crecerá junto con el número de dominios que aparecen en enlace CSS (s),  JavaScript y recursos de imagen.

+ +

Esto no puede ser siempre práctico; sin embargo siempre se debe tener cuidado de usar sólo el número mínimo necesario de los diferentes dominios en sus páginas.

+ +

Reutilización de contenido de cache

+ +

Asegúrese de que cualquier contenido que se pueden almacenar en caché, se almacena en caché, y con fechas de caducidad correspondientes.

+ +

En particular, prestar atención a la cabecera "Last-Modified". Permite el eficiente almacenamiento en cache de la página; por medio de esta cabecera, la información se transmite al agente de usuario sobre el archivo que quiere cargar, por ejemplo, como cuando fue modificada por última vez. La mayoría de los servidores web añadirá automáticamente la cabecera Last-Modified para páginas estáticas (por ejemplo .html, .css), basado en la fecha de última modificación almacenada en el sistema de archivos. Con páginas dinámicas (por ejemplo, .php, .aspx), esto, por supuesto, no se puede hacer, y la cabecera no se envía.

+ +

Así, en particular para las páginas que se generan de forma dinámica, un poco de investigación sobre este tema es beneficioso. Puede ser un poco complicada, pero se ahorrará mucho en las solicitudes de página en las páginas que normalmente no serían cacheable.

diff --git a/files/es/learn/html/howto/index.html b/files/es/learn/html/howto/index.html new file mode 100644 index 0000000000..095e5bc54e --- /dev/null +++ b/files/es/learn/html/howto/index.html @@ -0,0 +1,141 @@ +--- +title: Solución de problemas comunes de HTML +slug: Learn/HTML/como +tags: + - CodificacióndeSecuenciadeComandos + - HTML +translation_of: Learn/HTML/Howto +--- +

{{LearnSidebar}}

+ +

Los siguientes enlaces brindan soluciones puntuales a los problemas más comunes a los que te enfrentarás a diario en HTML.

+ +
+
+

Estructura básica

+ +

La principal aplicación de HTML es la estructuración del documento. Si eres nuevo en HTML debes empezar aquí.

+ + + +

Semántica básica textos

+ +

HTML se especializa en suministrar información semántica del documento, así que HTML soluciona muchas dudas que puede tener sobre como transmitir su mensaje a través de un documento.

+ + +
+ +
+

Hipervínculos

+ +

Uno de las principales razones por las que HTML hace más fácil la navegación son los {{Glossary("hyperlink", "hipervínculos")}}, que pueden ser usados de diferentes formas:

+ + + +

Imágenes y multimedia

+ + + +

Scripts y estilización

+ +

HTML únicamente define la estructura del documento. Para solucionar los problemas de presentación usamos {{glossary("CSS")}}, o usamos scripts para hacer la página interactiva.

+ + + +

Contenido integrado

+ + +
+
+ +

Problemas avanzados o raros

+ +

Más allá de lo basico, HTML es muy rico y ofrece características avanzadas para solucionar problemas complejos. Estos artículos te ayudarán a abordar estos casos menos comunes:

+ +
+
+

Formularios

+ +

Los formularios son una estructura compleja en HTML para enviar datos desde una pagina web al servidor. Te animamos a que revises la guia completa. Aquí es por donde deberías empezar:

+ + + +

Información tabular

+ +

Alguna información, llamada datos tabulares, necesita ser organizada en tablas mediante filas y columnas. Siendo ésta una de las estructuras más complejas de HTML, no es fácil dominarla:

+ + + +

Representación de datos

+ + + +

Rendimiento

+ + +
+ +
+

Semántica avanzada de texto

+ + + +

Imágenes y multimedia avanzada

+ + + +

Internacionalización

+ +

HTML no es monolingüe. Éste proporciona herramientas para manejar problemas comunes de internacionalización.

+ + +
+
+ +

     

diff --git a/files/es/learn/html/howto/use_data_attributes/index.html b/files/es/learn/html/howto/use_data_attributes/index.html new file mode 100644 index 0000000000..7629974833 --- /dev/null +++ b/files/es/learn/html/howto/use_data_attributes/index.html @@ -0,0 +1,75 @@ +--- +title: Uso de atributos de datos +slug: Learn/HTML/como/Usando_atributos_de_datos +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +
{{LearnSidebar}}
+ +

HTML5 está diseñado de forma tal que sea fácil extender los datos asociados a un elemento en particular sin necesidad de que tengan un significado definido. Los atributos data-*  permiten almacenar información adicional sobre un elemento HTML cualquiera sin tener que recurrir a artilugios tales como la utilización de atributos no estándar, propiedades adicionales en el DOM o {{domxref("Node.setUserData()")}}.

+ +

Sintaxis HTML

+ +

La sintáxis es simple. Un atributo cualquiera cuyo nombre comience con data-es un atributo de datos. Supongamos que tenemos un artículo y deseamos almacenar información adicional que no tiene ninguna representación visual. En ese caso, alcanza con que hagamos uso de los atributos data:

+ +
<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+...
+</article>
+ +

Acceso a través de JavaScript

+ +

Leer los valores de estos atributos en JavaScript también es muy sencillo. Puede usar {{domxref("Element.getAttribute", "getAttribute()")}} con su nombre HTML completo para leerlos, pero el estándar define una forma más simple: un {{domxref("DOMStringMap")}} puede leer a través de una propiedad {{domxref("HTMLElement.dataset", "dataset")}}.

+ +

Para obtener un atributo data a través del dataset del objeto, obtenga la propiedad por la parte del nombre del atributo despues de data- (tenga en cuenta que los guiones son convertidos en camelCase).

+ +
var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"
+ +

Cada propiedad es una cadena y se puede leer y escribir. En el caso anterior, establecer article.dataset.columns = 5 cambiaría ese atributo a "5".

+ +

Acceso a través de CSS

+ +

Tenga en cuenta que, debido a que los atributos de datos son atributos simples de HTML, incluso puede acceder a ellos desde CSS. Por ejemplo, para mostrar los data-parent en el artículo, puede usar el contenido generado en CSS con la función {{cssxref("attr")}}:

+ +
article::before {
+  content: attr(data-parent);
+}
+ +

También puede usar los selectores de atributos en CSS para cambiar los estilos de acuerdo a las priopiedades de datos:

+ +
article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}
+ +

Puede ver todo esto trabajando junto en este ejemplo de JSBin.

+ +

Los atributos de datos también se pueden almacenar para que contengan información que cambia constantemente, como los puntajes en un juego. Usando los selectores de CSS y el acceso a JavaScript aquí, esto le permite crear algunos efectos ingeniosos sin tener que escribir sus propias rutinas de visualización. Consulte este screencast para ver un ejemplo utilizando contenido generado y transacciones CSS (Ejemplo JSBin).

+ +

Los valores de datos son cadenas de caracteres. Los valores numéricos deben ser citados en el selector para que el estilo surta efecto.

+ +

Problemas

+ +

No almacene el contenido que debería ser visible y accesible en los atributos de datos, ya que las tecnologías de asistencia, no pueden acceder a ellos. Ademas, los rastreadores de búsqueda no pueden indexar los valores de los atributos de datos.

+ +

Los principales problemas a considerar son el soporte y rendimiento en Internet Explorer. Internet Explorer 11 y superiores, proporcionan soporte para el estándar, pero todas las versiones anteriores no son compatibles con dataset. Para admitir IE 10 e inferiores, debe acceder a los atributos de datos con {{domxref("Element.getAttribute", "getAttribute()")}} en su lugar. Ademas, el rendimiento de lectura de los atributos de datos en comparación con el almacenamiento de estos datos en un objeto JS normal es deficiente.

+ +

Dicho esto, sin embargo, para metadatos asociados a elementos personalizados, son una gran solución.

+ +

En Firefox 49.0.2 (y quizás versiones anteriores), los atributos de datos que exceden los 1022 caracteres no serán leídos por Javascript (EcmaScript 4).

+ +

Ver también

+ + diff --git a/files/es/learn/html/introduccion_a_html/advanced_text_formatting/index.html b/files/es/learn/html/introduccion_a_html/advanced_text_formatting/index.html deleted file mode 100644 index 7e96d3c6d7..0000000000 --- a/files/es/learn/html/introduccion_a_html/advanced_text_formatting/index.html +++ /dev/null @@ -1,695 +0,0 @@ ---- -title: Formateo de texto avanzado -slug: Learn/HTML/Introduccion_a_HTML/Advanced_text_formatting -tags: - - CodingScripting - - Guía - - HTML - - Lista de descripción - - Novato - - Principiante - - Texto - - abreviatura - - aprende - - cita - - semántica -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
- -

Hay muchos otros elementos en HTML para dar formato al texto, que no expusimos en el artículo {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}. Los elementos descritos en este artículo son menos conocidos, pero aún así es muy útil conocerlos (no obstante, no es una lista completa de ninguna manera). Aquí aprenderás cómo marcar citas, listas de descripción, código de computadora y otro texto relacionado, subíndices y superíndices, información de contacto y mucho más.

- - - - - - - - - - - - -
Prerrequisitos:Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}.
Objetivo:Aprender a utilizar elementos HTML menos conocidos para marcar características semánticas avanzadas.
- -

Listas de descripciones

- -

En los fundamentos del texto HTML, explicamos cómo {{web.link("/es/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists", "marcar listas básicas")}} en HTML, pero no mencionamos el tercer tipo de lista con la que te encontrarás ocasionalmente: listas de descripción. El propósito de estas listas es marcar un conjunto de elementos y sus descripciones asociadas, como términos y definiciones, o preguntas y respuestas. Veamos un ejemplo de un conjunto de términos y definiciones:

- -
soliloquio
-En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).
-monólogo
-En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.
-aparte
-En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.
- -

Las listas de descripción utilizan un contenedor diferente al de los otros tipos de listas — {{HTMLElement("dl")}} («description list» o lista de descripciones); además, cada término está envuelto en un elemento {{HTMLElement("dt")}} («description term» o término a describir), y cada descripción está envuelta en un elemento {{HTMLElement("dd")}} («description definition» o definición de descripción). Para redondear esta información veamos un ejemplo:

- -
-
<dl>
-  <dt>soliloquio</dt>
-  <dd>En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).</dd>
-  <dt>monólogo</dt>
-  <dd>En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.</dd>
-  <dt>aparte</dt>
-  <dd>En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</dd>
-</dl>
-
- -

Los estilos predeterminados del navegador mostrarán listas de descripciones con las descripciones sangradas un poco más que los términos.

- -

{{ EmbedLiveSample('listas-de-descripciones-ejemplo-activo-1', '100%', '285px', '', '', 'hide-codepen-jsfiddle') }}

- -

Ten en cuenta que un solo término puede tener múltiples descripciones, por ejemplo:

- -
-
<dl>
-  <dt>aparte</dt>
-  <dd>En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</dd>
-  <dd>Si la obra es impresa, es una sección de contenido que se relaciona con el tema, pero no encaja directamente en el flujo principal de contenido, de modo que se presenta por separado (a menudo en una caja de texto en el margen).</dd>
-</dl>
-
- -

{{ EmbedLiveSample('listas-de-descripciones-ejemplo-activo-2', '100%', '193px', '', '', 'hide-codepen-jsfiddle') }}

- -

Aprendizaje activo: Marcar un conjunto de definiciones

- -

Es hora de practicar las listas de descripciones; agrega elementos al texto sin formato en el campo Código editable para que aparezca como una lista de descripción en el campo Salida en vivo. Puedes usar tus propios términos y descripciones si lo deseas.

- -

Si cometes un error, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si te quedas realmente encallado, pulsa el botón Mostrar solución para ver una buena propuesta.

- - - -

{{ EmbedLiveSample('Código_reproducible', 700, 350, "", "", "hide-codepen-jsfiddle") }}

- -

Citas

- -

HTML también dispone de elementos para el marcado de citas; cual elemento utilices depende de si estás marcando la cita como un bloque o como un elemento en línea.

- -

Cita en bloque independiente (blockquote)

- -

Si una sección de contenido a nivel de bloque (ya sea un párrafo, varios párrafos, una lista, etc.) se cita en otro lugar, debes envolverla dentro de un elemento {{HTMLElement("blockquote")}} para indicarlo, e incluye una URL que apunte a la fuente de la cita dentro de un atributo {{HTMLAttrxRef("cite", "blockquote")}}. Por ejemplo, el siguiente marcado tomado de la página del elemento <blockquote> de MDN:

- -
<p>El <strong>elemento HTML <code>&lt;blockquote&gt;</code></strong> (o <em>elemento HTML de cita
-en bloque independiente</em>) indica que el texto al que delimita es una cita ampliada.</p>
- -

Para convertir esto en una cita en bloque independiente, simplemente harías lo siguiente:

- -
-
<p>A continuación se muestra una cita en bloque independiente...</p>
-<blockquote cite="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote">
-  <p>El <strong>elemento HTML <code>&lt;blockquote&gt;</code></strong> (o <em>elemento HTML de cita
-  en bloque independiente</em>) indica que el texto al que delimita es una cita ampliada.</p>
-</blockquote>
-
- -

El estilo predeterminado del navegador lo mostrará como un párrafo con sangría, para indicar que se trata de una cita; el párrafo anterior a la cita sirve para demostrarlo.

- -

{{EmbedLiveSample('blockquote-ejemplo-en-vivo', '100%', '117px', '', '', 'hide-codepen-jsfiddle')}}

- -

Citas en línea

- -

Las citas en línea funcionan exactamente de la misma manera, excepto que usan el elemento {{HTMLElement("q")}}. Por ejemplo, el siguiente fragmento de marcado contiene una cita <q> de la página MDN:

- -
<p>El elemento de cita — <code>&lt;q&gt;</code> — se <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">utiliza en
-para citas breves que no requieren saltos de párrafo.</q></p>
- -

El estilo predeterminado del navegador lo representará como texto normal entre comillas para indicar una cita, así:

- -

{{ EmbedLiveSample('Citas_en_línea', '100%', '78px', '', '', 'hide-codepen-jsfiddle')}}

- -

Citas

- -

El contenido del atributo {{HTMLAttrxRef("cite", "blockquote")}} suena útil, pero desafortunadamente los navegadores, lectores de pantalla, etc. no hacen mucho con él. No hay forma de hacer que el navegador muestre el contenido de cite sin escribir tu propia solución usando JavaScript o CSS. Si deseas que la fuente de la cita esté disponible en la página, lo debes hacer en el texto a través de un enlace o de alguna otra forma apropiada.

- -

Hay un elemento {{HTMLElement("cite")}}, pero está destinado a contener el título del recurso que se cita, p. ej. el nombre del libro. Sin embargo, no hay razón por la que no puedas vincular el texto dentro de <cite> a la fuente de la cita de alguna manera:

- -
<p>De acuerdo con <a href="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote">
-<cite>página de citas en bloque independiente de MDN</cite></a>:
-</p>
-
-<blockquote cite="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote">
-  <p>El <strong>elemento HTML <code>&lt;blockquote&gt;</code></strong> (o <em>elemento HTML de cita
-  en bloque independiente</em>) indica que el texto al que delimita es una cita ampliada.</p>
-</blockquote>
-
-<p>El elemento de cita — <code>&lt;q&gt;</code> — se <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">utiliza en
-citas breves que no requieren saltos de párrafo.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
-<cite>página q de MDN</cite></a>.</p>
- -

Las citas se escriben en cursiva de forma predeterminada.

- -

{{ EmbedLiveSample('Citas_2', '100%', '179px', '', '', 'hide-codepen-jsfiddle') }}

- -

Aprendizaje activo: ¿Quién dijo eso?

- -

¡Es hora de otro ejemplo de aprendizaje activo! En este ejemplo, nos gustaría que:

- -
    -
  1. Conviertas el párrafo del medio en una cita en bloque independiente, que incluya un atributo cite.
    2. -
  2. Conviertas "La necesidad de eliminar el diálogo interno negativo" en el tercer párrafo en una cita en línea e incluya un atributo cite.
    3. -
  3. Envuelvas el título de cada fuente en etiquetas <cite> y conviertas cada una en un enlace a esa fuente.
    4. -
- -

Las fuentes de citación que necesitas son:

- - - -

Si cometes un error, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si te quedas realmente encallado, pulsa el botón Mostrar solución para ver una buena propuesta.

- - - -

{{ EmbedLiveSample('Código_reproducible_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}

- -

Abreviaturas

- -

Otro elemento bastante común que encontrarás cuando busques en la Web es {{HTMLElement("abbr")}} — se usa para envolver una abreviatura o acrónimo, y proporcionar una expansión completa del término (incluida dentro de un atributo {{HTMLAttrxRef("title")}}. Veamos un par de ejemplos:

- -
-
<p>Usamos <abbr title="Lenguaje de marcado de hipertexto">HTML</abbr> para estructurar nuestros documentos web.</p>
-
-<p>Creo que el <abbr title="Reverendo"">Rev.</abbr> Green lo hizo en la cocina con la motosierra.</p>
-
- -

Estos saldrán con un aspecto similar a este (la expansión aparecerá en una descripción emergente cuando se coloque el cursor sobre el término):

- -

{{EmbedLiveSample('ejemplo-de-abreviaturas-en-vivo', '100%', '94px', '', '', 'hide-codepen-jsfiddle')}}

- -
-

Nota: Hay otro elemento, {{HTMLElement("acronym")}}, que básicamente hace lo mismo que <abbr>, y se diseñó específicamente para acrónimos en lugar de las abreviaturas. Sin embargo, este ha caído en desuso — no era compatible con los navegadores ni con <abbr>, y <abbr> tiene una función tan similar que se consideró inútil conservar ambos. Solo utiliza <abbr>.

-
- -

Aprendizaje activo: Marcar una abreviatura

- -

Para esta simple tarea de aprendizaje activo, nos gustaría que simplemente marcaras una abreviatura. Puedes usar el ejemplo que encontrarás a continuación o reemplazarla por una de tu elección.

- - - -

{{ EmbedLiveSample('Código_reproducible_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}

- -

Marcar la información de contacto

- -

HTML tiene un elemento para marcar la información de contacto — {{HTMLElement("address")}}. Este simplemente envuelve tus datos de contacto, por ejemplo:

- -
<address>
-  <p>Chris Mills, Manchester, The Grim North, Reino Unido</p>
-</address>
- -

También podrías incluir un marcado más complejo y otras formas de información de contacto, por ejemplo:

- -
<address>
-  <p>
-    Chris Mills<br>
-    Manchester<br>
-    The Grim North<br>
-    Reino Unido
-  </p>
-
-  <ul>
-    <li>Tel: 01234 567 890</li>
-    <li>Email: me@grim-north.co.uk</li>
-  </ul>
-</address>
- -

Ten en cuenta que algo como esto también estaría bien, si la página vinculada contuviera la información de contacto:

- -
<address>
-  <p>Página escrita por <a href="../authors/chris-mills/">Chris Mills</a>.</p>
-</address>
- -

Superíndice y subíndice

- -

En ocasiones, necesitarás utilizar superíndice y subíndice al marcar elementos como fechas, fórmulas químicas y ecuaciones matemáticas para que tengan el significado correcto. Los elementos {{HTMLElement("sup")}} y {{HTMLElement("sub")}} se ocupan de ello. Por ejemplo:

- -
<p>Nací el 25<sup>th</sup> de mayo de 2001.</p>
-<p>La fórmula química de la cafeína es C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
-<p>If x<sup>2</sup> es 9, x debe ser igual 3 o -3.</p>
- -

La salida de este código se ve así:

- -

{{ EmbedLiveSample('Superíndice_y_subíndice', '100%', '141px', '', '', 'hide-codepen-jsfiddle') }}

- -

Representación del código informático

- -

Hay una serie de elementos disponibles para marcar código informático usando HTML:

- - - -

Veamos algunos ejemplos. Deberías intentar jugar con estos (intenta obtener una copia de nuestro archivo de ejemplo other-semantics.html):

- -
<pre><code>var para = document.querySelector('p');
-
-para.onclick = function() {
-  alert('¡Guau!, ¡deja de apretar!');
-}</code></pre>
-
-<p>No debes utilizar elementos de presentación como <code>&lt;font&gt;</code> y <code>&lt;center&gt;</code>.</p>
-
-<p>En el ejemplo de JavaScript anterior, <var>para</var> representa un elemento de párrafo.</p>
-
-
-<p>Selecciona todo el texto con <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
-
-<pre>$ <kbd>ping mozilla.org</kbd>
-<samp>PING mozilla.org (63.245.215.20): 56 bytes de datos
-64 bytes de 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
- -

El código anterior se verá así:

- -

{{ EmbedLiveSample('Representación_del_código_informático','100%',300, "", "", "hide-codepen-jsfiddle") }}

- -

Marcar horas y fechas

- -

HTML también proporciona el elemento {{HTMLElement("time")}} para marcar horas y fechas en un formato legible por la máquina. Por ejemplo:

- -
<time datetime="2016-01-20">20 Enero 2016</time>
-
- -

¿Por qué es útil esto? Bueno, hay muchas formas diferentes en que los humanos escriben las fechas. La fecha anterior se podría escribir como:

- - - -

Pero estas diferentes formas no las pueden reconocer fácilmente las computadoras — ¿qué pasaría si quisieras tomar automáticamente las fechas de todos los eventos en una página e insertarlas en un calendario? El elemento {{HTMLElement("time")}} te permite adjuntar una fecha/hora inequívoca y legible por la máquina para este propósito.

- -

El ejemplo básico anterior solo proporciona una fecha simple legible por la máquina, pero hay muchas otras opciones que son posibles, por ejemplo:

- -
<!-- Fecha simple estándar -->
-<time datetime="2016-01-20">20 Enero 2016</time>
-<!-- Solo año y mes -->
-<time datetime="2016-01">Enero 2016</time>
-<!-- Solo mes y día -->
-<time datetime="01-20">20 Enero 2016</time>
-<!-- Solo tiempo, horas y minutos -->
-<time datetime="19:30">19:30</time>
-<!-- ¡También puedes hacer segundos y milisegundos! -->
-<time datetime="19:30:01.856">19:30:01.856</time>
-<!-- Fecha y hora -->
-<time datetime="2016-01-20T19:30">7.30pm, 20 Enero 2016</time>
-<!-- Fecha y hora con desplazamiento de zona horaria -->
-<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 Enero 2016 es 8.30pm en Francia</time>
-<!-- Llamar a un número de semana específico -->
-<time datetime="2016-W04">La cuarta semana de 2016</time>
-
- -

¡Pon a prueba tus habilidades!

- -

Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar más pruebas para verificar que has retenido esta información antes de continuar; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text", "Pon a prueba tus habilidades: Texto HTML avanzado")}}.

- -

Resumen

- -

Esto marca el final de nuestro estudio de la semántica del texto HTML. Ten en cuenta que lo que has visto durante este curso no es una lista exhaustiva de elementos de texto HTML — quisimos tratar de cubrir los aspectos esenciales y algunos de los más comunes que verás en la naturaleza, o al menos podrían resultarte interesantes. Para encontrar muchos más elementos HTML, puedes echarle un vistazo a nuestra {{web.link("/es/docs/Web/HTML/Element", "referencia de elementos HTML")}} (la {{web.link("/es/docs/Web/HTML/Element#Inline_text_semantics", "La sección Semántica de texto en línea")}} sería un gran lugar para comenzar). En el próximo artículo veremos los elementos HTML que usarás para estructurar las diferentes partes de un documento HTML.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}

- -

En este módulo

- - diff --git a/files/es/learn/html/introduccion_a_html/creating_hyperlinks/index.html b/files/es/learn/html/introduccion_a_html/creating_hyperlinks/index.html deleted file mode 100644 index 330bf0d7db..0000000000 --- a/files/es/learn/html/introduccion_a_html/creating_hyperlinks/index.html +++ /dev/null @@ -1,346 +0,0 @@ ---- -title: Crear hipervínculos -slug: Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks -tags: - - Aprender - - CodingScripting - - Guía - - HTML - - HTTP - - Novato - - Principiante - - Title - - URL - - enlace - - hiperenlaces - - hipervínculos - - href - - referencia absoluta - - referencia relativa - - título - - urls -translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
- -

Los hipervínculos (o enlaces) son elementos verdaderamente importantes — son los que hacen que la web sea web. Este artículo expone la sintaxis necesaria para crear un enlace, además contiene un catálogo de buenas prácticas para crearlos.

- - - - - - - - - - - - -
Prerrequisitos:Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "fundamentos de texto HTML")}}.
Objetivo:Aprender a implementar un hipervínculo de forma efectiva y enlazar múltiples archivos.
- -

¿Qué es un hipervínculo?

- -

Los hipervínculos son una de las innovaciones más interesantes que ofrece la Web. Han formado parte de esta desde el principio, pero hacen que la web sea web : Los hipervínculos nos permiten vincular documentos a otros documentos o recursos, vincular a partes específicas de documentos o hacer que las aplicaciones estén disponibles en una dirección web. Prácticamente cualquier contenido web se puede convertir en un enlace que, al pulsarlo (activarlo), dirija el navegador a la dirección web a la que apunta el enlace ({{Glossary("URL")}}).

- -
-

Nota: Una URL puede apuntar a archivos HTML, archivos de texto, imágenes, documentos de texto, archivos de audio o vídeo, y cualquier otra cosa que se pueda mostrar en la web. Si el navegador no sabe cómo manejar el archivo, te preguntará si lo quieres abrir (en cuyo caso la tarea de abrirlo y manejarlo se transferirá a la aplicación nativa instalada en el dispositivo) o si lo quieres descargar (en cuyo caso podrás ocuparte de él más tarde).

-
- -

El sitio web de la BBC, por ejemplo, contiene una gran cantidad de enlaces que apuntan a multitud de noticias en diferentes zonas de el sitio (funcionalidad de navegación), zonas de acceso/registro (herramientas de usuario) y otras.

- -

Portada de bbc.co.uk, que muestra muchas noticias y la funcionalidad del menú de navegación

- -

Anatomía de un enlace

- -

Un enlace básico se crea incluyendo el texto (o cualquier otro contenido, ve {{anch("Convertir bloques de contenido en enlaces")}}), que queramos convertir en un enlace usando un elemento ancla {{HTMLElement("a")}}, dándole un atributo {{HTMLAttrxRef("href", "a")}} (también conocido como «Hypertext Reference», «target» u objetivo) que contendrá la dirección web hacia dónde queremos que apunte el enlace.

- -
<p>Crea un enlace a
-<a href="https://www.mozilla.org/es-ES/">la página de inicio de Mozilla</a>.
-</p>
- -

Este código producirá el siguiente resultado:

- -

Crea un enlace a la página de inicio de Mozilla.

- -

Añadir información de asistencia con el atributo title

- -

Otro atributo que posiblemente quieras agregar a tus enlaces es title. El título contiene información adicional sobre el enlace, como qué tipo de información contiene la página o cosas que debes tener en cuenta en el sitio web.

- -
<p>Crea un enlace a
-<a href="https://www.mozilla.org/es-ES/"
-   title="El mejor lugar para encontrar más información acerca de la misión de Mozilla
-          y cómo contribuir">la página de inicio de Mozilla</a>.
-</p>
- -

Este código producirá el siguiente resultado (el título se mostrará al pasar el ratón sobre el texto del enlace):

- -

Crea un enlace a la página de inicio de Mozilla.

- -
-

Nota: El título de un enlace solo será visible al pasar el ratón por encima, lo cual significa que los usuarios que naveguen usando los controles de sus teclados, o pantallas táctiles, tendrán dificultades para acceder a la información proporcionada por el título. Si la información del título es verdaderamente importante para el uso de la página, deberemos presentar el título de manera que sea accesible a todos los usuarios, por ejemplo incluyéndola como parte del texto del enlace.

-
- -

Aprendizaje activo: crea tu propio ejemplo de enlace

- -

Es momento del aprendizaje activo — crea un documento HTML con tu editor de código (nuestra plantilla de aprendizaje te hará la tarea más llevadera).

- - - -

Convertir bloques de contenido en enlaces

- -

Como hemos mencionado anteriormente, puedes convertir cualquier contenido en un enlace, incluso {{web.link("/es/docs/Learn/HTML/Getting_started#Elementos_de_bloque_y_elementos_en_línea", "Elementos de bloque y elementos en línea")}}. Si quieres convertir una imagen en un enlace, simplemente usa el elemento {{HTMLElement("a")}} encerrando el elemento {{HTMLElement("img")}} entre <a> y </a>.

- -
<a href="https://www.mozilla.org/es-ES/">
-  <img src="mozilla-image.png" alt="Logotipo de Mozilla que dirige a la página inicial de Mozilla">
-</a>
- -
-

Nota: Encontrarás mucho más sobre el manejo de imágenes en próximos artículos en esta web.

-
- -

Primer acercamiento a URLs y rutas

- -

Para comprender completamente a dónde apuntan los enlaces, necesitas conocer las URLs y las rutas. En esta sección encontrarás la información que necesitas sobre el tema.

- -

Una localizadora uniforme de recursos (URL, de las iniciales en inglés de «Uniform Resource Locator») es simplemente una secuencia de caracteres de texto que definen donde está situado algo en la web. Por ejemplo, la página de Mozilla está ubicada en https://www.mozilla.org/es-ES/.

- -

Las URLs utilizan rutas para encontrar los archivos. Las rutas especifican dónde se encuentra el archivo que buscas dentro del sistema de archivos. Veamos un ejemplo de una estructura de directorios (ve el directorio creating-hyperlinks).

- -

Una estructura de directorios simple. El directorio principal se llama creating-hyperlinks y contiene dos archivos llamados index.html y contacts.html, y dos directorios llamados projects y pdfs, que contiene un archivo index.html y un archivo project-brief.pdf, respectivamente

- -

Al directorio raíz de esta estructura de directorios lo hemos llamado creating-hyperlinks. Al trabajar en modo local en una web, habrá un directorio que contendrá toda la información. En nuestro ejemplo, dentro de la raíz, encontramos el archivo index.html y el archivo contacts.html. En una web real, index.html es el punto de entrada a la web, lo que se conoce como página de inicio.

- -

Observamos también dos directorios dentro de nuestro directorio raíz que son: pdfs y projects. Cada uno de ellos tiene archivos en su interior — un archivo PDF (project-brief.pdf) y un archivo index.html, respectivamente. Observa que es posible tener sin problemas dos archivos index.html en un proyecto siempre y cuando se encuentren alojados en ubicaciones diferentes de nuestra estructura de archivos — muchos sitios web lo hacen. El segundo index.html será la página de inicio para la información relativa a los proyectos.

- - - -
-

Nota: Podemos combinar más de una instancia de estas características y generar URLs más complejas, si es necesario, por ejemplo: ../../../ruta/compleja/a/mi/archivo.html.

-
- -

Fragmentos de documento

- -

Es posible apuntar hacia una parte concreta de un documento HTML en vez de a todo un documento. Para ello hay que asignar previamente un atributo {{HTMLAttrxRef("id")}} al elemento hacia el que apuntamos. Esto se debe hacer en el encabezado y quedará así:

- -
<h2 id="Dirección_de_envío">Dirección de envío</h2>
- -

Posteriormente para hacer referencia a este id concreto, lo añadiremos al final de la URL precedido por una almohadilla — veamos el ejemplo:

- -
<p>¿Quieres mandarnos una carta? Aquí tienes nuestra <a href="contacts.html#Dirección_de_envío">Dirección de envío</a>.</p>
- -

También podemos usar esta referencia a un fragmento de documento para apuntar hacia otra parte del mismo documento:

- -
<p>La <a href="#Dirección_de_envío">Dirección de envío de la empresa</a> se encuentra al final de esta página.</p>
- -

URLs absolutas y relativas

- -

Dos términos que encontrarás en la Web son URL absoluta y URL relativa:

- -

URL absoluta: Hace referencia a una dirección definida por su ubicación absoluta en la web, esta incluye el {{Glossary("protocol", "protocolo")}} y el {{Glossary("domain name", "nombre del dominio")}}. Por ejemplo, si subes una página de inicio index.html a un directorio llamado projects que se encuentra dentro de la raíz de un servidor web, y el dominio del sitio web es http://www.example.com, se podrá acceder a la página desde http://www.example.com/projects/index.html (o simplemente http://www.example.com/projects/, ya que la mayoría de los servidores web buscan la página de inicio index.html para cargarla por omisión si no se les especifica otra en la URL).

- -

Una URL absoluta siempre apuntará a la misma dirección, sin importar desde dónde se utilice.

- -

Una URL relativa: Hace referencia a una dirección que depende de la posición del archivo desde donde se utiliza — son las que vimos en la sección anterior. Por ejemplo, si desde un archivo ubicado en http://www.example.com/projects/index.html queremos enlazar hacia un archivo PDF ubicado en el mismo directorio, la URL sería simplemente el nombre del archivo (por ejemplo: project-brief.pdf) no necesitamos más información. Si el archivo PDF está situado en un subdirectorio dentro de projects llamado pdfs, la URL relativa es: pdfs/project-brief.pdf (la URL absoluta equivalente sería: http://www.example.com/projects/pdfs/project-brief.pdf).

- -

Una URL relativa hará referencia a diferentes direcciones según dónde se encuentre el archivo desde el cual se utiliza — por ejemplo, si movemos nuestro archivo index.html del directorio projects a la raíz del sitio web (el nivel más alto, no cualquiera de los otros directorios), la URL relativa pdfs/project-brief.pdf ahora hará referencia a http://www.example.com/pdfs/project-brief.pdf, en lugar de a http://www.example.com/projects/pdfs/project-brief.pdf.

- -

Por supuesto, la ubicación del archivo pdfs/project-brief.pdf y del directorio pdfs no cambian de repente cuando mueves el archivo index.html; esto hará que tus enlaces apunten a un sitio equivocado y no funcionarán correctamente al hacer clic en ellos. ¡Por lo tanto debes tener cuidado!

- -

Buenas prácticas en el uso de los enlaces

- -

Hay algunas buenas prácticas que debemos respetar cuando escribimos enlaces. Veamos cuáles son.

- - - -

Redacción clara del enlace

- -

Es fácil rellenar de enlaces una página, sin más. Pero esto no basta. Hay que lograr que nuestros enlaces sean accesibles para todo tipo de lectores, sin importar el contexto o las herramientas que prefieran. Por ejemplo:

- - - -

Veamos un ejemplo concreto:

- -

Buen texto en un enlace: Descargar Firefox

- -
<p><a href="https://firefox.com/">
-  Descargar Firefox
-</a></p>
- -

Mal texto en un enlace: Pulsar aquí para descargar Firefox

- -
<p><a href="https://firefox.com/">
-  Haz clic aquí
-</a>
-para descargar Firefox</p>
-
- -

Otras indicaciones:

- - - -

Utiliza enlaces relativos siempre que sea posible

- -

A partir de las indicaciones anteriores podemos llegar a pensar que es mejor utilizar referencias absolutas en todos los casos; después de todo, estas no se rompen cuando la página se traslada como ocurre con las referencias relativas. Sin embargo, debes utilizar enlaces relativos siempre que sea posible cuando enlaces a otras ubicaciones dentro del mismo sitio web. Cuando vinculas a otro sitio web, deberás utilizar un vínculo absoluto.

- - - -

Indica claramente los recursos no HTML

- -

Cuando damos referencias a recursos para descargarlos (como documentos en formato PDF o Word) o para reproducirlos (como archivos de audio o vídeo) o que tengan un efecto inesperado (una ventana emergente) hay que indicarlo para no confundir al usuario.

- -

Por ejemplo:

- - - -

Veamos algunos ejemplos, para ver qué texto puede ser aconsejable en estos casos:

- -
<p><a href="http://www.example.com/large-report.pdf">
-  Descarga el informe de ventas (PDF, 10MB)
-</a></p>
-
-<p><a href="http://www.example.com/video-stream/">
-  Reproduce el vídeo (el flujo de datos se abre en una pestaña independiente, calidad HD)
-</a></p>
-
-<p><a href="http://www.example.com/car-game">
-  Juega al juego del automóvil (requiere Flash)
-</a></p>
- -

Utiliza el atributo download al enlazar una descarga

- -

Si queremos hacer referencia a una descarga en lugar de a algo que abra el navegador, disponemos del atributo download para proporcionar un nombre predeterminado al archivo a guardar. Veamos un ejemplo con un enlace a la descarga de la versión para Windows de Firefox:

- -
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=es-MX"
-   download="firefox-latest-64bit-installer.exe">
-  Descarga la última versión de Firefox para Windows (64 bits) (Español, es-MX)
-</a>
- -

Aprendizaje activo: crear un menú de navegación

- -

Para este ejercicio, deberás crear lo que se conoce como web multipágina: un menú de navegación con enlaces a distintas páginas. Esta es una manera común de crear páginas web — usamos la misma estructura en todas las páginas, incluida la que contiene el menú de navegación. Cuando los usuarios pulsen los enlaces tendrán la sensación de que están en la misma página y que solo cambia el contenido mostrado.

- -

Tendrás que hacer copias locales, en el mismo directorio, de las cuatro siguientes páginas (revisa el directorio navigation-menu-start para el listado completo):

- - - -

A continuación:

- -
    -
  1. Añade una lista no ordenada en el lugar adecuado de la página, que contenga los nombres de las páginas a las que enlazas. Un menú de navegación normalmente es una lista de enlaces (links), por lo que esto es semánticamente correcto.
    2. -
  2. Convierte cada nombre en un enlace a esa página.
    3. -
  3. Copia el menú de navegación en cada una de las páginas.
    4. -
  4. En cada página, elimina solo el enlace que hace referencia a sí mismo (es confuso y no tiene sentido que una página se llame a sí misma, y la falta del enlace actúa como recordatorio de la página en la que se está en cada momento).
    5. -
- -

El ejercicio terminado debería crear una página como la siguiente:

- -

Un ejemplo de un menú de navegación HTML simple, con inicio, imágenes, proyectos y elementos del menú social

- -
-

Nota: Si ahora encallas, o no estás seguro de haberlo conseguido, revisa el directorio navigation-menu-marked-up para ver la respuesta correcta.

-
- -

Enlace a correo electrónico

- -

Es posible crear enlaces o botones que, cuando se pulsan, abren un nuevo correo saliente en lugar de enlazar a un recurso o página. Esto se consigue con el elemento ancla {{HTMLElement("a")}} y el elemento mailto: seguido del esquema de la URL.

- -

En su forma más básica, un enlace mailto: simplemente contiene la dirección de correo electrónico de los destinatarios. Por ejemplo:

- -
<a href="mailto:nowhere@mozilla.org">Enviar correo electrónico a ninguna parte</a>
-
- -

Esto da como resultado un enlace que se ve así: Enviar correo electrónico a ninguna parte.

- -

De hecho, incluso el atributo con la dirección de correo electrónico es opcional. Si lo omites y tu ({{HTMLAttrxRef("href", "a")}} simplemente es "mailto:", aparecerá una nueva ventana de correo saliente en el gestor de correo sin la dirección del destinatario. Esto es útil cuando queremos compartir enlaces que los usuarios puedan pulsar para enviar un correo electrónico y elegir un destinatario posteriormente.

- -

Especificar detalles

- -

Además de la dirección de correo electrónico, puedes proporcionar otra información. De hecho, puedes incluir cualquier campo estándar contenido en el encabezado de cualquier mensaje en la URL mailto que proporciones. Los más utilizados son el «subject» (asunto), «cc» (con copia a) o «bcc» (copia oculta), y «body» (cuerpo del mensaje, que no es realmente un campo de la cabecera, pero permite especificar un mensaje breve para el nuevo correo electrónico). Cada campo y su valor se especifican como un argumento de la consulta.

- -

Veamos un ejemplo que incluye estos campos:

- -
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
-  Enviar un correo electrónico cc, bcc, asunto y cuerpo
-</a>
- -
-

Nota: Los valores de cada campo deben tener la URL codificada, es decir, sin caracteres no imprimibles (caracteres invisibles, tabulaciones, retornos de carro y saltos de página) y espacios con codificación porcentual (%20) {{Interwiki("wikipedia", "Código porciento")}}. También hay que tener en cuenta el uso del signo de interrogación (?) para separar la URL principal de los valores de los campos, y el símbolo ampersand (&) para separar cada campo dentro del enlace mailto:. Esta es la notación de consulta URL estándar. Lee {{web.link("/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method", "el método GET")}} para comprender mejor qué notación de consulta URL se usa comúnmente.

-
- -

A continuación otros ejemplos de utilización de enlaces mailto:

- - - -

¡Pon a prueba tus habilidades!

- -

Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encuentra más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links", "Pon a prueba tus habilidades: Enlaces")}}.

- -

Resumen

- -

Eso es todo en cuanto a enlaces, ¡por ahora! Volveremos a ellos más tarde en este curso cuando comencemos a usar estilos. Lo siguiente en HTML, será aprender la semántica de texto para usar algunas características avanzadas/inusuales que nos serán utilidad — Formato de texto avanzado será la próxima parada.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

- -

En este módulo

- - diff --git a/files/es/learn/html/introduccion_a_html/debugging_html/index.html b/files/es/learn/html/introduccion_a_html/debugging_html/index.html deleted file mode 100644 index 114b93ff0f..0000000000 --- a/files/es/learn/html/introduccion_a_html/debugging_html/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Depurar el HTML -slug: Learn/HTML/Introduccion_a_HTML/Debugging_HTML -tags: - - Error - - Guía - - HTML - - Principiante - - Validación - - Validador - - depurar - - programar -translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
- -

Escribir HTML es fácil, pero ¿qué pasa si algo va mal y desconocemos dónde está el error de codificación? En este artículo veremos varias herramientas que nos ayudarán a arreglar errores en HTML.

- - - - - - - - - - - - -
Prerrequisitos:Estar familiarizado con los principios básicos de HTML, como los vistos en el apartado Empezar con el HTML, Conocimientos básicos de aplicación de formato a textos con HTML y Creación de hiperenlaces.
Objetivo:Aprender el funcionamiento básico de las herramientas de depuración de problemas de código en HTML.
- -

Depurar no debe asustarnos

- -

Cuando escribimos cualquier tipo de código, normalmente todo va bien, hasta ese fatídico momento en el que ocurre un error, hemos hecho algo mal y el código no funciona, o no funciona del todo, no lo suficientemente bien. Por ejemplo, el dibujo siguiente muestra un error de {{glossary("compile","compilación")}} de un programa sencillo escrito en lenguaje Rust.

- -

A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.En el ejemplo, el mensaje de error es fácilmente comprensible: "unterminated double quote string" (comillas sin cerrar en el texto). Si analizamos el listado de código, observamos que en println!(Hello, world!"); faltan una comillas. Pero, los mensajes de error pueden complicarse con facilidad y su interpretación ser menos sencilla a medida que los programas aumentan en tamaño, e incluso casos sencillo pueden llegar a intimidar a alguien que no sabe nada de Rust.

- -

Sin embargo, la depuración no nos debe asustar; la clave para sentirnos cómodos con la escritura y la depuración de cualquier lenguaje o código es la familiaridad, tanto con el lenguaje como con las herramientas.

- -

HTML y depuración

- -

HTML no es tan complicado de entender como Rust; HTML no se compila por separado antes de que el navegador lo analice (se interpreta, no se compila). Y la sintaxis de los {{glossary("element","elementos")}} de HTML es mucho más sencilla de entender que la de cualquier lenguaje de programación real como Rust, {{glossary("JavaScript")}} o {{glossary("Python")}}. La forma en que los navegadores ejecutan HTML es más permisiva que la de los otros lenguajes, cosa que es buena y mala a la vez.

- -

Código permisivo

- -

¿Qué queremos decir con permisivo? Bien, normalmente cuando hacemos algo mal al codificar, suele haber dos tipos de error:

- - - -

HTML en sí mismo no suele producir errores sintácticos porque los navegadores son permisivos con ellos; o sea, el código se sigue ejecutando ¡aun si hay errores! Los navegadores disponen de reglas internas para saber cómo interpretar los errores de marcado incorrecto que encuentran, y seguirán funcionando aunque no produzcan el resultado esperado. Esto puede también ser un problema, por supuesto.

- -
-

Nota: La ejecución de HTML es permisiva porque cuando se creó la web por primera vez, se decidió que el hecho de permitir que la gente publicara su contenido era más importante que el hecho de que la sintaxis fuera totalmente correcta. La web no sería tan popular como lo es hoy en día si se hubiera sido más estricto desde el primer momento.

-
- -

Aprendizaje activo: Estudio del código permisivo

- -

Es hora de estudiar la naturaleza permisiva del código HTML por nosotros mismos.

- -
    -
  1. En primer lugar, hagamos una copia de nuestro ejemplo-demo a depurar y guardémoslo de forma local. Está escrito para generar diversos errores que deberemos descubrir (se dice que el marcado de HTML está mal formado, en contraposición a un marcado bien formado).
    2. -
  2. A continuación, abrámoslo en un navegador; veremos lo siguiente:A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes.
    3. -
  3. No parece que esté bien; veamos el código fuente para ver qué podemos hacer (solo mostramos el contenido del <body>): - 
    <h1>HTML debugging examples</h1>
-
-<p>What causes errors in HTML?
-
-<ul>
-  <li>Unclosed elements: If an element is <strong>not closed properly,
-      then its effect can spread to areas you didn't intend
-
-  <li>Badly nested elements: Nesting elements properly is also very important
-      for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
-      what is this?</em>
-
-  <li>Unclosed attributes: Another common source of HTML problems. Let's
-      look at an example: <a href="https://www.mozilla.org/>link to Mozilla
-      homepage</a>
-</ul>
    -
    4. -
  4. Veamos qué problemas podemos descubrir: -
      -
    • El elemento {{htmlelement("p")}} y el {{htmlelement("li")}} no tienen etiquetas de cierre. Si comprobamos el resultado, no parece que haya generado un efecto grave en la representación del lenguaje de marcado, porque es fácil deducir que donde un elemento acaba, debería comenzar otro.
      • -
    • El primer elemento {{htmlelement("strong")}} no tiene etiqueta de cierre. Este resulta ser un poco más problemático porque no es fácil deducir dónde se supone que termina el elemento. De hecho, el énfasis fuerte se ha aplicado al resto del texto.
      • -
    • Esta sección está mal anidada: <strong>strong <em>strong emphasised?</strong> what is this?</em>. No es fácil de explicar la forma en que ha sido interpretado, debido al problema anterior.
      • -
    • Al valor del atributo {{htmlattrxref("href","a")}} le faltan las comillas de cierre. Esto parece haber causado el problema más grave: el enlace ha desaparecido totalmente.
      • -
    -
    5. -
  5. Ahora veamos lo que el navegador ha mostrado en contraposición al código fuente. Para ello podemos usar las herramientas de desarrollo del navegador. Si no estamos familiarizados con el uso de estas herramientas, echemos un vistazo rápido a Descubrir las herramientas de desarrollo del navegador, y luego continuaremos.
    6. -
  6. En el inspector de objetos (DOM), puedes comprobar la apariencia de cada elemento: The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.
    7. -
  7. Vamos a explorar nuestro código en detalle con el inspector de objetos DOM para ver cómo el navegador ha arreglado nuestros errores de código HTML (lo hemos hecho con Firefox; otros navegadores modernos deberían conducir al mismo resultado): -
      -
    • Se han añadido etiquetas de cierre a los párrafos y las líneas de las listas.
      • -
    • Al no estar claro el final del elemento <strong>, el navegador lo ha aplicado individualmente a todos los bloques de texto siguientes, a cada uno le ha añadido su etiqueta strong propia, desde donde está ¡hasta el final del documento!
      • -
    • El navegador ha arreglado el anidamiento incorrecto del modo siguiente: - 
      <strong>strong
-  <em>strong emphasised?</em>
-</strong>
-<em> what is this?</em>
      -
      • -
    • El enlace a cuyo atributo le faltan las comillas del final ha sido ignorado. La última lista la ha dejado como sigue: - 
      <li>
-  <strong>Unclosed attributes: Another common source of HTML problems.
-  Let's look at an example: </strong>
-</li>
      -
      • -
    -
    8. -
- -

Validación HTML

- -

Con el ejemplo anterior podemos asegurarnos de que nuestro HTML está bien formado, pero ¿cómo? En el ejemplo siguiente podemos comprobar que es bastante fácil buscar entre las líneas y encontrar los errores en documentos pequeños; pero, ¿qué pasa cuando trabajamos con documentos HTML grandes y complejos?

- -

La mejor estrategia es comenzar por pasar tu página HTML por el servicio de validación de etiquetas; fue creado y está mantenido por el W3C, organización que se encarga de definir las especificaciones de HTML, CSS y otras tecnologías web. Esta página web toma un documento HTML como entrada, lo procesa, y genera un informe de dónde están los errores en el documento.

- -

The HTML validator homepage

- -

Para validar el HTML, podemos proporcionar al validador una dirección web a la que apuntar, subirle un archivo HTML, o directamente introducirle el código HTML que queremos que revise.

- -

Aprendizaje activo: Validación de un documento HTML

- -

Vamos a probar de validar nuestro documento ejemplo.

- -
    -
  1. Primero, cargamos el servicio de validación en una pestaña del navegador, si no lo tenemos ya.
    2. -
  2. Hacemos clic en la subpestaña Validate by Direct Input.
    3. -
  3. Copiamos el código del documento ejemplo (no solo el body) y lo pegamos en el cuadro de texto grande.
    4. -
  4. Hacemos clic en el botón Check.
    5. -
- -

Esto debería proporcionar una lista de errores y otras informaciones:

- -

A list of of HTML validation results from the W3C markup validation service

- -

Interpretación de los mensajes de error

- -

La lista de mensajes de error que nos presenta el validador suele ayudar, pero a veces, no resultan muy útiles; con un poco de práctica aprenderemos a interpretar la lista para arreglar nuestro código. Veamos los mensajes de error y su significado. Observamos que cada mensaje se presenta con un número de línea y de columna, para ayudar a localizar el error más fácilmente.

- - - -

No debemos preocuparnos si no podemos corregir todos los mensajes de error; es práctico tratar de arreglar unos pocos errores cada vez y volver a pasar el validador para ver los que quedan. A veces, al arreglar unos cuantos se arreglan automáticamente otros muchos; con frecuencia muchos errores los causa uno solo en un efecto dominó.

- -

Sabremos  que todos los errores están arreglados cuando veamos el mensaje siguiente:

- -

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

- -

Resumen

- -

Pues hasta aquí una introducción al depurado de HTML, que nos proporcionará habilidades para cuando comencemos a depurar CSS, JavaScript y otros lenguajes más adelante en nuestros trabajos. Este apartado también constituye el final de la introducción al módulo de artículos de aprendizaje de HTML; ahora podemos hacer los test de prueba: el primero de los cuales está en el enlace siguiente.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/es/learn/html/introduccion_a_html/estructura/index.html b/files/es/learn/html/introduccion_a_html/estructura/index.html deleted file mode 100644 index 1f5f1e315c..0000000000 --- a/files/es/learn/html/introduccion_a_html/estructura/index.html +++ /dev/null @@ -1,298 +0,0 @@ ---- -title: Estructura web y documentación -slug: Learn/HTML/Introduccion_a_HTML/estructura -tags: - - CodingScripting - - Composición - - Diseño - - Formato - - Guía - - HTML - - Presentación - - Principiante - - Sitio - - Sitio Web - - bloques - - pagina - - programar - - semántica -translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -

Además de definir partes individuales de tu página (como un párrafo o una imagen), {{Glossary("HTML")}} también dispone de elementos de bloque que se pueden utilizar para estructurar las distintas áreas de tu sito web (tal como el encabezado, el menú de navegación o la parte del contenido principal. En este artículo veras cómo planificar una estructura básica de página web y escribirás el HTML que representa esa estructura.

- - - - - - - - - - - - -
Prerrequisitos:Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}. Funcionamiento de los hipervínculos, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}.
Objetivo:Aprender a estructurar tu documento usando atributos semánticos y construir la estructura de una página web sencilla.
- -

Partes básicas de un documento

- -

Las páginas web pueden y se deben diferenciar las unas de las otras, pero todas tienden a contener elementos comunes parecidos, a menos que estén destinadas a mostrar un vídeo o un juego a pantalla completa, o que formen parte de un proyecto artístico concreto o, simplemente, que estén mal estructuradas; estos elementos comunes son:

- -
-
encabezado:
-
Normalmente formado por una gran franja que cruza la parte superior de la página con un gran título, un logotipo y quizás un lema. Esta parte suele permanecer invariable mientras navegas entre las páginas de un mismo sitio web.
-
barra de navegación:
-
Son los enlaces a las secciones principales del sitio web. Normalmente está formada por un menú con botones, enlaces o pestañas. Al igual que el encabezado, este contenido suele permanecer invariable en las diferentes páginas del sitio; tener un menú inconsistente en tu página web conducirá a los usuarios a la confusión y frustración. Muchos diseñadores web consideran que el menú de navegación forma parte del encabezado y que no posee un componente individual, aunque no es necesario que sea así; de hecho, algunos argumentan que tener ambos componentes por separado es mejor por motivos de {{web.link("/es/docs/Learn/Accessibility", "accesibilidad")}} porque los lectores de pantalla pueden leer mejor ambos elementos si están separados.
-
contenido principal:
-
Es la gran parte central de la página y contiene la mayor parte del contenido particular de una página web concreta; por ejemplo, el video que quieres ver, la narración que quieres leer, el mapa que quieres consultar, los titulares de las noticias, etc. ¡Esta es la parte que definitivamente debe variar mucho de una página a otra de tu sitio web!
-
barra lateral:
-
Suele incluir algún tipo de información adicional, enlaces, citas, publicidad, etc. Normalmente está relacionada con el contenido principal de la página (por ejemplo, en una página de noticias, la barra lateral podría contener la biografía del autor o enlaces a artículos relacionados), pero en otras ocasiones encontraras elementos recurrentes como un menú de navegación secundario.
-
pie de página:
-
Es la parte inferior de la página, que generalmente contiene la letra pequeña, el copyright o la información de contacto. Es el sitio donde se coloca la información común (al igual que en el encabezado), pero esta información no suele ser tan importante o es secundaria con respecto a la página en sí misma. El pie también se suele usar para propósitos {{Glossary("SEO")}}, e incluye enlaces de acceso rápido al contenido más popular.
-
- -

Una página web «típica» se podría parecer a esta:

- -

Un ejemplo de estructura de sitio web simple con un encabezado principal, menú de navegación, contenido principal, barra lateral y pie de página.

- -

HTML para dar estructura al contenido

- -

El ejemplo no es muy atractivo, pero puede servir para ilustrar un ejemplo de diseño de una página web típica. Puedes encontrar sitios con más columnas, algunas mucho más complejas, pero esta servirá para hacerte una idea general sobre el tema. Con el CSS adecuado podrás usar muchos más elementos para decorar las distintas secciones y conseguir que queden como deses, pero como se comentó anteriormente, necesitas respetar ciertas normas semánticas, y utilizar el elemento adecuado para cada tipo de sección.

- -

La parte visual no lo es todo. Utilizarás diferentes fuentes y colores para llamar la atención de los usuarios sin discapacidad visual de las partes más importantes del contenido, como el menú de navegación y sus enlaces correspondientes, pero ¿qué ocurre con los usuarios con discapacidad visual que no pueden distinguir los colores llamativos o el tamaño grande de las fuentes?

- -
-

Nota: Los daltónicos representan alrededor del 4% de la población mundial (aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres son daltónicos). Los invidentes y las personas con discapacidad visual representan aproximadamente el 4-5% de la población mundial (en 2012 había {{Interwiki("wikipedia", "Discapacidad visual")}} 285 millones de personas con alguna de estas características en el mundo, mientras que el total de la población estaba {{Interwiki("wikipedia", "World_human_population#/media/File:World_population_history.svg", "alrededor de los 7,000 millones")}}.

-
- -

En tu código HTML puedes crear secciones de contenido basadas en su funcionalidad — puedes usar elementos que representen sin ambigüedad las diferentes secciones de contenido descritas, de forma que las tecnologías de accesibilidad y los lectores de pantalla puedan reconocer esos elementos y asistir en tareas como «encontrar el menú de navegación», o «encontrar el contenido principal». Como se mencionó anteriormente en el curso, hay una serie de {{web.link("/es/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Por_qué_necesitamos_estructura", "consecuencias por no usar la estructura de elementos y semántica adecuada para hacer el trabajo correctamente")}}.

- -

HTML dispone de etiquetas adecuadas que puedes usar para establecer estas secciones semánticas, por ejemplo:

- - - -

Aprendizaje activo: El código del ejemplo anterior

- -

El ejemplo de página web que se muestra arriba se consigue a partir del siguiente código (disponible en el repositorio Github). Observa el ejemplo anterior, y a continuación échale un vistazo al código de abajo para identificar las secciones marcadas en el ejemplo.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-
-    <title>El título de mi página</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="style.css">
-
-    <!-- las tres siguientes líneas son un truco para obtener elementos semánticos de HTML5 que funcionan en versiones de Internet Explorer antiguas -->
-    <!--[if lt IE 9]>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
-    <![endif]-->
-  </head>
-
-  <body>
-    <!-- Aquí empieza el encabezado principal que se mantendrá en todas las páginas del sitio web -->
-
-    <header>
-      <h1>Encabezado</h1>
-    </header>
-
-    <nav>
-      <ul>
-        <li><a href="#">Inicio</a></li>
-        <li><a href="#">Nuestro equipo</a></li>
-        <li><a href="#">Proyectos</a></li>
-        <li><a href="#">Contacto</a></li>
-      </ul>
-
-       <!-- Un formulario de búsqueda es una forma no-lineal de hacer búsquedas en un sitio web. -->
-
-       <form>
-         <input type="search" name="q" placeholder="Buscar">
-         <input type="submit" value="¡Vamos!">
-       </form>
-     </nav>
-
-    <!-- Aquí está el contenido principal de nuestra página -->
-    <main>
-
-      <!-- Contiene un artículo -->
-      <article>
-        <h2>Título del artículo</h2>
-
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
-
-        <h3>Subsección</h3>
-
-        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
-
-        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
-
-        <h3>Otra subsección</h3>
-
-        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
-
-        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
-      </article>
-
-      <!-- el contenido aparte también se puede anidar dentro del contenido principal -->
-      <aside>
-        <h2>Relacionado</h2>
-
-        <ul>
-          <li><a href="#">Oh, me gusta estar junto al mar</a></li>
-          <li><a href="#">Oh, me gusta estar junto al mar</a></li>
-          <li><a href="#">Aunque en el norte de Inglaterra</a></li>
-          <li><a href="#">Nunca deja de llover</a></li>
-          <li><a href="#">Oh, bueno...</a></li>
-        </ul>
-      </aside>
-
-    </main>
-
-    <!-- Y aquí está nuestro pie de página principal que se utiliza en todas las páginas de nuestro sitio web -->
-
-    <footer>
-      <p>©Copyright 2050 de nadie. Todos los derechos revertidos.</p>
-    </footer>
-
-  </body>
-</html>
- -

Tómate tu tiempo para revisar el código y comprenderlo — Los comentarios en el código también te ayudarán a entenderlo. No te pedimos que hagas mucho más en este artículo, porque la clave para entender el diseño del documento es escribir una estructura HTML conocida y posteriormente desarrollar su apariencia con CSS. Estudiaremos el diseño CSS como parte del tema CSS.

- -

Elementos de diseño HTML en detalle

- -

Es bueno entender el significado global de todos los elementos definitorios de las secciones HTML en detalle; es algo en que trabajarás gradualmente a medida que comiences a tener más experiencia en el desarrollo web. En el enlace {{web.link("/es/docs/Web/HTML/Element", "referencia de elementos HTML")}} podemos entrar en un gran nivel de detalle. Por el momento, estas son las definiciones principales que deberíamos tratar de entender:

- - - -

Envolturas no semánticas

- -

A veces hay situaciones en las que no encuentras un elemento semántico adecuado para agrupar ciertos elementos o englobar cierto contenido. Podrías querer agrupar ciertos elementos para referirte a ellos como una entidad que comparta cierto {{Glossary("CSS")}} o {{Glossary("JavaScript")}}. Para casos como esos, HTML dispone del elemento {{HTMLElement("div")}} y del elemento {{HTMLElement("span")}}. Preferentemente estos elementos se deberán utilizar con sus atributos ({{HTMLAttrxRef('class')}}), para conferirles algún tipo de etiquetado que permita determinarlos con facilidad.

- -

{{HTMLElement("span")}} es un elemento no-semántico que se utiliza en el interior de una línea. Se utiliza cuando no se nos ocurre el uso de ningún otro elemento semántico de texto en el que incluir el contenido, o si no se desea añadir ningún significado específico. Por ejemplo:

- -
<p>El rey volvió ebrio a su habitación alrededor de la 01:00, y sin duda la cerveza no le ayudaba
-cuando cruzó tambaleante la puerta <span class="editor-note">[nota del editor: en este instante de la
-representación, deberían atenuarse las luces]</span>.</p>
- -

En este caso, la nota del editor solo proporciona información extra para el director de la obra; se supone que estos elementos no incluyen contenido extra importante. Para los usuarios sin discapacidad visual, quizás debamos usar CSS para diferenciar sutilmente estas notas del texto principal.

- -

{{HTMLElement("div")}} es un elemento de bloque no-semántico; lo utilizaras cuando no se te ocurra el uso de otro elemento semántico mejor, o si no deseas añadir ningún significado concreto. Por ejemplo, imagina un carrito de compras que puedes pulsar en cualquier momento durante tu estancia en una tienda virtual:

- -
<div class="shopping-cart">
-  <h2>Carrito de compras</h2>
-  <ul>
-    <li>
-      <p><a href=""><strong>Pendientes de plata</strong></a>: $99.95.</p>
-      <img src="../products/3333-0985/" alt="Pendientes de plata">
-    </li>
-    <li>
-      ...
-    </li>
-  </ul>
-  <p>Importe total: $237.89</p>
-</div>
- -

Este no es un elemento lateral (<aside>) porque no necesariamente está relacionado con el contenido principal de la página (en realidad quieres que se pueda ver desde cualquier página). Ni siquiera se puede incluir en una sección (<section>) porque su contenido no forma parte del contenido principal de la página. Por lo tanto, un elemento <div> es el adecuado en este caso. Hemos incluido un encabezado para indicar a los lectores de pantalla donde van a encontrarlo.

- -
-

Atención: Los elementos div son tan prácticos y simples que es fácil usarlos en exceso. Como no conllevan valor semántico, enmarañan el código HTML. Debemos tener cuidado de usarlos solo cuando no halles una solución mejor y reducir su uso al mínimo, porque de otro modo complicarás el mantenimiento y actualización de los documentos.

-
- -

Saltos de línea y líneas horizontales

- -

Dos elementos que debes conocer y utilizarás ocasionalmente son {{HTMLElement("br")}} y {{HTMLElement("hr")}}:

- -

El elemento {{HTMLElement("br")}} genera un salto de línea en un párrafo; es la única manera de representar series de líneas cortas, como una dirección postal o un poema. Por ejemplo:

- -
-
<p>Había una vez un hombre llamado O'Dell<br>
-A quién le encantaba escribir HTML<br>
-Pero su estructura era mala, su semántica era triste<br>
-y su marcado no se interpretó muy bien.</p>
-
- -

Sin el elemento {{HTMLElement("br")}}, todo el párrafo se habría presentado como una sola línea larga (como ya hemos dicho con anterioridad en este curso, {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Los_espacios_en_blanco_en_HTML", "HTML ignora la mayoría del espacio en blanco")}}); con estos elementos {{HTMLElement("br")}} en el código, las líneas quedan:

- -

{{EmbedLiveSample('line-break-live-sample', '100%', '125px', '', '', 'hide-codepen-jsfiddle')}}

- -

Los elementos {{HTMLElement("hr")}} generan una regla horizontal en el documento que denota un cambio en la temática del texto (como un cambio de tema o de escena). Visualmente tiene el aspecto de una línea horizontal. Por ejemplo:

- -
-
<p>Ron fue acorralado en una esquina por las bestias abisales que merodeaban. Asustado, pero decidido a proteger a sus amigos, levantó su varita y se preparó para la batalla, con la esperanza de que su llamada de socorro hubiera llegado a alguien.</p>
-<hr>
-<p>Mientras tanto, Harry estaba sentado en su casa, mirando su declaración de regalías y pensando en cuándo saldría la próxima serie derivada, cuando de pronto voló por su ventana una carta de socorro y aterrizó en su regazo. La leyó vagamente y suspiró; "Será mejor que vuelva al trabajo entonces", reflexionó.</p>
-
- -

Quedará así:

- -

{{EmbedLiveSample('Ejemplo_en_vivo_línea_horizontal', '100%', '185px', '', '', 'hide-codepen-jsfiddle')}}

- -

Planificación de una página web sencilla

- -

Una vez has planificado el contenido de una página web sencilla, el paso lógico siguiente es intentar trabajar en el contenido para todo el sitio web, las páginas que necesitas y la forma de disponer las conexiones entre ellas para producir la mejor experiencia de usuario a los visitantes. Esto se conoce con el nombre de ({{Glossary("Arquitectura de la información")}}). Una web grande y compleja necesitará mucha planificación, pero para una web sencilla compuesta por unas cuantas páginas, el proceso puede ser sencillo, ¡y divertido!.

- -
    -
  1. Ten en cuenta que habrá varios elementos comunes en muchas (si no en todas las) páginas, tal como el menú de navegación y el contenido del pie de página. Si la web está dedicada a un negocio, por ejemplo, sería una buena idea disponer de la información de contacto en el pie de página en todas las páginas. Anota lo que deseas tener en común en cada página. las características comunes del sitio de viajes para ir en cada página: título y logotipo, contacto, derechos de autor, términos y condiciones, selección de idioma, política de accesibilidad
    2. -
  2. A continuación, esboza un esquema sencillo de cuál podría ser la estructura deseada de la apariencia de cada página (podría ser algo tan sencillo como el siguiente dibujo). Anota los bloques principales. Un diagrama simple de una estructura de sitio de ejemplo, con un encabezado, un área de contenido principal, dos barras laterales opcionales y un pie de página
    3. -
  3. Ahora, elabora una lista completa con todo el resto del contenido de tu sitio web que no sea común a todas las páginas. Una larga lista de todas las funciones que podrías incluir en tu sitio de viajes, desde buscar, hasta ofertas especiales e información específica del país
    4. -
  4. A continuación, trata de ordenar todo este contenido por grupos, para hacerte una idea de las partes que podrían ir juntas en las diferentes páginas. Esto es muy similar a una técnica llamada {{Glossary("Clasificación de tarjetas")}}. Los elementos que deberían aparecer en un sitio de vacaciones ordenados en 5 categorías: Búsqueda, Especiales, Información específica del país, Resultados de búsqueda y Compra cosas
    5. -
  5. Ahora trata de esquematizar un mapa de tu sitio — dibuja un globo para cada página de tu sitio web y dibuja líneas que identifiquen el flujo de datos entre las distintas páginas. La página de inicio normalmente estará ubicada en el centro y enlazará con el resto de páginas; la mayoría de las páginas de una web sencilla estarán enlazadas desde el menú de navegación principal, aunque puede haber excepciones. También puedes incluir notas sobre cómo se pueden presentar las cosas. Un mapa del sitio que muestra la página de inicio, la página del país, los resultados de búsqueda, la página de ofertas especiales, la página de pago y la página de compra
    6. -
- -

Aprendizaje activo: Creación de un mapa del sitio web

- -

Intenta llevar a cabo el ejercicio anterior para crear tu propia página web. ¿Qué contenido le vas a dar a tu sitio web?

- -
-

Nota: Guarda este esquema para utilizarlo más adelante.

-
- -

¡Pon a prueba tus habilidades!

- -

Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar una evaluación detallada que pruebe estas habilidades al final del módulo; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructurar el contenido de una página")}}. ¡Recuerda leer primero el siguiente artículo de la serie y no solo saltarlo!

- -

Resumen

- -

En este punto, deberías tener una mejor idea sobre cómo estructurar una página/sitio web. En el último artículo de este módulo, se explica cómo depurar HTML.

- -

Ve también

- - - -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

- -

En este módulo

- - diff --git "a/files/es/learn/html/introduccion_a_html/estructuraci\303\263n_de_una_p\303\241gina_de_contenido/index.html" "b/files/es/learn/html/introduccion_a_html/estructuraci\303\263n_de_una_p\303\241gina_de_contenido/index.html" deleted file mode 100644 index 686940212e..0000000000 --- "a/files/es/learn/html/introduccion_a_html/estructuraci\303\263n_de_una_p\303\241gina_de_contenido/index.html" +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Estructuración de una Página de contenido -slug: Learn/HTML/Introduccion_a_HTML/Estructuración_de_una_página_de_contenido -tags: - - Aprendizaje - - Diseño - - Escribir Código - - Estructuración - - Evaluación - - HTML - - Principiante - - Prototipado - - semántica -translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}} 
- -

La estructuración de una página de contenido lista para su uso mediante CSS es una habilidad muy importante para dominar, por lo que en esta evaluación  verá  su capacidad para pensar en cómo  podría finalizar una página  buscando y eligiendo la semántica estructural adecuada para construir un diseño en la parte superior.

- -
-
 
-
- - - - - - - - - - - - -
Prerequisitos:Antes de intentar esta evaluación, usted debería haber trabajado ya en el resto del curso, con un énfasis particular en la Estructura del Documento y del Sitio Web..
Objetivo:Probar el conocimiento de las estructuras de páginas web y cómo representar un prototipado de diseño prospectivo en el marcado.
- -

Punto de partida

- -

Para comenzar esta evaluación, debería tomar el   archivo zip  que contiene todos los activos de inicio. El archivo zip contiene:

- - - -

Crée el ejemplo en su ordenador personal, o como alternativa utilize un sitio como JSBin o Thimble para hacer su evaluación.

- -

Breve Proyecto

- -

Para este proyecto, su tarea es tomar el contenido de la página principal de un sitio web de observación de aves y añadir elementos estructurales a la misma para que pueda tener un diseño de página aplicado a ella. Necesita tener:

- - - -

Debe agregar una presentación adecuada para:

- - - -

También debería:

- - - -

Consejos

- - - -

Ejemplo

- -

La siguiente captura de pantalla muestra un ejemplo de cómo podría verse la letra después de haber sido marcada.

- -

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

- -

Evaluación

- -

Si está siguiendo esta evaluación como parte de un curso organizado, debe ser capaz de dar su trabajo a su maestro / mentor para el marcado. Si usted está aprendiendo por si mismo, entonces  puede obtener la guía de marcado con bastante facilidad preguntando sobre ello en la lista de correo  dev-mdc , o en el canal IRC #mdn  en Mozilla IRC. Pruebe a hacer el ejercicio primero - ¡No hay nada que ganar por hacer trampa!

- -

{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

- -
- - -
 
- -
 
-
diff --git a/files/es/learn/html/introduccion_a_html/index.html b/files/es/learn/html/introduccion_a_html/index.html deleted file mode 100644 index 64c70649cb..0000000000 --- a/files/es/learn/html/introduccion_a_html/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Introducción a HTML -slug: Learn/HTML/Introduccion_a_HTML -tags: - - CodingScripting - - Enlaces - - Estructura - - HTML - - Introducción a HTML - - Texto - - semántica -translation_of: Learn/HTML/Introduction_to_HTML ---- -
{{LearnSidebar}}
- -

En su corazón, {{glossary("HTML")}} es un lenguaje muy sencillo compuesto de {{Glossary("Element", "elementos")}}, que se pueden aplicar a piezas de texto para darles un significado diferente en un documento (¿Esto es un párrafo? ¿Esto es una lista con viñetas? ¿Esto es parte de una tabla?), estructura un documento en secciones lógicas (¿Tiene una cabecera? ¿Tres columnas de contenido? ¿Un menú de navegación?), e incrusta contenido como imágenes y vídeos en una página. Este módulo introducirá los dos primeros de estos, e introduce conceptos fundamentales y la sintaxis que necesitas para entender HTML.

- -
-

¿Quieres transformarte en un desarrollador de la interfaz de usuario web?

- -

Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.

- -

Empieza aquí

-
- -

Prerrequisitos

- -

Antes de empezar este módulo, no necesitas conocimientos previos de HTML, pero deberías estar, por lo menos, familiarizado con el uso básico de computadoras, y usar la Web pasivamente (es decir, sólo revisándola y consumiendo el contenido). Debes tener configurado un entorno de trabajo básico (como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "Instalación de software básico")}}), y comprender cómo crear y administrar archivos (como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "Manejo de archivos")}}). Ambos son parte de nuestro módulo completo {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la web")}} para principiantes.

- -
-

Nota: Si estás trabajando en una computadora, tablet u otro dispositivo en donde no tengas la capacidad de crear tus propios archivos, podrías probar (en su mayoría) el código de los ejemplos en un programa para escribir código en línea como JSBin o Glitch.

-
- -

Guías

- -

Este módulo contiene los siguientes artículos, que te llevarán a través de toda la teoría básica de HTML, y te proporcionarán una amplia oportunidad de probar algunas habilidades.

- -
-
Empezar con HTML
-
Cubre las bases absolutas de HTML, para que puedas empezar — definimos elementos, atributos, y todas los otros términos importantes que puedas haber escuchado, y en donde encajan en el lenguaje. También mostramos cómo está estructurado un elemento HTML, cómo está estructurada una página HTML típica, y explica otras características importantes. En el camino, vamos a tener un juego con algo de HTML, ¡para alimentar tu intereses!
-
¿Qué hay en la cabecera? Metadatos en HTML
-
La cabecera de un documento HTML es la parte que no se muestra en el navegador web cuando se carga una página. Esta contiene información como el título ({{htmlelement("title")}}) de la página, enlaces a {{glossary("CSS")}} (si quieres estilizar tu contenido HTML con CSS), enlaces a favicons personalizados, y metadatos (que son los datos sobre el HTML, como quién lo escribió, y palabras clave que describen el documento).
-
Fundamentos de texto HTML
-
Uno de los principales trabajos de HTML es darle significado al texto (también conocido como semántica) para que el navegador sepa cómo mostrarlo correctamente. Este artículo trata cómo usar HTML para convertir un bloque de texto en una estructura de encabezados y párrafos, agregar énfasis o importancia a las palabras, crear listas y más.
-
Creando hipervínculos
-
Los hipervínculos realmente son importantes — estos son los que hacen la Web. Este artículo muestra la sintaxis requerida para hacer un enlace, y explica las mejores prácticas sobre enlaces.
-
Formateo de texto avanzado
-
Hay muchos otros elementos en HTML para formatear texto, que no hemos tratado en los artículos {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "fundamentos de texto HTML")}}. Los siguientes elementos son menos conocidos, pero sigue siendo útil conocerlos. Aquí aprenderás sobre el marcado de citas, listas de descripción, código de computadoras y otros textos relacionados, subíndices y superíndices, información de contacto, y mucho más.
-
{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}
-
Así como definimos las partes individuales de tu página (como "un párrafo" o "una imagen"), HTML también se usa para definir las áreas de tu sitio web (como "la cabecera", "el menú de navegación", "la columna de contenido principal"). Este artículo trata sobre cómo planear una estructura básica del sitio web, y escribir el HTML para representar esa estructura.
-
Depurar HTML
-
Escribir HTML está bien, pero ¿Qué pasa si algo está mal, y no puedes encontrar en dónde está el error en el código? Este artículo introducirá algunas herramientas que te podrán ayudar.
-
- -

Evaluaciones

- -

Las siguientes evaluaciones probarán tu entendimiento de las bases de HTML cubiertas en las guías anteriores.

- -
-
{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcando para una carta")}}
-
Todos aprendemos a escribir una carta, tarde o temprano; ¡Este también es un ejemplo útil para poner a prueba nuestras habilidades de formato de texto! Así que en esta evaluación se te dará una carta a la cual le tendrás que dar un marcado HTML.
-
{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}
-
Esta evaluación prueba tu capacidad para usar HTML para estructurar el contenido de una sencilla página, esta tiene una cabecera, pie de página, menú de navegación, contenido principal, y una barra lateral.
-
- -

Ve también

- -
-
Bases de la alfabetización Web 1
-
Un curso excelente de la fundación Mozilla que explora y pone a prueba muchas de las habilidades sobre las cuales hablamos en el módulo de Introducción a HTML. Los estudiantes se familiarizan con la lectura, escritura y participan de la web en este módulo de seis partes. Descubre los fundamentos de la web a través de la producción y colaboración.
-
- -
-

Retroalimentación

- -

Ayúdanos a mejorar nuestras guías y tutoriales como esta respondiendo {{web.link("https://www.surveygizmo.com/s3/4871248/MDN-Guides-Survey", "nuestra encuesta aquí")}}.

-
diff --git a/files/es/learn/html/introduccion_a_html/iniciar/index.html b/files/es/learn/html/introduccion_a_html/iniciar/index.html deleted file mode 100644 index c05aa6a9f0..0000000000 --- a/files/es/learn/html/introduccion_a_html/iniciar/index.html +++ /dev/null @@ -1,767 +0,0 @@ ---- -title: Empezar con HTML -slug: Learn/HTML/Introduccion_a_HTML/iniciar -tags: - - Atributos - - Elemento - - Guía - - HTML - - Principiante - - comentários -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -

En este artículo vamos a exponer lo más básico del HTML. Para comenzar definiremos elementos, atributos y el resto de términos importantes que quizá ya te suenen y qué función cumplen dentro del lenguaje. También explica dónde encajan estos en HTML. Aprenderás cómo se estructuran los elementos HTML, cómo se estructura una página HTML típica y otras características básicas importantes del lenguaje. Por el camino, también iremos practicando con algo de HTML.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "tener instalado el software básico")}} y conocimientos básicos de cómo {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "trabajar con archivos")}}.
Objetivo:Familiarizarte con el lenguaje HTML, y adquirir algo de práctica escribiendo unos pocos elementos HTML.
- -

¿Qué es el HTML?

- -

{{Glossary("HTML")}} ("Hypertext Markup Language") no es un lenguaje de programación. Es un lenguaje de marcado que le dice a los navegadores web cómo estructurar las páginas web que estás visitando. Puede ser tan complejo o tan simple como desee el desarrollador web. El HTML consiste en una serie de {{Glossary("Element", "elementos")}}, que puedes utilizar para encerrar, delimitar o marcar diferentes partes del contenido para hacer que aparezcan de una cierta manera, o actúen de determinada forma. Las {{Glossary("Tag", "etiquetas")}} que delimitan un fragmento de contenido pueden hacer que dicho contenido enlace con otra página, ponga una palabra en cursiva, etcétera. Por ejemplo, dada la siguiente línea de contenido:

- -
Mi gato es muy gruñón
- -

Si queremos que la línea sea independiente de otras, podemos especificar que es un párrafo encerrándola con una etiqueta de elemento de párrafo ({{htmlelement("p")}}):

- -
<p>Mi gato es muy gruñón</p>
- -
-

Nota: Las etiquetas en HTML no distinguen entre mayúsculas y minúsculas. Así que se pueden escribir tanto en mayúsculas como en minúsculas. Por ejemplo, una etiqueta {{htmlelement("title")}} se puede escribir como <title>, <TITLE>, <Title>, <TiTle>, etc., y funcionará correctamente. La mejor práctica, sin embargo, es escribir todas las etiquetas en minúsculas para mantener la coherencia y legibilidad, entre otros motivos.

-
- -

Anatomía de un elemento HTML

- -

Exploremos un poco el elemento párrafo:

- -

Anatomía de los elementos HTML

- -

Las principales partes de nuestro elemento son:

- - - -

El elemento lo conforman la etiqueta de apertura, seguida del contenido, seguido de la etiqueta de cierre.

- -

Aprendizaje activo: crear tu primer elemento HTML

- -

Edita la siguiente línea en el área Entrada envolviéndola con las etiquetas <em> y </em>. Para abrir el elemento, coloca la etiqueta de apertura <em> al principio de la línea. Para cerrar el elemento, coloca la etiqueta de cierre </em> al final de la línea. ¡Obtienes una línea en cursiva! Puedes ver tus cambios actualizados automáticamente en la caja de texto de Salida.

- -

Si te equivocas, siempre puedes volver al código anterior mediante el botón Restablecer. Si te quedas realmente atascado, pulsa el botón Mostrar la solución para ver la solución.

- - - -

{{ EmbedLiveSample('Código_reproducible', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Elementos anidados

- -

Se pueden poner elementos dentro de otros elementos. Esto se llama anidamiento. Si quisiéramos decir que nuestro gato es muy gruñón, podríamos encerrar la palabra muy en un elemento {{htmlelement("strong")}} para que aparezca destacada.

- -
<p>Mi gato es <strong>muy</strong> gruñón.</p>
- -

Hay una forma correcta e incorrecta de anidar. En el ejemplo anterior, primero abrimos el elemento p, luego abrimos el elemento strong. Para un anidamiento adecuado, primero debemos cerrar el elemento strong, antes de cerrar el p.

- -

El siguiente es un ejemplo de la forma incorrecta de anidar:

- -
<p>Mi gato es <strong>muy gruñón.</p></strong>
- -

Los elementos tienen que abrirse y cerrarse correctamente para que estén claramente dentro o fuera el uno del otro. Con el tipo de superposición en el ejemplo anterior, el navegador tiene que adivinar tu intención. Este tipo de adivinanzas puede producir resultados inesperados.

- -

Elementos de bloque y elementos en línea

- -

Hay dos categorías importantes de elementos en HTML — Estos son los elementos de bloque y los elementos en línea.

- - - -

Considera el siguiente ejemplo:

- -
<em>primero</em><em>segundo</em><em>tercero</em>
-
-<p>cuarto</p><p>quinto</p><p>sexto</p>
-
- -

{{htmlelement("em")}} es un elemento en línea. Así, como puedes observar, los tres primeros elementos se sitúan en la misma línea, uno tras otro sin espacio entre ellos. Por otro lado, {{htmlelement("p")}} es un elemento a nivel de bloque. Cada elemento p aparece en una nueva línea, con un espacio arriba y abajo. (El espaciado se debe al {{web.link("/es/docs/Learn/CSS/Introduction_to_CSS", "estilo CSS")}} predeterminado que el navegador aplica a los párrafos).

- -

{{ EmbedLiveSample('Elementos_de_bloque_y_elementos_en_línea', 700, 200, "", "") }}

- -
-

Nota: HTML5 redefinió las categorías de elementos: consulta Categorías de contenido de elementos. Si bien estas definiciones son más precisas y menos ambiguas que sus predecesoras, las nuevas definiciones son mucho más complicadas de entender que block e inline . Este artículo seguirá con estos dos términos.

-
- -
-

Nota: Los términos «en bloque» (block) y «en línea» (inline), tal como se usan en este tema, no se deberían confundir con {{web.link("/es/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes", "los tipos de casillas de CSS")}} que se conocen con el mismo nombre. Aunque de manera predeterminada están relacionados, el hecho de cambiar el tipo de aspecto visual del CSS no cambia la categoría del elemento ni afecta a aquellos elementos que pueda contener. Una de las razones por las que HTML5 abandonó el uso de estos términos fue para evitar este tipo de confusión.

-
- -
-

Nota: Puedes encontrar referencias útiles que incluyen listas de elementos de bloque y elementos en línea. Consulta {{web.link("/es/docs/Web/HTML/Block-level_elements", "Elementos en bloque")}} y {{web.link("/es/docs/Web/HTML/Elementos_en_línea", "Elementos en línea")}}.

-
- -

Elementos vacíos

- -

No todos los elementos siguen el patrón de etiqueta de apertura, contenido y etiqueta de cierre. Algunos elementos consisten solo en una etiqueta única, que se utiliza generalmente para insertar/incrustar algo en el documento en el lugar donde se le quiere incluir. Por ejemplo, el elemento {{htmlelement("img")}} inserta una imagen en la página:

- -
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
- -

Este texto mostrará lo siguiente en tu página:

- -

{{ EmbedLiveSample('Elementos_vacíos', 700, 300, "", "", "hide-codepen-jsfiddle") }}

- -
-

Nota: Los elementos vacíos en ocasiones también se llaman elementos nulos o vanos (void elements).

-
- -

Atributos

- -

Los elementos también pueden tener atributos. Los atributos tienen este aspecto:

- -

atributo html

- -

Los atributos contienen información extra sobre el elemento que no se mostrará en el contenido. En este caso, el atributo class asigna al elemento un identificador que se puede utilizar para dotarlo de información de estilo.

- -

Un atributo debería tener:

- - - -

Aprendizaje activo: Añadir atributos a un elemento

- -

Otro ejemplo de un elemento es {{htmlelement("a")}}. Esto significa ancla. Una ancla puede convertir el texto que encierra en un hipervínculo. Las anclas pueden tener varios atributos, pero varios son como sigue:

- - - -

Edita la línea de abajo en el área de Entrada para convertirlo en un enlace a tu sitio web favorito.

- -
    -
  1. Añade el elemento <a>.
    2. -
  2. Añade el atributo href y el atributo title.
    3. -
  3. Especifica el atributo target para abrir el enlace en una nueva pestaña.
    4. -
- -

Los cambios se actualizarán inmediatamente en la zona de Salida. Deberías ver un enlace que mostrará el contenido del atributo title cuando pases el ratón encima, y que te llevará a la dirección web indicada por el atributo href cuando hagas clic. Recuerda que debes incluir un espacio entre el nombre del elemento y cada atributo.

- -

Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si te quedas realmente atascado, pulsa el botón Mostrar la solución para ver la solución.

- - - -

{{ EmbedLiveSample('Código_reproducible_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Atributos booleanos

- -

En ocasiones puedes ver atributos escritos sin valor. Esto está permitido. Estos se denominan atributos booleanos. Los atributos booleanos solo pueden tener un valor, que generalmente es el mismo que el nombre del atributo. Por ejemplo, considera el atributo {{htmlattrxref("disabled", "input")}}, que puedes asignar a los elementos de entrada del formulario. (Usa esto para deshabilitar los elementos de entrada del formulario para que el usuario no pueda realizar entradas. Los elementos desactivados suelen tener una apariencia atenuada). Por ejemplo:

- -
<input type="text" disabled="disabled">
- -

De manera abreviada, también es posible escribirlo como se describe a continuación (además, se ha incluido un elemento de entrada de formulario no desactivado como referencia, para dar una idea más precisa de lo que sucede):

- -
<!-- el uso del atributo deshabilitado evita que el usuario final introduzca texto en el cuadro de entrada -->
-<input type="text" disabled>
-
-<!-- se permite la entrada de texto, ya que no contiene el atributo deshabilitado -->
-<input type="text">
-
- -

Como referencia, el ejemplo anterior también incluye un elemento de entrada de formulario no deshabilitado. El HTML del ejemplo anterior produce este resultado:

- -

{{ EmbedLiveSample('Atributos_booleanos', 700, 100, "", "", "hide-codepen-jsfiddle") }}

- -

Omitir comillas en valores de atributos

- -

Cuando observas diferentes páginas web, puedes encontrarte con todo tipo de estilos de etiquetado extraños, que incluyen valores de atributos sin comillas. Esto se permite en ciertas circunstancias, pero interrumpirá la edición en otras. Por ejemplo, si volvemos a revisar el ejemplo del enlace, sería posible escribir una versión básica con solo el atributo href, así:

- -
<a href=https://www.mozilla.org/>mi sitio web favorito</a>
- -

Sin embargo, las cosas no funcionarán cuando a este estilo se añada el atributo title:

- -
<a href=https://www.mozilla.org/ title=The Mozilla homepage>mi sitio web favorito</a>
- -

En este punto el navegador interpretará mal el cambio y pensará que el atributo title corresponde a tres atributos: un atributo title con el valor The y dos atributos booleanos: Mozilla y homepage. ¡Obviamente, esta no es la intensión! Causará errores o comportamientos inesperados, como puedes ver en el ejemplo en vivo a continuación. ¡Intenta colocar el cursor sobre el enlace para ver el texto del título!

- -

{{ EmbedLiveSample('Omitir_comillas_en_valores_de_atributos', 700, 100, "", "", "hide-codepen-jsfiddle") }}

- -

Incluye siempre las comillas de atributos. Evita tales problemas y da como resultado un código más legible.

- -

¿Comillas simples o dobles?

- -

En este artículo todos los atributos se han incluido en comillas dobles. Sin embargo, se pueden ver comillas simples en algún código HTML. Es una cuestión de estilo. Puedes elegir libremente cuál prefieres. Ambas líneas de código son equivalentes:

- -
<a href="http://www.ejemplo.com">Un enlace a mi ejemplo.</a>
-
-<a href='http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>
- -

Asegúrate de no mezclar ambos tipos de comillas. El siguiente ejemplo muestra un tipo de mezcla de comillas que saldrá mal:

- -
<a href="http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>
- -

Si utilizas un tipo de comillas en tu documento HTML, puedes incluir el otro tipo de comillas para tus valores de atributo sin que esto te cause problemas:

- -
<a href="http://www.ejemplo.com" title="¿A que es 'divertido'">Un enlace a mi ejemplo.</a>
- -

Sin embargo, si deseas anidar unas comillas dentro de otras del mismo tipo (ya sea simples o dobles), tendrás que utilizar entidades HTML para las comillas. Por ejemplo, el siguiente código no va a funcionar:

- -
<a href='http://www.ejemplo.com' title='¿A que es 'divertido'?'>Un enlace a mi ejemplo.</a>
- -

Así que tendrás que hacer esto:

- -
<a href='http://www.ejemplo.com' title='¿A que es &apos;divertido&apos;?'>Un enlace a mi ejemplo.</a>
- -

Anatomía de un documento HTML

- -

Los elementos HTML no son muy útiles por sí mismos. Ahora veremos cómo combinar los elementos individuales para formar una página HTML completa:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Mi página de prueba</title>
-  </head>
-  <body>
-    <p>Esta es mi página</p>
-  </body>
-</html>
- -

Aquí tenemos:

- -
    -
  1. <!DOCTYPE html>: El elemento doctype. En sus inicios, cuando el HTML llevaba poco tiempo (alrededor de 1991-1992), los doctypes servían como enlaces al conjunto de reglas que la página HTML debía seguir para que fuera considerado buen HTML. Un elemento doctype de aquella época podía parecerse a esto: - - 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    - En la actualidad se ignora y se considera un legado histórico que hay que incluir para que todo funcione correctamente. <!DOCTYPE html> es la secuencia de caracteres más corta que se acepta como elemento doctype válido. Eso es lo único que realmente necesitas saber.
    2. -
  2. <html></html>: El elemento <html>. Este elemento envuelve todo el contenido de la página. A veces se lo conoce como el elemento raíz.
    3. -
  3. <head></head>: El elemento <{{htmlelement("head")}}> (cabecera). Este elemento actúa como contenedor para todos los parámetros que quieras incluir en el documento HTML que no serán visibles a los visitantes de la página. Incluye cosas como palabras clave y la descripción de la página que quieras mostrar en los resultados de búsqueda, así como la hoja de estilo para formatear nuestro contenido, declaraciones de codificación de caracteres y más. Aprenderás más acerca de esto en el siguiente artículo de la serie.
    4. -
  4. <meta charset="utf-8">: Este elemento establece que tu documento HTML usará la codificación UTF-8, que incluye la gran mayoría de caracteres de todos los idiomas humanos escritos. En resumen: puede gestionar cualquier contenido textual que pongas en tu documento. No hay razón para no configurar este valor y te puede ayudar a evitar problemas más adelante.
    5. -
  5. <title></title>: El elemento {{htmlelement("title")}}. Este establece el título de la página, que es el título que aparece en la pestaña del navegador en la que se carga la página. El título de la página también se utiliza para describir la página cuando se marca como favorita.
    6. -
  6. <body></body>: El elemento <body>. Contiene todo el contenido que quieres mostrar a los usuarios cuando visitan tu página, ya sea texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa.
    7. -
- -

Aprendizaje activo: Añadir algunas características a un documento HTML

- -

Si quieres escribir algo de HTML en tu ordenador local para experimentar, puedes:

- -
    -
  1. Copiar el ejemplo de la página HTML del punto anterior.
    2. -
  2. Crear un archivo nuevo en un editor de texto.
    3. -
  3. Pegar el código en el nuevo archivo de texto.
    4. -
  4. Guardar el archivo como index.html.
    5. -
- -
-

Nota: También puedes encontrar esta plantilla básica de HTML en el repositorio GitHub del Área MDN Learning.

-
- -

Ahora puedes abrir este archivo en un navegador web para ver cómo se ve el código renderizado. Edita el código y actualiza el navegador para ver cuál es el resultado. En principio se verá algo así:

- -

Una sencilla página HTML que dice esta es mi páginaEn este ejercicio, puedes editar el código en tu ordenador como se indica arriba, o puedes editarlo en la ventana editable que tienes a continuación (la ventana editable representa solo el contenido del elemento {{htmlelement("body")}}, en este caso). Intenta reproducir los siguientes pasos:

- - - -

Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si te quedas realmente atascado, pulsa el botón Mostrar la solución para ver la solución.

- - - -

{{ EmbedLiveSample('Código_reproducible_3', 700, 600, "", "", "hide-codepen-jsfiddle") }}

- -

Los espacios en blanco en HTML

- -

En los ejemplos anteriores se han incluido espacios en blanco y saltos de línea en el código. Esto realmente no es necesario. Los dos siguientes fragmentos de código son equivalentes:

- -
<p>Los perros son tontos.</p>
-
-<p>Los    perros        son
-         tontos.</p>
- -

No importa cuántos espacios en blanco se utilicen (incluye tanto caracteres de espacio como saltos de línea) el intérprete de HTML reduce cada secuencia de espacio en blanco a un único espacio al interpretar el código. Entonces, ¿por qué utilizar espacios en blanco? La respuesta está en la legibilidad.
-
- Es más fácil comprender lo que está sucediendo en tu código si lo tienes bien formateado. En nuestro HTML cada elemento anidado está sangrado dos espacios más con respecto al exterior. Depende de ti qué estilo de formato utilizas (cuántos espacios para cada nivel de sangría, por ejemplo) pero debes plantearte el uso de algún tipo de formato.

- -

Referencias a entidades: Inclusión de caracteres especiales en HTML

- -

En HTML, los caracteres <, >,",' y & son caracteres especiales. Forman parte de la sintaxis HTML. Entonces, ¿cómo incluye uno de estos caracteres especiales en tu texto? Por ejemplo, si deseas utilizar un signo comercial o menor que, y no hacer que se interprete como código.

- -

Haces esto con referencias de caracteres. Estos son códigos especiales que representan caracteres, para ser usados en estas circunstancias exactas. Cada referencia de caracter comienza con un signo de ampersand (&) y finaliza con un punto y coma (;).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Caracter literalEquivalente de referencia de caracteres
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
- -

El equivalente de referencia de caracter podría recordarse fácilmente porque el texto que utiliza se puede ver como menor que para '&lt;' , cita para ' &quot; ' y de manera similar para otros. Para obtener más información sobre la referencia de entidad, consulta {{interwiki("wikipedia", "Anexo:Referencias a entidades de caracteres XML y HTML")}} en (Wikipedia).
-
- Considera los dos siguientes párrafos:

- -
<p>En HTML, defines un párrafo con el elemento <p>.</p>
-
-<p>En HTML, defines un párrafo con el elemento &lt;p&gt;.</p>
- -

En la salida en vivo de abajo, puedes ver que el primer párrafo salió mal. El navegador interpreta la segunda instancia de <p> como el inicio de un nuevo párrafo. El segundo párrafo se ve bien porque hemos remplazado < y > por sus referencias correspondientes.

- -

{{ EmbedLiveSample('Referencias_a_entidades_Inclusión_de_caracteres_especiales_en_HTML', 700, 200) }}

- -
-

Nota: En la Wikipedia se puede localizar un listado de todas las referencias de entidades de caracteres HTML disponibles: {{interwiki("wikipedia", "Anexo:Referencias a entidades de caracteres XML y HTML")}}. Observa que no necesitas usar ninguna referencia de entidad más para ningún otro de estos símbolos porque los navegadores modernos gestionan estos símbolos correctamente siempre y cuando en tu HTML hayas {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "establecido la codificación de el juego de caracteres universal UTF-8", "#Specifying_your_document's_character_encoding")}}.

-
- -

Comentarios HTML

- -

En HTML hay un mecanismo para escribir comentarios en el código. Los comentarios son ignorados por el navegador y, por tanto, son invisibles para el usuario. El propósito de los comentarios es permitirte incluir notas en el código para explicar tu lógica o codificación. Esto es muy útil si regresas a un código base después de estar ausente el tiempo suficiente como para no recordarlo por completo. Del mismo modo, los comentarios son invaluables ya que diferentes personas están realizando cambios y actualizaciones.

- -

Para convertir en un comentario una sección de contenido de tu archivo HTML, debes delimitarlo con los marcadores especiales <!-- y -->. Por ejemplo:

- -
<p>No soy un comentario</p>
-
-<!-- <p>¡Yo sí!</p> -->
- -

Como puedes ver a continuación, el primer párrafo aparece, pero el segundo no.

- -

{{ EmbedLiveSample('Comentarios_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }}

- -

Resumen

- -

Has llegado al final del artículo. Espero que hayas disfrutado del recorrido los conceptos básicos del HTML.
- En este punto ya deberías entender el lenguaje, cómo funciona en un nivel básico y deberías poder escribir algunos elementos y atributos. También deberías poder escribir algunos elementos y atributos. Los artículos posteriores de este módulo profundizan en algunos de los temas aquí presentados, además de presentar otros conceptos del lenguaje.

- -
-

Nota: En este punto, a medida que empieces a aprender más sobre HTML, es posible que también desees comenzar a explorar los conceptos básicos de las Hojas de estilo en cascada (Cascading style sheets) o {{web.link("/es/docs/Learn/CSS", "CSS")}}. CSS, es el lenguaje utilizado para estilizar páginas web. (por ejemplo, cambiar fuentes o colores, o alterar el diseño de la página) HTML y CSS funcionan bien juntos, como pronto descubrirás.

-
- -

Ve también

- - - -
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -
- -

En este módulo

- - diff --git a/files/es/learn/html/introduccion_a_html/marking_up_a_letter/index.html b/files/es/learn/html/introduccion_a_html/marking_up_a_letter/index.html deleted file mode 100644 index e53bb01826..0000000000 --- a/files/es/learn/html/introduccion_a_html/marking_up_a_letter/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Marcando una Carta -slug: Learn/HTML/Introduccion_a_HTML/Marking_up_a_letter -tags: - - Cabecera - - Codificación - - Enlaces - - Evaluación - - Principiante - - Texto -translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
- -

Todos aprendemos a escribir una carta más tarde o más temprano; es también práctico practicar con nuestras habilidades para dar forma a los textos. En esta prueba deberás demostrar tus habilidades para dar forma a textos, incluyendo enlaces, además pondremos a prueba tu familiaridad con algunos contenidos de encabezamiento <head> en HTML.

- - - - - - - - - - - - -
Prerrequisitos:Antes de intentar este examen deberías haber trabajado los artículos Getting started with HTML, What's in the head? Metadata in HTML, HTML text fundamentals, Creating hyperlinks, y Advanced text formatting.
Objetivos:Probar las habilidades básicas y avanzadas de formateo de texto e hyperlinks, y el conocimiento de los encabezamientos en HTML.
- -

Punto de partida

- -

Para comenzar esta prueba, deberemos copiar el texto que deberemos trabajar, y el CSS que necesitaremos incluir en nuestro HTML. Crearemos un archivo nuevo .html usando nuestro editor de texto (o alternativamente usaremos otros como JSBin o Thimble para hacer nuestra prueba).

- -

Resumen del proyecto a desarrollar

- -

En este proyecto tu tarea será publicar una carta que debe estar alojada en la intranet de una universidad. La carta es la respuesta de un compañero investigador a un posible estudiante de postgrado en relación a su deseo de trabajar en la universidad.

- -

Semánticas de bloque/estructurales:

- - - -

Semánticas intralínea:

- - - -

El encabezamiento del documento:

- - - -

Pistas y recomendaciones

- - - -

Example

- -

The following screenshot shows an example of what the letter might look like after being marked up.

- -

- -

Evaluación

- -

Si estás haciendo esta prueba como parte de un curso organizado, deberías entregar tu trabajo al profesor para que lo corrija. Si estás auto-aprendiendo puedes conseguir la guía de corrección fácilmente pidiendola en el Hilo del area de aprendizaje, o en el canal IRC de #mdn en Mozilla IRC. Intenta hacerlo primero — no ganarás nada haciendo trampas.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/es/learn/html/introduccion_a_html/metados_en/index.html b/files/es/learn/html/introduccion_a_html/metados_en/index.html deleted file mode 100644 index 6fc5f94ab0..0000000000 --- a/files/es/learn/html/introduccion_a_html/metados_en/index.html +++ /dev/null @@ -1,299 +0,0 @@ ---- -title: ¿Qué hay en la cabecera? Metadatos en HTML -slug: Learn/HTML/Introduccion_a_HTML/Metados_en -tags: - - Cabecera - - CodingScripting - - Guía - - HTML - - Meta - - Metadatos - - Novato - - Principiante - - favicon - - head - - lang - - metadata -translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
- -

El elemento {{Glossary("Head", "head")}} de un documento HTML es la parte que no se muestra en el navegador cuando se carga la página. Contiene información como el título ({{htmlelement("title")}}) de la página, enlaces al {{Glossary("CSS")}} (si quieres aplicar estilo a tu contenido HTML con CSS), enlaces para personalizar favicon, y otros metadatos (datos sobre el HTML, como quién lo escribió y palabras claves importantes que describen el documento). En este artículo abarcaremos todo esto y más, para darte bases sólidas en el manejo del marcado y otro código que debería estar presente en tu cabecera.

- - - - - - - - - - - - -
Prerrequisitos:Estar familiarizado con el HTML básico, que se expone en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con el HTML")}}.
Objetivo:Aprender acerca de la cabecera HTML {{Glossary("Head", "head")}}, cuál es su propósito, los elementos más importantes que puede contener, y qué efecto puede tener sobre el documento HTML.
- -

¿Qué hay en la cabecera HTML?

- -

Vamos a revisar el {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document", "documento HTML que se revisó en el artículo anterior")}}:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Mi página de prueba</title>
-  </head>
-  <body>
-    <p>Esta es mi página</p>
-  </body>
-</html>
- -

La cabecera HTML es el contenido del elemento {{htmlelement("head")}} — a diferencia del contenido del elemento {{htmlelement("body")}} (que sí se muestra en la página cuando se carga en el navegador), el contenido de la cabecera no se muestra en la página. Por el contrario, la función de la cabecera es contener los {{Glossary("Metadata", "metadatos")}} del documento. En el ejemplo anterior, la cabecera es bastante reducida:

- -
<head>
-  <meta charset="utf-8">
-  <title>Mi página de prueba</title>
-</head>
- -

En páginas más grandes, sin embargo, la cabecera puede llegar a contener bastantes elementos. Prueba a ir a algunos de tus sitios web favoritos y comprueba el contenido de la cabecera usando las {{web.link("/es/docs/Learn/Common_questions/What_are_browser_developer_tools", "herramientas para el desarrollador")}}. Nuestro objetivo aquí no es mostrarte cómo usar todo lo que puedes incluir en la cabecera, sino enseñarte cómo usar los elementos principales que vas a incluir en la cabecera y que te familiarices con ellos. Empecemos.

- -

Añadir un título

- -

Ya hemos visto el elemento {{htmlelement("title")}} en acción — se puede usar para poner un título al documento. Sin embargo, esto se puede confundir con el elemento {{htmlelement("h1")}}, que se utiliza para poner un encabezado de nivel superior al cuerpo de tu contenido — esto también se conoce como el título de la página. ¡Pero son cosas diferentes!

- - - -

Aprendizaje activo: Análisis de un ejemplo sencillo

- -
    -
  1. Para comenzar este aprendizaje activo, te proponemos ir a nuestro repositorio de GitHub y descargues una copia de nuestra página title-example.html. Lo puedes hacer de las siguientes maneras: - -
      -
    1. Copia y pega el código de la página en un archivo de texto nuevo en tu editor de código, luego guárdalo en un lugar conveniente.
      2. -
    2. Presiona el botón "Raw" en la página de GitHub, lo cual hace que aparezca el código sin procesar (posiblemente en una nueva pestaña del navegador). A continuación, en el menú de tu navegador elige Archivo → Guardar página como... y selecciona un lugar adecuado para guardar el archivo.
      3. -
    -
    2. -
  2. Ahora abre el archivo en tu navegador. Deberías ver algo como esto: -

    Una sencilla página web con el título configurado a <title> element, y el <h1> configurado a <h1> element.Ahora debería quedar claro dónde aparece el contenido de <h1> y dónde aparece el contenido de <title>.

    -
    3. -
  3. También podrías probar a abrir el código en tu editor de código, editar el contenido de estos elementos y luego actualizar la página en tu navegador. Juega un poco con ello.
    4. -
- -

El contenido del elemento <title> también se usa de otras formas. Por ejemplo, si intentas marcar la página como favorita (Marcadores → Marcar esta página, o el icono en forma de estrella de Firefox), verás que el nombre que se sugiere para el marcado es el contenido del elemento <title>.

- -

Se está marcando una página web en Firefox; el nombre del marcador se ha completado automáticamente con el contenido del elemento <title>

- -

El contenido de <title> también se usa en el resultado de las búsquedas, como verás a continuación.

- -

Metadatos: el elemento <meta>

- -

Los metadatos son datos que describen datos, y HTML tiene una forma «oficial» de introducir metadatos en un documento — el elemento {{htmlelement("meta")}}. Por supuesto, el resto de los elementos de los que hablaremos en este artículo también se podrían considerar metadatos. Hay muchos diferentes tipos de elementos <meta> que se pueden incluir en el <head> de tu página, pero no vamos a intentar explicarlos todos en esta etapa porque resultaría demasiado confuso. En lugar de ello vamos a explicar algunas cuestiones con las que seguramente te vas a encontrar, solo para que te hagas una idea.

- -

La codificación de caracteres de tu documento

- -

El ejemplo que vimos arriba incluía esta línea:

- -
<meta charset="utf-8">
- -

Este elemento simplemente especifica la codificación de caracteres del documento — es decir, el conjunto de caracteres que el documento puede usar. utf-8 es un conjunto de caracteres universal que incluye casi todos los caracteres de casi cualquier idioma humano. Esto significa que tu página web podrá gestionar la visualización de cualquier idioma; por lo tanto, resulta una buena idea configurarlo en cada página web que crees. Por ejemplo, tu página podría gestionar inglés y japonés sin problemas:

- -

Una página web que contiene caracteres en inglés y japonés, con la codificación de caracteres establecida en universal o utf-8. Ambos idiomas se muestran bien.Si configuras tu codificación de caracteres en ISO-8859-1, por ejemplo (el juego de caracteres para el alfabeto latino), la representación de tu página puede aparecer desordenada:

- -

una página web que contiene caracteres en inglés y japonés, con la codificación de caracteres configurada en latín. Los caracteres japoneses no se muestran correctamente

- -
-

Nota: Algunos navegadores (Chrome, por ejemplo) automáticamente arreglan la codificación de caracteres incorrecta, de modo que según el navegador que uses, puede que no te topes con este problema. Aun así, deberías incluir una codificación de caracteres utf-8 en tu página web para evitar que se presenten potenciales problemas con otros navegadores.

-
- -

Aprendizaje activo: Experimenta con la codificación de caracteres

- -

Para probar esto, vuelve a visitar la plantilla HTML simple que obtuviste en la sección anterior sobre <title> (la página title-example.html) e intenta cambiar el valor de la propiedad meta charset por ISO-8859-1 y añade el japonés a tu página. Este es el código que usamos:

- -
<p>Ejemplo en japonés: ご飯が熱い。</p>
- -

Añadir un autor y descripción

- -

Muchos elementos <meta> incluyen atributos name y content:

- - - -

Dos de esos metadatos que resultan útiles de incluir en tu página definen al autor de la página y proporcionan una descripción concisa de la página. Veamos un ejemplo:

- -
<meta name="author" content="Chris Mills">
-<meta name="description" content="El área de aprendizaje de MDN pretende
-proporcionar a los recién llegados a la web todo lo que deben
-saber para empezar a desarrollar páginas web y aplicaciones web.">
- -

Especificar un autor resulta ventajoso por diversos motivos: es útil saber quién escribió la página para poder ponerte en contacto con el autor si tienes preguntas sobre el contenido. Algunos sistemas de gestión de contenido tienen herramientas para extraer automáticamente la información del autor de la página y ponerla a disposición para tales fines.

- -

Especificar una descripción que incluya palabras clave relacionadas con el contenido de tu página resulta útil porque tiene el potencial de hacer que la página aparezca más arriba en las búsquedas relevantes que efectúan los motores de búsqueda (tales actividades se denominan optimizaciones del motor de búsqueda ({{web.link("/es/docs/Glossary/SEO", "Optimización de motores de búsqueda")}}) o {{Glossary("SEO")}}.)

- -

Aprendizaje activo: El uso de la descripción en los motores de búsqueda

- -

La descripción también se usa en las páginas de resultados del motor de búsqueda. Repasemos un ejercicio para explorar esto:

- -
    -
  1. Ve a la página de inicio de Mozilla Developer Network.
    2. -
  2. Observa el código fuente de la página (Ctrl+clic o clic con el botón derecho en la página y selecciona la opción del menú Ver código fuente de la página).
    3. -
  3. Encuentra la etiqueta del metadato description. Se verá más o menos así (aunque puede cambiar con el tiempo): - 
    <meta name="description" content="The Mozilla Developer
-  Network (MDN) proporciona información sobre tecnologías
-  de código abierto que incluyen HTML, CSS y APIs tanto para sitios web como para aplicaciones HTML5.
-  También documenta productos Mozilla como el sistema operativo Firefox.">
    -
    4. -
  4. Ahora busca "Mozilla Developer Network" en tu motor de búsqueda favorito (nosotros hemos utilizado Google). Observarás que efectivamente merece la pena que tener el contenido de la descripción <meta> y el elemento <title> que se utiliza en la búsqueda. -

    Resultado de búsqueda en Yahoo para "Mozilla Developer Network"

    -
    5. -
- -
-

Nota: En Google verás algunas subpáginas relevantes de MDN enumeradas debajo del enlace principal a la página principal de MDN (se trata de los llamados sitelinks y se pueden configurar con las Herramientas de administrador de Google), una forma de mejorar los resultados para tu sitio con el motor de búsqueda de Google.

-
- -
-

Nota: Muchas características <meta> ya no se usan. Por ejemplo, los motores de búsqueda ignoran el elemento <meta> (<meta name="keywords" content="pon, tus, palabras clave, aquí">), que se supone que facilita palabras clave para motores de búsqueda de forma que se determine la relevancia de esa página según diferentes términos de búsqueda, porque los spammers rellenaban la lista de palabras clave con cientos de palabras clave que sesgaban los resultados.

-
- -

Otros tipos de metadatos

- -

Al navegar por la web también puedes encontrar otros tipos de metadatos. Muchas de las funciones que verás en los sitios web son creaciones propietarias diseñadas para proporcionar a ciertos sitios (como los sitios de redes sociales) información específica que puedan usar.

- -

Por ejemplo, Open Graph Data es un protocolo de metadatos que Facebook inventó para proveer metadatos más ricos para los sitios web. En las fuentes de código de MDN, encontrarás esto:

- -
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
-<meta property="og:description" content="The Mozilla Developer Network (MDN) proporciona información
-sobre tecnologías Open Web, incluidas HTML, CSS y APIs para ambos sitios web
-y aplicaciones HTML5. También documenta productos Mozilla, como el sistema operativo Firefox.">
-<meta property="og:title" content="Mozilla Developer Network">
- -

Un efecto de esto es que cuando desde Facebook enlazas a un MDN, el enlace aparece con una imagen y una descripción, lo que resulta en una experiencia más enriquecedora para los usuarios.

- -

Datos abiertos del protocolo de gráficos de la página de inicio de MDN como se muestra en Facebook, mostrando una imagen, título y descripción.

- -

Twitter también tiene sus metadatos propios, las Twitter Cards, que tienen un efecto similar cuando la URL del sitio se muestra en twitter.com. Por ejemplo:

- -
<meta name="twitter:title" content="Mozilla Developer Network">
- -

Agregar iconos personalizados a tu sitio

- -

Para enriquecer un poco más el diseño de tu sitio puedes añadir en tus metadatos referencias a iconos personalizados, que se mostrarán en determinados contextos. El más común de ellos es el favicon (abreviatura de favorite icon —icono «favorito», referido al uso que se le da en las listas de «favoritos» o de marcadores («bookmarks»).

- -

El humilde favicon ha existido durante muchos años. Es el primer icono de este tipo: un icono cuadrado de 16 píxeles que se utiliza en varios lugares. Es posible que veas (según el navegador) favicons que se muestran en la pestaña del navegador que contiene cada página abierta y junto a las páginas marcadas en el panel de marcadores.

- -

Para añadir un favicon a tu página:

- -
    -
  1. Guárdalo en el mismo directorio que la página index de tu sitio, en formato .ico (la mayoría de los buscadores admiten favicon en los formatos más comunes como .gif o .png, pero usar el formato ICO garantiza que funcionará hasta en Internet Explorer 6.)
    2. -
  2. Añade la siguiente línea de referencia en el {{HTMLElement("head")}} de tu HTML: - 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    -
    3. -
- -

Los navegadores modernos usan favicons en diversos lugares, como en la etiqueta de la página que está abierta y en el panel de favoritos cuando la añades a tu lista de páginas favoritas:

- -

El panel de marcadores de Firefox, que muestra un ejemplo marcado con un favicon junto a él.

- -

Hoy día hay un montón de otros tipos de iconos a tener presentes. Por ejemplo, los encontrarás en el código fuente de la página de inicio de MDN:

- -
<!-- iPad de tercera generación con pantalla de alta resolución: -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
-<!-- iPhone con pantalla de alta resolución: -->
-<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
-<!-- iPad de primera y segunda generación: -->
-<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
-<!-- Dispositivos iPhone sin pantalla Retina, iPod Touch y Android 2.1+: -->
-<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
-<!-- favicon básico -->
-<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
- -

Los comentarios explican para qué se usa cada icono (estos elementos abarcan situaciones como aportar un buen icono de alta resolución para usarlo cuando la página web se guarda en la página de inicio de un iPad).

- -

No te preocupes demasiado sobre la implementación de todos estos tipos de iconos por el momento; se trata de una característica bastante avanzada y no se espera que tengas conocimientos de ello para avanzar en el curso. El propósito principal aquí es darte a conocer estos elementos por si te los encuentras mientras examinas el código fuente de otros sitios web.

- -
-

Nota: Si tu sitio web utiliza una política de seguridad de contenido (content security policy o CSP) para mejorar la seguridad, la política afecta al favicon. Si te encuentras con problemas como que el favicon no se carga, comprueba que la respuesta a {{HTTPHeader("Content-Security-Policy")}} del header Content-Security-Policy para la directriz img-src en la cabecera no impide el acceso a este.

-
- -

Aplicar CSS y JavaScript a HTML

- -

Prácticamente todos los sitios web usan {{Glossary("CSS")}} para darles un buen aspecto y {{Glossary("JavaScript")}} para añadir funcionalidades interactivas, como reproductores de vídeo, mapas, juegos y demás. La manera más habitual de añadir CSS y JavaScript a una página web es con los elementos <link> y el elemento <script>, respectivamente.

- - - -

Aprendizaje activo: aplicar CSS y JavaScript a una página

- -
    -
  1. Para iniciar este aprendizaje activo, haz una copia de nuestros archivos meta-example.html, script.js y style.css, y guárdalos en un mismo directorio de tu ordenador. Asegúrate de que se guardan con los nombres y extensiones correctas.
    2. -
  2. Abre el archivo HTML tanto en tu navegador como en tu editor de texto.
    3. -
  3. Sigue la información facilitada anteriormente y añade los elementos <link> y <script> a tu HTML para aplicarle CSS y JavaScript.
    4. -
- -

Si lo has hecho correctamente, al guardar tu HTML y actualizar tu navegador, deberías poder ver que las cosas han cambiado:

- -

Ejemplo que muestra una página con CSS y JavaScript aplicados. El CSS ha hecho que la página se vuelva verde, mientras que JavaScript ha agregado una lista dinámica a la página

- - - -
-

Nota: Si te encallas en este ejercicio y no logras ejecutar los archivos CSS/JS, comprueba tu página de ejemplo css-and-js.html.

-
- -

Establecer el idioma principal del documento

- -

Por último, merece la pena mencionar que puedes (y realmente deberías) especificar el idioma de tu página. Esto se puede hacer añadiendo el atributo {{web.link("/es/docs/Web/HTML/Global_attributes/lang", "lang")}} a la etiqueta de apertura del HTML (como se ve en el meta-example.html y se muestra abajo).

- -
<html lang="es-MX">
- -

Esto resulta útil en muchos sentidos. Los motores de búsqueda indizarán tu documento HTML de modo más efectivo si estableces el idioma (permitiendo, por ejemplo, que aparezca correctamente en los resultados del idioma especificado), y resulta útil para que las personas con discapacidad visual que utilizan los lectores de pantalla (por ejemplo, la palabra «six» existe tanto en francés como en inglés, pero su pronunciación es diferente).

- -

También puedes establecer que las subsecciones de tu documento se reconozcan en diferentes idiomas. Por ejemplo, podemos establecer que nuestra sección de japonés se reconozca como japonés, de la siguiente manera:

- -
<p>Ejemplo Japonés: <span lang="ja">ご飯が熱い。</span>.</p>
- -

El estándar {{interwiki("wikipedia", "ISO_639-1")}} define estos códigos. Puedes encontrar más información sobre ello en Etiquetas de idioma en HTML y XML.

- -

Resumen

- -

Esto marca el final de nuestra guía rápida del {{Glossary("head")}} de HTML — aún hay muchas más cosas que puedes hacer aquí, pero una guía exhaustiva puede ser aburrida y confusa a estas alturas, ¡y nosotros queremos darte una idea de las cuestiones más comunes con las que te encontrarás aquí por ahora! En el siguiente artículo veremos los fundamentos de texto de HTML.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

- -

En este módulo

- - diff --git a/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__enlaces/index.html b/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__enlaces/index.html deleted file mode 100644 index 0e8dc1bfaf..0000000000 --- a/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__enlaces/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: 'Prueba tus habilidades: Enlaces' -slug: 'Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces' -translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links' ---- -
{{learnsidebar}}
- -

El objetivo de esta pueba de habilidad es evaluar si has comprendido nuestro artículo Creando hipervínculos.

- -
-

Nota: Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.
-
- Si te atascas, pide ayuda — mira la sección {{anch("Evaluación o ayuda adicional")}} al final de esta página.

-
- -

Enlaces 1

- -

En esta tarea necesitamos tu ayuda para completar los enlaces en nuestra página de información sobre Ballenas:

- - - -
-

Nota: El primer enlace en el ejemplo tiene el atributo target="_blank" , así que cuando haces click en él, abre la página en una pestaña nueva. Esto no es estrictamente una buena práctica, pero lo hemos hecho aquí para que la página no se abra en el <iframe> incrustado, ¡eliminando el código de ejemplo en el proceso!

-
- -

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links1.html", '100%', 700)}}

- -
-

Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Enlaces 2

- -

En esta tarea queremos que completes los cuatro enlaces para que se dirijan al lugar apropiado:

- - - -
-

Nota: Los primeros tres enlaces en el ejemplo tienen el atributo target="_blank" especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del <iframe> incrustado, ¡eliminando el código de ejemplo en el proceso!

-
- -

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links2.html", '100%', 700)}}

- -
-

Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Enlaces 3

- -

Los siguientes enlaces dirigen a una página informativa acerca de los Narvales, una dirección de correo electrónico de soporte, y un documento PDF cuyo tamaño es 4MB. En esta tarea queremos que:

- - - -
-

Nota: Los primeros tres enlaces en el ejemplo tienen el atributo target="_blank" especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del <iframe> incrustado, ¡eliminando el código de ejemplo en el proceso!

-
- -

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links3.html", '100%', 700)}}

- -
-

Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Evaluación o ayuda adicional

- -

Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.

- -

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

- -
    -
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.
    2. -
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: -
      -
    • Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de texto básico HTML 1".
      • -
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • -
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • -
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • -
    -
    3. -
diff --git "a/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__texto_b\303\241sico_html/index.html" "b/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__texto_b\303\241sico_html/index.html" deleted file mode 100644 index f35a083987..0000000000 --- "a/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__texto_b\303\241sico_html/index.html" +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: 'Prueba tus habilidades: Texto básico HTML' -slug: 'Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Texto_básico_HTML' -tags: - - Aprendizaje - - HTML - - Principiante - - Prueba tus habilidades - - Texto -translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics' ---- -
{{learnsidebar}}
- -

El objetivo de esta prueba de habilidad es evaluar si has comprendido el artículo Fundamentos de texto en HTML.

- -
-

Nota: Puedes intentar resolverlo en los editores interactivos de más abajo, sin embargo puede ser muy úytil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.
-
- Si te atascas, entonces pídenos ayuda — busca en la sección {{anch("Assessment or further help")}} al final de esta página.

-
- -

Texto básico HTML 1

- -

En esta tarea queremos que etiquetes el HTML entregado utilizando elementos semánticos de encabezado y párrafo. Intenta actualizando el código más abajo para recrear el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1.html", '100%', 700)}}

- -
-

Descarga el punto de inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Texto básico HTML 2

- -

En esta tarea necesitamos que cambies la primera lista no marcada en una lista no ordenada, y la segunda en una lista ordenada.

- -

Intenta actualizando el código más abajo para recrear el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2.html", '100%', 700)}}

- -
-

Descarga el punto de inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Texto básico HTML 3

- -

En esta tarea se te entrega un párrafo, y tu objetivo es usar algunos elementos en línea para marcar algunas palabras con importancia, y otras con énfasis

- -

Intenta actualizando el código más abajo para recrear el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3.html", '100%', 700)}}

- -
-

Descarga el punto de inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Evaluación o ayuda adicional

- -

Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.

- -

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

- -
    -
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.
    2. -
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: -
      -
    • Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de texto básico HTML 1".
      • -
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • -
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • -
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • -
    -
    3. -
diff --git a/files/es/learn/html/introduccion_a_html/test_your_skills_colon__advanced_html_text/index.html b/files/es/learn/html/introduccion_a_html/test_your_skills_colon__advanced_html_text/index.html deleted file mode 100644 index f29638eb81..0000000000 --- a/files/es/learn/html/introduccion_a_html/test_your_skills_colon__advanced_html_text/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: 'Pon a prueba tus habilidades: texto HTML avanzado' -slug: 'Learn/HTML/Introduccion_a_HTML/Test_your_skills:_Advanced_HTML_text' -translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text' ---- -
{{learnsidebar}}
- -

El objetivo de esta prueba de habilidad es evaluar si ha entendido nuestras   formato de texto avanzado articulo.

- -
-

NOTA:Puede probar soluciones en los editores interactivos a continuación; sin embargo, puede resultar útil descargar el código y utilizar una herramienta en línea como  CodePen, jsFiddle, o Glitch trabajar en las tareas.
-
- Si se atasca, pídanos ayuda; consulte la {{anch("Assessment or further help")}} section at the bottom of this page.

-
- -

Texto HTML avanzado 1

- -

En esta tarea, queremos que convierta los animales proporcionados y sus definiciones en una lista de descripción.
-
- Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/advanced-text/advanced-text1.html", '100%', 700)}}

- -
-

Descarga el puno de partida para esta tarea to work in your own editor or in an online editor.

-
- -

Texto HTML avanzado 2

- -

En esta tarea, queremos que agregue algo de semántica al HTML proporcionado de la siguiente manera:

- - - -

Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/advanced-text/advanced-text2.html", '100%', 700)}}

- -
-

Descarga el punto de partida para esta tarea para trabajar en su propio editor o en un editor en línea.

-
- -

Evaluación o ayuda adicional

- -
-
Puede practicar estos ejemplos en los editores interactivos anteriores.
-
-Si desea que se evalúe su trabajo, o está atascado y desea pedir ayuda:
- -
-
- -
    -
  1. Pon tu trabajo en un editor que se pueda compartir en línea, como  CodePen, jsFiddle, o Glitch. Puede escribir el código usted mismo o utilizar los archivos de punto de inicio vinculados en las secciones anteriores.
    2. -
  2. Escriba una publicación solicitando evaluación y / o ayuda en el  MDN Discourse forum Learning category. Tu publicación debe incluir: -
      -
    • Un título descriptivo como "Se busca evaluación para la prueba de habilidad de texto avanzado HTML 1".
      • -
    • Detalles de lo que ya ha probado y lo que le gustaría que hiciéramos, p. Ej. si está atascado y necesita ayuda, o quiere una evaluación.
      • -
    • Un enlace al ejemplo que desea evaluar o con el que necesita ayuda, en un editor que se puede compartir en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica para entrar: es muy difícil ayudar a alguien con un problema de codificación si no puede ver su código.
      • -
    • Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que desea ayuda.
      • -
    -
    3. -
diff --git a/files/es/learn/html/introduccion_a_html/texto/index.html b/files/es/learn/html/introduccion_a_html/texto/index.html deleted file mode 100644 index 912acb7dfe..0000000000 --- a/files/es/learn/html/introduccion_a_html/texto/index.html +++ /dev/null @@ -1,970 +0,0 @@ ---- -title: Fundamentos de texto en HTML -slug: Learn/HTML/Introduccion_a_HTML/texto -tags: - - CodingScripting - - Encabezados - - Estructuras - - Guía - - HTML - - Introducción a HTML - - Novato - - Principiante - - Párrafos - - Texto - - aprende - - semántica -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
- -

Una de las principales funciones de HTML es dar al texto estructura y significado (también conocido como {{Glossary("semantics", "semántica")}}), de forma que un navegador pueda mostrarlo correctamente. Este articulo explica la forma en que se puede usar {{Glossary("HTML")}} para estructurar una página de texto añadiendo encabezados y párrafos, enfatizando palabras, creando listas y más.

- - - - - - - - - - - - -
Prerrequisitos:Estar familiarizado con el HTML básico, que se expone en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}.
Objetivo:Aprender a marcar una página de texto básica para darle estructura y significado, incluidos párrafos, encabezados, listas, efectos de énfasis y citas.
- -

Conceptos básicos: Encabezados y párrafos

- -

La mayor parte del texto estructurado está compuesto por encabezados y párrafos, independientemente de si lees una historia, un periódico, un libro de texto, una revista, etc.

- -

Un ejemplo de la portada de un periódico, que muestra el uso de un encabezado, subtítulos y párrafos de nivel superior.

- -

El contenido estructurado simplifica la experiencia en la lectura y se disfruta más.

- -

En HTML, cada párrafo tiene que estar delimitado por un elemento {{HTMLElement("p")}}, como en este ejemplo:

- -
<p>Soy un párrafo, ¡desde luego que lo soy!</p>
- -

Cada sección tiene que estar delimitada por un elemento de encabezado:

- -
<h1>Yo soy el título de la historia</h1>
- -

Hay seis elementos de encabezado: {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} y {{HTMLElement("h6")}}. Cada elemento representa un nivel de contenido diferente en el documento; <h1> representa el título principal, <h2> representa el subtítulo, <h3> representa el subtítulo del subtítulo, y así sucesivamente.

- -

Cómo establecer la estructura jerárquica

- -

Por ejemplo, en esta historia, <h1> representa el título de la historia, <h2> representará el título de cada capítulo y <h3> las diferentes secciones del capítulo, y así sucesivamente.

- -
<h1>El agujero aplastante</h1>
-
-<p>Por Chris Mills</p>
-
-<h2>Capítulo 1: La oscura noche</h2>
-
-<p>Era una noche oscura. En algún lugar, un búho ululó. La lluvia azotó el ...</p>
-
-<h2>Capítulo 2: El silencio eterno</h2>
-
-<p>Nuestro protagonista ni susurrar pudo al ver esa sombría figura ...</p>
-
-<h3>El espectro habla</h3>
-
-<p>Habían pasado varias horas más, cuando de repente el espectro se incorporó y exclamó: "¡Por favor, ten piedad de mi alma!"</p>
- -

Realmente es a tu elección lo que cada elemento involucrado represente, siempre y cuando la jerarquía tenga sentido. Solo es necesario que tengas en cuenta unas pocas buenas prácticas mientras creas la estructura:

- - - -

¿Por qué necesitamos estructura?

- -

Para responder a esta cuestión, echemos un vistazo a text-start.html; el apartado inicial de nuestro ejemplo en curso para este artículo (una buena receta de hummus). Debes guardar una copia de este archivo en tu ordenador porque después la necesitarás para los ejercicios prácticos. El cuerpo (<body>) de este documento incluye varios elementos de contenido que no están marcados de ninguna manera pero están separados por saltos de línea (se ha pulsado Intro/Retorno para continuar en la siguiente línea).

- -

Sin embargo, cuando abres el documento en tu navegador, verás que el texto aparece... ¡como una masa enorme!

- -

Una página web que muestra un muro de texto sin formato, porque no hay elementos en la página para estructurarlo.

- -

Esto se debe a que no hay elementos que den estructura al contenido, por lo que el navegador no sabe qué es un encabezado y qué es un párrafo. Además:

- - - -

Por lo tanto, debemos dar a nuestro contenido una estructura definida.

- -

Aprendizaje Activo: Dar estructura a nuestro contenido

- -

Pasemos directamente a un ejemplo real. En el ejemplo de abajo, añade elementos al texto en bruto en el campo Código editable para que en el campo Salida en vivo aparezcan como un encabezado y dos párrafos.

- -

Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si encallas, pulsa el botón Mostrar solución para ver la respuesta...

- - - -

{{ EmbedLiveSample('Código_reproducible', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

¿Por qué necesitamos semántica?

- -

Contamos con la semántica para todo lo que nos rodea. Nos basamos en experiencias previas para conocer la función de cada objeto cotidiano; cuando miramos un objeto, sabemos cuál debe ser su función. Entonces, por ejemplo, esperamos que un semáforo en rojo signifique "alto" y que un semáforo en verde signifique "avance". Las cosas se pueden complicar muy rápidamente si se aplica la semántica incorrecta. (¿Algún país usa rojo para significar "avance"? Esperemos que no).

- -

De manera similar, debemos asegurarnos de que utilizamos los elementos adecuados y damos a nuestro contenido el significado y función correctos y la apariencia adecuada. En este mismo sentido, el elemento {{HTMLElement("h1")}} es un elemento semántico que da al texto al que delimita la función (o significado) de un titular de primer nivel en tu página.

- -
<h1>Este es un titular de primer nivel</h1>
- -

De manera predeterminada, el navegador le asignará una fuente de gran tamaño para darle el aspecto de un titular (aunque se le podrá dar el estilo que se quisiera usando CSS). Lo más importante es que su valor semántico se va a usar de diferente manera, por ejemplo, por los motores de búsqueda y los lectores de pantalla (como se mencionó antes).

- -

Por otra parte, podrías hacer que cualquier elemento parezca un titular de primer rango. Considera lo siguiente:

- -
<span style="font-size: 32px; margin: 21px 0;">¿Es este un titular de primer rango?</span>
- -

Este es un elemento {{HTMLElement("span")}}. No tiene semántica. Se usa para delimitar contenido cuando se le quiere aplicar CSS (o tratarlo con JavaScript) sin proporcionarle ningún significado extra (encontrarás más información sobre este tipo de elemento más adelante en el curso). Hemos aplicado CSS a este elemento para que parezca un titular de primer nivel, pero al no tener valor semántico, no tiene ninguna de las ventajas añadidas que hemos descrito antes. Es una buena idea usar el elemento HTML apropiado para cada tarea.

- -

Listas

- -

Ahora volvamos nuestra atención hacia las listas. Las listas están en todos los aspectos de nuestra vida: desde la lista de compras a la lista de instrucciones que sigues inconscientemente para llegar a casa todos los días, o las listas de instrucciones que sigues en estos tutoriales. Las listas están en todos lados en la web también y hay tres diferentes tipos de las que nos vamos a ocupar.

- -

Listas no ordenadas

- -

Las listas no ordenadas se usan para marcar listas de artículos cuyo orden no es importante. Tomemos como ejemplo una lista de compras:

- -
leche
-huevos
-pan
-hummus
- -

Cada lista desordenada comienza con un elemento {{HTMLElement("ul")}} («unordered list») que delimita todos los elementos de la lista:

- -
<ul>
-leche
-huevos
-pan
-hummus
-</ul>
- -

El siguiente paso es delimitar cada artículo de la lista con un elemento {{HTMLElement("li")}} («list item»).

- -
<ul>
-  <li>leche</li>
-  <li>huevos</li>
-  <li>pan</li>
-  <li>hummus</li>
-</ul>
- -

Aprendizaje activo: marcar una lista no ordenada

- -

Edita el siguiente ejemplo para crear tu propia lista HTML no ordenada.

- - - -

{{ EmbedLiveSample('Código_reproducible_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Listas ordenadas

- -

Las listas ordenadas son aquellas en las que el orden de los elementos sí importa. Tomemos como ejemplo una lista de instrucciones para seguir un itinerario:

- -
Conduce hasta el final de la calle
-Gira a la derecha
-Sigue derecho por las dos primeras glorietas
-Gira a la izquierda en la tercer glorieta
-El colegio está a la derecha, 300 metros más adelante
- -

La estructura de marcado es la misma que para las listas no ordenadas, excepto que debes delimitar los elementos de la lista con una etiqueta {{HTMLElement("ol")}} («ordered list»), en lugar de <ul>:

- -
<ol>
-  <li>Conduce hasta el final de la calle</li>
-  <li>Gira a la derecha</li>
-  <li>Sigue derecho por las dos primeras glorietas</li>
-  <li>Gira a la izquierda en la tercer glorieta</li>
-  <li>El colegio está a tu derecha, 300 metros más adelante</li>
-</ol>
- -

Aprendizaje activo: Marcar una lista ordenada

- -

Edita el siguiente ejemplo para crear tu propia lista ordenada en HTML.

- - - -

{{ EmbedLiveSample('Código_reproducible_3', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Aprendizaje activo: marcar la página de tu receta

- -

Llegados a este punto del artículo, tienes toda la información necesaria para marcar la página de ejemplo con tu receta. Puedes escoger entre guardar una copia local del archivo inicial text-start.html y trabajar en él, o hacerlo sobre el ejemplo editable de abajo. Probablemente sea mejor trabajar en tu copia local porque podrás guardar tu progreso, mientras que si lo haces sobre el ejemplo editable, los cambios se perderán la próxima vez que cargues la página. Ambos métodos tienen pros y contras.

- - - -

{{ EmbedLiveSample('Código_reproducible_4', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Si encallas, siempre puedes pulsar el botón Mostrar solución o comprobar el ejemplo completo text-complete.html en nuestro repositorio de Github.

- -

Listas anidadas

- -

Es perfectamente correcto anidar una lista dentro de otra. Posiblemente quieras tener subelementos bajo elementos de rango superior. Tomemos la segunda lista de nuestro ejemplo de la receta:

- -
<ol>
-  <li>Pela el ajo y picarlo en trozos gruesos.</li>
-  <li>Retira las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li>
-  <li>Mete todos los alimentos en un procesador de alimentos.</li>
-  <li>Pica todos los ingredientes hasta conseguir una pasta.</li>
-  <li>Si deseas un hummus "grueso", procésalo corto tiempo.</li>
-  <li>Pica durante más tiempo si se desea obtener un hummus "suave".</li>
-</ol>
- -

Puesto que los dos últimos elementos están estrechamente relacionados con el elemento anterior (se leen como subinstrucciones u opciones que encajan bajo ese elemento), puede tener sentido anidarlos dentro de su propia lista no ordenada e introducir esa lista bajo el cuarto elemento. Tendría el siguiente aspecto:

- -
<ol>
-  <li>Pela el ajo y picarlo en trozos gruesos.</li>
-  <li>Retira las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li>
-  <li>Mete todos los alimentos en un procesador de alimentos.</li>
-  <li>Procesa todos los ingredientes hasta conseguir una pasta.
-    <ul>
-      <li>Si deseas un hummus "grueso", procésalo corto tiempo.</li>
-      <li>Pica durante más tiempo si se desea obtener un hummus "suave".</li>
-    </ul>
-  </li>
-</ol>
- -

Vuelve al ejemplo anterior y reescribe la lista de este modo.

- -

Énfasis e importancia

- -

En el lenguaje humano, a menudo enfatizamos ciertas palabras para alterar el significado de una frase, y a menudo queremos destacar ciertas palabras como importantes o diferentes en algún sentido. HTML nos dota de diversos elementos semánticos que nos permiten destacar contenido textual con tales efectos, y en esta sección veremos los más comunes.

- -

Énfasis

- -

Cuando queremos dar énfasis al lenguaje hablado, acentuamos ciertas palabras y así alteramos sutilmente el significado de lo que decimos. De manera similar, en el lenguaje escrito ponemos palabras en cursiva para destacarlas. Por ejemplo, las dos siguientes frases tienen diferente significado:

- -

Me alegro de que no llegues tarde.

- -

Me alegro de que no llegues tarde.

- -

La primera frase suena aliviada porque la persona no llega tarde. Por el contrario, la segunda suena sarcástica y un tanto pasivo-agresiva, expresa molestia porque la persona ha llegado algo tarde.

- -

En HTML usamos el elemento {{HTMLElement("em")}} («emphasis») para marcar estos casos. El documento logra entonces transmitir una lectura más interesante y además así lo reconocen los lectores de pantalla, que lo expresan con un diferente tono de voz. El navegador, de manera predeterminada, aplica el estilo de letra itálica, pero no debes utilizar esta etiqueta solamente para establecer el estilo de letra itálica. Para usar ese estilo, debes utilizar únicamente la etiqueta del elemento {{HTMLElement("span")}} y algo de CSS u otra etiqueta con el elemento {{HTMLElement("i")}} (ve abajo).

- -
<p>Me <em>alegro</em> de que no llegues <em>tarde</em>.</p>
- -

Importancia fuerte

- -

Para enfatizar palabras importantes al hablar solemos acentuarlas, y al escribir lo hacemos en estilo negrita. Por ejemplo:

- -

Este líquido es altamente tóxico.

- -

Cuento contigo. ¡No llegues tarde!

- -

En HTML usamos el elemento {{HTMLElement("strong")}} (importancia fuerte) para marcar tales expresiones. El documento resulta entonces más útil, y de nuevo los lectores de pantalla reconocen estos elementos y el tono de voz cambia a uno más fuerte. El estilo negrita es el que aplican los navegadores por omisión, pero no debes usar esta etiqueta solamente para aplicar este estilo. Para hacer eso usa el elemento {{HTMLElement("span")}} y CSS, o un elemento {{HTMLElement("b")}} (ve más abajo).

- -
<p>Este líquido es <strong>altamente tóxico</strong>.</p>
-
-<p>Cuento contigo. <strong>¡No llegues tarde!</strong></p>
- -

Puedes anidar elementos de énfasis dentro de elementos de importancia y viceversa si lo deseas:

- -
<p>Este líquido es <strong>altamente tóxico</strong> —
-si lo bebes, <strong>podrías <em>morir</em></strong>.</p>
- -

Aprendizaje activo: ¡Seamos importantes!

- -

En esta sección de aprendizaje activo te proporcionamos un ejemplo editable. Practica un poco añadiendo algo de énfasis e importancia a las palabras que creas que lo necesitan.

- - - -

{{ EmbedLiveSample('Código_reproducible_5', 700, 400, "", "", "hide-codepen-jsfiddle") }}

- -

Cursiva, negrita, subrayado...

- -

Los elementos que hemos comentado hasta ahora tienen asociada una semántica clara. La situación con {{HTMLElement("b")}} (negrita o «bold»), {{HTMLElement("i")}} (cursiva o «italic») y{{HTMLElement("u")}} (subrayado o «underline») es algo más complicada. Surgieron para que las personas pudieran escribir textos en negrita, cursiva o subrayado en un tiempo en el que pocos navegadores o ninguno admitían el CSS. Elementos como estos, que solo afectan a la presentación y no a la semántica, se conocen como elementos de presentación y no se deberían usar porque, como hemos visto, la semántica es muy importante para la accesibilidad y el SEO, entre otros aspectos.

- -

HTML5 redefinió los elementos <b>, <i> y <u> con roles semánticos nuevos un tanto confusos.

- -

Esta es la regla de oro: el uso de <b>, <i> o <u> resulta adecuado cuando transmiten el significado que suele transmitir el uso tradicional de las negritas, itálicas o el subrayado, si no hay ningún otro elemento que resulte más adecuado. Sin embargo, siempre resulta crítico mantener una actitud orientada a la accesibilidad. El concepto de itálica no es demasiado útil para las personas que usan lectores de pantalla o para las personas que utilizan un sistema de escritura distinto del alfabeto latino.

- - - -
-

Una observación prudente acerca del subrayado: La gente suele asociar estrechamente el subrayado con los hipervínculos. Por ello en la web es mejor reservar el subrayado para los enlaces. Utiliza el elemento {{HTMLElement('u')}} cuando resulte apropiado semánticamente, pero considera usar CSS para cambiar el subrayado predeterminado por algo más adecuado en la web. El siguiente ejemplo ilustra cómo lo puedes hacer.

-
- -
<!-- nombres científicos -->
-<p>
-  El colibrí garganta de rubí (<i>Archilochus colubris</i>)
-  es el colibrí más común en el este de América del Norte.
-</p>
-
-<!-- extranjerismos -->
-<p>
-  El menú era un mar de palabras exóticas como <i lang="uk-latn">vatrushka</i>,
-  <i lang="id">nasi goreng</i> y <i lang="fr">soupe à l'oignon</i>.
-</p>
-
-<!-- un error ortográfico reconocido -->
-<p>
-  Algún día aprenderé a deletrear mejor.
-</p>
-
-<!-- Palabras clave destacadas en una serie de instrucciones -->
-<ol>
-  <li>
-    <b>Corta</b> dos piezas de la hogaza de pan.
-  </li>
-  <li>
-    <b>Inserta</b> una rodaja de tomate y una hoja de
-    lechuga entre las rebanadas de pan.
-  </li>
-</ol>
- -

¡Pon a prueba tus habilidades!

- -

Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encontrarás más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics", "Pon a prueba tus habilidades: Prueba de conocimientos básicos de HTML")}}.

- -

Resumen

- -

¡Eso es todo por ahora! Este artículo debería haberte dado una buena idea de cómo comenzar a marcar texto en HTML y te ha presentado algunos de los elementos más importantes en este ámbito. Hay muchos más elementos semánticos para desarrollar en esta área, y veremos muchos más en nuestro artículo {{web.link("/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}, más adelante en el curso. En el siguiente artículo, veremos en detalle cómo {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "crear hipervínculos")}}, posiblemente el más importante elemento en la web.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

- -

En este módulo

- - diff --git a/files/es/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/es/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..7e96d3c6d7 --- /dev/null +++ b/files/es/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,695 @@ +--- +title: Formateo de texto avanzado +slug: Learn/HTML/Introduccion_a_HTML/Advanced_text_formatting +tags: + - CodingScripting + - Guía + - HTML + - Lista de descripción + - Novato + - Principiante + - Texto + - abreviatura + - aprende + - cita + - semántica +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
+ +

Hay muchos otros elementos en HTML para dar formato al texto, que no expusimos en el artículo {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}. Los elementos descritos en este artículo son menos conocidos, pero aún así es muy útil conocerlos (no obstante, no es una lista completa de ninguna manera). Aquí aprenderás cómo marcar citas, listas de descripción, código de computadora y otro texto relacionado, subíndices y superíndices, información de contacto y mucho más.

+ + + + + + + + + + + + +
Prerrequisitos:Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}.
Objetivo:Aprender a utilizar elementos HTML menos conocidos para marcar características semánticas avanzadas.
+ +

Listas de descripciones

+ +

En los fundamentos del texto HTML, explicamos cómo {{web.link("/es/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists", "marcar listas básicas")}} en HTML, pero no mencionamos el tercer tipo de lista con la que te encontrarás ocasionalmente: listas de descripción. El propósito de estas listas es marcar un conjunto de elementos y sus descripciones asociadas, como términos y definiciones, o preguntas y respuestas. Veamos un ejemplo de un conjunto de términos y definiciones:

+ +
soliloquio
+En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).
+monólogo
+En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.
+aparte
+En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.
+ +

Las listas de descripción utilizan un contenedor diferente al de los otros tipos de listas — {{HTMLElement("dl")}} («description list» o lista de descripciones); además, cada término está envuelto en un elemento {{HTMLElement("dt")}} («description term» o término a describir), y cada descripción está envuelta en un elemento {{HTMLElement("dd")}} («description definition» o definición de descripción). Para redondear esta información veamos un ejemplo:

+ +
+
<dl>
+  <dt>soliloquio</dt>
+  <dd>En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).</dd>
+  <dt>monólogo</dt>
+  <dd>En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.</dd>
+  <dt>aparte</dt>
+  <dd>En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</dd>
+</dl>
+
+ +

Los estilos predeterminados del navegador mostrarán listas de descripciones con las descripciones sangradas un poco más que los términos.

+ +

{{ EmbedLiveSample('listas-de-descripciones-ejemplo-activo-1', '100%', '285px', '', '', 'hide-codepen-jsfiddle') }}

+ +

Ten en cuenta que un solo término puede tener múltiples descripciones, por ejemplo:

+ +
+
<dl>
+  <dt>aparte</dt>
+  <dd>En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</dd>
+  <dd>Si la obra es impresa, es una sección de contenido que se relaciona con el tema, pero no encaja directamente en el flujo principal de contenido, de modo que se presenta por separado (a menudo en una caja de texto en el margen).</dd>
+</dl>
+
+ +

{{ EmbedLiveSample('listas-de-descripciones-ejemplo-activo-2', '100%', '193px', '', '', 'hide-codepen-jsfiddle') }}

+ +

Aprendizaje activo: Marcar un conjunto de definiciones

+ +

Es hora de practicar las listas de descripciones; agrega elementos al texto sin formato en el campo Código editable para que aparezca como una lista de descripción en el campo Salida en vivo. Puedes usar tus propios términos y descripciones si lo deseas.

+ +

Si cometes un error, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si te quedas realmente encallado, pulsa el botón Mostrar solución para ver una buena propuesta.

+ + + +

{{ EmbedLiveSample('Código_reproducible', 700, 350, "", "", "hide-codepen-jsfiddle") }}

+ +

Citas

+ +

HTML también dispone de elementos para el marcado de citas; cual elemento utilices depende de si estás marcando la cita como un bloque o como un elemento en línea.

+ +

Cita en bloque independiente (blockquote)

+ +

Si una sección de contenido a nivel de bloque (ya sea un párrafo, varios párrafos, una lista, etc.) se cita en otro lugar, debes envolverla dentro de un elemento {{HTMLElement("blockquote")}} para indicarlo, e incluye una URL que apunte a la fuente de la cita dentro de un atributo {{HTMLAttrxRef("cite", "blockquote")}}. Por ejemplo, el siguiente marcado tomado de la página del elemento <blockquote> de MDN:

+ +
<p>El <strong>elemento HTML <code>&lt;blockquote&gt;</code></strong> (o <em>elemento HTML de cita
+en bloque independiente</em>) indica que el texto al que delimita es una cita ampliada.</p>
+ +

Para convertir esto en una cita en bloque independiente, simplemente harías lo siguiente:

+ +
+
<p>A continuación se muestra una cita en bloque independiente...</p>
+<blockquote cite="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote">
+  <p>El <strong>elemento HTML <code>&lt;blockquote&gt;</code></strong> (o <em>elemento HTML de cita
+  en bloque independiente</em>) indica que el texto al que delimita es una cita ampliada.</p>
+</blockquote>
+
+ +

El estilo predeterminado del navegador lo mostrará como un párrafo con sangría, para indicar que se trata de una cita; el párrafo anterior a la cita sirve para demostrarlo.

+ +

{{EmbedLiveSample('blockquote-ejemplo-en-vivo', '100%', '117px', '', '', 'hide-codepen-jsfiddle')}}

+ +

Citas en línea

+ +

Las citas en línea funcionan exactamente de la misma manera, excepto que usan el elemento {{HTMLElement("q")}}. Por ejemplo, el siguiente fragmento de marcado contiene una cita <q> de la página MDN:

+ +
<p>El elemento de cita — <code>&lt;q&gt;</code> — se <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">utiliza en
+para citas breves que no requieren saltos de párrafo.</q></p>
+ +

El estilo predeterminado del navegador lo representará como texto normal entre comillas para indicar una cita, así:

+ +

{{ EmbedLiveSample('Citas_en_línea', '100%', '78px', '', '', 'hide-codepen-jsfiddle')}}

+ +

Citas

+ +

El contenido del atributo {{HTMLAttrxRef("cite", "blockquote")}} suena útil, pero desafortunadamente los navegadores, lectores de pantalla, etc. no hacen mucho con él. No hay forma de hacer que el navegador muestre el contenido de cite sin escribir tu propia solución usando JavaScript o CSS. Si deseas que la fuente de la cita esté disponible en la página, lo debes hacer en el texto a través de un enlace o de alguna otra forma apropiada.

+ +

Hay un elemento {{HTMLElement("cite")}}, pero está destinado a contener el título del recurso que se cita, p. ej. el nombre del libro. Sin embargo, no hay razón por la que no puedas vincular el texto dentro de <cite> a la fuente de la cita de alguna manera:

+ +
<p>De acuerdo con <a href="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote">
+<cite>página de citas en bloque independiente de MDN</cite></a>:
+</p>
+
+<blockquote cite="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote">
+  <p>El <strong>elemento HTML <code>&lt;blockquote&gt;</code></strong> (o <em>elemento HTML de cita
+  en bloque independiente</em>) indica que el texto al que delimita es una cita ampliada.</p>
+</blockquote>
+
+<p>El elemento de cita — <code>&lt;q&gt;</code> — se <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">utiliza en
+citas breves que no requieren saltos de párrafo.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
+<cite>página q de MDN</cite></a>.</p>
+ +

Las citas se escriben en cursiva de forma predeterminada.

+ +

{{ EmbedLiveSample('Citas_2', '100%', '179px', '', '', 'hide-codepen-jsfiddle') }}

+ +

Aprendizaje activo: ¿Quién dijo eso?

+ +

¡Es hora de otro ejemplo de aprendizaje activo! En este ejemplo, nos gustaría que:

+ +
    +
  1. Conviertas el párrafo del medio en una cita en bloque independiente, que incluya un atributo cite.
    2. +
  2. Conviertas "La necesidad de eliminar el diálogo interno negativo" en el tercer párrafo en una cita en línea e incluya un atributo cite.
    3. +
  3. Envuelvas el título de cada fuente en etiquetas <cite> y conviertas cada una en un enlace a esa fuente.
    4. +
+ +

Las fuentes de citación que necesitas son:

+ + + +

Si cometes un error, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si te quedas realmente encallado, pulsa el botón Mostrar solución para ver una buena propuesta.

+ + + +

{{ EmbedLiveSample('Código_reproducible_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}

+ +

Abreviaturas

+ +

Otro elemento bastante común que encontrarás cuando busques en la Web es {{HTMLElement("abbr")}} — se usa para envolver una abreviatura o acrónimo, y proporcionar una expansión completa del término (incluida dentro de un atributo {{HTMLAttrxRef("title")}}. Veamos un par de ejemplos:

+ +
+
<p>Usamos <abbr title="Lenguaje de marcado de hipertexto">HTML</abbr> para estructurar nuestros documentos web.</p>
+
+<p>Creo que el <abbr title="Reverendo"">Rev.</abbr> Green lo hizo en la cocina con la motosierra.</p>
+
+ +

Estos saldrán con un aspecto similar a este (la expansión aparecerá en una descripción emergente cuando se coloque el cursor sobre el término):

+ +

{{EmbedLiveSample('ejemplo-de-abreviaturas-en-vivo', '100%', '94px', '', '', 'hide-codepen-jsfiddle')}}

+ +
+

Nota: Hay otro elemento, {{HTMLElement("acronym")}}, que básicamente hace lo mismo que <abbr>, y se diseñó específicamente para acrónimos en lugar de las abreviaturas. Sin embargo, este ha caído en desuso — no era compatible con los navegadores ni con <abbr>, y <abbr> tiene una función tan similar que se consideró inútil conservar ambos. Solo utiliza <abbr>.

+
+ +

Aprendizaje activo: Marcar una abreviatura

+ +

Para esta simple tarea de aprendizaje activo, nos gustaría que simplemente marcaras una abreviatura. Puedes usar el ejemplo que encontrarás a continuación o reemplazarla por una de tu elección.

+ + + +

{{ EmbedLiveSample('Código_reproducible_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}

+ +

Marcar la información de contacto

+ +

HTML tiene un elemento para marcar la información de contacto — {{HTMLElement("address")}}. Este simplemente envuelve tus datos de contacto, por ejemplo:

+ +
<address>
+  <p>Chris Mills, Manchester, The Grim North, Reino Unido</p>
+</address>
+ +

También podrías incluir un marcado más complejo y otras formas de información de contacto, por ejemplo:

+ +
<address>
+  <p>
+    Chris Mills<br>
+    Manchester<br>
+    The Grim North<br>
+    Reino Unido
+  </p>
+
+  <ul>
+    <li>Tel: 01234 567 890</li>
+    <li>Email: me@grim-north.co.uk</li>
+  </ul>
+</address>
+ +

Ten en cuenta que algo como esto también estaría bien, si la página vinculada contuviera la información de contacto:

+ +
<address>
+  <p>Página escrita por <a href="../authors/chris-mills/">Chris Mills</a>.</p>
+</address>
+ +

Superíndice y subíndice

+ +

En ocasiones, necesitarás utilizar superíndice y subíndice al marcar elementos como fechas, fórmulas químicas y ecuaciones matemáticas para que tengan el significado correcto. Los elementos {{HTMLElement("sup")}} y {{HTMLElement("sub")}} se ocupan de ello. Por ejemplo:

+ +
<p>Nací el 25<sup>th</sup> de mayo de 2001.</p>
+<p>La fórmula química de la cafeína es C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+<p>If x<sup>2</sup> es 9, x debe ser igual 3 o -3.</p>
+ +

La salida de este código se ve así:

+ +

{{ EmbedLiveSample('Superíndice_y_subíndice', '100%', '141px', '', '', 'hide-codepen-jsfiddle') }}

+ +

Representación del código informático

+ +

Hay una serie de elementos disponibles para marcar código informático usando HTML:

+ + + +

Veamos algunos ejemplos. Deberías intentar jugar con estos (intenta obtener una copia de nuestro archivo de ejemplo other-semantics.html):

+ +
<pre><code>var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('¡Guau!, ¡deja de apretar!');
+}</code></pre>
+
+<p>No debes utilizar elementos de presentación como <code>&lt;font&gt;</code> y <code>&lt;center&gt;</code>.</p>
+
+<p>En el ejemplo de JavaScript anterior, <var>para</var> representa un elemento de párrafo.</p>
+
+
+<p>Selecciona todo el texto con <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
+
+<pre>$ <kbd>ping mozilla.org</kbd>
+<samp>PING mozilla.org (63.245.215.20): 56 bytes de datos
+64 bytes de 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
+ +

El código anterior se verá así:

+ +

{{ EmbedLiveSample('Representación_del_código_informático','100%',300, "", "", "hide-codepen-jsfiddle") }}

+ +

Marcar horas y fechas

+ +

HTML también proporciona el elemento {{HTMLElement("time")}} para marcar horas y fechas en un formato legible por la máquina. Por ejemplo:

+ +
<time datetime="2016-01-20">20 Enero 2016</time>
+
+ +

¿Por qué es útil esto? Bueno, hay muchas formas diferentes en que los humanos escriben las fechas. La fecha anterior se podría escribir como:

+ + + +

Pero estas diferentes formas no las pueden reconocer fácilmente las computadoras — ¿qué pasaría si quisieras tomar automáticamente las fechas de todos los eventos en una página e insertarlas en un calendario? El elemento {{HTMLElement("time")}} te permite adjuntar una fecha/hora inequívoca y legible por la máquina para este propósito.

+ +

El ejemplo básico anterior solo proporciona una fecha simple legible por la máquina, pero hay muchas otras opciones que son posibles, por ejemplo:

+ +
<!-- Fecha simple estándar -->
+<time datetime="2016-01-20">20 Enero 2016</time>
+<!-- Solo año y mes -->
+<time datetime="2016-01">Enero 2016</time>
+<!-- Solo mes y día -->
+<time datetime="01-20">20 Enero 2016</time>
+<!-- Solo tiempo, horas y minutos -->
+<time datetime="19:30">19:30</time>
+<!-- ¡También puedes hacer segundos y milisegundos! -->
+<time datetime="19:30:01.856">19:30:01.856</time>
+<!-- Fecha y hora -->
+<time datetime="2016-01-20T19:30">7.30pm, 20 Enero 2016</time>
+<!-- Fecha y hora con desplazamiento de zona horaria -->
+<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 Enero 2016 es 8.30pm en Francia</time>
+<!-- Llamar a un número de semana específico -->
+<time datetime="2016-W04">La cuarta semana de 2016</time>
+
+ +

¡Pon a prueba tus habilidades!

+ +

Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar más pruebas para verificar que has retenido esta información antes de continuar; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text", "Pon a prueba tus habilidades: Texto HTML avanzado")}}.

+ +

Resumen

+ +

Esto marca el final de nuestro estudio de la semántica del texto HTML. Ten en cuenta que lo que has visto durante este curso no es una lista exhaustiva de elementos de texto HTML — quisimos tratar de cubrir los aspectos esenciales y algunos de los más comunes que verás en la naturaleza, o al menos podrían resultarte interesantes. Para encontrar muchos más elementos HTML, puedes echarle un vistazo a nuestra {{web.link("/es/docs/Web/HTML/Element", "referencia de elementos HTML")}} (la {{web.link("/es/docs/Web/HTML/Element#Inline_text_semantics", "La sección Semántica de texto en línea")}} sería un gran lugar para comenzar). En el próximo artículo veremos los elementos HTML que usarás para estructurar las diferentes partes de un documento HTML.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/es/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..330bf0d7db --- /dev/null +++ b/files/es/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,346 @@ +--- +title: Crear hipervínculos +slug: Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks +tags: + - Aprender + - CodingScripting + - Guía + - HTML + - HTTP + - Novato + - Principiante + - Title + - URL + - enlace + - hiperenlaces + - hipervínculos + - href + - referencia absoluta + - referencia relativa + - título + - urls +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
+ +

Los hipervínculos (o enlaces) son elementos verdaderamente importantes — son los que hacen que la web sea web. Este artículo expone la sintaxis necesaria para crear un enlace, además contiene un catálogo de buenas prácticas para crearlos.

+ + + + + + + + + + + + +
Prerrequisitos:Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "fundamentos de texto HTML")}}.
Objetivo:Aprender a implementar un hipervínculo de forma efectiva y enlazar múltiples archivos.
+ +

¿Qué es un hipervínculo?

+ +

Los hipervínculos son una de las innovaciones más interesantes que ofrece la Web. Han formado parte de esta desde el principio, pero hacen que la web sea web : Los hipervínculos nos permiten vincular documentos a otros documentos o recursos, vincular a partes específicas de documentos o hacer que las aplicaciones estén disponibles en una dirección web. Prácticamente cualquier contenido web se puede convertir en un enlace que, al pulsarlo (activarlo), dirija el navegador a la dirección web a la que apunta el enlace ({{Glossary("URL")}}).

+ +
+

Nota: Una URL puede apuntar a archivos HTML, archivos de texto, imágenes, documentos de texto, archivos de audio o vídeo, y cualquier otra cosa que se pueda mostrar en la web. Si el navegador no sabe cómo manejar el archivo, te preguntará si lo quieres abrir (en cuyo caso la tarea de abrirlo y manejarlo se transferirá a la aplicación nativa instalada en el dispositivo) o si lo quieres descargar (en cuyo caso podrás ocuparte de él más tarde).

+
+ +

El sitio web de la BBC, por ejemplo, contiene una gran cantidad de enlaces que apuntan a multitud de noticias en diferentes zonas de el sitio (funcionalidad de navegación), zonas de acceso/registro (herramientas de usuario) y otras.

+ +

Portada de bbc.co.uk, que muestra muchas noticias y la funcionalidad del menú de navegación

+ +

Anatomía de un enlace

+ +

Un enlace básico se crea incluyendo el texto (o cualquier otro contenido, ve {{anch("Convertir bloques de contenido en enlaces")}}), que queramos convertir en un enlace usando un elemento ancla {{HTMLElement("a")}}, dándole un atributo {{HTMLAttrxRef("href", "a")}} (también conocido como «Hypertext Reference», «target» u objetivo) que contendrá la dirección web hacia dónde queremos que apunte el enlace.

+ +
<p>Crea un enlace a
+<a href="https://www.mozilla.org/es-ES/">la página de inicio de Mozilla</a>.
+</p>
+ +

Este código producirá el siguiente resultado:

+ +

Crea un enlace a la página de inicio de Mozilla.

+ +

Añadir información de asistencia con el atributo title

+ +

Otro atributo que posiblemente quieras agregar a tus enlaces es title. El título contiene información adicional sobre el enlace, como qué tipo de información contiene la página o cosas que debes tener en cuenta en el sitio web.

+ +
<p>Crea un enlace a
+<a href="https://www.mozilla.org/es-ES/"
+   title="El mejor lugar para encontrar más información acerca de la misión de Mozilla
+          y cómo contribuir">la página de inicio de Mozilla</a>.
+</p>
+ +

Este código producirá el siguiente resultado (el título se mostrará al pasar el ratón sobre el texto del enlace):

+ +

Crea un enlace a la página de inicio de Mozilla.

+ +
+

Nota: El título de un enlace solo será visible al pasar el ratón por encima, lo cual significa que los usuarios que naveguen usando los controles de sus teclados, o pantallas táctiles, tendrán dificultades para acceder a la información proporcionada por el título. Si la información del título es verdaderamente importante para el uso de la página, deberemos presentar el título de manera que sea accesible a todos los usuarios, por ejemplo incluyéndola como parte del texto del enlace.

+
+ +

Aprendizaje activo: crea tu propio ejemplo de enlace

+ +

Es momento del aprendizaje activo — crea un documento HTML con tu editor de código (nuestra plantilla de aprendizaje te hará la tarea más llevadera).

+ + + +

Convertir bloques de contenido en enlaces

+ +

Como hemos mencionado anteriormente, puedes convertir cualquier contenido en un enlace, incluso {{web.link("/es/docs/Learn/HTML/Getting_started#Elementos_de_bloque_y_elementos_en_línea", "Elementos de bloque y elementos en línea")}}. Si quieres convertir una imagen en un enlace, simplemente usa el elemento {{HTMLElement("a")}} encerrando el elemento {{HTMLElement("img")}} entre <a> y </a>.

+ +
<a href="https://www.mozilla.org/es-ES/">
+  <img src="mozilla-image.png" alt="Logotipo de Mozilla que dirige a la página inicial de Mozilla">
+</a>
+ +
+

Nota: Encontrarás mucho más sobre el manejo de imágenes en próximos artículos en esta web.

+
+ +

Primer acercamiento a URLs y rutas

+ +

Para comprender completamente a dónde apuntan los enlaces, necesitas conocer las URLs y las rutas. En esta sección encontrarás la información que necesitas sobre el tema.

+ +

Una localizadora uniforme de recursos (URL, de las iniciales en inglés de «Uniform Resource Locator») es simplemente una secuencia de caracteres de texto que definen donde está situado algo en la web. Por ejemplo, la página de Mozilla está ubicada en https://www.mozilla.org/es-ES/.

+ +

Las URLs utilizan rutas para encontrar los archivos. Las rutas especifican dónde se encuentra el archivo que buscas dentro del sistema de archivos. Veamos un ejemplo de una estructura de directorios (ve el directorio creating-hyperlinks).

+ +

Una estructura de directorios simple. El directorio principal se llama creating-hyperlinks y contiene dos archivos llamados index.html y contacts.html, y dos directorios llamados projects y pdfs, que contiene un archivo index.html y un archivo project-brief.pdf, respectivamente

+ +

Al directorio raíz de esta estructura de directorios lo hemos llamado creating-hyperlinks. Al trabajar en modo local en una web, habrá un directorio que contendrá toda la información. En nuestro ejemplo, dentro de la raíz, encontramos el archivo index.html y el archivo contacts.html. En una web real, index.html es el punto de entrada a la web, lo que se conoce como página de inicio.

+ +

Observamos también dos directorios dentro de nuestro directorio raíz que son: pdfs y projects. Cada uno de ellos tiene archivos en su interior — un archivo PDF (project-brief.pdf) y un archivo index.html, respectivamente. Observa que es posible tener sin problemas dos archivos index.html en un proyecto siempre y cuando se encuentren alojados en ubicaciones diferentes de nuestra estructura de archivos — muchos sitios web lo hacen. El segundo index.html será la página de inicio para la información relativa a los proyectos.

+ + + +
+

Nota: Podemos combinar más de una instancia de estas características y generar URLs más complejas, si es necesario, por ejemplo: ../../../ruta/compleja/a/mi/archivo.html.

+
+ +

Fragmentos de documento

+ +

Es posible apuntar hacia una parte concreta de un documento HTML en vez de a todo un documento. Para ello hay que asignar previamente un atributo {{HTMLAttrxRef("id")}} al elemento hacia el que apuntamos. Esto se debe hacer en el encabezado y quedará así:

+ +
<h2 id="Dirección_de_envío">Dirección de envío</h2>
+ +

Posteriormente para hacer referencia a este id concreto, lo añadiremos al final de la URL precedido por una almohadilla — veamos el ejemplo:

+ +
<p>¿Quieres mandarnos una carta? Aquí tienes nuestra <a href="contacts.html#Dirección_de_envío">Dirección de envío</a>.</p>
+ +

También podemos usar esta referencia a un fragmento de documento para apuntar hacia otra parte del mismo documento:

+ +
<p>La <a href="#Dirección_de_envío">Dirección de envío de la empresa</a> se encuentra al final de esta página.</p>
+ +

URLs absolutas y relativas

+ +

Dos términos que encontrarás en la Web son URL absoluta y URL relativa:

+ +

URL absoluta: Hace referencia a una dirección definida por su ubicación absoluta en la web, esta incluye el {{Glossary("protocol", "protocolo")}} y el {{Glossary("domain name", "nombre del dominio")}}. Por ejemplo, si subes una página de inicio index.html a un directorio llamado projects que se encuentra dentro de la raíz de un servidor web, y el dominio del sitio web es http://www.example.com, se podrá acceder a la página desde http://www.example.com/projects/index.html (o simplemente http://www.example.com/projects/, ya que la mayoría de los servidores web buscan la página de inicio index.html para cargarla por omisión si no se les especifica otra en la URL).

+ +

Una URL absoluta siempre apuntará a la misma dirección, sin importar desde dónde se utilice.

+ +

Una URL relativa: Hace referencia a una dirección que depende de la posición del archivo desde donde se utiliza — son las que vimos en la sección anterior. Por ejemplo, si desde un archivo ubicado en http://www.example.com/projects/index.html queremos enlazar hacia un archivo PDF ubicado en el mismo directorio, la URL sería simplemente el nombre del archivo (por ejemplo: project-brief.pdf) no necesitamos más información. Si el archivo PDF está situado en un subdirectorio dentro de projects llamado pdfs, la URL relativa es: pdfs/project-brief.pdf (la URL absoluta equivalente sería: http://www.example.com/projects/pdfs/project-brief.pdf).

+ +

Una URL relativa hará referencia a diferentes direcciones según dónde se encuentre el archivo desde el cual se utiliza — por ejemplo, si movemos nuestro archivo index.html del directorio projects a la raíz del sitio web (el nivel más alto, no cualquiera de los otros directorios), la URL relativa pdfs/project-brief.pdf ahora hará referencia a http://www.example.com/pdfs/project-brief.pdf, en lugar de a http://www.example.com/projects/pdfs/project-brief.pdf.

+ +

Por supuesto, la ubicación del archivo pdfs/project-brief.pdf y del directorio pdfs no cambian de repente cuando mueves el archivo index.html; esto hará que tus enlaces apunten a un sitio equivocado y no funcionarán correctamente al hacer clic en ellos. ¡Por lo tanto debes tener cuidado!

+ +

Buenas prácticas en el uso de los enlaces

+ +

Hay algunas buenas prácticas que debemos respetar cuando escribimos enlaces. Veamos cuáles son.

+ + + +

Redacción clara del enlace

+ +

Es fácil rellenar de enlaces una página, sin más. Pero esto no basta. Hay que lograr que nuestros enlaces sean accesibles para todo tipo de lectores, sin importar el contexto o las herramientas que prefieran. Por ejemplo:

+ + + +

Veamos un ejemplo concreto:

+ +

Buen texto en un enlace: Descargar Firefox

+ +
<p><a href="https://firefox.com/">
+  Descargar Firefox
+</a></p>
+ +

Mal texto en un enlace: Pulsar aquí para descargar Firefox

+ +
<p><a href="https://firefox.com/">
+  Haz clic aquí
+</a>
+para descargar Firefox</p>
+
+ +

Otras indicaciones:

+ + + +

Utiliza enlaces relativos siempre que sea posible

+ +

A partir de las indicaciones anteriores podemos llegar a pensar que es mejor utilizar referencias absolutas en todos los casos; después de todo, estas no se rompen cuando la página se traslada como ocurre con las referencias relativas. Sin embargo, debes utilizar enlaces relativos siempre que sea posible cuando enlaces a otras ubicaciones dentro del mismo sitio web. Cuando vinculas a otro sitio web, deberás utilizar un vínculo absoluto.

+ + + +

Indica claramente los recursos no HTML

+ +

Cuando damos referencias a recursos para descargarlos (como documentos en formato PDF o Word) o para reproducirlos (como archivos de audio o vídeo) o que tengan un efecto inesperado (una ventana emergente) hay que indicarlo para no confundir al usuario.

+ +

Por ejemplo:

+ + + +

Veamos algunos ejemplos, para ver qué texto puede ser aconsejable en estos casos:

+ +
<p><a href="http://www.example.com/large-report.pdf">
+  Descarga el informe de ventas (PDF, 10MB)
+</a></p>
+
+<p><a href="http://www.example.com/video-stream/">
+  Reproduce el vídeo (el flujo de datos se abre en una pestaña independiente, calidad HD)
+</a></p>
+
+<p><a href="http://www.example.com/car-game">
+  Juega al juego del automóvil (requiere Flash)
+</a></p>
+ +

Utiliza el atributo download al enlazar una descarga

+ +

Si queremos hacer referencia a una descarga en lugar de a algo que abra el navegador, disponemos del atributo download para proporcionar un nombre predeterminado al archivo a guardar. Veamos un ejemplo con un enlace a la descarga de la versión para Windows de Firefox:

+ +
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=es-MX"
+   download="firefox-latest-64bit-installer.exe">
+  Descarga la última versión de Firefox para Windows (64 bits) (Español, es-MX)
+</a>
+ +

Aprendizaje activo: crear un menú de navegación

+ +

Para este ejercicio, deberás crear lo que se conoce como web multipágina: un menú de navegación con enlaces a distintas páginas. Esta es una manera común de crear páginas web — usamos la misma estructura en todas las páginas, incluida la que contiene el menú de navegación. Cuando los usuarios pulsen los enlaces tendrán la sensación de que están en la misma página y que solo cambia el contenido mostrado.

+ +

Tendrás que hacer copias locales, en el mismo directorio, de las cuatro siguientes páginas (revisa el directorio navigation-menu-start para el listado completo):

+ + + +

A continuación:

+ +
    +
  1. Añade una lista no ordenada en el lugar adecuado de la página, que contenga los nombres de las páginas a las que enlazas. Un menú de navegación normalmente es una lista de enlaces (links), por lo que esto es semánticamente correcto.
    2. +
  2. Convierte cada nombre en un enlace a esa página.
    3. +
  3. Copia el menú de navegación en cada una de las páginas.
    4. +
  4. En cada página, elimina solo el enlace que hace referencia a sí mismo (es confuso y no tiene sentido que una página se llame a sí misma, y la falta del enlace actúa como recordatorio de la página en la que se está en cada momento).
    5. +
+ +

El ejercicio terminado debería crear una página como la siguiente:

+ +

Un ejemplo de un menú de navegación HTML simple, con inicio, imágenes, proyectos y elementos del menú social

+ +
+

Nota: Si ahora encallas, o no estás seguro de haberlo conseguido, revisa el directorio navigation-menu-marked-up para ver la respuesta correcta.

+
+ +

Enlace a correo electrónico

+ +

Es posible crear enlaces o botones que, cuando se pulsan, abren un nuevo correo saliente en lugar de enlazar a un recurso o página. Esto se consigue con el elemento ancla {{HTMLElement("a")}} y el elemento mailto: seguido del esquema de la URL.

+ +

En su forma más básica, un enlace mailto: simplemente contiene la dirección de correo electrónico de los destinatarios. Por ejemplo:

+ +
<a href="mailto:nowhere@mozilla.org">Enviar correo electrónico a ninguna parte</a>
+
+ +

Esto da como resultado un enlace que se ve así: Enviar correo electrónico a ninguna parte.

+ +

De hecho, incluso el atributo con la dirección de correo electrónico es opcional. Si lo omites y tu ({{HTMLAttrxRef("href", "a")}} simplemente es "mailto:", aparecerá una nueva ventana de correo saliente en el gestor de correo sin la dirección del destinatario. Esto es útil cuando queremos compartir enlaces que los usuarios puedan pulsar para enviar un correo electrónico y elegir un destinatario posteriormente.

+ +

Especificar detalles

+ +

Además de la dirección de correo electrónico, puedes proporcionar otra información. De hecho, puedes incluir cualquier campo estándar contenido en el encabezado de cualquier mensaje en la URL mailto que proporciones. Los más utilizados son el «subject» (asunto), «cc» (con copia a) o «bcc» (copia oculta), y «body» (cuerpo del mensaje, que no es realmente un campo de la cabecera, pero permite especificar un mensaje breve para el nuevo correo electrónico). Cada campo y su valor se especifican como un argumento de la consulta.

+ +

Veamos un ejemplo que incluye estos campos:

+ +
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
+  Enviar un correo electrónico cc, bcc, asunto y cuerpo
+</a>
+ +
+

Nota: Los valores de cada campo deben tener la URL codificada, es decir, sin caracteres no imprimibles (caracteres invisibles, tabulaciones, retornos de carro y saltos de página) y espacios con codificación porcentual (%20) {{Interwiki("wikipedia", "Código porciento")}}. También hay que tener en cuenta el uso del signo de interrogación (?) para separar la URL principal de los valores de los campos, y el símbolo ampersand (&) para separar cada campo dentro del enlace mailto:. Esta es la notación de consulta URL estándar. Lee {{web.link("/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method", "el método GET")}} para comprender mejor qué notación de consulta URL se usa comúnmente.

+
+ +

A continuación otros ejemplos de utilización de enlaces mailto:

+ + + +

¡Pon a prueba tus habilidades!

+ +

Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encuentra más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links", "Pon a prueba tus habilidades: Enlaces")}}.

+ +

Resumen

+ +

Eso es todo en cuanto a enlaces, ¡por ahora! Volveremos a ellos más tarde en este curso cuando comencemos a usar estilos. Lo siguiente en HTML, será aprender la semántica de texto para usar algunas características avanzadas/inusuales que nos serán utilidad — Formato de texto avanzado será la próxima parada.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/html/introduction_to_html/debugging_html/index.html b/files/es/learn/html/introduction_to_html/debugging_html/index.html new file mode 100644 index 0000000000..114b93ff0f --- /dev/null +++ b/files/es/learn/html/introduction_to_html/debugging_html/index.html @@ -0,0 +1,171 @@ +--- +title: Depurar el HTML +slug: Learn/HTML/Introduccion_a_HTML/Debugging_HTML +tags: + - Error + - Guía + - HTML + - Principiante + - Validación + - Validador + - depurar + - programar +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

Escribir HTML es fácil, pero ¿qué pasa si algo va mal y desconocemos dónde está el error de codificación? En este artículo veremos varias herramientas que nos ayudarán a arreglar errores en HTML.

+ + + + + + + + + + + + +
Prerrequisitos:Estar familiarizado con los principios básicos de HTML, como los vistos en el apartado Empezar con el HTML, Conocimientos básicos de aplicación de formato a textos con HTML y Creación de hiperenlaces.
Objetivo:Aprender el funcionamiento básico de las herramientas de depuración de problemas de código en HTML.
+ +

Depurar no debe asustarnos

+ +

Cuando escribimos cualquier tipo de código, normalmente todo va bien, hasta ese fatídico momento en el que ocurre un error, hemos hecho algo mal y el código no funciona, o no funciona del todo, no lo suficientemente bien. Por ejemplo, el dibujo siguiente muestra un error de {{glossary("compile","compilación")}} de un programa sencillo escrito en lenguaje Rust.

+ +

A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.En el ejemplo, el mensaje de error es fácilmente comprensible: "unterminated double quote string" (comillas sin cerrar en el texto). Si analizamos el listado de código, observamos que en println!(Hello, world!"); faltan una comillas. Pero, los mensajes de error pueden complicarse con facilidad y su interpretación ser menos sencilla a medida que los programas aumentan en tamaño, e incluso casos sencillo pueden llegar a intimidar a alguien que no sabe nada de Rust.

+ +

Sin embargo, la depuración no nos debe asustar; la clave para sentirnos cómodos con la escritura y la depuración de cualquier lenguaje o código es la familiaridad, tanto con el lenguaje como con las herramientas.

+ +

HTML y depuración

+ +

HTML no es tan complicado de entender como Rust; HTML no se compila por separado antes de que el navegador lo analice (se interpreta, no se compila). Y la sintaxis de los {{glossary("element","elementos")}} de HTML es mucho más sencilla de entender que la de cualquier lenguaje de programación real como Rust, {{glossary("JavaScript")}} o {{glossary("Python")}}. La forma en que los navegadores ejecutan HTML es más permisiva que la de los otros lenguajes, cosa que es buena y mala a la vez.

+ +

Código permisivo

+ +

¿Qué queremos decir con permisivo? Bien, normalmente cuando hacemos algo mal al codificar, suele haber dos tipos de error:

+ + + +

HTML en sí mismo no suele producir errores sintácticos porque los navegadores son permisivos con ellos; o sea, el código se sigue ejecutando ¡aun si hay errores! Los navegadores disponen de reglas internas para saber cómo interpretar los errores de marcado incorrecto que encuentran, y seguirán funcionando aunque no produzcan el resultado esperado. Esto puede también ser un problema, por supuesto.

+ +
+

Nota: La ejecución de HTML es permisiva porque cuando se creó la web por primera vez, se decidió que el hecho de permitir que la gente publicara su contenido era más importante que el hecho de que la sintaxis fuera totalmente correcta. La web no sería tan popular como lo es hoy en día si se hubiera sido más estricto desde el primer momento.

+
+ +

Aprendizaje activo: Estudio del código permisivo

+ +

Es hora de estudiar la naturaleza permisiva del código HTML por nosotros mismos.

+ +
    +
  1. En primer lugar, hagamos una copia de nuestro ejemplo-demo a depurar y guardémoslo de forma local. Está escrito para generar diversos errores que deberemos descubrir (se dice que el marcado de HTML está mal formado, en contraposición a un marcado bien formado).
    2. +
  2. A continuación, abrámoslo en un navegador; veremos lo siguiente:A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes.
    3. +
  3. No parece que esté bien; veamos el código fuente para ver qué podemos hacer (solo mostramos el contenido del <body>): + 
    <h1>HTML debugging examples</h1>
+
+<p>What causes errors in HTML?
+
+<ul>
+  <li>Unclosed elements: If an element is <strong>not closed properly,
+      then its effect can spread to areas you didn't intend
+
+  <li>Badly nested elements: Nesting elements properly is also very important
+      for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
+      what is this?</em>
+
+  <li>Unclosed attributes: Another common source of HTML problems. Let's
+      look at an example: <a href="https://www.mozilla.org/>link to Mozilla
+      homepage</a>
+</ul>
    +
    4. +
  4. Veamos qué problemas podemos descubrir: +
      +
    • El elemento {{htmlelement("p")}} y el {{htmlelement("li")}} no tienen etiquetas de cierre. Si comprobamos el resultado, no parece que haya generado un efecto grave en la representación del lenguaje de marcado, porque es fácil deducir que donde un elemento acaba, debería comenzar otro.
      • +
    • El primer elemento {{htmlelement("strong")}} no tiene etiqueta de cierre. Este resulta ser un poco más problemático porque no es fácil deducir dónde se supone que termina el elemento. De hecho, el énfasis fuerte se ha aplicado al resto del texto.
      • +
    • Esta sección está mal anidada: <strong>strong <em>strong emphasised?</strong> what is this?</em>. No es fácil de explicar la forma en que ha sido interpretado, debido al problema anterior.
      • +
    • Al valor del atributo {{htmlattrxref("href","a")}} le faltan las comillas de cierre. Esto parece haber causado el problema más grave: el enlace ha desaparecido totalmente.
      • +
    +
    5. +
  5. Ahora veamos lo que el navegador ha mostrado en contraposición al código fuente. Para ello podemos usar las herramientas de desarrollo del navegador. Si no estamos familiarizados con el uso de estas herramientas, echemos un vistazo rápido a Descubrir las herramientas de desarrollo del navegador, y luego continuaremos.
    6. +
  6. En el inspector de objetos (DOM), puedes comprobar la apariencia de cada elemento: The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.
    7. +
  7. Vamos a explorar nuestro código en detalle con el inspector de objetos DOM para ver cómo el navegador ha arreglado nuestros errores de código HTML (lo hemos hecho con Firefox; otros navegadores modernos deberían conducir al mismo resultado): +
      +
    • Se han añadido etiquetas de cierre a los párrafos y las líneas de las listas.
      • +
    • Al no estar claro el final del elemento <strong>, el navegador lo ha aplicado individualmente a todos los bloques de texto siguientes, a cada uno le ha añadido su etiqueta strong propia, desde donde está ¡hasta el final del documento!
      • +
    • El navegador ha arreglado el anidamiento incorrecto del modo siguiente: + 
      <strong>strong
+  <em>strong emphasised?</em>
+</strong>
+<em> what is this?</em>
      +
      • +
    • El enlace a cuyo atributo le faltan las comillas del final ha sido ignorado. La última lista la ha dejado como sigue: + 
      <li>
+  <strong>Unclosed attributes: Another common source of HTML problems.
+  Let's look at an example: </strong>
+</li>
      +
      • +
    +
    8. +
+ +

Validación HTML

+ +

Con el ejemplo anterior podemos asegurarnos de que nuestro HTML está bien formado, pero ¿cómo? En el ejemplo siguiente podemos comprobar que es bastante fácil buscar entre las líneas y encontrar los errores en documentos pequeños; pero, ¿qué pasa cuando trabajamos con documentos HTML grandes y complejos?

+ +

La mejor estrategia es comenzar por pasar tu página HTML por el servicio de validación de etiquetas; fue creado y está mantenido por el W3C, organización que se encarga de definir las especificaciones de HTML, CSS y otras tecnologías web. Esta página web toma un documento HTML como entrada, lo procesa, y genera un informe de dónde están los errores en el documento.

+ +

The HTML validator homepage

+ +

Para validar el HTML, podemos proporcionar al validador una dirección web a la que apuntar, subirle un archivo HTML, o directamente introducirle el código HTML que queremos que revise.

+ +

Aprendizaje activo: Validación de un documento HTML

+ +

Vamos a probar de validar nuestro documento ejemplo.

+ +
    +
  1. Primero, cargamos el servicio de validación en una pestaña del navegador, si no lo tenemos ya.
    2. +
  2. Hacemos clic en la subpestaña Validate by Direct Input.
    3. +
  3. Copiamos el código del documento ejemplo (no solo el body) y lo pegamos en el cuadro de texto grande.
    4. +
  4. Hacemos clic en el botón Check.
    5. +
+ +

Esto debería proporcionar una lista de errores y otras informaciones:

+ +

A list of of HTML validation results from the W3C markup validation service

+ +

Interpretación de los mensajes de error

+ +

La lista de mensajes de error que nos presenta el validador suele ayudar, pero a veces, no resultan muy útiles; con un poco de práctica aprenderemos a interpretar la lista para arreglar nuestro código. Veamos los mensajes de error y su significado. Observamos que cada mensaje se presenta con un número de línea y de columna, para ayudar a localizar el error más fácilmente.

+ + + +

No debemos preocuparnos si no podemos corregir todos los mensajes de error; es práctico tratar de arreglar unos pocos errores cada vez y volver a pasar el validador para ver los que quedan. A veces, al arreglar unos cuantos se arreglan automáticamente otros muchos; con frecuencia muchos errores los causa uno solo en un efecto dominó.

+ +

Sabremos  que todos los errores están arreglados cuando veamos el mensaje siguiente:

+ +

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

+ +

Resumen

+ +

Pues hasta aquí una introducción al depurado de HTML, que nos proporcionará habilidades para cuando comencemos a depurar CSS, JavaScript y otros lenguajes más adelante en nuestros trabajos. Este apartado también constituye el final de la introducción al módulo de artículos de aprendizaje de HTML; ahora podemos hacer los test de prueba: el primero de los cuales está en el enlace siguiente.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/es/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/es/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..1f5f1e315c --- /dev/null +++ b/files/es/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,298 @@ +--- +title: Estructura web y documentación +slug: Learn/HTML/Introduccion_a_HTML/estructura +tags: + - CodingScripting + - Composición + - Diseño + - Formato + - Guía + - HTML + - Presentación + - Principiante + - Sitio + - Sitio Web + - bloques + - pagina + - programar + - semántica +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

Además de definir partes individuales de tu página (como un párrafo o una imagen), {{Glossary("HTML")}} también dispone de elementos de bloque que se pueden utilizar para estructurar las distintas áreas de tu sito web (tal como el encabezado, el menú de navegación o la parte del contenido principal. En este artículo veras cómo planificar una estructura básica de página web y escribirás el HTML que representa esa estructura.

+ + + + + + + + + + + + +
Prerrequisitos:Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}. Funcionamiento de los hipervínculos, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}.
Objetivo:Aprender a estructurar tu documento usando atributos semánticos y construir la estructura de una página web sencilla.
+ +

Partes básicas de un documento

+ +

Las páginas web pueden y se deben diferenciar las unas de las otras, pero todas tienden a contener elementos comunes parecidos, a menos que estén destinadas a mostrar un vídeo o un juego a pantalla completa, o que formen parte de un proyecto artístico concreto o, simplemente, que estén mal estructuradas; estos elementos comunes son:

+ +
+
encabezado:
+
Normalmente formado por una gran franja que cruza la parte superior de la página con un gran título, un logotipo y quizás un lema. Esta parte suele permanecer invariable mientras navegas entre las páginas de un mismo sitio web.
+
barra de navegación:
+
Son los enlaces a las secciones principales del sitio web. Normalmente está formada por un menú con botones, enlaces o pestañas. Al igual que el encabezado, este contenido suele permanecer invariable en las diferentes páginas del sitio; tener un menú inconsistente en tu página web conducirá a los usuarios a la confusión y frustración. Muchos diseñadores web consideran que el menú de navegación forma parte del encabezado y que no posee un componente individual, aunque no es necesario que sea así; de hecho, algunos argumentan que tener ambos componentes por separado es mejor por motivos de {{web.link("/es/docs/Learn/Accessibility", "accesibilidad")}} porque los lectores de pantalla pueden leer mejor ambos elementos si están separados.
+
contenido principal:
+
Es la gran parte central de la página y contiene la mayor parte del contenido particular de una página web concreta; por ejemplo, el video que quieres ver, la narración que quieres leer, el mapa que quieres consultar, los titulares de las noticias, etc. ¡Esta es la parte que definitivamente debe variar mucho de una página a otra de tu sitio web!
+
barra lateral:
+
Suele incluir algún tipo de información adicional, enlaces, citas, publicidad, etc. Normalmente está relacionada con el contenido principal de la página (por ejemplo, en una página de noticias, la barra lateral podría contener la biografía del autor o enlaces a artículos relacionados), pero en otras ocasiones encontraras elementos recurrentes como un menú de navegación secundario.
+
pie de página:
+
Es la parte inferior de la página, que generalmente contiene la letra pequeña, el copyright o la información de contacto. Es el sitio donde se coloca la información común (al igual que en el encabezado), pero esta información no suele ser tan importante o es secundaria con respecto a la página en sí misma. El pie también se suele usar para propósitos {{Glossary("SEO")}}, e incluye enlaces de acceso rápido al contenido más popular.
+
+ +

Una página web «típica» se podría parecer a esta:

+ +

Un ejemplo de estructura de sitio web simple con un encabezado principal, menú de navegación, contenido principal, barra lateral y pie de página.

+ +

HTML para dar estructura al contenido

+ +

El ejemplo no es muy atractivo, pero puede servir para ilustrar un ejemplo de diseño de una página web típica. Puedes encontrar sitios con más columnas, algunas mucho más complejas, pero esta servirá para hacerte una idea general sobre el tema. Con el CSS adecuado podrás usar muchos más elementos para decorar las distintas secciones y conseguir que queden como deses, pero como se comentó anteriormente, necesitas respetar ciertas normas semánticas, y utilizar el elemento adecuado para cada tipo de sección.

+ +

La parte visual no lo es todo. Utilizarás diferentes fuentes y colores para llamar la atención de los usuarios sin discapacidad visual de las partes más importantes del contenido, como el menú de navegación y sus enlaces correspondientes, pero ¿qué ocurre con los usuarios con discapacidad visual que no pueden distinguir los colores llamativos o el tamaño grande de las fuentes?

+ +
+

Nota: Los daltónicos representan alrededor del 4% de la población mundial (aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres son daltónicos). Los invidentes y las personas con discapacidad visual representan aproximadamente el 4-5% de la población mundial (en 2012 había {{Interwiki("wikipedia", "Discapacidad visual")}} 285 millones de personas con alguna de estas características en el mundo, mientras que el total de la población estaba {{Interwiki("wikipedia", "World_human_population#/media/File:World_population_history.svg", "alrededor de los 7,000 millones")}}.

+
+ +

En tu código HTML puedes crear secciones de contenido basadas en su funcionalidad — puedes usar elementos que representen sin ambigüedad las diferentes secciones de contenido descritas, de forma que las tecnologías de accesibilidad y los lectores de pantalla puedan reconocer esos elementos y asistir en tareas como «encontrar el menú de navegación», o «encontrar el contenido principal». Como se mencionó anteriormente en el curso, hay una serie de {{web.link("/es/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Por_qué_necesitamos_estructura", "consecuencias por no usar la estructura de elementos y semántica adecuada para hacer el trabajo correctamente")}}.

+ +

HTML dispone de etiquetas adecuadas que puedes usar para establecer estas secciones semánticas, por ejemplo:

+ + + +

Aprendizaje activo: El código del ejemplo anterior

+ +

El ejemplo de página web que se muestra arriba se consigue a partir del siguiente código (disponible en el repositorio Github). Observa el ejemplo anterior, y a continuación échale un vistazo al código de abajo para identificar las secciones marcadas en el ejemplo.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>El título de mi página</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="style.css">
+
+    <!-- las tres siguientes líneas son un truco para obtener elementos semánticos de HTML5 que funcionan en versiones de Internet Explorer antiguas -->
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <!-- Aquí empieza el encabezado principal que se mantendrá en todas las páginas del sitio web -->
+
+    <header>
+      <h1>Encabezado</h1>
+    </header>
+
+    <nav>
+      <ul>
+        <li><a href="#">Inicio</a></li>
+        <li><a href="#">Nuestro equipo</a></li>
+        <li><a href="#">Proyectos</a></li>
+        <li><a href="#">Contacto</a></li>
+      </ul>
+
+       <!-- Un formulario de búsqueda es una forma no-lineal de hacer búsquedas en un sitio web. -->
+
+       <form>
+         <input type="search" name="q" placeholder="Buscar">
+         <input type="submit" value="¡Vamos!">
+       </form>
+     </nav>
+
+    <!-- Aquí está el contenido principal de nuestra página -->
+    <main>
+
+      <!-- Contiene un artículo -->
+      <article>
+        <h2>Título del artículo</h2>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+
+        <h3>Subsección</h3>
+
+        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
+
+        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
+
+        <h3>Otra subsección</h3>
+
+        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
+
+        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
+      </article>
+
+      <!-- el contenido aparte también se puede anidar dentro del contenido principal -->
+      <aside>
+        <h2>Relacionado</h2>
+
+        <ul>
+          <li><a href="#">Oh, me gusta estar junto al mar</a></li>
+          <li><a href="#">Oh, me gusta estar junto al mar</a></li>
+          <li><a href="#">Aunque en el norte de Inglaterra</a></li>
+          <li><a href="#">Nunca deja de llover</a></li>
+          <li><a href="#">Oh, bueno...</a></li>
+        </ul>
+      </aside>
+
+    </main>
+
+    <!-- Y aquí está nuestro pie de página principal que se utiliza en todas las páginas de nuestro sitio web -->
+
+    <footer>
+      <p>©Copyright 2050 de nadie. Todos los derechos revertidos.</p>
+    </footer>
+
+  </body>
+</html>
+ +

Tómate tu tiempo para revisar el código y comprenderlo — Los comentarios en el código también te ayudarán a entenderlo. No te pedimos que hagas mucho más en este artículo, porque la clave para entender el diseño del documento es escribir una estructura HTML conocida y posteriormente desarrollar su apariencia con CSS. Estudiaremos el diseño CSS como parte del tema CSS.

+ +

Elementos de diseño HTML en detalle

+ +

Es bueno entender el significado global de todos los elementos definitorios de las secciones HTML en detalle; es algo en que trabajarás gradualmente a medida que comiences a tener más experiencia en el desarrollo web. En el enlace {{web.link("/es/docs/Web/HTML/Element", "referencia de elementos HTML")}} podemos entrar en un gran nivel de detalle. Por el momento, estas son las definiciones principales que deberíamos tratar de entender:

+ + + +

Envolturas no semánticas

+ +

A veces hay situaciones en las que no encuentras un elemento semántico adecuado para agrupar ciertos elementos o englobar cierto contenido. Podrías querer agrupar ciertos elementos para referirte a ellos como una entidad que comparta cierto {{Glossary("CSS")}} o {{Glossary("JavaScript")}}. Para casos como esos, HTML dispone del elemento {{HTMLElement("div")}} y del elemento {{HTMLElement("span")}}. Preferentemente estos elementos se deberán utilizar con sus atributos ({{HTMLAttrxRef('class')}}), para conferirles algún tipo de etiquetado que permita determinarlos con facilidad.

+ +

{{HTMLElement("span")}} es un elemento no-semántico que se utiliza en el interior de una línea. Se utiliza cuando no se nos ocurre el uso de ningún otro elemento semántico de texto en el que incluir el contenido, o si no se desea añadir ningún significado específico. Por ejemplo:

+ +
<p>El rey volvió ebrio a su habitación alrededor de la 01:00, y sin duda la cerveza no le ayudaba
+cuando cruzó tambaleante la puerta <span class="editor-note">[nota del editor: en este instante de la
+representación, deberían atenuarse las luces]</span>.</p>
+ +

En este caso, la nota del editor solo proporciona información extra para el director de la obra; se supone que estos elementos no incluyen contenido extra importante. Para los usuarios sin discapacidad visual, quizás debamos usar CSS para diferenciar sutilmente estas notas del texto principal.

+ +

{{HTMLElement("div")}} es un elemento de bloque no-semántico; lo utilizaras cuando no se te ocurra el uso de otro elemento semántico mejor, o si no deseas añadir ningún significado concreto. Por ejemplo, imagina un carrito de compras que puedes pulsar en cualquier momento durante tu estancia en una tienda virtual:

+ +
<div class="shopping-cart">
+  <h2>Carrito de compras</h2>
+  <ul>
+    <li>
+      <p><a href=""><strong>Pendientes de plata</strong></a>: $99.95.</p>
+      <img src="../products/3333-0985/" alt="Pendientes de plata">
+    </li>
+    <li>
+      ...
+    </li>
+  </ul>
+  <p>Importe total: $237.89</p>
+</div>
+ +

Este no es un elemento lateral (<aside>) porque no necesariamente está relacionado con el contenido principal de la página (en realidad quieres que se pueda ver desde cualquier página). Ni siquiera se puede incluir en una sección (<section>) porque su contenido no forma parte del contenido principal de la página. Por lo tanto, un elemento <div> es el adecuado en este caso. Hemos incluido un encabezado para indicar a los lectores de pantalla donde van a encontrarlo.

+ +
+

Atención: Los elementos div son tan prácticos y simples que es fácil usarlos en exceso. Como no conllevan valor semántico, enmarañan el código HTML. Debemos tener cuidado de usarlos solo cuando no halles una solución mejor y reducir su uso al mínimo, porque de otro modo complicarás el mantenimiento y actualización de los documentos.

+
+ +

Saltos de línea y líneas horizontales

+ +

Dos elementos que debes conocer y utilizarás ocasionalmente son {{HTMLElement("br")}} y {{HTMLElement("hr")}}:

+ +

El elemento {{HTMLElement("br")}} genera un salto de línea en un párrafo; es la única manera de representar series de líneas cortas, como una dirección postal o un poema. Por ejemplo:

+ +
+
<p>Había una vez un hombre llamado O'Dell<br>
+A quién le encantaba escribir HTML<br>
+Pero su estructura era mala, su semántica era triste<br>
+y su marcado no se interpretó muy bien.</p>
+
+ +

Sin el elemento {{HTMLElement("br")}}, todo el párrafo se habría presentado como una sola línea larga (como ya hemos dicho con anterioridad en este curso, {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Los_espacios_en_blanco_en_HTML", "HTML ignora la mayoría del espacio en blanco")}}); con estos elementos {{HTMLElement("br")}} en el código, las líneas quedan:

+ +

{{EmbedLiveSample('line-break-live-sample', '100%', '125px', '', '', 'hide-codepen-jsfiddle')}}

+ +

Los elementos {{HTMLElement("hr")}} generan una regla horizontal en el documento que denota un cambio en la temática del texto (como un cambio de tema o de escena). Visualmente tiene el aspecto de una línea horizontal. Por ejemplo:

+ +
+
<p>Ron fue acorralado en una esquina por las bestias abisales que merodeaban. Asustado, pero decidido a proteger a sus amigos, levantó su varita y se preparó para la batalla, con la esperanza de que su llamada de socorro hubiera llegado a alguien.</p>
+<hr>
+<p>Mientras tanto, Harry estaba sentado en su casa, mirando su declaración de regalías y pensando en cuándo saldría la próxima serie derivada, cuando de pronto voló por su ventana una carta de socorro y aterrizó en su regazo. La leyó vagamente y suspiró; "Será mejor que vuelva al trabajo entonces", reflexionó.</p>
+
+ +

Quedará así:

+ +

{{EmbedLiveSample('Ejemplo_en_vivo_línea_horizontal', '100%', '185px', '', '', 'hide-codepen-jsfiddle')}}

+ +

Planificación de una página web sencilla

+ +

Una vez has planificado el contenido de una página web sencilla, el paso lógico siguiente es intentar trabajar en el contenido para todo el sitio web, las páginas que necesitas y la forma de disponer las conexiones entre ellas para producir la mejor experiencia de usuario a los visitantes. Esto se conoce con el nombre de ({{Glossary("Arquitectura de la información")}}). Una web grande y compleja necesitará mucha planificación, pero para una web sencilla compuesta por unas cuantas páginas, el proceso puede ser sencillo, ¡y divertido!.

+ +
    +
  1. Ten en cuenta que habrá varios elementos comunes en muchas (si no en todas las) páginas, tal como el menú de navegación y el contenido del pie de página. Si la web está dedicada a un negocio, por ejemplo, sería una buena idea disponer de la información de contacto en el pie de página en todas las páginas. Anota lo que deseas tener en común en cada página. las características comunes del sitio de viajes para ir en cada página: título y logotipo, contacto, derechos de autor, términos y condiciones, selección de idioma, política de accesibilidad
    2. +
  2. A continuación, esboza un esquema sencillo de cuál podría ser la estructura deseada de la apariencia de cada página (podría ser algo tan sencillo como el siguiente dibujo). Anota los bloques principales. Un diagrama simple de una estructura de sitio de ejemplo, con un encabezado, un área de contenido principal, dos barras laterales opcionales y un pie de página
    3. +
  3. Ahora, elabora una lista completa con todo el resto del contenido de tu sitio web que no sea común a todas las páginas. Una larga lista de todas las funciones que podrías incluir en tu sitio de viajes, desde buscar, hasta ofertas especiales e información específica del país
    4. +
  4. A continuación, trata de ordenar todo este contenido por grupos, para hacerte una idea de las partes que podrían ir juntas en las diferentes páginas. Esto es muy similar a una técnica llamada {{Glossary("Clasificación de tarjetas")}}. Los elementos que deberían aparecer en un sitio de vacaciones ordenados en 5 categorías: Búsqueda, Especiales, Información específica del país, Resultados de búsqueda y Compra cosas
    5. +
  5. Ahora trata de esquematizar un mapa de tu sitio — dibuja un globo para cada página de tu sitio web y dibuja líneas que identifiquen el flujo de datos entre las distintas páginas. La página de inicio normalmente estará ubicada en el centro y enlazará con el resto de páginas; la mayoría de las páginas de una web sencilla estarán enlazadas desde el menú de navegación principal, aunque puede haber excepciones. También puedes incluir notas sobre cómo se pueden presentar las cosas. Un mapa del sitio que muestra la página de inicio, la página del país, los resultados de búsqueda, la página de ofertas especiales, la página de pago y la página de compra
    6. +
+ +

Aprendizaje activo: Creación de un mapa del sitio web

+ +

Intenta llevar a cabo el ejercicio anterior para crear tu propia página web. ¿Qué contenido le vas a dar a tu sitio web?

+ +
+

Nota: Guarda este esquema para utilizarlo más adelante.

+
+ +

¡Pon a prueba tus habilidades!

+ +

Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar una evaluación detallada que pruebe estas habilidades al final del módulo; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructurar el contenido de una página")}}. ¡Recuerda leer primero el siguiente artículo de la serie y no solo saltarlo!

+ +

Resumen

+ +

En este punto, deberías tener una mejor idea sobre cómo estructurar una página/sitio web. En el último artículo de este módulo, se explica cómo depurar HTML.

+ +

Ve también

+ + + +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/html/introduction_to_html/getting_started/index.html b/files/es/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..c05aa6a9f0 --- /dev/null +++ b/files/es/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,767 @@ +--- +title: Empezar con HTML +slug: Learn/HTML/Introduccion_a_HTML/iniciar +tags: + - Atributos + - Elemento + - Guía + - HTML + - Principiante + - comentários +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

En este artículo vamos a exponer lo más básico del HTML. Para comenzar definiremos elementos, atributos y el resto de términos importantes que quizá ya te suenen y qué función cumplen dentro del lenguaje. También explica dónde encajan estos en HTML. Aprenderás cómo se estructuran los elementos HTML, cómo se estructura una página HTML típica y otras características básicas importantes del lenguaje. Por el camino, también iremos practicando con algo de HTML.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "tener instalado el software básico")}} y conocimientos básicos de cómo {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "trabajar con archivos")}}.
Objetivo:Familiarizarte con el lenguaje HTML, y adquirir algo de práctica escribiendo unos pocos elementos HTML.
+ +

¿Qué es el HTML?

+ +

{{Glossary("HTML")}} ("Hypertext Markup Language") no es un lenguaje de programación. Es un lenguaje de marcado que le dice a los navegadores web cómo estructurar las páginas web que estás visitando. Puede ser tan complejo o tan simple como desee el desarrollador web. El HTML consiste en una serie de {{Glossary("Element", "elementos")}}, que puedes utilizar para encerrar, delimitar o marcar diferentes partes del contenido para hacer que aparezcan de una cierta manera, o actúen de determinada forma. Las {{Glossary("Tag", "etiquetas")}} que delimitan un fragmento de contenido pueden hacer que dicho contenido enlace con otra página, ponga una palabra en cursiva, etcétera. Por ejemplo, dada la siguiente línea de contenido:

+ +
Mi gato es muy gruñón
+ +

Si queremos que la línea sea independiente de otras, podemos especificar que es un párrafo encerrándola con una etiqueta de elemento de párrafo ({{htmlelement("p")}}):

+ +
<p>Mi gato es muy gruñón</p>
+ +
+

Nota: Las etiquetas en HTML no distinguen entre mayúsculas y minúsculas. Así que se pueden escribir tanto en mayúsculas como en minúsculas. Por ejemplo, una etiqueta {{htmlelement("title")}} se puede escribir como <title>, <TITLE>, <Title>, <TiTle>, etc., y funcionará correctamente. La mejor práctica, sin embargo, es escribir todas las etiquetas en minúsculas para mantener la coherencia y legibilidad, entre otros motivos.

+
+ +

Anatomía de un elemento HTML

+ +

Exploremos un poco el elemento párrafo:

+ +

Anatomía de los elementos HTML

+ +

Las principales partes de nuestro elemento son:

+ + + +

El elemento lo conforman la etiqueta de apertura, seguida del contenido, seguido de la etiqueta de cierre.

+ +

Aprendizaje activo: crear tu primer elemento HTML

+ +

Edita la siguiente línea en el área Entrada envolviéndola con las etiquetas <em> y </em>. Para abrir el elemento, coloca la etiqueta de apertura <em> al principio de la línea. Para cerrar el elemento, coloca la etiqueta de cierre </em> al final de la línea. ¡Obtienes una línea en cursiva! Puedes ver tus cambios actualizados automáticamente en la caja de texto de Salida.

+ +

Si te equivocas, siempre puedes volver al código anterior mediante el botón Restablecer. Si te quedas realmente atascado, pulsa el botón Mostrar la solución para ver la solución.

+ + + +

{{ EmbedLiveSample('Código_reproducible', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Elementos anidados

+ +

Se pueden poner elementos dentro de otros elementos. Esto se llama anidamiento. Si quisiéramos decir que nuestro gato es muy gruñón, podríamos encerrar la palabra muy en un elemento {{htmlelement("strong")}} para que aparezca destacada.

+ +
<p>Mi gato es <strong>muy</strong> gruñón.</p>
+ +

Hay una forma correcta e incorrecta de anidar. En el ejemplo anterior, primero abrimos el elemento p, luego abrimos el elemento strong. Para un anidamiento adecuado, primero debemos cerrar el elemento strong, antes de cerrar el p.

+ +

El siguiente es un ejemplo de la forma incorrecta de anidar:

+ +
<p>Mi gato es <strong>muy gruñón.</p></strong>
+ +

Los elementos tienen que abrirse y cerrarse correctamente para que estén claramente dentro o fuera el uno del otro. Con el tipo de superposición en el ejemplo anterior, el navegador tiene que adivinar tu intención. Este tipo de adivinanzas puede producir resultados inesperados.

+ +

Elementos de bloque y elementos en línea

+ +

Hay dos categorías importantes de elementos en HTML — Estos son los elementos de bloque y los elementos en línea.

+ + + +

Considera el siguiente ejemplo:

+ +
<em>primero</em><em>segundo</em><em>tercero</em>
+
+<p>cuarto</p><p>quinto</p><p>sexto</p>
+
+ +

{{htmlelement("em")}} es un elemento en línea. Así, como puedes observar, los tres primeros elementos se sitúan en la misma línea, uno tras otro sin espacio entre ellos. Por otro lado, {{htmlelement("p")}} es un elemento a nivel de bloque. Cada elemento p aparece en una nueva línea, con un espacio arriba y abajo. (El espaciado se debe al {{web.link("/es/docs/Learn/CSS/Introduction_to_CSS", "estilo CSS")}} predeterminado que el navegador aplica a los párrafos).

+ +

{{ EmbedLiveSample('Elementos_de_bloque_y_elementos_en_línea', 700, 200, "", "") }}

+ +
+

Nota: HTML5 redefinió las categorías de elementos: consulta Categorías de contenido de elementos. Si bien estas definiciones son más precisas y menos ambiguas que sus predecesoras, las nuevas definiciones son mucho más complicadas de entender que block e inline . Este artículo seguirá con estos dos términos.

+
+ +
+

Nota: Los términos «en bloque» (block) y «en línea» (inline), tal como se usan en este tema, no se deberían confundir con {{web.link("/es/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes", "los tipos de casillas de CSS")}} que se conocen con el mismo nombre. Aunque de manera predeterminada están relacionados, el hecho de cambiar el tipo de aspecto visual del CSS no cambia la categoría del elemento ni afecta a aquellos elementos que pueda contener. Una de las razones por las que HTML5 abandonó el uso de estos términos fue para evitar este tipo de confusión.

+
+ +
+

Nota: Puedes encontrar referencias útiles que incluyen listas de elementos de bloque y elementos en línea. Consulta {{web.link("/es/docs/Web/HTML/Block-level_elements", "Elementos en bloque")}} y {{web.link("/es/docs/Web/HTML/Elementos_en_línea", "Elementos en línea")}}.

+
+ +

Elementos vacíos

+ +

No todos los elementos siguen el patrón de etiqueta de apertura, contenido y etiqueta de cierre. Algunos elementos consisten solo en una etiqueta única, que se utiliza generalmente para insertar/incrustar algo en el documento en el lugar donde se le quiere incluir. Por ejemplo, el elemento {{htmlelement("img")}} inserta una imagen en la página:

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+ +

Este texto mostrará lo siguiente en tu página:

+ +

{{ EmbedLiveSample('Elementos_vacíos', 700, 300, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Nota: Los elementos vacíos en ocasiones también se llaman elementos nulos o vanos (void elements).

+
+ +

Atributos

+ +

Los elementos también pueden tener atributos. Los atributos tienen este aspecto:

+ +

atributo html

+ +

Los atributos contienen información extra sobre el elemento que no se mostrará en el contenido. En este caso, el atributo class asigna al elemento un identificador que se puede utilizar para dotarlo de información de estilo.

+ +

Un atributo debería tener:

+ + + +

Aprendizaje activo: Añadir atributos a un elemento

+ +

Otro ejemplo de un elemento es {{htmlelement("a")}}. Esto significa ancla. Una ancla puede convertir el texto que encierra en un hipervínculo. Las anclas pueden tener varios atributos, pero varios son como sigue:

+ + + +

Edita la línea de abajo en el área de Entrada para convertirlo en un enlace a tu sitio web favorito.

+ +
    +
  1. Añade el elemento <a>.
    2. +
  2. Añade el atributo href y el atributo title.
    3. +
  3. Especifica el atributo target para abrir el enlace en una nueva pestaña.
    4. +
+ +

Los cambios se actualizarán inmediatamente en la zona de Salida. Deberías ver un enlace que mostrará el contenido del atributo title cuando pases el ratón encima, y que te llevará a la dirección web indicada por el atributo href cuando hagas clic. Recuerda que debes incluir un espacio entre el nombre del elemento y cada atributo.

+ +

Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si te quedas realmente atascado, pulsa el botón Mostrar la solución para ver la solución.

+ + + +

{{ EmbedLiveSample('Código_reproducible_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Atributos booleanos

+ +

En ocasiones puedes ver atributos escritos sin valor. Esto está permitido. Estos se denominan atributos booleanos. Los atributos booleanos solo pueden tener un valor, que generalmente es el mismo que el nombre del atributo. Por ejemplo, considera el atributo {{htmlattrxref("disabled", "input")}}, que puedes asignar a los elementos de entrada del formulario. (Usa esto para deshabilitar los elementos de entrada del formulario para que el usuario no pueda realizar entradas. Los elementos desactivados suelen tener una apariencia atenuada). Por ejemplo:

+ +
<input type="text" disabled="disabled">
+ +

De manera abreviada, también es posible escribirlo como se describe a continuación (además, se ha incluido un elemento de entrada de formulario no desactivado como referencia, para dar una idea más precisa de lo que sucede):

+ +
<!-- el uso del atributo deshabilitado evita que el usuario final introduzca texto en el cuadro de entrada -->
+<input type="text" disabled>
+
+<!-- se permite la entrada de texto, ya que no contiene el atributo deshabilitado -->
+<input type="text">
+
+ +

Como referencia, el ejemplo anterior también incluye un elemento de entrada de formulario no deshabilitado. El HTML del ejemplo anterior produce este resultado:

+ +

{{ EmbedLiveSample('Atributos_booleanos', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

Omitir comillas en valores de atributos

+ +

Cuando observas diferentes páginas web, puedes encontrarte con todo tipo de estilos de etiquetado extraños, que incluyen valores de atributos sin comillas. Esto se permite en ciertas circunstancias, pero interrumpirá la edición en otras. Por ejemplo, si volvemos a revisar el ejemplo del enlace, sería posible escribir una versión básica con solo el atributo href, así:

+ +
<a href=https://www.mozilla.org/>mi sitio web favorito</a>
+ +

Sin embargo, las cosas no funcionarán cuando a este estilo se añada el atributo title:

+ +
<a href=https://www.mozilla.org/ title=The Mozilla homepage>mi sitio web favorito</a>
+ +

En este punto el navegador interpretará mal el cambio y pensará que el atributo title corresponde a tres atributos: un atributo title con el valor The y dos atributos booleanos: Mozilla y homepage. ¡Obviamente, esta no es la intensión! Causará errores o comportamientos inesperados, como puedes ver en el ejemplo en vivo a continuación. ¡Intenta colocar el cursor sobre el enlace para ver el texto del título!

+ +

{{ EmbedLiveSample('Omitir_comillas_en_valores_de_atributos', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

Incluye siempre las comillas de atributos. Evita tales problemas y da como resultado un código más legible.

+ +

¿Comillas simples o dobles?

+ +

En este artículo todos los atributos se han incluido en comillas dobles. Sin embargo, se pueden ver comillas simples en algún código HTML. Es una cuestión de estilo. Puedes elegir libremente cuál prefieres. Ambas líneas de código son equivalentes:

+ +
<a href="http://www.ejemplo.com">Un enlace a mi ejemplo.</a>
+
+<a href='http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>
+ +

Asegúrate de no mezclar ambos tipos de comillas. El siguiente ejemplo muestra un tipo de mezcla de comillas que saldrá mal:

+ +
<a href="http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>
+ +

Si utilizas un tipo de comillas en tu documento HTML, puedes incluir el otro tipo de comillas para tus valores de atributo sin que esto te cause problemas:

+ +
<a href="http://www.ejemplo.com" title="¿A que es 'divertido'">Un enlace a mi ejemplo.</a>
+ +

Sin embargo, si deseas anidar unas comillas dentro de otras del mismo tipo (ya sea simples o dobles), tendrás que utilizar entidades HTML para las comillas. Por ejemplo, el siguiente código no va a funcionar:

+ +
<a href='http://www.ejemplo.com' title='¿A que es 'divertido'?'>Un enlace a mi ejemplo.</a>
+ +

Así que tendrás que hacer esto:

+ +
<a href='http://www.ejemplo.com' title='¿A que es &apos;divertido&apos;?'>Un enlace a mi ejemplo.</a>
+ +

Anatomía de un documento HTML

+ +

Los elementos HTML no son muy útiles por sí mismos. Ahora veremos cómo combinar los elementos individuales para formar una página HTML completa:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mi página de prueba</title>
+  </head>
+  <body>
+    <p>Esta es mi página</p>
+  </body>
+</html>
+ +

Aquí tenemos:

+ +
    +
  1. <!DOCTYPE html>: El elemento doctype. En sus inicios, cuando el HTML llevaba poco tiempo (alrededor de 1991-1992), los doctypes servían como enlaces al conjunto de reglas que la página HTML debía seguir para que fuera considerado buen HTML. Un elemento doctype de aquella época podía parecerse a esto: + + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    + En la actualidad se ignora y se considera un legado histórico que hay que incluir para que todo funcione correctamente. <!DOCTYPE html> es la secuencia de caracteres más corta que se acepta como elemento doctype válido. Eso es lo único que realmente necesitas saber.
    2. +
  2. <html></html>: El elemento <html>. Este elemento envuelve todo el contenido de la página. A veces se lo conoce como el elemento raíz.
    3. +
  3. <head></head>: El elemento <{{htmlelement("head")}}> (cabecera). Este elemento actúa como contenedor para todos los parámetros que quieras incluir en el documento HTML que no serán visibles a los visitantes de la página. Incluye cosas como palabras clave y la descripción de la página que quieras mostrar en los resultados de búsqueda, así como la hoja de estilo para formatear nuestro contenido, declaraciones de codificación de caracteres y más. Aprenderás más acerca de esto en el siguiente artículo de la serie.
    4. +
  4. <meta charset="utf-8">: Este elemento establece que tu documento HTML usará la codificación UTF-8, que incluye la gran mayoría de caracteres de todos los idiomas humanos escritos. En resumen: puede gestionar cualquier contenido textual que pongas en tu documento. No hay razón para no configurar este valor y te puede ayudar a evitar problemas más adelante.
    5. +
  5. <title></title>: El elemento {{htmlelement("title")}}. Este establece el título de la página, que es el título que aparece en la pestaña del navegador en la que se carga la página. El título de la página también se utiliza para describir la página cuando se marca como favorita.
    6. +
  6. <body></body>: El elemento <body>. Contiene todo el contenido que quieres mostrar a los usuarios cuando visitan tu página, ya sea texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa.
    7. +
+ +

Aprendizaje activo: Añadir algunas características a un documento HTML

+ +

Si quieres escribir algo de HTML en tu ordenador local para experimentar, puedes:

+ +
    +
  1. Copiar el ejemplo de la página HTML del punto anterior.
    2. +
  2. Crear un archivo nuevo en un editor de texto.
    3. +
  3. Pegar el código en el nuevo archivo de texto.
    4. +
  4. Guardar el archivo como index.html.
    5. +
+ +
+

Nota: También puedes encontrar esta plantilla básica de HTML en el repositorio GitHub del Área MDN Learning.

+
+ +

Ahora puedes abrir este archivo en un navegador web para ver cómo se ve el código renderizado. Edita el código y actualiza el navegador para ver cuál es el resultado. En principio se verá algo así:

+ +

Una sencilla página HTML que dice esta es mi páginaEn este ejercicio, puedes editar el código en tu ordenador como se indica arriba, o puedes editarlo en la ventana editable que tienes a continuación (la ventana editable representa solo el contenido del elemento {{htmlelement("body")}}, en este caso). Intenta reproducir los siguientes pasos:

+ + + +

Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si te quedas realmente atascado, pulsa el botón Mostrar la solución para ver la solución.

+ + + +

{{ EmbedLiveSample('Código_reproducible_3', 700, 600, "", "", "hide-codepen-jsfiddle") }}

+ +

Los espacios en blanco en HTML

+ +

En los ejemplos anteriores se han incluido espacios en blanco y saltos de línea en el código. Esto realmente no es necesario. Los dos siguientes fragmentos de código son equivalentes:

+ +
<p>Los perros son tontos.</p>
+
+<p>Los    perros        son
+         tontos.</p>
+ +

No importa cuántos espacios en blanco se utilicen (incluye tanto caracteres de espacio como saltos de línea) el intérprete de HTML reduce cada secuencia de espacio en blanco a un único espacio al interpretar el código. Entonces, ¿por qué utilizar espacios en blanco? La respuesta está en la legibilidad.
+
+ Es más fácil comprender lo que está sucediendo en tu código si lo tienes bien formateado. En nuestro HTML cada elemento anidado está sangrado dos espacios más con respecto al exterior. Depende de ti qué estilo de formato utilizas (cuántos espacios para cada nivel de sangría, por ejemplo) pero debes plantearte el uso de algún tipo de formato.

+ +

Referencias a entidades: Inclusión de caracteres especiales en HTML

+ +

En HTML, los caracteres <, >,",' y & son caracteres especiales. Forman parte de la sintaxis HTML. Entonces, ¿cómo incluye uno de estos caracteres especiales en tu texto? Por ejemplo, si deseas utilizar un signo comercial o menor que, y no hacer que se interprete como código.

+ +

Haces esto con referencias de caracteres. Estos son códigos especiales que representan caracteres, para ser usados en estas circunstancias exactas. Cada referencia de caracter comienza con un signo de ampersand (&) y finaliza con un punto y coma (;).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Caracter literalEquivalente de referencia de caracteres
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

El equivalente de referencia de caracter podría recordarse fácilmente porque el texto que utiliza se puede ver como menor que para '&lt;' , cita para ' &quot; ' y de manera similar para otros. Para obtener más información sobre la referencia de entidad, consulta {{interwiki("wikipedia", "Anexo:Referencias a entidades de caracteres XML y HTML")}} en (Wikipedia).
+
+ Considera los dos siguientes párrafos:

+ +
<p>En HTML, defines un párrafo con el elemento <p>.</p>
+
+<p>En HTML, defines un párrafo con el elemento &lt;p&gt;.</p>
+ +

En la salida en vivo de abajo, puedes ver que el primer párrafo salió mal. El navegador interpreta la segunda instancia de <p> como el inicio de un nuevo párrafo. El segundo párrafo se ve bien porque hemos remplazado < y > por sus referencias correspondientes.

+ +

{{ EmbedLiveSample('Referencias_a_entidades_Inclusión_de_caracteres_especiales_en_HTML', 700, 200) }}

+ +
+

Nota: En la Wikipedia se puede localizar un listado de todas las referencias de entidades de caracteres HTML disponibles: {{interwiki("wikipedia", "Anexo:Referencias a entidades de caracteres XML y HTML")}}. Observa que no necesitas usar ninguna referencia de entidad más para ningún otro de estos símbolos porque los navegadores modernos gestionan estos símbolos correctamente siempre y cuando en tu HTML hayas {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "establecido la codificación de el juego de caracteres universal UTF-8", "#Specifying_your_document's_character_encoding")}}.

+
+ +

Comentarios HTML

+ +

En HTML hay un mecanismo para escribir comentarios en el código. Los comentarios son ignorados por el navegador y, por tanto, son invisibles para el usuario. El propósito de los comentarios es permitirte incluir notas en el código para explicar tu lógica o codificación. Esto es muy útil si regresas a un código base después de estar ausente el tiempo suficiente como para no recordarlo por completo. Del mismo modo, los comentarios son invaluables ya que diferentes personas están realizando cambios y actualizaciones.

+ +

Para convertir en un comentario una sección de contenido de tu archivo HTML, debes delimitarlo con los marcadores especiales <!-- y -->. Por ejemplo:

+ +
<p>No soy un comentario</p>
+
+<!-- <p>¡Yo sí!</p> -->
+ +

Como puedes ver a continuación, el primer párrafo aparece, pero el segundo no.

+ +

{{ EmbedLiveSample('Comentarios_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

Resumen

+ +

Has llegado al final del artículo. Espero que hayas disfrutado del recorrido los conceptos básicos del HTML.
+ En este punto ya deberías entender el lenguaje, cómo funciona en un nivel básico y deberías poder escribir algunos elementos y atributos. También deberías poder escribir algunos elementos y atributos. Los artículos posteriores de este módulo profundizan en algunos de los temas aquí presentados, además de presentar otros conceptos del lenguaje.

+ +
+

Nota: En este punto, a medida que empieces a aprender más sobre HTML, es posible que también desees comenzar a explorar los conceptos básicos de las Hojas de estilo en cascada (Cascading style sheets) o {{web.link("/es/docs/Learn/CSS", "CSS")}}. CSS, es el lenguaje utilizado para estilizar páginas web. (por ejemplo, cambiar fuentes o colores, o alterar el diseño de la página) HTML y CSS funcionan bien juntos, como pronto descubrirás.

+
+ +

Ve también

+ + + +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +
+ +

En este módulo

+ + diff --git a/files/es/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/es/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..912acb7dfe --- /dev/null +++ b/files/es/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,970 @@ +--- +title: Fundamentos de texto en HTML +slug: Learn/HTML/Introduccion_a_HTML/texto +tags: + - CodingScripting + - Encabezados + - Estructuras + - Guía + - HTML + - Introducción a HTML + - Novato + - Principiante + - Párrafos + - Texto + - aprende + - semántica +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+ +

Una de las principales funciones de HTML es dar al texto estructura y significado (también conocido como {{Glossary("semantics", "semántica")}}), de forma que un navegador pueda mostrarlo correctamente. Este articulo explica la forma en que se puede usar {{Glossary("HTML")}} para estructurar una página de texto añadiendo encabezados y párrafos, enfatizando palabras, creando listas y más.

+ + + + + + + + + + + + +
Prerrequisitos:Estar familiarizado con el HTML básico, que se expone en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}.
Objetivo:Aprender a marcar una página de texto básica para darle estructura y significado, incluidos párrafos, encabezados, listas, efectos de énfasis y citas.
+ +

Conceptos básicos: Encabezados y párrafos

+ +

La mayor parte del texto estructurado está compuesto por encabezados y párrafos, independientemente de si lees una historia, un periódico, un libro de texto, una revista, etc.

+ +

Un ejemplo de la portada de un periódico, que muestra el uso de un encabezado, subtítulos y párrafos de nivel superior.

+ +

El contenido estructurado simplifica la experiencia en la lectura y se disfruta más.

+ +

En HTML, cada párrafo tiene que estar delimitado por un elemento {{HTMLElement("p")}}, como en este ejemplo:

+ +
<p>Soy un párrafo, ¡desde luego que lo soy!</p>
+ +

Cada sección tiene que estar delimitada por un elemento de encabezado:

+ +
<h1>Yo soy el título de la historia</h1>
+ +

Hay seis elementos de encabezado: {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} y {{HTMLElement("h6")}}. Cada elemento representa un nivel de contenido diferente en el documento; <h1> representa el título principal, <h2> representa el subtítulo, <h3> representa el subtítulo del subtítulo, y así sucesivamente.

+ +

Cómo establecer la estructura jerárquica

+ +

Por ejemplo, en esta historia, <h1> representa el título de la historia, <h2> representará el título de cada capítulo y <h3> las diferentes secciones del capítulo, y así sucesivamente.

+ +
<h1>El agujero aplastante</h1>
+
+<p>Por Chris Mills</p>
+
+<h2>Capítulo 1: La oscura noche</h2>
+
+<p>Era una noche oscura. En algún lugar, un búho ululó. La lluvia azotó el ...</p>
+
+<h2>Capítulo 2: El silencio eterno</h2>
+
+<p>Nuestro protagonista ni susurrar pudo al ver esa sombría figura ...</p>
+
+<h3>El espectro habla</h3>
+
+<p>Habían pasado varias horas más, cuando de repente el espectro se incorporó y exclamó: "¡Por favor, ten piedad de mi alma!"</p>
+ +

Realmente es a tu elección lo que cada elemento involucrado represente, siempre y cuando la jerarquía tenga sentido. Solo es necesario que tengas en cuenta unas pocas buenas prácticas mientras creas la estructura:

+ + + +

¿Por qué necesitamos estructura?

+ +

Para responder a esta cuestión, echemos un vistazo a text-start.html; el apartado inicial de nuestro ejemplo en curso para este artículo (una buena receta de hummus). Debes guardar una copia de este archivo en tu ordenador porque después la necesitarás para los ejercicios prácticos. El cuerpo (<body>) de este documento incluye varios elementos de contenido que no están marcados de ninguna manera pero están separados por saltos de línea (se ha pulsado Intro/Retorno para continuar en la siguiente línea).

+ +

Sin embargo, cuando abres el documento en tu navegador, verás que el texto aparece... ¡como una masa enorme!

+ +

Una página web que muestra un muro de texto sin formato, porque no hay elementos en la página para estructurarlo.

+ +

Esto se debe a que no hay elementos que den estructura al contenido, por lo que el navegador no sabe qué es un encabezado y qué es un párrafo. Además:

+ + + +

Por lo tanto, debemos dar a nuestro contenido una estructura definida.

+ +

Aprendizaje Activo: Dar estructura a nuestro contenido

+ +

Pasemos directamente a un ejemplo real. En el ejemplo de abajo, añade elementos al texto en bruto en el campo Código editable para que en el campo Salida en vivo aparezcan como un encabezado y dos párrafos.

+ +

Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si encallas, pulsa el botón Mostrar solución para ver la respuesta...

+ + + +

{{ EmbedLiveSample('Código_reproducible', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

¿Por qué necesitamos semántica?

+ +

Contamos con la semántica para todo lo que nos rodea. Nos basamos en experiencias previas para conocer la función de cada objeto cotidiano; cuando miramos un objeto, sabemos cuál debe ser su función. Entonces, por ejemplo, esperamos que un semáforo en rojo signifique "alto" y que un semáforo en verde signifique "avance". Las cosas se pueden complicar muy rápidamente si se aplica la semántica incorrecta. (¿Algún país usa rojo para significar "avance"? Esperemos que no).

+ +

De manera similar, debemos asegurarnos de que utilizamos los elementos adecuados y damos a nuestro contenido el significado y función correctos y la apariencia adecuada. En este mismo sentido, el elemento {{HTMLElement("h1")}} es un elemento semántico que da al texto al que delimita la función (o significado) de un titular de primer nivel en tu página.

+ +
<h1>Este es un titular de primer nivel</h1>
+ +

De manera predeterminada, el navegador le asignará una fuente de gran tamaño para darle el aspecto de un titular (aunque se le podrá dar el estilo que se quisiera usando CSS). Lo más importante es que su valor semántico se va a usar de diferente manera, por ejemplo, por los motores de búsqueda y los lectores de pantalla (como se mencionó antes).

+ +

Por otra parte, podrías hacer que cualquier elemento parezca un titular de primer rango. Considera lo siguiente:

+ +
<span style="font-size: 32px; margin: 21px 0;">¿Es este un titular de primer rango?</span>
+ +

Este es un elemento {{HTMLElement("span")}}. No tiene semántica. Se usa para delimitar contenido cuando se le quiere aplicar CSS (o tratarlo con JavaScript) sin proporcionarle ningún significado extra (encontrarás más información sobre este tipo de elemento más adelante en el curso). Hemos aplicado CSS a este elemento para que parezca un titular de primer nivel, pero al no tener valor semántico, no tiene ninguna de las ventajas añadidas que hemos descrito antes. Es una buena idea usar el elemento HTML apropiado para cada tarea.

+ +

Listas

+ +

Ahora volvamos nuestra atención hacia las listas. Las listas están en todos los aspectos de nuestra vida: desde la lista de compras a la lista de instrucciones que sigues inconscientemente para llegar a casa todos los días, o las listas de instrucciones que sigues en estos tutoriales. Las listas están en todos lados en la web también y hay tres diferentes tipos de las que nos vamos a ocupar.

+ +

Listas no ordenadas

+ +

Las listas no ordenadas se usan para marcar listas de artículos cuyo orden no es importante. Tomemos como ejemplo una lista de compras:

+ +
leche
+huevos
+pan
+hummus
+ +

Cada lista desordenada comienza con un elemento {{HTMLElement("ul")}} («unordered list») que delimita todos los elementos de la lista:

+ +
<ul>
+leche
+huevos
+pan
+hummus
+</ul>
+ +

El siguiente paso es delimitar cada artículo de la lista con un elemento {{HTMLElement("li")}} («list item»).

+ +
<ul>
+  <li>leche</li>
+  <li>huevos</li>
+  <li>pan</li>
+  <li>hummus</li>
+</ul>
+ +

Aprendizaje activo: marcar una lista no ordenada

+ +

Edita el siguiente ejemplo para crear tu propia lista HTML no ordenada.

+ + + +

{{ EmbedLiveSample('Código_reproducible_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Listas ordenadas

+ +

Las listas ordenadas son aquellas en las que el orden de los elementos sí importa. Tomemos como ejemplo una lista de instrucciones para seguir un itinerario:

+ +
Conduce hasta el final de la calle
+Gira a la derecha
+Sigue derecho por las dos primeras glorietas
+Gira a la izquierda en la tercer glorieta
+El colegio está a la derecha, 300 metros más adelante
+ +

La estructura de marcado es la misma que para las listas no ordenadas, excepto que debes delimitar los elementos de la lista con una etiqueta {{HTMLElement("ol")}} («ordered list»), en lugar de <ul>:

+ +
<ol>
+  <li>Conduce hasta el final de la calle</li>
+  <li>Gira a la derecha</li>
+  <li>Sigue derecho por las dos primeras glorietas</li>
+  <li>Gira a la izquierda en la tercer glorieta</li>
+  <li>El colegio está a tu derecha, 300 metros más adelante</li>
+</ol>
+ +

Aprendizaje activo: Marcar una lista ordenada

+ +

Edita el siguiente ejemplo para crear tu propia lista ordenada en HTML.

+ + + +

{{ EmbedLiveSample('Código_reproducible_3', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Aprendizaje activo: marcar la página de tu receta

+ +

Llegados a este punto del artículo, tienes toda la información necesaria para marcar la página de ejemplo con tu receta. Puedes escoger entre guardar una copia local del archivo inicial text-start.html y trabajar en él, o hacerlo sobre el ejemplo editable de abajo. Probablemente sea mejor trabajar en tu copia local porque podrás guardar tu progreso, mientras que si lo haces sobre el ejemplo editable, los cambios se perderán la próxima vez que cargues la página. Ambos métodos tienen pros y contras.

+ + + +

{{ EmbedLiveSample('Código_reproducible_4', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Si encallas, siempre puedes pulsar el botón Mostrar solución o comprobar el ejemplo completo text-complete.html en nuestro repositorio de Github.

+ +

Listas anidadas

+ +

Es perfectamente correcto anidar una lista dentro de otra. Posiblemente quieras tener subelementos bajo elementos de rango superior. Tomemos la segunda lista de nuestro ejemplo de la receta:

+ +
<ol>
+  <li>Pela el ajo y picarlo en trozos gruesos.</li>
+  <li>Retira las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li>
+  <li>Mete todos los alimentos en un procesador de alimentos.</li>
+  <li>Pica todos los ingredientes hasta conseguir una pasta.</li>
+  <li>Si deseas un hummus "grueso", procésalo corto tiempo.</li>
+  <li>Pica durante más tiempo si se desea obtener un hummus "suave".</li>
+</ol>
+ +

Puesto que los dos últimos elementos están estrechamente relacionados con el elemento anterior (se leen como subinstrucciones u opciones que encajan bajo ese elemento), puede tener sentido anidarlos dentro de su propia lista no ordenada e introducir esa lista bajo el cuarto elemento. Tendría el siguiente aspecto:

+ +
<ol>
+  <li>Pela el ajo y picarlo en trozos gruesos.</li>
+  <li>Retira las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li>
+  <li>Mete todos los alimentos en un procesador de alimentos.</li>
+  <li>Procesa todos los ingredientes hasta conseguir una pasta.
+    <ul>
+      <li>Si deseas un hummus "grueso", procésalo corto tiempo.</li>
+      <li>Pica durante más tiempo si se desea obtener un hummus "suave".</li>
+    </ul>
+  </li>
+</ol>
+ +

Vuelve al ejemplo anterior y reescribe la lista de este modo.

+ +

Énfasis e importancia

+ +

En el lenguaje humano, a menudo enfatizamos ciertas palabras para alterar el significado de una frase, y a menudo queremos destacar ciertas palabras como importantes o diferentes en algún sentido. HTML nos dota de diversos elementos semánticos que nos permiten destacar contenido textual con tales efectos, y en esta sección veremos los más comunes.

+ +

Énfasis

+ +

Cuando queremos dar énfasis al lenguaje hablado, acentuamos ciertas palabras y así alteramos sutilmente el significado de lo que decimos. De manera similar, en el lenguaje escrito ponemos palabras en cursiva para destacarlas. Por ejemplo, las dos siguientes frases tienen diferente significado:

+ +

Me alegro de que no llegues tarde.

+ +

Me alegro de que no llegues tarde.

+ +

La primera frase suena aliviada porque la persona no llega tarde. Por el contrario, la segunda suena sarcástica y un tanto pasivo-agresiva, expresa molestia porque la persona ha llegado algo tarde.

+ +

En HTML usamos el elemento {{HTMLElement("em")}} («emphasis») para marcar estos casos. El documento logra entonces transmitir una lectura más interesante y además así lo reconocen los lectores de pantalla, que lo expresan con un diferente tono de voz. El navegador, de manera predeterminada, aplica el estilo de letra itálica, pero no debes utilizar esta etiqueta solamente para establecer el estilo de letra itálica. Para usar ese estilo, debes utilizar únicamente la etiqueta del elemento {{HTMLElement("span")}} y algo de CSS u otra etiqueta con el elemento {{HTMLElement("i")}} (ve abajo).

+ +
<p>Me <em>alegro</em> de que no llegues <em>tarde</em>.</p>
+ +

Importancia fuerte

+ +

Para enfatizar palabras importantes al hablar solemos acentuarlas, y al escribir lo hacemos en estilo negrita. Por ejemplo:

+ +

Este líquido es altamente tóxico.

+ +

Cuento contigo. ¡No llegues tarde!

+ +

En HTML usamos el elemento {{HTMLElement("strong")}} (importancia fuerte) para marcar tales expresiones. El documento resulta entonces más útil, y de nuevo los lectores de pantalla reconocen estos elementos y el tono de voz cambia a uno más fuerte. El estilo negrita es el que aplican los navegadores por omisión, pero no debes usar esta etiqueta solamente para aplicar este estilo. Para hacer eso usa el elemento {{HTMLElement("span")}} y CSS, o un elemento {{HTMLElement("b")}} (ve más abajo).

+ +
<p>Este líquido es <strong>altamente tóxico</strong>.</p>
+
+<p>Cuento contigo. <strong>¡No llegues tarde!</strong></p>
+ +

Puedes anidar elementos de énfasis dentro de elementos de importancia y viceversa si lo deseas:

+ +
<p>Este líquido es <strong>altamente tóxico</strong> —
+si lo bebes, <strong>podrías <em>morir</em></strong>.</p>
+ +

Aprendizaje activo: ¡Seamos importantes!

+ +

En esta sección de aprendizaje activo te proporcionamos un ejemplo editable. Practica un poco añadiendo algo de énfasis e importancia a las palabras que creas que lo necesitan.

+ + + +

{{ EmbedLiveSample('Código_reproducible_5', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Cursiva, negrita, subrayado...

+ +

Los elementos que hemos comentado hasta ahora tienen asociada una semántica clara. La situación con {{HTMLElement("b")}} (negrita o «bold»), {{HTMLElement("i")}} (cursiva o «italic») y{{HTMLElement("u")}} (subrayado o «underline») es algo más complicada. Surgieron para que las personas pudieran escribir textos en negrita, cursiva o subrayado en un tiempo en el que pocos navegadores o ninguno admitían el CSS. Elementos como estos, que solo afectan a la presentación y no a la semántica, se conocen como elementos de presentación y no se deberían usar porque, como hemos visto, la semántica es muy importante para la accesibilidad y el SEO, entre otros aspectos.

+ +

HTML5 redefinió los elementos <b>, <i> y <u> con roles semánticos nuevos un tanto confusos.

+ +

Esta es la regla de oro: el uso de <b>, <i> o <u> resulta adecuado cuando transmiten el significado que suele transmitir el uso tradicional de las negritas, itálicas o el subrayado, si no hay ningún otro elemento que resulte más adecuado. Sin embargo, siempre resulta crítico mantener una actitud orientada a la accesibilidad. El concepto de itálica no es demasiado útil para las personas que usan lectores de pantalla o para las personas que utilizan un sistema de escritura distinto del alfabeto latino.

+ + + +
+

Una observación prudente acerca del subrayado: La gente suele asociar estrechamente el subrayado con los hipervínculos. Por ello en la web es mejor reservar el subrayado para los enlaces. Utiliza el elemento {{HTMLElement('u')}} cuando resulte apropiado semánticamente, pero considera usar CSS para cambiar el subrayado predeterminado por algo más adecuado en la web. El siguiente ejemplo ilustra cómo lo puedes hacer.

+
+ +
<!-- nombres científicos -->
+<p>
+  El colibrí garganta de rubí (<i>Archilochus colubris</i>)
+  es el colibrí más común en el este de América del Norte.
+</p>
+
+<!-- extranjerismos -->
+<p>
+  El menú era un mar de palabras exóticas como <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> y <i lang="fr">soupe à l'oignon</i>.
+</p>
+
+<!-- un error ortográfico reconocido -->
+<p>
+  Algún día aprenderé a deletrear mejor.
+</p>
+
+<!-- Palabras clave destacadas en una serie de instrucciones -->
+<ol>
+  <li>
+    <b>Corta</b> dos piezas de la hogaza de pan.
+  </li>
+  <li>
+    <b>Inserta</b> una rodaja de tomate y una hoja de
+    lechuga entre las rebanadas de pan.
+  </li>
+</ol>
+ +

¡Pon a prueba tus habilidades!

+ +

Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encontrarás más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics", "Pon a prueba tus habilidades: Prueba de conocimientos básicos de HTML")}}.

+ +

Resumen

+ +

¡Eso es todo por ahora! Este artículo debería haberte dado una buena idea de cómo comenzar a marcar texto en HTML y te ha presentado algunos de los elementos más importantes en este ámbito. Hay muchos más elementos semánticos para desarrollar en esta área, y veremos muchos más en nuestro artículo {{web.link("/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}, más adelante en el curso. En el siguiente artículo, veremos en detalle cómo {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "crear hipervínculos")}}, posiblemente el más importante elemento en la web.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/html/introduction_to_html/index.html b/files/es/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..64c70649cb --- /dev/null +++ b/files/es/learn/html/introduction_to_html/index.html @@ -0,0 +1,77 @@ +--- +title: Introducción a HTML +slug: Learn/HTML/Introduccion_a_HTML +tags: + - CodingScripting + - Enlaces + - Estructura + - HTML + - Introducción a HTML + - Texto + - semántica +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

En su corazón, {{glossary("HTML")}} es un lenguaje muy sencillo compuesto de {{Glossary("Element", "elementos")}}, que se pueden aplicar a piezas de texto para darles un significado diferente en un documento (¿Esto es un párrafo? ¿Esto es una lista con viñetas? ¿Esto es parte de una tabla?), estructura un documento en secciones lógicas (¿Tiene una cabecera? ¿Tres columnas de contenido? ¿Un menú de navegación?), e incrusta contenido como imágenes y vídeos en una página. Este módulo introducirá los dos primeros de estos, e introduce conceptos fundamentales y la sintaxis que necesitas para entender HTML.

+ +
+

¿Quieres transformarte en un desarrollador de la interfaz de usuario web?

+ +

Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.

+ +

Empieza aquí

+
+ +

Prerrequisitos

+ +

Antes de empezar este módulo, no necesitas conocimientos previos de HTML, pero deberías estar, por lo menos, familiarizado con el uso básico de computadoras, y usar la Web pasivamente (es decir, sólo revisándola y consumiendo el contenido). Debes tener configurado un entorno de trabajo básico (como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "Instalación de software básico")}}), y comprender cómo crear y administrar archivos (como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "Manejo de archivos")}}). Ambos son parte de nuestro módulo completo {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la web")}} para principiantes.

+ +
+

Nota: Si estás trabajando en una computadora, tablet u otro dispositivo en donde no tengas la capacidad de crear tus propios archivos, podrías probar (en su mayoría) el código de los ejemplos en un programa para escribir código en línea como JSBin o Glitch.

+
+ +

Guías

+ +

Este módulo contiene los siguientes artículos, que te llevarán a través de toda la teoría básica de HTML, y te proporcionarán una amplia oportunidad de probar algunas habilidades.

+ +
+
Empezar con HTML
+
Cubre las bases absolutas de HTML, para que puedas empezar — definimos elementos, atributos, y todas los otros términos importantes que puedas haber escuchado, y en donde encajan en el lenguaje. También mostramos cómo está estructurado un elemento HTML, cómo está estructurada una página HTML típica, y explica otras características importantes. En el camino, vamos a tener un juego con algo de HTML, ¡para alimentar tu intereses!
+
¿Qué hay en la cabecera? Metadatos en HTML
+
La cabecera de un documento HTML es la parte que no se muestra en el navegador web cuando se carga una página. Esta contiene información como el título ({{htmlelement("title")}}) de la página, enlaces a {{glossary("CSS")}} (si quieres estilizar tu contenido HTML con CSS), enlaces a favicons personalizados, y metadatos (que son los datos sobre el HTML, como quién lo escribió, y palabras clave que describen el documento).
+
Fundamentos de texto HTML
+
Uno de los principales trabajos de HTML es darle significado al texto (también conocido como semántica) para que el navegador sepa cómo mostrarlo correctamente. Este artículo trata cómo usar HTML para convertir un bloque de texto en una estructura de encabezados y párrafos, agregar énfasis o importancia a las palabras, crear listas y más.
+
Creando hipervínculos
+
Los hipervínculos realmente son importantes — estos son los que hacen la Web. Este artículo muestra la sintaxis requerida para hacer un enlace, y explica las mejores prácticas sobre enlaces.
+
Formateo de texto avanzado
+
Hay muchos otros elementos en HTML para formatear texto, que no hemos tratado en los artículos {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "fundamentos de texto HTML")}}. Los siguientes elementos son menos conocidos, pero sigue siendo útil conocerlos. Aquí aprenderás sobre el marcado de citas, listas de descripción, código de computadoras y otros textos relacionados, subíndices y superíndices, información de contacto, y mucho más.
+
{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}
+
Así como definimos las partes individuales de tu página (como "un párrafo" o "una imagen"), HTML también se usa para definir las áreas de tu sitio web (como "la cabecera", "el menú de navegación", "la columna de contenido principal"). Este artículo trata sobre cómo planear una estructura básica del sitio web, y escribir el HTML para representar esa estructura.
+
Depurar HTML
+
Escribir HTML está bien, pero ¿Qué pasa si algo está mal, y no puedes encontrar en dónde está el error en el código? Este artículo introducirá algunas herramientas que te podrán ayudar.
+
+ +

Evaluaciones

+ +

Las siguientes evaluaciones probarán tu entendimiento de las bases de HTML cubiertas en las guías anteriores.

+ +
+
{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcando para una carta")}}
+
Todos aprendemos a escribir una carta, tarde o temprano; ¡Este también es un ejemplo útil para poner a prueba nuestras habilidades de formato de texto! Así que en esta evaluación se te dará una carta a la cual le tendrás que dar un marcado HTML.
+
{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}
+
Esta evaluación prueba tu capacidad para usar HTML para estructurar el contenido de una sencilla página, esta tiene una cabecera, pie de página, menú de navegación, contenido principal, y una barra lateral.
+
+ +

Ve también

+ +
+
Bases de la alfabetización Web 1
+
Un curso excelente de la fundación Mozilla que explora y pone a prueba muchas de las habilidades sobre las cuales hablamos en el módulo de Introducción a HTML. Los estudiantes se familiarizan con la lectura, escritura y participan de la web en este módulo de seis partes. Descubre los fundamentos de la web a través de la producción y colaboración.
+
+ +
+

Retroalimentación

+ +

Ayúdanos a mejorar nuestras guías y tutoriales como esta respondiendo {{web.link("https://www.surveygizmo.com/s3/4871248/MDN-Guides-Survey", "nuestra encuesta aquí")}}.

+
diff --git a/files/es/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/es/learn/html/introduction_to_html/marking_up_a_letter/index.html new file mode 100644 index 0000000000..e53bb01826 --- /dev/null +++ b/files/es/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -0,0 +1,88 @@ +--- +title: Marcando una Carta +slug: Learn/HTML/Introduccion_a_HTML/Marking_up_a_letter +tags: + - Cabecera + - Codificación + - Enlaces + - Evaluación + - Principiante + - Texto +translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
+ +

Todos aprendemos a escribir una carta más tarde o más temprano; es también práctico practicar con nuestras habilidades para dar forma a los textos. En esta prueba deberás demostrar tus habilidades para dar forma a textos, incluyendo enlaces, además pondremos a prueba tu familiaridad con algunos contenidos de encabezamiento <head> en HTML.

+ + + + + + + + + + + + +
Prerrequisitos:Antes de intentar este examen deberías haber trabajado los artículos Getting started with HTML, What's in the head? Metadata in HTML, HTML text fundamentals, Creating hyperlinks, y Advanced text formatting.
Objetivos:Probar las habilidades básicas y avanzadas de formateo de texto e hyperlinks, y el conocimiento de los encabezamientos en HTML.
+ +

Punto de partida

+ +

Para comenzar esta prueba, deberemos copiar el texto que deberemos trabajar, y el CSS que necesitaremos incluir en nuestro HTML. Crearemos un archivo nuevo .html usando nuestro editor de texto (o alternativamente usaremos otros como JSBin o Thimble para hacer nuestra prueba).

+ +

Resumen del proyecto a desarrollar

+ +

En este proyecto tu tarea será publicar una carta que debe estar alojada en la intranet de una universidad. La carta es la respuesta de un compañero investigador a un posible estudiante de postgrado en relación a su deseo de trabajar en la universidad.

+ +

Semánticas de bloque/estructurales:

+ + + +

Semánticas intralínea:

+ + + +

El encabezamiento del documento:

+ + + +

Pistas y recomendaciones

+ + + +

Example

+ +

The following screenshot shows an example of what the letter might look like after being marked up.

+ +

+ +

Evaluación

+ +

Si estás haciendo esta prueba como parte de un curso organizado, deberías entregar tu trabajo al profesor para que lo corrija. Si estás auto-aprendiendo puedes conseguir la guía de corrección fácilmente pidiendola en el Hilo del area de aprendizaje, o en el canal IRC de #mdn en Mozilla IRC. Intenta hacerlo primero — no ganarás nada haciendo trampas.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/es/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/es/learn/html/introduction_to_html/structuring_a_page_of_content/index.html new file mode 100644 index 0000000000..686940212e --- /dev/null +++ b/files/es/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -0,0 +1,105 @@ +--- +title: Estructuración de una Página de contenido +slug: Learn/HTML/Introduccion_a_HTML/Estructuración_de_una_página_de_contenido +tags: + - Aprendizaje + - Diseño + - Escribir Código + - Estructuración + - Evaluación + - HTML + - Principiante + - Prototipado + - semántica +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}} 
+ +

La estructuración de una página de contenido lista para su uso mediante CSS es una habilidad muy importante para dominar, por lo que en esta evaluación  verá  su capacidad para pensar en cómo  podría finalizar una página  buscando y eligiendo la semántica estructural adecuada para construir un diseño en la parte superior.

+ +
+
 
+
+ + + + + + + + + + + + +
Prerequisitos:Antes de intentar esta evaluación, usted debería haber trabajado ya en el resto del curso, con un énfasis particular en la Estructura del Documento y del Sitio Web..
Objetivo:Probar el conocimiento de las estructuras de páginas web y cómo representar un prototipado de diseño prospectivo en el marcado.
+ +

Punto de partida

+ +

Para comenzar esta evaluación, debería tomar el   archivo zip  que contiene todos los activos de inicio. El archivo zip contiene:

+ + + +

Crée el ejemplo en su ordenador personal, o como alternativa utilize un sitio como JSBin o Thimble para hacer su evaluación.

+ +

Breve Proyecto

+ +

Para este proyecto, su tarea es tomar el contenido de la página principal de un sitio web de observación de aves y añadir elementos estructurales a la misma para que pueda tener un diseño de página aplicado a ella. Necesita tener:

+ + + +

Debe agregar una presentación adecuada para:

+ + + +

También debería:

+ + + +

Consejos

+ + + +

Ejemplo

+ +

La siguiente captura de pantalla muestra un ejemplo de cómo podría verse la letra después de haber sido marcada.

+ +

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

+ +

Evaluación

+ +

Si está siguiendo esta evaluación como parte de un curso organizado, debe ser capaz de dar su trabajo a su maestro / mentor para el marcado. Si usted está aprendiendo por si mismo, entonces  puede obtener la guía de marcado con bastante facilidad preguntando sobre ello en la lista de correo  dev-mdc , o en el canal IRC #mdn  en Mozilla IRC. Pruebe a hacer el ejercicio primero - ¡No hay nada que ganar por hacer trampa!

+ +

{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

+ +
+ + +
 
+ +
 
+
diff --git a/files/es/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.html b/files/es/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.html new file mode 100644 index 0000000000..f29638eb81 --- /dev/null +++ b/files/es/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.html @@ -0,0 +1,67 @@ +--- +title: 'Pon a prueba tus habilidades: texto HTML avanzado' +slug: 'Learn/HTML/Introduccion_a_HTML/Test_your_skills:_Advanced_HTML_text' +translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text' +--- +
{{learnsidebar}}
+ +

El objetivo de esta prueba de habilidad es evaluar si ha entendido nuestras   formato de texto avanzado articulo.

+ +
+

NOTA:Puede probar soluciones en los editores interactivos a continuación; sin embargo, puede resultar útil descargar el código y utilizar una herramienta en línea como  CodePen, jsFiddle, o Glitch trabajar en las tareas.
+
+ Si se atasca, pídanos ayuda; consulte la {{anch("Assessment or further help")}} section at the bottom of this page.

+
+ +

Texto HTML avanzado 1

+ +

En esta tarea, queremos que convierta los animales proporcionados y sus definiciones en una lista de descripción.
+
+ Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/advanced-text/advanced-text1.html", '100%', 700)}}

+ +
+

Descarga el puno de partida para esta tarea to work in your own editor or in an online editor.

+
+ +

Texto HTML avanzado 2

+ +

En esta tarea, queremos que agregue algo de semántica al HTML proporcionado de la siguiente manera:

+ + + +

Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/advanced-text/advanced-text2.html", '100%', 700)}}

+ +
+

Descarga el punto de partida para esta tarea para trabajar en su propio editor o en un editor en línea.

+
+ +

Evaluación o ayuda adicional

+ +
+
Puede practicar estos ejemplos en los editores interactivos anteriores.
+
+Si desea que se evalúe su trabajo, o está atascado y desea pedir ayuda:
+ +
+
+ +
    +
  1. Pon tu trabajo en un editor que se pueda compartir en línea, como  CodePen, jsFiddle, o Glitch. Puede escribir el código usted mismo o utilizar los archivos de punto de inicio vinculados en las secciones anteriores.
    2. +
  2. Escriba una publicación solicitando evaluación y / o ayuda en el  MDN Discourse forum Learning category. Tu publicación debe incluir: +
      +
    • Un título descriptivo como "Se busca evaluación para la prueba de habilidad de texto avanzado HTML 1".
      • +
    • Detalles de lo que ya ha probado y lo que le gustaría que hiciéramos, p. Ej. si está atascado y necesita ayuda, o quiere una evaluación.
      • +
    • Un enlace al ejemplo que desea evaluar o con el que necesita ayuda, en un editor que se puede compartir en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica para entrar: es muy difícil ayudar a alguien con un problema de codificación si no puede ver su código.
      • +
    • Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que desea ayuda.
      • +
    +
    3. +
diff --git a/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html b/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html new file mode 100644 index 0000000000..f35a083987 --- /dev/null +++ b/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html @@ -0,0 +1,72 @@ +--- +title: 'Prueba tus habilidades: Texto básico HTML' +slug: 'Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Texto_básico_HTML' +tags: + - Aprendizaje + - HTML + - Principiante + - Prueba tus habilidades + - Texto +translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics' +--- +
{{learnsidebar}}
+ +

El objetivo de esta prueba de habilidad es evaluar si has comprendido el artículo Fundamentos de texto en HTML.

+ +
+

Nota: Puedes intentar resolverlo en los editores interactivos de más abajo, sin embargo puede ser muy úytil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.
+
+ Si te atascas, entonces pídenos ayuda — busca en la sección {{anch("Assessment or further help")}} al final de esta página.

+
+ +

Texto básico HTML 1

+ +

En esta tarea queremos que etiquetes el HTML entregado utilizando elementos semánticos de encabezado y párrafo. Intenta actualizando el código más abajo para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1.html", '100%', 700)}}

+ +
+

Descarga el punto de inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Texto básico HTML 2

+ +

En esta tarea necesitamos que cambies la primera lista no marcada en una lista no ordenada, y la segunda en una lista ordenada.

+ +

Intenta actualizando el código más abajo para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2.html", '100%', 700)}}

+ +
+

Descarga el punto de inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Texto básico HTML 3

+ +

En esta tarea se te entrega un párrafo, y tu objetivo es usar algunos elementos en línea para marcar algunas palabras con importancia, y otras con énfasis

+ +

Intenta actualizando el código más abajo para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3.html", '100%', 700)}}

+ +
+

Descarga el punto de inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Evaluación o ayuda adicional

+ +

Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.

+ +

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

+ +
    +
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.
    2. +
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: +
      +
    • Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de texto básico HTML 1".
      • +
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • +
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • +
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • +
    +
    3. +
diff --git a/files/es/learn/html/introduction_to_html/test_your_skills_colon__links/index.html b/files/es/learn/html/introduction_to_html/test_your_skills_colon__links/index.html new file mode 100644 index 0000000000..0e8dc1bfaf --- /dev/null +++ b/files/es/learn/html/introduction_to_html/test_your_skills_colon__links/index.html @@ -0,0 +1,99 @@ +--- +title: 'Prueba tus habilidades: Enlaces' +slug: 'Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces' +translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links' +--- +
{{learnsidebar}}
+ +

El objetivo de esta pueba de habilidad es evaluar si has comprendido nuestro artículo Creando hipervínculos.

+ +
+

Nota: Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.
+
+ Si te atascas, pide ayuda — mira la sección {{anch("Evaluación o ayuda adicional")}} al final de esta página.

+
+ +

Enlaces 1

+ +

En esta tarea necesitamos tu ayuda para completar los enlaces en nuestra página de información sobre Ballenas:

+ + + +
+

Nota: El primer enlace en el ejemplo tiene el atributo target="_blank" , así que cuando haces click en él, abre la página en una pestaña nueva. Esto no es estrictamente una buena práctica, pero lo hemos hecho aquí para que la página no se abra en el <iframe> incrustado, ¡eliminando el código de ejemplo en el proceso!

+
+ +

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links1.html", '100%', 700)}}

+ +
+

Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Enlaces 2

+ +

En esta tarea queremos que completes los cuatro enlaces para que se dirijan al lugar apropiado:

+ + + +
+

Nota: Los primeros tres enlaces en el ejemplo tienen el atributo target="_blank" especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del <iframe> incrustado, ¡eliminando el código de ejemplo en el proceso!

+
+ +

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links2.html", '100%', 700)}}

+ +
+

Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Enlaces 3

+ +

Los siguientes enlaces dirigen a una página informativa acerca de los Narvales, una dirección de correo electrónico de soporte, y un documento PDF cuyo tamaño es 4MB. En esta tarea queremos que:

+ + + +
+

Nota: Los primeros tres enlaces en el ejemplo tienen el atributo target="_blank" especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del <iframe> incrustado, ¡eliminando el código de ejemplo en el proceso!

+
+ +

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links3.html", '100%', 700)}}

+ +
+

Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Evaluación o ayuda adicional

+ +

Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.

+ +

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

+ +
    +
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.
    2. +
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: +
      +
    • Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de texto básico HTML 1".
      • +
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • +
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • +
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • +
    +
    3. +
diff --git a/files/es/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/es/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..6fc5f94ab0 --- /dev/null +++ b/files/es/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,299 @@ +--- +title: ¿Qué hay en la cabecera? Metadatos en HTML +slug: Learn/HTML/Introduccion_a_HTML/Metados_en +tags: + - Cabecera + - CodingScripting + - Guía + - HTML + - Meta + - Metadatos + - Novato + - Principiante + - favicon + - head + - lang + - metadata +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+ +

El elemento {{Glossary("Head", "head")}} de un documento HTML es la parte que no se muestra en el navegador cuando se carga la página. Contiene información como el título ({{htmlelement("title")}}) de la página, enlaces al {{Glossary("CSS")}} (si quieres aplicar estilo a tu contenido HTML con CSS), enlaces para personalizar favicon, y otros metadatos (datos sobre el HTML, como quién lo escribió y palabras claves importantes que describen el documento). En este artículo abarcaremos todo esto y más, para darte bases sólidas en el manejo del marcado y otro código que debería estar presente en tu cabecera.

+ + + + + + + + + + + + +
Prerrequisitos:Estar familiarizado con el HTML básico, que se expone en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con el HTML")}}.
Objetivo:Aprender acerca de la cabecera HTML {{Glossary("Head", "head")}}, cuál es su propósito, los elementos más importantes que puede contener, y qué efecto puede tener sobre el documento HTML.
+ +

¿Qué hay en la cabecera HTML?

+ +

Vamos a revisar el {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document", "documento HTML que se revisó en el artículo anterior")}}:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mi página de prueba</title>
+  </head>
+  <body>
+    <p>Esta es mi página</p>
+  </body>
+</html>
+ +

La cabecera HTML es el contenido del elemento {{htmlelement("head")}} — a diferencia del contenido del elemento {{htmlelement("body")}} (que sí se muestra en la página cuando se carga en el navegador), el contenido de la cabecera no se muestra en la página. Por el contrario, la función de la cabecera es contener los {{Glossary("Metadata", "metadatos")}} del documento. En el ejemplo anterior, la cabecera es bastante reducida:

+ +
<head>
+  <meta charset="utf-8">
+  <title>Mi página de prueba</title>
+</head>
+ +

En páginas más grandes, sin embargo, la cabecera puede llegar a contener bastantes elementos. Prueba a ir a algunos de tus sitios web favoritos y comprueba el contenido de la cabecera usando las {{web.link("/es/docs/Learn/Common_questions/What_are_browser_developer_tools", "herramientas para el desarrollador")}}. Nuestro objetivo aquí no es mostrarte cómo usar todo lo que puedes incluir en la cabecera, sino enseñarte cómo usar los elementos principales que vas a incluir en la cabecera y que te familiarices con ellos. Empecemos.

+ +

Añadir un título

+ +

Ya hemos visto el elemento {{htmlelement("title")}} en acción — se puede usar para poner un título al documento. Sin embargo, esto se puede confundir con el elemento {{htmlelement("h1")}}, que se utiliza para poner un encabezado de nivel superior al cuerpo de tu contenido — esto también se conoce como el título de la página. ¡Pero son cosas diferentes!

+ + + +

Aprendizaje activo: Análisis de un ejemplo sencillo

+ +
    +
  1. Para comenzar este aprendizaje activo, te proponemos ir a nuestro repositorio de GitHub y descargues una copia de nuestra página title-example.html. Lo puedes hacer de las siguientes maneras: + +
      +
    1. Copia y pega el código de la página en un archivo de texto nuevo en tu editor de código, luego guárdalo en un lugar conveniente.
      2. +
    2. Presiona el botón "Raw" en la página de GitHub, lo cual hace que aparezca el código sin procesar (posiblemente en una nueva pestaña del navegador). A continuación, en el menú de tu navegador elige Archivo → Guardar página como... y selecciona un lugar adecuado para guardar el archivo.
      3. +
    +
    2. +
  2. Ahora abre el archivo en tu navegador. Deberías ver algo como esto: +

    Una sencilla página web con el título configurado a <title> element, y el <h1> configurado a <h1> element.Ahora debería quedar claro dónde aparece el contenido de <h1> y dónde aparece el contenido de <title>.

    +
    3. +
  3. También podrías probar a abrir el código en tu editor de código, editar el contenido de estos elementos y luego actualizar la página en tu navegador. Juega un poco con ello.
    4. +
+ +

El contenido del elemento <title> también se usa de otras formas. Por ejemplo, si intentas marcar la página como favorita (Marcadores → Marcar esta página, o el icono en forma de estrella de Firefox), verás que el nombre que se sugiere para el marcado es el contenido del elemento <title>.

+ +

Se está marcando una página web en Firefox; el nombre del marcador se ha completado automáticamente con el contenido del elemento <title>

+ +

El contenido de <title> también se usa en el resultado de las búsquedas, como verás a continuación.

+ +

Metadatos: el elemento <meta>

+ +

Los metadatos son datos que describen datos, y HTML tiene una forma «oficial» de introducir metadatos en un documento — el elemento {{htmlelement("meta")}}. Por supuesto, el resto de los elementos de los que hablaremos en este artículo también se podrían considerar metadatos. Hay muchos diferentes tipos de elementos <meta> que se pueden incluir en el <head> de tu página, pero no vamos a intentar explicarlos todos en esta etapa porque resultaría demasiado confuso. En lugar de ello vamos a explicar algunas cuestiones con las que seguramente te vas a encontrar, solo para que te hagas una idea.

+ +

La codificación de caracteres de tu documento

+ +

El ejemplo que vimos arriba incluía esta línea:

+ +
<meta charset="utf-8">
+ +

Este elemento simplemente especifica la codificación de caracteres del documento — es decir, el conjunto de caracteres que el documento puede usar. utf-8 es un conjunto de caracteres universal que incluye casi todos los caracteres de casi cualquier idioma humano. Esto significa que tu página web podrá gestionar la visualización de cualquier idioma; por lo tanto, resulta una buena idea configurarlo en cada página web que crees. Por ejemplo, tu página podría gestionar inglés y japonés sin problemas:

+ +

Una página web que contiene caracteres en inglés y japonés, con la codificación de caracteres establecida en universal o utf-8. Ambos idiomas se muestran bien.Si configuras tu codificación de caracteres en ISO-8859-1, por ejemplo (el juego de caracteres para el alfabeto latino), la representación de tu página puede aparecer desordenada:

+ +

una página web que contiene caracteres en inglés y japonés, con la codificación de caracteres configurada en latín. Los caracteres japoneses no se muestran correctamente

+ +
+

Nota: Algunos navegadores (Chrome, por ejemplo) automáticamente arreglan la codificación de caracteres incorrecta, de modo que según el navegador que uses, puede que no te topes con este problema. Aun así, deberías incluir una codificación de caracteres utf-8 en tu página web para evitar que se presenten potenciales problemas con otros navegadores.

+
+ +

Aprendizaje activo: Experimenta con la codificación de caracteres

+ +

Para probar esto, vuelve a visitar la plantilla HTML simple que obtuviste en la sección anterior sobre <title> (la página title-example.html) e intenta cambiar el valor de la propiedad meta charset por ISO-8859-1 y añade el japonés a tu página. Este es el código que usamos:

+ +
<p>Ejemplo en japonés: ご飯が熱い。</p>
+ +

Añadir un autor y descripción

+ +

Muchos elementos <meta> incluyen atributos name y content:

+ + + +

Dos de esos metadatos que resultan útiles de incluir en tu página definen al autor de la página y proporcionan una descripción concisa de la página. Veamos un ejemplo:

+ +
<meta name="author" content="Chris Mills">
+<meta name="description" content="El área de aprendizaje de MDN pretende
+proporcionar a los recién llegados a la web todo lo que deben
+saber para empezar a desarrollar páginas web y aplicaciones web.">
+ +

Especificar un autor resulta ventajoso por diversos motivos: es útil saber quién escribió la página para poder ponerte en contacto con el autor si tienes preguntas sobre el contenido. Algunos sistemas de gestión de contenido tienen herramientas para extraer automáticamente la información del autor de la página y ponerla a disposición para tales fines.

+ +

Especificar una descripción que incluya palabras clave relacionadas con el contenido de tu página resulta útil porque tiene el potencial de hacer que la página aparezca más arriba en las búsquedas relevantes que efectúan los motores de búsqueda (tales actividades se denominan optimizaciones del motor de búsqueda ({{web.link("/es/docs/Glossary/SEO", "Optimización de motores de búsqueda")}}) o {{Glossary("SEO")}}.)

+ +

Aprendizaje activo: El uso de la descripción en los motores de búsqueda

+ +

La descripción también se usa en las páginas de resultados del motor de búsqueda. Repasemos un ejercicio para explorar esto:

+ +
    +
  1. Ve a la página de inicio de Mozilla Developer Network.
    2. +
  2. Observa el código fuente de la página (Ctrl+clic o clic con el botón derecho en la página y selecciona la opción del menú Ver código fuente de la página).
    3. +
  3. Encuentra la etiqueta del metadato description. Se verá más o menos así (aunque puede cambiar con el tiempo): + 
    <meta name="description" content="The Mozilla Developer
+  Network (MDN) proporciona información sobre tecnologías
+  de código abierto que incluyen HTML, CSS y APIs tanto para sitios web como para aplicaciones HTML5.
+  También documenta productos Mozilla como el sistema operativo Firefox.">
    +
    4. +
  4. Ahora busca "Mozilla Developer Network" en tu motor de búsqueda favorito (nosotros hemos utilizado Google). Observarás que efectivamente merece la pena que tener el contenido de la descripción <meta> y el elemento <title> que se utiliza en la búsqueda. +

    Resultado de búsqueda en Yahoo para "Mozilla Developer Network"

    +
    5. +
+ +
+

Nota: En Google verás algunas subpáginas relevantes de MDN enumeradas debajo del enlace principal a la página principal de MDN (se trata de los llamados sitelinks y se pueden configurar con las Herramientas de administrador de Google), una forma de mejorar los resultados para tu sitio con el motor de búsqueda de Google.

+
+ +
+

Nota: Muchas características <meta> ya no se usan. Por ejemplo, los motores de búsqueda ignoran el elemento <meta> (<meta name="keywords" content="pon, tus, palabras clave, aquí">), que se supone que facilita palabras clave para motores de búsqueda de forma que se determine la relevancia de esa página según diferentes términos de búsqueda, porque los spammers rellenaban la lista de palabras clave con cientos de palabras clave que sesgaban los resultados.

+
+ +

Otros tipos de metadatos

+ +

Al navegar por la web también puedes encontrar otros tipos de metadatos. Muchas de las funciones que verás en los sitios web son creaciones propietarias diseñadas para proporcionar a ciertos sitios (como los sitios de redes sociales) información específica que puedan usar.

+ +

Por ejemplo, Open Graph Data es un protocolo de metadatos que Facebook inventó para proveer metadatos más ricos para los sitios web. En las fuentes de código de MDN, encontrarás esto:

+ +
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
+<meta property="og:description" content="The Mozilla Developer Network (MDN) proporciona información
+sobre tecnologías Open Web, incluidas HTML, CSS y APIs para ambos sitios web
+y aplicaciones HTML5. También documenta productos Mozilla, como el sistema operativo Firefox.">
+<meta property="og:title" content="Mozilla Developer Network">
+ +

Un efecto de esto es que cuando desde Facebook enlazas a un MDN, el enlace aparece con una imagen y una descripción, lo que resulta en una experiencia más enriquecedora para los usuarios.

+ +

Datos abiertos del protocolo de gráficos de la página de inicio de MDN como se muestra en Facebook, mostrando una imagen, título y descripción.

+ +

Twitter también tiene sus metadatos propios, las Twitter Cards, que tienen un efecto similar cuando la URL del sitio se muestra en twitter.com. Por ejemplo:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

Agregar iconos personalizados a tu sitio

+ +

Para enriquecer un poco más el diseño de tu sitio puedes añadir en tus metadatos referencias a iconos personalizados, que se mostrarán en determinados contextos. El más común de ellos es el favicon (abreviatura de favorite icon —icono «favorito», referido al uso que se le da en las listas de «favoritos» o de marcadores («bookmarks»).

+ +

El humilde favicon ha existido durante muchos años. Es el primer icono de este tipo: un icono cuadrado de 16 píxeles que se utiliza en varios lugares. Es posible que veas (según el navegador) favicons que se muestran en la pestaña del navegador que contiene cada página abierta y junto a las páginas marcadas en el panel de marcadores.

+ +

Para añadir un favicon a tu página:

+ +
    +
  1. Guárdalo en el mismo directorio que la página index de tu sitio, en formato .ico (la mayoría de los buscadores admiten favicon en los formatos más comunes como .gif o .png, pero usar el formato ICO garantiza que funcionará hasta en Internet Explorer 6.)
    2. +
  2. Añade la siguiente línea de referencia en el {{HTMLElement("head")}} de tu HTML: + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

Los navegadores modernos usan favicons en diversos lugares, como en la etiqueta de la página que está abierta y en el panel de favoritos cuando la añades a tu lista de páginas favoritas:

+ +

El panel de marcadores de Firefox, que muestra un ejemplo marcado con un favicon junto a él.

+ +

Hoy día hay un montón de otros tipos de iconos a tener presentes. Por ejemplo, los encontrarás en el código fuente de la página de inicio de MDN:

+ +
<!-- iPad de tercera generación con pantalla de alta resolución: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- iPhone con pantalla de alta resolución: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- iPad de primera y segunda generación: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- Dispositivos iPhone sin pantalla Retina, iPod Touch y Android 2.1+: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- favicon básico -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
+ +

Los comentarios explican para qué se usa cada icono (estos elementos abarcan situaciones como aportar un buen icono de alta resolución para usarlo cuando la página web se guarda en la página de inicio de un iPad).

+ +

No te preocupes demasiado sobre la implementación de todos estos tipos de iconos por el momento; se trata de una característica bastante avanzada y no se espera que tengas conocimientos de ello para avanzar en el curso. El propósito principal aquí es darte a conocer estos elementos por si te los encuentras mientras examinas el código fuente de otros sitios web.

+ +
+

Nota: Si tu sitio web utiliza una política de seguridad de contenido (content security policy o CSP) para mejorar la seguridad, la política afecta al favicon. Si te encuentras con problemas como que el favicon no se carga, comprueba que la respuesta a {{HTTPHeader("Content-Security-Policy")}} del header Content-Security-Policy para la directriz img-src en la cabecera no impide el acceso a este.

+
+ +

Aplicar CSS y JavaScript a HTML

+ +

Prácticamente todos los sitios web usan {{Glossary("CSS")}} para darles un buen aspecto y {{Glossary("JavaScript")}} para añadir funcionalidades interactivas, como reproductores de vídeo, mapas, juegos y demás. La manera más habitual de añadir CSS y JavaScript a una página web es con los elementos <link> y el elemento <script>, respectivamente.

+ + + +

Aprendizaje activo: aplicar CSS y JavaScript a una página

+ +
    +
  1. Para iniciar este aprendizaje activo, haz una copia de nuestros archivos meta-example.html, script.js y style.css, y guárdalos en un mismo directorio de tu ordenador. Asegúrate de que se guardan con los nombres y extensiones correctas.
    2. +
  2. Abre el archivo HTML tanto en tu navegador como en tu editor de texto.
    3. +
  3. Sigue la información facilitada anteriormente y añade los elementos <link> y <script> a tu HTML para aplicarle CSS y JavaScript.
    4. +
+ +

Si lo has hecho correctamente, al guardar tu HTML y actualizar tu navegador, deberías poder ver que las cosas han cambiado:

+ +

Ejemplo que muestra una página con CSS y JavaScript aplicados. El CSS ha hecho que la página se vuelva verde, mientras que JavaScript ha agregado una lista dinámica a la página

+ + + +
+

Nota: Si te encallas en este ejercicio y no logras ejecutar los archivos CSS/JS, comprueba tu página de ejemplo css-and-js.html.

+
+ +

Establecer el idioma principal del documento

+ +

Por último, merece la pena mencionar que puedes (y realmente deberías) especificar el idioma de tu página. Esto se puede hacer añadiendo el atributo {{web.link("/es/docs/Web/HTML/Global_attributes/lang", "lang")}} a la etiqueta de apertura del HTML (como se ve en el meta-example.html y se muestra abajo).

+ +
<html lang="es-MX">
+ +

Esto resulta útil en muchos sentidos. Los motores de búsqueda indizarán tu documento HTML de modo más efectivo si estableces el idioma (permitiendo, por ejemplo, que aparezca correctamente en los resultados del idioma especificado), y resulta útil para que las personas con discapacidad visual que utilizan los lectores de pantalla (por ejemplo, la palabra «six» existe tanto en francés como en inglés, pero su pronunciación es diferente).

+ +

También puedes establecer que las subsecciones de tu documento se reconozcan en diferentes idiomas. Por ejemplo, podemos establecer que nuestra sección de japonés se reconozca como japonés, de la siguiente manera:

+ +
<p>Ejemplo Japonés: <span lang="ja">ご飯が熱い。</span>.</p>
+ +

El estándar {{interwiki("wikipedia", "ISO_639-1")}} define estos códigos. Puedes encontrar más información sobre ello en Etiquetas de idioma en HTML y XML.

+ +

Resumen

+ +

Esto marca el final de nuestra guía rápida del {{Glossary("head")}} de HTML — aún hay muchas más cosas que puedes hacer aquí, pero una guía exhaustiva puede ser aburrida y confusa a estas alturas, ¡y nosotros queremos darte una idea de las cuestiones más comunes con las que te encontrarás aquí por ahora! En el siguiente artículo veremos los fundamentos de texto de HTML.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

+ +

En este módulo

+ + diff --git "a/files/es/learn/html/tablas/conceptos_b\303\241sicos_de_las_tablas_html/index.html" "b/files/es/learn/html/tablas/conceptos_b\303\241sicos_de_las_tablas_html/index.html" deleted file mode 100644 index 7259adf427..0000000000 --- "a/files/es/learn/html/tablas/conceptos_b\303\241sicos_de_las_tablas_html/index.html" +++ /dev/null @@ -1,563 +0,0 @@ ---- -title: Conceptos básicos de las tablas HTML -slug: Learn/HTML/Tablas/Conceptos_básicos_de_las_tablas_HTML -translation_of: Learn/HTML/Tables/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
- -

Este artículo te ayudará a comenzar con las tablas HTML. Vamos a exponer conceptos básicos como filas y celdas, encabezados, celdas que abarcan múltiples columnas y filas, y la forma de agrupar todas las celdas de una columna para aplicarles estilo.

- - - - - - - - - - - - -
Prerrequisitos:Conceptos básicos de HTML (ver Introducción al HTML).
Objetivo:Adquirir conocimientos básicos de las tablas HTML.
- -

¿Qué es una tabla?

- -

Una tabla es un conjunto estructurado de datos distribuidos en filas y columnas (datos tabulados). Una tabla permite buscar con rapidez y facilidad valores entre diferentes tipos de datos que indiquen algún tipo de conexión. Por ejemplo, una persona y su edad, o un día de la semana o el horario de una piscina municipal.

- -

Una tabla de datos de ejemplo que muestra los nombres y las edades de algunas personas: Chris 38, Dennis 45, Sarah 29, Karen 47.

- -

Una tabla de datos que muestra unos horarios de clases natación

- -

Las tablas se utilizan con mucha frecuencia en la sociedad desde hace años, como lo demuestra este documento censal de los EUA de 1800:

- -

Un pergamino muy antiguo; cuesta un poco leer los datos, pero muestra con claridad que las tablas de datos ya se utilizaban en 1800.

- -

Por lo tanto, no es de extrañar que los creadores de HTML proporcionen un medio con el que estructurar y presentar datos en tablas en la web.

- -

¿Cómo funciona una tabla?

- -

El aspecto básico de una tabla es que es un elemento rígido. Es fácil interpretar la información haciendo asociaciones visuales entre los encabezados de las filas y las columnas. Por ejemplo, observa la tabla siguiente y busca un gigante de gas joviano con 62 lunas. Puedes encontrar la respuesta asociando los encabezados de la fila y la columna correspondientes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Datos sobre los planetas de nuestro sistema solar (datos planetarios tomados de la hoja técnica sobre datos planetarios de la NASA (Nasa's Planetary Fact Sheet - Metric).
NombreMasa (1024 kg)Diámetro (km)Densidad (kg/m3)Gravedad (m/s2)Duración del día (horas)Distancia del Sol (106km)Temperatura media (°C)Número de lunasObservaciones
Planetas terrestresMercurio0,3304.8795.4273,74.222,657,91670El más cercano al Sol
Venus4,8712.1045.2438,92.802,0108,24640
La Tierra5,9712.7565.5149,824,0149,6151Nuestro planeta
Marte0,6426.7923.9333,724,7227,9-652El planeta rojo
Planetas jovianosLos gigantes de gasJúpiter1.898142.9841.32623,19,9778,6-11067El planeta más grande
Saturno568120.5366879,010,71.433,5-14062
Los gigantes de hieloUrano86,851.1181.2718,717,22.872,5-19527
Neptuno10249.5281.63811,016,14.495,1-20014
Planetas enanosPlutón0,01462.3702.0950,7153,35.906,4-2255Desclasificado como planeta en 2006, pero aún es una cuestión polémica.
- -

Cuando se hace correctamente, incluso las personas ciegas pueden interpretar los datos de una tabla HTML. Una tabla HTML bien hecha debe mejorar la experiencia de los usuarios videntes e invidentes por igual.

- -

Dar estilo a las tablas

- -

También puedes echar un vistazo al ejemplo vivo en GitHub. Observarás que la tabla que encontrarás allí tiene un aspecto más legible; esto se debe a que la tabla que ves en esta página tiene un estilo mínimo, mientras que en la de la versión de GitHub se ha aplicado un CSS más significativo.

- -

No te hagas ilusiones; para que las tablas sean efectivas en la web, debes proporcionar cierta información de estilo con CSS, así como una buena estructura sólida con HTML. En este módulo nos centramos en la parte HTML; para averiguar sobre la parte del CSS debes visitar nuestro artículo Aplicar estilo a las tablas.

- -

En este módulo no nos vamos a centrar en el CSS, sino que te vamos a proporcionar una hoja de estilo de CSS que dará a tus tablas algo más de legibilidad de la que se obtiene por defecto si no se proporciona ningún estilo. Puedes encontrar la hoja de estilo aquí, así como también una plantilla HTML para aplicar la hoja de estilo (te darán un buen punto de partida para experimentar con las tablas HTML).

- -

¿Cuándo no debes usar tablas HTML?

- -

Las tablas HTML están pensadas para utilizarse con datos tabulados. Por desgracia, mucha gente utiliza las tablas HTML para hacer compaginaciones de páginas web. Por ejemplo, una fila para contener la cabecera, una fila para contener las columnas de contenido, una fila para contener el pie de página, etc. Puede encontrar más detalles y un ejemplo en Diseños de página en nuestro Módulo de aprendizaje de accesibilidad. Se solía hacer este uso de las tablas porque la compatibilidad CSS entre navegadores solía ser terrible. Los diseños de tablas son mucho menos comunes hoy en día, pero aún se pueden ver en algunos rincones de la web.

- -

En resumen, es una mala idea usar tablas para el diseño en lugar de las técnicas de diseño CSS. Las razones principales son las siguientes:

- -
    -
  1. Las tablas de diseño reducen la accesibilidad para los usuarios con discapacidad visual: Los lectores de pantalla que utilizan las personas con visibilidad reducida interpretan las etiquetas de una página HTML y leen su contenido para el usuario. Puesto que las tablas no son la herramienta adecuada para el diseño y el marcado es más complejo que con las técnicas de diseño CSS, la salida de los lectores de pantalla será confusa para estos usuarios.
    2. -
  2. Las tablas generan estructuras incorrectas: Como ya se mencionó, los diseños de tabla suelen involucrar estructuras de marcado más complejas que las técnicas de diseño. Esto puede dificultar la escritura, el mantenimiento y la depuración del código.
    3. -
  3. Las tablas no tienen respuesta adaptativa automática: Cuando usas contenedores de diseño adecuados (tales como {{HTMLElement ("header")}}, {{HTMLElement ("section")}}, {{HTMLElement ("article")}} o {{HTMLElement ("div")}}), su ancho predeterminado es el 100% de su elemento padre. En cambio, las tablas se dimensionan de forma predeterminada según su contenido, por lo que se necesitan medidas adicionales para que el diseño de la tabla funcione de manera efectiva en todos los dispositivos.
    4. -
- -

Aprendizaje activo: Crea tu primera tabla

- -

Ya hemos hablado bastante sobre la teoría de las tablas, así que veamos un ejemplo práctico y construyamos una tabla simple.

- -
    -
  1. En primer lugar, haz una copia local de blank-template.html y minimal-table.css en un directorio nuevo de tu ordenador.
    2. -
  2. El contenido de cada tabla está delimitado entre estas dos etiquetas: <table></table>. Añádelas al cuerpo de tu código HTML.
    3. -
  3. El contenedor más pequeño dentro de una tabla es una celda, que se crea con un elemento <td> ('td' significa 'table data', datos de tabla). Añade lo siguiente dentro de tus etiquetas de tabla: - 
    <td>Hola, soy tu primera celda.</td>
    -
    4. -
  4. Si quieres una fila de cuatro celdas, tienes que copiar estas etiquetas tres veces. Actualiza el contenido de la tabla para que se vea así: - 
    <td>Hola, soy tu primera celda.</td>
-<td>Soy tu segunda celda.</td>
-<td>Soy tu tercera celda.</td>
-<td>Soy tu cuarta celda.</td>
    -
    5. -
- -

Como verás, las celdas no se colocan una debajo de la otra, sino que se alinean automáticamente entre sí en la misma fila. Cada elemento <td> crea una sola celda, y juntas forman la primera fila. Cada celda que agregamos hace crecer la fila.

- -

Para detener el crecimiento de esta fila y comenzar a colocar las celdas posteriores en una segunda fila, necesitamos usar el elemento <tr> ('tr' significa 'table raw', fila de tabla). Vamos a verlo en detalle.

- -
    -
  1. Coloca las cuatro celdas que has creado dentro de las etiquetas <tr>, de esta forma: - - 
    <tr>
-  <td>Hola, soy tu primera celda.</td>
-  <td>Soy tu segunda celda.</td>
-  <td>Soy tu tercera celda.</td>
-  <td>Soy tu cuarta celda.</td>
-</tr>
    -
    2. -
  2. Ahora que has hecho una fila, intenta hacer una o dos más: cada fila debe estar delimitada por un elemento <tr> adicional, con cada celda contenida en un <td>.
    3. -
- -

Esto debería dar como resultado una tabla similar a la siguiente:

- - - - - - - - - - - - - - - - -
Hola, soy tu primera celda.Soy tu segunda celda.Soy tu tercera celda.Soy tu cuarta celda.
Segunda fila, primera celda.Celda 2.Celda 3.Celda 4.
- -
-

Nota: También puedes encontrar esto en GitHub como simple-table.html (consúltalo en vivo).

-
- -

Añadir encabezados con elementos <th>

- -

Ahora nos vamos a centrar en los encabezados de tabla: celdas especiales que van al comienzo de una fila o columna y definen el tipo de datos que contiene esa fila o columna (por ejemplo, observa las celdas «Propietario» y «Edad» en el primer ejemplo que se muestra en este artículo). Para ilustrar por qué son útiles, echa un vistazo al ejemplo de tabla siguiente. En primer lugar, el código fuente:

- -
<table>
-  <tr>
-    <td>&nbsp;</td>
-    <td>Knocky</td>
-    <td>Flor</td>
-    <td>Ella</td>
-    <td>Juan</td>
-  </tr>
-  <tr>
-    <td>Raza</td>
-    <td>Jack Russell</td>
-    <td>Caniche</td>
-    <td>Perro callejero</td>
-    <td>Cocker Spaniel</td>
-  </tr>
-  <tr>
-    <td>Edad</td>
-    <td>16</td>
-    <td>9</td>
-    <td>10</td>
-    <td>5</td>
-  </tr>
-  <tr>
-    <td>Propietario</td>
-    <td>Suegra</td>
-    <td>Yo</td>
-    <td>Yo</td>
-    <td>Cuñada</td>
-  </tr>
-  <tr>
-    <td>Hábitos alimentarios</td>
-    <td>Come las sobras de todos</td>
-
-<td>Mordisquea la comida</td>
-    <td>Come en abundancia</td>
-
-<td>Come hasta que revienta</td>
-  </tr>
-</table>
- -

Ahora observa la tabla representada:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KnockyFlorEllaJuan
RazaJack RussellCanichePerro callejeroCocker Spaniel
Edad169105
PropietarioSuegraYoYoCuñada
Hábitos alimentariosCome las sobras de todosMordisquea la comidaCome en abundanciaCome hasta que revienta
- -

El problema aquí es que, si bien puedes distinguir lo que sucede, no es tan fácil cruzar datos de referencia. Sería mucho mejor si los encabezados de las columnas y las filas se destacasen de alguna manera.

- -

Aprendizaje activo: encabezados de tabla

- -

Intentemos mejorar esta tabla.

- -
    -
  1. Primero, haz una copia local de nuestros archivos dogs-table.html y minimal-table.css en un directorio nuevo de tu ordenador. El HTML contiene el mismo ejemplo sobre perros que viste arriba.
    2. -
  2. Para reconocer los encabezados de la tabla como encabezados, tanto visual como semánticamente, puedes usar el elemento <th> ('th' significa 'table header', encabezado de tabla). Funciona exactamente igual que un <td>, excepto que denota un encabezado, no una celda normal. Entra en el código HTML, y cambiar todos los elementos <td> que delimitan los encabezados de tabla por elementos <th>.
    3. -
  3. Guarda tu HTML y cárgalo en un navegador. Los encabezados deberían verse como tal.
    4. -
- -
-

Nota: Puedes encontrar nuestro ejemplo terminado en dogs-table-fixed.html en GitHub (o consultarlo en vivo).

-
- -

¿Por qué son útiles los encabezados?

- -

Ya hemos respondido parcialmente a esta pregunta: es más fácil encontrar los datos que buscas cuando los encabezados se destacan con claridad, y el diseño suele presentar un aspecto mejor.

- -
-

Nota: Los encabezados de las tablas vienen con un estilo predeterminado: están en negrita y centrados (incluso si no añades tu estilo propio a la tabla) para que destaquen.

-
- -

Los encabezados de tabla también presentan otra ventaja: junto con el atributo de scope (que veremos en el próximo artículo), mejoran la accesibilidad de las tablas porque asocian cada encabezado con todos los datos de la misma fila o columna. Así que los lectores de pantalla pueden leer una fila o columna de datos a la vez, lo cual es bastante útil.

- -

Celdas que abarcan varias filas y columnas

- -

A veces queremos que las celdas abarquen varias filas o columnas. Toma el ejemplo siguiente, que muestra los nombres de algunos animales comunes. En algunos casos, queremos mostrar los nombres de los machos y las hembras junto al nombre del animal. A veces no lo queremos, y en tales casos queremos que el nombre del animal abarque toda la tabla.

- -

El marcado inicial se ve así:

- -
<table>
-  <tr>
-    <th>Animales</th>
-  </tr>
-  <tr>
-    <th>Hipopótamo</th>
-  </tr>
-  <tr>
-    <th>Caballo</th>
-    <td>Yegua</td>
-  </tr>
-  <tr>
-    <td>Semental</td>
-  </tr>
-  <tr>
-
-<th>Cocodrilo</th>
-  </tr>
-  <tr>
-
-<th>Pollo</th>
-
-<td>Gallina</td>
-  </tr>
-  <tr>
-    <td>Gallo</td>
-  </tr>
-</table>
- -

Pero la salida no nos da exactamente lo que queremos:

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Animales
Hipopótamo
CaballoYegua
Semental
Cocodrilo
PolloGallina
Gallo
- -

Necesitamos una forma de hacer que «Animales», «Hipopótamo» y «Cocodrilo» se extiendan dos columnas más allá, y «Caballo» y «Pollo» se extiendan dos filas más abajo. Por fortuna, los encabezados de tabla y las celdas tienen los atributos colspan y rowspan, que nos permiten hacer exactamente esas cosas. Ambos aceptan un valor numérico sin unidades, que es igual al número de filas o columnas que desea abarcar. Por ejemplo, colspan="2" extiende una celda dos columnas más allá.

- -

Usemos colspan y rowspan para mejorar esta tabla.

- -
    -
  1. Primero, haz una copia local de nuestros archivos animals-table.html y minimal-table.css en un directorio nuevo de tu ordenador. El HTML contiene el mismo ejemplo sobre perros que viste arriba.
    2. -
  2. Luego, usa colspan para extender las celdas «Animales», «Hipopótamo» y «Cocodrilo» dos columnas más allá.
    3. -
  3. Por último, usa rowspan para extender las celdas de «Caballo» y «Pollo» dos filas más abajo.
    4. -
  4. Guarda tu código y ábrelo en un navegador para ver la mejora.
    5. -
- -
-

Nota: Puedes encontrar nuestro ejemplo terminado en animals-table-fixed.html en GitHub (o consultarlo en vivo).

-
- - -
- -

Proporcionar un estilo común a las columnas.

- -

Hay una última característica de la que queremos hablar en este artículo antes de continuar. El HTML tiene un método para definir información de estilo para una columna completa de datos en un solo lugar: los elementos <col> y <colgroup>. Estos atributos existen porque especificar el estilo de las columnas puede resultar enojoso e ineficiente; en general hay que especificar la información de estilo en cada <td> o <th> de la columna, o utilizar un selector complejo como {{cssxref(":nth-child()")}}.

- -

Tomemos el ejemplo sencillo siguiente:

- -
<table>
-  <tr>
-
-<th>Dato 1</th>
-    <th style="background-color: yellow">Dato 2</th>
-  </tr>
-  <tr>
-    <td>Calcuta</td>
-    <td style="background-color: yellow">Pizza</td>
-  </tr>
-  <tr>
-    <td>Robots</td>
-    <td style="background-color: yellow">Jazz</td>
-  </tr>
-</table>
- -

Esto nos da el resultado siguiente:

- - - - - - - - - - - - - - - - -
Dato 1Dato 2
CalcutaNaranja
RobotsJazz
- -

Esto no es ideal, porque hay que repetir la información de estilo en las tres celdas de la columna (en un proyecto real probablemente habría definida una clase class en las tres celdas y el estilo se especificaría en una hoja de estilo por separado). En vez de hacer esto, podemos especificar la información una sola vez, con un elemento <col>. Los elementos <col> se especifican dentro de un contenedor <colgroup> justo debajo de la etiqueta de apertura <table>. Podríamos crear el mismo efecto que vemos arriba especificando nuestra tabla de la manera siguiente:

- -
<table>
-  <colgroup>
-    <col>
-    <col style="background-color: yellow">
-  </colgroup>
-  <tr>
-
-<th>Dato 1</th>
-
-<th>Dato 2</th>
-  </tr>
-  <tr>
-    <td>Calcuta</td>
-    <td>Pizza</td>
-  </tr>
-  <tr>
-    <td>Robots</td>
-    <td>Jazz</td>
-  </tr>
-</table>
- -

En efecto, definimos dos tipos de «columnas de estilo», una que especifica la información para la aplicación de estilo en cada columna. No aplicamos estilo a la primera columna, sino que aún tenemos que incluir un elemento <col> en blanco; de lo contrario, el estilo también se aplicaría a la primera columna.

- -

Si quisiéramos aplicar la información de estilo a ambas columnas, podríamos incluir un elemento <col> con un atributo span, como este:

- -
<colgroup>
-  <col style="background-color: yellow" span="2">
-</colgroup>
- -

Al igual que colspan y rowspan, span toma un valor numérico sin unidades que especifica el número de columnas a las que se desea aplicar el estilo.

- -

Aprendizaje activo: colgroup y col

- -

Ahora es el momento de intentarlo tú mismo.

- -

A continuación puedes ver el horario de una profesora de idiomas. El viernes tiene que enseñar holandés todo el día, pero también enseña alemán durante unas horas los martes y los jueves, y quiere resaltar las columnas que contienen los días que da clase.

- -

{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}

- -

Recrea la tabla a partir de los pasos siguientes.

- -
    -
  1. Primero, haz una copia local de nuestro archivo timetable.html en un directorio nuevo de tu ordenador. El HTML contiene la misma tabla que viste arriba, menos la información de estilo de las columnas.
    2. -
  2. Añade un elemento <colgroup> en la parte superior de la tabla, justo debajo de la etiqueta <table>, en la que puedes añadir tus elementos <col> (consulta los pasos restantes a continuación).
    3. -
  3. Las dos primeras columnas deben dejarse sin estilo.
    4. -
  4. Añade un color de fondo a la tercera columna. El valor para tu atributo de style es background-color:#97DB9A;
    5. -
  5. Establece un ancho distinto para la cuarta columna. El valor de tu atributo de style es width: 42px;
    6. -
  6. Añade un color de fondo a la quinta columna. El valor para tu atributo de style es background-color:#97DB9A;
    7. -
  7. Añade un color de fondo diferente más un borde a la sexta columna, para indicar que este es un día especial porque da clases de un idioma diferente. Los valores para tu atributo de style son background-color:#DCC48E; border:4px solid #C1437A;
    8. -
  8. Los últimos dos días los tiene libres, así que no establezcas ningún color de fondo, pero sí un valor para el ancho; el valor para el atributo de style es width: 42px;
    9. -
- -

Mira cómo sigue en el ejemplo. Si te encallas o quieres verificar tu trabajo, puedes encontrar nuestra versión en GitHub como timetable-fixed.html (o también puedes consultarlo en vivo).

- -

Resumen

- -

Con esto casi hemos abarcado todos los conceptos básicos de las tablas HTML. En el próximo artículo, veremos algunas características un poco más avanzadas de las tablas y comenzaremos a pensar acerca de su accesibilidad para las personas con discapacidad visual.

- -
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
- -
-

En este módulo

- - -
diff --git a/files/es/learn/html/tablas/funciones_avanzadas_de_las_tablas_html_y_accesibilidad/index.html b/files/es/learn/html/tablas/funciones_avanzadas_de_las_tablas_html_y_accesibilidad/index.html deleted file mode 100644 index a74817c5d4..0000000000 --- a/files/es/learn/html/tablas/funciones_avanzadas_de_las_tablas_html_y_accesibilidad/index.html +++ /dev/null @@ -1,471 +0,0 @@ ---- -title: Funciones avanzadas de las tablas HTML y accesibilidad -slug: Learn/HTML/Tablas/Funciones_avanzadas_de_las_tablas_HTML_y_accesibilidad -translation_of: Learn/HTML/Tables/Advanced ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
- -

En el segundo artículo de este módulo, analizamos algunas características más avanzadas de las tablas HTML, como los subtítulos/resúmenes, la agrupación de filas en las secciones del encabezado, el cuerpo y el pie de página; y también analizamos la accesibilidad de las tablas para usuarios con discapacidad visual.

- - - - - - - - - - - - -
Prerrequisitos:Conceptos básicos de HTML (ver Introducción al HTML).
Objetivo:Aprender las características más avanzadas de las tablas HTML y la accesibilidad de las tablas.
- -

Añadir un subtítulo a tu tabla con <caption>

- -

Puedes dar un título a tu tabla colocándolo dentro de un elemento {{htmlelement ("caption")}} y anidándolo dentro del elemento {{htmlelement ("table")}}. Debes ponerlo justo debajo de la etiqueta de apertura <table>.

- -
<table>
-  <caption>Dinosaurios en el período Jurásico</caption>
-
-  ...
-</table>
- -

Como puedes deducir a partir del breve ejemplo anterior, el título debe contener una descripción del contenido de la tabla. Esto es útil para todos los lectores que deseen descubrir de un vistazo si la tabla les resulta útil mientras ojean la página, pero es útil especialmente para usuarios ciegos. En lugar de que un lector de pantalla lea el contenido de muchas celdas solo para averiguar de qué trata la tabla, el lector puede contar con el título para luego decidir si leer la tabla con mayor detalle.

- -

Los subtítulos se colocan directamente debajo de la etiqueta <table>.

- -
-

Nota: El atributo {{htmlattrxref("summary","table")}} también se puede usar en el elemento table para proporcionar una descripción; los lectores de pantalla también lo leen. Sin embargo, recomendamos usar el elemento caption, porque {{htmlattrxref("summary","table")}} está {{glossary("obsoleto")}} conforme a la especificación HTML5 y porque los usuarios sin discapacidad visual no pueden leerlo (no aparece en la página).

-
- -

Aprendizaje activo: Añadir un subtítulo

- -

Vamos a probarlo con un ejemplo del artículo anterior.

- -
    -
  1. Abre el ejemplo del horario de clases de la profesora de idiomas del final de conocimientos básicos de las tablas HTML, o haz una copia local de nuestro archivo timetable-fixed.html.
    2. -
  2. Añade un título adecuado a la tabla.
    3. -
  3. Guarda tu código, ábrelo en un navegador y observa qué aspecto presenta.
    4. -
- -
-

Nota: Puedes encontrar nuestra versión en GitHub: consulta timetable-caption.html (mirar en vivo).

-
- -

Añadir estructura con <thead>, <tfoot> y <tbody>

- -

A medida que la estructura de las tablas se vuelve más compleja, es útil darles una estructura más definida. Una forma clara de hacerlo es con {{htmlelement ("thead")}}, {{htmlelement ("tfoot")}} y {{htmlelement ("tbody")}}, que te permiten marcar un encabezado, un pie de página y una sección del cuerpo de la tabla.

- -

Estos elementos no mejoran las características de accesibilidad de la tabla para los usuarios de lectores de pantalla ni su aspecto visual en sí. Sin embargo, son muy útiles para la aplicación de estilo y la compaginación, porque actúan como soportes útiles para añadir CSS a tu tabla. Como ejemplos interesantes, en el caso de una tabla extensa, puedes hacer que el encabezado y el pie de página se repitan en cada página impresa, y también que el cuerpo de la tabla se muestre en una sola página y desplazarte por los contenidos arriba y abajo con la barra de desplazamiento.

- -

Para utilizarlos:

- - - -
-

Nota: <tbody> se incluye siempre en todas las tablas de forma implícita si no lo especificas en tu código. Para comprobarlo, abre uno de tus ejemplos anteriores que no incluya <tbody> y mira el código HTML en las herramientas de desarrollo de tu navegador; verás que el navegador ha añadido esta etiqueta. Quizás te preguntes por qué deberías molestarte en incluirlo. Debes hacerlo para tener más control sobre la estructura y el estilo de la tabla.

-
- -

Aprendizaje activo: Añadir estructura a la tabla

- -

Pongamos en acción estos elementos nuevos.

- -
    -
  1. En primer lugar, haz una copia local de spending-record.html y minimal-table.css en una carpeta nueva de tu ordenador.
    2. -
  2. Intenta abrirlo en un navegador: observarás que se ve bien, pero podría mejorarse. La fila «SUM», que contiene una suma de las cantidades gastadas, parece estar en el lugar equivocado, y faltan algunos detalles del código.
    3. -
  3. Coloca la fila de encabezados dentro de un elemento <thead>, la fila «SUM» dentro de un elemento <tfoot>, y el resto del contenido dentro de un elemento <tbody>.
    4. -
  4. Guarda y actualiza, y observa que añadir el elemento <tfoot> ha provocado que la fila «SUM» pase al final de la tabla.
    5. -
  5. Luego, añade un atributo {{htmlattrxref ("colspan", "td")}} para que la celda «SUM» abarque las primeras cuatro columnas, de modo que el número aparezca en la parte inferior de la columna «Costes».
    6. -
  6. Vamos a añadir un estilo adicional sencillo a la tabla para que veas cuán útiles son estos elementos para aplicar CSS. Dentro del encabezado del documento HTML hay un elemento {{htmlelement ("style")}} vacío. Añade a este elemento las líneas de código CSS siguientes: - 
    tbody {
-  font-size: 95%;
-  font-style: italic;
-}
-
-tfoot {
-  font-weight: bold;
-}
-
    -
    7. -
  7. Guarda, actualiza, y échale un vistazo al resultado. Si los elementos <tbody> y <tfoot> no estuvieran en su lugar, tendrías que escribir selectores/reglas mucho más complicados para obtener la misma aplicación de estilo.
    8. -
- -
-

Nota: No esperamos que comprendas completamente el CSS en este momento. Aprenderás más sobre el tema cuando llegues a nuestros módulos CSS (Introducción al CSS es un buen lugar para comenzar; también tenemos un artículo específico sobre Aplicar estilo a las tablas).

-
- -

Tu tabla final debería tener un aspecto similar al siguiente:

- - - -

{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

- -
-

Nota: También puedes encontrarlo en GitHub como spending-record-finished.html (o consultarlo también en vivo).

-
- -

Anidar tablas

- -

Es posible anidar una tabla dentro de otra, siempre que incluyas la estructura completa, incluido el elemento <table>. Por lo general, esto no se recomienda, porque se obtiene un marcado más confuso y menos accesible para los usuarios que usan lectores de pantalla, y además, en muchos casos sería posible sencillamente insertar celdas/filas/columnas adicionales en la tabla. Sin embargo, a veces es necesario, por ejemplo, si deseas importar contenido de forma sencilla desde otras fuentes.

- -

El marcado siguiente muestra una tabla anidada simple:

- -
<table id="tabla1">
-  <tr>
-    <th>título1</th>
-    <th>título2</th>
-    <th>título3</th>
-  </tr>
-  <tr>
-    <td id="nested">
-      <table id="tabla2">
-        <tr>
-          <td>celda1</td>
-          <td>celda2</td>
-          <td>celda3</td>
-        </tr>
-      </table>
-    </td>
-    <td>celda2</td>
-    <td>celda3</td>
-  </tr>
-  <tr>
-    <td>celda4</td>
-    <td>celda5</td>
-    <td>celda6</td>
-  </tr>
-</table>
- -

La salida se verá así:

- - - - - - - - - - - - - - - - - - - -
título1título2título3
- - - - - - - - -
celda1celda2celda3
- 		celda2celda3
celda4celda5celda6
- -

Tablas para usuarios con discapacidad visual

- -

Repasemos brevemente cómo usamos las tablas de datos. Una tabla puede ser una herramienta útil porque nos proporciona un acceso rápido a unos datos y nos permite buscar entre valores diferentes. Por ejemplo, echa un vistazo a la tabla siguiente para saber cuántos anillos se vendieron en Gante en agosto pasado. Para comprender la información que contiene la tabla, establecemos asociaciones visuales entre los datos de la tabla y sus encabezados de columna y/o fila.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Artículos vendidos en agosto de 2016
RopaAccesorios
PantalonesFaldasVestidosPulserasAnillos
BélgicaAmberes5622437223
Gante4618506115
Bruselas5127386928
Los países bajosÁmsterdam8934698538
Utrecht8012433619
- -

Pero, ¿y si no puedes hacer esas asociaciones visuales? ¿Cómo podrías leer una tabla como la anterior? Las personas con discapacidad visual a menudo usan un lector de pantalla que les lee la información de las páginas web. Esto no resulta un problema cuando lees un texto sin formato, pero interpretar una tabla puede ser un gran desafío para una persona ciega. Sin embargo, con el marcado adecuado podemos reemplazar las asociaciones visuales por otras asociaciones de tipo programático.

- -
-

Nota: Hay en torno a 253 millones de personas con discapacidad visual según los datos de la OMS de 2017.

-
- -

Esta sección del artículo proporciona técnicas adicionales para conferir a las tablas la mayor accesibilidad posible.

- -

Usar encabezados de columna y fila

- -

Los lectores de pantalla identificarán todos los encabezados y los usarán para hacer asociaciones programáticas entre esos encabezados y las celdas con las que se relacionan. La combinación de encabezados por columna y fila identificará e interpretará los datos de cada celda para que los usuarios que usan lectores de pantalla puedan interpretar la tabla de manera similar a como lo hace un usuario sin discapacidad visual.

- -

Ya expusimos los encabezados en nuestro artículo anterior; consulta Añadir encabezados con elementos <th>.

- -

El atributo scope

- -

Un nuevo tema para este artículo es el atributo {{htmlattrxref ("scope", "th")}}, que se puede añadir al elemento <th> para indicar a los lectores de pantalla exactamente para qué celdas es el encabezado. Volviendo a nuestro ejemplo anterior de registro de gastos, podrías definir los encabezados de columna inequívocamente como encabezados de columna de este modo:

- -
<thead>
-  <tr>
-    <th scope="col">Compra</th>
-    <th scope="col">Ubicación</th>
-    <th scope="col">Fecha</th>
-    <th scope="col">Revisión</th>
-    <th scope="col">Coste (€)</th>
-  </tr>
-</thead>
- -

Y también cada fila podría tener un encabezado definido de esta manera (si añadimos encabezados de fila y encabezados de columna):

- -
<tr>
-  <th scope="row">Corte de pelo</th>
-
-<td>Peluquería</td>
-  <td>12/09</td>
-
-<td>Gran idea</td>
-  <td>30</td>
-</tr>
- -

Los lectores de pantalla reconocerán el marcado estructurado de esta manera y permitirán a tus usuarios, por ejemplo, leer toda la columna o fila a la vez.

- -

El atributo scope tiene dos valores posibles más: colgroup y rowgroup. Se utilizan para encabezados que se encuentran sobre la parte superior de varias columnas o filas. Si vuelves a echar un vistazo a la tabla «Artículos vendidos en agosto de 2016» al comienzo de esta sección, verás que la celda «Ropa» se encuentra encima de las celdas «Pantalones», «Faldas» y «Vestidos» Todas estas celdas deben estar marcadas como encabezados (<th>), pero «Ropa» es un encabezado que está por encima y define los otros tres subencabezados. Por lo tanto, «Ropa» debería incluir un atributo scope="colgroup", mientras que los demás tendrían un atributo scope="col".

- -

Los atributos de id y encabezados

- -

Una alternativa al uso del atributo scope es usar los atributos {{htmlattrxref ("id")}} y {{htmlattrxref ("headers", "td")}} para crear asociaciones entre encabezados y celdas. La forma en que se usan es la siguiente:

- -
    -
  1. Añades un id único a cada elemento <th>.
    2. -
  2. Añades un atributo headers a cada elemento <td>. Cada atributo headers debe contener una lista de los id de todos los elementos <th> que actúan como encabezado de esa celda, separados por espacios.
    3. -
- -

Esto le da a tu tabla HTML una definición explícita de la posición de cada celda en la tabla definida por los encabezados de cada columna y fila de la que forma parte, como en una hoja de cálculo. Para que funcione bien, la tabla necesita tanto encabezados de columna como encabezados de fila.

- -

Volviendo a nuestro ejemplo de gastos, los dos fragmentos anteriores podrían reescribirse así:

- -
<thead>
-  <tr>
-    <th id="purchase">Compra</th>
-    <th id="location">Ubicación</th>
-    <th id="date">Fecha</th>
-    <th id="evaluation">Revisión</th>
-    <th id="cost">Coste (€)</th>
-  </tr>
-</thead>
-<tbody>
-<tr>
-  <th id="haircut">Corte de pelo</th>
-  <td headers="location haircut">Peluquería</td>
-  <td headers="date haircut">12/09</td>
-  <td headers="evaluation haircut">Gran idea</td>
-  <td headers="cost haircut">30</td>
-</tr>
-
-  ...
-
-</tbody>
- -
-

Nota: Este método crea asociaciones muy precisas entre los encabezados y las celdas de datos, pero utiliza un montón más de código de marcado y no permite errores. El enfoque scope suele bastar para la mayoría de las tablas.

-
- -

Aprendizaje activo: jugar con scope y headers

- -
    -
  1. Para este ejercicio final, te proponemos que primero hagas copias locales de items-sold.html y minimal-table.css en un directorio nuevo.
    2. -
  2. Ahora intenta añadir los atributos scope adecuados para hacer que esta tabla sea más accesible.
    3. -
  3. Por último, haz otra copia de los archivos originales, y esta vez añade accesibilidad a la tabla utilizando los atributos id y headers.
    4. -
- -
-

Nota: Puedes verificar tu trabajo con nuestros ejemplos terminados: consulta items-sold-scope.html (consúltalo en vivo) y items-sold-headers.html (consúltalo en vivo).

-
- -

Resumen

- -

Podrías aprender algo más sobre las tablas en HTML, pero en realidad te hemos proporcionado toda la información que necesitas saber en este momento. En este punto, es posible que desees ir y aprender sobre la aplicación de estilo a tablas HTML: consulta Aplicar estilo a las tablas.

- -
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
- -
-

En este módulo

- - -
diff --git a/files/es/learn/html/tablas/index.html b/files/es/learn/html/tablas/index.html deleted file mode 100644 index 7d04eb0cbf..0000000000 --- a/files/es/learn/html/tablas/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Tablas HTML -slug: Learn/HTML/Tablas -translation_of: Learn/HTML/Tables ---- -
{{LearnSidebar}}
- -

Una tarea muy común en HTML es la estructuración de datos, y para esto hay múltiples elementos y atributos. Esto unido a un poco de CSS, hace que en HTML sea sencillo mostrar tablas con información sobre tu horario escolar, los horarios de una piscina local o las estadisticas de tu equipo de dinosaurios o fútbol preferido. Este módulo te guiará en todo lo que necesitas saber sobre la estructuración tabular de datos en HTML.

- -

Requisitos previos

- -

Antes de comenzar este módulo, deberías de saber las cosas básicas de HTML — ver Introducción a HTML.

- -
-

Nota: Si estas trabjando en un ordenador/tableta/otro dispositivo en el que no puedes crear tus propios archivos, puedes probar la mayoría de ejemplos online en webs como JSBin o Thimble.

-
- -

Guías

- -

Este módulo contiene los siguientes artículos:

- -
-
Comenzando con tablas HTML
-
Este artículo te introduce en las tablas HTML , cubriendo las cosas más basicas como las líneas y las celdas, encabezados, crear celdas de multiples líneas y columnas, y como agrupar todas las celdas en una columna con fines estilisticos.
-
Características avanzadas y accesibilidad en tablas HTML
-
En el segundo artículo de este módulo, veremos algunas características avanzadas de las tablas HTML — como subtítulos/resumenes y agrupar líneas en la cabeza, cuerpo y pie de la tabla — además de realizar tablas accesibles para aquellos usuarios con problemas de visión.
-
- -

Evaluación

- -
-
Estructurar datos planetarios
-
En nuestra evaluación, te proporcionamos datos sobre los planetas de nuestro sistemas solar y tu los estructurarás en una tabla HTML.
-
diff --git a/files/es/learn/html/tablas/structuring_planet_data/index.html b/files/es/learn/html/tablas/structuring_planet_data/index.html deleted file mode 100644 index e9868bb95a..0000000000 --- a/files/es/learn/html/tablas/structuring_planet_data/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: 'Evaluación: Estructurando datos planetarios' -slug: Learn/HTML/Tablas/Structuring_planet_data -translation_of: Learn/HTML/Tables/Structuring_planet_data ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
- -

En nuestra evaluación te proporcionamos datos sobre los planetas de nuestro sistema solar y tu los estructurarás en una tabla HTML.

- - - - - - - - - - - - -
Requisitos previos:Antes de comenzar esta evaluación deberías de haber leído los artículos de este módulo.
Objetivo:Comprobar si has comprendido las tablas HTML y las características asociadas.
- -

Punto de incio

- -

Para comenzar esta evaluación, crea una copia local de blank-template.html, minimal-table.css, y planets-data.txt en una nueva carpeta de tu ordenador.

- -
-

Nota: Como alternativa, puedes usar una web como JSBin o Thimble para realizar tu evaluación. Puedes pegar el HTML, CSS y JavaScript en uno de estos editores online. Si el editor online que estas usando no tiene paneles separados para JavaScript/CSS, sientete libre de ponerlos en línea dentro del mismo HTML mediante el uso de <script>/<style>.

-
- -

Resumen del proyecto

- -

Estás trabajando en la escuela; tus estudiantes están estudiando los planetas de nuestro sistema solar y quieres proporcionarles una forma sencilla de seguir los datos para buscar hechos sobre los planetas. Una tabla HTML sería ideal — tienes que coger los datos que tienes disponibles y convertirlos en una tabla siguiendo los pasos de abajo.

- -

La tabla finalizada debería de verse así:

- -

- -

También puedes ver el ejemplo aquí (no mires el código fuente — ¡no hagas trampas!)

- - - -

Pasos para completarlo

- -

Los siguientes pasos describen lo que necesitas para completar el ejemplo de la tabla. Todos los datos que necesitarás están en el archivo planets-data.txt. Si tienes problemas para visualizar los datos, mira el ejemplo de arriba o intentalo dibujando un diagrama.

- -
    -
  1. Abre tu copia de blank-template.html, y comienza la tabla dándole un contenedor exterior, una cabecera y un cuerpo. No necesitas un pie de tabla en este ejemplo.
    2. -
  2. Añade el subtítulo proporcionado a tu tabla.
    3. -
  3. Añade una línea a la cabecera que contenga todos los encabezados de columna.
    4. -
  4. Crea todas las líneas con su contenido, asegurandote marcar como cabecera aquellas celdas que lo sean.
    5. -
  5. Asegurate de que el contenido esta insertado en las celdas correctas — en los datos del .txt, cada línea del planeta esta al lado de su planeta asociado.
    6. -
  6. Añade atributos para que las líneas y columnas del encabezado no se puedan confundir con las líneas, columnas o grupos de líneas a las que encabezan.
    7. -
  7. Añade un borde negro alrededor de la columna que contiene los nombres de los planetas y sus encabezados.
    8. -
- -

Pistas y consejos

- - - -

Evaluación

- -

Si estas siguiendo esta evaluación como parte de un curso organizado, deberías de ser capaz de entregar tu trabajo a tu profesor(a)/mentor para ver la puntuación. Si estas aprendiendo por tu cuenta, puedes obtener la guía de puntuación preguntando en Learning Area Discourse thread o en el canal IRC #mdn en Mozilla IRC. Intenta hacer el ejercicio primero  — ¡haciendo trampas no aprenderás nada!

- -

{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}

diff --git a/files/es/learn/html/tables/advanced/index.html b/files/es/learn/html/tables/advanced/index.html new file mode 100644 index 0000000000..a74817c5d4 --- /dev/null +++ b/files/es/learn/html/tables/advanced/index.html @@ -0,0 +1,471 @@ +--- +title: Funciones avanzadas de las tablas HTML y accesibilidad +slug: Learn/HTML/Tablas/Funciones_avanzadas_de_las_tablas_HTML_y_accesibilidad +translation_of: Learn/HTML/Tables/Advanced +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+ +

En el segundo artículo de este módulo, analizamos algunas características más avanzadas de las tablas HTML, como los subtítulos/resúmenes, la agrupación de filas en las secciones del encabezado, el cuerpo y el pie de página; y también analizamos la accesibilidad de las tablas para usuarios con discapacidad visual.

+ + + + + + + + + + + + +
Prerrequisitos:Conceptos básicos de HTML (ver Introducción al HTML).
Objetivo:Aprender las características más avanzadas de las tablas HTML y la accesibilidad de las tablas.
+ +

Añadir un subtítulo a tu tabla con <caption>

+ +

Puedes dar un título a tu tabla colocándolo dentro de un elemento {{htmlelement ("caption")}} y anidándolo dentro del elemento {{htmlelement ("table")}}. Debes ponerlo justo debajo de la etiqueta de apertura <table>.

+ +
<table>
+  <caption>Dinosaurios en el período Jurásico</caption>
+
+  ...
+</table>
+ +

Como puedes deducir a partir del breve ejemplo anterior, el título debe contener una descripción del contenido de la tabla. Esto es útil para todos los lectores que deseen descubrir de un vistazo si la tabla les resulta útil mientras ojean la página, pero es útil especialmente para usuarios ciegos. En lugar de que un lector de pantalla lea el contenido de muchas celdas solo para averiguar de qué trata la tabla, el lector puede contar con el título para luego decidir si leer la tabla con mayor detalle.

+ +

Los subtítulos se colocan directamente debajo de la etiqueta <table>.

+ +
+

Nota: El atributo {{htmlattrxref("summary","table")}} también se puede usar en el elemento table para proporcionar una descripción; los lectores de pantalla también lo leen. Sin embargo, recomendamos usar el elemento caption, porque {{htmlattrxref("summary","table")}} está {{glossary("obsoleto")}} conforme a la especificación HTML5 y porque los usuarios sin discapacidad visual no pueden leerlo (no aparece en la página).

+
+ +

Aprendizaje activo: Añadir un subtítulo

+ +

Vamos a probarlo con un ejemplo del artículo anterior.

+ +
    +
  1. Abre el ejemplo del horario de clases de la profesora de idiomas del final de conocimientos básicos de las tablas HTML, o haz una copia local de nuestro archivo timetable-fixed.html.
    2. +
  2. Añade un título adecuado a la tabla.
    3. +
  3. Guarda tu código, ábrelo en un navegador y observa qué aspecto presenta.
    4. +
+ +
+

Nota: Puedes encontrar nuestra versión en GitHub: consulta timetable-caption.html (mirar en vivo).

+
+ +

Añadir estructura con <thead>, <tfoot> y <tbody>

+ +

A medida que la estructura de las tablas se vuelve más compleja, es útil darles una estructura más definida. Una forma clara de hacerlo es con {{htmlelement ("thead")}}, {{htmlelement ("tfoot")}} y {{htmlelement ("tbody")}}, que te permiten marcar un encabezado, un pie de página y una sección del cuerpo de la tabla.

+ +

Estos elementos no mejoran las características de accesibilidad de la tabla para los usuarios de lectores de pantalla ni su aspecto visual en sí. Sin embargo, son muy útiles para la aplicación de estilo y la compaginación, porque actúan como soportes útiles para añadir CSS a tu tabla. Como ejemplos interesantes, en el caso de una tabla extensa, puedes hacer que el encabezado y el pie de página se repitan en cada página impresa, y también que el cuerpo de la tabla se muestre en una sola página y desplazarte por los contenidos arriba y abajo con la barra de desplazamiento.

+ +

Para utilizarlos:

+ + + +
+

Nota: <tbody> se incluye siempre en todas las tablas de forma implícita si no lo especificas en tu código. Para comprobarlo, abre uno de tus ejemplos anteriores que no incluya <tbody> y mira el código HTML en las herramientas de desarrollo de tu navegador; verás que el navegador ha añadido esta etiqueta. Quizás te preguntes por qué deberías molestarte en incluirlo. Debes hacerlo para tener más control sobre la estructura y el estilo de la tabla.

+
+ +

Aprendizaje activo: Añadir estructura a la tabla

+ +

Pongamos en acción estos elementos nuevos.

+ +
    +
  1. En primer lugar, haz una copia local de spending-record.html y minimal-table.css en una carpeta nueva de tu ordenador.
    2. +
  2. Intenta abrirlo en un navegador: observarás que se ve bien, pero podría mejorarse. La fila «SUM», que contiene una suma de las cantidades gastadas, parece estar en el lugar equivocado, y faltan algunos detalles del código.
    3. +
  3. Coloca la fila de encabezados dentro de un elemento <thead>, la fila «SUM» dentro de un elemento <tfoot>, y el resto del contenido dentro de un elemento <tbody>.
    4. +
  4. Guarda y actualiza, y observa que añadir el elemento <tfoot> ha provocado que la fila «SUM» pase al final de la tabla.
    5. +
  5. Luego, añade un atributo {{htmlattrxref ("colspan", "td")}} para que la celda «SUM» abarque las primeras cuatro columnas, de modo que el número aparezca en la parte inferior de la columna «Costes».
    6. +
  6. Vamos a añadir un estilo adicional sencillo a la tabla para que veas cuán útiles son estos elementos para aplicar CSS. Dentro del encabezado del documento HTML hay un elemento {{htmlelement ("style")}} vacío. Añade a este elemento las líneas de código CSS siguientes: + 
    tbody {
+  font-size: 95%;
+  font-style: italic;
+}
+
+tfoot {
+  font-weight: bold;
+}
+
    +
    7. +
  7. Guarda, actualiza, y échale un vistazo al resultado. Si los elementos <tbody> y <tfoot> no estuvieran en su lugar, tendrías que escribir selectores/reglas mucho más complicados para obtener la misma aplicación de estilo.
    8. +
+ +
+

Nota: No esperamos que comprendas completamente el CSS en este momento. Aprenderás más sobre el tema cuando llegues a nuestros módulos CSS (Introducción al CSS es un buen lugar para comenzar; también tenemos un artículo específico sobre Aplicar estilo a las tablas).

+
+ +

Tu tabla final debería tener un aspecto similar al siguiente:

+ + + +

{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Nota: También puedes encontrarlo en GitHub como spending-record-finished.html (o consultarlo también en vivo).

+
+ +

Anidar tablas

+ +

Es posible anidar una tabla dentro de otra, siempre que incluyas la estructura completa, incluido el elemento <table>. Por lo general, esto no se recomienda, porque se obtiene un marcado más confuso y menos accesible para los usuarios que usan lectores de pantalla, y además, en muchos casos sería posible sencillamente insertar celdas/filas/columnas adicionales en la tabla. Sin embargo, a veces es necesario, por ejemplo, si deseas importar contenido de forma sencilla desde otras fuentes.

+ +

El marcado siguiente muestra una tabla anidada simple:

+ +
<table id="tabla1">
+  <tr>
+    <th>título1</th>
+    <th>título2</th>
+    <th>título3</th>
+  </tr>
+  <tr>
+    <td id="nested">
+      <table id="tabla2">
+        <tr>
+          <td>celda1</td>
+          <td>celda2</td>
+          <td>celda3</td>
+        </tr>
+      </table>
+    </td>
+    <td>celda2</td>
+    <td>celda3</td>
+  </tr>
+  <tr>
+    <td>celda4</td>
+    <td>celda5</td>
+    <td>celda6</td>
+  </tr>
+</table>
+ +

La salida se verá así:

+ + + + + + + + + + + + + + + + + + + +
título1título2título3
+ + + + + + + + +
celda1celda2celda3
+ 		celda2celda3
celda4celda5celda6
+ +

Tablas para usuarios con discapacidad visual

+ +

Repasemos brevemente cómo usamos las tablas de datos. Una tabla puede ser una herramienta útil porque nos proporciona un acceso rápido a unos datos y nos permite buscar entre valores diferentes. Por ejemplo, echa un vistazo a la tabla siguiente para saber cuántos anillos se vendieron en Gante en agosto pasado. Para comprender la información que contiene la tabla, establecemos asociaciones visuales entre los datos de la tabla y sus encabezados de columna y/o fila.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Artículos vendidos en agosto de 2016
RopaAccesorios
PantalonesFaldasVestidosPulserasAnillos
BélgicaAmberes5622437223
Gante4618506115
Bruselas5127386928
Los países bajosÁmsterdam8934698538
Utrecht8012433619
+ +

Pero, ¿y si no puedes hacer esas asociaciones visuales? ¿Cómo podrías leer una tabla como la anterior? Las personas con discapacidad visual a menudo usan un lector de pantalla que les lee la información de las páginas web. Esto no resulta un problema cuando lees un texto sin formato, pero interpretar una tabla puede ser un gran desafío para una persona ciega. Sin embargo, con el marcado adecuado podemos reemplazar las asociaciones visuales por otras asociaciones de tipo programático.

+ +
+

Nota: Hay en torno a 253 millones de personas con discapacidad visual según los datos de la OMS de 2017.

+
+ +

Esta sección del artículo proporciona técnicas adicionales para conferir a las tablas la mayor accesibilidad posible.

+ +

Usar encabezados de columna y fila

+ +

Los lectores de pantalla identificarán todos los encabezados y los usarán para hacer asociaciones programáticas entre esos encabezados y las celdas con las que se relacionan. La combinación de encabezados por columna y fila identificará e interpretará los datos de cada celda para que los usuarios que usan lectores de pantalla puedan interpretar la tabla de manera similar a como lo hace un usuario sin discapacidad visual.

+ +

Ya expusimos los encabezados en nuestro artículo anterior; consulta Añadir encabezados con elementos <th>.

+ +

El atributo scope

+ +

Un nuevo tema para este artículo es el atributo {{htmlattrxref ("scope", "th")}}, que se puede añadir al elemento <th> para indicar a los lectores de pantalla exactamente para qué celdas es el encabezado. Volviendo a nuestro ejemplo anterior de registro de gastos, podrías definir los encabezados de columna inequívocamente como encabezados de columna de este modo:

+ +
<thead>
+  <tr>
+    <th scope="col">Compra</th>
+    <th scope="col">Ubicación</th>
+    <th scope="col">Fecha</th>
+    <th scope="col">Revisión</th>
+    <th scope="col">Coste (€)</th>
+  </tr>
+</thead>
+ +

Y también cada fila podría tener un encabezado definido de esta manera (si añadimos encabezados de fila y encabezados de columna):

+ +
<tr>
+  <th scope="row">Corte de pelo</th>
+
+<td>Peluquería</td>
+  <td>12/09</td>
+
+<td>Gran idea</td>
+  <td>30</td>
+</tr>
+ +

Los lectores de pantalla reconocerán el marcado estructurado de esta manera y permitirán a tus usuarios, por ejemplo, leer toda la columna o fila a la vez.

+ +

El atributo scope tiene dos valores posibles más: colgroup y rowgroup. Se utilizan para encabezados que se encuentran sobre la parte superior de varias columnas o filas. Si vuelves a echar un vistazo a la tabla «Artículos vendidos en agosto de 2016» al comienzo de esta sección, verás que la celda «Ropa» se encuentra encima de las celdas «Pantalones», «Faldas» y «Vestidos» Todas estas celdas deben estar marcadas como encabezados (<th>), pero «Ropa» es un encabezado que está por encima y define los otros tres subencabezados. Por lo tanto, «Ropa» debería incluir un atributo scope="colgroup", mientras que los demás tendrían un atributo scope="col".

+ +

Los atributos de id y encabezados

+ +

Una alternativa al uso del atributo scope es usar los atributos {{htmlattrxref ("id")}} y {{htmlattrxref ("headers", "td")}} para crear asociaciones entre encabezados y celdas. La forma en que se usan es la siguiente:

+ +
    +
  1. Añades un id único a cada elemento <th>.
    2. +
  2. Añades un atributo headers a cada elemento <td>. Cada atributo headers debe contener una lista de los id de todos los elementos <th> que actúan como encabezado de esa celda, separados por espacios.
    3. +
+ +

Esto le da a tu tabla HTML una definición explícita de la posición de cada celda en la tabla definida por los encabezados de cada columna y fila de la que forma parte, como en una hoja de cálculo. Para que funcione bien, la tabla necesita tanto encabezados de columna como encabezados de fila.

+ +

Volviendo a nuestro ejemplo de gastos, los dos fragmentos anteriores podrían reescribirse así:

+ +
<thead>
+  <tr>
+    <th id="purchase">Compra</th>
+    <th id="location">Ubicación</th>
+    <th id="date">Fecha</th>
+    <th id="evaluation">Revisión</th>
+    <th id="cost">Coste (€)</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <th id="haircut">Corte de pelo</th>
+  <td headers="location haircut">Peluquería</td>
+  <td headers="date haircut">12/09</td>
+  <td headers="evaluation haircut">Gran idea</td>
+  <td headers="cost haircut">30</td>
+</tr>
+
+  ...
+
+</tbody>
+ +
+

Nota: Este método crea asociaciones muy precisas entre los encabezados y las celdas de datos, pero utiliza un montón más de código de marcado y no permite errores. El enfoque scope suele bastar para la mayoría de las tablas.

+
+ +

Aprendizaje activo: jugar con scope y headers

+ +
    +
  1. Para este ejercicio final, te proponemos que primero hagas copias locales de items-sold.html y minimal-table.css en un directorio nuevo.
    2. +
  2. Ahora intenta añadir los atributos scope adecuados para hacer que esta tabla sea más accesible.
    3. +
  3. Por último, haz otra copia de los archivos originales, y esta vez añade accesibilidad a la tabla utilizando los atributos id y headers.
    4. +
+ +
+

Nota: Puedes verificar tu trabajo con nuestros ejemplos terminados: consulta items-sold-scope.html (consúltalo en vivo) y items-sold-headers.html (consúltalo en vivo).

+
+ +

Resumen

+ +

Podrías aprender algo más sobre las tablas en HTML, pero en realidad te hemos proporcionado toda la información que necesitas saber en este momento. En este punto, es posible que desees ir y aprender sobre la aplicación de estilo a tablas HTML: consulta Aplicar estilo a las tablas.

+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+ +
+

En este módulo

+ + +
diff --git a/files/es/learn/html/tables/basics/index.html b/files/es/learn/html/tables/basics/index.html new file mode 100644 index 0000000000..7259adf427 --- /dev/null +++ b/files/es/learn/html/tables/basics/index.html @@ -0,0 +1,563 @@ +--- +title: Conceptos básicos de las tablas HTML +slug: Learn/HTML/Tablas/Conceptos_básicos_de_las_tablas_HTML +translation_of: Learn/HTML/Tables/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

Este artículo te ayudará a comenzar con las tablas HTML. Vamos a exponer conceptos básicos como filas y celdas, encabezados, celdas que abarcan múltiples columnas y filas, y la forma de agrupar todas las celdas de una columna para aplicarles estilo.

+ + + + + + + + + + + + +
Prerrequisitos:Conceptos básicos de HTML (ver Introducción al HTML).
Objetivo:Adquirir conocimientos básicos de las tablas HTML.
+ +

¿Qué es una tabla?

+ +

Una tabla es un conjunto estructurado de datos distribuidos en filas y columnas (datos tabulados). Una tabla permite buscar con rapidez y facilidad valores entre diferentes tipos de datos que indiquen algún tipo de conexión. Por ejemplo, una persona y su edad, o un día de la semana o el horario de una piscina municipal.

+ +

Una tabla de datos de ejemplo que muestra los nombres y las edades de algunas personas: Chris 38, Dennis 45, Sarah 29, Karen 47.

+ +

Una tabla de datos que muestra unos horarios de clases natación

+ +

Las tablas se utilizan con mucha frecuencia en la sociedad desde hace años, como lo demuestra este documento censal de los EUA de 1800:

+ +

Un pergamino muy antiguo; cuesta un poco leer los datos, pero muestra con claridad que las tablas de datos ya se utilizaban en 1800.

+ +

Por lo tanto, no es de extrañar que los creadores de HTML proporcionen un medio con el que estructurar y presentar datos en tablas en la web.

+ +

¿Cómo funciona una tabla?

+ +

El aspecto básico de una tabla es que es un elemento rígido. Es fácil interpretar la información haciendo asociaciones visuales entre los encabezados de las filas y las columnas. Por ejemplo, observa la tabla siguiente y busca un gigante de gas joviano con 62 lunas. Puedes encontrar la respuesta asociando los encabezados de la fila y la columna correspondientes.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Datos sobre los planetas de nuestro sistema solar (datos planetarios tomados de la hoja técnica sobre datos planetarios de la NASA (Nasa's Planetary Fact Sheet - Metric).
NombreMasa (1024 kg)Diámetro (km)Densidad (kg/m3)Gravedad (m/s2)Duración del día (horas)Distancia del Sol (106km)Temperatura media (°C)Número de lunasObservaciones
Planetas terrestresMercurio0,3304.8795.4273,74.222,657,91670El más cercano al Sol
Venus4,8712.1045.2438,92.802,0108,24640
La Tierra5,9712.7565.5149,824,0149,6151Nuestro planeta
Marte0,6426.7923.9333,724,7227,9-652El planeta rojo
Planetas jovianosLos gigantes de gasJúpiter1.898142.9841.32623,19,9778,6-11067El planeta más grande
Saturno568120.5366879,010,71.433,5-14062
Los gigantes de hieloUrano86,851.1181.2718,717,22.872,5-19527
Neptuno10249.5281.63811,016,14.495,1-20014
Planetas enanosPlutón0,01462.3702.0950,7153,35.906,4-2255Desclasificado como planeta en 2006, pero aún es una cuestión polémica.
+ +

Cuando se hace correctamente, incluso las personas ciegas pueden interpretar los datos de una tabla HTML. Una tabla HTML bien hecha debe mejorar la experiencia de los usuarios videntes e invidentes por igual.

+ +

Dar estilo a las tablas

+ +

También puedes echar un vistazo al ejemplo vivo en GitHub. Observarás que la tabla que encontrarás allí tiene un aspecto más legible; esto se debe a que la tabla que ves en esta página tiene un estilo mínimo, mientras que en la de la versión de GitHub se ha aplicado un CSS más significativo.

+ +

No te hagas ilusiones; para que las tablas sean efectivas en la web, debes proporcionar cierta información de estilo con CSS, así como una buena estructura sólida con HTML. En este módulo nos centramos en la parte HTML; para averiguar sobre la parte del CSS debes visitar nuestro artículo Aplicar estilo a las tablas.

+ +

En este módulo no nos vamos a centrar en el CSS, sino que te vamos a proporcionar una hoja de estilo de CSS que dará a tus tablas algo más de legibilidad de la que se obtiene por defecto si no se proporciona ningún estilo. Puedes encontrar la hoja de estilo aquí, así como también una plantilla HTML para aplicar la hoja de estilo (te darán un buen punto de partida para experimentar con las tablas HTML).

+ +

¿Cuándo no debes usar tablas HTML?

+ +

Las tablas HTML están pensadas para utilizarse con datos tabulados. Por desgracia, mucha gente utiliza las tablas HTML para hacer compaginaciones de páginas web. Por ejemplo, una fila para contener la cabecera, una fila para contener las columnas de contenido, una fila para contener el pie de página, etc. Puede encontrar más detalles y un ejemplo en Diseños de página en nuestro Módulo de aprendizaje de accesibilidad. Se solía hacer este uso de las tablas porque la compatibilidad CSS entre navegadores solía ser terrible. Los diseños de tablas son mucho menos comunes hoy en día, pero aún se pueden ver en algunos rincones de la web.

+ +

En resumen, es una mala idea usar tablas para el diseño en lugar de las técnicas de diseño CSS. Las razones principales son las siguientes:

+ +
    +
  1. Las tablas de diseño reducen la accesibilidad para los usuarios con discapacidad visual: Los lectores de pantalla que utilizan las personas con visibilidad reducida interpretan las etiquetas de una página HTML y leen su contenido para el usuario. Puesto que las tablas no son la herramienta adecuada para el diseño y el marcado es más complejo que con las técnicas de diseño CSS, la salida de los lectores de pantalla será confusa para estos usuarios.
    2. +
  2. Las tablas generan estructuras incorrectas: Como ya se mencionó, los diseños de tabla suelen involucrar estructuras de marcado más complejas que las técnicas de diseño. Esto puede dificultar la escritura, el mantenimiento y la depuración del código.
    3. +
  3. Las tablas no tienen respuesta adaptativa automática: Cuando usas contenedores de diseño adecuados (tales como {{HTMLElement ("header")}}, {{HTMLElement ("section")}}, {{HTMLElement ("article")}} o {{HTMLElement ("div")}}), su ancho predeterminado es el 100% de su elemento padre. En cambio, las tablas se dimensionan de forma predeterminada según su contenido, por lo que se necesitan medidas adicionales para que el diseño de la tabla funcione de manera efectiva en todos los dispositivos.
    4. +
+ +

Aprendizaje activo: Crea tu primera tabla

+ +

Ya hemos hablado bastante sobre la teoría de las tablas, así que veamos un ejemplo práctico y construyamos una tabla simple.

+ +
    +
  1. En primer lugar, haz una copia local de blank-template.html y minimal-table.css en un directorio nuevo de tu ordenador.
    2. +
  2. El contenido de cada tabla está delimitado entre estas dos etiquetas: <table></table>. Añádelas al cuerpo de tu código HTML.
    3. +
  3. El contenedor más pequeño dentro de una tabla es una celda, que se crea con un elemento <td> ('td' significa 'table data', datos de tabla). Añade lo siguiente dentro de tus etiquetas de tabla: + 
    <td>Hola, soy tu primera celda.</td>
    +
    4. +
  4. Si quieres una fila de cuatro celdas, tienes que copiar estas etiquetas tres veces. Actualiza el contenido de la tabla para que se vea así: + 
    <td>Hola, soy tu primera celda.</td>
+<td>Soy tu segunda celda.</td>
+<td>Soy tu tercera celda.</td>
+<td>Soy tu cuarta celda.</td>
    +
    5. +
+ +

Como verás, las celdas no se colocan una debajo de la otra, sino que se alinean automáticamente entre sí en la misma fila. Cada elemento <td> crea una sola celda, y juntas forman la primera fila. Cada celda que agregamos hace crecer la fila.

+ +

Para detener el crecimiento de esta fila y comenzar a colocar las celdas posteriores en una segunda fila, necesitamos usar el elemento <tr> ('tr' significa 'table raw', fila de tabla). Vamos a verlo en detalle.

+ +
    +
  1. Coloca las cuatro celdas que has creado dentro de las etiquetas <tr>, de esta forma: + + 
    <tr>
+  <td>Hola, soy tu primera celda.</td>
+  <td>Soy tu segunda celda.</td>
+  <td>Soy tu tercera celda.</td>
+  <td>Soy tu cuarta celda.</td>
+</tr>
    +
    2. +
  2. Ahora que has hecho una fila, intenta hacer una o dos más: cada fila debe estar delimitada por un elemento <tr> adicional, con cada celda contenida en un <td>.
    3. +
+ +

Esto debería dar como resultado una tabla similar a la siguiente:

+ + + + + + + + + + + + + + + + +
Hola, soy tu primera celda.Soy tu segunda celda.Soy tu tercera celda.Soy tu cuarta celda.
Segunda fila, primera celda.Celda 2.Celda 3.Celda 4.
+ +
+

Nota: También puedes encontrar esto en GitHub como simple-table.html (consúltalo en vivo).

+
+ +

Añadir encabezados con elementos <th>

+ +

Ahora nos vamos a centrar en los encabezados de tabla: celdas especiales que van al comienzo de una fila o columna y definen el tipo de datos que contiene esa fila o columna (por ejemplo, observa las celdas «Propietario» y «Edad» en el primer ejemplo que se muestra en este artículo). Para ilustrar por qué son útiles, echa un vistazo al ejemplo de tabla siguiente. En primer lugar, el código fuente:

+ +
<table>
+  <tr>
+    <td>&nbsp;</td>
+    <td>Knocky</td>
+    <td>Flor</td>
+    <td>Ella</td>
+    <td>Juan</td>
+  </tr>
+  <tr>
+    <td>Raza</td>
+    <td>Jack Russell</td>
+    <td>Caniche</td>
+    <td>Perro callejero</td>
+    <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+    <td>Edad</td>
+    <td>16</td>
+    <td>9</td>
+    <td>10</td>
+    <td>5</td>
+  </tr>
+  <tr>
+    <td>Propietario</td>
+    <td>Suegra</td>
+    <td>Yo</td>
+    <td>Yo</td>
+    <td>Cuñada</td>
+  </tr>
+  <tr>
+    <td>Hábitos alimentarios</td>
+    <td>Come las sobras de todos</td>
+
+<td>Mordisquea la comida</td>
+    <td>Come en abundancia</td>
+
+<td>Come hasta que revienta</td>
+  </tr>
+</table>
+ +

Ahora observa la tabla representada:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KnockyFlorEllaJuan
RazaJack RussellCanichePerro callejeroCocker Spaniel
Edad169105
PropietarioSuegraYoYoCuñada
Hábitos alimentariosCome las sobras de todosMordisquea la comidaCome en abundanciaCome hasta que revienta
+ +

El problema aquí es que, si bien puedes distinguir lo que sucede, no es tan fácil cruzar datos de referencia. Sería mucho mejor si los encabezados de las columnas y las filas se destacasen de alguna manera.

+ +

Aprendizaje activo: encabezados de tabla

+ +

Intentemos mejorar esta tabla.

+ +
    +
  1. Primero, haz una copia local de nuestros archivos dogs-table.html y minimal-table.css en un directorio nuevo de tu ordenador. El HTML contiene el mismo ejemplo sobre perros que viste arriba.
    2. +
  2. Para reconocer los encabezados de la tabla como encabezados, tanto visual como semánticamente, puedes usar el elemento <th> ('th' significa 'table header', encabezado de tabla). Funciona exactamente igual que un <td>, excepto que denota un encabezado, no una celda normal. Entra en el código HTML, y cambiar todos los elementos <td> que delimitan los encabezados de tabla por elementos <th>.
    3. +
  3. Guarda tu HTML y cárgalo en un navegador. Los encabezados deberían verse como tal.
    4. +
+ +
+

Nota: Puedes encontrar nuestro ejemplo terminado en dogs-table-fixed.html en GitHub (o consultarlo en vivo).

+
+ +

¿Por qué son útiles los encabezados?

+ +

Ya hemos respondido parcialmente a esta pregunta: es más fácil encontrar los datos que buscas cuando los encabezados se destacan con claridad, y el diseño suele presentar un aspecto mejor.

+ +
+

Nota: Los encabezados de las tablas vienen con un estilo predeterminado: están en negrita y centrados (incluso si no añades tu estilo propio a la tabla) para que destaquen.

+
+ +

Los encabezados de tabla también presentan otra ventaja: junto con el atributo de scope (que veremos en el próximo artículo), mejoran la accesibilidad de las tablas porque asocian cada encabezado con todos los datos de la misma fila o columna. Así que los lectores de pantalla pueden leer una fila o columna de datos a la vez, lo cual es bastante útil.

+ +

Celdas que abarcan varias filas y columnas

+ +

A veces queremos que las celdas abarquen varias filas o columnas. Toma el ejemplo siguiente, que muestra los nombres de algunos animales comunes. En algunos casos, queremos mostrar los nombres de los machos y las hembras junto al nombre del animal. A veces no lo queremos, y en tales casos queremos que el nombre del animal abarque toda la tabla.

+ +

El marcado inicial se ve así:

+ +
<table>
+  <tr>
+    <th>Animales</th>
+  </tr>
+  <tr>
+    <th>Hipopótamo</th>
+  </tr>
+  <tr>
+    <th>Caballo</th>
+    <td>Yegua</td>
+  </tr>
+  <tr>
+    <td>Semental</td>
+  </tr>
+  <tr>
+
+<th>Cocodrilo</th>
+  </tr>
+  <tr>
+
+<th>Pollo</th>
+
+<td>Gallina</td>
+  </tr>
+  <tr>
+    <td>Gallo</td>
+  </tr>
+</table>
+ +

Pero la salida no nos da exactamente lo que queremos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Animales
Hipopótamo
CaballoYegua
Semental
Cocodrilo
PolloGallina
Gallo
+ +

Necesitamos una forma de hacer que «Animales», «Hipopótamo» y «Cocodrilo» se extiendan dos columnas más allá, y «Caballo» y «Pollo» se extiendan dos filas más abajo. Por fortuna, los encabezados de tabla y las celdas tienen los atributos colspan y rowspan, que nos permiten hacer exactamente esas cosas. Ambos aceptan un valor numérico sin unidades, que es igual al número de filas o columnas que desea abarcar. Por ejemplo, colspan="2" extiende una celda dos columnas más allá.

+ +

Usemos colspan y rowspan para mejorar esta tabla.

+ +
    +
  1. Primero, haz una copia local de nuestros archivos animals-table.html y minimal-table.css en un directorio nuevo de tu ordenador. El HTML contiene el mismo ejemplo sobre perros que viste arriba.
    2. +
  2. Luego, usa colspan para extender las celdas «Animales», «Hipopótamo» y «Cocodrilo» dos columnas más allá.
    3. +
  3. Por último, usa rowspan para extender las celdas de «Caballo» y «Pollo» dos filas más abajo.
    4. +
  4. Guarda tu código y ábrelo en un navegador para ver la mejora.
    5. +
+ +
+

Nota: Puedes encontrar nuestro ejemplo terminado en animals-table-fixed.html en GitHub (o consultarlo en vivo).

+
+ + +
+ +

Proporcionar un estilo común a las columnas.

+ +

Hay una última característica de la que queremos hablar en este artículo antes de continuar. El HTML tiene un método para definir información de estilo para una columna completa de datos en un solo lugar: los elementos <col> y <colgroup>. Estos atributos existen porque especificar el estilo de las columnas puede resultar enojoso e ineficiente; en general hay que especificar la información de estilo en cada <td> o <th> de la columna, o utilizar un selector complejo como {{cssxref(":nth-child()")}}.

+ +

Tomemos el ejemplo sencillo siguiente:

+ +
<table>
+  <tr>
+
+<th>Dato 1</th>
+    <th style="background-color: yellow">Dato 2</th>
+  </tr>
+  <tr>
+    <td>Calcuta</td>
+    <td style="background-color: yellow">Pizza</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td style="background-color: yellow">Jazz</td>
+  </tr>
+</table>
+ +

Esto nos da el resultado siguiente:

+ + + + + + + + + + + + + + + + +
Dato 1Dato 2
CalcutaNaranja
RobotsJazz
+ +

Esto no es ideal, porque hay que repetir la información de estilo en las tres celdas de la columna (en un proyecto real probablemente habría definida una clase class en las tres celdas y el estilo se especificaría en una hoja de estilo por separado). En vez de hacer esto, podemos especificar la información una sola vez, con un elemento <col>. Los elementos <col> se especifican dentro de un contenedor <colgroup> justo debajo de la etiqueta de apertura <table>. Podríamos crear el mismo efecto que vemos arriba especificando nuestra tabla de la manera siguiente:

+ +
<table>
+  <colgroup>
+    <col>
+    <col style="background-color: yellow">
+  </colgroup>
+  <tr>
+
+<th>Dato 1</th>
+
+<th>Dato 2</th>
+  </tr>
+  <tr>
+    <td>Calcuta</td>
+    <td>Pizza</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td>Jazz</td>
+  </tr>
+</table>
+ +

En efecto, definimos dos tipos de «columnas de estilo», una que especifica la información para la aplicación de estilo en cada columna. No aplicamos estilo a la primera columna, sino que aún tenemos que incluir un elemento <col> en blanco; de lo contrario, el estilo también se aplicaría a la primera columna.

+ +

Si quisiéramos aplicar la información de estilo a ambas columnas, podríamos incluir un elemento <col> con un atributo span, como este:

+ +
<colgroup>
+  <col style="background-color: yellow" span="2">
+</colgroup>
+ +

Al igual que colspan y rowspan, span toma un valor numérico sin unidades que especifica el número de columnas a las que se desea aplicar el estilo.

+ +

Aprendizaje activo: colgroup y col

+ +

Ahora es el momento de intentarlo tú mismo.

+ +

A continuación puedes ver el horario de una profesora de idiomas. El viernes tiene que enseñar holandés todo el día, pero también enseña alemán durante unas horas los martes y los jueves, y quiere resaltar las columnas que contienen los días que da clase.

+ +

{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}

+ +

Recrea la tabla a partir de los pasos siguientes.

+ +
    +
  1. Primero, haz una copia local de nuestro archivo timetable.html en un directorio nuevo de tu ordenador. El HTML contiene la misma tabla que viste arriba, menos la información de estilo de las columnas.
    2. +
  2. Añade un elemento <colgroup> en la parte superior de la tabla, justo debajo de la etiqueta <table>, en la que puedes añadir tus elementos <col> (consulta los pasos restantes a continuación).
    3. +
  3. Las dos primeras columnas deben dejarse sin estilo.
    4. +
  4. Añade un color de fondo a la tercera columna. El valor para tu atributo de style es background-color:#97DB9A;
    5. +
  5. Establece un ancho distinto para la cuarta columna. El valor de tu atributo de style es width: 42px;
    6. +
  6. Añade un color de fondo a la quinta columna. El valor para tu atributo de style es background-color:#97DB9A;
    7. +
  7. Añade un color de fondo diferente más un borde a la sexta columna, para indicar que este es un día especial porque da clases de un idioma diferente. Los valores para tu atributo de style son background-color:#DCC48E; border:4px solid #C1437A;
    8. +
  8. Los últimos dos días los tiene libres, así que no establezcas ningún color de fondo, pero sí un valor para el ancho; el valor para el atributo de style es width: 42px;
    9. +
+ +

Mira cómo sigue en el ejemplo. Si te encallas o quieres verificar tu trabajo, puedes encontrar nuestra versión en GitHub como timetable-fixed.html (o también puedes consultarlo en vivo).

+ +

Resumen

+ +

Con esto casi hemos abarcado todos los conceptos básicos de las tablas HTML. En el próximo artículo, veremos algunas características un poco más avanzadas de las tablas y comenzaremos a pensar acerca de su accesibilidad para las personas con discapacidad visual.

+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +
+

En este módulo

+ + +
diff --git a/files/es/learn/html/tables/index.html b/files/es/learn/html/tables/index.html new file mode 100644 index 0000000000..7d04eb0cbf --- /dev/null +++ b/files/es/learn/html/tables/index.html @@ -0,0 +1,34 @@ +--- +title: Tablas HTML +slug: Learn/HTML/Tablas +translation_of: Learn/HTML/Tables +--- +
{{LearnSidebar}}
+ +

Una tarea muy común en HTML es la estructuración de datos, y para esto hay múltiples elementos y atributos. Esto unido a un poco de CSS, hace que en HTML sea sencillo mostrar tablas con información sobre tu horario escolar, los horarios de una piscina local o las estadisticas de tu equipo de dinosaurios o fútbol preferido. Este módulo te guiará en todo lo que necesitas saber sobre la estructuración tabular de datos en HTML.

+ +

Requisitos previos

+ +

Antes de comenzar este módulo, deberías de saber las cosas básicas de HTML — ver Introducción a HTML.

+ +
+

Nota: Si estas trabjando en un ordenador/tableta/otro dispositivo en el que no puedes crear tus propios archivos, puedes probar la mayoría de ejemplos online en webs como JSBin o Thimble.

+
+ +

Guías

+ +

Este módulo contiene los siguientes artículos:

+ +
+
Comenzando con tablas HTML
+
Este artículo te introduce en las tablas HTML , cubriendo las cosas más basicas como las líneas y las celdas, encabezados, crear celdas de multiples líneas y columnas, y como agrupar todas las celdas en una columna con fines estilisticos.
+
Características avanzadas y accesibilidad en tablas HTML
+
En el segundo artículo de este módulo, veremos algunas características avanzadas de las tablas HTML — como subtítulos/resumenes y agrupar líneas en la cabeza, cuerpo y pie de la tabla — además de realizar tablas accesibles para aquellos usuarios con problemas de visión.
+
+ +

Evaluación

+ +
+
Estructurar datos planetarios
+
En nuestra evaluación, te proporcionamos datos sobre los planetas de nuestro sistemas solar y tu los estructurarás en una tabla HTML.
+
diff --git a/files/es/learn/html/tables/structuring_planet_data/index.html b/files/es/learn/html/tables/structuring_planet_data/index.html new file mode 100644 index 0000000000..e9868bb95a --- /dev/null +++ b/files/es/learn/html/tables/structuring_planet_data/index.html @@ -0,0 +1,72 @@ +--- +title: 'Evaluación: Estructurando datos planetarios' +slug: Learn/HTML/Tablas/Structuring_planet_data +translation_of: Learn/HTML/Tables/Structuring_planet_data +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

En nuestra evaluación te proporcionamos datos sobre los planetas de nuestro sistema solar y tu los estructurarás en una tabla HTML.

+ + + + + + + + + + + + +
Requisitos previos:Antes de comenzar esta evaluación deberías de haber leído los artículos de este módulo.
Objetivo:Comprobar si has comprendido las tablas HTML y las características asociadas.
+ +

Punto de incio

+ +

Para comenzar esta evaluación, crea una copia local de blank-template.html, minimal-table.css, y planets-data.txt en una nueva carpeta de tu ordenador.

+ +
+

Nota: Como alternativa, puedes usar una web como JSBin o Thimble para realizar tu evaluación. Puedes pegar el HTML, CSS y JavaScript en uno de estos editores online. Si el editor online que estas usando no tiene paneles separados para JavaScript/CSS, sientete libre de ponerlos en línea dentro del mismo HTML mediante el uso de <script>/<style>.

+
+ +

Resumen del proyecto

+ +

Estás trabajando en la escuela; tus estudiantes están estudiando los planetas de nuestro sistema solar y quieres proporcionarles una forma sencilla de seguir los datos para buscar hechos sobre los planetas. Una tabla HTML sería ideal — tienes que coger los datos que tienes disponibles y convertirlos en una tabla siguiendo los pasos de abajo.

+ +

La tabla finalizada debería de verse así:

+ +

+ +

También puedes ver el ejemplo aquí (no mires el código fuente — ¡no hagas trampas!)

+ + + +

Pasos para completarlo

+ +

Los siguientes pasos describen lo que necesitas para completar el ejemplo de la tabla. Todos los datos que necesitarás están en el archivo planets-data.txt. Si tienes problemas para visualizar los datos, mira el ejemplo de arriba o intentalo dibujando un diagrama.

+ +
    +
  1. Abre tu copia de blank-template.html, y comienza la tabla dándole un contenedor exterior, una cabecera y un cuerpo. No necesitas un pie de tabla en este ejemplo.
    2. +
  2. Añade el subtítulo proporcionado a tu tabla.
    3. +
  3. Añade una línea a la cabecera que contenga todos los encabezados de columna.
    4. +
  4. Crea todas las líneas con su contenido, asegurandote marcar como cabecera aquellas celdas que lo sean.
    5. +
  5. Asegurate de que el contenido esta insertado en las celdas correctas — en los datos del .txt, cada línea del planeta esta al lado de su planeta asociado.
    6. +
  6. Añade atributos para que las líneas y columnas del encabezado no se puedan confundir con las líneas, columnas o grupos de líneas a las que encabezan.
    7. +
  7. Añade un borde negro alrededor de la columna que contiene los nombres de los planetas y sus encabezados.
    8. +
+ +

Pistas y consejos

+ + + +

Evaluación

+ +

Si estas siguiendo esta evaluación como parte de un curso organizado, deberías de ser capaz de entregar tu trabajo a tu profesor(a)/mentor para ver la puntuación. Si estas aprendiendo por tu cuenta, puedes obtener la guía de puntuación preguntando en Learning Area Discourse thread o en el canal IRC #mdn en Mozilla IRC. Intenta hacer el ejercicio primero  — ¡haciendo trampas no aprenderás nada!

+ +

{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}

diff --git a/files/es/learn/javascript/building_blocks/bucle_codigo/index.html b/files/es/learn/javascript/building_blocks/bucle_codigo/index.html deleted file mode 100644 index e26509afc5..0000000000 --- a/files/es/learn/javascript/building_blocks/bucle_codigo/index.html +++ /dev/null @@ -1,923 +0,0 @@ ---- -title: Bucles -slug: Learn/JavaScript/Building_blocks/Bucle_codigo -translation_of: Learn/JavaScript/Building_blocks/Looping_code ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
- -

Los lenguajes de programación son muy útiles para completar rápidamente tareas repetitivas, desde múltimples cálculos básicos hasta cualquier otra situación en donde tengas un montón de elementos de trabajo similares que completar. Aquí vamos a ver las estructuras de bucles disponibles en JavaScript que pueden manejar tales necesidades.

- - - - - - - - - - - - -
Prerequisitos:Conocimientos básicos de computación, entendimiento básico de HTML y CSS, JavaScript first steps.
Objetivo:Entender cómo usar bucles en JavaScript.
- -

Mantente en el Bucle

- -

Bucles, bucles, bucles. Además de ser conocidos como un cereal de desayuno popular, montañas rusas y producción músical, también son un concepto muy importante en programación. Los bucles de programación están relacionados con todo lo referente a hacer una misma cosa una y otra vez — que se denomina como iteración en el idioma de programación.

- -

Consideremos el caso de un agricultor que se asegura de tener suficiente comida para alimentar a su familia durante la semana. Podría usar el siguiente bucle para lograr esto:

- -


-

- -

Un bucle cuenta con una o más de las siguientes características:

- - - -

En {{glossary("pseudocódigo")}},esto se vería como sigue:

- -
bucle(comida = 0; comidaNecesaria = 10) {
-  if (comida = comidaNecesaria) {
-    salida bucle;
-    // Tenemos suficiente comida; vamonos para casa
-  } else {
-    comida += 2; // Pasar una hora recogiendo 2 más de comida
-    // Comenzar el bucle de nuevo
-  }
-}
- -

Así que la cantidad necesaria de comida se establece en 10, y la cantidad incial del granjero en 0. En cada iteración del bucle comprobamos si la cantidad de comida del granjero es mayor o igual a la cantidad que necesita. Si lo es, podemos salir del bucle. Si no, el granjero se pasará una hora más recogiendo dos porciones de comida, y el bucle arrancará de nuevo.

- -

¿Por qué molestarse?

- -

En este punto, probablemente entiendas los conceptos de alto nivel que hay detrás de los bucles, pero probablemente estés pensando "OK, fantástico, pero ¿cómo me ayuda esto a escribir un mejor codigo JavaScript?". Como dijimos antes, los bucles tienen que ver con hacer lo mismo una y otra vez, lo cual es bueno para completar rápidamente tareas repetitivas.

- -

Muchas veces, el código será ligeramente diferente en cada iteracción sucesiva del bucle, lo que significa que puedes completar una carga completa de tareas que son similares, pero ligeramente diferentes — si tienes muchos calculos diferentes que hacer, quieres hacer cada uno de ellos, ¡no el mismo una y otra vez!

- -

Vamos a ver un ejemplo para ilustrar perfectamente por qué los bucles son tan útiles. Digamos que queremos dibujar 100 círculos aleatorios en un elemento {{htmlelement("canvas")}} (presiona el botón Update para ejecutar el ejemplo una y otra vez y ver diferentes configuraciones aleatorias):

- - - -

{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

- -

No tienes que entender todo el código por ahora, pero vamos a echar un vistazo a la parte de código que dibuja los 100 círculos:

- -
for (var i = 0; i < 100; i++) {
-  ctx.beginPath();
-  ctx.fillStyle = 'rgba(255,0,0,0.5)';
-  ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
-  ctx.fill();
-}
- -

Debes quedarte con la idea básica.  — utilizamos un bucle para ejecutar 100 iteracciones de este código, cada una de las cuales dibuja un círculo en una posición aleatoria de la página. La cantidad de código necesario sería el mismo si dibujáramos 100, 1000, o 10,000 círculos. Solo necesitamos cambiar un número.

- -

Si no usáramos un bucle aquí, tendríamos que repetir el siguiente código por cada círculo que quisiéramos dibujar:

- -
ctx.beginPath();
-ctx.fillStyle = 'rgba(255,0,0,0.5)';
-ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
-ctx.fill();
- -

Esto sería muy aburrido y difícil de mantener de forma rápida. Los bucles son realmente lo mejor.

- -

El bucle estándar for

- -

Exploremos algunos constructores de bucles específicos. El primero, que usarás la mayoría de las veces, es el bucle for - este tiene la siguiente sintaxis:

- -
for (inicializador; condición de salida; expresión final) {
-  // código a ejecutar
-}
- -

Aquí tenemos:

- -
    -
  1. La palabra reservada for, seguida por algunos paréntesis.
    2. -
  2. Dentro de los paréntesis tenemos tres ítems, separados por punto y coma (;): -
      -
    1. Un inicializador - Este es usualmente una variable con un número asignado, que aumenta el número de veces que el bucle ha sijo ejecutado. También se le llama contador o variable de conteo.
      2. -
    2. Una condición de salida - como se mencionó previamente, ésta define cuando el bucle debería detenerse. Generalmente es una expresión que contiene un operador de comparación, una prueba para verificar ue la condición de término o salida ha sido cumplida.
      3. -
    3. Una expresión final - que es siempre evaluada o ejecutada cada vez que el bucle ha completado una iteración. Usualmente sirve para modificar al contador (incrementando su valor o algunas veces disminuyendolo), para aproximarse a la condición de salida.
      4. -
    -
    3. -
  3. Algunos corchetes curvos que contienen un bloque de código - este código se ejecutará cada vez que se repita el bucle.
    4. -
- -

Observa un ejemplo real para poder entender esto más claramente.

- -
var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
-var info = 'My cats are called ';
-var para = document.querySelector('p');
-
-for (var i = 0; i < cats.length; i++) {
-  info += cats[i] + ', ';
-}
-
-para.textContent = info;
- -

Esto nos da el siguiente resultado:

- - - -

{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}

- -
-

Nota: Puedes encontrar este ejemplo de código en GitHub también (además puedes verlo ejecutar en vivo).

-
- -

Esto muestra un bucle siendo usado para iterar sobre los elementos de un arreglo (matriz), y hacer algo con cada uno de ellos - un patrón muy común en JavaScript. Aquí:

- -
    -
  1. El iterador, i, inicia en 0 (var i = 0).
    2. -
  2. Se le ha dicho que debe ejecutarse hasta que no sea menor que la longitud del arreglo cats. Esto es importante  - la condición de salida muestra la condicion bajo la cual el bucle seguirá iterando. Así, en este caso, mientras i < cats.length sea verdadero, el bucle seguirá ejecutándose.
    3. -
  3. Dentro del bucle, concatenamos el elemento del bucle actual (cats[i] es cats[lo que sea i en ese momento]) junto con una coma y un espacio, al final de la variable info. Así: -
      -
    1. Durante la primera ejecución,  i = 0, así cats[0] + ', ' se concatenará con la información ("Bill, ").
      2. -
    2. Durante la segunda ejecución, i = 1, así cats[1] + ', ' agregará el siguiente nombre ("Jeff, ").
      3. -
    3. Y así sucesivamente. Después de cada vez que se ejecute el bucle, se incrementará en 1 el valod de i (i++), entonces el proceso comenzará de nuevo.
      4. -
    -
    4. -
  4. Cuando i sea igual a cats.length, el bucle se detendrá, y el navegador se moverá al siguiente segmento de código bajo el bucle.
    5. -
- -
-

Nota: Hemos programado la condición de salidad como i < cats.length, y no como i <= cats.length, porque los computadores cuentan desde 0, no 1 - inicializamos la variable i en 0, para llegar a i = 4 (el índice del último elemento del arreglo). cats.length responde 5, ya que existen 5 elementos en el arreglo, pero no queremos que i = 5, dado que respondería undefined para el último elemento (no existe un elemento en el arreglo con un índice 5). for the last item (there is no array item with an index of 5). Por ello, queremos llegar a 1 menos que cats.length (i <), que no es lo mismo que cats.length (i <=).

-
- -
-

Nota: Un error común con la condición de salida es utilizar el comparador "igual a" (===) en vez de "menor o igual a" (<=). Si queremos que nuestro bucle se ejecute hasta que  i = 5, la condición de salida debería ser i <= cats.length. Si la declaramos i === cats.length, el bucle no debería ejecutarse , porque i no es igual a 5 en la primera iteración del bucle, por lo que debería detenerse inmediatamente.

-
- -

Un pequeño problema que se presenta es que la frase de salida final no está muy bien formada:

- -
-

My cats are called Bill, Jeff, Pete, Biggles, Jasmin,

-
- -

Idealmente querríamos cambiar la concatenacion al final de la última iteracion del bucle, así no tendríamos una coma en el final de la frase. Bueno, no hay problema - podemos insertar un condicional dentro de nuestro bucle para solucionar este caso especial:

- -
for (var i = 0; i < cats.length; i++) {
-  if (i === cats.length - 1) {
-    info += 'and ' + cats[i] + '.';
-  } else {
-    info += cats[i] + ', ';
-  }
-}
- -
-

Note: You can find this example code on GitHub too (also see it running live).

-
- -
-

Importante: Con for - como con todos los bucles - debes estar seguro de que el inicializador es repetido hasta que eventualemtne alcance la condición de salida. Si no, el bucle seguirá repitiéndose indefinidamente, y puede que el navegador lo fuerce a detenerse o se interrumpa. Esto se denomina bucle infinito.

-
- -

Salir de un bucle con break

- -

Si deseas salir de un bucle antes de que se hayan completado todas las iteraciones, puedes usar la declaración break. Ya la vimos en el artículo previo cuando revisamos la declaración switch - cuando un caso en una declaración switch coincide con la expresión de entrada, la declaración break inmediatamente sale de la declaración switch y avanza al código que se encuentra después.

- -

Ocurre lo mismo con los bucles - una declaración break saldrá inmediatamente del bucle y hará que el navegador siga con el código que sigue después.

- -

Digamos que queremos buscar a través de un arreglo de contactos y números telefónicos y retornar sólo el número que queríamos encontrar. primero, un simple HTML -  un {{htmlelement("input")}} de texto que nos permita ingresar un nombre para buscar, un elemento {{htmlelement("button")}} para enviar la búsqueda, y un elemento {{htmlelement("p")}} para mostrar el resultado:

- -
<label for="search">Search by contact name: </label>
-<input id="search" type="text">
-<button>Search</button>
-
-<p></p>
- -

Ahora en el JavaScript:

- -
var contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
-var para = document.querySelector('p');
-var input = document.querySelector('input');
-var btn = document.querySelector('button');
-
-btn.addEventListener('click', function() {
-  var searchName = input.value;
-  input.value = '';
-  input.focus();
-  for (var i = 0; i < contacts.length; i++) {
-    var splitContact = contacts[i].split(':');
-    if (splitContact[0] === searchName) {
-      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
-      break;
-    } else {
-      para.textContent = 'Contact not found.';
-    }
-  }
-});
- - - -

{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

- -
    -
  1. First of all we have some variable definitions — we have an array of contact information, with each item being a string containing a name and phone number separated by a colon.
    2. -
  2. Next, we attach an event listener to the button (btn), so that when it is pressed, some code is run to perform the search and return the results.
    3. -
  3. We store the value entered into the text input in a variable called searchName, before then emptying the text input and focusing it again, ready for the next search.
    4. -
  4. Now onto the interesting part, the for loop: -
      -
    1. We start the counter at 0, run the loop until the counter is no longer less than contacts.length, and increment i by 1 after each iteration of the loop.
      2. -
    2. Inside the loop we first split the current contact (contacts[i]) at the colon character, and store the resulting two values in an array called splitContact.
      3. -
    3. We then use a conditional statement to test whether splitContact[0] (the contact's name) is equal to the inputted searchName. If it is, we enter a string into the paragraph to report what the contact's number is, and use break to end the loop.
      4. -
    -
    5. -
  5. If the contact name does not match the entered search, the paragraph text is set to "Contact not found.", and the loop continues iterating.
    6. -
- -
-

Note: You can view the full source code on GitHub too (also see it running live).

-
- -

Skipping iterations with continue

- -

The continue statement works in a similar manner to break, but instead of breaking out of the loop entirely, it skips to the next iteration of the loop. Let's look at another example that takes a number as an input, and returns only the numbers that are squares of integers (whole numbers).

- -

The HTML is basically the same as the last example — a simple text input, and a paragraph for output. The JavaScript is mostly the same too, although the loop itself is a bit different:

- -
var num = input.value;
-
-for (var i = 1; i <= num; i++) {
-  var sqRoot = Math.sqrt(i);
-  if (Math.floor(sqRoot) !== sqRoot) {
-    continue;
-  }
-
-  para.textContent += i + ' ';
-}
- -

Here's the output:

- - - -

{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

- -
    -
  1. In this case, the input should be a number (num). The for loop is given a counter starting at 1 (as we are not interested in 0 in this case), an exit condition that says the loop will stop when the counter becomes bigger than the input num, and an iterator that adds 1 to the counter each time.
    2. -
  2. Inside the loop, we find the square root of each number using Math.sqrt(i), then check whether the square root is an integer by testing whether it is the same as itself when it has been rounded down to the nearest integer (this is what Math.floor() does to the number it is passed).
    3. -
  3. If the square root and the rounded down square root do not equal one another (!==), it means that the square root is not an integer, so we are not interested in it. In such a case, we use the continue statement to skip on to the next loop iteration without recording the number anywhere.
    4. -
  4. If the square root IS an integer, we skip past the if block entirely so the continue statement is not executed; instead, we concatenate the current i value plus a space on to the end of the paragraph content.
    5. -
- -
-

Note: You can view the full source code on GitHub too (also see it running live).

-
- -

while and do ... while

- -

for is not the only type of loop available in JavaScript. There are actually many others and, while you don't need to understand all of these now, it is worth having a look at the structure of a couple of others so that you can recognize the same features at work in a slightly different way.

- -

First, let's have a look at the while loop. This loop's syntax looks like so:

- -
initializer
-while (exit-condition) {
-  // code to run
-
-  final-expression
-}
- -

This works in a very similar way to the for loop, except that the initializer variable is set before the loop, and the final-expression is included inside the loop after the code to run — rather than these two items being included inside the parentheses. The exit-condition is included inside the parentheses, which are preceded by the while keyword rather than for.

- -

The same three items are still present, and they are still defined in the same order as they are in the for loop — this makes sense, as you still have to have an initializer defined before you can check whether it has reached the exit-condition; the final-condition is then run after the code inside the loop has run (an iteration has been completed), which will only happen if the exit-condition has still not been reached.

- -

Let's have a look again at our cats list example, but rewritten to use a while loop:

- -
var i = 0;
-
-while (i < cats.length) {
-  if (i === cats.length - 1) {
-    info += 'and ' + cats[i] + '.';
-  } else {
-    info += cats[i] + ', ';
-  }
-
-  i++;
-}
- -
-

Note: This still works just the same as expected — have a look at it running live on GitHub (also view the full source code).

-
- -

The do...while loop is very similar, but provides a variation on the while structure:

- -
initializer
-do {
-  // code to run
-
-  final-expression
-} while (exit-condition)
- -

In this case, the initializer again comes first, before the loop starts. The do keyword directly precedes the curly braces containing the code to run and the final-expression.

- -

The differentiator here is that the exit-condition comes after everything else, wrapped in parentheses and preceded by a while keyword. In a do...while loop, the code inside the curly braces is always run once before the check is made to see if it should be executed again (in while and for, the check comes first, so the code might never be executed).

- -

Let's rewrite our cat listing example again to use a do...while loop:

- -
var i = 0;
-
-do {
-  if (i === cats.length - 1) {
-    info += 'and ' + cats[i] + '.';
-  } else {
-    info += cats[i] + ', ';
-  }
-
-  i++;
-} while (i < cats.length);
- -
-

Note: Again, this works just the same as expected — have a look at it running live on GitHub (also view the full source code).

-
- -
-

Important: With while and do...while — as with all loops — you must make sure that the initializer is iterated so that it eventually reaches the exit condition. If not, the loop will go on forever, and either the browser will force it to stop, or it will crash. This is called an infinite loop.

-
- -

Active learning: Launch countdown!

- -

In this exercise, we want you to print out a simple launch countdown to the output box, from 10 down to Blast off. Specifically, we want you to:

- - - -

If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.

- - - -

{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}

- -

Active learning: Filling in a guest list

- -

In this exercise, we want you to take a list of names stored in an array, and put them into a guest list. But it's not quite that easy — we don't want to let Phil and Lola in because they are greedy and rude, and always eat all the food! We have two lists, one for guests to admit, and one for guests to refuse.

- -

Specifically, we want you to:

- - - -

We've already provided you with:

- - - -

Extra bonus question — after completing the above tasks successfully, you will be left with two lists of names, separated by commas, but they will be untidy — there will be a comma at the end of each one. Can you work out how to write lines that slice the last comma off in each case, and add a full stop to the end? Have a look at the Useful string methods article for help.

- -

If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.

- - - -

{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}

- -

Which loop type should you use?

- -

For basic uses, for, while, and do...while loops are largely interchangeable. They can all be used to solve the same problems, and which one you use will largely depend on your personal preference — which one you find easiest to remember or most intuitive. Let's have a look at them again.

- -

First for:

- -
for (initializer; exit-condition; final-expression) {
-  // code to run
-}
- -

while:

- -
initializer
-while (exit-condition) {
-  // code to run
-
-  final-expression
-}
- -

and finally do...while:

- -
initializer
-do {
-  // code to run
-
-  final-expression
-} while (exit-condition)
- -

We would recommend for, at least to begin with, as it is probably the easiest for remembering everything — the initializer, exit-condition, and final-expression all have to go neatly into the parentheses, so it is easy to see where they are and check that you aren't missing them.

- -
-

Note: There are other loop types/features too, which are useful in advanced/specialized situations and beyond the scope of this article. If you want to go further with your loop learning, read our advanced Loops and iteration guide.

-
- -

Conclusion

- -

This article has revealed to you the basic concepts behind, and different options available when, looping code in JavaScript. You should now be clear on why loops are a good mechanism for dealing with repetitive code, and be raring to use them in your own examples!

- -

If there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

- -

See also

- - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}

- -

In this module

- - -<gdiv></gdiv> diff --git a/files/es/learn/javascript/building_blocks/build_your_own_function/index.html b/files/es/learn/javascript/building_blocks/build_your_own_function/index.html new file mode 100644 index 0000000000..5f9bcc7c8b --- /dev/null +++ b/files/es/learn/javascript/building_blocks/build_your_own_function/index.html @@ -0,0 +1,252 @@ +--- +title: Construye tu propia función +slug: Learn/JavaScript/Building_blocks/Construyendo_tu_propia_funcion +tags: + - Aprender + - Artículo + - Construir + - Funciones + - Guía + - JavaScript + - Principiante + - Tutorial +translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
+ +

Con la mayor parte de la teoría esencial tratada en el artículo anterior, este artículo proporciona experiencia práctica. Aquí obtendrás práctica construyendo tu propia función personalizada. En el camino, también explicaremos algunos detalles útiles sobre cómo tratar las funciones.

+ + + + + + + + + + + + +
Prerequisites:Conocimientos básicos de computación, una comprensión básica de HTML y CSS, JavaScript first steps, Functions — reusable blocks of code.
Objective:Para proporcionar algo de práctica en la construcción de una función personalizada, y explicar algunos detalles asociados más útiles.
+ +

Aprendizaje activo: construyamos una función.

+ +

La función personalizada que vamos a construir se llamará displayMessage(). Mostrará un cuadro de mensaje personalizado en una página web y actuará como un reemplazo personalizado para la función de alert() incorporada de un navegador. Hemos visto esto antes, pero solo refresquemos nuestros recuerdos. Escriba lo siguiente en la consola de JavaScript de su navegador, en la página que desee:

+ +
alert('This is a message');
+ +

La función alert tiene un argumento — el string que se muestra en la alerta. Prueba a variar el string para cambiar el mensaje.

+ +

La función alert es limitada: pueder cambiar el mensaje, pero no puedes cambiar de manera sencilla nada más, como el color, icono o cualquier otra cosa. Construiremos uno que resultará ser más divertido.

+ +
+

Nota: Este ejemplo debería funcionar bien en todos los navegadores modernos, pero el estilo puede parecer un poco divertido en los navegadores un poco más antiguos. Te recomendamos que hagas este ejercicio en un navegador moderno como Firefox, Opera o Chrome.

+
+ +

La función básica

+ +

Para empezar, vamos a poner juntos una función básica.

+ +
+

Nota: Para las convenciones de nombres de las funciones, debes seguir las mismas reglas que convecion de nombres de variables. Esto está bien, ya que puede distinguirlos: los nombres de las funciones aparecen entre paréntesis después de ellos y las variables no.

+
+ +
    +
  1. Comience accediendo al archivo function-start.html y haciendo una copia local. Verás que el HTML es simple  — el body unicamente tiene un botón. También hemos propocionado algunos estilos básicos de CSS para customizar el mensaje y un elemento  {{htmlelement("script")}} vacío para poner nuestro JavaScript dentro.
    2. +
  2. Luego añade lo siguiente dentro del elemento <script>: + 
    function displayMessage() {
+
+}
    + Comenzamos con la palabra clave función, lo que significa que estamos definiendo una función. A esto le sigue el nombre que queremos darle a nuestra función, un conjunto de paréntesis y un conjunto de llaves. Todos los parámetros que queremos darle a nuestra función van dentro de los paréntesis, y el código que se ejecuta cuando llamamos a la función va dentro de las llaves.
    3. +
  3. Finalmente, agregue el siguiente código dentro de las llaves: + 
    let html = document.querySelector('html');
+
+let panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+
+let msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+let closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+
+closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}
    +
    4. +
+ +

Esto es un montón de código por el que pasar, así que lo guiaremos paso a paso.

+ +

La primera línea usa un función DOM API llamada {{domxref("document.querySelector()")}} para seleccionar el elemento {{htmlelement("html")}} y guardar una referencia a él en una variable llamada html, por lo que podemos hacer cosas para más adelante:

+ +
let html = document.querySelector('html');
+ +

La siguiente sección usa otra función del DOM API llamada {{domxref("Document.createElement()")}} para crear un elemento {{htmlelement("div")}} y guardar una referencia a él en una variable llamada panel. Este elemento será el contenedor exterior de nuestro cuadro de mensaje.

+ +

Entonces usamos otra función del API DOM llamada {{domxref("Element.setAttribute()")}} para configurar un atributo a class en nuestro panel con un valor de msgBox. Esto es para facilitar el estilo del elemento. — Si echas un vistazo al CSS en la página, verás que estamos utilizando un selector de clases.msgBox para dar estilo al al contenedor del mensaje.

+ +

Finalmente, llamamos a una función del DOM llamada {{domxref("Node.appendChild()")}} en la variable html que hemos guardado anteriormente, que anida un elemento dentro del otro como hijo de él. Hemos especificado el panel <div> como el hijo que queremos añadir dentro del elemento <html>. Debemos hacer esto ya que el elemento que creamos no aparecerá en la página por sí solo — tenemos que especificar donde ponerlo.

+ +
let panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+ +

Las siguientes dos secciones hacen uso de las mismas funciones createElement() y appendChild() que ya vimos para crear dos nuevos elementos — un {{htmlelement("p")}} y un {{htmlelement("button")}} — e insertarlo en la página como un hijo del panel <div>. Usamos su propiedad  {{domxref("Node.textContent")}} — que representa el contenido de texto de un elemento: para insertar un mensaje dentro del párrafo y una 'x' dentro del botón. Este botón será lo que necesita hacer clic / activar cuando el usuario quiera cerrar el cuadro de mensaje.

+ +
let msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+let closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+ +

Finalmente, usamos el manejador de evento {{domxref("GlobalEventHandlers.onclick")}} para hacerlo de modo que cuando se haga clic en el botón, se ejecute algún código para eliminar todo el panel de la página, para cerrar el cuadro de mensaje.

+ +

Brevemente, el handler onclick es una propiedad disponible en el botón (o, de hecho, en cualquier elemento de la página) que se puede configurar en una función para especificar qué código ejecutar cuando se hace clic en el botón. Aprenderás mucho más sobre esto en nuestro artículo de eventos posteriores. Estamos haciendo el handler onclick igual que una función anónima, que contiene el código para ejecutar cuando se ha hecho click en el botón. La línea dentro de la función usa la función del DOM API {{domxref("Node.removeChild()")}}  para especificar que queremos eliminar un elemento secundario específico del elemento HTML— en este caso el panel <div>.

+ +
closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}
+ +

Básicamente, todo este bloque de código está generando un bloque de HTML que se ve así, y lo está insertando en la página:

+ +
<div class="msgBox">
+  <p>This is a message box</p>
+  <button>x</button>
+</div>
+ +

Fue un montón de código con el que trabajar: ¡no te preocupes demasiado si no recuerdas exactamente cómo funciona todo ahora! La parte principal en la que queremos centrarnos aquí es la estructura y el uso de la función, pero queríamos mostrar algo interesante para este ejemplo.

+ +

Llamando a la función

+ +

Ahora tienes la definición de tu función escrita en tu elemento <script> bien, pero no hará nada tal como está.

+ +
    +
  1. Intente incluir la siguiente línea debajo de su función para llamarla: + 
    displayMessage();
    + Esta línea invoca la función, haciéndola correr inmediatamente. Cuando guarde el código y lo vuelva a cargar en el navegador, verá que el pequeño cuadro de mensaje aparece inmediatamente, solo una vez. Después de todo, solo lo llamamos una vez.
    2. +
  2. +

    Ahora abra las herramientas de desarrollo de su navegador en la página de ejemplo, vaya a la consola de JavaScript y escriba la línea nuevamente allí, ¡verá que aparece nuevamente! Así que esto es divertido: ahora tenemos una función reutilizable que podemos llamar en cualquier momento que queramos.

    + +

    Pero probablemente queremos que aparezca en respuesta a las acciones del usuario y del sistema. En una aplicación real, tal cuadro de mensaje probablemente se llamará en respuesta a la disponibilidad de nuevos datos, a un error, al usuario que intenta eliminar su perfil ("¿está seguro de esto?"), O al usuario que agrega un nuevo contacto y la operación completando con éxito ... etc.

    + +

    En esta demostración, obtendremos el cuadro de mensaje que aparecerá cuando el usuario haga clic en el botón.

    +
    3. +
  3. Elimina la línea anterior que agregaste.
    4. +
  4. A continuación, seleccionaremos el botón y guardaremos una referencia a él en una variable. Agregue la siguiente línea a su código, encima de la definición de la función: + 
    let btn = document.querySelector('button');
    +
    5. +
  5. Finalmente, agregue la siguiente línea debajo de la anterior: + 
    btn.onclick = displayMessage;
    + De una forma similar que nuestra línea dentro de la función closeBtn.onclick..., aquí estamos llamando a algún código en respuesta a un botón al hacer clic. Pero en este caso, en lugar de llamar a una función anónima que contiene algún código, estamos llamando directamente a nuestro nombre de función.
    6. +
  6. Intente guardar y actualizar la página: ahora debería ver aparecer el cuadro de mensaje cuando hace clic en el botón.
    7. +
+ +

Quizás te estés preguntando por qué no hemos incluido los paréntesis después del nombre de la función. Esto se debe a que no queremos llamar a la función inmediatamente, solo después de hacer clic en el botón. Si intentas cambiar la línea a

+ +
btn.onclick = displayMessage();
+ +

y al guardar y volver a cargar, verás que aparece el cuadro de mensaje sin hacer clic en el botón. Los paréntesis en este contexto a veces se denominan "operador de invocación de función". Solo los utiliza cuando desea ejecutar la función inmediatamente en el ámbito actual. Del mismo modo, el código dentro de la función anónima no se ejecuta inmediatamente, ya que está dentro del alcance de la función.

+ +

Si has intentado el último experimento, asegúrate de deshacer el último cambio antes de continuar.

+ +

Mejora de la función con parámetros.

+ +

Tal como está, la función aún no es muy útil, no queremos mostrar el mismo mensaje predeterminado cada vez. Mejoremos nuestra función agregando algunos parámetros, permitiéndonos llamarla con algunas opciones diferentes.

+ +
    +
  1. En primer lugar, actualice la primera línea de la función: + 
    function displayMessage() {
    + to this: + + 
    function displayMessage(msgText, msgType) {
    + Ahora, cuando llamamos a la función, podemos proporcionar dos valores variables dentro de los paréntesis para especificar el mensaje que se mostrará en el cuadro de mensaje y el tipo de mensaje que es.
    2. +
  2. Para utilizar el primer parámetro, actualiza la siguiente línea dentro de su función: + 
    msg.textContent = 'This is a message box';
    + to + + 
    msg.textContent = msgText;
    +
    3. +
  3. Por último, pero no menos importante, ahora necesita actualizar su llamada de función para incluir un texto de mensaje actualizado. Cambia la siguiente línea: + 
    btn.onclick = displayMessage;
    + to this block: + + 
    btn.onclick = function() {
+  displayMessage('Woo, this is a different message!');
+};
    + Si queremos especificar parámetros dentro de paréntesis para la función a la que estamos llamando, no podemos llamarla directamente, necesitamos colocarla dentro de una función anónima para que no esté en el ámbito inmediato y, por lo tanto, no se llame de inmediato. Ahora no se llamará hasta que se haga clic en el botón.
    4. +
  4. Vuelva a cargar e intenta el código nuevamente y verás que aún funciona bien, ¡excepto que ahora también puede variar el mensaje dentro del parámetro para obtener diferentes mensajes mostrados en el cuadro!
    5. +
+ +

Un parámetro más complejo.

+ +

En el siguiente parámetro. Este va a implicar un poco más de trabajo: lo configuraremos de modo que, dependiendo de la configuración del parámetro msgType, la función mostrará un icono diferente y un color de fondo diferente.

+ +
    +
  1. En primer lugar, descargue los iconos necesarios para este ejercicio (warning y chat) de GitHub. Guárdalos en una nueva carpeta llamada icons en la misma localización que tu HTML. + +
    Nota: los iconos warning y chat que se encuentran en iconfinder.com, han sido diseñados por Nazarrudin Ansyari. Gracias!
    +
    2. +
  2. A continuación, encuentra el CSS dentro de tu archivo HTML. Haremos algunos cambios para dar paso a los iconos. Primero, actualiza el ancho de .msgBox desde: + 
    width: 200px;
    + to + + 
    width: 242px;
    +
    3. +
  3. Luego, añade las siguientes líneas dentro de la regla.msgBox p { ... }: + 
    padding-left: 82px;
+background-position: 25px center;
+background-repeat: no-repeat;
    +
    4. +
  4. Ahora necesitamos añadir código a la función displayMessage() para manejar la visualización de los iconos. Agrega el siguiente bloque justo encima de la llave de cierre (}) de tu función : + 
    if (msgType === 'warning') {
+  msg.style.backgroundImage = 'url(icons/warning.png)';
+  panel.style.backgroundColor = 'red';
+} else if (msgType === 'chat') {
+  msg.style.backgroundImage = 'url(icons/chat.png)';
+  panel.style.backgroundColor = 'aqua';
+} else {
+  msg.style.paddingLeft = '20px';
+}
    +
    5. +
  5. Aquí, si el parámetro msgType se establece como 'warning', se muestra el icono de advertencia y el color de fondo del panel se establece en rojo. Si se establece en 'chat', se muestra el icono de chat y el color de fondo del panel se establece en azul aguamarina. Si el parámetro msgType no está configurado en absoluto (o en algo diferente), entonces la parte else { ... } del código entra en juego, y al párrafo simplemente se le da un relleno predeterminado y ningún icono, sin el conjunto de colores del panel de fondo ya sea. Esto proporciona un estado predeterminado si no se proporciona ningún parámetro msgType , lo que significa que es un parámetro opcional.
    6. +
  6. Vamos a probar nuestra función actualizada , prueba a actualizar la llamada a displayMessage() con esto: + 
    displayMessage('Woo, this is a different message!');
    + to one of these: + + 
    displayMessage('Your inbox is almost full — delete some mails', 'warning');
+displayMessage('Brian: Hi there, how are you today?','chat');
    + Puedes ver cuán útil se está volviendo nuestra (ahora no tan) poca función.
    7. +
+ +
+

Nota: Si estas teniendo problemas con el ejemplo, sientente libre para coger el ejemplo para trabajar con él, finished version on GitHub (see it running live también), o pídenos ayuda.

+
+ +

Conclusión

+ +

¡Felicidades por llegar al final! Este artículo lo llevó a través de todo el proceso de creación de una función personalizada y práctica, que con un poco más de trabajo podría trasplantarse en un proyecto real. En el siguiente artículo resumiremos las funciones explicando otro concepto esencial relacionado: valores de retorno.

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/javascript/building_blocks/construyendo_tu_propia_funcion/index.html b/files/es/learn/javascript/building_blocks/construyendo_tu_propia_funcion/index.html deleted file mode 100644 index 5f9bcc7c8b..0000000000 --- a/files/es/learn/javascript/building_blocks/construyendo_tu_propia_funcion/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: Construye tu propia función -slug: Learn/JavaScript/Building_blocks/Construyendo_tu_propia_funcion -tags: - - Aprender - - Artículo - - Construir - - Funciones - - Guía - - JavaScript - - Principiante - - Tutorial -translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
- -

Con la mayor parte de la teoría esencial tratada en el artículo anterior, este artículo proporciona experiencia práctica. Aquí obtendrás práctica construyendo tu propia función personalizada. En el camino, también explicaremos algunos detalles útiles sobre cómo tratar las funciones.

- - - - - - - - - - - - -
Prerequisites:Conocimientos básicos de computación, una comprensión básica de HTML y CSS, JavaScript first steps, Functions — reusable blocks of code.
Objective:Para proporcionar algo de práctica en la construcción de una función personalizada, y explicar algunos detalles asociados más útiles.
- -

Aprendizaje activo: construyamos una función.

- -

La función personalizada que vamos a construir se llamará displayMessage(). Mostrará un cuadro de mensaje personalizado en una página web y actuará como un reemplazo personalizado para la función de alert() incorporada de un navegador. Hemos visto esto antes, pero solo refresquemos nuestros recuerdos. Escriba lo siguiente en la consola de JavaScript de su navegador, en la página que desee:

- -
alert('This is a message');
- -

La función alert tiene un argumento — el string que se muestra en la alerta. Prueba a variar el string para cambiar el mensaje.

- -

La función alert es limitada: pueder cambiar el mensaje, pero no puedes cambiar de manera sencilla nada más, como el color, icono o cualquier otra cosa. Construiremos uno que resultará ser más divertido.

- -
-

Nota: Este ejemplo debería funcionar bien en todos los navegadores modernos, pero el estilo puede parecer un poco divertido en los navegadores un poco más antiguos. Te recomendamos que hagas este ejercicio en un navegador moderno como Firefox, Opera o Chrome.

-
- -

La función básica

- -

Para empezar, vamos a poner juntos una función básica.

- -
-

Nota: Para las convenciones de nombres de las funciones, debes seguir las mismas reglas que convecion de nombres de variables. Esto está bien, ya que puede distinguirlos: los nombres de las funciones aparecen entre paréntesis después de ellos y las variables no.

-
- -
    -
  1. Comience accediendo al archivo function-start.html y haciendo una copia local. Verás que el HTML es simple  — el body unicamente tiene un botón. También hemos propocionado algunos estilos básicos de CSS para customizar el mensaje y un elemento  {{htmlelement("script")}} vacío para poner nuestro JavaScript dentro.
    2. -
  2. Luego añade lo siguiente dentro del elemento <script>: - 
    function displayMessage() {
-
-}
    - Comenzamos con la palabra clave función, lo que significa que estamos definiendo una función. A esto le sigue el nombre que queremos darle a nuestra función, un conjunto de paréntesis y un conjunto de llaves. Todos los parámetros que queremos darle a nuestra función van dentro de los paréntesis, y el código que se ejecuta cuando llamamos a la función va dentro de las llaves.
    3. -
  3. Finalmente, agregue el siguiente código dentro de las llaves: - 
    let html = document.querySelector('html');
-
-let panel = document.createElement('div');
-panel.setAttribute('class', 'msgBox');
-html.appendChild(panel);
-
-let msg = document.createElement('p');
-msg.textContent = 'This is a message box';
-panel.appendChild(msg);
-
-let closeBtn = document.createElement('button');
-closeBtn.textContent = 'x';
-panel.appendChild(closeBtn);
-
-closeBtn.onclick = function() {
-  panel.parentNode.removeChild(panel);
-}
    -
    4. -
- -

Esto es un montón de código por el que pasar, así que lo guiaremos paso a paso.

- -

La primera línea usa un función DOM API llamada {{domxref("document.querySelector()")}} para seleccionar el elemento {{htmlelement("html")}} y guardar una referencia a él en una variable llamada html, por lo que podemos hacer cosas para más adelante:

- -
let html = document.querySelector('html');
- -

La siguiente sección usa otra función del DOM API llamada {{domxref("Document.createElement()")}} para crear un elemento {{htmlelement("div")}} y guardar una referencia a él en una variable llamada panel. Este elemento será el contenedor exterior de nuestro cuadro de mensaje.

- -

Entonces usamos otra función del API DOM llamada {{domxref("Element.setAttribute()")}} para configurar un atributo a class en nuestro panel con un valor de msgBox. Esto es para facilitar el estilo del elemento. — Si echas un vistazo al CSS en la página, verás que estamos utilizando un selector de clases.msgBox para dar estilo al al contenedor del mensaje.

- -

Finalmente, llamamos a una función del DOM llamada {{domxref("Node.appendChild()")}} en la variable html que hemos guardado anteriormente, que anida un elemento dentro del otro como hijo de él. Hemos especificado el panel <div> como el hijo que queremos añadir dentro del elemento <html>. Debemos hacer esto ya que el elemento que creamos no aparecerá en la página por sí solo — tenemos que especificar donde ponerlo.

- -
let panel = document.createElement('div');
-panel.setAttribute('class', 'msgBox');
-html.appendChild(panel);
- -

Las siguientes dos secciones hacen uso de las mismas funciones createElement() y appendChild() que ya vimos para crear dos nuevos elementos — un {{htmlelement("p")}} y un {{htmlelement("button")}} — e insertarlo en la página como un hijo del panel <div>. Usamos su propiedad  {{domxref("Node.textContent")}} — que representa el contenido de texto de un elemento: para insertar un mensaje dentro del párrafo y una 'x' dentro del botón. Este botón será lo que necesita hacer clic / activar cuando el usuario quiera cerrar el cuadro de mensaje.

- -
let msg = document.createElement('p');
-msg.textContent = 'This is a message box';
-panel.appendChild(msg);
-
-let closeBtn = document.createElement('button');
-closeBtn.textContent = 'x';
-panel.appendChild(closeBtn);
- -

Finalmente, usamos el manejador de evento {{domxref("GlobalEventHandlers.onclick")}} para hacerlo de modo que cuando se haga clic en el botón, se ejecute algún código para eliminar todo el panel de la página, para cerrar el cuadro de mensaje.

- -

Brevemente, el handler onclick es una propiedad disponible en el botón (o, de hecho, en cualquier elemento de la página) que se puede configurar en una función para especificar qué código ejecutar cuando se hace clic en el botón. Aprenderás mucho más sobre esto en nuestro artículo de eventos posteriores. Estamos haciendo el handler onclick igual que una función anónima, que contiene el código para ejecutar cuando se ha hecho click en el botón. La línea dentro de la función usa la función del DOM API {{domxref("Node.removeChild()")}}  para especificar que queremos eliminar un elemento secundario específico del elemento HTML— en este caso el panel <div>.

- -
closeBtn.onclick = function() {
-  panel.parentNode.removeChild(panel);
-}
- -

Básicamente, todo este bloque de código está generando un bloque de HTML que se ve así, y lo está insertando en la página:

- -
<div class="msgBox">
-  <p>This is a message box</p>
-  <button>x</button>
-</div>
- -

Fue un montón de código con el que trabajar: ¡no te preocupes demasiado si no recuerdas exactamente cómo funciona todo ahora! La parte principal en la que queremos centrarnos aquí es la estructura y el uso de la función, pero queríamos mostrar algo interesante para este ejemplo.

- -

Llamando a la función

- -

Ahora tienes la definición de tu función escrita en tu elemento <script> bien, pero no hará nada tal como está.

- -
    -
  1. Intente incluir la siguiente línea debajo de su función para llamarla: - 
    displayMessage();
    - Esta línea invoca la función, haciéndola correr inmediatamente. Cuando guarde el código y lo vuelva a cargar en el navegador, verá que el pequeño cuadro de mensaje aparece inmediatamente, solo una vez. Después de todo, solo lo llamamos una vez.
    2. -
  2. -

    Ahora abra las herramientas de desarrollo de su navegador en la página de ejemplo, vaya a la consola de JavaScript y escriba la línea nuevamente allí, ¡verá que aparece nuevamente! Así que esto es divertido: ahora tenemos una función reutilizable que podemos llamar en cualquier momento que queramos.

    - -

    Pero probablemente queremos que aparezca en respuesta a las acciones del usuario y del sistema. En una aplicación real, tal cuadro de mensaje probablemente se llamará en respuesta a la disponibilidad de nuevos datos, a un error, al usuario que intenta eliminar su perfil ("¿está seguro de esto?"), O al usuario que agrega un nuevo contacto y la operación completando con éxito ... etc.

    - -

    En esta demostración, obtendremos el cuadro de mensaje que aparecerá cuando el usuario haga clic en el botón.

    -
    3. -
  3. Elimina la línea anterior que agregaste.
    4. -
  4. A continuación, seleccionaremos el botón y guardaremos una referencia a él en una variable. Agregue la siguiente línea a su código, encima de la definición de la función: - 
    let btn = document.querySelector('button');
    -
    5. -
  5. Finalmente, agregue la siguiente línea debajo de la anterior: - 
    btn.onclick = displayMessage;
    - De una forma similar que nuestra línea dentro de la función closeBtn.onclick..., aquí estamos llamando a algún código en respuesta a un botón al hacer clic. Pero en este caso, en lugar de llamar a una función anónima que contiene algún código, estamos llamando directamente a nuestro nombre de función.
    6. -
  6. Intente guardar y actualizar la página: ahora debería ver aparecer el cuadro de mensaje cuando hace clic en el botón.
    7. -
- -

Quizás te estés preguntando por qué no hemos incluido los paréntesis después del nombre de la función. Esto se debe a que no queremos llamar a la función inmediatamente, solo después de hacer clic en el botón. Si intentas cambiar la línea a

- -
btn.onclick = displayMessage();
- -

y al guardar y volver a cargar, verás que aparece el cuadro de mensaje sin hacer clic en el botón. Los paréntesis en este contexto a veces se denominan "operador de invocación de función". Solo los utiliza cuando desea ejecutar la función inmediatamente en el ámbito actual. Del mismo modo, el código dentro de la función anónima no se ejecuta inmediatamente, ya que está dentro del alcance de la función.

- -

Si has intentado el último experimento, asegúrate de deshacer el último cambio antes de continuar.

- -

Mejora de la función con parámetros.

- -

Tal como está, la función aún no es muy útil, no queremos mostrar el mismo mensaje predeterminado cada vez. Mejoremos nuestra función agregando algunos parámetros, permitiéndonos llamarla con algunas opciones diferentes.

- -
    -
  1. En primer lugar, actualice la primera línea de la función: - 
    function displayMessage() {
    - to this: - - 
    function displayMessage(msgText, msgType) {
    - Ahora, cuando llamamos a la función, podemos proporcionar dos valores variables dentro de los paréntesis para especificar el mensaje que se mostrará en el cuadro de mensaje y el tipo de mensaje que es.
    2. -
  2. Para utilizar el primer parámetro, actualiza la siguiente línea dentro de su función: - 
    msg.textContent = 'This is a message box';
    - to - - 
    msg.textContent = msgText;
    -
    3. -
  3. Por último, pero no menos importante, ahora necesita actualizar su llamada de función para incluir un texto de mensaje actualizado. Cambia la siguiente línea: - 
    btn.onclick = displayMessage;
    - to this block: - - 
    btn.onclick = function() {
-  displayMessage('Woo, this is a different message!');
-};
    - Si queremos especificar parámetros dentro de paréntesis para la función a la que estamos llamando, no podemos llamarla directamente, necesitamos colocarla dentro de una función anónima para que no esté en el ámbito inmediato y, por lo tanto, no se llame de inmediato. Ahora no se llamará hasta que se haga clic en el botón.
    4. -
  4. Vuelva a cargar e intenta el código nuevamente y verás que aún funciona bien, ¡excepto que ahora también puede variar el mensaje dentro del parámetro para obtener diferentes mensajes mostrados en el cuadro!
    5. -
- -

Un parámetro más complejo.

- -

En el siguiente parámetro. Este va a implicar un poco más de trabajo: lo configuraremos de modo que, dependiendo de la configuración del parámetro msgType, la función mostrará un icono diferente y un color de fondo diferente.

- -
    -
  1. En primer lugar, descargue los iconos necesarios para este ejercicio (warning y chat) de GitHub. Guárdalos en una nueva carpeta llamada icons en la misma localización que tu HTML. - -
    Nota: los iconos warning y chat que se encuentran en iconfinder.com, han sido diseñados por Nazarrudin Ansyari. Gracias!
    -
    2. -
  2. A continuación, encuentra el CSS dentro de tu archivo HTML. Haremos algunos cambios para dar paso a los iconos. Primero, actualiza el ancho de .msgBox desde: - 
    width: 200px;
    - to - - 
    width: 242px;
    -
    3. -
  3. Luego, añade las siguientes líneas dentro de la regla.msgBox p { ... }: - 
    padding-left: 82px;
-background-position: 25px center;
-background-repeat: no-repeat;
    -
    4. -
  4. Ahora necesitamos añadir código a la función displayMessage() para manejar la visualización de los iconos. Agrega el siguiente bloque justo encima de la llave de cierre (}) de tu función : - 
    if (msgType === 'warning') {
-  msg.style.backgroundImage = 'url(icons/warning.png)';
-  panel.style.backgroundColor = 'red';
-} else if (msgType === 'chat') {
-  msg.style.backgroundImage = 'url(icons/chat.png)';
-  panel.style.backgroundColor = 'aqua';
-} else {
-  msg.style.paddingLeft = '20px';
-}
    -
    5. -
  5. Aquí, si el parámetro msgType se establece como 'warning', se muestra el icono de advertencia y el color de fondo del panel se establece en rojo. Si se establece en 'chat', se muestra el icono de chat y el color de fondo del panel se establece en azul aguamarina. Si el parámetro msgType no está configurado en absoluto (o en algo diferente), entonces la parte else { ... } del código entra en juego, y al párrafo simplemente se le da un relleno predeterminado y ningún icono, sin el conjunto de colores del panel de fondo ya sea. Esto proporciona un estado predeterminado si no se proporciona ningún parámetro msgType , lo que significa que es un parámetro opcional.
    6. -
  6. Vamos a probar nuestra función actualizada , prueba a actualizar la llamada a displayMessage() con esto: - 
    displayMessage('Woo, this is a different message!');
    - to one of these: - - 
    displayMessage('Your inbox is almost full — delete some mails', 'warning');
-displayMessage('Brian: Hi there, how are you today?','chat');
    - Puedes ver cuán útil se está volviendo nuestra (ahora no tan) poca función.
    7. -
- -
-

Nota: Si estas teniendo problemas con el ejemplo, sientente libre para coger el ejemplo para trabajar con él, finished version on GitHub (see it running live también), o pídenos ayuda.

-
- -

Conclusión

- -

¡Felicidades por llegar al final! Este artículo lo llevó a través de todo el proceso de creación de una función personalizada y práctica, que con un poco más de trabajo podría trasplantarse en un proyecto real. En el siguiente artículo resumiremos las funciones explicando otro concepto esencial relacionado: valores de retorno.

- - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}

- -

En este módulo

- - diff --git a/files/es/learn/javascript/building_blocks/eventos/index.html b/files/es/learn/javascript/building_blocks/eventos/index.html deleted file mode 100644 index 7bdb81768a..0000000000 --- a/files/es/learn/javascript/building_blocks/eventos/index.html +++ /dev/null @@ -1,578 +0,0 @@ ---- -title: Introducción a eventos -slug: Learn/JavaScript/Building_blocks/Eventos -translation_of: Learn/JavaScript/Building_blocks/Events ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
- -

Los eventos son acciones u ocurrencias que suceden en el sistema que está programando y que el sistema le informa para que pueda responder de alguna manera si lo desea. Por ejemplo, si el usuario hace clic en un botón en una página web, es posible que desee responder a esa acción mostrando un cuadro de información. En este artículo, discutiremos algunos conceptos importantes que rodean los eventos y veremos cómo funcionan en los navegadores. Este no será un estudio exhaustivo; solo lo que necesitas saber en esta etapa.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, entendimiento básico de HTML y CSS, Primeros pasos con JavaScript.
Objetivo:Comprender la teoría fundamental de los eventos, cómo funcionan en los navegadores y cómo los eventos pueden diferir en distintos entornos de programación.
- -

Una serie de eventos afortunados

- -

Como se mencionó anteriormente, los eventos son acciones u ocurrencias que suceden en el sistema que está programando — el sistema disparará una señal de algún tipo cuando un evento ocurra y también proporcionará un mecanismo por el cual se puede tomar algún tipo de acción automáticamente (p.e., ejecutando algún código) cuando se produce el evento. Por ejemplo, en un aeropuerto cuando la pista está despejada para que despegue un avión, se comunica una señal al piloto y, como resultado, comienzan a pilotar el avión.

- -

- -

En el caso de la Web, los eventos se desencadenan dentro de la ventana del navegador y tienden a estar unidos a un elemento específico que reside en ella — podría ser un solo elemento, un conjunto de elementos, el documento HTML cargado en la pestaña actual o toda la ventana del navegador. Hay muchos tipos diferentes de eventos que pueden ocurrir, por ejemplo:

- - - -

Se deducirá de esto (y echar un vistazo a MDN Referencia de eventos) que hay muchos eventos a los que se puede responder.

- -

Cada evento disponible tiene un controlador de eventos, que es un bloque de código (generalmente una función JavaScript definida por el usuario) que se ejecutará cuando se active el evento. Cuando dicho bloque de código se define para ejecutarse en respuesta a un disparo de evento, decimos que estamos registrando un controlador de eventos. Tenga en cuenta que los controladores de eventos a veces se llaman oyentes de eventos — son bastante intercambiables para nuestros propósitos, aunque estrictamente hablando, trabajan juntos. El oyente escucha si ocurre el evento y el controlador es el código que se ejecuta en respuesta a que ocurra.

- -
-

Nota: Es útil tener en cuenta que los eventos web no son parte del lenguaje central de JavaScript: se definen como parte de las API integradas en el navegador.

-
- -

Un ejemplo simple

- -

Veamos un ejemplo simple para explicar lo que queremos decir aquí. Ya has visto eventos y controladores de eventos en muchos de los ejemplos de este curso, pero vamos a recapitular solo para consolidar nuestro conocimiento. En el siguiente ejemplo, tenemos un solo {{htmlelement ("button")}}, que cuando se presiona, hará que el fondo cambie a un color aleatorio:

- -
<button>Cambiar color</button>
- - - -

El JavaScript se ve así:

- -
const btn = document.querySelector('button');
-
-function random(number) {
-  return Math.floor(Math.random() * (number+1));
-}
-
-btn.onclick = function() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
- -

En este código, almacenamos una referencia al botón dentro de una variable llamada btn, usando la función {{domxref ("Document.querySelector ()")}}. También definimos una función que devuelve un número aleatorio. La tercera parte del código es el controlador de eventos. La variable btn apunta a un elemento <button>, y este tipo de objeto tiene una serie de eventos que pueden activarse y, por lo tanto, los controladores de eventos están disponibles. Estamos escuchando el disparo del evento "click", estableciendo la propiedad del controlador de eventos onclick para que sea igual a una función anónima que contiene código que generó un color RGB aleatorio y establece el <body> color de fondo igual a este.

- -

Este código ahora se ejecutará cada vez que se active el evento "click" en el elemento <button>, es decir, cada vez que un usuario haga clic en él.

- -

El resultado de ejemplo es el siguiente:

- -

{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}

- -

No son solo páginas web

- -

Otra cosa que vale la pena mencionar en este punto es que los eventos no son particulares de JavaScript — la mayoría de los lenguajes de programación tienen algún tipo de modelo de eventos, y la forma en que funciona a menudo diferirá de la forma en que funciona en JavaScript. De hecho, el modelo de eventos en JavaScript para páginas web difiere del modelo de eventos para JavaScript, ya que se utiliza en otros entornos.

- -

Por ejemplo, Node.js es un entorno en tiempo de ejecución de JavaScript muy popular que permite a los desarrolladores usar JavaScript para crear aplicaciones de red y del lado del servidor. El modelo de eventos de Node.js se basa en que los oyentes (listeners) escuchen eventos y los emisores (emitters) emitan eventos periódicamente — no suena tan diferentes, pero el código es bastante diferente, haciendo uso de funciones como on() para registrar un oyente de eventos, y once() para registrar un oyente de eventos que anula el registro después de que se haya ejecutado una vez. The documentos de eventos de conexión HTTP proporcionan un buen ejemplo de uso.

- -

Como otro ejemplo, ahora también puede usar JavaScript para crear complementos de navegadores — mejoras de funcionalidad del navegador — utilizando una tecnología llamada WebExtensions. El modelo de eventos es similar al modelo de eventos web, pero un poco diferente — las propiedades de los oyentes de eventos se escriben en camel-case (ej. onMessage en lugar de onmessage), y deben combinarse con la función addListener. Consulte la página runtime.onMessage para ver un ejemplo.

- -

No necesita comprender nada sobre otros entornos en esta etapa de su aprendizaje; solo queríamos dejar en claro que los eventos pueden diferir en diferentes entornos de programación.

- -

Diferentes formas de uso de eventos

- -

Hay muchas maneras distintas en las que puedes agregar event listeners a los sitios web, que se ejecutara cuando el evento asociado se dispare. En esta sección, revisaremos los diferentes mecanismos y discutiremos cuales deberias usar..

- -

Propiedades de manejadores de eventos

- -

Estas son las propiedades que existen, que contienen codigo de manejadores de eventos(Event Handler)  que vemos frecuentemente durante el curso.. Volviendo al ejemplo de arriba:

- -
var btn = document.querySelector('button');
-
-btn.onclick = function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
- -

La propiedad onclick es la propiedad del manejador de eventos que está siendo usada en esta situación. Es escencialmente una propiedad como cualquier otra disponible en el botón (por ejemplo: btn.textContent, or btn.style), pero es de un tipo especial — cuando lo configura para ser igual a algún código, ese código se ejecutará cuando el evento se dispare en el botón.

- -

You could also set the handler property to be equal to a named function name (like we saw in Build your own function). The following would work just the same:

- -
var btn = document.querySelector('button');
-
-function bgChange() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
-
-btn.onclick = bgChange;
- -

There are many different event handler properties available. Let's do an experiment.

- -

First of all, make a local copy of random-color-eventhandlerproperty.html, and open it in your browser. It's just a copy of the simple random color example we've been playing with already in this article. Now try changing btn.onclick to the following different values in turn, and observing the results in the example:

- - - -

Some events are very general and available nearly anywhere (for example an onclick handler can be registered on nearly any element), whereas some are more specific and only useful in certain situations (for example it makes sense to use onplay only on specific elements, such as {{htmlelement("video")}}).

- -

Inline event handlers — don't use these

- -

You might also see a pattern like this in your code:

- -
<button onclick="bgChange()">Press me</button>
-
- -
function bgChange() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
- -
-

Note: You can find the full source code for this example on GitHub (also see it running live).

-
- -

The earliest method of registering event handlers found on the Web involved event handler HTML attributes (aka inline event handlers) like the one shown above — the attribute value is literally the JavaScript code you want to run when the event occurs. The above example invokes a function defined inside a {{htmlelement("script")}} element on the same page, but you could also insert JavaScript directly inside the attribute, for example:

- -
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
- -

You'll find HTML attribute equivalents for many of the event handler properties; however, you shouldn't use these — they are considered bad practice. It might seem easy to use an event handler attribute if you are just doing something really quick, but they very quickly become unmanageable and inefficient.

- -

For a start, it is not a good idea to mix up your HTML and your JavaScript, as it becomes hard to parse — keeping your JavaScript all in one place is better; if it is in a separate file you can apply it to multiple HTML documents.

- -

Even in a single file, inline event handlers are not a good idea. One button is OK, but what if you had 100 buttons? You'd have to add 100 attributes to the file; it would very quickly turn into a maintenance nightmare. With JavaScript, you could easily add an event handler function to all the buttons on the page no matter how many there were, using something like this:

- -
var buttons = document.querySelectorAll('button');
-
-for (var i = 0; i < buttons.length; i++) {
-  buttons[i].onclick = bgChange;
-}
- -

Note that another option here would be to use the forEach() built-in method available on all Array objects:

- -
buttons.forEach(function(button) {
-  button.onclick = bgChange;
-});
- -
-

Note: Separating your programming logic from your content also makes your site more friendly to search engines.

-
- -

addEventListener() and removeEventListener()

- -

The newest type of event mechanism is defined in the Document Object Model (DOM) Level 2 Events Specification, which provides browsers with a new function — addEventListener(). This functions in a similar way to the event handler properties, but the syntax is obviously different. We could rewrite our random color example to look like this:

- -
var btn = document.querySelector('button');
-
-function bgChange() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
-
-btn.addEventListener('click', bgChange);
- -
-

Note: You can find the full source code for this example on GitHub (also see it running live).

-
- -

Inside the addEventListener() function, we specify two parameters — the name of the event we want to register this handler for, and the code that comprises the handler function we want to run in response to it. Note that it is perfectly appropriate to put all the code inside the addEventListener() function, in an anonymous function, like this:

- -
btn.addEventListener('click', function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-});
- -

This mechanism has some advantages over the older mechanisms discussed earlier. For a start, there is a counterpart function, removeEventListener(), which removes a previously added listener. For example, this would remove the listener set in the first code block in this section:

- -
btn.removeEventListener('click', bgChange);
- -

This isn't significant for simple, small programs, but for larger, more complex programs it can improve efficiency to clean up old unused event handlers. Plus, for example, this allows you to have the same button performing different actions in different circumstances — all you've got to do is add/remove event handlers as appropriate.

- -

Second, you can also register multiple handlers for the same listener. The following two handlers would not be applied:

- -
myElement.onclick = functionA;
-myElement.onclick = functionB;
- -

As the second line would overwrite the value of onclick set by the first. This would work, however:

- -
myElement.addEventListener('click', functionA);
-myElement.addEventListener('click', functionB);
- -

Both functions would now run when the element is clicked.

- -

In addition, there are a number of other powerful features and options available with this event mechanism. These are a little out of scope for this article, but if you want to read up on them, have a look at the addEventListener() and removeEventListener() reference pages.

- -

What mechanism should I use?

- -

Of the three mechanisms, you definitely shouldn't use the HTML event handler attributes — these are outdated, and bad practice, as mentioned above.

- -

The other two are relatively interchangeable, at least for simple uses:

- - - -

The main advantages of the third mechanism are that you can remove event handler code if needed, using removeEventListener(), and you can add multiple listeners of the same type to elements if required. For example, you can call addEventListener('click', function() { ... }) on an element multiple times, with different functions specified in the second argument. This is impossible with event handler properties because any subsequent attempts to set a property will overwrite earlier ones, e.g.:

- -
element.onclick = function1;
-element.onclick = function2;
-etc.
- -
-

Note: If you are called upon to support browsers older than Internet Explorer 8 in your work, you may run into difficulties, as such ancient browsers use different event models from newer browsers. But never fear, most JavaScript libraries (for example jQuery) have built-in functions that abstract away cross-browser differences. Don't worry about this too much at this stage in your learning journey.

-
- -

Other event concepts

- -

In this section, we will briefly cover some advanced concepts that are relevant to events. It is not important to understand these fully at this point, but it might serve to explain some code patterns you'll likely come across from time to time.

- -

Event objects

- -

Sometimes inside an event handler function, you might see a parameter specified with a name such as event, evt, or simply e. This is called the event object, and it is automatically passed to event handlers to provide extra features and information. For example, let's rewrite our random color example again slightly:

- -
function bgChange(e) {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  e.target.style.backgroundColor = rndCol;
-  console.log(e);
-}
-
-btn.addEventListener('click', bgChange);
- -
-

Note: You can find the full source code for this example on GitHub (also see it running live).

-
- -

Here you can see that we are including an event object, e, in the function, and in the function setting a background color style on e.target — which is the button itself. The target property of the event object is always a reference to the element that the event has just occurred upon. So in this example, we are setting a random background color on the button, not the page.

- -
-

Note: You can use any name you like for the event object — you just need to choose a name that you can then use to reference it inside the event handler function. e/evt/event are most commonly used by developers because they are short and easy to remember. It's always good to stick to a standard.

-
- -

e.target is incredibly useful when you want to set the same event handler on multiple elements and do something to all of them when an event occurs on them. You might, for example, have a set of 16 tiles that disappear when they are clicked on. It is useful to always be able to just set the thing to disappear as e.target, rather than having to select it in some more difficult way. In the following example (see useful-eventtarget.html for the full source code; also see it running live here), we create 16 {{htmlelement("div")}} elements using JavaScript. We then select all of them using {{domxref("document.querySelectorAll()")}}, then loop through each one, adding an onclick handler to each that makes it so that a random color is applied to each one when clicked:

- -
var divs = document.querySelectorAll('div');
-
-for (var i = 0; i < divs.length; i++) {
-  divs[i].onclick = function(e) {
-    e.target.style.backgroundColor = bgChange();
-  }
-}
- -

The output is as follows (try clicking around on it — have fun):

- - - -

{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

- -

Most event handlers you'll encounter just have a standard set of properties and functions (methods) available on the event object (see the {{domxref("Event")}} object reference for a full list). Some more advanced handlers, however, add specialist properties containing extra data that they need to function. The Media Recorder API, for example, has a dataavailable event, which fires when some audio or video has been recorded and is available for doing something with (for example saving it, or playing it back). The corresponding ondataavailable handler's event object has a data property available containing the recorded audio or video data to allow you to access it and do something with it.

- -

Preventing default behavior

- -

Sometimes, you'll come across a situation where you want to stop an event doing what it does by default. The most common example is that of a web form, for example, a custom registration form. When you fill in the details and press the submit button, the natural behaviour is for the data to be submitted to a specified page on the server for processing, and the browser to be redirected to a "success message" page of some kind (or the same page, if another is not specified.)

- -

The trouble comes when the user has not submitted the data correctly — as a developer, you'll want to stop the submission to the server and give them an error message telling them what's wrong and what needs to be done to put things right. Some browsers support automatic form data validation features, but since many don't, you are advised to not rely on those and implement your own validation checks. Let's look at a simple example.

- -

First, a simple HTML form that requires you to enter your first and last name:

- -
<form>
-  <div>
-    <label for="fname">First name: </label>
-    <input id="fname" type="text">
-  </div>
-  <div>
-    <label for="lname">Last name: </label>
-    <input id="lname" type="text">
-  </div>
-  <div>
-     <input id="submit" type="submit">
-  </div>
-</form>
-<p></p>
- - - -

Now some JavaScript — here we implement a very simple check inside an onsubmit event handler (the submit event is fired on a form when it is submitted) that tests whether the text fields are empty. If they are, we call the preventDefault() function on the event object — which stops the form submission — and then display an error message in the paragraph below our form to tell the user what's wrong:

- -
var form = document.querySelector('form');
-var fname = document.getElementById('fname');
-var lname = document.getElementById('lname');
-var submit = document.getElementById('submit');
-var para = document.querySelector('p');
-
-form.onsubmit = function(e) {
-  if (fname.value === '' || lname.value === '') {
-    e.preventDefault();
-    para.textContent = 'You need to fill in both names!';
-  }
-}
- -

Obviously, this is pretty weak form validation — it wouldn't stop the user validating the form with spaces or numbers entered into the fields, for example — but it is ok for example purposes. The output is as follows:

- -

{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}

- -
-

Note: for the full source code, see preventdefault-validation.html (also see it running live here.)

-
- -

Event bubbling and capture

- -

The final subject to cover here is something that you'll not come across often, but it can be a real pain if you don't understand it. Event bubbling and capture are two mechanisms that describe what happens when two handlers of the same event type are activated on one element. Let's look at an example to make this easier — open up the show-video-box.html example in a new tab (and the source code in another tab.) It is also available live below:

- - - -

{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}

- -

This is a pretty simple example that shows and hides a {{htmlelement("div")}} with a {{htmlelement("video")}} element inside it:

- -
<button>Display video</button>
-
-<div class="hidden">
-  <video>
-    <source src="rabbit320.mp4" type="video/mp4">
-    <source src="rabbit320.webm" type="video/webm">
-    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-  </video>
-</div>
- -

When the {{htmlelement("button")}} is clicked, the video is displayed, by changing the class attribute on the <div> from hidden to showing (the example's CSS contains these two classes, which position the box off the screen and on the screen, respectively):

- -
btn.onclick = function() {
-  videoBox.setAttribute('class', 'showing');
-}
- -

We then add a couple more onclick event handlers — the first one to the <div> and the second one to the <video>. The idea is that when the area of the <div> outside the video is clicked, the box should be hidden again; when the video itself is clicked, the video should start to play.

- -
videoBox.onclick = function() {
-  videoBox.setAttribute('class', 'hidden');
-};
-
-video.onclick = function() {
-  video.play();
-};
- -

But there's a problem — currently, when you click the video it starts to play, but it causes the <div> to also be hidden at the same time. This is because the video is inside the <div> — it is part of it — so clicking on the video actually runs both the above event handlers.

- -

Bubbling and capturing explained

- -

When an event is fired on an element that has parent elements (e.g. the {{htmlelement("video")}} in our case), modern browsers run two different phases — the capturing phase and the bubbling phase.

- -

In the capturing phase:

- - - -

In the bubbling phase, the exact opposite occurs:

- - - -

- -

(Click on image for bigger diagram)

- -

In modern browsers, by default, all event handlers are registered in the bubbling phase. So in our current example, when you click the video, the click event bubbles from the <video> element outwards to the <html> element. Along the way:

- - - -

Fixing the problem with stopPropagation()

- -

This is annoying behavior, but there is a way to fix it! The standard event object has a function available on it called stopPropagation(), which when invoked on a handler's event object makes it so that handler is run, but the event doesn't bubble any further up the chain, so no more handlers will be run.

- -

We can, therefore, fix our current problem by changing the second handler function in the previous code block to this:

- -
video.onclick = function(e) {
-  e.stopPropagation();
-  video.play();
-};
- -

You can try making a local copy of the show-video-box.html source code and having a go at fixing it yourself, or looking at the fixed result in show-video-box-fixed.html (also see the source code here).

- -
-

Note: Why bother with both capturing and bubbling? Well, in the bad old days when browsers were much less cross-compatible than they are now, Netscape only used event capturing, and Internet Explorer used only event bubbling. When the W3C decided to try to standardize the behavior and reach a consensus, they ended up with this system that included both, which is the one modern browsers implemented.

-
- -
-

Note: As mentioned above, by default all event handlers are registered in the bubbling phase, and this makes more sense most of the time. If you really want to register an event in the capturing phase instead, you can do so by registering your handler using addEventListener(), and setting the optional third property to true.

-
- -

Event delegation

- -

Bubbling also allows us to take advantage of event delegation — this concept relies on the fact that if you want some code to run when you click on any one of a large number of child elements, you can set the event listener on their parent and have events that happen on them bubble up to their parent rather than having to set the event listener on every child individually. Remember earlier that we said bubbling involves checking the element the event is fired on for an event handler first, then moving up to the element's parent, etc.?

- -

A good example is a series of list items — if you want each one of them to pop up a message when clicked, you can set the click event listener on the parent <ul>, and events will bubble from the list items to the <ul>.

- -

This concept is explained further on David Walsh's blog, with multiple examples — see How JavaScript Event Delegation Works.

- -

Conclusion

- -

You should now know all you need to know about web events at this early stage. As mentioned above, events are not really part of the core JavaScript — they are defined in browser Web APIs.

- -

Also, it is important to understand that the different contexts in which JavaScript is used tend to have different event models — from Web APIs to other areas such as browser WebExtensions and Node.js (server-side JavaScript). We are not expecting you to understand all these areas now, but it certainly helps to understand the basics of events as you forge ahead with learning web development.

- -

If there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

- -

See also

- - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

- -

In this module

- - diff --git a/files/es/learn/javascript/building_blocks/events/index.html b/files/es/learn/javascript/building_blocks/events/index.html new file mode 100644 index 0000000000..7bdb81768a --- /dev/null +++ b/files/es/learn/javascript/building_blocks/events/index.html @@ -0,0 +1,578 @@ +--- +title: Introducción a eventos +slug: Learn/JavaScript/Building_blocks/Eventos +translation_of: Learn/JavaScript/Building_blocks/Events +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
+ +

Los eventos son acciones u ocurrencias que suceden en el sistema que está programando y que el sistema le informa para que pueda responder de alguna manera si lo desea. Por ejemplo, si el usuario hace clic en un botón en una página web, es posible que desee responder a esa acción mostrando un cuadro de información. En este artículo, discutiremos algunos conceptos importantes que rodean los eventos y veremos cómo funcionan en los navegadores. Este no será un estudio exhaustivo; solo lo que necesitas saber en esta etapa.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, entendimiento básico de HTML y CSS, Primeros pasos con JavaScript.
Objetivo:Comprender la teoría fundamental de los eventos, cómo funcionan en los navegadores y cómo los eventos pueden diferir en distintos entornos de programación.
+ +

Una serie de eventos afortunados

+ +

Como se mencionó anteriormente, los eventos son acciones u ocurrencias que suceden en el sistema que está programando — el sistema disparará una señal de algún tipo cuando un evento ocurra y también proporcionará un mecanismo por el cual se puede tomar algún tipo de acción automáticamente (p.e., ejecutando algún código) cuando se produce el evento. Por ejemplo, en un aeropuerto cuando la pista está despejada para que despegue un avión, se comunica una señal al piloto y, como resultado, comienzan a pilotar el avión.

+ +

+ +

En el caso de la Web, los eventos se desencadenan dentro de la ventana del navegador y tienden a estar unidos a un elemento específico que reside en ella — podría ser un solo elemento, un conjunto de elementos, el documento HTML cargado en la pestaña actual o toda la ventana del navegador. Hay muchos tipos diferentes de eventos que pueden ocurrir, por ejemplo:

+ + + +

Se deducirá de esto (y echar un vistazo a MDN Referencia de eventos) que hay muchos eventos a los que se puede responder.

+ +

Cada evento disponible tiene un controlador de eventos, que es un bloque de código (generalmente una función JavaScript definida por el usuario) que se ejecutará cuando se active el evento. Cuando dicho bloque de código se define para ejecutarse en respuesta a un disparo de evento, decimos que estamos registrando un controlador de eventos. Tenga en cuenta que los controladores de eventos a veces se llaman oyentes de eventos — son bastante intercambiables para nuestros propósitos, aunque estrictamente hablando, trabajan juntos. El oyente escucha si ocurre el evento y el controlador es el código que se ejecuta en respuesta a que ocurra.

+ +
+

Nota: Es útil tener en cuenta que los eventos web no son parte del lenguaje central de JavaScript: se definen como parte de las API integradas en el navegador.

+
+ +

Un ejemplo simple

+ +

Veamos un ejemplo simple para explicar lo que queremos decir aquí. Ya has visto eventos y controladores de eventos en muchos de los ejemplos de este curso, pero vamos a recapitular solo para consolidar nuestro conocimiento. En el siguiente ejemplo, tenemos un solo {{htmlelement ("button")}}, que cuando se presiona, hará que el fondo cambie a un color aleatorio:

+ +
<button>Cambiar color</button>
+ + + +

El JavaScript se ve así:

+ +
const btn = document.querySelector('button');
+
+function random(number) {
+  return Math.floor(Math.random() * (number+1));
+}
+
+btn.onclick = function() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

En este código, almacenamos una referencia al botón dentro de una variable llamada btn, usando la función {{domxref ("Document.querySelector ()")}}. También definimos una función que devuelve un número aleatorio. La tercera parte del código es el controlador de eventos. La variable btn apunta a un elemento <button>, y este tipo de objeto tiene una serie de eventos que pueden activarse y, por lo tanto, los controladores de eventos están disponibles. Estamos escuchando el disparo del evento "click", estableciendo la propiedad del controlador de eventos onclick para que sea igual a una función anónima que contiene código que generó un color RGB aleatorio y establece el <body> color de fondo igual a este.

+ +

Este código ahora se ejecutará cada vez que se active el evento "click" en el elemento <button>, es decir, cada vez que un usuario haga clic en él.

+ +

El resultado de ejemplo es el siguiente:

+ +

{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}

+ +

No son solo páginas web

+ +

Otra cosa que vale la pena mencionar en este punto es que los eventos no son particulares de JavaScript — la mayoría de los lenguajes de programación tienen algún tipo de modelo de eventos, y la forma en que funciona a menudo diferirá de la forma en que funciona en JavaScript. De hecho, el modelo de eventos en JavaScript para páginas web difiere del modelo de eventos para JavaScript, ya que se utiliza en otros entornos.

+ +

Por ejemplo, Node.js es un entorno en tiempo de ejecución de JavaScript muy popular que permite a los desarrolladores usar JavaScript para crear aplicaciones de red y del lado del servidor. El modelo de eventos de Node.js se basa en que los oyentes (listeners) escuchen eventos y los emisores (emitters) emitan eventos periódicamente — no suena tan diferentes, pero el código es bastante diferente, haciendo uso de funciones como on() para registrar un oyente de eventos, y once() para registrar un oyente de eventos que anula el registro después de que se haya ejecutado una vez. The documentos de eventos de conexión HTTP proporcionan un buen ejemplo de uso.

+ +

Como otro ejemplo, ahora también puede usar JavaScript para crear complementos de navegadores — mejoras de funcionalidad del navegador — utilizando una tecnología llamada WebExtensions. El modelo de eventos es similar al modelo de eventos web, pero un poco diferente — las propiedades de los oyentes de eventos se escriben en camel-case (ej. onMessage en lugar de onmessage), y deben combinarse con la función addListener. Consulte la página runtime.onMessage para ver un ejemplo.

+ +

No necesita comprender nada sobre otros entornos en esta etapa de su aprendizaje; solo queríamos dejar en claro que los eventos pueden diferir en diferentes entornos de programación.

+ +

Diferentes formas de uso de eventos

+ +

Hay muchas maneras distintas en las que puedes agregar event listeners a los sitios web, que se ejecutara cuando el evento asociado se dispare. En esta sección, revisaremos los diferentes mecanismos y discutiremos cuales deberias usar..

+ +

Propiedades de manejadores de eventos

+ +

Estas son las propiedades que existen, que contienen codigo de manejadores de eventos(Event Handler)  que vemos frecuentemente durante el curso.. Volviendo al ejemplo de arriba:

+ +
var btn = document.querySelector('button');
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

La propiedad onclick es la propiedad del manejador de eventos que está siendo usada en esta situación. Es escencialmente una propiedad como cualquier otra disponible en el botón (por ejemplo: btn.textContent, or btn.style), pero es de un tipo especial — cuando lo configura para ser igual a algún código, ese código se ejecutará cuando el evento se dispare en el botón.

+ +

You could also set the handler property to be equal to a named function name (like we saw in Build your own function). The following would work just the same:

+ +
var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.onclick = bgChange;
+ +

There are many different event handler properties available. Let's do an experiment.

+ +

First of all, make a local copy of random-color-eventhandlerproperty.html, and open it in your browser. It's just a copy of the simple random color example we've been playing with already in this article. Now try changing btn.onclick to the following different values in turn, and observing the results in the example:

+ + + +

Some events are very general and available nearly anywhere (for example an onclick handler can be registered on nearly any element), whereas some are more specific and only useful in certain situations (for example it makes sense to use onplay only on specific elements, such as {{htmlelement("video")}}).

+ +

Inline event handlers — don't use these

+ +

You might also see a pattern like this in your code:

+ +
<button onclick="bgChange()">Press me</button>
+
+ +
function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +
+

Note: You can find the full source code for this example on GitHub (also see it running live).

+
+ +

The earliest method of registering event handlers found on the Web involved event handler HTML attributes (aka inline event handlers) like the one shown above — the attribute value is literally the JavaScript code you want to run when the event occurs. The above example invokes a function defined inside a {{htmlelement("script")}} element on the same page, but you could also insert JavaScript directly inside the attribute, for example:

+ +
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
+ +

You'll find HTML attribute equivalents for many of the event handler properties; however, you shouldn't use these — they are considered bad practice. It might seem easy to use an event handler attribute if you are just doing something really quick, but they very quickly become unmanageable and inefficient.

+ +

For a start, it is not a good idea to mix up your HTML and your JavaScript, as it becomes hard to parse — keeping your JavaScript all in one place is better; if it is in a separate file you can apply it to multiple HTML documents.

+ +

Even in a single file, inline event handlers are not a good idea. One button is OK, but what if you had 100 buttons? You'd have to add 100 attributes to the file; it would very quickly turn into a maintenance nightmare. With JavaScript, you could easily add an event handler function to all the buttons on the page no matter how many there were, using something like this:

+ +
var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i < buttons.length; i++) {
+  buttons[i].onclick = bgChange;
+}
+ +

Note that another option here would be to use the forEach() built-in method available on all Array objects:

+ +
buttons.forEach(function(button) {
+  button.onclick = bgChange;
+});
+ +
+

Note: Separating your programming logic from your content also makes your site more friendly to search engines.

+
+ +

addEventListener() and removeEventListener()

+ +

The newest type of event mechanism is defined in the Document Object Model (DOM) Level 2 Events Specification, which provides browsers with a new function — addEventListener(). This functions in a similar way to the event handler properties, but the syntax is obviously different. We could rewrite our random color example to look like this:

+ +
var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.addEventListener('click', bgChange);
+ +
+

Note: You can find the full source code for this example on GitHub (also see it running live).

+
+ +

Inside the addEventListener() function, we specify two parameters — the name of the event we want to register this handler for, and the code that comprises the handler function we want to run in response to it. Note that it is perfectly appropriate to put all the code inside the addEventListener() function, in an anonymous function, like this:

+ +
btn.addEventListener('click', function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+});
+ +

This mechanism has some advantages over the older mechanisms discussed earlier. For a start, there is a counterpart function, removeEventListener(), which removes a previously added listener. For example, this would remove the listener set in the first code block in this section:

+ +
btn.removeEventListener('click', bgChange);
+ +

This isn't significant for simple, small programs, but for larger, more complex programs it can improve efficiency to clean up old unused event handlers. Plus, for example, this allows you to have the same button performing different actions in different circumstances — all you've got to do is add/remove event handlers as appropriate.

+ +

Second, you can also register multiple handlers for the same listener. The following two handlers would not be applied:

+ +
myElement.onclick = functionA;
+myElement.onclick = functionB;
+ +

As the second line would overwrite the value of onclick set by the first. This would work, however:

+ +
myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);
+ +

Both functions would now run when the element is clicked.

+ +

In addition, there are a number of other powerful features and options available with this event mechanism. These are a little out of scope for this article, but if you want to read up on them, have a look at the addEventListener() and removeEventListener() reference pages.

+ +

What mechanism should I use?

+ +

Of the three mechanisms, you definitely shouldn't use the HTML event handler attributes — these are outdated, and bad practice, as mentioned above.

+ +

The other two are relatively interchangeable, at least for simple uses:

+ + + +

The main advantages of the third mechanism are that you can remove event handler code if needed, using removeEventListener(), and you can add multiple listeners of the same type to elements if required. For example, you can call addEventListener('click', function() { ... }) on an element multiple times, with different functions specified in the second argument. This is impossible with event handler properties because any subsequent attempts to set a property will overwrite earlier ones, e.g.:

+ +
element.onclick = function1;
+element.onclick = function2;
+etc.
+ +
+

Note: If you are called upon to support browsers older than Internet Explorer 8 in your work, you may run into difficulties, as such ancient browsers use different event models from newer browsers. But never fear, most JavaScript libraries (for example jQuery) have built-in functions that abstract away cross-browser differences. Don't worry about this too much at this stage in your learning journey.

+
+ +

Other event concepts

+ +

In this section, we will briefly cover some advanced concepts that are relevant to events. It is not important to understand these fully at this point, but it might serve to explain some code patterns you'll likely come across from time to time.

+ +

Event objects

+ +

Sometimes inside an event handler function, you might see a parameter specified with a name such as event, evt, or simply e. This is called the event object, and it is automatically passed to event handlers to provide extra features and information. For example, let's rewrite our random color example again slightly:

+ +
function bgChange(e) {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  e.target.style.backgroundColor = rndCol;
+  console.log(e);
+}
+
+btn.addEventListener('click', bgChange);
+ +
+

Note: You can find the full source code for this example on GitHub (also see it running live).

+
+ +

Here you can see that we are including an event object, e, in the function, and in the function setting a background color style on e.target — which is the button itself. The target property of the event object is always a reference to the element that the event has just occurred upon. So in this example, we are setting a random background color on the button, not the page.

+ +
+

Note: You can use any name you like for the event object — you just need to choose a name that you can then use to reference it inside the event handler function. e/evt/event are most commonly used by developers because they are short and easy to remember. It's always good to stick to a standard.

+
+ +

e.target is incredibly useful when you want to set the same event handler on multiple elements and do something to all of them when an event occurs on them. You might, for example, have a set of 16 tiles that disappear when they are clicked on. It is useful to always be able to just set the thing to disappear as e.target, rather than having to select it in some more difficult way. In the following example (see useful-eventtarget.html for the full source code; also see it running live here), we create 16 {{htmlelement("div")}} elements using JavaScript. We then select all of them using {{domxref("document.querySelectorAll()")}}, then loop through each one, adding an onclick handler to each that makes it so that a random color is applied to each one when clicked:

+ +
var divs = document.querySelectorAll('div');
+
+for (var i = 0; i < divs.length; i++) {
+  divs[i].onclick = function(e) {
+    e.target.style.backgroundColor = bgChange();
+  }
+}
+ +

The output is as follows (try clicking around on it — have fun):

+ + + +

{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Most event handlers you'll encounter just have a standard set of properties and functions (methods) available on the event object (see the {{domxref("Event")}} object reference for a full list). Some more advanced handlers, however, add specialist properties containing extra data that they need to function. The Media Recorder API, for example, has a dataavailable event, which fires when some audio or video has been recorded and is available for doing something with (for example saving it, or playing it back). The corresponding ondataavailable handler's event object has a data property available containing the recorded audio or video data to allow you to access it and do something with it.

+ +

Preventing default behavior

+ +

Sometimes, you'll come across a situation where you want to stop an event doing what it does by default. The most common example is that of a web form, for example, a custom registration form. When you fill in the details and press the submit button, the natural behaviour is for the data to be submitted to a specified page on the server for processing, and the browser to be redirected to a "success message" page of some kind (or the same page, if another is not specified.)

+ +

The trouble comes when the user has not submitted the data correctly — as a developer, you'll want to stop the submission to the server and give them an error message telling them what's wrong and what needs to be done to put things right. Some browsers support automatic form data validation features, but since many don't, you are advised to not rely on those and implement your own validation checks. Let's look at a simple example.

+ +

First, a simple HTML form that requires you to enter your first and last name:

+ +
<form>
+  <div>
+    <label for="fname">First name: </label>
+    <input id="fname" type="text">
+  </div>
+  <div>
+    <label for="lname">Last name: </label>
+    <input id="lname" type="text">
+  </div>
+  <div>
+     <input id="submit" type="submit">
+  </div>
+</form>
+<p></p>
+ + + +

Now some JavaScript — here we implement a very simple check inside an onsubmit event handler (the submit event is fired on a form when it is submitted) that tests whether the text fields are empty. If they are, we call the preventDefault() function on the event object — which stops the form submission — and then display an error message in the paragraph below our form to tell the user what's wrong:

+ +
var form = document.querySelector('form');
+var fname = document.getElementById('fname');
+var lname = document.getElementById('lname');
+var submit = document.getElementById('submit');
+var para = document.querySelector('p');
+
+form.onsubmit = function(e) {
+  if (fname.value === '' || lname.value === '') {
+    e.preventDefault();
+    para.textContent = 'You need to fill in both names!';
+  }
+}
+ +

Obviously, this is pretty weak form validation — it wouldn't stop the user validating the form with spaces or numbers entered into the fields, for example — but it is ok for example purposes. The output is as follows:

+ +

{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note: for the full source code, see preventdefault-validation.html (also see it running live here.)

+
+ +

Event bubbling and capture

+ +

The final subject to cover here is something that you'll not come across often, but it can be a real pain if you don't understand it. Event bubbling and capture are two mechanisms that describe what happens when two handlers of the same event type are activated on one element. Let's look at an example to make this easier — open up the show-video-box.html example in a new tab (and the source code in another tab.) It is also available live below:

+ + + +

{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}

+ +

This is a pretty simple example that shows and hides a {{htmlelement("div")}} with a {{htmlelement("video")}} element inside it:

+ +
<button>Display video</button>
+
+<div class="hidden">
+  <video>
+    <source src="rabbit320.mp4" type="video/mp4">
+    <source src="rabbit320.webm" type="video/webm">
+    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+  </video>
+</div>
+ +

When the {{htmlelement("button")}} is clicked, the video is displayed, by changing the class attribute on the <div> from hidden to showing (the example's CSS contains these two classes, which position the box off the screen and on the screen, respectively):

+ +
btn.onclick = function() {
+  videoBox.setAttribute('class', 'showing');
+}
+ +

We then add a couple more onclick event handlers — the first one to the <div> and the second one to the <video>. The idea is that when the area of the <div> outside the video is clicked, the box should be hidden again; when the video itself is clicked, the video should start to play.

+ +
videoBox.onclick = function() {
+  videoBox.setAttribute('class', 'hidden');
+};
+
+video.onclick = function() {
+  video.play();
+};
+ +

But there's a problem — currently, when you click the video it starts to play, but it causes the <div> to also be hidden at the same time. This is because the video is inside the <div> — it is part of it — so clicking on the video actually runs both the above event handlers.

+ +

Bubbling and capturing explained

+ +

When an event is fired on an element that has parent elements (e.g. the {{htmlelement("video")}} in our case), modern browsers run two different phases — the capturing phase and the bubbling phase.

+ +

In the capturing phase:

+ + + +

In the bubbling phase, the exact opposite occurs:

+ + + +

+ +

(Click on image for bigger diagram)

+ +

In modern browsers, by default, all event handlers are registered in the bubbling phase. So in our current example, when you click the video, the click event bubbles from the <video> element outwards to the <html> element. Along the way:

+ + + +

Fixing the problem with stopPropagation()

+ +

This is annoying behavior, but there is a way to fix it! The standard event object has a function available on it called stopPropagation(), which when invoked on a handler's event object makes it so that handler is run, but the event doesn't bubble any further up the chain, so no more handlers will be run.

+ +

We can, therefore, fix our current problem by changing the second handler function in the previous code block to this:

+ +
video.onclick = function(e) {
+  e.stopPropagation();
+  video.play();
+};
+ +

You can try making a local copy of the show-video-box.html source code and having a go at fixing it yourself, or looking at the fixed result in show-video-box-fixed.html (also see the source code here).

+ +
+

Note: Why bother with both capturing and bubbling? Well, in the bad old days when browsers were much less cross-compatible than they are now, Netscape only used event capturing, and Internet Explorer used only event bubbling. When the W3C decided to try to standardize the behavior and reach a consensus, they ended up with this system that included both, which is the one modern browsers implemented.

+
+ +
+

Note: As mentioned above, by default all event handlers are registered in the bubbling phase, and this makes more sense most of the time. If you really want to register an event in the capturing phase instead, you can do so by registering your handler using addEventListener(), and setting the optional third property to true.

+
+ +

Event delegation

+ +

Bubbling also allows us to take advantage of event delegation — this concept relies on the fact that if you want some code to run when you click on any one of a large number of child elements, you can set the event listener on their parent and have events that happen on them bubble up to their parent rather than having to set the event listener on every child individually. Remember earlier that we said bubbling involves checking the element the event is fired on for an event handler first, then moving up to the element's parent, etc.?

+ +

A good example is a series of list items — if you want each one of them to pop up a message when clicked, you can set the click event listener on the parent <ul>, and events will bubble from the list items to the <ul>.

+ +

This concept is explained further on David Walsh's blog, with multiple examples — see How JavaScript Event Delegation Works.

+ +

Conclusion

+ +

You should now know all you need to know about web events at this early stage. As mentioned above, events are not really part of the core JavaScript — they are defined in browser Web APIs.

+ +

Also, it is important to understand that the different contexts in which JavaScript is used tend to have different event models — from Web APIs to other areas such as browser WebExtensions and Node.js (server-side JavaScript). We are not expecting you to understand all these areas now, but it certainly helps to understand the basics of events as you forge ahead with learning web development.

+ +

If there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

+ +

In this module

+ + diff --git a/files/es/learn/javascript/building_blocks/galeria_de_imagenes/index.html b/files/es/learn/javascript/building_blocks/galeria_de_imagenes/index.html deleted file mode 100644 index 205f1a11aa..0000000000 --- a/files/es/learn/javascript/building_blocks/galeria_de_imagenes/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Galería de imágenes -slug: Learn/JavaScript/Building_blocks/Galeria_de_imagenes -translation_of: Learn/JavaScript/Building_blocks/Image_gallery ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
- -

Ahora que hemos analizado los bloques de construcción fundamentales de JavaScript, pongamos a prueba tu conocimiento de bucles, funciones, condicionales y eventos, creando un elemento que comumente vemos en muchos sitios web, una Galería de imágenes "motorizada" por JavaScript .

- - - - - - - - - - - - -
Prerequisitos:Antes de intentar esta evaluación deberías de haber trabajado con todos los artículos en éste módulo.
Objetivo:Evaluar la comprensión de los bucles, funciones, condicionales y eventos de JavaScript..
- -

Punto de partida

- -

Para realizar esta evaluación, debería descárgarse archivoZip para el ejemplo, descomprímalo en algún lugar de su computadora y haga el ejercicio localmente para empezar.

- -

Opcionalmente, puedes usar un sitio como JSBin o Glitch para realizar tu evaluación. Puede pegar el HTML, CSS y JavaScript dentro de uno de estos editores online. Si el editor en línea que está utilizando no tiene paneles JavaScript / CSS separados, siéntase libre de ponerlos en línea <script> / <style> elementos dentro de la página HTML.

- -
-

Nota: Si se atascascas con algo, entonces pregúntenos para ayudarlo — vea la sección de {{anch("evaluación o ayuda adicional")}} al final de esta página.

-
- -

Resumen del proyecto

- -

Ha sido provisto con algún contenido de HTML, CSS e imágenes, también algunas líneas de código en JavaScript; necesitas escribir las líneas de código en JavaScript necesatio para transformarse en un programa funcional. El  HTML body luce así:

- -
<h1>Image gallery example</h1>
-
-<div class="full-img">
-  <img class="displayed-img" src="images/pic1.jpg">
-  <div class="overlay"></div>
-  <button class="dark">Darken</button>
-</div>
-
-<div class="thumb-bar">
-
-</div>
- -

El ejemplo se ve así:

- -

- - - -

Las partes más interesantes del archivo example's CSS :

- - - -

Your JavaScript needs to:

- - - -

To give you more of an idea, have a look at the finished example (no peeking at the source code!)

- -

Steps to complete

- -

The following sections describe what you need to do.

- -

Looping through the images

- -

We've already provided you with lines that store a reference to the thumb-bar <div> inside a constant called thumbBar, create a new <img> element, set its src attribute to a placeholder value xxx, and append this new <img> element inside thumbBar.

- -

You need to:

- -
    -
  1. Put the section of code below the "Looping through images" comment inside a loop that loops through all 5 images — you just need to loop through five numbers, one representing each image.
    2. -
  2. In each loop iteration, replace the xxx placeholder value with a string that will equal the path to the image in each case. We are setting the value of the src attribute to this value in each case. Bear in mind that in each case, the image is inside the images directory and its name is pic1.jpg, pic2.jpg, etc.
    3. -
- -

Adding an onclick handler to each thumbnail image

- -

In each loop iteration, you need to add an onclick handler to the current newImage — this handler should find the value of the src attribute of the current image. Set the src attribute value of the displayed-img <img> to the src value passed in as a parameter.

- -

Writing a handler that runs the darken/lighten button

- -

That just leaves our darken/lighten <button> — we've already provided a line that stores a reference to the <button> in a constant called btn. You need to add an onclick handler that:

- -
    -
  1. Checks the current class name set on the <button> — you can again achieve this by using getAttribute().
    2. -
  2. If the class name is "dark", changes the <button> class to "light" (using setAttribute()), its text content to "Lighten", and the {{cssxref("background-color")}} of the overlay <div> to "rgba(0,0,0,0.5)".
    3. -
  3. If the class name not "dark", changes the <button> class to "dark", its text content back to "Darken", and the {{cssxref("background-color")}} of the overlay <div> to "rgba(0,0,0,0)".
    4. -
- -

The following lines provide a basis for achieving the changes stipulated in points 2 and 3 above.

- -
btn.setAttribute('class', xxx);
-btn.textContent = xxx;
-overlay.style.backgroundColor = xxx;
- -

Hints and tips

- - - -

Assessment or further help

- -

If you would like your work assessed, or are stuck and want to ask for help:

- -
    -
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch.
    2. -
  2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include: -
      -
    • A descriptive title such as "Assessment wanted for Image gallery".
      • -
    • Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
      • -
    • A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • -
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • -
    -
    3. -
- -

{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

- -

In this module

- - diff --git a/files/es/learn/javascript/building_blocks/image_gallery/index.html b/files/es/learn/javascript/building_blocks/image_gallery/index.html new file mode 100644 index 0000000000..205f1a11aa --- /dev/null +++ b/files/es/learn/javascript/building_blocks/image_gallery/index.html @@ -0,0 +1,144 @@ +--- +title: Galería de imágenes +slug: Learn/JavaScript/Building_blocks/Galeria_de_imagenes +translation_of: Learn/JavaScript/Building_blocks/Image_gallery +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
+ +

Ahora que hemos analizado los bloques de construcción fundamentales de JavaScript, pongamos a prueba tu conocimiento de bucles, funciones, condicionales y eventos, creando un elemento que comumente vemos en muchos sitios web, una Galería de imágenes "motorizada" por JavaScript .

+ + + + + + + + + + + + +
Prerequisitos:Antes de intentar esta evaluación deberías de haber trabajado con todos los artículos en éste módulo.
Objetivo:Evaluar la comprensión de los bucles, funciones, condicionales y eventos de JavaScript..
+ +

Punto de partida

+ +

Para realizar esta evaluación, debería descárgarse archivoZip para el ejemplo, descomprímalo en algún lugar de su computadora y haga el ejercicio localmente para empezar.

+ +

Opcionalmente, puedes usar un sitio como JSBin o Glitch para realizar tu evaluación. Puede pegar el HTML, CSS y JavaScript dentro de uno de estos editores online. Si el editor en línea que está utilizando no tiene paneles JavaScript / CSS separados, siéntase libre de ponerlos en línea <script> / <style> elementos dentro de la página HTML.

+ +
+

Nota: Si se atascascas con algo, entonces pregúntenos para ayudarlo — vea la sección de {{anch("evaluación o ayuda adicional")}} al final de esta página.

+
+ +

Resumen del proyecto

+ +

Ha sido provisto con algún contenido de HTML, CSS e imágenes, también algunas líneas de código en JavaScript; necesitas escribir las líneas de código en JavaScript necesatio para transformarse en un programa funcional. El  HTML body luce así:

+ +
<h1>Image gallery example</h1>
+
+<div class="full-img">
+  <img class="displayed-img" src="images/pic1.jpg">
+  <div class="overlay"></div>
+  <button class="dark">Darken</button>
+</div>
+
+<div class="thumb-bar">
+
+</div>
+ +

El ejemplo se ve así:

+ +

+ + + +

Las partes más interesantes del archivo example's CSS :

+ + + +

Your JavaScript needs to:

+ + + +

To give you more of an idea, have a look at the finished example (no peeking at the source code!)

+ +

Steps to complete

+ +

The following sections describe what you need to do.

+ +

Looping through the images

+ +

We've already provided you with lines that store a reference to the thumb-bar <div> inside a constant called thumbBar, create a new <img> element, set its src attribute to a placeholder value xxx, and append this new <img> element inside thumbBar.

+ +

You need to:

+ +
    +
  1. Put the section of code below the "Looping through images" comment inside a loop that loops through all 5 images — you just need to loop through five numbers, one representing each image.
    2. +
  2. In each loop iteration, replace the xxx placeholder value with a string that will equal the path to the image in each case. We are setting the value of the src attribute to this value in each case. Bear in mind that in each case, the image is inside the images directory and its name is pic1.jpg, pic2.jpg, etc.
    3. +
+ +

Adding an onclick handler to each thumbnail image

+ +

In each loop iteration, you need to add an onclick handler to the current newImage — this handler should find the value of the src attribute of the current image. Set the src attribute value of the displayed-img <img> to the src value passed in as a parameter.

+ +

Writing a handler that runs the darken/lighten button

+ +

That just leaves our darken/lighten <button> — we've already provided a line that stores a reference to the <button> in a constant called btn. You need to add an onclick handler that:

+ +
    +
  1. Checks the current class name set on the <button> — you can again achieve this by using getAttribute().
    2. +
  2. If the class name is "dark", changes the <button> class to "light" (using setAttribute()), its text content to "Lighten", and the {{cssxref("background-color")}} of the overlay <div> to "rgba(0,0,0,0.5)".
    3. +
  3. If the class name not "dark", changes the <button> class to "dark", its text content back to "Darken", and the {{cssxref("background-color")}} of the overlay <div> to "rgba(0,0,0,0)".
    4. +
+ +

The following lines provide a basis for achieving the changes stipulated in points 2 and 3 above.

+ +
btn.setAttribute('class', xxx);
+btn.textContent = xxx;
+overlay.style.backgroundColor = xxx;
+ +

Hints and tips

+ + + +

Assessment or further help

+ +

If you would like your work assessed, or are stuck and want to ask for help:

+ +
    +
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch.
    2. +
  2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include: +
      +
    • A descriptive title such as "Assessment wanted for Image gallery".
      • +
    • Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
      • +
    • A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • +
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • +
    +
    3. +
+ +

{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

+ +

In this module

+ + diff --git a/files/es/learn/javascript/building_blocks/looping_code/index.html b/files/es/learn/javascript/building_blocks/looping_code/index.html new file mode 100644 index 0000000000..e26509afc5 --- /dev/null +++ b/files/es/learn/javascript/building_blocks/looping_code/index.html @@ -0,0 +1,923 @@ +--- +title: Bucles +slug: Learn/JavaScript/Building_blocks/Bucle_codigo +translation_of: Learn/JavaScript/Building_blocks/Looping_code +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
+ +

Los lenguajes de programación son muy útiles para completar rápidamente tareas repetitivas, desde múltimples cálculos básicos hasta cualquier otra situación en donde tengas un montón de elementos de trabajo similares que completar. Aquí vamos a ver las estructuras de bucles disponibles en JavaScript que pueden manejar tales necesidades.

+ + + + + + + + + + + + +
Prerequisitos:Conocimientos básicos de computación, entendimiento básico de HTML y CSS, JavaScript first steps.
Objetivo:Entender cómo usar bucles en JavaScript.
+ +

Mantente en el Bucle

+ +

Bucles, bucles, bucles. Además de ser conocidos como un cereal de desayuno popular, montañas rusas y producción músical, también son un concepto muy importante en programación. Los bucles de programación están relacionados con todo lo referente a hacer una misma cosa una y otra vez — que se denomina como iteración en el idioma de programación.

+ +

Consideremos el caso de un agricultor que se asegura de tener suficiente comida para alimentar a su familia durante la semana. Podría usar el siguiente bucle para lograr esto:

+ +


+

+ +

Un bucle cuenta con una o más de las siguientes características:

+ + + +

En {{glossary("pseudocódigo")}},esto se vería como sigue:

+ +
bucle(comida = 0; comidaNecesaria = 10) {
+  if (comida = comidaNecesaria) {
+    salida bucle;
+    // Tenemos suficiente comida; vamonos para casa
+  } else {
+    comida += 2; // Pasar una hora recogiendo 2 más de comida
+    // Comenzar el bucle de nuevo
+  }
+}
+ +

Así que la cantidad necesaria de comida se establece en 10, y la cantidad incial del granjero en 0. En cada iteración del bucle comprobamos si la cantidad de comida del granjero es mayor o igual a la cantidad que necesita. Si lo es, podemos salir del bucle. Si no, el granjero se pasará una hora más recogiendo dos porciones de comida, y el bucle arrancará de nuevo.

+ +

¿Por qué molestarse?

+ +

En este punto, probablemente entiendas los conceptos de alto nivel que hay detrás de los bucles, pero probablemente estés pensando "OK, fantástico, pero ¿cómo me ayuda esto a escribir un mejor codigo JavaScript?". Como dijimos antes, los bucles tienen que ver con hacer lo mismo una y otra vez, lo cual es bueno para completar rápidamente tareas repetitivas.

+ +

Muchas veces, el código será ligeramente diferente en cada iteracción sucesiva del bucle, lo que significa que puedes completar una carga completa de tareas que son similares, pero ligeramente diferentes — si tienes muchos calculos diferentes que hacer, quieres hacer cada uno de ellos, ¡no el mismo una y otra vez!

+ +

Vamos a ver un ejemplo para ilustrar perfectamente por qué los bucles son tan útiles. Digamos que queremos dibujar 100 círculos aleatorios en un elemento {{htmlelement("canvas")}} (presiona el botón Update para ejecutar el ejemplo una y otra vez y ver diferentes configuraciones aleatorias):

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

+ +

No tienes que entender todo el código por ahora, pero vamos a echar un vistazo a la parte de código que dibuja los 100 círculos:

+ +
for (var i = 0; i < 100; i++) {
+  ctx.beginPath();
+  ctx.fillStyle = 'rgba(255,0,0,0.5)';
+  ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+  ctx.fill();
+}
+ +

Debes quedarte con la idea básica.  — utilizamos un bucle para ejecutar 100 iteracciones de este código, cada una de las cuales dibuja un círculo en una posición aleatoria de la página. La cantidad de código necesario sería el mismo si dibujáramos 100, 1000, o 10,000 círculos. Solo necesitamos cambiar un número.

+ +

Si no usáramos un bucle aquí, tendríamos que repetir el siguiente código por cada círculo que quisiéramos dibujar:

+ +
ctx.beginPath();
+ctx.fillStyle = 'rgba(255,0,0,0.5)';
+ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ctx.fill();
+ +

Esto sería muy aburrido y difícil de mantener de forma rápida. Los bucles son realmente lo mejor.

+ +

El bucle estándar for

+ +

Exploremos algunos constructores de bucles específicos. El primero, que usarás la mayoría de las veces, es el bucle for - este tiene la siguiente sintaxis:

+ +
for (inicializador; condición de salida; expresión final) {
+  // código a ejecutar
+}
+ +

Aquí tenemos:

+ +
    +
  1. La palabra reservada for, seguida por algunos paréntesis.
    2. +
  2. Dentro de los paréntesis tenemos tres ítems, separados por punto y coma (;): +
      +
    1. Un inicializador - Este es usualmente una variable con un número asignado, que aumenta el número de veces que el bucle ha sijo ejecutado. También se le llama contador o variable de conteo.
      2. +
    2. Una condición de salida - como se mencionó previamente, ésta define cuando el bucle debería detenerse. Generalmente es una expresión que contiene un operador de comparación, una prueba para verificar ue la condición de término o salida ha sido cumplida.
      3. +
    3. Una expresión final - que es siempre evaluada o ejecutada cada vez que el bucle ha completado una iteración. Usualmente sirve para modificar al contador (incrementando su valor o algunas veces disminuyendolo), para aproximarse a la condición de salida.
      4. +
    +
    3. +
  3. Algunos corchetes curvos que contienen un bloque de código - este código se ejecutará cada vez que se repita el bucle.
    4. +
+ +

Observa un ejemplo real para poder entender esto más claramente.

+ +
var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
+var info = 'My cats are called ';
+var para = document.querySelector('p');
+
+for (var i = 0; i < cats.length; i++) {
+  info += cats[i] + ', ';
+}
+
+para.textContent = info;
+ +

Esto nos da el siguiente resultado:

+ + + +

{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Nota: Puedes encontrar este ejemplo de código en GitHub también (además puedes verlo ejecutar en vivo).

+
+ +

Esto muestra un bucle siendo usado para iterar sobre los elementos de un arreglo (matriz), y hacer algo con cada uno de ellos - un patrón muy común en JavaScript. Aquí:

+ +
    +
  1. El iterador, i, inicia en 0 (var i = 0).
    2. +
  2. Se le ha dicho que debe ejecutarse hasta que no sea menor que la longitud del arreglo cats. Esto es importante  - la condición de salida muestra la condicion bajo la cual el bucle seguirá iterando. Así, en este caso, mientras i < cats.length sea verdadero, el bucle seguirá ejecutándose.
    3. +
  3. Dentro del bucle, concatenamos el elemento del bucle actual (cats[i] es cats[lo que sea i en ese momento]) junto con una coma y un espacio, al final de la variable info. Así: +
      +
    1. Durante la primera ejecución,  i = 0, así cats[0] + ', ' se concatenará con la información ("Bill, ").
      2. +
    2. Durante la segunda ejecución, i = 1, así cats[1] + ', ' agregará el siguiente nombre ("Jeff, ").
      3. +
    3. Y así sucesivamente. Después de cada vez que se ejecute el bucle, se incrementará en 1 el valod de i (i++), entonces el proceso comenzará de nuevo.
      4. +
    +
    4. +
  4. Cuando i sea igual a cats.length, el bucle se detendrá, y el navegador se moverá al siguiente segmento de código bajo el bucle.
    5. +
+ +
+

Nota: Hemos programado la condición de salidad como i < cats.length, y no como i <= cats.length, porque los computadores cuentan desde 0, no 1 - inicializamos la variable i en 0, para llegar a i = 4 (el índice del último elemento del arreglo). cats.length responde 5, ya que existen 5 elementos en el arreglo, pero no queremos que i = 5, dado que respondería undefined para el último elemento (no existe un elemento en el arreglo con un índice 5). for the last item (there is no array item with an index of 5). Por ello, queremos llegar a 1 menos que cats.length (i <), que no es lo mismo que cats.length (i <=).

+
+ +
+

Nota: Un error común con la condición de salida es utilizar el comparador "igual a" (===) en vez de "menor o igual a" (<=). Si queremos que nuestro bucle se ejecute hasta que  i = 5, la condición de salida debería ser i <= cats.length. Si la declaramos i === cats.length, el bucle no debería ejecutarse , porque i no es igual a 5 en la primera iteración del bucle, por lo que debería detenerse inmediatamente.

+
+ +

Un pequeño problema que se presenta es que la frase de salida final no está muy bien formada:

+ +
+

My cats are called Bill, Jeff, Pete, Biggles, Jasmin,

+
+ +

Idealmente querríamos cambiar la concatenacion al final de la última iteracion del bucle, así no tendríamos una coma en el final de la frase. Bueno, no hay problema - podemos insertar un condicional dentro de nuestro bucle para solucionar este caso especial:

+ +
for (var i = 0; i < cats.length; i++) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+}
+ +
+

Note: You can find this example code on GitHub too (also see it running live).

+
+ +
+

Importante: Con for - como con todos los bucles - debes estar seguro de que el inicializador es repetido hasta que eventualemtne alcance la condición de salida. Si no, el bucle seguirá repitiéndose indefinidamente, y puede que el navegador lo fuerce a detenerse o se interrumpa. Esto se denomina bucle infinito.

+
+ +

Salir de un bucle con break

+ +

Si deseas salir de un bucle antes de que se hayan completado todas las iteraciones, puedes usar la declaración break. Ya la vimos en el artículo previo cuando revisamos la declaración switch - cuando un caso en una declaración switch coincide con la expresión de entrada, la declaración break inmediatamente sale de la declaración switch y avanza al código que se encuentra después.

+ +

Ocurre lo mismo con los bucles - una declaración break saldrá inmediatamente del bucle y hará que el navegador siga con el código que sigue después.

+ +

Digamos que queremos buscar a través de un arreglo de contactos y números telefónicos y retornar sólo el número que queríamos encontrar. primero, un simple HTML -  un {{htmlelement("input")}} de texto que nos permita ingresar un nombre para buscar, un elemento {{htmlelement("button")}} para enviar la búsqueda, y un elemento {{htmlelement("p")}} para mostrar el resultado:

+ +
<label for="search">Search by contact name: </label>
+<input id="search" type="text">
+<button>Search</button>
+
+<p></p>
+ +

Ahora en el JavaScript:

+ +
var contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
+var para = document.querySelector('p');
+var input = document.querySelector('input');
+var btn = document.querySelector('button');
+
+btn.addEventListener('click', function() {
+  var searchName = input.value;
+  input.value = '';
+  input.focus();
+  for (var i = 0; i < contacts.length; i++) {
+    var splitContact = contacts[i].split(':');
+    if (splitContact[0] === searchName) {
+      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+      break;
+    } else {
+      para.textContent = 'Contact not found.';
+    }
+  }
+});
+ + + +

{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
    +
  1. First of all we have some variable definitions — we have an array of contact information, with each item being a string containing a name and phone number separated by a colon.
    2. +
  2. Next, we attach an event listener to the button (btn), so that when it is pressed, some code is run to perform the search and return the results.
    3. +
  3. We store the value entered into the text input in a variable called searchName, before then emptying the text input and focusing it again, ready for the next search.
    4. +
  4. Now onto the interesting part, the for loop: +
      +
    1. We start the counter at 0, run the loop until the counter is no longer less than contacts.length, and increment i by 1 after each iteration of the loop.
      2. +
    2. Inside the loop we first split the current contact (contacts[i]) at the colon character, and store the resulting two values in an array called splitContact.
      3. +
    3. We then use a conditional statement to test whether splitContact[0] (the contact's name) is equal to the inputted searchName. If it is, we enter a string into the paragraph to report what the contact's number is, and use break to end the loop.
      4. +
    +
    5. +
  5. If the contact name does not match the entered search, the paragraph text is set to "Contact not found.", and the loop continues iterating.
    6. +
+ +
+

Note: You can view the full source code on GitHub too (also see it running live).

+
+ +

Skipping iterations with continue

+ +

The continue statement works in a similar manner to break, but instead of breaking out of the loop entirely, it skips to the next iteration of the loop. Let's look at another example that takes a number as an input, and returns only the numbers that are squares of integers (whole numbers).

+ +

The HTML is basically the same as the last example — a simple text input, and a paragraph for output. The JavaScript is mostly the same too, although the loop itself is a bit different:

+ +
var num = input.value;
+
+for (var i = 1; i <= num; i++) {
+  var sqRoot = Math.sqrt(i);
+  if (Math.floor(sqRoot) !== sqRoot) {
+    continue;
+  }
+
+  para.textContent += i + ' ';
+}
+ +

Here's the output:

+ + + +

{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
    +
  1. In this case, the input should be a number (num). The for loop is given a counter starting at 1 (as we are not interested in 0 in this case), an exit condition that says the loop will stop when the counter becomes bigger than the input num, and an iterator that adds 1 to the counter each time.
    2. +
  2. Inside the loop, we find the square root of each number using Math.sqrt(i), then check whether the square root is an integer by testing whether it is the same as itself when it has been rounded down to the nearest integer (this is what Math.floor() does to the number it is passed).
    3. +
  3. If the square root and the rounded down square root do not equal one another (!==), it means that the square root is not an integer, so we are not interested in it. In such a case, we use the continue statement to skip on to the next loop iteration without recording the number anywhere.
    4. +
  4. If the square root IS an integer, we skip past the if block entirely so the continue statement is not executed; instead, we concatenate the current i value plus a space on to the end of the paragraph content.
    5. +
+ +
+

Note: You can view the full source code on GitHub too (also see it running live).

+
+ +

while and do ... while

+ +

for is not the only type of loop available in JavaScript. There are actually many others and, while you don't need to understand all of these now, it is worth having a look at the structure of a couple of others so that you can recognize the same features at work in a slightly different way.

+ +

First, let's have a look at the while loop. This loop's syntax looks like so:

+ +
initializer
+while (exit-condition) {
+  // code to run
+
+  final-expression
+}
+ +

This works in a very similar way to the for loop, except that the initializer variable is set before the loop, and the final-expression is included inside the loop after the code to run — rather than these two items being included inside the parentheses. The exit-condition is included inside the parentheses, which are preceded by the while keyword rather than for.

+ +

The same three items are still present, and they are still defined in the same order as they are in the for loop — this makes sense, as you still have to have an initializer defined before you can check whether it has reached the exit-condition; the final-condition is then run after the code inside the loop has run (an iteration has been completed), which will only happen if the exit-condition has still not been reached.

+ +

Let's have a look again at our cats list example, but rewritten to use a while loop:

+ +
var i = 0;
+
+while (i < cats.length) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+}
+ +
+

Note: This still works just the same as expected — have a look at it running live on GitHub (also view the full source code).

+
+ +

The do...while loop is very similar, but provides a variation on the while structure:

+ +
initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)
+ +

In this case, the initializer again comes first, before the loop starts. The do keyword directly precedes the curly braces containing the code to run and the final-expression.

+ +

The differentiator here is that the exit-condition comes after everything else, wrapped in parentheses and preceded by a while keyword. In a do...while loop, the code inside the curly braces is always run once before the check is made to see if it should be executed again (in while and for, the check comes first, so the code might never be executed).

+ +

Let's rewrite our cat listing example again to use a do...while loop:

+ +
var i = 0;
+
+do {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+} while (i < cats.length);
+ +
+

Note: Again, this works just the same as expected — have a look at it running live on GitHub (also view the full source code).

+
+ +
+

Important: With while and do...while — as with all loops — you must make sure that the initializer is iterated so that it eventually reaches the exit condition. If not, the loop will go on forever, and either the browser will force it to stop, or it will crash. This is called an infinite loop.

+
+ +

Active learning: Launch countdown!

+ +

In this exercise, we want you to print out a simple launch countdown to the output box, from 10 down to Blast off. Specifically, we want you to:

+ + + +

If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.

+ + + +

{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}

+ +

Active learning: Filling in a guest list

+ +

In this exercise, we want you to take a list of names stored in an array, and put them into a guest list. But it's not quite that easy — we don't want to let Phil and Lola in because they are greedy and rude, and always eat all the food! We have two lists, one for guests to admit, and one for guests to refuse.

+ +

Specifically, we want you to:

+ + + +

We've already provided you with:

+ + + +

Extra bonus question — after completing the above tasks successfully, you will be left with two lists of names, separated by commas, but they will be untidy — there will be a comma at the end of each one. Can you work out how to write lines that slice the last comma off in each case, and add a full stop to the end? Have a look at the Useful string methods article for help.

+ +

If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.

+ + + +

{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}

+ +

Which loop type should you use?

+ +

For basic uses, for, while, and do...while loops are largely interchangeable. They can all be used to solve the same problems, and which one you use will largely depend on your personal preference — which one you find easiest to remember or most intuitive. Let's have a look at them again.

+ +

First for:

+ +
for (initializer; exit-condition; final-expression) {
+  // code to run
+}
+ +

while:

+ +
initializer
+while (exit-condition) {
+  // code to run
+
+  final-expression
+}
+ +

and finally do...while:

+ +
initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)
+ +

We would recommend for, at least to begin with, as it is probably the easiest for remembering everything — the initializer, exit-condition, and final-expression all have to go neatly into the parentheses, so it is easy to see where they are and check that you aren't missing them.

+ +
+

Note: There are other loop types/features too, which are useful in advanced/specialized situations and beyond the scope of this article. If you want to go further with your loop learning, read our advanced Loops and iteration guide.

+
+ +

Conclusion

+ +

This article has revealed to you the basic concepts behind, and different options available when, looping code in JavaScript. You should now be clear on why loops are a good mechanism for dealing with repetitive code, and be raring to use them in your own examples!

+ +

If there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}

+ +

In this module

+ + +<gdiv></gdiv> diff --git "a/files/es/learn/javascript/client-side_web_apis/introducci\303\263n/index.html" "b/files/es/learn/javascript/client-side_web_apis/introducci\303\263n/index.html" deleted file mode 100644 index fc73d4ebc9..0000000000 --- "a/files/es/learn/javascript/client-side_web_apis/introducci\303\263n/index.html" +++ /dev/null @@ -1,274 +0,0 @@ ---- -title: Introducción a las APIs web -slug: Learn/JavaScript/Client-side_web_APIs/Introducción -translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}
- -

En primer lugar empezaremos echando un vistazo a las APIS desde un nivel superior — ¿qué son, cómo funcionan, cómo usarlas en el código, y cómo están estructuradas?. También echaremos un vistazo a cuáles son los principales tipos de APIs, y para qué se usan.

- - - - - - - - - - - - -
Pre requisitos:Conocimientos básicos de informática, principios básicos de HTML, CSS y JavaScript (ver primeros pasos, bloques de construcción, objetos JavaScript).
Objetivo:Familiarizarse con las APIs, saber qué pueden hacer y cómo usarlas en tu código.
- -

¿Qué son las APIs?

- -

Las Interfaces de Programacion de Aplicaciones (APIs por sus siglas en inglés) son construcciones disponibles en los lenguajes de programación que permiten a los desarrolladores crear funcionalidades complejas de una manera simple. Estas abstraen el código más complejo para proveer una sintaxis más fácil de usar en su lugar.

- -

Como ejemplo, piensa en el suministro de electricidad de tu casa, apartamento, o cualquier otro edificio. Si quieres usar un electrodoméstico, simplemente lo conectas en un enchufe y funciona. No intentas conectarlo directamente a la fuente de alimentación — hacerlo sería muy ineficiente y, si no eres electricista, dificil y peligroso.

- -

- -

Fuente de la imagen: Overloaded plug socket por The Clear Communication People, en Flickr.

- -

De la misma manera, si quisieras programar gráficos 3D, sería mucho más facil hacerlo usando una API escrita en un lenguaje de alto nivel como JavaScript o Python, en lugar de intentar escribir código de bajo nivel (por ejemplo: C o C++) que controle directamente la GPU del equipo u otras funciones gráficas.

- -
-

Nota: Consulta también la entrada API en el glosario para una descripción más detallada.

-
- -

APIs en JavaScript del lado cliente

- -

JavaScript del lado cliente, particularmente, tiene muchas APIs disponibles — estas no son parte del lenguaje en sí, sino que están construidas sobre el núcleo de este lenguaje de programación, proporcionándote superpoderes adicionales para usar en tu código. Por lo general, se dividen en dos categorías:

- - - -

- -

Relacion entre JavaScript, APIs, y otras herramientas de JavaScript

- -

Anteriormente hablamos sobre qué son las APIs de JavaScript del lado cliente y cómo se relacionan con este lenguaje. Recapitulemos ahora para dejarlo claro, y veamos también dónde encajan otras herramientas de JavaScript:

- - - -

¿Qué pueden hacer las APIs?

- -

Hay una gran cantidad de APIs disponibles en los navegadores modernos que te permiten hacer una gran variedad de cosas en tu código. Puedes verlo echando un vistazo al índice de APIs de MDN.

- -

APIs de navegador más comunes

- -

En particular, las categorías más comunes de APIs de navegador más usadas (y que trataremos con mayor detalle en este módulo) son:

- - - -

APIs populares de terceros

- -

Existe una gran variedad de APIs de terceros, algunas de las más populares de las que querrás hacer uso en algún momento son:

- - - -
-

Nota: puedes encontrar información de una gran cantidad de APIs de terceros en el Programmable Web API directory.

-
- -

¿Cómo funcionan las APIs?

- -

Las distintas APIs de JavaScript funcionan de forma ligeramente diferente, pero generalmente tienen características similares y una forma parecida en cómo trabajan.

- -

Están basadas en objetos

- -

Las APIs interactúan con tu código usando uno o más Objetos JavaScript, que sirven como contenedores para los datos que usa la API (contenidos en las propiedades del objeto), y la funcionalidad que la API provee (contenida en los métodos del objeto).

- -
-

Nota: si no estás familiarizado en cómo trabajar con objetos, deberías volver atrás y revisar el módulo de objetos JavaScript antes de seguir.

-
- -

Volvamos al ejemplo de la API de Geolocalización, que es una API muy simple que consiste en unos pocos objetos sencillos:

- - - -

¿Cómo interactúan estos objetos? Si miras a nuestro ejemplo maps-example.html (ver también en vivo), encontrarás el siguiente código:

- -
navigator.geolocation.getCurrentPosition(function(position) {
-  var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
-  var myOptions = {
-    zoom: 8,
-    center: latlng,
-    mapTypeId: google.maps.MapTypeId.TERRAIN,
-    disableDefaultUI: true
-  }
-  var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
-});
- -
-

Nota: cuando cargues por primera vez el ejemplo de arriba, se te mostrará un mensaje preguntando si deseas compartir tu localización con esta aplicación (ver la sección {{anch("They have additional security mechanisms where appropriate")}} que se encuentra más adelante en este artículo). Deberás estar de acuerdo con esto para poder ver tu localización en el mapa. Si aún así sigues sin ver tu localización, tal vez debas establecer los permisos manualmente; lo puedes hacer de varias formas dependiendo del navegador que estés usando; por ejemplo en Firefox debes ir a  > Tools > Page Info > Permissions, y cambiar la configuración para Share Location; en Chrome ve a Settings > Privacy > Show advanced settings > Content settings y cambia las opciones para Location.

-
- -

Primero queremos usar el método {{domxref("Geolocation.getCurrentPosition()")}} para retornar la posición actuali de nuestro dispositivo. El objeto {{domxref("Geolocation")}} del navegador es accedido llamando a la propiedad {{domxref("Navigator.geolocation")}}, así que comenzaremos haciendo:

- -
navigator.geolocation.getCurrentPosition(function(position) { ... });
- -

Lo que es equivalente a hacer algo como:

- -
var myGeo = navigator.geolocation;
-myGeo.getCurrentPosition(function(position) { ... });
- -

Pero podemos usar la sintaxis con punto para concatener nuestros accesos a propiedades/métodos reduciendo el número de líneas que tenemos que escribir.

- -

El método {{domxref("Geolocation.getCurrentPosition()")}} solamente tiene un parámetroobligatorio, que es una función anónima que se ejecutará cuando se recupere correctamente la ubicación del dispositivo. Esta función tiene un parámetro, que contiene un objeto {{domxref("Position")}} con la representación de los datos de la posición actual.

- -
-

Nota: una función que es tomada por otra función como argumento es conocida con el nombre de callback function.

-
- -

Este patrón de invocar una función solamente cuando una operación ha sido completada es muy común en las APIs de Javascript — asegurando que una operación ha sido completada antes de intentar usar los datos que retorna en otra operación. Estas operaciones se llaman operaciones asíncronas. Puesto que obtener la posición actual del dispositivo recae en un componente externo (el GPS del dispositivo u otro hardware de geolocalización), no podemos asegurar que se haga a tiempo para usar inmediatamente los datos. Por tanto, algo así no funcionará:

- -
var position = navigator.geolocation.getCurrentPosition();
-var myLatitude = position.coords.latitude;
- -

Si la primera línea no ha retornado todavía su resultado, la segunda línea lanzará un error puesto que los datos de posición no estarán disponibles. Por esa razón, las APIs que tienen operaciones asíncronas se diseñan para usar {{glossary("callback function")}}s, o el sistema más moderno de Promises, que se ha introducido en ECMAScript 6 y se está usando mucho en las APIs más nuevas.

- -

Vamos a combinar la API de geolocalización con una API de terceros — la API de Google Maps — que se usa para dibujar la localización retornada por getCurrentPosition() en un mapa de Google. Haremos disponible esta API en nuestra página vinculándonos a ella — encontrarás esta línea en el HTML:

- -
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>
- -

Para usar la API, primero creamos una instancia del objeto LatLng usando el constructor google.maps.LatLng(), que toma los valores de nuestra {{domxref("Coordinates.latitude")}} y {{domxref("Coordinates.longitude")}} geolocalizada como parámetros:

- -
var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
- -

Este objeto quedará establecido como el valor de la propiedad center de un objeto de opciones que hemos llamado myOptions. Entonces crearemos una instancia de objeto para representar nuestro mapa llamando al constructor de google.maps.Map(), pasándole sus dos parámetros — una referencia al elemento {{htmlelement("div")}} donde queremos presentar el mapa (con ID map_canvas), y el objeto de opciones que acabamos de definir.

- -
var myOptions = {
-  zoom: 8,
-  center: latlng,
-  mapTypeId: google.maps.MapTypeId.TERRAIN,
-  disableDefaultUI: true
-}
-
-var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
- -

Una vez hecho, veremos dibujado nuestro mapa.

- -

Este último bloque de código muestra dos patrones habituales que veremos en muchas APIs. Primero, los objetos de las APIs habitualmente disponen de constructores, que son invocados para crear instancias de esos objetos que que habitualmente usaremos en nuestros programas. Segundo, los objetos de las APIs a menudo ofrecen múltiples opciones que pueden ser adaptadas para obtener exactamente lo que queremos en nuestro programa. Los constructores de las APIs habitualmente aceptan un objeto de opciones como parámetro, que es donde se deben establecer dichas opciones.

- -
-

Nota: no te preocupes si no entiendes todos los detalles de este ejemplo inmediantamente. Los repasaremos usando APIs de terceros con más detalle en un artículo futuro.

-
- -

Tienen puntos de acceso reconocibles

- -

Cuando uses una API, debes estar seguro que conoces dónde están los puntos de acceso para ella. En la API de Geolocalización esto es bastante sencillo  — es la propiedad {{domxref("Navigator.geolocation")}}, que retorna el objeto del navegador {{domxref("Geolocation")}} que contiene todos los métodos útiles de geolocalización disponibles en su interior.

- -

La API del Modelo de Objetos del Navegador (DOM) tiene un punto de acceso todavía más simple — sus características las podemos encontrar colgando del objeto {{domxref("Document")}}, o una instancia de un elemento HTML que queremos modificar de alguna forma, por ejemplo:

- -
var em = document.createElement('em'); // crear un nuevo elemento em
-var para = document.querySelector('p'); // referencia a un elemento p existente
-em.textContent = 'Hello there!'; // dar al em algo de contenido textual
-para.appendChild(em); // ubicar el em dentro del párrafo
- -

Otras APIs tienen puntos de acceso ligeramente más complejos, que a menudo implican crear un contexto específico para escribir el código de la API. Por ejemplo, el objeto de contexto de la API Canvas se crea obteniendo una referencia al elemento {{htmlelement("canvas")}} en el que quieres dibujar, y a continuación invocando su método {{domxref("HTMLCanvasElement.getContext()")}}:

- -
var canvas = document.querySelector('canvas');
-var ctx = canvas.getContext('2d');
- -

Cualquier cosa que queramos hacerle al canvas, se conseguirá llamando a las propiedades y métodos del objeto de contexto (que es una instancia de {{domxref("CanvasRenderingContext2D")}}), por ejemplo:

- -
Ball.prototype.draw = function() {
-  ctx.beginPath();
-  ctx.fillStyle = this.color;
-  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
-  ctx.fill();
-};
- -
-

Nota: puedes ver este código en acción en nuetro bouncing balls demo (y también verlo funcionando).

-
- -

Usan eventos para manejar cambios en su estado

- -

Ya hemos discutido anteriormente los eventos en este curso, en nuestro artículo de Introducción a los eventos — este artículo detalla qué son los eventos del lado del cliente y cómo se usan en el código. Si no estás familiarizado en cómo se trabaja con la API de eventos del lado del cliente, deberías ir a consultar este artículo antes de continuar.

- -

Algunas APIs web no contienen eventos, pero algunas otras sí contienen un buen número de ellos. Las propiedades para manejarlos, que nos permiten ejecutar funciones cuando los eventos se producen, generalmente se listan en nuestro material de referencia en secciones de "Manejadores de Eventos" separadas. Como ejemplo simple, instancias del objeto XMLHttpRequest (cada uno representa una petición HTTP al servidor para recuperar un nuevo recurso de algún tipo) tienen un número de eventos disponibles, por ejemplo el evento load que es disparado cuando una respuesta ha sido retornada satisfactoriamente conteniendo el recurso solicitado, y ahora está disponible.

- -

El siguiente código aporta un ejemplo simple de cómo se debe usar esto:

- - - -
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
-var request = new XMLHttpRequest();
-request.open('GET', requestURL);
-request.responseType = 'json';
-request.send();
-
-request.onload = function() {
-  var superHeroes = request.response;
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
- -
-

Nota: puedes ver este código en acción en nuestro ejemplo ajax.html (verlo en vivo).

-
- -

Las primeras cinco líneas especifican la licalización del recurso que queremos recuperar, se crea una nueva instancia del objeto con la petición usando el constructor XMLHttpRequest(), se abre una petición HTTP GET para recuperar el recurso especificado, se indica que la respuesta debería ser enviada en formato JSON, y finalmente se envía la petición.

- -

El manejador onload especifica entonces qué hacer con la respuesta. Ya sabemos que la respuesta será retornada satisfactoriamente y estará disponible tras producirse el evento load (a menos que haya sucedido un error), así que salvamos la respuesta que contiene el código JSON retornado en la variable superHeroes, luego lo pasamos a dos funciones diferentes para un procesado posterior.

- -

Tienen mecanismos adicionales de seguridad donde sea necesario

- -

Las características de las WebAPI están sujetas a las mismas consideraciones de seguridad que JavaScript y otras tecnologías web (por ejemplo same-origin policy), pero a veces tienen mecanismos adicionales de seguridad. Por ejemplo, algunas de las WebAPIs más modernas solamente funcionan en páginas servidas mediante HTTPS debido a que transmiten información potencialmente sensible (algunos ejemplos son Service Workers y Push).

- -

Además, algunas WebAPIs solicitarán permiso al usuario para ser activadas cuando se produzcan las llamadas desde el código. Como ejemplo, habrás observado un cuadro de diálogo como éste al probar nuestro ejemplo anterior de Geolocalización:

- -

- -

La Notifications API solicita los permisos de una forma parecida:

- -

- -

Estos diálogos solicitando permiso se muestran al usuario por motivos de seguridad — si no estuvieran, los sitios podrían rastrear la localización sin que el usuario lo supiera o bombardearlo con un montón de notificaciones molestas.

- -

Resumen

- -

En este punto, deberías tener ya una buena idea de los que son las APIs, cómo trabajan y qué puedes hacer con ellas en tu código JavaScript. Seguramente estarás con ganas de comenzar a hacer cosas divertidas con algunas APIs específicas, así que ¡vamos allá! A continuación veremos cómo manipular documentos con el Modelo de Objetos del Documento (DOM).

- -

{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}

- -

En este módulo

- - diff --git a/files/es/learn/javascript/client-side_web_apis/introduction/index.html b/files/es/learn/javascript/client-side_web_apis/introduction/index.html new file mode 100644 index 0000000000..fc73d4ebc9 --- /dev/null +++ b/files/es/learn/javascript/client-side_web_apis/introduction/index.html @@ -0,0 +1,274 @@ +--- +title: Introducción a las APIs web +slug: Learn/JavaScript/Client-side_web_APIs/Introducción +translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

En primer lugar empezaremos echando un vistazo a las APIS desde un nivel superior — ¿qué son, cómo funcionan, cómo usarlas en el código, y cómo están estructuradas?. También echaremos un vistazo a cuáles son los principales tipos de APIs, y para qué se usan.

+ + + + + + + + + + + + +
Pre requisitos:Conocimientos básicos de informática, principios básicos de HTML, CSS y JavaScript (ver primeros pasos, bloques de construcción, objetos JavaScript).
Objetivo:Familiarizarse con las APIs, saber qué pueden hacer y cómo usarlas en tu código.
+ +

¿Qué son las APIs?

+ +

Las Interfaces de Programacion de Aplicaciones (APIs por sus siglas en inglés) son construcciones disponibles en los lenguajes de programación que permiten a los desarrolladores crear funcionalidades complejas de una manera simple. Estas abstraen el código más complejo para proveer una sintaxis más fácil de usar en su lugar.

+ +

Como ejemplo, piensa en el suministro de electricidad de tu casa, apartamento, o cualquier otro edificio. Si quieres usar un electrodoméstico, simplemente lo conectas en un enchufe y funciona. No intentas conectarlo directamente a la fuente de alimentación — hacerlo sería muy ineficiente y, si no eres electricista, dificil y peligroso.

+ +

+ +

Fuente de la imagen: Overloaded plug socket por The Clear Communication People, en Flickr.

+ +

De la misma manera, si quisieras programar gráficos 3D, sería mucho más facil hacerlo usando una API escrita en un lenguaje de alto nivel como JavaScript o Python, en lugar de intentar escribir código de bajo nivel (por ejemplo: C o C++) que controle directamente la GPU del equipo u otras funciones gráficas.

+ +
+

Nota: Consulta también la entrada API en el glosario para una descripción más detallada.

+
+ +

APIs en JavaScript del lado cliente

+ +

JavaScript del lado cliente, particularmente, tiene muchas APIs disponibles — estas no son parte del lenguaje en sí, sino que están construidas sobre el núcleo de este lenguaje de programación, proporcionándote superpoderes adicionales para usar en tu código. Por lo general, se dividen en dos categorías:

+ + + +

+ +

Relacion entre JavaScript, APIs, y otras herramientas de JavaScript

+ +

Anteriormente hablamos sobre qué son las APIs de JavaScript del lado cliente y cómo se relacionan con este lenguaje. Recapitulemos ahora para dejarlo claro, y veamos también dónde encajan otras herramientas de JavaScript:

+ + + +

¿Qué pueden hacer las APIs?

+ +

Hay una gran cantidad de APIs disponibles en los navegadores modernos que te permiten hacer una gran variedad de cosas en tu código. Puedes verlo echando un vistazo al índice de APIs de MDN.

+ +

APIs de navegador más comunes

+ +

En particular, las categorías más comunes de APIs de navegador más usadas (y que trataremos con mayor detalle en este módulo) son:

+ + + +

APIs populares de terceros

+ +

Existe una gran variedad de APIs de terceros, algunas de las más populares de las que querrás hacer uso en algún momento son:

+ + + +
+

Nota: puedes encontrar información de una gran cantidad de APIs de terceros en el Programmable Web API directory.

+
+ +

¿Cómo funcionan las APIs?

+ +

Las distintas APIs de JavaScript funcionan de forma ligeramente diferente, pero generalmente tienen características similares y una forma parecida en cómo trabajan.

+ +

Están basadas en objetos

+ +

Las APIs interactúan con tu código usando uno o más Objetos JavaScript, que sirven como contenedores para los datos que usa la API (contenidos en las propiedades del objeto), y la funcionalidad que la API provee (contenida en los métodos del objeto).

+ +
+

Nota: si no estás familiarizado en cómo trabajar con objetos, deberías volver atrás y revisar el módulo de objetos JavaScript antes de seguir.

+
+ +

Volvamos al ejemplo de la API de Geolocalización, que es una API muy simple que consiste en unos pocos objetos sencillos:

+ + + +

¿Cómo interactúan estos objetos? Si miras a nuestro ejemplo maps-example.html (ver también en vivo), encontrarás el siguiente código:

+ +
navigator.geolocation.getCurrentPosition(function(position) {
+  var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+  var myOptions = {
+    zoom: 8,
+    center: latlng,
+    mapTypeId: google.maps.MapTypeId.TERRAIN,
+    disableDefaultUI: true
+  }
+  var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
+});
+ +
+

Nota: cuando cargues por primera vez el ejemplo de arriba, se te mostrará un mensaje preguntando si deseas compartir tu localización con esta aplicación (ver la sección {{anch("They have additional security mechanisms where appropriate")}} que se encuentra más adelante en este artículo). Deberás estar de acuerdo con esto para poder ver tu localización en el mapa. Si aún así sigues sin ver tu localización, tal vez debas establecer los permisos manualmente; lo puedes hacer de varias formas dependiendo del navegador que estés usando; por ejemplo en Firefox debes ir a  > Tools > Page Info > Permissions, y cambiar la configuración para Share Location; en Chrome ve a Settings > Privacy > Show advanced settings > Content settings y cambia las opciones para Location.

+
+ +

Primero queremos usar el método {{domxref("Geolocation.getCurrentPosition()")}} para retornar la posición actuali de nuestro dispositivo. El objeto {{domxref("Geolocation")}} del navegador es accedido llamando a la propiedad {{domxref("Navigator.geolocation")}}, así que comenzaremos haciendo:

+ +
navigator.geolocation.getCurrentPosition(function(position) { ... });
+ +

Lo que es equivalente a hacer algo como:

+ +
var myGeo = navigator.geolocation;
+myGeo.getCurrentPosition(function(position) { ... });
+ +

Pero podemos usar la sintaxis con punto para concatener nuestros accesos a propiedades/métodos reduciendo el número de líneas que tenemos que escribir.

+ +

El método {{domxref("Geolocation.getCurrentPosition()")}} solamente tiene un parámetroobligatorio, que es una función anónima que se ejecutará cuando se recupere correctamente la ubicación del dispositivo. Esta función tiene un parámetro, que contiene un objeto {{domxref("Position")}} con la representación de los datos de la posición actual.

+ +
+

Nota: una función que es tomada por otra función como argumento es conocida con el nombre de callback function.

+
+ +

Este patrón de invocar una función solamente cuando una operación ha sido completada es muy común en las APIs de Javascript — asegurando que una operación ha sido completada antes de intentar usar los datos que retorna en otra operación. Estas operaciones se llaman operaciones asíncronas. Puesto que obtener la posición actual del dispositivo recae en un componente externo (el GPS del dispositivo u otro hardware de geolocalización), no podemos asegurar que se haga a tiempo para usar inmediatamente los datos. Por tanto, algo así no funcionará:

+ +
var position = navigator.geolocation.getCurrentPosition();
+var myLatitude = position.coords.latitude;
+ +

Si la primera línea no ha retornado todavía su resultado, la segunda línea lanzará un error puesto que los datos de posición no estarán disponibles. Por esa razón, las APIs que tienen operaciones asíncronas se diseñan para usar {{glossary("callback function")}}s, o el sistema más moderno de Promises, que se ha introducido en ECMAScript 6 y se está usando mucho en las APIs más nuevas.

+ +

Vamos a combinar la API de geolocalización con una API de terceros — la API de Google Maps — que se usa para dibujar la localización retornada por getCurrentPosition() en un mapa de Google. Haremos disponible esta API en nuestra página vinculándonos a ella — encontrarás esta línea en el HTML:

+ +
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>
+ +

Para usar la API, primero creamos una instancia del objeto LatLng usando el constructor google.maps.LatLng(), que toma los valores de nuestra {{domxref("Coordinates.latitude")}} y {{domxref("Coordinates.longitude")}} geolocalizada como parámetros:

+ +
var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+ +

Este objeto quedará establecido como el valor de la propiedad center de un objeto de opciones que hemos llamado myOptions. Entonces crearemos una instancia de objeto para representar nuestro mapa llamando al constructor de google.maps.Map(), pasándole sus dos parámetros — una referencia al elemento {{htmlelement("div")}} donde queremos presentar el mapa (con ID map_canvas), y el objeto de opciones que acabamos de definir.

+ +
var myOptions = {
+  zoom: 8,
+  center: latlng,
+  mapTypeId: google.maps.MapTypeId.TERRAIN,
+  disableDefaultUI: true
+}
+
+var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
+ +

Una vez hecho, veremos dibujado nuestro mapa.

+ +

Este último bloque de código muestra dos patrones habituales que veremos en muchas APIs. Primero, los objetos de las APIs habitualmente disponen de constructores, que son invocados para crear instancias de esos objetos que que habitualmente usaremos en nuestros programas. Segundo, los objetos de las APIs a menudo ofrecen múltiples opciones que pueden ser adaptadas para obtener exactamente lo que queremos en nuestro programa. Los constructores de las APIs habitualmente aceptan un objeto de opciones como parámetro, que es donde se deben establecer dichas opciones.

+ +
+

Nota: no te preocupes si no entiendes todos los detalles de este ejemplo inmediantamente. Los repasaremos usando APIs de terceros con más detalle en un artículo futuro.

+
+ +

Tienen puntos de acceso reconocibles

+ +

Cuando uses una API, debes estar seguro que conoces dónde están los puntos de acceso para ella. En la API de Geolocalización esto es bastante sencillo  — es la propiedad {{domxref("Navigator.geolocation")}}, que retorna el objeto del navegador {{domxref("Geolocation")}} que contiene todos los métodos útiles de geolocalización disponibles en su interior.

+ +

La API del Modelo de Objetos del Navegador (DOM) tiene un punto de acceso todavía más simple — sus características las podemos encontrar colgando del objeto {{domxref("Document")}}, o una instancia de un elemento HTML que queremos modificar de alguna forma, por ejemplo:

+ +
var em = document.createElement('em'); // crear un nuevo elemento em
+var para = document.querySelector('p'); // referencia a un elemento p existente
+em.textContent = 'Hello there!'; // dar al em algo de contenido textual
+para.appendChild(em); // ubicar el em dentro del párrafo
+ +

Otras APIs tienen puntos de acceso ligeramente más complejos, que a menudo implican crear un contexto específico para escribir el código de la API. Por ejemplo, el objeto de contexto de la API Canvas se crea obteniendo una referencia al elemento {{htmlelement("canvas")}} en el que quieres dibujar, y a continuación invocando su método {{domxref("HTMLCanvasElement.getContext()")}}:

+ +
var canvas = document.querySelector('canvas');
+var ctx = canvas.getContext('2d');
+ +

Cualquier cosa que queramos hacerle al canvas, se conseguirá llamando a las propiedades y métodos del objeto de contexto (que es una instancia de {{domxref("CanvasRenderingContext2D")}}), por ejemplo:

+ +
Ball.prototype.draw = function() {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+};
+ +
+

Nota: puedes ver este código en acción en nuetro bouncing balls demo (y también verlo funcionando).

+
+ +

Usan eventos para manejar cambios en su estado

+ +

Ya hemos discutido anteriormente los eventos en este curso, en nuestro artículo de Introducción a los eventos — este artículo detalla qué son los eventos del lado del cliente y cómo se usan en el código. Si no estás familiarizado en cómo se trabaja con la API de eventos del lado del cliente, deberías ir a consultar este artículo antes de continuar.

+ +

Algunas APIs web no contienen eventos, pero algunas otras sí contienen un buen número de ellos. Las propiedades para manejarlos, que nos permiten ejecutar funciones cuando los eventos se producen, generalmente se listan en nuestro material de referencia en secciones de "Manejadores de Eventos" separadas. Como ejemplo simple, instancias del objeto XMLHttpRequest (cada uno representa una petición HTTP al servidor para recuperar un nuevo recurso de algún tipo) tienen un número de eventos disponibles, por ejemplo el evento load que es disparado cuando una respuesta ha sido retornada satisfactoriamente conteniendo el recurso solicitado, y ahora está disponible.

+ +

El siguiente código aporta un ejemplo simple de cómo se debe usar esto:

+ + + +
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
+var request = new XMLHttpRequest();
+request.open('GET', requestURL);
+request.responseType = 'json';
+request.send();
+
+request.onload = function() {
+  var superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
+ +
+

Nota: puedes ver este código en acción en nuestro ejemplo ajax.html (verlo en vivo).

+
+ +

Las primeras cinco líneas especifican la licalización del recurso que queremos recuperar, se crea una nueva instancia del objeto con la petición usando el constructor XMLHttpRequest(), se abre una petición HTTP GET para recuperar el recurso especificado, se indica que la respuesta debería ser enviada en formato JSON, y finalmente se envía la petición.

+ +

El manejador onload especifica entonces qué hacer con la respuesta. Ya sabemos que la respuesta será retornada satisfactoriamente y estará disponible tras producirse el evento load (a menos que haya sucedido un error), así que salvamos la respuesta que contiene el código JSON retornado en la variable superHeroes, luego lo pasamos a dos funciones diferentes para un procesado posterior.

+ +

Tienen mecanismos adicionales de seguridad donde sea necesario

+ +

Las características de las WebAPI están sujetas a las mismas consideraciones de seguridad que JavaScript y otras tecnologías web (por ejemplo same-origin policy), pero a veces tienen mecanismos adicionales de seguridad. Por ejemplo, algunas de las WebAPIs más modernas solamente funcionan en páginas servidas mediante HTTPS debido a que transmiten información potencialmente sensible (algunos ejemplos son Service Workers y Push).

+ +

Además, algunas WebAPIs solicitarán permiso al usuario para ser activadas cuando se produzcan las llamadas desde el código. Como ejemplo, habrás observado un cuadro de diálogo como éste al probar nuestro ejemplo anterior de Geolocalización:

+ +

+ +

La Notifications API solicita los permisos de una forma parecida:

+ +

+ +

Estos diálogos solicitando permiso se muestran al usuario por motivos de seguridad — si no estuvieran, los sitios podrían rastrear la localización sin que el usuario lo supiera o bombardearlo con un montón de notificaciones molestas.

+ +

Resumen

+ +

En este punto, deberías tener ya una buena idea de los que son las APIs, cómo trabajan y qué puedes hacer con ellas en tu código JavaScript. Seguramente estarás con ganas de comenzar a hacer cosas divertidas con algunas APIs específicas, así que ¡vamos allá! A continuación veremos cómo manipular documentos con el Modelo de Objetos del Documento (DOM).

+ +

{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/javascript/first_steps/generador_de_historias_absurdas/index.html b/files/es/learn/javascript/first_steps/generador_de_historias_absurdas/index.html deleted file mode 100644 index 58bb8e688a..0000000000 --- a/files/es/learn/javascript/first_steps/generador_de_historias_absurdas/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Generador de historias absurdas -slug: Learn/JavaScript/First_steps/Generador_de_historias_absurdas -tags: - - Arreglos - - Cadenas - - JavaScript - - Numeros - - Principiante -translation_of: Learn/JavaScript/First_steps/Silly_story_generator ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
- -

- -

En esta evaluación, deberás tomar parte del conocimiento que has aprendido en los artículos de este módulo y aplicarlo a la creación de una aplicación divertida que genere historias aleatorias. ¡Que te diviertas!

- - - - - - - - - - - - -
Prerrequisitos:Antes de intentar esta evaluación, deberías haber revisado todos los artículos de este módulo.
Objetivo:Probar la comprensión de los fundamentos de JavaScript, como variables, números, operadores, cadenas y matrices
- -

Punto de partida

- -

Para iniciar esta evaluación, debe:

- - - -
-

Nota: Alternativamente, puede usar un sitio como JSBin o Thimble para hacer su evaluación. Puede pegar el HTML, CSS y JavaScript en uno de estos editores en línea. Si el editor en línea que está utilizando no tiene un panel de JavaScript separado, no dude en colocarlo en línea en un elemento <script> dentro de la página HTML.

-
- -

Resumen del proyecto

- -

Se le han proporcionado algunos HTML / CSS en bruto y algunas cadenas de texto y funciones de JavaScript; necesita escribir el JavaScript necesario para convertir esto en un programa de trabajo, que hace lo siguiente:

- - - -

La siguiente captura de pantalla muestra un ejemplo de lo que debería producir el programa terminado:

- -

- -

Para darle más idea, eche un vistazo al ejemplo final (¡no mire el código fuente!)

- -

Etapas para completar

- -

En las siguientes secciones se describe lo que hay que hacer.

- -

Configuración básica:

- -
    -
  1. Crear un nuevo archivo llamado main.js, en el mismo directorio que tu archivo index.html.
    2. -
  2. Aplicar el archivo JavaScript externo a tu HTML insertando un elemento {{htmlelement("script")}} en tu HTML haciendo referencia a main.js. Póngalo justo antes de la etiquette de cierra </body>.
    3. -
- -

Variables y funciones iniciales:

- -
    -
  1. en el archivo de texto sin procesar, copia todo el código bajo el encabezado "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" y pégalo en la parte superior del archivo main.js. Esto te dará tres variables que almacenan las referencias al campo de texto "Enter custom name" (customName), el botón "Generate random story" (randomize), y el elemento {{htmlelement("p")}} al fondo del cuerpo HTML en el que la historia será copiada en (story), respectivamente. Además, obtendrás una funcion llamada randomValueFromArray() que toma un array, y devuelve uno de los items guardados dentro del array al azar.
    2. -
  2. Ahora observa la segunda sección del archivo de texto sin procesar — "2. RAW TEXT STRINGS". Esta contiene cadenas de texto que actuarán como entrada en nuestro programa. Nos gustaría que mantengas estas variables internas dentro del archivo main.js: -
      -
    1. Almacena la primera, la más larga, cadena de texto dentro de una variable llamada storyText.
      2. -
    2. Almacena el primer conjunto de tres cadenas dentro de un array llamado insertX.
      3. -
    3. Almacena el segundo conjunto de tres cadenas dentro de un array llamado insertY.
      4. -
    4. Almacena el tercer conjunto de tres cadenas dentro de un array llamado insertZ.
      5. -
    -
    3. -
- -

Colocar el controlador de evento y la función incompleta:

- -
    -
  1. Ahora regresa al archivo de texto sin procesar.
    2. -
  2. Copia el código encontrado bajo el encabezado "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" y pégalo al fondo de tu archivo main.js . Esto: -
      -
    • Añade un detector de eventos a la variable randomize, de manera que cuando al botón que esta representa se le haya dado un click, la función result() funcione.
      • -
    • Añade una definición de la función parcialmente completada result() a tu código. Por el resto de la evaluación, deberás llenar en líneas dentro de esta función para completarla y hacer que trabaje adecuadamente.
      • -
    -
    3. -
- -

Completando la función result():

- -
    -
  1. Crear una nueva variable llamada newStory, y establezca su valor igual a storyText. Esto es necesario para que podamos crear una nueva historia aleatoria cada vez que se presiona el botón y se ejecuta la función. Si hiciéramos cambios directamente en storyText, solo podríamos generar una nueva historia una vez.
    2. -
  2. Crear tres nuevas variables llamadas xItem, yItem, y zItem, y tienes que igualar cada variable llamando a randomValueFromArray() en sus tres matrices (el resultado en cada caso será un elemento aleatorio de cada matriz en la que se llama). Por ejemplo, puede llamar a la función y hacer que devuelva una cadena aleatoria de  insertX escribiendo randomValueFromArray(insertX).
    3. -
  3. A continuación, queremos reemplazar los tres marcadores de posición en la cadena newStory — :insertx:, :inserty:, y :insertz: — con las cadenas almacenadas en xItem, yItem, y zItem. Hay un método de string en particular que lo ayudará aquí: en cada caso, haga que la llamada al método sea igual a newStory de modo que cada vez que se llame, newStory se iguale a sí mismo, pero con sustituciones. Entonces, cada vez que se presiona el botón, estos marcadores de posición se reemplazan con una cadena absurda aleatoria. Como sugerencia adicional, el método en cuestión solo reemplaza la primera instancia de la subcadena que encuentra, por lo que es posible que deba realizar una de las llamadas dos veces.
    4. -
  4. Dentro del primer bloque if, agregue otra llamada al método de reemplazo de cadena para reemplazar el nombre 'Bob' que se encuentra en la cadena newStory con la variable de name. En este bloque estamos diciendo "Si se ingresó un valor en la entrada de texto customName  reemplace a Bob en la historia con ese nombre personalizado."
    5. -
  5. Dentro del segundo bloque if, se esta verificando si se ha seleccionado el botón de opción uk  Si es así, queremos convertir los valores de peso y temperatura en la historia de libras and Fahrenheit a stones and grados centígrados. Lo que debe hacer es lo siguiente: -
      -
    1. Busque las fórmulas para convertir libras a stone, and Fahrenheit en grados centígrados.
      2. -
    2. Dentro de la línea que define la variable de weight, reemplace 300 con un cálculo que convierta 300 libras en stones. Concatenar 'stone' al final del resultado de la llamada Math.round().
      3. -
    3. Al lado de la línea que define la variable de temperature, reemplace 94 con un cálculo que convierta 94 Fahrenheit en centígrados. Concatenar 'centigrade' al final del resultado de la llamada Math.round().
      4. -
    4. Justo debajo de las dos definiciones de variables, agregue dos líneas de reemplazo de cadena más que reemplacen '94 fahrenheit 'con el contenido de la variable de temperature, y  '300 libras' con el contenido de la variable de weight.
      5. -
    -
    6. -
  6. Finalmente, en la penúltima línea de la función, haga que la propiedad textContent de la variable de la story (que hace referencia al párrafo) sea igual a newStory.
    7. -
- -

Claves y pistas

- - - -

Evaluación o ayuda adicional

- -

Si está siguiendo esta evaluación como parte de un curso organizado, debería poder entregar su trabajo a su profesor/mentor para que lo califique. Si está aprendiendo por ti mismo, puede obtener la guía de calificación con bastante facilidad preguntando en el hilo de discussion thread for this exercise, o en el canal de IRC #mdn en Mozilla IRC. Pruebe el ejercicio primero: ¡no se gana nada haciendo trampa!

- -

{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

- -

En este módulo

- - diff --git "a/files/es/learn/javascript/first_steps/matem\303\241ticas/index.html" "b/files/es/learn/javascript/first_steps/matem\303\241ticas/index.html" deleted file mode 100644 index d9117ed211..0000000000 --- "a/files/es/learn/javascript/first_steps/matem\303\241ticas/index.html" +++ /dev/null @@ -1,443 +0,0 @@ ---- -title: Matemáticas básicas en JavaScript — números y operadores -slug: Learn/JavaScript/First_steps/Matemáticas -tags: - - Aprender - - Artículo - - Guía - - JavaScript - - Matemáticas - - Math - - Novato - - Operadores - - Principiante - - incremento - - 'l10n:priority' - - modulo -translation_of: Learn/JavaScript/First_steps/Math ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
- -

En este punto del curso, hablaremos de matemáticas en JavaScript — cómo  podemos usar {{Glossary("Operator","operadores")}} y otras características para manipular con éxito números y conseguir lo que nos hayamos propuesto.

- - - - - - - - - - - - -
Prerequisitos:Conocimientos básicos de ordenadores, comprensión básica de  HTML y CSS, comprensión básica de lo que es JavaScript.
Objetivo:Familiarizarse con las matemáticas básicas de JavaScript.
- -

Todos aman las matemáticas

- -

Vale, tal vez no. A algunos nos gustan, otros las odiamos desde que aprendimos en la escuela las tablas de multipicar y las divisiones complicadas, y algunos estamos a mitad entre ambas posturas. Pero ninguno podemos negar que las matemáticas son una parte fundamental de la vida que nos afecta. Y esto es especialmente cierto cuando aprendemos JavaScript (o cualquier otro lenguaje similar) — en la medida en que ello pasa por procesar números, calcular nuevos valores, etc., no te puede sorprender comprobar que JavaScript dispone de un completo conjunto de funciones matemáticas.

- -

En este artículo se trata solo aquella parte básica que necesitas conocer por ahora.

- -

Tipos de números

- -

En programación, incluso el simple sistema numérico decimal que todos conocemos tan bien, es más complicado de lo que podrías pensar. Usamos diferentes términos para describir diferentes tipos de números decimales, por ejemplo:

- - - -

¡Incluso tenemos distintos tipos de sistemas numéricos! El decimal es base 10 (quiere decir que utiliza 0-9 en cada columna), pero también tenemos cosas como:

- - - -

Antes de que comiences a preouparte de que tu cerebro se derrita, ¡detente un momento! Para empezar, sólo vamos a apegarnos a los números decimales durante todo este curso; pocas veces te verás en la necesidad de comenzar a pensar sobre los otros tipos, si es que lo haces.

- -

La segunda parte de las buenas noticias es que, a diferencia de otros lenguajes de programación, JavaScript sólo tiene un tipo de dato para los números, adivinaste, {{jsxref("Number")}}. Esto significa que, sin importar el tipo de número con el que estés lidiando en Javascript, los manejas siempre de la misma manera.

- -
-

Nota: En realidad, JavaScript tiene un segundo tipo de número, {{Glossary("BigInt")}}, que se utiliza para números enteros muy, muy grandes. Pero para los propósitos de este curso, solo nos preocuparemos por los valores numéricos.

-
- -

Para mí, todo son números.

- -

Juguemos un poco con algunos números para ponernos al día con la sintaxis básica que necesitamos. Coloca los comandos listados abajo en la consola JavaScript de tus herramientas para desarrolladores, o utiliza la sencilla consola integrada que verás abajo si lo prefieres.

- -

Abrir en una ventana nueva

- -
    -
  1. Primero que todo, declara un par de variables e inicializalas con un entero y un flotante, respectivamente, luego escribe los nombres de esas variables para chequear que todo esté en orden: - 
    var myInt = 5;
-var myFloat = 6.667;
-myInt;
-myFloat;
    -
    2. -
  2. Los valores numéricos están escritos sin comillas - Trata de declarar e inicializar un par de variables más que contengan números antes de continuar.
    3. -
  3. Ahora chequea que nuestras variables originales sean del mismo tipo. Hay un operador llamado {{jsxref("Operators/typeof", "typeof")}} en JavaScript hace esto. Digita las dos lineas siguientes: - 
    typeof myInt;
-typeof myFloat;
    - Obtendrás "number" en ambos casos — esto hace las cosas mucho más fáciles que si diferentes números tuvieran difetentes tipos, y tuvimos que lidiar con ellos de diferentes maneras. Uf !
    4. -
- -

Operadores Aritméticos

- -

Los operadores aritméticos son operadores básicos que usamos para hacer sumas:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperadorNombrePropósitoEjemplo
+AdiciónSuma dos números juntos.6 + 9
-RestaResta el numero de la derecha del de la izquierda.20 - 15
*MultiplicaciónMultiplica dos números juntos.3 * 7
/DivisiónDivide el número de la izquierda por el de la derecha.10 / 5
%Sobrante (también llamado módulo) -

Retorna el restante después de dividir el número de la izquierda en porciones enteras del de la derecha.

- 		8 % 3 (retorna 2, como tres está dos veces en 8, quedando 2 restantes.)
- -
-

Nota: A veces verás números involucrados en sumas referidas como {{Glossary("Operand", "operands")}}.

-
- -

Probablemente no necesitemos enseñarte matemáticas básicas, pero nos gustaría probar tu entendimiento de la sintaxis involucrada. Intenta entrar los ejemplos de abajo en tu consola JavaScript de tus herramientas para desarrolladores, o usa la sencilla consola incorporada que se vio anteriormente, si lo prefieres, para familiarizarte con la sintaxis.

- -
    -
  1. Primero, trata entrando un ejemplo simple por tu cuenta, como - 
    10 + 7
-9 * 8
-60 % 3
    -
    2. -
  2. Puedes tratar declarando e inicializando algunos números en variables, y probar usándolos en la suma - Las variables se comportarán exactamente como los valores que tienen para los fines de la suma. Por ejemplo: - 
    var num1 = 10;
-var num2 = 50;
-9 * num1;
-num2 / num1;
    -
    3. -
  3. Por último, trate entrando algunas expresiones complejas, como: - 
    5 + 10 * 3;
-num2 % 9 * num1;
-num2 + num1 / 8 + 2;
    -
    4. -
- -

Es posible que parte de este último conjunto de sumas no te dé el resultado que esperabas; La siguiente sección bien podría dar la respuesta del por qué.

- -

Precedencia de Operadores

- -

Veamos el último ejemplo de arriba, asumiendo que num2 tiene el valor 50 y num1 tiene el valor 10 (como se indicó anteriormente):

- -
num2 + num1 / 8 + 2;
- -

Como un ser humano, puedes leer esto como "50 más 10 es igual a 60", luego "8 más 2 es igual a 10", y finalmente "60 dividido por 10 es igual a 6".

- -

Pero el navegador hace "10 dividido por 8 es igual a 1.25", luego "50 más 1.25 más 2 es igual a 53.25".

- -

Esto es debido a la precedencia de operadores — algunos operadores son aplicados antes de otros cuando se calcula el resultado de una suma (referida como una expresión, en programación).  La precedencia de operadores en JavaScript es la misma que en las matemáticas de la escuela  — La multiplicación y la división se resuelven siempre primero, luego la suma y resta (la suma siempre se evalua de izquierda a derecha).

- -

Si quieres alterar la precedencia de operación, puedes colocar paréntesis alrededor de las partes que quieras explícitamente evaluar primero. Para obtener un resultado de 6, podríamos hacer esto:

- -
(num2 + num1) / (8 + 2);
- -

Pruébalo y verás.

- -
-

Nota: Una completa lista de todos los operadores de JavaScript y sus precedencias pueden encontrarse en Expresiones y operadores.

-
- -

Operadores de incremento y decremento

- -

Algunas veces necesitarás repetidamente sumar o restar uno de/a una variable numérica. Esto puede hacerse convenientemente usando los operadores de incremento (++) y decremento (--). Usamos ++ en nuestro juego "Adivina el número" en nuestro artículo Un primer acercamiento a JavaScript, cuando agregamos 1 a nuestra variable guessCount para mantener una pista de cuantas respuestas le quedan al usuario por turno.

- -
guessCount++;
- -
-

Nota: Son muy comunmente usadas en ciclos, que aprenderás más adelante en el curso. Por ejemplo, Digamos que quieras recorrer una lista de precios, y agregar impuestos a cada uno. Usaría un ciclo para recorrer cada valor y realizar el cálculo necesario para agregar el impuesto a las ventas en cada caso. El incrementador es usado para mover al próximo valor cuando es necesario. Damos un simple ejemplo En realidad, proporcionamos un ejemplo simple que muestra cómo se hace esto: ¡pruébalo en vivo y mira el código fuente para ver si puedes detectar los incrementadores! Veremos los ciclos en detalle más adelante en el curso..

-
- -

Trata jugando con eso en tu consola. Para empezar, nota que no puedes aplicar esto directamente a un número, sin operar en él mismo. Lo siguiente retorna un error:

- -
3++;
- -

Asì, puedes solo incrementar una variable existente. Prueba esto:

- -
var num1 = 4;
-num1++;
- -

Ok, la extrañeza número 2! Cuando hagas esto, verás que se devuelve un valor de 4; esto se debe a que el navegador devuelve el valor actual y luego incrementa la variable. Puedes ver que se ha incrementado si devuelves el valor variable nuevamente:

- -
num1;
- -

Lo mismo funciona con -- : intenta lo siguiente:

- -
var num2 = 6;
-num2--;
-num2;
- -
-

Nota: Puedes hacer que el navegador lo haga al revés: aumentar / disminuir la variable y luego devolver el valor, colocando el operador al comienzo de la variable en lugar del final. Prueba los ejemplos anteriores otra vez, pero esta vez usa ++num1 y--num2.

-
- -

Operadores de asignación

- -

Los operadores de asignación son operadores que asignan un valor a una variable. Ya usamos el más básico, =, muchas veces — simplemente asigna a la variable de la izquierda, el valor de la derecha:

- -
var x = 3; // x contiene el valor 3
-var y = 4; // y contiene el valor 4
-x = y; // x ahora contiene el mismo valor de y... 4
- -

Pero hay algunos tipos más complejos, que proporcionan atajos útiles para mantener tu código más ordenado y más eficiente. Los más comunes se enumeran a continuación.:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperadorNombrePropósito_Ejemplo__Atajo_de__
+=Adición asignaciónSuma el valor de la derecha al valor de la variable de la  izquierda y returna el nuevo valorx = 3;
- x += 4;		x = 3;
- x = x + 4;
-=Resta asignación -

Resta el valor de la derecha, del valor de la variable de la izquierda y retorna el nuevo valor.

- 		x = 6;
- x -= 3;		x = 6;
- x = x - 3;
*=Multiplicación asignación -

Multiplica el valor de la variable en la izquierda por el valor en la derecha y retorna el nuevo valor.

- 		x = 2;
- x *= 3;		x = 2;
- x = x * 3;
/=División asignación -

Divide el valor de la variable en la izquierda por el valor de la derecha y retorna el nuevo valor.

- 		x = 10;
- x /= 5;		x = 10;
- x = x / 5;
- -

Intenta digitar algunos de estos ejemplos en tu consola, para darte una idea de cómo funcionan. Mira si puedes preguntar los valores que tenían antes de ingresarlos en la segunda línea, en cada caso.

- -

Ten en cuenta que puedes usar otras variables en el lado derecho de cada expresión, por ejemplo:

- -
var x = 3; // x contiene el valor 3
-var y = 4; // y contiene el valor 4
-x *= y; // x ahora contiene el valor 12
- -
-

Nota: Hay una cantidad de otros operadores de asignación disponibles, pero estos son los básicos que debes aprender por ahora.

-
- -

Aprendizaje activo: dimensionando una caja canvas

- -

En este ejercicio vamos a hacer que completes algunos números y operadores para manipular el tamaño de una caja. El cuadro se dibuja utilizando una API de navegador llamada {{domxref("Canvas API", "", "", "true")}}. No hay necesidad de preocuparse por cómo funciona esto, solo concentrarse en las matemáticas por ahora. El ancho y el alto del cuadro (en píxeles) están definidos por las variables x e y, a las que inicialmente se les asigna un valor de 50.

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}

- -

Abrir en una nueva ventana

- -

En el cuadro de código editable anterior, hay dos líneas marcadas claramente con un comentario que nos gustaría que actualices para hacer que el cuadro crezca/se reduzca a ciertos tamaños, utilizando ciertos operadores y/o valores en cada caso. Intenta lo siguiente:

- - - -

No te preocupes si arruinas totalmente el código. Siempre puedes presionar el botón Restablecer para que las cosas vuelvan a funcionar. Después de haber respondido correctamente a todas las preguntas anteriores, siéntete libre de jugar con el código un poco más, o establece desafíos para tus amigos/compañeros de clase..

- -

Operadores de comparación

- -

A veces querremos ejecutar pruebas de verdadero/falso, y luego actuaremos de acuerdo con el resultado de esa prueba. Para ello, utilizamos operadores de comparación.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperadorNombrePropósitoEjemplo
===Igual estrictoComprueba si los valores izquierdo y derecho son idénticos entre sí5 === 2 + 4
!==Igual no-estrictoComprueba si los valores izquierdo y derecho no son idénticos entre sí5 !== 2 + 3
<Menor queComprueba si el valor izquierdo es menor que el derecho.10 < 6
>Mayor queComprueba si el valor izquierdo es mayor que el derecho.10 > 20
<=Menor o igual aComprueba si el valor izquierdo es menor o igual que el derecho.3 <= 2
>=Mayor o igual aComprueba si el valor izquierdo es mayor o igual que el derecho..5 >= 4
- -
-

Nota: Es posible que algunas personas utilicen == y != en sus pruebas de igualdad y no igualdad. Estos son operadores válidos en JavaScript, pero difieren de === /! ==: la prueba anterior indica si los valores son iguales. pero el tipo de datos puede ser diferente, mientras que las últimas versiones estrictas prueban si el valor y el tipo de datos son los mismos. Las versiones estrictas tienden a reducir el número de errores que no se detectan, por lo que te recomendamos que los utilices.

-
- -

Si intentas ingresar algunos de estos valores en una consola, verás que todos devuelven valores verdaderos/falsos, esos booleanos que mencionamos en el artículo anterior. Son muy útiles ya que nos permiten tomar decisiones en nuestro código; se usan cada vez que queremos hacer una elección de algún tipo, por ejemplo.:

- - - -

Veremos cómo codificar dicha lógica cuando veamos declaraciones condicionales en un artículo futuro. Por ahora, veamos un ejemplo rápido:

- -
<button>Iniciar máquina</button>
-<p>La máquina se detuvo.</p>
-
- -
var btn = document.querySelector('button');
-var txt = document.querySelector('p');
-
-btn.addEventListener('click', updateBtn);
-
-function updateBtn() {
-  if (btn.textContent === 'Iniciar máquina') {
-    btn.textContent = 'Detener máquina';
-    txt.textContent = 'La máquina se inició!';
-  } else {
-    btn.textContent = 'Iniciar máquina';
-    txt.textContent = 'La máquina se detuvo.';
-  }
-}
- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}

- -

Abrir en una nueva ventana

- -

Puede ver el operador de igualdad utilizado justo dentro de la función updateBtn(). En este caso, no estamos probando si dos expresiones matemáticas tienen el mismo valor (estamos comprobando si el contenido de texto de un botón contiene una cadena determinada), pero sigue siendo el mismo principio. Si el botón está actualmente diciendo "Iniciar máquina" cuando se presiona, cambiamos su etiqueta a "Detener máquina" y actualizamos la etiqueta según corresponda. Si el botón está actualmente diciendo "Detener máquina" cuando se presiona, volvemos a cambiar la pantalla.

- -
-

Nota: Un control de este tipo que intercambia entre dos estados generalmente se conoce como conmutador. Conmuta entre un estado y otro — Luces on, luces off, etc.

-
- -

Pon a prueba tus habilidades

- -

Llegaste al final de este artículo, pero ¿puédes recordar la información más importante? Puedes encontrar algunas pruebas para verificar que has comprendido esta información antes de seguir avanzando — Ve ¡Pon a prueba tus habilidades!: Matemáticas.

- -

Resumen

- -

En este artículo hemos cubierto la información fundamental que necesitas saber sobre los números en JavaScript, por ahora. Verás los números usados una y otra vez, a lo largo de tu aprendizaje de JavaScript, por lo que es una buena idea hacer esto ahora. Si eres una de esas personas que no disfruta de las matemáticas, puedes sentirte cómodo por el hecho de que este capítulo fue bastante breve.

- -

En el siguiente artículo, exploraremos el texto y cómo JavaScript nos permite manipularlo.

- -
-

Nota: Si disfrutas de las matemáticas y quieres leer más sobre cómo se implementa en JavaScript, puedes encontrar muchos más detalles en la sección principal de JavaScript de MDN. Los mejores lugares para iniciar con artículos sobre Numero y fechas y Expresiones y operadores.

-
- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}

- -

En este módulo

- - diff --git a/files/es/learn/javascript/first_steps/math/index.html b/files/es/learn/javascript/first_steps/math/index.html new file mode 100644 index 0000000000..d9117ed211 --- /dev/null +++ b/files/es/learn/javascript/first_steps/math/index.html @@ -0,0 +1,443 @@ +--- +title: Matemáticas básicas en JavaScript — números y operadores +slug: Learn/JavaScript/First_steps/Matemáticas +tags: + - Aprender + - Artículo + - Guía + - JavaScript + - Matemáticas + - Math + - Novato + - Operadores + - Principiante + - incremento + - 'l10n:priority' + - modulo +translation_of: Learn/JavaScript/First_steps/Math +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
+ +

En este punto del curso, hablaremos de matemáticas en JavaScript — cómo  podemos usar {{Glossary("Operator","operadores")}} y otras características para manipular con éxito números y conseguir lo que nos hayamos propuesto.

+ + + + + + + + + + + + +
Prerequisitos:Conocimientos básicos de ordenadores, comprensión básica de  HTML y CSS, comprensión básica de lo que es JavaScript.
Objetivo:Familiarizarse con las matemáticas básicas de JavaScript.
+ +

Todos aman las matemáticas

+ +

Vale, tal vez no. A algunos nos gustan, otros las odiamos desde que aprendimos en la escuela las tablas de multipicar y las divisiones complicadas, y algunos estamos a mitad entre ambas posturas. Pero ninguno podemos negar que las matemáticas son una parte fundamental de la vida que nos afecta. Y esto es especialmente cierto cuando aprendemos JavaScript (o cualquier otro lenguaje similar) — en la medida en que ello pasa por procesar números, calcular nuevos valores, etc., no te puede sorprender comprobar que JavaScript dispone de un completo conjunto de funciones matemáticas.

+ +

En este artículo se trata solo aquella parte básica que necesitas conocer por ahora.

+ +

Tipos de números

+ +

En programación, incluso el simple sistema numérico decimal que todos conocemos tan bien, es más complicado de lo que podrías pensar. Usamos diferentes términos para describir diferentes tipos de números decimales, por ejemplo:

+ + + +

¡Incluso tenemos distintos tipos de sistemas numéricos! El decimal es base 10 (quiere decir que utiliza 0-9 en cada columna), pero también tenemos cosas como:

+ + + +

Antes de que comiences a preouparte de que tu cerebro se derrita, ¡detente un momento! Para empezar, sólo vamos a apegarnos a los números decimales durante todo este curso; pocas veces te verás en la necesidad de comenzar a pensar sobre los otros tipos, si es que lo haces.

+ +

La segunda parte de las buenas noticias es que, a diferencia de otros lenguajes de programación, JavaScript sólo tiene un tipo de dato para los números, adivinaste, {{jsxref("Number")}}. Esto significa que, sin importar el tipo de número con el que estés lidiando en Javascript, los manejas siempre de la misma manera.

+ +
+

Nota: En realidad, JavaScript tiene un segundo tipo de número, {{Glossary("BigInt")}}, que se utiliza para números enteros muy, muy grandes. Pero para los propósitos de este curso, solo nos preocuparemos por los valores numéricos.

+
+ +

Para mí, todo son números.

+ +

Juguemos un poco con algunos números para ponernos al día con la sintaxis básica que necesitamos. Coloca los comandos listados abajo en la consola JavaScript de tus herramientas para desarrolladores, o utiliza la sencilla consola integrada que verás abajo si lo prefieres.

+ +

Abrir en una ventana nueva

+ +
    +
  1. Primero que todo, declara un par de variables e inicializalas con un entero y un flotante, respectivamente, luego escribe los nombres de esas variables para chequear que todo esté en orden: + 
    var myInt = 5;
+var myFloat = 6.667;
+myInt;
+myFloat;
    +
    2. +
  2. Los valores numéricos están escritos sin comillas - Trata de declarar e inicializar un par de variables más que contengan números antes de continuar.
    3. +
  3. Ahora chequea que nuestras variables originales sean del mismo tipo. Hay un operador llamado {{jsxref("Operators/typeof", "typeof")}} en JavaScript hace esto. Digita las dos lineas siguientes: + 
    typeof myInt;
+typeof myFloat;
    + Obtendrás "number" en ambos casos — esto hace las cosas mucho más fáciles que si diferentes números tuvieran difetentes tipos, y tuvimos que lidiar con ellos de diferentes maneras. Uf !
    4. +
+ +

Operadores Aritméticos

+ +

Los operadores aritméticos son operadores básicos que usamos para hacer sumas:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorNombrePropósitoEjemplo
+AdiciónSuma dos números juntos.6 + 9
-RestaResta el numero de la derecha del de la izquierda.20 - 15
*MultiplicaciónMultiplica dos números juntos.3 * 7
/DivisiónDivide el número de la izquierda por el de la derecha.10 / 5
%Sobrante (también llamado módulo) +

Retorna el restante después de dividir el número de la izquierda en porciones enteras del de la derecha.

+ 		8 % 3 (retorna 2, como tres está dos veces en 8, quedando 2 restantes.)
+ +
+

Nota: A veces verás números involucrados en sumas referidas como {{Glossary("Operand", "operands")}}.

+
+ +

Probablemente no necesitemos enseñarte matemáticas básicas, pero nos gustaría probar tu entendimiento de la sintaxis involucrada. Intenta entrar los ejemplos de abajo en tu consola JavaScript de tus herramientas para desarrolladores, o usa la sencilla consola incorporada que se vio anteriormente, si lo prefieres, para familiarizarte con la sintaxis.

+ +
    +
  1. Primero, trata entrando un ejemplo simple por tu cuenta, como + 
    10 + 7
+9 * 8
+60 % 3
    +
    2. +
  2. Puedes tratar declarando e inicializando algunos números en variables, y probar usándolos en la suma - Las variables se comportarán exactamente como los valores que tienen para los fines de la suma. Por ejemplo: + 
    var num1 = 10;
+var num2 = 50;
+9 * num1;
+num2 / num1;
    +
    3. +
  3. Por último, trate entrando algunas expresiones complejas, como: + 
    5 + 10 * 3;
+num2 % 9 * num1;
+num2 + num1 / 8 + 2;
    +
    4. +
+ +

Es posible que parte de este último conjunto de sumas no te dé el resultado que esperabas; La siguiente sección bien podría dar la respuesta del por qué.

+ +

Precedencia de Operadores

+ +

Veamos el último ejemplo de arriba, asumiendo que num2 tiene el valor 50 y num1 tiene el valor 10 (como se indicó anteriormente):

+ +
num2 + num1 / 8 + 2;
+ +

Como un ser humano, puedes leer esto como "50 más 10 es igual a 60", luego "8 más 2 es igual a 10", y finalmente "60 dividido por 10 es igual a 6".

+ +

Pero el navegador hace "10 dividido por 8 es igual a 1.25", luego "50 más 1.25 más 2 es igual a 53.25".

+ +

Esto es debido a la precedencia de operadores — algunos operadores son aplicados antes de otros cuando se calcula el resultado de una suma (referida como una expresión, en programación).  La precedencia de operadores en JavaScript es la misma que en las matemáticas de la escuela  — La multiplicación y la división se resuelven siempre primero, luego la suma y resta (la suma siempre se evalua de izquierda a derecha).

+ +

Si quieres alterar la precedencia de operación, puedes colocar paréntesis alrededor de las partes que quieras explícitamente evaluar primero. Para obtener un resultado de 6, podríamos hacer esto:

+ +
(num2 + num1) / (8 + 2);
+ +

Pruébalo y verás.

+ +
+

Nota: Una completa lista de todos los operadores de JavaScript y sus precedencias pueden encontrarse en Expresiones y operadores.

+
+ +

Operadores de incremento y decremento

+ +

Algunas veces necesitarás repetidamente sumar o restar uno de/a una variable numérica. Esto puede hacerse convenientemente usando los operadores de incremento (++) y decremento (--). Usamos ++ en nuestro juego "Adivina el número" en nuestro artículo Un primer acercamiento a JavaScript, cuando agregamos 1 a nuestra variable guessCount para mantener una pista de cuantas respuestas le quedan al usuario por turno.

+ +
guessCount++;
+ +
+

Nota: Son muy comunmente usadas en ciclos, que aprenderás más adelante en el curso. Por ejemplo, Digamos que quieras recorrer una lista de precios, y agregar impuestos a cada uno. Usaría un ciclo para recorrer cada valor y realizar el cálculo necesario para agregar el impuesto a las ventas en cada caso. El incrementador es usado para mover al próximo valor cuando es necesario. Damos un simple ejemplo En realidad, proporcionamos un ejemplo simple que muestra cómo se hace esto: ¡pruébalo en vivo y mira el código fuente para ver si puedes detectar los incrementadores! Veremos los ciclos en detalle más adelante en el curso..

+
+ +

Trata jugando con eso en tu consola. Para empezar, nota que no puedes aplicar esto directamente a un número, sin operar en él mismo. Lo siguiente retorna un error:

+ +
3++;
+ +

Asì, puedes solo incrementar una variable existente. Prueba esto:

+ +
var num1 = 4;
+num1++;
+ +

Ok, la extrañeza número 2! Cuando hagas esto, verás que se devuelve un valor de 4; esto se debe a que el navegador devuelve el valor actual y luego incrementa la variable. Puedes ver que se ha incrementado si devuelves el valor variable nuevamente:

+ +
num1;
+ +

Lo mismo funciona con -- : intenta lo siguiente:

+ +
var num2 = 6;
+num2--;
+num2;
+ +
+

Nota: Puedes hacer que el navegador lo haga al revés: aumentar / disminuir la variable y luego devolver el valor, colocando el operador al comienzo de la variable en lugar del final. Prueba los ejemplos anteriores otra vez, pero esta vez usa ++num1 y--num2.

+
+ +

Operadores de asignación

+ +

Los operadores de asignación son operadores que asignan un valor a una variable. Ya usamos el más básico, =, muchas veces — simplemente asigna a la variable de la izquierda, el valor de la derecha:

+ +
var x = 3; // x contiene el valor 3
+var y = 4; // y contiene el valor 4
+x = y; // x ahora contiene el mismo valor de y... 4
+ +

Pero hay algunos tipos más complejos, que proporcionan atajos útiles para mantener tu código más ordenado y más eficiente. Los más comunes se enumeran a continuación.:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorNombrePropósito_Ejemplo__Atajo_de__
+=Adición asignaciónSuma el valor de la derecha al valor de la variable de la  izquierda y returna el nuevo valorx = 3;
+ x += 4;		x = 3;
+ x = x + 4;
-=Resta asignación +

Resta el valor de la derecha, del valor de la variable de la izquierda y retorna el nuevo valor.

+ 		x = 6;
+ x -= 3;		x = 6;
+ x = x - 3;
*=Multiplicación asignación +

Multiplica el valor de la variable en la izquierda por el valor en la derecha y retorna el nuevo valor.

+ 		x = 2;
+ x *= 3;		x = 2;
+ x = x * 3;
/=División asignación +

Divide el valor de la variable en la izquierda por el valor de la derecha y retorna el nuevo valor.

+ 		x = 10;
+ x /= 5;		x = 10;
+ x = x / 5;
+ +

Intenta digitar algunos de estos ejemplos en tu consola, para darte una idea de cómo funcionan. Mira si puedes preguntar los valores que tenían antes de ingresarlos en la segunda línea, en cada caso.

+ +

Ten en cuenta que puedes usar otras variables en el lado derecho de cada expresión, por ejemplo:

+ +
var x = 3; // x contiene el valor 3
+var y = 4; // y contiene el valor 4
+x *= y; // x ahora contiene el valor 12
+ +
+

Nota: Hay una cantidad de otros operadores de asignación disponibles, pero estos son los básicos que debes aprender por ahora.

+
+ +

Aprendizaje activo: dimensionando una caja canvas

+ +

En este ejercicio vamos a hacer que completes algunos números y operadores para manipular el tamaño de una caja. El cuadro se dibuja utilizando una API de navegador llamada {{domxref("Canvas API", "", "", "true")}}. No hay necesidad de preocuparse por cómo funciona esto, solo concentrarse en las matemáticas por ahora. El ancho y el alto del cuadro (en píxeles) están definidos por las variables x e y, a las que inicialmente se les asigna un valor de 50.

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}

+ +

Abrir en una nueva ventana

+ +

En el cuadro de código editable anterior, hay dos líneas marcadas claramente con un comentario que nos gustaría que actualices para hacer que el cuadro crezca/se reduzca a ciertos tamaños, utilizando ciertos operadores y/o valores en cada caso. Intenta lo siguiente:

+ + + +

No te preocupes si arruinas totalmente el código. Siempre puedes presionar el botón Restablecer para que las cosas vuelvan a funcionar. Después de haber respondido correctamente a todas las preguntas anteriores, siéntete libre de jugar con el código un poco más, o establece desafíos para tus amigos/compañeros de clase..

+ +

Operadores de comparación

+ +

A veces querremos ejecutar pruebas de verdadero/falso, y luego actuaremos de acuerdo con el resultado de esa prueba. Para ello, utilizamos operadores de comparación.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorNombrePropósitoEjemplo
===Igual estrictoComprueba si los valores izquierdo y derecho son idénticos entre sí5 === 2 + 4
!==Igual no-estrictoComprueba si los valores izquierdo y derecho no son idénticos entre sí5 !== 2 + 3
<Menor queComprueba si el valor izquierdo es menor que el derecho.10 < 6
>Mayor queComprueba si el valor izquierdo es mayor que el derecho.10 > 20
<=Menor o igual aComprueba si el valor izquierdo es menor o igual que el derecho.3 <= 2
>=Mayor o igual aComprueba si el valor izquierdo es mayor o igual que el derecho..5 >= 4
+ +
+

Nota: Es posible que algunas personas utilicen == y != en sus pruebas de igualdad y no igualdad. Estos son operadores válidos en JavaScript, pero difieren de === /! ==: la prueba anterior indica si los valores son iguales. pero el tipo de datos puede ser diferente, mientras que las últimas versiones estrictas prueban si el valor y el tipo de datos son los mismos. Las versiones estrictas tienden a reducir el número de errores que no se detectan, por lo que te recomendamos que los utilices.

+
+ +

Si intentas ingresar algunos de estos valores en una consola, verás que todos devuelven valores verdaderos/falsos, esos booleanos que mencionamos en el artículo anterior. Son muy útiles ya que nos permiten tomar decisiones en nuestro código; se usan cada vez que queremos hacer una elección de algún tipo, por ejemplo.:

+ + + +

Veremos cómo codificar dicha lógica cuando veamos declaraciones condicionales en un artículo futuro. Por ahora, veamos un ejemplo rápido:

+ +
<button>Iniciar máquina</button>
+<p>La máquina se detuvo.</p>
+
+ +
var btn = document.querySelector('button');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.textContent === 'Iniciar máquina') {
+    btn.textContent = 'Detener máquina';
+    txt.textContent = 'La máquina se inició!';
+  } else {
+    btn.textContent = 'Iniciar máquina';
+    txt.textContent = 'La máquina se detuvo.';
+  }
+}
+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}

+ +

Abrir en una nueva ventana

+ +

Puede ver el operador de igualdad utilizado justo dentro de la función updateBtn(). En este caso, no estamos probando si dos expresiones matemáticas tienen el mismo valor (estamos comprobando si el contenido de texto de un botón contiene una cadena determinada), pero sigue siendo el mismo principio. Si el botón está actualmente diciendo "Iniciar máquina" cuando se presiona, cambiamos su etiqueta a "Detener máquina" y actualizamos la etiqueta según corresponda. Si el botón está actualmente diciendo "Detener máquina" cuando se presiona, volvemos a cambiar la pantalla.

+ +
+

Nota: Un control de este tipo que intercambia entre dos estados generalmente se conoce como conmutador. Conmuta entre un estado y otro — Luces on, luces off, etc.

+
+ +

Pon a prueba tus habilidades

+ +

Llegaste al final de este artículo, pero ¿puédes recordar la información más importante? Puedes encontrar algunas pruebas para verificar que has comprendido esta información antes de seguir avanzando — Ve ¡Pon a prueba tus habilidades!: Matemáticas.

+ +

Resumen

+ +

En este artículo hemos cubierto la información fundamental que necesitas saber sobre los números en JavaScript, por ahora. Verás los números usados una y otra vez, a lo largo de tu aprendizaje de JavaScript, por lo que es una buena idea hacer esto ahora. Si eres una de esas personas que no disfruta de las matemáticas, puedes sentirte cómodo por el hecho de que este capítulo fue bastante breve.

+ +

En el siguiente artículo, exploraremos el texto y cómo JavaScript nos permite manipularlo.

+ +
+

Nota: Si disfrutas de las matemáticas y quieres leer más sobre cómo se implementa en JavaScript, puedes encontrar muchos más detalles en la sección principal de JavaScript de MDN. Los mejores lugares para iniciar con artículos sobre Numero y fechas y Expresiones y operadores.

+
+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/javascript/first_steps/prueba_tus_habilidades_colon__strings/index.html b/files/es/learn/javascript/first_steps/prueba_tus_habilidades_colon__strings/index.html deleted file mode 100644 index f919ac1ee3..0000000000 --- a/files/es/learn/javascript/first_steps/prueba_tus_habilidades_colon__strings/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: 'Prueba tus habilidades: Strings' -slug: 'Learn/JavaScript/First_steps/Prueba_tus_habilidades:_Strings' -tags: - - Cadenas - - JavaScript - - Novato - - Principiante - - Prueba tus habilidades - - aprende - - strings -translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_Strings' ---- -
{{learnsidebar}}
- -

El objetivo de esta prueba de habilidad es evaluar si has entendido nuestros artículos Manejo de texto — cadenas en JavaScript y Métodos de cadena útiles.

- -
-

Nota: Puedes probar las soluciones en los editores interactivos a continuación, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.
-
- Si te quedas atascado, pídenos ayuda — consulta la sección {{anch("Evaluación o ayuda adicional")}} en la parte inferior de esta página.

-
- -
-

Nota: En los siguientes ejemplos, si hay un error en tu código, se mostrará en el panel de resultados de la página, para ayudarte a intentar averiguar la respuesta (o en la consola JavaScript del navegador, en el caso de la versión descargable).

-
- -

Cadenas 1

- -

En nuestra primera tarea de cadenas, comenzaremos con algo pequeño. Ya tienes la mitad de una cita famosa dentro de una variable llamada quoteStart; nos gustaría que:

- -
    -
  1. Busques la otra mitad de la cita y la agregues al ejemplo dentro de una variable llamada quoteEnd.
    2. -
  2. Concatenes las dos cadenas para hacer una sola cadena que contenga la cita completa. Guardes el resultado dentro de una variable llamada finalQuote.
    3. -
- -

Verás que obtienes un error en este punto. ¿Puedes solucionar el problema con quoteStart para que la cita completa se muestre correctamente?

- -

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings1.html", '100%', 400)}}

- -
-

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Cadenas 2

- -

En esta tarea, se te proporcionan dos variables, quote y substring, que contienen dos cadenas. Nos gustaría que:

- -
    -
  1. Recuperes la longitud de la cita y la guardes en una variable llamada quoteLength.
    2. -
  2. Busques la posición del índice donde aparece substring en quote, y almacenes ese valor en una variable llamada index.
    3. -
  3. Uses una combinación de las variables que tienes y las propiedades/métodos de cadena disponibles para recortar la cita original a "No me gustan los huevos verdes y el jamón", y la guardes en una variable llamada revisedQuote.
    4. -
- -

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings2.html", '100%', 400)}}

- -
-

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Cadenas 3

- -

En la siguiente tarea de cadenas, se te da la misma cita con la que terminaste en la tarea anterior, ¡pero está algo rota! Queremos que la arregles y actualices, así:

- -
    -
  1. Cambia la letra mayúscula para corregir con mayúscula inicial la oración (todo en minúsculas, excepto la primera letra mayúscula). Almacena la nueva cita en una variable llamada fixedQuote.
    2. -
  2. En fixedQuote, reemplaza "huevos verdes con jamón" con otro alimento que realmente no te guste.
    3. -
  3. Hay una pequeña solución más por hacer: agrega un punto al final de la cita y guarda la versión final en una variable llamada finalQuote.
    4. -
- -

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings3.html", '100%', 400)}}

- -
-

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Cadenas 4

- -

En la tarea de cadena final, te hemos dado el nombre de un teorema, dos valores numéricos y una cadena incompleta (los bits que se deben agregar están marcados con asteriscos (*)). Queremos que cambies el valor de la cadena de la siguiente manera:

- -
    -
  1. Cámbiala de un literal de cadena normal a una plantilla literal.
    2. -
  2. Reemplaza los cuatro asteriscos con cuatro marcadores de posición en la plantilla literal. Estos deben ser: -
      -
    1. El nombre del teorema.
      2. -
    2. Los dos valores numéricos que tenemos.
      3. -
    3. La longitud de la hipotenusa de un triángulo rectángulo, dado que las longitudes de los otros dos lados son iguales a los dos valores que tenemos. Deberás buscar cómo calcular esto a partir de lo que tienes. Haz el cálculo dentro del marcador de posición.
      4. -
    -
    3. -
- -

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings4.html", '100%', 400)}}

- -
-

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

-
- -

Evaluación o ayuda adicional

- -

Puedes practicar estos ejemplos en los editores interactivos anteriores.

- -

Si deseas que se evalúe tu trabajo o estás atascado y deseas pedir ayuda:

- -
    -
  1. Coloca tu trabajo en un editor que se pueda compartir en línea, como CodePen, jsFiddle o Glitch. Puedes escribir el código tú mismo o utilizar los archivos de punto de partida vinculados en las secciones anteriores.
    2. -
  2. Escribe una publicación solicitando evaluación y/o ayuda en la categoría de aprendizaje del foro de discusión de MDN. Tu publicación debe incluir: -
      -
    • Un título descriptivo como "Se busca evaluación para la prueba de habilidad de Cadenas 1".
      • -
    • Detalles de lo que ya has probado y lo que te gustaría que hiciéramos, p. ej. si estás atascado y necesitas ayuda, o quiere una evaluación.
      • -
    • Un enlace al ejemplo que deseas evaluar o con el que necesitas ayuda, en un editor que se pueda compartir en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica para entrar — es muy difícil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • -
    • Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que deseas ayuda.
      • -
    -
    3. -
diff --git "a/files/es/learn/javascript/first_steps/qu\303\251_es_javascript/index.html" "b/files/es/learn/javascript/first_steps/qu\303\251_es_javascript/index.html" deleted file mode 100644 index bd845c8681..0000000000 --- "a/files/es/learn/javascript/first_steps/qu\303\251_es_javascript/index.html" +++ /dev/null @@ -1,436 +0,0 @@ ---- -title: ¿Qué es JavaScript? -slug: Learn/JavaScript/First_steps/Qué_es_JavaScript -tags: - - APIs - - Aprender - - Artículo - - Añadir JavaScript - - Curso - - Dinámico - - En línea - - Gestores de JavaScript en linea - - JavaScript - - Navegador - - Núcleo - - Principiante - - comentários - - externo -translation_of: Learn/JavaScript/First_steps/What_is_JavaScript ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
- -

¡Bienvenido al curso de JavaScript para principiantes de MDN! En este artículo veremos JavaScript desde un alto nivel, respondiendo preguntas como "¿Qué es?" y "¿Qué puedes hacer con él?", y asegúrate de estar cómodo con el propósito de JavaScript.

- - - - - - - - - - - - -
Prerrequisitos:Conocimientos básicos de informática, conocimientos básicos de HTML y CSS.
Objetivo:Familiarizarte con lo que es JavaScript, lo que puede hacer y cómo encaja en un sitio web.
- -

Una definición de alto nivel

- -

JavaScript es un lenguaje de programación o de secuencias de comandos que te permite implementar funciones complejas en páginas web, cada vez que una página web hace algo más que sentarse allí y mostrar información estática para que la veas, muestra oportunas actualizaciones de contenido, mapas interactivos, animación de Gráficos 2D/3D, desplazamiento de máquinas reproductoras de vídeo, etc., puedes apostar que probablemente JavaScript está involucrado. Es la tercera capa del pastel de las tecnologías web estándar, dos de las cuales (HTML y CSS) hemos cubierto con mucho más detalle en otras partes del Área de aprendizaje.

- -

- - - -

Las tres capas se superponen muy bien. Tomemos una etiqueta de texto simple como ejemplo. Podemos marcarla usando HTML para darle estructura y propósito:

- -
<p>Player 1: Chris</p>
- -

- -

Luego, podemos agregar algo de CSS a la mezcla para que se vea bien:

- -
p {
-  font-family: 'helvetica neue', helvetica, sans-serif;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  text-align: center;
-  border: 2px solid rgba(0,0,200,0.6);
-  background: rgba(0,0,200,0.3);
-  color: rgba(0,0,200,0.6);
-  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
-  border-radius: 10px;
-  padding: 3px 10px;
-  display: inline-block;
-  cursor: pointer;
-}
- -

- -

Y finalmente, podemos agregar algo de JavaScript para implementar un comportamiento dinámico:

- -
const para = document.querySelector('p');
-
-para.addEventListener('click', updateName);
-
-function updateName() {
-  let name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
-}
-
- -

{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}

- -

Intenta hacer clic en esta última versión de la etiqueta de texto para ver qué sucede (ten en cuenta también que puedes encontrar esta demostración en GitHub — ¡consulta el código fuente o ejecútalo en vivo)!

- -

JavaScript puede hacer mucho más que eso — exploremos qué con más detalle.

- -

Entonces, ¿qué puede hacer realmente?

- -

El núcleo del lenguaje JavaScript de lado del cliente consta de algunas características de programación comunes que te permiten hacer cosas como:

- - - -

Sin embargo, lo que aún es más emocionante es la funcionalidad construida sobre el lenguaje JavaScript de lado del cliente. Las denominadas interfaces de programación de aplicaciones (API) te proporcionan superpoderes adicionales para utilizar en tu código JavaScript.

- -

Las API son conjuntos de bloques de construcción de código listos para usar que permiten a un desarrollador implementar programas que de otro modo serían difíciles o imposibles de implementar. Hacen lo mismo para la programación que los kits de muebles prefabricados para la construcción de viviendas — es mucho más fácil tomar paneles precortados y atornillarlos para hacer una estantería que elaborar el diseño tú mismo, que ir y encontrar la madera correcta, cortar todos los paneles del tamaño y la forma correctos, buscar los tornillos del tamaño correcto y luego júntalos para hacer una estantería.

- -

Generalmente se dividen en dos categorías.

- -

- -

Las APIs del navegador están integradas en tu navegador web y pueden exponer datos del entorno informático circundante o realizar tareas complejas y útiles. Por ejemplo:

- - - -
-

Nota: Muchas de las demostraciones anteriores no funcionarán en un navegador antiguo — al experimentar, es una buena idea utilizar un navegador moderno como Firefox, Chrome, Edge u Opera para ejecutar tu código. Deberás considerar las pruebas en varios navegadores con más detalle cuando estés más cerca de entregar el código de producción (es decir, código real que usarán los clientes reales).

-
- -

Las APIs de terceros no están integradas en el navegador de forma predeterminada y, por lo general, debes obtener su código e información de algún lugar de la Web. Por ejemplo:

- - - -
-

Nota: estas APIs son avanzadas y no cubriremos ninguna de ellas en este módulo. Puedes obtener más información sobre estas en nuestro módulo de APIs web de lado del cliente.

-
- -

¡También hay mucho más disponible! Sin embargo, no te emociones demasiado todavía. No podrás crear el próximo Facebook, Google Maps o Instagram después de estudiar JavaScript durante 24 horas — hay muchos conceptos básicos que cubrir primero. Y es por eso que estás aquí — ¡sigamos adelante!

- -

¿Qué está haciendo JavaScript en tu página?

- -

Aquí, de hecho, comenzaremos a ver algo de código y, mientras lo hacemos, exploraremos lo que realmente sucede cuando ejecutas JavaScript en tu página.

- -

Recapitulemos brevemente sobre la historia de lo que sucede cuando cargas una página web en un navegador (de lo que hablamos por primera vez en nuestro artículo Cómo funciona CSS). Cuando cargas una página web en tu navegador, estás ejecutando tu código (HTML, CSS y JavaScript) dentro de un entorno de ejecución (la pestaña del navegador). Esto es como una fábrica que toma materias primas (el código) y genera un producto (la página web).

- -

- -

Un uso muy común de JavaScript es modificar dinámicamente HTML y CSS para actualizar una interfaz de usuario, a través de la API del modelo de objetos del documento (como se mencionó anteriormente). Ten en cuenta que el código de tus documentos web generalmente se cargan y ejecutan en el orden en que aparece en la página. Si JavaScript se carga e intenta ejecutarse antes de que se hayan cargado el HTML y el CSS al que afecta, pueden producirse errores. Aprenderás formas de evitar esto más adelante en el artículo, en la sección Estrategias de carga de scripts.

- -

Seguridad del navegador

- -

Cada pestaña del navegador tiene su propio depósito separado para ejecutar código (estos depósitos se denominan "entornos de ejecución" en términos técnicos) — esto significa que, en la mayoría de los casos, el código de cada pestaña se ejecuta de forma completamente independiente y el código de una pestaña no puede afectar el código en otra pestaña, o en otro sitio web. Esta es una buena medida de seguridad — si este no fuera el caso, los piratas podrían comenzar a escribir código para robar información de otros sitios web y otras cosas muy malas.

- -
-

Nota: Existen formas de enviar código y datos entre diferentes sitios web/pestañas de manera segura, pero estas son técnicas avanzadas que no cubriremos en este curso.

-
- -

Orden de ejecución de JavaScript

- -

Cuando el navegador encuentra un bloque de JavaScript, generalmente lo ejecuta en orden, de arriba a abajo. Esto significa que debes tener cuidado con el orden en el que colocas las cosas. Por ejemplo, volvamos al bloque de JavaScript que vimos en nuestro primer ejemplo:

- -
const para = document.querySelector('p');
-
-para.addEventListener('click', updateName);
-
-function updateName() {
-  let name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
-}
- -

Aquí seleccionamos un párrafo de texto (línea 1), luego adjuntamos un detector de eventos (línea 3) de modo que cuando se hace clic en el párrafo, el bloque de código updateName() (líneas 5-8) se ejecuta. El bloque de código updateName() (estos tipos de bloques de código reutilizables se denominan "funciones") pide al usuario un nuevo nombre y luego inserta ese nombre en el párrafo para actualizar la pantalla.

- -

Si cambiaras el orden de las dos primeras líneas de código, ya no funcionaría — en su lugar, obtendrías un error en la consola del desarrollador del navegador — TypeError: para is undefined. Esto significa que el objeto para aún no existe, por lo que no podemos agregarle un detector de eventos.

- -
-

Nota: Este es un error muy común; debes tener cuidado de que los objetos a los que se hace referencia en tu código existan antes de intentar hacer algo con ellos.

-
- -

Código interpretado versus compilado

- -

Es posible que escuches los términos interpretados y compilados en el contexto de la programación. En los lenguajes interpretados, el código se ejecuta de arriba a abajo y el resultado de ejecutar el código se devuelve inmediatamente. No tienes que transformar el código en una forma diferente antes de que el navegador lo ejecute. El código se recibe en su forma de texto amigable para el programador y se procesa directamente desde allí.

- -

Los lenguajes compilados, por otro lado, se transforman (compilan) a código máquina antes de que sean ejecutados por la computadora. Por ejemplo, C/C++ se compila a código máquina que luego ejecuta la computadora. El programa se ejecuta desde un formato binario, que se generó a partir del código fuente del programa original.

- -

JavaScript es un lenguaje de programación interpretado ligero. El navegador web recibe el código JavaScript en su forma de texto original y ejecuta el script a partir de ahí. Desde un punto de vista técnico, la mayoría de los intérpretes de JavaScript modernos utilizan una técnica llamada compilación en tiempo real para mejorar el rendimiento; el código fuente de JavaScript se compila en un formato binario más rápido mientras se usa el script, de modo que se pueda ejecutar lo más rápido posible. Sin embargo, JavaScript todavía se considera un lenguaje interpretado, ya que la compilación se maneja en el entorno de ejecución, en lugar de antes.

- -

Ambos tipos de lenguaje tienen ventajas, pero no las abordaremos ahora.

- -

Código de lado del servidor versus de lado del cliente

- -

También puedes escuchar los términos código de lado del servidor y de lado del cliente, especialmente en el contexto del desarrollo web. El código de lado del cliente es un código que se ejecuta en la computadora del usuario — cuando se ve una página web, el código de lado del cliente de la página se descarga, luego se ejecuta y se muestra en el navegador. En este módulo estamos hablando explícitamente de JavaScript de lado del cliente.

- -

El código de lado del servidor, por otro lado, se ejecuta en el servidor, luego sus resultados se descargan y se muestran en el navegador. Ejemplos de lenguajes web populares de lado del servidor incluyen a ¡PHP, Python, Ruby, ASP.NET y... JavaScript! JavaScript también se puede utilizar como lenguaje de lado del servidor, por ejemplo, en el popular entorno Node.js — puedes obtener más información sobre JavaScript de lado del servidor en nuestro tema Sitios web dinámicos — Programación de lado del servidor.

- -

Código dinámico versus estático

- -

La palabra dinámico se usa para describir tanto a JavaScript de lado del cliente como a los lenguajes de lado del servidor — se refiere a la capacidad de actualizar la visualización de una página web/aplicación para mostrar diferentes cosas en diferentes circunstancias, generando contenido nuevo según sea necesario. El código de lado del servidor genera dinámicamente nuevo contenido en el servidor, p. ej. extraer datos de una base de datos, mientras que JavaScript de lado del cliente genera dinámicamente nuevo contenido dentro del navegador del cliente, p. ej. creando una nueva tabla HTML, llenándola con los datos solicitados al servidor y luego mostrando la tabla en una página web que se muestra al usuario. El significado es ligeramente diferente en los dos contextos, pero relacionado, y ambos enfoques (de lado del servidor y de lado del cliente) generalmente funcionan juntos.

- -

Una página web sin contenido que se actualiza dinámicamente se denomina estática — simplemente muestra el mismo contenido todo el tiempo.

- -

¿Cómo agregas JavaScript a tu página?

- -

JavaScript se aplica a tu página HTML de manera similar a CSS. Mientras que CSS usa elementos {{htmlelement("link")}} para aplicar hojas de estilo externas y elementos {{htmlelement("style")}} para aplicar hojas de estilo internas a HTML, JavaScript solo necesita un amigo en el mundo de HTML: el elemento {htmlelement("script")}}. Aprendamos cómo funciona esto.

- -

JavaScript interno

- -
    -
  1. En primer lugar, haz una copia local de nuestro archivo de ejemplo apply-javascript.html. Guárdalo en un directorio en algún lugar accesible.
    2. -
  2. Abre el archivo en tu navegador web y en tu editor de texto. Verás que el HTML crea una página web simple que contiene un botón en el que se puede hacer clic.
    3. -
  3. A continuación, ve a tu editor de texto y agrega lo siguiente en tu head, justo antes de tu etiqueta de cierre </head>: - 
    <script>
-
-  // JavaScript va aquí
-
-</script>
    -
    4. -
  4. Ahora agregaremos algo de JavaScript dentro de nuestro elemento {{htmlelement("script")}} para que la página haga algo más interesante — agrega el siguiente código justo debajo de la línea "// El código JavaScript va aquí": - 
    document.addEventListener("DOMContentLoaded", function() {
-  function createParagraph() {
-    let para = document.createElement('p');
-    para.textContent = 'You clicked the button!';
-    document.body.appendChild(para);
-  }
-
-  const buttons = document.querySelectorAll('button');
-
-  for(let i = 0; i < buttons.length ; i++) {
-    buttons[i].addEventListener('click', createParagraph);
-  }
-});
    -
    5. -
  5. Guarda tu archivo y actualiza el navegador — ahora deberías ver que cuando haces clic en el botón, se genera un nuevo párrafo y se coloca debajo.
    6. -
- -
-

Nota: Si tu ejemplo no parece funcionar, sigue los pasos nuevamente y verifica que hiciste todo bien. ¿Guardaste tu copia local del código de inicio como un archivo .html? ¿Agregaste tu elemento {{htmlelement("script")}} justo antes de la etiqueta </head>? ¿Ingresaste el JavaScript exactamente como se muestra? JavaScript distingue entre mayúsculas y minúsculas y es muy exigente, por lo que debes ingresar la sintaxis exactamente como se muestra; de lo contrario, es posible que no funcione.

-
- -
-

Nota: Puedes ver esta versión en GitHub como apply-javascript-internal.html o (verla en vivo también).

-
- -

JavaScript externo

- -

Esto funciona muy bien, pero ¿y si quisiéramos poner nuestro JavaScript en un archivo externo? Exploremos esto ahora.

- -
    -
  1. Primero, crea un nuevo archivo en el mismo directorio que tu archivo HTML del ejemplo. Como nombre ponle script.js; asegúrate de que el nombre tenga la extensión .js, ya que así es como se reconoce como JavaScript.
    2. -
  2. Reemplaza tu elemento {{htmlelement("script")}} actual con lo siguiente: - 
    <script src="script.js" defer></script>
    -
    3. -
  3. Dentro de script.js, agrega el siguiente script: - 
    function createParagraph() {
-  let para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
-
-const buttons = document.querySelectorAll('button');
-
-for(let i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
    -
    4. -
  4. Guarda y actualiza tu navegador, ¡y deberías ver lo mismo! Funciona igual, pero ahora tenemos nuestro JavaScript en un archivo externo. Por lo general, esto es bueno en términos de organización de tu código y para hacerlo reutilizable en varios archivos HTML. Además, el HTML es más fácil de leer sin grandes trozos de script en él.
    5. -
- -
-

Nota: Puedes ver esta versión en GitHub como apply-javascript-external.html y script.js (verla en vivo también).

-
- -

Controladores de JavaScript en línea

- -

Ten en cuenta que a veces te encontrarás con fragmentos de código JavaScript real dentro de HTML. Podría verse algo similar a esto:

- -
-
function createParagraph() {
-  let para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
- -
<button onclick="createParagraph()">Click me!</button>
-
- -

Puedes probar esta versión de nuestra demostración a continuación.

- -

{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}

- -

Esta demostración tiene exactamente la misma funcionalidad que en las dos secciones anteriores, excepto que el elemento {{htmlelement("button")}} incluye un controlador onclick en línea para que la función se ejecute cuando se presiona el botón .

- -

Sin embargo, no hagas esto. Es una mala práctica contaminar tu HTML con JavaScript, y es ineficiente; tendrías que incluir el atributo onclick="createParagraph()" en cada botón al que desees que se aplique JavaScript.

- -

El uso de una construcción de JavaScript pura te permite seleccionar todos los botones usando una instrucción. El código que usamos anteriormente para cumplir este propósito se ve así:

- -
const buttons = document.querySelectorAll('button');
-
-for(let i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
- -

Esto puede ser un poco más largo que el atributo onclick, pero funcionará para todos los botones, sin importar cuántos haya en la página, ni cuántos se agreguen o eliminen. No es necesario cambiar el JavaScript.

- -
-

Nota: Intenta editar tu versión de apply-javascript.html y agrega algunos botones más en el archivo. Cuando la vuelvas a cargar, deberías encontrar que todos los botones al hacer clic crearán un párrafo. Limpio, ¿eh?

-
- -

Estrategias para la carga de scripts

- -

Hay una serie de problemas relacionados con la carga de los scripts en el momento adecuado. ¡Nada es tan simple como parece! Un problema común es que todo el HTML de una página se carga en el orden en que aparece. Si estás utilizando JavaScript para manipular elementos en la página (o exactamente, el Modelo de objetos del documento), tu código no funcionará si el JavaScript se carga y procesa antes que el HTML que estás intentando haga algo.

- -

En los ejemplos de código anteriores, en los ejemplos internos y externos, JavaScript se carga y se ejecuta en el encabezado del documento, antes de analizar el cuerpo HTML. Esto podría causar un error, por lo que hemos utilizado algunas construcciones para solucionarlo.

- -

En el ejemplo interno, puedes ver esta estructura alrededor del código:

- -
document.addEventListener("DOMContentLoaded", function() {
-  ...
-});
- -

Este es un detector de eventos, que escucha el evento "DOMContentLoaded" del navegador, lo cual significa que el cuerpo HTML está completamente cargado y analizado. El JavaScript dentro de este bloque no se ejecutará hasta que se active ese evento, por lo que se evita el error (aprenderás sobre los eventos más adelante en el curso).

- -

En el ejemplo externo, usamos una función de JavaScript más moderno para resolver el problema, el atributo defer, que le dice al navegador que continúe descargando el contenido HTML una vez que se ha alcanzado la etiqueta del elemento <script>.

- -
<script src="script.js" defer></script>
- -

En este caso, tanto el script como el HTML se cargarán simultáneamente y el código funcionará.

- -
-

Nota: En el caso externo, no necesitamos usar el evento DOMContentLoaded porque el atributo defer nos resolvió el problema. No usamos la solución defer para el ejemplo interno de JavaScript porque defer solo funciona para scripts externos.

-
- -

Una solución pasada de moda a este problema solía ser colocar tu elemento script justo en la parte inferior del cuerpo (por ejemplo, justo antes de la etiqueta </body>), para que se cargara después de haber procesado todo el HTML. El problema con esta solución es que la carga/procesamiento del script está completamente bloqueado hasta que se haya cargado el DOM HTML. En sitios muy grandes con mucho JavaScript, esto puede causar un importante problema de rendimiento y ralentizar tu sitio.

- -

async y defer

- -

En realidad, hay dos modernas características que podemos usar para evitar el problema del bloqueo de script: async y defer (que vimos anteriormente). Veamos la diferencia entre estas dos.

- -

Los scripts cargados con el atributo async (ve más abajo) descargarán el script sin bloquear el renderizado de la página y lo ejecutará tan pronto como el script se termine de descargar. No tienes garantía de que los scripts se ejecuten en un orden específico, solo que no detendrán la visualización del resto de la página. Es mejor usar async cuando los scripts de la página se ejecutan de forma independiente y no dependen de ningún otro script de la página.

- -

Por ejemplo, si tienes los siguientes elementos script:

- -
<script async src="js/vendor/jquery.js"></script>
-
-<script async src="js/script2.js"></script>
-
-<script async src="js/script3.js"></script>
- -

No puedes confiar en el orden en que se cargarán los scripts. jquery.js se puede cargar antes o después de script2.js y script3.js y si este es el caso, cualquier función en esos scripts dependiendo de jquery producirá un error porque jquery no se definirá en el momento en que se ejecute el script.

- -

async se debe usar cuando tienes un montón de scripts en segundo plano para cargar, y solo deseas ponerlos en su lugar lo antes posible. Por ejemplo, tal vez tengas algunos archivos de datos del juego para cargar, que serán necesarios cuando el juego realmente comience, pero por ahora solo deseas continuar mostrando la introducción del juego, los títulos y el lobby, sin que se bloqueen al cargar el script.

- -

Los scripts cargados con el atributo defer (ve a continuación) se ejecutarán en el orden en que aparecen en la página y los ejecutará tan pronto como se descarguen el script y el contenido:

- -
<script defer src="js/vendor/jquery.js"></script>
-
-<script defer src="js/script2.js"></script>
-
-<script defer src="js/script3.js"></script>
- -

Todos los scripts con el atributo defer se cargarán en el orden en que aparecen en la página. Entonces, en el segundo ejemplo, podemos estar seguros de que jquery.js se cargará antes que script2.js y script3.js y que script2.js se cargará antes de script3.js. No se ejecutarán hasta que se haya cargado todo el contenido de la página, lo cual es útil si tus scripts dependen de que el DOM esté en su lugar (por ejemplo, modifican uno o más elementos de la página).

- -

Para resumir:

- - - -

Comentarios

- -

Al igual que con HTML y CSS, es posible escribir comentarios en tu código JavaScript que el navegador ignorará y que existen simplemente para proporcionar instrucciones a tus compañeros desarrolladores sobre cómo funciona el código (y a ti, si regresas a tu código después de seis meses y no puedes recordar lo que hiciste). Los comentarios son muy útiles y deberías utilizarlos con frecuencia, especialmente para aplicaciones grandes. Hay dos tipos:

- - - -

Entonces, por ejemplo, podríamos anotar el JavaScript de nuestra última demostración con comentarios como este:

- -
// Función: crea un nuevo párrafo y lo agrega al final del cuerpo HTML.
-
-function createParagraph() {
-  let para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
-
-/*
-  1. Obtiene referencias de todos los botones de la página en un formato de arreglo.
-  2. Recorre todos los botones y agrega un detector de eventos 'click' a cada uno.
-
-  Cuando se presione cualquier botón, se ejecutará la función createParagraph().
-*/
-
-const buttons = document.querySelectorAll('button');
-
-for (let i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
- -
-

Nota: En general, más comentarios suelen ser mejor que menos, pero debes tener cuidado si agregas muchos comentarios para explicar qué son las variables (los nombres de tus variables tal vez deberían ser más intuitivos), o para explicar operaciones muy simples (tal vez tu código sea demasiado complicado).

-
- -

Resumen

- -

Así que ahí tienes, tu primer paso en el mundo de JavaScript. Comenzamos solo con teoría, para comenzar a acostumbrarte a por qué usarías JavaScript y qué tipo de cosas puedes hacer con él. En el camino, viste algunos ejemplos de código y aprendiste cómo encaja JavaScript con el resto del código en tu sitio web, entre otras cosas.

- -

JavaScript puede parecer un poco abrumador en este momento, pero no te preocupes — en este curso, te guiaremos en pasos simples que tendrán sentido en el futuro. En el próximo artículo, nos sumergiremos directamente en lo práctico, lo que te permitirá comenzar directamente y crear tus propios ejemplos de JavaScript.

- - - -

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

- -

En este modulo

- - diff --git a/files/es/learn/javascript/first_steps/silly_story_generator/index.html b/files/es/learn/javascript/first_steps/silly_story_generator/index.html new file mode 100644 index 0000000000..58bb8e688a --- /dev/null +++ b/files/es/learn/javascript/first_steps/silly_story_generator/index.html @@ -0,0 +1,147 @@ +--- +title: Generador de historias absurdas +slug: Learn/JavaScript/First_steps/Generador_de_historias_absurdas +tags: + - Arreglos + - Cadenas + - JavaScript + - Numeros + - Principiante +translation_of: Learn/JavaScript/First_steps/Silly_story_generator +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
+ +

+ +

En esta evaluación, deberás tomar parte del conocimiento que has aprendido en los artículos de este módulo y aplicarlo a la creación de una aplicación divertida que genere historias aleatorias. ¡Que te diviertas!

+ + + + + + + + + + + + +
Prerrequisitos:Antes de intentar esta evaluación, deberías haber revisado todos los artículos de este módulo.
Objetivo:Probar la comprensión de los fundamentos de JavaScript, como variables, números, operadores, cadenas y matrices
+ +

Punto de partida

+ +

Para iniciar esta evaluación, debe:

+ + + +
+

Nota: Alternativamente, puede usar un sitio como JSBin o Thimble para hacer su evaluación. Puede pegar el HTML, CSS y JavaScript en uno de estos editores en línea. Si el editor en línea que está utilizando no tiene un panel de JavaScript separado, no dude en colocarlo en línea en un elemento <script> dentro de la página HTML.

+
+ +

Resumen del proyecto

+ +

Se le han proporcionado algunos HTML / CSS en bruto y algunas cadenas de texto y funciones de JavaScript; necesita escribir el JavaScript necesario para convertir esto en un programa de trabajo, que hace lo siguiente:

+ + + +

La siguiente captura de pantalla muestra un ejemplo de lo que debería producir el programa terminado:

+ +

+ +

Para darle más idea, eche un vistazo al ejemplo final (¡no mire el código fuente!)

+ +

Etapas para completar

+ +

En las siguientes secciones se describe lo que hay que hacer.

+ +

Configuración básica:

+ +
    +
  1. Crear un nuevo archivo llamado main.js, en el mismo directorio que tu archivo index.html.
    2. +
  2. Aplicar el archivo JavaScript externo a tu HTML insertando un elemento {{htmlelement("script")}} en tu HTML haciendo referencia a main.js. Póngalo justo antes de la etiquette de cierra </body>.
    3. +
+ +

Variables y funciones iniciales:

+ +
    +
  1. en el archivo de texto sin procesar, copia todo el código bajo el encabezado "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" y pégalo en la parte superior del archivo main.js. Esto te dará tres variables que almacenan las referencias al campo de texto "Enter custom name" (customName), el botón "Generate random story" (randomize), y el elemento {{htmlelement("p")}} al fondo del cuerpo HTML en el que la historia será copiada en (story), respectivamente. Además, obtendrás una funcion llamada randomValueFromArray() que toma un array, y devuelve uno de los items guardados dentro del array al azar.
    2. +
  2. Ahora observa la segunda sección del archivo de texto sin procesar — "2. RAW TEXT STRINGS". Esta contiene cadenas de texto que actuarán como entrada en nuestro programa. Nos gustaría que mantengas estas variables internas dentro del archivo main.js: +
      +
    1. Almacena la primera, la más larga, cadena de texto dentro de una variable llamada storyText.
      2. +
    2. Almacena el primer conjunto de tres cadenas dentro de un array llamado insertX.
      3. +
    3. Almacena el segundo conjunto de tres cadenas dentro de un array llamado insertY.
      4. +
    4. Almacena el tercer conjunto de tres cadenas dentro de un array llamado insertZ.
      5. +
    +
    3. +
+ +

Colocar el controlador de evento y la función incompleta:

+ +
    +
  1. Ahora regresa al archivo de texto sin procesar.
    2. +
  2. Copia el código encontrado bajo el encabezado "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" y pégalo al fondo de tu archivo main.js . Esto: +
      +
    • Añade un detector de eventos a la variable randomize, de manera que cuando al botón que esta representa se le haya dado un click, la función result() funcione.
      • +
    • Añade una definición de la función parcialmente completada result() a tu código. Por el resto de la evaluación, deberás llenar en líneas dentro de esta función para completarla y hacer que trabaje adecuadamente.
      • +
    +
    3. +
+ +

Completando la función result():

+ +
    +
  1. Crear una nueva variable llamada newStory, y establezca su valor igual a storyText. Esto es necesario para que podamos crear una nueva historia aleatoria cada vez que se presiona el botón y se ejecuta la función. Si hiciéramos cambios directamente en storyText, solo podríamos generar una nueva historia una vez.
    2. +
  2. Crear tres nuevas variables llamadas xItem, yItem, y zItem, y tienes que igualar cada variable llamando a randomValueFromArray() en sus tres matrices (el resultado en cada caso será un elemento aleatorio de cada matriz en la que se llama). Por ejemplo, puede llamar a la función y hacer que devuelva una cadena aleatoria de  insertX escribiendo randomValueFromArray(insertX).
    3. +
  3. A continuación, queremos reemplazar los tres marcadores de posición en la cadena newStory — :insertx:, :inserty:, y :insertz: — con las cadenas almacenadas en xItem, yItem, y zItem. Hay un método de string en particular que lo ayudará aquí: en cada caso, haga que la llamada al método sea igual a newStory de modo que cada vez que se llame, newStory se iguale a sí mismo, pero con sustituciones. Entonces, cada vez que se presiona el botón, estos marcadores de posición se reemplazan con una cadena absurda aleatoria. Como sugerencia adicional, el método en cuestión solo reemplaza la primera instancia de la subcadena que encuentra, por lo que es posible que deba realizar una de las llamadas dos veces.
    4. +
  4. Dentro del primer bloque if, agregue otra llamada al método de reemplazo de cadena para reemplazar el nombre 'Bob' que se encuentra en la cadena newStory con la variable de name. En este bloque estamos diciendo "Si se ingresó un valor en la entrada de texto customName  reemplace a Bob en la historia con ese nombre personalizado."
    5. +
  5. Dentro del segundo bloque if, se esta verificando si se ha seleccionado el botón de opción uk  Si es así, queremos convertir los valores de peso y temperatura en la historia de libras and Fahrenheit a stones and grados centígrados. Lo que debe hacer es lo siguiente: +
      +
    1. Busque las fórmulas para convertir libras a stone, and Fahrenheit en grados centígrados.
      2. +
    2. Dentro de la línea que define la variable de weight, reemplace 300 con un cálculo que convierta 300 libras en stones. Concatenar 'stone' al final del resultado de la llamada Math.round().
      3. +
    3. Al lado de la línea que define la variable de temperature, reemplace 94 con un cálculo que convierta 94 Fahrenheit en centígrados. Concatenar 'centigrade' al final del resultado de la llamada Math.round().
      4. +
    4. Justo debajo de las dos definiciones de variables, agregue dos líneas de reemplazo de cadena más que reemplacen '94 fahrenheit 'con el contenido de la variable de temperature, y  '300 libras' con el contenido de la variable de weight.
      5. +
    +
    6. +
  6. Finalmente, en la penúltima línea de la función, haga que la propiedad textContent de la variable de la story (que hace referencia al párrafo) sea igual a newStory.
    7. +
+ +

Claves y pistas

+ + + +

Evaluación o ayuda adicional

+ +

Si está siguiendo esta evaluación como parte de un curso organizado, debería poder entregar su trabajo a su profesor/mentor para que lo califique. Si está aprendiendo por ti mismo, puede obtener la guía de calificación con bastante facilidad preguntando en el hilo de discussion thread for this exercise, o en el canal de IRC #mdn en Mozilla IRC. Pruebe el ejercicio primero: ¡no se gana nada haciendo trampa!

+ +

{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/javascript/first_steps/test_your_skills_colon__strings/index.html b/files/es/learn/javascript/first_steps/test_your_skills_colon__strings/index.html new file mode 100644 index 0000000000..f919ac1ee3 --- /dev/null +++ b/files/es/learn/javascript/first_steps/test_your_skills_colon__strings/index.html @@ -0,0 +1,122 @@ +--- +title: 'Prueba tus habilidades: Strings' +slug: 'Learn/JavaScript/First_steps/Prueba_tus_habilidades:_Strings' +tags: + - Cadenas + - JavaScript + - Novato + - Principiante + - Prueba tus habilidades + - aprende + - strings +translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_Strings' +--- +
{{learnsidebar}}
+ +

El objetivo de esta prueba de habilidad es evaluar si has entendido nuestros artículos Manejo de texto — cadenas en JavaScript y Métodos de cadena útiles.

+ +
+

Nota: Puedes probar las soluciones en los editores interactivos a continuación, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.
+
+ Si te quedas atascado, pídenos ayuda — consulta la sección {{anch("Evaluación o ayuda adicional")}} en la parte inferior de esta página.

+
+ +
+

Nota: En los siguientes ejemplos, si hay un error en tu código, se mostrará en el panel de resultados de la página, para ayudarte a intentar averiguar la respuesta (o en la consola JavaScript del navegador, en el caso de la versión descargable).

+
+ +

Cadenas 1

+ +

En nuestra primera tarea de cadenas, comenzaremos con algo pequeño. Ya tienes la mitad de una cita famosa dentro de una variable llamada quoteStart; nos gustaría que:

+ +
    +
  1. Busques la otra mitad de la cita y la agregues al ejemplo dentro de una variable llamada quoteEnd.
    2. +
  2. Concatenes las dos cadenas para hacer una sola cadena que contenga la cita completa. Guardes el resultado dentro de una variable llamada finalQuote.
    3. +
+ +

Verás que obtienes un error en este punto. ¿Puedes solucionar el problema con quoteStart para que la cita completa se muestre correctamente?

+ +

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings1.html", '100%', 400)}}

+ +
+

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Cadenas 2

+ +

En esta tarea, se te proporcionan dos variables, quote y substring, que contienen dos cadenas. Nos gustaría que:

+ +
    +
  1. Recuperes la longitud de la cita y la guardes en una variable llamada quoteLength.
    2. +
  2. Busques la posición del índice donde aparece substring en quote, y almacenes ese valor en una variable llamada index.
    3. +
  3. Uses una combinación de las variables que tienes y las propiedades/métodos de cadena disponibles para recortar la cita original a "No me gustan los huevos verdes y el jamón", y la guardes en una variable llamada revisedQuote.
    4. +
+ +

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings2.html", '100%', 400)}}

+ +
+

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Cadenas 3

+ +

En la siguiente tarea de cadenas, se te da la misma cita con la que terminaste en la tarea anterior, ¡pero está algo rota! Queremos que la arregles y actualices, así:

+ +
    +
  1. Cambia la letra mayúscula para corregir con mayúscula inicial la oración (todo en minúsculas, excepto la primera letra mayúscula). Almacena la nueva cita en una variable llamada fixedQuote.
    2. +
  2. En fixedQuote, reemplaza "huevos verdes con jamón" con otro alimento que realmente no te guste.
    3. +
  3. Hay una pequeña solución más por hacer: agrega un punto al final de la cita y guarda la versión final en una variable llamada finalQuote.
    4. +
+ +

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings3.html", '100%', 400)}}

+ +
+

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Cadenas 4

+ +

En la tarea de cadena final, te hemos dado el nombre de un teorema, dos valores numéricos y una cadena incompleta (los bits que se deben agregar están marcados con asteriscos (*)). Queremos que cambies el valor de la cadena de la siguiente manera:

+ +
    +
  1. Cámbiala de un literal de cadena normal a una plantilla literal.
    2. +
  2. Reemplaza los cuatro asteriscos con cuatro marcadores de posición en la plantilla literal. Estos deben ser: +
      +
    1. El nombre del teorema.
      2. +
    2. Los dos valores numéricos que tenemos.
      3. +
    3. La longitud de la hipotenusa de un triángulo rectángulo, dado que las longitudes de los otros dos lados son iguales a los dos valores que tenemos. Deberás buscar cómo calcular esto a partir de lo que tienes. Haz el cálculo dentro del marcador de posición.
      4. +
    +
    3. +
+ +

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings4.html", '100%', 400)}}

+ +
+

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Evaluación o ayuda adicional

+ +

Puedes practicar estos ejemplos en los editores interactivos anteriores.

+ +

Si deseas que se evalúe tu trabajo o estás atascado y deseas pedir ayuda:

+ +
    +
  1. Coloca tu trabajo en un editor que se pueda compartir en línea, como CodePen, jsFiddle o Glitch. Puedes escribir el código tú mismo o utilizar los archivos de punto de partida vinculados en las secciones anteriores.
    2. +
  2. Escribe una publicación solicitando evaluación y/o ayuda en la categoría de aprendizaje del foro de discusión de MDN. Tu publicación debe incluir: +
      +
    • Un título descriptivo como "Se busca evaluación para la prueba de habilidad de Cadenas 1".
      • +
    • Detalles de lo que ya has probado y lo que te gustaría que hiciéramos, p. ej. si estás atascado y necesitas ayuda, o quiere una evaluación.
      • +
    • Un enlace al ejemplo que deseas evaluar o con el que necesitas ayuda, en un editor que se pueda compartir en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica para entrar — es muy difícil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • +
    • Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que deseas ayuda.
      • +
    +
    3. +
diff --git a/files/es/learn/javascript/first_steps/what_is_javascript/index.html b/files/es/learn/javascript/first_steps/what_is_javascript/index.html new file mode 100644 index 0000000000..bd845c8681 --- /dev/null +++ b/files/es/learn/javascript/first_steps/what_is_javascript/index.html @@ -0,0 +1,436 @@ +--- +title: ¿Qué es JavaScript? +slug: Learn/JavaScript/First_steps/Qué_es_JavaScript +tags: + - APIs + - Aprender + - Artículo + - Añadir JavaScript + - Curso + - Dinámico + - En línea + - Gestores de JavaScript en linea + - JavaScript + - Navegador + - Núcleo + - Principiante + - comentários + - externo +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
+ +

¡Bienvenido al curso de JavaScript para principiantes de MDN! En este artículo veremos JavaScript desde un alto nivel, respondiendo preguntas como "¿Qué es?" y "¿Qué puedes hacer con él?", y asegúrate de estar cómodo con el propósito de JavaScript.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, conocimientos básicos de HTML y CSS.
Objetivo:Familiarizarte con lo que es JavaScript, lo que puede hacer y cómo encaja en un sitio web.
+ +

Una definición de alto nivel

+ +

JavaScript es un lenguaje de programación o de secuencias de comandos que te permite implementar funciones complejas en páginas web, cada vez que una página web hace algo más que sentarse allí y mostrar información estática para que la veas, muestra oportunas actualizaciones de contenido, mapas interactivos, animación de Gráficos 2D/3D, desplazamiento de máquinas reproductoras de vídeo, etc., puedes apostar que probablemente JavaScript está involucrado. Es la tercera capa del pastel de las tecnologías web estándar, dos de las cuales (HTML y CSS) hemos cubierto con mucho más detalle en otras partes del Área de aprendizaje.

+ +

+ + + +

Las tres capas se superponen muy bien. Tomemos una etiqueta de texto simple como ejemplo. Podemos marcarla usando HTML para darle estructura y propósito:

+ +
<p>Player 1: Chris</p>
+ +

+ +

Luego, podemos agregar algo de CSS a la mezcla para que se vea bien:

+ +
p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor: pointer;
+}
+ +

+ +

Y finalmente, podemos agregar algo de JavaScript para implementar un comportamiento dinámico:

+ +
const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+
+ +

{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}

+ +

Intenta hacer clic en esta última versión de la etiqueta de texto para ver qué sucede (ten en cuenta también que puedes encontrar esta demostración en GitHub — ¡consulta el código fuente o ejecútalo en vivo)!

+ +

JavaScript puede hacer mucho más que eso — exploremos qué con más detalle.

+ +

Entonces, ¿qué puede hacer realmente?

+ +

El núcleo del lenguaje JavaScript de lado del cliente consta de algunas características de programación comunes que te permiten hacer cosas como:

+ + + +

Sin embargo, lo que aún es más emocionante es la funcionalidad construida sobre el lenguaje JavaScript de lado del cliente. Las denominadas interfaces de programación de aplicaciones (API) te proporcionan superpoderes adicionales para utilizar en tu código JavaScript.

+ +

Las API son conjuntos de bloques de construcción de código listos para usar que permiten a un desarrollador implementar programas que de otro modo serían difíciles o imposibles de implementar. Hacen lo mismo para la programación que los kits de muebles prefabricados para la construcción de viviendas — es mucho más fácil tomar paneles precortados y atornillarlos para hacer una estantería que elaborar el diseño tú mismo, que ir y encontrar la madera correcta, cortar todos los paneles del tamaño y la forma correctos, buscar los tornillos del tamaño correcto y luego júntalos para hacer una estantería.

+ +

Generalmente se dividen en dos categorías.

+ +

+ +

Las APIs del navegador están integradas en tu navegador web y pueden exponer datos del entorno informático circundante o realizar tareas complejas y útiles. Por ejemplo:

+ + + +
+

Nota: Muchas de las demostraciones anteriores no funcionarán en un navegador antiguo — al experimentar, es una buena idea utilizar un navegador moderno como Firefox, Chrome, Edge u Opera para ejecutar tu código. Deberás considerar las pruebas en varios navegadores con más detalle cuando estés más cerca de entregar el código de producción (es decir, código real que usarán los clientes reales).

+
+ +

Las APIs de terceros no están integradas en el navegador de forma predeterminada y, por lo general, debes obtener su código e información de algún lugar de la Web. Por ejemplo:

+ + + +
+

Nota: estas APIs son avanzadas y no cubriremos ninguna de ellas en este módulo. Puedes obtener más información sobre estas en nuestro módulo de APIs web de lado del cliente.

+
+ +

¡También hay mucho más disponible! Sin embargo, no te emociones demasiado todavía. No podrás crear el próximo Facebook, Google Maps o Instagram después de estudiar JavaScript durante 24 horas — hay muchos conceptos básicos que cubrir primero. Y es por eso que estás aquí — ¡sigamos adelante!

+ +

¿Qué está haciendo JavaScript en tu página?

+ +

Aquí, de hecho, comenzaremos a ver algo de código y, mientras lo hacemos, exploraremos lo que realmente sucede cuando ejecutas JavaScript en tu página.

+ +

Recapitulemos brevemente sobre la historia de lo que sucede cuando cargas una página web en un navegador (de lo que hablamos por primera vez en nuestro artículo Cómo funciona CSS). Cuando cargas una página web en tu navegador, estás ejecutando tu código (HTML, CSS y JavaScript) dentro de un entorno de ejecución (la pestaña del navegador). Esto es como una fábrica que toma materias primas (el código) y genera un producto (la página web).

+ +

+ +

Un uso muy común de JavaScript es modificar dinámicamente HTML y CSS para actualizar una interfaz de usuario, a través de la API del modelo de objetos del documento (como se mencionó anteriormente). Ten en cuenta que el código de tus documentos web generalmente se cargan y ejecutan en el orden en que aparece en la página. Si JavaScript se carga e intenta ejecutarse antes de que se hayan cargado el HTML y el CSS al que afecta, pueden producirse errores. Aprenderás formas de evitar esto más adelante en el artículo, en la sección Estrategias de carga de scripts.

+ +

Seguridad del navegador

+ +

Cada pestaña del navegador tiene su propio depósito separado para ejecutar código (estos depósitos se denominan "entornos de ejecución" en términos técnicos) — esto significa que, en la mayoría de los casos, el código de cada pestaña se ejecuta de forma completamente independiente y el código de una pestaña no puede afectar el código en otra pestaña, o en otro sitio web. Esta es una buena medida de seguridad — si este no fuera el caso, los piratas podrían comenzar a escribir código para robar información de otros sitios web y otras cosas muy malas.

+ +
+

Nota: Existen formas de enviar código y datos entre diferentes sitios web/pestañas de manera segura, pero estas son técnicas avanzadas que no cubriremos en este curso.

+
+ +

Orden de ejecución de JavaScript

+ +

Cuando el navegador encuentra un bloque de JavaScript, generalmente lo ejecuta en orden, de arriba a abajo. Esto significa que debes tener cuidado con el orden en el que colocas las cosas. Por ejemplo, volvamos al bloque de JavaScript que vimos en nuestro primer ejemplo:

+ +
const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+ +

Aquí seleccionamos un párrafo de texto (línea 1), luego adjuntamos un detector de eventos (línea 3) de modo que cuando se hace clic en el párrafo, el bloque de código updateName() (líneas 5-8) se ejecuta. El bloque de código updateName() (estos tipos de bloques de código reutilizables se denominan "funciones") pide al usuario un nuevo nombre y luego inserta ese nombre en el párrafo para actualizar la pantalla.

+ +

Si cambiaras el orden de las dos primeras líneas de código, ya no funcionaría — en su lugar, obtendrías un error en la consola del desarrollador del navegador — TypeError: para is undefined. Esto significa que el objeto para aún no existe, por lo que no podemos agregarle un detector de eventos.

+ +
+

Nota: Este es un error muy común; debes tener cuidado de que los objetos a los que se hace referencia en tu código existan antes de intentar hacer algo con ellos.

+
+ +

Código interpretado versus compilado

+ +

Es posible que escuches los términos interpretados y compilados en el contexto de la programación. En los lenguajes interpretados, el código se ejecuta de arriba a abajo y el resultado de ejecutar el código se devuelve inmediatamente. No tienes que transformar el código en una forma diferente antes de que el navegador lo ejecute. El código se recibe en su forma de texto amigable para el programador y se procesa directamente desde allí.

+ +

Los lenguajes compilados, por otro lado, se transforman (compilan) a código máquina antes de que sean ejecutados por la computadora. Por ejemplo, C/C++ se compila a código máquina que luego ejecuta la computadora. El programa se ejecuta desde un formato binario, que se generó a partir del código fuente del programa original.

+ +

JavaScript es un lenguaje de programación interpretado ligero. El navegador web recibe el código JavaScript en su forma de texto original y ejecuta el script a partir de ahí. Desde un punto de vista técnico, la mayoría de los intérpretes de JavaScript modernos utilizan una técnica llamada compilación en tiempo real para mejorar el rendimiento; el código fuente de JavaScript se compila en un formato binario más rápido mientras se usa el script, de modo que se pueda ejecutar lo más rápido posible. Sin embargo, JavaScript todavía se considera un lenguaje interpretado, ya que la compilación se maneja en el entorno de ejecución, en lugar de antes.

+ +

Ambos tipos de lenguaje tienen ventajas, pero no las abordaremos ahora.

+ +

Código de lado del servidor versus de lado del cliente

+ +

También puedes escuchar los términos código de lado del servidor y de lado del cliente, especialmente en el contexto del desarrollo web. El código de lado del cliente es un código que se ejecuta en la computadora del usuario — cuando se ve una página web, el código de lado del cliente de la página se descarga, luego se ejecuta y se muestra en el navegador. En este módulo estamos hablando explícitamente de JavaScript de lado del cliente.

+ +

El código de lado del servidor, por otro lado, se ejecuta en el servidor, luego sus resultados se descargan y se muestran en el navegador. Ejemplos de lenguajes web populares de lado del servidor incluyen a ¡PHP, Python, Ruby, ASP.NET y... JavaScript! JavaScript también se puede utilizar como lenguaje de lado del servidor, por ejemplo, en el popular entorno Node.js — puedes obtener más información sobre JavaScript de lado del servidor en nuestro tema Sitios web dinámicos — Programación de lado del servidor.

+ +

Código dinámico versus estático

+ +

La palabra dinámico se usa para describir tanto a JavaScript de lado del cliente como a los lenguajes de lado del servidor — se refiere a la capacidad de actualizar la visualización de una página web/aplicación para mostrar diferentes cosas en diferentes circunstancias, generando contenido nuevo según sea necesario. El código de lado del servidor genera dinámicamente nuevo contenido en el servidor, p. ej. extraer datos de una base de datos, mientras que JavaScript de lado del cliente genera dinámicamente nuevo contenido dentro del navegador del cliente, p. ej. creando una nueva tabla HTML, llenándola con los datos solicitados al servidor y luego mostrando la tabla en una página web que se muestra al usuario. El significado es ligeramente diferente en los dos contextos, pero relacionado, y ambos enfoques (de lado del servidor y de lado del cliente) generalmente funcionan juntos.

+ +

Una página web sin contenido que se actualiza dinámicamente se denomina estática — simplemente muestra el mismo contenido todo el tiempo.

+ +

¿Cómo agregas JavaScript a tu página?

+ +

JavaScript se aplica a tu página HTML de manera similar a CSS. Mientras que CSS usa elementos {{htmlelement("link")}} para aplicar hojas de estilo externas y elementos {{htmlelement("style")}} para aplicar hojas de estilo internas a HTML, JavaScript solo necesita un amigo en el mundo de HTML: el elemento {htmlelement("script")}}. Aprendamos cómo funciona esto.

+ +

JavaScript interno

+ +
    +
  1. En primer lugar, haz una copia local de nuestro archivo de ejemplo apply-javascript.html. Guárdalo en un directorio en algún lugar accesible.
    2. +
  2. Abre el archivo en tu navegador web y en tu editor de texto. Verás que el HTML crea una página web simple que contiene un botón en el que se puede hacer clic.
    3. +
  3. A continuación, ve a tu editor de texto y agrega lo siguiente en tu head, justo antes de tu etiqueta de cierre </head>: + 
    <script>
+
+  // JavaScript va aquí
+
+</script>
    +
    4. +
  4. Ahora agregaremos algo de JavaScript dentro de nuestro elemento {{htmlelement("script")}} para que la página haga algo más interesante — agrega el siguiente código justo debajo de la línea "// El código JavaScript va aquí": + 
    document.addEventListener("DOMContentLoaded", function() {
+  function createParagraph() {
+    let para = document.createElement('p');
+    para.textContent = 'You clicked the button!';
+    document.body.appendChild(para);
+  }
+
+  const buttons = document.querySelectorAll('button');
+
+  for(let i = 0; i < buttons.length ; i++) {
+    buttons[i].addEventListener('click', createParagraph);
+  }
+});
    +
    5. +
  5. Guarda tu archivo y actualiza el navegador — ahora deberías ver que cuando haces clic en el botón, se genera un nuevo párrafo y se coloca debajo.
    6. +
+ +
+

Nota: Si tu ejemplo no parece funcionar, sigue los pasos nuevamente y verifica que hiciste todo bien. ¿Guardaste tu copia local del código de inicio como un archivo .html? ¿Agregaste tu elemento {{htmlelement("script")}} justo antes de la etiqueta </head>? ¿Ingresaste el JavaScript exactamente como se muestra? JavaScript distingue entre mayúsculas y minúsculas y es muy exigente, por lo que debes ingresar la sintaxis exactamente como se muestra; de lo contrario, es posible que no funcione.

+
+ +
+

Nota: Puedes ver esta versión en GitHub como apply-javascript-internal.html o (verla en vivo también).

+
+ +

JavaScript externo

+ +

Esto funciona muy bien, pero ¿y si quisiéramos poner nuestro JavaScript en un archivo externo? Exploremos esto ahora.

+ +
    +
  1. Primero, crea un nuevo archivo en el mismo directorio que tu archivo HTML del ejemplo. Como nombre ponle script.js; asegúrate de que el nombre tenga la extensión .js, ya que así es como se reconoce como JavaScript.
    2. +
  2. Reemplaza tu elemento {{htmlelement("script")}} actual con lo siguiente: + 
    <script src="script.js" defer></script>
    +
    3. +
  3. Dentro de script.js, agrega el siguiente script: + 
    function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
    +
    4. +
  4. Guarda y actualiza tu navegador, ¡y deberías ver lo mismo! Funciona igual, pero ahora tenemos nuestro JavaScript en un archivo externo. Por lo general, esto es bueno en términos de organización de tu código y para hacerlo reutilizable en varios archivos HTML. Además, el HTML es más fácil de leer sin grandes trozos de script en él.
    5. +
+ +
+

Nota: Puedes ver esta versión en GitHub como apply-javascript-external.html y script.js (verla en vivo también).

+
+ +

Controladores de JavaScript en línea

+ +

Ten en cuenta que a veces te encontrarás con fragmentos de código JavaScript real dentro de HTML. Podría verse algo similar a esto:

+ +
+
function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+ +
<button onclick="createParagraph()">Click me!</button>
+
+ +

Puedes probar esta versión de nuestra demostración a continuación.

+ +

{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}

+ +

Esta demostración tiene exactamente la misma funcionalidad que en las dos secciones anteriores, excepto que el elemento {{htmlelement("button")}} incluye un controlador onclick en línea para que la función se ejecute cuando se presiona el botón .

+ +

Sin embargo, no hagas esto. Es una mala práctica contaminar tu HTML con JavaScript, y es ineficiente; tendrías que incluir el atributo onclick="createParagraph()" en cada botón al que desees que se aplique JavaScript.

+ +

El uso de una construcción de JavaScript pura te permite seleccionar todos los botones usando una instrucción. El código que usamos anteriormente para cumplir este propósito se ve así:

+ +
const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +

Esto puede ser un poco más largo que el atributo onclick, pero funcionará para todos los botones, sin importar cuántos haya en la página, ni cuántos se agreguen o eliminen. No es necesario cambiar el JavaScript.

+ +
+

Nota: Intenta editar tu versión de apply-javascript.html y agrega algunos botones más en el archivo. Cuando la vuelvas a cargar, deberías encontrar que todos los botones al hacer clic crearán un párrafo. Limpio, ¿eh?

+
+ +

Estrategias para la carga de scripts

+ +

Hay una serie de problemas relacionados con la carga de los scripts en el momento adecuado. ¡Nada es tan simple como parece! Un problema común es que todo el HTML de una página se carga en el orden en que aparece. Si estás utilizando JavaScript para manipular elementos en la página (o exactamente, el Modelo de objetos del documento), tu código no funcionará si el JavaScript se carga y procesa antes que el HTML que estás intentando haga algo.

+ +

En los ejemplos de código anteriores, en los ejemplos internos y externos, JavaScript se carga y se ejecuta en el encabezado del documento, antes de analizar el cuerpo HTML. Esto podría causar un error, por lo que hemos utilizado algunas construcciones para solucionarlo.

+ +

En el ejemplo interno, puedes ver esta estructura alrededor del código:

+ +
document.addEventListener("DOMContentLoaded", function() {
+  ...
+});
+ +

Este es un detector de eventos, que escucha el evento "DOMContentLoaded" del navegador, lo cual significa que el cuerpo HTML está completamente cargado y analizado. El JavaScript dentro de este bloque no se ejecutará hasta que se active ese evento, por lo que se evita el error (aprenderás sobre los eventos más adelante en el curso).

+ +

En el ejemplo externo, usamos una función de JavaScript más moderno para resolver el problema, el atributo defer, que le dice al navegador que continúe descargando el contenido HTML una vez que se ha alcanzado la etiqueta del elemento <script>.

+ +
<script src="script.js" defer></script>
+ +

En este caso, tanto el script como el HTML se cargarán simultáneamente y el código funcionará.

+ +
+

Nota: En el caso externo, no necesitamos usar el evento DOMContentLoaded porque el atributo defer nos resolvió el problema. No usamos la solución defer para el ejemplo interno de JavaScript porque defer solo funciona para scripts externos.

+
+ +

Una solución pasada de moda a este problema solía ser colocar tu elemento script justo en la parte inferior del cuerpo (por ejemplo, justo antes de la etiqueta </body>), para que se cargara después de haber procesado todo el HTML. El problema con esta solución es que la carga/procesamiento del script está completamente bloqueado hasta que se haya cargado el DOM HTML. En sitios muy grandes con mucho JavaScript, esto puede causar un importante problema de rendimiento y ralentizar tu sitio.

+ +

async y defer

+ +

En realidad, hay dos modernas características que podemos usar para evitar el problema del bloqueo de script: async y defer (que vimos anteriormente). Veamos la diferencia entre estas dos.

+ +

Los scripts cargados con el atributo async (ve más abajo) descargarán el script sin bloquear el renderizado de la página y lo ejecutará tan pronto como el script se termine de descargar. No tienes garantía de que los scripts se ejecuten en un orden específico, solo que no detendrán la visualización del resto de la página. Es mejor usar async cuando los scripts de la página se ejecutan de forma independiente y no dependen de ningún otro script de la página.

+ +

Por ejemplo, si tienes los siguientes elementos script:

+ +
<script async src="js/vendor/jquery.js"></script>
+
+<script async src="js/script2.js"></script>
+
+<script async src="js/script3.js"></script>
+ +

No puedes confiar en el orden en que se cargarán los scripts. jquery.js se puede cargar antes o después de script2.js y script3.js y si este es el caso, cualquier función en esos scripts dependiendo de jquery producirá un error porque jquery no se definirá en el momento en que se ejecute el script.

+ +

async se debe usar cuando tienes un montón de scripts en segundo plano para cargar, y solo deseas ponerlos en su lugar lo antes posible. Por ejemplo, tal vez tengas algunos archivos de datos del juego para cargar, que serán necesarios cuando el juego realmente comience, pero por ahora solo deseas continuar mostrando la introducción del juego, los títulos y el lobby, sin que se bloqueen al cargar el script.

+ +

Los scripts cargados con el atributo defer (ve a continuación) se ejecutarán en el orden en que aparecen en la página y los ejecutará tan pronto como se descarguen el script y el contenido:

+ +
<script defer src="js/vendor/jquery.js"></script>
+
+<script defer src="js/script2.js"></script>
+
+<script defer src="js/script3.js"></script>
+ +

Todos los scripts con el atributo defer se cargarán en el orden en que aparecen en la página. Entonces, en el segundo ejemplo, podemos estar seguros de que jquery.js se cargará antes que script2.js y script3.js y que script2.js se cargará antes de script3.js. No se ejecutarán hasta que se haya cargado todo el contenido de la página, lo cual es útil si tus scripts dependen de que el DOM esté en su lugar (por ejemplo, modifican uno o más elementos de la página).

+ +

Para resumir:

+ + + +

Comentarios

+ +

Al igual que con HTML y CSS, es posible escribir comentarios en tu código JavaScript que el navegador ignorará y que existen simplemente para proporcionar instrucciones a tus compañeros desarrolladores sobre cómo funciona el código (y a ti, si regresas a tu código después de seis meses y no puedes recordar lo que hiciste). Los comentarios son muy útiles y deberías utilizarlos con frecuencia, especialmente para aplicaciones grandes. Hay dos tipos:

+ + + +

Entonces, por ejemplo, podríamos anotar el JavaScript de nuestra última demostración con comentarios como este:

+ +
// Función: crea un nuevo párrafo y lo agrega al final del cuerpo HTML.
+
+function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Obtiene referencias de todos los botones de la página en un formato de arreglo.
+  2. Recorre todos los botones y agrega un detector de eventos 'click' a cada uno.
+
+  Cuando se presione cualquier botón, se ejecutará la función createParagraph().
+*/
+
+const buttons = document.querySelectorAll('button');
+
+for (let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +
+

Nota: En general, más comentarios suelen ser mejor que menos, pero debes tener cuidado si agregas muchos comentarios para explicar qué son las variables (los nombres de tus variables tal vez deberían ser más intuitivos), o para explicar operaciones muy simples (tal vez tu código sea demasiado complicado).

+
+ +

Resumen

+ +

Así que ahí tienes, tu primer paso en el mundo de JavaScript. Comenzamos solo con teoría, para comenzar a acostumbrarte a por qué usarías JavaScript y qué tipo de cosas puedes hacer con él. En el camino, viste algunos ejemplos de código y aprendiste cómo encaja JavaScript con el resto del código en tu sitio web, entre otras cosas.

+ +

JavaScript puede parecer un poco abrumador en este momento, pero no te preocupes — en este curso, te guiaremos en pasos simples que tendrán sentido en el futuro. En el próximo artículo, nos sumergiremos directamente en lo práctico, lo que te permitirá comenzar directamente y crear tus propios ejemplos de JavaScript.

+ + + +

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

+ +

En este modulo

+ + diff --git "a/files/es/learn/javascript/objects/ejercicio_pr\303\241ctico_de_construcci\303\263n_de_objetos/index.html" "b/files/es/learn/javascript/objects/ejercicio_pr\303\241ctico_de_construcci\303\263n_de_objetos/index.html" deleted file mode 100644 index 6dfaaf0d08..0000000000 --- "a/files/es/learn/javascript/objects/ejercicio_pr\303\241ctico_de_construcci\303\263n_de_objetos/index.html" +++ /dev/null @@ -1,301 +0,0 @@ ---- -title: Ejercicio práctico de construcción de objetos -slug: Learn/JavaScript/Objects/Ejercicio_práctico_de_construcción_de_objetos -translation_of: Learn/JavaScript/Objects/Object_building_practice ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
- -

En los artículos anteriores se explicó lo fundamental de la teoría de los objetos en JavaScript asi como su sintaxis, para que Usted tenga un punto de partida sólido. En éste artículo, desarrollaremos un ejercicio práctico para ganar experiencia en la programación de objetos en JavaScript, con un resultado divertido y colorido.

- - - - - - - - - - - - -
Pre-requisitos:Conocimientos básicos de computadores. Entendimiento básico de HTML y CSS. Familiaridad con los conceptos básicos de JavaScript (vea Primeros Pasos con JavaScript y Elementos básicos de JavaScript)  y OOJS (vea Conceptos básicos de los objetos JavaScript).
Objetivos:Ganar experiencia en el uso de objetos y el uso de programación orientada a objetos en un contexto realista.
- -

Lanzemos algunas pelotas

- -

Es éste artículo escribiremos un programa demo del juego clásico de pelotas que rebotan para mostrar la gran útilidad de los objetos en JavaScript. En éste demo las pelotas rebotaran en la pantalla y cambiaran de color cuando choquen unas con otras. Así, al final del ejemplo tendremos algo como esto:

- -

- -
    -
- -

En este ejemplo se utilizará Canvas API para dibujar las pelotas en la pantalla y la API requestAnimationFrame para animar todo el contenido de la pantalla. No es necesario que conozca estas funciones previamente. Esperamos que al final de este artículo, quizás pueda estar interesado en explorar su uso y capacidades más en detalle. Durante este desarrollo usaremos objetos y algunas técnicas para hacer que las pelotas puedan rebotar en los bordes y comprobar cuando choquen entre ellas (ésto se conoce como detección de colisiones). 

- -

Primeros pasos

- -

Para comenzar haga una copia en su computador de los archivos:  index.html, style.css, y main.js. Estos contienen:

- -
    -
  1. Un documento HTML sencillo con un elemento <h1>, un elemento <canvas> en el que podamos dibujar los gráficos y otros elementos para aplicar los estilos CSS y el código JavaScript. 
    2. -
  2. Algunos estilos sencillos que servirán para ubicar el elemento <h1>, ocultar la barra de desplazamiento y los margenes del borde de la página (para que luzca mejor).
    3. -
  3. Un archivo JavaScript que sirve para definir el elemento <canvas> y las funciones que vamos a usar.
    4. -
- -

La primera parte del script es:

- -
var canvas = document.querySelector('canvas');
-
-var ctx = canvas.getContext('2d');
-
-var width = canvas.width = window.innerWidth;
-var height = canvas.height = window.innerHeight;
- -

Este script obtiene una referencia del elemento <canvas>, luego llama al método getContext() para definir un contexto en el cual se pueda comenzar a dibujar. La resultado de la variable  (ctx) es el objeto que representa directamente el área de dibujo del <canvas> y permite dibujar elementos 2D en él. 

- -

A continuación se da valor a las variables width and height que corresponden al ancho y alto del elemento canvas (representado por las propiedades canvas.width y canvas.height), de manera que el alto y ancho coincidan con el alto y ancho del navegador (viewport)  cuyos valores se obtienen directamente de las propiedades window.innerWidth y window.innerHeight.

- -

Puede ver que en el código se encadenan varias asignaciones, para obtener valores más rápidamente. Esto se puede hacer.

- -

La última parte del script, es la siguiente:

- -
function random(min, max) {
-  var num = Math.floor(Math.random() * (max - min + 1)) + min;
-  return num;
-}
- -

Esta función recibe dos números como argumentos de entrada (valor mínimo y maximo) y devuelve un número aleatorio entre ellos.

- -

Modelando una pelota en nuestro programa

- -

Nuestro programa tendrá montones de pelotas rebotando por toda la pantalla. Ya que todas las pelotas tendrán el mismo comportamiento, tiene sentido representarlas con un objeto. Empezamos definiendo un constructor para el objeto pelota (Ball), en nuestro código.

- -
function Ball(x, y, velX, velY, color, size) {
-  this.x = x; //posición horizontal
-  this.y = y; //posición vertical
-  this.velX = velX; //velocidad horizontal
-  this.velY = velY; //velocidad vertical
-  this.color = color; //color
-  this.size = size; //tamaño
-}
- -

Aquí incluimos algunos parámetros que serán las propiedades que cada pelota necesita para funcionar en nuestro programa: 

- - - -

Con esto se resuelven las propiedades del objeto, ¿Pero qué hacemos con los métodos? Ya que queremos que las pelotas realicen algo en nuestro programa. 

- -

Dibujando las pelotas

- -

Para dibujar, añadiremos el siguiente método draw() al prototipo del objeto Ball():

- -
Ball.prototype.draw = function() {
-  ctx.beginPath();
-  ctx.fillStyle = this.color;
-  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
-  ctx.fill();
-}
- -

Con esta función cada objeto pelota Ball() puede dibujarse en la pantalla utilizando el contexto 2D definido anteriormente (ctx)  

- - - -

Ya se puede empezar a testear el objeto.

- -
    -
  1. Guarde el código hasta ahora, y cargue el archivo HTML en un navegador.
    2. -
  2. Abra la consola de JavaScript en el navegador, y refresque la página, para que el tamaño del canvas modifique sus dimensiones adaptándose al viewport con la consola abierta. 
    3. -
  3. Teclee lo siguiente en la consola para crear una nueva pelota. - 
    var testBall = new Ball(50, 100, 4, 4, 'blue', 10);
    -
    4. -
  4. Pruebe a llamar a las variables miembro: - 
    testBall.x
-testBall.size
-testBall.color
-testBall.draw()
    -
    5. -
  5. Al teclear la última línea, debería ver que la pelota se dibuja en alguna parte del canvas. 
    6. -
- -

Actualizando los datos de la pelota

- -

Ahora podemos dibujar una pelota en una posición dada, pero para empezar a moverla, se necesita una función de actualización de algún tipo. Podemos añadir el código a continuación, al final del archivo de JavaScript, para añidir un método de actualización update() en el prototipo de la clase Ball()

- -
Ball.prototype.update = function() {
-  if ((this.x + this.size) >= width) {
-    this.velX = -(this.velX);
-  }
-
-  if ((this.x - this.size) <= 0) {
-    this.velX = -(this.velX);
-  }
-
-  if ((this.y + this.size) >= height) {
-    this.velY = -(this.velY);
-  }
-
-  if ((this.y - this.size) <= 0) {
-    this.velY = -(this.velY);
-  }
-
-  this.x += this.velX;
-  this.y += this.velY;
-}
- -

Las cuatro primeras partes de la función verifican si la pelota a alcanzado el borde del canvas. Si es así, se invierte la dirección de la velocidad, para que la pelota se mueva en la dirección contraria. Así, si la pelota va hacia arriba, (velY positiva) , entonces la velocidad vertical es cambiada, para que se mueva hacia abajo (velY negativa).

- -

Los cuatro posibles casos son: 

- - - -

En cada caso, se ha tenido en cuenta el tamaño (size) de la pelota en los cálculos, ya que las coordenadas x e y corresponden al centro de la pelota, pero lo que queremos ver es el borde de la pelota cuando choca con el perímetro del canvas — que la pelota rebote, cuando está a medio camino fuera de el —.

- -

Las dos últimas líneas de código, suman  la velocidad en x (velX) al valor de la coordenada x  , y el valor de la velocidad en y (velY)  a la coordenada y —  con esto se consigue el efecto de que la pelota se mueva cada vez que este método es llamado. 

- -

Llegados a este punto: ¡continuemos, con las animaciones!

- -

Animando las pelotas

- -

Hagamos esto divertido! Ahora vamos a empezar a añadir pelotas al canvas, y animándolas.

- -

1. Primero, necesitamos algún sitio donde guardas las pelotas. El siguiente arreglo hará esta función — añádela al final de tu código. 

- -
var balls = [];
- -

Todos los programas que generan animaciones normalmente tienen un bucle de animación, que sirve para actualizar los datos del programa, para entonces generar la imagen correspondiente; esta es la estrategia básica para la mayor parte de juegos y programas similares. 

- -

2. Añadamos las siguientes instrucciones al final del código: 

- -
function loop() {
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
-  ctx.fillRect(0, 0, width, height);
-
-  while (balls.length < 25) {
-    var size = random(10,20);
-    var ball = new Ball(
-      // la posición de las pelotas, se dibujará al menos siempre
-      // como mínimo a un ancho de la pelota de distancia al borde del
-      // canvas, para evitar errores en el dibujo
-      random(0 + size,width - size),
-      random(0 + size,height - size),
-      random(-7,7),
-      random(-7,7),
-      'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
-      size
-    );
-    balls.push(ball);
-  }
-
-  for (var i = 0; i < balls.length; i++) {
-    balls[i].draw();
-    balls[i].update();
-  }
-
-  requestAnimationFrame(loop);
-}
- -

Nuestra función de bucle: loop(), hace lo siguiente: 

- - - -

3. Por último, pero no menos importante, añadimos la siguiente línea, al final del código.-- es necesario llamar a la función inicialmente para que la animación comience. 

- -
loop();
- -

Eso es todo para la parte básica — pruebe a guardar el código y refrescar el navegador para comprobar si aparecen las pelotas rebotando!

- -

Añadiendo la detección de colisiones

- -

Ahora, un poco de diversión, añadamos la detección de colisiones a nuestro código. Así las pelotas, sabrán cuando chocan unas contra otras.

- -
    -
  1. El primer paso, será añadir el código a continuación a continuación de donde se definió el método  update(). (en código de Ball.prototype.update) - - 
    Ball.prototype.collisionDetect = function() {
-  for (var j = 0; j < balls.length; j++) {
-    if (!(this === balls[j])) {
-      var dx = this.x - balls[j].x;
-      var dy = this.y - balls[j].y;
-      var distance = Math.sqrt(dx * dx + dy * dy);
-
-      if (distance < this.size + balls[j].size) {
-        balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
-      }
-    }
-  }
-}
    - -

    Esta función es un poco complicada, así que no hay que preocuparse mucho si de momento no se comprende del todo.  

    - -
      -
    • Para cada pelota, necesitamos comprobar si chocará con cada una de las otras pelotas. Para esto, en un bucle for para recorrer todas las pelotas.
      • -
    • Dentro del bucle, usamos un if  para comprobar si la pelota que estamos mirando en ese ciclo del bucle for es la pelota que estamos mirando. No queremos mirar si una pelota ha chocado consigo misma. Para esto miramos si la pelota actual (es decir la pelota que está invocando al método que resuelve la detección de colisiones) es la misma que la indicada por el bucle. Usamos un operador ! para indicar una negación en la comparación, así que el código dentro de la condición  solo se ejecuta si estamos mirando dos pelotas distintas.
      • -
    • Usamos un algoritmo común para comprobar la colisión de los dos pelotas. Básicamente miramos si el área de dos círculos se superponen.  Esto se explica mejor en el enlace detección de colision 2D.
      • -
    • En este caso, únicamente se define la propiedad de color para las dos pelotas, cambiándolas a un nuevo color aleatorio. Se podría haber hecho cosas más complicadas, como que las pelotas rebotasen una con la otra de forma realista, pero esto habría supuesto un desarrollo más complejo. Para desarrollar esos efectos de simulación física, los desarrolladores tienden a usar librerías de física como PhysicsJS, matter.js, Phaser, etc.
      • -
    -
    2. -
  2. También es necesario llamar este método en cada instante de la animación. balls[i].update(); en la línea: - 
    balls[i].collisionDetect();
    -
    3. -
  3. Guardar y refrescar la demo de nuevo y podrá ver como las pelotas cambian de color cuando chocan entre ellas.
    4. -
- -
-

Nota: Si tiene problemas para hacer funcionar este ejemplo, puede comparar su código JavaScript, con el código de la version_final (y también ver como funciona al ejecutarla).

-
- -

Resumen

- -

Esperamos que se haya divertido escribiendo su propio mundo de pelotas que chocan aleatoriamente, usando objetos y programación orientada a objetos. Esto debería haberle dado una práctica útil y haber sido un buen ejemplo. 

- -

Lea también

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}

- -

En este módulo

- - diff --git a/files/es/learn/javascript/objects/object_building_practice/index.html b/files/es/learn/javascript/objects/object_building_practice/index.html new file mode 100644 index 0000000000..6dfaaf0d08 --- /dev/null +++ b/files/es/learn/javascript/objects/object_building_practice/index.html @@ -0,0 +1,301 @@ +--- +title: Ejercicio práctico de construcción de objetos +slug: Learn/JavaScript/Objects/Ejercicio_práctico_de_construcción_de_objetos +translation_of: Learn/JavaScript/Objects/Object_building_practice +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
+ +

En los artículos anteriores se explicó lo fundamental de la teoría de los objetos en JavaScript asi como su sintaxis, para que Usted tenga un punto de partida sólido. En éste artículo, desarrollaremos un ejercicio práctico para ganar experiencia en la programación de objetos en JavaScript, con un resultado divertido y colorido.

+ + + + + + + + + + + + +
Pre-requisitos:Conocimientos básicos de computadores. Entendimiento básico de HTML y CSS. Familiaridad con los conceptos básicos de JavaScript (vea Primeros Pasos con JavaScript y Elementos básicos de JavaScript)  y OOJS (vea Conceptos básicos de los objetos JavaScript).
Objetivos:Ganar experiencia en el uso de objetos y el uso de programación orientada a objetos en un contexto realista.
+ +

Lanzemos algunas pelotas

+ +

Es éste artículo escribiremos un programa demo del juego clásico de pelotas que rebotan para mostrar la gran útilidad de los objetos en JavaScript. En éste demo las pelotas rebotaran en la pantalla y cambiaran de color cuando choquen unas con otras. Así, al final del ejemplo tendremos algo como esto:

+ +

+ +
    +
+ +

En este ejemplo se utilizará Canvas API para dibujar las pelotas en la pantalla y la API requestAnimationFrame para animar todo el contenido de la pantalla. No es necesario que conozca estas funciones previamente. Esperamos que al final de este artículo, quizás pueda estar interesado en explorar su uso y capacidades más en detalle. Durante este desarrollo usaremos objetos y algunas técnicas para hacer que las pelotas puedan rebotar en los bordes y comprobar cuando choquen entre ellas (ésto se conoce como detección de colisiones). 

+ +

Primeros pasos

+ +

Para comenzar haga una copia en su computador de los archivos:  index.html, style.css, y main.js. Estos contienen:

+ +
    +
  1. Un documento HTML sencillo con un elemento <h1>, un elemento <canvas> en el que podamos dibujar los gráficos y otros elementos para aplicar los estilos CSS y el código JavaScript. 
    2. +
  2. Algunos estilos sencillos que servirán para ubicar el elemento <h1>, ocultar la barra de desplazamiento y los margenes del borde de la página (para que luzca mejor).
    3. +
  3. Un archivo JavaScript que sirve para definir el elemento <canvas> y las funciones que vamos a usar.
    4. +
+ +

La primera parte del script es:

+ +
var canvas = document.querySelector('canvas');
+
+var ctx = canvas.getContext('2d');
+
+var width = canvas.width = window.innerWidth;
+var height = canvas.height = window.innerHeight;
+ +

Este script obtiene una referencia del elemento <canvas>, luego llama al método getContext() para definir un contexto en el cual se pueda comenzar a dibujar. La resultado de la variable  (ctx) es el objeto que representa directamente el área de dibujo del <canvas> y permite dibujar elementos 2D en él. 

+ +

A continuación se da valor a las variables width and height que corresponden al ancho y alto del elemento canvas (representado por las propiedades canvas.width y canvas.height), de manera que el alto y ancho coincidan con el alto y ancho del navegador (viewport)  cuyos valores se obtienen directamente de las propiedades window.innerWidth y window.innerHeight.

+ +

Puede ver que en el código se encadenan varias asignaciones, para obtener valores más rápidamente. Esto se puede hacer.

+ +

La última parte del script, es la siguiente:

+ +
function random(min, max) {
+  var num = Math.floor(Math.random() * (max - min + 1)) + min;
+  return num;
+}
+ +

Esta función recibe dos números como argumentos de entrada (valor mínimo y maximo) y devuelve un número aleatorio entre ellos.

+ +

Modelando una pelota en nuestro programa

+ +

Nuestro programa tendrá montones de pelotas rebotando por toda la pantalla. Ya que todas las pelotas tendrán el mismo comportamiento, tiene sentido representarlas con un objeto. Empezamos definiendo un constructor para el objeto pelota (Ball), en nuestro código.

+ +
function Ball(x, y, velX, velY, color, size) {
+  this.x = x; //posición horizontal
+  this.y = y; //posición vertical
+  this.velX = velX; //velocidad horizontal
+  this.velY = velY; //velocidad vertical
+  this.color = color; //color
+  this.size = size; //tamaño
+}
+ +

Aquí incluimos algunos parámetros que serán las propiedades que cada pelota necesita para funcionar en nuestro programa: 

+ + + +

Con esto se resuelven las propiedades del objeto, ¿Pero qué hacemos con los métodos? Ya que queremos que las pelotas realicen algo en nuestro programa. 

+ +

Dibujando las pelotas

+ +

Para dibujar, añadiremos el siguiente método draw() al prototipo del objeto Ball():

+ +
Ball.prototype.draw = function() {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+}
+ +

Con esta función cada objeto pelota Ball() puede dibujarse en la pantalla utilizando el contexto 2D definido anteriormente (ctx)  

+ + + +

Ya se puede empezar a testear el objeto.

+ +
    +
  1. Guarde el código hasta ahora, y cargue el archivo HTML en un navegador.
    2. +
  2. Abra la consola de JavaScript en el navegador, y refresque la página, para que el tamaño del canvas modifique sus dimensiones adaptándose al viewport con la consola abierta. 
    3. +
  3. Teclee lo siguiente en la consola para crear una nueva pelota. + 
    var testBall = new Ball(50, 100, 4, 4, 'blue', 10);
    +
    4. +
  4. Pruebe a llamar a las variables miembro: + 
    testBall.x
+testBall.size
+testBall.color
+testBall.draw()
    +
    5. +
  5. Al teclear la última línea, debería ver que la pelota se dibuja en alguna parte del canvas. 
    6. +
+ +

Actualizando los datos de la pelota

+ +

Ahora podemos dibujar una pelota en una posición dada, pero para empezar a moverla, se necesita una función de actualización de algún tipo. Podemos añadir el código a continuación, al final del archivo de JavaScript, para añidir un método de actualización update() en el prototipo de la clase Ball()

+ +
Ball.prototype.update = function() {
+  if ((this.x + this.size) >= width) {
+    this.velX = -(this.velX);
+  }
+
+  if ((this.x - this.size) <= 0) {
+    this.velX = -(this.velX);
+  }
+
+  if ((this.y + this.size) >= height) {
+    this.velY = -(this.velY);
+  }
+
+  if ((this.y - this.size) <= 0) {
+    this.velY = -(this.velY);
+  }
+
+  this.x += this.velX;
+  this.y += this.velY;
+}
+ +

Las cuatro primeras partes de la función verifican si la pelota a alcanzado el borde del canvas. Si es así, se invierte la dirección de la velocidad, para que la pelota se mueva en la dirección contraria. Así, si la pelota va hacia arriba, (velY positiva) , entonces la velocidad vertical es cambiada, para que se mueva hacia abajo (velY negativa).

+ +

Los cuatro posibles casos son: 

+ + + +

En cada caso, se ha tenido en cuenta el tamaño (size) de la pelota en los cálculos, ya que las coordenadas x e y corresponden al centro de la pelota, pero lo que queremos ver es el borde de la pelota cuando choca con el perímetro del canvas — que la pelota rebote, cuando está a medio camino fuera de el —.

+ +

Las dos últimas líneas de código, suman  la velocidad en x (velX) al valor de la coordenada x  , y el valor de la velocidad en y (velY)  a la coordenada y —  con esto se consigue el efecto de que la pelota se mueva cada vez que este método es llamado. 

+ +

Llegados a este punto: ¡continuemos, con las animaciones!

+ +

Animando las pelotas

+ +

Hagamos esto divertido! Ahora vamos a empezar a añadir pelotas al canvas, y animándolas.

+ +

1. Primero, necesitamos algún sitio donde guardas las pelotas. El siguiente arreglo hará esta función — añádela al final de tu código. 

+ +
var balls = [];
+ +

Todos los programas que generan animaciones normalmente tienen un bucle de animación, que sirve para actualizar los datos del programa, para entonces generar la imagen correspondiente; esta es la estrategia básica para la mayor parte de juegos y programas similares. 

+ +

2. Añadamos las siguientes instrucciones al final del código: 

+ +
function loop() {
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+  ctx.fillRect(0, 0, width, height);
+
+  while (balls.length < 25) {
+    var size = random(10,20);
+    var ball = new Ball(
+      // la posición de las pelotas, se dibujará al menos siempre
+      // como mínimo a un ancho de la pelota de distancia al borde del
+      // canvas, para evitar errores en el dibujo
+      random(0 + size,width - size),
+      random(0 + size,height - size),
+      random(-7,7),
+      random(-7,7),
+      'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
+      size
+    );
+    balls.push(ball);
+  }
+
+  for (var i = 0; i < balls.length; i++) {
+    balls[i].draw();
+    balls[i].update();
+  }
+
+  requestAnimationFrame(loop);
+}
+ +

Nuestra función de bucle: loop(), hace lo siguiente: 

+ + + +

3. Por último, pero no menos importante, añadimos la siguiente línea, al final del código.-- es necesario llamar a la función inicialmente para que la animación comience. 

+ +
loop();
+ +

Eso es todo para la parte básica — pruebe a guardar el código y refrescar el navegador para comprobar si aparecen las pelotas rebotando!

+ +

Añadiendo la detección de colisiones

+ +

Ahora, un poco de diversión, añadamos la detección de colisiones a nuestro código. Así las pelotas, sabrán cuando chocan unas contra otras.

+ +
    +
  1. El primer paso, será añadir el código a continuación a continuación de donde se definió el método  update(). (en código de Ball.prototype.update) + + 
    Ball.prototype.collisionDetect = function() {
+  for (var j = 0; j < balls.length; j++) {
+    if (!(this === balls[j])) {
+      var dx = this.x - balls[j].x;
+      var dy = this.y - balls[j].y;
+      var distance = Math.sqrt(dx * dx + dy * dy);
+
+      if (distance < this.size + balls[j].size) {
+        balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
+      }
+    }
+  }
+}
    + +

    Esta función es un poco complicada, así que no hay que preocuparse mucho si de momento no se comprende del todo.  

    + +
      +
    • Para cada pelota, necesitamos comprobar si chocará con cada una de las otras pelotas. Para esto, en un bucle for para recorrer todas las pelotas.
      • +
    • Dentro del bucle, usamos un if  para comprobar si la pelota que estamos mirando en ese ciclo del bucle for es la pelota que estamos mirando. No queremos mirar si una pelota ha chocado consigo misma. Para esto miramos si la pelota actual (es decir la pelota que está invocando al método que resuelve la detección de colisiones) es la misma que la indicada por el bucle. Usamos un operador ! para indicar una negación en la comparación, así que el código dentro de la condición  solo se ejecuta si estamos mirando dos pelotas distintas.
      • +
    • Usamos un algoritmo común para comprobar la colisión de los dos pelotas. Básicamente miramos si el área de dos círculos se superponen.  Esto se explica mejor en el enlace detección de colision 2D.
      • +
    • En este caso, únicamente se define la propiedad de color para las dos pelotas, cambiándolas a un nuevo color aleatorio. Se podría haber hecho cosas más complicadas, como que las pelotas rebotasen una con la otra de forma realista, pero esto habría supuesto un desarrollo más complejo. Para desarrollar esos efectos de simulación física, los desarrolladores tienden a usar librerías de física como PhysicsJS, matter.js, Phaser, etc.
      • +
    +
    2. +
  2. También es necesario llamar este método en cada instante de la animación. balls[i].update(); en la línea: + 
    balls[i].collisionDetect();
    +
    3. +
  3. Guardar y refrescar la demo de nuevo y podrá ver como las pelotas cambian de color cuando chocan entre ellas.
    4. +
+ +
+

Nota: Si tiene problemas para hacer funcionar este ejemplo, puede comparar su código JavaScript, con el código de la version_final (y también ver como funciona al ejecutarla).

+
+ +

Resumen

+ +

Esperamos que se haya divertido escribiendo su propio mundo de pelotas que chocan aleatoriamente, usando objetos y programación orientada a objetos. Esto debería haberle dado una práctica útil y haber sido un buen ejemplo. 

+ +

Lea también

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/learning_and_getting_help/index.html b/files/es/learn/learning_and_getting_help/index.html new file mode 100644 index 0000000000..a7f06d90d8 --- /dev/null +++ b/files/es/learn/learning_and_getting_help/index.html @@ -0,0 +1,321 @@ +--- +title: Aprender y obtener ayuda +slug: Learn/Aprender_y_obtener_ayuda +tags: + - Aprender + - Desarrollo web + - Principiante + - conseguir ayuda + - obtener ayuda +translation_of: Learn/Learning_and_getting_help +--- +

{{learnsidebar}}

+ +

Es genial que dediques algo de tiempo a aprender un nuevo conjunto de habilidades, pero puedes emplear algunas buenas prácticas que harán que tu aprendizaje sea más efectivo. También hay momentos en los que te atascarás y te sentirás frustrado, incluso los desarrolladores web profesionales se sienten así regularmente, y vale la pena conocer las formas más efectivas de tratar de obtener ayuda para que puedas progresar en tu trabajo. Este artículo proporciona algunos consejos y sugerencias en ambas áreas que te ayudarán a obtener más provecho del aprendizaje del desarrollo web, así como una lectura adicional para que puedas obtener más información sobre cada subtema si lo deseas.

+ +

Aprendizaje efectivo

+ +

Sigamos adelante y pensemos en un aprendizaje efectivo.

+ +

Diferentes métodos de aprendizaje

+ +

Es interesante considerar que hay dos formas principales en las que tu cerebro aprende cosas — el aprendizaje enfocado y el aprendizaje difuso:

+ + + +

A partir de los estudios que los neurocientíficos han realizado sobre la actividad cerebral, hemos descubierto que realmente no se puede participar en ambas formas de aprendizaje, o de pensamiento simultáneamente. Entonces, ¿cuál debes elegir? Puedes pensar que el aprendizaje enfocado es mejor para estudiar, pero en realidad, ambos son muy importantes.

+ +

El pensamiento enfocado es excelente para concentrarte mucho en temas específicos, profundizar en la resolución de problemas y mejorar tu dominio de las técnicas requeridas, fortaleciendo las vías neuronales en tu cerebro donde se almacena esa información. Sin embargo, no es muy bueno para entender "el panorama general" y desbloquear nuevas vías neuronales cuando intentas comprender nuevos temas o resolver nuevos problemas que no has encontrado antes.

+ +

Para eso, necesitas un pensamiento difuso. Esto es lo opuesto al enfoque — dejas que tu cerebro divague por el paisaje más amplio, buscando conexiones que no tenías antes, tocando cosas nuevas (o nuevas combinaciones de cosas) en las que luego puedes concentrarte para fortalecerlas y empezar a entender realmente lo que significan.

+ +

Es por eso que generalmente es bueno leer primero un material introductorio para obtener una comprensión de alto nivel de un área, antes de saltar a los detalles específicos.

+ +

También es la razón por la que, a veces, puedes quedar realmente atrapado en un problema, pero luego averiguar la respuesta cuando vas a tomar un café (o a caminar). Podrías:

+ +
    +
  1. Saber cómo solucionar el problema A con la herramienta A.
    2. +
  2. Saber cómo solucionar el problema B con la herramienta B.
    3. +
  3. No saber cómo solucionar el problema C.
    4. +
+ +

Supongamos que te enfocas en el problema C por un tiempo y te frustras porque no puedes encontrar la solución para resolverlo. Pero luego, después de caminar para tomar un poco de aire fresco, es posible que descubras que, mientras tu mente divaga, de repente estableces una conexión entre la herramienta A y la herramienta B, ¡y te das cuenta de que las puedes usar juntas para solucionar el problema C! No siempre es así de simple, pero también es sorprendente cuántas veces sucede. Esto también resalta la importancia de tomar descansos regulares cuando estás estudiando frente a la computadora.

+ +

Diferentes materiales de aprendizaje

+ +

También vale la pena mirar los diferentes tipos de materiales de aprendizaje disponibles, para ver cuáles son los más efectivos para que aprendas.

+ +

Artículos textuales

+ +

Encontrarás muchos artículos escritos en la web para enseñarte sobre diseño web. Como la mayor parte de este curso, por ejemplo. Algunos de los artículos serán tutoriales, para enseñarte una determinada técnica o concepto importante (como "aprender a crear un reproductor de video" o "Aprender el modelo de cajas CSS"), y algunos de los artículos serán material de referencia, para permitirte recordar detalles que hayas olvidado (como "¿cuál es la sintaxis de la propiedad background de CSS"?)

+ +

MDN Web Docs es muy bueno para ambos tipos — el área en la que te encuentras actualmente es excelente para aprender técnicas y conceptos, y también tenemos varias secciones de referencia gigantes que te permiten buscar cualquier sintaxis que no puedas recordar.

+ +

También hay varios otros recursos excelentes en la web, algunos de los cuales mencionaremos a continuación.

+ +
+

Nota: el texto anterior debería haberte proporcionado un dato importante: ¡no se espera que recuerdes todo! Los desarrolladores web profesionales todo el tiempo usan herramientas como MDN Web Docs para buscar cosas que han olvidado. Como descubrirás a lo largo de estas líneas, aprender desarrollo web tiene más que ver con la resolución de problemas y patrones de aprendizaje que con el aprendizaje de muchas sintaxis.

+
+ +

Videos

+ +

También hay una serie de sitios que tienen contenido de aprendizaje de video en ellos. YouTube es obvio, con canales como Mozilla Layout Land, MozillaDeveloper y Google ChromeDevelopers que proporcionan muchos útiles videos. Muchas personas prefieren artículos textuales para un aprendizaje más profundo y material de referencia, y videos para explicaciones rápidas de conceptos y nuevas características, pero realmente depende de ti lo que prefieras aprender. Aquí no hay una respuesta correcta e incorrecta.

+ +

Código de juegos interactivos

+ +

Posiblemente seas el tipo de persona que prefiere instrucciones mínimas y preferirías saltar directamente y comenzar a jugar con el código. Este también es un enfoque razonable, y algunos sitios de aprendizaje tienden a favorecerlo. Codecademy, por ejemplo, es un sitio de aprendizaje donde los tutoriales consisten principalmente en editores de códigos interactivos en los que debes escribir directamente el código y ver si se logró el resultado deseado.

+ +

Muchas páginas de referencia de documentos web de MDN también proporcionan ejemplos interactivos, donde puedes modificar el código y ver cómo cambia el resultado en vivo. Y tampoco hay nada de malo en crear tus propios ejemplos de código en tu computadora o en un editor de código en línea como JSBin, Codepen o Glitch. De hecho, ¡te invitarán a usarlos como parte de este curso cuando estés aprendiendo!

+ +
+

Nota: Los editores de código en línea también son realmente útiles para compartir el código que has escrito, por ejemplo, si estás colaborando en el aprendizaje con otra persona que no se encuentra en la misma ubicación o se lo envías a alguien para pedir ayuda con eso. Puedes compartir la dirección web del ejemplo con ellos para que puedan verlo y ayudarte.

+
+ +
+

Nota: Es posible que prefieras un método de aprendizaje sobre los demás, pero, de manera realista, probablemente terminarás con un enfoque híbrido. Y probablemente se te ocurran otros métodos además de los tres que cubrimos anteriormente.

+
+ +

Haz un plan

+ +

Es una buena idea crear un plan para ayudarte a lograr lo que quieres conseguir a través de tu aprendizaje.

+ +

Una declaración de objetivos

+ +

Suena tonto, pero ¿por qué no comenzar con una sola oración que diga lo que quieres lograr? Los siguientes tienen diferentes ámbitos, pero todos son realistas y alcanzables:

+ + + +

Los siguientes no son tan razonables:

+ + + +

¿Qué necesitas para llegar allí?

+ +

Una vez que hayas descrito tu objetivo, es una buena idea investigar qué necesitarás para lograrlo. Por ejemplo:

+ +

Materiales que necesito:

+ + + +

Conocimiento que necesito:

+ + + +

¿Cuánto tiempo y dinero costará?

+ +

Calcula el tiempo y el costo para obtener estas cosas. Si necesitas trabajar para ganar dinero para comprar los materiales requeridos, entonces deberás tener en cuenta el tiempo para hacerlo. Una vez que tengas un estimado del tiempo, puedes comenzar a elaborar un plan para tu vida.

+ +

¿Cuántas horas por semana necesitas invertir?

+ +

Una vez que sepas lo que necesitas hacer y cuánto tiempo crees que te llevará, puedes comenzar a escribir un plan a seguir para lograr tu objetivo. Puede ser tan simple como:

+ +

"Me llevará 500 horas aprender lo que necesito saber, y tengo un año para hacerlo, así que si asumo 2 semanas de vacaciones, tendré que trabajar en esto durante 10 horas por semana. Estoy gratis por las tardes y fines de semana, así que planearé mi tiempo en torno a eso".

+ +

La cantidad de tiempo que puedes dedicar a esto, por supuesto, depende de cuáles sean tus circunstancias. Si estás en la escuela, entonces tienes mucho más tiempo libre que si tienes un trabajo y niños que mantener. Todavía es posible lograr tus objetivos, pero debes ser realista sobre la rapidez con que puedes lograrlo.

+ +

Si estás haciendo un curso colegial o universitario para aprender desarrollo web, entonces la mayor parte de esta planificación la haces tú, ¡qué suerte!

+ +

Cuando hayas elaborado un horario semanal, debes mantener un registro de lo que logras hacer cada semana en una simple hoja de cálculo o incluso en un cuaderno.

+ +

Además, sería una buena idea tener algunos objetivos secundarios resueltos que te permitan realizar fácilmente un seguimiento de dónde te encuentras, por ejemplo:

+ + + +

Sigue pensando en cuánto progreso estás haciendo y ajusta tu plan si es necesario.

+ +

Mantente motivado

+ +

Es difícil mantenerte motivado, especialmente si estás tratando de aprender una habilidad compleja como la programación o el desarrollo web. Lo que sigue son algunos consejos para mantenerte motivado y seguir trabajando:

+ + + +

Resolución de problemas eficaz

+ +

No hay una única forma efectiva de resolver todos los problemas (y aprender todo) lo relacionado con el diseño y desarrollo web, pero hay algunos consejos generales que te servirán en la mayoría de los casos.

+ +

Romper las cosas en trozos

+ +

Para empezar, cuando intentas implementar algo específico y parece realmente difícil entenderlo, debes tratar de dividirlo en múltiples problemas o fragmentos más pequeños.

+ +

Por ejemplo, si estás considerando la tarea de "Crear un sitio web simple de dos columnas", la puedes desglosar de la siguiente manera:

+ + + +

Luego, podrías desglosarlo aún más, por ejemplo, "Implementar menú de navegación horizontal" podría escribirse como:

+ + + +

Cada uno de estos problemas no parece tan difícil de resolver como el gran problema que tuviste inicialmente. ¡Ahora solo tienes que empezar a resolverlos todos!

+ +

Aprende y reconoce los patrones

+ +

Como dijimos antes, el diseño/programación web se trata principalmente de resolución de problemas y patrones. Una vez que hayas escrito lo que necesitarás hacer para resolver un problema específico, puedes comenzar a descubrir qué características tecnológicas usar para resolverlo. Por ejemplo, los desarrolladores web profesionales han creado muchos menús de navegación horizontal, por lo que inmediatamente comenzarás a pensar en una solución como esta:

+ +

Un menú de navegación generalmente se crea a partir de una lista de enlaces, algo así como:

+ +
<ul>
+  <li>Primer elemento del menú</li>
+  <li>Segundo elemento del menú</li>
+  <li>Tercer elemento del menú</li>
+  <li>etc.</li>
+</ul>
+
+ +

Para hacer que todos los elementos se asienten horizontalmente en una línea, la forma moderna más fácil es usar flexbox:

+ +
ul {
+  display: flex;
+}
+ +

Para eliminar el espacio innecesario y las viñetas, podemos hacer esto:

+ +
ul {
+  list-style-type: none;
+  padding: 0;
+}
+ +

etc.

+ +

Si realmente eres un principiante en el desarrollo web, tendrás que estudiar y buscar en la web y encontrar soluciones para tales problemas. Si eres un desarrollador web profesional, probablemente recordarás la última vez que resolviste un problema similar, y solo tendrás que buscar algunos bits de la sintaxis que olvidaste desde entonces.

+ +

Cuando encuentres soluciones a tales problemas, vale la pena escribir notas sobre lo que hiciste y mantener algunos ejemplos de código mínimos en un directorio en algún lugar para que puedas mirar hacia atrás en el trabajo anterior.

+ +

Además, la web tiene {{web.link("/es/docs/Learn/Common_questions/What_are_browser_developer_tools", "herramientas de desarrollo")}} que te permiten ver el código utilizado para crear cualquier sitio en la web, si no tienes una solución a mano, un buen método de investigación es encontrar sitios web con características similares en la naturaleza y averiguar cómo lo hicieron.

+ +
+

Nota: Observa cómo hablamos antes sobre el problema que estamos tratando de resolver primero, y la tecnología utilizada para resolverlo, en segundo lugar. Esta, casi siempre es la mejor manera de hacerlo — no comiences con una tecnología nueva y genial que desees usar, e intenta adaptarla a tu caso de uso.

+
+ +
+

Nota: La solución más sencilla suele ser la mejor.

+
+ +

Practica

+ +

Cuanto más practiques la resolución de un problema, más fuertes serán las vías neuronales de tu cerebro en esa área y más fácil será recordar los detalles y la lógica de ese problema en particular.

+ +

Sigue jugando con el código y practica más. Si se te acaban los problemas por resolver, busca algunas pruebas en línea, realiza algunos cursos más o pregunta a tus amigos y familiares (o escuela, o iglesia local) si hay algo que les gustaría que construyeras para ellos.

+ +

Obtener ayuda

+ +

El desarrollo web requiere que aprendas un complejo conjunto de habilidades — a veces estarás atascado y necesitarás ayuda. Como dijimos antes, incluso los desarrolladores profesionales regularmente necesitan ayuda para resolver problemas.

+ +

Hay una variedad de formas de obtener ayuda, y la siguiente información son algunos consejos para hacerlo de manera más efectiva.

+ +

Búsquedas web efectivas

+ +

Una habilidad importante para aprender es el arte de las búsquedas web efectivas — ¿qué términos de búsqueda necesitas usar en tu motor de búsqueda favorito para encontrar los artículos que necesitas?

+ +

A menudo es bastante obvio qué buscar. Por ejemplo:

+ + + +

Si deseas buscar algo que tenga palabras de moda menos obvias, debes pensar en qué es más probable que te devuelva lo que deseas.

+ + + +

Mensajes de error

+ +

Si tienes un problema con algún código y aparece un mensaje de error específico, a menudo es una buena idea copiar el mensaje de error en tu motor de búsqueda y utilizarlo como término de búsqueda. Si otras personas han tenido el mismo problema, es probable que haya algunos artículos o publicaciones de blog al respecto en lugares como MDN o Stack Overflow.

+ +
+

Nota: Stack Overflow es un sitio web realmente útil; básicamente es una enorme base de datos de preguntas y respuestas seleccionadas sobre diversas tecnologías y técnicas relacionadas. Probablemente encontrarás una respuesta que responda a tu pregunta. Si no, puedes hacer una pregunta y ver si alguien puede ayudarte.

+
+ +

Prueba en el navegador

+ +

A menudo es una buena idea ver si tu problema está afectando a todos los navegadores, o si solo ocurre en uno o en un pequeño número de navegadores. Si solo afecta a un navegador, por ejemplo, puedes usar ese navegador para limitar la búsqueda. Las búsquedas de ejemplo podrían verse así:

+ + + +

Usa MDN

+ +

El sitio en el que ya estás tiene una gran cantidad de información disponible, tanto material de referencia para buscar la sintaxis del código como guías/tutoriales para aprender técnicas.

+ +

Hemos proporcionado la mayoría de las respuestas a las preguntas que tendrás sobre los fundamentos del desarrollo web en esta parte de MDN. Si estás atascado, es bueno volver a leer los artículos asociados para ver si te perdiste algo.

+ +

Si no estás seguro de qué artículo leer, intenta buscar en MDN algunas palabras clave relacionadas (como se indicó anteriormente), o intenta una búsqueda web general. Para buscar en MDN, puedes usar la funcionalidad de búsqueda incorporada del sitio o mejor aún, usar tu motor de búsqueda favorito y poner "mdn" delante del término de búsqueda, por ejemplo, "diseño web receptivo mdn" o "backgrounf-color mdn".

+ +

Otros recursos en línea

+ +

Ya mencionamos Stack Overflow, pero hay otros recursos en línea que pueden ayudar.

+ +

Es bueno encontrar una comunidad de la que formar parte, y obtendrás mucho respeto si intentas ayudar a otros a responder sus preguntas y también a hacer las tuyas. Otros buenos ejemplos incluyen:

+ + + +

Sin embargo, también tiene sentido encontrar grupos útiles en sitios de redes sociales como Twitter o Facebook. Busca grupos que discutan los temas de desarrollo web que te interesen y únete. Sigue a las personas en Twitter que sabes que son influyentes, inteligentes o simplemente parecen compartir muchos consejos útiles.

+ +

Encuentros físicos

+ +

Por último, deberías intentar asistir a algunas reuniones físicas para conocer a otras personas de ideas afines, especialmente aquellas que atienden a principiantes. meetup.com es un buen lugar para encontrar reuniones físicas locales, y también puedes probar tu prensa local o lo que hay en los sitios.

+ +

También puedes intentar asistir a conferencias web completas. Si bien estas pueden ser costosas, puedes intentar ofrecerte como voluntario con ellos, y muchas conferencias ofrecen boletos de tarifa reducida, por ejemplo, boletos de estudiante o diversidad.

+ +

Ve también

+ + diff --git a/files/es/learn/server-side/configuring_server_mime_types/index.html b/files/es/learn/server-side/configuring_server_mime_types/index.html new file mode 100644 index 0000000000..782c328151 --- /dev/null +++ b/files/es/learn/server-side/configuring_server_mime_types/index.html @@ -0,0 +1,81 @@ +--- +title: Configurar correctamente los tipos MIME del servidor +slug: Configurar_correctamente_los_tipos_MIME_del_servidor +tags: + - Desarrollo_Web + - Estándares_Web + - Seguridad + - Todas_las_Categorías +translation_of: Learn/Server-side/Configuring_server_MIME_types +--- +

+

+

Introduccion

+

Por omisión, muchos servidores web estan configurados para reportar un tipo MIME de texto/plano ó aplicacion/de fuente de octeto para tipos de contenidos desconocidos. A medida son desarrollados nuevos tipos de contenidos, los administradores de red pueden equivocarse al añadirlos a la configuración del servidor web, y esta es la principal causa de problemas para usuarios de navegadores basados en Gecko, el cual respeta los tipos MIME tal y como son reportados por los servidores y las aplicaciones web. +

+

¿Que son los tipos de MIME?

+

Los tipos de MIME describen el tipo de medio del contenido, sea del correo electrónico o el utilizado en los servidores o aplicaciones web, y tiene como proposito ayudar a guiar al navegador web acerca de como ha de ser procesado y mostrado el contenido. Ejemplos de tipos de MIME son: +

+ +

Información Técnica

+

MIME está actualmente definida en RFCs 2045, 2046, 2047, 2048, y 2049 y los valores registrados para los tipos MIME estan disponibles en IANA | MIME Media Types. La HTTP specification define un superconjunto de MIME el cual es utilizado para describir los tipos de medios usados en la red. +

+

¿Por qué son importantes los tipos correctos de MIME?

+

Example of an incorrect MIME type result +Si el servidor de red o la aplicación informan un tipo incorrecto de MIME para el contenido, un navegador de red no tiene forma de saberlo, de acuerdo a la especificación HTTP, más si tenemos en cuenta que el autor especificó el contenido para ser procesado y mostrado en una forma diferente que la impuesta por el tipo MIME informado. +

Otros navegadores de red, tal como el Microsoft® Internet Explorer, intentan determinar el tipo adecuado de MIME en servidores mal configurados, suponiendo el tipo adecuado de MIME que debería ser. Esto protege a muchos administradores de red de sus propios errores, pues el Internet Explorer continúa procesando el contenido aunque, por ejemplo, una imagen haya sido informada como texto plano. +

+

¿Por qué los navegadores no deberían suponer tipos MIME?

+

A parte de la violación de la especificación HTTP, es una mala estrategia para los navegadores suponer tipos MIME por las siguientes razones: +

+

Pérdida del control

+

Si el navegador ignora el tipo MIME reportado, los administradores de red y los autores dejarán de tener el control sobre cómo sus contenidos serán procesados. +

Por ejemplo, un sitio de red orientado para desarrolladores de red puede enviar determinados ejemplos de documentos HTML como enteros text/html ó como text/plain para lograr documentos con enteros procesados y motrados como HTML ó como código fuente. Si el navegador supone el tipo MIME, esta posibilidad dejará de estar disponible para el autor. +

+

Seguridad

+

Algunos tipos de contenidos, tales como programas ejecutables, son inherentemente inseguros. Por este motivo, esos tipos MIME son generalmente restringidos en términos de qué acciones tomará el navegador de red al recibirlos. Por ejemplo, un programa ejecutable no debería ser ejecutado en la computadora de un usuario, y en su lugar debería aparecer un cuadro de diálogo para preguntar al usuario si desea descargar el archivo. +

La suposición de tipos MIME ha llevado a fallas de seguridad en Internet Explorer, debido a autores maliciosos que reportaban el tipo MIME de un archivo peligroso como si fuera uno seguro, evitando así el cuadro de diálogo de descarga normal. El Internet Explorer suponía entonces que se trataba de un programa ejecutable y los corría en la computadora del usuario. +

+

Cómo determinar el tipo MIME enviado a un servidor

+

En Firefox, cargar el archivo y usar Herramientas | Información de página. Puede también usar Rex Swain's HTTP Viewer ó Live HTTP Headers para ver los encabezados completos y contenido de cualquier archivo enviado desde un servidor de red. +

De acuerdo a los estándares, una meta etiqueta que brinda el tipo MIME tal como <meta http-equiv="Content-Type" content="text/html"> debería ser ignorado si hay una Content-Type línea en el encabezado. En vez de buscar esta línea en la fuente HTML, use las técnicas anteriores para determinar el tipo MIME enviado por un servidor. +

+

Cómo determinar el tipo correcto de MIME para su contenido

+

Hay ciertos pasos los cuales pueden llevar a derminar el correcto tipo de valor MIME a ser usado para su contenido. +

+
  1. Si su contenido fue creado usando la aplicación de software del vendedor, lea la documentación del vendedor para ver qué tipos MIME debería n ser informados para los diferentes tipos de medios. +
  2. Mire en el IANA | Registro de Tipos de medios MIME que contiene todos los tipos MIME registrados. +
  3. Si el tipo de medio es mostrado usando un plug-in en Netscape Gecko, instale el plug-in y luego mire en Ayuda->Acerca en le Menú Plug-in para ver qué tipos MIME están asociados con el tipo de medio. +
  4. Buscar la extensión del archivo en FILExt para ver qué tipos MIME están asociados con esa expresión. +
+

Cómo configurar su servidor para enviar los tipos MIME correctos

+ +

Enlaces Relacionados

+ +
+

Información del Documento Original

+ +
+{{ languages( { "en": "en/Properly_Configuring_Server_MIME_Types" } ) }} diff --git "a/files/es/learn/server-side/django/introducci\303\263n/index.html" "b/files/es/learn/server-side/django/introducci\303\263n/index.html" deleted file mode 100644 index 484b311a2c..0000000000 --- "a/files/es/learn/server-side/django/introducci\303\263n/index.html" +++ /dev/null @@ -1,282 +0,0 @@ ---- -title: Introducción a Django -slug: Learn/Server-side/Django/Introducción -tags: - - Aprendizaje - - CodigoScript - - Principiante - - Programación lado servidor - - Python - - django - - introducción -translation_of: Learn/Server-side/Django/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
- -

En este primer artículo de Django responderemos la pregunta ¿Qué es Django? y daremos una visión general de lo que hace que este framework sea tan especial. Vamos a delinear las características principales, incluidas algunas de las funcionalidades avanzadas que no tendremos tiempo de cubrir con detalle en este módulo.  Tambien mostraremos algunos de los componentes principales de una aplicación de Django. (aunque en este momento no cuentes con un entorno de desarrollo en el cual probarlo).

- - - - - - - - - - - - -
Pre requisitos:Conocimientos basicos en informatica. Una comprensión general de programación del lado del servidor, y en particular de los mecanimos de interacciones cliente-servidor en los sitios web.
Objetivos:Familiarizarse con lo que es Django, que funcionalidad proporciona y los componentes principales de una aplicación Django.
- -

¿Qué es Django?

- -

Django es un framework web de alto nivel que permite el desarrollo rápido de sitios web seguros y mantenibles. Desarrollado por programadores experimentados, Django se encarga de gran parte de las complicaciones del desarrollo web, por lo que puedes concentrarte en escribir tu aplicación sin necesidad de reinventar la rueda. Es gratuito y de código abierto, tiene una comunidad próspera y activa, una gran documentación y muchas opciones de soporte gratuito y de pago.

- -

Django te ayuda a escribir software que es:

- -
-
Completo
-
Django sigue la filosofía "Baterías incluidas" y provee casi todo lo que los desarrolladores quisieran que tenga "de fábrica". Porque todo lo que necesitas es parte de un único "producto", todo funciona a la perfección, sigue principios de diseño consistentes y tiene una amplia y actualizada documentación.
-
Versátil
-
Django puede ser (y ha sido) usado para construir casi cualquier tipo de sitio web — desde sistemas manejadores de contenidos y wikis, hasta redes sociales y sitios de noticias. Puede funcionar con cualquier framework en el lado del cliente, y puede devolver contenido en casi cualquier formato (incluyendo HTML, RSS feeds, JSON, XML, etc). ¡El sitio que estás leyendo actualmente está basado en Django!
-
- Internamente, mientras ofrece opciones para casi cualquier funcionalidad que desees (distintos motores de base de datos , motores de plantillas, etc.), también puede ser extendido para usar otros componentes si es necesario.
-
Seguro
-
Django ayuda a los desarrolladores evitar varios errores comunes de seguridad al proveer un framework que ha sido diseñado para "hacer lo correcto" para proteger el sitio web automáticamente. Por ejemplo, Django, proporciona una manera segura de administrar cuentas de usuario y contraseñas, evitando así errores comunes como colocar informaciones de sesión en cookies donde es vulnerable (en lugar de eso las cookies solo contienen una clave y los datos se almacenan en la base de datos) o se almacenan directamente las contraseñas en un hash de contraseñas.
-  
- Un hash de contraseña es un valor de longitud fija creado al enviar la contraseña a una cryptographic hash function. Django puede validar si la contraseña ingresada es correcta enviándola a través de una función hash y comparando la salida con el valor hash almacenado. Sin embargo debido a la naturaleza "unidireccional" de la función, incluso si un valor hash almacenado se ve comprometido es difícil para un atacante resolver la contraseña original.
-
- Django permite protección contra algunas vulnerabilidades de forma predeterminada, incluida la inyección SQL, scripts entre sitios, falsificación de solicitudes entre sitios y clickjacking (consulte Seguridad de sitios web para obtener más detalles sobre dichos ataques).
-
Escalable
-
Django usa un componente basado en la arquitectura “shared-nothing” (cada parte de la arquitectura es independiente de las otras, y por lo tanto puede ser reemplazado o cambiado si es necesario). Teniendo en cuenta una clara separación entre las diferentes partes significa que puede escalar para aumentar el tráfico al agregar hardware en cualquier nivel: servidores de cache, servidores de bases de datos o servidores de aplicación. Algunos de los sitios más concurridos han escalado a Django para satisfacer sus demandas (por ejemplo, Instagram y Disqus, por nombrar solo dos).
-
Mantenible
-
El código de Django está escrito usando principios y patrones de diseño para fomentar la creación de código mantenible y reutilizable. En particular, utiliza el principio No te repitas "Don't Repeat Yourself" (DRY) para que no exista una duplicación innecesaria, reduciendo la cantidad de código. Django también promueve la agrupación de la funcionalidad relacionada en "aplicaciones" reutilizables y en un nivel más bajo, agrupa código relacionado en módulos (siguiendo el patrón Model View Controller (MVC)).
-
Portable
-
Django está escrito en Python, el cual se ejecuta en muchas plataformas. Lo que significa que no está sujeto a ninguna plataforma en particular, y puede ejecutar sus aplicaciones en muchas distribuciones de Linux, Windows y Mac OS X. Además, Django cuenta con el respaldo de muchos proveedores de alojamiento web, y que a menudo proporcionan una infraestructura específica y documentación para el alojamiento de sitios de Django.
-
- -

¿De dónde vino?

- -

Django fue desarrollado inicialmente entre 2003 y 2005 por un equipo que era responsable de crear y mantener sitios web de periódicos. Después de crear varios sitios, el equipo empezó a tener en cuenta y reutilizar muchos códigos y patrones de diseño comunes. Este código común se convirtió en un framework web genérico, que fue de código abierto, conocido como proyecto "Django" en julio de 2005.

- -

Django ha continuado creciendo y mejorando desde su primer hito, el lanzamiento de la versión (1.0) en septiembre de 2008, hasta el reciente lanzamiento de la versión 1.11 (2017). Cada lanzamiento ha añadido nuevas funcionalidades y solucionado errores, que van desde soporte de nuevos tipos de bases de datos, motores de plantillas, caching, hasta la adición de funciones genéricas y clases de visualización (que reducen la cantidad de código que los desarrolladores tiene que escribir para numerosas tareas de programación).

- -
-

Nota: Consulte las notas de lanzamiento en el sitio web de Django para ver qué ha cambiado en las versiones recientes y cúanto trabajo se lleva a cabo para mejorar Django.

-
- -

Django es ahora un próspero proyecto colaborativo de código abierto, con miles de usuarios y contribuidores. Mientras que todavía presenta algunas características que reflejan su origen, Django ha evolucionado en un framework versátil que es capaz de desarrollar cualquier tipo de sitio web.

- - - -

No hay una medida de popularidad definitiva y disponible de inmediato de "frameworks de lado servidor" (aunque sitios como Hot Frameworks intentan evaluar la popularidad usando mecanismos como contar el número de proyectos en Github y preguntas en StackOverflow de cada plataforma). Una pregunta mejor es si Django es lo "suficientemente popular" para evitar los problemas de las plataformas menos populares. ¿Continúa evolucionando? ¿Puedes conseguir la ayuda que necesitas? ¿Hay alguna posibilidad de que consigas un trabajo pagado si aprendes Django?

- -

De acuerdo con el número de sitios que usan Django, el número de gente que contribuye al código base, y el número de gente que proporciona soporte tanto libre como pagado, podemos entonces decir que sí, !Django es un framework popular!

- -

Los sitios de alto nivel que usan Django incluyen: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest y Open Stack (fuente: Página de inicio de Django).

- -

¿Es Django dogmático?

- -

Los frameworks web frecuentemente se refieren a sí mismos como "dogmáticos" ("opinionated") o "no dogmáticos" ("unopinionated").

- -

Los frameworks dogmáticos son aquellos que opinan acerca de la "manera correcta" de gestionar cualquier tarea en particular. Ofrecen soporte para el desarrollo rápido en un dominio en particular (resolver problemas de un tipo en particular) porque la manera correcta de hacer cualquier cosa está generalmente bien comprendida y bien documentada.

- -

Sin embargo pueden ser menos flexibles para resolver problemas fuera de su dominio principal, y tienden a ofrecer menos opciones para elegir qué componentes y enfoques pueden usarse.

- -

Los framewoks no dogmáticos, por contra, tienen muchas menos restricciones sobre el modo mejor de unir componentes para alcanzar un objetivo, o incluso qué componentes deberían usarse. Hacen más fácil para los desarrolladores usar las herramientas más adecuadas para completar una tarea en particular, si bien al coste de que necesitas encontrar esos componentes por tí mismo.

- -

Django es "dogmático pero no del todo" y por tanto entrega "lo mejor de ambos mundos". Proporciona un conjunto de componentes para gestionar la mayoría de las tareas de desarrollo web y una (o dos) maneras preferidas de usarlos. Sin embargo, la arquitectura desacoplada de Django implica que puedes normalmente escoger y seleccionar de entre numerosas opciones diferentes o añadir soporte para otras completamente nuevas, si lo deseas.

- -

¿Qué pinta tiene el código de Django?

- -

En un sitio web tradicional basado en datos, una aplicación web espera peticiones HTTP del explorador web (o de otro cliente). Cuando se recibe una petición la aplicación elabora lo que se necesita basándose en la URL y posiblemente en la información incluida en los datos POST o GET. Dependiendo de qué se necesita quizás pueda entonces leer o escribir información desde una base de datos o realizar otras tareas requeridas para satisfacer la petición. La aplicación devolverá a continuación una respuesta al explorador web, con frecuencia creando dinámicamente una página HTML para que el explorador la presente insertando los datos recuperados en marcadores de posición dentro de una plantilla HTML.

- -

Las aplicaciones web de Django normalmente agrupan el código que gestiona cada uno de estos pasos en ficheros separados:

- -

- - - -
-

Nota: Django se refiere a este tipo de organización como arquitectura Modelo Vista Plantilla "Model View Template (MVT)". Tiene muchas similaridades con la arquitectura más familiar Model View Controller. 

-
- - - -

Las secciones de más abajo te darán una idea de la pinta que tienen estas partes principales de una aplicación Django (entraremos en más detalles más adelante en el curso, una vez que hallamos configurado un entorno de desarrollo).

- -

Enviar la petición a la vista correcta (urls.py)

- -

Un mapeador URL está normalmente almacenado en un fichero llamado urls.py. En el ejemplo más abajo el mapeador (urlpatterns) define una lista de mapeos entre patrones URL específicos y sus correspondientes funciones de visualización. Si se recibe una Petición HTTP que tiene una URL que empareja un patrón específico (ej. r'^$', más abajo) se realizará una llamada y se pasará la petición a la función de visualización asociada (ej.  views.index).

- -
urlpatterns = [
-    url(r'^$', views.index),
-    url(r'^([0-9]+)/$', views.best),
-]
-
- -
-

Nota: Un poco de Python:

- - -
- -

Manejar la petición (views.py)

- -

Las vistas son el corazón de la aplicación web, recibiendo peticiones HTTP de los clientes web y devolviendo respuestas HTTP. Entre éstas, organizan los otros recursos del framework para acceder a las bases de datos, consolidar plantillas, etc.

- -

El ejemplo más abajo muestra una mínima función de visualización index(), que podría ser llamada por nuestro mapeador de URL de la sección anterior. Al igual que todas las funciones de visualización, recibe un objeto HttpRequest como parámetro (request) y devuelve un objeto HttpResponse. En este caso no hacemos nada con la petición y nuestra respuesta simplemente devuelve una cadena insertada de forma fija en el código. Te mostraremos una petición que hace algo más interesante en la siguiente sección.

- -
## fichero: views.py (funciones de visualizacion de Django)
-from django.http import HttpResponse
-
-def index(request):
-    # Obtener un HttpRequest - el parametro peticion
-    # Realizar operaciones usando la infomracion de la peticion.
-    # Devolver una HttpResponse
-    return HttpResponse('!Hola desde Django!')
-
- -
-

Nota: Un poco de Python:

- - -
- - - -

Las vistas se almacenan normalmente en un fichero llamado views.py.

- -

Definir modelos de datos (models.py)

- -

Las aplicaciones web Django manejan y consultan datos a través de objetos Python referidos como modelos. Los modelos definen la estructura de los datos almacenados, incluyendo los tipos de campos y posiblemente también su tamaño máximo, los valores por defecto, la lista de selección de opciones, texto de ayuda para documentación, etiquetas de texto para formularios, etc. La definición del modelo es independiente de la base de datos subyacente — puedes elegir una entre varias como parte de la configuración de tu proyecto. Una vez que has seleccionado qué base de datos quieres usar, no necesitas en absoluto comunicarte con ella directamente — sólo hay que escribir la estructura de la base y otro código y Django se encarga por tí de todo el trabajo sucio de comunicarse con la base de datos.

- -

El fragmento de código de más abajo muestra un modelo de Django muy simple para un objeto Team. La clase Team deriva de la clase de django models.Model. Define el nombre de un equipo y su nivel como campos de tipo carácter y especifica un número máximo de caracteres que pueden ser almacenados en cada registro. El team_level puede ser un valor de entre varios, de manera que lo definimos como un campo de opciones y proporcionamos un mapeo entre opciones para mostrar y datos para almacenar, junto con un valor por defecto.

- -
# filename: models.py
-
-from django.db import models
-
-class Team(models.Model):
-    team_name = models.CharField(max_length=40)
-
-    TEAM_LEVELS = (
-        ('U09', 'Under 09s'),
-        ('U10', 'Under 10s'),
-        ('U11', 'Under 11s'),
-        ...  #list other team levels
-    )
-    team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
-
- -
-

Nota: Un poco de Python:

- - -
- -

Consultar datos (views.py)

- -

El modelo de Django proporciona una API de consulta simple para buscar en la base de datos. Esta puede buscar concidencias contra varios campos al mismo tiempo usando diferentes criterios (ej. exacto, insensible a las mayúsculas, mayor que, etc.), y puede soportar sentencias complejas (por ejemplo, puedes especificar que se busque equipos U11 que tengan un nombre de equipo que empiece por "Fr" o termine con "al").

- -

El fragmento de código de más abajo muestra una función de visualización (manejador de recursos) para presentar en pantalla todos nuestros equipos U09. La línea en negrilla muestra como podemos usar la API de consulta del modelo para filtrar todos los registros donde el campo team_level tenga exactamente el texto 'U09' (fíjate como este criterio se pasa como argumento a la función filter() con el nombre del campo y tipo de coincidencia separados por un doble guion bajo: team_level__exact).

- -
## filename: views.py
-
-from django.shortcuts import render
-from .models import Team
-
-def index(request):
-    list_teams = Team.objects.filter(team_level__exact="U09")
-    context = {'youngest_teams': list_teams}
-    return render(request, '/best/index.html', context)
-
- -
-
- -

Esta función utiliza la función render() para crear la HttpResponse que se envía de vuelta al explorador. Esta función es un atajo; crea un fichero HTML mediante la combinación de una plantilla HTML específica y algunos datos para insertar en ella (proporcionados en la variable "context"). En la siguiente sección mostramos como la plantilla tiene los datos insertados en ella para crear el HTML.

- -

Renderización de los datos (plantillas HTML)

- -

Los sistemas de plantillas permiten especificar la estructura de un documento de salida usando marcadores de posición para los datos que serán rellenados cuando se genere la página. Las plantillas se usan con frecuencia para crear HTML, también pueden crear otros tipos de documentos. Django soporta de fábrica tanto su sistema de plantillas nativo como otra biblioteca Python popular llamada Jinja2 (y se puede hacer que soporte otros sistemas si hace falta).

- -

El fragmento de código de más abajo muestra el aspecto que podría tener la plantilla HTML llamada por la función render() de la sección anterior. Esta plantilla ha sido escrita bajo la suposición de que cuando sea renderizada tendrá acceso a una variable tipo lista llamada youngest_teams (contenida en la variable context dentro de la función render() de más arriba). Dentro del esqueleto HTML tenemos una expresión que primero comprueba que existe la variable youngest_teams, y luego itera sobre ella en un bucle for. En cada iteración la plantilla presenta cada valor del campo team_name del equipo en un elemento {{htmlelement("li")}}.

- -
## filename: best/templates/best/index.html
-
-<!DOCTYPE html>
-<html lang="en">
-<body>
-
- {% if youngest_teams %}
-    <ul>
-    {% for team in youngest_teams %}
-        <li>\{\{ team.team_name \}\}</li>
-    {% endfor %}
-    </ul>
-{% else %}
-    <p>No teams are available.</p>
-{% endif %}
-
-</body>
-</html>
- -

¿Qué más puedes hacer?

- -

Las secciones prededentes muestran las principales características que usarás en casi todas las aplicaciones web: mapeo de URLs, vistas, modelos y plantillas. Sólo unas pocas de las otras cosas que Django proporciona y que incluyen:

- - - -

Sumario

- -

¡Felicidades, has completado el primer paso en tu viaje por Django! Deberías ahora ser consciente de los principales beneficios de Django, algo de su historia y a groso modo la pinta que tienen cada una de las partes principales de una de sus apps. Deberías también haber aprendido unas pocas cosas acerca del lenguaje de programación Python, incluyendo la sintaxis para las listas, funciones y clases.

- -

Has visto ya algo de código real de Django más arriba, pero a diferencia del código de lado cliente, necesitas configurar un entorno de desarrollo para hacerlo funcionar. Ese será nuestro siguiente paso.

- -
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}} -

En este módulo

- - -
diff --git a/files/es/learn/server-side/django/introduction/index.html b/files/es/learn/server-side/django/introduction/index.html new file mode 100644 index 0000000000..484b311a2c --- /dev/null +++ b/files/es/learn/server-side/django/introduction/index.html @@ -0,0 +1,282 @@ +--- +title: Introducción a Django +slug: Learn/Server-side/Django/Introducción +tags: + - Aprendizaje + - CodigoScript + - Principiante + - Programación lado servidor + - Python + - django + - introducción +translation_of: Learn/Server-side/Django/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
+ +

En este primer artículo de Django responderemos la pregunta ¿Qué es Django? y daremos una visión general de lo que hace que este framework sea tan especial. Vamos a delinear las características principales, incluidas algunas de las funcionalidades avanzadas que no tendremos tiempo de cubrir con detalle en este módulo.  Tambien mostraremos algunos de los componentes principales de una aplicación de Django. (aunque en este momento no cuentes con un entorno de desarrollo en el cual probarlo).

+ + + + + + + + + + + + +
Pre requisitos:Conocimientos basicos en informatica. Una comprensión general de programación del lado del servidor, y en particular de los mecanimos de interacciones cliente-servidor en los sitios web.
Objetivos:Familiarizarse con lo que es Django, que funcionalidad proporciona y los componentes principales de una aplicación Django.
+ +

¿Qué es Django?

+ +

Django es un framework web de alto nivel que permite el desarrollo rápido de sitios web seguros y mantenibles. Desarrollado por programadores experimentados, Django se encarga de gran parte de las complicaciones del desarrollo web, por lo que puedes concentrarte en escribir tu aplicación sin necesidad de reinventar la rueda. Es gratuito y de código abierto, tiene una comunidad próspera y activa, una gran documentación y muchas opciones de soporte gratuito y de pago.

+ +

Django te ayuda a escribir software que es:

+ +
+
Completo
+
Django sigue la filosofía "Baterías incluidas" y provee casi todo lo que los desarrolladores quisieran que tenga "de fábrica". Porque todo lo que necesitas es parte de un único "producto", todo funciona a la perfección, sigue principios de diseño consistentes y tiene una amplia y actualizada documentación.
+
Versátil
+
Django puede ser (y ha sido) usado para construir casi cualquier tipo de sitio web — desde sistemas manejadores de contenidos y wikis, hasta redes sociales y sitios de noticias. Puede funcionar con cualquier framework en el lado del cliente, y puede devolver contenido en casi cualquier formato (incluyendo HTML, RSS feeds, JSON, XML, etc). ¡El sitio que estás leyendo actualmente está basado en Django!
+
+ Internamente, mientras ofrece opciones para casi cualquier funcionalidad que desees (distintos motores de base de datos , motores de plantillas, etc.), también puede ser extendido para usar otros componentes si es necesario.
+
Seguro
+
Django ayuda a los desarrolladores evitar varios errores comunes de seguridad al proveer un framework que ha sido diseñado para "hacer lo correcto" para proteger el sitio web automáticamente. Por ejemplo, Django, proporciona una manera segura de administrar cuentas de usuario y contraseñas, evitando así errores comunes como colocar informaciones de sesión en cookies donde es vulnerable (en lugar de eso las cookies solo contienen una clave y los datos se almacenan en la base de datos) o se almacenan directamente las contraseñas en un hash de contraseñas.
+  
+ Un hash de contraseña es un valor de longitud fija creado al enviar la contraseña a una cryptographic hash function. Django puede validar si la contraseña ingresada es correcta enviándola a través de una función hash y comparando la salida con el valor hash almacenado. Sin embargo debido a la naturaleza "unidireccional" de la función, incluso si un valor hash almacenado se ve comprometido es difícil para un atacante resolver la contraseña original.
+
+ Django permite protección contra algunas vulnerabilidades de forma predeterminada, incluida la inyección SQL, scripts entre sitios, falsificación de solicitudes entre sitios y clickjacking (consulte Seguridad de sitios web para obtener más detalles sobre dichos ataques).
+
Escalable
+
Django usa un componente basado en la arquitectura “shared-nothing” (cada parte de la arquitectura es independiente de las otras, y por lo tanto puede ser reemplazado o cambiado si es necesario). Teniendo en cuenta una clara separación entre las diferentes partes significa que puede escalar para aumentar el tráfico al agregar hardware en cualquier nivel: servidores de cache, servidores de bases de datos o servidores de aplicación. Algunos de los sitios más concurridos han escalado a Django para satisfacer sus demandas (por ejemplo, Instagram y Disqus, por nombrar solo dos).
+
Mantenible
+
El código de Django está escrito usando principios y patrones de diseño para fomentar la creación de código mantenible y reutilizable. En particular, utiliza el principio No te repitas "Don't Repeat Yourself" (DRY) para que no exista una duplicación innecesaria, reduciendo la cantidad de código. Django también promueve la agrupación de la funcionalidad relacionada en "aplicaciones" reutilizables y en un nivel más bajo, agrupa código relacionado en módulos (siguiendo el patrón Model View Controller (MVC)).
+
Portable
+
Django está escrito en Python, el cual se ejecuta en muchas plataformas. Lo que significa que no está sujeto a ninguna plataforma en particular, y puede ejecutar sus aplicaciones en muchas distribuciones de Linux, Windows y Mac OS X. Además, Django cuenta con el respaldo de muchos proveedores de alojamiento web, y que a menudo proporcionan una infraestructura específica y documentación para el alojamiento de sitios de Django.
+
+ +

¿De dónde vino?

+ +

Django fue desarrollado inicialmente entre 2003 y 2005 por un equipo que era responsable de crear y mantener sitios web de periódicos. Después de crear varios sitios, el equipo empezó a tener en cuenta y reutilizar muchos códigos y patrones de diseño comunes. Este código común se convirtió en un framework web genérico, que fue de código abierto, conocido como proyecto "Django" en julio de 2005.

+ +

Django ha continuado creciendo y mejorando desde su primer hito, el lanzamiento de la versión (1.0) en septiembre de 2008, hasta el reciente lanzamiento de la versión 1.11 (2017). Cada lanzamiento ha añadido nuevas funcionalidades y solucionado errores, que van desde soporte de nuevos tipos de bases de datos, motores de plantillas, caching, hasta la adición de funciones genéricas y clases de visualización (que reducen la cantidad de código que los desarrolladores tiene que escribir para numerosas tareas de programación).

+ +
+

Nota: Consulte las notas de lanzamiento en el sitio web de Django para ver qué ha cambiado en las versiones recientes y cúanto trabajo se lleva a cabo para mejorar Django.

+
+ +

Django es ahora un próspero proyecto colaborativo de código abierto, con miles de usuarios y contribuidores. Mientras que todavía presenta algunas características que reflejan su origen, Django ha evolucionado en un framework versátil que es capaz de desarrollar cualquier tipo de sitio web.

+ + + +

No hay una medida de popularidad definitiva y disponible de inmediato de "frameworks de lado servidor" (aunque sitios como Hot Frameworks intentan evaluar la popularidad usando mecanismos como contar el número de proyectos en Github y preguntas en StackOverflow de cada plataforma). Una pregunta mejor es si Django es lo "suficientemente popular" para evitar los problemas de las plataformas menos populares. ¿Continúa evolucionando? ¿Puedes conseguir la ayuda que necesitas? ¿Hay alguna posibilidad de que consigas un trabajo pagado si aprendes Django?

+ +

De acuerdo con el número de sitios que usan Django, el número de gente que contribuye al código base, y el número de gente que proporciona soporte tanto libre como pagado, podemos entonces decir que sí, !Django es un framework popular!

+ +

Los sitios de alto nivel que usan Django incluyen: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest y Open Stack (fuente: Página de inicio de Django).

+ +

¿Es Django dogmático?

+ +

Los frameworks web frecuentemente se refieren a sí mismos como "dogmáticos" ("opinionated") o "no dogmáticos" ("unopinionated").

+ +

Los frameworks dogmáticos son aquellos que opinan acerca de la "manera correcta" de gestionar cualquier tarea en particular. Ofrecen soporte para el desarrollo rápido en un dominio en particular (resolver problemas de un tipo en particular) porque la manera correcta de hacer cualquier cosa está generalmente bien comprendida y bien documentada.

+ +

Sin embargo pueden ser menos flexibles para resolver problemas fuera de su dominio principal, y tienden a ofrecer menos opciones para elegir qué componentes y enfoques pueden usarse.

+ +

Los framewoks no dogmáticos, por contra, tienen muchas menos restricciones sobre el modo mejor de unir componentes para alcanzar un objetivo, o incluso qué componentes deberían usarse. Hacen más fácil para los desarrolladores usar las herramientas más adecuadas para completar una tarea en particular, si bien al coste de que necesitas encontrar esos componentes por tí mismo.

+ +

Django es "dogmático pero no del todo" y por tanto entrega "lo mejor de ambos mundos". Proporciona un conjunto de componentes para gestionar la mayoría de las tareas de desarrollo web y una (o dos) maneras preferidas de usarlos. Sin embargo, la arquitectura desacoplada de Django implica que puedes normalmente escoger y seleccionar de entre numerosas opciones diferentes o añadir soporte para otras completamente nuevas, si lo deseas.

+ +

¿Qué pinta tiene el código de Django?

+ +

En un sitio web tradicional basado en datos, una aplicación web espera peticiones HTTP del explorador web (o de otro cliente). Cuando se recibe una petición la aplicación elabora lo que se necesita basándose en la URL y posiblemente en la información incluida en los datos POST o GET. Dependiendo de qué se necesita quizás pueda entonces leer o escribir información desde una base de datos o realizar otras tareas requeridas para satisfacer la petición. La aplicación devolverá a continuación una respuesta al explorador web, con frecuencia creando dinámicamente una página HTML para que el explorador la presente insertando los datos recuperados en marcadores de posición dentro de una plantilla HTML.

+ +

Las aplicaciones web de Django normalmente agrupan el código que gestiona cada uno de estos pasos en ficheros separados:

+ +

+ + + +
+

Nota: Django se refiere a este tipo de organización como arquitectura Modelo Vista Plantilla "Model View Template (MVT)". Tiene muchas similaridades con la arquitectura más familiar Model View Controller. 

+
+ + + +

Las secciones de más abajo te darán una idea de la pinta que tienen estas partes principales de una aplicación Django (entraremos en más detalles más adelante en el curso, una vez que hallamos configurado un entorno de desarrollo).

+ +

Enviar la petición a la vista correcta (urls.py)

+ +

Un mapeador URL está normalmente almacenado en un fichero llamado urls.py. En el ejemplo más abajo el mapeador (urlpatterns) define una lista de mapeos entre patrones URL específicos y sus correspondientes funciones de visualización. Si se recibe una Petición HTTP que tiene una URL que empareja un patrón específico (ej. r'^$', más abajo) se realizará una llamada y se pasará la petición a la función de visualización asociada (ej.  views.index).

+ +
urlpatterns = [
+    url(r'^$', views.index),
+    url(r'^([0-9]+)/$', views.best),
+]
+
+ +
+

Nota: Un poco de Python:

+ + +
+ +

Manejar la petición (views.py)

+ +

Las vistas son el corazón de la aplicación web, recibiendo peticiones HTTP de los clientes web y devolviendo respuestas HTTP. Entre éstas, organizan los otros recursos del framework para acceder a las bases de datos, consolidar plantillas, etc.

+ +

El ejemplo más abajo muestra una mínima función de visualización index(), que podría ser llamada por nuestro mapeador de URL de la sección anterior. Al igual que todas las funciones de visualización, recibe un objeto HttpRequest como parámetro (request) y devuelve un objeto HttpResponse. En este caso no hacemos nada con la petición y nuestra respuesta simplemente devuelve una cadena insertada de forma fija en el código. Te mostraremos una petición que hace algo más interesante en la siguiente sección.

+ +
## fichero: views.py (funciones de visualizacion de Django)
+from django.http import HttpResponse
+
+def index(request):
+    # Obtener un HttpRequest - el parametro peticion
+    # Realizar operaciones usando la infomracion de la peticion.
+    # Devolver una HttpResponse
+    return HttpResponse('!Hola desde Django!')
+
+ +
+

Nota: Un poco de Python:

+ + +
+ + + +

Las vistas se almacenan normalmente en un fichero llamado views.py.

+ +

Definir modelos de datos (models.py)

+ +

Las aplicaciones web Django manejan y consultan datos a través de objetos Python referidos como modelos. Los modelos definen la estructura de los datos almacenados, incluyendo los tipos de campos y posiblemente también su tamaño máximo, los valores por defecto, la lista de selección de opciones, texto de ayuda para documentación, etiquetas de texto para formularios, etc. La definición del modelo es independiente de la base de datos subyacente — puedes elegir una entre varias como parte de la configuración de tu proyecto. Una vez que has seleccionado qué base de datos quieres usar, no necesitas en absoluto comunicarte con ella directamente — sólo hay que escribir la estructura de la base y otro código y Django se encarga por tí de todo el trabajo sucio de comunicarse con la base de datos.

+ +

El fragmento de código de más abajo muestra un modelo de Django muy simple para un objeto Team. La clase Team deriva de la clase de django models.Model. Define el nombre de un equipo y su nivel como campos de tipo carácter y especifica un número máximo de caracteres que pueden ser almacenados en cada registro. El team_level puede ser un valor de entre varios, de manera que lo definimos como un campo de opciones y proporcionamos un mapeo entre opciones para mostrar y datos para almacenar, junto con un valor por defecto.

+ +
# filename: models.py
+
+from django.db import models
+
+class Team(models.Model):
+    team_name = models.CharField(max_length=40)
+
+    TEAM_LEVELS = (
+        ('U09', 'Under 09s'),
+        ('U10', 'Under 10s'),
+        ('U11', 'Under 11s'),
+        ...  #list other team levels
+    )
+    team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
+
+ +
+

Nota: Un poco de Python:

+ + +
+ +

Consultar datos (views.py)

+ +

El modelo de Django proporciona una API de consulta simple para buscar en la base de datos. Esta puede buscar concidencias contra varios campos al mismo tiempo usando diferentes criterios (ej. exacto, insensible a las mayúsculas, mayor que, etc.), y puede soportar sentencias complejas (por ejemplo, puedes especificar que se busque equipos U11 que tengan un nombre de equipo que empiece por "Fr" o termine con "al").

+ +

El fragmento de código de más abajo muestra una función de visualización (manejador de recursos) para presentar en pantalla todos nuestros equipos U09. La línea en negrilla muestra como podemos usar la API de consulta del modelo para filtrar todos los registros donde el campo team_level tenga exactamente el texto 'U09' (fíjate como este criterio se pasa como argumento a la función filter() con el nombre del campo y tipo de coincidencia separados por un doble guion bajo: team_level__exact).

+ +
## filename: views.py
+
+from django.shortcuts import render
+from .models import Team
+
+def index(request):
+    list_teams = Team.objects.filter(team_level__exact="U09")
+    context = {'youngest_teams': list_teams}
+    return render(request, '/best/index.html', context)
+
+ +
+
+ +

Esta función utiliza la función render() para crear la HttpResponse que se envía de vuelta al explorador. Esta función es un atajo; crea un fichero HTML mediante la combinación de una plantilla HTML específica y algunos datos para insertar en ella (proporcionados en la variable "context"). En la siguiente sección mostramos como la plantilla tiene los datos insertados en ella para crear el HTML.

+ +

Renderización de los datos (plantillas HTML)

+ +

Los sistemas de plantillas permiten especificar la estructura de un documento de salida usando marcadores de posición para los datos que serán rellenados cuando se genere la página. Las plantillas se usan con frecuencia para crear HTML, también pueden crear otros tipos de documentos. Django soporta de fábrica tanto su sistema de plantillas nativo como otra biblioteca Python popular llamada Jinja2 (y se puede hacer que soporte otros sistemas si hace falta).

+ +

El fragmento de código de más abajo muestra el aspecto que podría tener la plantilla HTML llamada por la función render() de la sección anterior. Esta plantilla ha sido escrita bajo la suposición de que cuando sea renderizada tendrá acceso a una variable tipo lista llamada youngest_teams (contenida en la variable context dentro de la función render() de más arriba). Dentro del esqueleto HTML tenemos una expresión que primero comprueba que existe la variable youngest_teams, y luego itera sobre ella en un bucle for. En cada iteración la plantilla presenta cada valor del campo team_name del equipo en un elemento {{htmlelement("li")}}.

+ +
## filename: best/templates/best/index.html
+
+<!DOCTYPE html>
+<html lang="en">
+<body>
+
+ {% if youngest_teams %}
+    <ul>
+    {% for team in youngest_teams %}
+        <li>\{\{ team.team_name \}\}</li>
+    {% endfor %}
+    </ul>
+{% else %}
+    <p>No teams are available.</p>
+{% endif %}
+
+</body>
+</html>
+ +

¿Qué más puedes hacer?

+ +

Las secciones prededentes muestran las principales características que usarás en casi todas las aplicaciones web: mapeo de URLs, vistas, modelos y plantillas. Sólo unas pocas de las otras cosas que Django proporciona y que incluyen:

+ + + +

Sumario

+ +

¡Felicidades, has completado el primer paso en tu viaje por Django! Deberías ahora ser consciente de los principales beneficios de Django, algo de su historia y a groso modo la pinta que tienen cada una de las partes principales de una de sus apps. Deberías también haber aprendido unas pocas cosas acerca del lenguaje de programación Python, incluyendo la sintaxis para las listas, funciones y clases.

+ +

Has visto ya algo de código real de Django más arriba, pero a diferencia del código de lado cliente, necesitas configurar un entorno de desarrollo para hacerlo funcionar. Ese será nuestro siguiente paso.

+ +
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}} +

En este módulo

+ + +
diff --git a/files/es/learn/server-side/first_steps/client-server_overview/index.html b/files/es/learn/server-side/first_steps/client-server_overview/index.html new file mode 100644 index 0000000000..05ce1f9451 --- /dev/null +++ b/files/es/learn/server-side/first_steps/client-server_overview/index.html @@ -0,0 +1,334 @@ +--- +title: Visión General Cliente-Servidor +slug: Learn/Server-side/Primeros_pasos/Vision_General_Cliente_Servidor +tags: + - Aprendizaje + - Codificación de scripts + - Guía + - Principiante + - Programación lado servidor + - Servidor + - introducción +translation_of: Learn/Server-side/First_steps/Client-Server_overview +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
+ +

Ahora que conoces el propósito y los beneficios potenciales de la programación de lado-servidor vamos a examinar en detalle lo que ocurre cuando un servidor recibe una "petición dinámica" desde un explorador web. Ya que el código de lado servidor de la mayoría de los sitios web gestiona peticiones y respuestas de formas similares, este artículo te ayudará a entender lo que necesitas hacer para escribir la mayor parte de tu propio código.

+ + + + + + + + + + + + +
Prerequisitos:Conocimientos básicos de computación. Noción básica de lo que es un servidor.
Objetivo:Comprender lo que son las interacciones cliente-servidor en un sitio web dinámico, y en particular que operaciones necesita realizar el código de lado servidor.
+ +

No hay código real en el debate porque ¡todavía no hemos seleccionado el framework web que usaremos para escribir nuestro código! Sin embargo este debate sí que es muy relevante incluso ahora, porque el comportamiento descrito debería ser implementado por tu código de lado servidor independientemente de qué lenguaje de programación o framework web hayas seleccionado.

+ +

Servidores Web y HTTP (iniciación)

+ +

Los exploradores web se comunican con los servidores web usando el Protocolo de Transferencia de HyperTexto (HyperTextTransfer Protocol HTTP). Cuando pinchas en un enlace sobre una página web, envías un formulario o ejecutas una búsqueda, el explorador envía una petición (Request) HTTP al servidor.

+ +

Esta petición incluye:

+ + + +

Los servidores web esperan los mensajes de petición de los clientes, los procesan cuando llegan y responden al explorador web con un mensaje de respuesta HTTP. La respuesta contiene un código de estado de respuesta HTTP que indica si la petición ha tenido éxito o no (ej. "200 OK" para indicar éxito, "404 Not Found" si el resurso no ha podido ser encontrado,  "403 Forbidden" si el usuario no está autorizado a acceder al recurso, etc). El cuerpo de la respuesta de éxito a una petición GET contendría el recurso solicitado.

+ +

Cuando se devuelve una página HTML es renderizada por el explorador web. Como parte del procesamiento el explorador puede descubrir enlaces a otros recursos (ej. una página HTML normalmente referencia las páginas JavaScript y CSS), y enviará peticiones HTTP separadas para descargar estos ficheros.

+ +

Los sitios web tanto estáticos como dinámicos (abordados en las secciones siguientes) usan exactamente los mismos protocolos/patrones de comunicación.

+ +

Ejemplo de petición/respuesta GET

+ +

Puedes realizar una petición GET simplemente pinchando sobre un enlace o buscando en un sitio (como la página inicial de un motor de búsquedas). Por ejemplo, la petición HTTP que se envía cuando realizas una búsqueda en MDN del término "visión general cliente servidor" se parecerá mucho al texto que se muestra más abajo (no será idéntica porque algunas partes del mensaje dependen de tu explorador/configuración).

+ +
+

El formato de los mensajes HTTP está definido en el "estándard web" (RFC7230). No necesitas conocer este nivel de detalle, pero al menos ¡ahora sabes de donde viene todo esto!

+
+ +

La petición

+ +

Cada linea de la petición contiene información sobre ella. La primera parte se llama cabecera o header, y contiene información útil sobre la petición, de la misma manera que un HTML head contiene información útil sobre un documento (pero no el contenido mismo, que está en el cuerpo):

+ +
GET https://developer.mozilla.org/en-US/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1
+Host: developer.mozilla.org
+Connection: keep-alive
+Pragma: no-cache
+Cache-Control: no-cache
+Upgrade-Insecure-Requests: 1
+User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
+Referer: https://developer.mozilla.org/en-US/
+Accept-Encoding: gzip, deflate, sdch, br
+Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7
+Accept-Language: en-US,en;q=0.8,es;q=0.6
+Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _gat=1; _ga=GA1.2.1688886003.1471911953; ffo=true
+
+ +

La primera y segunda líneas contienen la mayoría de la información de la que hemos hablado arriba:

+ + + +

La última linea contiene información sobre los cookies del lado cliente — puedes ver que en este caso el cookie incluye un id para gestionar las sesiones (Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...).

+ +

Las líneas restantes contienen información sobre el explorador web usado y la clase de respuestas que puede manejar. Por ejemplo, puedes ver aquí que:

+ + + +

Las peticiones HTTP también pueden tener un cuerpo, pero está vacío en este caso.

+ +

La respuesta

+ +

La primera parte de la respuesta a esta petición se muestra abajo. La cabecera o header contiene información como la siguiente:

+ + + +

Al final del mensaje vemos el contenido del cuerpo (body) — que contiene el HTML real devuelto por la respuesta.

+ +
HTTP/1.1 200 OK
+Server: Apache
+X-Backend-Server: developer1.webapp.scl3.mozilla.com
+Vary: Accept,Cookie, Accept-Encoding
+Content-Type: text/html; charset=utf-8
+Date: Wed, 07 Sep 2016 00:11:31 GMT
+Keep-Alive: timeout=5, max=999
+Connection: Keep-Alive
+X-Frame-Options: DENY
+Allow: GET
+X-Cache-Info: caching
+Content-Length: 41823
+
+
+
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr" class="redesign no-js"  data-ffo-opensanslight=false data-ffo-opensans=false >
+<head prefix="og: http://ogp.me/ns#">
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+  <script>(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);</script>
+  ...
+
+ +

El resto de la cabecera de la respuesta incluye información sobre la respuesta (ej. cuándo se generó), el servidor, y cómo espera el explorador manejar la página (ej. la linea X-Frame-Options: DENY le dice que al explorador que no está permitido incrustar esta página en un {{htmlelement("iframe")}} en otro sitio).

+ +

Ejemplo de petición/respuesta POST

+ +

Un HTTP POST se realiza cuando se envía un formulario que contiene información para ser guardada en el servidor.

+ +

La petición

+ +

El texto de abajo muestra la petición HTTP realizada cuando un usuario envía al sitio los detalles de un nuevo perfil. El formato de la petición es casi el mismo que en la petición GET del ejemplo mostrado previamente, aunque la primera linea identifica esta petición como POST. 

+ +
POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1
+Host: developer.mozilla.org
+Connection: keep-alive
+Content-Length: 432
+Pragma: no-cache
+Cache-Control: no-cache
+Origin: https://developer.mozilla.org
+Upgrade-Insecure-Requests: 1
+User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
+Content-Type: application/x-www-form-urlencoded
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
+Referer: https://developer.mozilla.org/en-US/profiles/hamishwillee/edit
+Accept-Encoding: gzip, deflate, br
+Accept-Language: en-US,en;q=0.8,es;q=0.6
+Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _ga=GA1.2.1688886003.1471911953; ffo=true
+
+csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwillee&user-fullname=Hamish+Willee&user-title=&user-organization=&user-location=Australia&user-locale=en-US&user-timezone=Australia%2FMelbourne&user-irc_nickname=&user-interests=&user-expertise=&user-twitter_url=&user-stackoverflow_url=&user-linkedin_url=&user-mozillians_url=&user-facebook_url=
+ +

La principal diferencia es que la URL no tiene parámetros. Como puedes ver, la información del formulario se codifica en el cuerpo de la petición (por ejemplo, el nombre completo del nuevo usuario se establece usando: &user-fullname=Hamish+Willee).

+ +

La respuesta

+ +

La respuesta a la petición se muestra abajo. El código de estado "302 Found" le dice al explorador que el POST ha tenido éxito, y que debe realizar una segunda petición HTTP para cargar la página especificada en el campo Location. La información es de lo contrario similar a la respuesta a una petición GET.

+ +
HTTP/1.1 302 FOUND
+Server: Apache
+X-Backend-Server: developer3.webapp.scl3.mozilla.com
+Vary: Cookie
+Vary: Accept-Encoding
+Content-Type: text/html; charset=utf-8
+Date: Wed, 07 Sep 2016 00:38:13 GMT
+Location: https://developer.mozilla.org/en-US/profiles/hamishwillee
+Keep-Alive: timeout=5, max=1000
+Connection: Keep-Alive
+X-Frame-Options: DENY
+X-Cache-Info: not cacheable; request wasn't a GET or HEAD
+Content-Length: 0
+
+ +
+

Nota: Las repuestas y las peticiones HTTP mostradas en estos ejemplos fueron capturadas usando la aplicación Fiddler, pero puedes obtener información similar usando sniffers web (ej. http://web-sniffer.net/) o usando extensiones del explorador como HttpFox. Puedes probarlo por tí mismo. Usa una de las herramientas enlazadas, y a continuación navega a través de un sitio y edita información del perfil para ver las diferentes peticiones y respuestas. La mayoría de los exploradores modernos también tienen herramientas que monitorizan las peticiciones de red (Por ejemplo, la herramienta Network Monitor en Firefox).

+
+ +

Sitios estáticos

+ +

Un sitio estático es aquél que devuelve desde el servidor el mismo contenido establecido de forma fija en el código cada vez que se solicita una página en particular. De manera que si por ejemplo tienes una página sobre un producto en /static/myproduct1.html , a todos los usuarios se les devolverá la misma página. Si añades otro producto similar a tu sitio necesitarás añadir otra página (ej. myproduct2.html) etc... Esto puede llegar a ser realmente muy poco eficiente — ¿qué sucede cuando alcanzas miles de páginas de productos? Repetirías un montón de código a lo largo de cada página (la plantilla básica de la página, la estructura, etc), y si quisieras cambiar cualquier cosa de la estructura de la página — como añadir una nueva sección de "productos relacionados" por ejemplo — tendrías que cambiar cada página individualmente. 

+ +
+

Nota: Los sitios estáticos son excelentes cuando tienes un pequeño número de páginas y quieres enviar el mismo contenido a todos los usuarios. Sin embargo pueden tener un coste de mantenimiento significante a medida que es número de páginas se hace grande.

+
+ +

Recapitulemos cómo funciona ésto, mirando otra vez el diagrama de la arquitectura de un sitio estático que vimos en el anterior artículo.

+ +

A simplified diagram of a static web server.

+ +

Cuando un usuario quiere navegar a una página, el explorador envía una petición HTTP GET especificando la URL de su página HTML. El servidor recupera el documento solicitado de su sistema de ficheros y devuelve una respuesta HTTP conteniendo el documento y un código de estado de respuesta HTTP "200 OK" (indicando éxito). El servidor podría devolver un código de estado diferente, por ejemplo "404 Not Found" si el fichero no está presente en el servidor, o "301 Moved Permanently" si el fichero existe pero ha sido redirigido a una localización diferente.

+ +

El servidor de un sitio estático sólo tendrá que procesar peticiones GET, ya que el servidor no almacena ningún dato modificable. Tampoco cambia sus respuestas basádonse en los datos de la petición HTTP (ej. parámetros URL o cookies). 

+ +

Entendiendo cómo funcionan los sitios estáticos es útil sin embargo cuando se aprende programación de lado servidor, porque los sitios dinámicos gestionan las peticiones de ficheros estáticos (CSS, JavaScript, imágenes estáticas, etc.) exactamente de la misma forma.

+ +

Sitios dinámicos

+ +

Un sitio dinámico es aquél que puede generar y devolver contenido basándose en la URL y los datos específicos de la petición (en vez de devolver siempre para una URL en particular el mismo fichero especificado en el código de forma fija). Usando el ejemplo de un sitio de productos, el servidor almacenaría "datos" del producto en una base de datos en vez de ficheros HTML individuales. Cuando se reciba una petición HTTP GET para un producto, el servidor determina el ID del mismo, extrae los datos de la base y construye la página HTML de la respuesta insertando los datos dentro de la plantilla HTML. Esto tiene una ventaja primordial sobre un sitio estático: 

+ +

Usar una base de datos permite que la información del producto se almacene de forma eficiente y que se pueda ampliar, modificar y buscar fácilmente.

+ +

Usar plantillas HTML hace que sea muy fácil cambiar la estructura HTML, porque sólo se necesita hacer en un sólo lugar, en una única plantilla y no a lo largo de miles de páginas estáticas.

+ +

Anatomía de una petición dinámica

+ +

Esta sección proporciona una visión general paso a paso de un ciclo de petición y respuesta HTTP "dinámicas", construyendo con más detalle lo que vimos en el último artículo. Para "hacer cosas reales" usaremos el contexto del sitio web de un manager de equipos deportivos donde un entrenador puede seleccionar el nombre y tamaño de su equipo en un formulario HTML y obtener de vuelta una sugerencia de "mejor alineación" para el próximo partido. 

+ +

El diagrama de abajo muestra los elementos principales del sitio web del "entrenador del equipo", junto con etiquetas numeradas de la secuencia de operaciones cuando el entrenador accede a su lista de "mejor equipo". Las partes del sitio que lo hacen dinámico son las Aplicaciones Web (que es como llamaremos al código del lado servidor que procesa las peticiones HTTP y devuelve respuestas HTTP), la Base de Datos, que contiene la información sobre los jugadores, equipos, entrenadores y sus relaciones, y las Plantillas HTML.

+ +

This is a diagram of a simple web server with step numbers for each of step of the client-server interaction.

+ +

Después de que el entrenador envíe el formulario con el nombre del equipo y el número de jugadores, la secuencia de operaciones es la siguiente:

+ +
    +
  1. El explorador web crea una petición HTTP GET al servidor usando la URL base del recurso (/best) y codifica el equipo y número de jugadores como parámetros URL (ej. /best?team=my_team_name&show=11) o formando parte de un patrón URL (ej. /best/my_team_name/11/). Se usa una petición GET porque la petición sólo recoge datos (no modifica ninguno).
    2. +
  2. El Servidor Web detecta que la petición es "dinámica" y la reenvía a la Aplicación para que la procese (el servidor web determina como manejar diferentes URLs basándose en reglas de emparejamiento de patrones definidas en su configuración).
    3. +
  3. La Aplicación Web identifica que la intención de la petición es obtener la "lista del mejor equipo" basándose en la URL (/best/) y encuentra el nombre del equipo y el número de jugadores requeridos a partir de la URL. La Aplicación Web obtiene entonces la información solicitada de la base de datos (usando parámetros "internos" adicionales que definen qué jugadores son los "mejores", y posiblemente también obteniendo la identidad del entrenador que ha iniciado sesión a partir de un cookie del lado cliente).
    4. +
  4. La Aplicación Web crea dinámicamente una página HTML por medio de colocar los datos (de la base) en marcadores de posición dentro de la plantilla HTML.
    5. +
  5. La Aplicación Web devuelve el HTML generado al explorador web (via el Servidor Web), junto con un código de estado HTTP de 200 ("éxito"). Si algo impide que se pueda devolver el HTML entonces la Aplicación Web devolverá otro código — por ejemplo "404" para indicar que el equipo no existe.
    6. +
  6. El Explorador Web comenzará a continuación a procesar el HTML devuelto, enviando peticiones separadas para obtener cualquier otro fichero CSS o JavaScript que sea referenciado (ver paso 7).
    7. +
  7. El Servidor Web carga ficheros estáticos del sistema de ficheros y los devuelve al explorador directamente (de nuevo, la gestión correcta de los ficheros está basada en las reglas de configuración y de emparejamiento de patrones URL).
    8. +
+ +

La operación de actualizar un registro de la base de datos se gestionaría de forma similar, excepto que, como para cualquier actualización de la base de datos, la petición HTTP desde el explorador debería ser codificada como petición POST. 

+ +

Realización de otros trabajos

+ +

La misión de una Aplicación Web es recibir peticiones HTTP y devolver respuestas HTTP. Mientras que interactuar con la base datos para obtener o actualizar información son tareas muy comunes, el código puede hacer otras cosas al mismo tiempo, o no interactuar con una base de datos en absoluto.

+ +

Un buen ejemplo de una tarea adicional que una  Aplicación Web podría realizar sería el envío de un correo electrónico a los usuarios para confirmar su registro en el sitio. El sito podría también realizar logging u otras operaciones.

+ +

Devolución de alguna otra cosa distinta a HTML

+ +

El código lado servidor de un sitio web no tiene que devolver fragmentos/ficheros HTML en la respuesta. Puede en vez de eso crear dinámicamente y devolver otros tipos de ficheros (texto, PDF, CSV, etc.) o incluso datos (jSON, XML, etc.).

+ +

La idea de devolver datos a un explorador web de forma que pueda actualizar su propio contenido dinámicamente ({{glossary("AJAX")}}) ha estado dando vueltas durante bastante tiempo. Más recientemente han llegado a ser muy populares las "apps de una sola página", donde el sitio web entero está escrito con un solo fichero HTML que es actualizado dinámicamente cuando se necesita. Los sitios web creados usando este estilo de aplicación transfieren una gran parte del coste computacional desde el servidor al explorador web, y pueden dar como resultado sitios web que se comportan mucho más como aplicaciones nativas (con una respuesta rápida "highly responsive", etc.).

+ +

Los frameworks Web simplifican la programación de lado servidor

+ +

Los frameworks de lado servidor hacen mucho más fácil escribir código para gestionar las operaciones descritas más arriba.

+ +

Una de las operaciones más importantes que realizan es proporcionar mecanismos simples para mapear las URLs de diferentes recursos/páginas a funciones para su gestión específicas. Esto hace más fácil mantener separado el código asociado con cada recurso. Esto tiene también beneficios en términos de mantenimiento, ya que puedes cambiar la URL usada para entregar una característica particular en un sitio, sin tener que cambiar la función de gestión.

+ +

Por ejemplo, considera el siguiente código Django (Python) que mapea dos patrones URL a dos funciones de visualización. El primer patrón asegura que una petición HTTP con una URL de  /best sea pasada a la función llamada index() en el módulo views. En cambio, una petición que tiene el patrón "/best/junior", se pasará a la función de visualización junior().

+ +
# file: best/urls.py
+#
+
+from django.conf.urls import url
+
+from . import views
+
+urlpatterns = [
+    # example: /best/
+    url(r'^$', views.index),
+    # example: /best/junior/
+    url(r'^junior/$', views.junior),
+]
+ +
+

Nota: El primer parámetro en las funciones url() puede parecer un poco extraño (ej. r'^junior/$') porque usan una técnica de emparejamiento de patrones llamada "expresiones regulares" ("regular expressions", RegEx, o RE). No necesitas saber cómo funcionan las expresiones regulares en este momento, tan sólo que nos permiten emparejar patrones en el URL (en vez de los valores insertados en el código de forma fija que veíamos más arriba) y los usan como parámetros en nuestras funciones de visualización. Como ejemplo, una RegEx simple podría decir "empareja una simple letra mayúscula, seguida de entre 4 y 7 letras minúsculas."

+
+ +

El framework web también hace fácil a una función de visualización extraer información de la base de datos. La estructura de nuestros datos está definida en modelos, que son las clases Python que definen los campos que serán almacenados en la base de datos subyacente. Si tenemos un modelo llamado Team con un campo de "team_type" podemos usar un query de sintaxis simple para recuperar todos los equipos que son de un tipo particular.

+ +

Los ejemplos de abajo recuperan una lista de todos los equipos que tienen el team_type de "junior" exacto (teniendo en cuenta la capitalización, mayúsculas o minúsculas) — nota de formato: el nombre del campo (team_type) seguido de un guión bajo doble, y a continuación el tipo de emparejamiento a usar (en este caso exact). Hay muchos otros tipos de emparejamiento y podemos encadenarlos fácilmente. Podemos controlar el orden y número de resultados que se devuelven. 

+ +
#best/views.py
+
+from django.shortcuts import render
+
+from .models import Team
+
+
+def junior(request):
+    list_teams = Team.objects.filter(team_type__exact="junior")
+    context = {'list': list_teams}
+    return render(request, 'best/index.html', context)
+
+ +

Después de que la función junior() obtenga la lista de equipos junior, llama a la función render(), pasándole el HttpRequest original,  una plantilla HTML, y un objeto "contexto" que define la información a ser incluida en la plantilla. La función render() es una función de conveniencia que genera HTML usando un contexto y una plantilla HTML, y devuelve un objeto HttpResponse.

+ +

Obviamente los frameworks web pueden ayudarte con un monton de otras tareas. Debatiremos sobre un montón más de beneficios y opciones de frameworks web en el próximo artículo.

+ +

Sumario

+ +

En este punto deberías tener una buena visión general de las operaciones que el código de lado servidor tiene que realizar, y conocer algunas de las formas en que un framework web de lado servidor las puede hacer más fáciles.

+ +

En el módulo siguiente te ayudaremos a elegir el mejor Framework Web para tu primer sitio.

+ +

{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

+ +

 

+ +

En este módulo

+ + + +

 

diff --git a/files/es/learn/server-side/first_steps/index.html b/files/es/learn/server-side/first_steps/index.html new file mode 100644 index 0000000000..19a5454b4b --- /dev/null +++ b/files/es/learn/server-side/first_steps/index.html @@ -0,0 +1,47 @@ +--- +title: Primeros Pasos en la Programación de Lado-Servidor +slug: Learn/Server-side/Primeros_pasos +tags: + - Aprendizaje + - Aterrizaje + - Codificación de scripts + - Guía + - Principiante + - Programación lado servidor + - introducción +translation_of: Learn/Server-side/First_steps +--- +
{{LearnSidebar}}
+ +

En este, nuestro módulo sobre programación de Lado-Servidor, contestaremos a unas pocas preguntas fundamentales - "¿Qué es?", "¿En qué se diferencia de la programación de Lado-Cliente?" y "¿Porqué es tan útil?". Proporcionaremos un vistazo de algunos de los "web-frameworks" de lado-servidor más populares, junto con indicaciones de cómo seleccionar el framework más adecuado para crear tu primer sitio. Finalmente proporcionaremos un artículo introductorio de alto nivel sobre seguridad en el servidor web. 

+ +

Prerequisitos

+ +

Antes de comenzar este módulo no necesitas tener ningún conocimiento de programación de sitios web de lado-servidor, y tampoco de ningún otro tipo de programación.

+ +

Necesitarás entender "cómo funciona la web". Te recomendamos que leas primero los siguientes temas:

+ + + +

Con este conocimiento básico estarás listo para recorrer el camino a través de los módulos de esta sección.

+ +

Guías

+ +
+
Introducción al lado servidor
+
¡Bienvenidos al curso MDN de programación para principiantes de lado servidor! En este primer artículo enfocamos la programación de Lado-Servidor desde un nivel alto, respondiendo a preguntas tales como "¿qué es?", "¿en qué se diferencia de la programación de Lado-Cliente?" y "¿porqué es tan útil?". Después de leer este artículo entenderás el poder adicional para los sitios web disponible a través de la codificación lado-servidor.
+
Visión general Cliente-Servidor
+
Ahora que conoces el propósito y beneficios potenciales de la programación lado-servidor examinaremos en detalle qué pasa cuando un servidor recibe una "petición dinámica" desde un explorador web. Como el código de lado-servidor de la mayoría de sitios web gestiona las peticiones y las respuestas de forma similar, ésto te ayudará entender qué necesitas hacer cuando escribes tu propio código.
+
Web frameworks de lado-servidor
+
El anterior artículo te mostró lo que necesita una aplicación web de lado servidor para responder a las peticiones de un explorador web. Ahora te mostraremos cómo los web frameworks pueden simplificar estas tareas y ayudarte a seleccionar el framework correcto para tu primera aplicación web de lado servidor.
+
Seguridad de Sitios Web
+
La seguridad de los sitios web requiere vigilancia en todos los aspectos del diseño y uso del sitio . Este artículo introductorio no te convertirá en un gurú de la seguridad de sitios web, pero te ayudará a entender los primeros pasos importantes que deber dar para robustecer tu aplicación web contra las amenazas más comunes.
+
+ +

Evaluaciones

+ +

Este módulo "visión general" no hace ninguna evaluación ya que no te hemos enseñado ningún código todavía. Esperamos que en este punto tengas una comprensión de qué clase de funcionalidad puedes distribuir usando programación de lado servidor y habrás tomado una decisión sobre el web framework de lado servidor que usarás para crear tu primer sitio. 

diff --git a/files/es/learn/server-side/first_steps/introduction/index.html b/files/es/learn/server-side/first_steps/introduction/index.html new file mode 100644 index 0000000000..0b0d2da59e --- /dev/null +++ b/files/es/learn/server-side/first_steps/introduction/index.html @@ -0,0 +1,192 @@ +--- +title: Introducción al lado servidor +slug: Learn/Server-side/Primeros_pasos/Introducción +tags: + - Aprendizaje + - Codificación de scripts + - Guía + - Principiante + - Programación lado servidor + - Servidor + - introducción +translation_of: Learn/Server-side/First_steps/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
+ +

¡Bienvenidos al curso MDN de programación para principiantes de lado servidor! En este primer artículo enfocamos la programación de Lado-Servidor desde un nivel alto, respondiendo a preguntas tales como "¿qué es?", "¿en qué se diferencia de la programación de Lado-Cliente?" y "¿porqué es tan útil?". Después de leer este artículo entenderás el poder adicional para los sitios web disponible a través de la codificación lado-servidor.

+ + + + + + + + + + + + +
Prerequisitos:Nociones básicas de computación. Entender lo que es un servidor web.
Objetivo:Familiarizarse con lo que es la programación de lado servidor, qué puede hacer y en qué se diferencia de la programación de lado cliente.
+ +

La mayoría de los grandes sitios web usan código de lado servidor para presentar, cuando se necesitan, diferentes datos, generalmente extraidos de una base de datos almacenada en un servidor y enviada al cliente para ser presentada mediante algún código (ej, HTML y JavaScript). Quizá el beneficio más significativo de la codificación de lado servidor es que te permite confeccionar el contenido del sitio web para usuarios individuales. Los sitios dinámicos pueden resaltar contenido que es más relevante basándose en las preferencias del usuario y sus hábitos. Puede hacer también que los sitios sean más fáciles de usar al almacenar las preferencias personales y la información - por ejemplo reusando los detalles de la tarjeta de crédito guardados para agilizar los pagos siguientes. Puede incluso permitir la interacción con los usuarios fuera del sitio, enviando notificaciones y actualizaciones via email o a traves de otros canales. Todas estas capacidades permite un mayor compromiso con los usuarios. 

+ +

En el mundo moderno del desarrollo web, el aprendizaje sobre desarrollo de lado servidor es altamente recomendable.

+ +

¿Qué es la programación de sitios web de lado servidor?

+ +

Los exploradores web se comunican con los servidores web usando el Protocolo de Transporte de Hyper Texto (HyperText Transport Protocol ({{glossary("HTTP")}}). Cuando pinchas en un enlace en una página web, envías un formulario o ejecutas una búsqueda, se envía una peticion HTTP desde tu explorador web al servidor web de destino. La petición incluye un URL que identifica el recurso afectado, un método que define la acción requerida (por ejemplo, obtener, borrar o publicar el recurso), y puede incluir información adicional codificada en parámetros en el URL (los pares campo-valor enviados en una cadena de consulta (query string), como datos POST (datos enviados mediate el método POST de HTTP,  HTTP POST method), o en {{glossary("Cookie", "associated cookies")}}.

+ +

Los servidores web esperan los mensajes de petición de los clientes, los procesan cuando llegan y responden al explorador web con un mensaje de respuesta HTTP. La repuesta contiene una línea de estado indicando si la petición ha tenido éxito o no (ej, "HTTP/1.1 200 OK" en caso de éxito). El cuerpo de una respuesta exitosa a una petición podría contener el resurso solicitado (ej, una nueva página HTML, o una imagen, etc...), que el explorador web podría presetar en pantalla.

+ +

Sitios Estáticos

+ +

El diagrama de abajo muestra una arquitectura de servidor web básica correspondiente a un sitio estático (un sitio estático es aquél que devuelve desde el servidor el mismo contenido insertado en el código "hard coded" siempre que se solicita un recurso en particular). Cuando un usuario quiere navegar a una página, el explorador envía una petición HTTP "GET" especificando su URL. El servidor recupera de su sistema de ficheros el documento solicitado y devuelve una respuesta HTTP que contiene el documento y un estado de éxito "success status" (normalmente 200 OK). Si el fichero no puede ser recuperado por alguna razón, se devuelve un estado de error (ver respuestas de error del cliente and respuestas de error del servidor).

+ +

A simplified diagram of a static web server.

+ +

Sitios Dinámicos

+ +

Un sitio dinámico es aquél en que algun contenido de la respuesta está generado dinámicamente sólo cuando se necesita. En un sitio web dinámico las páginas HTML se crean normalmente insertando datos desde una base en variables dentro de plantillas HTML (esta es una forma mucho más eficiente de almacenar gran cantidad de contenido que la que usan los sitios web estáticos). Un sitio dinámico puede devolver datos diferentes para un URL basados en la información proporcionada por el usuario o sus preferencias almacenadas y puede realizar otras operaciones como parte de la devolución de respuesta (ej, enviar notificaciones).

+ +

La mayor parte del código para soportar un sitio web dinámico debe correr en el servidor. La creación de este código se conoce como "programación de lado-servidor" (o algunas veces "back-end scripting").

+ +

El diagrama de abajo muestra una arquitectura simple para unsitio web dinámico. Como en el diagrama previo, los exploradores web envían peticiones HTTP al servidor, el servidor procesa a continuación las peticiones y devuelve las respuestas HTTP apropiadas. Las peticiones de recursos estáticos son gestionadas de la misma manera que para los sitios estáticos (los recursos estáticos son cualquier fichero que no cambia - generalmente: CSS, JavaScript, Imágenes, ficheros PDF creados previamente, etc...)

+ +

A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview.

+ +

Las peticiones de recursos dinámicos, por el contrario, son reenviadas (2) al código del lado-servidor (mostrado en el diagrama como Web Application). Para las "peticiones dinámicas" el servidor interpreta la petición, lee de la base de datos la información requerida (3), combina los datos recuperados con las plantillas HTML (4), y envía de vuelta una respuesta que contiene el HTML generado (5,6). 

+ +
+

¿Son iguales la programación del lado-servidor y lado-cliente?

+
+ +

Prestemos ahora nuestra atención al código involucrado en la programación de lado-servidor y lado-cliente. En cada caso, el código es significativamente diferente:

+ + + +

El código que se ejecuta en el explorador se conoce como código de lado-cliente, y su principal preocupación es la mejora de la apariencia y el comportamiento de una página web entregada. Esto incluye la selección y estilo de los componentes UI, la creación de layouts, navegación, validación de formularios, etc. Por otro lado, la programación de sitios web de lado servidor en su mayor parte implica la elección de qué contenido se ha de devolver al explorador como respuesta a sus peticiones. El código de lado-servidor gestiona tareas como la validación de los datos enviados y las peticiones, usando bases de datos para almacenar y recuperar datos, y enviando los datos correctos al cliente según se requiera.

+ +

El código del lado cliente está escrito usando HTML, CSS, y JavaScript — es ejecutado dentro del explorador web y tiene poco o ningún acceso al sistema operativo subyacente (incluyendo un acceso limitado al sistema de ficheros).

+ +

Los desarrolladores web no pueden controlar qué explorador web usará cada usuario para visualizar un sitio web — los exploradores web proporcionan niveles de compatibilidad inconsistentes con las características de codificación lado cliente, y parte del reto de la programación de lado cliente es gestionar con dignidad las diferencias de soporte entre exploradores.

+ +
El código del lado servidor puede escribirse en cualquier número de lenguajes de programación — ejemplos de lenguajes de programación populares incluyen PHP, Python, Ruby, C# y NodeJS(JavaScript). El código del lado servidor tiene acceso completo al sistema operativo del servidor y el desarrollador puede elegir qué lenguaje de programación (y qué versión específica) desea usar.
+ +
Los desarrolladores generalmente escriben su código usando web frameworks. Los web framworks son colecciones de funciones, objetos, reglas y otras construcciones de código diseñadas para resolver problemas comunes, acelerar el desarrollo y simplificar los diferentes tipos de tareas que se han de abordar en un dominio en particular.
+ +
De nuevo, mientras que, tanto el código lado cliente y el lado servidor usan frameworks, los dominios son muy diferentes, y por lo tanto también lo son los frameworks. Los frameworks del lado cliente simplifican los diseños y las tareas de presentación mientras que los del lado servidor proporcionan un montón de funcionalidades "comunes" que tendría que haber implementado uno mismo (ej, soporte para las sesiones, soporte para los usuarios y autenticación, acceso fácil a la base de datos, librerías de plantillas, etc...).
+ +
+

Nota: Los frameworks del lado cliente se usan con frecuencia para acelerar el desarrollo del código del lado cliente, pero también se puede elegir escribir todo el código a mano; de hecho, escribir el código a mano puede ser más rápido y más eficiente si sólo se necesita una UI para sitio web pequeña y simple. Por contra, casi nunca se consideraría escribir el componente del lado servidor de una aplicación web ("web app") sin un framework — implementar una característica vital como un servidor HTTP es realmente difícil de hacer de la nada en un lenguaje como, por ejemplo, Python, pero los  web frameworks de Python como Django proporcionan uno  listo para usar, junto con otras herramientas muy útiles.

+
+ +

¿Qué se puede hacer en el lado-servidor?

+ +

La programación del lado-servidor es muy útil porque nos permite distribuir eficientemente información a medida para usuarios individuales y por lo tanto crear una experiencia de usuario mucho mejor.

+ +

Compañías como Amazon utilizan la programación del lado-servidor para construir resultados de búsquedas de productos, hacer sugerencias sobre productos escogidos basados en las preferencias del cliente y sus hábitos de compra previos, simplificar las adquisiciones, etc. Los bancos usan la programación del lado-servidor para almacenar la información sobre las cuentas y permitir ver y realizar transacciones sólo a los usuarios autorizados. Otros servicios como Facebook, Twitter, Instagram y Wikipedia usan la programación de lado-servidor para destacar, compartir y controlar el acceso al contenido interesante.

+ +

Algunos de los usos y beneficios comunes de la programación de lado-servidor se lista debajo. Notarás que hay algo de solapamiento.

+ +

Almacenaje y distribución eficiente de información

+ +

Imagina cuántos productos están disponibles en Amazon, e imagina cuántas entradas se han escrito en Facebook. Crear una página estática separada para cada producto o entrada sería completamente ineficiente.

+ +

La programación de lado-servidor nos permite por el contrario almacenar la información en una base de datos y construir dinámicamente y devolver ficheros HTML y de otros tipos (ej, PDFs, imágenes, etc.). También es posible devolver simplemente datos ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) para presentar mediante los web frameworks adecuados del lado-cliente (esto reduce la carga de procesamiento del servidor y la cantidad de datos que se necesitan enviar).

+ +

El servidor no se limita a enviar información de las bases de datos, y podría además devolver el resultado de herramientas de software o datos de servicios de comunicación. El contenido puede incluso ser dirigido por el tipo de dispositivo cliente que lo está recibiendo.

+ +

Debido a que la información está en una base de datos, puede también ser compartida y actualizada con otros sistemas de negocio (por ejemplo, cuando se venden los productos online o en una tienda, la tienda debería actualizar su base de datos de inventario.

+ +
+

Nota: Tu imaginación no tiene que trabajar duro para ver el beneficio de la codificación de lado-servidor para el almacenaje y distribución de información:

+ +
    +
  1. Vete a Amazon o a cualquier otro sitio de comercio electrónico "e-commerce".
    2. +
  2. Busca por un número de palabras clave y nota como la estructura de la página no cambia, incluso aunque cambien los resultados. 
    3. +
  3. Abre dos o tres productos diferentes. Fíjate de nuevo como tienen una estructura y diseño común, pero el contenido para los diferentes productos ha sido extraido de la base de datos.
    4. +
+ +

Para un término de búsqueda común (digamos "pez") puedes ver literalmente millones de valores retornados. Usar una base de datos permite que éstos sean almacenados y compartidos de forma eficiente, y permite que la presentación de la información esté controlada en un solo sitio.

+
+ +

Experiencia de usuario personalizada

+ +

Los servidores pueden almacenar y usar la información acerca de los clientes para proporcionar una experiencia de usuario conveniente y dirigida. Por ejemplo, muchos usuarios almacenan tarjetas de crédito de forma que los detalles no tienen que ser introducidos de nuevo. Sitios como Google Maps usan la localización de tu casa y la actual para proporcionar una información sobre la ruta a seguir y resaltar los negocios locales en los resultados de búsqueda.

+ +

Un análisis profundo de los hábitos del usuario se puede usar para anticipar sus intereses y personalizar las respuestas y notificaciones futuras, proporcionando, por ejemplo, una lista de las localizaciones visitadas o populares que querrías buscar en un mapa.

+ +
+

Nota: Vete a Google Maps como usuario anónimo, selecciona el botón Direcciones, e introduce los puntos de partida y destino de un viaje. Ahora inicia sesión en el sistema con tu cuenta de Google, si tienes una (en el panel de abajo aparece información acerca de este proceso donde seleccionas direcciones). El sitio web te permitirá ahora seleccionar las localizaciones de casa y trabajo como puntos de partida y destino (o almacenar estos detalles si no lo has hecho así).

+
+ +

Acceso controlado al contenido 

+ +

La programación de lado-servidor permite a los sitios restringir el acceso a usuarios autorizados y servir sólo la información que se le permite ver al usuario.

+ +

Ejemplos del mundo real incluyen:

+ + + +
+

Nota: Considera otros ejemplos reales donde el acceso al contenido está controlado. Por ejemplo, ¿qué puedes ver si vas al sitio online de tu banco? Inicia sesión con tu cuenta — ¿qué información adicional puedes ver y modificar? ¿Qué información puedes ver y sólo el banco puede cambiar?

+
+ +

Almacenar información de sesión/estado

+ +

La programación de lado-servidor permite a los desarrolladores hacer uso de las sesiones — es básicamente un mecanismo que permite al servidor almacenar información sobre el usuario actual del sitio u enviar diferentes respuestas basadas en esa información. Esto permite, por ejemplo, que un sitio sepa que un usuario ha iniciado sesión previamente y presente enlaces a sus correos, o a su historial de órdenes, o quizá guardar el estado de un simple juego de forma que el usuario pueda volver al sitio de nuevo y retomar el juego donde lo dejó.

+ +
+

Nota: Visita el sitio de un periódico que tenga un modelo de subscripción y abre un puñado de pestañas (ej, The Age). Continua visitando el sitio durante unos pocos días/horas. En algún momento serás finalmente redirigido a las páginas que explican cómo suscribirte y se te impedirá el acceso a los artículos. Esta información es un ejemplo de información de sesión almacenada en cookies.

+
+ +

Notificaciones y comunicación

+ +

Los servidores pueden enviar notificaciones de tipo general o específicas de usuario a través del propio sitio web o vía correo electrónico, SMS, mensajería instanténea, conversaciones de video u otros servicios de comunicación.

+ +

Unos pocos ejemplos incluyen:

+ + + +
+

Nota: El tipo de notificación más común es una "confirmación de registro". Elige uno cualquiera de los grandes sitios en que estés interesado (Google, Amazon, Instagram, etc.) y crea una cuenta nueva usando tu dirección de correo. En breve recibirás un email de confirmación de registro, o solicitando un acuse de recibo para activar la cuenta.

+
+ +

Análisis de datos

+ +

Un sitio web puede recolectar un montón de datos acerca de los usuarios: qué es lo que buscan, qué compran, qué recomiendan, cuánto tiempo permanecen en cada página. La programación de lado-servidor puede utilizarse para refinar las respuestas basándose en el análisis de estos datos.

+ +

Por ejemplo, Amazon y Google anuncian ambos productos basados en búsquedas previas (y adquisiciones).

+ +
+

Nota: Si eres usuario de Facebook vete a tu muro y hecha un ojo a la ristra de entradas. Fíjate como algunas de las entradas no están en orden numérico - en particular las entradas con más "me-gusta" están con frecuencia en lugares más altos de la lista que las entradas más recientes. Echa un ojo también a qué clase de anuncios te están mostrando — podrías ver anuncios de cosas que has mirado en otros sitios. El algoritmo de Facebook para resaltar contenido y anuncios puede ser un poco misterioso, pero está claro que lo que hace depende de lo que te gusta y de tus hábitos de visualización!

+
+ +

Sumario

+ +

Felicidades, has alcanzado el final de primer artículo sobre programación de lado-servidor. 

+ +

Ahora ya has aprendido que el código de lado-servidor se ejecuta en un servidor web y que su papel principal es controlar qué información se envía al usuario (mientras que el código de lado-cliente gestiona principalmente la estructura y presentación  de esos datos al usuario).

+ +

También deberías comprender que es útil porque nos permite crear sitios web que distribuyen de forma eficiente información seleccionada dirigida a usuarios individuales y tener una buena idea de algunas de las cosas que podrías ser capaz de hacer cuando seas un programador de lado-servidor.

+ +

Finalmente, deberías comprender que el código de lado-servidor se puede escribir en un gran número de lenguajes de programación y que deberías usar un web framework para hacer más fácil el proceso completo.

+ +

En un artículo futuro te ayudaremos a escoger el mejor web framework para tu primer sitio; Aunque a continuación te llevaremos a través de las principales interacciones cliente-servidor en un poco más de detalle.

+ +

{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}

diff --git a/files/es/learn/server-side/first_steps/web_frameworks/index.html b/files/es/learn/server-side/first_steps/web_frameworks/index.html new file mode 100644 index 0000000000..8c381a772e --- /dev/null +++ b/files/es/learn/server-side/first_steps/web_frameworks/index.html @@ -0,0 +1,306 @@ +--- +title: Frameworks Web de lado servidor +slug: Learn/Server-side/Primeros_pasos/Web_frameworks +tags: + - Aprendizaje + - Codificación de scripts + - Frameworks web + - Guía + - Principiante + - Programación lado servidor + - Servidor + - introducción +translation_of: Learn/Server-side/First_steps/Web_frameworks +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}
+ +

El artículo anterior te mostró que pinta tiene la comunicación entre los clientes web y los servidores, la naturaleza de las peticiones y respuestas HTTP, y lo que necesita hacer una aplicación web de lado servidor para responder a las peticiones de un explorador web. Con este conocimiento en nuestra mochila, es hora de explorar cómo los frameworks web pueden simplificar estas tareas, y darte una idea de cómo escogerías un framework para tu primera aplicación web de lado servidor.

+ + + + + + + + + + + + +
Prerequisitos: +

Conocimientos de computación básicos. Comprensión de alto nivel de cómo gestiona y responde a las peticiones HTTP el código de lado servidor (ver Visión general Cliente-Servidor).

+
Objetivo: +

Entender cómo los frameworks web pueden simplificar el desarrollo/mantenimiento de código de lado servidor y conseguir que los lectores piensen sobre la elección del framework para su propio desarrollo.

+
+ +

Las siguientes secciones ilustran algunos puntos usando fragmentos de código tomados de frameworks web reales. No te preocupes si no todo tiene sentido ahora; te pondremos a trabajar sobre el código en nuestros módulos de framework específicos.

+ +

Visión general

+ +

Los frameworks de lado servidor (es decir, "los frameworks de aplicaciones web") son frameworks software que hacen más fácil escribir, mantener y escalar aplicaciones web. Proporcionan herramientas y bibliotecas que simplifican tareas comunes de desarrollo web, incluyendo enrutado de URLs a los manejadores apropiados, interactuación con bases de datos, soporte de sesiones y autorizaciones de usuario, formateado de la salida (ej, HTML, JSON, XML), y mejora de la seguridad contra los ataques web.

+ +

La sección siguiente proporciona un poco más detalle sobre cómo los frameworks web pueden facilitar el desarrollo de aplicaciones web. Explicaremos a continuación algunos de los criterios que puedes usar para elegir un framework web, y luego hacer una lista de algunas de tus opciones.

+ +

¿Qué puede hacer por tí un framework web?

+ +

Los frameworks web proporcionan herramientas y bibliotecas para simplificar operaciones comunes de desarrollo web. No tienes que usar un framework web de lado servidor, pero se recomienda encarecidamente — te hará la vida mucho más fácil.

+ +

Esta sección debate algo de la funcionalidad que proporcionan con frecuencia los frameworks web (!no todo framework proporcionará necesariamente todas estas caracteríticas!)

+ +

Trabajar directamente con peticiones y respuestas HTTP

+ +

Como vimos en el último artículo, los servidores web y los exploradores se comunican vía el protocolo HTTP — los servidores esperan las peticiones HTTP del explorador y devuelven información en respuestas HTTP. Los frameworks web te permiten escribir sintaxis simplificada que generará el código de lado servidor para trabajar con estas peticiones y respuestas. Esto significa que tendrás un trabajo más fácil, interacción más fácil, código de más alto nivel en vez de primitivas de red de bajo nivel.

+ +

El ejemplo de más abajo muestra cómo funciona ésto en el framework web Django (Python). Cada función de visualización "view" (un manejador de peticiones) recibe un objeto HttpRequest que contiene información de petición, y se le pide devolver un objeto HttpResponse con la salida formateada (en este caso una cadena de texto).

+ +
# Django view function
+from django.http import HttpResponse
+
+def index(request):
+    # Get an HttpRequest (request)
+    # perform operations using information from the request.
+    # Return HttpResponse
+    return HttpResponse('Output string to return')
+
+ +

Enrutado de peticiones al manejador adecuado

+ +

La mayoría de sitios proporcionan un gran número de recursos diferentes, accesibles a través de distintas URLs. La gestión de todo esto en una sola función sería difiicil de mantener, de manera que los frameworks web proporcionan mecanismos simples para mapear patrones URL a funciones de gestión específicas. Esta aproximación tiene también beneficios en términos de mantenimiento, porque puedes cambiar el URL que se usa para entregar una característica en particular sin tener que cambiar el código subyacente.

+ +

Diferentes frameworks usan diferentes mencanismos para el mapeo. Por ejemplo, el framework web Flask (Python) añade rutas a las funciones de visualización usando un "decorador".

+ +
@app.route("/")
+def hello():
+    return "Hello World!"
+ +

Por el contrario Django espera que los desarrolladores definan una lista de mapeos URL entre un patrón URL y una función de visualización.

+ +
urlpatterns = [
+    url(r'^$', views.index),
+    # example: /best/myteamname/5/
+    url(r'^(?P<team_name>\w.+?)/(?P<team_number>[0-9]+)/$', views.best),
+]
+
+ +

Fácil acceso a los datos en la petición

+ +

Los datos pueden codificarse en una petición HTTP de muchas maneras. Una petición GET para recuperar ficheros o datos de un servidor puede codificar los datos que se necesitan en parámetros URL o dentro de una estructura URL. Una petición POST para actualizar un recurso en el servidor puede en cambio incluir la información de actualización como "datos POST" dentro del cuerpo de la petición. La petición HTTP puede también incluir información sobre la sesión o usuario actual en un cookie de lado cliente.

+ +

Los frameworks web proporcionan mecanismos apropiados del lenguaje de programación para acceder a esta información. Por ejemplo, el objeto HttpRequest  que pasa Django a toda función de visualización contiene métodos y propiedades para acceder a la URL de destino, el tipo de petición (ej. HTTP GET), parámetros GET  o POST, cookie y datos de session, etc. Django puede también pasar información codificada en la estructura de la URL definiendo "patrones de captura" en el mapeador URL (mira el último fragmento de código de la sección de arriba).

+ +

Abstraer y simplificar el acceso a bases de datos

+ +

Los sitios web utilizan bases de datos para almacenar información tanto para ser compartida con los usuarios como sobre los propios usuarios. Los frameworks web proporcionan frecuentemente una capa de base de datos que abstrae las operaciones de lectura, escritura, consulta y borrado de la base. Nos referimos a esta capa de abstracción como Mapeador de Objetos Relacionados (Object-Relational Mapper, ORM).

+ +

Usar un ORM tiene dos beneficios:

+ + + +

Por ejemplo, el framework web de Django proporciona un ORM, y utiliza la referencia del objeto usado para definir la estructura de un registro similar al modelo. El modelo especifica los tipos de campos que se almacenarán, lo que puede proporcionar una validación a nivel de campo sobre qué información se puede guardar (ej. un campo de email sólo permitiría direcciones válidas de correo electrónico). Las definiciones de campos pueden también especificar su tamaño máximo, etiquetas de texto para los formularios, etc. El modelo no establece ninguna información sobre la base de datos subyacente ya que ese es un ajuste de configuración que se puede cambiar de forma separada de nuestro código.

+ +

El primer fragmento de código más abajo muestra un modelo de Django muy simple para un objeto Team. Éste almacena el nombre y nivel del equipo como campos de caracteres y especifica el número máximo de éstos que pueden almacenarse en cada registro. El team_level es un campo de selección, de manera que proporcionamos un mapeo entre las opciones a mostrar en pantalla y los datos a almacenar, junto con un valor por defecto.

+ +
#best/models.py
+
+from django.db import models
+
+class Team(models.Model):
+    team_name = models.CharField(max_length=40)
+
+    TEAM_LEVELS = (
+        ('U09', 'Under 09s'),
+        ('U10', 'Under 10s'),
+        ('U11, 'Under 11s'),
+        ...  #list our other teams
+    )
+    team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
+
+ +

El modelo de Django proporciona una API de consulta simple para buscar en la base de datos. Ésta puede comprobar coincidencias contra un gran número de campos al mismo tiempo usando diferentes criterios (ej. exacto, insensible a las mayúsculas, mayor que, etc.), y puede soportar sentencias complejas (por ejemplo, puedes especificar una búsqueda de equipos U11 que tengan un nombre de equipo que empiece por "Fr" or finalice con "al").

+ +

El segundo fragmento de código muestra una función de visualización (manejador de recurso) para mostrar en pantalla todos nuestros equipos U09. En este caso especificamos que queremos filtrar todos los registros donde el campo team_level tenga exactamente el texto 'U09' (fíjate debajo cómo este criterio se pasa como argumento a la función filter() con el nombre de campo y tipo de coincidencia separados por guiones bajos dobles: team_level__exact).

+ +
#best/views.py
+
+from django.shortcuts import render
+from .models import Team
+
+def youngest(request):
+    list_teams = Team.objects.filter(team_level__exact="U09")
+    context = {'youngest_teams': list_teams}
+    return render(request, 'best/index.html', context)
+
+ +
+
+ +

Renderización de datos

+ +

Los frameworks web proporcionan con frecuencia sistemas de plantillas. Éstas te permiten especificar la estructura de un documento de salida, usando marcadores de posición para los datos que serán añadidos cuando se genere la página. Las plantillas se usan con frecuencia para crear HTML, pero también pueden crear otros tipos de documentos.

+ +

Los frameworks web proporcionan con frecuencia un mecanismo para facilitar la generación de otros formatos a partir de los datos almacenados, incluyendo {{glossary("JSON")}} y {{glossary("XML")}}.

+ +

Por ejemplo, el sistema de plantillas de Django te permite especificar variables usando una sintaxis de "llaves dobles" (ej. {{ variable_name }}),  que serán reemplazadas por valores pasados desde la función de visualización cuando la página sea renderizada. El sistema de plantillas también proporciona soporte para expresiones (con la sintaxis: {% expression %}), que permite a las plantillas realizar operaciones simples como iterar sobre la lista de valores pasados a la misma.

+ +
+

Nota: Muchos otros sistemas de plantillas usan una sintaxis similar, ej.: Jinja2 (Python), Handlebars (JavaScript), Moustache (JavaScript), etc.

+
+ +

El fragmento de código de abajo muestra como hacer este trabajo. Continuando el ejemplo del "equipo más joven" de la sección anterior, la "view" pasa a la plantilla HTML una variable tipo lista llamada youngest_teams. Dentro del esqueleto HTML tenemos una expresión que primero comprueba que la variable youngest_teams existe, y luego itera sobre ella en un bucle for. En cada iteración la plantilla presenta en pantalla el valor del team_name  del equipo de uno de los elementos de la lista.

+ +
#best/templates/best/index.html
+
+<!DOCTYPE html>
+<html lang="en">
+<body>
+
+ {% if youngest_teams %}
+    <ul>
+    {% for team in youngest_teams %}
+        <li>\{\{ team.team_name \}\}</li>
+    {% endfor %}
+    </ul>
+{% else %}
+    <p>No teams are available.</p>
+{% endif %}
+
+</body>
+</html>
+
+ +

Como escoger un framework web

+ +

Existen muchos frameworks web para casi todos los lenguajes de programación que quieras usar (listamos unos pocos de los frameworks más populares en la sección siguiente). Con tantas opciones, llega a ser difícil deducir qué framework proporciona el mejor punto de partida para tu nueva aplicación web. 

+ +

Algunos de los factores que pueden afectar tu decisión son:

+ + + +

Hay muchos otros posibles factores, incluyendo licenciamiento, si el framework está bajo desarrollo activo o no, etc.

+ +

Si eres un completo principiante en la programación probablemente escogerás tu framework basándote en la "facilidad de aprendizaje". Además de la "facilidad de uso" del lenguaje mismo, la alta calidad de la documentación/tutoriales y una comunidad activa que ayuda a nuevos usuarios son tus recursos más valiosos. Nosotros hemos escogido Django (Python) y Express (Node/JavaScript) para escribir nuestros ejemplos de más adelante en el curso, principalmente porque son fáciles de aprender y tienen un buen soporte.

+ +
+

Nota: Vayamos a los sitios principales de Django (Python) y Express (Node/JavaScript) y comprobemos su documentación y su comunidad.

+ +
    +
  1. Navega a los sitios principales (enlazados abajo) +
      +
    • Pincha en los enlaces de los menus de Documentación (cosas que se llaman como "Documentación, Guía, Referencia API, Primeros Pasos".
      • +
    • ¿Puedes ver temas que te muestran como configurar enrutado URL, plantillas y bases de datos/modelos?
      • +
    • ¿Son los documentos suficientemente claros?
      • +
    +
    2. +
  2. Navega a las listas de correo de cada sitio (accesible desde los enlaces de Comunidad). +
      +
    • ¿Cuántas preguntas se han realizado en unos pocos días recientes?
      • +
    • ¿Cuántas tienen respuestas?
      • +
    • ¿Tienen una comunidad activa?
      • +
    +
    3. +
+
+ +

¿Unos pocos frameworks web buenos?

+ +

Avancemos ahora, y debatamos unos pocos frameworks web específicos de lado servidor.

+ +

Los frameworks de lado servidor de más abajo representan unos pocos de los más populares disponibles en el momento de escribir este artículo. Todos ellos tienen todo lo que necesitas para ser productivo — son de código abierto, están bajo desarrollo activo, tienen comunidades entusiastas creando documentación y ayudando a los usuarios en paneles de debate, y se usan en un gran número de sitios web de perfil alto. Hay muchos otros frameworks de lado servidor fantásticos que puedes descubrir usando una búsqueda básica en internet. 

+ +
+

Nota: ¡Las descripciones vienen (parcialmente) de los sitios web de los frameworks!

+
+ +

Django (Python)

+ +

Django es un Framework Web Python de alto nivel que promueve el desarrollo rápido y limpio y el diseño pragmático. Construido por desarrolladores experimentados, tiene en cuenta muchos de los problemas del desarrollo web, de manera que puedes focalizarte en escribir el código de tu app sin necesidad de reinventar la rueda. Es gratis y de código abierto.

+ +

Django sigue la filosofía de "Baterias incluidas" y proporciona casi todo lo que la mayoría de desarrolladores querría hacer "de fábrica". Como todo está incluido, todo funciona en conjunto, sigue principios de diseño consistentes y tiene una extensa documentación actualizada. Es también veloz, seguro y muy escalable. Al estar basado en Python, el código de Django es fácil de leer y de mantener.

+ +

Entre los sitios populares que usan Django (según su página web) se incluyen: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack.

+ +

Flask (Python)

+ +

Flask es un microframework para Python. 

+ +

A pesar de ser minimalista, Flask puede crear sitios web "de fábrica". Contiene un servidor de desarrollo y depurador, e incluye soporte para plantillas Jinja2, cookies seguros, prueba de unidades, y distribución de peticiones RESTful. Tiene  buena documentación y una comunidad activa. 

+ +

Flask se ha vuelto extremadamente popular, particularmente entre desarrolladores que necesitan proporcionar servicios web en sistemas pequeños, y con recursos escasos (ej. ejecutar un servidor web en una  Raspberry Pi, Controladores de Drones, etc.)

+ +

Express (Node.js/JavaScript)

+ +

Express es un framework web veloz, no dogmático, flexible y minimalista para Node.js (Node es un entorno sin explorador web para ejecutar JavaScript). Proporciona un conjunto de características robusto para aplicaciones web y móviles y entrega valiosos métodos de utilidades HTTP y middleware.

+ +

Express es extremadamente popular, en parte porque facilita la migración de programadores web de JavaScript de lado cliente a desarrollo de lado servidor, y en parte porque es eficiente con los recursos (el entorno de node subyacente usa multitarea ligera dentro de un thread en vez de expandirse en procesos separados para cada nueva petición web).

+ +

Debido a que Express es un framework web minimalista no incorpora cada componente que querrías usar (por ejemplo, el acceso a bases de datos y el soporte de usuarios y sesiones se proporciona a través de bibliotecas independientes). Hay muchos componentes independientes excelentes, !pero algunas veces puede ser difícil deducir cuál es el mejor para un propósito en particular!

+ +

Muchos frameworks populares y completamente equipados (incluyendo ambos tipos de frameworks de lado servidor y de lado cliente) están basados en Express, como Feathers, ItemsAPI, KeystoneJS, Kraken, LEAN-STACK, LoopBack, MEAN, and Sails.

+ +

Un montón de compañías de perfil alto usan Express, como: Uber, Accenture, IBM, etc. (aquí tienes una lista).

+ +

Ruby on Rails (Ruby)

+ +

Rails (normalmente referenciado como "Ruby on Rails") es un framework web escrito para el lenguaje de programación Ruby.

+ +

Rails sigue una filosofía de diseño muy similar a Django. Como Django proporciona mecanismos estándard para el enrutado de URLs, acceso a datos de bases, generación de plantillas y formateo de datos como {{glossary("JSON")}} o {{glossary("XML")}}. Promueve de forma similar el uso de patrones de diseño como DRY ("dont repeat yourself", no te repitas — escribir el código una única vez si es posible), MVC (model-view-controller) y numerosos otros.

+ +

Hay por supuesto muchas diferencias debido a decisiones específicas de diseño y la naturaleza de los lenguajes.

+ +

Rails se usa en sitios de perfil alto, como: Basecamp, GitHub, Shopify, Airbnb, Twitch, SoundCloud, Hulu, Zendesk, Square, Highrise.

+ +

ASP.NET

+ +

ASP.NET es un framework web de código abierto desarrollado por Microsoft para construir aplicaciones y servicios modernos. Con ASP.NET puedes crear rápidamente sitios web basados en HTML, CSS, y JavaScript, escalarlos para ser usados por milllones de usuarios y añadir fácilmente capacidades complejas como APIs web, formularios sobre datos o comunicaciones en tiempo real.

+ +

Uno de los diferenciadores de ASP.NET es que está construido sobre el Common Language Runtime (CLR), permitiendo a los programadores escribir código ASP.NET usando cualquier lenguaje .NET soportado (C#, Visual Basic, etc.). Como muchos productos Microsoft se beneficia de herramientas excelentes (frecuentemente gratuitas), y una comunidad de desarrolladores activa, y documentación bien escrita.

+ +

ASP.NET se usa por Microsoft, Xbox.com, Stack Overflow, y muchos otros.

+ +

Mojolicious (Perl)

+ +

Mojolicious es un framework web de nueva generación para el lenguaje de programación Perl.

+ +

Hace tiempo en los primeros días de la Web, mucha gente aprendió Perl gracias a una magnífica biblioteca llamada CGI. Era lo suficientemente simple para empezar sin saber mucho sobre el lenguaje y lo suficientemente potente para mantenerte en marcha. Mojolicious implementa esta idea usando el último grito de las tecnologías.

+ +

Algunas de las caracteríticas que proporciona Mojolicious son: Framework Web en tiempo real, para crecer fácilmente desde prototipos de un solo fichero hasta aplicaciones web MVC bien estructuradas; rutas RESTful, plugins, comandos, plantillas especificas de Perl, negociación de contenidos, gestión de sesiones, validación de formatos, framework de pruebas, servidor de ficheros estáticos, detección de CGI/PSGI, soporte Unicode de primera clase; Implementación  cliente/servidor completamente equipada de HTTP y WebSocket con IPv6, TLS, SNI, IDNA, HTTP/SOCKS5 proxy, UNIX domain socket, Comet (long polling), keep-alive, connection pooling, timeout, cookie, y soporte de compresión multipart y gzip; parseadores JSON y HTML/XML y generadores con soporte de selector CSS; Muy limpio, portable y API orientada a objetos y Perl puro sin magia oculta; Código fresco basado en años de experiencia, gratis y de código abierto.

+ +

Sumario

+ +

Este artículo ha mostrado que los frameworks web pueden hacer fácil el desarrollo y mantenimiento del código de lado servidor. También ha proporcionado una visión general de alto nivel de unos pocos frameworks más populares y debatido los criterios para elegir el framework para una aplicación web. Deberías tener en este momento una idea de cómo elegir un framework web para tu propio desarrollo de lado servidor. Si no, no te preocupes — más tarde a lo largo del curso te daremos tutoriales detallados de Django y Express para darte algo de experiencia de funcionamiento real con un framework web.

+ +

Para el próximo artículo de este módulo cambiaremos de dirección ligeramente y consideraremos la seguridad web.

+ +

{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}

+ +

 

+ +

En este modulo

+ + + +

 

diff --git a/files/es/learn/server-side/first_steps/website_security/index.html b/files/es/learn/server-side/first_steps/website_security/index.html new file mode 100644 index 0000000000..c2630fc050 --- /dev/null +++ b/files/es/learn/server-side/first_steps/website_security/index.html @@ -0,0 +1,177 @@ +--- +title: Seguridad de Sitios Web +slug: Learn/Server-side/Primeros_pasos/seguridad_sitios_web +tags: + - Aprendizaje + - Codificación de scripts + - Guía + - Principiante + - Programación de lado servidor + - Seguridad + - Seguridad Web + - Seguridad de sitios Web + - introducción +translation_of: Learn/Server-side/First_steps/Website_security +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
+ +

La Seguridad web require vigilancia en todos los aspectos del diseño y uso de un sitio web. Este artículo introductorio no te hará un gurú de la seguridad en sitios web, pero te ayudará a entender de donde vienen las amenazas y qué puedes hacer para fortalecer tu aplicación web contra los ataques más comunes.

+ + + + + + + + + + + + +
Pre-requisitos:Conocimientos de computación básicos.
Objetivo:Entender las amenazas más comunes para la seguridad de una aplicación web y lo que puedes hacer para reducir el riesgo de que tu sitio sea hackeado.
+ +

¿Qué es la seguridad de sitios web?

+ +

¡Internet es un sitio peligroso! Con mucha frecuencia escuchamos sobre sitios web que dejan de estar disponibles debido a ataques de denegación de servicio, o presentan información modificada (y con frecuencia dañada) en sus páginas de inicio. En otros casos de alto nivel, millones de contraseñas, direcciones de correo electrónico y detalles de tarjetas de crédito han sido filtrados al dominio público, exponiendo a los usuarios del sitio web tanto a bochorno personal como a riesgo finaciero.

+ +

El propósito de la seguridad web es prevenir ataques de esta (o de cualquier otra) clase. Mas formalmente, la seguridad es la acción/práctica de proteger sitios web del acceso, uso, modificación, destrucción o interrupción, no autorizados.

+ +

La seguridad de sitios web eficaz requiere de esfuerzos de diseño a lo largo de la totalidad del sitio web: en tu aplicación web, en la configuración del servidor web, en tus políticas para crear y renovar contraseñas, y en el código del lado cliente. Al mismo tiempo que todo esto suena muy inquietante, la buena noticia es que si estás usando un framework web de lado servidor, es casi seguro que habilitará por defecto mecanismos de defensa robustos y bien pensados contra gran cantidad de los ataques más comunes. Otros ataques pueden mitigarse por medio de la configuración de tu servidor web, por ejemplo habilitando HTTPS. Finalmente, hay herramientas de escaneado de vulnerabilidades disponibles públicamente que pueden ayudarte a averiguar si has cometido algún error obvio.

+ +

El resto de este artículo proporciona más detalle sobre unas pocas amenazas comunes y algunos de los pasos simples que puedes dar para proterger tu sitio.

+ +
+

Nota: Este es un tema de introducción, diseñado para ayudarte a pensar sobre la seguridad de sitios web. No pretende ser exhaustivo.

+
+ +

Amenazas contra la seguridad de sitios web

+ +

Esta sección lista sólo algunas pocas de las amenazas más comunes para los sitios web y cómo son mitigadas. A medida que vayas leyendo, fíjate cómo las amenazas tienen éxito cuando la aplicación web, ¡o confía o no es lo suficientemente paranoica acerca de los datos que vienen del explorador web!

+ +

Cross-Site Scripting (XSS)

+ +

XSS es un término que se usa para describir una clase de ataques que permiten al atacante inyectar scripts de lado cliente, a través del sitio web, hasta los exploradores de otros usuarios. Como el código inyectado va del servidor del sitio al explorador, se supone de confianza, y de aquí que pueda hacer cosas como enviar al atacante la cookie de autorización al sitio del usuario. Una vez que el atacante tiene la cookie pueden iniciar sesión en el sitio como si fuera el verdadero usuario y hacer cualquier cosa que pueda hacer éste. Dependiendo de que sitio sea, esto podría incluir acceso a los detalles de su tarjeta de crédito, ver detalles de contactos o cambiar contraseñas, etc.

+ +
+

Nota: Las vulnerabilidades XSS han sido históricamente más comunes que las de cualquier otro tipo.

+
+ +

Hay dos aproximaciones principales para conseguir que el sitio devuelva scripts inyectados al explorador — se conocen como vulnerabilidades XSS reflejadas y persistentes.

+ + + +

La mejor defensa contra las vulnerabilidades XSS es eliminar o deshabilitar cualquier etiqueta que pueda contener instrucciones para ejecutar código. En el caso del HTML ésto incluye etiquetas como <script>, <object>, <embed>, y <link>.

+ +
+

El proceso de modificar los datos del usuario de manera que no puedan utilizarse para ejecutar scripts o que afecten de otra forma la ejecución del código del servidor, se conoce como "desinfección de entrada" (input sanitization). Muchos frameworks web desinfectan automáticamente la entrada del usuario desde formularios HTML, por defecto.

+
+ +

Inyección SQL

+ +

Las vulnerabilidades de Inyección SQL habilitan que usuarios maliciosos ejecuten código SQL arbitrario en una base de datos, permitiendo que se pueda acceder a los datos, se puedan modificar o borrar, independientemente de los permisos del usuario. Un ataque de inyección con éxito, podría falsificar identidades, crear nuevas identidades con derechos de administración, acceder a todos los datos en el servidor o destruir/modificar los datos para hacerlos inutilizables.

+ +

Esta vulnerabilidad está presente si la entrada del usuario que se pasa a la sentencia SQL subyacente puede cambiar el significado de la misma. Por ejemplo, considera el código de abajo, que pretende listar todos los usuarios con un nombre en particular (userName) que ha sido suministrado en un formulario HTML:

+ +
statement = "SELECT * FROM users WHERE name = '" + userName + "';"
+ +

Si el usuario introduce su nombre real, la cosa funciona como se pretende. Sin embargo un usuario malicioso podría cambiar completamente el comportamiento de esta sentencia SQL a la nueva sentencia de abajo, simplemente especificando para userName el texto de abajo en "negrilla". La sentencia modificada crea una sentencia SQL válida que borra la tabla  users y selecciona todos los datos de la tabla userinfo  (revelando la información de todos los usuarios). Esto funciona por que la primera parte del texto inyectado (a';) completa la sentencia original (' es el símbolo para indicar una cadena literal en SQL).

+ +
SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't';
+
+ +

La manera de evitar esta clase de ataque es asegurar que cualquier dato de usuario que se pasa a un query SQL no puede cambiar la naturaleza del mismo. Una forma de hacer ésto es eludir ('escape') todos los caracteres en la entrada de usuario que tengan un significado especial en SQL.

+ +
+

Nota: La sentencia SQL trata el caracer ' como el principio y el final de una cadena de texto. Colocando el caracter barra invertida \ delante, "eludimos" el símbolo (\'), y le decimos a SQL que lo trate como un caracter de texto (como parte de la misma cadena).

+
+ +

En la sentencia de abajo eludimos el carácter '. SQL interpretará ahora como "nombre" la cadena de texto completa mostrada en negrilla (!un nombre muy raro desde luego, pero no dañino¡)

+ +
SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t';
+
+
+ +

Los frameworks web con frecuencia tienen cuidado de hacer por tí la elusión de caracteres. Django, por ejemplo se asegura que cualquier dato de usuario que se pasa a los conjuntos de queries (modelo de queries) está corregido.

+ +
+

Nota: Esta sección se sustenta aquí en la información de Wikipedia.

+
+ +

Cross Site Request Forgery (CSRF)

+ +

Los ataques de CSRF permiten que un usuario malicioso ejecute acciones usando las credenciales de otro usuario sin el conocimiento o consentimiento de éste.

+ +

Este tipo de ataque se explica mejor con un ejemplo. John es un usuario malicioso que sabe que un sitio en particular permite a los usuarios que han iniciado sesión enviar dinero a una cuenta específica usando una petición HTTP POST que incluye el nombre de la cuenta y una cantidad de dinero. John construye un formulario que incluye los detalles de su banco y una cantidad de dinero como campos ocultos, y lo envía por correo electrónico a otros usuarios del sitio (con el botón de Enviar camuflado como enlace a un sitio "hazte rico rápidamente").

+ +

Si el usuario pincha el botón de enviar, se envía al servidor una petición HTTP POST que contiene los detalles de la transacción y todos los cookies de lado-cliente que el explorador asocia con el sitio (añadir cookies asociados con el sitio es un comportamiento normal de los exploradores). El servidor comprobará los cookies, y los usará para determinar si el usuario ha iniciado sesión o no y si tiene permiso para hacer la transacción.

+ +

El resultado es que cualquier usuario que pinche en el botón Enviar mientras tiene la sesión iniciada en el sitio comercial hará la transacción. ¡John se hará rico!

+ +
+

Nota: El truco aquí es que John no necesita tener acceso a los cookies del usuario (o acceso a sus credenciales) — El explorador del usuario almacena esta información, y la incluye automáticamente en todas las peticiones al servidor asociado.

+
+ +

Una manera de prevenir este tipo de ataque por parte del servidor es requerir que la petción POST incluya una palabra secreta específica del usuario generada por el sitio (la palabra secreta podría proporcionarla el servidor cuando envía el formulario web que se usa para hacer transferencias). Esta aproximación evita que John pueda crear su propio formulario, porque necesitaría conocer la palabra secreta que el servidor ha proporcionado para el usuario. Incluso si conociera esta palabra y creara un formulario para un usuario en particular, no podría usar el mismo formulario para atacar a todos los usuarios.

+ +

Los frameworks web incluyen con frecuencia tales mecanismos de prevención de CSRF.

+ +

Otras amenazas

+ +

Otros ataques/vulnerabilidades incluyen:

+ + + +

Hay muchas más. Para un lisado completo ver Category:Web security exploits (Wikipedia) y Category:Attack (Open Web Application Security Project).

+ +

Unos cuantos mensajes clave

+ +

Casi todos los exploits de las secciones anteriores tienen éxito cuando la aplicación web confía en los datos que vienen del explorador. Sea lo que sea que hagas para mejorar la seguridad de tu sitio web, deberías desinfectar todos los datos originados por el usuario antes de ser mostrados en el explorador, usados en queries SQL o pasados en una llamada al sistema operativo o fichero de sistema.

+ +
+

Importante: La lección más importante que debes aprender acerca de la seguridad de sitios web es nunca confíes en los datos del explorador web. Esto incluye los datos en parámetros URL de las peticionesGET, datos POST, cabeceras HTTP y cookies, ficheros subidos por los usuarios, etc. Comprueba siempre y desinfecta todos los datos entrantes. Siempre asume lo peor.

+
+ +

Otras cuantas medidas concretas que puedes tomar son:

+ + + +

Los frameworks web pueden ayudar a mitigar muchas de las vulnerabilidades más comunes.

+ +

Sumario

+ +

Este artículo ha explicado el concepto de seguridad en sitios web y algunas de las amanazas más comunes contra las que tu sitio debería empezar a protegerse. Lo más importante que deberías entender es que ¡una aplicación web no puede confiar en ningún dato que provenga de explorador web! Todos los datos de usuario deberían ser desinfectados antes de ser mostrados, o usados en queries SQL o llamadas a ficheros de sistema.

+ +

Hemos llegado al final de este módulo, tratando tus primeros pasos en la programación de lado servidor de un sitio web. Esperamos que hayas disfrutado del aprendizaje de los conceptos fundamentales y estés listo para seleccionar un framework web y empezar a programar.

+ +

{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

+ + + +

En este módulo

+ + diff --git a/files/es/learn/server-side/primeros_pasos/index.html b/files/es/learn/server-side/primeros_pasos/index.html deleted file mode 100644 index 19a5454b4b..0000000000 --- a/files/es/learn/server-side/primeros_pasos/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Primeros Pasos en la Programación de Lado-Servidor -slug: Learn/Server-side/Primeros_pasos -tags: - - Aprendizaje - - Aterrizaje - - Codificación de scripts - - Guía - - Principiante - - Programación lado servidor - - introducción -translation_of: Learn/Server-side/First_steps ---- -
{{LearnSidebar}}
- -

En este, nuestro módulo sobre programación de Lado-Servidor, contestaremos a unas pocas preguntas fundamentales - "¿Qué es?", "¿En qué se diferencia de la programación de Lado-Cliente?" y "¿Porqué es tan útil?". Proporcionaremos un vistazo de algunos de los "web-frameworks" de lado-servidor más populares, junto con indicaciones de cómo seleccionar el framework más adecuado para crear tu primer sitio. Finalmente proporcionaremos un artículo introductorio de alto nivel sobre seguridad en el servidor web. 

- -

Prerequisitos

- -

Antes de comenzar este módulo no necesitas tener ningún conocimiento de programación de sitios web de lado-servidor, y tampoco de ningún otro tipo de programación.

- -

Necesitarás entender "cómo funciona la web". Te recomendamos que leas primero los siguientes temas:

- - - -

Con este conocimiento básico estarás listo para recorrer el camino a través de los módulos de esta sección.

- -

Guías

- -
-
Introducción al lado servidor
-
¡Bienvenidos al curso MDN de programación para principiantes de lado servidor! En este primer artículo enfocamos la programación de Lado-Servidor desde un nivel alto, respondiendo a preguntas tales como "¿qué es?", "¿en qué se diferencia de la programación de Lado-Cliente?" y "¿porqué es tan útil?". Después de leer este artículo entenderás el poder adicional para los sitios web disponible a través de la codificación lado-servidor.
-
Visión general Cliente-Servidor
-
Ahora que conoces el propósito y beneficios potenciales de la programación lado-servidor examinaremos en detalle qué pasa cuando un servidor recibe una "petición dinámica" desde un explorador web. Como el código de lado-servidor de la mayoría de sitios web gestiona las peticiones y las respuestas de forma similar, ésto te ayudará entender qué necesitas hacer cuando escribes tu propio código.
-
Web frameworks de lado-servidor
-
El anterior artículo te mostró lo que necesita una aplicación web de lado servidor para responder a las peticiones de un explorador web. Ahora te mostraremos cómo los web frameworks pueden simplificar estas tareas y ayudarte a seleccionar el framework correcto para tu primera aplicación web de lado servidor.
-
Seguridad de Sitios Web
-
La seguridad de los sitios web requiere vigilancia en todos los aspectos del diseño y uso del sitio . Este artículo introductorio no te convertirá en un gurú de la seguridad de sitios web, pero te ayudará a entender los primeros pasos importantes que deber dar para robustecer tu aplicación web contra las amenazas más comunes.
-
- -

Evaluaciones

- -

Este módulo "visión general" no hace ninguna evaluación ya que no te hemos enseñado ningún código todavía. Esperamos que en este punto tengas una comprensión de qué clase de funcionalidad puedes distribuir usando programación de lado servidor y habrás tomado una decisión sobre el web framework de lado servidor que usarás para crear tu primer sitio. 

diff --git "a/files/es/learn/server-side/primeros_pasos/introducci\303\263n/index.html" "b/files/es/learn/server-side/primeros_pasos/introducci\303\263n/index.html" deleted file mode 100644 index 0b0d2da59e..0000000000 --- "a/files/es/learn/server-side/primeros_pasos/introducci\303\263n/index.html" +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: Introducción al lado servidor -slug: Learn/Server-side/Primeros_pasos/Introducción -tags: - - Aprendizaje - - Codificación de scripts - - Guía - - Principiante - - Programación lado servidor - - Servidor - - introducción -translation_of: Learn/Server-side/First_steps/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
- -

¡Bienvenidos al curso MDN de programación para principiantes de lado servidor! En este primer artículo enfocamos la programación de Lado-Servidor desde un nivel alto, respondiendo a preguntas tales como "¿qué es?", "¿en qué se diferencia de la programación de Lado-Cliente?" y "¿porqué es tan útil?". Después de leer este artículo entenderás el poder adicional para los sitios web disponible a través de la codificación lado-servidor.

- - - - - - - - - - - - -
Prerequisitos:Nociones básicas de computación. Entender lo que es un servidor web.
Objetivo:Familiarizarse con lo que es la programación de lado servidor, qué puede hacer y en qué se diferencia de la programación de lado cliente.
- -

La mayoría de los grandes sitios web usan código de lado servidor para presentar, cuando se necesitan, diferentes datos, generalmente extraidos de una base de datos almacenada en un servidor y enviada al cliente para ser presentada mediante algún código (ej, HTML y JavaScript). Quizá el beneficio más significativo de la codificación de lado servidor es que te permite confeccionar el contenido del sitio web para usuarios individuales. Los sitios dinámicos pueden resaltar contenido que es más relevante basándose en las preferencias del usuario y sus hábitos. Puede hacer también que los sitios sean más fáciles de usar al almacenar las preferencias personales y la información - por ejemplo reusando los detalles de la tarjeta de crédito guardados para agilizar los pagos siguientes. Puede incluso permitir la interacción con los usuarios fuera del sitio, enviando notificaciones y actualizaciones via email o a traves de otros canales. Todas estas capacidades permite un mayor compromiso con los usuarios. 

- -

En el mundo moderno del desarrollo web, el aprendizaje sobre desarrollo de lado servidor es altamente recomendable.

- -

¿Qué es la programación de sitios web de lado servidor?

- -

Los exploradores web se comunican con los servidores web usando el Protocolo de Transporte de Hyper Texto (HyperText Transport Protocol ({{glossary("HTTP")}}). Cuando pinchas en un enlace en una página web, envías un formulario o ejecutas una búsqueda, se envía una peticion HTTP desde tu explorador web al servidor web de destino. La petición incluye un URL que identifica el recurso afectado, un método que define la acción requerida (por ejemplo, obtener, borrar o publicar el recurso), y puede incluir información adicional codificada en parámetros en el URL (los pares campo-valor enviados en una cadena de consulta (query string), como datos POST (datos enviados mediate el método POST de HTTP,  HTTP POST method), o en {{glossary("Cookie", "associated cookies")}}.

- -

Los servidores web esperan los mensajes de petición de los clientes, los procesan cuando llegan y responden al explorador web con un mensaje de respuesta HTTP. La repuesta contiene una línea de estado indicando si la petición ha tenido éxito o no (ej, "HTTP/1.1 200 OK" en caso de éxito). El cuerpo de una respuesta exitosa a una petición podría contener el resurso solicitado (ej, una nueva página HTML, o una imagen, etc...), que el explorador web podría presetar en pantalla.

- -

Sitios Estáticos

- -

El diagrama de abajo muestra una arquitectura de servidor web básica correspondiente a un sitio estático (un sitio estático es aquél que devuelve desde el servidor el mismo contenido insertado en el código "hard coded" siempre que se solicita un recurso en particular). Cuando un usuario quiere navegar a una página, el explorador envía una petición HTTP "GET" especificando su URL. El servidor recupera de su sistema de ficheros el documento solicitado y devuelve una respuesta HTTP que contiene el documento y un estado de éxito "success status" (normalmente 200 OK). Si el fichero no puede ser recuperado por alguna razón, se devuelve un estado de error (ver respuestas de error del cliente and respuestas de error del servidor).

- -

A simplified diagram of a static web server.

- -

Sitios Dinámicos

- -

Un sitio dinámico es aquél en que algun contenido de la respuesta está generado dinámicamente sólo cuando se necesita. En un sitio web dinámico las páginas HTML se crean normalmente insertando datos desde una base en variables dentro de plantillas HTML (esta es una forma mucho más eficiente de almacenar gran cantidad de contenido que la que usan los sitios web estáticos). Un sitio dinámico puede devolver datos diferentes para un URL basados en la información proporcionada por el usuario o sus preferencias almacenadas y puede realizar otras operaciones como parte de la devolución de respuesta (ej, enviar notificaciones).

- -

La mayor parte del código para soportar un sitio web dinámico debe correr en el servidor. La creación de este código se conoce como "programación de lado-servidor" (o algunas veces "back-end scripting").

- -

El diagrama de abajo muestra una arquitectura simple para unsitio web dinámico. Como en el diagrama previo, los exploradores web envían peticiones HTTP al servidor, el servidor procesa a continuación las peticiones y devuelve las respuestas HTTP apropiadas. Las peticiones de recursos estáticos son gestionadas de la misma manera que para los sitios estáticos (los recursos estáticos son cualquier fichero que no cambia - generalmente: CSS, JavaScript, Imágenes, ficheros PDF creados previamente, etc...)

- -

A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview.

- -

Las peticiones de recursos dinámicos, por el contrario, son reenviadas (2) al código del lado-servidor (mostrado en el diagrama como Web Application). Para las "peticiones dinámicas" el servidor interpreta la petición, lee de la base de datos la información requerida (3), combina los datos recuperados con las plantillas HTML (4), y envía de vuelta una respuesta que contiene el HTML generado (5,6). 

- -
-

¿Son iguales la programación del lado-servidor y lado-cliente?

-
- -

Prestemos ahora nuestra atención al código involucrado en la programación de lado-servidor y lado-cliente. En cada caso, el código es significativamente diferente:

- - - -

El código que se ejecuta en el explorador se conoce como código de lado-cliente, y su principal preocupación es la mejora de la apariencia y el comportamiento de una página web entregada. Esto incluye la selección y estilo de los componentes UI, la creación de layouts, navegación, validación de formularios, etc. Por otro lado, la programación de sitios web de lado servidor en su mayor parte implica la elección de qué contenido se ha de devolver al explorador como respuesta a sus peticiones. El código de lado-servidor gestiona tareas como la validación de los datos enviados y las peticiones, usando bases de datos para almacenar y recuperar datos, y enviando los datos correctos al cliente según se requiera.

- -

El código del lado cliente está escrito usando HTML, CSS, y JavaScript — es ejecutado dentro del explorador web y tiene poco o ningún acceso al sistema operativo subyacente (incluyendo un acceso limitado al sistema de ficheros).

- -

Los desarrolladores web no pueden controlar qué explorador web usará cada usuario para visualizar un sitio web — los exploradores web proporcionan niveles de compatibilidad inconsistentes con las características de codificación lado cliente, y parte del reto de la programación de lado cliente es gestionar con dignidad las diferencias de soporte entre exploradores.

- -
El código del lado servidor puede escribirse en cualquier número de lenguajes de programación — ejemplos de lenguajes de programación populares incluyen PHP, Python, Ruby, C# y NodeJS(JavaScript). El código del lado servidor tiene acceso completo al sistema operativo del servidor y el desarrollador puede elegir qué lenguaje de programación (y qué versión específica) desea usar.
- -
Los desarrolladores generalmente escriben su código usando web frameworks. Los web framworks son colecciones de funciones, objetos, reglas y otras construcciones de código diseñadas para resolver problemas comunes, acelerar el desarrollo y simplificar los diferentes tipos de tareas que se han de abordar en un dominio en particular.
- -
De nuevo, mientras que, tanto el código lado cliente y el lado servidor usan frameworks, los dominios son muy diferentes, y por lo tanto también lo son los frameworks. Los frameworks del lado cliente simplifican los diseños y las tareas de presentación mientras que los del lado servidor proporcionan un montón de funcionalidades "comunes" que tendría que haber implementado uno mismo (ej, soporte para las sesiones, soporte para los usuarios y autenticación, acceso fácil a la base de datos, librerías de plantillas, etc...).
- -
-

Nota: Los frameworks del lado cliente se usan con frecuencia para acelerar el desarrollo del código del lado cliente, pero también se puede elegir escribir todo el código a mano; de hecho, escribir el código a mano puede ser más rápido y más eficiente si sólo se necesita una UI para sitio web pequeña y simple. Por contra, casi nunca se consideraría escribir el componente del lado servidor de una aplicación web ("web app") sin un framework — implementar una característica vital como un servidor HTTP es realmente difícil de hacer de la nada en un lenguaje como, por ejemplo, Python, pero los  web frameworks de Python como Django proporcionan uno  listo para usar, junto con otras herramientas muy útiles.

-
- -

¿Qué se puede hacer en el lado-servidor?

- -

La programación del lado-servidor es muy útil porque nos permite distribuir eficientemente información a medida para usuarios individuales y por lo tanto crear una experiencia de usuario mucho mejor.

- -

Compañías como Amazon utilizan la programación del lado-servidor para construir resultados de búsquedas de productos, hacer sugerencias sobre productos escogidos basados en las preferencias del cliente y sus hábitos de compra previos, simplificar las adquisiciones, etc. Los bancos usan la programación del lado-servidor para almacenar la información sobre las cuentas y permitir ver y realizar transacciones sólo a los usuarios autorizados. Otros servicios como Facebook, Twitter, Instagram y Wikipedia usan la programación de lado-servidor para destacar, compartir y controlar el acceso al contenido interesante.

- -

Algunos de los usos y beneficios comunes de la programación de lado-servidor se lista debajo. Notarás que hay algo de solapamiento.

- -

Almacenaje y distribución eficiente de información

- -

Imagina cuántos productos están disponibles en Amazon, e imagina cuántas entradas se han escrito en Facebook. Crear una página estática separada para cada producto o entrada sería completamente ineficiente.

- -

La programación de lado-servidor nos permite por el contrario almacenar la información en una base de datos y construir dinámicamente y devolver ficheros HTML y de otros tipos (ej, PDFs, imágenes, etc.). También es posible devolver simplemente datos ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) para presentar mediante los web frameworks adecuados del lado-cliente (esto reduce la carga de procesamiento del servidor y la cantidad de datos que se necesitan enviar).

- -

El servidor no se limita a enviar información de las bases de datos, y podría además devolver el resultado de herramientas de software o datos de servicios de comunicación. El contenido puede incluso ser dirigido por el tipo de dispositivo cliente que lo está recibiendo.

- -

Debido a que la información está en una base de datos, puede también ser compartida y actualizada con otros sistemas de negocio (por ejemplo, cuando se venden los productos online o en una tienda, la tienda debería actualizar su base de datos de inventario.

- -
-

Nota: Tu imaginación no tiene que trabajar duro para ver el beneficio de la codificación de lado-servidor para el almacenaje y distribución de información:

- -
    -
  1. Vete a Amazon o a cualquier otro sitio de comercio electrónico "e-commerce".
    2. -
  2. Busca por un número de palabras clave y nota como la estructura de la página no cambia, incluso aunque cambien los resultados. 
    3. -
  3. Abre dos o tres productos diferentes. Fíjate de nuevo como tienen una estructura y diseño común, pero el contenido para los diferentes productos ha sido extraido de la base de datos.
    4. -
- -

Para un término de búsqueda común (digamos "pez") puedes ver literalmente millones de valores retornados. Usar una base de datos permite que éstos sean almacenados y compartidos de forma eficiente, y permite que la presentación de la información esté controlada en un solo sitio.

-
- -

Experiencia de usuario personalizada

- -

Los servidores pueden almacenar y usar la información acerca de los clientes para proporcionar una experiencia de usuario conveniente y dirigida. Por ejemplo, muchos usuarios almacenan tarjetas de crédito de forma que los detalles no tienen que ser introducidos de nuevo. Sitios como Google Maps usan la localización de tu casa y la actual para proporcionar una información sobre la ruta a seguir y resaltar los negocios locales en los resultados de búsqueda.

- -

Un análisis profundo de los hábitos del usuario se puede usar para anticipar sus intereses y personalizar las respuestas y notificaciones futuras, proporcionando, por ejemplo, una lista de las localizaciones visitadas o populares que querrías buscar en un mapa.

- -
-

Nota: Vete a Google Maps como usuario anónimo, selecciona el botón Direcciones, e introduce los puntos de partida y destino de un viaje. Ahora inicia sesión en el sistema con tu cuenta de Google, si tienes una (en el panel de abajo aparece información acerca de este proceso donde seleccionas direcciones). El sitio web te permitirá ahora seleccionar las localizaciones de casa y trabajo como puntos de partida y destino (o almacenar estos detalles si no lo has hecho así).

-
- -

Acceso controlado al contenido 

- -

La programación de lado-servidor permite a los sitios restringir el acceso a usuarios autorizados y servir sólo la información que se le permite ver al usuario.

- -

Ejemplos del mundo real incluyen:

- - - -
-

Nota: Considera otros ejemplos reales donde el acceso al contenido está controlado. Por ejemplo, ¿qué puedes ver si vas al sitio online de tu banco? Inicia sesión con tu cuenta — ¿qué información adicional puedes ver y modificar? ¿Qué información puedes ver y sólo el banco puede cambiar?

-
- -

Almacenar información de sesión/estado

- -

La programación de lado-servidor permite a los desarrolladores hacer uso de las sesiones — es básicamente un mecanismo que permite al servidor almacenar información sobre el usuario actual del sitio u enviar diferentes respuestas basadas en esa información. Esto permite, por ejemplo, que un sitio sepa que un usuario ha iniciado sesión previamente y presente enlaces a sus correos, o a su historial de órdenes, o quizá guardar el estado de un simple juego de forma que el usuario pueda volver al sitio de nuevo y retomar el juego donde lo dejó.

- -
-

Nota: Visita el sitio de un periódico que tenga un modelo de subscripción y abre un puñado de pestañas (ej, The Age). Continua visitando el sitio durante unos pocos días/horas. En algún momento serás finalmente redirigido a las páginas que explican cómo suscribirte y se te impedirá el acceso a los artículos. Esta información es un ejemplo de información de sesión almacenada en cookies.

-
- -

Notificaciones y comunicación

- -

Los servidores pueden enviar notificaciones de tipo general o específicas de usuario a través del propio sitio web o vía correo electrónico, SMS, mensajería instanténea, conversaciones de video u otros servicios de comunicación.

- -

Unos pocos ejemplos incluyen:

- - - -
-

Nota: El tipo de notificación más común es una "confirmación de registro". Elige uno cualquiera de los grandes sitios en que estés interesado (Google, Amazon, Instagram, etc.) y crea una cuenta nueva usando tu dirección de correo. En breve recibirás un email de confirmación de registro, o solicitando un acuse de recibo para activar la cuenta.

-
- -

Análisis de datos

- -

Un sitio web puede recolectar un montón de datos acerca de los usuarios: qué es lo que buscan, qué compran, qué recomiendan, cuánto tiempo permanecen en cada página. La programación de lado-servidor puede utilizarse para refinar las respuestas basándose en el análisis de estos datos.

- -

Por ejemplo, Amazon y Google anuncian ambos productos basados en búsquedas previas (y adquisiciones).

- -
-

Nota: Si eres usuario de Facebook vete a tu muro y hecha un ojo a la ristra de entradas. Fíjate como algunas de las entradas no están en orden numérico - en particular las entradas con más "me-gusta" están con frecuencia en lugares más altos de la lista que las entradas más recientes. Echa un ojo también a qué clase de anuncios te están mostrando — podrías ver anuncios de cosas que has mirado en otros sitios. El algoritmo de Facebook para resaltar contenido y anuncios puede ser un poco misterioso, pero está claro que lo que hace depende de lo que te gusta y de tus hábitos de visualización!

-
- -

Sumario

- -

Felicidades, has alcanzado el final de primer artículo sobre programación de lado-servidor. 

- -

Ahora ya has aprendido que el código de lado-servidor se ejecuta en un servidor web y que su papel principal es controlar qué información se envía al usuario (mientras que el código de lado-cliente gestiona principalmente la estructura y presentación  de esos datos al usuario).

- -

También deberías comprender que es útil porque nos permite crear sitios web que distribuyen de forma eficiente información seleccionada dirigida a usuarios individuales y tener una buena idea de algunas de las cosas que podrías ser capaz de hacer cuando seas un programador de lado-servidor.

- -

Finalmente, deberías comprender que el código de lado-servidor se puede escribir en un gran número de lenguajes de programación y que deberías usar un web framework para hacer más fácil el proceso completo.

- -

En un artículo futuro te ayudaremos a escoger el mejor web framework para tu primer sitio; Aunque a continuación te llevaremos a través de las principales interacciones cliente-servidor en un poco más de detalle.

- -

{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}

diff --git a/files/es/learn/server-side/primeros_pasos/seguridad_sitios_web/index.html b/files/es/learn/server-side/primeros_pasos/seguridad_sitios_web/index.html deleted file mode 100644 index c2630fc050..0000000000 --- a/files/es/learn/server-side/primeros_pasos/seguridad_sitios_web/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Seguridad de Sitios Web -slug: Learn/Server-side/Primeros_pasos/seguridad_sitios_web -tags: - - Aprendizaje - - Codificación de scripts - - Guía - - Principiante - - Programación de lado servidor - - Seguridad - - Seguridad Web - - Seguridad de sitios Web - - introducción -translation_of: Learn/Server-side/First_steps/Website_security ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
- -

La Seguridad web require vigilancia en todos los aspectos del diseño y uso de un sitio web. Este artículo introductorio no te hará un gurú de la seguridad en sitios web, pero te ayudará a entender de donde vienen las amenazas y qué puedes hacer para fortalecer tu aplicación web contra los ataques más comunes.

- - - - - - - - - - - - -
Pre-requisitos:Conocimientos de computación básicos.
Objetivo:Entender las amenazas más comunes para la seguridad de una aplicación web y lo que puedes hacer para reducir el riesgo de que tu sitio sea hackeado.
- -

¿Qué es la seguridad de sitios web?

- -

¡Internet es un sitio peligroso! Con mucha frecuencia escuchamos sobre sitios web que dejan de estar disponibles debido a ataques de denegación de servicio, o presentan información modificada (y con frecuencia dañada) en sus páginas de inicio. En otros casos de alto nivel, millones de contraseñas, direcciones de correo electrónico y detalles de tarjetas de crédito han sido filtrados al dominio público, exponiendo a los usuarios del sitio web tanto a bochorno personal como a riesgo finaciero.

- -

El propósito de la seguridad web es prevenir ataques de esta (o de cualquier otra) clase. Mas formalmente, la seguridad es la acción/práctica de proteger sitios web del acceso, uso, modificación, destrucción o interrupción, no autorizados.

- -

La seguridad de sitios web eficaz requiere de esfuerzos de diseño a lo largo de la totalidad del sitio web: en tu aplicación web, en la configuración del servidor web, en tus políticas para crear y renovar contraseñas, y en el código del lado cliente. Al mismo tiempo que todo esto suena muy inquietante, la buena noticia es que si estás usando un framework web de lado servidor, es casi seguro que habilitará por defecto mecanismos de defensa robustos y bien pensados contra gran cantidad de los ataques más comunes. Otros ataques pueden mitigarse por medio de la configuración de tu servidor web, por ejemplo habilitando HTTPS. Finalmente, hay herramientas de escaneado de vulnerabilidades disponibles públicamente que pueden ayudarte a averiguar si has cometido algún error obvio.

- -

El resto de este artículo proporciona más detalle sobre unas pocas amenazas comunes y algunos de los pasos simples que puedes dar para proterger tu sitio.

- -
-

Nota: Este es un tema de introducción, diseñado para ayudarte a pensar sobre la seguridad de sitios web. No pretende ser exhaustivo.

-
- -

Amenazas contra la seguridad de sitios web

- -

Esta sección lista sólo algunas pocas de las amenazas más comunes para los sitios web y cómo son mitigadas. A medida que vayas leyendo, fíjate cómo las amenazas tienen éxito cuando la aplicación web, ¡o confía o no es lo suficientemente paranoica acerca de los datos que vienen del explorador web!

- -

Cross-Site Scripting (XSS)

- -

XSS es un término que se usa para describir una clase de ataques que permiten al atacante inyectar scripts de lado cliente, a través del sitio web, hasta los exploradores de otros usuarios. Como el código inyectado va del servidor del sitio al explorador, se supone de confianza, y de aquí que pueda hacer cosas como enviar al atacante la cookie de autorización al sitio del usuario. Una vez que el atacante tiene la cookie pueden iniciar sesión en el sitio como si fuera el verdadero usuario y hacer cualquier cosa que pueda hacer éste. Dependiendo de que sitio sea, esto podría incluir acceso a los detalles de su tarjeta de crédito, ver detalles de contactos o cambiar contraseñas, etc.

- -
-

Nota: Las vulnerabilidades XSS han sido históricamente más comunes que las de cualquier otro tipo.

-
- -

Hay dos aproximaciones principales para conseguir que el sitio devuelva scripts inyectados al explorador — se conocen como vulnerabilidades XSS reflejadas y persistentes.

- - - -

La mejor defensa contra las vulnerabilidades XSS es eliminar o deshabilitar cualquier etiqueta que pueda contener instrucciones para ejecutar código. En el caso del HTML ésto incluye etiquetas como <script>, <object>, <embed>, y <link>.

- -
-

El proceso de modificar los datos del usuario de manera que no puedan utilizarse para ejecutar scripts o que afecten de otra forma la ejecución del código del servidor, se conoce como "desinfección de entrada" (input sanitization). Muchos frameworks web desinfectan automáticamente la entrada del usuario desde formularios HTML, por defecto.

-
- -

Inyección SQL

- -

Las vulnerabilidades de Inyección SQL habilitan que usuarios maliciosos ejecuten código SQL arbitrario en una base de datos, permitiendo que se pueda acceder a los datos, se puedan modificar o borrar, independientemente de los permisos del usuario. Un ataque de inyección con éxito, podría falsificar identidades, crear nuevas identidades con derechos de administración, acceder a todos los datos en el servidor o destruir/modificar los datos para hacerlos inutilizables.

- -

Esta vulnerabilidad está presente si la entrada del usuario que se pasa a la sentencia SQL subyacente puede cambiar el significado de la misma. Por ejemplo, considera el código de abajo, que pretende listar todos los usuarios con un nombre en particular (userName) que ha sido suministrado en un formulario HTML:

- -
statement = "SELECT * FROM users WHERE name = '" + userName + "';"
- -

Si el usuario introduce su nombre real, la cosa funciona como se pretende. Sin embargo un usuario malicioso podría cambiar completamente el comportamiento de esta sentencia SQL a la nueva sentencia de abajo, simplemente especificando para userName el texto de abajo en "negrilla". La sentencia modificada crea una sentencia SQL válida que borra la tabla  users y selecciona todos los datos de la tabla userinfo  (revelando la información de todos los usuarios). Esto funciona por que la primera parte del texto inyectado (a';) completa la sentencia original (' es el símbolo para indicar una cadena literal en SQL).

- -
SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't';
-
- -

La manera de evitar esta clase de ataque es asegurar que cualquier dato de usuario que se pasa a un query SQL no puede cambiar la naturaleza del mismo. Una forma de hacer ésto es eludir ('escape') todos los caracteres en la entrada de usuario que tengan un significado especial en SQL.

- -
-

Nota: La sentencia SQL trata el caracer ' como el principio y el final de una cadena de texto. Colocando el caracter barra invertida \ delante, "eludimos" el símbolo (\'), y le decimos a SQL que lo trate como un caracter de texto (como parte de la misma cadena).

-
- -

En la sentencia de abajo eludimos el carácter '. SQL interpretará ahora como "nombre" la cadena de texto completa mostrada en negrilla (!un nombre muy raro desde luego, pero no dañino¡)

- -
SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t';
-
-
- -

Los frameworks web con frecuencia tienen cuidado de hacer por tí la elusión de caracteres. Django, por ejemplo se asegura que cualquier dato de usuario que se pasa a los conjuntos de queries (modelo de queries) está corregido.

- -
-

Nota: Esta sección se sustenta aquí en la información de Wikipedia.

-
- -

Cross Site Request Forgery (CSRF)

- -

Los ataques de CSRF permiten que un usuario malicioso ejecute acciones usando las credenciales de otro usuario sin el conocimiento o consentimiento de éste.

- -

Este tipo de ataque se explica mejor con un ejemplo. John es un usuario malicioso que sabe que un sitio en particular permite a los usuarios que han iniciado sesión enviar dinero a una cuenta específica usando una petición HTTP POST que incluye el nombre de la cuenta y una cantidad de dinero. John construye un formulario que incluye los detalles de su banco y una cantidad de dinero como campos ocultos, y lo envía por correo electrónico a otros usuarios del sitio (con el botón de Enviar camuflado como enlace a un sitio "hazte rico rápidamente").

- -

Si el usuario pincha el botón de enviar, se envía al servidor una petición HTTP POST que contiene los detalles de la transacción y todos los cookies de lado-cliente que el explorador asocia con el sitio (añadir cookies asociados con el sitio es un comportamiento normal de los exploradores). El servidor comprobará los cookies, y los usará para determinar si el usuario ha iniciado sesión o no y si tiene permiso para hacer la transacción.

- -

El resultado es que cualquier usuario que pinche en el botón Enviar mientras tiene la sesión iniciada en el sitio comercial hará la transacción. ¡John se hará rico!

- -
-

Nota: El truco aquí es que John no necesita tener acceso a los cookies del usuario (o acceso a sus credenciales) — El explorador del usuario almacena esta información, y la incluye automáticamente en todas las peticiones al servidor asociado.

-
- -

Una manera de prevenir este tipo de ataque por parte del servidor es requerir que la petción POST incluya una palabra secreta específica del usuario generada por el sitio (la palabra secreta podría proporcionarla el servidor cuando envía el formulario web que se usa para hacer transferencias). Esta aproximación evita que John pueda crear su propio formulario, porque necesitaría conocer la palabra secreta que el servidor ha proporcionado para el usuario. Incluso si conociera esta palabra y creara un formulario para un usuario en particular, no podría usar el mismo formulario para atacar a todos los usuarios.

- -

Los frameworks web incluyen con frecuencia tales mecanismos de prevención de CSRF.

- -

Otras amenazas

- -

Otros ataques/vulnerabilidades incluyen:

- - - -

Hay muchas más. Para un lisado completo ver Category:Web security exploits (Wikipedia) y Category:Attack (Open Web Application Security Project).

- -

Unos cuantos mensajes clave

- -

Casi todos los exploits de las secciones anteriores tienen éxito cuando la aplicación web confía en los datos que vienen del explorador. Sea lo que sea que hagas para mejorar la seguridad de tu sitio web, deberías desinfectar todos los datos originados por el usuario antes de ser mostrados en el explorador, usados en queries SQL o pasados en una llamada al sistema operativo o fichero de sistema.

- -
-

Importante: La lección más importante que debes aprender acerca de la seguridad de sitios web es nunca confíes en los datos del explorador web. Esto incluye los datos en parámetros URL de las peticionesGET, datos POST, cabeceras HTTP y cookies, ficheros subidos por los usuarios, etc. Comprueba siempre y desinfecta todos los datos entrantes. Siempre asume lo peor.

-
- -

Otras cuantas medidas concretas que puedes tomar son:

- - - -

Los frameworks web pueden ayudar a mitigar muchas de las vulnerabilidades más comunes.

- -

Sumario

- -

Este artículo ha explicado el concepto de seguridad en sitios web y algunas de las amanazas más comunes contra las que tu sitio debería empezar a protegerse. Lo más importante que deberías entender es que ¡una aplicación web no puede confiar en ningún dato que provenga de explorador web! Todos los datos de usuario deberían ser desinfectados antes de ser mostrados, o usados en queries SQL o llamadas a ficheros de sistema.

- -

Hemos llegado al final de este módulo, tratando tus primeros pasos en la programación de lado servidor de un sitio web. Esperamos que hayas disfrutado del aprendizaje de los conceptos fundamentales y estés listo para seleccionar un framework web y empezar a programar.

- -

{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

- - - -

En este módulo

- - diff --git a/files/es/learn/server-side/primeros_pasos/vision_general_cliente_servidor/index.html b/files/es/learn/server-side/primeros_pasos/vision_general_cliente_servidor/index.html deleted file mode 100644 index 05ce1f9451..0000000000 --- a/files/es/learn/server-side/primeros_pasos/vision_general_cliente_servidor/index.html +++ /dev/null @@ -1,334 +0,0 @@ ---- -title: Visión General Cliente-Servidor -slug: Learn/Server-side/Primeros_pasos/Vision_General_Cliente_Servidor -tags: - - Aprendizaje - - Codificación de scripts - - Guía - - Principiante - - Programación lado servidor - - Servidor - - introducción -translation_of: Learn/Server-side/First_steps/Client-Server_overview ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
- -

Ahora que conoces el propósito y los beneficios potenciales de la programación de lado-servidor vamos a examinar en detalle lo que ocurre cuando un servidor recibe una "petición dinámica" desde un explorador web. Ya que el código de lado servidor de la mayoría de los sitios web gestiona peticiones y respuestas de formas similares, este artículo te ayudará a entender lo que necesitas hacer para escribir la mayor parte de tu propio código.

- - - - - - - - - - - - -
Prerequisitos:Conocimientos básicos de computación. Noción básica de lo que es un servidor.
Objetivo:Comprender lo que son las interacciones cliente-servidor en un sitio web dinámico, y en particular que operaciones necesita realizar el código de lado servidor.
- -

No hay código real en el debate porque ¡todavía no hemos seleccionado el framework web que usaremos para escribir nuestro código! Sin embargo este debate sí que es muy relevante incluso ahora, porque el comportamiento descrito debería ser implementado por tu código de lado servidor independientemente de qué lenguaje de programación o framework web hayas seleccionado.

- -

Servidores Web y HTTP (iniciación)

- -

Los exploradores web se comunican con los servidores web usando el Protocolo de Transferencia de HyperTexto (HyperTextTransfer Protocol HTTP). Cuando pinchas en un enlace sobre una página web, envías un formulario o ejecutas una búsqueda, el explorador envía una petición (Request) HTTP al servidor.

- -

Esta petición incluye:

- - - -

Los servidores web esperan los mensajes de petición de los clientes, los procesan cuando llegan y responden al explorador web con un mensaje de respuesta HTTP. La respuesta contiene un código de estado de respuesta HTTP que indica si la petición ha tenido éxito o no (ej. "200 OK" para indicar éxito, "404 Not Found" si el resurso no ha podido ser encontrado,  "403 Forbidden" si el usuario no está autorizado a acceder al recurso, etc). El cuerpo de la respuesta de éxito a una petición GET contendría el recurso solicitado.

- -

Cuando se devuelve una página HTML es renderizada por el explorador web. Como parte del procesamiento el explorador puede descubrir enlaces a otros recursos (ej. una página HTML normalmente referencia las páginas JavaScript y CSS), y enviará peticiones HTTP separadas para descargar estos ficheros.

- -

Los sitios web tanto estáticos como dinámicos (abordados en las secciones siguientes) usan exactamente los mismos protocolos/patrones de comunicación.

- -

Ejemplo de petición/respuesta GET

- -

Puedes realizar una petición GET simplemente pinchando sobre un enlace o buscando en un sitio (como la página inicial de un motor de búsquedas). Por ejemplo, la petición HTTP que se envía cuando realizas una búsqueda en MDN del término "visión general cliente servidor" se parecerá mucho al texto que se muestra más abajo (no será idéntica porque algunas partes del mensaje dependen de tu explorador/configuración).

- -
-

El formato de los mensajes HTTP está definido en el "estándard web" (RFC7230). No necesitas conocer este nivel de detalle, pero al menos ¡ahora sabes de donde viene todo esto!

-
- -

La petición

- -

Cada linea de la petición contiene información sobre ella. La primera parte se llama cabecera o header, y contiene información útil sobre la petición, de la misma manera que un HTML head contiene información útil sobre un documento (pero no el contenido mismo, que está en el cuerpo):

- -
GET https://developer.mozilla.org/en-US/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1
-Host: developer.mozilla.org
-Connection: keep-alive
-Pragma: no-cache
-Cache-Control: no-cache
-Upgrade-Insecure-Requests: 1
-User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
-Referer: https://developer.mozilla.org/en-US/
-Accept-Encoding: gzip, deflate, sdch, br
-Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7
-Accept-Language: en-US,en;q=0.8,es;q=0.6
-Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _gat=1; _ga=GA1.2.1688886003.1471911953; ffo=true
-
- -

La primera y segunda líneas contienen la mayoría de la información de la que hemos hablado arriba:

- - - -

La última linea contiene información sobre los cookies del lado cliente — puedes ver que en este caso el cookie incluye un id para gestionar las sesiones (Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...).

- -

Las líneas restantes contienen información sobre el explorador web usado y la clase de respuestas que puede manejar. Por ejemplo, puedes ver aquí que:

- - - -

Las peticiones HTTP también pueden tener un cuerpo, pero está vacío en este caso.

- -

La respuesta

- -

La primera parte de la respuesta a esta petición se muestra abajo. La cabecera o header contiene información como la siguiente:

- - - -

Al final del mensaje vemos el contenido del cuerpo (body) — que contiene el HTML real devuelto por la respuesta.

- -
HTTP/1.1 200 OK
-Server: Apache
-X-Backend-Server: developer1.webapp.scl3.mozilla.com
-Vary: Accept,Cookie, Accept-Encoding
-Content-Type: text/html; charset=utf-8
-Date: Wed, 07 Sep 2016 00:11:31 GMT
-Keep-Alive: timeout=5, max=999
-Connection: Keep-Alive
-X-Frame-Options: DENY
-Allow: GET
-X-Cache-Info: caching
-Content-Length: 41823
-
-
-
-<!DOCTYPE html>
-<html lang="en-US" dir="ltr" class="redesign no-js"  data-ffo-opensanslight=false data-ffo-opensans=false >
-<head prefix="og: http://ogp.me/ns#">
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-  <script>(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);</script>
-  ...
-
- -

El resto de la cabecera de la respuesta incluye información sobre la respuesta (ej. cuándo se generó), el servidor, y cómo espera el explorador manejar la página (ej. la linea X-Frame-Options: DENY le dice que al explorador que no está permitido incrustar esta página en un {{htmlelement("iframe")}} en otro sitio).

- -

Ejemplo de petición/respuesta POST

- -

Un HTTP POST se realiza cuando se envía un formulario que contiene información para ser guardada en el servidor.

- -

La petición

- -

El texto de abajo muestra la petición HTTP realizada cuando un usuario envía al sitio los detalles de un nuevo perfil. El formato de la petición es casi el mismo que en la petición GET del ejemplo mostrado previamente, aunque la primera linea identifica esta petición como POST. 

- -
POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1
-Host: developer.mozilla.org
-Connection: keep-alive
-Content-Length: 432
-Pragma: no-cache
-Cache-Control: no-cache
-Origin: https://developer.mozilla.org
-Upgrade-Insecure-Requests: 1
-User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
-Content-Type: application/x-www-form-urlencoded
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
-Referer: https://developer.mozilla.org/en-US/profiles/hamishwillee/edit
-Accept-Encoding: gzip, deflate, br
-Accept-Language: en-US,en;q=0.8,es;q=0.6
-Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _ga=GA1.2.1688886003.1471911953; ffo=true
-
-csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwillee&user-fullname=Hamish+Willee&user-title=&user-organization=&user-location=Australia&user-locale=en-US&user-timezone=Australia%2FMelbourne&user-irc_nickname=&user-interests=&user-expertise=&user-twitter_url=&user-stackoverflow_url=&user-linkedin_url=&user-mozillians_url=&user-facebook_url=
- -

La principal diferencia es que la URL no tiene parámetros. Como puedes ver, la información del formulario se codifica en el cuerpo de la petición (por ejemplo, el nombre completo del nuevo usuario se establece usando: &user-fullname=Hamish+Willee).

- -

La respuesta

- -

La respuesta a la petición se muestra abajo. El código de estado "302 Found" le dice al explorador que el POST ha tenido éxito, y que debe realizar una segunda petición HTTP para cargar la página especificada en el campo Location. La información es de lo contrario similar a la respuesta a una petición GET.

- -
HTTP/1.1 302 FOUND
-Server: Apache
-X-Backend-Server: developer3.webapp.scl3.mozilla.com
-Vary: Cookie
-Vary: Accept-Encoding
-Content-Type: text/html; charset=utf-8
-Date: Wed, 07 Sep 2016 00:38:13 GMT
-Location: https://developer.mozilla.org/en-US/profiles/hamishwillee
-Keep-Alive: timeout=5, max=1000
-Connection: Keep-Alive
-X-Frame-Options: DENY
-X-Cache-Info: not cacheable; request wasn't a GET or HEAD
-Content-Length: 0
-
- -
-

Nota: Las repuestas y las peticiones HTTP mostradas en estos ejemplos fueron capturadas usando la aplicación Fiddler, pero puedes obtener información similar usando sniffers web (ej. http://web-sniffer.net/) o usando extensiones del explorador como HttpFox. Puedes probarlo por tí mismo. Usa una de las herramientas enlazadas, y a continuación navega a través de un sitio y edita información del perfil para ver las diferentes peticiones y respuestas. La mayoría de los exploradores modernos también tienen herramientas que monitorizan las peticiciones de red (Por ejemplo, la herramienta Network Monitor en Firefox).

-
- -

Sitios estáticos

- -

Un sitio estático es aquél que devuelve desde el servidor el mismo contenido establecido de forma fija en el código cada vez que se solicita una página en particular. De manera que si por ejemplo tienes una página sobre un producto en /static/myproduct1.html , a todos los usuarios se les devolverá la misma página. Si añades otro producto similar a tu sitio necesitarás añadir otra página (ej. myproduct2.html) etc... Esto puede llegar a ser realmente muy poco eficiente — ¿qué sucede cuando alcanzas miles de páginas de productos? Repetirías un montón de código a lo largo de cada página (la plantilla básica de la página, la estructura, etc), y si quisieras cambiar cualquier cosa de la estructura de la página — como añadir una nueva sección de "productos relacionados" por ejemplo — tendrías que cambiar cada página individualmente. 

- -
-

Nota: Los sitios estáticos son excelentes cuando tienes un pequeño número de páginas y quieres enviar el mismo contenido a todos los usuarios. Sin embargo pueden tener un coste de mantenimiento significante a medida que es número de páginas se hace grande.

-
- -

Recapitulemos cómo funciona ésto, mirando otra vez el diagrama de la arquitectura de un sitio estático que vimos en el anterior artículo.

- -

A simplified diagram of a static web server.

- -

Cuando un usuario quiere navegar a una página, el explorador envía una petición HTTP GET especificando la URL de su página HTML. El servidor recupera el documento solicitado de su sistema de ficheros y devuelve una respuesta HTTP conteniendo el documento y un código de estado de respuesta HTTP "200 OK" (indicando éxito). El servidor podría devolver un código de estado diferente, por ejemplo "404 Not Found" si el fichero no está presente en el servidor, o "301 Moved Permanently" si el fichero existe pero ha sido redirigido a una localización diferente.

- -

El servidor de un sitio estático sólo tendrá que procesar peticiones GET, ya que el servidor no almacena ningún dato modificable. Tampoco cambia sus respuestas basádonse en los datos de la petición HTTP (ej. parámetros URL o cookies). 

- -

Entendiendo cómo funcionan los sitios estáticos es útil sin embargo cuando se aprende programación de lado servidor, porque los sitios dinámicos gestionan las peticiones de ficheros estáticos (CSS, JavaScript, imágenes estáticas, etc.) exactamente de la misma forma.

- -

Sitios dinámicos

- -

Un sitio dinámico es aquél que puede generar y devolver contenido basándose en la URL y los datos específicos de la petición (en vez de devolver siempre para una URL en particular el mismo fichero especificado en el código de forma fija). Usando el ejemplo de un sitio de productos, el servidor almacenaría "datos" del producto en una base de datos en vez de ficheros HTML individuales. Cuando se reciba una petición HTTP GET para un producto, el servidor determina el ID del mismo, extrae los datos de la base y construye la página HTML de la respuesta insertando los datos dentro de la plantilla HTML. Esto tiene una ventaja primordial sobre un sitio estático: 

- -

Usar una base de datos permite que la información del producto se almacene de forma eficiente y que se pueda ampliar, modificar y buscar fácilmente.

- -

Usar plantillas HTML hace que sea muy fácil cambiar la estructura HTML, porque sólo se necesita hacer en un sólo lugar, en una única plantilla y no a lo largo de miles de páginas estáticas.

- -

Anatomía de una petición dinámica

- -

Esta sección proporciona una visión general paso a paso de un ciclo de petición y respuesta HTTP "dinámicas", construyendo con más detalle lo que vimos en el último artículo. Para "hacer cosas reales" usaremos el contexto del sitio web de un manager de equipos deportivos donde un entrenador puede seleccionar el nombre y tamaño de su equipo en un formulario HTML y obtener de vuelta una sugerencia de "mejor alineación" para el próximo partido. 

- -

El diagrama de abajo muestra los elementos principales del sitio web del "entrenador del equipo", junto con etiquetas numeradas de la secuencia de operaciones cuando el entrenador accede a su lista de "mejor equipo". Las partes del sitio que lo hacen dinámico son las Aplicaciones Web (que es como llamaremos al código del lado servidor que procesa las peticiones HTTP y devuelve respuestas HTTP), la Base de Datos, que contiene la información sobre los jugadores, equipos, entrenadores y sus relaciones, y las Plantillas HTML.

- -

This is a diagram of a simple web server with step numbers for each of step of the client-server interaction.

- -

Después de que el entrenador envíe el formulario con el nombre del equipo y el número de jugadores, la secuencia de operaciones es la siguiente:

- -
    -
  1. El explorador web crea una petición HTTP GET al servidor usando la URL base del recurso (/best) y codifica el equipo y número de jugadores como parámetros URL (ej. /best?team=my_team_name&show=11) o formando parte de un patrón URL (ej. /best/my_team_name/11/). Se usa una petición GET porque la petición sólo recoge datos (no modifica ninguno).
    2. -
  2. El Servidor Web detecta que la petición es "dinámica" y la reenvía a la Aplicación para que la procese (el servidor web determina como manejar diferentes URLs basándose en reglas de emparejamiento de patrones definidas en su configuración).
    3. -
  3. La Aplicación Web identifica que la intención de la petición es obtener la "lista del mejor equipo" basándose en la URL (/best/) y encuentra el nombre del equipo y el número de jugadores requeridos a partir de la URL. La Aplicación Web obtiene entonces la información solicitada de la base de datos (usando parámetros "internos" adicionales que definen qué jugadores son los "mejores", y posiblemente también obteniendo la identidad del entrenador que ha iniciado sesión a partir de un cookie del lado cliente).
    4. -
  4. La Aplicación Web crea dinámicamente una página HTML por medio de colocar los datos (de la base) en marcadores de posición dentro de la plantilla HTML.
    5. -
  5. La Aplicación Web devuelve el HTML generado al explorador web (via el Servidor Web), junto con un código de estado HTTP de 200 ("éxito"). Si algo impide que se pueda devolver el HTML entonces la Aplicación Web devolverá otro código — por ejemplo "404" para indicar que el equipo no existe.
    6. -
  6. El Explorador Web comenzará a continuación a procesar el HTML devuelto, enviando peticiones separadas para obtener cualquier otro fichero CSS o JavaScript que sea referenciado (ver paso 7).
    7. -
  7. El Servidor Web carga ficheros estáticos del sistema de ficheros y los devuelve al explorador directamente (de nuevo, la gestión correcta de los ficheros está basada en las reglas de configuración y de emparejamiento de patrones URL).
    8. -
- -

La operación de actualizar un registro de la base de datos se gestionaría de forma similar, excepto que, como para cualquier actualización de la base de datos, la petición HTTP desde el explorador debería ser codificada como petición POST. 

- -

Realización de otros trabajos

- -

La misión de una Aplicación Web es recibir peticiones HTTP y devolver respuestas HTTP. Mientras que interactuar con la base datos para obtener o actualizar información son tareas muy comunes, el código puede hacer otras cosas al mismo tiempo, o no interactuar con una base de datos en absoluto.

- -

Un buen ejemplo de una tarea adicional que una  Aplicación Web podría realizar sería el envío de un correo electrónico a los usuarios para confirmar su registro en el sitio. El sito podría también realizar logging u otras operaciones.

- -

Devolución de alguna otra cosa distinta a HTML

- -

El código lado servidor de un sitio web no tiene que devolver fragmentos/ficheros HTML en la respuesta. Puede en vez de eso crear dinámicamente y devolver otros tipos de ficheros (texto, PDF, CSV, etc.) o incluso datos (jSON, XML, etc.).

- -

La idea de devolver datos a un explorador web de forma que pueda actualizar su propio contenido dinámicamente ({{glossary("AJAX")}}) ha estado dando vueltas durante bastante tiempo. Más recientemente han llegado a ser muy populares las "apps de una sola página", donde el sitio web entero está escrito con un solo fichero HTML que es actualizado dinámicamente cuando se necesita. Los sitios web creados usando este estilo de aplicación transfieren una gran parte del coste computacional desde el servidor al explorador web, y pueden dar como resultado sitios web que se comportan mucho más como aplicaciones nativas (con una respuesta rápida "highly responsive", etc.).

- -

Los frameworks Web simplifican la programación de lado servidor

- -

Los frameworks de lado servidor hacen mucho más fácil escribir código para gestionar las operaciones descritas más arriba.

- -

Una de las operaciones más importantes que realizan es proporcionar mecanismos simples para mapear las URLs de diferentes recursos/páginas a funciones para su gestión específicas. Esto hace más fácil mantener separado el código asociado con cada recurso. Esto tiene también beneficios en términos de mantenimiento, ya que puedes cambiar la URL usada para entregar una característica particular en un sitio, sin tener que cambiar la función de gestión.

- -

Por ejemplo, considera el siguiente código Django (Python) que mapea dos patrones URL a dos funciones de visualización. El primer patrón asegura que una petición HTTP con una URL de  /best sea pasada a la función llamada index() en el módulo views. En cambio, una petición que tiene el patrón "/best/junior", se pasará a la función de visualización junior().

- -
# file: best/urls.py
-#
-
-from django.conf.urls import url
-
-from . import views
-
-urlpatterns = [
-    # example: /best/
-    url(r'^$', views.index),
-    # example: /best/junior/
-    url(r'^junior/$', views.junior),
-]
- -
-

Nota: El primer parámetro en las funciones url() puede parecer un poco extraño (ej. r'^junior/$') porque usan una técnica de emparejamiento de patrones llamada "expresiones regulares" ("regular expressions", RegEx, o RE). No necesitas saber cómo funcionan las expresiones regulares en este momento, tan sólo que nos permiten emparejar patrones en el URL (en vez de los valores insertados en el código de forma fija que veíamos más arriba) y los usan como parámetros en nuestras funciones de visualización. Como ejemplo, una RegEx simple podría decir "empareja una simple letra mayúscula, seguida de entre 4 y 7 letras minúsculas."

-
- -

El framework web también hace fácil a una función de visualización extraer información de la base de datos. La estructura de nuestros datos está definida en modelos, que son las clases Python que definen los campos que serán almacenados en la base de datos subyacente. Si tenemos un modelo llamado Team con un campo de "team_type" podemos usar un query de sintaxis simple para recuperar todos los equipos que son de un tipo particular.

- -

Los ejemplos de abajo recuperan una lista de todos los equipos que tienen el team_type de "junior" exacto (teniendo en cuenta la capitalización, mayúsculas o minúsculas) — nota de formato: el nombre del campo (team_type) seguido de un guión bajo doble, y a continuación el tipo de emparejamiento a usar (en este caso exact). Hay muchos otros tipos de emparejamiento y podemos encadenarlos fácilmente. Podemos controlar el orden y número de resultados que se devuelven. 

- -
#best/views.py
-
-from django.shortcuts import render
-
-from .models import Team
-
-
-def junior(request):
-    list_teams = Team.objects.filter(team_type__exact="junior")
-    context = {'list': list_teams}
-    return render(request, 'best/index.html', context)
-
- -

Después de que la función junior() obtenga la lista de equipos junior, llama a la función render(), pasándole el HttpRequest original,  una plantilla HTML, y un objeto "contexto" que define la información a ser incluida en la plantilla. La función render() es una función de conveniencia que genera HTML usando un contexto y una plantilla HTML, y devuelve un objeto HttpResponse.

- -

Obviamente los frameworks web pueden ayudarte con un monton de otras tareas. Debatiremos sobre un montón más de beneficios y opciones de frameworks web en el próximo artículo.

- -

Sumario

- -

En este punto deberías tener una buena visión general de las operaciones que el código de lado servidor tiene que realizar, y conocer algunas de las formas en que un framework web de lado servidor las puede hacer más fáciles.

- -

En el módulo siguiente te ayudaremos a elegir el mejor Framework Web para tu primer sitio.

- -

{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

- -

 

- -

En este módulo

- - - -

 

diff --git a/files/es/learn/server-side/primeros_pasos/web_frameworks/index.html b/files/es/learn/server-side/primeros_pasos/web_frameworks/index.html deleted file mode 100644 index 8c381a772e..0000000000 --- a/files/es/learn/server-side/primeros_pasos/web_frameworks/index.html +++ /dev/null @@ -1,306 +0,0 @@ ---- -title: Frameworks Web de lado servidor -slug: Learn/Server-side/Primeros_pasos/Web_frameworks -tags: - - Aprendizaje - - Codificación de scripts - - Frameworks web - - Guía - - Principiante - - Programación lado servidor - - Servidor - - introducción -translation_of: Learn/Server-side/First_steps/Web_frameworks ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}
- -

El artículo anterior te mostró que pinta tiene la comunicación entre los clientes web y los servidores, la naturaleza de las peticiones y respuestas HTTP, y lo que necesita hacer una aplicación web de lado servidor para responder a las peticiones de un explorador web. Con este conocimiento en nuestra mochila, es hora de explorar cómo los frameworks web pueden simplificar estas tareas, y darte una idea de cómo escogerías un framework para tu primera aplicación web de lado servidor.

- - - - - - - - - - - - -
Prerequisitos: -

Conocimientos de computación básicos. Comprensión de alto nivel de cómo gestiona y responde a las peticiones HTTP el código de lado servidor (ver Visión general Cliente-Servidor).

-
Objetivo: -

Entender cómo los frameworks web pueden simplificar el desarrollo/mantenimiento de código de lado servidor y conseguir que los lectores piensen sobre la elección del framework para su propio desarrollo.

-
- -

Las siguientes secciones ilustran algunos puntos usando fragmentos de código tomados de frameworks web reales. No te preocupes si no todo tiene sentido ahora; te pondremos a trabajar sobre el código en nuestros módulos de framework específicos.

- -

Visión general

- -

Los frameworks de lado servidor (es decir, "los frameworks de aplicaciones web") son frameworks software que hacen más fácil escribir, mantener y escalar aplicaciones web. Proporcionan herramientas y bibliotecas que simplifican tareas comunes de desarrollo web, incluyendo enrutado de URLs a los manejadores apropiados, interactuación con bases de datos, soporte de sesiones y autorizaciones de usuario, formateado de la salida (ej, HTML, JSON, XML), y mejora de la seguridad contra los ataques web.

- -

La sección siguiente proporciona un poco más detalle sobre cómo los frameworks web pueden facilitar el desarrollo de aplicaciones web. Explicaremos a continuación algunos de los criterios que puedes usar para elegir un framework web, y luego hacer una lista de algunas de tus opciones.

- -

¿Qué puede hacer por tí un framework web?

- -

Los frameworks web proporcionan herramientas y bibliotecas para simplificar operaciones comunes de desarrollo web. No tienes que usar un framework web de lado servidor, pero se recomienda encarecidamente — te hará la vida mucho más fácil.

- -

Esta sección debate algo de la funcionalidad que proporcionan con frecuencia los frameworks web (!no todo framework proporcionará necesariamente todas estas caracteríticas!)

- -

Trabajar directamente con peticiones y respuestas HTTP

- -

Como vimos en el último artículo, los servidores web y los exploradores se comunican vía el protocolo HTTP — los servidores esperan las peticiones HTTP del explorador y devuelven información en respuestas HTTP. Los frameworks web te permiten escribir sintaxis simplificada que generará el código de lado servidor para trabajar con estas peticiones y respuestas. Esto significa que tendrás un trabajo más fácil, interacción más fácil, código de más alto nivel en vez de primitivas de red de bajo nivel.

- -

El ejemplo de más abajo muestra cómo funciona ésto en el framework web Django (Python). Cada función de visualización "view" (un manejador de peticiones) recibe un objeto HttpRequest que contiene información de petición, y se le pide devolver un objeto HttpResponse con la salida formateada (en este caso una cadena de texto).

- -
# Django view function
-from django.http import HttpResponse
-
-def index(request):
-    # Get an HttpRequest (request)
-    # perform operations using information from the request.
-    # Return HttpResponse
-    return HttpResponse('Output string to return')
-
- -

Enrutado de peticiones al manejador adecuado

- -

La mayoría de sitios proporcionan un gran número de recursos diferentes, accesibles a través de distintas URLs. La gestión de todo esto en una sola función sería difiicil de mantener, de manera que los frameworks web proporcionan mecanismos simples para mapear patrones URL a funciones de gestión específicas. Esta aproximación tiene también beneficios en términos de mantenimiento, porque puedes cambiar el URL que se usa para entregar una característica en particular sin tener que cambiar el código subyacente.

- -

Diferentes frameworks usan diferentes mencanismos para el mapeo. Por ejemplo, el framework web Flask (Python) añade rutas a las funciones de visualización usando un "decorador".

- -
@app.route("/")
-def hello():
-    return "Hello World!"
- -

Por el contrario Django espera que los desarrolladores definan una lista de mapeos URL entre un patrón URL y una función de visualización.

- -
urlpatterns = [
-    url(r'^$', views.index),
-    # example: /best/myteamname/5/
-    url(r'^(?P<team_name>\w.+?)/(?P<team_number>[0-9]+)/$', views.best),
-]
-
- -

Fácil acceso a los datos en la petición

- -

Los datos pueden codificarse en una petición HTTP de muchas maneras. Una petición GET para recuperar ficheros o datos de un servidor puede codificar los datos que se necesitan en parámetros URL o dentro de una estructura URL. Una petición POST para actualizar un recurso en el servidor puede en cambio incluir la información de actualización como "datos POST" dentro del cuerpo de la petición. La petición HTTP puede también incluir información sobre la sesión o usuario actual en un cookie de lado cliente.

- -

Los frameworks web proporcionan mecanismos apropiados del lenguaje de programación para acceder a esta información. Por ejemplo, el objeto HttpRequest  que pasa Django a toda función de visualización contiene métodos y propiedades para acceder a la URL de destino, el tipo de petición (ej. HTTP GET), parámetros GET  o POST, cookie y datos de session, etc. Django puede también pasar información codificada en la estructura de la URL definiendo "patrones de captura" en el mapeador URL (mira el último fragmento de código de la sección de arriba).

- -

Abstraer y simplificar el acceso a bases de datos

- -

Los sitios web utilizan bases de datos para almacenar información tanto para ser compartida con los usuarios como sobre los propios usuarios. Los frameworks web proporcionan frecuentemente una capa de base de datos que abstrae las operaciones de lectura, escritura, consulta y borrado de la base. Nos referimos a esta capa de abstracción como Mapeador de Objetos Relacionados (Object-Relational Mapper, ORM).

- -

Usar un ORM tiene dos beneficios:

- - - -

Por ejemplo, el framework web de Django proporciona un ORM, y utiliza la referencia del objeto usado para definir la estructura de un registro similar al modelo. El modelo especifica los tipos de campos que se almacenarán, lo que puede proporcionar una validación a nivel de campo sobre qué información se puede guardar (ej. un campo de email sólo permitiría direcciones válidas de correo electrónico). Las definiciones de campos pueden también especificar su tamaño máximo, etiquetas de texto para los formularios, etc. El modelo no establece ninguna información sobre la base de datos subyacente ya que ese es un ajuste de configuración que se puede cambiar de forma separada de nuestro código.

- -

El primer fragmento de código más abajo muestra un modelo de Django muy simple para un objeto Team. Éste almacena el nombre y nivel del equipo como campos de caracteres y especifica el número máximo de éstos que pueden almacenarse en cada registro. El team_level es un campo de selección, de manera que proporcionamos un mapeo entre las opciones a mostrar en pantalla y los datos a almacenar, junto con un valor por defecto.

- -
#best/models.py
-
-from django.db import models
-
-class Team(models.Model):
-    team_name = models.CharField(max_length=40)
-
-    TEAM_LEVELS = (
-        ('U09', 'Under 09s'),
-        ('U10', 'Under 10s'),
-        ('U11, 'Under 11s'),
-        ...  #list our other teams
-    )
-    team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
-
- -

El modelo de Django proporciona una API de consulta simple para buscar en la base de datos. Ésta puede comprobar coincidencias contra un gran número de campos al mismo tiempo usando diferentes criterios (ej. exacto, insensible a las mayúsculas, mayor que, etc.), y puede soportar sentencias complejas (por ejemplo, puedes especificar una búsqueda de equipos U11 que tengan un nombre de equipo que empiece por "Fr" or finalice con "al").

- -

El segundo fragmento de código muestra una función de visualización (manejador de recurso) para mostrar en pantalla todos nuestros equipos U09. En este caso especificamos que queremos filtrar todos los registros donde el campo team_level tenga exactamente el texto 'U09' (fíjate debajo cómo este criterio se pasa como argumento a la función filter() con el nombre de campo y tipo de coincidencia separados por guiones bajos dobles: team_level__exact).

- -
#best/views.py
-
-from django.shortcuts import render
-from .models import Team
-
-def youngest(request):
-    list_teams = Team.objects.filter(team_level__exact="U09")
-    context = {'youngest_teams': list_teams}
-    return render(request, 'best/index.html', context)
-
- -
-
- -

Renderización de datos

- -

Los frameworks web proporcionan con frecuencia sistemas de plantillas. Éstas te permiten especificar la estructura de un documento de salida, usando marcadores de posición para los datos que serán añadidos cuando se genere la página. Las plantillas se usan con frecuencia para crear HTML, pero también pueden crear otros tipos de documentos.

- -

Los frameworks web proporcionan con frecuencia un mecanismo para facilitar la generación de otros formatos a partir de los datos almacenados, incluyendo {{glossary("JSON")}} y {{glossary("XML")}}.

- -

Por ejemplo, el sistema de plantillas de Django te permite especificar variables usando una sintaxis de "llaves dobles" (ej. {{ variable_name }}),  que serán reemplazadas por valores pasados desde la función de visualización cuando la página sea renderizada. El sistema de plantillas también proporciona soporte para expresiones (con la sintaxis: {% expression %}), que permite a las plantillas realizar operaciones simples como iterar sobre la lista de valores pasados a la misma.

- -
-

Nota: Muchos otros sistemas de plantillas usan una sintaxis similar, ej.: Jinja2 (Python), Handlebars (JavaScript), Moustache (JavaScript), etc.

-
- -

El fragmento de código de abajo muestra como hacer este trabajo. Continuando el ejemplo del "equipo más joven" de la sección anterior, la "view" pasa a la plantilla HTML una variable tipo lista llamada youngest_teams. Dentro del esqueleto HTML tenemos una expresión que primero comprueba que la variable youngest_teams existe, y luego itera sobre ella en un bucle for. En cada iteración la plantilla presenta en pantalla el valor del team_name  del equipo de uno de los elementos de la lista.

- -
#best/templates/best/index.html
-
-<!DOCTYPE html>
-<html lang="en">
-<body>
-
- {% if youngest_teams %}
-    <ul>
-    {% for team in youngest_teams %}
-        <li>\{\{ team.team_name \}\}</li>
-    {% endfor %}
-    </ul>
-{% else %}
-    <p>No teams are available.</p>
-{% endif %}
-
-</body>
-</html>
-
- -

Como escoger un framework web

- -

Existen muchos frameworks web para casi todos los lenguajes de programación que quieras usar (listamos unos pocos de los frameworks más populares en la sección siguiente). Con tantas opciones, llega a ser difícil deducir qué framework proporciona el mejor punto de partida para tu nueva aplicación web. 

- -

Algunos de los factores que pueden afectar tu decisión son:

- - - -

Hay muchos otros posibles factores, incluyendo licenciamiento, si el framework está bajo desarrollo activo o no, etc.

- -

Si eres un completo principiante en la programación probablemente escogerás tu framework basándote en la "facilidad de aprendizaje". Además de la "facilidad de uso" del lenguaje mismo, la alta calidad de la documentación/tutoriales y una comunidad activa que ayuda a nuevos usuarios son tus recursos más valiosos. Nosotros hemos escogido Django (Python) y Express (Node/JavaScript) para escribir nuestros ejemplos de más adelante en el curso, principalmente porque son fáciles de aprender y tienen un buen soporte.

- -
-

Nota: Vayamos a los sitios principales de Django (Python) y Express (Node/JavaScript) y comprobemos su documentación y su comunidad.

- -
    -
  1. Navega a los sitios principales (enlazados abajo) -
      -
    • Pincha en los enlaces de los menus de Documentación (cosas que se llaman como "Documentación, Guía, Referencia API, Primeros Pasos".
      • -
    • ¿Puedes ver temas que te muestran como configurar enrutado URL, plantillas y bases de datos/modelos?
      • -
    • ¿Son los documentos suficientemente claros?
      • -
    -
    2. -
  2. Navega a las listas de correo de cada sitio (accesible desde los enlaces de Comunidad). -
      -
    • ¿Cuántas preguntas se han realizado en unos pocos días recientes?
      • -
    • ¿Cuántas tienen respuestas?
      • -
    • ¿Tienen una comunidad activa?
      • -
    -
    3. -
-
- -

¿Unos pocos frameworks web buenos?

- -

Avancemos ahora, y debatamos unos pocos frameworks web específicos de lado servidor.

- -

Los frameworks de lado servidor de más abajo representan unos pocos de los más populares disponibles en el momento de escribir este artículo. Todos ellos tienen todo lo que necesitas para ser productivo — son de código abierto, están bajo desarrollo activo, tienen comunidades entusiastas creando documentación y ayudando a los usuarios en paneles de debate, y se usan en un gran número de sitios web de perfil alto. Hay muchos otros frameworks de lado servidor fantásticos que puedes descubrir usando una búsqueda básica en internet. 

- -
-

Nota: ¡Las descripciones vienen (parcialmente) de los sitios web de los frameworks!

-
- -

Django (Python)

- -

Django es un Framework Web Python de alto nivel que promueve el desarrollo rápido y limpio y el diseño pragmático. Construido por desarrolladores experimentados, tiene en cuenta muchos de los problemas del desarrollo web, de manera que puedes focalizarte en escribir el código de tu app sin necesidad de reinventar la rueda. Es gratis y de código abierto.

- -

Django sigue la filosofía de "Baterias incluidas" y proporciona casi todo lo que la mayoría de desarrolladores querría hacer "de fábrica". Como todo está incluido, todo funciona en conjunto, sigue principios de diseño consistentes y tiene una extensa documentación actualizada. Es también veloz, seguro y muy escalable. Al estar basado en Python, el código de Django es fácil de leer y de mantener.

- -

Entre los sitios populares que usan Django (según su página web) se incluyen: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack.

- -

Flask (Python)

- -

Flask es un microframework para Python. 

- -

A pesar de ser minimalista, Flask puede crear sitios web "de fábrica". Contiene un servidor de desarrollo y depurador, e incluye soporte para plantillas Jinja2, cookies seguros, prueba de unidades, y distribución de peticiones RESTful. Tiene  buena documentación y una comunidad activa. 

- -

Flask se ha vuelto extremadamente popular, particularmente entre desarrolladores que necesitan proporcionar servicios web en sistemas pequeños, y con recursos escasos (ej. ejecutar un servidor web en una  Raspberry Pi, Controladores de Drones, etc.)

- -

Express (Node.js/JavaScript)

- -

Express es un framework web veloz, no dogmático, flexible y minimalista para Node.js (Node es un entorno sin explorador web para ejecutar JavaScript). Proporciona un conjunto de características robusto para aplicaciones web y móviles y entrega valiosos métodos de utilidades HTTP y middleware.

- -

Express es extremadamente popular, en parte porque facilita la migración de programadores web de JavaScript de lado cliente a desarrollo de lado servidor, y en parte porque es eficiente con los recursos (el entorno de node subyacente usa multitarea ligera dentro de un thread en vez de expandirse en procesos separados para cada nueva petición web).

- -

Debido a que Express es un framework web minimalista no incorpora cada componente que querrías usar (por ejemplo, el acceso a bases de datos y el soporte de usuarios y sesiones se proporciona a través de bibliotecas independientes). Hay muchos componentes independientes excelentes, !pero algunas veces puede ser difícil deducir cuál es el mejor para un propósito en particular!

- -

Muchos frameworks populares y completamente equipados (incluyendo ambos tipos de frameworks de lado servidor y de lado cliente) están basados en Express, como Feathers, ItemsAPI, KeystoneJS, Kraken, LEAN-STACK, LoopBack, MEAN, and Sails.

- -

Un montón de compañías de perfil alto usan Express, como: Uber, Accenture, IBM, etc. (aquí tienes una lista).

- -

Ruby on Rails (Ruby)

- -

Rails (normalmente referenciado como "Ruby on Rails") es un framework web escrito para el lenguaje de programación Ruby.

- -

Rails sigue una filosofía de diseño muy similar a Django. Como Django proporciona mecanismos estándard para el enrutado de URLs, acceso a datos de bases, generación de plantillas y formateo de datos como {{glossary("JSON")}} o {{glossary("XML")}}. Promueve de forma similar el uso de patrones de diseño como DRY ("dont repeat yourself", no te repitas — escribir el código una única vez si es posible), MVC (model-view-controller) y numerosos otros.

- -

Hay por supuesto muchas diferencias debido a decisiones específicas de diseño y la naturaleza de los lenguajes.

- -

Rails se usa en sitios de perfil alto, como: Basecamp, GitHub, Shopify, Airbnb, Twitch, SoundCloud, Hulu, Zendesk, Square, Highrise.

- -

ASP.NET

- -

ASP.NET es un framework web de código abierto desarrollado por Microsoft para construir aplicaciones y servicios modernos. Con ASP.NET puedes crear rápidamente sitios web basados en HTML, CSS, y JavaScript, escalarlos para ser usados por milllones de usuarios y añadir fácilmente capacidades complejas como APIs web, formularios sobre datos o comunicaciones en tiempo real.

- -

Uno de los diferenciadores de ASP.NET es que está construido sobre el Common Language Runtime (CLR), permitiendo a los programadores escribir código ASP.NET usando cualquier lenguaje .NET soportado (C#, Visual Basic, etc.). Como muchos productos Microsoft se beneficia de herramientas excelentes (frecuentemente gratuitas), y una comunidad de desarrolladores activa, y documentación bien escrita.

- -

ASP.NET se usa por Microsoft, Xbox.com, Stack Overflow, y muchos otros.

- -

Mojolicious (Perl)

- -

Mojolicious es un framework web de nueva generación para el lenguaje de programación Perl.

- -

Hace tiempo en los primeros días de la Web, mucha gente aprendió Perl gracias a una magnífica biblioteca llamada CGI. Era lo suficientemente simple para empezar sin saber mucho sobre el lenguaje y lo suficientemente potente para mantenerte en marcha. Mojolicious implementa esta idea usando el último grito de las tecnologías.

- -

Algunas de las caracteríticas que proporciona Mojolicious son: Framework Web en tiempo real, para crecer fácilmente desde prototipos de un solo fichero hasta aplicaciones web MVC bien estructuradas; rutas RESTful, plugins, comandos, plantillas especificas de Perl, negociación de contenidos, gestión de sesiones, validación de formatos, framework de pruebas, servidor de ficheros estáticos, detección de CGI/PSGI, soporte Unicode de primera clase; Implementación  cliente/servidor completamente equipada de HTTP y WebSocket con IPv6, TLS, SNI, IDNA, HTTP/SOCKS5 proxy, UNIX domain socket, Comet (long polling), keep-alive, connection pooling, timeout, cookie, y soporte de compresión multipart y gzip; parseadores JSON y HTML/XML y generadores con soporte de selector CSS; Muy limpio, portable y API orientada a objetos y Perl puro sin magia oculta; Código fresco basado en años de experiencia, gratis y de código abierto.

- -

Sumario

- -

Este artículo ha mostrado que los frameworks web pueden hacer fácil el desarrollo y mantenimiento del código de lado servidor. También ha proporcionado una visión general de alto nivel de unos pocos frameworks más populares y debatido los criterios para elegir el framework para una aplicación web. Deberías tener en este momento una idea de cómo elegir un framework web para tu propio desarrollo de lado servidor. Si no, no te preocupes — más tarde a lo largo del curso te daremos tutoriales detallados de Django y Express para darte algo de experiencia de funcionamiento real con un framework web.

- -

Para el próximo artículo de este módulo cambiaremos de dirección ligeramente y consideraremos la seguridad web.

- -

{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}

- -

 

- -

En este modulo

- - - -

 

diff --git a/files/es/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/index.html new file mode 100644 index 0000000000..e9bdd36eca --- /dev/null +++ b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/index.html @@ -0,0 +1,133 @@ +--- +title: Entendiendo los frameworks de JavaScript del lado del cliente +slug: Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks +tags: + - Aprender + - Principiante +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks +--- +
{{LearnSidebar}}
+ +

Los frameworks de JavaScript son una parte esencial del desarrollo web front-end moderno, los cuales proveen a los desarrolladores herramientas probadas y testeadas para la creación de aplicaciones web interactivas y escalables. Muchas empresas modernas utilizan frameworks como parte estándar de sus herramientas, por lo que muchos trabajos de desarrollo front-end en la actualidad requieren experiencia en frameworks.

+ +

Como aspirante a desarrollador front-end, puede resultar difícil saber por dónde empezar cuando se trata de aprender sobre frameworks; hay muchos frameworks diferentes para elegir, nuevas opciones surgen todo el tiempo. En su mayoría funcionan de forma similar, pero hacen algunas cosas de manera diferente, y hay algunas cosas específicas con las que se debe tener cuidado a la hora de usar frameworks.

+ +

En esta serie de artículos, tenemos como objetivo brindarte un punto de partida cómodo que te sirva de ayuda para comenzar a aprender sobre frameworks. Nuestra intención no es enseñarte, de manera exhaustiva, todo lo que se necesita saber sobre React/ReactDOM, o Vue, o algún otro framework en específico; la documetación de los equipos de los frameworks (entre otros recursos) ya cumplen esta función. En su lugar, queremos brindarte respaldo y responder primero a preguntas más fundamentales como:

+ + + +

Después de esto, proveeremos algunos tutoriales que cubren los aspectos básicos de algunos de los diferentes frameworks que existen, de manera que puedas tener el contexto y la familiaridad suficientes para poder empezar a profundizar por tu propia cuenta. Queremos que avances y aprendas sobre los frameworks de manera pragmática, de forma tal que se tengan presente las buenas prácticas esenciales de la plataforma web, como lo es la accesibilidad.

+ +

Empieza ahora con "Introducción a los frameworks del lado del cliente"

+ +

Prerrequisitos

+ +

Antes de intentar aprender sobre los frameworks del lado del cliente, es recomendable que conozcamos los conceptos básicos de los principales lenguajes de la web: HTML, CSS, y —especialmente— JavaScript.

+ +

Como resultado, tu código será más consistente y profesional, por lo que podrás solucionar problemas con mayor confianza si comprende las características fundamentales de la plataforma web sobre las que se basan los frameworks.

+ +

Guías introductorias

+ +
+
1. Introducción a los frameworks del lado del cliente
+
Comenzamos nuestro estudio sobre los frameworks con una descripción general del área, repasando un poco de historia sobre JavaScript y los frameworks, por qué estos existen, y qué nos brindan; por donde empezar al momento de escoger un framework por aprender y qué alternativas existen a los frameworks del lado del cliente.
+
2. Características principales de los frameworks
+
Cada framework destacado de JavaScript tiene un enfoque diferente para actualizar el DOM, manejar los eventos del navegador, y brindarte una experiencia de desarrollo satisfactoria. En este artículo, exploraremos las características principales de "los cuatro grandes" frameworks, observando cómo estos tienden a operar desde un nivel alto, al igual que las diferencias entre ellos.
+
+ +

Tutoriales de React

+ +
+

Nota: Los tutoriales de React se probaron por última vez en mayo de 2020, con React/ReactDOM 16.13.1 y create-react-app 3.4.1.

+ +

Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación React en nuestro repositorio todo-react. Para una versión en vivo, consulta https://mdn.github.io/todo-react-build/.

+
+ +
+
1. Primeros pasos en React
+
En este artículo conoceremos React. Descubriremos algunos detalles sobre su trasfondo y casos de uso, configuraremos una cadena básica de herramientas para React en nuestra computadora local, crearemos y jugaremos con una aplicación inicial sencilla, mientras aprendemos —durante el proceso— un poco acerca de cómo funciona React.
+
2. Comenzando con nuestra lista de tareas de React
+
Digamos que se nos ha encomendado la tarea de crear una prueba de concepto (Proof of Concept — PoC) en React: una aplicación que permita a los usuarios agregar, editar y eliminar tareas en las que se quiera trabajar, pero que también permita marcar las tareas como completadas sin eliminarlas. Este artículo te guiará en la organización de la estructura y los estilos básicos del componente App, de manera que esté listo para la definición e interactividad de componentes individuales, los cuales agregaremos más adelante.
+
3. Basando nuestra aplicación React en componentes
+
Hasta este momento, nuestra aplicación no hace gran cosa. Antes de que podamos hacerla funcionar, tenemos que dividirla en componentes descriptivos y manejables. React no tiene reglas estrictas para lo que, se considera o no, un componente, ¡eso depende de ti! En este artículo, te mostraremos una forma raznoable de dividir nuestra aplicación en componentes.
+
4. Interactividad en React: eventos y estado
+
Habiendo elaborado nuestro plan de componentes, es hora de comenzar a actualizar nuestra aplicación, para que pase de ser una interfaz de usuario completamente estática a una que nos permita, realmente, interactuar y cambiar las cosas. Es eso mismo lo que haremos en este artículo, profundizando en los eventos y el estado a medida que avancemos.
+
5. Interactividad en React: edición, filtrado, renderizado condicional
+
A medida que nos acercamos al final de nuestro viaje en React (al menos por ahora), agregaremos los toques finales a las áreas principales de funcionalidad en nuestra aplicación de lista de tareas. Esto incluye permitir la edición de tareas existentes y el filtrado de la lista de tareas entre todas las tareas, las completadas, y las incompletas. A lo largo del capítulo, veremos la renderización condicional de la interfaz de usuario.
+
6. Accesibilidad en React
+
En el artículo final de nuestro tutorial, nos enfocaremos en la accesibilidad (broma intencional), incluyendo la gestión del enfoque en React, la cual puede mejorar la usabilidad y reducir la confusión para usuarios que navegan tanto, a través de lectores de pantalla, como solo del teclado.
+
7. Recursos sobre React
+
En nuestro artículo final, te brindamos una lista de recursos sobre React, los cuales podrás utilizar para avanzar más en tu aprendizaje.
+
+ +

Tutoriales de Ember

+ +
+

Nota: Los tutoriales de Ember se probaron por última vez en mayo de 2020, con Ember/Ember CLI versión 3.18.0.

+ +

Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación Ember en nuestro repositorio ember-todomvc-tutorial. Para una versión en vivo, consulta https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ (esto también incluye algunas características adicionales que no se cubren en este tutorial).

+
+ +
+
1. Primeros pasos en Ember
+
En nuestro primer artículo de Ember veremos cómo funciona Ember y para qué resulta útil, instalaremos la cadena de herramientas de Ember de manera local, crearemos una aplicación de muestra, y luego realizaremos una configuración inicial para prepararla para el desarrollo.
+
2. Estructura de una aplicación Ember y cómo se basa en componentes
+
En este artículo, continuaremos planificando la estructura de nuestra aplicación Ember TodoMVC, agregando el HTML necesario y luego dividiendo esa estructura HTML en componentes.
+
3. Interactividad de Ember: eventos, clases, y estado
+
En este punto, comenzaremos a agregar un poco de interactividad a nuestra aplicación, dándole la capacidad de agregar y mostrar nuevos elementos de tareas por hacer. A medida que avanzamos, veremos el uso de eventos en Ember, la creación de clases de componentes para contener código JavaScript que controle las funciones interactivas, y la configuración de un servicio para hacer seguimiento del estado de los datos de nuestra aplicación.
+
4. Interactividad de Ember: funcionalidad del footer, renderizado condicional
+
Ahora es momento de comenzar a abordar la funcionalidad del footer en nuestra aplicación. Aquí haremos que el contador de tareas pendientes se actualice de manera que muestre el número correcto de tareas pendientes por completar, y aplicaremos correctamente los estilos a las tareas completadas (es decir, aquellos donde la casilla de verificación ha sido marcada). También conectaremos nuestro botón "Borrar completados". A lo largo del capítulo, aprenderemos sobre el uso de la renderización condicional en nuestras plantillas.
+
5. Enrutamiento en Ember
+
En este artículo aprendemos sobre enrutamiento o el filtrado basado en URL, como a veces se lo denomina. Lo usaremos para proporcionar una URL única para cada una de las tres vistas de tareas: "Todas", "Activas" y "Completadas".
+
6. Recursos sobre y solución de problemas
+
En nuestro artículo final sobre Ember, te proporcionamos una lista de recursos que puedes utilizar para avanzar más en tu aprendizaje, además de información útil para la solución problemas y otra información.
+
+ +

Tutoriales de Vue

+ +
+

Nota: Los tutoriales de Vue se probaron por última vez en mayo de 2020, con Vue 2.6.11.

+ +

Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación Vue en nuestro repositorio todo-vue. Para una verisón en vivo, consulta https://mdn.github.io/todo-vue/dist/.

+
+ +
+
1. Primeros pasos en Vue
+
A continuación, presentamos Vue, el tercero de nuestros frameworks. En este artículo, veremos un poco sobre el origen de Vue, aprenderemos cómo instalarlo y crear un nuevo proyecto, estudiaremos la estructura de alto nivel de todo el proyecto y de un componente individual, veremos cómo ejecutar el proyecto localmente y prepararlo para comenzar a construir nuestro ejemplo.
+
2. Creando nuestro primer componente de Vue
+
Ahora es momento de profundizar en Vue y crear nuestro propio componente personalizado: comenzaremos creando un componente para representar cada elemento en la lista de tareas. Durante el artículo, aprenderemos sobre algunos conceptos importantes, como llamar a componentes dentro de otros componentes, pasarles datos a través de props y guardar el estado de los datos.
+
3. Renderizando una lista de componentes de Vue
+
En este punto, tenemos un componente completamente funcional; ahora estamos listos para agregar varios componentes ToDoItem a nuestra aplicación. En este artículo, veremos cómo agregar un conjunto de datos de elementos de tareas a nuestro componente App.vue, el cual luego repasaremos en bucle, mostrando dentro de los componentes de ToDoItem mediante el uso de la directiva v-for.
+
4. Agregar una nueva forma de tareas pendientes: eventos, métodos y modelos de Vue
+
Ahora tenemos datos de muestra listos y un ciclo que toma cada bit de datos y lo renderiza dentro de un ToDoItem en nuestra aplicación. Lo que realmente necesitamos a continuación es la capacidad de permitirle a nuestros usuarios que introuduzcan sus propios elementos de tareas pendientes en la aplicación, y para ello, necesitaremos un <input> de texto, un evento para efectuar una vez se envíen los datos, un método por accionar al momento del envío para agregar los datos y volver a renderizar la lista, y un modelo para controlar los datos. Esto es lo que cubriremos en este artículo.
+
5. Agregando estilos a los componentes de Vue con CSS
+
Por fin ha llegado el momento de hacer que nuestra aplicación luzca un poco mejor. En este artículo, exploraremos las diferentes formas de agregar estilos a los componentes de Vue con CSS.
+
6. Usando propiedades calculadas de Vue
+
En este artículo, agregaremos un contador que muestre el número de tareas completadas, utilizando una función de Vue llamada propiedades calculadas. Estos funcionan de manera similar a los métodos, pero solo se vuelven a ejecutar cuando cambia una de sus dependencias.
+
7. Renderización condicional en Vue: editando tareas existentes
+
Ahora es momento de agregar una de las principales piezas de la funcionalidad que aún nos falta: la capacidad de editar tareas existentes. Para hacer esto, aprovecharemos las capacidades de renderizado condicional de Vue, es decir, v-if y v-else, los cuales nos permiten alternar entre la vista de una tarea existente y una vista de edición donde podremos actualizar las etiquetas de las tareas. También veremos cómo agregar funcionalidad para eliminar tareas.
+
8. Gestión de enfoque con Vue refs
+
Ya estamos cerca de terminar con Vue. La última funcionalidad a considerar es la gestión del enfoque, o dicho de otra manera, cómo podemos mejorar la accesibilidad de nuestra aplicación desde el teclado. Veremos el uso de Vue refs para manejar esto, una característica avanzada que nos permite tener acceso directo a los nodos DOM subyacentes debajo del DOM virtual, o acceso directo desde un componente a la estructura DOM interna de un componente interno.
+
9. Recursos sobre Vue
+
Ahora, completaremos nuestro estudio de Vue brindándote una lista de recursos que podrás utilizar para avanzar en tu aprendizaje, además de algunos otros consejos útiles.
+
+ +

¿Cuales frameworks hemos escogido?

+ +

Hacemos pública nuestra serie inicial de artículos con guías enfocadas en tres de los principales frameworks que existen: React/ReactDOM, Ember, y Vue. Esto se debe a varias un razones:

+ + + +

Queremos decir esto desde un principio: no hemos escogido los frameworks en los que nos estamos enfocando porque pensamos que son los mejores o porque los respaldamos de alguna manera. Simplemente, consideramos que obtienen una puntuación alta de acuerdo a los criterios anteriores.

+ +

Ten en cuenta que esperábamos poder incluir más frameworks en la publicación inicial, pero que decidimos publicar el contenido y agregar, más adelante, otras guías, en lugar de retrasarlo más. Si tu framework favorito no se encuentra listado en este contenido y te gustaría ayudar a cambiar esto, ¡no dudes en discutirlo con nosotros! Puedes contactarnos a través de Matrix, o Discourse, o enviarnos un correo electrónico a la lista mdn-admins.

diff --git a/files/es/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html new file mode 100644 index 0000000000..09c28f11a9 --- /dev/null +++ b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html @@ -0,0 +1,476 @@ +--- +title: Primeros pasos en React +slug: >- + Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started +tags: + - Aprender + - Aprendiz + - Principiante +translation_of: >- + Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

En este artículo conoceremos React. Descubriremos algunos detalles sobre su trasfondo y casos de uso, configuraremos una cadena básica de herramientas para React en nuestra computadora local, crearemos y jugaremos con una aplicación inicial sencilla, mientras aprendemos —durante el proceso— un poco acerca de cómo funciona React.

+ + + + + + + + + + + + +
Prerrequisitos: +

Familiaridad con los lenguajes HTML, CSS, y JavaScript, conocimiento del terminal/línea de comandos.

+ +

React usa una sintaxis HTML-en-JavaScript llamada JSX (JavaScript y XML). Estar familiarizado con HTML y JavaScript te ayudará a aprender JSX, y a identificar —en una mejor manera— si los errores en tu aplicación están relacionados con JavaScript o con el más específico dominio de React.

+
Objetivo:Configurar un entorno de desarrollo local para React, crear una aplicación inicial, y entender los aspectos básicos de su funcionamiento.
+ +

Hola, React

+ +

Como su eslogan oficial señala, React es una biblioteca para construir interfaces de usuario. React no es un framework — ni siquiera se limita a la web. React es utilizado con otras bibliotecas para renderizar en ciertos entornos. Por ejemplo, React Native puede usarse para desarrollar aplicaciones móviles; React 360 permite crear aplicaciones de realidad virtual; además de otras posibilidades.

+ +

Al desarrollar para la web, los desarrolladores usan React en conjunto con ReactDOM. React y ReactDOM son, a menudo, considerados al igual que —y utilizados para resolver los mismo problemas que— otros verdaderos frameworks de desarrollo web. Cuando nos referimos a React como un "framework", estamos trabajando con este significado coloquial.

+ +

El objetivo principal de React es minimizar los errores que ocurren cuando los desarrolladores construyen interfaces de usuario. Esto lo hace mediante el uso de componentes — piezas de código lógicas y auto-contenidas que describen una parte de la interfaz del usuario. Estos componentes se pueden juntar para crear una interfaz de usuario completa, y React abstrae la mayor parte del trabajo de renderizado, permitiéndote enfocarte en el diseño de la interfaz.

+ +

Casos de uso

+ +

A diferencia de los otros frameworks vistos en este módulo, React no impone reglas estrictas sobre convenciones de código u organización de archivos. Esto le permite a los equipos establecer las convenciones que funcionen mejor para ellos y adoptar React de la manera en que deseen. React puede manejar un solo botón, algunas piezas de una interfaz o la interfaz de usuario completa de una aplicación.

+ +

Si bien React puede usarse para pequeñas piezas de una interfaz, no resulta tan sencillo "introducirlo" en una aplicación como sería el caso de una biblioteca como jQuery —o incluso de un framework, como Vue—, por lo que viene a ser más abordable cuando construimos una aplicación completamente con React.

+ +

Además, muchos de los beneficios de la experiencia del desarrollador de una aplicación React, como codificar interfaces con JSX, requieren un proceso de compilación. Agregar un compilador como Babel a un sitio web hace que el código se ejecute de manera lenta, por lo que los desarrolladores a menudo configuran dichas herramientas con un paso de compilación. Podrá decirse que React tiene un gran requisito de herramientas, pero se puede aprender.

+ +

Este artículo se enfocará en el caso de uso de usar React para renderizar la interfaz de usuario completa de una aplicación, usando herramientas proporcionadas por la propia herramienta de Facebook create-react-app.

+ +

¿Cómo React usa JavaScript?

+ +

React utiliza características modernas de JavaScript para muchos de sus patrones. El punto donde más se aleja de JavaScript se refleja en el uso de la sintaxis JSX, la que, a su vez, amplía la sintaxis de JavaScript para que código similar a HTML pueda formar parte del mismo. Por ejemplo:

+ +
const heading = <h1>Mozilla Developer Network</h1>;
+ +

Esta constante "heading" se conoce como una expresión JSX. React puede usarla para representar la etiqueta <h1> en nuestra aplicación.

+ +

Supongamos que, por razones semánticas, queremos envolver nuestro encabezado en una etiqueta <header>. El enfoque JSX nos permite anidar nuestros elementos entre sí, tal como lo hacemos con HTML:

+ +
const header = (
+  <header>
+    <h1>Mozilla Developer Network</h1>
+  </header>
+);
+ +
+

Nota: Los paréntesis en el fragmento anterior no son exclusivos de JSX y no tienen ningún efecto en la aplicación. Son una señal para ti (y tu computadora) de que las múltiples líneas de código que contiene forman parte de una misma expresión. También podríamos escribir la expresión del encabezado de esta manera:

+ +
const header = <header>
+    <h1>Mozilla Developer Network</h1>
+</header>
+ +

Sin embargo, esto luce un poco raro, ya que la etiqueta <header> que inicia la expresión no tiene sangría en la misma posición que su correspondiente etiqueta de cierre.

+
+ +

Por supuesto, tu navegador no puede leer JSX sin ayuda. Al compilarla (usando una herramienta como Babel o Parcel), nuestra expresión de encabezado se vería así:

+ +
const header = React.createElement("header", null,
+  React.createElement("h1", null, "Mozilla Developer Network")
+);
+ +

Es posible omitir el paso de la compilación y usar React.createElement() para codificar la interfaz de usuario tú mismo. Sin embargo, al hacer esto, perderías el beneficio declarativo de JSX y tu código resultaría más difícil de leer. La compilación es un paso adicional en el proceso de desarrollo, pero muchos desarrolladores de la comunidad React piensan que la legibilidad de JSX vale la pena. Además, las herramientas populares hacen que la compilación de JSX a JavaScript sea parte de su proceso de configuración. No tendrás que configurar la compilación tú mismo, a menos que así lo quieras.

+ +

Dado que JSX es una combinación de HTML y JavaScript, algunos desarrolladores lo encuentran intuitivo. Otros dicen que su naturaleza combinada lo hace confuso. Sin embargo, una vez que te sientas cómodo con JSX, te permitirá crear interfaces de usuario de forma más rápida e intuitiva, y permitirá que otros comprendan mejor tu base de código de un vistazo.

+ +

Para leer más sobre JSX, consulta el artículo JSX en profundidad del equipo de React.

+ +

Configurando tu primera aplicación React

+ +

Hay muchas maneras de usar React, pero usaremos la herramienta create-react-app de la interfaz de línea de comandos (CLI, por sus siglas en inglés), como se mencionó anteriormente, la cual acelera el proceso de desarrollo de una aplicación React al instalar algunos paquetes y crear algunos archivos por ti, manejando las herramientas descritas anteriormente.

+ +

Es posible agregar React a un sitio website sin usar create-react-app copiando algunos elementos <script> en un archivo HTML, pero la CLI de create-react-app es un punto de partida común para las aplicaciones React. Su uso te permitirá dedicar más tiempo a crear tu aplicación y menos a preocuparte por la configuración.

+ +

Requerimientos

+ +

Para usar create-react-app, necesitas tener instalado Node.js. Se recomienda utilizar la versión de soporte a largo plazo (LTS, por sus siglas en inglés). Node incluye npm (el administrador de paquetes de nodos), y npx (el ejecutor de paquetes de nodos).

+ +

También puedes usar el administrador de paquetes Yarn como alternativa, pero asumiremos que estarás usando npm en estos tutoriales. Consulta Conceptos básicos de administración de paquetes para obtener más información sobre npm y yarn.

+ +

Si estás usando Windows, necesitarás instalar algún software para darle paridad con el terminal Unix/macOS, y así poder usar los comandos del terminal mencionados en este tutorial. Gitbash (el cual viene como parte del conjunto de herramientas git para Windows) o el Subsistema de Windows para Linux (WSL, por sus siglas en inglés) son ambos adecuados. Consulte el Curso intensivo de línea de comandos para obtener más información sobre estos y sobre los comandos de terminal en general.

+ +

También ten en cuenta que React y ReactDOM producen aplicaciones que solo funcionan en un conjunto bastante moderno de navegadores (IE9+ a través de algunos polyfills). Se recomienda el uso de un navegador moderno como Firefox, Safari o Chrome cuando trabajes con estos tutoriales.

+ +

Además, consulta lo siguiente para obtener más información:

+ + + +

Inicializando tu aplicación

+ +

create-react-app recibe un argumento: el nombre que te gustaría darle a tu aplicación. create-react-app usa este nombre para crear una nueva carpeta, luego crea los archivos necesarios dentro de la misma. Asegúrate de cd al lugar donde te gustaría que se guarde tu aplicación en tu disco duro, luego ejecuta lo siguiente en tu terminal:

+ +
npx create-react-app moz-todo-react
+ +

Esto crea una carpeta moz-todo-react, y hace varias cosas dentro de la misma:

+ + + +
+

Nota: si tienes instalado el administrador de paquetes yarn, create-react-app lo usará por defecto en lugar de npm. Si tienes ambos administradores de paquetes instalados y quieres, explícitamente, usar npm, puedes agregar el indicador --use-npm cuando ejecutes create-react-app:

+ +
npx create-react-app moz-todo-react --use-npm
+
+ +

create-react-app mostrará una serie de mensajes en tu terminal mientras opera, ¡lo cual es normal! Esto puede tardar unos minutos, por lo que ahora podría ser un buen momento para preparar una taza de té.

+ +

Una vez completado el proceso, cd a la carpeta moz-todo-react y ejecuta el comando npm start. Los scripts instalados por create-react-app comenzarán a servirse en un servidor local en localhost:3000 y abrirán la aplicación en una nueva pestaña del navegador. Tu navegador mostrará algo como esto:

+ +

Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application

+ +

Estructura de la aplicación

+ +

create-react-app nos provee todo lo que necesitamos para desarrollar una aplicación React. Su estructura inicial de archivos luce así:

+ +
moz-todo-react
+├── README.md
+├── node_modules
+├── package.json
+├── package-lock.json
+├── .gitignore
+├── public
+│   ├── favicon.ico
+│   ├── index.html
+│   └── manifest.json
+└── src
+    ├── App.css
+    ├── App.js
+    ├── App.test.js
+    ├── index.css
+    ├── index.js
+    ├── logo.svg
+    └── serviceWorker.js
+ +

La carpeta src es donde pasaremos la mayor parte de nuestro tiempo, ya que es donde reside el código fuente de nuestra aplicación.

+ +

La carpeta public contiene archivos que serán leidos por tu navegador mientras desarrollas la aplicación; el más importante de ellos es index.html. React introduce tu código en este archivo de manera que tu navegador pueda ejecutarlo. Hay alguno que otro marcado que ayuda a create-react-app a funcionar, así que ten cuidado de no editarlo a menos que sepas lo que estás haciendo. Deberías cambiar el texto dentro del elemento <title> en este archivo para reflejar el título de tu aplicación. ¡Los títulos de página precisos son importantes para la accesibilidad!

+ +

La carpeta public también será publicada cuando crees y despliegues una versión para producción de tu aplicación. No cubriremos el despliegue en este tutorial, pero deberías poder usar una solución similar a la descrita en nuestro tutorial Despliegue de nuestra aplicación.

+ +

El archivo package.json contiene información sobre nuestro proyecto que Node.js/npm usa para mantenerlo organizado. Este archivo no es exclusivo de las aplicaciones React; create-react-app simplemente lo completa. No es necesario que entiendas este archivo en lo absoluto para completar este tutorial, sin embargo, si deseas obtener más información al respecto, puedes leer What is the file `package.json`? en NodeJS.org; también hablamos de ello en nuestro tutorial Conceptos básicos de administración de paquetes.

+ +

Explorando nuestro primer componente React — <App/>

+ +

En React, un componente es un módulo reutilizable que representa una parte de nuestra aplicación. Estas partes pueden ser grandes o pequeñas, pero, generalmente, están bien definidas: tienen un propósito único y obvio.

+ +

Abramos src/App.js, ya que nuestro navegador nos pide que lo editemos. Este archivo contiene nuestro primer componente —App—, y algunas otras líneas de código:

+ +
import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
+}
+export default App;
+ +

El archivo App.js se compone de tres partes principales: algunas declaraciones import en la parte superior, el componente App en el medio, y una declaración export en la parte inferior. La mayoría de los componentes de React siguen este patrón.

+ +

Declaraciones import

+ +

Las declaraciones import en la parte superior del archivo le permiten a App.js utilizar código que ha sido definido en otra parte. Revisemos estas declaraciones más detalladamente.

+ +
import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+ +

La primera declaración importa la biblioteca React como tal. Dado que React convierte el JSX que escribimos en React.createElement(), todos los componentes de React deben importar el módulo React. Si omites este paso, tu aplicación producirá un error.

+ +

La segunda declaración importa un logotipo de './logo.svg'. Observa el uso de ./ al principio de la ruta y la extensión .svg al final — estos nos indican que el archivo es local y que no es un archivo JavaScript. De hecho, el archivo logo.svg reside en nuestra carpeta raíz.

+ +

No hace falta proveer una ruta o extensión al importar el módulo React, ya que este no es un archivo local. En cambio, aparece como una dependencia en nuestro archivo package.json. ¡Ten cuidado con esta distinción mientras trabajas en esta lección!

+ +

La tercera declaración importa el CSS relacionado con nuestro componente App. Observa que no hay nombre de variable ni de directiva from. Esta sintaxis de importación en particular no es propia de la sintaxis de módulos de JavaScript. Esta proviene de Webpack, la herramienta que create-react-app usa para agrupar todos nuestros archivos JavaScript y enviarlos al navegador.

+ +

El componente App

+ +

Después de las importaciones, tenemos una función llamada App. Mientras que una mayor parte de la comunidad JavaScript prefiere nombres tipo camel-case como helloWorld, los componentes de React usan nombres de variables tipo pascal-case, como HelloWorld, para dejar en claro que un determinado elemento JSX es un componente de React y no una etiqueta HTML normal. Si llegaras a cambiar el nombre de la función App por app, tu navegador te mostraría un error.

+ +

Vamos a darle un vistazo más detallado a App.

+ +
function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
+}
+ +

La función App devuelve una expresión JSX. Esta expresión define lo que tu navegador presenta en última instancia al DOM.

+ +

Algunos elementos de la expresión tienen atributos, los cuales se escriben igual que en HTML, siguiendo un patrón de atributo="valor". En la línea 3, la etiqueta de apertura <div> tiene un atributo className. Este es equivalente al atributo class de HTML, pues dado que JSX es JavaScript, no podemos usar la palabra class —la cual está reservada—, lo que significa que JavaScript ya la usa para un propósito específico y causaría problemas en nuestro código. Algunos otros atributos HTML también se escriben de manera diferente en JSX (de como se escriben en HTML), por el mismo tipo de razón. Los revisaremos a medida que nos crucemos con estos.

+ +

Tómate un momento para cambiar la etiqueta <p> en la línea 6 para que diga "¡Hola, mundo!", luego guarda los cambios. Notarás que este cambio se procesa inmediatamente en el servidor de desarrollo que se ejecuta en http://localhost:3000 en tu navegador. Ahora elimina la etiqueta <a> y guarda los cambios; el enlace "Learn React" habrá desaparecido.

+ +

Ahora, tu componente App debería lucir así:

+ +
function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          ¡Hola, mundo!
+        </p>
+      </header>
+    </div>
+  );
+}
+ +

Declaraciones export

+ +

En la parte inferior del archivo App.js, la declaración export default App hace que nuestro componente App esté disponible para otros módulos.

+ +

Explorando el index

+ +

Vamos a abrir el archivo src/index.js, ya que es en este donde el componente App está siendo utilizado. Este archivo es el punto de entrada para nuestra aplicación, e inicialmente luce así:

+ +
import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
+ +

Al gual que App.js, el archivo comienza importando todos los módulos JS y otros activos que necesita para ejecutarse. src/index.css contiene estilos globales que se aplican a toda nuestra aplicación. Podemos ver que nuestro componente App también es importado acá; su importación es posible gracias a la declaración export en la parte inferior de App.js.

+ +

En la línea 7, se invoca la función ReactDOM.render() de React con dos argumentos:

+ + + +

Todo esto le indica a React que queremos renderizar nuestra aplicación React con el componente App como raíz, o primer componente.

+ +
+

Nota: En JSX, los componentes de React y los elementos HTML deben tener, obligatoriamente, barras diagonales de cierre. Escribir solo <App> o solo <img> provocará un error.

+
+ +

Los Service workers son interesantes piezas de código que ayudan al rendimiento de las aplicaciones y permiten que las funciones de tus aplicaciones web funcionen sin conexión, pero estas no están dentro del alcance de este artículo. Puedes eliminar la línea 5, así como las líneas 9 a 12.

+ +

Finalmente, tu archivo index.js debería verse así:

+ +
import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+ +

Variables y props

+ +

A continuación, usaremos algunas de nuestras habilidades de JavaScript para lograr sentirnos un poco más cómodos editando componentes y trabajando con datos en React. Hablaremos sobre cómo se usan las variables dentro de JSX, e introduciremos props, que son una forma de pasar datos a un componente (al que luego se puede acceder usando variables).

+ +

Variables en JSX

+ +

De vuelta en App.js, enfoquémonos en la línea 9:

+ +
<img src={logo} className="App-logo" alt="logo" />
+ +

Aquí, el valor del atributo src de la etiqueta <img /> está entre llaves. Así es como JSX reconoce las variables. Al encontrarse con {logo}, React sabrá que nos referimos a la importación del logotipo en la línea 2 de nuestra aplicación, y luego recuperará el archivo del logo y lo renderizará.

+ +

Vamos a intentar crear una variable propia. Antes de la declaración return de App, agrega const subject = "React";. Tu componente App ahora debería verse así:

+ +
function App() {
+  const subject = "React";
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          ¡Hola, mundo!
+        </p>
+      </header>
+    </div>
+  );
+}
+ +

Cambia la línea 8, de manera que se use la variable subject en vez de la palabra "mundo", así:

+ +
function App() {
+  const subject = "React";
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          ¡Hola, {subject}!
+        </p>
+      </header>
+    </div>
+  );
+}
+ +

Al guardar, tu navegador debería mostrar "¡Hola, React!" en vez de "¡Hola, mundo!"

+ +

Las variables son convenientes, pero la que acabamos de configurar no hace gran uso de las funciones de React. Es allí donde entran los props.

+ +

Props de componentes

+ +

Un prop es cualquier dato que se pasa a un componente de React. Los props se escriben dentro de las llamadas a los componentes y utilizan la misma sintaxis que los atributos HTML: prop="value". Abramos index.js y démosle a la llamada de nuestro <App/> su primer prop.

+ +

Agrega un prop de subject a la llamada del componente <App />, con un valor de Clarice. Al terminar, tu código debería verse similar a este:

+ +
ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));
+ +

Volviendo a App.js, vamos a revisar nuevamente la función App como tal, la cual se lee así (acortando la declaración return por razones de brevedad):

+ +
function App() {
+  const subject = "React";
+  return (
+    // return statement
+  );
+}
+ +

Cambia la declaración de la función App de manera que tome props como un parámetro, y elimina la constante subject. Al igual que cualquier otro parámetro de una función, puedes pasar props a console.log() para imprimirlos en la consola de tu navegador. Continúa, haciendo esto antes de la declaración return, así:

+ +
function App(props) {
+  console.log(props);
+  return (
+    // return statement
+  );
+}
+ +

Guarda tu archivo y revisa la consola JavaScript de tu navegador. Deberías ver registrado algo como esto:

+ +
Object { subject: "Clarice" }
+ +

La propiedad subject del objeto corresponde al prop subject que agregamos a la llamada de nuestro componente <App />, y la cadena Clarice corresponde a su valor. Los props de componentes en React siempre se recopilan en objetos de esta manera.

+ +

Ahora que subject es uno de nuestros props, usémoslo en App.js. Cambia la constante subject de manera que, en vez de definirla como la cadena React, estés leyendo el valor de props.subject. También puedes eliminar console.log(), si así lo quieres.

+ +
function App(props) {
+  const subject = props.subject;
+  return (
+    // return statement
+  );
+}
+ +

Una vez guardes, la aplicación debería darte la bienvenida con un "¡Hola, Clarice!". Si regresas a index.js, editas el valor de subject, y guardas, el texto cambiará.

+ +

Resumen

+ +

Esto nos lleva al final de nuestra introducción a React, la cual incluye cómo instalarlo de manera local, cómo crear una aplicación inicial, y cómo funcionan los conceptos básicos. En el próximo artículo comenzaremos a construir nuestra primera aplicación como tal: una lista de tareas pendientes. Sin embargo, antes de ello, recapitulemos algunas de las cosas que hemos aprendido.

+ +

En React:

+ + + +

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html new file mode 100644 index 0000000000..ea24ac2a81 --- /dev/null +++ b/files/es/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html @@ -0,0 +1,294 @@ +--- +title: Primeros pasos con Vue +slug: >- + Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/Vue_primeros_pasos +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

Ahora vamos a introducir Vue, el tercero de nuestros frameworks. En este articulo vamos a ver un poco del background de Vue, aprenderemos cómo instalarlo y a crear un nuevo proyecto, estudiar la estructura de alto nivel de todo el proyecto y un componente individual, sabremos como correr el proyecto localmente, y tenerlo preparado para empezar a construir nuestro ejemplo.

+ + + + + + + + + + + + +
Pre-requisitos: +

Familiaridad con los motores de los lenguajes  HTML, CSS, y  JavaScript languages, conocimiento del terminal/command line.

+ +

Los componentes Vue son escritos como una combinacion de objectos Javascript que administran los datos de la app y una sintaxis de plantilla basada en HTML que se enlaza con la estructura DOM subyacente. Para la instalación, y para usar algunas de las caracteristicas mas avanzadas de Vue (como Componentes de archivos simples o renderizado de funciones), vas a necesitar un terminar con node + npm instalados.

+
Objetivo:Configurar un entorno de desarrollo local de Vue, crear una app de inicio y entender los principios de su funcionamiento.
+ +

Un Vue más claro

+ +

Vue es un framework moderno de Javascript que proveé facilidades muy utiles para el mejoramiento progresivo- al contrario de otros frameworks, puedes usar Vue para mejorar un HTML exstente. Esto permite usar Vue como un remplazo agregado para una libreria como JQuery.

+ +

Habiendo dicho esto, tambien puedes usar Vue para escribir completamente una aplicación de una sola página(SPAs).This allows you to create markup managed entirely by Vue, which can improve developer experience and performance when dealing with complex applications. It also allows you to take advantage of libraries for client-side routing and state management when you need to. Additionally, Vue takes a "middle ground" approach to tooling like client-side routing and state management. While the Vue core team maintains suggested libraries for these functions, they are not directly bundled into Vue. This allows you to select a different routing/state management library if they better fit your application.

+ +

In addition to allowing you to progressively integrate Vue into your applications, Vue also provides a progressive approach to writing markup. Like most frameworks, Vue lets you create reusable blocks of markup via components. Most of the time, Vue components are written using a special HTML template syntax. When you need more control than the HTML syntax allows, you can write JSX or plain JavaScript functions to define your  components.

+ +

As you work through this tutorial, you might want to keep the Vue guide and API documentation open in other tabs, so you can refer to them if you want more information on any sub topic.
+ For a good (but potentially biased) comparison between Vue and many of the other frameworks, see Vue Docs: Comparison with Other Frameworks.

+ +

Installation

+ +

To use Vue in an existing site, you can drop one of the following <script> elements onto a page. This allows you to start using Vue on existing sites, which is why Vue prides itself on being a progressive framework. This is a great option when migrating an existing project using a library like JQuery to Vue. With this method, you can use a lot of the core features of Vue, such as the attributes, custom components, and data-management.

+ + + +

However, this approach has some limitations. To build more complex apps, you’ll want to use the Vue NPM package. This will let you use advanced features of Vue and take advantage of bundlers like WebPack. To make building apps with Vue easier, there is a CLI to streamline the development process. To use the npm package & the CLI you will need:

+ +
    +
  1. Node.js 8.11+ installed.
    2. +
  2. npm or yarn.
    3. +
+ +
+

Note: If you don't have the above installed, find out more about installing npm and Node.js here.

+
+ +

To install the CLI, run the following command in your terminal:

+ +
npm install --global @vue/cli
+ +

Or if you'd prefer to use yarn:

+ +
yarn global add @vue/cli
+ +

Once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run vue create <project-name>. The CLI will then give you a list of project configurations you can use. There are a few preset ones, and you can make your own. These options let you configure things like TypeScript, linting, vue-router, testing, and more.

+ +

We’ll look at using this below.

+ +

Initializing a new project

+ +

To explore various features of Vue, we will be building up a sample todo list app. We'll begin by using the Vue CLI to create a new app framework to build our app into. Follow the steps below:

+ +
    +
  1. In terminal, cd to where you'd like to create your sample app, then run vue create moz-todo-vue.
    2. +
  2. Use the arrow keys and Enter to select the "Manually select features" option.
    3. +
  3. The first menu you’ll be presented with allows you to choose which features you want to include in your project. Make sure that "Babel" and "Linter / Formatter" are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press Enter to proceed.
    4. +
  4. Next you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit Enter again. This will help us catch common errors, but not be overly opinionated.
    5. +
  5. Next you are asked to configure what kind of automated linting we want. Select "Lint on save". This will check for errors when we save a file inside the project. Hit Enter to continue.
    6. +
  6. Now, you will select how we want your config files to be managed. "In dedicated config files" will put your config settings for things like ESLint into their own, dedicated files. The other option, "In package.json", will put all of your config settings into the app's package.json file. Select "In dedicated config files" and push Enter.
    7. +
  7. Finally, you are asked if you want to save this as a preset for future options. This is entirely up to you. If you like these settings over the existing presets and want to use them again, type y , otherwise type n.
    8. +
+ +

The CLI will now begin scaffolding out your project, and installing all of your dependencies.

+ +

If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag --packageManager=<package-manager>, when you run vue create.  So if you wanted to create the moz-todo-vue project with npm and you'd previously chosen yarn, you’d run vue create moz-todo-vue --packageManager=npm.

+ +
+

Note: We've not gone over all of the options here, but you can find more information on the CLI in the Vue docs.

+
+ +

Project structure

+ +

If everything went successfully, the CLI should have created a series of files and directories for your project. The most significant ones are as follows:

+ + + +
+

Note: Depending on the options you select when creating a new project, there might be other directories present (for example, if you choose a router, you will also have a views directory).

+
+ +

.vue files (single file components)

+ +

Like in many front-end frameworks, components are a central part of building apps in Vue. These components let you break a large application into discrete building blocks that can be created and managed separately, and transfer data between each other as required. These small blocks can help you reason about and test your code.

+ +

While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using Single File Components, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in .vue. These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components.

+ +

As a bonus, projects created with the Vue CLI are configured to use .vue files with Webpack out of the box. In fact, if you look inside the src folder in the project we created with the CLI, you'll see your first .vue file: App.vue.

+ +

Let's explore this now.

+ +

App.vue

+ +

Open your App.vue file — you’ll see that it has three parts: <template>, <script>, and <style>, which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.

+ +

<template> contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.

+ +
+

Note: By setting the lang attribute on the <template> tag, you can use Pug template syntax instead of standard HTML — <template lang="pug">. We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.

+
+ +

<script> contains all of the non-display logic of your component. Most importantly, your <script> tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a render() function.

+ +

In the case of App.vue, our default export sets the name of the component to app and registers the HelloWorld component by adding it into the components property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.

+ +
import HelloWorld from './components/HelloWorld.vue';
+
+export default {
+  name: 'app',
+  components: {
+    //You can register components locally here.
+    HelloWorld
+  }
+};
+ +
+

Note: If you want to use TypeScript syntax, you need to set the lang attribute on the <script> tag to signify to the compiler that you're using TypeScript — <script lang="ts">.

+
+ +

<style> is where you write your CSS for the component. If you add a scoped attribute — <style scoped> — Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.

+ +
+

Note: If you select a CSS pre-processor when creating the project via the CLI, you can add a lang attribute to the <style> tag so that the contents can be processed by Webpack at build time. For example, <style lang="scss"> will allow you to use SCSS syntax in your styling information.

+
+ +

Running the app locally

+ +

The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a serve command to the project’s package.json file as an npm script, so you can easily run it.

+ +

In your terminal, try running npm run serve (or yarn serve if you prefer yarn). Your terminal should output something like the following:

+ +
INFO  Starting development server...
+98% after emitting CopyPlugin
+
+ DONE  Compiled successfully in 18121ms
+
+  App running at:
+  - Local:   <http://localhost:8080/>
+  - Network: <http://192.168.1.9:8080/>
+
+  Note that the development build is not optimized.
+  To create a production build, run npm run build.
+ +

If you navigate to the “local” address in a new browser tab (this should be something like http://localhost:8080 as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.

+ +

default vue app render, with vue logo, welcome message, and some documentation links

+ +

Making a couple of changes

+ +

Let's make our first change to the app — we’ll delete the Vue logo. Open the App.vue file, and delete the <img> element from the template section:

+ +
<img alt="Vue logo" src="./assets/logo.png">
+ +

If your server is still running, you should see the logo removed from the rendered site almost instantly. Let’s also remove the HelloWorld component from our template.

+ +

First of all delete this line:

+ +
<HelloWorld msg="Welcome to Your Vue.js App"/>
+ +

If you save your App.vue file now, the rendered app will throw an error because we’ve registered the component but are not using it. We also need to remove the lines from inside the <script> element that import and register the component:

+ +

Delete these lines now:

+ +
import HelloWorld from './components/HelloWorld.vue'
+ +
components: {
+  HelloWorld
+}
+ +

Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside <template>.

+ +

Let’s add a new <h1> inside <div id="app">. Since we’re going to be creating a todo list app below, let's set our header text to "To-Do List". Add it like so:

+ +
<template>
+  <div id="app">
+    <h1>To-Do List</h1>
+  </div>
+</template>
+ +

App.vue will now show our heading, as you'd expect.

+ +

Summary

+ +

Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes.

+ +

With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos.

+ +

In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.

+ +

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

+ +

In this module

+ + diff --git a/files/es/learn/tools_and_testing/cross_browser_testing/index.html b/files/es/learn/tools_and_testing/cross_browser_testing/index.html new file mode 100644 index 0000000000..73bd6299a1 --- /dev/null +++ b/files/es/learn/tools_and_testing/cross_browser_testing/index.html @@ -0,0 +1,39 @@ +--- +title: Cross browser testing +slug: Learn/Herramientas_y_pruebas/Cross_browser_testing +translation_of: Learn/Tools_and_testing/Cross_browser_testing +--- +
{{LearnSidebar}}
+ +

Este módulo se centra en probar proyectos web en diferentes navegadores. Nos fijamos en la identificación de su público objetivo (por ejemplo, qué usuarios, navegadores y dispositivos son los que más le preocupan?), cómo realizar las pruebas, los principales problemas a los que se enfrentará con los diferentes tipos de código y cómo mitigarlos, qué herramientas son las más útiles para ayudarle a probar y solucionar problemas, y cómo utilizar la automatización para acelerar las pruebas.

+ +

Prerequisitos

+ +

Debería aprender los conceptos básicos de los lenguajes HTML, CSS y JavaScript básicos antes de intentar utilizar las herramientas que se detallan aquí.

+ +

Guías

+ +
+
Introducción a la prueba de navegadores cruzados
+
Este artículo comienza el módulo proporcionando una visión general del tema de la prueba de navegadores cruzados, respondiendo a preguntas como "¿qué es la prueba de navegadores cruzados? y "¿cuáles son los tipos de problemas más comunes que se encuentran?
+
Estrategias para la realización de las pruebas
+
+

A continuación, profundizamos en la realización de pruebas, la identificación de un público objetivo (por ejemplo, qué navegadores, dispositivos y otros segmentos deben ser probados), estrategias de pruebas de baja fiabilidad (obtenga una gama de dispositivos y algunas máquinas virtuales y realice pruebas ad-hoc cuando sea necesario), estrategias de alta tecnología (automatización, uso de aplicaciones de pruebas dedicadas), y pruebas con grupos de usuarios.

+
+
Manejo de problemas comunes de HTML y CSS
+
+

Con el conjunto de escenas, ahora veremos específicamente los problemas comunes entre navegadores que encontrará en código HTML y CSS, y qué herramientas se pueden usar para evitar que ocurran problemas o para solucionarlos. Esto incluye el código de hilado, la entrega de prefijos CSS, el uso de herramientas de desarrollo de navegadores para localizar problemas, el uso de polifiltros para añadir soporte a los navegadores, la solución de problemas de diseño con capacidad de respuesta, y mucho más.

+
+
Manejo de problemas comunes de JavaScript
+
+

Ahora veremos los problemas comunes de JavaScript en todos los navegadores y cómo solucionarlos. Esto incluye información sobre el uso de herramientas de desarrollo del navegador para localizar y solucionar problemas, el uso de polifondos y bibliotecas para solucionar los problemas, el funcionamiento de las funciones modernas de JavaScript en navegadores antiguos, y mucho más.

+
+
Manejo de problemas comunes de accesibilidad
+
A continuación, nos centramos en la accesibilidad, proporcionando información sobre problemas comunes, cómo realizar pruebas sencillas y cómo utilizar las herramientas de auditoría/automatización para encontrar problemas de accesibilidad.
+
Implementación de la detección de características
+
La detección de funciones implica determinar si un navegador soporta un determinado bloque de código, y ejecutar un código diferente dependiendo de si lo hace (o no), de modo que el navegador siempre puede proporcionar una experiencia de trabajo en lugar de bloquearse/error en algunos navegadores. Este artículo detalla cómo escribir su propia detección de características simples, cómo usar una biblioteca para acelerar la implementación y características nativas para la detección de características como @supports.
+
Introducción a las pruebas automatizadas
+
La realización manual de pruebas en varios navegadores y dispositivos, varias veces al día, puede resultar tediosa y consumir mucho tiempo. Para manejar esto eficientemente, debe familiarizarse con las herramientas de automatización. En este artículo, analizamos lo que está disponible, cómo utilizar los corredores de tareas y los conceptos básicos de cómo utilizar las aplicaciones de automatización de pruebas de navegadores comerciales, como Sauce Labs y Browser Stack.
+
Configuración de su propio entorno de automatización de pruebas
+
En este artículo, le enseñaremos cómo instalar su propio entorno de automatización y ejecutar sus propias pruebas utilizando Selenium/WebDriver y una biblioteca de pruebas como Selenium-webdriver for Node. También veremos cómo integrar su entorno de pruebas local con aplicaciones comerciales como las que se comentaron en el artículo anterior.
+
diff --git a/files/es/learn/tools_and_testing/github/index.html b/files/es/learn/tools_and_testing/github/index.html new file mode 100644 index 0000000000..62646f1cc4 --- /dev/null +++ b/files/es/learn/tools_and_testing/github/index.html @@ -0,0 +1,92 @@ +--- +title: Git y GitHub +slug: Learn/Herramientas_y_pruebas/GitHub +tags: + - Aprender + - GitHub + - Principiante + - Web + - git +translation_of: Learn/Tools_and_testing/GitHub +--- +
{{LearnSidebar}}
+ +

Todos los desarrolladores utilizarán algún tipo de sistema de control de versiones ( VCS ), una herramienta que les permita colaborar con otros desarrolladores en un proyecto sin peligro de que sobrescriban el trabajo de los demás, y volver a las versiones anteriores de la base de código si existe un problema descubierto más tarde. El VCS más popular (al menos entre los desarrolladores web) es Git, junto con GitHub, un sitio que proporciona alojamiento para tus repositorios y varias herramientas para trabajar con ellos. Este módulo tiene como objetivo enseñarte lo que necesitas saber sobre ambos.

+ +

Introducción

+ +

Los VCS son esenciales para el desarrollo de software:

+ + + +

Los VCS proporcionan herramientas para satisfacer las necesidades anteriores. Git es un ejemplo de VCS, y GitHub es un sitio web + infraestructura que proporciona un servidor Git más una serie de herramientas realmente útiles para trabajar con repositorios git individuales o en equipo, como informar problemas con el código, herramientas de revisión, características de administración de proyectos tal como asignación de tareas, estados de tareas, y más.

+ +
+

Nota: Git en realidad es un sistema de control de versiones distribuido, lo cual significa que se realiza una copia completa del repositorio que contiene la base de código en tu computadora (y en la de todos los demás). Realizas cambios en tu propia copia, y luego empujas esos cambios nuevamente al servidor, donde un administrador decidirá si fusiona tus cambios con la copia maestra.

+
+ +

¿Quieres convertirte en un desarrollador web front-end?

+ +

Hemos preparado un curso que incluye toda la información esencial que necesitas para alcanzar tu objetivo.

+ +
+

Comenzar

+
+ +

Prerequisitos

+ +

Para usar Git y GitHub, necesitas:

+ + + +

En términos de conocimiento previo, no necesitas saber nada sobre desarrollo web, Git/GitHub o VCS para iniciar este módulo. Sin embargo, se recomienda que conozcas algo de codificación para que tengas conocimientos informáticos razonables y algún código para almacenar en tus repositorios.

+ +

También es preferible que tengas algunos conocimientos básicos de la terminal, por ejemplo, moverte entre directorios, crear archivos y modificar la variable del sistema PATH.

+ +
+

Nota: Github no es el único sitio/conjunto de herramientas que puedes usar con Git. Hay otras alternativas, como GitLab, que podrías probar, y también podrías intentar configurar tu propio servidor Git y usarlo en lugar de GitHub. Solo nos hemos quedado con GitHub en este curso para proporcionar una forma única que funciona.

+
+ +

Guías

+ +

Ten en cuenta que los enlaces a continuación te llevan a recursos en sitios externos. Eventualmente intentaremos tener nuestro propio curso Git/GitHub dedicado, pero por ahora, esto te ayudará a familiarizarte con el tema en cuestión.

+ +
+
Hola mundo (de GitHub)
+
Este es un buen lugar para comenzar: esta guía práctica te permite comenzar a usar GitHub, aprender los conceptos básicos de Git, como crear repositorios y ramas, realizar confirmaciones, abrir y fusionar solicitudes de extracción.
+
Manual de Git (en GitHub)
+
Este Manual de Git profundiza un poco más, explicando qué es un VCS, qué es un repositorio, cómo funciona el modelo básico de GitHub, comandos y ejemplos de Git, y más.
+
Bifurcación de proyectos (de GitHub)
+
Bifurcar proyectos es esencial cuando deseas contribuir al código de otra persona. Esta guía explica cómo.
+
Acerca de las solicitudes de extracción (de GitHub)
+
Una útil guía para administrar las solicitudes de extracción, la forma en que los cambios de código sugeridos se entregan a los repositorios de las personas para su consideración.
+
Dominando las incidencias (de GitHub)
+
Las incidencias son como un foro para tu proyecto GitHub, donde las personas pueden hacer preguntas e informar problemas, y tú puede administrar las actualizaciones (por ejemplo, asignar personas para solucionar problemas, aclarar el problema, informar a las personas que las cosas están solucionadas). Este artículo te brinda lo que necesitas saber sobre las incidencias.
+
+ +
+

Nota: Hay mucho más que puedes hacer con Git y GitHub, pero creemos que lo anterior representa lo mínimo que necesitas saber para comenzar a usar Git de manera efectiva. A medida que profundices en Git, comenzarás a darte cuenta de que es fácil equivocarse cuando comienzas a usar comandos más complicados. No te preocupes, incluso los desarrolladores web profesionales encuentran a Git confuso a veces, y a menudo resuelven problemas buscando soluciones en la web, o consultando sitios como Reglas de vuelo para Git y Dangit, ¡git!

+
+ +

Ve también

+ + diff --git a/files/es/learn/tools_and_testing/index.html b/files/es/learn/tools_and_testing/index.html new file mode 100644 index 0000000000..a147c98f65 --- /dev/null +++ b/files/es/learn/tools_and_testing/index.html @@ -0,0 +1,58 @@ +--- +title: Herramientas y pruebas +slug: Learn/Herramientas_y_pruebas +tags: + - Accesibilidad + - Aprender + - Aterrizaje + - CSS + - CodificaciónDeSecuenciasDeComandos + - HTML + - Herramientas + - JavaScript + - Navegador cruzado + - Principiante + - Pruebas de usuario + - Tema + - Testing + - automatización +translation_of: Learn/Tools_and_testing +--- +
+

{{LearnSidebar}}

+ +

Una vez que haya comenzado a sentirse cómodo programando con tecnologías web básicas (como HTML, CSS y JavaScript), y comience a adquirir más experiencia, leer más recursos y aprender más trucos y consejos, comenzará a encontrar todos tipo de herramientas, desde CSS y JavaScript ya enrollados, aplicaciones de prueba y automatización, y muchas más. A medida que sus proyectos web se vuelvan más grandes y complejos, querrá comenzar a aprovechar algunas de estas herramientas y elaborar planes de prueba confiables para su código. Esta parte del área de aprendizaje tiene como objetivo brindarle lo que necesita para comenzar y tomar decisiones informadas.

+
+ +

 

+ +

{{LearnSidebar}}

+ +

La industria de la web es un lugar emocionante para trabajar, pero no está exenta de complicaciones. Las tecnologías principales que utilizamos para crear sitios web son bastante estables ahora, pero se están agregando nuevas características todo el tiempo, y nuevas herramientas, que facilitan el trabajo con estas tecnologías y están construidas sobre estas tecnologías, aparecen constantemente. Además de eso, todavía tenemos que mantener la compatibilidad entre navegadores en la parte superior de nuestras mentes y asegurarnos de que nuestro código sigue las mejores prácticas que permiten que nuestros proyectos funcionen en diferentes navegadores y dispositivos que nuestros usuarios utilizan para navegar por la Web, y ser utilizable por personas con discapacidad.

+ +

Determinar qué herramientas debería usar puede ser un proceso difícil, por lo que hemos escrito este conjunto de artículos para informarle qué tipos de herramientas están disponibles, qué pueden hacer por usted y cómo hacer uso de los favoritos actuales de la industria.

+ +

 

+ +
+

Nota: Debido a que aparecen nuevas herramientas y las antiguas pasan de moda todo el tiempo, hemos redactado deliberadamente este material para que sea lo más neutral posible. Queremos enfocarnos ante todo en los tipos generales de tareas que estas herramientas lo ayudarán a lograr. y seguir prescribiendo herramientas específicas al mínimo. Obviamente, necesitamos mostrar el uso de las herramientas para demostrar técnicas específicas, pero ten en cuenta que no necesariamente recomendamos estas herramientas como la mejor o la única forma de hacer las cosas; en la mayoría de los casos, existen otras formas, pero queremos brindarte una idea clara. Metodología que funciona.

+
+ +

Camino de aprendizaje

+ +

 

+ +

Debería aprender los conceptos básicos de los lenguajes HTML, CSS, y JavaScript antes de intentar usar las herramientas que se detallan aquí. Por ejemplo, deberá conocer los fundamentos de estos idiomas antes de comenzar a depurar problemas en códigos web complejos, o hacer un uso efectivo de las bibliotecas de JavaScript, o escribir pruebas y ejecutarlas en su código utilizando corredores de prueba, etc.

+ +

Primero necesitas una base sólida.

+ +

 

+ +

Módulos

+ +
+
Herramientas de desarrollo web en el mundo real (TBD)
+
En este módulo, exploramos los diferentes tipos de herramientas de desarrollo web disponibles. Esto incluye la revisión de los tipos de tareas más comunes a las que se le puede pedir que resuelva, cómo pueden encajar en un flujo de trabajo y las mejores herramientas disponibles actualmente para llevar a cabo esas tareas.
+
Pruebas de navegadores cruzados
+
Este módulo analiza específicamente el área de prueba de proyectos web en diferentes navegadores. Aquí vemos cómo identificar a su público objetivo (por ejemplo, qué usuarios, navegadores y dispositivos necesita preocuparse más), cómo realizar las pruebas, los principales problemas que enfrentará con los diferentes tipos de código y cómo solucionar o mitigue esos problemas, qué herramientas son más útiles para ayudarlo a probar y solucionar problemas, y cómo utilizar la automatización para acelerar las pruebas.
+
diff --git a/files/es/learn/tools_and_testing/understanding_client-side_tools/index.html b/files/es/learn/tools_and_testing/understanding_client-side_tools/index.html new file mode 100644 index 0000000000..6221b0382f --- /dev/null +++ b/files/es/learn/tools_and_testing/understanding_client-side_tools/index.html @@ -0,0 +1,46 @@ +--- +title: Understanding client-side web development tools +slug: Learn/Herramientas_y_pruebas/Understanding_client-side_tools +tags: + - Aprender + - CSS + - Despliegue + - HTML + - Herramientas + - JavaScript + - Novatos + - Transformación + - client-side + - lado del cliente +translation_of: Learn/Tools_and_testing/Understanding_client-side_tools +--- +
{{LearnSidebar}}
+ +

Las herramientas del lado del cliente (client-side en inglés) pueden ser intimidantes, pero esta serie de artículos tiene como propósito ilustrar el propósito de algunos de los tipos de herramientas client-side, explicar las herramientas que puedes integrar, cómo instalarlas usando administradores de paquetes y cómo controlarlas usando la línea de comandos. Terminanos esta sección dando un ejemplo de cadena de herramientas para mostrarte cómo puedes ser más productivo

+ +

Inicia ahora con nuestra "Introducción a las herraminetas client-side"

+ +

Requisitos previos

+ +

Debes aprender el núcleo básico de los lenguajes HTML, CSS y JavaScript, antes de intentar usar las herramientas aquí descritas.

+ +
+

¿Quieres convertirte en un desarrollador front-end?

+ +

Tenemos un curso que incluye toda la información esencial que necesitas para lograr tu objetivo.

+Inicia ahora
+ +

Guías

+ +
+
1. Introducción a las herramientas client-side
+
En este artículo damos una introducción a las herramientas modernas de la web, los tipos de herramientas disponibles, donde te las puedes encontrar en el cliclo de desarrollo de aplicaciones web y como buscar ayuda con las herramientas individuales.
+
2. Introducción a la linea de comandos
+
En tu proceso de desarrollo seguramente vas a requeria correr algunos comandos en la terminal (o "línea de comandos"). Este artículo da una introducción a la terminal, los comandos básicos que vas a necesitar para utilizarla, cómo integrar diferentes comandos y cómo agregar tu propia interfaz de línea de comandos (command line interface - CLI en inglés).
+
3. Introducción al manejo de paquetes
+
En este artículo exploramos los sistemas de administración de paquetes en detalle para entender cómo los podemos usar en nuestros proyectos, ya sea para instalar dependencias a nuestro proyecto, descargar actualizaciones y mucho más.
+
4. Introduciendo una cadena de herramientas completa
+
En los últimos dos artículos en esta serie vamos a solidificar tu conocimiento de las herramientas para el desarrollo web construyendo una cadena de herramients. Iniciaremos configurando un ambiente de desarrollo y colocando herramentas de transformación para desplegar nuestra aplicación en Netlify. En este artículo introducimos un estudio de caso, configuramos nuestro ambiente de desarrollo y configuramos herramientas de transformación de código.
+
5. Desplegando nuestra aplicación
+
En el artículo final de esta serie, utilizamos nuestra cadena de herramientas que construimos en el artículo previo y la extendemos para desplegar nuestra aplicación muestra. Subimos nuestro código a GitHub, desplegamos usando Netlify e incluso te enseñamos a realizar una prueba en el proceso.
+
diff --git a/files/es/learn/using_github_pages/index.html b/files/es/learn/using_github_pages/index.html deleted file mode 100644 index 81a7138430..0000000000 --- a/files/es/learn/using_github_pages/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: ¿Cómo se utiliza Github pages? -slug: Learn/Using_Github_pages -translation_of: Learn/Common_questions/Using_Github_pages ---- -

GitHub es un sitio "social coding". Te permite subir repositorios de código para almacenarlo en el sistema de control de versiones Git. Tu puedes colaborar en proyectos de código, y el sistema es código abierto por defecto, lo que significa que cualquiera en el mundo puede encontrar tu código en GitHub, usarlo, aprender de el, y mejorarlo. ¡Tú puedes hacer eso con el código de otras personas tambien! Este artículo provee una guía básica para publicar contenido usando la característica gh-pages de Github.

- -

Publicando contenido

- -

Github es una comunidad muy importante y útil para involucrarse, y Git/GitHub es un sistema de control de versiones muy popular — la mayoría de las empresas de tecnología ahora lo utilizan en su flujo de trabajo. GitHub tiene una característica muy útil llamada GitHub pages, que te permite publicar el código del sitio en vivo en la Web.

- -

Configuración básica de Github

- -
    -
  1. Primero que todo, instala Git en tu máquina. Este es el software del sistema de control de versiones subyacente en el que GitHub funciona.
    2. -
  2. Seguido, Regístrate para una cuenta de GitHub. Es simple y fácil.
    3. -
  3. Una vez te hayas registrado, inicia sesión en github.com con tu nombre de usuario y contraseña.
    4. -
- -

Preparando tu código para subirlo

- -

Tú puedes almacenar cualquier código que tu quieras en un repositorio de Github, pero para usar la característica páginas de Github con pleno efecto, tu código debe estar estructurado como un sitio web típico, por ejemplo que el punto de entrada primario sea un archivo HTML llamado index.html.

- -

La otra cosa que necesitas hacer antes de seguir adelante es inicializar el directorio de código como un repositorio Git. para hacer esto:

- -
    -
  1. Apunta la línea de comandos a tu directorio test-site (o como se llame el directorio que contiene tu sitio web). Para esto, usa el comando cd (Es decir "cambio de directorio"). Esto es lo que deberías digitar si has puesto tu sitio web en un directorio llamado test-site en tu escritorio: - - 
    cd Desktop/test-site
    -
    2. -
  2. Cuando la línea comandos está apuntando hacia el interior del directorio de tu sitio web, digita el siguiente comando, que le dice a la herramienta git para convertir el directorio en un repositorio git:
    3. -
  3. - 
    git init
    -
    4. -
- -

An aside on command line interfaces

- -

La mejor manera de subir tu código a Github es mediante la linea de comandos — esta es una ventana donde tú escribe comandos para hacer cosas como crear archivos y ejecutar programas, en lugar de hacer clic dentro de una interfaz de usuario. Se verá algo como esto:

- -

- -
-

Nota: Tú también podrías considerar una interfaz gráfica de usuario de Git para hacer el mismo trabajo, si te sientes incómodo con la linea de comandos.

-
- -

Cada sistema operativo viene con una herramienta de línea de comandos:

- - - -

Esto puede parecer un poco espantoso al principio, pero no te preocupes — que pronto conseguiras la caída de los conceptos básicos. Tú le dices a la computadora que haga algo en la terminal, digitando un comando y oprimiendo la tecla Enter, como se ha visto anteriormente.

- -

Creando un repositorio para tu código

- -
    -
  1. -

    A continuación, tu necesitas crear un nuevo repositorio para colocar tus archivos en el. Has clic en el signo más (+) en la parte superior derecha de la página de inicio de GitHub, luego escoge Nuevo Repositorio.

    -
    2. -
  2. En esta página, en la caja Nombre del Repositorio, digita el nombre para tu repositorio de código, por ejemplo my-repository.
    3. -
  3. También llena una descripción para decir lo que tu repositorio va a contener. Tu pantalla debe mostrar algo como esto:
    -
    4. -
  4. Has Clic en Crear repositorio; Esto debería llevarte a la siguiente página: 
    -
    5. -
- -

Subiendo tus archivos a GitHub

- -
    -
  1. En la página actual, tú estás interesado en la sección …o empujar un repositorio existente desde la línea de comandos. Tú deberias ver dos lineas de código listado en esta sección. Copia la totalidad de la primera línea, pégala en la línea de comandos, presiona la tecla Enter. El comando debería mostrarte algo como esto: - - 
    git remote add origin https://github.com/chrisdavidmills/my-repository.git
    -
    2. -
  2. A continuación, digita los siguientes dos comandos, presionando Enter despues de cada uno. Estos preparán el código para subirlo a GitHub, y pida a GIt que administre estos archivos. - 
    git add --all
-git commit -m 'adding my files to my repository'
    -
    3. -
  3. Por último, empuja el código hasta GitHub yendo a la página de GitHub en la que estas e ingresando en la terminal el segundo de los dos comandos que vimos …o empuje un repositorio existente desde la sección de línea de comandos: - 
    git push -u origin master
    -
    4. -
  4. Ahora necesitas crear la rama gh-pages de tu repositorio; actualiza la página actual y verá una página del repositorio algo así como la de abajo. Tú necesitas presionar el boton que dice Branch: master, digita gh-pages en el campo de texto, luego presiona el boton azul que dice Create branch: gh-pages. Esto crea una rama de código especial llamada gh-pages que es publicada en una ubicación especial. La URL toma la forma username.github.io/my-repository-name, asi en mi caso de ejemplo, la URL debería ser https://chrisdavidmills.github.io/my-repository. La página mostrada es la página index.html.
    -
    5. -
  5. Navega tu dirección web de GitHub pages en un nuevo ta del navegador, y tu deberias ver tu sitio en linea! Mandalo por correo electrónico a tus amigos y muestra tu dominio.
    6. -
- -
-

Nota: Si te atascas, la página de inicio de GitHub Pages también es muy útil.

-
- -

Un mayor conocimiento de GitHub

- -

Si deseas realizar más cambios en su sitio de prueba y cargarlos en GitHub, simplemente tendrás que realizar el cambio en tus archivos como antes. A continuación, debes introducir los siguientes comandos (pulsando Intro después de cada uno) para empujar los cambios a GitHub:

- -
git add --all
-git commit -m 'another commit'
-git push
- -

Puedes reemplazar otro commit con un mensaje más adecuado para describir qué cambio acaba de hacer.

- -

Apenas hemos arañado la superficie de Git.Para obtener más información, comience con el sitio de ayuda de GitHub.

diff --git "a/files/es/localizaci\303\263n/index.html" "b/files/es/localizaci\303\263n/index.html" deleted file mode 100644 index def1406446..0000000000 --- "a/files/es/localizaci\303\263n/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Localización -slug: Localización -tags: - - Localización -translation_of: Glossary/Localization ---- -

  

-

La localización es el proceso de traducción de interfaces de usuario de un lenguaje a otro y adaptación para que una cultura extranjera lo comprenda. Estos recursos tratan sobre cómo hacer aplicaciones/extensiones de Mozilla localizables.

-
- -

Documentación

Sistema de traducción de extensiones para NAVE
"Este documento tiene como principal objetivo fomentar la traducción de extensiones mediante un sistema escalable que, aunque inicialmente puede ser complicado de entender, al final, se minimiza el tiempo total empleado en generar un paquete de idioma con la traducción."
Creación de instaladores
Este documento explica cómo hacer instaladores de productos Mozilla 100% es-ES a partir del correspondiente instalador original en-US y los paquetes de idioma es-ES más, en algunos casos, archivos adicionales de personalización es-ES.
Escribir código localizable
Esta página te explica las buenas prácticas y directrices al tratar con código UI en relación a la localización. Está dirigido a desarrolladores de Mozilla y sus extensiones.
Localizando las descripciones de las extensiones
Para localizar la descripción de una extensión (secuencia que muestra arriba y abajo el nombre de la extensión en ventanas de extensiones), necesitas utilizar una clave especial para anular la descripción especificada en su archivo install.rdf. Este artículo contiene instrucciones de cómo modificar esta tecla de preferencia.

Ver todo...

Comunidad

  • En la comunidad Mozilla... en ingles

{{ DiscussionList("dev-l10n", "mozilla.dev.l10n") }}

Ver todo...

Herramientas

Ver todo...

Temas Relacionados

Extensiones, Desarrollando Mozilla, XUL
-

Categorías

-

Interwiki Language Links

-

  

-

{{ languages( { "de": "de/Lokalisierung", "en": "en/Localization", "fr": "fr/Localisation", "it": "it/Localization", "ja": "ja/Localization", "pl": "pl/Lokalizacja", "pt": "pt/Localiza\u00e7\u00e3o", "zh-tw": "zh_tw/\u672c\u5730\u5316" } ) }}

diff --git a/files/es/localizar_con_narro/index.html b/files/es/localizar_con_narro/index.html deleted file mode 100644 index 7be6efca8b..0000000000 --- a/files/es/localizar_con_narro/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Localizar con Narro -slug: Localizar_con_Narro -tags: - - 'Localization:Tools' - - l10n - - 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/mdn/at_ten/index.html b/files/es/mdn/at_ten/index.html new file mode 100644 index 0000000000..0e48e9e6ba --- /dev/null +++ b/files/es/mdn/at_ten/index.html @@ -0,0 +1,39 @@ +--- +title: MDN en 10 +slug: MDN_en_diez +tags: + - MDN +translation_of: MDN_at_ten +--- +
Celebra 10 años documentando tu Web.
+ +
+
+

La historia de MDN (Mozilla Developers Network)

+ +

A principios de 2005 , un grupo pequeño de idealistas se propuso a crear una nueva, libre, comunidad en línea de recursos para todos los desarrolladores Web. Su brillante pero poco excentrica idea se convirtió en la actual Mozilla Developer Network (MDN) - el principal recurso para todas las tecnologías Web abiertas. Diez años más tarde, nuestra comunidad mundial es más grande que nunca, y juntos todavía estamos creando documentación , código de ejemplo y recursos de aprendizaje para todas las tecnologías Web abiertas, incluyendo CSS , HTML , JavaScript y todo lo demás que hace que la web abierta tan poderoso como lo es.

+ +

Aprende másabout the history

+ + +

Contribuyendo a MDN

+ +

Por diez años, la comunidad MDN ha estado documentando la Web abierta. Desde la reparación de los errores tipográficos simples hasta escribir suites completas de una nueva API, todo el mundo tiene algo que ofrecer y ninguna contribución es demasiado grande o demasiado pequeño. Contamos con más de 90.000 páginas de contenido que se han escrito o traducidos por miembros de nuestra destacada comunidad de Mozillians . Tú puedes ser uno de ellos.

+ +

Aprende másabout contributing

+ +

 

+ +

 

+
+ +
{{TenthCampaignQuote}}
+ + + +
    +
  1. MDN en 10
    2. +
  2. La historia de MDN
    3. +
  3. Contribuyendo a MDN
    4. +
+
diff --git a/files/es/mdn/comunidad/index.html b/files/es/mdn/comunidad/index.html deleted file mode 100644 index fd3abc7f28..0000000000 --- a/files/es/mdn/comunidad/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Únete a la comunidad de MDN web docs -slug: MDN/Comunidad -tags: - - Comunidad - - Documentación - - Guía - - Proyecto MDC -translation_of: MDN/Community ---- -
{{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/mdn/contribute/community/index.html b/files/es/mdn/contribute/community/index.html deleted file mode 100644 index a80a67a1b4..0000000000 --- a/files/es/mdn/contribute/community/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Trabajando con nuestra comunidad -slug: MDN/Contribute/Community -tags: - - Comunidad - - Guía - - MDN Meta -translation_of: MDN/Community/Working_in_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/mdn/contribute/howto/crear_cuenta_mdn/index.html b/files/es/mdn/contribute/howto/crear_cuenta_mdn/index.html deleted file mode 100644 index 8e254f6ac0..0000000000 --- a/files/es/mdn/contribute/howto/crear_cuenta_mdn/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Cómo crear una cuenta MDN -slug: MDN/Contribute/Howto/Crear_cuenta_MDN -tags: - - Cuenta - - GitHub - - Perfil - - Persona - - Principiante - - account -translation_of: MDN/Contribute/Howto/Create_an_MDN_account ---- -
{{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/mdn/contribute/howto/document_a_css_property/plantilla_propiedad/index.html b/files/es/mdn/contribute/howto/document_a_css_property/plantilla_propiedad/index.html deleted file mode 100644 index a0bdd5267f..0000000000 --- a/files/es/mdn/contribute/howto/document_a_css_property/plantilla_propiedad/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Plantilla de página para propiedades CSS -slug: MDN/Contribute/Howto/Document_a_CSS_property/Plantilla_propiedad -translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template ---- -
{{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/mdn/contribute/howto/etiquetas_paginas_javascript/index.html b/files/es/mdn/contribute/howto/etiquetas_paginas_javascript/index.html deleted file mode 100644 index 42edc03ff0..0000000000 --- a/files/es/mdn/contribute/howto/etiquetas_paginas_javascript/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Cómo etiquetar páginas Javascript -slug: MDN/Contribute/Howto/Etiquetas_paginas_javascript -tags: - - Etiquetas - - JavaScript -translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages ---- -
{{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/mdn/contribute/howto/remover_macros_experimentales/index.html b/files/es/mdn/contribute/howto/remover_macros_experimentales/index.html deleted file mode 100644 index 25ee6439cd..0000000000 --- a/files/es/mdn/contribute/howto/remover_macros_experimentales/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Cómo y cuándo eliminar macros "experimentales" -slug: MDN/Contribute/Howto/Remover_Macros_Experimentales -tags: - - Experimental - - Guía - - MDN Meta - - Macros -translation_of: MDN/Contribute/Howto/Remove_Experimental_Macros ---- -
{{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/mdn/contribute/howto/revision_editorial/index.html b/files/es/mdn/contribute/howto/revision_editorial/index.html deleted file mode 100644 index 454da031a0..0000000000 --- a/files/es/mdn/contribute/howto/revision_editorial/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Cómo hacer una revisión editorial -slug: MDN/Contribute/Howto/revision_editorial -tags: - - Cómo hacerlo - - Documentación - - Guía - - Revisiones -translation_of: MDN/Contribute/Howto/Do_an_editorial_review ---- -
{{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/mdn/contribute/howto/revision_tecnica/index.html b/files/es/mdn/contribute/howto/revision_tecnica/index.html deleted file mode 100644 index e1fc2d5d5a..0000000000 --- a/files/es/mdn/contribute/howto/revision_tecnica/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Cómo hacer una revisión técnica -slug: MDN/Contribute/Howto/revision_tecnica -translation_of: MDN/Contribute/Howto/Do_a_technical_review ---- -
{{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/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/es/mdn/contribute/howto/set_the_summary_for_a_page/index.html deleted file mode 100644 index 26f62b04a2..0000000000 --- a/files/es/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Cómo colocar el resumen de una página -slug: 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 ---- -
{{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/mdn/contribute/howto/usar_barras_laterales_de_navegaci\303\263n/index.html" "b/files/es/mdn/contribute/howto/usar_barras_laterales_de_navegaci\303\263n/index.html" deleted file mode 100644 index 4ba8e4e4e4..0000000000 --- "a/files/es/mdn/contribute/howto/usar_barras_laterales_de_navegaci\303\263n/index.html" +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Cómo usar las barras laterales de navegación -slug: MDN/Contribute/Howto/Usar_barras_laterales_de_navegación -translation_of: MDN/Contribute/Howto/Use_navigation_sidebars ---- -

{{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/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/es/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html deleted file mode 100644 index 05d72dd7f7..0000000000 --- a/files/es/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Cómo escribir un artículo para ayudar a las personas a aprender sobre la Web. -slug: 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 ---- -
{{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/mdn/contribute/procesos/index.html b/files/es/mdn/contribute/procesos/index.html deleted file mode 100644 index a408f11fb7..0000000000 --- a/files/es/mdn/contribute/procesos/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Procesos de documentación -slug: MDN/Contribute/Procesos -tags: - - Landing - - MDN Meta - - Procesos -translation_of: MDN/Contribute/Processes ---- -
{{MDNSidebar}}
{{IncludeSubnav("/es/docs/MDN")}}
- -

El proyecto de Documentación MDN es enorme; hay un sinfín de teconologías que cubrimos a través de la asistencia de cientos de colaboradores de todo el mundo. Para ayudarnos a llevar orden al caos, tenemos procesos estandarizados para seguir cuando se trabaja en tareas específicas relacionadas con la documentación. Aquí encontrarás guías para estos procesos.

- -

{{LandingPageListSubPages()}}

diff --git a/files/es/mdn/contribute/processes/index.html b/files/es/mdn/contribute/processes/index.html new file mode 100644 index 0000000000..a408f11fb7 --- /dev/null +++ b/files/es/mdn/contribute/processes/index.html @@ -0,0 +1,14 @@ +--- +title: Procesos de documentación +slug: MDN/Contribute/Procesos +tags: + - Landing + - MDN Meta + - Procesos +translation_of: MDN/Contribute/Processes +--- +
{{MDNSidebar}}
{{IncludeSubnav("/es/docs/MDN")}}
+ +

El proyecto de Documentación MDN es enorme; hay un sinfín de teconologías que cubrimos a través de la asistencia de cientos de colaboradores de todo el mundo. Para ayudarnos a llevar orden al caos, tenemos procesos estandarizados para seguir cuando se trabaja en tareas específicas relacionadas con la documentación. Aquí encontrarás guías para estos procesos.

+ +

{{LandingPageListSubPages()}}

diff --git a/files/es/mdn/contribute/tareas/index.html b/files/es/mdn/contribute/tareas/index.html deleted file mode 100644 index 225d69bf1d..0000000000 --- a/files/es/mdn/contribute/tareas/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Cosas para hacer en MDN -slug: MDN/Contribute/Tareas -translation_of: MDN/Contribute/Getting_started -translation_of_original: MDN/Contribute/Tasks ---- -
{{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/mdn/guidelines/content_blocks/index.html b/files/es/mdn/guidelines/content_blocks/index.html deleted file mode 100644 index 7791d33e06..0000000000 --- a/files/es/mdn/guidelines/content_blocks/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Bloques de contenido -slug: MDN/Guidelines/Content_blocks -tags: - - MDN - - Meta -translation_of: MDN/Guidelines/CSS_style_guide -translation_of_original: MDN/Structures/Content_blocks ---- -
{{MDNSidebar}}
-

This pages lists reusable content blocks.

-
-

Grilla de tarjetas

-

Permite tener un par de tarjetas cercanas entre sí para llamar a contenidos específicos o para llamar a una acción. La clase CSS es: .card-grid (L 751 - 824 in CustomCSS).

- -

Dos columnas

-

Dos columnas separadas con un borde gris. Normalmente usadas en páginas de destino. Clase de CSS: .topicpage-table (L 830 - 837 & 82-93 in CustomCSS).

-
-
- Columna 1
-
- Columna 2
-
-

 

-

Columnas con la misma altura

-

Se usa en la página de destino de Firefox OS para envolver las columnas que deberían tener el mismo alto. Clase de CSS: .equalColumnHeights (L 25 - 38 in CustomCSS).

-
-
- Un Texo
- y nueva linea
-  
-
- Otro texto
-
- aquí
-
-

 

diff --git a/files/es/mdn/guidelines/convenciones_y_definiciones/index.html b/files/es/mdn/guidelines/convenciones_y_definiciones/index.html deleted file mode 100644 index c96e4b7ab2..0000000000 --- a/files/es/mdn/guidelines/convenciones_y_definiciones/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: MDN convenciones y definiciones -slug: MDN/Guidelines/Convenciones_y_definiciones -tags: - - Directrices - - Documentación - - Guía - - MDN - - Meta MDN -translation_of: MDN/Guidelines/Conventions_definitions ---- -
{{MDNSidebar}}{{IncludeSubnav("/es/docs/MDN")}}
- -

Este artículo define algunas convenciones y definiciones que se usan comúnmente en MDN, que pueden no ser obvias para algunas personas cuando las encuentran en la documentación.

- -

Definiciones

- -

Desaprobado y obsoleto

- -

Desaprobado y obsoleto son términos comunes asociados con tecnologías y especificaciones, pero ¿qué significan?

- -
-
Desaprobado
-
En MDN, el término desaprobado se usa para marcar una API o tecnología que ya no se recomienda, pero que aún está implementada y puede funcionar. Recientemente, la hemos actualizado a la definición utilizada en nuestro proyecto de datos de compatibilidad del navegador, que esa "característica ya no se recomienda. Es posible que se elimine en el futuro o que solo se conserve por motivos de compatibilidad. Evita el uso de esta funcionalidad."
-
Obsoleto
-
En MDN, el término obsoleto se utiliza para marcar una API o tecnología que no solo ya no se recomienda, sino que ya no se implementa en los navegadores. Sin embargo, esto fue confuso — es similar a desaprobado, y la distinción no es muy útil (aún no debes usarlo en un sitio de producción). Por lo tanto, ya no la usamos, y cualquier instancia con la que te encuentres se debe eliminar/reemplazar por desaprobada.
-
- -

Experimental

- -

Experimental puede significar diferentes cosas según el contexto en el que lo escuches o lo leas. Cuando una tecnología se describe como experimental en MDN, significa que la tecnología es incipiente e inmadura, y actualmente está en proceso de ser agregada a la plataforma web (o considerada para agregarla).

- -

Uno o ambos de estos serán ciertos:

- - - -

Si una o ambas de estas definiciones es cierta, entonces debes pensar detenidamente antes de comenzar a usar esa tecnología en cualquier tipo de proyecto de producción (es decir, no solo en una demostración o experimento). Consulta también la definición de experimental en nuestro proyecto de datos de compatibilidad del navegador.

- -

Por el contrario, un elemento ya no es experimental cuando:

- - - -

El or es importante aquí — por lo general, si una tecnología es compatible con varios navegadores importantes, la especificación será estable, pero no siempre es así. Y algunas tecnologías tendrán una especificación estable y se usarán bien, pero no tendrán soporte nativo en los navegadores (IMSC, por ejemplo).

- -

Páginas archivadas

- -

Las páginas archivadas son páginas que se almacenan en el Archivo de contenido obsoleto de MDN. Estas páginas contienen información lo suficientemente desactualizada como para que ya no sea directamente útil para nadie.

- -

Por lo general, estas se refieren a proyectos de Mozilla que han sido descontinuados y ya no se debe confiar en ellos. Pero no las eliminamos simplemente porque forman un registro histórico útil, y algunos de los patrones o ideas contenidos en ellos podrían ser útiles para trabajos futuros. Un buen ejemplo es el proyecto B2G (Firefox OS).

- -

¿Cuándo se debe archivar una página?

- -

Una página se debe archivar si se ajusta a la descripción anterior. Para archivar una página, debes utilizar la "función Mover página" (Avanzado > Mover este artículo) para mover la página al árbol de páginas de archivo (/es/docs/Archive). Es posible que no tengas los permisos para usar esta función, y antes de comenzar a archivar páginas, primero debas discutirlo con la comunidad MDN; habla con nosotros en nuestro Foro de discusión.

- -

Páginas eliminadas

- -

Las páginas eliminadas son páginas que se eliminaron explícitamente de MDN — consulta, por ejemplo, la interfaz SharedKeyframeList y el constructor SharedKeyframeList(). Estas páginas contienen información que ya no es útil de ninguna manera y/o puede ser incorrecta hasta el punto en que mantenerla disponible puede ser confuso o malo para la gente.

- -

Estas pueden ser:

- - - -

¿Cuándo se debe eliminar una página?

- -

Se debe eliminar una página si se ajusta a la descripción anterior. Para eliminar una página, debes utilizar la función "Eliminar esta página" (Avanzado> Eliminar esta página) para eliminar la página. Probablemente no tengas los permisos para usar esta función, y cuando pienses en eliminar páginas, primero debes discutirlo con la comunidad de MDN; habla con nosotros en nuestro Foro de discusión.

- -

Cuando documentar nuevas tecnologías

- -

En MDN, buscamos constantemente documentar nuevas tecnologías de estándares web según corresponda. Intentamos lograr un equilibrio entre publicar la documentación lo suficientemente temprano para que los desarrolladores puedan aprender sobre las nuevas funciones tan pronto como lo necesiten y publicarla lo suficientemente tarde para que la tecnología sea madura y estable para que los documentos no necesiten actualizaciones constantes o rápida eliminación.

- -

En general, nuestra definición de lo más temprano que consideraremos para documentar una nueva tecnología es:

- -

"Cuando la función está en una pista de estándares y se implementa en algún lugar."

- -

Definitivamente deberías considerar documentar una nueva tecnología si:

- - - -

Deberías tener más cuidado al documentar una nueva tecnología (pero deberías considerarla si tiene sentido) si:

- - - -

No debes considerar documentar una nueva tecnología si:

- - - -

Convenciones

- -

Cuando se elimina algo de la especificación

- -

A veces, durante el desarrollo de una nueva especificación, o en el transcurso de la evolución de los estándares como HTML, se agregan nuevos elementos, métodos, propiedades, etc. a la especificación, permanecen allí por un tiempo y luego se eliminan nuevamente. A veces, esto sucede muy rápido y, a veces, estos nuevos elementos permanecen en la especificación durante meses o incluso años antes de ser eliminados. Esto puede hacer que sea complicado decidir cómo manejar la eliminación del artículo de la especificación. Aquí hay algunas pautas que te ayudarán a decidir qué hacer.

- -
-

Para los propósitos de esta discusión, la palabra "elemento" se usa para significar cualquier cosa que pueda ser parte de una especificación: un elemento o un atributo de un elemento, una interfaz o cualquier método individual, propiedad u otro miembro de una interfaz, etcétera.

-
- - - -

Utiliza el sentido común con la redacción de los mensajes de advertencia y otros cambios en el texto sugeridos por las pautas anteriores. Los diferentes elementos requerirán una redacción y un manejo diferentes de la situación. En caso de duda, no dudes en pedir consejo en la sala del chat de Docs Web de MDN en Matrix, o en el foro de debate de Docs Web de MDN.

- -

Copiar contenido dentro de MDN

- -

A veces, necesitas reutilizar el mismo texto en varias páginas (o deseas usar el contenido de una página como plantilla para otra página). Tienes tres opciones:

- - - -

Copiar contenido de otro lugar

- -

A menudo, hay contenido útil sobre un tema en algún lugar de la web además de MDN. Sin embargo, copiar dicho contenido puede plantear dificultades, tanto legales como técnicas.

- -

En el nivel técnico, los motores de búsqueda suelen penalizar a un sitio en su clasificación por reproducir contenido disponible en otros lugares. Por lo tanto, es preferible tener contenido original en MDN, para mejorar la clasificación del contenido de MDN en los motores de búsqueda. Puedes vincular al contenido existente de MDN.

- -

A nivel legal, debes estar autorizado para contribuir con el contenido, y debes tener licencia y atribución de una manera que sea compatible con licencia de MDN.

- - - -

Cómo comunicar un conflicto de especificaciones

- -

Ten en cuenta que a veces (pero rara vez) hay un conflicto entre diferentes versiones de especificaciones (generalmente W3C versus WHATWG), p. ej. una versión puede tener una característica listada como obsoleta, mientras que la otra no. En tales casos, considera cuál es la realidad, es decir, qué están haciendo los navegadores, y escribe una nota "importante" para resumir ese último estado. Por ejemplo, a enero de 2019, el atributo global inputmode tiene un conflicto, que se resumió al igual que:

- -
-

Conflicto de especificaciones: La lista de especificaciones de WHATWG inputmode, y los navegadores modernos están trabajando para admitirlo. Sin embargo, la especificación W3C HTML 5.2 ya no la incluye (es decir, la marca como desaprobada). Debes considerar que la definición del WHATWG es correcta, hasta que se logre un consenso.

-
diff --git a/files/es/mdn/guidelines/conventions_definitions/index.html b/files/es/mdn/guidelines/conventions_definitions/index.html new file mode 100644 index 0000000000..c96e4b7ab2 --- /dev/null +++ b/files/es/mdn/guidelines/conventions_definitions/index.html @@ -0,0 +1,201 @@ +--- +title: MDN convenciones y definiciones +slug: MDN/Guidelines/Convenciones_y_definiciones +tags: + - Directrices + - Documentación + - Guía + - MDN + - Meta MDN +translation_of: MDN/Guidelines/Conventions_definitions +--- +
{{MDNSidebar}}{{IncludeSubnav("/es/docs/MDN")}}
+ +

Este artículo define algunas convenciones y definiciones que se usan comúnmente en MDN, que pueden no ser obvias para algunas personas cuando las encuentran en la documentación.

+ +

Definiciones

+ +

Desaprobado y obsoleto

+ +

Desaprobado y obsoleto son términos comunes asociados con tecnologías y especificaciones, pero ¿qué significan?

+ +
+
Desaprobado
+
En MDN, el término desaprobado se usa para marcar una API o tecnología que ya no se recomienda, pero que aún está implementada y puede funcionar. Recientemente, la hemos actualizado a la definición utilizada en nuestro proyecto de datos de compatibilidad del navegador, que esa "característica ya no se recomienda. Es posible que se elimine en el futuro o que solo se conserve por motivos de compatibilidad. Evita el uso de esta funcionalidad."
+
Obsoleto
+
En MDN, el término obsoleto se utiliza para marcar una API o tecnología que no solo ya no se recomienda, sino que ya no se implementa en los navegadores. Sin embargo, esto fue confuso — es similar a desaprobado, y la distinción no es muy útil (aún no debes usarlo en un sitio de producción). Por lo tanto, ya no la usamos, y cualquier instancia con la que te encuentres se debe eliminar/reemplazar por desaprobada.
+
+ +

Experimental

+ +

Experimental puede significar diferentes cosas según el contexto en el que lo escuches o lo leas. Cuando una tecnología se describe como experimental en MDN, significa que la tecnología es incipiente e inmadura, y actualmente está en proceso de ser agregada a la plataforma web (o considerada para agregarla).

+ +

Uno o ambos de estos serán ciertos:

+ + + +

Si una o ambas de estas definiciones es cierta, entonces debes pensar detenidamente antes de comenzar a usar esa tecnología en cualquier tipo de proyecto de producción (es decir, no solo en una demostración o experimento). Consulta también la definición de experimental en nuestro proyecto de datos de compatibilidad del navegador.

+ +

Por el contrario, un elemento ya no es experimental cuando:

+ + + +

El or es importante aquí — por lo general, si una tecnología es compatible con varios navegadores importantes, la especificación será estable, pero no siempre es así. Y algunas tecnologías tendrán una especificación estable y se usarán bien, pero no tendrán soporte nativo en los navegadores (IMSC, por ejemplo).

+ +

Páginas archivadas

+ +

Las páginas archivadas son páginas que se almacenan en el Archivo de contenido obsoleto de MDN. Estas páginas contienen información lo suficientemente desactualizada como para que ya no sea directamente útil para nadie.

+ +

Por lo general, estas se refieren a proyectos de Mozilla que han sido descontinuados y ya no se debe confiar en ellos. Pero no las eliminamos simplemente porque forman un registro histórico útil, y algunos de los patrones o ideas contenidos en ellos podrían ser útiles para trabajos futuros. Un buen ejemplo es el proyecto B2G (Firefox OS).

+ +

¿Cuándo se debe archivar una página?

+ +

Una página se debe archivar si se ajusta a la descripción anterior. Para archivar una página, debes utilizar la "función Mover página" (Avanzado > Mover este artículo) para mover la página al árbol de páginas de archivo (/es/docs/Archive). Es posible que no tengas los permisos para usar esta función, y antes de comenzar a archivar páginas, primero debas discutirlo con la comunidad MDN; habla con nosotros en nuestro Foro de discusión.

+ +

Páginas eliminadas

+ +

Las páginas eliminadas son páginas que se eliminaron explícitamente de MDN — consulta, por ejemplo, la interfaz SharedKeyframeList y el constructor SharedKeyframeList(). Estas páginas contienen información que ya no es útil de ninguna manera y/o puede ser incorrecta hasta el punto en que mantenerla disponible puede ser confuso o malo para la gente.

+ +

Estas pueden ser:

+ + + +

¿Cuándo se debe eliminar una página?

+ +

Se debe eliminar una página si se ajusta a la descripción anterior. Para eliminar una página, debes utilizar la función "Eliminar esta página" (Avanzado> Eliminar esta página) para eliminar la página. Probablemente no tengas los permisos para usar esta función, y cuando pienses en eliminar páginas, primero debes discutirlo con la comunidad de MDN; habla con nosotros en nuestro Foro de discusión.

+ +

Cuando documentar nuevas tecnologías

+ +

En MDN, buscamos constantemente documentar nuevas tecnologías de estándares web según corresponda. Intentamos lograr un equilibrio entre publicar la documentación lo suficientemente temprano para que los desarrolladores puedan aprender sobre las nuevas funciones tan pronto como lo necesiten y publicarla lo suficientemente tarde para que la tecnología sea madura y estable para que los documentos no necesiten actualizaciones constantes o rápida eliminación.

+ +

En general, nuestra definición de lo más temprano que consideraremos para documentar una nueva tecnología es:

+ +

"Cuando la función está en una pista de estándares y se implementa en algún lugar."

+ +

Definitivamente deberías considerar documentar una nueva tecnología si:

+ + + +

Deberías tener más cuidado al documentar una nueva tecnología (pero deberías considerarla si tiene sentido) si:

+ + + +

No debes considerar documentar una nueva tecnología si:

+ + + +

Convenciones

+ +

Cuando se elimina algo de la especificación

+ +

A veces, durante el desarrollo de una nueva especificación, o en el transcurso de la evolución de los estándares como HTML, se agregan nuevos elementos, métodos, propiedades, etc. a la especificación, permanecen allí por un tiempo y luego se eliminan nuevamente. A veces, esto sucede muy rápido y, a veces, estos nuevos elementos permanecen en la especificación durante meses o incluso años antes de ser eliminados. Esto puede hacer que sea complicado decidir cómo manejar la eliminación del artículo de la especificación. Aquí hay algunas pautas que te ayudarán a decidir qué hacer.

+ +
+

Para los propósitos de esta discusión, la palabra "elemento" se usa para significar cualquier cosa que pueda ser parte de una especificación: un elemento o un atributo de un elemento, una interfaz o cualquier método individual, propiedad u otro miembro de una interfaz, etcétera.

+
+ + + +

Utiliza el sentido común con la redacción de los mensajes de advertencia y otros cambios en el texto sugeridos por las pautas anteriores. Los diferentes elementos requerirán una redacción y un manejo diferentes de la situación. En caso de duda, no dudes en pedir consejo en la sala del chat de Docs Web de MDN en Matrix, o en el foro de debate de Docs Web de MDN.

+ +

Copiar contenido dentro de MDN

+ +

A veces, necesitas reutilizar el mismo texto en varias páginas (o deseas usar el contenido de una página como plantilla para otra página). Tienes tres opciones:

+ + + +

Copiar contenido de otro lugar

+ +

A menudo, hay contenido útil sobre un tema en algún lugar de la web además de MDN. Sin embargo, copiar dicho contenido puede plantear dificultades, tanto legales como técnicas.

+ +

En el nivel técnico, los motores de búsqueda suelen penalizar a un sitio en su clasificación por reproducir contenido disponible en otros lugares. Por lo tanto, es preferible tener contenido original en MDN, para mejorar la clasificación del contenido de MDN en los motores de búsqueda. Puedes vincular al contenido existente de MDN.

+ +

A nivel legal, debes estar autorizado para contribuir con el contenido, y debes tener licencia y atribución de una manera que sea compatible con licencia de MDN.

+ + + +

Cómo comunicar un conflicto de especificaciones

+ +

Ten en cuenta que a veces (pero rara vez) hay un conflicto entre diferentes versiones de especificaciones (generalmente W3C versus WHATWG), p. ej. una versión puede tener una característica listada como obsoleta, mientras que la otra no. En tales casos, considera cuál es la realidad, es decir, qué están haciendo los navegadores, y escribe una nota "importante" para resumir ese último estado. Por ejemplo, a enero de 2019, el atributo global inputmode tiene un conflicto, que se resumió al igual que:

+ +
+

Conflicto de especificaciones: La lista de especificaciones de WHATWG inputmode, y los navegadores modernos están trabajando para admitirlo. Sin embargo, la especificación W3C HTML 5.2 ya no la incluye (es decir, la marca como desaprobada). Debes considerar que la definición del WHATWG es correcta, hasta que se logre un consenso.

+
diff --git a/files/es/mdn/guidelines/css_style_guide/index.html b/files/es/mdn/guidelines/css_style_guide/index.html new file mode 100644 index 0000000000..7791d33e06 --- /dev/null +++ b/files/es/mdn/guidelines/css_style_guide/index.html @@ -0,0 +1,47 @@ +--- +title: Bloques de contenido +slug: MDN/Guidelines/Content_blocks +tags: + - MDN + - Meta +translation_of: MDN/Guidelines/CSS_style_guide +translation_of_original: MDN/Structures/Content_blocks +--- +
{{MDNSidebar}}
+

This pages lists reusable content blocks.

+
+

Grilla de tarjetas

+

Permite tener un par de tarjetas cercanas entre sí para llamar a contenidos específicos o para llamar a una acción. La clase CSS es: .card-grid (L 751 - 824 in CustomCSS).

+ +

Dos columnas

+

Dos columnas separadas con un borde gris. Normalmente usadas en páginas de destino. Clase de CSS: .topicpage-table (L 830 - 837 & 82-93 in CustomCSS).

+
+
+ Columna 1
+
+ Columna 2
+
+

 

+

Columnas con la misma altura

+

Se usa en la página de destino de Firefox OS para envolver las columnas que deberían tener el mismo alto. Clase de CSS: .equalColumnHeights (L 25 - 38 in CustomCSS).

+
+
+ Un Texo
+ y nueva linea
+  
+
+ Otro texto
+
+ aquí
+
+

 

diff --git "a/files/es/mdn/guidelines/project_colon_gu\303\255a_de_estilo/index.html" "b/files/es/mdn/guidelines/project_colon_gu\303\255a_de_estilo/index.html" deleted file mode 100644 index 40bffd16ca..0000000000 --- "a/files/es/mdn/guidelines/project_colon_gu\303\255a_de_estilo/index.html" +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Guía de estilo -slug: 'MDN/Guidelines/Project:Guía_de_estilo' -tags: - - Proyecto_MDC - - Todas_las_Categorías -translation_of: MDN/Guidelines/Writing_style_guide ---- -
{{MDNSidebar}}
- -

Para mostrar la documentación de forma organizada, estandarizada y fácil de leer, la guía de estilos de MDN describe cómo debe organizarse, escribirse y formatearse el texto. Se trata de pautas más que de reglas estrictas. Interesa más el contenido que el formato, así que no te sientas obligado a aprenderte la guía de estilos antes de colaborar. No te enojes ni te sorprendas si después un voluntario edita tu trabajo para que quede de acuerdo con esta guía.

- -

Los aspectos lingüísticos de esta guía se refieren principalmente a la documentación en idioma inglés.Se pueden (y se anima a) crear guías de estilo en otros idiomas. Estas deben publicarse como subpáginas de la página del equipo de localización.

- -

Si buscas especificaciones de cómo debe estructurarse un determinado tipo de página, mira la guía de diseño de MDN.

- -

Aquí se enumeran los usos y costumbres recomendados a la hora de editar los artículos de este wiki. Si ves que falta contenido o crees que deberíamos mejorar o corregir algo, por favor coméntalo en la página de discusión.

- -

Uso de mayúsculas en el nombre de las páginas y los encabezados

- - - -

Infinitivos y gerundios

- - - -

Siglas y abreviaturas

- -

Mayúsculas y espacios

- - - -

Expansión

- - - - - -

Plurales

- - - -

Números

- -

Fechas

- - - -

Cantidades

- - - -

Esta regla tiene una excepción: en un documento que trate del lenguaje 'X', las cantidades deben expresarse del modo definido por ese lenguaje.

- -

Usted, tú y yo

- -

El tuteo

- -

Este es un problema complejo, puede que no exista la solución perfecta a gusto de todos. Pero sería interesante ponernos de acuerdo.

- -

Por lo pronto, hemos decidido usar el tú y evitar regionalismos en nuestras traducciones. Te invitamos a comentar tus opiniones en nuestra lista de correo. 

- -

La 1ª persona

- -

Salvo rarísimas excepciones, nunca debe usarse.

- - - -

Otras guías de estilo recomendadas

- -

Si tienes dudas sobre usos y estilos que no sean tratados en este documento, te recomendamos consultar:

- - - -

Los traductores también deberían consultar Writer's guide para conocer el estilo usado en la edición inglesa.

- -

Diccionarios recomendados

- -

Si tienes dudas sobre gramática y ortografía, puedes visitar:

- - diff --git a/files/es/mdn/guidelines/writing_style_guide/index.html b/files/es/mdn/guidelines/writing_style_guide/index.html new file mode 100644 index 0000000000..40bffd16ca --- /dev/null +++ b/files/es/mdn/guidelines/writing_style_guide/index.html @@ -0,0 +1,146 @@ +--- +title: Guía de estilo +slug: 'MDN/Guidelines/Project:Guía_de_estilo' +tags: + - Proyecto_MDC + - Todas_las_Categorías +translation_of: MDN/Guidelines/Writing_style_guide +--- +
{{MDNSidebar}}
+ +

Para mostrar la documentación de forma organizada, estandarizada y fácil de leer, la guía de estilos de MDN describe cómo debe organizarse, escribirse y formatearse el texto. Se trata de pautas más que de reglas estrictas. Interesa más el contenido que el formato, así que no te sientas obligado a aprenderte la guía de estilos antes de colaborar. No te enojes ni te sorprendas si después un voluntario edita tu trabajo para que quede de acuerdo con esta guía.

+ +

Los aspectos lingüísticos de esta guía se refieren principalmente a la documentación en idioma inglés.Se pueden (y se anima a) crear guías de estilo en otros idiomas. Estas deben publicarse como subpáginas de la página del equipo de localización.

+ +

Si buscas especificaciones de cómo debe estructurarse un determinado tipo de página, mira la guía de diseño de MDN.

+ +

Aquí se enumeran los usos y costumbres recomendados a la hora de editar los artículos de este wiki. Si ves que falta contenido o crees que deberíamos mejorar o corregir algo, por favor coméntalo en la página de discusión.

+ +

Uso de mayúsculas en el nombre de las páginas y los encabezados

+ + + +

Infinitivos y gerundios

+ + + +

Siglas y abreviaturas

+ +

Mayúsculas y espacios

+ + + +

Expansión

+ + + + + +

Plurales

+ + + +

Números

+ +

Fechas

+ + + +

Cantidades

+ + + +

Esta regla tiene una excepción: en un documento que trate del lenguaje 'X', las cantidades deben expresarse del modo definido por ese lenguaje.

+ +

Usted, tú y yo

+ +

El tuteo

+ +

Este es un problema complejo, puede que no exista la solución perfecta a gusto de todos. Pero sería interesante ponernos de acuerdo.

+ +

Por lo pronto, hemos decidido usar el tú y evitar regionalismos en nuestras traducciones. Te invitamos a comentar tus opiniones en nuestra lista de correo. 

+ +

La 1ª persona

+ +

Salvo rarísimas excepciones, nunca debe usarse.

+ + + +

Otras guías de estilo recomendadas

+ +

Si tienes dudas sobre usos y estilos que no sean tratados en este documento, te recomendamos consultar:

+ + + +

Los traductores también deberían consultar Writer's guide para conocer el estilo usado en la edición inglesa.

+ +

Diccionarios recomendados

+ +

Si tienes dudas sobre gramática y ortografía, puedes visitar:

+ + diff --git a/files/es/mdn/kuma/contributing/getting_started/index.html b/files/es/mdn/kuma/contributing/getting_started/index.html deleted file mode 100644 index afe0ce3b5a..0000000000 --- a/files/es/mdn/kuma/contributing/getting_started/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Primeros pasos -slug: MDN/Kuma/Contributing/Getting_started -translation_of: MDN/Kuma -translation_of_original: 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/mdn/kuma/contributing/index.html b/files/es/mdn/kuma/contributing/index.html deleted file mode 100644 index 9fc477a01b..0000000000 --- a/files/es/mdn/kuma/contributing/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Contribuir a Kuma -slug: MDN/Kuma/Contributing -translation_of: MDN/Kuma -translation_of_original: 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/mdn/kuma/index.html b/files/es/mdn/kuma/index.html deleted file mode 100644 index b7b0de4fd9..0000000000 --- a/files/es/mdn/kuma/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Kuma -slug: MDN/Kuma -translation_of: MDN/Kuma ---- -
{{MDNSidebar}}
- -

Kuma es la plataforma wiki que impulsa Mozilla Developer Network. Es una plataforma open source escrita en Python usando el framework Django.

- -
-
-

Documentación de Kuma

- -
-
The Kuma API
-
Kuma provee una API simple que te permite acceder a la información sobre las páginas e incluso para poner nuevo contenido en las páginas.
-
Introducción a KumaScript:
-
...el lenguaje de plantillas de Kuma.
-
Usando KumaScript y las plantillas
-
Una guía de cómo usar las plantillas KumaScript en el contenido del artículo.
-
Referencia KumaScript
-
Una referencia a KumaScript.
-
Contribuyendo a Kuma
-
Una guía para forkear Kuma y contribuir al proyecto.
-
- -

Artículos antiguos para clasificar:

- - - -

Ver todos...

-
- -
-

Herramientas y tareas

- -
-
Bugs
-
Una lista de los bugs de Kuma. Sientase libre para buscar lo que quiera y lo que quieras arreglas! Este link requiere que entres en Bugzilla con su respectiva cuenta.
-
Reportar un bug
-
Si usted tiene un problema con Kuma, o tiene una idea para hacerlo mejor, ¡tú puedes reportar un bug!
-
Cambios
-
Una lista de los cambios recientes; este es un buen lugar para ver qué ha pasado recientemente.
-
¿Qué ha sido implementado?
-
Un tablero de estado de qué ha sido implementado al servidor de producción.
-
Kanban board
-
The Kanban board used for managing ongoing work on the Kuma project.
-
Server Monitoring
-
Some of our New Relic charts
-
-
-
diff --git a/files/es/mdn/structures/compatibility_tables/index.html b/files/es/mdn/structures/compatibility_tables/index.html new file mode 100644 index 0000000000..cd9a5097d2 --- /dev/null +++ b/files/es/mdn/structures/compatibility_tables/index.html @@ -0,0 +1,476 @@ +--- +title: >- + Tablas de compatibilidad y repositorio de datos de compatibilidad del + navegador (DCN) +slug: MDN/Structures/Tablas_de_compatibilidad +tags: + - Estructuras + - Guía + - Meta MDN + - compatibilidad con el navegador + - tablas de compatibilidad +translation_of: MDN/Structures/Compatibility_tables +--- +
{{MDNSidebar}}
+ +

MDN tiene un formato estándar para tablas de compatibilidad para nuestra documentación web abierta; es decir, documentación de tecnologías como DOM, HTML, CSS, JavaScript, SVG, etc., que se comparte en todos los navegadores. Este artículo es una guía de "introducción" sobre cómo agregar y mantener la base de datos a partir de la cual se generan las tablas de compatibilidad, además de cómo integrar las tablas en artículos.

+ +

Para obtener documentación más avanzada, así como los últimos cambios en los procesos y los esquemas JSON utilizados para representar los datos, échale un vistazo al repositorio de datos de la guía para colaboradores, así como a la guía de directrices de datos.

+ +

Si tienes preguntas o descubres problemas, compártelos con nosotros en el foro de discusión de MDN.

+ +

Cómo acceder al repositorio de datos

+ +

Los datos se almacenan en un repositorio de GitHub; consulta https://github.com/mdn/browser-compat-data. Para acceder a él, necesitas tener una cuenta de GitHub, bifurcar el repositorio de compatibilidad de datos del navegador en tu propia cuenta y luego clonar tu bifurcación en tu máquina local.

+ +

Preparándose para agregar los datos

+ +

Antes de agregar algunos datos nuevos, te debes asegurar de que tu bifurcación esté actualizada con el repositorio principal (contiene el mismo contenido), crea una nueva rama dentro de tu bifurcación para contener tus adiciones, luego ingresa esa rama en tu clon local para que puedas empezar a trabajar dentro de ella:

+ +

Veamos la siguiente sencilla forma de asegurarte de que tu bifurcación esté actualizada:

+ +

Agregar el repositorio principal de datos de compatibilidad del navegador como remoto

+ +

Ve al clon local de tu bifurcación en tu terminal/línea de comandos, y agrega un control remoto que apunte al repositorio principal (upstream) de esa manera (solo necesitas hacer esto una vez):

+ +
git remote add upstream https://github.com/mdn/browser-compat-data.git
+ +

Si no estás seguro de haber hecho esto, puedes verificar qué controles remotos tiene tu repositorio usando

+ +
git remote -v
+ +

Actualiza tu bifurcación con el contenido del remoto

+ +

Ahora, siempre que desees actualizar tu bifurcación, lo puedes hacer mediante:

+ +
    +
  1. +

    Asegúrate de que estas en la rama master:

    + + 
    git checkout master
    +
    2. +
  2. +

    obtén el contenido actualizado del repositorio utilizando lo siguiente:

    + + 
    git fetch upstream
    +
    3. +
  3. +

    rebasa el contenido de tu master con el contenido del repositorio principal:

    + + 
    git rebase upstream/master
    +
    4. +
  4. +

    empuja estas actualizaciones a tu bifurcación remota usando lo siguiente:

    + + 
    git push
    +
    5. +
+ +

Crea una nueva rama para hacer tu trabajo

+ +

A continuación, ve a tu bifurcación remota (estará en https://github.com/tu-nombre-de-usuario/browser-compat-data) y crea una nueva rama para almacenar tus cambios para esta adición de datos. Esto lo puedes hacer mediante:

+ +
    +
  1. Un clic en el botón "Rama: Master".
    2. +
  2. Ingresa un nuevo nombre para la rama en el campo de texto "Buscar o crear una rama...".
    3. +
  3. Presiona el botón resultante "Crear rama nombre-de-rama desde Master".
    4. +
+ +

Por ejemplo, si quisieras agregar datos para la API WebVR, crearías una rama llamada algo así como "webvr".

+ +

Cambia a la nueva rama

+ +

En este punto, regresa a tu terminal/línea de comando y actualiza el clon local de tu bifurcación para incluir tu nueva rama usando el siguiente comando:

+ +
git pull
+ +

Ahora cambia a tu nueva rama usando esto:

+ +
git checkout nombre-de-rama
+ +

¡Ahora debería estar listo para comenzar a agregar tus datos!

+ +

Añadir los datos

+ +

Para agregar los datos, debes crear un nuevo archivo o archivos para almacenar tus datos de compatibilidad. Los archivos que necesitas crear difieren, según la tecnología en la que estés trabajando:

+ + + +

Cada archivo que crees debe seguir el patrón definido en el esquema contenido en nuestro repositorio; puedes ver la descripción detallada del esquema aquí.

+ +

Estructura básica de datos de compatibilidad

+ +

Veamos un ejemplo. Los archivos JSON de propiedades CSS, por ejemplo, necesitan la siguiente estructura básica:

+ +
{
+  "css": {
+    "properties": {
+      "border-width": {
+        "__compat": {
+          ...
+        }
+      }
+    }
+  }
+}
+ +

Tienes el objeto css, dentro del cual hay un objeto properties. Dentro del objeto properties, necesitas un miembro para cada una de las características específicas para las que deseas definir los datos de compatibilidad. Cada uno de estos miembros tiene un miembro __compat, dentro del cual van los datos reales.

+ +

Los datos anteriores se encuentran en el archivo: border-width.json compáralo con la tabla de soporte de border-width representada en MDN.

+ +

Otros tipos de características funcionan de la misma manera, pero con diferentes nombres de objeto:

+ + + +
+

En páginas HTML, CSS y JS, normalmente solo necesitarás una función. Las interfaces de API funcionan de forma ligeramente diferente — siempre tienen varias subcaracterísticas (consulta {{anch("Sub-features", "Subcaracterísticas")}}, a continuación).

+ +

Estructura básica dentro de una característica

+ +

Dentro de un miembro de función __compat, debes incluir los siguientes miembros:

+ + + +

Los nombres de los miembros del navegador se definen en el esquema (consulta identificadores del navegador). Debes utilizar la lista completa de identificadores definidos actualmente. Si deseas agregar otro navegador, habla con nosotros primero, ya que esto podría tener un impacto de gran alcance y no se debe hacer sin pensarlo detenidamente.

+ +

En un archivo de datos de compatibilidad del navegador básico, solo necesitarás incluir "version_added" dentro de los miembros del identificador del navegador (cubriremos {{anch("Advanced cases", "Casos avanzados")}} más adelante). Los diferentes valores que posiblemente quieras incluir son los siguientes:

+ + + +

Dentro del miembro status, incluirás tres submiembros:

+ + + +

Los datos de características de border-width (consulta también border-width.json) se muestra a continuación como ejemplo:

+ +
"__compat": {
+  "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/border-width",
+  "support": {
+    "chrome": {
+      "version_added": "1"
+    },
+    "webview_android": {
+      "version_added": "2"
+    },
+    "edge": {
+      "version_added": true
+    },
+    "edge_mobile": {
+      "version_added": true
+    },
+    "firefox": {
+      "version_added": "1"
+    },
+    "firefox_android": {
+      "version_added": "1"
+    },
+    "ie": {
+      "version_added": "4"
+    },
+    "ie_mobile": {
+      "version_added": "6"
+    },
+    "opera": {
+      "version_added": "3.5"
+    },
+    "opera_android": {
+      "version_added": "11"
+    },
+    "safari": {
+      "version_added": "1"
+    },
+    "safari_ios": {
+      "version_added": "3"
+    }
+  },
+  "status": {
+    "experimental": false,
+    "standard_track": true,
+    "deprecated": false
+  }
+}
+ +

Agrega una descripción

+ +

Hay un cuarto miembro, opcional, que puede ir dentro del miembro __compat — description. Este se puede utilizar para incluir una descripción legible por humanos de la característica. Únicamente lo debes incluir si es difícil ver cuál es la característica al mirar los datos. Por ejemplo, puede que no sea tan obvio lo que es un constructor al mirar la estructura de datos, por lo que puedes incluir una descripción como esta:

+ +
{
+  "api": {
+    "AbortController": {
+      "__compat": {
+        ...
+      },
+      "AbortController": {
+        "__compat": {
+          "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController/AbortController",
+          "description": "<code>AbortController()</code> constructor",
+          "support": {
+            ...
+          }
+        }
+      }
+
+      ... etc.
+    }
+  }
+}
+ +

Subcaracterísticas

+ +

En una página donde la tabla de compatibilidad tiene más de una fila, necesitarás varias subcaracterísticas dentro de cada característica para definir la información de cada fila. Esto puede suceder, por ejemplo, cuando tienes el soporte básico para una característica almacenada en una fila, pero luego la característica también tiene una nueva propiedad o tipo de valor que se agregó mucho más tarde en la vida de la especificación y solo se admite en una par de navegadores.

+ +

Como ejemplo, consulta los datos de compatibilidad y la página MDN correspondiente para la propiedad background-color. El soporte básico existe dentro del objeto __compat como se explicó anteriormente, luego tienes una fila adicional para el soporte de los navegadores para "canal alfa para valores hexadecimales", que contiene tu propio objeto __compat.

+ +
{
+  "css": {
+    "properties": {
+      "background-color": {
+        "__compat": {
+          ...
+        },
+        "alpha_ch_for_hex": {
+          "__compat": {
+            ...
+          },
+        }
+      }
+    }
+  }
+}
+ +

Para una API, tienes los dos niveles superiores definidos como api.nombre-de-la-interfaz, luego un __compat de nivel superior para definir la compatibilidad general del navegador de la interfaz, luego una subfunción para cada uno de los métodos, propiedades y constructores contenidos dentro de la interfaz. La estructura básica se ve así:

+ +
{
+  "api": {
+    "VRDisplay": {
+      "__compat": {
+        ...
+      },
+      "cancelAnimationFrame": {
+        "__compat": {
+          ...
+        }
+      },
+      "capabilities": {
+        "__compat": {
+          ...
+        }
+      },
+
+      ... etc.
+
+    }
+  }
+}
+ +

Consulta VRDisplay.json para ver un ejemplo completo.

+
+ +

Agregar datos: casos avanzados

+ +

Hay algunas características avanzadas que querrás incluir en los datos de compatibilidad del navegador. El objetivo de esta sección es enumerar los más comunes, proporcionando un ejemplo de cada uno para mostrar cómo los puedes implementar en tus propios datos de compatibilidad.

+ +

Incluyendo una nota a pie de página

+ +

A menudo, las tablas de compatibilidad incluirán notas a pie de página relacionadas con ciertas entradas que explican detalles útiles o comportamientos extraños que los desarrolladores encontrarán útiles. Como ejemplo, la entrada de Chrome para Android para {{domxref("VRDisplay.capabilities")}} (consulta también VRDisplay.json) (en el momento de escribir este artículo) tenía una nota al pie de página "Actualmente solo es compatible con Google Daydream". Para incluir esto en los datos de capacidades, agregamos un submiembro "notes" dentro del submiembro "chrome_android" relevante; se vería así:

+ +
"chrome_android": {
+  "version_added": true,
+  "notes": "Currently supported only by Google Daydream."
+}
+ +

Incluyendo un prefijo de proveedor

+ +

Si una característica es compatible con un prefijo de proveedor en uno o más navegadores, querrás dejarlo en claro en los datos de compatibilidad del navegador. imagina que tienes una característica que es compatible con un prefijo -moz- en Firefox. Para especificar esto en los datos de compatibilidad, debes agregar un submiembro "prefix" dentro del submiembro "firefox" relevante. Y se vería así:

+ +
"firefox": {
+  "version_added": true,
+  "prefix": "-moz-"
+}
+ +

Incluyendo preferencias o banderas del navegador

+ +

Algunas características pueden ser compatibles con un navegador, pero son experimentales y están desactivadas de forma predeterminada. Si un usuario quiere jugar con esta característica, debe activarla usando una preferencia/bandera.

+ +

Para representar esto en los datos de compatibilidad, debes agregar el submiembro "flags" dentro del submiembro del identificador del navegador relevante. El valor de "flags" es un arreglo de objetos, cada uno de los cuales contiene tres miembros:

+ + + +

Entonces, para agregar una preferencia/bandera al soporte de Chrome para una característica, harías algo como esto:

+ +
"chrome": {
+  "version_added": "50",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "Enable Experimental Web Platform Features",
+      "value_to_set": "true"
+    }
+  ]
+},
+ +

Si una característica está detrás de dos o más banderas, puedes agregar objetos adicionales al arreglo "flags", como en este caso, por ejemplo:

+ +
"firefox": {
+  "version_added": "57",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "dom.streams.enabled",
+      "value_to_set": "true"
+    },
+    {
+      "type": "preference",
+      "name": "javascript.options.streams",
+      "value_to_set": "true"
+    }
+  ]
+},
+ +

Incluyendo una versión donde se eliminó el soporte

+ +

A veces, una característica se agregará en una determinada versión del navegador, pero luego se eliminará nuevamente cuando la característica esté obsoleta. Esto se puede representar fácilmente usando el submiembro "version_removed", que toma como valor una cadena que representa el número de versión en el que se eliminó. Por ejemplo:

+ +
"firefox": {
+  "version_added": "35",
+  "version_removed": "47",
+},
+ +

Incluyendo múltiples puntos de soporte para la misma entrada del navegador

+ +

A veces, querrás agregar varios puntos de datos de soporte para el mismo navegador dentro de la misma característica.

+ +

Como ejemplo, la propiedad {{cssxref("text-align-last")}} (ve también text-align-last.json) se agregó a Chrome en la versión 35, compatible con una pref.

+ +

El soporte mencionado anteriormente se eliminó en la versión 47; también en la versión 47, se agregó soporte para text-align-last habilitado de manera predeterminada.

+ +

Para incluir estos dos puntos de datos, puedes hacer que el valor del submiembro "chrome" sea un arreglo que contenga dos objetos de información de soporte, en lugar de un solo objeto de información de soporte:

+ +
"chrome": [
+  {
+    "version_added": "47"
+  },
+  {
+    "version_added": "35",
+    "version_removed": "47",
+    "flags": [
+      {
+        "type": "preference",
+        "name": "Enable Experimental Web Platform Features",
+        "value_to_set": "true"
+      }
+    ]
+  }
+],
+ +
+

Nota Debes colocar el punto de soporte más actual o importante primero en el arreglo — esto hace que los datos sean más fáciles de leer para las personas que solo desean escanearlos para obtener la información más reciente.

+
+ +

Incluyendo un nombre alternativo

+ +

Ocasionalmente, los navegadores admitirán una característica con un nombre diferente al definido en su especificación. Esto se podría deber, por ejemplo, a que un navegador agregó soporte experimental para una característica antes, y luego el nombre cambió antes de que se estabilizara la especificación.

+ +

Para incluir un caso de este tipo en los datos de compatibilidad del navegador, puedes incluir un punto de información de soporte que especifique el nombre alternativo dentro de un miembro "alternative_name".

+ +
+

Nota Es posible que el nombre alternativo no sea un alias exacto — posiblemente tenga un comportamiento diferente al de la versión estándar.

+
+ +

Veamos un ejemplo. La propiedad {{cssxref("border-top-right-radius")}} (consulta también border-top-right-radius.json) era compatible con Firefox:

+ + + +

Para representar esto en los datos, usamos el siguiente JSON:

+ +
"firefox": [
+  {
+    "version_added": "4",
+    "notes": "Antes de Firefox 50.0, los estilos de borde de las esquinas redondeadas siempre se representaban como si border-style fuera sólido. Esto se ha solucionado en Firefox 50.0."
+  },
+  {
+    "prefix": "-webkit-",
+    "version_added": "49",
+    "notes": "De Firefox 44 a 48, el prefijo -webkit- estaba disponible con la preferencia layout.css.prefixes.webkit. A partir de Firefox 49, la preferencia predeterminada es <code>true</code>."
+  },
+  {
+    "alternative_name": "-moz-border-radius-topright",
+    "version_added": "1",
+    "version_removed": "12"
+  }
+],
+ +

Empujar un cambio de nuevo al repositorio principal

+ +

Una vez que hayas terminado de agregar tus datos de compatibilidad, primero debes probarlos usando los siguientes comandos:

+ + + +

Si se ve bien, debes confirmarlo y volver a colocarlo en tu bifurcación remota en GitHub. Lo puedes hacer fácilmente en tu terminal con comandos como estos:

+ +
git add .
+git commit -m 'adding compat data for nombre-de-la-característica'
+git push
+ +

Ahora ve a tu bifurcación remota (es decir, https://github.com/tu-nombre-de-usuario/browser-compat-data) y deberías ver información sobre tu inserción en la parte superior de la lista de archivos (debajo de "Tus ramas enviadas recientemente"). Puedes crear una solicitud de extracción (iniciando el proceso de enviarla al repositorio principal) presionando el botón "Comparar y solicitud de extracción" y luego siguiendo las sencillas instrucciones en la siguiente pantalla.

+ +

En este punto, solo tienes que esperar. Un revisor examinará tu solicitud de extracción y la fusionará con el repositorio principal, O solicitará que realices cambios. Si se necesitan cambios, realiza los cambios y envíalos nuevamente hasta que se acepte la SE.

+ +

Insertar los datos en páginas MDN

+ +

Una vez que tus nuevos datos se hayan incluido en el repositorio principal, puedes comenzar a generar dinámicamente tablas de compatibilidad del navegador basadas en esos datos en las páginas MDN usando la macro {{TemplateLink("Compat")}}. Esta toma un solo parámetro, la notación de puntos requerida para recorrer los datos JSON y encontrar el objeto que representa la característica para la que deseas generar la tabla de compatibilidad.

+ +

Por encima de la llamada a la macro, para ayudar a otros colaboradores a encontrar su camino, debes agregar un texto oculto que solo sea visible a los colaboradores de MDN en el modo de edición:

+ +
<div class="hidden">
+La tabla de compatibilidad de esta página se genera a partir de datos estructurados.
+Si deseas contribuir con los datos, consulta
+<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>
+y envíanos una solicitud de extracción.
+</div>
+ +

Por ejemplo, en la página de encabezado HTTP {{HTTPHeader("Accept-Charset")}}, la llamada a la macro se ve así: \{{Compat("http.headers.Accept-Charset")}}. Si observas el accept-charset.json en el repositorio, verás cómo esto se refleja en los datos JSON.

+ +

Otro ejemplo, la tabla de compatibilidad para la propiedad {{domxref("VRDisplay.capabilities")}} se genera usando \{{Compat("api.VRDisplay.capabilities")}}. La llamada a la macro genera la siguiente tabla (y el correspondiente conjunto de notas):

+ +
+ + +

{{Compat("api.VRDisplay.capabilities")}}

+ +
+

Nota Los nombres de archivo a menudo coinciden con las etiquetas dadas a las interfaces dentro de las estructuras JSON, pero no siempre es así. Cuando las llamadas a macro generan las tablas, recorren todos los archivos hasta encontrar el JSON relevante para usar, por lo que los nombres de archivo no son críticos. Dicho esto, siempre debes nombrarlos de la manera más intuitiva posible.

+
diff --git a/files/es/mdn/structures/ejemplos_ejecutables/index.html b/files/es/mdn/structures/ejemplos_ejecutables/index.html deleted file mode 100644 index f5743b558e..0000000000 --- a/files/es/mdn/structures/ejemplos_ejecutables/index.html +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: Ejemplos ejecutables -slug: MDN/Structures/Ejemplos_ejecutables -translation_of: MDN/Structures/Live_samples ---- -
{{MDNSidebar}}

MDN puede convertir ejemplos de código de los artículos a ejemplos ejecutables que el lector puede ver en acción. Estos ejemplos ejecutables pueden contener HTML, CSS, y JavaScript en cualquier combinación. Ten en cuenta que los ejemplos "ejecutables" no son interactivos; sin embargo, aseguran que el output coincida exactamente con el código de ejemplo, porque es generado por este.

- -

Como funciona el sistema de ejemplos ejecutables

- -

El sistema de ejemplos ejecutables agrupa el código, lo une en un archivo HTML, procesa el HTML y entonces despliega el output en un {{HTMLElement("iframe")}}. Por lo tanto un ejemplo ejecutable consiste de dos partes:

- - - -

Un "grupo" de bloques de código, en este contexto, es identificado por el ID de un header o de un bloque de contenido (tal como un {{HTMLElement("div")}}).

- - - -

La macro usa un URL especial para extraer el código de ejemplo: http://url-de-la-pagina$ejemplos/grupo-id, donde grupo-id es el ID del header o del bloque de contenido donde se localiza el código. El frame resultante (o página) es sandboxed (entorno de pruebas), seguro, y  técnicamente puede hacer cualquier cosa que funcione en la Web. Por supuesto, desde el punto de vista práctico, el código debe contribuir al tema de la página que lo contiene; cosas al azar ejecutándose en MDN serán removidas por la comunidad de editores.

- -
-

Nota: Debes usar el macro para presentar el output del ejemplo ejecutable. El editor de MDN quitará cualquier uso directo del elemento <iframe> por motivos de seguridad.

-
- -

Cada bloque {{HTMLElement("pre")}} que contiene código para el ejemplo tiene una clase que indica si es código HTML, CSS, o JavaScript; estas son "brush: html", "brush: css", y "brush: js". Las clases deben estar en los bloques de código correspondientes para que el wiki pueda usarlos correctamente; afortunadamente, son agregadas automáticamente cuando usas  la herramienta Syntax Highlighter de la barra de herramientas del editor.

- -

El sistema de ejemplos ejecutables tiene muchas opciones disponibles, trataremos de ponerlas en terminos simples analizándolas de a poco.

- -

Macro de ejemplos ejecutables

- -

Hay dos macros que puedes usar para desplegar ejemplos ejecutables:

- - - -

En muchos casos, tienes la posibilidad de agregar la macro EmbedLiveSample o la LiveSampleLink con ¡poco o nada de trabajo adicional! Mientras el ejemplo pueda ser identificado por un ID de un header o esté en un bloque de contenido con un ID que puedas usar, simplemente agregar la macro será suficiente.

- -

Macro EmbedLiveSample

- -
 \{{EmbedLiveSample(ID_del_bloque, longitud, altura, URL_de_captura_de_pantalla, pagina_slug)}}
- -
-
ID_del_bloque
-
Requerido: El ID del header o del bloque de contenido de donde se tomará el código. La mejor forma de asegurarte que tienes el ID correcto es revisar el URL de la sección en la tabla de contenidos de la página.
-
longitud
-
La longitud del {{HTMLElement("iframe")}} que se creará, especificada en px. Esto es opcional; una longitud razonable se usará si omites esto. Ten en cuenta que si quieres usar una longitud específica, debes especificar el parámetro de altura también.
-
altura
-
La altura del {{HTMLElement("iframe")}} que se creará, especificada en px. Esto es opcional; una altura razonable se usará si omites esto. Ten en cuenta que si quieres usar una altura específica, debes especificar el parámetro de longitud también.
-
URL_de_captura_de_pantalla
-
La URL de una captura de pantalla que muestre como se debe ver el ejemplo ejecutable. Esto es opcional, pero puede ser útil para nuevas tecnologías que pueden no funcionar en el navegador del usuario, para que puedan ver como se vería el ejemplo si fuera soportado por su navegador. Si incluyes este parámetro, la captura de pantalla se muestra junto al ejemplo ejectutable, con encabezados apropiados.
-
pagina_slug
-
El slug (nombre con "_" reemplazando los espacios) de la página que contiene el ejemplo; esto es opcional, y si se omite, el ejemplo es extraido de la misma página donde se usa la macro.
-
- -
    -
- - - -
 \{{LiveSampleLink(ID_del_bloque, texto_del_enlace)}}
- -
-
ID_del_bloque
-
Requerido: El ID del encabezado o del bloque de contenido de donde se tomará el código. La mejor forma de asegurarte que tienes el ID correcto es revisar el URL de la sección en la tabla de contenidos de la página.
-
texto_de_enlace
-
Una cadena de texto para mostrar en el enlace.
-
- -

Usando el sistema de ejemplos ejecutables

- -

La sección de abajo describe algunos de los casos de uso más comunes para el sistema de ejemplos ejecutables.

- -

En todos estos casos, para ver los resultados del ejemplo ejecutable, debes hacer clic en Guardar Cambios en el editor (lo que te saca del modo edición). Debido a la reflexiba, naturaleza tipo Inception de los ejemplos ejecutables, la funcionalidad de Previsualizar Cambios no permite desplegar los ejemplos ejecutables.

- -

Convirtiendo snippets (trozos de código) en ejemplos ejecutables

- -

Un uso común es tomar snippets existentes que ya se muestran en MDN y convertirlos ejemplos ejecutables.

- -

Preparar el código

- -

El primer paso es agregar snippets o asegurarse que los existentes están listos para ser usados como ejemplos ejecutables, en términos de contenido y marcadores. Los snippets, juntos, deben comprender un ejemplo completo y ejecutable. Por ejemplo, si el snippet existente solo muestra CSS, debes agregar el snippet de HTML para que el CSS funcione.

- -

Cada pieza de código debe estar en un bloque {{HTMLElement("pre")}}, con un bloque separado para cada lenguaje, propiamente marcado con el lenguaje correspondiente. La mayoría de las veces, esto ya se hizo, pero vale la pena volver revisar para asegurarse que cada pieza de código está estructurado con la sintaxis correcta. A la derecha del ícono PRE en la barra de tareas hay un menú desplegable (herramienta: Syntax Highlighter) con varios lenguajes para los que MDN hace distinción de sintaxis. Establecer el lenguaje para la distinción de sintaxis del bloque también lo correlaciona con un lenguaje para los propósitos del sistema de ejemplos ejecutables.

- -
-

Nota: Puedes tener más de un bloque para cada lenguaje; todos son concatenados juntos. Esto te permite tener una parte de código, seguida de una explicación de como funciona, luego otra parte de código, etc. Esto hace aun más fácil producir tutoriales y utilizar ejemplo ejecutables intercalados con texto que los explique.

-
- -

Así que asegurate que la distinción de sintaxis de los bloques {{HTMLElement("pre")}} para tu código HTML, CSS, y/o JavaScript estén cada uno configurado para el lenguaje correcto, y estarás bien.

- -
-

Nota: Al pegar contenido en MDN, se conciente que si pegas contenido formateado (incluyendo, por ejemplo, distinción de sintaxis en código copeado de otro sitio) puedes estar trayendo formatos o clases que no quieres y no necesitas. Ten cuidado de no hacer esto; si es necesario, revisa tu edición en modo fuente y elimina estos formatos y clases innecesarios (o revísalo antes de pegarlo, o usa la opción "Pegar como texto plano").

-
- -

Insertar la macro de ejemplo ejecutable

- -

Una vez que el código está en su lugar y propiamente configurado para identificar cada bloque de lenguaje, necesitas insertar la macro que crea el frame.

- -
    -
  1. Haz clic en el botón Insert Live Code Sample iFrame en la barra de herramientas; luce así: . Esto abre un cuadro de diálogo para configurar el frame de tu ejemplo ejecutable:                        
    2. -
  2. Bajo Document, ingresa el título del artículo que contiene el ejemplo que deseas desplegar. Por default, es el artículo que estás editando, pero puedes escoger un artículo en otra parte de MDN. Esto hace posible reusar ejemplos en múltiples páginas si es necesario. (Si escribes un texto nuevo en este campo, aparecerá un menú de coincidencias parciales; selecciona el título de la página que desees.)
    3. -
  3. En el menú Sections in Document, selecciona la sección en el artículo que contiene los bloques de código del ejemplo que quieres desplegar.
    4. -
  4. Haz clic en el botón OK para generar e insertar la macro que crea el frame del ejemplo. La macro luce algo así:
    - \{{ EmbedLiveSample('Live_sample_demo') }}
    5. -
- -

Agregando un nuevo ejemplo ejecutable

- -

Si estás escribiendo una página nueva, y quieres insertar código que deseas mostrar como ejemplo ejecutable, ¡aun más del trabajo puede ser realizado por el editor para ti!

- -
    -
  1. Haz clic el botón Insert Code Sample Template en la barra de herramientas, luce así: . Esto presenta un simple cuadro de diálogo pidiéndote que nombres a tu ejemplo ejecutable:
    -
    2. -
  2. Ingresa el nombre del ejemplo; esto es usado como el header para el ejemplo. Asegúrate que tu título sea coherente con la pagína que escribes.
    3. -
  3. Haz clic en OK. Se creó un header nuevo con el título que elegiste, con sub-headers y bloques de código vacios para HTML, CSS y JavaScript.
    4. -
  4. Elimina cualquier sub-header y bloque de código que no necesites.
    5. -
  5. Ingresa el código que compone tu ejemplo en los bloques de código apropiados.
    6. -
  6. Revisar convenciones
    7. -
- -

Usando el Buscador de Ejemplos

- -

Como se mencionó arriba, el buscador de Ejemplos se activa haciendo clic en el ícono Insert Live Code Sample iFrame. Desafortunadamente el Buscador de Ejemplos puede producir un macro que NO es usable sin editarse antes. Hay dos áreas problemáticas que deben revisarse con cuidado y editarse si es necesario.

- -
    -
  1. Campo Document. Este campo buscará mientras escribes y presentará una lista de documentos que encajan con tu búsqueda. Pero la lista presentada NO incluirá sub-páginas. Por ejemplo, digamos que estás trabajando en la sub-página Negative de la página principal @counter-style. El Buscador de Ejemplos no encontrará Negative pero si la página principal @counter-style. Cuando se selecciona @counter-style el fondo cambia a color verde. Lee debajo el problema que esto crea.
    2. -
  2. Sections in Document. El menú desplegable Sections in Document puede no mostrar la sección que necesitas. Selecciona cualquiera, digamos Examples, y puede arreglarse con una simple edición.
    3. -
- -

Esto es lo que el Buscador de Ejemplos produce:

- -
\{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/@counter-style') }}
- -

Esta macro no funcionará. El ID_de_bloque es Examples y debería ser Example en este caso (revisa la fuente del ID de esta sección para verificar cual ID_de_bloque necesitas usar). Igualmente pagina_slug es @counter-style y debería ser @counter-style/negative. Estas correcciones puede hacerse directamente en la página activando la edición.

- -

Después de editar la macro ahora luce así:

- -
\{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/negative') }}
- -

Esta macro editada funcionará correctamente. Si la macro funciona correctamente verás el botón Open in CodePen. Una miniatura del ejemplo deberá aparecer encima del botón Open in CodePen. Si el botón está ahí pero no hay miniatura, espera unos minutos. Puede tormar un tiempo para que el servidor la genere.

- -

Encontrando ejemplos que necesitan actualización

- -

Al buscar ejemplos existentes que actualizar, hay tres tipos principales de actualización que deseas hacer:

- - - -
-

Nota: Si encuentras artículos que necesitan ser actualizados para usar el sistema de ejemplos ejecutables, por favor agrega a la página la etiqueta "NeedsLiveSample".

-
- -

Encontrando ejemplos que necesitan convertirse a ejemplos ejecutables

- -

MDN tiene montontes de ejemplos viejos que aun no usan el sistema de ejemplos ejecutables. Nuestra meta es actualizar la mayoría o todos para que sean ejemplos ejecutables.Esto aumentará la consistencia y la usabilidad. Es casi seguro que te encontrarás muchos de estos mientras usas MDN en el día a día; sin embargo, ¿cómo puedes encontrarlos si los buscas específicamente para actualizarlos? Desafortunadamente, no hay un modo fácil de hacer eso. Pero hay algunos consejos que te ayudarán a rastrearlos:

- - - -

Demo de ejemplo ejecutable

- -

Esta sección es el resultado de usar la plantilla de ejemplo ejecutable no solo para crear el encabezado principal ("Live sample demo"), sino los sub-encabezador para nuestro contenido HTML, CSS y JavaScript. No estás limitado a un bloque para cada uno; además, no necesitan estar en algún orden partícular. ¡Mix and match!

- -

Puedes eliminar cualquiera de estos que desees; si no necesitas scripts, elimina el encabezado y su bloque {{HTMLElement("pre")}}. También puedes eliminar el encabezado de un bloque de código ("HTML", "CSS", o "JavaScript"), ya que estos no son usados por la macro de ejemplo ejecutable.

- -

Ahora que se ha insertado la plantilla, podemos agregar algo de código, e incluso algún texto explicativo.

- -

HTML

- -

Este HTML crea un parágrafo y algunos bloques para ayudarnos a posicionar y formatear un mensaje.

- -
<p>Un simple ejemplo de sistema de ejemplo ejecutable en accion.</p>
-<div class="box">
-  <div id="item">¡Hola mundo!</div>
-</div>
-
- -

CSS

- -

El código CSS formatea el contenedor así como el mensaje.

- -
.box {
-  width: 200px;
-  height: 100 px;
-  border-radius: 6px;
-  background-color: #ffaabb;
-}
-
-#item {
-  width: 100%;
-  font-weight: bold;
-  text-align: center;
-  font-size: 2em;
-}
-
- -

JavaScript

- -

Este código es muy simple. Todo lo que hace es agregar un manejador de evento al texto "¡Hola mundo!" que hace aparecer una alerta cuando se le hace clic.

- -
var el = document.getElementById('item');
-el.onclick = function() {
-  alert('¡Owww, deja de picarme!');
-}
-
- -

Resultado

- -

Aquí el resultado de ejecutar los bloques de código de arriba vía \{{EmbedLiveSample('Live_sample_demo')}}:

- -

{{EmbedLiveSample('Live_sample_demo')}}

- -

Aquí un enlace que resulta de llamar los bloques de código vía \{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}:

- -

{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}

- -

Convenciones acerca de los ejemplos ejecutables

- -
-

Nota: Esto es actual (Feb. 2016) en discusión en la lista de emails dev-mdc (ver this thread). Cualquier entrada es bienvenida. Si esta nota persiste después de unos meses (Apr. 2016), por favor contactar al autor del primer email en este hilo para actualizar esta página.

-
- -
-
Orden de los bloques de código
-
Al agregar un ejemplo ejecutable, los bloques de código deben ser organizados para que el primero corresponda al lenguaje principal (si hay uno). Por ejemplo, al agregar un ejemplo ejecutable para una referencia HTML, el primer bloque debe ser HTML, al agregar un ejemplo ejecutable para una referencia CSS, debe ser el de CSS y así.
-
Nombrando los encabezados
-
Cuando no hay ambigüedad (p.ej. el ejemplo está bajo una sección "Ejemplos"), los encabezados deben ser directos con el único nombre del lenguaje correspondiente: HTML, CSS, JavaScript, SVG, etc. (ver arriba). No deben usarse encabezados como "contenido HTML" o "contenido JavaScript". Sin embargo si un encabezado tan corto hace que el contenido no sea claro, uno puede usar un título más elaborado.
-
Usando un bloque "Result"
-
Después de los diferentes bloques de código, favor de usar un último bloque "Result" antes de usar macro EmbedLiveSample (ver arriba). De este modo, se hace más clara la semántica del ejemplo tanto para el lector como para cualquier herramienta que analice la página (p.ej. screen reader, web crawler).
-
diff --git a/files/es/mdn/structures/live_samples/index.html b/files/es/mdn/structures/live_samples/index.html new file mode 100644 index 0000000000..f5743b558e --- /dev/null +++ b/files/es/mdn/structures/live_samples/index.html @@ -0,0 +1,243 @@ +--- +title: Ejemplos ejecutables +slug: MDN/Structures/Ejemplos_ejecutables +translation_of: MDN/Structures/Live_samples +--- +
{{MDNSidebar}}

MDN puede convertir ejemplos de código de los artículos a ejemplos ejecutables que el lector puede ver en acción. Estos ejemplos ejecutables pueden contener HTML, CSS, y JavaScript en cualquier combinación. Ten en cuenta que los ejemplos "ejecutables" no son interactivos; sin embargo, aseguran que el output coincida exactamente con el código de ejemplo, porque es generado por este.

+ +

Como funciona el sistema de ejemplos ejecutables

+ +

El sistema de ejemplos ejecutables agrupa el código, lo une en un archivo HTML, procesa el HTML y entonces despliega el output en un {{HTMLElement("iframe")}}. Por lo tanto un ejemplo ejecutable consiste de dos partes:

+ + + +

Un "grupo" de bloques de código, en este contexto, es identificado por el ID de un header o de un bloque de contenido (tal como un {{HTMLElement("div")}}).

+ + + +

La macro usa un URL especial para extraer el código de ejemplo: http://url-de-la-pagina$ejemplos/grupo-id, donde grupo-id es el ID del header o del bloque de contenido donde se localiza el código. El frame resultante (o página) es sandboxed (entorno de pruebas), seguro, y  técnicamente puede hacer cualquier cosa que funcione en la Web. Por supuesto, desde el punto de vista práctico, el código debe contribuir al tema de la página que lo contiene; cosas al azar ejecutándose en MDN serán removidas por la comunidad de editores.

+ +
+

Nota: Debes usar el macro para presentar el output del ejemplo ejecutable. El editor de MDN quitará cualquier uso directo del elemento <iframe> por motivos de seguridad.

+
+ +

Cada bloque {{HTMLElement("pre")}} que contiene código para el ejemplo tiene una clase que indica si es código HTML, CSS, o JavaScript; estas son "brush: html", "brush: css", y "brush: js". Las clases deben estar en los bloques de código correspondientes para que el wiki pueda usarlos correctamente; afortunadamente, son agregadas automáticamente cuando usas  la herramienta Syntax Highlighter de la barra de herramientas del editor.

+ +

El sistema de ejemplos ejecutables tiene muchas opciones disponibles, trataremos de ponerlas en terminos simples analizándolas de a poco.

+ +

Macro de ejemplos ejecutables

+ +

Hay dos macros que puedes usar para desplegar ejemplos ejecutables:

+ + + +

En muchos casos, tienes la posibilidad de agregar la macro EmbedLiveSample o la LiveSampleLink con ¡poco o nada de trabajo adicional! Mientras el ejemplo pueda ser identificado por un ID de un header o esté en un bloque de contenido con un ID que puedas usar, simplemente agregar la macro será suficiente.

+ +

Macro EmbedLiveSample

+ +
 \{{EmbedLiveSample(ID_del_bloque, longitud, altura, URL_de_captura_de_pantalla, pagina_slug)}}
+ +
+
ID_del_bloque
+
Requerido: El ID del header o del bloque de contenido de donde se tomará el código. La mejor forma de asegurarte que tienes el ID correcto es revisar el URL de la sección en la tabla de contenidos de la página.
+
longitud
+
La longitud del {{HTMLElement("iframe")}} que se creará, especificada en px. Esto es opcional; una longitud razonable se usará si omites esto. Ten en cuenta que si quieres usar una longitud específica, debes especificar el parámetro de altura también.
+
altura
+
La altura del {{HTMLElement("iframe")}} que se creará, especificada en px. Esto es opcional; una altura razonable se usará si omites esto. Ten en cuenta que si quieres usar una altura específica, debes especificar el parámetro de longitud también.
+
URL_de_captura_de_pantalla
+
La URL de una captura de pantalla que muestre como se debe ver el ejemplo ejecutable. Esto es opcional, pero puede ser útil para nuevas tecnologías que pueden no funcionar en el navegador del usuario, para que puedan ver como se vería el ejemplo si fuera soportado por su navegador. Si incluyes este parámetro, la captura de pantalla se muestra junto al ejemplo ejectutable, con encabezados apropiados.
+
pagina_slug
+
El slug (nombre con "_" reemplazando los espacios) de la página que contiene el ejemplo; esto es opcional, y si se omite, el ejemplo es extraido de la misma página donde se usa la macro.
+
+ +
    +
+ + + +
 \{{LiveSampleLink(ID_del_bloque, texto_del_enlace)}}
+ +
+
ID_del_bloque
+
Requerido: El ID del encabezado o del bloque de contenido de donde se tomará el código. La mejor forma de asegurarte que tienes el ID correcto es revisar el URL de la sección en la tabla de contenidos de la página.
+
texto_de_enlace
+
Una cadena de texto para mostrar en el enlace.
+
+ +

Usando el sistema de ejemplos ejecutables

+ +

La sección de abajo describe algunos de los casos de uso más comunes para el sistema de ejemplos ejecutables.

+ +

En todos estos casos, para ver los resultados del ejemplo ejecutable, debes hacer clic en Guardar Cambios en el editor (lo que te saca del modo edición). Debido a la reflexiba, naturaleza tipo Inception de los ejemplos ejecutables, la funcionalidad de Previsualizar Cambios no permite desplegar los ejemplos ejecutables.

+ +

Convirtiendo snippets (trozos de código) en ejemplos ejecutables

+ +

Un uso común es tomar snippets existentes que ya se muestran en MDN y convertirlos ejemplos ejecutables.

+ +

Preparar el código

+ +

El primer paso es agregar snippets o asegurarse que los existentes están listos para ser usados como ejemplos ejecutables, en términos de contenido y marcadores. Los snippets, juntos, deben comprender un ejemplo completo y ejecutable. Por ejemplo, si el snippet existente solo muestra CSS, debes agregar el snippet de HTML para que el CSS funcione.

+ +

Cada pieza de código debe estar en un bloque {{HTMLElement("pre")}}, con un bloque separado para cada lenguaje, propiamente marcado con el lenguaje correspondiente. La mayoría de las veces, esto ya se hizo, pero vale la pena volver revisar para asegurarse que cada pieza de código está estructurado con la sintaxis correcta. A la derecha del ícono PRE en la barra de tareas hay un menú desplegable (herramienta: Syntax Highlighter) con varios lenguajes para los que MDN hace distinción de sintaxis. Establecer el lenguaje para la distinción de sintaxis del bloque también lo correlaciona con un lenguaje para los propósitos del sistema de ejemplos ejecutables.

+ +
+

Nota: Puedes tener más de un bloque para cada lenguaje; todos son concatenados juntos. Esto te permite tener una parte de código, seguida de una explicación de como funciona, luego otra parte de código, etc. Esto hace aun más fácil producir tutoriales y utilizar ejemplo ejecutables intercalados con texto que los explique.

+
+ +

Así que asegurate que la distinción de sintaxis de los bloques {{HTMLElement("pre")}} para tu código HTML, CSS, y/o JavaScript estén cada uno configurado para el lenguaje correcto, y estarás bien.

+ +
+

Nota: Al pegar contenido en MDN, se conciente que si pegas contenido formateado (incluyendo, por ejemplo, distinción de sintaxis en código copeado de otro sitio) puedes estar trayendo formatos o clases que no quieres y no necesitas. Ten cuidado de no hacer esto; si es necesario, revisa tu edición en modo fuente y elimina estos formatos y clases innecesarios (o revísalo antes de pegarlo, o usa la opción "Pegar como texto plano").

+
+ +

Insertar la macro de ejemplo ejecutable

+ +

Una vez que el código está en su lugar y propiamente configurado para identificar cada bloque de lenguaje, necesitas insertar la macro que crea el frame.

+ +
    +
  1. Haz clic en el botón Insert Live Code Sample iFrame en la barra de herramientas; luce así: . Esto abre un cuadro de diálogo para configurar el frame de tu ejemplo ejecutable:                        
    2. +
  2. Bajo Document, ingresa el título del artículo que contiene el ejemplo que deseas desplegar. Por default, es el artículo que estás editando, pero puedes escoger un artículo en otra parte de MDN. Esto hace posible reusar ejemplos en múltiples páginas si es necesario. (Si escribes un texto nuevo en este campo, aparecerá un menú de coincidencias parciales; selecciona el título de la página que desees.)
    3. +
  3. En el menú Sections in Document, selecciona la sección en el artículo que contiene los bloques de código del ejemplo que quieres desplegar.
    4. +
  4. Haz clic en el botón OK para generar e insertar la macro que crea el frame del ejemplo. La macro luce algo así:
    + \{{ EmbedLiveSample('Live_sample_demo') }}
    5. +
+ +

Agregando un nuevo ejemplo ejecutable

+ +

Si estás escribiendo una página nueva, y quieres insertar código que deseas mostrar como ejemplo ejecutable, ¡aun más del trabajo puede ser realizado por el editor para ti!

+ +
    +
  1. Haz clic el botón Insert Code Sample Template en la barra de herramientas, luce así: . Esto presenta un simple cuadro de diálogo pidiéndote que nombres a tu ejemplo ejecutable:
    +
    2. +
  2. Ingresa el nombre del ejemplo; esto es usado como el header para el ejemplo. Asegúrate que tu título sea coherente con la pagína que escribes.
    3. +
  3. Haz clic en OK. Se creó un header nuevo con el título que elegiste, con sub-headers y bloques de código vacios para HTML, CSS y JavaScript.
    4. +
  4. Elimina cualquier sub-header y bloque de código que no necesites.
    5. +
  5. Ingresa el código que compone tu ejemplo en los bloques de código apropiados.
    6. +
  6. Revisar convenciones
    7. +
+ +

Usando el Buscador de Ejemplos

+ +

Como se mencionó arriba, el buscador de Ejemplos se activa haciendo clic en el ícono Insert Live Code Sample iFrame. Desafortunadamente el Buscador de Ejemplos puede producir un macro que NO es usable sin editarse antes. Hay dos áreas problemáticas que deben revisarse con cuidado y editarse si es necesario.

+ +
    +
  1. Campo Document. Este campo buscará mientras escribes y presentará una lista de documentos que encajan con tu búsqueda. Pero la lista presentada NO incluirá sub-páginas. Por ejemplo, digamos que estás trabajando en la sub-página Negative de la página principal @counter-style. El Buscador de Ejemplos no encontrará Negative pero si la página principal @counter-style. Cuando se selecciona @counter-style el fondo cambia a color verde. Lee debajo el problema que esto crea.
    2. +
  2. Sections in Document. El menú desplegable Sections in Document puede no mostrar la sección que necesitas. Selecciona cualquiera, digamos Examples, y puede arreglarse con una simple edición.
    3. +
+ +

Esto es lo que el Buscador de Ejemplos produce:

+ +
\{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/@counter-style') }}
+ +

Esta macro no funcionará. El ID_de_bloque es Examples y debería ser Example en este caso (revisa la fuente del ID de esta sección para verificar cual ID_de_bloque necesitas usar). Igualmente pagina_slug es @counter-style y debería ser @counter-style/negative. Estas correcciones puede hacerse directamente en la página activando la edición.

+ +

Después de editar la macro ahora luce así:

+ +
\{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/negative') }}
+ +

Esta macro editada funcionará correctamente. Si la macro funciona correctamente verás el botón Open in CodePen. Una miniatura del ejemplo deberá aparecer encima del botón Open in CodePen. Si el botón está ahí pero no hay miniatura, espera unos minutos. Puede tormar un tiempo para que el servidor la genere.

+ +

Encontrando ejemplos que necesitan actualización

+ +

Al buscar ejemplos existentes que actualizar, hay tres tipos principales de actualización que deseas hacer:

+ + + +
+

Nota: Si encuentras artículos que necesitan ser actualizados para usar el sistema de ejemplos ejecutables, por favor agrega a la página la etiqueta "NeedsLiveSample".

+
+ +

Encontrando ejemplos que necesitan convertirse a ejemplos ejecutables

+ +

MDN tiene montontes de ejemplos viejos que aun no usan el sistema de ejemplos ejecutables. Nuestra meta es actualizar la mayoría o todos para que sean ejemplos ejecutables.Esto aumentará la consistencia y la usabilidad. Es casi seguro que te encontrarás muchos de estos mientras usas MDN en el día a día; sin embargo, ¿cómo puedes encontrarlos si los buscas específicamente para actualizarlos? Desafortunadamente, no hay un modo fácil de hacer eso. Pero hay algunos consejos que te ayudarán a rastrearlos:

+ + + +

Demo de ejemplo ejecutable

+ +

Esta sección es el resultado de usar la plantilla de ejemplo ejecutable no solo para crear el encabezado principal ("Live sample demo"), sino los sub-encabezador para nuestro contenido HTML, CSS y JavaScript. No estás limitado a un bloque para cada uno; además, no necesitan estar en algún orden partícular. ¡Mix and match!

+ +

Puedes eliminar cualquiera de estos que desees; si no necesitas scripts, elimina el encabezado y su bloque {{HTMLElement("pre")}}. También puedes eliminar el encabezado de un bloque de código ("HTML", "CSS", o "JavaScript"), ya que estos no son usados por la macro de ejemplo ejecutable.

+ +

Ahora que se ha insertado la plantilla, podemos agregar algo de código, e incluso algún texto explicativo.

+ +

HTML

+ +

Este HTML crea un parágrafo y algunos bloques para ayudarnos a posicionar y formatear un mensaje.

+ +
<p>Un simple ejemplo de sistema de ejemplo ejecutable en accion.</p>
+<div class="box">
+  <div id="item">¡Hola mundo!</div>
+</div>
+
+ +

CSS

+ +

El código CSS formatea el contenedor así como el mensaje.

+ +
.box {
+  width: 200px;
+  height: 100 px;
+  border-radius: 6px;
+  background-color: #ffaabb;
+}
+
+#item {
+  width: 100%;
+  font-weight: bold;
+  text-align: center;
+  font-size: 2em;
+}
+
+ +

JavaScript

+ +

Este código es muy simple. Todo lo que hace es agregar un manejador de evento al texto "¡Hola mundo!" que hace aparecer una alerta cuando se le hace clic.

+ +
var el = document.getElementById('item');
+el.onclick = function() {
+  alert('¡Owww, deja de picarme!');
+}
+
+ +

Resultado

+ +

Aquí el resultado de ejecutar los bloques de código de arriba vía \{{EmbedLiveSample('Live_sample_demo')}}:

+ +

{{EmbedLiveSample('Live_sample_demo')}}

+ +

Aquí un enlace que resulta de llamar los bloques de código vía \{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}:

+ +

{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}

+ +

Convenciones acerca de los ejemplos ejecutables

+ +
+

Nota: Esto es actual (Feb. 2016) en discusión en la lista de emails dev-mdc (ver this thread). Cualquier entrada es bienvenida. Si esta nota persiste después de unos meses (Apr. 2016), por favor contactar al autor del primer email en este hilo para actualizar esta página.

+
+ +
+
Orden de los bloques de código
+
Al agregar un ejemplo ejecutable, los bloques de código deben ser organizados para que el primero corresponda al lenguaje principal (si hay uno). Por ejemplo, al agregar un ejemplo ejecutable para una referencia HTML, el primer bloque debe ser HTML, al agregar un ejemplo ejecutable para una referencia CSS, debe ser el de CSS y así.
+
Nombrando los encabezados
+
Cuando no hay ambigüedad (p.ej. el ejemplo está bajo una sección "Ejemplos"), los encabezados deben ser directos con el único nombre del lenguaje correspondiente: HTML, CSS, JavaScript, SVG, etc. (ver arriba). No deben usarse encabezados como "contenido HTML" o "contenido JavaScript". Sin embargo si un encabezado tan corto hace que el contenido no sea claro, uno puede usar un título más elaborado.
+
Usando un bloque "Result"
+
Después de los diferentes bloques de código, favor de usar un último bloque "Result" antes de usar macro EmbedLiveSample (ver arriba). De este modo, se hace más clara la semántica del ejemplo tanto para el lector como para cualquier herramienta que analice la página (p.ej. screen reader, web crawler).
+
diff --git a/files/es/mdn/structures/macros/other/index.html b/files/es/mdn/structures/macros/other/index.html new file mode 100644 index 0000000000..532bc07fdc --- /dev/null +++ b/files/es/mdn/structures/macros/other/index.html @@ -0,0 +1,181 @@ +--- +title: Otras macros +slug: MDN/Structures/Macros/Otras +tags: + - Macros + - Referencia +translation_of: MDN/Structures/Macros/Other +--- +
{{MDNSidebar}}
+ +

A diferencia de las macros enumeradas en {{web.link("/es/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros", "Macros usadas comúnmente")}}, las macros documentadas en este artículo se usan con poca frecuencia o solo en contextos específicos, o están en desuso.

+ +

Contextos especiales

+ +

Estas macros se utilizan solo con contextos particulares, como una referencia de API específica.

+ + + +

Componentes de la página destino

+ +

Tenemos una variedad de macros que se pueden utilizar para generar automáticamente el contenido de las páginas destino. Aquí están.

+ +

Listas de subpáginas

+ + + +

Enlaces rápidos

+ +

Tenemos algunas macros diseñadas específicamente para crear {{web.link("/es/docs/MDN/Contribute/Style_guide/Quicklinks", "enlaces rápidos")}}:

+ + + +

Usadas con poca frecuencia

+ + + +

Transclusión

+ +

La transclusión es la incorporación de parte o la totalidad de una página en otra. Ten cuidado al utilizar esta macro, para asegurarte de que el contenido transcluido tenga sentido en el contexto de la página en la que está incorporado.

+ +

{{TemplateLink("page")}} te permite incrustar parte o la totalidad de una página específica en un documento. Acepta cinco parámetros:

+ +
    +
  1. La URI de la página que se va a transcluir. Por ejemplo, "/es/docs/Project:MDN/About".
    2. +
  2. El nombre de la sección dentro de la página que se va a incluir. Esto se puede especificar como la cadena de título o como el ID de un bloque a copiar. Si no se especifica, se transcluye todo el artículo. {{optional_inline}}
    3. +
  3. El número de revisión de la versión de la página que se va a incluir. Esta función no está implementada actualmente, pero permitiría incluir texto de versiones específicas de un artículo. {{unimplemented_inline}}
    4. +
  4. Un valor booleano que indica si se muestra o no el encabezado de la sección de nivel superior que se está transcluyendo. Esto es útil si deseas especificar tu propio título. El valor predeterminado es falso, lo cual significa que el encabezado no se incluye de forma predeterminada. {{optional_inline}}
    5. +
  5. El nivel de título que se utilizará como nivel de título superior. Esto ajusta el primer nivel descubierto más externo del contenido transcluido al número especificado, y todos los demás encabezados correspondientemente. Esto te permite incluir contenido que tiene sus propios títulos, pero ajustarlos para que coincidan con el nivel de título en el que los estás incluyendo. Si no especificas este valor, los títulos no se ajustan. {{unimplemented_inline}}
    6. +
+ +

Ejemplo sin título

+ +

\{{Page("/es/docs/MDN/About", "Acerca de Mozilla")}}

+ +

Resultado:

+ +

{{Page("/es/docs/MDN/About", "Acerca de Mozilla")}}

+ +

Ejemplo con encabezado

+ +

\{{Page("/es/docs/MDN/About", "Acerca de Mozilla", 0, 1)}}

+ +

Resultado:

+ +

{{Page("/es/docs/MDN/About", "Acerca de Mozilla", 0, 1)}}

+ +

Creando nuevas insignias

+ +

También tenemos insignias que no tienen iconos con burbujas. La plantilla genérica para esto es {{TemplateLink("SimpleBadge")}}, que acepta tres parámetros:

+ +
    +
  1. Texto para mostrar en la insignia.
    2. +
  2. Nombre de una clase CSS que se utilizará como fondo de la insignia.
    3. +
  3. (Opcional) Texto para mostrar en una información sobre herramientas al pasar el cursor sobre la insignia.
    4. +
+ +

Desaprobado

+ +

Estas macros han sido reemplazadas por otras formas de hacer lo mismo y ya no se deberían usar. Si los encuentras en artículos existentes, reemplázalos.

+ +

Enlaces

+ + + +

Ejemplos de código

+ +

Las siguientes macros se usaron antes de la implementación del {{web.link("/es/docs/MDN/Contribute/Structures/Live_samples", "sistema de ejemplo en vivo")}} integrado en Kuma, y se deben reemplazar por usos de {{TemplateLink("EmbedLiveSample")}} o {{TemplateLink("LiveSampleLink")}}.

+ + + +

Organizacional

+ + + +

Formateo

+ + + +

Indicadores de versión

+ +

Las siguientes macros están en desuso porque esta información debería estar contenida en el artículo de la tabla de compatibilidad de navegadores.

+ + diff --git a/files/es/mdn/structures/macros/otras/index.html b/files/es/mdn/structures/macros/otras/index.html deleted file mode 100644 index 532bc07fdc..0000000000 --- a/files/es/mdn/structures/macros/otras/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: Otras macros -slug: MDN/Structures/Macros/Otras -tags: - - Macros - - Referencia -translation_of: MDN/Structures/Macros/Other ---- -
{{MDNSidebar}}
- -

A diferencia de las macros enumeradas en {{web.link("/es/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros", "Macros usadas comúnmente")}}, las macros documentadas en este artículo se usan con poca frecuencia o solo en contextos específicos, o están en desuso.

- -

Contextos especiales

- -

Estas macros se utilizan solo con contextos particulares, como una referencia de API específica.

- - - -

Componentes de la página destino

- -

Tenemos una variedad de macros que se pueden utilizar para generar automáticamente el contenido de las páginas destino. Aquí están.

- -

Listas de subpáginas

- - - -

Enlaces rápidos

- -

Tenemos algunas macros diseñadas específicamente para crear {{web.link("/es/docs/MDN/Contribute/Style_guide/Quicklinks", "enlaces rápidos")}}:

- - - -

Usadas con poca frecuencia

- - - -

Transclusión

- -

La transclusión es la incorporación de parte o la totalidad de una página en otra. Ten cuidado al utilizar esta macro, para asegurarte de que el contenido transcluido tenga sentido en el contexto de la página en la que está incorporado.

- -

{{TemplateLink("page")}} te permite incrustar parte o la totalidad de una página específica en un documento. Acepta cinco parámetros:

- -
    -
  1. La URI de la página que se va a transcluir. Por ejemplo, "/es/docs/Project:MDN/About".
    2. -
  2. El nombre de la sección dentro de la página que se va a incluir. Esto se puede especificar como la cadena de título o como el ID de un bloque a copiar. Si no se especifica, se transcluye todo el artículo. {{optional_inline}}
    3. -
  3. El número de revisión de la versión de la página que se va a incluir. Esta función no está implementada actualmente, pero permitiría incluir texto de versiones específicas de un artículo. {{unimplemented_inline}}
    4. -
  4. Un valor booleano que indica si se muestra o no el encabezado de la sección de nivel superior que se está transcluyendo. Esto es útil si deseas especificar tu propio título. El valor predeterminado es falso, lo cual significa que el encabezado no se incluye de forma predeterminada. {{optional_inline}}
    5. -
  5. El nivel de título que se utilizará como nivel de título superior. Esto ajusta el primer nivel descubierto más externo del contenido transcluido al número especificado, y todos los demás encabezados correspondientemente. Esto te permite incluir contenido que tiene sus propios títulos, pero ajustarlos para que coincidan con el nivel de título en el que los estás incluyendo. Si no especificas este valor, los títulos no se ajustan. {{unimplemented_inline}}
    6. -
- -

Ejemplo sin título

- -

\{{Page("/es/docs/MDN/About", "Acerca de Mozilla")}}

- -

Resultado:

- -

{{Page("/es/docs/MDN/About", "Acerca de Mozilla")}}

- -

Ejemplo con encabezado

- -

\{{Page("/es/docs/MDN/About", "Acerca de Mozilla", 0, 1)}}

- -

Resultado:

- -

{{Page("/es/docs/MDN/About", "Acerca de Mozilla", 0, 1)}}

- -

Creando nuevas insignias

- -

También tenemos insignias que no tienen iconos con burbujas. La plantilla genérica para esto es {{TemplateLink("SimpleBadge")}}, que acepta tres parámetros:

- -
    -
  1. Texto para mostrar en la insignia.
    2. -
  2. Nombre de una clase CSS que se utilizará como fondo de la insignia.
    3. -
  3. (Opcional) Texto para mostrar en una información sobre herramientas al pasar el cursor sobre la insignia.
    4. -
- -

Desaprobado

- -

Estas macros han sido reemplazadas por otras formas de hacer lo mismo y ya no se deberían usar. Si los encuentras en artículos existentes, reemplázalos.

- -

Enlaces

- - - -

Ejemplos de código

- -

Las siguientes macros se usaron antes de la implementación del {{web.link("/es/docs/MDN/Contribute/Structures/Live_samples", "sistema de ejemplo en vivo")}} integrado en Kuma, y se deben reemplazar por usos de {{TemplateLink("EmbedLiveSample")}} o {{TemplateLink("LiveSampleLink")}}.

- - - -

Organizacional

- - - -

Formateo

- - - -

Indicadores de versión

- -

Las siguientes macros están en desuso porque esta información debería estar contenida en el artículo de la tabla de compatibilidad de navegadores.

- - diff --git a/files/es/mdn/structures/tablas_de_compatibilidad/index.html b/files/es/mdn/structures/tablas_de_compatibilidad/index.html deleted file mode 100644 index cd9a5097d2..0000000000 --- a/files/es/mdn/structures/tablas_de_compatibilidad/index.html +++ /dev/null @@ -1,476 +0,0 @@ ---- -title: >- - Tablas de compatibilidad y repositorio de datos de compatibilidad del - navegador (DCN) -slug: MDN/Structures/Tablas_de_compatibilidad -tags: - - Estructuras - - Guía - - Meta MDN - - compatibilidad con el navegador - - tablas de compatibilidad -translation_of: MDN/Structures/Compatibility_tables ---- -
{{MDNSidebar}}
- -

MDN tiene un formato estándar para tablas de compatibilidad para nuestra documentación web abierta; es decir, documentación de tecnologías como DOM, HTML, CSS, JavaScript, SVG, etc., que se comparte en todos los navegadores. Este artículo es una guía de "introducción" sobre cómo agregar y mantener la base de datos a partir de la cual se generan las tablas de compatibilidad, además de cómo integrar las tablas en artículos.

- -

Para obtener documentación más avanzada, así como los últimos cambios en los procesos y los esquemas JSON utilizados para representar los datos, échale un vistazo al repositorio de datos de la guía para colaboradores, así como a la guía de directrices de datos.

- -

Si tienes preguntas o descubres problemas, compártelos con nosotros en el foro de discusión de MDN.

- -

Cómo acceder al repositorio de datos

- -

Los datos se almacenan en un repositorio de GitHub; consulta https://github.com/mdn/browser-compat-data. Para acceder a él, necesitas tener una cuenta de GitHub, bifurcar el repositorio de compatibilidad de datos del navegador en tu propia cuenta y luego clonar tu bifurcación en tu máquina local.

- -

Preparándose para agregar los datos

- -

Antes de agregar algunos datos nuevos, te debes asegurar de que tu bifurcación esté actualizada con el repositorio principal (contiene el mismo contenido), crea una nueva rama dentro de tu bifurcación para contener tus adiciones, luego ingresa esa rama en tu clon local para que puedas empezar a trabajar dentro de ella:

- -

Veamos la siguiente sencilla forma de asegurarte de que tu bifurcación esté actualizada:

- -

Agregar el repositorio principal de datos de compatibilidad del navegador como remoto

- -

Ve al clon local de tu bifurcación en tu terminal/línea de comandos, y agrega un control remoto que apunte al repositorio principal (upstream) de esa manera (solo necesitas hacer esto una vez):

- -
git remote add upstream https://github.com/mdn/browser-compat-data.git
- -

Si no estás seguro de haber hecho esto, puedes verificar qué controles remotos tiene tu repositorio usando

- -
git remote -v
- -

Actualiza tu bifurcación con el contenido del remoto

- -

Ahora, siempre que desees actualizar tu bifurcación, lo puedes hacer mediante:

- -
    -
  1. -

    Asegúrate de que estas en la rama master:

    - - 
    git checkout master
    -
    2. -
  2. -

    obtén el contenido actualizado del repositorio utilizando lo siguiente:

    - - 
    git fetch upstream
    -
    3. -
  3. -

    rebasa el contenido de tu master con el contenido del repositorio principal:

    - - 
    git rebase upstream/master
    -
    4. -
  4. -

    empuja estas actualizaciones a tu bifurcación remota usando lo siguiente:

    - - 
    git push
    -
    5. -
- -

Crea una nueva rama para hacer tu trabajo

- -

A continuación, ve a tu bifurcación remota (estará en https://github.com/tu-nombre-de-usuario/browser-compat-data) y crea una nueva rama para almacenar tus cambios para esta adición de datos. Esto lo puedes hacer mediante:

- -
    -
  1. Un clic en el botón "Rama: Master".
    2. -
  2. Ingresa un nuevo nombre para la rama en el campo de texto "Buscar o crear una rama...".
    3. -
  3. Presiona el botón resultante "Crear rama nombre-de-rama desde Master".
    4. -
- -

Por ejemplo, si quisieras agregar datos para la API WebVR, crearías una rama llamada algo así como "webvr".

- -

Cambia a la nueva rama

- -

En este punto, regresa a tu terminal/línea de comando y actualiza el clon local de tu bifurcación para incluir tu nueva rama usando el siguiente comando:

- -
git pull
- -

Ahora cambia a tu nueva rama usando esto:

- -
git checkout nombre-de-rama
- -

¡Ahora debería estar listo para comenzar a agregar tus datos!

- -

Añadir los datos

- -

Para agregar los datos, debes crear un nuevo archivo o archivos para almacenar tus datos de compatibilidad. Los archivos que necesitas crear difieren, según la tecnología en la que estés trabajando:

- - - -

Cada archivo que crees debe seguir el patrón definido en el esquema contenido en nuestro repositorio; puedes ver la descripción detallada del esquema aquí.

- -

Estructura básica de datos de compatibilidad

- -

Veamos un ejemplo. Los archivos JSON de propiedades CSS, por ejemplo, necesitan la siguiente estructura básica:

- -
{
-  "css": {
-    "properties": {
-      "border-width": {
-        "__compat": {
-          ...
-        }
-      }
-    }
-  }
-}
- -

Tienes el objeto css, dentro del cual hay un objeto properties. Dentro del objeto properties, necesitas un miembro para cada una de las características específicas para las que deseas definir los datos de compatibilidad. Cada uno de estos miembros tiene un miembro __compat, dentro del cual van los datos reales.

- -

Los datos anteriores se encuentran en el archivo: border-width.json compáralo con la tabla de soporte de border-width representada en MDN.

- -

Otros tipos de características funcionan de la misma manera, pero con diferentes nombres de objeto:

- - - -
-

En páginas HTML, CSS y JS, normalmente solo necesitarás una función. Las interfaces de API funcionan de forma ligeramente diferente — siempre tienen varias subcaracterísticas (consulta {{anch("Sub-features", "Subcaracterísticas")}}, a continuación).

- -

Estructura básica dentro de una característica

- -

Dentro de un miembro de función __compat, debes incluir los siguientes miembros:

- - - -

Los nombres de los miembros del navegador se definen en el esquema (consulta identificadores del navegador). Debes utilizar la lista completa de identificadores definidos actualmente. Si deseas agregar otro navegador, habla con nosotros primero, ya que esto podría tener un impacto de gran alcance y no se debe hacer sin pensarlo detenidamente.

- -

En un archivo de datos de compatibilidad del navegador básico, solo necesitarás incluir "version_added" dentro de los miembros del identificador del navegador (cubriremos {{anch("Advanced cases", "Casos avanzados")}} más adelante). Los diferentes valores que posiblemente quieras incluir son los siguientes:

- - - -

Dentro del miembro status, incluirás tres submiembros:

- - - -

Los datos de características de border-width (consulta también border-width.json) se muestra a continuación como ejemplo:

- -
"__compat": {
-  "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/border-width",
-  "support": {
-    "chrome": {
-      "version_added": "1"
-    },
-    "webview_android": {
-      "version_added": "2"
-    },
-    "edge": {
-      "version_added": true
-    },
-    "edge_mobile": {
-      "version_added": true
-    },
-    "firefox": {
-      "version_added": "1"
-    },
-    "firefox_android": {
-      "version_added": "1"
-    },
-    "ie": {
-      "version_added": "4"
-    },
-    "ie_mobile": {
-      "version_added": "6"
-    },
-    "opera": {
-      "version_added": "3.5"
-    },
-    "opera_android": {
-      "version_added": "11"
-    },
-    "safari": {
-      "version_added": "1"
-    },
-    "safari_ios": {
-      "version_added": "3"
-    }
-  },
-  "status": {
-    "experimental": false,
-    "standard_track": true,
-    "deprecated": false
-  }
-}
- -

Agrega una descripción

- -

Hay un cuarto miembro, opcional, que puede ir dentro del miembro __compat — description. Este se puede utilizar para incluir una descripción legible por humanos de la característica. Únicamente lo debes incluir si es difícil ver cuál es la característica al mirar los datos. Por ejemplo, puede que no sea tan obvio lo que es un constructor al mirar la estructura de datos, por lo que puedes incluir una descripción como esta:

- -
{
-  "api": {
-    "AbortController": {
-      "__compat": {
-        ...
-      },
-      "AbortController": {
-        "__compat": {
-          "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController/AbortController",
-          "description": "<code>AbortController()</code> constructor",
-          "support": {
-            ...
-          }
-        }
-      }
-
-      ... etc.
-    }
-  }
-}
- -

Subcaracterísticas

- -

En una página donde la tabla de compatibilidad tiene más de una fila, necesitarás varias subcaracterísticas dentro de cada característica para definir la información de cada fila. Esto puede suceder, por ejemplo, cuando tienes el soporte básico para una característica almacenada en una fila, pero luego la característica también tiene una nueva propiedad o tipo de valor que se agregó mucho más tarde en la vida de la especificación y solo se admite en una par de navegadores.

- -

Como ejemplo, consulta los datos de compatibilidad y la página MDN correspondiente para la propiedad background-color. El soporte básico existe dentro del objeto __compat como se explicó anteriormente, luego tienes una fila adicional para el soporte de los navegadores para "canal alfa para valores hexadecimales", que contiene tu propio objeto __compat.

- -
{
-  "css": {
-    "properties": {
-      "background-color": {
-        "__compat": {
-          ...
-        },
-        "alpha_ch_for_hex": {
-          "__compat": {
-            ...
-          },
-        }
-      }
-    }
-  }
-}
- -

Para una API, tienes los dos niveles superiores definidos como api.nombre-de-la-interfaz, luego un __compat de nivel superior para definir la compatibilidad general del navegador de la interfaz, luego una subfunción para cada uno de los métodos, propiedades y constructores contenidos dentro de la interfaz. La estructura básica se ve así:

- -
{
-  "api": {
-    "VRDisplay": {
-      "__compat": {
-        ...
-      },
-      "cancelAnimationFrame": {
-        "__compat": {
-          ...
-        }
-      },
-      "capabilities": {
-        "__compat": {
-          ...
-        }
-      },
-
-      ... etc.
-
-    }
-  }
-}
- -

Consulta VRDisplay.json para ver un ejemplo completo.

-
- -

Agregar datos: casos avanzados

- -

Hay algunas características avanzadas que querrás incluir en los datos de compatibilidad del navegador. El objetivo de esta sección es enumerar los más comunes, proporcionando un ejemplo de cada uno para mostrar cómo los puedes implementar en tus propios datos de compatibilidad.

- -

Incluyendo una nota a pie de página

- -

A menudo, las tablas de compatibilidad incluirán notas a pie de página relacionadas con ciertas entradas que explican detalles útiles o comportamientos extraños que los desarrolladores encontrarán útiles. Como ejemplo, la entrada de Chrome para Android para {{domxref("VRDisplay.capabilities")}} (consulta también VRDisplay.json) (en el momento de escribir este artículo) tenía una nota al pie de página "Actualmente solo es compatible con Google Daydream". Para incluir esto en los datos de capacidades, agregamos un submiembro "notes" dentro del submiembro "chrome_android" relevante; se vería así:

- -
"chrome_android": {
-  "version_added": true,
-  "notes": "Currently supported only by Google Daydream."
-}
- -

Incluyendo un prefijo de proveedor

- -

Si una característica es compatible con un prefijo de proveedor en uno o más navegadores, querrás dejarlo en claro en los datos de compatibilidad del navegador. imagina que tienes una característica que es compatible con un prefijo -moz- en Firefox. Para especificar esto en los datos de compatibilidad, debes agregar un submiembro "prefix" dentro del submiembro "firefox" relevante. Y se vería así:

- -
"firefox": {
-  "version_added": true,
-  "prefix": "-moz-"
-}
- -

Incluyendo preferencias o banderas del navegador

- -

Algunas características pueden ser compatibles con un navegador, pero son experimentales y están desactivadas de forma predeterminada. Si un usuario quiere jugar con esta característica, debe activarla usando una preferencia/bandera.

- -

Para representar esto en los datos de compatibilidad, debes agregar el submiembro "flags" dentro del submiembro del identificador del navegador relevante. El valor de "flags" es un arreglo de objetos, cada uno de los cuales contiene tres miembros:

- - - -

Entonces, para agregar una preferencia/bandera al soporte de Chrome para una característica, harías algo como esto:

- -
"chrome": {
-  "version_added": "50",
-  "flags": [
-    {
-      "type": "preference",
-      "name": "Enable Experimental Web Platform Features",
-      "value_to_set": "true"
-    }
-  ]
-},
- -

Si una característica está detrás de dos o más banderas, puedes agregar objetos adicionales al arreglo "flags", como en este caso, por ejemplo:

- -
"firefox": {
-  "version_added": "57",
-  "flags": [
-    {
-      "type": "preference",
-      "name": "dom.streams.enabled",
-      "value_to_set": "true"
-    },
-    {
-      "type": "preference",
-      "name": "javascript.options.streams",
-      "value_to_set": "true"
-    }
-  ]
-},
- -

Incluyendo una versión donde se eliminó el soporte

- -

A veces, una característica se agregará en una determinada versión del navegador, pero luego se eliminará nuevamente cuando la característica esté obsoleta. Esto se puede representar fácilmente usando el submiembro "version_removed", que toma como valor una cadena que representa el número de versión en el que se eliminó. Por ejemplo:

- -
"firefox": {
-  "version_added": "35",
-  "version_removed": "47",
-},
- -

Incluyendo múltiples puntos de soporte para la misma entrada del navegador

- -

A veces, querrás agregar varios puntos de datos de soporte para el mismo navegador dentro de la misma característica.

- -

Como ejemplo, la propiedad {{cssxref("text-align-last")}} (ve también text-align-last.json) se agregó a Chrome en la versión 35, compatible con una pref.

- -

El soporte mencionado anteriormente se eliminó en la versión 47; también en la versión 47, se agregó soporte para text-align-last habilitado de manera predeterminada.

- -

Para incluir estos dos puntos de datos, puedes hacer que el valor del submiembro "chrome" sea un arreglo que contenga dos objetos de información de soporte, en lugar de un solo objeto de información de soporte:

- -
"chrome": [
-  {
-    "version_added": "47"
-  },
-  {
-    "version_added": "35",
-    "version_removed": "47",
-    "flags": [
-      {
-        "type": "preference",
-        "name": "Enable Experimental Web Platform Features",
-        "value_to_set": "true"
-      }
-    ]
-  }
-],
- -
-

Nota Debes colocar el punto de soporte más actual o importante primero en el arreglo — esto hace que los datos sean más fáciles de leer para las personas que solo desean escanearlos para obtener la información más reciente.

-
- -

Incluyendo un nombre alternativo

- -

Ocasionalmente, los navegadores admitirán una característica con un nombre diferente al definido en su especificación. Esto se podría deber, por ejemplo, a que un navegador agregó soporte experimental para una característica antes, y luego el nombre cambió antes de que se estabilizara la especificación.

- -

Para incluir un caso de este tipo en los datos de compatibilidad del navegador, puedes incluir un punto de información de soporte que especifique el nombre alternativo dentro de un miembro "alternative_name".

- -
-

Nota Es posible que el nombre alternativo no sea un alias exacto — posiblemente tenga un comportamiento diferente al de la versión estándar.

-
- -

Veamos un ejemplo. La propiedad {{cssxref("border-top-right-radius")}} (consulta también border-top-right-radius.json) era compatible con Firefox:

- - - -

Para representar esto en los datos, usamos el siguiente JSON:

- -
"firefox": [
-  {
-    "version_added": "4",
-    "notes": "Antes de Firefox 50.0, los estilos de borde de las esquinas redondeadas siempre se representaban como si border-style fuera sólido. Esto se ha solucionado en Firefox 50.0."
-  },
-  {
-    "prefix": "-webkit-",
-    "version_added": "49",
-    "notes": "De Firefox 44 a 48, el prefijo -webkit- estaba disponible con la preferencia layout.css.prefixes.webkit. A partir de Firefox 49, la preferencia predeterminada es <code>true</code>."
-  },
-  {
-    "alternative_name": "-moz-border-radius-topright",
-    "version_added": "1",
-    "version_removed": "12"
-  }
-],
- -

Empujar un cambio de nuevo al repositorio principal

- -

Una vez que hayas terminado de agregar tus datos de compatibilidad, primero debes probarlos usando los siguientes comandos:

- - - -

Si se ve bien, debes confirmarlo y volver a colocarlo en tu bifurcación remota en GitHub. Lo puedes hacer fácilmente en tu terminal con comandos como estos:

- -
git add .
-git commit -m 'adding compat data for nombre-de-la-característica'
-git push
- -

Ahora ve a tu bifurcación remota (es decir, https://github.com/tu-nombre-de-usuario/browser-compat-data) y deberías ver información sobre tu inserción en la parte superior de la lista de archivos (debajo de "Tus ramas enviadas recientemente"). Puedes crear una solicitud de extracción (iniciando el proceso de enviarla al repositorio principal) presionando el botón "Comparar y solicitud de extracción" y luego siguiendo las sencillas instrucciones en la siguiente pantalla.

- -

En este punto, solo tienes que esperar. Un revisor examinará tu solicitud de extracción y la fusionará con el repositorio principal, O solicitará que realices cambios. Si se necesitan cambios, realiza los cambios y envíalos nuevamente hasta que se acepte la SE.

- -

Insertar los datos en páginas MDN

- -

Una vez que tus nuevos datos se hayan incluido en el repositorio principal, puedes comenzar a generar dinámicamente tablas de compatibilidad del navegador basadas en esos datos en las páginas MDN usando la macro {{TemplateLink("Compat")}}. Esta toma un solo parámetro, la notación de puntos requerida para recorrer los datos JSON y encontrar el objeto que representa la característica para la que deseas generar la tabla de compatibilidad.

- -

Por encima de la llamada a la macro, para ayudar a otros colaboradores a encontrar su camino, debes agregar un texto oculto que solo sea visible a los colaboradores de MDN en el modo de edición:

- -
<div class="hidden">
-La tabla de compatibilidad de esta página se genera a partir de datos estructurados.
-Si deseas contribuir con los datos, consulta
-<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>
-y envíanos una solicitud de extracción.
-</div>
- -

Por ejemplo, en la página de encabezado HTTP {{HTTPHeader("Accept-Charset")}}, la llamada a la macro se ve así: \{{Compat("http.headers.Accept-Charset")}}. Si observas el accept-charset.json en el repositorio, verás cómo esto se refleja en los datos JSON.

- -

Otro ejemplo, la tabla de compatibilidad para la propiedad {{domxref("VRDisplay.capabilities")}} se genera usando \{{Compat("api.VRDisplay.capabilities")}}. La llamada a la macro genera la siguiente tabla (y el correspondiente conjunto de notas):

- -
- - -

{{Compat("api.VRDisplay.capabilities")}}

- -
-

Nota Los nombres de archivo a menudo coinciden con las etiquetas dadas a las interfaces dentro de las estructuras JSON, pero no siempre es así. Cuando las llamadas a macro generan las tablas, recorren todos los archivos hasta encontrar el JSON relevante para usar, por lo que los nombres de archivo no son críticos. Dicho esto, siempre debes nombrarlos de la manera más intuitiva posible.

-
diff --git a/files/es/mdn/tools/introduction_to_kumascript/index.html b/files/es/mdn/tools/introduction_to_kumascript/index.html deleted file mode 100644 index ed060eecd8..0000000000 --- a/files/es/mdn/tools/introduction_to_kumascript/index.html +++ /dev/null @@ -1,683 +0,0 @@ ---- -title: Introducción a KumaScript -slug: MDN/Tools/Introduction_to_KumaScript -translation_of: MDN/Tools/KumaScript ---- -
{{MDNSidebar}}
- -
{{draft}}
- -

Vistazo general

- -

En el verano de 2012, MDN  cambió a una nueva plataforma wiki llamada Kuma. Esta reemplaza el lenguaje de plantilla DekiScript con un nuevo sistema llamado KumaScript. KumaScript se alimenta de JavaScript del lado del servidor, usando Node.js. Este artículo provee informaciónde cómo usar KumaScript y cómo actualizar scripts migrados parcialmente desde MindTouch.

- -

Para detalles y preguntas frecuentes sobre KumaScript, mira el KumaScript Fireside Chat del equipo de desarrolladores MDN.

- -

¿Qué es KumaScript?

- - - -

¿Qué no es KumaScript?

- - - -

Aspectos básicos

- -

KumaScript funciona permitiendo a wiki de confianza escribir plantillas JavaScript ensambladas. Estas plantillas pueden ser invocadas en el contenido del documento por cualquier editor wiki mediante el uso de macros.

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

Una plantilla se vé así:

- 		-

Una macro se vé así:

- 		-

El resultado de una macro sale así:

-
- 
-<% for (var i = 0; i < $0; i++) { %>
-Hello #<%= i %>
-<% } %>
- 		- 
-\{{ hello("3") }}
-
- 		- 
-Hello #0
-Hello #1
-Hello #2
-
- -

Sintaxis de una macro

- -

Las plantillas KumaScript se invocan en el contenido del documento con macros, como esta:

- -
\{{ templateName("arg0", "arg1", ..., "argN") }}
-
- -

La sintaxis de una Macro se compone de estas reglas:

- - - -

Usando JSON parámetro de macro

- -

Hay una característica semi-experimental disponible para las macros. Puedes proveerlas de un objeto JSON como primero y único parámetro, así:

- -
\{{ templateName({ "Alpha":"one", "Beta":["a","b","c"], "Foo":"http:\/\/mozilla.org\/" }) }}
-
- -

Los datos de esta macro estarán disponibles en un código de plantilla como un objeto en el argumento $0 (por ejemplo, $0.Alpha, $0.Beta, $0.Foo). Esto también te permite expresar estructuras de datos complejos en los parámetros de macro que son difíciles o imposibles de hacer con una simple lista de parámetros.

- -

Nota que el estilo de este parámetro es muy complejo. Se debe adherir exactamente a la sintaxis JSON, que tiene algunas exigencias escurridizas que son fáciles de pasar por alto (por ejemplo, todas las barras (/) llevan escapes). Cuando haya dudas, intenta ejecutar tu JSON con un validador.

- -

Cómo escribir "\{{"

- -

Como la secuencia de caracteres "\{{" se usa para indicar el comienzo de una macro, puede ser un problema si justo quieres usar "\{{" and "}}" como texto de una página. Probablemente dará un mensaje de error DocumentParsingError.

- -

En este caso, puedes escapar la primer llave con una barra invertida, así: \\{

- -

Sintaxis de la plantilla

- -

Las plantillas KumaScript son procesadas por un motor de plantillas JavaScript ensamblado con estas simples reglas:

- - - -

Características avanzadas

- -

Más allá de los aspectos básicos, el sistema KumaScript ofrece algunas características avanzadas.

- -

Variables de entorno

- -

Cuando la wiki hace una llamada al servicio KumaScript, pasa por una part del contexto del documento actual que KumaScript pone a disposición de las plantillas como variables:

- -
-
env.path
-
La ruta del documento wiki actual
-
env.url
-
La URL completa del documento wiki actual
-
env.id
-
Un ID único corto para el documento wiki actual
-
env.files
-
Un arreglo de archivos adjuntos para el documento wiki actual. Cada objeto en el arreglo se describe como {{ anch("File objects") }} debajo
-
env.review_tags
-
Un arreglo con las etiquetas de revisión del artículo ("technical", "editorial", etc.)
-
env.locale
-
El sitio del documento wiki actual
-
env.title
-
El título del documento wiki actual
-
env.slug
-
Una URL amigable del documento wiki actual
-
env.tags
-
Una lista de nombers de etiquetas para el documento wiki actual
-
env.modified
-
El último timestamp modificado para el documento wiki actual
-
env.cache_control
-
El encabezado Cache-Control henviado en la solicitud para el documento wiki actual, útil para decidir si invalidar los caches
-
- -

Objetos de archivos

- -

Cada objeto de archivo tiene los siguientes campos:

- -
-
title
-
El título del archivo adjunto
-
description
-
Una descripción textual de la revisión actual del archivo
-
filename
-
El nombre del archivo
-
size
-
El tamaños del archivo en bytes
-
author
-
El nombre de usuario de la persona que subió el archivo
-
mime
-
El tipo MIME del archivo
-
url
-
La URL en la que se puede encontrar el archivo
-
- -

Trabajando con listas

- -

Las variables env.tags y env.review_tags devuelven colecciones de etiqutas. Puedes trabajar con estas de varias maneras, por supuesto, pero aquí se dan un par de sugerencias.

- -
Buscar si se colocó una etiqueta específica
- -

Se puede buscar si una etiqueta específica existe en una página, así:

- -
if (env.tags.indexOf("tag") != −1) {
-  // The page has the tag "tag"
-}
-
- -
Iterar (recorrer) todas las etiquetas de la página
- -

Se pueden recorrer todas las etiquetas de la página, así:

- -
env.tag.forEach(function(tag) {
-  // haz cualquier cosa que necesites, tal como:
-  if (tag.indexOf("a") == 0) {
-    // esta etiqueta empieza con "a" - woohoo!
-  }
-});
- -

APIs y Módulos

- -

KumaScript ofrece algunas APIs de utilidad incorporadas, como también la capacidad para definir nuevas APIs en módulos editables como documentos wiki.

- -

Métodos incorporados

- -

Es probable que esta documentación mantenida manualmente quede desactualizada con respecto al código. Teniendo en cuanta eso, siempre puedes verificar el último estado de las APIs incorporadas en la fuente de KumaScript. Pero hay una selección de métodos útiles expuestos a plantillas:

- -
-
md5(string)
-
Devuelve un resumen de hexadecimal MD5 de determinada cadena.
-
template("name", ["arg0", "arg1", ..., "argN"])
-
Ejecuta y devuelve el resultado de las plantillas mencionadas con la lista de parámetros provistos.
-
Utilizado en plantillas así: <%- template("warning", ["foo", "bar", "baz"]) %>.
-
Esta es una función JavaScript. Así que, si uno de los parámetroses una variable arg como $2, no lo pongas entre comillas. Así: <%- template("warning", [$1, $2, "baz"]) %>. Si necesitas llamar otra plantilla desde el interior de un bloque e código, no uses <% ... %>. Ejemplo: myvar = "<li>" + template("LXRSearch", ["ident", "i", $1]) + "</li>";
-
require(name)
-
Carga otra plantilla como un módulo. Cualquier resultadu es ignorado. Devuelce cualquier cosa asignada a module.exports en la plantilla.
-
Utilizado en plantillas así: <% var my_module = require('MyModule'); %>.
-
cacheFn(key, timeout, function_to_cache)
-
Usando la key y duración de entrada de caché proporcionadas, cachea los resultados de la función proporcionada. Prioriza el valor de env.cache_control para invalidar el cache en no-cache, que puede ser enviado por un usuario logueado  que tipee shift-refresh.
-
request
-
Acceso al mikeal/request, una librería para hacer consultas HTTP. Usar este módulo en las plantillas KumaScriptno es muy amigable, así que quizá desees envolver uso en APIs de módulo que simplifiquen las cosas.
-
- -

Módulos de API incorporados

- -

Sólo hay una API incorporada por el momento, en el espacio de nombres kuma:

- -
-
kuma.htmlEscape(string)
-
Escapa los caracteres &, <, >, " a &amp, &lt;, &gt;, &quot;, respectivamente.
-
 
-
kuma.include(path)
-
Incluye contenido de la página en la ruta proporcionada. Cacheo pesado.
-
- -
-
kuma.pageExists(path)
-
Indica si existe la página en la ruta proporcionada. Cacheo pesado.
-
- -

Creando módulos

- -

Usando el mátodo incorporado require(), puedes cargar una plantilla como módulo para compartir variables y métodos comunes entre plantillas. Un módulo puede definirse como una plantilla de la siguiente manera:

- -
<%
-module.exports = {
-    add: function (a, b) {
-        return a + b;
-    }
-}
-%>
-
- -

Asumiendo que esta plantilla está guardada como /en-US/docs/Template:MathLib, puedes utilizarla en otra plantilla, así:

- -
<%
-var math_lib = require("MathLib");
-%>
-El resultado de 2 + 2 = <%= math_lib.add(2, 2) %>
-
- -

Y, el resultado de esta plantilla será:

- -
el resultado de 2 + 2 = 4
-
- -

Módulos cargados automáticamente

- -

Hay un grupo de módulos editables como plantillas wiki que se cargan automáticamente y quedan disponibles para cada plantilla. Este grupo está definido en el archivo de configuración para el servicio KumaScript. Cualquier cambio a este requiere un bug IT para editar la configuración y el reinicio del servicio.

- -

Para la mayor parte, estos intentos de proveer sustitutos para stand-ins for legacy DekiScript features to ease template migration. But, going forward, these can be used to share common variables and methods between templates:

- - - -

The best way to see the current state and offerings of these modules is to take a look at their source directly.

- -

Note: You might notice that the DekiScript modules use a built-in method named buildAPI(), like so:

- -
<% module.exports = buildAPI({
-    StartsWith: function (str, sub_str) {
-        return (''+str).indexOf(sub_str) === 0;
-    }
-}); %>
-
- -

The reason for this is because DekiScript is case-insensitive when it comes to references to API methods, whereas JavaScript is strict about uppercase and lowercase in references. So, buildAPI() is a hack to try to cover common case variations in DekiScript calls found in legacy templates.

- -

With that in mind, please do not use buildAPI() in new modules.

- -

Tips and caveats

- -

Debugging

- -

A useful tip when debugging. You can use the log.debug() method to output text to the scripting messages area at the top of the page that's running your template. Note that you need to be really sure to remove these when you're done debugging, as they're visible to all users! To use it, just do something like this:

- -
<%- log.debug("Some text goes here"); %>
-
- -

You can, of course, create more complex output using script code if it's helpful.

- -

Limitations of content migration from MindTouch

- -

When we make the move to Kuma, we will migrate content from the old MindTouch-based wiki to the new Kuma-based one. This script will do some basic work to attempt to convert scripts. But, there are many common code patterns that migration can't fix.

- -

So, this means that we'll need human intervention to carry template scripts over the rest of the way to being functional.

- -

To find templates in need of review and repair, check here: /en...eview/template.

- -

To find examples of templates that have already been repaired, check here: /en...s/tag/ks-fixed.

- -

Check the template usage stats bug file attachments to help prioritize templates to fix. If you know your way around gzip and grep, this attachment (a 1.5MB tab-delimited file listing template/document pairs) can help tell you what templates are used on which pages.

- -

As you repair templates, please uncheck the "Template" review checkbox and add the tag "ks-fixed", which will keep the above lists accurate.

- -

You can also find templates in need of repair by simply browsing through wiki content and spotting where content looks garbled with code or otherwise incorrect. Editing the page should show you the name of a macro that's in need of help. You may also see scripting errors on pages, which should offer editing links to the templates causing issues.

- -

Keyword Shortcut for quick template editing

- -

If you spend time editing a lot of KumaScript templates (e.g., to fix partly-migrated legacy DekiScript templates), you may find this keyword shortcut bookmark handy:

- - - - - - - - - - - - - - - - -
Nameedit mdn template
Location/en...mplate:%s$edit
Keywordte
- -

Armed with this bookmarklet, you can copy the name of a template, open a new tab, and type "te [Ctrl-V][Return]" to start editing the template. This helps when a template is misbehaving, yet not badly enough to cause a scripting error message.

- -

Changing Locale Identifiers

- -

The identifiers for various locales have changed from MindTouch to Kuma:

- - - -

This list should not change in the future, assuming we've not missed any. These locale identifier changes become significant in legacy DekiWIki templates.

- -

URL pattern changes

- -

The URL pattern for all wiki documents has changed:

- - - -

So, for example:

- - - -

To avoid breaking links, there is an attempt to automatically redirect requests to the legacy-style URLs to new-style URLs. But, efforts should be made to change links to the new-style URLs whenever possible.

- -

Differences from DekiScript

- -

It's useful to note a few changes from templates in DekiScript, in case you encounter these in migrated content:

- - - -

Caching

- -

KumaScript templates are heavily cached to improve performance. For the most part, this works great to serve up content that doesn't change very often. But, as a logged in user, you have two options to force a page to be regenerated, in case you notice issues with scripting:

- - - -

Cookbook

- -

This section will list examples of common patterns for templates used on MDN, including samples of legacy DekiScript templates and their new KumaScript equivalents.

- -

Force templates used on a page to be reloaded

- -

It bears repeating: To force templates used on a page to be reloaded after editing, hit Shift-Reload. Just using Reload by itself will cause the page contents to be regenerated, but using cached templates and included content. A Shift-Reload is necessary to invalidate caches beyond just the content of the page itself.

- -

Recovering from "Unknown Error"

- -

Sometimes, you'll see a scripting message like this when you load a page:

- -
Kumascript service failed unexpectedly: <class 'httplib.BadStatusLine'>
- -

This is probably a temporary failure of the KumaScript service. If you Refresh the page, the error may disappear. If that doesn't work, try a Shift-Refresh. If, after a few tries, the error persists - file an IT bug for Mozilla Developer Network to ask for an investigation.

- -

Broken wiki.languages() macros

- -

On some pages, you'll see a scripting error like this:

- -
Syntax error at line 436, column 461: Expected valid JSON object as the parameter of the preceding macro but...
-
- -

If you edit the page, you'll probably see a macro like this at the bottom of the page:

- -
\{{ wiki.languages({ "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/JavaScript_概要", ... }) }}
-
- -

To fix the problem, just delete the macro. Or, replace the curly braces on either side with HTML comments <!-- --> to preserve the information, like so:

- -
<!-- wiki.languages({ "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/JavaScript_概要", ... }) -->
-
- -

Because Kuma supports localization differently, these macros aren't actually needed any more. But, they've been left intact in case we need to revisit the relationships between localized pages. Unfortunately, it seems like migration has failed to convert some of them properly.

- -

Unconverted inline script blocks

- -

Occasionally, you'll find some text like this at the bottom of a page, or even somewhere in the middle:

- -
ottoPreviousNext("JSGChapters");
-wiki.languages({
-  "fr": "fr/Guide_JavaScript_1.5/Expressions_rationnelles",
-  "ja": "ja/Core_JavaScript_1.5_Guide/Regular_Expressions"
-});
-
- -

This is a script block that didn't get converted to a KumaScript macro during migration. It happens, unfortunately. If you switch to HTML source editing mode, you'll see this, a <pre class="script"> element:

- -
<pre class="script" style="font-size: 16px;">
-ottoPreviousNext(&quot;JSGChapters&quot;);
-wiki.languages({
-  &quot;fr&quot;: &quot;fr/Guide_JavaScript_1.5/Expressions_rationnelles&quot;,
- &nbsp;&quot;ja&quot;: &quot;ja/Core_JavaScript_1.5_Guide/Regular_Expressions&quot;
-});
-</pre>
-
- -

This is an inline script - previously allowed by DekiScript, no longer supported by KumaScript.

- -

For this particular example, common to the JavaScript Guide, you can fix it by removing the wiki.languages part (see previous section) and change the ottoPreviousNext() into a macro like so:

- -
\{{ ottoPreviousNext("JSGChapters") }}
-
- -

If you see a block of code that's more complex than the above, you will need to create a new template, move the code there, and replace the code in its previous spot with a macro calling the new template.

- -

Finding the Current Page's Language

- -

In KumaScript, the locale of the current document is exposed as an environment variable:

- -
var lang = env.locale;
-
- -

In legacy DekiScript templates, coming up with the locale was a bit harder. You'll see chunks of code like this:

- -
/* accepts as input one required parameter: MathML element to create an xref to */
-var u = uri.parts(Page.uri);
-var lang = string.tolower(u.path[0]);
-if (string.contains(lang, "project") || string.contains(lang, "Project")) {
-  lang = string.substr(lang, 8);
-}
-/* fall back to page.language on a user page */
-else if (string.StartsWith(lang, "user:")) {
-  lang = page.language;
-}
-
- -

Please replace code like the above with the new KumaScript example. The env.locale variable should be reliable and defined for every document.

- -

Reading the contents of a page attachment

- -

You can read the contents of an attached file by using the mdn.getFileContent() function, like this:

- -
<%
-  var contents = mdn.getFileContent(fileUrl);
-  ... do stuff with the contents ...
-%>
-
- -

or

- -
<%-mdn.getFileContent(fileObject)%>
-
- -

In other words, you may specify either the URL of the file to read or as a file object. The file objects for a page can be accessed through the array env.files. So, for example, to embed the contents of the first file attached to the article, you can do this:

- -
<%-mdn.getFileContent(env.files[0])%>
-
- -
Note: You probably don't want to try to embed the contents of a non-text file this way, as the raw contents would be injected as text. This is meant to let you access the contents of text attachments.
- -

If the file isn't found, an empty string is returned. There is currently no way to tell the difference between an empty file and a nonexistent one. But if you're putting empty files on the wiki, you're doing it wrong.

- -

Localizing template content

- -

Templates cannot be translated like other wiki pages. KumaScript only looks for templates in the en-US locale (i.e., /en-US/docs/Template:{name}), and does not look for templates that have been translated to another locale (i.e., /fr/docs/Template:{name}).

- -

So the main way to output content tailored to the current document locale is to pivot on the value of env.locale. There are many ways to do this, but a few patterns are common in the conversion of legacy DekiScript templates:

- -

If/else blocks in KumaScript

- -

The KumaScript equivalent of this can be achieved with simple if/else blocks, like so:

- -
<% if ("fr" == env.locale) { %>
-<%- template("CSSRef") %> « <a title="Référence_CSS/Extensions_Mozilla" href="/fr/docs/Référence_CSS/Extensions_Mozilla">Référence CSS:Extensions Mozilla</a>
-<% } else if ("ja" == env.locale) { %>
-<%- template("CSSRef") %> « <a title="CSS_Reference/Mozilla_Extensions" href="/ja/docs/CSS_Reference/Mozilla_Extensions">CSS リファレンス:Mozilla 拡張仕様</a>
-<% } else if ("pl" == env.locale) { %>
-<%- template("CSSRef") %> « <a title="Dokumentacja_CSS/Rozszerzenia_Mozilli" href="/pl/docs/Dokumentacja_CSS/Rozszerzenia_Mozilli">Dokumentacja CSS:Rozszerzenia Mozilli</a>
-<% } else if ("de" == env.locale) { %>
-<%- template("CSSRef") %> « <a title="CSS_Referenz/Mozilla_CSS_Erweiterungen" href="/de/docs/CSS_Referenz/Mozilla_CSS_Erweiterungen">CSS Referenz: Mozilla Erweiterungen</a>
-<% } else { %>
-<%- template("CSSRef") %> « <a title="CSS_Reference/Mozilla_Extensions" href="/en-US/docs/CSS_Reference/Mozilla_Extensions">CSS Reference:Mozilla Extensions</a>
-<% } %>
-
- -
Legacy DekiScript
- -

A similar way this was done in DekiScript was using <span>'s with lang="{locale}" attributes, like so:

- -
<p><span lang="*" class="lang lang-*"><span class="script">CSSRef()</span> « <a title="en/CSS_Reference/Mozilla_Extensions" href="/en/CSS_Reference/Mozilla_Extensions">CSS Reference:Mozilla Extensions</a></span>
-<span lang="en" class="lang lang-en"><span class="script">CSSRef()</span> « <a title="en/CSS_Reference/Mozilla_Extensions" href="/en/CSS_Reference/Mozilla_Extensions">CSS Reference:Mozilla Extensions</a>
-<span lang="fr" class="lang lang-fr"><span class="script">CSSRef()</span> « <a title="fr/Référence_CSS/Extensions_Mozilla" href="/fr/Référence_CSS/Extensions_Mozilla">Référence CSS:Extensions Mozilla</a></span>
-<span lang="ja" class="lang lang-ja"><span class="script">CSSRef()</span> « <a title="ja/CSS_Reference/Mozilla_Extensions" href="/ja/CSS_Reference/Mozilla_Extensions">CSS リファレンス:Mozilla 拡張仕様</a></span>
-<span lang="pl" class="lang lang-pl"> <span class="script">CSSRef()</span> « <a title="pl/Dokumentacja_CSS/Rozszerzenia_Mozilli" href="/pl/Dokumentacja_CSS/Rozszerzenia_Mozilli">Dokumentacja CSS:Rozszerzenia Mozilli</a></span>
-<span lang="de" class="lang lang-de"><span class="script">CSSRef()</span> « <a title="de/CSS_Referenz/Mozilla_CSS_Erweiterungen" href="/de/CSS_Referenz/Mozilla_CSS_Erweiterungen">CSS Referenz: Mozilla Erweiterungen</a></span></span></p>
-
- -

This is no longer supported. If you encounter templates built using the legacy DekiScript approach, revise them to use the new KumaScript pattern.

- -

Depending on what text editor is your favorite, you may be able to copy & paste from the browser-based editor and attack this pattern with a series of search/replace regexes to get you most of the way there.

- -

My favorite editor is MacVim, and a series of regexes like this does the bulk of the work with just a little manual clean up following:

- -
%s#<span#^M<span#g
-%s#<span lang="\(.*\)" .*>#<% } else if ("\1" == env.locale) { %>#g
-%s#<span class="script">template.Cssxref(#<%- template("Cssxref", [#
-%s#)</span> </span>#]) %>
-
- -

Your mileage may vary, and patterns change slightly from template to template. That's why the migration script was unable to just handle this automatically, after all.

- -

String variables and switch

- -

Rather than switch between full chunks of markup, you can define a set of strings, switch them based on locale, and then use them to fill in placeholders in a single chunk of markup:

- -
<%
-var s_title = 'Firefox for Developers';
-switch (env.locale) {
-    case 'de':
-        s_title = "Firefox für Entwickler";
-        break;
-    case 'fr':
-        s_title = "Firefox pour les développeurs";
-        break;
-    case 'es':
-        s_title = "Firefox para desarrolladores";
-        break;
-};
-%>
-<span class="title"><%= s_title %></span>
-
- -

You'll see examples of this in legacy DekiScript templates. For the most part, this pattern should work as-is, but you may need to adjust the expected values of locales (e.g., en, cn, pt become en-US, zh-CN, pt-PT respectively).

- -

Use mdn.localString()

- -

A recent addition to the Template:MDN:Common module is mdn.localString(), used like this:

- -
<%
-var s_title = mdn.localString({
-  "en-US": "Firefox for Developers",
-  "de": "Firefox für Entwickler",
-  "es": "Firefox para desarrolladores"
-});
-%>
-<span class="title"><%= s_title %></span>
-
- -

This is more concise than the switch statement, and may be a better choice where a single string is concerned. However, if many strings need to be translated (e.g., as in CSSRef), a switch statement might help keep all the strings grouped by locale and more easily translated that way.

- -

When the object does not have the appropriate locale, the value of "en-US" is used as the initial value.

- -

Before and after examples

- -

Carriage returns added here and there for clarity.

- -
// Before: DOM0() template Dekiscript
-<p><span class="lang lang-en" lang="en">DOM Level 0. Not part of any standard. </span>
-<span class="lang lang-es" lang="es">DOM Nivel 0. No es parte de ninguna norma. </span>
-<span class="lang lang-*" lang="*">DOM Level 0. Not part of any standard. </span>
-<span class="lang lang-fr" lang="fr">DOM Level 0. Ne fait partie d'aucune spécification. </span>
-<span class="lang lang-ja" lang="ja">DOM Level 0。どの標準にも属しません。 </span>
-<span class="lang lang-pl" lang="pl">DOM Level 0. Nie jest częścią żadnego standardu. </span>
-<span class="lang lang-zh-cn" lang="zh-cn">DOM Level 0 不属于任何标准.</span></p>
-
-// After: Kumascript version
-<% if ("fr" == env.locale) { %>
-<p>DOM Level 0. Ne fait partie d'aucune spécification.</p>
-<% } else if ("ja" == env.locale) { %>
-<p>DOM Level 0。どの標準にも属しません。 </p>
-<% } else if ("pl" == env.locale) { %>
-<p>DOM Level 0. Nie jest częścią żadnego standardu.</p>
-<% } else if ("es" == env.locale) { %>
-<p>DOM Nivel 0. No es parte de ninguna norma.</p>
-<% } else if ("zh-CN" == env.locale) { %>
-<p>DOM Level 0 不属于任何标准.</p>
-<% } else { %>
-<p>DOM Level 0. Not part of any standard.</p>
-<% } %>
- -
// From ReleaseChannelInfo() template
-// Before:
-web.html("<p>Firefox " + $0 + ", based on Gecko " + $1 + ", will ship in " + $2 + ".
- This article provides information about the changes in this release that will
- affect developers. Nightly builds of what will become Firefox " + $0 + " are "
-  + web.link(url, "currently available") + " on the " + string.ToUpperFirst($3)
-  + " channel.</p>");
-
-// After:
-<p>Firefox <%= $0 %>, based on Gecko <%= $1 %>, will ship in <%= $2 %>. This
- article provides information about the changes in this release that will
- affect developers. Nightly builds of what will become Firefox <%= $0 %>
- are <%- web.link(url, "currently available")%>  on the
- <%= string.ToUpperFirst($3) %> channel.</p>
- -
// Before: old Dekiscript snippet
-if ($1 && string.length($1)) {
-  optionsText = optionsText + "<li>" + LXRSearch("ident", "i", $1) + "</li>";
-}
-
-// After: new Kumascript. Quote parameters to template() unless it is an arg variable (like $1).
-if ($1 && string.length($1)) {
-    optionsText = optionsText + "<li>" + template("LXRSearch", ["ident", "i", $1]) + "</li>";
-}
-
-// Note that template() within <% ... %> outputs nothing directly. If you want to call another
-// template and display its output, use <%= %> or <%- %> like this:
-<%- template("LXRSearch", ["ident", "i", $1]) %>
- -

See also

- - diff --git a/files/es/mdn/tools/kumascript/index.html b/files/es/mdn/tools/kumascript/index.html new file mode 100644 index 0000000000..ed060eecd8 --- /dev/null +++ b/files/es/mdn/tools/kumascript/index.html @@ -0,0 +1,683 @@ +--- +title: Introducción a KumaScript +slug: MDN/Tools/Introduction_to_KumaScript +translation_of: MDN/Tools/KumaScript +--- +
{{MDNSidebar}}
+ +
{{draft}}
+ +

Vistazo general

+ +

En el verano de 2012, MDN  cambió a una nueva plataforma wiki llamada Kuma. Esta reemplaza el lenguaje de plantilla DekiScript con un nuevo sistema llamado KumaScript. KumaScript se alimenta de JavaScript del lado del servidor, usando Node.js. Este artículo provee informaciónde cómo usar KumaScript y cómo actualizar scripts migrados parcialmente desde MindTouch.

+ +

Para detalles y preguntas frecuentes sobre KumaScript, mira el KumaScript Fireside Chat del equipo de desarrolladores MDN.

+ +

¿Qué es KumaScript?

+ + + +

¿Qué no es KumaScript?

+ + + +

Aspectos básicos

+ +

KumaScript funciona permitiendo a wiki de confianza escribir plantillas JavaScript ensambladas. Estas plantillas pueden ser invocadas en el contenido del documento por cualquier editor wiki mediante el uso de macros.

+ + + + + + + + + + + + + + +
+

Una plantilla se vé así:

+ 		+

Una macro se vé así:

+ 		+

El resultado de una macro sale así:

+
+ 
+<% for (var i = 0; i < $0; i++) { %>
+Hello #<%= i %>
+<% } %>
+ 		+ 
+\{{ hello("3") }}
+
+ 		+ 
+Hello #0
+Hello #1
+Hello #2
+
+ +

Sintaxis de una macro

+ +

Las plantillas KumaScript se invocan en el contenido del documento con macros, como esta:

+ +
\{{ templateName("arg0", "arg1", ..., "argN") }}
+
+ +

La sintaxis de una Macro se compone de estas reglas:

+ + + +

Usando JSON parámetro de macro

+ +

Hay una característica semi-experimental disponible para las macros. Puedes proveerlas de un objeto JSON como primero y único parámetro, así:

+ +
\{{ templateName({ "Alpha":"one", "Beta":["a","b","c"], "Foo":"http:\/\/mozilla.org\/" }) }}
+
+ +

Los datos de esta macro estarán disponibles en un código de plantilla como un objeto en el argumento $0 (por ejemplo, $0.Alpha, $0.Beta, $0.Foo). Esto también te permite expresar estructuras de datos complejos en los parámetros de macro que son difíciles o imposibles de hacer con una simple lista de parámetros.

+ +

Nota que el estilo de este parámetro es muy complejo. Se debe adherir exactamente a la sintaxis JSON, que tiene algunas exigencias escurridizas que son fáciles de pasar por alto (por ejemplo, todas las barras (/) llevan escapes). Cuando haya dudas, intenta ejecutar tu JSON con un validador.

+ +

Cómo escribir "\{{"

+ +

Como la secuencia de caracteres "\{{" se usa para indicar el comienzo de una macro, puede ser un problema si justo quieres usar "\{{" and "}}" como texto de una página. Probablemente dará un mensaje de error DocumentParsingError.

+ +

En este caso, puedes escapar la primer llave con una barra invertida, así: \\{

+ +

Sintaxis de la plantilla

+ +

Las plantillas KumaScript son procesadas por un motor de plantillas JavaScript ensamblado con estas simples reglas:

+ + + +

Características avanzadas

+ +

Más allá de los aspectos básicos, el sistema KumaScript ofrece algunas características avanzadas.

+ +

Variables de entorno

+ +

Cuando la wiki hace una llamada al servicio KumaScript, pasa por una part del contexto del documento actual que KumaScript pone a disposición de las plantillas como variables:

+ +
+
env.path
+
La ruta del documento wiki actual
+
env.url
+
La URL completa del documento wiki actual
+
env.id
+
Un ID único corto para el documento wiki actual
+
env.files
+
Un arreglo de archivos adjuntos para el documento wiki actual. Cada objeto en el arreglo se describe como {{ anch("File objects") }} debajo
+
env.review_tags
+
Un arreglo con las etiquetas de revisión del artículo ("technical", "editorial", etc.)
+
env.locale
+
El sitio del documento wiki actual
+
env.title
+
El título del documento wiki actual
+
env.slug
+
Una URL amigable del documento wiki actual
+
env.tags
+
Una lista de nombers de etiquetas para el documento wiki actual
+
env.modified
+
El último timestamp modificado para el documento wiki actual
+
env.cache_control
+
El encabezado Cache-Control henviado en la solicitud para el documento wiki actual, útil para decidir si invalidar los caches
+
+ +

Objetos de archivos

+ +

Cada objeto de archivo tiene los siguientes campos:

+ +
+
title
+
El título del archivo adjunto
+
description
+
Una descripción textual de la revisión actual del archivo
+
filename
+
El nombre del archivo
+
size
+
El tamaños del archivo en bytes
+
author
+
El nombre de usuario de la persona que subió el archivo
+
mime
+
El tipo MIME del archivo
+
url
+
La URL en la que se puede encontrar el archivo
+
+ +

Trabajando con listas

+ +

Las variables env.tags y env.review_tags devuelven colecciones de etiqutas. Puedes trabajar con estas de varias maneras, por supuesto, pero aquí se dan un par de sugerencias.

+ +
Buscar si se colocó una etiqueta específica
+ +

Se puede buscar si una etiqueta específica existe en una página, así:

+ +
if (env.tags.indexOf("tag") != −1) {
+  // The page has the tag "tag"
+}
+
+ +
Iterar (recorrer) todas las etiquetas de la página
+ +

Se pueden recorrer todas las etiquetas de la página, así:

+ +
env.tag.forEach(function(tag) {
+  // haz cualquier cosa que necesites, tal como:
+  if (tag.indexOf("a") == 0) {
+    // esta etiqueta empieza con "a" - woohoo!
+  }
+});
+ +

APIs y Módulos

+ +

KumaScript ofrece algunas APIs de utilidad incorporadas, como también la capacidad para definir nuevas APIs en módulos editables como documentos wiki.

+ +

Métodos incorporados

+ +

Es probable que esta documentación mantenida manualmente quede desactualizada con respecto al código. Teniendo en cuanta eso, siempre puedes verificar el último estado de las APIs incorporadas en la fuente de KumaScript. Pero hay una selección de métodos útiles expuestos a plantillas:

+ +
+
md5(string)
+
Devuelve un resumen de hexadecimal MD5 de determinada cadena.
+
template("name", ["arg0", "arg1", ..., "argN"])
+
Ejecuta y devuelve el resultado de las plantillas mencionadas con la lista de parámetros provistos.
+
Utilizado en plantillas así: <%- template("warning", ["foo", "bar", "baz"]) %>.
+
Esta es una función JavaScript. Así que, si uno de los parámetroses una variable arg como $2, no lo pongas entre comillas. Así: <%- template("warning", [$1, $2, "baz"]) %>. Si necesitas llamar otra plantilla desde el interior de un bloque e código, no uses <% ... %>. Ejemplo: myvar = "<li>" + template("LXRSearch", ["ident", "i", $1]) + "</li>";
+
require(name)
+
Carga otra plantilla como un módulo. Cualquier resultadu es ignorado. Devuelce cualquier cosa asignada a module.exports en la plantilla.
+
Utilizado en plantillas así: <% var my_module = require('MyModule'); %>.
+
cacheFn(key, timeout, function_to_cache)
+
Usando la key y duración de entrada de caché proporcionadas, cachea los resultados de la función proporcionada. Prioriza el valor de env.cache_control para invalidar el cache en no-cache, que puede ser enviado por un usuario logueado  que tipee shift-refresh.
+
request
+
Acceso al mikeal/request, una librería para hacer consultas HTTP. Usar este módulo en las plantillas KumaScriptno es muy amigable, así que quizá desees envolver uso en APIs de módulo que simplifiquen las cosas.
+
+ +

Módulos de API incorporados

+ +

Sólo hay una API incorporada por el momento, en el espacio de nombres kuma:

+ +
+
kuma.htmlEscape(string)
+
Escapa los caracteres &, <, >, " a &amp, &lt;, &gt;, &quot;, respectivamente.
+
 
+
kuma.include(path)
+
Incluye contenido de la página en la ruta proporcionada. Cacheo pesado.
+
+ +
+
kuma.pageExists(path)
+
Indica si existe la página en la ruta proporcionada. Cacheo pesado.
+
+ +

Creando módulos

+ +

Usando el mátodo incorporado require(), puedes cargar una plantilla como módulo para compartir variables y métodos comunes entre plantillas. Un módulo puede definirse como una plantilla de la siguiente manera:

+ +
<%
+module.exports = {
+    add: function (a, b) {
+        return a + b;
+    }
+}
+%>
+
+ +

Asumiendo que esta plantilla está guardada como /en-US/docs/Template:MathLib, puedes utilizarla en otra plantilla, así:

+ +
<%
+var math_lib = require("MathLib");
+%>
+El resultado de 2 + 2 = <%= math_lib.add(2, 2) %>
+
+ +

Y, el resultado de esta plantilla será:

+ +
el resultado de 2 + 2 = 4
+
+ +

Módulos cargados automáticamente

+ +

Hay un grupo de módulos editables como plantillas wiki que se cargan automáticamente y quedan disponibles para cada plantilla. Este grupo está definido en el archivo de configuración para el servicio KumaScript. Cualquier cambio a este requiere un bug IT para editar la configuración y el reinicio del servicio.

+ +

Para la mayor parte, estos intentos de proveer sustitutos para stand-ins for legacy DekiScript features to ease template migration. But, going forward, these can be used to share common variables and methods between templates:

+ + + +

The best way to see the current state and offerings of these modules is to take a look at their source directly.

+ +

Note: You might notice that the DekiScript modules use a built-in method named buildAPI(), like so:

+ +
<% module.exports = buildAPI({
+    StartsWith: function (str, sub_str) {
+        return (''+str).indexOf(sub_str) === 0;
+    }
+}); %>
+
+ +

The reason for this is because DekiScript is case-insensitive when it comes to references to API methods, whereas JavaScript is strict about uppercase and lowercase in references. So, buildAPI() is a hack to try to cover common case variations in DekiScript calls found in legacy templates.

+ +

With that in mind, please do not use buildAPI() in new modules.

+ +

Tips and caveats

+ +

Debugging

+ +

A useful tip when debugging. You can use the log.debug() method to output text to the scripting messages area at the top of the page that's running your template. Note that you need to be really sure to remove these when you're done debugging, as they're visible to all users! To use it, just do something like this:

+ +
<%- log.debug("Some text goes here"); %>
+
+ +

You can, of course, create more complex output using script code if it's helpful.

+ +

Limitations of content migration from MindTouch

+ +

When we make the move to Kuma, we will migrate content from the old MindTouch-based wiki to the new Kuma-based one. This script will do some basic work to attempt to convert scripts. But, there are many common code patterns that migration can't fix.

+ +

So, this means that we'll need human intervention to carry template scripts over the rest of the way to being functional.

+ +

To find templates in need of review and repair, check here: /en...eview/template.

+ +

To find examples of templates that have already been repaired, check here: /en...s/tag/ks-fixed.

+ +

Check the template usage stats bug file attachments to help prioritize templates to fix. If you know your way around gzip and grep, this attachment (a 1.5MB tab-delimited file listing template/document pairs) can help tell you what templates are used on which pages.

+ +

As you repair templates, please uncheck the "Template" review checkbox and add the tag "ks-fixed", which will keep the above lists accurate.

+ +

You can also find templates in need of repair by simply browsing through wiki content and spotting where content looks garbled with code or otherwise incorrect. Editing the page should show you the name of a macro that's in need of help. You may also see scripting errors on pages, which should offer editing links to the templates causing issues.

+ +

Keyword Shortcut for quick template editing

+ +

If you spend time editing a lot of KumaScript templates (e.g., to fix partly-migrated legacy DekiScript templates), you may find this keyword shortcut bookmark handy:

+ + + + + + + + + + + + + + + + +
Nameedit mdn template
Location/en...mplate:%s$edit
Keywordte
+ +

Armed with this bookmarklet, you can copy the name of a template, open a new tab, and type "te [Ctrl-V][Return]" to start editing the template. This helps when a template is misbehaving, yet not badly enough to cause a scripting error message.

+ +

Changing Locale Identifiers

+ +

The identifiers for various locales have changed from MindTouch to Kuma:

+ + + +

This list should not change in the future, assuming we've not missed any. These locale identifier changes become significant in legacy DekiWIki templates.

+ +

URL pattern changes

+ +

The URL pattern for all wiki documents has changed:

+ + + +

So, for example:

+ + + +

To avoid breaking links, there is an attempt to automatically redirect requests to the legacy-style URLs to new-style URLs. But, efforts should be made to change links to the new-style URLs whenever possible.

+ +

Differences from DekiScript

+ +

It's useful to note a few changes from templates in DekiScript, in case you encounter these in migrated content:

+ + + +

Caching

+ +

KumaScript templates are heavily cached to improve performance. For the most part, this works great to serve up content that doesn't change very often. But, as a logged in user, you have two options to force a page to be regenerated, in case you notice issues with scripting:

+ + + +

Cookbook

+ +

This section will list examples of common patterns for templates used on MDN, including samples of legacy DekiScript templates and their new KumaScript equivalents.

+ +

Force templates used on a page to be reloaded

+ +

It bears repeating: To force templates used on a page to be reloaded after editing, hit Shift-Reload. Just using Reload by itself will cause the page contents to be regenerated, but using cached templates and included content. A Shift-Reload is necessary to invalidate caches beyond just the content of the page itself.

+ +

Recovering from "Unknown Error"

+ +

Sometimes, you'll see a scripting message like this when you load a page:

+ +
Kumascript service failed unexpectedly: <class 'httplib.BadStatusLine'>
+ +

This is probably a temporary failure of the KumaScript service. If you Refresh the page, the error may disappear. If that doesn't work, try a Shift-Refresh. If, after a few tries, the error persists - file an IT bug for Mozilla Developer Network to ask for an investigation.

+ +

Broken wiki.languages() macros

+ +

On some pages, you'll see a scripting error like this:

+ +
Syntax error at line 436, column 461: Expected valid JSON object as the parameter of the preceding macro but...
+
+ +

If you edit the page, you'll probably see a macro like this at the bottom of the page:

+ +
\{{ wiki.languages({ "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/JavaScript_概要", ... }) }}
+
+ +

To fix the problem, just delete the macro. Or, replace the curly braces on either side with HTML comments <!-- --> to preserve the information, like so:

+ +
<!-- wiki.languages({ "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/JavaScript_概要", ... }) -->
+
+ +

Because Kuma supports localization differently, these macros aren't actually needed any more. But, they've been left intact in case we need to revisit the relationships between localized pages. Unfortunately, it seems like migration has failed to convert some of them properly.

+ +

Unconverted inline script blocks

+ +

Occasionally, you'll find some text like this at the bottom of a page, or even somewhere in the middle:

+ +
ottoPreviousNext("JSGChapters");
+wiki.languages({
+  "fr": "fr/Guide_JavaScript_1.5/Expressions_rationnelles",
+  "ja": "ja/Core_JavaScript_1.5_Guide/Regular_Expressions"
+});
+
+ +

This is a script block that didn't get converted to a KumaScript macro during migration. It happens, unfortunately. If you switch to HTML source editing mode, you'll see this, a <pre class="script"> element:

+ +
<pre class="script" style="font-size: 16px;">
+ottoPreviousNext(&quot;JSGChapters&quot;);
+wiki.languages({
+  &quot;fr&quot;: &quot;fr/Guide_JavaScript_1.5/Expressions_rationnelles&quot;,
+ &nbsp;&quot;ja&quot;: &quot;ja/Core_JavaScript_1.5_Guide/Regular_Expressions&quot;
+});
+</pre>
+
+ +

This is an inline script - previously allowed by DekiScript, no longer supported by KumaScript.

+ +

For this particular example, common to the JavaScript Guide, you can fix it by removing the wiki.languages part (see previous section) and change the ottoPreviousNext() into a macro like so:

+ +
\{{ ottoPreviousNext("JSGChapters") }}
+
+ +

If you see a block of code that's more complex than the above, you will need to create a new template, move the code there, and replace the code in its previous spot with a macro calling the new template.

+ +

Finding the Current Page's Language

+ +

In KumaScript, the locale of the current document is exposed as an environment variable:

+ +
var lang = env.locale;
+
+ +

In legacy DekiScript templates, coming up with the locale was a bit harder. You'll see chunks of code like this:

+ +
/* accepts as input one required parameter: MathML element to create an xref to */
+var u = uri.parts(Page.uri);
+var lang = string.tolower(u.path[0]);
+if (string.contains(lang, "project") || string.contains(lang, "Project")) {
+  lang = string.substr(lang, 8);
+}
+/* fall back to page.language on a user page */
+else if (string.StartsWith(lang, "user:")) {
+  lang = page.language;
+}
+
+ +

Please replace code like the above with the new KumaScript example. The env.locale variable should be reliable and defined for every document.

+ +

Reading the contents of a page attachment

+ +

You can read the contents of an attached file by using the mdn.getFileContent() function, like this:

+ +
<%
+  var contents = mdn.getFileContent(fileUrl);
+  ... do stuff with the contents ...
+%>
+
+ +

or

+ +
<%-mdn.getFileContent(fileObject)%>
+
+ +

In other words, you may specify either the URL of the file to read or as a file object. The file objects for a page can be accessed through the array env.files. So, for example, to embed the contents of the first file attached to the article, you can do this:

+ +
<%-mdn.getFileContent(env.files[0])%>
+
+ +
Note: You probably don't want to try to embed the contents of a non-text file this way, as the raw contents would be injected as text. This is meant to let you access the contents of text attachments.
+ +

If the file isn't found, an empty string is returned. There is currently no way to tell the difference between an empty file and a nonexistent one. But if you're putting empty files on the wiki, you're doing it wrong.

+ +

Localizing template content

+ +

Templates cannot be translated like other wiki pages. KumaScript only looks for templates in the en-US locale (i.e., /en-US/docs/Template:{name}), and does not look for templates that have been translated to another locale (i.e., /fr/docs/Template:{name}).

+ +

So the main way to output content tailored to the current document locale is to pivot on the value of env.locale. There are many ways to do this, but a few patterns are common in the conversion of legacy DekiScript templates:

+ +

If/else blocks in KumaScript

+ +

The KumaScript equivalent of this can be achieved with simple if/else blocks, like so:

+ +
<% if ("fr" == env.locale) { %>
+<%- template("CSSRef") %> « <a title="Référence_CSS/Extensions_Mozilla" href="/fr/docs/Référence_CSS/Extensions_Mozilla">Référence CSS:Extensions Mozilla</a>
+<% } else if ("ja" == env.locale) { %>
+<%- template("CSSRef") %> « <a title="CSS_Reference/Mozilla_Extensions" href="/ja/docs/CSS_Reference/Mozilla_Extensions">CSS リファレンス:Mozilla 拡張仕様</a>
+<% } else if ("pl" == env.locale) { %>
+<%- template("CSSRef") %> « <a title="Dokumentacja_CSS/Rozszerzenia_Mozilli" href="/pl/docs/Dokumentacja_CSS/Rozszerzenia_Mozilli">Dokumentacja CSS:Rozszerzenia Mozilli</a>
+<% } else if ("de" == env.locale) { %>
+<%- template("CSSRef") %> « <a title="CSS_Referenz/Mozilla_CSS_Erweiterungen" href="/de/docs/CSS_Referenz/Mozilla_CSS_Erweiterungen">CSS Referenz: Mozilla Erweiterungen</a>
+<% } else { %>
+<%- template("CSSRef") %> « <a title="CSS_Reference/Mozilla_Extensions" href="/en-US/docs/CSS_Reference/Mozilla_Extensions">CSS Reference:Mozilla Extensions</a>
+<% } %>
+
+ +
Legacy DekiScript
+ +

A similar way this was done in DekiScript was using <span>'s with lang="{locale}" attributes, like so:

+ +
<p><span lang="*" class="lang lang-*"><span class="script">CSSRef()</span> « <a title="en/CSS_Reference/Mozilla_Extensions" href="/en/CSS_Reference/Mozilla_Extensions">CSS Reference:Mozilla Extensions</a></span>
+<span lang="en" class="lang lang-en"><span class="script">CSSRef()</span> « <a title="en/CSS_Reference/Mozilla_Extensions" href="/en/CSS_Reference/Mozilla_Extensions">CSS Reference:Mozilla Extensions</a>
+<span lang="fr" class="lang lang-fr"><span class="script">CSSRef()</span> « <a title="fr/Référence_CSS/Extensions_Mozilla" href="/fr/Référence_CSS/Extensions_Mozilla">Référence CSS:Extensions Mozilla</a></span>
+<span lang="ja" class="lang lang-ja"><span class="script">CSSRef()</span> « <a title="ja/CSS_Reference/Mozilla_Extensions" href="/ja/CSS_Reference/Mozilla_Extensions">CSS リファレンス:Mozilla 拡張仕様</a></span>
+<span lang="pl" class="lang lang-pl"> <span class="script">CSSRef()</span> « <a title="pl/Dokumentacja_CSS/Rozszerzenia_Mozilli" href="/pl/Dokumentacja_CSS/Rozszerzenia_Mozilli">Dokumentacja CSS:Rozszerzenia Mozilli</a></span>
+<span lang="de" class="lang lang-de"><span class="script">CSSRef()</span> « <a title="de/CSS_Referenz/Mozilla_CSS_Erweiterungen" href="/de/CSS_Referenz/Mozilla_CSS_Erweiterungen">CSS Referenz: Mozilla Erweiterungen</a></span></span></p>
+
+ +

This is no longer supported. If you encounter templates built using the legacy DekiScript approach, revise them to use the new KumaScript pattern.

+ +

Depending on what text editor is your favorite, you may be able to copy & paste from the browser-based editor and attack this pattern with a series of search/replace regexes to get you most of the way there.

+ +

My favorite editor is MacVim, and a series of regexes like this does the bulk of the work with just a little manual clean up following:

+ +
%s#<span#^M<span#g
+%s#<span lang="\(.*\)" .*>#<% } else if ("\1" == env.locale) { %>#g
+%s#<span class="script">template.Cssxref(#<%- template("Cssxref", [#
+%s#)</span> </span>#]) %>
+
+ +

Your mileage may vary, and patterns change slightly from template to template. That's why the migration script was unable to just handle this automatically, after all.

+ +

String variables and switch

+ +

Rather than switch between full chunks of markup, you can define a set of strings, switch them based on locale, and then use them to fill in placeholders in a single chunk of markup:

+ +
<%
+var s_title = 'Firefox for Developers';
+switch (env.locale) {
+    case 'de':
+        s_title = "Firefox für Entwickler";
+        break;
+    case 'fr':
+        s_title = "Firefox pour les développeurs";
+        break;
+    case 'es':
+        s_title = "Firefox para desarrolladores";
+        break;
+};
+%>
+<span class="title"><%= s_title %></span>
+
+ +

You'll see examples of this in legacy DekiScript templates. For the most part, this pattern should work as-is, but you may need to adjust the expected values of locales (e.g., en, cn, pt become en-US, zh-CN, pt-PT respectively).

+ +

Use mdn.localString()

+ +

A recent addition to the Template:MDN:Common module is mdn.localString(), used like this:

+ +
<%
+var s_title = mdn.localString({
+  "en-US": "Firefox for Developers",
+  "de": "Firefox für Entwickler",
+  "es": "Firefox para desarrolladores"
+});
+%>
+<span class="title"><%= s_title %></span>
+
+ +

This is more concise than the switch statement, and may be a better choice where a single string is concerned. However, if many strings need to be translated (e.g., as in CSSRef), a switch statement might help keep all the strings grouped by locale and more easily translated that way.

+ +

When the object does not have the appropriate locale, the value of "en-US" is used as the initial value.

+ +

Before and after examples

+ +

Carriage returns added here and there for clarity.

+ +
// Before: DOM0() template Dekiscript
+<p><span class="lang lang-en" lang="en">DOM Level 0. Not part of any standard. </span>
+<span class="lang lang-es" lang="es">DOM Nivel 0. No es parte de ninguna norma. </span>
+<span class="lang lang-*" lang="*">DOM Level 0. Not part of any standard. </span>
+<span class="lang lang-fr" lang="fr">DOM Level 0. Ne fait partie d'aucune spécification. </span>
+<span class="lang lang-ja" lang="ja">DOM Level 0。どの標準にも属しません。 </span>
+<span class="lang lang-pl" lang="pl">DOM Level 0. Nie jest częścią żadnego standardu. </span>
+<span class="lang lang-zh-cn" lang="zh-cn">DOM Level 0 不属于任何标准.</span></p>
+
+// After: Kumascript version
+<% if ("fr" == env.locale) { %>
+<p>DOM Level 0. Ne fait partie d'aucune spécification.</p>
+<% } else if ("ja" == env.locale) { %>
+<p>DOM Level 0。どの標準にも属しません。 </p>
+<% } else if ("pl" == env.locale) { %>
+<p>DOM Level 0. Nie jest częścią żadnego standardu.</p>
+<% } else if ("es" == env.locale) { %>
+<p>DOM Nivel 0. No es parte de ninguna norma.</p>
+<% } else if ("zh-CN" == env.locale) { %>
+<p>DOM Level 0 不属于任何标准.</p>
+<% } else { %>
+<p>DOM Level 0. Not part of any standard.</p>
+<% } %>
+ +
// From ReleaseChannelInfo() template
+// Before:
+web.html("<p>Firefox " + $0 + ", based on Gecko " + $1 + ", will ship in " + $2 + ".
+ This article provides information about the changes in this release that will
+ affect developers. Nightly builds of what will become Firefox " + $0 + " are "
+  + web.link(url, "currently available") + " on the " + string.ToUpperFirst($3)
+  + " channel.</p>");
+
+// After:
+<p>Firefox <%= $0 %>, based on Gecko <%= $1 %>, will ship in <%= $2 %>. This
+ article provides information about the changes in this release that will
+ affect developers. Nightly builds of what will become Firefox <%= $0 %>
+ are <%- web.link(url, "currently available")%>  on the
+ <%= string.ToUpperFirst($3) %> channel.</p>
+ +
// Before: old Dekiscript snippet
+if ($1 && string.length($1)) {
+  optionsText = optionsText + "<li>" + LXRSearch("ident", "i", $1) + "</li>";
+}
+
+// After: new Kumascript. Quote parameters to template() unless it is an arg variable (like $1).
+if ($1 && string.length($1)) {
+    optionsText = optionsText + "<li>" + template("LXRSearch", ["ident", "i", $1]) + "</li>";
+}
+
+// Note that template() within <% ... %> outputs nothing directly. If you want to call another
+// template and display its output, use <%= %> or <%- %> like this:
+<%- template("LXRSearch", ["ident", "i", $1]) %>
+ +

See also

+ + diff --git a/files/es/mdn/tools/page_regeneration/index.html b/files/es/mdn/tools/page_regeneration/index.html deleted file mode 100644 index cdc6fbd699..0000000000 --- a/files/es/mdn/tools/page_regeneration/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Renderizado de páginas en MDN -slug: MDN/Tools/Page_regeneration -translation_of: 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/mdn/tools/template_editing/index.html b/files/es/mdn/tools/template_editing/index.html deleted file mode 100644 index 0edab22e95..0000000000 --- a/files/es/mdn/tools/template_editing/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Edición de plantillas -slug: MDN/Tools/Template_editing -tags: - - Guía - - Herramientas - - MDN Meta - - Privilegios - - Roles(2) -translation_of: 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/mdn/user_guide/index.html b/files/es/mdn/user_guide/index.html deleted file mode 100644 index 7703e98dd1..0000000000 --- a/files/es/mdn/user_guide/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: MDN user guide -slug: MDN/User_guide -tags: - - Documentation - - Landing - - MDN - - NeedsTranslation - - TopicStub -translation_of: MDN/Tools -translation_of_original: 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/mdn/yari/index.html b/files/es/mdn/yari/index.html new file mode 100644 index 0000000000..b7b0de4fd9 --- /dev/null +++ b/files/es/mdn/yari/index.html @@ -0,0 +1,55 @@ +--- +title: Kuma +slug: MDN/Kuma +translation_of: MDN/Kuma +--- +
{{MDNSidebar}}
+ +

Kuma es la plataforma wiki que impulsa Mozilla Developer Network. Es una plataforma open source escrita en Python usando el framework Django.

+ +
+
+

Documentación de Kuma

+ +
+
The Kuma API
+
Kuma provee una API simple que te permite acceder a la información sobre las páginas e incluso para poner nuevo contenido en las páginas.
+
Introducción a KumaScript:
+
...el lenguaje de plantillas de Kuma.
+
Usando KumaScript y las plantillas
+
Una guía de cómo usar las plantillas KumaScript en el contenido del artículo.
+
Referencia KumaScript
+
Una referencia a KumaScript.
+
Contribuyendo a Kuma
+
Una guía para forkear Kuma y contribuir al proyecto.
+
+ +

Artículos antiguos para clasificar:

+ + + +

Ver todos...

+
+ +
+

Herramientas y tareas

+ +
+
Bugs
+
Una lista de los bugs de Kuma. Sientase libre para buscar lo que quiera y lo que quieras arreglas! Este link requiere que entres en Bugzilla con su respectiva cuenta.
+
Reportar un bug
+
Si usted tiene un problema con Kuma, o tiene una idea para hacerlo mejor, ¡tú puedes reportar un bug!
+
Cambios
+
Una lista de los cambios recientes; este es un buen lugar para ver qué ha pasado recientemente.
+
¿Qué ha sido implementado?
+
Un tablero de estado de qué ha sido implementado al servidor de producción.
+
Kanban board
+
The Kanban board used for managing ongoing work on the Kuma project.
+
Server Monitoring
+
Some of our New Relic charts
+
+
+
diff --git a/files/es/mdn_en_diez/index.html b/files/es/mdn_en_diez/index.html deleted file mode 100644 index 0e48e9e6ba..0000000000 --- a/files/es/mdn_en_diez/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: MDN en 10 -slug: MDN_en_diez -tags: - - MDN -translation_of: MDN_at_ten ---- -
Celebra 10 años documentando tu Web.
- -
-
-

La historia de MDN (Mozilla Developers Network)

- -

A principios de 2005 , un grupo pequeño de idealistas se propuso a crear una nueva, libre, comunidad en línea de recursos para todos los desarrolladores Web. Su brillante pero poco excentrica idea se convirtió en la actual Mozilla Developer Network (MDN) - el principal recurso para todas las tecnologías Web abiertas. Diez años más tarde, nuestra comunidad mundial es más grande que nunca, y juntos todavía estamos creando documentación , código de ejemplo y recursos de aprendizaje para todas las tecnologías Web abiertas, incluyendo CSS , HTML , JavaScript y todo lo demás que hace que la web abierta tan poderoso como lo es.

- -

Aprende másabout the history

- - -

Contribuyendo a MDN

- -

Por diez años, la comunidad MDN ha estado documentando la Web abierta. Desde la reparación de los errores tipográficos simples hasta escribir suites completas de una nueva API, todo el mundo tiene algo que ofrecer y ninguna contribución es demasiado grande o demasiado pequeño. Contamos con más de 90.000 páginas de contenido que se han escrito o traducidos por miembros de nuestra destacada comunidad de Mozillians . Tú puedes ser uno de ellos.

- -

Aprende másabout contributing

- -

 

- -

 

-
- -
{{TenthCampaignQuote}}
- - - -
    -
  1. MDN en 10
    2. -
  2. La historia de MDN
    3. -
  3. Contribuyendo a MDN
    4. -
-
diff --git a/files/es/mejoras_dom_en_firefox_3/index.html b/files/es/mejoras_dom_en_firefox_3/index.html deleted file mode 100644 index dcc39ab4a6..0000000000 --- a/files/es/mejoras_dom_en_firefox_3/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Mejoras DOM en Firefox 3 -slug: Mejoras_DOM_en_Firefox_3 -tags: - - DOM - - Firefox 3 - - Todas_las_Categorías -translation_of: Mozilla/Firefox/Releases/3/DOM_improvements ---- -
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

- -

Firefox 3 ofrece una serie de mejoras sobre el Modelo de Objetos del Documento (DOM), especialmente en lo que se refiere a la implementación de extensiones de DOM añadidas por otros navegadores. Este artículo proporciona una lista de estas mejoras, además de enlaces a documentación más detallada.

- - - -

Ver también

- - - -

 

- -
 
- -

{{ languages( { "en": "en/DOM_improvements_in_Firefox_3", "fr": "fr/Am\u00e9liorations_DOM_dans_Firefox_3", "ja": "ja/DOM_improvements_in_Firefox_3", "pl": "pl/Poprawki_DOM_w_Firefoksie_3" } ) }}

diff --git a/files/es/mejoras_svg_en_firefox_3/index.html b/files/es/mejoras_svg_en_firefox_3/index.html deleted file mode 100644 index 701a6640f8..0000000000 --- a/files/es/mejoras_svg_en_firefox_3/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Mejoras SVG en Firefox 3 -slug: Mejoras_SVG_en_Firefox_3 -tags: - - Firefox 3 - - SVG - - Todas_las_Categorías -translation_of: Mozilla/Firefox/Releases/3/SVG_improvements ---- -
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

- -

Firefox 3 ofrece una mejor implementación de Gráficos Vectoriales Escalables (SVG) en comparación con versiones anteriores de Firefox. Aunque estas características están documentadas en otros sitios, este artículo puede servir como una lista que indique fácilmente qué características se han añadido en Firefox 3.

- - - -

Vea también

- - - -

 

- -
 
- -

{{ languages( { "en": "en/SVG_improvements_in_Firefox_3", "fr": "fr/Am\u00e9liorations_SVG_dans_Firefox_3", "ja": "ja/SVG_improvements_in_Firefox_3", "pl": "pl/Poprawki_SVG_w_Firefoksie_3" } ) }}

diff --git a/files/es/mejoras_xul_en_firefox_3/index.html b/files/es/mejoras_xul_en_firefox_3/index.html deleted file mode 100644 index e649db326a..0000000000 --- a/files/es/mejoras_xul_en_firefox_3/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Mejoras XUL en Firefox 3 -slug: Mejoras_XUL_en_Firefox_3 -tags: - - Firefox 3 - - Todas_las_Categorías - - XUL -translation_of: Mozilla/Firefox/Releases/3/XUL_improvements_in_Firefox_3 ---- -
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

- -

Firefox 3 proporciona varios nuevos elementos XUL, además de mejoras en los elementos existentes. Aún que este material se documenta en detalle en otro lugar, este artículo ofrece una buena lista de estas mejoras así como enlaces a la documentación detallada.

- -

 

- -

Los nuevos elementos

- - - -

 

- -

Las mejoras

- -

en los árboles

- - - -

de los menús

- - - -

en las cajas de texto

- - - -

Otras mejoras

- - - -

Ver también

- - - -

 

- -

 

- -

{{ languages( { "en": "en/XUL_improvements_in_Firefox_3", "fr": "fr/Am\u00e9liorations_XUL_dans_Firefox_3", "ja": "ja/XUL_improvements_in_Firefox_3", "pl": "pl/Poprawki_XUL_w_Firefoksie_3" } ) }}

diff --git a/files/es/migrar_aplicaciones_desde_internet_explorer_a_mozilla/index.html b/files/es/migrar_aplicaciones_desde_internet_explorer_a_mozilla/index.html deleted file mode 100644 index 39b9197fd1..0000000000 --- a/files/es/migrar_aplicaciones_desde_internet_explorer_a_mozilla/index.html +++ /dev/null @@ -1,1067 +0,0 @@ ---- -title: Migrar aplicaciones desde Internet Explorer a Mozilla -slug: Migrar_aplicaciones_desde_Internet_Explorer_a_Mozilla -tags: - - Desarrollo_Web - - Todas_las_Categorías ---- -

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/modo_casi_est\303\241ndar_de_gecko/index.html" "b/files/es/modo_casi_est\303\241ndar_de_gecko/index.html" deleted file mode 100644 index 4a0f6c1c38..0000000000 --- "a/files/es/modo_casi_est\303\241ndar_de_gecko/index.html" +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Modo casi estándar de Gecko -slug: Modo_casi_estándar_de_Gecko -tags: - - Desarrollo_Web - - Estándares_Web - - Gecko - - HTML - - Todas_las_Categorías ---- -

 

-

 

-

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/mozilla/add-ons/webextensions/anatomia_de_una_webextension/index.html b/files/es/mozilla/add-ons/webextensions/anatomia_de_una_webextension/index.html deleted file mode 100644 index 685e282bf9..0000000000 --- a/files/es/mozilla/add-ons/webextensions/anatomia_de_una_webextension/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Anatomía de una extension -slug: Mozilla/Add-ons/WebExtensions/Anatomia_de_una_WebExtension -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension ---- -
{{AddonSidebar}}
- -

Una extensión se compone de una colección de archivos, empaquetados para su distribución e instalación. En este artículo vamos a repasar rápidamente los archivos que deben estar presentes en una extensión.

- -

Toda extensión debe contener un archivo llamado "manifest.json". Este puede tener enlaces a otros tipos de archivos:

- - - -

- -

manifest.json

- -

Este es el único archivo que debe estar presente en toda WebExtension. Este contiene los metadatos básicos acerca de la extensión, como su nombre, versión, y los permisos que esta requiere. También provee los enlaces a otros archivos de la extensión.

- -

Mira la página de referencia manifest.json para ver todos los detalles.

- -

Scripts en segundo plano

- -

Las extensiones a menudo necesitan mantener estados de larga duración, o ejecutar operaciones a largo plazo, independientemente del tiempo de vida de una página web en particular o las ventanas del navegador. Para eso son los scripts en segundo plano.

- -

Los scripts en segundo plano son cargados cuando la extensión es cargada y se mantienen cargados hasta que la extensión es deshabilitada o desinstalada. Tu puedes usar cualquier API de WebExtensions en el script, siempre y cuando hayas solicitado el permiso necesario.

- -

Especificando los scripts en segundo plano

- -

Puedes incluir un script en segundo plano usando la propiedad background en "manifest.json":

- -
// manifest.json
-
-"background": {
-  "scripts": ["background-script.js"]
-}
- -

Puedes especificar múltiples scripts en segundo plano: si lo haces, ellos se ejecutarán en el mismo contexto, justo como son cargados múltiples scripts en una página web.

- -

Entorno del script en segundo plano

- -

APIs del DOM

- -

Los scripts en segundo plano se ejecuta en el contexto de páginas especiales llamadas páginas en segundo plano. Esto le da un variable global window, junto con todas las APIs estándar del DOM que proporciona.

- -

No necesitas proveer tu propia página en segundo plano. Si incluyes un script en segundo plano, una página en segundo plano vacía se creará para ti.

- -

Sin embargo, puedes escoger y proveer tu página en segundo plano como un archivo HTML separado:

- -
// manifest.json
-
-"background": {
-  "page": "background-page.html"
-}
- -

APIs de WebExtension

- -

Los scripts en segundo plano pueden usar cualquier API de WebExtension en el script, siempre que tu extensión tenga los permisos necesarios.

- -

Acceso de origen cruzado

- -

Los scripts en segundo plano pueden hacer peticiones XHR a cualquier host para los cuales tienen permisos del host.

- -

Acciones del navegador

- -

Si tu extensión define una acción del navegador, y esa acción del navegador no tiene ventanas emergentes, entonces puedes escuchar los eventos "clic" del botón en el navegador empleando el objeto onClicked de las acciones del navegador:

- -
browser.browserAction.onClicked.addListener(handleClick);
- -

Contenido web

- -

Los scripts en segundo plano no tienen acceso directo a las páginas web. Sin embargo, pueden cargar scripts de contenido en páginas web, y comunicarse con esos scripts empleando la API de paso de mensajes.

- -

Políticas de segurdiad para el contendio

- -

Los scripts de segundo plano están restringidos de algunas operaciones dañinas, como el uso de eval(), a través de la  Política de Seguridad del Contenido. Vea la Política de Segurdiad del Contenido para más detalles sobre esto.

- -

Scripts de contenido

- -

Usa los scripts de contenido para acceder y manipular páginas web. Los scripts de contenido son cargados dentro de las páginas web y ejecutados en el contexto particular de esa página.

- -

Los scripts de contenido son scripts provistos por la extensión los cuales se ejecutan en el contexto de la página web; estos difieren de los scripts que son cargados por la página misma, incluye aquellos que son proporcionados en los elementos {{HTMLElement("script")}} dentro de la página.

- -

Los scripts de contenido pueden ver y manipular el DOM de las páginas, igual que los scripts cargados normalmente por la página.

- -

A diferencia de los scripts normales, ellos pueden:

- - - -

Los scripts de contenido no pueden acceder directamente a los scripts normales de una página web, pero pueden intercambiar mensajes con ellos usando la API estándar window.postMessage().

- -

Generalmente, cuando hablamos acerca de scripts de contenido, nos referimos a JavaScript, pero tu puedes inyectar CSS dentro de las páginas web empleando el mismo mecanismo.

- -

Mira el artículo scripts de contenido para aprender más.

- -

Recursos web accesibles

- -

Los recursos web accesibles son recursos como imágenes, HTML, CSS y JavaScript que tu puedes incluir en la extensión y los quieres hacer accesible a los scripts en segundo plano y los scripts de las páginas. Los recursos que son hechos accesibles desde la web pueden ser referenciados desde scripts de páginas web y scripts de contenido mediante un esquema especial de URI.

- -

Por ejemplo, si un script de contenido quiere insertar algunas imágenes dentro de páginas web, tu puedes incluirlos en la extensión y hacerlos accesibles desde la web. El script de contenido creará y añadirá las etiquetas img que referencia a las imágenes mediante el atributo src.

- -

Para aprender más, vea la documentación para la el parámetro web_accessible_resource del manifest.json.

diff --git a/files/es/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html b/files/es/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html new file mode 100644 index 0000000000..685e282bf9 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html @@ -0,0 +1,120 @@ +--- +title: Anatomía de una extension +slug: Mozilla/Add-ons/WebExtensions/Anatomia_de_una_WebExtension +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension +--- +
{{AddonSidebar}}
+ +

Una extensión se compone de una colección de archivos, empaquetados para su distribución e instalación. En este artículo vamos a repasar rápidamente los archivos que deben estar presentes en una extensión.

+ +

Toda extensión debe contener un archivo llamado "manifest.json". Este puede tener enlaces a otros tipos de archivos:

+ + + +

+ +

manifest.json

+ +

Este es el único archivo que debe estar presente en toda WebExtension. Este contiene los metadatos básicos acerca de la extensión, como su nombre, versión, y los permisos que esta requiere. También provee los enlaces a otros archivos de la extensión.

+ +

Mira la página de referencia manifest.json para ver todos los detalles.

+ +

Scripts en segundo plano

+ +

Las extensiones a menudo necesitan mantener estados de larga duración, o ejecutar operaciones a largo plazo, independientemente del tiempo de vida de una página web en particular o las ventanas del navegador. Para eso son los scripts en segundo plano.

+ +

Los scripts en segundo plano son cargados cuando la extensión es cargada y se mantienen cargados hasta que la extensión es deshabilitada o desinstalada. Tu puedes usar cualquier API de WebExtensions en el script, siempre y cuando hayas solicitado el permiso necesario.

+ +

Especificando los scripts en segundo plano

+ +

Puedes incluir un script en segundo plano usando la propiedad background en "manifest.json":

+ +
// manifest.json
+
+"background": {
+  "scripts": ["background-script.js"]
+}
+ +

Puedes especificar múltiples scripts en segundo plano: si lo haces, ellos se ejecutarán en el mismo contexto, justo como son cargados múltiples scripts en una página web.

+ +

Entorno del script en segundo plano

+ +

APIs del DOM

+ +

Los scripts en segundo plano se ejecuta en el contexto de páginas especiales llamadas páginas en segundo plano. Esto le da un variable global window, junto con todas las APIs estándar del DOM que proporciona.

+ +

No necesitas proveer tu propia página en segundo plano. Si incluyes un script en segundo plano, una página en segundo plano vacía se creará para ti.

+ +

Sin embargo, puedes escoger y proveer tu página en segundo plano como un archivo HTML separado:

+ +
// manifest.json
+
+"background": {
+  "page": "background-page.html"
+}
+ +

APIs de WebExtension

+ +

Los scripts en segundo plano pueden usar cualquier API de WebExtension en el script, siempre que tu extensión tenga los permisos necesarios.

+ +

Acceso de origen cruzado

+ +

Los scripts en segundo plano pueden hacer peticiones XHR a cualquier host para los cuales tienen permisos del host.

+ +

Acciones del navegador

+ +

Si tu extensión define una acción del navegador, y esa acción del navegador no tiene ventanas emergentes, entonces puedes escuchar los eventos "clic" del botón en el navegador empleando el objeto onClicked de las acciones del navegador:

+ +
browser.browserAction.onClicked.addListener(handleClick);
+ +

Contenido web

+ +

Los scripts en segundo plano no tienen acceso directo a las páginas web. Sin embargo, pueden cargar scripts de contenido en páginas web, y comunicarse con esos scripts empleando la API de paso de mensajes.

+ +

Políticas de segurdiad para el contendio

+ +

Los scripts de segundo plano están restringidos de algunas operaciones dañinas, como el uso de eval(), a través de la  Política de Seguridad del Contenido. Vea la Política de Segurdiad del Contenido para más detalles sobre esto.

+ +

Scripts de contenido

+ +

Usa los scripts de contenido para acceder y manipular páginas web. Los scripts de contenido son cargados dentro de las páginas web y ejecutados en el contexto particular de esa página.

+ +

Los scripts de contenido son scripts provistos por la extensión los cuales se ejecutan en el contexto de la página web; estos difieren de los scripts que son cargados por la página misma, incluye aquellos que son proporcionados en los elementos {{HTMLElement("script")}} dentro de la página.

+ +

Los scripts de contenido pueden ver y manipular el DOM de las páginas, igual que los scripts cargados normalmente por la página.

+ +

A diferencia de los scripts normales, ellos pueden:

+ + + +

Los scripts de contenido no pueden acceder directamente a los scripts normales de una página web, pero pueden intercambiar mensajes con ellos usando la API estándar window.postMessage().

+ +

Generalmente, cuando hablamos acerca de scripts de contenido, nos referimos a JavaScript, pero tu puedes inyectar CSS dentro de las páginas web empleando el mismo mecanismo.

+ +

Mira el artículo scripts de contenido para aprender más.

+ +

Recursos web accesibles

+ +

Los recursos web accesibles son recursos como imágenes, HTML, CSS y JavaScript que tu puedes incluir en la extensión y los quieres hacer accesible a los scripts en segundo plano y los scripts de las páginas. Los recursos que son hechos accesibles desde la web pueden ser referenciados desde scripts de páginas web y scripts de contenido mediante un esquema especial de URI.

+ +

Por ejemplo, si un script de contenido quiere insertar algunas imágenes dentro de páginas web, tu puedes incluirlos en la extensión y hacerlos accesibles desde la web. El script de contenido creará y añadirá las etiquetas img que referencia a las imágenes mediante el atributo src.

+ +

Para aprender más, vea la documentación para la el parámetro web_accessible_resource del manifest.json.

diff --git "a/files/es/mozilla/add-ons/webextensions/depuraci\303\263n/index.html" "b/files/es/mozilla/add-ons/webextensions/depuraci\303\263n/index.html" deleted file mode 100644 index c24f9d07f5..0000000000 --- "a/files/es/mozilla/add-ons/webextensions/depuraci\303\263n/index.html" +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: Depuración -slug: Mozilla/Add-ons/WebExtensions/Depuración -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Debugging ---- -
{{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/mozilla/add-ons/webextensions/packaging_and_installation/index.html b/files/es/mozilla/add-ons/webextensions/packaging_and_installation/index.html deleted file mode 100644 index 7718e990f3..0000000000 --- a/files/es/mozilla/add-ons/webextensions/packaging_and_installation/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Empaquetado e Instalación -slug: Mozilla/Add-ons/WebExtensions/Packaging_and_installation -translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox -translation_of_original: 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/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html b/files/es/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html deleted file mode 100644 index 58959678f4..0000000000 --- a/files/es/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Conversión de extensiones de Google Chrome -slug: Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension ---- -
{{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/mozilla/add-ons/webextensions/prerequisites/index.html b/files/es/mozilla/add-ons/webextensions/prerequisites/index.html new file mode 100644 index 0000000000..d022940dab --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/prerequisites/index.html @@ -0,0 +1,17 @@ +--- +title: Prerequisitos +slug: Mozilla/Add-ons/WebExtensions/Prerequisitos +translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites +--- +

Para desarrollar usando las APIs de WebExtension, debes seguir algunos pasos antes de comenzar.

+ + diff --git a/files/es/mozilla/add-ons/webextensions/prerequisitos/index.html b/files/es/mozilla/add-ons/webextensions/prerequisitos/index.html deleted file mode 100644 index d022940dab..0000000000 --- a/files/es/mozilla/add-ons/webextensions/prerequisitos/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Prerequisitos -slug: Mozilla/Add-ons/WebExtensions/Prerequisitos -translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites ---- -

Para desarrollar usando las APIs de WebExtension, debes seguir algunos pasos antes de comenzar.

- - diff --git a/files/es/mozilla/add-ons/webextensions/publishing_your_webextension/index.html b/files/es/mozilla/add-ons/webextensions/publishing_your_webextension/index.html deleted file mode 100644 index ef81cd0468..0000000000 --- a/files/es/mozilla/add-ons/webextensions/publishing_your_webextension/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Publicando tu extensión -slug: Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension -tags: - - AMO - - Addons - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Package_your_extension_ ---- -
{{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/mozilla/add-ons/webextensions/que_son_las_webextensions/index.html b/files/es/mozilla/add-ons/webextensions/que_son_las_webextensions/index.html deleted file mode 100644 index eca9f0ff30..0000000000 --- a/files/es/mozilla/add-ons/webextensions/que_son_las_webextensions/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: ¿Qué son las extensiones? -slug: Mozilla/Add-ons/WebExtensions/Que_son_las_WebExtensions -tags: - - WebExtensions - - extensiones -translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions ---- -
{{AddonSidebar}}
- -

Una extensión agrega características y funciones a un explorador. Se ha creado utilizando tecnologías basadas en Web conocidas: HTML, CSS y JavaScript. Puede aprovechar las mismas API Web que JavaScript en una página web, pero una extensión también tiene acceso a su propio conjunto de APIs de JavaScript. Esto significa que puede hacer mucho más en una extensión de lo que puede con el código en una página web. Estos son sólo algunos ejemplos de las cosas que puedes hacer:

- -

Mejore o complemente un sitio: Use un Add-on para ofrecer funciones adicionales en el navegador o información de su sitio Web. Permita a los usuarios recopilar detalles de las páginas que visitan para mejorar el servicio que ofrecen.

- -

- -

Ejemplos: El asistente de Amazon para Firefox, OneNote Web Clipper y Grammarly para Firefox

- -

Permita que los usuarios demuestren su personalidad: Las extensiones del navegador pueden manipular el contenido de las páginas; por ejemplo, permite a los usuarios agregar su logo favorito o imágen como un fondo de pantalla acada página que visitan. Las extensiones permiten también al usuario actualizar el aspecto de la IU de Firefox, de la misma manera que lo hacen los complementos de temas.

- -

- -

Ejemplos: MyWeb New Tab, Tabliss y VivaldiFox

- -

Agregar o quitar contenido de las páginas web: es posible que desee ayudar a los usuarios a bloquear los anuncios intrusivos de las páginas web, proporcionar acceso a una guía de viajes siempre que un país o ciudad se menciona en una página web, o reformatear el contenido de la página para ofrecer una experiencia de lectura consistente. Con la capacidad de acceder y actualizar tanto HTML como CSS de una página, las extensiones pueden ayudar a los usuarios a ver la Web de la manera que quieren.

- -

- -

Ejemplos: Origen uBlock, Lector y Caja de Herramientas para Google Play Store™

- -

Agregar herramientas y nuevas funciones de navegación: añada nuevas funciones a un taskboard o genere imágenes de código QR a partir de URLs, hipervínculos o texto de página. Con opciones de interfaz de usuario flexibles y la potencia de las APIs de WebExtensions, puede añadir fácilmente nuevas funcionalidades a un navegador. Usted puede realzar casi cualquier característica o funcionalidad de sitios web, no tiene que ser su web.

- -

- -

Ejemplos: QR Code Image Generator, Swimlanes for Trello, y Tomato Clock

- -

Juegos: ofrecer juegos de ordenador tradicionales, con características de juego fuera de línea, pero también explorar nuevas posibilidades de juego, por ejemplo, mediante la incorporación de gameplay en la navegación cotidiana.

- -

- -

Ejemplos: Asteroids in Popup, Solitaire Card Game New Tab, and 2048 Prime.

- -

Agregar herramientas de desarrollo: puede proporcionar herramientas de desarrollo web como su negocio o ha desarrollado una técnica útil o un enfoque para el desarrollo web que desea compartir. De cualquier manera, puede mejorar las herramientas de desarrollo de Firefox incorporadas añadiendo una nueva ficha a la barra de herramientas del desarrollador.

- -

- -

Ejemplos: Web Developer, Web React Developer Tools, and aXe Developer Tools

- -

Las extensiones para Firefox se construyen utilizando las APIs de WebExtensions, un sistema multi-navegador para desarrollar extensiones. En gran medida, la API es compatible con la extension API soportada por Google Chrome y Opera. Extensiones escritas para estos navegadores en la mayoría de los casos se ejecutan en Firefox o Microsoft Edge con sólo unos pocos cambios. La API es también totalmente compatible con los multiprocesos de Firefox.

- -

Si tiene ideas o preguntas, o necesita ayuda para migrar un Add-on heredado a las APIs de WebExtensions, puede comunicarse con nosotros en eldev-addons mailing list o en #extdev en IRC.

- -

¿Qué sigue?

- - diff --git a/files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html b/files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html deleted file mode 100644 index d444b69f88..0000000000 --- a/files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: Tu primera extensión -slug: Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension -tags: - - Guía - - WebExtension -translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension ---- -
{{AddonSidebar}}
- -
-

Si estás familiarizado/a con los conceptos básicos de las extensiones de navegador, omite esta sección y ve a cómo se ponen juntos los archivos. Entonces, usa la documentación de referencia para empezar a construir tu extensión. Visita el Firefox Extension Workshop para aprender más sobre el flujo de trabajo para probar y publicar extensiones para Firefox.

-
- -

En este artículo abordaremos la creación de una extensión para Firefox, desde el comienzo hasta el final. La extensión solo agrega un borde rojo a cualquiera de las páginas cargadas desde "mozilla.org" o cualquiera de sus subdominios.

- -

El código fuente de este ejemplo se encuentra en GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

- -

Primero, necesitas tener instalado Firefox versión 45 o superior.

- -

Escribiendo la extensión

- -

Crea una nuevo directorio y navega a él. Por ejemplo, en tu línea de comandos/terminal se hace de esta manera:

- -
mkdir borderify
-cd borderify
- -

manifest.json

- -

Ahora crearemos un archivo  nuevo llamado "manifest.json" directamente en la carpeta "borderify". Añádale el siguiente contenido:

- -
{
-
-  "manifest_version": 2,
-  "name": "Borderify",
-  "version": "1.0",
-
-  "description": "Agrega un borde rojo a todas las páginas web de mozilla.org.",
-
-  "icons": {
-    "48": "icons/border-48.png"
-  },
-
-  "content_scripts": [
-    {
-      "matches": ["*://*.mozilla.org/*"],
-      "js": ["borderify.js"]
-    }
-  ]
-
-}
- - - -

El parámetro más interesante aquí es content_scripts, el cual le dice a Firefox que cargue el script en las páginas Web, cuyas URL coincidan con un patrón especifico. En este caso, le estamos pidiendo a Firefox que cargue el script llamado "borderify.js" en todas las paginas HTTP o HTTPS cargadas desde "mozilla.org" o cualquiera de sus subdominios.

- - - -
-

En algunas situaciones usted necesita especificar un ID para su extensión. Si necesita especificar un ID para el complemento, incluya el parámetro applications en el manifest.json y configure la propiedad gecko.id:

- -
"applications": {
-  "gecko": {
-    "id": "borderify@example.com"
-  }
-}
-
- -

icons/border-48.png

- -

La extensión debería tener un ícono. Este se mostrará junto al listado de extensiones en el Administrador de Add-ons. Nuestro manifest.json promete que tendremos un ícono  en el directorio "icons/border-48.png".

- -

Crea el directorio "icons" dentro de la carpeta "borderify". Almacena ahí el icono y nómbralo "border-48.png". Puedes utilizar el de nuestro ejemplo, el cual se obtuvo a partir del Google Material Design iconset, y es utilizado bajo los términos de la licencia Creative Commons Attribution-ShareAlike.

- -

Si eliges emplear tu propio icono, este debe ser de 48x48 pixeles. También puedes aplicar un icono de 96x96 pixeles, para resoluciones mayores, y si haces esto, se especifica como la propiedad 96 en el objeto icons del manifest.json:

- -
"icons": {
-  "48": "icons/border-48.png",
-  "96": "icons/border-96.png"
-}
- -

Alternativamente, puedes aplicar un archivo SVG ahí, y este se escalará apropiadamente. (Aunque: si usas SVG y tu icono incluye texto, puedes usar la herramienta "convert to path" del editor SVG para aplanar el texto, de modo que se escalone con un tamaño/posición coherente).

- - - -

borderify.js

- -

Finalmente, crea un archivo de nombre "borderify.js" directamente en el directorio "borderify". Y déjale el siguiente contenido:

- -
document.body.style.border = "5px solid red";
- -

Este script se cargara en las páginas que coincidan con el patrón dado en el parámetro content_scripts del archivo manifest.json. El script tiene acceso directo al documento, de la misma manera que los scripts cargados por la propia página.

- - - -

Probándolo

- -

Primero, verifica que tienes todos los archivos en su lugar:

- -
borderify/
-    icons/
-        border-48.png
-    borderify.js
-    manifest.json
- -

Instalación

- -

Abre "about:debugging" en Firefox, da click en "Cargar complemento temporal" y selecciona cualquier archivo en el directorio de la extensión:

- -

{{EmbedYouTube("cer9EUKegG4")}}

- -

La extensión se encontrará instalada, y lo estará hasta que reinicies Firefox.

- -

Alternativamente, puede ejecuturar la extensión desde la línea de comandos utilizando la herramienta web-ext.

- -

Probando

- -

Ahora pruebe visitando una página bajo "mozilla.org", y usted verá el borde rojo alrededor de la página:

- -

{{EmbedYouTube("rxBQl2Z9IBQ")}}

- -
-

No lo intentes en addons.mozilla.org! Los scripts de contenido están actualmente bloqueados en ese dominio.

-
- -

Experimenta un poco. Edita el contenido del script para cambiar el color del borde, o haz algo más en el contenido de la página. Si actualizas el script de contenido, recarga los archivos de la extensión haciendo clic en el botón "Recargar" en about:debugging. Podrás ver los cambios en el momento:

- -

{{EmbedYouTube("NuajE60jfGY")}}

- - - -

Empaquetar y publicar

- -

Para que otras personas puedan utilizar tu extensión, necesitas empaquetarlo y enviarlo a Mozilla para que lo firmen. Para que aprendas más sobre eso, mira "Publicando tu extension".

- -

¿Qué sigue?

- -

Ahora que tienes una idea acerca del proceso de desarrollo de una WebExtension para Firefox, continúa con:

- - diff --git a/files/es/mozilla/add-ons/webextensions/tutorial/index.html b/files/es/mozilla/add-ons/webextensions/tutorial/index.html deleted file mode 100644 index 559320eca0..0000000000 --- a/files/es/mozilla/add-ons/webextensions/tutorial/index.html +++ /dev/null @@ -1,459 +0,0 @@ ---- -title: Tu segunda extensión -slug: Mozilla/Add-ons/WebExtensions/Tutorial -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension ---- -
{{AddonSidebar}}
- -

Si ya ha visto el artículo tu primer extensión, ya posee una idea de como escribir una extensión. En este artículo se escribirá una extensión ligeramente más compleja para demostrar un par de cosas más de las APIs.

- -

La extensión añade un nuevo botón a la barra de herramientas de Firefox. Cuando el usuario da clic sobre el botón, mostraremos una ventana emergente que permite escoger un animal. Una vez que un animal sea escogido, reemplazaremos todas las imágenes en la página actual con la imagen del animal seleccionado.

- -

Para implementar esto, haremos lo siguiente:

- - - -

Tu puedes notar que la estructura general de la extensión luce como esto:

- -

- -

Esta es una extensión simple, pero muestra muchos de los principales conceptos de la API WebExtensions:

- - - -

Tu puedes encontrar el código fuente completo de la extensión en GitHub.

- -

Para escribir una extensión, necesitará de Firefox 45 o más reciente.

- -

Escribiendo la extensión

- -

Crea una carpeta nueva y navega hacia ella:

- -
mkdir beastify
-cd beastify
- -

manifest.json

- -

Ahora crea un archivo llamado "manifest.json", y agrega el siguiente contenido:

- -
{
-
-  "manifest_version": 2,
-  "name": "Beastify",
-  "version": "1.0",
-
-  "description": "Agrega un icono de acción navegación a la barra de herramientas. Haga clic en el botón para elegir una bestia. El contenido del cuerpo de la pestaña activa se sustituye por una imagen de la bestia elegida. Consulte https://developer.mozilla.org/es/Add-ons/WebExtensions/Examples#beastify",
-  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
-  "icons": {
-    "48": "icons/beasts-48.png"
-  },
-
-  "permissions": [
-    "activeTab"
-  ],
-
-  "browser_action": {
-    "default_icon": "icons/beasts-32.png",
-    "default_title": "Bestificar",
-    "default_popup": "popup/choose_beast.html"
-  },
-
-  "web_accessible_resources": [
-    "beasts/frog.jpg",
-    "beasts/turtle.jpg",
-    "beasts/snake.jpg"
-  ]
-
-}
-
- - - -

Nota que todas las rutas dadas son relativas a manifest.json.

- -

El ícono

- -

La extensión debería tener un íncono. Éste, será mostrado junto a la lista de complementos en el Administrador de Complementos (Pude abrirlo introduciendo en la URL "about:addons"). El manifest.json promete que se posee un ícono para la barra de herramientas en "icons/beasts-48.png".

- -

Cree el directorio "icons" y guarde un ícono ahí y nómbrelo como "beasts-48.png".  Puede utilizar uno de nuestro ejemplo, el cual ha sido tomado del  conjuto de íconos Aha-Soft’s Free Retina, que es utilizado bajo el término de su propia licencia.

- -

Si elige proporcionar su propio ícono, debería ser de 48x48 pixeles. También puede proporcionar un ícono de 96x96 pixeles, para pantallas de altas resoluciones y, si usted hace esto, deberá especificarlo como la propiedad 96 del objeto icons en el manifest.json:

- -
"icons": {
-  "48": "icons/beasts-48.png",
-  "96": "icons/beasts-96.png"
-}
- -

El botón de la barra de herramientas

- -

El botón de la barra de herramientas necesita un ícono, y nuestro manifest.json promete eso y nos gustaría tener un ícono para la barra de herramientas en "icons/beasts-32.png".

- -

Guarde un ícono llamado "beasts-32.png" en el directorio "icons". Tu podrías usar uno de nuestros ejemplos, los cuales son tomados desde el sitio IconBeast Lite icon set y empleados bajo sus términos de licencia.

- -

Si tu no provees una ventana emergente, entonces el evento clic es disparado hacia tu extensión cuando el usuario de clic sobre el botón. Si provees una ventana emergente entonces el evento clic no se disparará, pero en cambio, se muestra la ventana emergente. Nosotros queremos una ventana emergente, así que vamos a crearla.

- -

La ventana emergente

- -

La función de la ventana emergente es habilitada si el usuario escoge una de los tres animales.

- -

Crea una nueva carpeta llamada "popup" bajo la carpeta raíz de la extensión . Esta será donde pondremos el código para la ventana emergente. La carpeta "popup" contendrá estos tres archivos:

- - - -

choose_beast.html

- -

El archivo HTML luce así:

- -
<!DOCTYPE html>
-
-<html>
-  <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="choose_beast.css"/>
-  </head>
-
-<body>
-  <div id="popup-content">
-    <div class="button beast">Frog</div>
-    <div class="button beast">Turtle</div>
-    <div class="button beast">Snake</div>
-    <div class="button reset">Reset</div>
-  </div>
-  <div id="error-content" class="hidden">
-    <p>Can't beastify this web page.</p><p>Try a different page.</p>
-  </div>
-  <script src="choose_beast.js"></script>
-</body>
-
-</html>
- -

Tenemos un elemento <div> con un ID "popup-content" que contiene un elemento para cada elección de animal. Además, tenemos otro <div> con un ID "error-content" y una clase "hidden", que usaremos en el case de que surja algún problema al inicializar la ventana emergente.

- -

Note que referenciamos los archivos CSS y JS en el HTML como lo haríamos si se tratase de una página web.

- -

choose_beast.css

- -

El CSS ajusta el tamaño de la ventana emergente, se asegura que las tres posibles opciones llenen el espacio y les da un poco de estilo básico. Además oculta los elementos con class="hidden": esto significa que nuestro "error-content" <div> estará oculto por defecto.

- -
html, body {
-  width: 100px;
-}
-
-.hidden {
-  display: none;
-}
-
-.button {
-  margin: 3% auto;
-  padding: 4px;
-  text-align: center;
-  font-size: 1.5em;
-  cursor: pointer;
-}
-
-.beast:hover {
-  background-color: #CFF2F2;
-}
-
-.beast {
-  background-color: #E5F2F2;
-}
-
-.reset {
-  background-color: #FBFBC9;
-}
-
-.reset:hover {
-  background-color: #EAEA9D;
-}
- -

choose_beast.js

- -

Aquí está el JavaScript para la ventana emergente:

- -
/**
- * CSS para ocultar toda la página
- * Excepto los elementos que pertenecen a la clase "beastify-image".
- */
-const hidePage = `body > :not(.beastify-image) {
-                    display: none;
-                  }`;
-
-/**
- * Esucha los clicks en los botones y envía el mensaje apropiado
- * al script de contenido de la página.
- */
-function listenForClicks() {
-  document.addEventListener("click", (e) => {
-
-    /**
-     * Recibe el nombre de una bestia y obtiene la URL de la imagen correspondiente.
-     */
-    function beastNameToURL(beastName) {
-      switch (beastName) {
-        case "Frog":
-          return browser.extension.getURL("beasts/frog.jpg");
-        case "Snake":
-          return browser.extension.getURL("beasts/snake.jpg");
-        case "Turtle":
-          return browser.extension.getURL("beasts/turtle.jpg");
-      }
-    }
-
-    /**
-     * Inserta dentro de la pestaña activa el CSS que oculta la página
-     * luego toma la URL de la imagen y
-     * envía un mensaje "beastify" al script de contenido de la pestaña activa.
-     */
-    function beastify(tabs) {
-      browser.tabs.insertCSS({code: hidePage}).then(() => {
-        let url = beastNameToURL(e.target.textContent);
-        browser.tabs.sendMessage(tabs[0].id, {
-          command: "beastify",
-          beastURL: url
-        });
-      });
-    }
-
-    /**
-     * Remueve el CSS que oculta la página y
-     * envía un mensaje de "reset" al script de contenido de la pestaña activa.
-     */
-    function reset(tabs) {
-      browser.tabs.removeCSS({code: hidePage}).then(() => {
-        browser.tabs.sendMessage(tabs[0].id, {
-          command: "reset",
-        });
-      });
-    }
-
-    /**
-     * Imprime el error en consola.
-     */
-    function reportError(error) {
-      console.error(`Could not beastify: ${error}`);
-    }
-
-    /**
-     * Toma la pestaña activa y
-     * llama a "beastify()" o "reset()" según corresponda.
-     */
-    if (e.target.classList.contains("beast")) {
-      browser.tabs.query({active: true, currentWindow: true})
-        .then(beastify)
-        .catch(reportError);
-    }
-    else if (e.target.classList.contains("reset")) {
-      browser.tabs.query({active: true, currentWindow: true})
-        .then(reset)
-        .catch(reportError);
-    }
-  });
-}
-
-/**
- * Si hubo algún error al ejecutar el script,
- * Despliega un popup con el mensaje de error y oculta la UI normal.
- */
-function reportExecuteScriptError(error) {
-  document.querySelector("#popup-content").classList.add("hidden");
-  document.querySelector("#error-content").classList.remove("hidden");
-  console.error(`Failed to execute beastify content script: ${error.message}`);
-}
-
-/**
- * Cuando se carga la ventana emergente, inyecta el script de contenido en la pestaña activa,
- * y agrega un manejador de eventos.
- * Si no es posible inyectar el script, se ocupa de manejar el error.
- */
-browser.tabs.executeScript({file: "/content_scripts/beastify.js"})
-.then(listenForClicks)
-.catch(reportExecuteScriptError);
- -

Empecemos por la linea 96. La ventana emergente ejecuta un script de contenido en la pestaña activa tan pronto como se termina de cargar, usando la API browser.tabs.executeScript(). Si la ejecución del script de contenido es exitosa, este quedará cargado en la página hasta que sea cerrada la pestaña o hasta que el usuario navegue hacia una página distinta.

- -
-

Un motivo común por el cual el llamado a browser.tabs.executeScript() puede fallar, es porque no es posible ejecutar scripts de contenido en todas las páginas, por ejemplo, en páginas de navegador privilegiadas como about:debugging, o páginas del dominio addons.mozilla.org, no es posible hacerlo.

-
- -

Si la ejecución falla, reportExecuteScriptError() ocultará el <div> "popup-content", mostrará el <div> "error-content", y reportará el error en la consola.

- -

Si la ejecución del script de contenido es exitosa, se llamará a listenForClicks(), que atiende los eventos que se generan al cliquear en la ventana emergente.

- - - -

La función beastify() hace tres cosas:

- - - -

La función reset() deshace lo hecho por beastify():

- - - -

El script de contenido

- -

Crea una carpeta nueva bajo la raíz del complemento llamada "content_scripts" y crea un nuevo archivo en ella llamado "beastify.js", con el contenido siguiente:

- -
(function() {
-  /**
-   * Revisa e inicializa una variable de guardia.
-   * Si este script de contenido es insertado más de una vez
-   * en la misma página, dejará de ejecutarse.
-   */
-  if (window.hasRun) {
-    return;
-  }
-  window.hasRun = true;
-
-/**
-* Recibe la URL de la imagen, remueve las que se hayan agregado antes,
-* crea un nodo IMG que apunt hacia la imagen
-* e inserta ese nodo en el documento.
-*/
-  function insertBeast(beastURL) {
-    removeExistingBeasts();
-    let beastImage = document.createElement("img");
-    beastImage.setAttribute("src", beastURL);
-    beastImage.style.height = "100vh";
-    beastImage.className = "beastify-image";
-    document.body.appendChild(beastImage);
-  }
-
-  /**
-   * Remueve todas las bestias de la página.
-   */
-  function removeExistingBeasts() {
-    let existingBeasts = document.querySelectorAll(".beastify-image");
-    for (let beast of existingBeasts) {
-      beast.remove();
-    }
-  }
-
-  /**
-   * Atiende mensajes del script de segundo plano.
-   * Llama a "beastify()" o "reset()".
-  */
-  browser.runtime.onMessage.addListener((message) => {
-    if (message.command === "beastify") {
-      insertBeast(message.beastURL);
-    } else if (message.command === "reset") {
-      removeExistingBeasts();
-    }
-  });
-
-})();
- -

Lo primero que hace el script de contenido es revisar la variable global window.hasRun: si está inicializada termina su ejecución, sino, la inicializa y continúa. La razón por la que hacemos esto es porque cada vez que el usuario abre la ventana emergente, se vuelve a ejecutar el script de contenido en la pestaña activa, por lo que podríamos tener múltiples instancias del script ejecutandose en una sola pestaña. Si esto sucede, necesitamos asegurarnos de que sea sólo la primera instancia la que vaya a realizar cambios.

- -

Luego, en la linea 40, donde el script de contenido atiende mensajes provenientes de la ventana emergente (usando la API browser.runtime.onMessage), vemos que ésta puede enviar dos mensajes diferentes: "beastify" y "reset".

- - - -

Las bestias

- -

Finalmente, necesitamos incluir las imágenes de los animales.

- -

Crea una carpeta nueva llamada "beasts", y adiciona tres imágenes en ella, con su nombre apropiado. Tu puedes obtener estas imágenes desde el repositorio en GitHub, o desde aquí:

- -

- -

Probándolo

- -

Primero, comprueba nuevamente que tienes todos los archivos necesarios en el lugar adecuado:

- -
beastify/
-
-    beasts/
-        frog.jpg
-        snake.jpg
-        turtle.jpg
-
-    content_scripts/
-        beastify.js
-
-    icons/
-        beasts-32.png
-        beasts-48.png
-
-    popup/
-        choose_beast.css
-        choose_beast.html
-        choose_beast.js
-
-    manifest.json
- -

Comenzando con Firefox 45, pueden instalar temporalmente una extensión desde el disco.

- -

Abre "about:debugging" en Firefox, de clic en "Cargar complemento temporalmente", y seleccione el archivo manifest.json. Entonces, debería de ver el ícono de la extensión aparecer en la barra de herramientas de Firefox:

- -

{{EmbedYouTube("sAM78GU4P34")}}

- -

Abra una página web, luego haga clic sobre el ícono, seleccione una bestia, y vea cómo cambia la página web:

- -

{{EmbedYouTube("YMQXyAQSiE8")}}

- -

Desarrollo desde la línea de comandos

- -
-
-
 
- -

Puede automatizar el paso de instalación temporal mediante la herramienta web-ext. Pruebe esto:

-
-
- -
cd beastify
-web-ext run
- -

 

diff --git a/files/es/mozilla/add-ons/webextensions/user_interface/accion_navegador/index.html b/files/es/mozilla/add-ons/webextensions/user_interface/accion_navegador/index.html deleted file mode 100644 index 55ce89a9c7..0000000000 --- a/files/es/mozilla/add-ons/webextensions/user_interface/accion_navegador/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Botón de la Barra de Herramientas -slug: Mozilla/Add-ons/WebExtensions/user_interface/Accion_navegador -tags: - - WebExtension -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action ---- -
{{AddonSidebar}}
- -

Generalmente referidas como acciones de navegador, esta opción de interfaz de usuario corresponde a un botón agregado a la barra de herramientas del navegador. Los usuarios pueden hacer click en el botón para interactuar con tu extensión.
-

- -

El botón de la barra de herramientas (acción de navegador) es muy parecido al botón de la barra de direcciones (acción de página). Para conocer las diferencias y obtener consejo en cuándo usar qué tipo de botón, te recomendamos ver Acciones de página y acciones de navegador.

- -

Especificando la acción de navegador

- -

Puedes definir las propiedades de la acción de navegador utilizando la llave browser_action del archivo manifest.json:

- -
"browser_action": {
-  "default_icon": {
-    "19": "button/geo-19.png",
-    "38": "button/geo-38.png"
-  },
-  "default_title": "Whereami?"
-}
- -

El único campo obligatorio es default_icon.

- -

Existen dos formas de especificar una acción de navegador: con o sin una ventana emergente. Si no especificas una ventana emergente, se le entregará un evento a la extensión cada vez que el usuario haga click en el botón. El evento es escuchable usando browserAction.onClicked:

- -
browser.browserAction.onClicked.addListener(handleClick);
- -

En cambio, si especificas una ventana emergente, el evento de click no es despachado al hacer click en el botón: en su lugar, la ventana emergente es mostrada. El usuario podrá interactuar con la ventana emergente, la cual se cerrará automáticamente cada vez que el usuario haga click fuera de ella. Te recomendamos revisar el artículo de ventanas emergentes para conocer más detalles sobre la creación y administración de éstas.

- -

Cabe destacar que tu extensión puede tener solamente una acción de navegador.

- -

Puedes cambiar cualquier propiedad de la acción de navegador de forma programática, utilizando la API browserAction.

- -

Íconos

- -

Para más detalles sobre cómo crear íconos para usarlos en tu acción de navegador, revisa Iconografía en la documentación del Sistema de Diseño Photon.

- -

Ejemplos

- -

El repositorio de GitHub webextensions-examples contiene dos ejemplos de extensiones que implementan acciones de navegador:

- - diff --git a/files/es/mozilla/add-ons/webextensions/user_interface/browser_action/index.html b/files/es/mozilla/add-ons/webextensions/user_interface/browser_action/index.html new file mode 100644 index 0000000000..55ce89a9c7 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/user_interface/browser_action/index.html @@ -0,0 +1,50 @@ +--- +title: Botón de la Barra de Herramientas +slug: Mozilla/Add-ons/WebExtensions/user_interface/Accion_navegador +tags: + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action +--- +
{{AddonSidebar}}
+ +

Generalmente referidas como acciones de navegador, esta opción de interfaz de usuario corresponde a un botón agregado a la barra de herramientas del navegador. Los usuarios pueden hacer click en el botón para interactuar con tu extensión.
+

+ +

El botón de la barra de herramientas (acción de navegador) es muy parecido al botón de la barra de direcciones (acción de página). Para conocer las diferencias y obtener consejo en cuándo usar qué tipo de botón, te recomendamos ver Acciones de página y acciones de navegador.

+ +

Especificando la acción de navegador

+ +

Puedes definir las propiedades de la acción de navegador utilizando la llave browser_action del archivo manifest.json:

+ +
"browser_action": {
+  "default_icon": {
+    "19": "button/geo-19.png",
+    "38": "button/geo-38.png"
+  },
+  "default_title": "Whereami?"
+}
+ +

El único campo obligatorio es default_icon.

+ +

Existen dos formas de especificar una acción de navegador: con o sin una ventana emergente. Si no especificas una ventana emergente, se le entregará un evento a la extensión cada vez que el usuario haga click en el botón. El evento es escuchable usando browserAction.onClicked:

+ +
browser.browserAction.onClicked.addListener(handleClick);
+ +

En cambio, si especificas una ventana emergente, el evento de click no es despachado al hacer click en el botón: en su lugar, la ventana emergente es mostrada. El usuario podrá interactuar con la ventana emergente, la cual se cerrará automáticamente cada vez que el usuario haga click fuera de ella. Te recomendamos revisar el artículo de ventanas emergentes para conocer más detalles sobre la creación y administración de éstas.

+ +

Cabe destacar que tu extensión puede tener solamente una acción de navegador.

+ +

Puedes cambiar cualquier propiedad de la acción de navegador de forma programática, utilizando la API browserAction.

+ +

Íconos

+ +

Para más detalles sobre cómo crear íconos para usarlos en tu acción de navegador, revisa Iconografía en la documentación del Sistema de Diseño Photon.

+ +

Ejemplos

+ +

El repositorio de GitHub webextensions-examples contiene dos ejemplos de extensiones que implementan acciones de navegador:

+ + diff --git a/files/es/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/es/mozilla/add-ons/webextensions/what_are_webextensions/index.html new file mode 100644 index 0000000000..eca9f0ff30 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -0,0 +1,59 @@ +--- +title: ¿Qué son las extensiones? +slug: Mozilla/Add-ons/WebExtensions/Que_son_las_WebExtensions +tags: + - WebExtensions + - extensiones +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +
{{AddonSidebar}}
+ +

Una extensión agrega características y funciones a un explorador. Se ha creado utilizando tecnologías basadas en Web conocidas: HTML, CSS y JavaScript. Puede aprovechar las mismas API Web que JavaScript en una página web, pero una extensión también tiene acceso a su propio conjunto de APIs de JavaScript. Esto significa que puede hacer mucho más en una extensión de lo que puede con el código en una página web. Estos son sólo algunos ejemplos de las cosas que puedes hacer:

+ +

Mejore o complemente un sitio: Use un Add-on para ofrecer funciones adicionales en el navegador o información de su sitio Web. Permita a los usuarios recopilar detalles de las páginas que visitan para mejorar el servicio que ofrecen.

+ +

+ +

Ejemplos: El asistente de Amazon para Firefox, OneNote Web Clipper y Grammarly para Firefox

+ +

Permita que los usuarios demuestren su personalidad: Las extensiones del navegador pueden manipular el contenido de las páginas; por ejemplo, permite a los usuarios agregar su logo favorito o imágen como un fondo de pantalla acada página que visitan. Las extensiones permiten también al usuario actualizar el aspecto de la IU de Firefox, de la misma manera que lo hacen los complementos de temas.

+ +

+ +

Ejemplos: MyWeb New Tab, Tabliss y VivaldiFox

+ +

Agregar o quitar contenido de las páginas web: es posible que desee ayudar a los usuarios a bloquear los anuncios intrusivos de las páginas web, proporcionar acceso a una guía de viajes siempre que un país o ciudad se menciona en una página web, o reformatear el contenido de la página para ofrecer una experiencia de lectura consistente. Con la capacidad de acceder y actualizar tanto HTML como CSS de una página, las extensiones pueden ayudar a los usuarios a ver la Web de la manera que quieren.

+ +

+ +

Ejemplos: Origen uBlock, Lector y Caja de Herramientas para Google Play Store™

+ +

Agregar herramientas y nuevas funciones de navegación: añada nuevas funciones a un taskboard o genere imágenes de código QR a partir de URLs, hipervínculos o texto de página. Con opciones de interfaz de usuario flexibles y la potencia de las APIs de WebExtensions, puede añadir fácilmente nuevas funcionalidades a un navegador. Usted puede realzar casi cualquier característica o funcionalidad de sitios web, no tiene que ser su web.

+ +

+ +

Ejemplos: QR Code Image Generator, Swimlanes for Trello, y Tomato Clock

+ +

Juegos: ofrecer juegos de ordenador tradicionales, con características de juego fuera de línea, pero también explorar nuevas posibilidades de juego, por ejemplo, mediante la incorporación de gameplay en la navegación cotidiana.

+ +

+ +

Ejemplos: Asteroids in Popup, Solitaire Card Game New Tab, and 2048 Prime.

+ +

Agregar herramientas de desarrollo: puede proporcionar herramientas de desarrollo web como su negocio o ha desarrollado una técnica útil o un enfoque para el desarrollo web que desea compartir. De cualquier manera, puede mejorar las herramientas de desarrollo de Firefox incorporadas añadiendo una nueva ficha a la barra de herramientas del desarrollador.

+ +

+ +

Ejemplos: Web Developer, Web React Developer Tools, and aXe Developer Tools

+ +

Las extensiones para Firefox se construyen utilizando las APIs de WebExtensions, un sistema multi-navegador para desarrollar extensiones. En gran medida, la API es compatible con la extension API soportada por Google Chrome y Opera. Extensiones escritas para estos navegadores en la mayoría de los casos se ejecutan en Firefox o Microsoft Edge con sólo unos pocos cambios. La API es también totalmente compatible con los multiprocesos de Firefox.

+ +

Si tiene ideas o preguntas, o necesita ayuda para migrar un Add-on heredado a las APIs de WebExtensions, puede comunicarse con nosotros en eldev-addons mailing list o en #extdev en IRC.

+ +

¿Qué sigue?

+ + diff --git a/files/es/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/es/mozilla/add-ons/webextensions/your_first_webextension/index.html new file mode 100644 index 0000000000..d444b69f88 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -0,0 +1,160 @@ +--- +title: Tu primera extensión +slug: Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension +tags: + - Guía + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +
{{AddonSidebar}}
+ +
+

Si estás familiarizado/a con los conceptos básicos de las extensiones de navegador, omite esta sección y ve a cómo se ponen juntos los archivos. Entonces, usa la documentación de referencia para empezar a construir tu extensión. Visita el Firefox Extension Workshop para aprender más sobre el flujo de trabajo para probar y publicar extensiones para Firefox.

+
+ +

En este artículo abordaremos la creación de una extensión para Firefox, desde el comienzo hasta el final. La extensión solo agrega un borde rojo a cualquiera de las páginas cargadas desde "mozilla.org" o cualquiera de sus subdominios.

+ +

El código fuente de este ejemplo se encuentra en GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

+ +

Primero, necesitas tener instalado Firefox versión 45 o superior.

+ +

Escribiendo la extensión

+ +

Crea una nuevo directorio y navega a él. Por ejemplo, en tu línea de comandos/terminal se hace de esta manera:

+ +
mkdir borderify
+cd borderify
+ +

manifest.json

+ +

Ahora crearemos un archivo  nuevo llamado "manifest.json" directamente en la carpeta "borderify". Añádale el siguiente contenido:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Borderify",
+  "version": "1.0",
+
+  "description": "Agrega un borde rojo a todas las páginas web de mozilla.org.",
+
+  "icons": {
+    "48": "icons/border-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}
+ + + +

El parámetro más interesante aquí es content_scripts, el cual le dice a Firefox que cargue el script en las páginas Web, cuyas URL coincidan con un patrón especifico. En este caso, le estamos pidiendo a Firefox que cargue el script llamado "borderify.js" en todas las paginas HTTP o HTTPS cargadas desde "mozilla.org" o cualquiera de sus subdominios.

+ + + +
+

En algunas situaciones usted necesita especificar un ID para su extensión. Si necesita especificar un ID para el complemento, incluya el parámetro applications en el manifest.json y configure la propiedad gecko.id:

+ +
"applications": {
+  "gecko": {
+    "id": "borderify@example.com"
+  }
+}
+
+ +

icons/border-48.png

+ +

La extensión debería tener un ícono. Este se mostrará junto al listado de extensiones en el Administrador de Add-ons. Nuestro manifest.json promete que tendremos un ícono  en el directorio "icons/border-48.png".

+ +

Crea el directorio "icons" dentro de la carpeta "borderify". Almacena ahí el icono y nómbralo "border-48.png". Puedes utilizar el de nuestro ejemplo, el cual se obtuvo a partir del Google Material Design iconset, y es utilizado bajo los términos de la licencia Creative Commons Attribution-ShareAlike.

+ +

Si eliges emplear tu propio icono, este debe ser de 48x48 pixeles. También puedes aplicar un icono de 96x96 pixeles, para resoluciones mayores, y si haces esto, se especifica como la propiedad 96 en el objeto icons del manifest.json:

+ +
"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}
+ +

Alternativamente, puedes aplicar un archivo SVG ahí, y este se escalará apropiadamente. (Aunque: si usas SVG y tu icono incluye texto, puedes usar la herramienta "convert to path" del editor SVG para aplanar el texto, de modo que se escalone con un tamaño/posición coherente).

+ + + +

borderify.js

+ +

Finalmente, crea un archivo de nombre "borderify.js" directamente en el directorio "borderify". Y déjale el siguiente contenido:

+ +
document.body.style.border = "5px solid red";
+ +

Este script se cargara en las páginas que coincidan con el patrón dado en el parámetro content_scripts del archivo manifest.json. El script tiene acceso directo al documento, de la misma manera que los scripts cargados por la propia página.

+ + + +

Probándolo

+ +

Primero, verifica que tienes todos los archivos en su lugar:

+ +
borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json
+ +

Instalación

+ +

Abre "about:debugging" en Firefox, da click en "Cargar complemento temporal" y selecciona cualquier archivo en el directorio de la extensión:

+ +

{{EmbedYouTube("cer9EUKegG4")}}

+ +

La extensión se encontrará instalada, y lo estará hasta que reinicies Firefox.

+ +

Alternativamente, puede ejecuturar la extensión desde la línea de comandos utilizando la herramienta web-ext.

+ +

Probando

+ +

Ahora pruebe visitando una página bajo "mozilla.org", y usted verá el borde rojo alrededor de la página:

+ +

{{EmbedYouTube("rxBQl2Z9IBQ")}}

+ +
+

No lo intentes en addons.mozilla.org! Los scripts de contenido están actualmente bloqueados en ese dominio.

+
+ +

Experimenta un poco. Edita el contenido del script para cambiar el color del borde, o haz algo más en el contenido de la página. Si actualizas el script de contenido, recarga los archivos de la extensión haciendo clic en el botón "Recargar" en about:debugging. Podrás ver los cambios en el momento:

+ +

{{EmbedYouTube("NuajE60jfGY")}}

+ + + +

Empaquetar y publicar

+ +

Para que otras personas puedan utilizar tu extensión, necesitas empaquetarlo y enviarlo a Mozilla para que lo firmen. Para que aprendas más sobre eso, mira "Publicando tu extension".

+ +

¿Qué sigue?

+ +

Ahora que tienes una idea acerca del proceso de desarrollo de una WebExtension para Firefox, continúa con:

+ + diff --git a/files/es/mozilla/add-ons/webextensions/your_second_webextension/index.html b/files/es/mozilla/add-ons/webextensions/your_second_webextension/index.html new file mode 100644 index 0000000000..559320eca0 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/your_second_webextension/index.html @@ -0,0 +1,459 @@ +--- +title: Tu segunda extensión +slug: Mozilla/Add-ons/WebExtensions/Tutorial +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +--- +
{{AddonSidebar}}
+ +

Si ya ha visto el artículo tu primer extensión, ya posee una idea de como escribir una extensión. En este artículo se escribirá una extensión ligeramente más compleja para demostrar un par de cosas más de las APIs.

+ +

La extensión añade un nuevo botón a la barra de herramientas de Firefox. Cuando el usuario da clic sobre el botón, mostraremos una ventana emergente que permite escoger un animal. Una vez que un animal sea escogido, reemplazaremos todas las imágenes en la página actual con la imagen del animal seleccionado.

+ +

Para implementar esto, haremos lo siguiente:

+ + + +

Tu puedes notar que la estructura general de la extensión luce como esto:

+ +

+ +

Esta es una extensión simple, pero muestra muchos de los principales conceptos de la API WebExtensions:

+ + + +

Tu puedes encontrar el código fuente completo de la extensión en GitHub.

+ +

Para escribir una extensión, necesitará de Firefox 45 o más reciente.

+ +

Escribiendo la extensión

+ +

Crea una carpeta nueva y navega hacia ella:

+ +
mkdir beastify
+cd beastify
+ +

manifest.json

+ +

Ahora crea un archivo llamado "manifest.json", y agrega el siguiente contenido:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Beastify",
+  "version": "1.0",
+
+  "description": "Agrega un icono de acción navegación a la barra de herramientas. Haga clic en el botón para elegir una bestia. El contenido del cuerpo de la pestaña activa se sustituye por una imagen de la bestia elegida. Consulte https://developer.mozilla.org/es/Add-ons/WebExtensions/Examples#beastify",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
+  "icons": {
+    "48": "icons/beasts-48.png"
+  },
+
+  "permissions": [
+    "activeTab"
+  ],
+
+  "browser_action": {
+    "default_icon": "icons/beasts-32.png",
+    "default_title": "Bestificar",
+    "default_popup": "popup/choose_beast.html"
+  },
+
+  "web_accessible_resources": [
+    "beasts/frog.jpg",
+    "beasts/turtle.jpg",
+    "beasts/snake.jpg"
+  ]
+
+}
+
+ + + +

Nota que todas las rutas dadas son relativas a manifest.json.

+ +

El ícono

+ +

La extensión debería tener un íncono. Éste, será mostrado junto a la lista de complementos en el Administrador de Complementos (Pude abrirlo introduciendo en la URL "about:addons"). El manifest.json promete que se posee un ícono para la barra de herramientas en "icons/beasts-48.png".

+ +

Cree el directorio "icons" y guarde un ícono ahí y nómbrelo como "beasts-48.png".  Puede utilizar uno de nuestro ejemplo, el cual ha sido tomado del  conjuto de íconos Aha-Soft’s Free Retina, que es utilizado bajo el término de su propia licencia.

+ +

Si elige proporcionar su propio ícono, debería ser de 48x48 pixeles. También puede proporcionar un ícono de 96x96 pixeles, para pantallas de altas resoluciones y, si usted hace esto, deberá especificarlo como la propiedad 96 del objeto icons en el manifest.json:

+ +
"icons": {
+  "48": "icons/beasts-48.png",
+  "96": "icons/beasts-96.png"
+}
+ +

El botón de la barra de herramientas

+ +

El botón de la barra de herramientas necesita un ícono, y nuestro manifest.json promete eso y nos gustaría tener un ícono para la barra de herramientas en "icons/beasts-32.png".

+ +

Guarde un ícono llamado "beasts-32.png" en el directorio "icons". Tu podrías usar uno de nuestros ejemplos, los cuales son tomados desde el sitio IconBeast Lite icon set y empleados bajo sus términos de licencia.

+ +

Si tu no provees una ventana emergente, entonces el evento clic es disparado hacia tu extensión cuando el usuario de clic sobre el botón. Si provees una ventana emergente entonces el evento clic no se disparará, pero en cambio, se muestra la ventana emergente. Nosotros queremos una ventana emergente, así que vamos a crearla.

+ +

La ventana emergente

+ +

La función de la ventana emergente es habilitada si el usuario escoge una de los tres animales.

+ +

Crea una nueva carpeta llamada "popup" bajo la carpeta raíz de la extensión . Esta será donde pondremos el código para la ventana emergente. La carpeta "popup" contendrá estos tres archivos:

+ + + +

choose_beast.html

+ +

El archivo HTML luce así:

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="choose_beast.css"/>
+  </head>
+
+<body>
+  <div id="popup-content">
+    <div class="button beast">Frog</div>
+    <div class="button beast">Turtle</div>
+    <div class="button beast">Snake</div>
+    <div class="button reset">Reset</div>
+  </div>
+  <div id="error-content" class="hidden">
+    <p>Can't beastify this web page.</p><p>Try a different page.</p>
+  </div>
+  <script src="choose_beast.js"></script>
+</body>
+
+</html>
+ +

Tenemos un elemento <div> con un ID "popup-content" que contiene un elemento para cada elección de animal. Además, tenemos otro <div> con un ID "error-content" y una clase "hidden", que usaremos en el case de que surja algún problema al inicializar la ventana emergente.

+ +

Note que referenciamos los archivos CSS y JS en el HTML como lo haríamos si se tratase de una página web.

+ +

choose_beast.css

+ +

El CSS ajusta el tamaño de la ventana emergente, se asegura que las tres posibles opciones llenen el espacio y les da un poco de estilo básico. Además oculta los elementos con class="hidden": esto significa que nuestro "error-content" <div> estará oculto por defecto.

+ +
html, body {
+  width: 100px;
+}
+
+.hidden {
+  display: none;
+}
+
+.button {
+  margin: 3% auto;
+  padding: 4px;
+  text-align: center;
+  font-size: 1.5em;
+  cursor: pointer;
+}
+
+.beast:hover {
+  background-color: #CFF2F2;
+}
+
+.beast {
+  background-color: #E5F2F2;
+}
+
+.reset {
+  background-color: #FBFBC9;
+}
+
+.reset:hover {
+  background-color: #EAEA9D;
+}
+ +

choose_beast.js

+ +

Aquí está el JavaScript para la ventana emergente:

+ +
/**
+ * CSS para ocultar toda la página
+ * Excepto los elementos que pertenecen a la clase "beastify-image".
+ */
+const hidePage = `body > :not(.beastify-image) {
+                    display: none;
+                  }`;
+
+/**
+ * Esucha los clicks en los botones y envía el mensaje apropiado
+ * al script de contenido de la página.
+ */
+function listenForClicks() {
+  document.addEventListener("click", (e) => {
+
+    /**
+     * Recibe el nombre de una bestia y obtiene la URL de la imagen correspondiente.
+     */
+    function beastNameToURL(beastName) {
+      switch (beastName) {
+        case "Frog":
+          return browser.extension.getURL("beasts/frog.jpg");
+        case "Snake":
+          return browser.extension.getURL("beasts/snake.jpg");
+        case "Turtle":
+          return browser.extension.getURL("beasts/turtle.jpg");
+      }
+    }
+
+    /**
+     * Inserta dentro de la pestaña activa el CSS que oculta la página
+     * luego toma la URL de la imagen y
+     * envía un mensaje "beastify" al script de contenido de la pestaña activa.
+     */
+    function beastify(tabs) {
+      browser.tabs.insertCSS({code: hidePage}).then(() => {
+        let url = beastNameToURL(e.target.textContent);
+        browser.tabs.sendMessage(tabs[0].id, {
+          command: "beastify",
+          beastURL: url
+        });
+      });
+    }
+
+    /**
+     * Remueve el CSS que oculta la página y
+     * envía un mensaje de "reset" al script de contenido de la pestaña activa.
+     */
+    function reset(tabs) {
+      browser.tabs.removeCSS({code: hidePage}).then(() => {
+        browser.tabs.sendMessage(tabs[0].id, {
+          command: "reset",
+        });
+      });
+    }
+
+    /**
+     * Imprime el error en consola.
+     */
+    function reportError(error) {
+      console.error(`Could not beastify: ${error}`);
+    }
+
+    /**
+     * Toma la pestaña activa y
+     * llama a "beastify()" o "reset()" según corresponda.
+     */
+    if (e.target.classList.contains("beast")) {
+      browser.tabs.query({active: true, currentWindow: true})
+        .then(beastify)
+        .catch(reportError);
+    }
+    else if (e.target.classList.contains("reset")) {
+      browser.tabs.query({active: true, currentWindow: true})
+        .then(reset)
+        .catch(reportError);
+    }
+  });
+}
+
+/**
+ * Si hubo algún error al ejecutar el script,
+ * Despliega un popup con el mensaje de error y oculta la UI normal.
+ */
+function reportExecuteScriptError(error) {
+  document.querySelector("#popup-content").classList.add("hidden");
+  document.querySelector("#error-content").classList.remove("hidden");
+  console.error(`Failed to execute beastify content script: ${error.message}`);
+}
+
+/**
+ * Cuando se carga la ventana emergente, inyecta el script de contenido en la pestaña activa,
+ * y agrega un manejador de eventos.
+ * Si no es posible inyectar el script, se ocupa de manejar el error.
+ */
+browser.tabs.executeScript({file: "/content_scripts/beastify.js"})
+.then(listenForClicks)
+.catch(reportExecuteScriptError);
+ +

Empecemos por la linea 96. La ventana emergente ejecuta un script de contenido en la pestaña activa tan pronto como se termina de cargar, usando la API browser.tabs.executeScript(). Si la ejecución del script de contenido es exitosa, este quedará cargado en la página hasta que sea cerrada la pestaña o hasta que el usuario navegue hacia una página distinta.

+ +
+

Un motivo común por el cual el llamado a browser.tabs.executeScript() puede fallar, es porque no es posible ejecutar scripts de contenido en todas las páginas, por ejemplo, en páginas de navegador privilegiadas como about:debugging, o páginas del dominio addons.mozilla.org, no es posible hacerlo.

+
+ +

Si la ejecución falla, reportExecuteScriptError() ocultará el <div> "popup-content", mostrará el <div> "error-content", y reportará el error en la consola.

+ +

Si la ejecución del script de contenido es exitosa, se llamará a listenForClicks(), que atiende los eventos que se generan al cliquear en la ventana emergente.

+ + + +

La función beastify() hace tres cosas:

+ + + +

La función reset() deshace lo hecho por beastify():

+ + + +

El script de contenido

+ +

Crea una carpeta nueva bajo la raíz del complemento llamada "content_scripts" y crea un nuevo archivo en ella llamado "beastify.js", con el contenido siguiente:

+ +
(function() {
+  /**
+   * Revisa e inicializa una variable de guardia.
+   * Si este script de contenido es insertado más de una vez
+   * en la misma página, dejará de ejecutarse.
+   */
+  if (window.hasRun) {
+    return;
+  }
+  window.hasRun = true;
+
+/**
+* Recibe la URL de la imagen, remueve las que se hayan agregado antes,
+* crea un nodo IMG que apunt hacia la imagen
+* e inserta ese nodo en el documento.
+*/
+  function insertBeast(beastURL) {
+    removeExistingBeasts();
+    let beastImage = document.createElement("img");
+    beastImage.setAttribute("src", beastURL);
+    beastImage.style.height = "100vh";
+    beastImage.className = "beastify-image";
+    document.body.appendChild(beastImage);
+  }
+
+  /**
+   * Remueve todas las bestias de la página.
+   */
+  function removeExistingBeasts() {
+    let existingBeasts = document.querySelectorAll(".beastify-image");
+    for (let beast of existingBeasts) {
+      beast.remove();
+    }
+  }
+
+  /**
+   * Atiende mensajes del script de segundo plano.
+   * Llama a "beastify()" o "reset()".
+  */
+  browser.runtime.onMessage.addListener((message) => {
+    if (message.command === "beastify") {
+      insertBeast(message.beastURL);
+    } else if (message.command === "reset") {
+      removeExistingBeasts();
+    }
+  });
+
+})();
+ +

Lo primero que hace el script de contenido es revisar la variable global window.hasRun: si está inicializada termina su ejecución, sino, la inicializa y continúa. La razón por la que hacemos esto es porque cada vez que el usuario abre la ventana emergente, se vuelve a ejecutar el script de contenido en la pestaña activa, por lo que podríamos tener múltiples instancias del script ejecutandose en una sola pestaña. Si esto sucede, necesitamos asegurarnos de que sea sólo la primera instancia la que vaya a realizar cambios.

+ +

Luego, en la linea 40, donde el script de contenido atiende mensajes provenientes de la ventana emergente (usando la API browser.runtime.onMessage), vemos que ésta puede enviar dos mensajes diferentes: "beastify" y "reset".

+ + + +

Las bestias

+ +

Finalmente, necesitamos incluir las imágenes de los animales.

+ +

Crea una carpeta nueva llamada "beasts", y adiciona tres imágenes en ella, con su nombre apropiado. Tu puedes obtener estas imágenes desde el repositorio en GitHub, o desde aquí:

+ +

+ +

Probándolo

+ +

Primero, comprueba nuevamente que tienes todos los archivos necesarios en el lugar adecuado:

+ +
beastify/
+
+    beasts/
+        frog.jpg
+        snake.jpg
+        turtle.jpg
+
+    content_scripts/
+        beastify.js
+
+    icons/
+        beasts-32.png
+        beasts-48.png
+
+    popup/
+        choose_beast.css
+        choose_beast.html
+        choose_beast.js
+
+    manifest.json
+ +

Comenzando con Firefox 45, pueden instalar temporalmente una extensión desde el disco.

+ +

Abre "about:debugging" en Firefox, de clic en "Cargar complemento temporalmente", y seleccione el archivo manifest.json. Entonces, debería de ver el ícono de la extensión aparecer en la barra de herramientas de Firefox:

+ +

{{EmbedYouTube("sAM78GU4P34")}}

+ +

Abra una página web, luego haga clic sobre el ícono, seleccione una bestia, y vea cómo cambia la página web:

+ +

{{EmbedYouTube("YMQXyAQSiE8")}}

+ +

Desarrollo desde la línea de comandos

+ +
+
+
 
+ +

Puede automatizar el paso de instalación temporal mediante la herramienta web-ext. Pruebe esto:

+
+
+ +
cd beastify
+web-ext run
+ +

 

diff --git a/files/es/mozilla/developer_guide/build_instructions/index.html b/files/es/mozilla/developer_guide/build_instructions/index.html new file mode 100644 index 0000000000..8322104d8e --- /dev/null +++ b/files/es/mozilla/developer_guide/build_instructions/index.html @@ -0,0 +1,73 @@ +--- +title: Compilar e instalar +slug: Compilar_e_instalar +tags: + - Documentación_de_compilado +translation_of: Mozilla/Developer_guide/Build_Instructions +translation_of_original: Build_and_Install +--- +

NOTE: Do not make substantive changes to this document without consulting Benjamin Smedberg <benjamin@smedbergs.us> or one of the build-config peers.

+
+ NOTA: No comience a compilar sin antes configurar las opciones de compilación!
+

Compilando

+

Debes usar GNU make para verificar y compilar Mozilla, no se acepta otro programa "make". En Windows, Mac OS X, y GNU/Linux usa "make" para ejecutar GNU make; en la mayoría de los unix-no GNU debes usar "gmake".

+

Una vez que verificaste el código, asegúrate de configurar la aplicación como se describe en las opciones de configuración.

+

Para Windows, Mac OS X, y GNU/Linux, asegúrate de estar en el nivel superior del directorio fuente ("mozilla") cuando llames el comando make:

+
$ make -f client.mk build
+
+

Para la mayoría de los unix no-GNU:

+
$ gmake -f client.mk build
+
+

Si quieres configurar y compilar de forma manual, cd a tu objdir, ejecuta el programa de configuración, y luego ejecuta make/gmake. El programa de configuración tomará las opciones de tu archivo .mozconfig.

+

Ejecutando tu compilación nueva

+

Es posible ejecutar la compilación nueva directamente desde el directorio en donde fue creada. De todas formas, el directorio de compilación tal vez contenga symlinks dentro del árbol; debes ejecutar la instalación/packaging para generar una compilación que puede ser movida o compartida.

+

Windows y Linux

+

En sistemas no-macintosh, el producto final se puede hallar en objdir/dist/bin. En plataformas POSIX (BDS, GNU/LINUX, Solaris), debes ejecutar el archivo "mozilla" o "firefox", no el binario "mozilla-bin" o "firefox-bin".

+

Mac OS X

+

En Macintosh, el sistema de compilado genera una aplicación en objdir/dist/AppName.app por ejemplo, objdir/dist/Minefield.app.

+

Fijate que cuando compilas con --enable-debug, la aplicación se ubica en objdir/dist/AppNameDebug.app, por ejemplo objdir/dist/MinefieldDebug.app.

+

Puedes ejecutar la aplicación, ya sea abriendo la aplicación via Finder o con la línea de comando:

+
$ objdir/dist/AppName[Debug].app/Contents/MacOS/appname
+
+

Para el ejemplo:

+
$ objdir/dist/MinefieldDebug.app/Contents/MacOS/firefox
+
+

Instalando tu compilación

+

En plataformas POSIX, puedes instalar ejecutando gmake install. Pero es mejor que sigas los pasos siguientes para crear un tar, luego descomprime el tar.

+

Para la mayoria de las aplicaciones, crea el tar dentro del directorio específico de la aplicación:

+ +

Ejemplo real: Si usas un .mozconfig Firefox estático optimizado

+ +

Esto generará un archivo firefox-2.0.0.3.en-US.linux-i686.tar.gz dentro del directorio ff-opt-static/dist, el cual puedes descomprimir donde desees.

+

Para hacer un instalador para Windows, crea el destino del instalador en el directorio superior

+ +

NOTA: Para crear el instalador lo más comprimido posible, para Firefox y Thunderbird con el sistema basado en Cygwin, debes instalar algunos programas adicionales.

+ +

Ambos programas se deben encontrar en el PATH. También MOZ_INSTALLER_USE_7ZIP debe ser exportado a tu entorno. Si usas el sistema MozillaBuild, ambos se instalarán automaticamente.

+

 

+
+

Información del documento

+ +

Información sobre el documento original

+ +
+

{{ languages( { "en": "en/Build_and_Install", "fr": "fr/Compilation_et_installation", "ja": "ja/Build_and_Install", "zh-cn": "cn/\u7f16\u8bd1\u4e0e\u5b89\u88c5" } ) }}

diff --git a/files/es/mozilla/developer_guide/mozilla_build_faq/index.html b/files/es/mozilla/developer_guide/mozilla_build_faq/index.html new file mode 100644 index 0000000000..6e0c380577 --- /dev/null +++ b/files/es/mozilla/developer_guide/mozilla_build_faq/index.html @@ -0,0 +1,343 @@ +--- +title: Preguntas frecuentes sobre la compilación de Mozilla +slug: Mozilla/Developer_guide/Preguntas_frecuentes_sobre_la_compilación_de_Mozilla +tags: + - Documentación_de_compilado + - NecesitaRevisiónGramatical +translation_of: Mozilla/Developer_guide/Mozilla_build_FAQ +--- +

Mira también:

+ + + +

Preguntas Generales

+ +
+
Que plataformas soportan Mozilla?
+
Hay varios niveles o grados de "soporte" para Mozilla: +

Grado-1 son las plataformas en las cuales se centra el desarrollo. Los problemas en estas plataformas son considerados primordiales. También son las plataformas que se muestran en SeaMonkey tinderbox page.

+ +

Las Grado-1 son:

+ +
    +
  • linux/x86 (gcc)
    • +
  • win32/x86 (msvc)
    • +
  • OS X (gcc)
    • +
+ +

Grado-2 son las plataformas en las que hay algunos desarrolladores y contribuyentes activos, pero que la mayor parte del desarrollo no se centra en los problemas. Nos referimos a estas plataformas como los Puertos y la mayoría se encuentran en SeaMonkey-Ports tinderbox page.

+ +

Estas son:

+ +
    +
  • aix 4.3 (aCC)
    • +
  • beos 5.0.3 (gcc)
    • +
  • bsdi 4.x (gcc)
    • +
  • hpux 10.x,11.x (HP cc)
    • +
  • irix 6.x/gcc (gcc/MIPSpro)
    • +
  • linux/ppc (gcc)
    • +
  • os/2 (gcc)
    • +
  • osf1 5.x (Compaq cc)
    • +
  • solaris (sparc & x86) 2.6+ (gcc/Forte)
    • +
+ +

Grado-3 son aquellas en las que casi no hay desarrollo activo por la mayor parte de los desarrolladores pero que hay algunas soluciones contribuidas por terceros.

+ +

Las Grado-3 son:

+ +
    +
  • freebsd (gcc)
    • +
  • linux/alpha (gcc)
    • +
  • netbsd (gcc)
    • +
  • openvms (?)
    • +
  • ps2linux (gcc)
    • +
  • qnx 6 (gcc)
    • +
  • win32/x86 (gcc)
    • +
+ +

Las demás plataformas "no son soportadas" por Mozilla. En realidad "no soportada" quiere decir que no hay gente trabajando activamente en eso y que no son una prioridad.

+ +

La mayoría de los desarrolladores no tienen acceso a las plataformas que no sean Grado-1; así que cualquier bug reportado en una plataforma que no sea Grado-1,debería poseer bastante información para ayudar al responsable del bug a determinar la causa y brindar una solución apropiada. Si puedes proporcionar un parche y/o verificar que el parche del desarrollador funciona en tu plataforma, puedes ayudar a muchos a verificar y arreglar sus bugs.

+ +

 

+
+
Qué tipo de sistema de compilación usa Mozilla?
+
Mozilla usa para todas las plataformas una delgada capa de configuración GNU sobre el legado de sistema de makefile recursivo de Netscape. Como la mayoría de los proyectos configure-based, utiliza GNU autoconf para generar el script de configuración. GNU make se utiliza para manejar el proceso de compilado. +

 

+
+
Por qué usa GNU?
+
GNU make ha sido exportado a muchos sistemas. Esto hace que exportar Mozilla a esos sistemas sea un poco más fácil. Utilizando las características de make, que son soportadas por el programa nativo make en 10 plataformas diferentes, se logra que el sistema de compilado no sea innecesariamente complicado. +

 

+
+
Funciona otra versión de make?
+
No. El makefiles Mozilla utilza características propias de GNU make que, obviamente, sólo funcionan con GNU make. +

 

+
+
Por qué no usa automake?
+
Parte del legado de Netscape involucra utilizar el make de GNU. Tiene características para incluir un conjunto de reglas comunes desde un puñado de archivos en cada Makefile que necesite usarlas. También, hoy en día el método de generación de librerías de Mozilla no funciona bien con libtool. +

 

+
+
Qué les sucedió a nmake y al sistema de compilado CodeWarrior?
+
Ya no existen. El soporte para nmake se dejó durante la distribución de Mozilla 1.2a. El sistema mac cfm se abandonó con el soporte para OS9 poco después de la liberación de Mozilla 1.3 +

 

+
+
Por qué no ant, tmake, scons o inserte su sistema favorito aquí?
+
Principalmente porque nadie los utiliza en Mozilla. Cuando Mozilla empezó a ser de código abierto, sólo contenia el legado de Netscape. Autoconf se integró en una rama y se mantuvo en paralelo durante 6 meses antes de convertirse en el sistema standard para unix. +

 

+
+
Si deseo utilizar mi sistema favorito,¿ lo empezarìan a usar en Mozilla?. No quiero perder mi tiempo si no lo van a usar.
+
No hay garantías de que cualquier código escrito para Mozilla sea aceptado en árbol por defecto. Todo sistema que se desee utilizar debe demostrar ser mejor que el sistema actual. Velocidad, flexibilidad, portabilidad y la capacidad de que un gran grupo de desarrolladores- que tiene 3 años o más de experiencia- pueda cambiarlo facilmente, son los principales factores que deciden el cambio. Si hablas en serio y vas a realizar mucho trabajo, contacta a User:Benjamin Smedberg para discutir los detalles. +

 

+
+
Por qué Mozilla no soporta autoconf 2.5x?
+
Simplemente porque autoconf 2.5x no ofrece nada para que los esfuerzos por actualizar valgan la pena. Autoconf 2.5x no es compatible con 2.13 y las restricciones adicionales hechas en las nuevas versiones de autoconf requirirían reescribir gran parte del código- sistema de compilado de Mozilla. +

Algunas características de 2.13, como la posibilidad de pasar argumentos adicionales para sub-configuración, no están disponibles en 2.5x. Varios han preguntado por estas características en las listas de correos de autoconf y no han obtenido respuestas favorables. No es conveniente reescribir las configuraciones para subprojectos de Mozilla (NSPR & LDPA).

+ +

 

+
+
Por qué NSS no usa aurtoconf?
+
El projecto NSS también es utilizado fuera de Mozilla, y los miembros del mismo creen que cambiar a autoconf no vale la pena. Mira {{ Bug(52990) }} para más detalles. +

 

+
+
Puedo compilar múltiples proyectos basados en Mozilla desde un único árbol-fuente?
+
Sí!, cada projecto debe ser compilado en su propio objdir. +

 

+
+
Qué es un objdir?
+
Un objdir se refiere a crear los archivos de salida en un directorio distinto al que se encuentran las fuentes. Es un estándar en la mayoría de los proyectos basados en configuración. Te permite, desde un único árbol-fuente, compilar para múltiples configuraciones, incluyendo varias plataformas si trabajas en un sistema de archivos de red. También elimina la corrupción de tu árbol-fuente, de esta manera sabes que los archivos en el árbol no han sido modificados en el proceso de compilado. +

Si ejecutas configure manualmente, puedes usar el método estàndar de crear un directorio vacío en cualquier parte de la unidad, y luego entrar a ese directorio y ejecutar path/to/mozilla/configure.

+ + 
mkdir obj-debug
+cd obj-debug
+../mozilla/configure
+
+ +

Si usas client.mk, puedes agregar lo siguiente al .mozconfig:

+ + 
mk_add_options MOZ_OBJDIR=/path/to/objdir
+
+ +

 

+
+
Puedo multi-compilar Mozilla?
+
Sí, mira el documento Cross-Compiling Mozilla. No soporta Canadian Cross-Compiling. +

 

+
+
Cómo puedo compilar sólo ciertos archivos para pruebas, en lugar de compilar todo el árbol, mientras modifico el código?
+
Entra en el directorio objdir, luego vè al directorio especifico que deseas compilar (la estructura del objdir coincide con la estructura de los directorios de las fuentes), y tipea "make". Sólo funciona si encuentras un directorio que tenga un Makefile (el equivalente en el árbol fuente tandrá "Makefile.in". Si quieres algo más especifico que eso puedes probar con "make <nombrearchivo>.obj". Mira Incremental Build. +

 

+
+
Funcionan las compilaciones paralelas (make -j) en Mozilla?
+
Sí, mira GNU Make Parallel Execution para su uso óptimo. +

Si obtienes errores de compilación al utilizar aquello (sobre todo cuando usas -j en lugar de -jN), prueba reduciendo el número de paralelismo disminuyendo el valor de N (o, si usaste paralelismo ilimitado, agrega un número pequeño N a -j)

+ +

La compilación en paralelo con -j4 y -j8 parece funcionar.

+ +

 

+
+
Cómo fuerzo al sistema de compilación para aceptar cualquier cambio hecho a mi archivo .mozconfig?
+
Toca cualquiera de los scripts de configuración en el árbol. No hay dependencia sobre el archivo mozconfig; el archivo puede encontrarse donde sea a tráves de la variable de entorno MOZCONFIG. +

 

+
+
error: file '../../toolkit/locales/en-US/chrome/necko/contents.rdf' doesn't exist at ../../config/make-jars.pl line 418, <STDIN> line 9.
+
Estás tratando de compilar Firefox sin seguir las intrucciones sobre cómo Configurar las opciones de compilación. En particular, tu mozconfig debe contener el mozconfig por defecto de Firefox: + 
. $topsrcdir/browser/config/mozconfig
+# add your custom additional options here
+
+ +

 

+
+
Initial cvs checkout fails with the message: cvs {{ mediawiki.external('checkout aborted') }}: *PANIC* administration files missing
+
No puedes crear un árbol CVS debajo de un directorio llamado "CVS". Es una característica/bug de CVS. CVS espera encontrar cierta administración de archivos debajo del directorio CVS y no funciona si no la encuentra. +

 

+
+
Error: ../coreconf/rules.mk:406: target `c' doesn't match the target pattern
+
Necesitas make 3.80 y no otras versiones como 3.81 +
    +
  • make 3.80 ya no está disponible en el instlador de Cygwin, así que lo deberás encontrar por ti mismo. Puedes buscarlo en google como make-3.80-1.tar.bz2, también está disponbleaquí.
    • +
+ +

 

+
+
+ +

Preguntas específicas sobre Mac

+ +

 

+ +
+
Puede compilar una aplicación Mozilla como un binario universal?
+
Sí, mira Mac OS X Universal Binaries. +

 

+
+
Cómo puedo usar distcc para ayudar a compilar?
+
TBA. +

 

+
+
Mozilla compila UFS?
+
Sí, ha sido arreglado desde {{ Bug(157036) }}. +

 

+
+
Mozilla corre sobre UFS?
+
Sí. +

 

+
+
Puedo usar CodeWarrior para compilar Mach-O?
+
No, CodeWarrior murió. Mira {{ Bug(119589) }}. +

 

+
+
Luego de re-compilar, ej. layout. Cómo hago que mi FirefoxDebug.app refleje el cambio?
+
make -C browser/app.
+
+ +

Para errores comunes en Mac y consejos adicionales sobre solución de problemas. Mira solución de problemas en Requerimientos para la compilación en Mac OS X.

+ +

Preguntas sobre Win32

+ +

 

+ +
+
Existe un archivo de proyecto Microsoft Visual Studio para compilar Mozilla?
+
No. Debes usar cygwin y GNU make. +

 

+
+
Puedo correr los comandos para compilar desde cmd.exe?
+
Sí. Make llama la subshell cygwin /bin/sh para ejecutar el comando, así que no hay problema sobre cual shell uses para llamar a make. +

 

+
+
Qué versión del paquete de autoconf de cygwin debo usar?
+
Debido a las incompatibilidades entre autonconf 2.1x y 2.5x, la gente de cygwin escribió un script (wrapper) que determinará qué versión necesitará tu script de configuración y llamará a esa versión. Necesitarás los paquetes autoconf(-wrapper) y autoconf estable. Mira http://cygwin.com/ml/cygwin-announce.../msg00177.html para más detalles +

 

+
+
Las herramientas de Microsoft (CL, LINK, RC) tiran error File not found
+
Las variables de entorno INCLUDE y LIB son usadas por las herramientas de Microsoft Visual C++. Comúnmente están configuradas en vcvars32.bat. Tal vez necesites o no MFC y ATL, dependiendo de qué modulos estés compilando. Debajo hay paths que funcionan si Visual C++ está instalado en "C:\msvs" + 
set INCLUDE=C:\msvs\VC\Include;C:\msvs\VC\ATLMFC\Include
+set LIB=C:\msvs\VC\Lib;C:\msvs\VC98\ATLMFC\Lib
+
+ +

 

+
+
cvs update: authorization failed: server XXXX rejected access -- used empty password; try "cvs login" with a real password
+
Estás mezclando wincvs y cygwin cvs. Usa uno o el otro. +

 

+
+
cvs {{ mediawiki.external('checkout aborted') }}: cannot rename file CVS/Entries.Backup to CVS/Entries: Permission denied
+
En cygwin 1.3.13, ntsec está activada. ntsec es un intento de cygwin por obtener una estructura de permiso mas similar a UNIX sobre características de seguridad que Windows NT. El mensaje de error indica que hay una discrepancia de mapeo entre los permisos de unix listados en el archivo de cygwin /etc/password y los usados por Windows NT. Puedes agregar "nontsec" a tu variable de entorno CYGWIN. Para arreglarlo de forma adecuada deberías solucionar el problema de mapeo. +

 

+
+
Al descomprimir, no se encuentra un archivo .dtd
+
Probablemente usaste Winzip para descomprimir los archivos. No hagas eso. Por defecto, Winzip no extrae los archivos sin longitud (0 bytes). Usa otro utilitario. +

 

+
+
nsinstall u otro programa nativo win32 no encuentra un archivo
+
Revisa tu tabla de subida. Ejecuta el comando de montura, deberia devovler algo como esto: + 
c: on /cygdrive/c type user (binmode,noumount)
+e: on /cygdrive/e type user (binmode,noumount)
+c:\cygwin on / type system (binmode)
+c:\cygwin\bin on /usr/bin type system (binmode)
+c:\cygwin\lib on /usr/lib type system (binmode)
+
+ +

El sistema de compilado espera que las particiones del disco hayan sido montadas usando /cygdrive como prefijo de la unidad. Si C: o E: no usan /cygwin como prefijo de unidad no podrás compilar Mozilla en esas unidades. Debes montar la unidad manualmente usando:

+ + 
mount -s "e:\" /cygdrive/e
+
+ +

Si tu árbol fuente está debajo de tu $HOME, el modo de montura debería ser binmode (finales de líneas estilo Unix), de otro modo fallará al compilar. Si el árbol está fuera de tu $HOME, no importa el modo de montura siempre y cuando tu editor reconozca finales de linea estilo Unix.

+
+
No such file or directory errors from lines in your mozconfig
+
This can be caused by your mozconfig file having Windows-style line endings. Convert them to UNIX-style and the error should go away.
+
xpidl.exe cae con una violación de acceso
+
Usualmente ocurre por una discordancia entre tu compilador y tus librerías glib y/o libIDL. +

Si compilas con Visual Studio .NET, debes enlazar con las version de VC7 de las DLL glib y libIDL. Para Visual Studio .NET 2003, usa las versiones VC7.1. Para Visual Studio 2005, usa VC8.

+ +

El directorio que contenga esas versiones de librerías para tu compilador debe estar en tu PATH antes que cualquier otra versión de las mismas librerías. Los archivos .dll y lib deben ser ejecutable o cygwin no los cargará.

+ +

Mira los Requerimientos para la compilación en Windows sobre más consejos para compilar con VC7 o superior.

+ +

También en {{ Bug(242870) }} se encuentran disponibles algunas librerías estáticas que pueden ser usadas en lugar de las librerías específicas del compilador.

+ +

Si compilas con VC6, debes asegurarte que no estás usando las librerías de VC7 a la hora de compilar o ejecutar.

+
+
configure: error: the midl major version, , does not match the compiler suite version, <Visual C++ nro de versión> -- lo mismo para el linker
+
TLa herramienta cygwin "link.exe" para enlazar no reconoce el objeto enlazador de la suite del compilador Microsoft, o no se encuentra midl. Asegúrate que las herramientas de Microsoft se encuentran antes que cygwin en el PATH (Mira las intrucciones), o renombra o quita el archivo /bin/link.exe. Nota que cygwin tal vez modifique el path cuando arranque su shell, asi que también mira export.
+
configure: error: installation or configuration problem: C compiler cannot create executables.
+
Prueba asegurándote que la variable PATH incluya todos los directorios necesarios. Si usas MS Visual Studio, ejecuta vcvars32.bat (que configura las variables PATH, LIB, y INCLUDE). Si tu entorno ha cambiado, tal vez debas eliminar el archivo config.cache (en el directorio mozilla o directorio objeto) y luego volver a compilar.
+
build error: ../coreconf/rules.mk:365: target `c' doesn't match the target pattern
+
Has usado make 3.81 del instalador cygwin. Debes usar make 3.80. Por favor lee las instrucciones.
+
fatal error LNK1112: module machine type 'IA64' conflicts with target machine type 'X86'
+
Prueba cambiando el orden de los directorios en las variables PATH, LIB e INCLUDE. Cambia cualquier directorio que incluya cerca del final: "win64" o "IA64" (o "AMD64").
+
LINK : fatal error LNK1104: cannot open file 'atlthunk.lib'
+
De acuerdo con this Microsoft forum thread, hay una versión diferente de Active Template Library (ATL) para  Platform Software Development Kit -libre- (PSDK),  que para Visual Studio. La ATL en el PSDK no soporta código 32-bits, sólo 64-bits; mientras que Visual Studio soporta ambas y no requiere atlthunk.lib. Aparentemente el archivo atlthunk.lib no está disponible y no se pudo compilar desde freely available tools, incluyendo las herramientas Visual C++ y Visual Studio Express. De todos modos puedes actualizar a la versión full de Visual Studio y utilizar la versión de ATL del mismo, o puedes trabajar en el problema cambiando algunos códigos en atlbase.h (en \include\atl debajo del directorio PSDK). Ejemplo: + 
--- atlbase.h.old       2006-06-08 08:20:26.671875000 -0400
++++ atlbase.h   2006-06-08 08:13:26.578125000 -0400
+@@ -283,7 +283,7 @@
+         }
+ };
+ #pragma pack(pop)
+-
++/*
+ PVOID __stdcall __AllocStdCallThunk(VOID);
+ VOID  __stdcall __FreeStdCallThunk(PVOID);
+
+@@ -291,6 +291,11 @@
+ #define FreeStdCallThunk(p) __FreeStdCallThunk(p)
+
+ #pragma comment(lib, "atlthunk.lib")
++*/
++
++// workaround for not having atlthunk.lib in PSDK or VC++ 2005 Express Edition
++#define AllocStdCallThunk() HeapAlloc(GetProcessHeap(),0,sizeof(_stdcallthunk))
++#define FreeStdCallThunk(p) HeapFree(GetProcessHeap(), 0, p)
+
+ #elif defined (_M_AMD64)
+ #pragma pack(push,2)
+
+ +

También hubo que borrar el directorio objeto y volver a compilar desde el principio, de modo que el compilador tome el cambio.

+
+
Compilar o generar un ejecutable con cygwin y VS6.0 termina en FIND: Parameter format not correct
+
Hay una confusión entre System32 "find" y /usr/bin/find de cygwin. Lo que queremos es el find de cygwin. Es causado por el orden del path. Algunas posibles soluciones serían: +
    +
  • Renombrar temporalmente system32/find.exe
    • +
  • Asegurarse que en la entrada del path esté primero cygwin que system32
    • +
+
+
Empaqueté Firefox a través del instalador: make -C ${OBJ_DIR}/browser/installer installer sin problemas. Al ejecutar pide el archivo perdido mozz.dll; la instalación falla.
+
Tanto Firefox como Thunderbird,deberían compilarse con las etiquetas --enable-static --disable-shared
+
shlibsign.exe - Entry Point Not Found; El procedimiento CERT_GetFirstEmailAddress no ha sido localizado en la librería nss3.dll.
+
Tal vez tengas muchos nss3.dll en tu máquina y en tu path. Haz una búsqueda para todas las copias de este archivo. Mueve todas las copias que se encuentren dentro del árbol de Firefox durante la compilación y vuelve a colocarlos cuando se termine la compilación.
+
+ +

Preguntas sobre Mingw32

+ + + +

Preguntas sobre Unix

+ +
+
Galeon necesita libgtksuperwin.so pero no tengo ese archivo en mi Mozilla gtk2, dónde está?
+
Sólo Mozilla gtk1 compila libgtksuperwin.so. Si deseas usar galeon con compilación gtk2, debes usar galeon2. +

 

+
+
Por qué la configuración dice que necesito libIDL >= 0.6.3 cuando tengo instalado libIDL 0.8.x?
+
libIdl 0.8.x sólo puede ser usado compilando con gtk2. Por defecto, Mozilla compila con gtk1. Para usar libIDl 0.8.x y gtk2 debes especificar --enable-default-toolkit=gtk2 en la línea de comando de laconfiguración o  .mozconfig. NOTA: Esto es viejo y ha sido arreglado en Mozilla 1.8
+
Cómo compilo en Solaris 10 x86 (SeaMonkey)?
+
Tuve que hacer lo siguiente para conseguir un entorno que funcione:
+
1. instalar forte (Gratis desde Sun)
+
2. Instalar gmake (desde blastwave)
+
3. mv /usr/ucb/cc /usr/ucb/cc.hold
+
4. CFLAGS="-xlibmil"; exporta CFLAGS
+
5. CXXFLAGS="-xlibmil -xlibmopt -features=tmplife -norunpath"; exporta CXXFLAGS
+
6. LDFLAGS='-R$ORIGIN -R/usr/sfw/lib -R/opt/sfw/lib -R/usr/local/lib -R/opt/csw/lib'; exporta LDFLAGS
+
7. PATH=$PATH:/opt/SUNWspro/bin:/opt/csw/bin:/opt/csw/sbin:/usr/ucb/bin:/usr/ccs/bin; exporta PATH
+
8. LD_LIBRARY_PATH=/opt/SUNWspro/lib:$LD_LIBRARY_PATH; exporta LD_LIBRARY_PATH
+
9. Crear un archivo mozconfig y compilar normalmente.
+
10. La generación del paquete (tar y gzip) falló, así que simplemente lo cree manualmente con los archivos resultantes en el directorio dist.
+
libxpcom_core.so: cannot restore segment prot after reloc: Permission denied</dt>
+
Probablemente estés usando Fedora Core 5, o alguna otra distribución de Linux que tiene activado SELinux. Para arreglarlo, utiliza el comando 'chcon -t chcon -t texrel_shlib_t lib*' en el directorio dist/bin.</dd>
+
diff --git "a/files/es/mozilla/developer_guide/preguntas_frecuentes_sobre_la_compilaci\303\263n_de_mozilla/index.html" "b/files/es/mozilla/developer_guide/preguntas_frecuentes_sobre_la_compilaci\303\263n_de_mozilla/index.html" deleted file mode 100644 index 6e0c380577..0000000000 --- "a/files/es/mozilla/developer_guide/preguntas_frecuentes_sobre_la_compilaci\303\263n_de_mozilla/index.html" +++ /dev/null @@ -1,343 +0,0 @@ ---- -title: Preguntas frecuentes sobre la compilación de Mozilla -slug: Mozilla/Developer_guide/Preguntas_frecuentes_sobre_la_compilación_de_Mozilla -tags: - - Documentación_de_compilado - - NecesitaRevisiónGramatical -translation_of: Mozilla/Developer_guide/Mozilla_build_FAQ ---- -

Mira también:

- - - -

Preguntas Generales

- -
-
Que plataformas soportan Mozilla?
-
Hay varios niveles o grados de "soporte" para Mozilla: -

Grado-1 son las plataformas en las cuales se centra el desarrollo. Los problemas en estas plataformas son considerados primordiales. También son las plataformas que se muestran en SeaMonkey tinderbox page.

- -

Las Grado-1 son:

- -
    -
  • linux/x86 (gcc)
    • -
  • win32/x86 (msvc)
    • -
  • OS X (gcc)
    • -
- -

Grado-2 son las plataformas en las que hay algunos desarrolladores y contribuyentes activos, pero que la mayor parte del desarrollo no se centra en los problemas. Nos referimos a estas plataformas como los Puertos y la mayoría se encuentran en SeaMonkey-Ports tinderbox page.

- -

Estas son:

- -
    -
  • aix 4.3 (aCC)
    • -
  • beos 5.0.3 (gcc)
    • -
  • bsdi 4.x (gcc)
    • -
  • hpux 10.x,11.x (HP cc)
    • -
  • irix 6.x/gcc (gcc/MIPSpro)
    • -
  • linux/ppc (gcc)
    • -
  • os/2 (gcc)
    • -
  • osf1 5.x (Compaq cc)
    • -
  • solaris (sparc & x86) 2.6+ (gcc/Forte)
    • -
- -

Grado-3 son aquellas en las que casi no hay desarrollo activo por la mayor parte de los desarrolladores pero que hay algunas soluciones contribuidas por terceros.

- -

Las Grado-3 son:

- -
    -
  • freebsd (gcc)
    • -
  • linux/alpha (gcc)
    • -
  • netbsd (gcc)
    • -
  • openvms (?)
    • -
  • ps2linux (gcc)
    • -
  • qnx 6 (gcc)
    • -
  • win32/x86 (gcc)
    • -
- -

Las demás plataformas "no son soportadas" por Mozilla. En realidad "no soportada" quiere decir que no hay gente trabajando activamente en eso y que no son una prioridad.

- -

La mayoría de los desarrolladores no tienen acceso a las plataformas que no sean Grado-1; así que cualquier bug reportado en una plataforma que no sea Grado-1,debería poseer bastante información para ayudar al responsable del bug a determinar la causa y brindar una solución apropiada. Si puedes proporcionar un parche y/o verificar que el parche del desarrollador funciona en tu plataforma, puedes ayudar a muchos a verificar y arreglar sus bugs.

- -

 

-
-
Qué tipo de sistema de compilación usa Mozilla?
-
Mozilla usa para todas las plataformas una delgada capa de configuración GNU sobre el legado de sistema de makefile recursivo de Netscape. Como la mayoría de los proyectos configure-based, utiliza GNU autoconf para generar el script de configuración. GNU make se utiliza para manejar el proceso de compilado. -

 

-
-
Por qué usa GNU?
-
GNU make ha sido exportado a muchos sistemas. Esto hace que exportar Mozilla a esos sistemas sea un poco más fácil. Utilizando las características de make, que son soportadas por el programa nativo make en 10 plataformas diferentes, se logra que el sistema de compilado no sea innecesariamente complicado. -

 

-
-
Funciona otra versión de make?
-
No. El makefiles Mozilla utilza características propias de GNU make que, obviamente, sólo funcionan con GNU make. -

 

-
-
Por qué no usa automake?
-
Parte del legado de Netscape involucra utilizar el make de GNU. Tiene características para incluir un conjunto de reglas comunes desde un puñado de archivos en cada Makefile que necesite usarlas. También, hoy en día el método de generación de librerías de Mozilla no funciona bien con libtool. -

 

-
-
Qué les sucedió a nmake y al sistema de compilado CodeWarrior?
-
Ya no existen. El soporte para nmake se dejó durante la distribución de Mozilla 1.2a. El sistema mac cfm se abandonó con el soporte para OS9 poco después de la liberación de Mozilla 1.3 -

 

-
-
Por qué no ant, tmake, scons o inserte su sistema favorito aquí?
-
Principalmente porque nadie los utiliza en Mozilla. Cuando Mozilla empezó a ser de código abierto, sólo contenia el legado de Netscape. Autoconf se integró en una rama y se mantuvo en paralelo durante 6 meses antes de convertirse en el sistema standard para unix. -

 

-
-
Si deseo utilizar mi sistema favorito,¿ lo empezarìan a usar en Mozilla?. No quiero perder mi tiempo si no lo van a usar.
-
No hay garantías de que cualquier código escrito para Mozilla sea aceptado en árbol por defecto. Todo sistema que se desee utilizar debe demostrar ser mejor que el sistema actual. Velocidad, flexibilidad, portabilidad y la capacidad de que un gran grupo de desarrolladores- que tiene 3 años o más de experiencia- pueda cambiarlo facilmente, son los principales factores que deciden el cambio. Si hablas en serio y vas a realizar mucho trabajo, contacta a User:Benjamin Smedberg para discutir los detalles. -

 

-
-
Por qué Mozilla no soporta autoconf 2.5x?
-
Simplemente porque autoconf 2.5x no ofrece nada para que los esfuerzos por actualizar valgan la pena. Autoconf 2.5x no es compatible con 2.13 y las restricciones adicionales hechas en las nuevas versiones de autoconf requirirían reescribir gran parte del código- sistema de compilado de Mozilla. -

Algunas características de 2.13, como la posibilidad de pasar argumentos adicionales para sub-configuración, no están disponibles en 2.5x. Varios han preguntado por estas características en las listas de correos de autoconf y no han obtenido respuestas favorables. No es conveniente reescribir las configuraciones para subprojectos de Mozilla (NSPR & LDPA).

- -

 

-
-
Por qué NSS no usa aurtoconf?
-
El projecto NSS también es utilizado fuera de Mozilla, y los miembros del mismo creen que cambiar a autoconf no vale la pena. Mira {{ Bug(52990) }} para más detalles. -

 

-
-
Puedo compilar múltiples proyectos basados en Mozilla desde un único árbol-fuente?
-
Sí!, cada projecto debe ser compilado en su propio objdir. -

 

-
-
Qué es un objdir?
-
Un objdir se refiere a crear los archivos de salida en un directorio distinto al que se encuentran las fuentes. Es un estándar en la mayoría de los proyectos basados en configuración. Te permite, desde un único árbol-fuente, compilar para múltiples configuraciones, incluyendo varias plataformas si trabajas en un sistema de archivos de red. También elimina la corrupción de tu árbol-fuente, de esta manera sabes que los archivos en el árbol no han sido modificados en el proceso de compilado. -

Si ejecutas configure manualmente, puedes usar el método estàndar de crear un directorio vacío en cualquier parte de la unidad, y luego entrar a ese directorio y ejecutar path/to/mozilla/configure.

- - 
mkdir obj-debug
-cd obj-debug
-../mozilla/configure
-
- -

Si usas client.mk, puedes agregar lo siguiente al .mozconfig:

- - 
mk_add_options MOZ_OBJDIR=/path/to/objdir
-
- -

 

-
-
Puedo multi-compilar Mozilla?
-
Sí, mira el documento Cross-Compiling Mozilla. No soporta Canadian Cross-Compiling. -

 

-
-
Cómo puedo compilar sólo ciertos archivos para pruebas, en lugar de compilar todo el árbol, mientras modifico el código?
-
Entra en el directorio objdir, luego vè al directorio especifico que deseas compilar (la estructura del objdir coincide con la estructura de los directorios de las fuentes), y tipea "make". Sólo funciona si encuentras un directorio que tenga un Makefile (el equivalente en el árbol fuente tandrá "Makefile.in". Si quieres algo más especifico que eso puedes probar con "make <nombrearchivo>.obj". Mira Incremental Build. -

 

-
-
Funcionan las compilaciones paralelas (make -j) en Mozilla?
-
Sí, mira GNU Make Parallel Execution para su uso óptimo. -

Si obtienes errores de compilación al utilizar aquello (sobre todo cuando usas -j en lugar de -jN), prueba reduciendo el número de paralelismo disminuyendo el valor de N (o, si usaste paralelismo ilimitado, agrega un número pequeño N a -j)

- -

La compilación en paralelo con -j4 y -j8 parece funcionar.

- -

 

-
-
Cómo fuerzo al sistema de compilación para aceptar cualquier cambio hecho a mi archivo .mozconfig?
-
Toca cualquiera de los scripts de configuración en el árbol. No hay dependencia sobre el archivo mozconfig; el archivo puede encontrarse donde sea a tráves de la variable de entorno MOZCONFIG. -

 

-
-
error: file '../../toolkit/locales/en-US/chrome/necko/contents.rdf' doesn't exist at ../../config/make-jars.pl line 418, <STDIN> line 9.
-
Estás tratando de compilar Firefox sin seguir las intrucciones sobre cómo Configurar las opciones de compilación. En particular, tu mozconfig debe contener el mozconfig por defecto de Firefox: - 
. $topsrcdir/browser/config/mozconfig
-# add your custom additional options here
-
- -

 

-
-
Initial cvs checkout fails with the message: cvs {{ mediawiki.external('checkout aborted') }}: *PANIC* administration files missing
-
No puedes crear un árbol CVS debajo de un directorio llamado "CVS". Es una característica/bug de CVS. CVS espera encontrar cierta administración de archivos debajo del directorio CVS y no funciona si no la encuentra. -

 

-
-
Error: ../coreconf/rules.mk:406: target `c' doesn't match the target pattern
-
Necesitas make 3.80 y no otras versiones como 3.81 -
    -
  • make 3.80 ya no está disponible en el instlador de Cygwin, así que lo deberás encontrar por ti mismo. Puedes buscarlo en google como make-3.80-1.tar.bz2, también está disponbleaquí.
    • -
- -

 

-
-
- -

Preguntas específicas sobre Mac

- -

 

- -
-
Puede compilar una aplicación Mozilla como un binario universal?
-
Sí, mira Mac OS X Universal Binaries. -

 

-
-
Cómo puedo usar distcc para ayudar a compilar?
-
TBA. -

 

-
-
Mozilla compila UFS?
-
Sí, ha sido arreglado desde {{ Bug(157036) }}. -

 

-
-
Mozilla corre sobre UFS?
-
Sí. -

 

-
-
Puedo usar CodeWarrior para compilar Mach-O?
-
No, CodeWarrior murió. Mira {{ Bug(119589) }}. -

 

-
-
Luego de re-compilar, ej. layout. Cómo hago que mi FirefoxDebug.app refleje el cambio?
-
make -C browser/app.
-
- -

Para errores comunes en Mac y consejos adicionales sobre solución de problemas. Mira solución de problemas en Requerimientos para la compilación en Mac OS X.

- -

Preguntas sobre Win32

- -

 

- -
-
Existe un archivo de proyecto Microsoft Visual Studio para compilar Mozilla?
-
No. Debes usar cygwin y GNU make. -

 

-
-
Puedo correr los comandos para compilar desde cmd.exe?
-
Sí. Make llama la subshell cygwin /bin/sh para ejecutar el comando, así que no hay problema sobre cual shell uses para llamar a make. -

 

-
-
Qué versión del paquete de autoconf de cygwin debo usar?
-
Debido a las incompatibilidades entre autonconf 2.1x y 2.5x, la gente de cygwin escribió un script (wrapper) que determinará qué versión necesitará tu script de configuración y llamará a esa versión. Necesitarás los paquetes autoconf(-wrapper) y autoconf estable. Mira http://cygwin.com/ml/cygwin-announce.../msg00177.html para más detalles -

 

-
-
Las herramientas de Microsoft (CL, LINK, RC) tiran error File not found
-
Las variables de entorno INCLUDE y LIB son usadas por las herramientas de Microsoft Visual C++. Comúnmente están configuradas en vcvars32.bat. Tal vez necesites o no MFC y ATL, dependiendo de qué modulos estés compilando. Debajo hay paths que funcionan si Visual C++ está instalado en "C:\msvs" - 
set INCLUDE=C:\msvs\VC\Include;C:\msvs\VC\ATLMFC\Include
-set LIB=C:\msvs\VC\Lib;C:\msvs\VC98\ATLMFC\Lib
-
- -

 

-
-
cvs update: authorization failed: server XXXX rejected access -- used empty password; try "cvs login" with a real password
-
Estás mezclando wincvs y cygwin cvs. Usa uno o el otro. -

 

-
-
cvs {{ mediawiki.external('checkout aborted') }}: cannot rename file CVS/Entries.Backup to CVS/Entries: Permission denied
-
En cygwin 1.3.13, ntsec está activada. ntsec es un intento de cygwin por obtener una estructura de permiso mas similar a UNIX sobre características de seguridad que Windows NT. El mensaje de error indica que hay una discrepancia de mapeo entre los permisos de unix listados en el archivo de cygwin /etc/password y los usados por Windows NT. Puedes agregar "nontsec" a tu variable de entorno CYGWIN. Para arreglarlo de forma adecuada deberías solucionar el problema de mapeo. -

 

-
-
Al descomprimir, no se encuentra un archivo .dtd
-
Probablemente usaste Winzip para descomprimir los archivos. No hagas eso. Por defecto, Winzip no extrae los archivos sin longitud (0 bytes). Usa otro utilitario. -

 

-
-
nsinstall u otro programa nativo win32 no encuentra un archivo
-
Revisa tu tabla de subida. Ejecuta el comando de montura, deberia devovler algo como esto: - 
c: on /cygdrive/c type user (binmode,noumount)
-e: on /cygdrive/e type user (binmode,noumount)
-c:\cygwin on / type system (binmode)
-c:\cygwin\bin on /usr/bin type system (binmode)
-c:\cygwin\lib on /usr/lib type system (binmode)
-
- -

El sistema de compilado espera que las particiones del disco hayan sido montadas usando /cygdrive como prefijo de la unidad. Si C: o E: no usan /cygwin como prefijo de unidad no podrás compilar Mozilla en esas unidades. Debes montar la unidad manualmente usando:

- - 
mount -s "e:\" /cygdrive/e
-
- -

Si tu árbol fuente está debajo de tu $HOME, el modo de montura debería ser binmode (finales de líneas estilo Unix), de otro modo fallará al compilar. Si el árbol está fuera de tu $HOME, no importa el modo de montura siempre y cuando tu editor reconozca finales de linea estilo Unix.

-
-
No such file or directory errors from lines in your mozconfig
-
This can be caused by your mozconfig file having Windows-style line endings. Convert them to UNIX-style and the error should go away.
-
xpidl.exe cae con una violación de acceso
-
Usualmente ocurre por una discordancia entre tu compilador y tus librerías glib y/o libIDL. -

Si compilas con Visual Studio .NET, debes enlazar con las version de VC7 de las DLL glib y libIDL. Para Visual Studio .NET 2003, usa las versiones VC7.1. Para Visual Studio 2005, usa VC8.

- -

El directorio que contenga esas versiones de librerías para tu compilador debe estar en tu PATH antes que cualquier otra versión de las mismas librerías. Los archivos .dll y lib deben ser ejecutable o cygwin no los cargará.

- -

Mira los Requerimientos para la compilación en Windows sobre más consejos para compilar con VC7 o superior.

- -

También en {{ Bug(242870) }} se encuentran disponibles algunas librerías estáticas que pueden ser usadas en lugar de las librerías específicas del compilador.

- -

Si compilas con VC6, debes asegurarte que no estás usando las librerías de VC7 a la hora de compilar o ejecutar.

-
-
configure: error: the midl major version, , does not match the compiler suite version, <Visual C++ nro de versión> -- lo mismo para el linker
-
TLa herramienta cygwin "link.exe" para enlazar no reconoce el objeto enlazador de la suite del compilador Microsoft, o no se encuentra midl. Asegúrate que las herramientas de Microsoft se encuentran antes que cygwin en el PATH (Mira las intrucciones), o renombra o quita el archivo /bin/link.exe. Nota que cygwin tal vez modifique el path cuando arranque su shell, asi que también mira export.
-
configure: error: installation or configuration problem: C compiler cannot create executables.
-
Prueba asegurándote que la variable PATH incluya todos los directorios necesarios. Si usas MS Visual Studio, ejecuta vcvars32.bat (que configura las variables PATH, LIB, y INCLUDE). Si tu entorno ha cambiado, tal vez debas eliminar el archivo config.cache (en el directorio mozilla o directorio objeto) y luego volver a compilar.
-
build error: ../coreconf/rules.mk:365: target `c' doesn't match the target pattern
-
Has usado make 3.81 del instalador cygwin. Debes usar make 3.80. Por favor lee las instrucciones.
-
fatal error LNK1112: module machine type 'IA64' conflicts with target machine type 'X86'
-
Prueba cambiando el orden de los directorios en las variables PATH, LIB e INCLUDE. Cambia cualquier directorio que incluya cerca del final: "win64" o "IA64" (o "AMD64").
-
LINK : fatal error LNK1104: cannot open file 'atlthunk.lib'
-
De acuerdo con this Microsoft forum thread, hay una versión diferente de Active Template Library (ATL) para  Platform Software Development Kit -libre- (PSDK),  que para Visual Studio. La ATL en el PSDK no soporta código 32-bits, sólo 64-bits; mientras que Visual Studio soporta ambas y no requiere atlthunk.lib. Aparentemente el archivo atlthunk.lib no está disponible y no se pudo compilar desde freely available tools, incluyendo las herramientas Visual C++ y Visual Studio Express. De todos modos puedes actualizar a la versión full de Visual Studio y utilizar la versión de ATL del mismo, o puedes trabajar en el problema cambiando algunos códigos en atlbase.h (en \include\atl debajo del directorio PSDK). Ejemplo: - 
--- atlbase.h.old       2006-06-08 08:20:26.671875000 -0400
-+++ atlbase.h   2006-06-08 08:13:26.578125000 -0400
-@@ -283,7 +283,7 @@
-         }
- };
- #pragma pack(pop)
--
-+/*
- PVOID __stdcall __AllocStdCallThunk(VOID);
- VOID  __stdcall __FreeStdCallThunk(PVOID);
-
-@@ -291,6 +291,11 @@
- #define FreeStdCallThunk(p) __FreeStdCallThunk(p)
-
- #pragma comment(lib, "atlthunk.lib")
-+*/
-+
-+// workaround for not having atlthunk.lib in PSDK or VC++ 2005 Express Edition
-+#define AllocStdCallThunk() HeapAlloc(GetProcessHeap(),0,sizeof(_stdcallthunk))
-+#define FreeStdCallThunk(p) HeapFree(GetProcessHeap(), 0, p)
-
- #elif defined (_M_AMD64)
- #pragma pack(push,2)
-
- -

También hubo que borrar el directorio objeto y volver a compilar desde el principio, de modo que el compilador tome el cambio.

-
-
Compilar o generar un ejecutable con cygwin y VS6.0 termina en FIND: Parameter format not correct
-
Hay una confusión entre System32 "find" y /usr/bin/find de cygwin. Lo que queremos es el find de cygwin. Es causado por el orden del path. Algunas posibles soluciones serían: -
    -
  • Renombrar temporalmente system32/find.exe
    • -
  • Asegurarse que en la entrada del path esté primero cygwin que system32
    • -
-
-
Empaqueté Firefox a través del instalador: make -C ${OBJ_DIR}/browser/installer installer sin problemas. Al ejecutar pide el archivo perdido mozz.dll; la instalación falla.
-
Tanto Firefox como Thunderbird,deberían compilarse con las etiquetas --enable-static --disable-shared
-
shlibsign.exe - Entry Point Not Found; El procedimiento CERT_GetFirstEmailAddress no ha sido localizado en la librería nss3.dll.
-
Tal vez tengas muchos nss3.dll en tu máquina y en tu path. Haz una búsqueda para todas las copias de este archivo. Mueve todas las copias que se encuentren dentro del árbol de Firefox durante la compilación y vuelve a colocarlos cuando se termine la compilación.
-
- -

Preguntas sobre Mingw32

- - - -

Preguntas sobre Unix

- -
-
Galeon necesita libgtksuperwin.so pero no tengo ese archivo en mi Mozilla gtk2, dónde está?
-
Sólo Mozilla gtk1 compila libgtksuperwin.so. Si deseas usar galeon con compilación gtk2, debes usar galeon2. -

 

-
-
Por qué la configuración dice que necesito libIDL >= 0.6.3 cuando tengo instalado libIDL 0.8.x?
-
libIdl 0.8.x sólo puede ser usado compilando con gtk2. Por defecto, Mozilla compila con gtk1. Para usar libIDl 0.8.x y gtk2 debes especificar --enable-default-toolkit=gtk2 en la línea de comando de laconfiguración o  .mozconfig. NOTA: Esto es viejo y ha sido arreglado en Mozilla 1.8
-
Cómo compilo en Solaris 10 x86 (SeaMonkey)?
-
Tuve que hacer lo siguiente para conseguir un entorno que funcione:
-
1. instalar forte (Gratis desde Sun)
-
2. Instalar gmake (desde blastwave)
-
3. mv /usr/ucb/cc /usr/ucb/cc.hold
-
4. CFLAGS="-xlibmil"; exporta CFLAGS
-
5. CXXFLAGS="-xlibmil -xlibmopt -features=tmplife -norunpath"; exporta CXXFLAGS
-
6. LDFLAGS='-R$ORIGIN -R/usr/sfw/lib -R/opt/sfw/lib -R/usr/local/lib -R/opt/csw/lib'; exporta LDFLAGS
-
7. PATH=$PATH:/opt/SUNWspro/bin:/opt/csw/bin:/opt/csw/sbin:/usr/ucb/bin:/usr/ccs/bin; exporta PATH
-
8. LD_LIBRARY_PATH=/opt/SUNWspro/lib:$LD_LIBRARY_PATH; exporta LD_LIBRARY_PATH
-
9. Crear un archivo mozconfig y compilar normalmente.
-
10. La generación del paquete (tar y gzip) falló, así que simplemente lo cree manualmente con los archivos resultantes en el directorio dist.
-
libxpcom_core.so: cannot restore segment prot after reloc: Permission denied</dt>
-
Probablemente estés usando Fedora Core 5, o alguna otra distribución de Linux que tiene activado SELinux. Para arreglarlo, utiliza el comando 'chcon -t chcon -t texrel_shlib_t lib*' en el directorio dist/bin.</dd>
-
diff --git a/files/es/mozilla/developer_guide/source_code/cvs/index.html b/files/es/mozilla/developer_guide/source_code/cvs/index.html new file mode 100644 index 0000000000..248231aee9 --- /dev/null +++ b/files/es/mozilla/developer_guide/source_code/cvs/index.html @@ -0,0 +1,149 @@ +--- +title: Código fuente de Mozilla (CVS) +slug: Mozilla/Developer_guide/Source_Code/Código_fuente_de_Mozilla_(CVS) +tags: + - Documentación_de_compilado +translation_of: Mozilla/Developer_guide/Source_Code/CVS +--- +

 

+

Aquellos que desarrollan de forma muy activa pueden comprobar el último código fuente utilizando CVS. Si vas a realizar parches y arreglos este es el método más adecuado, porque te permite ver los últimos cambios y unirlos con los tuyos.

+

Si quieres compilar el producto para su publicación, es mejor Descargar el código fuente de Mozilla en un archivo tar.

+

Guía rápida

+

I seem to not be editing this page in what others on this development site deem appropriate. So, if you are going to just remove this section, can you please be so kind as to suggest an alternate title of a new page that I can put this information on? Thanks, Jeff Carr

+

Los pasos básicos para descargar la rama (inestable) del código fuente de Firefox son:

+
cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/client.mk
+cd mozilla
+make -f client.mk checkout MOZ_CO_PROJECT=browser
+
+

Comenzando

+

CVS significa "Concurrent Versioning System". Para conocer más sobre CVS en general visita ximbiot.com, o lee el tutorial.

+

Cualquiera puede descargar ("check out") el código fuente vía CVS, pero solo ciertas personas pueden subir cambios ("check in" o "commit"). Esas personas son los dueños de módulos y sus delegados. Lee nuestro documento sobre mejorar mozilla para saber como puedes tener la habilidad de enviar cambios. Quizá quieras leer tambien acerca de como usar SSH para conectar al CVS.

+

Requisitos

+

Para descargar el código fuente, necesitas CVS versión 1.11 o posterior. La versión 1.12.13 no funciona con el servidor CVS, y el resultado es que el programa se cuelga, sin embargo la versión 1.12.9 parece funcioanr. Además, debes usar GNU make para descargar y compilar Mozilla. No se acepta ningún otro programa "make". En windows, mac y sistemas GNU habituales (como GNU/Linux), usa "make" para ejecutar GNU make; en la mayoría de los sistemas UNIX no GNU (como por ejemplo Solaris), usa "gmake".

+

Configuración de cliente CVS

+

El "cvsroot" (cadena de identificación del repositorio) que se utiliza para acceder a CVS Mozilla de forma anónima es:

+
:pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot
+
+

Si usas una interface CVS gráfica, utiliza los siguientes datos del servidor:

+ +

Elegir un proyecto para descargar

+

Ya que se usa el mismo código para compilar distintas aplicaciones debes elegir qué aplicación quieres descargar en la línea de comandos usando la variable MOZ_CO_PROJECT. esta información debe proporcionarse cuando se necesite para la descarga del código fuente actual (lee la sección apropiada sobre la descarga más abajo, dependiendo de la rama que quieras descargar). Las posibles opciones incluyen:

+
+
+ browser 
+
+ El navegador "Firefox".
+
+ mail 
+
+ El cliente de correo/noticias "Thunderbird".
+
+ suite 
+
+ La suite traditional "Mozilla" SeaMonkey con navegador, correo/noticias, editor web, y otras aplicaciones.
+
+ minimo 
+
+ El navegador para pequeños dispositivos.
+
+ composer 
+
+ El editor HTML.
+
+ calendar 
+
+ La aplicación de calendario "Sunbird".
+
+ xulrunner 
+
+ El interprete de nueva generación para aplicaciones XUL.
+
+ camino 
+
+ El navegador nativos para Macintosh, "Camino".
+
+ tamarin 
+
+ La máquina virtual Adobe Ecmascript.
+
+ all 
+
+ Descarga todos los códigos fuente de todos los proyectos de arriba, además de código útil adicional
+
+

Se pueden especificar varios proyectos con comas: MOZ_CO_PROJECT=suite,browser,xulrunner.

+

Ten en cuenta que si estas usando un archivo <tt>.mozconfig</tt> personalizado, debes especificar también el MOZ_CO_PROJECT allí, en vez de hacerlo en la línea de comandos.

+

Descargar el código de una rama nueva

+

Comprueba el Tinderbox

+

Antes de descargar una rama, debes comprobar siempre el Tinderbox apropiado para asegurarte que el código base no esta roto. Si hay tinderboxes en rojo, normalmente es recomendable esperar hasta que estén en verde antes de descargar una rama.

+

Rama HEAD

+

Para descargar una rama nuevo desde cero, toma el archivo client.mk que es el que contiene las instruciones que se usarán para descargar el resto de la rama:

+
$ cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/client.mk
+
+

Nota: Si ya tienes un archivo .mozconfig, quizá necesites descargar los siguientes archivos:

+
+
+ Firefox 
+
+ 
cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/browser/config/mozconfig
+
+
+ Thunderbird 
+
+ 
cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/mail/config/mozconfig
+
+
+

Rama específica

+

Si quieres descargar el código de alguna rama CVS específica, usa:

+
$ cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co -r RAMA mozilla/client.mk
+
+

Por ejemplo, para descargar la rama en desarrollo de Firefox 2.0, reemplaza RAMA por MOZILLA_1_8_BRANCH. Para ver las ramas disponibles en Mozilla, mira las Etiquetas CVS.

+

Para información sobre como descargar los archivos .mozconfig de un proyecto específico, lee la sección anterior (Por supuesto aplicable a otras ramas diferentes de HEAD también).

+

Descargar

+

Después de elegir la rama correspondiente, ejecuta:

+
$ cd mozilla
+$ make -f client.mk checkout MOZ_CO_PROJECT=opción,opción
+
+

Cómo se mencionó arriba, si ya tienes especificado la rama en un archivo .mozconfig personalizado, no necesitas hacerlo en la línea de comando.

+
+ Utiliza siempre client.mk para descargar las fuentes Mozilla: no descargues directamente el módulo mozilla/, se descargían varios subprojectos como NSS, NSPR y LDAP C SDK, pero el desarrollo habitual de mozilla se da en el tronco (trunk).
+

Fecha específica

+

Si quieres descargar el código de alguna fecha en particular utiliza la variable MOZ_CO_DATE. Por ejemplo <tt>MOZ_CO_DATE="20 Oct 2006 17:00 PDT"</tt>

+

También se puede agregar en el .mozconfig, o escribir en la línea de comandos:

+
$ cd mozilla
+$ make -f client.mk checkout MOZ_CO_DATE="20 Oct 2006 17:00 PDT" MOZ_CO_PROJECT=option,option
+
+

Cambiar el árbol de código a una rama diferente

+

Branch HEAD

+

Para actualizar el árbol de código (ya sea la rama HEAD o cualquier otra) a la última versión, primero ejecuta:

+
$ cd mozilla
+$ cvs up -A client.mk
+
+

La opción -a elimina cualquier información "pegada a la rama", actualizaría la rama HEAD.

+

Rama específica

+

Para actualizar el árbol de código de una rama especifica descargado con anterioridad usa:

+
$ cd mozilla
+$ cvs up -r RAMA client.mk
+
+

Reemplaza RAMA con la etiqueta de la rama que desees actualizar.

+

Actualizar el árbol de código

+

Para actualizar el árbol de código simplemente haz lo siguiente:

+
$ make -f client.mk checkout MOZ_CO_PROJECT=opción,opción
+
+

Igual que siempre, si tienes un .mozconfig personalizado con MOZ_CO_PROJECT definido, no necesitas repetirlo en la línea de comando.

+

Creando un archivo Diff

+

Para crear un diff de un archivo local para aplicar en el archivo actual en reposición, usa:

+
$ cvs diff -u8p NOMBREDEARCHIVO
+
+

Mira Crear un parche para más información.

+

Convertir el árbol de código descargado

+

Los árboles descargados desde mozilla.org (tarballs con el código fuente) ya poseen información CVS, cómo una descarga normal. Puedes actualizarlo como cualquier otro árbol al la última versión, sin ninguna acción en especial. Para ver cómo actualizar un árbol, mira la sección anterior

+

interwiki link

+
+  
+

{{ languages( { "en": "en/Mozilla_Source_Code_(CVS)", "fr": "fr/Obtenir_le_code_source_de_Mozilla_via_CVS", "ja": "ja/Mozilla_Source_Code_(CVS)", "zh-cn": "cn/\u901a\u8fc7CVS\u83b7\u53d6\u6e90\u7801" } ) }}

diff --git "a/files/es/mozilla/developer_guide/source_code/c\303\263digo_fuente_de_mozilla_(cvs)/index.html" "b/files/es/mozilla/developer_guide/source_code/c\303\263digo_fuente_de_mozilla_(cvs)/index.html" deleted file mode 100644 index 248231aee9..0000000000 --- "a/files/es/mozilla/developer_guide/source_code/c\303\263digo_fuente_de_mozilla_(cvs)/index.html" +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Código fuente de Mozilla (CVS) -slug: Mozilla/Developer_guide/Source_Code/Código_fuente_de_Mozilla_(CVS) -tags: - - Documentación_de_compilado -translation_of: Mozilla/Developer_guide/Source_Code/CVS ---- -

 

-

Aquellos que desarrollan de forma muy activa pueden comprobar el último código fuente utilizando CVS. Si vas a realizar parches y arreglos este es el método más adecuado, porque te permite ver los últimos cambios y unirlos con los tuyos.

-

Si quieres compilar el producto para su publicación, es mejor Descargar el código fuente de Mozilla en un archivo tar.

-

Guía rápida

-

I seem to not be editing this page in what others on this development site deem appropriate. So, if you are going to just remove this section, can you please be so kind as to suggest an alternate title of a new page that I can put this information on? Thanks, Jeff Carr

-

Los pasos básicos para descargar la rama (inestable) del código fuente de Firefox son:

-
cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/client.mk
-cd mozilla
-make -f client.mk checkout MOZ_CO_PROJECT=browser
-
-

Comenzando

-

CVS significa "Concurrent Versioning System". Para conocer más sobre CVS en general visita ximbiot.com, o lee el tutorial.

-

Cualquiera puede descargar ("check out") el código fuente vía CVS, pero solo ciertas personas pueden subir cambios ("check in" o "commit"). Esas personas son los dueños de módulos y sus delegados. Lee nuestro documento sobre mejorar mozilla para saber como puedes tener la habilidad de enviar cambios. Quizá quieras leer tambien acerca de como usar SSH para conectar al CVS.

-

Requisitos

-

Para descargar el código fuente, necesitas CVS versión 1.11 o posterior. La versión 1.12.13 no funciona con el servidor CVS, y el resultado es que el programa se cuelga, sin embargo la versión 1.12.9 parece funcioanr. Además, debes usar GNU make para descargar y compilar Mozilla. No se acepta ningún otro programa "make". En windows, mac y sistemas GNU habituales (como GNU/Linux), usa "make" para ejecutar GNU make; en la mayoría de los sistemas UNIX no GNU (como por ejemplo Solaris), usa "gmake".

-

Configuración de cliente CVS

-

El "cvsroot" (cadena de identificación del repositorio) que se utiliza para acceder a CVS Mozilla de forma anónima es:

-
:pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot
-
-

Si usas una interface CVS gráfica, utiliza los siguientes datos del servidor:

- -

Elegir un proyecto para descargar

-

Ya que se usa el mismo código para compilar distintas aplicaciones debes elegir qué aplicación quieres descargar en la línea de comandos usando la variable MOZ_CO_PROJECT. esta información debe proporcionarse cuando se necesite para la descarga del código fuente actual (lee la sección apropiada sobre la descarga más abajo, dependiendo de la rama que quieras descargar). Las posibles opciones incluyen:

-
-
- browser 
-
- El navegador "Firefox".
-
- mail 
-
- El cliente de correo/noticias "Thunderbird".
-
- suite 
-
- La suite traditional "Mozilla" SeaMonkey con navegador, correo/noticias, editor web, y otras aplicaciones.
-
- minimo 
-
- El navegador para pequeños dispositivos.
-
- composer 
-
- El editor HTML.
-
- calendar 
-
- La aplicación de calendario "Sunbird".
-
- xulrunner 
-
- El interprete de nueva generación para aplicaciones XUL.
-
- camino 
-
- El navegador nativos para Macintosh, "Camino".
-
- tamarin 
-
- La máquina virtual Adobe Ecmascript.
-
- all 
-
- Descarga todos los códigos fuente de todos los proyectos de arriba, además de código útil adicional
-
-

Se pueden especificar varios proyectos con comas: MOZ_CO_PROJECT=suite,browser,xulrunner.

-

Ten en cuenta que si estas usando un archivo <tt>.mozconfig</tt> personalizado, debes especificar también el MOZ_CO_PROJECT allí, en vez de hacerlo en la línea de comandos.

-

Descargar el código de una rama nueva

-

Comprueba el Tinderbox

-

Antes de descargar una rama, debes comprobar siempre el Tinderbox apropiado para asegurarte que el código base no esta roto. Si hay tinderboxes en rojo, normalmente es recomendable esperar hasta que estén en verde antes de descargar una rama.

-

Rama HEAD

-

Para descargar una rama nuevo desde cero, toma el archivo client.mk que es el que contiene las instruciones que se usarán para descargar el resto de la rama:

-
$ cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/client.mk
-
-

Nota: Si ya tienes un archivo .mozconfig, quizá necesites descargar los siguientes archivos:

-
-
- Firefox 
-
- 
cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/browser/config/mozconfig
-
-
- Thunderbird 
-
- 
cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/mail/config/mozconfig
-
-
-

Rama específica

-

Si quieres descargar el código de alguna rama CVS específica, usa:

-
$ cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co -r RAMA mozilla/client.mk
-
-

Por ejemplo, para descargar la rama en desarrollo de Firefox 2.0, reemplaza RAMA por MOZILLA_1_8_BRANCH. Para ver las ramas disponibles en Mozilla, mira las Etiquetas CVS.

-

Para información sobre como descargar los archivos .mozconfig de un proyecto específico, lee la sección anterior (Por supuesto aplicable a otras ramas diferentes de HEAD también).

-

Descargar

-

Después de elegir la rama correspondiente, ejecuta:

-
$ cd mozilla
-$ make -f client.mk checkout MOZ_CO_PROJECT=opción,opción
-
-

Cómo se mencionó arriba, si ya tienes especificado la rama en un archivo .mozconfig personalizado, no necesitas hacerlo en la línea de comando.

-
- Utiliza siempre client.mk para descargar las fuentes Mozilla: no descargues directamente el módulo mozilla/, se descargían varios subprojectos como NSS, NSPR y LDAP C SDK, pero el desarrollo habitual de mozilla se da en el tronco (trunk).
-

Fecha específica

-

Si quieres descargar el código de alguna fecha en particular utiliza la variable MOZ_CO_DATE. Por ejemplo <tt>MOZ_CO_DATE="20 Oct 2006 17:00 PDT"</tt>

-

También se puede agregar en el .mozconfig, o escribir en la línea de comandos:

-
$ cd mozilla
-$ make -f client.mk checkout MOZ_CO_DATE="20 Oct 2006 17:00 PDT" MOZ_CO_PROJECT=option,option
-
-

Cambiar el árbol de código a una rama diferente

-

Branch HEAD

-

Para actualizar el árbol de código (ya sea la rama HEAD o cualquier otra) a la última versión, primero ejecuta:

-
$ cd mozilla
-$ cvs up -A client.mk
-
-

La opción -a elimina cualquier información "pegada a la rama", actualizaría la rama HEAD.

-

Rama específica

-

Para actualizar el árbol de código de una rama especifica descargado con anterioridad usa:

-
$ cd mozilla
-$ cvs up -r RAMA client.mk
-
-

Reemplaza RAMA con la etiqueta de la rama que desees actualizar.

-

Actualizar el árbol de código

-

Para actualizar el árbol de código simplemente haz lo siguiente:

-
$ make -f client.mk checkout MOZ_CO_PROJECT=opción,opción
-
-

Igual que siempre, si tienes un .mozconfig personalizado con MOZ_CO_PROJECT definido, no necesitas repetirlo en la línea de comando.

-

Creando un archivo Diff

-

Para crear un diff de un archivo local para aplicar en el archivo actual en reposición, usa:

-
$ cvs diff -u8p NOMBREDEARCHIVO
-
-

Mira Crear un parche para más información.

-

Convertir el árbol de código descargado

-

Los árboles descargados desde mozilla.org (tarballs con el código fuente) ya poseen información CVS, cómo una descarga normal. Puedes actualizarlo como cualquier otro árbol al la última versión, sin ninguna acción en especial. Para ver cómo actualizar un árbol, mira la sección anterior

-

interwiki link

-
-  
-

{{ languages( { "en": "en/Mozilla_Source_Code_(CVS)", "fr": "fr/Obtenir_le_code_source_de_Mozilla_via_CVS", "ja": "ja/Mozilla_Source_Code_(CVS)", "zh-cn": "cn/\u901a\u8fc7CVS\u83b7\u53d6\u6e90\u7801" } ) }}

diff --git a/files/es/mozilla/firefox/releases/1.5/index.html b/files/es/mozilla/firefox/releases/1.5/index.html new file mode 100644 index 0000000000..2372dd0f81 --- /dev/null +++ b/files/es/mozilla/firefox/releases/1.5/index.html @@ -0,0 +1,164 @@ +--- +title: Firefox 1.5 para Desarrolladores +slug: Firefox_1.5_para_Desarrolladores +tags: + - CSS + - Complementos + - DOM + - Desarrollo_Web + - Estándares_Web + - HTML + - JavaScript + - RDF + - SVG + - Servicios_Web_XML + - Todas_las_Categorías + - XML + - XSLT + - XUL + - extensiones +translation_of: Mozilla/Firefox/Releases/1.5 +--- +
{{FirefoxSidebar}}

Firefox 1.5

+ +

Se ha lanzado Firefox 1.5 y ya se puede descargar descarga. Este programa esta basado en el motor de Gecko 1.8, esta nueva versión del navegador mejora su ya magnífico soporte a los estándares web y proporciona nuevas capacidades que hacen posible una nueva generación de aplicaciones web. Algunas de las nuevas características de Firefox 1.5 son: soporte de CSS2 y CSS3 mejorado, APIs para programar gráficos en 2D por medio de <canvas>, o gráficos vectoriales con SVG 1.1, XForms y eventos XML, así como muchas mejoras en DHTML, JavaScript y DOM.

+ +

Firefox 1.5 ya puede descargarse en el siguiente link: - http://www.mozilla.com/firefox/

+ +

Herramientas para desarrolladores

+ +

Firefox 1.5 dispone de diversas herramientas y extensiones de gran utilidad para los desarrolladores.

+ + + +

Nota: Algunas extensiones no soportan actualmente Firefox 1.5, y serán automáticamente desactivadas.

+ +

Descripción

+ +

Algunas de las nuevas características en Firefox 1.5:

+ +

Desarrolladores de sitios web y aplicaciones

+ +
+
Introducción a SVG en HTML
+
Aprenda cómo usar SVG en sus páginas XHTML y a manipular imágenes con JavaScript y CSS de forma similar a como haría un script para XHTML. Vea también SVG en Firefox 1.5 para saber más sobre el estado y los problemas de la implementación de SVG en Firefox 1.5.
+
+ +
+
Dibujar gráficos con Canvas 
+
Aprenda acerca de la nueva etiqueta <canvas> y cómo dibujar gráficos y otros objetos en Firefox.
+
+ +
+
Columnas con CSS-3 
+
Aprenda sobre el soporte a la disposición automática de texto en multi-columnas según lo propuesto en CSS3.
+
+ +
+
El cache de Firefox 1.5 
+
Aprenda acerca de bfcache y cómo aumenta la velocidad de la navegación en páginas ya visitadas.
+
+ +

XUL y Desarrolladores de Extensión

+ +
+
Creando una extensión 
+
Este tutorial te llevará a través de los pasos necesarios para construir una extensión para Firefox muy básica. Ver también otro tutorial en la base de conocimiento MozillaZine, el cual demuestra las nuevas características del Administrador de Extensión en 1.5, que hace la creación de una nueva extensión incluso mas fácil.
+
+ +
+
XPCNativeWrapper 
+
XPCNativeWrapper es una forma de envolver un objeto cuyo acceso es seguro desde un código privilegiado. Puede ser usado en todas las versiones de Firefox, a pesar que su funcionamiento ha cambiado con la versión 1.5 (Gecko 1.8).
+
+ +
+
Preferencias del Sistema 
+
Aprenda acerca de los nuevos widgets, que te permiten crear ventanas de Opciones mas fácilmente y usando menos código JavaScript.
+
+ +
+
Caracteres Internacionales en XUL JavaScript 
+
Ahora los archivos XUL JavaScript pueden contener caracteres no-ASCII.
+
+ +
+
Cambios en el API tree 
+
Las interfaces para acceder a los elementos <tree> han cambiado.
+
+ +
+
Cambios en XUL en Firefox 1.5 
+
Un resumen de los cambios en Xul. Vea también Adaptando las aplicaciones XUL a Firefox 1.5.
+
+ +
+
Cambios referentes a la red 
+
 
+
+ + + +

Nuevas características para el usuario final

+ +

Experiencia de usuario

+ + + +

Seguridad y privacidad

+ + + +

Soporte a los estándares Web

+ +

Firefox es lider de la industria en el soporte a los estandares Web con constantes implementaciones multiplataforma para:

+ + + +

Firefox 1.5 soporta: los siguientes protocolos para transporte de datos (HTTP, FTP, SSL, TLS, y otros), caracteres multilingües (Unicode), múltiples formatos gráficos (GIF, JPEG, PNG, SVG, y otros) y la última versión del lenguaje para scripts más popular del mundo, JavaScript 1.6.

+ +

Cambios desde Firefox 1.0

+ +

Muchos cambios han sido introducido en Firefox desde su lanzamiento el 9 de noviembre de 2004. Firefox ha sido mejorado con muchas nuevas características y correciones de bugs. Las release-notes de Deer Park y Firefox son unas excelentes fuentes la información sobre los cambios en cada lanzamiento de Firefox.

+ + diff --git a/files/es/mozilla/firefox/releases/19/index.html b/files/es/mozilla/firefox/releases/19/index.html new file mode 100644 index 0000000000..bf38aea264 --- /dev/null +++ b/files/es/mozilla/firefox/releases/19/index.html @@ -0,0 +1,66 @@ +--- +title: Firefox 19 para Desarrolladores +slug: Firefox_19_para_desarrolladores +translation_of: Mozilla/Firefox/Releases/19 +--- +
{{FirefoxSidebar}}
+ +

+

Quieres ayudar a documentar Firefox 19? Visita la lista de bugs que necesitan ser revisados e inicia!

+

+ +

Cambios para desarrolladores

+ +

JavaScript

+ + + +

CSS

+ + + +

DOM

+ + + +

XForms

+ +

Support for XForms has been removed in Firefox 19.

+ +

Changes for add-on and Mozilla developers

+ +
+

Note: A key change in Firefox 19 is that nsresult is now strongly typed. This will help make it easier to detect bugs that are caused by mishandling of return values, but may cause existing code to break if it's making incorrect assumptions in this regard.

+
+ + + +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers('18')}}

diff --git a/files/es/mozilla/firefox/releases/2/adding_feed_readers_to_firefox/index.html b/files/es/mozilla/firefox/releases/2/adding_feed_readers_to_firefox/index.html new file mode 100644 index 0000000000..5b8c50bc83 --- /dev/null +++ b/files/es/mozilla/firefox/releases/2/adding_feed_readers_to_firefox/index.html @@ -0,0 +1,51 @@ +--- +title: Añadir lectores de canales a Firefox +slug: Añadir_lectores_de_canales_a_Firefox +tags: + - RSS + - Todas_las_Categorías +translation_of: Mozilla/Firefox/Releases/2/Adding_feed_readers_to_Firefox +--- +
{{FirefoxSidebar}}

A partir de Firefox 2, Firefox permite seleccionar diferentes lectores de canales RSS o Atom para usarlos cuando se trata de leer un canal. Este artículo proporciona información sobre cómo añadir lectores adicionales no admitidos por defecto.

+ +

Añadir un nuevo lector de canales basado en la web

+ +

Para añadir un nuevo lector de canales basado en la web, todo lo que tiene que hacer es añadir tres nuevas preferencias:

+ +
+
browser.contentHandlers.types.número.title
+
El nombre del lector de canales.
+
browser.contentHandlers.types.número.type
+
Para un lector de canales, en este caso sería "application/vnd.mozilla.maybe.feed".
+
browser.contentHandlers.types.número.uri
+
La URI del lector de canales. Utilice "%s" donde se deba insertar la URL del canal.
+
+ +

número debe ser reemplazado con el siguiente número único más alto que no haya sido usado aún. Por ejemplo, si desea añadir un nuevo lector de canales llamado "Lector Sencillo", y ya están definidos manejadores de contenido con los números 0 al 4, debe sustituir número por 5, como sigue:

+ + + +

Puede añadir estas preferencias manualmente, visitando about:config, o puede programarlo, si una extensión desea instalar un nuevo lector de canales.

+ +

Añadir un lector de canales desde una aplicación web

+ +

El código JavaScript en la web puede añadir un lector de canales fácilmente, usando la función navigator.registerContentHandler(), de esta manera:

+ +
navigator.registerContentHandler("application/vnd.mozilla.maybe.feed",
+                                 "http://www.urllectorsencillo.com?feed=%s",
+                                 "Lector Sencillo");
+
+ +

Añadir una nueva aplicación lectora de canales

+ +

La manera más sencilla de hacer esto es simplemente usar la interfaz de usuario disponible, usando el panel Canales en la ventana de preferencias (u opciones, dependiendo de su plataforma).

+ +

También se puede hacer programáticamente mediante una extensión, lo cual se hace estableciendo el valor de la opción browser.feeds.handlers.application a la ruta de la aplicación a usar para leer los canales.

+ +
 
+ +

{{ languages( { "en": "en/Adding_feed_readers_to_Firefox", "ja": "ja/Adding_feed_readers_to_Firefox", "zh-tw": "zh_tw/\u65b0\u589e\u6d88\u606f\u4f86\u6e90\u95b1\u8b80\u5de5\u5177" } ) }}

diff --git a/files/es/mozilla/firefox/releases/2/index.html b/files/es/mozilla/firefox/releases/2/index.html new file mode 100644 index 0000000000..54da671995 --- /dev/null +++ b/files/es/mozilla/firefox/releases/2/index.html @@ -0,0 +1,157 @@ +--- +title: Firefox 2 para desarrolladores +slug: Firefox_2_para_desarrolladores +tags: + - CSS + - Complementos + - DOM + - Desarrollo_Web + - Estándares_Web + - HTML + - JavaScript + - RDF + - SVG + - Servicios_Web_XML + - Todas_las_Categorías + - XML + - XSLT + - XUL + - extensiones +translation_of: Mozilla/Firefox/Releases/2 +--- +
{{FirefoxSidebar}}

Nuevas características para desarrolladores en Firefox 2

+ +

Firefox 2 aporta gran cantidad de funcionalidades nuevas, este artículo proporciona enlaces que describen estas nuevas capacidades.

+ +

Para desarrolladores de sitios y aplicaciones web.

+ +
+
MicroResúmenes (en)
+
Son breves recopilaciones actualizables de la información más importante en una página Web. Pueden ser proporcionados por los desarrolladores del sitio o por terceros. Cuando se añade a marcadores una página con esta funcionalidad, los usuarios pueden escoger que se muestre este microresúmen en vez del típico título estático.
+
+ +
+
Cómo crear un Microresumen
+
Tutorial sobre cómo crear un generador de microresúmenes.
+
+ +
+
Marcado XML en los microresúmenes
+
Una guía de referencia sobre el marcado XML usado para crear microresúmenes.
+
+ +
+
Soporte OpenSearch
+
Firefox 2 admite el formato de búsqueda OpenSearch.
+
+ +
+
Creación de plugins MozSearch
+
Firefox 2 soporta MozSearch, un plugin de búsqueda basado en OpenSearch, pero previsto sólo para uso interno.
+
+ +
+
Permitir sugerencias en los plugins de búsqueda
+
Cómo hacer que su plugin MozSearch ofrezca sugerencias de búsqueda en una ventana emergente cuando usamos la barra de búsqueda.
+
+ +
+
Novedades en JavaScript 1.7
+
Firefox 2 soporta JavaScript 1.7, que incluye nuevas características como let, asignación desestructurada, generadores e iteradores, y "array comprehensions".
+
+ +
+
WHATWG Sesiones del lado cliente y el almacenamiento continuo (Almacenamiento DOM)
+
Las sesiones del lado cliente y el almacenamiento continuo permiten que las aplicaciones web puedan almacenar datos estructurados en el lado del cliente.
+
+ +
+
SVG en Firefox
+
Firefox 2 mejora el soporte a Gráficos Vectoriales Escalables (SVG), implementando el elemento <textPath> y aumentando el número de atributos soportados.
+
+ +
+
Control de la corrección ortográfica en formularios HTML
+
Firefox 2 incluye soporte para la revisión ortográfica en línea de los campos y áreas de texto. Este artículo describe cómo escribir HTML para activar o desactivar la revisión ortográfica en los elementos del formulario de manera individual.
+
+ +
+
Seguridad en Firefox 2
+
Firefox 2 cambia los protocolos de seguridad que están activos por defecto.
+
+ +

Para desarrolladores XUL y de extensiones

+ +
+
API de restauración de sesión
+
Aporta métodos para poder guardar y restaurar entre sesiones en Firefox.
+
+ +
+
API de acceso a canales
+
API que permite al desarrollador tener acceso y parsear canales Atom y RSS.
+
+ +
+
SAX
+
API de parseo basado en eventos XML.
+
+ +
+
Instalación de motores de búsqueda desde páginas web
+
Un código JavaScript puede indicarle a Firefox cómo instalar el plugin de un nuevo motor de búsqueda escrito en formato Sherlock u OpenSearch.
+
+ +
+
Añadir datos para la protección anti-phishing
+
Es posible aumentar la protección anti-phishing de Firefox añadiendo datos adicionales del proveedor para un sistema de navegación seguro.
+
+ +
+
Añadir lectores de canales a Firefox
+
Puedes añadir más lectores de canales a Firefox, ya sean webs o aplicaciones.
+
+ +
+
Almacenamiento
+
Firefox 2 presenta mozStorage, una arquitectura de base de datos basada en sqlite.
+
+ +
+
Cambios del tema en Firefox 2
+
Comenta los cambios necesarios para actualizar temas existentes para que funcionen en Firefox 2.
+
+ +

Nuevas características para usuarios finales

+ +

Firefox 2.0 proporciona una versión mejorada de la limpia interfaz que ofrecía en versiones anteriores. Con mejoras de seguridad para que tu experiencia en línea sea más segura y práctica que nunca.

+ +

Experiencia de usuario

+ + + +

Seguridad y privacidad

+ + + +

Vea también

+ + + +

Categorías

+ +

Interwiki links

+ +

{{ languages( { "ca": "ca/Firefox_2_per_a_desenvolupadors", "en": "en/Firefox_2_for_developers", "fr": "fr/Firefox_2_pour_les_d\u00e9veloppeurs", "it": "it/Firefox_2.0_per_Sviluppatori", "ja": "ja/Firefox_2_for_developers", "ko": "ko/Firefox_2_for_developers", "pl": "pl/Firefox_2_dla_programist\u00f3w", "pt": "pt/Firefox_2_para_desenvolvedores", "zh-tw": "zh_tw/Firefox_2_\u6280\u8853\u6587\u4ef6" } ) }}

diff --git a/files/es/mozilla/firefox/releases/2/security_changes/index.html b/files/es/mozilla/firefox/releases/2/security_changes/index.html new file mode 100644 index 0000000000..43b55fff7c --- /dev/null +++ b/files/es/mozilla/firefox/releases/2/security_changes/index.html @@ -0,0 +1,13 @@ +--- +title: Seguridad en Firefox 2 +slug: Seguridad_en_Firefox_2 +tags: + - Seguridad + - Todas_las_Categorías +translation_of: Mozilla/Firefox/Releases/2/Security_changes +--- +
{{FirefoxSidebar}}

Firefox 2 tiene tanto SSLv2 como la débil "exportación" de juegos de claves desactivados por defecto, en favor de SSLv3. Esto proporciona mejoras en la seguridad.

+ +

Los métodos preferidos de encriptación son TLS_DHE_DSS_WITH_3DES_EDE_CBC_SHA y TLS_RSA_WITH_3DES_EDE_CBC_SHA. Algunos sevidores se refieren a ellos como SSL_DHE_DSS_WITH_3DES_EDE_CBC_SHA y SSL_RSA_WITH_3DES_EDE_CBC_SHA.

+ +

Si el soporte SSLv2 tuviera que ser activado, puede hacerse cambiando en las preferencias de usuario el valor security.ssl2.* deseado a true.

diff --git a/files/es/mozilla/firefox/releases/3.5/index.html b/files/es/mozilla/firefox/releases/3.5/index.html new file mode 100644 index 0000000000..5043206fe8 --- /dev/null +++ b/files/es/mozilla/firefox/releases/3.5/index.html @@ -0,0 +1,231 @@ +--- +title: Firefox 3.5 para desarrolladores +slug: Firefox_3.5_para_desarrolladores +translation_of: Mozilla/Firefox/Releases/3.5 +--- +
{{FirefoxSidebar}}

Firefox 3.5 implementa nuevas funcionalidades, además de agregar y mejorar el funcionamiento de una amplia variedad de estándares web. Este artículo ofrece una extensa lista con enlaces a artículos que explican estas grandes mejoras.

+ +

Nuevas funcionalidades para desarrolladores en Firefox 3.5

+ +

Para desarrolladores de sitios y aplicaciones web

+ +

Funciones de HTML 5

+ +
+
Usar audio y video en Firefox
+
Firefox 3.5 implementa los elementos  audio y video de HTML 5.
+
Recursos sin conexión en Firefox
+
Firefox 3.5 implementa de forma completa la especificación para recursos sin conexión de HTML 5.
+
Arrastrar y soltar (Drag and drop)
+
La API para arrastrar y soltar de HTML 5 permite que el usuario pueda arrastrar y soltar objetos entre sitios web. También permite una API más simple para el uso por parte de las extensiones o aplicaciones basadas en la plataforma Mozilla.
+
+ +

Nuevas características de CSS implementadas

+ +
+
Tipografías descargables
+
La nueva regla {{cssxref("@font-face")}} permite a las páginas web disponer de tipografías descargables, para que los sitios web puedan ser visualizados como el autor lo pretende.
+
Pedidos de CSS según el medio
+
Firefox 3.5 implementa esta característica que permite al autor del sitio web tener más control sobre el archivo CSS que cada dispositivo va a recibir según las características del mismo.
+
{{cssxref(":before")}} y {{cssxref(":after")}} actualizados a CSS 2.1
+
Los pseudo-elementos :before y :after han sido actualizados para implementar por completo las características de CSS 2.1, añadiendo la posibilidad de usar position, float, list-style-* y algunas propiedades de display.
+
opacity
+
La extensión al CSS -moz-opacity fue eliminada para implementar la propiedad estandar opacity.
+
text-shadow
+
La propiedad text-shadow, que permite especificar efectos de sombra para textos y decoraciones del texto, está implementada.
+
word-wrap
+
Esta propiedad permite especificar cuando las líneas deben o no ser cortadas entre palabras para prevenir el overflow cuando una línea que no puede ser cortada es demasiado larga para entrar en una sola línea.
+
-moz-box-shadow
+
-moz-border-image
+
-moz-column-rule
+
-moz-column-rule-width
+
-moz-column-rule-style
+
-moz-column-rule-color
+
Firefox 3.5 añade la posibilidad de usar estas extensiones al CSS de Mozilla.
+
The -moz-nativehyperlinktext color value
+
Este nuevo valor del color representa el predefinido por el sistema del usuario para los hipervínculos.
+
Las nuevas propiedades -moz-window-shadow y -moz-system-metric(mac-graphite-theme)
+
Estas nuevas propiedades de CSS fueron añadidas para facilitar la creación de temas.
+
Nuevos valores para -moz-appearance
+
Los valores -moz-win-glass y -moz-mac-unified-toolbar se agregaron a -moz-appearance.
+
Usar transformaciones CSS
+
Firefox 3.5 implementa las transformaciones CSS.  Mirá -moz-transform y -moz-transform-origin para saber más detalles.
+
:nth-child
+
:nth-last-child
+
:nth-of-type
+
:nth-last-of-type
+
:first-of-type
+
:last-of-type
+
:only-of-type
+
Estos selectores pueden ser usados en Firefox 3.5.
+
+ +

Nuevas funcionalidades del DOM

+ +
+
localStorage
+
Firefox 3.5 implementa el uso de la propiedad localStorage del Web Storage, que permite que las aplicaciones web guarden datos en la computadora del cliente.
+
Usar DOM workers
+
Firefox 3.5 implementa los trabajadores (workers) del DOM lo que permite el multi-threading en las aplicaciones web.
+
Usar geolocalización
+
Firefox 3.5 implementa la API de geolocalización, que permite que las aplicaciones web obtengan información sobre la ubicación actual del usuario si unu proveedor de ese servicio está instalado y habilitado.
+
Usar JSON en Firefox
+
Posibilidad de usar JSON en el DOM.
+
Localizar elementos del DOM con selectores
+
El API de selectores permite pedirle a un documento que localice los elementos que coincidan con una regla seleccionada.
+
El objeto NodeIterator
+
El objeto NodeIterator permite recorrer la lista de nodos en un árbol del DOM.
+
El evento MozAfterPaint
+
Este nuevo evento del DOM es lanzado después de actualizar partes de una ventana.
+
El evento MozMousePixelScroll
+
Este nuevo evento del DOM permite detectar el desplazamiento con la rueda del ratón/mouse en lugar de los eventos basados en la línea de desplazamiento.
+
+ +

Nuevas funcionalidades JavaScript

+ +
+
Nuevo en JavaScript 1.8.1
+
Una introducción a todos los cambios de JavaScript 1.8.1.
+
Object.getPrototypeOf()
+
Este nuevo método retorna el prototipo de un objeto especificado.
+
Uso de JSON nativo
+
Firefox 3.5 tiene soporte para JSON nativo.
+
Nuevos métodos trim en el objeto String
+
El objeto String tiene ahora los métodos trim(), trimLeft(), y trimRight() .
+
+ +

Networking

+ +
+
Controles de acceso cross-site para HTTP
+
En Firefox 3.5, es ahora posible en las peticiones HTTP, incluyendo aquellas hechas por XMLHttpRequest, trabajar entre dominios si el servidor lo permite.
+
Eventos de progreso para XMLHttpRequest
+
Ahora se ofrecen eventos de progreso para que las extensiones puedan monitorizar el progreso de las peticiones.
+
Soporte XMLHttpRequest síncrono mejorado
+
DOM Timeout y Input Events son ahora soportados durante un XMLHttpRequest síncrono.
+
Control de prefetch de DNS
+
Firefox 3.5 ofrece prefetch de DNS, por el que resuelve nombres de dominio con anticipación para links incluidos en la página actual, para ahorrar tiempo cuando los enlaces son realmente clickados. Este artículo describe cómo puedes optimizar tu sitio web para desactivar el prefetch, o ajustar cómo opera el prefetch.
+
+ +

Nuevas funcionalidades Canvas

+ +
+
API de texto HTML 5 para elementos canvas
+
Los elementos Canvas ahora soportan la API de texto HTML 5.
+
Efectos de sombra en un canvas
+
Los efectos de sombra de Canvas son ahora soportados.
+
createImageData()
+
El método canvas createImageData() es ahora soportado, permitiendo al código crear específicamente un objeto ImageData en lugar de necesitar que sea hecho automáticamente. Esto puede mejorar el rendimiento de otros métodos ImageData evitando que deban crear el objeto.
+
Atributo moz-opaque
+
Añadido el atributo DOM moz-opaque, que permite al canvas saber si la translucencia será un factor. Si el canvas sabe que no hay translucencia, el rendimiento de pintado puede ser optimizado.
+
+ +

Nuevas funcionalidades SVG

+ +
+
Aplicar efectos SVG al contenido HTML
+
Ahora puedes aplicar efectos SVG a contenido HTML y XHTML; este artículo describe cómo.
+
+ +

Otras nuevas funcionalidades

+ +
+
Corrección de color ICC en Firefox
+
Firefox 3.5 ahora soporta corrección de color ICC para imágenes etiquetadas.
+
El atributo defer es ahora soportado en elementos script
+
Este atributo indica al navegador que puede escoger continuar parseando y renderizando la página sin esperar a que el script termine de ejecutarse.
+
+ +

Otras mejoras

+ + + +

For XUL and add-on developers

+ +

If you're an extension developer, you should start by reading Updating extensions for Firefox 3.5, which offers a helpful overview of what changes may affect your extension.

+ +

New components and functionality

+ +
+
Supporting private browsing mode
+
Firefox 3.5 offers Private Browsing mode, which doesn't record the user's activities.  Extensions may support private browsing following the guidelines offered by this article.
+
Security changes in Firefox 3.5
+
This article covers security-related changes in Firefox 3.5.
+
Theme changes in Firefox 3.5
+
This article covers theme-related changes in Firefox 3.5.
+
Monitoring WiFi access points
+
Code with UniversalXPConnect privileges can now monitor the list of available access points, getting information on their SSIDs, MAC addresses, and signal strength.  This can be used in tandem with Geolocation to offer WiFi-based location service.
+
+ +

Notable changes and improvements

+ + + +

New features for end users

+ +

User experience

+ +
+
Location aware browsing
+
If you choose, you may allow Firefox 3.5 to share information about your current location with web sites.  Firefox 3.5 can use information about the network you're connected to to share your location. Of course, it asks for your permission before doing so, to ensure your privacy.
+
Open audio and video support
+
Firefox 3.5 supports embedded video and audio using the open Ogg format, as well as WAV for audio. No plugins, no confusing error messages about needing to install something or other that turns out not to be available on your platform anyway.
+
Local data storage
+
Web applications can now use Web Storage's local storage capabilities to store data on your computer.  This is great for anything from site preferences to more complex data.
+
+ +

Security and privacy

+ +
+
Private Browsing
+
Need to use someone else's computer? Switch on Private Browsing mode and nothing will be recorded about your session, including cookies, history, and any other potentially private information.
+
Better privacy controls
+
The Privacy preference pane has been completely redesigned to offer users more control over their private information. Users can choose to retain or discard anything including history information, cookies, downloads, and form field information.  In addition, users can specify whether or not to include history and/or bookmarks in the location bar's automated suggestions, so you can keep private web addresses from popping up unexpectedly while typing in the location bar.
+
+ +

Performance

+ +
+
Faster JavaScript performance
+
JavaScript, the "J" in "AJAX," is sped up dramatically in Firefox 3.5 with the new TraceMonkey JavaScript engine.  Web applications are much faster than in Firefox 3.
+
Faster page rendering
+
Web content draws faster in Firefox 3.5, thanks to technologies such as "speculative parsing." Your users don't need to know what it means, other than "it makes things draw faster."
+
+ +

See also

+ + diff --git a/files/es/mozilla/firefox/releases/3/dom_improvements/index.html b/files/es/mozilla/firefox/releases/3/dom_improvements/index.html new file mode 100644 index 0000000000..dcc39ab4a6 --- /dev/null +++ b/files/es/mozilla/firefox/releases/3/dom_improvements/index.html @@ -0,0 +1,35 @@ +--- +title: Mejoras DOM en Firefox 3 +slug: Mejoras_DOM_en_Firefox_3 +tags: + - DOM + - Firefox 3 + - Todas_las_Categorías +translation_of: Mozilla/Firefox/Releases/3/DOM_improvements +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +

Firefox 3 ofrece una serie de mejoras sobre el Modelo de Objetos del Documento (DOM), especialmente en lo que se refiere a la implementación de extensiones de DOM añadidas por otros navegadores. Este artículo proporciona una lista de estas mejoras, además de enlaces a documentación más detallada.

+ + + +

Ver también

+ + + +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM_improvements_in_Firefox_3", "fr": "fr/Am\u00e9liorations_DOM_dans_Firefox_3", "ja": "ja/DOM_improvements_in_Firefox_3", "pl": "pl/Poprawki_DOM_w_Firefoksie_3" } ) }}

diff --git a/files/es/mozilla/firefox/releases/3/full_page_zoom/index.html b/files/es/mozilla/firefox/releases/3/full_page_zoom/index.html new file mode 100644 index 0000000000..106a680dfa --- /dev/null +++ b/files/es/mozilla/firefox/releases/3/full_page_zoom/index.html @@ -0,0 +1,46 @@ +--- +title: Zoom a página completa +slug: Zoom_a_página_completa +translation_of: Mozilla/Firefox/Releases/3/Full_page_zoom +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }} {{ Gecko_minversion_header(1.9) }}

+ +

El zoom a página completa (o sólo zoom completo) es una nueva característica que probablemente estará con Firefox 3. Puedes verla en funcionamiento en las actuales "trunk builds" desde Gecko 1.9a7. Mientras no exista aún UI puedes usar JavaScript y la interface XPCOM nsIMarkupDocumentViewer.

+ +

Ejemplo (xul:browser)

+ +

El siguiente ejemplo demuestra su uso para la ventana de navegación que posea actualmente el foco. Este es el típico uso para una extensión de Firefox.

+ +
var zoom = 1.5;
+var docViewer = getBrowser().mCurrentBrowser.markupDocumentViewer;
+docViewer.fullZoom = zoom;
+
+ +

Ejemplo (xul:iframe)

+ +

Puedes usar la característica de zoom completo incluso para un xul:iframe. Sin embargo, dado que un iframe no posee ninguna propiedad markupDocumentViewer, debemos primero obtenerla:

+ +
var zoom = 1.5;
+var iframe = document.getElementById("authorFrame");
+var contViewer = iframe.docShell.contentViewer;
+var docViewer = contViewer.QueryInterface(Components.interfaces.nsIMarkupDocumentViewer);
+docViewer.fullZoom = zoom;
+
+ +

Referencías

+ + + +

 

+ +
 
+ +

 

+ +
 
+ +

{{ languages( { "fr": "fr/Zoom_pleine_page", "ja": "ja/Full_page_zoom", "en": "en/Full_page_zoom" } ) }}

diff --git a/files/es/mozilla/firefox/releases/3/index.html b/files/es/mozilla/firefox/releases/3/index.html new file mode 100644 index 0000000000..1456bfb969 --- /dev/null +++ b/files/es/mozilla/firefox/releases/3/index.html @@ -0,0 +1,283 @@ +--- +title: Firefox 3 para desarrolladores +slug: Firefox_3_para_desarrolladores +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3 +--- +
{{FirefoxSidebar}}

Si eres un desarrollador que intenta ponerse al día con todas las nuevas características de Firefox 3, este es el lugar perfecto para empezar. Este artículo proporciona una lista de nuevos artículos que tratan sobre las características añadidas a Firefox 3. Aunque no cubre necesariamente todos los pequeños cambios, te ayudará a conocer mejor las mejoras más importantes.

+ +

 

+ +

Características nuevas para desarrolladores en Firefox 3

+ +

Para desarrolladores de sitios y aplicaciones web

+ +
+
Actualizar aplicaciones web para Firefox 3
+
Información sobre los cambios que se podrían necesitar para realizar un sitio o aplicación web y sacarle mayor ventaja a las nuevas características de Firefox 3.
+
+ +
+
Eventos online y offline
+
Firefox 3 implementa los eventos conectado y desconectado definidos por WHATWG, que permiten a aplicaciones y extensiones descubrir si una conexión activa de internet es disponible, además de detectar cuando hay conexión o desconexión.
+
+ +
+
Manipuladores de protocolo web
+
Ahora se puede registrar una aplicación web como manipulador de protocolo con el método navigator.registerProtocolHandler().
+
+ +
+
Dibujar texto usando canvas
+
Ahora se puede dibujar texto en canvas con una API no estándar implementada por Firefox 3.
+
+ +
+
Gestión de transformaciones en canvas
+
Firefox 3 administra los métodos transform() y setTransform() en canvases (lienzos).
+
+ +
+
El uso de microformatos
+
Firefox 3 tiene APIs que permiten trabajar con microformatos.
+
+ +

;Hojas de estilo alternativas :Firefox 3 implementa modelos alternativos de hojas de estilo API de objeto CSS.

+ +
+
Eventos arrastrar y soltar
+
Firefox 3 implementa nuevos eventos que se envían al nodo de origen cuando la operación de arrastre comienza y termina.
+
+ +
+
Gestión del foco en HTML
+
Se han implementado los atributos activeElement y hasFocus de la nueva especificación HTML 5.
+
+ +
+
Recursos en modo desconectado en Firefox
+
Firefox 3 permite ahora que las aplicaciones web soliciten que recursos puedan ser puestos en cache para ser ejecutados en modo desconectado.
+
+ +
+
Mejoras CSS en Firefox 3
+
Firefox 3 ofrece un número de mejoras en su implementación de CSS.
+
+ +
+
Mejoras DOM en Firefox 3
+
Firefox 3 ofrece mejoras en la implementación de DOM, incluyendo la gestión de varias extensiones de Internet Explorer al DOM.
+
+ +
+
Implementación de JavaScript 1.8
+
Firefox 3 ofrece JavaScript 1.8.
+
+ +
+
Implementación de EXSLT
+
Firefox 3 permite la utilización de una parte importante de las extensiones EXSLT y XSLT.
+
+ +
+
Mejoras SVG en Firefox 3
+
La implementación a SVG en Firefox 3 ha sido mejorada de manera significante, con muchos nuevos filtros, elementos, atributos y otras mejoras.
+
+ +
+
Gráficos PNG animados
+
Firefox 3 administra las imágenes animadas en formato PNG (APNG).
+
+ +

Para desarrolladores de XUL y de extensiones

+ +
Cambios y mejoras notables
+ +
+
Actualizar extensiones para Firefox 3
+
Una guía con las cosas que hay que hacer para poner al día una extensión para que trabaje con Firefox 3.
+
+ +
+
Mejoras XUL en Firefox 3
+
Firefox 3 ofrece varios nuevos elementos XUL, incluyendo escaleras deslizables, selectores de hora y fecha, y botones de incremento.
+
+ +
+
Plantillas en Firefox 3
+
Las plantillas han sido notablemente mejoradas en Firefox 3. Las mejoras más importantes es la posibilidad de usar procesadores de solicitud personalizada para permitir el uso de otras fuentes de datos que RDF.
+
+ +
+
Asegurando las actualizaciones
+
Para proporcionar actualizaciones más seguras de los complementos a los usuarios, ahora los complementos requieren proporcionar un método seguro para obtener las actualizaciones antes de ser instaladas. Los complementos alojados en AMO lo proporcionan automáticamente.
+
+ +
+
Migrar y usar el catálogo
+
Un artículo sobre como migrar una extensión existente para utilizar el API de catálogo.
+
+ +
+
Mejoras en el gestor de descargas en Firefox 3
+
El administrador de descargas de Firefox 3 contiene nuevas y mejoradas APIs, incluyendo la implementación de múltiples escuchas de progreso.
+
+ +
+
Uso de nsILoginManager
+
El administrador de contraseñas ha sido reemplazado por el nuevo Login Manager.
+
+ +
+
Integración de los vínculos XBL
+
Ya es posible utilizar el protocolo URL data: para integrar directamente los vínculos XBL en lugar de tener que colocarlos en un archivo XML por separado.
+
+ +
+
Traducir las descripciones de las extensiones
+
Firefox 3 ofrece un nuevo método localizando add-on metadata. Esto permite que los detalles localizados estén disponibles tan pronto como los add-on han sido descargados, al igual que cuando el add-on sea desinstalado.
+
+ +
+
Localización y plurales
+
Firefox 3 dispone del nuevo módulo PluralForm, el cual sirve para ayudar a poner correctamente en plural las palabras según el idioma local.
+
+ +
+
Cambios en los temas de Firefox 3
+
Notas e información para quienes quisiera crear temas para Firefox 3.
+
+ +
Nuevos componentes y funcionalidades
+ +
+
Biblioteca FUEL
+
FUEL sirve para facilitar la productividad de los desarrolladores de extensiones, reduciendo algunas formalidades de XPCOM y colocando algunas ideas "modernas" en JavaScript.
+
+ +
+
Catálogo
+
Las APIS del historial y de los marcadores han sido remplazadas completamente por la nueva API del Catálogo.
+
+ +
+
Servicio idle
+
Firefox 3 ofrece la nueva interfaz {{ Interface("nsIIdleService") }}, la cual permite a las extensiones determinar cuánto tiempo ha pasado desde que el usuario pulso una tecla o movió el ratón por última vez.
+
+ +
+
El convertidor ZIP
+
La nueva interfaz nsIZipWriter permite a las extensiones crear archivos ZIP.
+
+ +
+
Zoom a página completa
+
Firefox 3 mejora la experiencia de usuario ofreciendo zoom a página completa además de zoom de solo texto.
+
+ +
+
El colector de ciclo XPCOM
+
El código XPCOM puede beneficiarse del colector de ciclo, el cual ayuda a asegurar que la memoria no utilizada es liberada y evitar fugas de memoria.
+
+ +
+
El administrador de hilos
+
Firefox 3 proporciona la nueva interfaz {{ Interface("nsIThreadManager") }}, así como otras nuevas interfaces para hilos y eventos de hilos, los cuales proporcionan una manera apropiada de crear y administrar hilos en tu código.
+
+ +
+
Módulos JavaScript
+
Firefox 3 ofrece un nuevo mecanismo de código compartido que te permite crear módulos facilmente en JavaScript que pueden ser cargados por extensiones y aplicaciones para su uso, muy parecido a las librerías compartidas.
+
+ +
+
La interfaz nsIJSON
+
Firefox 3 ofrece la nueva interface {{ Interface("nsIJSON") }}, which offers high-performance encoding and decoding of JSON strings.
+
+ +
+
La interfaz nsIParentalControlsService
+
Ahora Firefox 3 implementa las características del control parental de Microsoft Windows Vista, y permite al cñodigo interactuar con él.
+
+ +
+
Usar las preferencias de contenido
+
Firefox 3 incluye un nuevo servicio para obtener y fijar configuraciones especificas para cada sitio web que pueden usar tanto las extensiones como el código principal para llevar un registro de las preferencias de usuarios en sitios individuales.
+
+ +
+
Vigilancia de plugins
+
Está disponible un nuevo componente del sistema de plugins para controlar el tiempo que les toma a los plugins (como por ejemplo: Macromedia Flash) ejecutar sus llamadas.
+
+ +

Bugs ya solucionados

+ +
+
Bugs importantes solucionados en Firefox 3
+
+ +

Nuevas características para el usuario final

+ +

Mejoras para el usuario

+ + + +

Seguridad y privacidad

+ + + +

Rendimiento

+ + + +

Lecturas relacionadas

+ + + +

 

+ +

{{ languages( { "en": "en/Firefox_3_for_developers", "fr": "fr/Firefox_3_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_3_for_developers", "ko": "ko/Firefox_3_for_developers", "pl": "pl/Firefox_3_dla_programist\u00f3w", "pt": "pt/Firefox_3_para_desenvolvedores", "zh-tw": "zh_tw/Firefox_3_for_developers" } ) }}

diff --git a/files/es/mozilla/firefox/releases/3/notable_bugs_fixed/index.html b/files/es/mozilla/firefox/releases/3/notable_bugs_fixed/index.html new file mode 100644 index 0000000000..5dbc833d4a --- /dev/null +++ b/files/es/mozilla/firefox/releases/3/notable_bugs_fixed/index.html @@ -0,0 +1,39 @@ +--- +title: Bugs importantes solucionados en Firefox 3 +slug: Bugs_importantes_solucionados_en_Firefox_3 +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Notable_bugs_fixed +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +

Este artículo es una lista de correcciones importantes de errores en Firefox 3 que no resultan obvios en la documentación.

+ + + +

Ver también

+ + + +

 

+ +
 
+ +

{{ languages( { "en": "en/Notable_bugs_fixed_in_Firefox_3", "fr": "fr/Bugs_importants_corrig\u00e9s_dans_Firefox_3", "ja": "ja/Notable_bugs_fixed_in_Firefox_3", "pl": "pl/Istotne_b\u0142\u0119dy_poprawione_w_Firefoksie_3" } ) }}

diff --git a/files/es/mozilla/firefox/releases/3/svg_improvements/index.html b/files/es/mozilla/firefox/releases/3/svg_improvements/index.html new file mode 100644 index 0000000000..701a6640f8 --- /dev/null +++ b/files/es/mozilla/firefox/releases/3/svg_improvements/index.html @@ -0,0 +1,62 @@ +--- +title: Mejoras SVG en Firefox 3 +slug: Mejoras_SVG_en_Firefox_3 +tags: + - Firefox 3 + - SVG + - Todas_las_Categorías +translation_of: Mozilla/Firefox/Releases/3/SVG_improvements +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +

Firefox 3 ofrece una mejor implementación de Gráficos Vectoriales Escalables (SVG) en comparación con versiones anteriores de Firefox. Aunque estas características están documentadas en otros sitios, este artículo puede servir como una lista que indique fácilmente qué características se han añadido en Firefox 3.

+ + + +

Vea también

+ + + +

 

+ +
 
+ +

{{ languages( { "en": "en/SVG_improvements_in_Firefox_3", "fr": "fr/Am\u00e9liorations_SVG_dans_Firefox_3", "ja": "ja/SVG_improvements_in_Firefox_3", "pl": "pl/Poprawki_SVG_w_Firefoksie_3" } ) }}

diff --git a/files/es/mozilla/firefox/releases/3/templates/index.html b/files/es/mozilla/firefox/releases/3/templates/index.html new file mode 100644 index 0000000000..499fa226a2 --- /dev/null +++ b/files/es/mozilla/firefox/releases/3/templates/index.html @@ -0,0 +1,27 @@ +--- +title: Plantillas en Firefox 3 +slug: Plantillas_en_Firefox_3 +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Templates +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +

Las plantillas se han mejorado enormemente en Firefox 3. La mejora más importante permite el uso de procesador de consultas personalizado para manejar otro tipo de fuentes de datos además de RDF. Esto es posible gracias a la nueva sintaxis de consultas. También se incluyen soporte para SQL (mozStorage) y fuentes de datos XML. Ya {{ interwiki('wikimo', 'XUL:Template_Features_in_1.9', 'está disponible') }} una descripción completa de las nuevas características para plantillas. ({{ Bug(285631) }})

+ +

Otras mejoras

+ + + +

Véase también

+ + + +

{{ languages( { "en": "en/Templates_in_Firefox_3", "fr": "fr/Templates_dans_Firefox_3", "ja": "ja/Templates_in_Firefox_3" } ) }}

diff --git a/files/es/mozilla/firefox/releases/3/updating_extensions/index.html b/files/es/mozilla/firefox/releases/3/updating_extensions/index.html new file mode 100644 index 0000000000..fc3f91addd --- /dev/null +++ b/files/es/mozilla/firefox/releases/3/updating_extensions/index.html @@ -0,0 +1,161 @@ +--- +title: Actualizar extensiones para Firefox 3 +slug: Actualizar_extensiones_para_Firefox_3 +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Updating_extensions +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +

Este artículo ofrece información que será de utilidad para desarrolladores que deseen actualizar sus extensiones, para que éstas funcionen correctamente con Firefox 3.
+
+ Antes de continuar, queremos sugerirte algo: si el único cambio que requiere tu extensión es modificar el campo maxVersion en el manifiesto de instalación, la extensión está disponible en el servidor addons.mozilla.org y ¡no necesitarás actualizar tu extensión a una nueva versión! Simplemente usa el Panel de Control para desarrolladores en AMO para modificar 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 la mayoría de las extensiones, el único que será necesario— es actualizar el archivo install.rdf dentro del manifiesto de instalación para indicar la compatibilidad con Firefox 3.

+ +

Sólo debes buscar la línea que indica la máxima versión compatible de Firefox, lo que para Firefox 2, probablemente sea:

+ +
 <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 la versión. Por lo tanto, en lugar de escribir "3.0.0.*", sólo necesitas usar "3.0.*".

+ +

Ha habido (y continuará habiendo) una serie de cambios en las APIs, lo que muy probablemente averiará algunas extensiones. Aún estamos trabajando para confeccionar una lista completa de estos cambios.

+ +

Si tu extensión todavía usa un script Install.js en vez de un manifiesto de instalación, necesitas hacer la transición a un manifiesto de instalación lo más pronto posible. Firefox 3 no implementará el script install.js en documentos XPI.

+ +

Agregar localizaciones al manifiesto de instalación

+ +

Firefox 3 cuenta con tres nuevas propiedades en el manifiesto de instalación para especificar descripciones de localización. Los métodos antiguos todavía 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 Localizar las_descripciones_de_las_extensiones para más detalles.

+ +

Paso 2: Asegúrate de suministrar actualizaciones seguras

+ +

Si suministras extensiones por tu propia cuenta y no usas un proveedor de hosting seguro como addons.mozilla.org, debes asegurarte de suministrar algún método seguro para la actualización de tus extensiones. Esto puede hacerse de dos formas: puedes usar un hosting con servicio de SSL o bien, puedes usar claves criptográficas para firmar la información de actualización. Lee Cómo hacer actualizaciones seguras para más información.

+ +

Paso 3: Debes estar al tanto de los cambios en las APIs

+ +

Muchas APIs han sido modificadas de forma significativa. Los cambios más importantes, que seguramente afectarán a muchas extensiones son:

+ +

DOM

+ +

Los nodos de documentos externos deberán copiarse idénticamente usando importNode() (o adoptarlos usando adoptNode()) antes de poder insertarlos en el documento actual. Para más información acerca de cuestiones relacionadas con ownerDocument, visita W3C DOM FAQ.

+ +

Actualmente, Firefox no exige hacerlo aunque sí lo hizo durante algún tiempo, durante el desarrollo de Firefox 3. Lo que ocurrió fue que muchos sitios sufrían averías cuando esta política era obligatoria. Nuestra recomendación para los desarrolladores web es que corrijan su código para cumplir con esta regla y así lograr una mejor compatibilidad a futuro.

+ +

Marcadores e Historial

+ +

Si de alguna forma tu extensión tiene acceso a Marcadores o Historial, necesitarás un gran esfuerzo para hacer que sea compatible con Firefox 3. Las APIs antiguas que daban acceso a esta información han sido reemplazadas por la nueva arquitectura Catálogo (Biblioteca). Visita la Guía para la migración a Catálogo (Biblioteca) para más detalles acerca de cómo actualizar tus extensiones para el uso de las APIs de Catálogo (Biblioteca).

+ +

Administrador de descargas

+ +

La API del Administrador de descargas ha cambiado ligeramente debido a la transición del almacén de datos RDF al uso de la API Almacenamiento. Esto debería ser una transición sencilla y fácil. Además , se ha modificado la API que controla los procesos de descarga para permitir varios receptores del administrador de descargas. Visita {{ Interface("nsIDownloadManager") }}, {{ Interface("nsIDownloadProgressListener") }} y Controlar descargas para más información.

+ +

Administrador de contraseñas

+ +

Si tu extensión tiene acceso a información de inicio de sesión de usuario en el Administrador de contraseñas, deberás actualizarla para poder utilizar la nueva API para el Administrador de inicio de sesión.

+ + + +

También puedes sobrescribir el almacén del administrador de contraseñas interno si quieres ofrecer tu propia implementación del almacén de contraseñas en la extensión. Visita Crear un módulo de almacenamiento para el Administrador de inicio de sesión 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 ahora contempla menús principales, menús contextuales y paneles. Se ha creado una guía para Utilizar Ventanas emergentes que detalla cómo funciona este sistema. Algo que debes tener en cuenta, es que se desaconseja el uso de popup.showPopup en favor de los nuevos popup.openPopup y popup.openPopupAtScreen.

+ +
+

Autocompletar

+
+ +

El método handleEnter() de la interfaz nsIAutoCompleteController ha cambiado para aceptar un argumento que indique si el texto ha sido seleccionado desde una ventana emergente para Autocompletar o bien, por el usuario que ha pulsado la tecla Entrar (Enter) después de ingresar texto.

+ +

DOMParser

+ + + +

Interfaces eliminadas

+ +

Las siguientes interfaces han sido eliminadas en Gecko 1.9, el motor de renderizado de Firefox 3. Si tu extensión utiliza cualquiera de estas interfaces, deberás actualizar tu código:

+ + + +

Paso 4: Comprueba los cambios importantes en el chrome

+ +

Se ha producido un cambio menor en el chrome que puede requerir cambios 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 inferior de la ventana del navegador. Aunque esto no afecta la apariencia de la pantalla, puede que afecte tu extensión si el chrome se superpone, en relación a los elementos descriptos.

+ +

Por ejemplo, si has superpuesto algún elemento del chrome antes de la barra de estado de la siguiente manera:

+ +
<window id="main-window">
+  <something insertbefore="status-bar" />
+</window>
+
+ +

Debes cambiar tu código a algo que se parezca a:

+ +
<vbox id="browser-bottombox">
+  <something insertbefore="status-bar" />
+</vbox>
+
+ +

O bien, emplear la siguiente técnica para hacer que la superposición funcione en Firefox 2 y Firefox 3 por igual:

+ +
<window id="main-window">
+  <vbox id="browser-bottombox" insertbefore="status-bar">
+    <something insertbefore="status-bar" />
+  <vbox>
+</window>
+
+ +

{{ Note("Este cambio es efectivo para Firefox 3 beta 4 y la prebeta 4.") }}

+ +

Otros cambios

+ +

Añade aquí cambios sencillos que debas realizar cuando actualizas tu extensión para que funcione con Firefox 3.

+ + diff --git a/files/es/mozilla/firefox/releases/3/updating_web_applications/index.html b/files/es/mozilla/firefox/releases/3/updating_web_applications/index.html new file mode 100644 index 0000000000..e81f21fa49 --- /dev/null +++ b/files/es/mozilla/firefox/releases/3/updating_web_applications/index.html @@ -0,0 +1,87 @@ +--- +title: Actualizar aplicaciones web para Firefox 3 +slug: Actualizar_aplicaciones_web_para_Firefox_3 +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Updating_web_applications +--- +
{{FirefoxSidebar}}
+ +

{{ Fx_minversion_header(3) }} Existen varios cambios en el próximo Firefox 3 que pueden afectar tu sitio web o aplicación web, así como nuevas características que se pueden aprovechar. Este artículo servirá como punto de partida para actualizar el contenido web de modo que se pueda aprovechar Firefox 3 al máximo.

+ +

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

+ +

Cambios HTML

+ +

Cambios en el conjunto de caracteres de herencia

+ +

Firefox 3 cierra un fallo en la seguridad en frames e iframes que les permitía heredar el conjunto de caracteres de donde eran derivadas. Esto podría causar problemas en ciertos casos. Ahora, las frames están solamente permitidas a heredar el conjunto de caracteres si ambos frames y el conjunto de caracteres fue cargado del mismo servidor. Si tienes páginas que asumen que las frames fueron cargadas de otro servidor heredará el mismo conjunto de caracteres, deberías actualizar los HTML de las frames para indicar el conjunto de caracteres específicamente.

+ +

Cambios en el elemento SCRIPT

+ +

Ahora hay que cerrar el elemento <script> en text/html con </script> en los documentos de HTML 4, incluso si no hay contenido dentro. En las versiones previas de Firefox, bastaba con hacer:

+ +
<script ...   />
+
+ +

Ahora se deben cumplir las especificaciones de HTML (si se trata de un HTML), y por lo tanto se deben cerrar, así:

+ +
<script ...></script>
+
+ +

Esto mejora tanto la compatibilidad como la seguridad.

+ +

Cambios en CSS

+ +

Cambio al tamaño de fuente basado en unidades em, ex

+ +

Los valores de fuente en unidades em y ex solían ser afectadas por el tamaño mínimo de fuente utilizado por el usuario: si una fuente se desplegaba más grande debido al tamaño mínimo, el ajuste de las unidades em y ex para el tamaño de fuente basados en esta se incrementarían de forma acorde. Esto era inconsistente con la forma en que las fuentes basadas en porcentaje se comportaban.

+ +

Los valores del tamaño de fuente en unidades em y ex ahora están basadas en un "tamaño de fuente intencionado" que no se ve afectado por el tamaño mínimo de fuente del usuario. En otras palabras, los tamaños de la fuente se calculan de acuerdo a las intenciones del diseñador y se ajustan al tamaño mínimo de fuente después de ello.

+ +

Ver {{ Bug(322943) }} para una demostración (se debe ver con un tamaño mínimo de fuente 6 para detectar la diferencia: las dos cajas en cascada se comportan diferente en Firefox 2, porque el tamaño de fuente basado en em "retorna" el tamaño mínimo de fuente.

+ +

Cambios de seguridad

+ +

Acceso Chrome

+ +

En versiones anteriores de Firefox, cualquier página web podía cargar scripts o imágenes chrome:// usando el protocolo chrome. Entre otras cosas, esto hizo posible que algunos sitios no detectaran la presencia de complementos,  lo cual podía ser usado para traspasar la seguridad del usuario saltando los complementos que agregaban medidas de seguridad al buscador.

+ +

Firefox 3 solo permite contenido web para acceder a los elementos en los espacios del chrome://browser/ y en espacio chrome://toolkit/. Estos archivos pretenden ser accesibles por el contenido web. Ahora cualquier otro contenido chrome es bloqueado para el sitio web.

+ +

Hay, sin embargo, métodos para ciertas extensiones que puden ser accedidos por la web. Se puede especificar una bandera en su archivo chrome.manifest de esta manera:

+ +
content mypackage location/ contentaccessible=yes
+
+ +

Esto no debería ser algo que se haga muy seguido, pero está disponible para aquellos casos raros en los que es necesario. Debe tomarse en cuenta que es posible que Firefox alerte al usuario que su extensión utiliza una bandera en el contentaccessible de alguna manera, ya que consituye un riesgo potencial en la seguridad.

+ +
Nota: Ya que Firefox 2 no entiende la bandera contentaccessible (ignorará la instrucción completa de que contiene la bandera), si se desea que el complemento sea compatible con Firefox 2 y Firefox 3, hay que hacer algo como esto: + +
content mypackage location/
+content mypackage location/ contentaccessible=yes
+
+
+ +

Campos para subir archivos

+ +

En versiones anteriores de Firefox, había casos en los que cuando el usuario seleccionaba un archivo para subir, la aplicación web podía ver la ruta completa del archivo. Esta pertinencia de privacidad ha sido resuelta en Firefox 3; ahora la aplicación web solo mostrará el nombre del archivo.

+ +

Cambios en JavaScript

+ +

Firefox 3 soporta JavaScript 1.8. Un cambio importante que quizás requiera actualizaciones en los sitios web o en las aplicaciones, es que los Script obsoletos y no-estandar no son soportados. Esto no es la etiqueta <script>, pero un objeto de JavaScript que nunca fue estandarizado. De cualquier manera es muy improbable que se use, así que probablemente no surgan problemas.

+ +

Vea también

+ + diff --git a/files/es/mozilla/firefox/releases/3/xul_improvements_in_firefox_3/index.html b/files/es/mozilla/firefox/releases/3/xul_improvements_in_firefox_3/index.html new file mode 100644 index 0000000000..e649db326a --- /dev/null +++ b/files/es/mozilla/firefox/releases/3/xul_improvements_in_firefox_3/index.html @@ -0,0 +1,109 @@ +--- +title: Mejoras XUL en Firefox 3 +slug: Mejoras_XUL_en_Firefox_3 +tags: + - Firefox 3 + - Todas_las_Categorías + - XUL +translation_of: Mozilla/Firefox/Releases/3/XUL_improvements_in_Firefox_3 +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +

Firefox 3 proporciona varios nuevos elementos XUL, además de mejoras en los elementos existentes. Aún que este material se documenta en detalle en otro lugar, este artículo ofrece una buena lista de estas mejoras así como enlaces a la documentación detallada.

+ +

 

+ +

Los nuevos elementos

+ + + +

 

+ +

Las mejoras

+ +

en los árboles

+ + + +

de los menús

+ + + +

en las cajas de texto

+ + + +

Otras mejoras

+ + + +

Ver también

+ + + +

 

+ +

 

+ +

{{ languages( { "en": "en/XUL_improvements_in_Firefox_3", "fr": "fr/Am\u00e9liorations_XUL_dans_Firefox_3", "ja": "ja/XUL_improvements_in_Firefox_3", "pl": "pl/Poprawki_XUL_w_Firefoksie_3" } ) }}

diff --git "a/files/es/m\303\263dulos_javascript/index.html" "b/files/es/m\303\263dulos_javascript/index.html" deleted file mode 100644 index c301b061ca..0000000000 --- "a/files/es/m\303\263dulos_javascript/index.html" +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Módulos JavaScript -slug: Módulos_JavaScript -tags: - - Firefox 3 - - JavaScript - - Todas_las_Categorías - - XPConnect ---- -

{{ Fx_minversion_header(3) }}

- -

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/nsdirectoryservice/index.html b/files/es/nsdirectoryservice/index.html deleted file mode 100644 index 37eb6d6505..0000000000 --- a/files/es/nsdirectoryservice/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: nsDirectoryService -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/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 new file mode 100644 index 0000000000..e4c788c5bb --- /dev/null +++ b/files/es/orphaned/actualizar_extensiones_para_firefox_3/actualizar_extensiones_para_firefox_3/index.html @@ -0,0 +1,229 @@ +--- +title: Actualizar extensiones para Firefox 3 +slug: Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3 +tags: + - 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" new file mode 100644 index 0000000000..b29ef38baf --- /dev/null +++ "b/files/es/orphaned/actualizar_una_extensi\303\263n_para_que_soporte_m\303\272ltiples_aplicaciones_de_mozilla/index.html" @@ -0,0 +1,54 @@ +--- +title: Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla +slug: Actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_Mozilla +tags: + - Complementos + - Todas_las_Categorías + - extensiones +--- +

 

+

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 new file mode 100644 index 0000000000..24233e92ba --- /dev/null +++ b/files/es/orphaned/code_snippets/index.html @@ -0,0 +1,5 @@ +--- +title: Code snippets +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" new file mode 100644 index 0000000000..12e2f8c676 --- /dev/null +++ "b/files/es/orphaned/code_snippets/pesta\303\261as_del_navegador/index.html" @@ -0,0 +1,13 @@ +--- +title: Pestañas del navegador +slug: Code_snippets/Pestañas_del_navegador +tags: + - Add-ons + - extensiones + - fragmentos de código + - pestañas +--- +

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" new file mode 100644 index 0000000000..e69797653b --- /dev/null +++ "b/files/es/orphaned/creaci\303\263n_de_componentes_xpcom/interior_del_componente/index.html" @@ -0,0 +1,216 @@ +--- +title: Interior del Componente +slug: Creación_de_Componentes_XPCOM/Interior_del_Componente +tags: + - Todas_las_Categorías + - XPCOM +--- +

+

« 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" new file mode 100644 index 0000000000..5ba98982da --- /dev/null +++ "b/files/es/orphaned/creaci\303\263n_de_componentes_xpcom/prefacio/index.html" @@ -0,0 +1,39 @@ +--- +title: Prefacio +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" new file mode 100644 index 0000000000..6a155e7f50 --- /dev/null +++ "b/files/es/orphaned/creando_una_extensi\303\263n/index.html" @@ -0,0 +1,236 @@ +--- +title: Creando una extensión +slug: Creando_una_extensión +tags: + - Complementos + - Todas_las_Categorías + - extensiones +--- +

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" new file mode 100644 index 0000000000..865956ce0f --- /dev/null +++ "b/files/es/orphaned/crear_una_extensi\303\263n_personalizada_de_firefox_con_el_mozilla_build_system/index.html" @@ -0,0 +1,580 @@ +--- +title: Crear una extensión personalizada de Firefox con el Mozilla Build System +slug: Crear_una_extensión_personalizada_de_Firefox_con_el_Mozilla_Build_System +tags: + - Complementos + - Documentación_de_compilado + - Todas_las_Categorías + - XPCOM + - extensiones +--- +

 

+ +
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" new file mode 100644 index 0000000000..e77502cb70 --- /dev/null +++ "b/files/es/orphaned/css_din\303\241mico/index.html" @@ -0,0 +1,339 @@ +--- +title: CSS dinámico +slug: CSS_dinámico +tags: + - CSS + - Todas_las_Categorías +--- +

+

+

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 new file mode 100644 index 0000000000..4551e8fea2 --- /dev/null +++ b/files/es/orphaned/desarrollando_mozilla/index.html @@ -0,0 +1,16 @@ +--- +title: Desarrollando Mozilla +slug: Desarrollando_Mozilla +tags: + - Desarrollando_Mozilla + - Todas_las_Categorías +--- +

¿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" new file mode 100644 index 0000000000..08f93e1145 --- /dev/null +++ "b/files/es/orphaned/detectar_la_orientaci\303\263n_del_dispositivo/index.html" @@ -0,0 +1,56 @@ +--- +title: Detectar la orientación del dispositivo +slug: Detectar_la_orientación_del_dispositivo +tags: + - Aceleración + - CSS + - Consultas + - Orientación + - para_revisar +--- +

{{ 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 new file mode 100644 index 0000000000..9ceaa0803d --- /dev/null +++ b/files/es/orphaned/dhtml_demostraciones_del_uso_de_dom_style/index.html @@ -0,0 +1,49 @@ +--- +title: DHTML Demostraciones del uso de DOM/Style +slug: DHTML_Demostraciones_del_uso_de_DOM_Style +tags: + - CSS + - DHTML + - DOM + - JavaScript + - Todas_las_Categorías +--- +

+

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" new file mode 100644 index 0000000000..e7dbd60c0e --- /dev/null +++ "b/files/es/orphaned/dibujando_gr\303\241ficos_con_canvas/index.html" @@ -0,0 +1,5 @@ +--- +title: Dibujando Gráficos con Canvas +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" new file mode 100644 index 0000000000..64997a3c50 --- /dev/null +++ "b/files/es/orphaned/estructura_de_directorios_de_c\303\263digo_fuente_de_mozilla/index.html" @@ -0,0 +1,698 @@ +--- +title: Estructura de directorios de código fuente de Mozilla +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 new file mode 100644 index 0000000000..b89a3a028e --- /dev/null +++ b/files/es/orphaned/etiquetas_audio_y_video_en_firefox/index.html @@ -0,0 +1,46 @@ +--- +title: Etiquetas audio y video en Firefox +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" new file mode 100644 index 0000000000..cdc9521967 --- /dev/null +++ "b/files/es/orphaned/extensiones/actualizaci\303\263n_de_extensiones_para_firefox_4/index.html" @@ -0,0 +1,31 @@ +--- +title: Actualización de extensiones para Firefox 4 +slug: Extensiones/Actualización_de_extensiones_para_Firefox_4 +tags: + - Agregados + - Complementos + - Firefox 4 + - Gecko 2.0 + - extensiones + - para_revisar +--- +

{{ fx_minversion_header(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 new file mode 100644 index 0000000000..28f70b65ee --- /dev/null +++ b/files/es/orphaned/faq_incrustando_mozilla/index.html @@ -0,0 +1,70 @@ +--- +title: FAQ Incrustando Mozilla +slug: FAQ_Incrustando_Mozilla +tags: + - Incrustando_Mozilla + - Preguntas_frecuentes_sobre_incrustación_en_Mozilla + - Todas_las_Categorías +--- +

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 new file mode 100644 index 0000000000..1261f4d562 --- /dev/null +++ b/files/es/orphaned/firefox_addons_developer_guide/introduction_to_extensions/index.html @@ -0,0 +1,159 @@ +--- +title: 'Capítulo 1: Introducción a las extensiones.' +slug: Firefox_addons_developer_guide/Introduction_to_Extensions +--- +
+ {{ Draft() }}
+

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

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

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

+

Introducción

+

Si estás leyendo esta guía, probablemente has utilizado firefox antes. Tal vez la primera vez que viste firefox, es posible que te hayas sorprendido al ver que tiene una estructurara mucho más simple que otros navegadores con muchas funciones, como Opera o Safari.

+

¿Qué características son consideradas estándar para los navegadores en estos días? Tal vez cosas como controles de pestañas, movimientos del ratón, barras de herramientas y botones, un lector de feed, integración con una variedad de aplicaciones web, o herramientas sofisticadas para ayudar al diseño web. Pero nosotros no teníamos la intención de crear un navegador todo-en uno que pueda satisfacer a todos

+

En cambio, Firefox puede soportar estas características a través de las extensiones. El núcleo del navegador se limita a las funciones básicas, algo que puede hacer sentirse cómodo a un principiante, pero los usuarios que quieren algo más pueden instalar las extensiones.

+

Acerca de las extensiones

+

Administrador de complementos

+

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

+

+

El Administrador de complementos se encarga de las siguientes tareas:

+ +

Características del entorno de desarrollo

+

Inicialmente, no había suficiente documentación disponible, y los desarrolladores de extensiones quedaron en gran medida a su suerte; sin embargo, ahora hay un cuantioso depósito de conocimiento.

+

Debido a que Firefox y sus extensiones están diseñadas para soportar multiples idiomas, excelentes extensiones vienen de todo el mundo, y pueden ser localizadas rápidamente por cualquier persona que esté interesada.

+

Ésto facilita el uso y el desarrollo de extensiones; este hecho, combinado con la popularidad creciente de firefox, ha creado un búcle de realimentación positiva, y un crecimiento explosivo del número de usuarios  y desarrolladores de las extensiones. Hay ahora más de 7000 extensiones y temas publicados en la página web de complementos de firefox. (https://addons.mozilla.org).

+

¿Qué podemos hacer con las extensiones?

+

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

+

Extensiones solo con una función.

+

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

+

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

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

Feature enhancing extensions

+

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

+

These extensions enhance features that already exist in Firefox.

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

Web application integration extensions

+

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

+

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

+

Forecastfox.png

+

New feature extensions

+

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

+

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

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

Application level extensions

+

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

+

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

+

Firebug.gif

+

One-trick gag extensions

+

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

+

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

+

Shiitake Mushroom (1).png

+

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

+

Table 1: Advanced customization methods for Firefox

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

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

+ 		+

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

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

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

+ 		+

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

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

Vamos a construir una extensión

+

La tabla 1 muestra varias opciones de personalización disponibles para un usuario en firefox. Los usuarios tienen opciones de personalicación Flexibles, usando CSS en las hojas de estilo del usuario y javaScript/DOM en los script del usuario.

+

En adición a CSS y Javascript, las extensiones pueden tomar ventajas de las tecnologías XUL y XPCOM para características más sofisticadas. Temas, los cuales pueden alterar la apariencia de firefox, son un tipo de complemento.

+

Para crear una extension, necesitas una idea y sólo un poco de abilidad programando. Los siguientes capítulos explicaremos con detalles las tecnicas para escribir extensiones.

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

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

diff --git a/files/es/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 new file mode 100644 index 0000000000..92188c9df8 --- /dev/null +++ b/files/es/orphaned/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html @@ -0,0 +1,78 @@ +--- +title: 'Chapter 2: Technologies used in developing extensions' +slug: Firefox_addons_developer_guide/Technologies_used_in_developing_extensions +--- +

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

+

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

+

Antes de sumergirse en una explicación, rápidamente nos introduciremos en las tecnologías utilizadas para desarrollar extensiones en firefox. Nosotros también conoceremos los conocimientos míminos que se necesitan para desarrollar una extensión para firefox.

+

Tecnologías utilizadas para desarrollar extensiones para Firefox

+

Firefox y sus extensiones están ambos basados en el desarrollo con tecnologías ampliamente usadas en la web. Su estructura es similar a la de HTML dynamico usado en algunas páginas webs, or el HTML de aplicaciones usado en Windows. Si tienes experiencia desarrollando HTML dinamico, Tú probablemente lo encontrarás relativamente fácil desarrollar una extensión para Firefox.

+

El rol de cada tecnología

+

Firefox está construido en gran parte con cuatro tecnologías: XUL, CSS, Javascript y XPCOM. Las extensiones también están construidas usando esas cuatros tecnologías.

+

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

+

+

En addition a esas tecnologías, el desarrollo de una extensión requerira que aprendas sobre como otorgar priviligos para vence priviligios de restricciones de seguridad en el código que escribistes, y como insertar tu codigo dentro de Firefox UI. Estos errores son discutidos en el Capítulo 5.

+

Conocimientos básicos requeridos

+

En el interest de brevedad, Vamos a omitir explicaciones de tecnologías, y nos enfocaremos en la introducción de nuevas tecnologías que necesitarás entender para desarrollar para Firefox. Asumimos que tu tienes esperiencia desarrollando con HTML dinamico, así como de los temas a continuación.
+ Para más información sobre estas tecnologías, por favor consulte otras fuentes.

+ +

XML: A text-based structural language

+

 XML, siglas en inglés de eXtensible Markup Language ('lenguaje de marcas extensible'), es un lenguaje de marcas desarrollado por el World Wide Web Consortium (W3C). Deriva del lenguaje SGML y permite definir la gramática de lenguajes específicos (de la misma manera que HTML es a su vez un lenguaje definido por SGML) para estructurar documentos grandes. A diferencia de otros lenguajes XML da soporte a bases de datos, siendo útil cuando varias aplicaciones se deben comunicar entre sí o integrar información. (Bases de datos Silberschatz).

+

Listing 1: XML syntax

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

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

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

An element can include other elements as well as text in its content, and all information is structured as a tree. As in all trees, elements can have children (elements contained within them) and parents (elements that contain them). Attributes can also be added to opening tags, each with a value.

+

As the "extensible" part of XML implies, elements from various XML-based languages such as XHTML and SVG can be interspersed in one another as a means to extend the language. All elements can carry a "namespace URI" identifier, which is unique for each language. For example, even though XHTML and SVG have elements with the same name, these can be distinguished. The namespace URI for XHTML is "http://www.w3.org/1999/xhtml" ; for SVG is it "http://www.w3.org/2000/svg".

+

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

+

Like XML, Cascading Style Sheets (CSS) is a technical specification established by the W3C; it is a style-description language defining the display of data marked up in XML and HTML. As shown in Listing 1, it has an extremely simple syntax. By separating the structure of the data, expressed through HTML or XML, and the display style, indicated by CSS, data can be reused better than it is when structural and stylistic markup are both embedded in HTML.

+

There are three CSS specifications (Level 1 through Level 3), with progressively powerful features. The Gecko rendering engine handles nearly all of CSS Level 2 and some of CSS Level 3.

+

Listing 2: CSS code sample

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

JavaScript: The world's most misunderstood language

+

JavaScript is a scripting language first developed in the 1990s, at which time it was created as a way to add dynamic features to web pages. Because it was often used at first to display pop-up windows, marching text in status bars, or in other ways that made web pages less useful to users, the language acquired a reputation as having little practical use and lacking in functionality.

+

Also, because a series of security holes were discovered in JavaScript and the compatible technology JScript, there was an initial reluctance to use JavaScript at all.

+

Nevertheless, the rise of web services like Google Maps, which used JavaScript and asynchronous communications, created an awareness of a set of technologies nicknamed AJAX (Asynchronous JavaScript and XML); that plus the advent of a number of libraries that paper over implementation differences between different web browsers has more recently led to a re-evaluation of JavaScript as a programming language.

+

JavaScript is a prototype-based object-oriented language, and as shown in Listing 3, also permits independent class definitions. It does not have strict typing like Java, making it extremely flexible and giving it qualities that in some senses could be considered similar to Lisp.

+

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

+

Listing 3: An example of a class definition in JavaScript

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

DOM: An API for manipulating XML documents

+

The Document Object Model (DOM) is a technical standard promulgated by the W3C, and is an API for manipulating the contents of XML documents as objects. In earlier dynamic HTML approaches, the typical method was to use the innerHTML property of the HTML element node to dynamically change the contents of the HTML document by manipulating strings, but using the DOM makes it possible to manipulate XML documents in a way that better matches JavaScript's object-oriented nature.

+

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

+

There are a number of levels to the DOM with different levels of functionality. Gecko supports nearly all of DOM Level 2 and some of DOM Level 3.

+

With the DOM, the contents of an XML document are handled as a "DOM tree," a collection of element nodes and other nodes. Listing 4 shows an example that deletes the second child element of the element with the "toolbar" id, adds a new button element as a substitute, and sets a label attribute.

+

We do not go into the details of the various APIs in the DOM. To learn more about the DOM, please take a look at the MDC documentation.

+

Listing 4: An example manipulation using the DOM

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

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

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 new file mode 100644 index 0000000000..478990b1a1 --- /dev/null +++ b/files/es/orphaned/formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio/index.html @@ -0,0 +1,43 @@ +--- +title: Formatos multimedia admitidos por los elementos de audio y video +slug: Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio +tags: + - Firefox + - HTML5 + - Multimedia + - formatos de audio + - formatos multimedia + - para_revisar +--- +

{{ 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" new file mode 100644 index 0000000000..89f586d8f3 --- /dev/null +++ "b/files/es/orphaned/fragmentos_de_c\303\263digo/index.html" @@ -0,0 +1,13 @@ +--- +title: Fragmentos de código +slug: Fragmentos_de_código +tags: + - Add-ons + - extensiones + - 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 new file mode 100644 index 0000000000..8fdf449542 --- /dev/null +++ b/files/es/orphaned/funciones/index.html @@ -0,0 +1,8 @@ +--- +title: Funciones +slug: Funciones +tags: + - 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" new file mode 100644 index 0000000000..6fb035653b --- /dev/null +++ "b/files/es/orphaned/generaci\303\263n_de_guids/index.html" @@ -0,0 +1,61 @@ +--- +title: Generación de GUIDs +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 new file mode 100644 index 0000000000..a947c1e053 --- /dev/null +++ b/files/es/orphaned/glossary/elemento/index.html @@ -0,0 +1,7 @@ +--- +title: elemento +slug: Glossary/elemento +tags: + - Junk +--- +

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" new file mode 100644 index 0000000000..b4510b3822 --- /dev/null +++ "b/files/es/orphaned/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/index.html" @@ -0,0 +1,23 @@ +--- +title: Guía para el desarrollador de agregados para Firefox +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" new file mode 100644 index 0000000000..b925716b8b --- /dev/null +++ "b/files/es/orphaned/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/introducci\303\263n_a_las_extensiones/index.html" @@ -0,0 +1,192 @@ +--- +title: Introducción a las extensiones +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" new file mode 100644 index 0000000000..1c76c3bd88 --- /dev/null +++ "b/files/es/orphaned/gu\303\255a_para_la_migraci\303\263n_a_cat\303\241logo/index.html" @@ -0,0 +1,176 @@ +--- +title: Guía para la migración a catálogo +slug: Guía_para_la_migración_a_catálogo +tags: + - NeedsContent + - Places +--- +

{{ Fx_minversion_header(3) }} +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 new file mode 100644 index 0000000000..4cde340000 --- /dev/null +++ b/files/es/orphaned/herramientas/index.html @@ -0,0 +1,13 @@ +--- +title: Herramientas +slug: Herramientas +tags: + - Herramientas + - para_revisar +--- +

 

+ +

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 new file mode 100644 index 0000000000..2f94162678 --- /dev/null +++ b/files/es/orphaned/html/elemento/datalist/index.html @@ -0,0 +1,7 @@ +--- +title: datalist +slug: HTML/Elemento/datalist +tags: + - HTML5 +--- +

Redirigir datalist

diff --git a/files/es/orphaned/html/elemento/form/index.html b/files/es/orphaned/html/elemento/form/index.html new file mode 100644 index 0000000000..dd039bead3 --- /dev/null +++ b/files/es/orphaned/html/elemento/form/index.html @@ -0,0 +1,5 @@ +--- +title: form +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 new file mode 100644 index 0000000000..dc632fa052 --- /dev/null +++ b/files/es/orphaned/html/elemento/section/index.html @@ -0,0 +1,177 @@ +--- +title: Section +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 new file mode 100644 index 0000000000..70853c59a3 --- /dev/null +++ b/files/es/orphaned/incrustando_mozilla/comunidad/index.html @@ -0,0 +1,7 @@ +--- +title: Comunidad +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" new file mode 100644 index 0000000000..c1c1755bb9 --- /dev/null +++ "b/files/es/orphaned/instalaci\303\263n_de_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" @@ -0,0 +1,33 @@ +--- +title: Instalación de motores de búsqueda desde páginas web +slug: Instalación_de_motores_de_búsqueda_desde_páginas_web +tags: + - Plugins_de_búsqueda +--- +

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 new file mode 100644 index 0000000000..6cc600f24d --- /dev/null +++ b/files/es/orphaned/learn/how_to_contribute/index.html @@ -0,0 +1,88 @@ +--- +title: ¿Cómo contribuir al Área de Aprendizaje en MDN? +slug: Learn/Como_Contribuir +tags: + - Aprender + - Documentación + - Guía + - MDN Meta + - Principiante + - contribuir + - 'l10n:priority' +translation_of: Learn/How_to_contribute +--- +
{{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 new file mode 100644 index 0000000000..6e4cd130d6 --- /dev/null +++ b/files/es/orphaned/learn/html/forms/html5_updates/index.html @@ -0,0 +1,44 @@ +--- +title: Formularios en HTML5 +slug: HTML/HTML5/Formularios_en_HTML5 +tags: + - HTML + - HTML5 + - formulários + - para_revisar +translation_of: Learn/HTML/Forms/HTML5_updates +--- +

{{ 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 new file mode 100644 index 0000000000..7be6efca8b --- /dev/null +++ b/files/es/orphaned/localizar_con_narro/index.html @@ -0,0 +1,62 @@ +--- +title: Localizar con Narro +slug: Localizar_con_Narro +tags: + - 'Localization:Tools' + - l10n + - 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 new file mode 100644 index 0000000000..fd3abc7f28 --- /dev/null +++ b/files/es/orphaned/mdn/community/index.html @@ -0,0 +1,54 @@ +--- +title: Únete a la comunidad de MDN web docs +slug: MDN/Comunidad +tags: + - Comunidad + - Documentación + - Guía + - Proyecto MDC +translation_of: MDN/Community +--- +
{{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 new file mode 100644 index 0000000000..a80a67a1b4 --- /dev/null +++ b/files/es/orphaned/mdn/community/working_in_community/index.html @@ -0,0 +1,118 @@ +--- +title: Trabajando con nuestra comunidad +slug: MDN/Contribute/Community +tags: + - Comunidad + - Guía + - MDN Meta +translation_of: MDN/Community/Working_in_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 new file mode 100644 index 0000000000..8e254f6ac0 --- /dev/null +++ b/files/es/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,32 @@ +--- +title: Cómo crear una cuenta MDN +slug: MDN/Contribute/Howto/Crear_cuenta_MDN +tags: + - Cuenta + - GitHub + - Perfil + - Persona + - Principiante + - account +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +
{{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 new file mode 100644 index 0000000000..e1fc2d5d5a --- /dev/null +++ b/files/es/orphaned/mdn/contribute/howto/do_a_technical_review/index.html @@ -0,0 +1,44 @@ +--- +title: Cómo hacer una revisión técnica +slug: MDN/Contribute/Howto/revision_tecnica +translation_of: MDN/Contribute/Howto/Do_a_technical_review +--- +
{{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 new file mode 100644 index 0000000000..454da031a0 --- /dev/null +++ b/files/es/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html @@ -0,0 +1,54 @@ +--- +title: Cómo hacer una revisión editorial +slug: MDN/Contribute/Howto/revision_editorial +tags: + - Cómo hacerlo + - Documentación + - Guía + - Revisiones +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +
{{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 new file mode 100644 index 0000000000..a0bdd5267f --- /dev/null +++ b/files/es/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html @@ -0,0 +1,120 @@ +--- +title: Plantilla de página para propiedades CSS +slug: MDN/Contribute/Howto/Document_a_CSS_property/Plantilla_propiedad +translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template +--- +
{{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 new file mode 100644 index 0000000000..25ee6439cd --- /dev/null +++ b/files/es/orphaned/mdn/contribute/howto/remove_experimental_macros/index.html @@ -0,0 +1,48 @@ +--- +title: Cómo y cuándo eliminar macros "experimentales" +slug: MDN/Contribute/Howto/Remover_Macros_Experimentales +tags: + - Experimental + - Guía + - MDN Meta + - Macros +translation_of: MDN/Contribute/Howto/Remove_Experimental_Macros +--- +
{{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 new file mode 100644 index 0000000000..26f62b04a2 --- /dev/null +++ b/files/es/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html @@ -0,0 +1,118 @@ +--- +title: Cómo colocar el resumen de una página +slug: 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 +--- +
{{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 new file mode 100644 index 0000000000..42edc03ff0 --- /dev/null +++ b/files/es/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html @@ -0,0 +1,83 @@ +--- +title: Cómo etiquetar páginas Javascript +slug: MDN/Contribute/Howto/Etiquetas_paginas_javascript +tags: + - Etiquetas + - JavaScript +translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages +--- +
{{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 new file mode 100644 index 0000000000..4ba8e4e4e4 --- /dev/null +++ b/files/es/orphaned/mdn/contribute/howto/use_navigation_sidebars/index.html @@ -0,0 +1,78 @@ +--- +title: Cómo usar las barras laterales de navegación +slug: MDN/Contribute/Howto/Usar_barras_laterales_de_navegación +translation_of: MDN/Contribute/Howto/Use_navigation_sidebars +--- +

{{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 new file mode 100644 index 0000000000..05d72dd7f7 --- /dev/null +++ b/files/es/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html @@ -0,0 +1,106 @@ +--- +title: Cómo escribir un artículo para ayudar a las personas a aprender sobre la Web. +slug: 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 +--- +
{{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 new file mode 100644 index 0000000000..cdc6fbd699 --- /dev/null +++ b/files/es/orphaned/mdn/tools/page_regeneration/index.html @@ -0,0 +1,32 @@ +--- +title: Renderizado de páginas en MDN +slug: MDN/Tools/Page_regeneration +translation_of: 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 new file mode 100644 index 0000000000..0edab22e95 --- /dev/null +++ b/files/es/orphaned/mdn/tools/template_editing/index.html @@ -0,0 +1,14 @@ +--- +title: Edición de plantillas +slug: MDN/Tools/Template_editing +tags: + - Guía + - Herramientas + - MDN Meta + - Privilegios + - Roles(2) +translation_of: 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 new file mode 100644 index 0000000000..39b9197fd1 --- /dev/null +++ b/files/es/orphaned/migrar_aplicaciones_desde_internet_explorer_a_mozilla/index.html @@ -0,0 +1,1067 @@ +--- +title: Migrar aplicaciones desde Internet Explorer a Mozilla +slug: Migrar_aplicaciones_desde_Internet_Explorer_a_Mozilla +tags: + - Desarrollo_Web + - Todas_las_Categorías +--- +

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" new file mode 100644 index 0000000000..4a0f6c1c38 --- /dev/null +++ "b/files/es/orphaned/modo_casi_est\303\241ndar_de_gecko/index.html" @@ -0,0 +1,46 @@ +--- +title: Modo casi estándar de Gecko +slug: Modo_casi_estándar_de_Gecko +tags: + - Desarrollo_Web + - Estándares_Web + - Gecko + - HTML + - Todas_las_Categorías +--- +

 

+

 

+

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 new file mode 100644 index 0000000000..c24f9d07f5 --- /dev/null +++ b/files/es/orphaned/mozilla/add-ons/webextensions/debugging/index.html @@ -0,0 +1,189 @@ +--- +title: Depuración +slug: Mozilla/Add-ons/WebExtensions/Depuración +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Debugging +--- +
{{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 new file mode 100644 index 0000000000..ef81cd0468 --- /dev/null +++ b/files/es/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html @@ -0,0 +1,105 @@ +--- +title: Publicando tu extensión +slug: Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension +tags: + - AMO + - Addons + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Package_your_extension_ +--- +
{{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 new file mode 100644 index 0000000000..58959678f4 --- /dev/null +++ b/files/es/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html @@ -0,0 +1,22 @@ +--- +title: Conversión de extensiones de Google Chrome +slug: Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension +--- +
{{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 new file mode 100644 index 0000000000..7718e990f3 --- /dev/null +++ b/files/es/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html @@ -0,0 +1,91 @@ +--- +title: Empaquetado e Instalación +slug: Mozilla/Add-ons/WebExtensions/Packaging_and_installation +translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox +translation_of_original: 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" new file mode 100644 index 0000000000..c301b061ca --- /dev/null +++ "b/files/es/orphaned/m\303\263dulos_javascript/index.html" @@ -0,0 +1,23 @@ +--- +title: Módulos JavaScript +slug: Módulos_JavaScript +tags: + - Firefox 3 + - JavaScript + - Todas_las_Categorías + - XPConnect +--- +

{{ Fx_minversion_header(3) }}

+ +

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 new file mode 100644 index 0000000000..37eb6d6505 --- /dev/null +++ b/files/es/orphaned/nsdirectoryservice/index.html @@ -0,0 +1,11 @@ +--- +title: nsDirectoryService +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 new file mode 100644 index 0000000000..7266e63643 --- /dev/null +++ b/files/es/orphaned/participar_en_el_proyecto_mozilla/index.html @@ -0,0 +1,10 @@ +--- +title: Participar en el proyecto Mozilla +slug: Participar_en_el_proyecto_Mozilla +tags: + - para_revisar +--- +

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" new file mode 100644 index 0000000000..77496f3178 --- /dev/null +++ "b/files/es/orphaned/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/index.html" @@ -0,0 +1,5 @@ +--- +title: Preguntas frecuentes sobre incrustación en Mozilla +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" new file mode 100644 index 0000000000..9240658758 --- /dev/null +++ "b/files/es/orphaned/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/introducci\303\263n_a_gecko_e_inscrustaci\303\263n/index.html" @@ -0,0 +1,41 @@ +--- +title: Introducción a Gecko e inscrustación +slug: >- + Preguntas_frecuentes_sobre_incrustación_en_Mozilla/Introducción_a_Gecko_e_inscrustación +tags: + - Incrustando_Mozilla + - Todas_las_Categorías +--- +

+

+

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" new file mode 100644 index 0000000000..a5e4ca392c --- /dev/null +++ "b/files/es/orphaned/principios_b\303\241sicos_de_los_servicios_web/index.html" @@ -0,0 +1,36 @@ +--- +title: Principios básicos de los servicios Web +slug: Principios_básicos_de_los_servicios_Web +tags: + - SOAP + - Servicios_Web_XML + - Todas_las_Categorías + - XML + - XML-RPC +--- +

+

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 new file mode 100644 index 0000000000..1c187da642 --- /dev/null +++ b/files/es/orphaned/recursos_en_modo_desconectado_en_firefox/index.html @@ -0,0 +1,161 @@ +--- +title: Recursos en modo desconectado en Firefox +slug: Recursos_en_modo_desconectado_en_Firefox +tags: + - Aplicaciones_web_en_desconectado + - Firefox 3 +--- +

{{ Fx_minversion_header(3) }}

+ +

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 new file mode 100644 index 0000000000..9cab79c0e8 --- /dev/null +++ b/files/es/orphaned/referencia_de_xul/index.html @@ -0,0 +1,317 @@ +--- +title: Referencia de XUL +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" new file mode 100644 index 0000000000..2dae7b7909 --- /dev/null +++ "b/files/es/orphaned/selecci\303\263n_de_modo_en_mozilla/index.html" @@ -0,0 +1,143 @@ +--- +title: Selección de modo en Mozilla +slug: Selección_de_modo_en_Mozilla +tags: + - Desarrollo_Web + - HTML + - Todas_las_Categorías + - XHTML + - XML +--- +

 

+

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 new file mode 100644 index 0000000000..87e2df368e --- /dev/null +++ b/files/es/orphaned/storage/index.html @@ -0,0 +1,252 @@ +--- +title: Storage +slug: Storage +tags: + - Interfaces + - Storage + - Todas_las_Categorías + - Toolkit API + - páginas_a_traducir +--- +
+

{{ Fx_minversion_header(2) }}

+

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 new file mode 100644 index 0000000000..c6217195c6 --- /dev/null +++ b/files/es/orphaned/tools/add-ons/dom_inspector/index.html @@ -0,0 +1,29 @@ +--- +title: DOM Inspector +slug: 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 +--- +

+

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 new file mode 100644 index 0000000000..53b7924169 --- /dev/null +++ b/files/es/orphaned/tools/add-ons/index.html @@ -0,0 +1,17 @@ +--- +title: Add-ons +slug: Tools/Add-ons +tags: + - NeedsTranslation + - TopicStub + - Web Development + - 'Web Development:Tools' +translation_of: 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 new file mode 100644 index 0000000000..f2a85cff51 --- /dev/null +++ b/files/es/orphaned/traducir_las_descripciones_de_las_extensiones/index.html @@ -0,0 +1,90 @@ +--- +title: Traducir las descripciones de las extensiones +slug: Traducir_las_descripciones_de_las_extensiones +tags: + - Complementos + - Localización + - Todas_las_Categorías + - extensiones +--- +

 

+

Localizing in Gecko 1.9

+

{{ Gecko_minversion_header(1.9) }} {{ Fx_minversion_header(3) }}

+

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" new file mode 100644 index 0000000000..7c5c33627a --- /dev/null +++ "b/files/es/orphaned/traducir_una_extensi\303\263n/index.html" @@ -0,0 +1,161 @@ +--- +title: Traducir una extensión +slug: Traducir_una_extensión +tags: + - Complementos + - Localización + - Todas_las_Categorías + - extensiones +--- +

{{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 new file mode 100644 index 0000000000..a3f0c8546e --- /dev/null +++ b/files/es/orphaned/usando_archivos_desde_aplicaciones_web/index.html @@ -0,0 +1,377 @@ +--- +title: Usando archivos desde aplicaciones web +slug: Usando_archivos_desde_aplicaciones_web +tags: + - Archivos + - HTML5 + - para_revisar + - páginas_a_traducir +--- +

{{ 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" new file mode 100644 index 0000000000..5cb8795395 --- /dev/null +++ "b/files/es/orphaned/usar_c\303\263digo_de_mozilla_en_otros_proyectos/index.html" @@ -0,0 +1,15 @@ +--- +title: Usando código de Mozilla en otros proyectos +slug: Usar_código_de_Mozilla_en_otros_proyectos +tags: + - para_revisar + - páginas_a_traducir +--- +

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 new file mode 100644 index 0000000000..0dacf19312 --- /dev/null +++ b/files/es/orphaned/usar_web_workers/index.html @@ -0,0 +1,260 @@ +--- +title: Usar web workers +slug: Usar_web_workers +tags: + - Firefox 3.5 + - Gecko 1.9.1 + - HTML5 + - JavaScript + - Workers + - para_revisar +--- +

{{ 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 new file mode 100644 index 0000000000..260a29a8e5 --- /dev/null +++ b/files/es/orphaned/usar_xpinstall_para_instalar_plugins/index.html @@ -0,0 +1,236 @@ +--- +title: Usar XPInstall para instalar plugins +slug: Usar_XPInstall_para_instalar_plugins +tags: + - Plugins + - Todas_las_Categorías + - XPInstall +--- +

+

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" new file mode 100644 index 0000000000..1e5b13b9a6 --- /dev/null +++ "b/files/es/orphaned/uso_del_n\303\272cleo_del_nivel_1_del_dom/index.html" @@ -0,0 +1,92 @@ +--- +title: Uso del núcleo del nivel 1 del DOM +slug: Uso_del_núcleo_del_nivel_1_del_DOM +tags: + - DOM + - Todas_las_Categorías +--- +

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 new file mode 100644 index 0000000000..2e5c6a0863 --- /dev/null +++ b/files/es/orphaned/vigilar_plugins/index.html @@ -0,0 +1,110 @@ +--- +title: Vigilar plugins +slug: Vigilar_plugins +tags: + - Firefox 3 + - Plugins + - Todas_las_Categorías +--- +

{{ Fx_minversion_header(3) }} +

+

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/web_crypto_api/checking_authenticity_with_password/index.html b/files/es/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html new file mode 100644 index 0000000000..f2e2ef65fd --- /dev/null +++ b/files/es/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html @@ -0,0 +1,30 @@ +--- +title: Verificando la autenticidad usando contraseña +slug: Web/API/Web_Crypto_API/Checking_authenticity_with_password +translation_of: 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/comenzando_(tutorial_css)/index.html b/files/es/orphaned/web/css/comenzando_(tutorial_css)/index.html new file mode 100644 index 0000000000..54997a5f6e --- /dev/null +++ b/files/es/orphaned/web/css/comenzando_(tutorial_css)/index.html @@ -0,0 +1,40 @@ +--- +title: Comenzando (tutorial CSS) +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 new file mode 100644 index 0000000000..facb250cb3 --- /dev/null +++ b/files/es/orphaned/web/css/como_iniciar/index.html @@ -0,0 +1,5 @@ +--- +title: Como iniciar +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/primeros_pasos/index.html b/files/es/orphaned/web/css/primeros_pasos/index.html new file mode 100644 index 0000000000..c6eb218230 --- /dev/null +++ b/files/es/orphaned/web/css/primeros_pasos/index.html @@ -0,0 +1,39 @@ +--- +title: Primeros pasos +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/rtl/index.html b/files/es/orphaned/web/css/rtl/index.html new file mode 100644 index 0000000000..1fd8c9f45d --- /dev/null +++ b/files/es/orphaned/web/css/rtl/index.html @@ -0,0 +1,22 @@ +--- +title: rtl +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/guide/html/introduction_alhtml_clone/index.html b/files/es/orphaned/web/guide/html/introduction_alhtml_clone/index.html new file mode 100644 index 0000000000..991cf90181 --- /dev/null +++ b/files/es/orphaned/web/guide/html/introduction_alhtml_clone/index.html @@ -0,0 +1,172 @@ +--- +title: Introducción al HTML +slug: Web/Guide/HTML/Introduction_alhtml_clone +tags: + - HTML +--- +

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/html/element/command/index.html b/files/es/orphaned/web/html/element/command/index.html new file mode 100644 index 0000000000..eaaeb3118c --- /dev/null +++ b/files/es/orphaned/web/html/element/command/index.html @@ -0,0 +1,152 @@ +--- +title: +slug: Web/HTML/Elemento/command +tags: + - HTML + - Obsoleto +translation_of: Web/HTML/Element/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 new file mode 100644 index 0000000000..814711131f --- /dev/null +++ b/files/es/orphaned/web/html/element/element/index.html @@ -0,0 +1,110 @@ +--- +title: +slug: Web/HTML/Elemento/element +translation_of: Web/HTML/Element/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/elemento/etiqueta_personalizada_html5/index.html b/files/es/orphaned/web/html/elemento/etiqueta_personalizada_html5/index.html new file mode 100644 index 0000000000..e18dd89f0d --- /dev/null +++ b/files/es/orphaned/web/html/elemento/etiqueta_personalizada_html5/index.html @@ -0,0 +1,46 @@ +--- +title: Etiqueta Personalizada HTML5 +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 new file mode 100644 index 0000000000..e93752b734 --- /dev/null +++ b/files/es/orphaned/web/html/elemento/tipos_de_elementos/index.html @@ -0,0 +1,119 @@ +--- +title: Tipos de elementos +slug: Web/HTML/Elemento/Tipos_de_elementos +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +--- +

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 new file mode 100644 index 0000000000..27abb8f133 --- /dev/null +++ b/files/es/orphaned/web/html/global_attributes/dropzone/index.html @@ -0,0 +1,99 @@ +--- +title: dropzone +slug: Web/HTML/Atributos_Globales/dropzone +tags: + - Atributos globales + - Experimental + - HTML + - Referencia +translation_of: Web/HTML/Global_attributes/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 new file mode 100644 index 0000000000..2098f514ad --- /dev/null +++ b/files/es/orphaned/web/javascript/reference/global_objects/array/prototype/index.html @@ -0,0 +1,188 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Array/prototype +tags: + - Array + - Arreglo + - JavaScript + - Property + - Propiedad +translation_of: Web/JavaScript/Reference/Global_Objects/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/svg/svg_en_firefox_1.5/index.html b/files/es/orphaned/web/svg/svg_en_firefox_1.5/index.html new file mode 100644 index 0000000000..f2d954e573 --- /dev/null +++ b/files/es/orphaned/web/svg/svg_en_firefox_1.5/index.html @@ -0,0 +1,60 @@ +--- +title: SVG en Firefox 1.5 +slug: Web/SVG/SVG_en_Firefox_1.5 +tags: + - SVG + - Todas_las_Categorías +--- +

+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 new file mode 100644 index 0000000000..c2809418ff --- /dev/null +++ b/files/es/orphaned/xpinstall_api_reference/index.html @@ -0,0 +1,132 @@ +--- +title: XPInstall API Reference +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; +

diff --git a/files/es/participar_en_el_proyecto_mozilla/index.html b/files/es/participar_en_el_proyecto_mozilla/index.html deleted file mode 100644 index 7266e63643..0000000000 --- a/files/es/participar_en_el_proyecto_mozilla/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Participar en el proyecto Mozilla -slug: Participar_en_el_proyecto_Mozilla -tags: - - para_revisar ---- -

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/plantillas_en_firefox_3/index.html b/files/es/plantillas_en_firefox_3/index.html deleted file mode 100644 index 499fa226a2..0000000000 --- a/files/es/plantillas_en_firefox_3/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Plantillas en Firefox 3 -slug: Plantillas_en_Firefox_3 -tags: - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3/Templates ---- -
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

- -

Las plantillas se han mejorado enormemente en Firefox 3. La mejora más importante permite el uso de procesador de consultas personalizado para manejar otro tipo de fuentes de datos además de RDF. Esto es posible gracias a la nueva sintaxis de consultas. También se incluyen soporte para SQL (mozStorage) y fuentes de datos XML. Ya {{ interwiki('wikimo', 'XUL:Template_Features_in_1.9', 'está disponible') }} una descripción completa de las nuevas características para plantillas. ({{ Bug(285631) }})

- -

Otras mejoras

- -
    -
  • Se han añadido condiciones relacionales para que los resultados encontrados cumplan la norma con una mayor exactitud. Esto permite, por ejemplo, que se encuentren resultados que empiecen o terminen con determinados hilos, o que son antes o después otros valores.
    • -
  • Se ha incluido una bandera, dont-recurse, para evitar que se repitan resultados generados tan solo a un nivel.
    • -
  • Se han añadido APIs al editor de plantillas para recuperar un objeto de resultado que representa un dato externo.
    • -
  • Se ha mejorado el servicio tipo XUL clasificando mejor tanto el árbol de contenido como el de sin contenido. También permite clasificar contenidos de plantillas no editables.({{ Bug(335122) }})
    • -
- -

Véase también

- - - -

{{ languages( { "en": "en/Templates_in_Firefox_3", "fr": "fr/Templates_dans_Firefox_3", "ja": "ja/Templates_in_Firefox_3" } ) }}

diff --git "a/files/es/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/index.html" "b/files/es/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/index.html" deleted file mode 100644 index 77496f3178..0000000000 --- "a/files/es/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/index.html" +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Preguntas frecuentes sobre incrustación en Mozilla -slug: Preguntas_frecuentes_sobre_incrustación_en_Mozilla ---- -{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git "a/files/es/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/introducci\303\263n_a_gecko_e_inscrustaci\303\263n/index.html" "b/files/es/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/introducci\303\263n_a_gecko_e_inscrustaci\303\263n/index.html" deleted file mode 100644 index 9240658758..0000000000 --- "a/files/es/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/introducci\303\263n_a_gecko_e_inscrustaci\303\263n/index.html" +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Introducción a Gecko e inscrustación -slug: >- - Preguntas_frecuentes_sobre_incrustación_en_Mozilla/Introducción_a_Gecko_e_inscrustación -tags: - - Incrustando_Mozilla - - Todas_las_Categorías ---- -

-

-

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/principios_b\303\241sicos_de_los_servicios_web/index.html" "b/files/es/principios_b\303\241sicos_de_los_servicios_web/index.html" deleted file mode 100644 index a5e4ca392c..0000000000 --- "a/files/es/principios_b\303\241sicos_de_los_servicios_web/index.html" +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Principios básicos de los servicios Web -slug: Principios_básicos_de_los_servicios_Web -tags: - - SOAP - - Servicios_Web_XML - - Todas_las_Categorías - - XML - - XML-RPC ---- -

-

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

-
  • Autor(es): Justin G. Shreve -
  • Fecha de la última actualización : 19 de Mayo de 2005 -
-
diff --git a/files/es/recursos_en_modo_desconectado_en_firefox/index.html b/files/es/recursos_en_modo_desconectado_en_firefox/index.html deleted file mode 100644 index 1c187da642..0000000000 --- a/files/es/recursos_en_modo_desconectado_en_firefox/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: Recursos en modo desconectado en Firefox -slug: Recursos_en_modo_desconectado_en_Firefox -tags: - - Aplicaciones_web_en_desconectado - - Firefox 3 ---- -

{{ Fx_minversion_header(3) }}

- -

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/referencia_de_xul/index.html b/files/es/referencia_de_xul/index.html deleted file mode 100644 index 9cab79c0e8..0000000000 --- a/files/es/referencia_de_xul/index.html +++ /dev/null @@ -1,317 +0,0 @@ ---- -title: Referencia de XUL -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/referencia_dom_de_gecko/c\303\263mo_espacioenblanco/index.html" "b/files/es/referencia_dom_de_gecko/c\303\263mo_espacioenblanco/index.html" deleted file mode 100644 index a943896180..0000000000 --- "a/files/es/referencia_dom_de_gecko/c\303\263mo_espacioenblanco/index.html" +++ /dev/null @@ -1,476 +0,0 @@ ---- -title: 'Cómo manejan el espacio en blanco HTML, CSS y el DOM' -slug: Referencia_DOM_de_Gecko/Cómo_espacioenblanco -tags: - - CSS - - DOM - - HTML - - JavaScript - - espacioenblanco - - whitespace -translation_of: Web/API/Document_Object_Model/Whitespace ---- -
{{APIRef("DOM")}}
- -

La presencia de espacios en blanco en el DOM puede causar problemas de diseño y dificultar la manipulación del árbol de contenido de formas inesperadas, dependiendo de dónde se encuentra. Este artículo explora cuándo pueden surgir dificultades y analiza qué se puede hacer para mitigar los problemas resultantes.

- -

¿Qué es el espacio en blanco?

- -

El espacio en blanco es cualquier cadena de texto compuesta solo por espacios, tabulaciones o saltos de línea (para ser precisos, secuencias CRLF, retornos de carro o avances de línea). Estos caracteres te permiten formatear tu código de una manera que lo hará fácilmente legible por ti y otras personas. De hecho, gran parte de nuestro código fuente está lleno de estos caracteres de espacio en blanco, y solo tendemos a deshacernos de ellos en un paso de compilación de producción para reducir el tamaño de descarga del código.

- -

¿HTML ignora en gran medida los espacios en blanco?

- -

En el caso de HTML, los espacios en blanco se ignoran en gran medida: los espacios en blanco entre palabras se tratan como un solo carácter y los espacios en blanco al principio y al final de los elementos y los elementos externos se ignoran. Tomemos el siguiente ejemplo minimalista:

- - - -
<!DOCTYPE html>
-
-    <h1>       ¡Hola      mundo!     </h1>
- -

{{EmbedLiveSample('HTML_largely_ignores_whitespace')}}

- -

Este código fuente contiene un par de avances de línea después del DOCTYPE y un montón de caracteres de espacio antes, después y dentro del elemento <h1>, pero al navegador no parece importarle en absoluto y solo muestra las palabras "¡Hola mundo!" como si estos caracteres no existieran en absoluto:

- -

Esto es para que los espacios en blanco no afecten el diseño de tu página. Crear espacio alrededor y dentro de los elementos es el trabajo de CSS.

- -

¿Qué sucede con los espacios en blanco?

- -

Sin embargo, no solo desaparecen.

- -

Cualquier carácter de espacio en blanco que esté fuera de los elementos HTML del documento original se representan en el DOM. Esto es necesario internamente para que el editor pueda preservar el formato de los documentos. Esto significa que:

- -
    -
  • Habrá algunos nodos de texto que contienen solo espacios en blanco, y
    • -
  • Algunos nodos de texto tendrán espacios en blanco al principio o al final.
    • -
- -

Tomemos el siguiente documento, por ejemplo:

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>Mi Documento</title>
-</head>
-<body>
-  <h1>Encabezado</h1>
-  <p>
-    Párrafo
-  </p>
-</body>
-</html>
-
- -

El árbol del DOM para esto se ve así:

- -

árbol de dom equivalente al ejemplo de HTML anterior

- -

Conservar caracteres de espacio en blanco en el DOM es útil de muchas maneras, pero hay ciertos lugares donde esto hace que ciertos diseños sean más difíciles de implementar y causa problemas a los desarrolladores que quieren iterar a través de los nodos del DOM. Veremos estas y algunas soluciones más adelante.

- -

¿CSS cómo procesa los espacios en blanco?

- -

La mayoría de los espacios en blanco se ignoran, no todos. En el ejemplo anterior, uno de los espacios entre "!Hola" y "mundo!" todavía existe cuando la página se representa en un navegador. Hay reglas en el motor del navegador que deciden qué caracteres de espacio en blanco son útiles y cuáles no; estos se especifican al menos en parte en el Módulo de texto CSS Nivel 3, y especialmente las partes sobre la propiedad white-space en CSS y detalles de procesamiento del espacio en blanco, pero también ofrecemos una explicación más sencilla a continuación.

- -

Tomemos otro ejemplo realmente simple. Para hacerlo más fácil, ilustramos todos los espacios con ◦, todas las tabulaciones con ⇥ y todos los saltos de línea con ⏎:

- -

Este ejemplo:

- -
<h1>◦◦◦¡Hola◦⏎
-⇥⇥⇥⇥<span>◦mundo!</span>⇥◦◦</h1>
- -

se representa en el navegador así:

- - - -

{{EmbedLiveSample('Hidden_example')}}

- -

El elemento <h1> contiene solo elementos en línea. De hecho contiene:

- -
    -
  • Un nodo de texto (que consta de algunos espacios, la palabra "¡Hola" y algunas tabulaciones).
    • -
  • Un elemento en línea (el <span>, que contiene un espacio, y la palabra "mundo!").
    • -
  • Otro nodo de texto (que consta solo de tabulaciones y espacios).
    • -
- -

Debido a esto, establece lo que se llama un {{cssxref("Inline_formatting_context", "contexto de formato en línea")}}. Este es uno de los posibles contextos de representación de diseño con los que funcionan los motores del navegador.

- -

Dentro de este contexto, el procesamiento de caracteres de espacio en blanco se puede resumir de la siguiente manera:

- -
    -
  1. -

    Primero, todos los espacios y tabulaciones inmediatamente antes y después de un salto de línea se ignoran, por lo que, si tomamos nuestro marcado de ejemplo anterior y aplicamos esta primera regla, obtenemos:

    - - 
    <h1>◦◦◦¡Hola⏎
-<span>◦mundo!</span>⇥◦◦</h1>
    -
    2. -
  2. -

    A continuación, todos los caracteres de tabulación se tratan como caracteres de espacio, por lo que el ejemplo se convierte en:

    - - 
    <h1>◦◦◦¡Hola⏎
-<span>◦mundo!</span>◦◦◦</h1>
    -
    3. -
  3. -

    A continuación, los saltos de línea se convierten en espacios:

    - - 
    <h1>◦◦◦¡Hola◦<span>◦mundo!</span>◦◦◦</h1>
    -
    4. -
  4. -

    Después de eso, cualquier espacio inmediatamente después de otro espacio (incluso a través de dos elementos en línea separados) se ignora, por lo que terminamos con:

    - - 
    <h1>◦¡Hola◦<span>mundo!</span>◦</h1>
    -
    5. -
  5. -

    Y finalmente, las secuencias de espacios al principio y al final de una línea se eliminan, por lo que eventualmente obtenemos esto:

    - - 
    <h1>¡Hola◦<span>mundo!</span></h1>
    -
    6. -
- -

Es por eso que las personas que visitan la página web simplemente verán la frase "¡Hola mundo!" muy bien escrita en la parte superior de la página, en lugar de un "!Hola" con una sangría extraña, seguido de un "mundo!" en la línea debajo de esa.

- -
-

Nota: Firefox DevTools ha admitido el resaltado de nodos de texto desde la versión 52, lo que facilita ver exactamente qué contenido hay dentro de los nodos de espacios en blanco. Los nodos de espacios en blanco puros están marcados con una etiqueta "whitespace".

-
- -

Espacio en blanco en contextos de formato de bloque

- -

Anteriormente, solo miramos elementos que contienen elementos en línea y contextos de formato en línea. Si un elemento contiene al menos un elemento de bloque, entonces establece lo que se llama un {{cssxref("Block_formatting_context", "contexto de formato de bloque")}}.

- -

En este contexto, los espacios en blanco se tratan de manera muy diferente. Veamos un ejemplo para explicar cómo. Hemos marcado los espacios en blanco como antes.

- -
<body>⏎
-⇥<div>◦◦¡Hola◦◦</div>⏎
-⏎
-◦◦◦<div>◦◦mundo!◦◦</div>◦◦⏎
-</body>
- -

Tenemos 3 nodos de texto que contienen solo espacios en blanco, uno antes del primer <div>, uno entre los 2 <div>s y uno después del segundo <div>.

- -

Esto se renderiza así:

- - - -

{{EmbedLiveSample('Hidden_example_2')}}

- -

Podemos resumir cómo se maneja el espacio en blanco aquí de la siguiente manera (puede haber algunas pequeñas diferencias en el comportamiento exacto entre los navegadores, pero básicamente, esto funciona):

- -
    -
  1. -

    Debido a que estamos dentro de un contexto de formato de bloque, todo debe ser un bloque, por lo que nuestros 3 nodos de texto también se convierten en bloques, al igual que los 2 <div>s. Los bloques ocupan todo el ancho disponible y se apilan unos encima de los otros, lo cual significa que terminamos con un diseño compuesto por esta lista de bloques:

    - - 
    <block>⏎⇥</block>
-<block>◦◦¡Hola◦◦</block>
-<block>⏎◦◦◦</block>
-<block>◦◦mundo!◦◦</block>
-<block>◦◦⏎</block>
    -
    2. -
  2. -

    Esto luego se simplifica aún más aplicando las reglas de procesamiento para espacios en blanco en contextos de formato en línea a estos bloques:

    - - 
    <block></block>
-<block>¡Hola</block>
-<block></block>
-<block>mundo!</block>
-<block></block>
    -
    3. -
  3. -

    Los 3 bloques vacíos que tenemos ahora no van a ocupar ningún espacio en el diseño final, porque no contienen nada, así que terminaremos con solo 2 bloques ocupando espacio en la página. Las personas que visitan la página web ven las palabras "!Hola" y "mundo!" en 2 líneas separadas, ya que esperarías que se distribuyeran 2 <div>s. El motor del navegador esencialmente ha ignorado todos los espacios en blanco que se agregaron en el código fuente.

    -
    4. -
- -

Espacios entre elementos en línea y bloques en línea

- -

Ahora analicemos algunos problemas que pueden surgir debido a los espacios en blanco y qué se puede hacer al respecto. En primer lugar, veremos qué sucede con los espacios entre los elementos en línea y de bloque en línea. De hecho, ya vimos esto en nuestro primer ejemplo, cuando describimos cómo se procesan los espacios en blanco dentro de los contextos de formato en línea.

- -

Dijimos que había reglas para ignorar la mayoría de los caracteres, pero que los caracteres que separan palabras permanecen. Cuando solo se trata de elementos a nivel de bloque como <p> que solo contienen elementos en línea como <em>, <strong>, <span>, etc., normalmente no te importa esto porque el espacio en blanco adicional que llega al diseño es útil para separar las palabras en la oración.

- -

Sin embargo, se vuelve más interesante cuando comienzas a usar elementos inline-block. Estos elementos se comportan como elementos en línea en el exterior y como bloques en el interior, y a menudo se utilizan para mostrar piezas de la IU más complejas que solo texto, una al lado de la otra en la misma línea, por ejemplo, elementos del menú de navegación.

- -

Debido a que son bloques, muchas personas esperan que se comporten como tales, pero en realidad no es así. Si hay espacios en blanco de formato entre elementos en línea adyacentes, esto dará como resultado un espacio en el diseño, al igual que los espacios entre palabras en el texto.

- -

Considera este ejemplo (nuevamente, los espacios en blanco en el HTML están marcados para que sean visibles):

- -
.people-list {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-.people-list li {
-  display: inline-block;
-  width: 2em;
-  height: 2em;
-  background: #f06;
-  border: 1px solid;
-}
-
- -
<ul class="people-list">⏎
-
-◦◦<li></li>⏎
-
-◦◦<li></li>⏎
-
-◦◦<li></li>⏎
-
-◦◦<li></li>⏎
-
-◦◦<li></li>⏎
-
-</ul>
- -

Esto se traduce de la siguiente manera:

- - - -

{{EmbedLiveSample('Hidden_example_3')}}

- -

Probablemente no desees los espacios entre los bloques — dependiendo del caso de uso (¿esta es una lista de avatares o botones de navegación horizontales?), Probablemente desees que los lados del elemento estén alineados entre sí y poder controlar cualquier espacio tú mismo.

- -

El Inspector HTML de Firefox DevTools resaltará los nodos de texto y también te mostrará exactamente qué áreas están ocupando los elementos, lo que es útil si te preguntas qué está causando el problema y tal vez estés pensando que tienes un margen adicional allí o algo así.

- -

Espacio en blanco en Devtools

- -

Hay algunas formas de solucionar este problema:

- -

Utiliza Flexbox para crear la lista horizontal de elementos en lugar de probar una solución de inline-block. Esto se encarga de todo por ti y definitivamente es la solución preferida:

- -
ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-}
- -

Si necesitas confiar en inline-block, puedes establecer el {{cssxref("font-size")}} de la lista a 0. Esto solo trabaja si tus bloques no tienen el tamaño ems (según el font-size, por lo que el tamaño del bloque también terminaría siendo 0). rems sería una buena opción aquí:

- -
ul {
-  font-size: 0;
-  ...
-}
-
-li {
-  display: inline-block;
-  width: 2rem;
-  height: 2rem;
-  ...
-}
-
- -

O puedes establecer un margen negativo en los elementos de la lista:

- -
li {
-  display: inline-block;
-  width: 2rem;
-  height: 2rem;
-  margin-right: -0.25rem;
-}
- -

También puedes resolver este problema colocando los elementos de tu lista en la misma línea en la fuente, lo cual hace que los nodos de espacios en blanco no se creen en primer lugar:

- -
<li></li><li></li><li></li><li></li><li></li>
- -

Recorrido del DOM y el espacio en blanco

- -

Al intentar realizar una manipulación del DOM en JavaScript, también puedes encontrar problemas debido a los nodos de espacios en blanco. Por ejemplo, si tienes una referencia a un nodo padre y deseas afectar su primer elemento hijo usando Node.firstChild, si hay un nodo de espacio en blanco deshonesto justo después de la etiqueta de apertura principal, no obtendrás el resultado que esperabas. Se seleccionaría el nodo de texto en lugar del elemento al que deseas afectar.

- -

Veamos otro ejemplo, si tienes un determinado subconjunto de elementos en los que deseas hacer algo en función de si están vacíos (no tienen nodos secundarios) o, no puedes verificar si cada elemento está vacío usando algo como Node.hasChildNodes(), pero nuevamente, si algún elemento destino contiene nodos de texto, podrías terminar con resultados falsos.

- -

Funciones auxiliares de espacios en blanco

- -

El siguiente código JavaScript define varias funciones que facilitan el manejo de espacios en blanco en el DOM:

- -
/**
- * En todo, el espacio en blanco se define como uno de los caracteres
- *  "\t" TAB \u0009
- *  "\n" LF  \u000A
- *  "\r" CR  \u000D
- *  " "  SPC \u0020
- *
- * Esto no usa la "\s" de Javascript porque eso incluye
- * espacios irrompibles (y también algunos otros caracteres).
- */
-
-
-/**
- * Determina si el contenido de texto de un nodo es completamente de espacios en blanco.
- *
- * @param nod  Un nodo que implementa la interfaz | CharacterData | (es decir,
- *             un nodo |Text|, |Comment| o |CDATASection|
- * @return     True si todo el contenido de texto de |nod| es espacio en blanco,
- *             de lo contrario false.
- */
-function is_all_ws( nod )
-{
-  // Usa las características de String y RegExp de ECMA-262 Edición 3
-  return !(/[^\t\n\r ]/.test(nod.textContent));
-}
-
-
-/**
- * Determina si un nodo debe ser ignorado por las funciones del iterador.
- *
- * @param nod  Un objeto implementando la interfaz |Node| de DOM1.
- * @return     true si el nodo es:
- *                1) Un nodo |Text| en que todo es espacio en blanco
- *                2) Un nodo |Comment|
- *             y de lo contrario false.
- */
-
-function is_ignorable( nod )
-{
-  return ( nod.nodeType == 8) || // Un nodo comment
-         ( (nod.nodeType == 3) && is_all_ws(nod) ); // un nodo text, todo es eeb
-}
-
-/**
- * Versión de |previousSibling| que omite los nodos que son completamente
- * espacio en blanco o comentarios.  (Normalmente |previousSibling| es una propiedad
- * de todos los nodos DOM que devuelve el nodo hermano, el nodo que es
- * un hijo del mismo padre, que ocurre inmediatamente antes del
- * nodo de referencia).
- *
- * @param sib  El nodo de referencia.
- * @return     O bien:
- *               1) El hermano anterior más cercano a |sib| eso no es
- *                  ignorable según |is_ignorable|, o
- *               2) null si no existe tal nodo.
- */
-function node_before( sib )
-{
-  while ((sib = sib.previousSibling)) {
-    if (!is_ignorable(sib)) return sib;
-  }
-  return null;
-}
-
-/**
- * Versión de |nextSibling| que omite los nodos que son completamente
- * espacio en blanco o comentarios.
- *
- * @param sib  El nodo de referencia.
- * @return     O bien:
- *               1) El hermano más cercano a |sib| eso no es
- *                  ignorable según |is_ignorable|, o
- *               2) null si no existe tal nodo.
- */
-function node_after( sib )
-{
-  while ((sib = sib.nextSibling)) {
-    if (!is_ignorable(sib)) return sib;
-  }
-  return null;
-}
-
-/**
- * Versión de |lastChild| que omite los nodos que son completamente
- * espacio en blanco o comentarios.  (Normalmente |lastChild| es una propiedad
- * de todos los nodos del DOM que da el último de los nodos contenidos
- * directamente en el nodo de referencia).
- *
- * @param sib  El nodo de referencia.
- * @return     O bien:
- *               1) El último hijo de |sib| eso no es
- *                  ignorable según |is_ignorable|, o
- *               2) null si no existe tal nodo.
- */
-function last_child( par )
-{
-  var res=par.lastChild;
-  while (res) {
-    if (!is_ignorable(res)) return res;
-    res = res.previousSibling;
-  }
-  return null;
-}
-
-/**
- * Versión de |firstChild| que omite los nodos que son completamente
- * espacios en blanco y comentarios.
- *
- * @param sib  El nodo de referencia.
- * @return     O bien:
- *               1) El primer hijo de |sib| eso no es
- *                  ignorable según |is_ignorable|, o
- *               2) null si no existe tal nodo.
- */
-function first_child( par )
-{
-  var res=par.firstChild;
-  while (res) {
-    if (!is_ignorable(res)) return res;
-    res = res.nextSibling;
-  }
-  return null;
-}
-
-/**
- * Versión de |data| que no incluye espacios en blanco al principio
- * y finaliza y normaliza todos los espacios en blanco a un solo espacio.  (Normalmente
- * |data| es una propiedad de los nodos de texto que proporciona el texto del nodo).
- *
- * @param txt  El nodo de texto cuyos datos se deben devolver
- * @return     Una cadena que proporciona el contenido del nodo de texto con
- *             espacios en blanco colapsados.
- */
-function data_of( txt )
-{
-  var data = txt.textContent;
-  // Usa las características de String y RegExp de ECMA-262 Edición 3
-  data = data.replace(/[\t\n\r ]+/g, " ");
-  if (data.charAt(0) == " ")
-    data = data.substring(1, data.length);
-  if (data.charAt(data.length - 1) == " ")
-    data = data.substring(0, data.length - 1);
-  return data;
-}
-
- -

Ejemplo

- -

El siguiente código demuestra el uso de las funciones anteriores. Itera sobre los hijos de un elemento (cuyos hijos son todos elementos) para encontrar aquel cuyo texto es "Este es el tercer párrafo", y luego cambia el atributo de clase y el contenido de ese párrafo.

- -
var cur = first_child(document.getElementById("test"));
-while (cur)
-{
-  if (data_of(cur.firstChild) == "Este es el tercer párrafo.")
-  {
-    cur.className = "magic";
-    cur.firstChild.textContent = "Este es el párrafo mágico.";
-  }
-  cur = node_after(cur);
-}
-
diff --git a/files/es/referencia_dom_de_gecko/ejemplos/index.html b/files/es/referencia_dom_de_gecko/ejemplos/index.html deleted file mode 100644 index 33f0e9e2b7..0000000000 --- a/files/es/referencia_dom_de_gecko/ejemplos/index.html +++ /dev/null @@ -1,367 +0,0 @@ ---- -title: Ejemplos -slug: Referencia_DOM_de_Gecko/Ejemplos -tags: - - DOM - - Referencia_DOM_de_Gecko - - Todas_las_Categorías - - páginas_a_traducir -translation_of: Web/API/Document_Object_Model/Examples ---- -

En este capítulo se brindan ejemplos relativamente extensos que ilustran el uso del DOM para el desarrollo web y XML. Siempre que sea posible, usaremos las APIs, trucos y patrones comunes en JavaScript para la manipulación del objeto document.

- -

Ejemplo 1: Altos y anchos

- -

El ejemplo siguiente muestra el uso de las propiedades de alto (height) y ancho (width) junto a imágenes de dimensiones variadas:

- -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-
-<html lang="es">
-
-<head>
-<title>Ejemplo de height/width</title>
-<script type="text/javascript">
-function iniciar()
-{
-  var arrImages = new Array(3);
-  arrImages[0] = document.getElementById("imagen1");
-  arrImages[1] = document.getElementById("imagen2");
-  arrImages[2] = document.getElementById("imagen3");
-  var objOutput = document.getElementById("salida");
-  var strHtml = "<ul>";
-  for (var i = 0; i < arrImages.length; i++)
-    strHtml += "<li>imagen" + (i+1) +
-            ": height=" + arrImages[i].height +
-            ", width=" + arrImages[i].width +
-            ", style.height=" + arrImages[i].style.height +
-            ", style.width=" + arrImages[i].style.width +
-            "<\/li>";
-  strHtml += "<\/ul>";
-  salida.innerHTML = strHtml;
-}
-</script>
-</head>
-<body onload="iniciar();">
-
-<p>La 1ª imagen:
-- alto (height): no
-- ancho (width): no
-- estilo (style): no
-    <img id="imagen1" src="http://www.mozilla.org/images/mozilla-banner.gif">
-</p>
-<p>La 2ª imagen:
-- height="50"
-- width="500"
-- style: no
-    <img id="imagen2" src="http://www.mozilla.org/images/mozilla-banner.gif"
-         height="50" width="500">
-</p>
-<p>La 3ª imagen:
-- height y width: no
-- style="height: 50px; width: 500px;": sí
-    <img id="imagen3" src="http://www.mozilla.org/images/mozilla-banner.gif"
-         style="height: 50px; width: 500px;">
-</p>
-
-<div id="salida"> </div>
-</body>
-</html>
-
- -

height y width son además propiedades de los elementos OBJECT y APPLET.

- -

Ejemplo 2: Atributos de una imagen

- -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-
-<html lang="es">
-
-<head>
-<title>Modificación del borde de una imagen</title>
-<script type="text/javascript">
-function setBorderWidth(width) {
-  document.getElementById("img1").style.borderWidth = width + "px";
-}
-</script>
-</head>
-
-<body>
-<p>
-  <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100"
-height="100" alt="test de borde">
-</p>
-
-<form name="Formulario">
-  <p><input type="button" value="Definir un borde de 20px"
-onclick="setBorderWidth(20);"> <input type="button" value="Definir un borde de 5px"
-onclick="setBorderWidth(5);"></p>
-</form>
-
-</body>
-</html>
-
- -

Ejemplo 3: Manipulación de estilos

- -

En este ejemplo sencillo, algunas propiedades de estilo básicas de un elemento párrafo HTML son accedidas utilizando el objeto estilo en el elemento y aquellas propiedades de estilo CSS del objeto, pueden ser entregadas y establecidas desde el DOM. En este caso, está manipulando los estilos directamente. En el siguiente ejemplo (ver ejemplo 4), puede utilizar las hojas de estilo y sus reglas para cambiar estilos para el documento entero.

- -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-
-<html lang="en">
-
-<head>
-<title>Changing color and font-size example</title>
-<script type="text/javascript">
-function changeText() {
-	var p = document.getElementById("pid");
-	p.style.color = "blue"
-	p.style.fontSize = "18pt"
-}
-</script>
-</head>
-<body>
-<p id="pid"
-onclick="window.location.href = 'http://www.cnn.com/';">linker</p>
-<form>
-<p><input value="rec" type="button" onclick="changeText();"></p>
-</form>
-</body>
-</html>
-
- -

Ejemplo 4: Utilización de las hojas de estilo

- -

La propiedad de las hojas de estilo en un objeto de documento muestra una lista de las hojas de estilo que acompañan a ése documento. Usando los objetos de la hoja de estilo, del estilo y de las reglas de CSS se puede acceder individualmente a esas hojas de estilo y sus reglas, como se demuestra en este ejemplo, el cual muestra todos los selectores de reglas de estilo en la consola.

- -
ss = document.styleSheets;
-for(i=0; i<ss.length; i++)
- {
- for(j=0; j<ss[0].cssRules.length; j++)
-  {
-  dump( ss[i].cssRules[j].selectorText + "\n" );
-  }
- }
-
- -

Para un documento con una sola hoja de estilo en la cual son definidas las tres reglas siguientes:

- -
BODY { background-color: darkblue; }
-P { font-face: Arial; font-size: 10pt; margin-left: .125in; }
-#lumpy { display: none; }
-
- -

El script sale así:

- -
BODY
-P
-#LUMPY
-
- -

Ejemplo 5: Propagación del evento

- -

Este ejemplo muestra de una forma muy simple como los eventos se inician y son gestionados en el DOM. Cuando el cuerpo (body ) de ese documento HTML se carga,un evento listener es registrado con la columna superior de la TABLA. El evento listener maneja el evento ejecutando la función stopEvent, que cambia el valor en el final de la celda de la tabla.

- -

Sin embargo, stopEvent también llama a un método del objeto evento, event.stopPropagation, que mantiene el evento del burbujeo a continuación dentro del DOM. Note que la tabla misma tiene un manejador de evento onclick que muestra un mensaje cuando la tabla es seleccionada. Pero el método stopEvent ha detenido la propagación, y así despues los datos en la tabla son actualizados, la fase de evento es efectivamente finalizada, y un cuadro de alerta es mostrado para confirmar esto.

- -
<html>
-<head>
-<title>Propagación del evento</title>
-
-<style type="text/css">
- #t-daddy { border: 1px solid red }
- #c1 { background-color: pink; }
-</style>
-
-<script type="text/javascript">
-
-function stopEvent(ev) {
-  c2 = document.getElementById("c2");
-  c2.innerHTML = "hola";
-
-  // this ought to keep t-daddy from getting the click.
-  ev.stopPropagation();
-  alert("La propagación del evento se ha parado.");
-}
-
-function load() {
-  elem = document.getElementById("tbl1");
-  elem.addEventListener("click", stopEvent, false);
-}
-</script>
-</head>
-
-<body onload="load();">
-
-<table id="t-daddy" onclick="alert('hi');">
- <tr id="tbl1">
-  <td id="c1">uno</td>
- </tr>
- <tr>
-  <td id="c2">dos</td>
- </tr>
-</table>
-
-</body>
-</html>
-
- -

Ejemplo 6: Conseguir el estilo computado (getComputedStyle)

- -

Este ejemplo demuestra como el método window.getComputedStyle puedes utilizarse para obtener los estilos de un elemento que no son especificados en el atributo style o con JavaScript (por ejemplo, element.style.backgroundColor="rgb(173, 216, 230)"). Estos últimos tipos de estilos se pueden recuperar con el atributo element.style, las propiedades del cual están en la lista de propiedades de CSS del DOM.

- -

getComputedStyle() devuelve un objeto ComputedCSSStyleDeclaration, cuyas propiedades de estilo individuales pueden ser referenciadas con este método del objeto getPropertyValue(), el siguiente documento de ejemplo lo muestra.

- -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-
-<html lang="en">
-
-<head>
- <title>Ejemplo de ''getComputedStyle''</title>
-
- <script type="text/javascript">
-   function cStyles()
-  {
-   var RefDiv = document.getElementById("d1");
-
-   var txtHeight = document.getElementById("t1");
-   var h_style =
-document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
-   txtHeight.value = h_style;
-
-   var txtWidth = document.getElementById("t2");
-   var w_style =
-document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
-   txtWidth.value = w_style;
-
-   var txtBackgroundColor = document.getElementById("t3");
-   var b_style =
-document.defaultView.getComputedStyle(RefDiv,
-null).getPropertyValue("background-color");
-   txtBackgroundColor.value = b_style;
-  }
- </script>
-
- <style type="text/css">
-   #d1 { margin-left: 10px; background-color: rgb(173, 216, 230);
-height: 20px; max-width: 20px; }
- </style>
-
-</head>
-
-<body>
-
-<div id="d1">&nbsp;</div>
-
-<form action="">
-<p><button type="button" onclick="cStyles();">getComputedStyle</button>
-  height<input id="t1" type="text" value="1">
-  max-width<input id="t2" type="text" value="2">
-  bg-color<input id="t3" type="text" value="3"></p>
-</form>
-
-</body>
-</html>
-
- -

Ejemplo 7: Mostrar las propiedades del objeto de evento

- -

Este ejemplo utiliza métodos del DOM para mostrar todas las propiedades del evento de window.onload y sus valores en una tabla. Muestra además una cómoda técnica del uso de un buclefor...in para iterar sobre las propiedades de un objeto y conseguir sus valores.

- -

Las propiedades de los objetos de evento difieren bastante entre los navegadores, la especificación W3C de los eventos del DOM 2 enumera las propiedades estándares, sin embargo algunos navegadores han extendido estas diferencias.

- -

El siguiente código colocado dentro de un nuevo archivo de texto y cargado en un surtido de navegadores, sorprenderá por las diferencias de los números y nombres de propiedades y/o al ponerle más elementos a la página y llamar esa función desde diferentes gestores de evento.

- -
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
-   "http://www.w3.org/TR/html4/strict.dtd">
-
-<title>Muestra las propiedades del evento</title>
-
-<style type="text/css">
-  table {border-collapse: collapse;}
-  thead {font-weight: bold;}
-  td {padding: 2px 10px 2px 10px;}
-  .odd {background-color: #efdfef;}
-  .even {background-color: #ffffff;}
-</style>
-
-<script type="text/javascript">
-
-function showEventProperties(e)
-{
-  function addCell(row, text) {
-    var cell = row.insertCell(-1);
-    cell.appendChild(document.createTextNode(text));
-  }
-
-  document.getElementById('eventType').innerHTML = e.type;
-
-  var e = e || window.event;
-  var table = document.createElement('table');
-  var thead = table.createTHead();
-  var row = thead.insertRow(-1);
-  var lableList = ['#', 'Propriété', 'Valeur'];
-  var len = lableList.length;
-
-  for (var i=0; i<len; i++) {
-    addCell(row, lableList[i]);
-  }
-
-  var tbody = document.createElement('tbody');
-  table.appendChild(tbody);
-
-  for (var p in e) {
-    row = tbody.insertRow(-1);
-    row.className = (row.rowIndex % 2)? 'odd':'even';
-    addCell(row, row.rowIndex);
-    addCell(row, p);
-    addCell(row, e[p]);
-  }
-
-  document.body.appendChild(table);
-}
-window.onload = function(event){
-  showEventProperties(event);
-}
-</script>
-
-<h1>Propiedades del objeto evento del DOM<span id="eventType"></span></h1>
-
- -

Ejemplo 8: Utilización del interfaz de tabla del DOM

- -

La interfaz HTMLTableElement del DOM provee algunos métodos de conveniencia para crear y manipular tablas. Dos métodos usados frecuentemente son table.insertRow y row.insertCell.

- -

Para agregar una columna y algunas celdas a una tabla existente:

- -
<table id="table0">
- <tr>
-  <td>Row 0 Cell 0</td>
-  <td>Row 0 Cell 1</td>
- </tr>
-</table>
-
-<script type="text/javascript">
-
-var table = document.getElementById('table0');
-var row = table.insertRow(-1);
-var cell, text;
-for (var i=0; i<2; i++) {
-  cell = row.insertCell(-1);
-  text = 'Row ' + row.rowIndex + ' Cell ' + i;
-  cell.appendChild(document.createTextNode(text));
-}
-
-</script>
-
- -

Notas

- -
    -
  • Una propiedad innerHTML de la tabla nunca debería ser utilizada para modificar una tabla, aunque puede utilizarla para escribir una tabla entera o el contenido de una celda.
    • -
  • Si los métodos Core del DOMdocument.createElement y element.appendChild son utilizados para crear columnas y celdas, IE requiere que sean agregadas a un elemento tbody, mientras que otros navegadores permitirán agregar a un elemento de la tabla (las columnas serán agregadas al último elemento tbody).
    • -
  • Hay un número de otros métodos de conveniencia pertenecientes a la interfaz de tabla que pueden ser utilizados para crear y modificar tablas.
    • -
diff --git a/files/es/referencia_dom_de_gecko/eventos/index.html b/files/es/referencia_dom_de_gecko/eventos/index.html deleted file mode 100644 index fce2530535..0000000000 --- a/files/es/referencia_dom_de_gecko/eventos/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Eventos y el DOM -slug: Referencia_DOM_de_Gecko/Eventos -tags: - - DOM - - Guía -translation_of: 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/referencia_dom_de_gecko/index.html b/files/es/referencia_dom_de_gecko/index.html deleted file mode 100644 index 0f3a2a7f75..0000000000 --- a/files/es/referencia_dom_de_gecko/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Referencia DOM de Gecko -slug: Referencia_DOM_de_Gecko -tags: - - DOM - - NecesitaRevisiónTécnica - - Todas_las_Categorías -translation_of: Web/API/Document_Object_Model ---- -

-« Referencia DOM de Gecko -


-Aquí está la tabla de contenido para la referencia DOM de Gecko. -

-

Prefacio

- -

Introducción

- -

La referencia al elemento (element) de DOM

- -

La referencia a la ventana (window) de DOM

- -

La referencia al document de DOM

- -

La referencia al event de DOM

- -

La referencia al estilo (style) de DOM

- -

La referencia al rango (range) de DOM

- -

La referencia a la selección (selection) de DOM

- -

Interfaz del elemento formulario (form) en HTML

- -

Interfaz del elemento tabla (table) en HTML

- -

Ejemplos DOM

- -
-

Información sobre el documento original

-
  • Última actualización: 22 de Octubre de 2006 -
-
-{{ languages( { "en": "en/Gecko_DOM_Reference", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko", "it": "it/Reference_del_DOM_di_Gecko", "ja": "ja/Gecko_DOM_Reference", "ko": "ko/Gecko_DOM_Reference", "pl": "pl/Dokumentacja_Gecko_DOM", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003" } ) }} diff --git "a/files/es/referencia_dom_de_gecko/introducci\303\263n/index.html" "b/files/es/referencia_dom_de_gecko/introducci\303\263n/index.html" deleted file mode 100644 index 5c604a7a6c..0000000000 --- "a/files/es/referencia_dom_de_gecko/introducci\303\263n/index.html" +++ /dev/null @@ -1,248 +0,0 @@ ---- -title: Introducción -slug: Referencia_DOM_de_Gecko/Introducción -tags: - - DOM - - Gecko - - Manuales - - Todas_las_Categorías -translation_of: Web/API/Document_Object_Model/Introduction ---- -

 

- -

Ésta sección da una breve introducción conceptual del DOM: qué es, cómo proporciona la estructura para los documentos HTML y XML, cómo se accede a él, y cómo esta "API" presenta la información de referencia y ejemplos.

- -

¿Qué es el DOM?

- -

El modelo de objeto de documento (DOM) es una interfaz de programación para los documentos HTML y XML. Facilita una representación estructurada del documento y define de qué manera los programas pueden acceder, al fin de modificar, tanto su estructura, estilo y contenido. El DOM da una representación del documento como un grupo de nodos y objetos estructurados que tienen propiedades y métodos. Esencialmente, conecta las páginas web a scripts o lenguajes de programación.

- -

Una página web es un documento. Éste documento puede exhibirse en la ventana de un navegador o también como código fuente HTML. Pero, en los dos casos, es el mismo documento. El modelo de objeto de documento (DOM) proporciona otras formas de presentar, guardar y manipular este mismo documento. El DOM es una representación completamente orientada al objeto de la página web y puede ser modificado con un lenguaje de script como JavaScript.

- -

El W3C DOM estándar forma la base del funcionamiento del DOM en muchos navegadores modernos. Varios navegadores ofrecen extensiones más allá del estándar W3C, hay que ir con extremo cuidado al utilizarlas en la web, ya que los documentos pueden ser consultados por navegadores que tienen DOMs diferentes.

- -

Por ejemplo, el DOM de W3C especifica que el método getElementsByTagName en el código de abajo debe devolver una lista de todos los elementos <p> del documento:

- -
paragraphs = document.getElementsByTagName ("p");
-// paragraphs[0] es el primer elemento <p>
-// paragraphs[1] es el segundo elemento <p>, etc.
-alert (paragraphs [0].nodeName);
-
- -

Todas las propiedades, métodos y eventos disponibles para la manipulación y la creación de páginas web está organizado dentro de objetos. Un ejemplo: el objeto document representa al documento mismo, el objeto table hace funcionar la interfaz especial HTMLTableElement del DOM para acceder a tablas HTML, y así sucesivamente. Ésta documentación procura una relación objeto-por-objeto del DOM que funciona con los navegadores basados en Gecko.

- -

DOM y JavaScript

- -

El ejemplo corto de abajo, como casi todos los ejemplos de esta referencia, es JavaScript. Es decir, es escrito en JavaScript pero utiliza el DOM para acceder al documento y a sus elementos. El DOM no es un lenguaje de programación pero sin él, el lenguaje JavaScript no tiene ningún modelo o noción de las páginas web, de la páginas XML ni de los elementos con los cuales es usualmente relacionado. Cada elemento -"el documento íntegro, el título, las tablas dentro del documento, los títulos de las tablas, el texto dentro de las celdas de las tablas"- es parte del modelo de objeto del documento para cada documento, así se puede acceder y manipularlos utilizando el DOM y un lenguaje de escritura, como JavaScript.

- -

En el comienzo, JavaScript y el DOM estaban herméticamente enlazados, pero después se desarrollaron como entidades separadas. El contenido de la página es almacenado en DOM y el acceso y la manipulación se hace vía JavaScript, podría representarse aproximadamente así:

- -

API(web o página XML) = DOM + JS(lenguaje de script)

- -

El DOM fue diseñado para ser independiente de cualquier lenguaje de programación particular, hace que la presentación estructural del documento sea disponible desde un simple y consistente API. Aunque en este manual nos centramos exclusivamente en JavaScript, la directrices del DOM pueden construirse para cualquier lenguaje, así lo demuestra el siguiente ejemplo de Python:

- -
# Ejemplo DOM de Python
-import xml.dom.minidom as m
-doc = m.parse("C:\\Projects\\Py\\chap1.xml");
-doc.nodeName # Propiedad DOM del objeto document;
-p_list = doc.getElementsByTagName("para");
- -

¿Cómo se accede al DOM?

- -

No se tiene que hacer nada especial para empezar a utilizar el DOM. Los diferentes navegadores tienen directrices DOM distintas, y éstas directrices tienen diversos grados de conformidad al actual estándar DOM (un tema que se intenta evitar en este manual), pero todos los navegadores web usan el modelo de objeto de documento para hacer accesibles las páginas web al script.

- -

Cuando se crea un script –esté en un elemento <SCRIPT> o incluido en una página web por la instrucción de cargar un script– inmediatamente está disponible para usarlo con el API, accediendo así a los elementos document o window, para manipular el documento mismo o sus diferentes partes, las cuales son los varios elementos de una página web. La programación DOM hace algo tan simple como lo siguiente, lo cual abre un mensaje de alerta usando la función alert() desde el objeto window, o permite métodos DOM más sofisticados para crear realmente un nuevo contenido, como en el largo ejemplo de más abajo.

- -
<body onload="window.alert('Bienvenido a mi página!');">
-
- -

Aparte del elemento <script> en el cual JavaScript es definido, el ejemplo siguiente muestra la función a ejecutar cuando el documento se está cargando (y que el DOM completo es disponible para su uso). Esta función crea un nuevo elemento H1, le pone texto y después lo agrega al árbol del documento:

- -
<html>
-  <head>
-    <script>
-       // ejecuta esta función cuando se cargue el documento
-       window.onload = function() {
-
-         // crea dinámicamente un par de elementos HTML en una página vacia
-         var heading = document.createElement("h1");
-         var heading_text = document.createTextNode("el texto que desee");
-         heading.appendChild(heading_text);
-         document.body.appendChild(heading);
-      }
-    </script>
-  </head>
-  <body>
-  </body>
-</html>
- -

Tipos de datos importantes

- -

Esta parte intenta describir, de la manera más simple posible, los diferentes objetos y tipos. Pero hay que conocer una cantidad de tipos de datos diferentes que son utilizados por el API. Para simplificarlo, los ejemplos de sintaxis en esta API se refieren a nodos como elements, a una lista de nodos como nodeLists (o simples elementos) y a nodos de atributo como attributes.

- -

La siguiente tabla describe brevemente estos tipos de datos.

- - - - - - - - - - - - - - - - - - - - - - - - -
documentCuando un miembro devuelve un objeto del tipo document (por ejemplo, la propiedad ownerDocument de un elemento devuelve el documento "document" al cual pertenece), este objeto es la raíz del objeto documento en sí mismo. El capítulo La referencia al documento (document) de DOM lo explica con más detalles.
elementelement se refiere a un elemento o a un nodo de tipo de elemento "element" devuelto por un miembro del API de DOM. Dicho de otra manera, por ejemplo, el método document.createElement() devuelve un objeto referido a un nodo, lo que significa que este método devuelve el elemento que acaba de ser creado en el DOM. Los objetos element ponen en funcionamiento a la interfaz Element del DOM y también a la interfaz de nodo "Node" más básica, las cuales son incluidas en esta referencia.
nodeListUna "nodeList" es una serie de elementos, parecido a lo que devuelve el método document.getElementsByTagName(). Se accede a los items de la nodeList de cualquiera de las siguientes dos formas: -
    -
  • list.item (1)
    • -
  • lista {{mediawiki.external (1)}}
    • -
- -

Ambas maneras son equivalentes. En la primera, item() es el método del objeto nodeList. En la última se utiliza la típica sintaxis de acceso a listas para llegar al segundo ítem de la lista.

-
attributeCuando un atributo ("attribute") es devuelto por un miembro (por ej., por el método createAttribute()), es una referencia a un objeto que expone una interfaz particular (aunque limitada) a los atributos. Los atributos son nodos en el DOM igual que los elementos, pero no suelen usarse así.
NamedNodeMapUn namedNodeMap es una serie, pero los ítems son accesibles tanto por el nombre o por un índice, este último caso es meramente una conveniencia para enumerar ya que no están en ningún orden en particular en la lista. Un NamedNodeMap es un método de ítem() por esa razón, y permite poner o quitar ítems en un NamedNodeMap
- -

Interfaces del DOM

- -

Uno de los propósitos de esta guía es minimizar el hablar de interfaces abstractas, heredadas y otros detalles de funcionamiento. Más bien, concentrarse sobre los objetos en el DOM y sobre las actuales cosas que se pueden usar para manipular la jerarquía de DOM. Desde el punto de vista del programador web, es bastante indiferente saber que la representación del objeto del elemento HTML form toma la propidedad name desde la interfaz HTMLFormElement pero que las propiedades className se toman desde la propia interfaz HTMLElement. En ambos casos, la propiedad está sólo en el objeto form.

- -

Pero puede resultar confuso el funcionamiento de la fuerte relación entre objetos e interfaces en el DOM, por eso esta sección intentará hablar un poquito sobre las interfaces actuales en la especificación del DOM y de como se dispone de ellas.

- -

Interfaces y objetos

- -

En algunos casos un objeto pone en ejecución a una sola interfaz. Pero a menudo un objeto toma prestada una tabla HTML (table) desde muchas interfaces diversas. El objeto table, por ejemplo, pone en funcionamiento una Interfaz especial del elemento table HTML, la cual incluye métodos como createCaption y insertRow. Pero como también es un elemento HTML, table pone en marcha a la interfaz del Element descrita en el capítulo La referencia al elemento del DOM. Y finalmente, puesto que un elemento HTML es también, por lo que concierna al DOM, un nodo en el árbol de nodos que hace el modelo de objeto para una página web o XML, el elemento de table hace funcionar la interfaz más básica de Node, desde el cual deriva Element.

- -

La referencia a un objeto table, como en el ejemplo siguiente, utiliza estas interfaces intercambiables sobre el objeto.

- -
var table = document.getElementById("table");
-var tableAttrs = table.attributes; // Node/interfaz Element
-for (var i = 0; i < tableAttrs.length; i++) {
-  // interfaz HTMLTableElement: atributo border
-  if(tableAttrs[i].nodeName.toLowerCase() == "border")
-    table.border = "1";
-}
-// interfaz HTMLTableElement: atributo summary
-table.summary = "nota: borde aumentado";
- -

Interfaces esenciales en el DOM

- -

Esta sección lista las interfaces más comúnmente utilizadas en el DOM. La idea no es describir qué hacen estas APIs pero sí dar una idea de las clases de métodos y propiedades que se encuentran con el uso del DOM. Muchos ejemplos de uso común de esta API se encuentran en el capítulo Ejemplos DOM al final de este manual.

- -

document y window son objetos cuya interfaces son generalmente muy usadas en la programación de DOM. En término simple, el objeto window representa algo como podría ser el navegador, y el objeto document es la raíz del documento en sí. Element hereda de la interfaz genérica Node, y juntos, estas dos interfaces proporcionan muchos métodos y propiedades utilizables sobre los elementos individuales. Éstos elementos pueden igualmente tener interfaces específicas según el tipo de datos representados, como en el ejemplo anterior del objeto table. Lo siguiente es una breve lista de los APIS comunes en la web y en las páginas escritas en XML utilizando el DOM.

- - - -

Probando el API del DOM

- -

Ésta parte procura ejemplos para todas las interfaces usadas en el desarrollo web. En algunos casos, los ejemplos son páginas HTML enteras, con el acceso del DOM a un elemento de <script>, la interfaz necesaria (por ejemplo, botones) para la ejecución del script en un formulario, y también que los elementos HTML sobre los cuales opera el DOM se listen. Según el caso, los ejemplos se pueden copiar y pegar en un documento web para probarlos.

- -

No es el caso donde los ejemplos son muchos más concisos. Para la ejecución de estos ejemplos que sólo demuestran la relación básica entre la interfaz y los elementos HTML, resulta útil tener una página de prueba en la cual las interfaces serán fácilmente accesibles por los scripts. La muy simple página siguiente proporciona en las cabeceras un elemento de script en el cual se pondrán las funciones para testar la interfaz elegida, algunos elementos HTML con atributos que se puedan leer, editar y también manipular, así como la interfaz web necesaria para llamar esas funciones desde el navegador.

- -

Para probar y ver como trabajan en la plataforma del navegador las interfaces del DOM, esta página de prueba o una nueva similar son factibles. El contenido de la función test() se puede actualizar según la necesidad, para crear más botones o poner más elementos.

- -
<html>
-  <head>
-    <title>Pruebas DOM</title>
-    <script type="application/javascript">
-    function setBodyAttr(attr, value){
-      if (document.body) eval('document.body.'+attr+'="'+value+'"');
-      else notSupported();
-    }
-    </script>
-  </head>
-  <body>
-    <div style="margin: .5in; height: 400;">
-      <p><b><tt>texto</tt></b></p>
-      <form>
-        <select onChange="setBodyAttr('text',
-        this.options[this.selectedIndex].value);">
-          <option value="black">negro
-          <option value="darkblue">azul oscuro
-        </select>
-        <p><b><tt>bgColor</tt></b></p>
-        <select onChange="setBodyAttr('bgColor',
-        this.options[this.selectedIndex].value);">
-          <option value="white">blanco
-          <option value="lightgrey">gris
-        </select>
-        <p><b><tt>link</tt></b></p>
-        <select onChange="setBodyAttr('link',
-        this.options[this.selectedIndex].value);">
-          <option value="blue">azul
-          <option value="green">verde
-        </select>  <small>
-        <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
-        (sample link)</a></small><br>
-      </form>
-      <form>
-        <input type="button" value="version" onclick="ver()" />
-      </form>
-    </div>
-  </body>
-</html>
- -

La creación de una página de prueba con una paleta de botones, campos de texto u otros elementos HTML, permitirá testar una gran cantidad de interfaces en un mismo documento, por ejemplo una serie de propiedades que afectan a los colores de una página web. Lo siguiente permite hacerse una idea de como pueden agruparse las interfaces para probarlas.

- -

Figura 0.1 Muestra DOM página de prueba

- -

- -

En este ejemplo, los menúes desplegables actualizan dinámicamente los aspectos de la página web accesibles al DOM como el color de fondo (bgColor), de los hiper-enlaces (aLink), y el del texto (text). El hecho de diseñar páginas, testar las interfaces que se encuentren a lo largo de la lectura son una parte importante del aprendizaje para una utilización eficaz del DOM.

- -

Otros enlaces

- - - -
- - -
 
- -
 
-
- -
- - -
 
- -
 
-
- -
- - -
 
- -
 
-
diff --git a/files/es/referencia_dom_de_gecko/localizando_elementos_dom_usando_selectores/index.html b/files/es/referencia_dom_de_gecko/localizando_elementos_dom_usando_selectores/index.html deleted file mode 100644 index cf8a94cd4a..0000000000 --- a/files/es/referencia_dom_de_gecko/localizando_elementos_dom_usando_selectores/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Localizando elementos DOM usando selectores -slug: Referencia_DOM_de_Gecko/Localizando_elementos_DOM_usando_selectores -tags: - - DOM - - Necesita actualizacion para principiantes - - Principiante -translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors ---- -

Los selectores api proveen metodos que hacen mas facil y rapido devolver elementos del nodo {{domxref("Element")}} del DOM mediante emparejamiento de un conjunto de selectores. Esto es mucho mas rapido que las tecnicas anteriores, donde fuera necesario, por ejemplo usar un loop en un codigo JavaScript para localizar el item especifico que quisieras encontrar.

- -

Interfaz de NodeSelector

- -

Esta especificación añade dos nuevos metodos a cualquier objeto implementando el {{domxref("Document")}}, {{domxref("DocumentFragment")}}, o {{domxref("Element")}} interfaces:

- -
-
{{domxref("Element.querySelector", "querySelector()")}}
-
Devuelve la primera coincidencia del (elemento) {{domxref("Element")}} nodo dentro de las subramas del nodo. Sino se encuentra un nodo coincidente, se devuelve null .
-
{{domxref("Element.querySelectorAll", "querySelectorAll()")}}
-
devuelve un listado de nodos {{domxref("NodeList")}} conteniendo todos los elementos del nodo coincidentes( Element) dentro de las subramas del nodo, o Devuelve un Listado de Nodos vacio NodeList sino se encuentran coincidencias.
-
- -
Note: El {{domxref("NodeList")}} devuelto por {{domxref("Element.querySelectorAll()", "querySelectorAll()")}} no es dinamico, Es decir que cualquier cambio realizado en el DOM no se vera reflejado en la coleccion. Esto es diferente de otros metodos de querying del dom que si devuelven listados de nodos dinamicos.
- -

Encontraras ejemplos y detalles leyendo el documento de metodos {{domxref("Element.querySelector()")}} y {{domxref("Element.querySelectorAll()")}}, Tambien en el articulo Code snippets for querySelector.

- -

Selectors

- -

El metodo de selectores acepta uno o mas selectores seperados por comas entre cada selector  para determinar que elemento o elementos deben ser devueltos. por ejemplo para seleccionar todos los elementos (p) del parrafo en un documento donde la clase CSS sea tanto warning or note, podes hacer lo siguiente:

- -
var special = document.querySelectorAll( "p.warning, p.note" );
- -

tambien por usar query para etiquetas id. Por ejemplo:

- -
var el = document.querySelector( "#main, #basic, #exclamation" );
- -

luego de ejecutar el codigo de arriba, la variable el contiene el primer elemento del documento, su ID puede ser uno de los siguentes  main, basic, or exclamation.

- -

Podes usar cualquier selector CSS con los metodos querySelector() y querySelectorAll().

- -

Ver tambien.

- -
    -
  • Selectors API
    • -
  • {{domxref("Element.querySelector()")}}
    • -
  • {{domxref("Element.querySelectorAll()")}}
    • -
  • {{domxref("Document.querySelector()")}}
    • -
  • {{domxref("Document.querySelectorAll()")}}
    • -
  • Code snippets for querySelector
    • -
diff --git a/files/es/referencia_dom_de_gecko/prefacio/index.html b/files/es/referencia_dom_de_gecko/prefacio/index.html deleted file mode 100644 index 7759932552..0000000000 --- a/files/es/referencia_dom_de_gecko/prefacio/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Prefacio -slug: Referencia_DOM_de_Gecko/Prefacio -tags: - - DOM - - Todas_las_Categorías -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/API/Document_Object_Model/Preface ---- -

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

- -
    -
  • element para todos los elementos.
    • -
  • document para el documento entero.
    • -
  • table para una tabla, etc.
    • -
  • Para más información sobre la: Importancia de los tipos de datos, lea este artículo.
    • -
- -

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/sections_and_outlines_of_an_html5_document/index.html b/files/es/sections_and_outlines_of_an_html5_document/index.html deleted file mode 100644 index 145f89d9ae..0000000000 --- a/files/es/sections_and_outlines_of_an_html5_document/index.html +++ /dev/null @@ -1,411 +0,0 @@ ---- -title: Secciones y esquema de un documento HTML5 -slug: Sections_and_Outlines_of_an_HTML5_document -translation_of: 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

- -
    -
  • Usar etiquetas explícitas para abrir y cerrar secciones.
    • -
  •  Acomodar el rango de cabecera al nivel de anidamiento de la sección deseada. 
    • -
- -

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:

- -
    -
  • Una sección cuyo encabezado principal es acompañado de otro encabezado , cuyo propósito es adornar o aportar cierta información al encabezado principal, pero sin oscurecerlo a la hora de formar el esquema estructural: - 
    <section>
-  <h1>La flauta mágica</h1>
-  <h2>Ópera en dos actos del genio salzburgués</h2>
-</section>
    - -

    genera el siguiente esquema, que claramene no es el que se desea:

    - - 
    1. La flauta mágica
-   1.1 Ópera en dos actos del genio salzburgués
-
    -
    • -
  • El encabezado secundario puede ser usado por una lista de etiquetas: - 
    <section>
-  <h1>Secciones y esquema del documento</h1>
-  <h2>HTML, HTML5, secciones, esquema</h2>
-</section>
    - -

    genera el siguiente esquema, que tampoco es el que se desea:

    - - 
    1. Secciones y esquema del documento
-   1.1 HTML, HTML5, secciones, esquema
    -
    • -
- -

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.

- -
{{HTML5ArticleTOC()}}
diff --git a/files/es/seguridad_en_firefox_2/index.html b/files/es/seguridad_en_firefox_2/index.html deleted file mode 100644 index 43b55fff7c..0000000000 --- a/files/es/seguridad_en_firefox_2/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Seguridad en Firefox 2 -slug: Seguridad_en_Firefox_2 -tags: - - Seguridad - - Todas_las_Categorías -translation_of: Mozilla/Firefox/Releases/2/Security_changes ---- -
{{FirefoxSidebar}}

Firefox 2 tiene tanto SSLv2 como la débil "exportación" de juegos de claves desactivados por defecto, en favor de SSLv3. Esto proporciona mejoras en la seguridad.

- -

Los métodos preferidos de encriptación son TLS_DHE_DSS_WITH_3DES_EDE_CBC_SHA y TLS_RSA_WITH_3DES_EDE_CBC_SHA. Algunos sevidores se refieren a ellos como SSL_DHE_DSS_WITH_3DES_EDE_CBC_SHA y SSL_RSA_WITH_3DES_EDE_CBC_SHA.

- -

Si el soporte SSLv2 tuviera que ser activado, puede hacerse cambiando en las preferencias de usuario el valor security.ssl2.* deseado a true.

diff --git "a/files/es/selecci\303\263n_de_modo_en_mozilla/index.html" "b/files/es/selecci\303\263n_de_modo_en_mozilla/index.html" deleted file mode 100644 index 2dae7b7909..0000000000 --- "a/files/es/selecci\303\263n_de_modo_en_mozilla/index.html" +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Selección de modo en Mozilla -slug: Selección_de_modo_en_Mozilla -tags: - - Desarrollo_Web - - HTML - - Todas_las_Categorías - - XHTML - - XML ---- -

 

-

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

-
    -
  • Casi todas las páginas existentes de text/html en la web que necesiten estar en el modo quirks para visualizarse correctamente deben exhibirse usando el modo quirks. (Almost all, rather than all, to allow for the following points as well.)
    • -
  • Los autores que escriben páginas web según los estándares actuales deben poder activar el modo estricto.
    • -
  • Cualquier página escrita usando un identificador público en las declaraciones de DOCTYPE que aparezcan en el futuro deberán exhibirse usando el modo estricto.
    • -
-

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

-
    -
  • Author(s): David Baron
    • -
  • Last Updated Date: August 2, 2005
    • -
  • Copyright Information: Copyright (C) David Baron
    • -
-
-

 

diff --git a/files/es/server-sent_events/index.html b/files/es/server-sent_events/index.html deleted file mode 100644 index 9b22801732..0000000000 --- a/files/es/server-sent_events/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Server-sent events -slug: Server-sent_events -tags: - - NeedsTranslation - - Server-sent events - - TopicStub -translation_of: Web/API/Server-sent_events ---- -

Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as Events + data inside the web page.

- - - - - - - -
-

Documentation

-
-
- Using server-sent events
-
- A tutorial guide to writing both server and client side part of a server-sent events app.
-
- EventSource reference
-
- A reference to the client-side EventSource API.
-
-

View All...

- 		-

Tools

- - - -
-

See also

- -

Specification

- -

Browser compatibility

-
- {{CompatibilityTable}}
-
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
EventSource support9{{CompatGeckoDesktop("6.0")}}{{CompatUnknown}}115
-
-
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
EventSource support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/es/server-sent_events/utilizando_server_sent_events_sse/index.html b/files/es/server-sent_events/utilizando_server_sent_events_sse/index.html deleted file mode 100644 index 81a2f5dacc..0000000000 --- a/files/es/server-sent_events/utilizando_server_sent_events_sse/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: Utilizando eventos enviados por el servidor (server-sent event) -slug: Server-sent_events/utilizando_server_sent_events_sse -translation_of: Web/API/Server-sent_events/Using_server-sent_events ---- -

Desarrollar una aplicación web que utilice server-sent events es muy fácil. Solo necesitas un pequeño código del lado del servidor para transmitir los eventos a la aplicación web, pero del lado de la aplicacion web se trabaja prácticamente igual que con cualquier otro tipo de eventos.

- -

Puedes ver un ejemplo aqui (actualmente no funciona).

- -

ejemplo2

- -

Recibiendo eventos desde el servidor

- -

El server-sent event API está contenido en la interfaz EventSource; para abrir una conexión al servidor para recibir eventos de él. Se crea un nuevo objeto new EventSource, especificando el URI de un script que genera los eventos, Por ejemplo:

- -
var evtSource = new EventSource("ssedemo.php");
-
- -
Nota: Aunque todavía no es parte de la norma, EventSource es soportado por Firefox 11 y posteriores. Se espera que pronto forme parte del estándar.
- -

Una vez que ha instanciado el origen del evento, puede comenzar a escuchar los mensajes:

- -
evtSource.onmessage = function(e) {
-  var newElement = document.createElement("li");
-
-  newElement.innerHTML = "message: " + e.data;
-  eventList.appendChild(newElement);
-}
-
- -

Este codigo escucha todos los mensajes entrantes (Es decir, todos los avisos del servidor, que no tienen un campo de eventos en ellos) y anexa texto del mensaje a la lista en el documento HTML.

- -

También puedes escuchar eventos, usando addEventListener():

- -
evtSource.addEventListener("ping", function(e) {
-  var newElement = document.createElement("li");
-
-  var obj = JSON.parse(e.data);
-  newElement.innerHTML = "ping at " + obj.time;
-  eventList.appendChild(newElement);
-}, false);
-
- -

Este código es similar,  excepto que este se activa cada vez que el servidor envia un mensaje con el campo de evento "ping"; entonces se analiza el JSON en el campo de datos y retorna esa informacion.

- -

Enviando eventos desde el servidor

- -

El script del servidor que envia los datos tiene que responder con el tipo MIME text/event-stream. Cada notificación se envia con un bloque de texto terminado en un par de saltos de línea, para mas detalles sobre el formato sobre la secuencia de evetos, ver {{ anch("Event stream format") }},

- -

El codigo PHP para este ejemplo que estamos utilizando:

- -
date_default_timezone_set("America/New_York");
-header("Content-Type: text/event-stream\n\n");
-
-$counter = rand(1, 10);
-while (1) {
-  // Every second, sent a "ping" event.
-
-  echo "event: ping\n";
-  $curDate = date(DATE_ISO8601);
-  echo 'data: {"time": "' . $curDate . '"}';
-  echo "\n\n";
-
-  // Send a simple message at random intervals.
-
-  $counter--;
-
-  if (!$counter) {
-    echo 'data: This is a message at time ' . $curDate . "\n\n";
-    $counter = rand(1, 10);
-  }
-
-  ob_flush();
-  flush();
-  sleep(1);
-}
-
- -

Se genera un evento cada segundo, con el evento "ping". Los datos de cada evento es un objeto JSON que contiene, en este caso, solo la fecha en formato ISO 8601 correspondiente a la hora en que se generó el evento. A intervalos aleatorios, se envia un mensaje simple (sin ningún tipo de evento)

- -

Gestion de errores

- -

Cuando se producen problemas (como un tiempo de espera o problemas relacionados con el control de acceso), se genera un evento de error. Puedes tomar acción sobre esto al implementar una devolución de llamada al objeto EventSource:

- -
evtSource.onerror = function(e) {
-  alert("EventSource failed.");
-};
-
- -

En Firefox 22, no parece que haya manera de distinguir entre los diferentes de eventos de error.

- -

Cerrando flujo de eventos

- -

Por defecto, si la conexión entre el cliente y el servidor se cierra, la conexión es reiniciada. Podemos terminar la conexión con el método .close()

- -
evtSource.close();
- -
 
- -

Formato de flujo de eventos (formato stream)

- -

El flujo de eventos es una corriente sencilla de datos de texto, que deben ser codificados usando UTF-8. Los mensajes en el flujo de eventos están separados por un par de caracteres de salto de línea. Si hay un símbolo de dos puntos como primer caracter de una línea, se entiende que es un comentario y es ignorado. 

- -
Nota: La línea de comentario se puede usar para prevenir que la conexión se agote por tiempo (timeout); un sevidor puede enviar periódicamente un comentario para mantener viva la conexión.
- -

Cada mensaje consiste en una o más líneas de texto que enumeran los campos para ese mensaje. Cada campo está representado por el nombre del campo, seguido por los datos de texto para el valor de ese campo.

- -

Campos

- -

Los siguientes nombres de campo son definidos por la especificación:

- -

event

- -

El tipo de evento. Si se especifica, un evento se enviará al navegador a la escucha para el nombre del evento especificado, el sitio web usaria addEventLister() para escuchar eventos nombrados. El controlador onmessage se llama si no se especifica el nombre del evento para un mensaje.

- -

data

- -

El campo de datos  para el mensaje. Cuando el EventSource recibe múltiples lineas con "data:", se concatenara, insertando un caracter de nueva de linea entre cada uno. Se eliminan los saltos de línea al final [VERIFICAR].

- -

id

- -

  El ID del evento que establecerá el último ID del objeto EventSource.

- -

Retry

- -

El tiempo de reconexión para usar al intentar enviar el evento. [Qué código maneja esto?] Este debe ser un número entero, que especifica el tiempo de reconexion en milisegundos. Si se especifica un valor no entero, el campo se ignora.  

- -

Se omiten todos los demas nombres de campo.

- -
Nota: Si una línea no contiene dos puntos, la línea entera se tratara como un nombre de campo, con una cadena de valor vacio.
- -

Ejemplos

- -

Mensajes con datos únicamente

- -

En el siguiente ejemplo, hay tres mensajes enviados. El primero es solo un comentario, debido a que empieza con dos puntos. Como se mencionó anteriormente, esto puede ser útil para mantener la conexión viva si los mensajes no son enviados regularmente.

- -

The second message contains a data field with the value "some text". The third message contains a data field with the value "another message\nwith two lines". Note the newline in the value.

- -

El segundo mensaje contiene un campo de datos con el valor "some text". El tercer mensaje contiene un campo de datos con el valor "another message\nwith two lines". Nota la nueva línea en el valor.

- -
: this is a test stream
-
-data: some text
-
-data: another message
-data: with two lines
-
- -

Eventos nombrados

- -

Este ejemplo envia algunos eventos nombrados. Cada uno tiene un nombre de evento especificado por el campo event, y un campo data cuyo valor es una cadena JSON apropiada con los datos necesarios para que el cliente actue sobre el evento. El campo data, podria, por supuesto, tener cualquier cadena; no tiene que ser un JSON.

- -
event: userconnect
-data: {"username": "bobby", "time": "02:33:48"}
-
-event: usermessage
-data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
-
-event: userdisconnect
-data: {"username": "bobby", "time": "02:34:23"}
-
-event: usermessage
-data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
-
- -

Mezclando y emparejando

- -

No tienes que usar solamente mensajes sin nombrar o eventos tipados; puedes mezclarlo juntos en un solo flujo de evento.

- -
event: userconnect
-data: {"username": "bobby", "time": "02:33:48"}
-
-data: Here's a system message of some kind that will get used
-data: to accomplish some task.
-
-event: usermessage
-data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
-
- -

Compatibilidad con navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
EventSource support9{{ CompatGeckoDesktop("6.0") }}{{ CompatNo() }}115
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroid-and-MeegoFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
EventSource support6 a 24 b1.0{{ CompatUnknown() }}11.14
-
- -

 

diff --git a/files/es/storage/index.html b/files/es/storage/index.html deleted file mode 100644 index 87e2df368e..0000000000 --- a/files/es/storage/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: Storage -slug: Storage -tags: - - Interfaces - - Storage - - Todas_las_Categorías - - Toolkit API - - páginas_a_traducir ---- -
-

{{ Fx_minversion_header(2) }}

-

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:

-
  • Abre una conexión con la base de datos de tu elección.
  • Crea las sentencias a ejecutar en tu conexión.
  • Agrega los parámetros de las sentencias si es necesario.
  • Ejecuta las sentencias.
  • Comprueba si hay errores.
  • Comienza de nuevo con las sentencias.
    • -
-

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:

-
  • mozIStorageConnection.TRANSACTION_DEFERRED: Por defecto. El bloqueo de la base de datos es adquirido cuando es necesario (generalmente cuando ejecutas una sentencia, por primera vez, en una transacción).
    • -
-
  • mozIStorageConnection.TRANSACTION_IMMEDIATE: Adquiere inmediatamente, un bloqueo de lectura en la base de datos.immediately.
    • -
-
  • mozIStorageConnection.TRANSACTION_EXCLUSIVE: Adquiere inmediatamente, un bloqueo de escritura en la base de datos.immediately.
    • -
-

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

- -
  • Abre más de una conexión hacia el mismo archivo con nombres que no son exactaente los determinados por strcmp. Esto incluye "my.db" y "../dir/my.db" o, en Windows (sin diferencia Mayúsculas/minúsculas) "my.db" y "My.db". Sqlite intentará manejar muchos de estos casos, pero no debes porfiar en ello.
    • -
-
  • Accede una base de datos desde un enlace simbólico.
    • -
-
  • Abre conexiones a la misma base de datos desde más de un hilo (Ver Seguridad de los hilos" más abajo).
    • -
-
  • Accede a una conexión o a una sentencia desde más de un hilo (Ver Seguridad de los hilos" más abajo).
    • -
-
  • Abre la base de datos desde un programa externo mientras está abierto en Mozilla. Nuestro sistema de cache rompe la reglas normales de bloqueo de archivos en sqlite que permitirían hacer esto de forma segura.
    • -
-

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.

-
  • El servicio storage debe ser creado en el hilo principal. Si quieres acceder al servicio desde otro hilo, debes asegurarte de llamar a getService desde el hilo principal con antelación.
    • -
-
  • No puedes acceder a una conexión o una sentencia desde múltiples hilos. Esos objetos storage no son seguros y las representaciones sqlite tampoco son seguras. Aún cuando hagas bloqueo y te asegures que sólo ese hilo está haciendo algo, puede haber problemas. Este caso no ha sido probado y puede haber algún estado pre-implementación en el hilo de sqlite. Se recomienda fuertemente que no hagas esto.
    • -
-
  • No puedes acceder una base de datos simple desde múltiples conexiones en múltiples hilos. Normalmente, sqlite permite esto. Sin embargo, hacemos sqlite3_enable_shared_cache(1); (ver sqlite shared-cache mode) que hace que múltiples conexiones compartan la misma memoria cache. Esto es importante para el rendimiento. Sin embargo, no hay bloqueos para el acceso a la memoria cache, lo que significa que se romperá si se usa desde más de un hilo.
    • -
-

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

- -
  • Storage:Rendimiento Cómo hacer que tu conexión de base de datos rinda bien.
  • Storage Inspector Extension Hace que sea fácil de ver los archivos de base de datos SQLite en el perfil actual.
  • SQLite Syntax Query lengua que comprenda SQLite
  • SQLite Database Browseres una herramienta capaz libre disponible para muchas plataformas. Puede ser útil para examinar las bases de datos existentes y las pruebas sentencias SQL.
  • SQLite Manager Extensionayuda a administrar los archivos de base de datos SQLite en el equipo.

    • -
-

 

-

{{ languages( { "es": "es/Almacenamiento", "fr": "fr/Storage", "ja": "ja/Storage", "pl": "pl/Storage", "en": "en/Storage" } ) }}

diff --git a/files/es/svg_en_firefox/index.html b/files/es/svg_en_firefox/index.html deleted file mode 100644 index ba802c6af4..0000000000 --- a/files/es/svg_en_firefox/index.html +++ /dev/null @@ -1,847 +0,0 @@ ---- -title: SVG en Firefox -slug: SVG_en_Firefox -tags: - - NecesitaRevisiónTécnica - - SVG - - Todas_las_Categorías -translation_of: Web/SVG/SVG_1.1_Support_in_Firefox ---- -

 

-

Firefox 2 sigue avanzando en la mejora de la implementación de Gráficos vectoriales escalables (SVG). Aunque el único elemento añadido a los ya soportados por Firefox 1.5 ha sido <textPath>, se han resuelto varios fallos y se ha incorporado parte de la especificación.

-

Firefox SVG es un subconjunto de SVG 1.1, pero no es ninguno de los perfiles oficiales (Tiny, Basic, Full). Al final de este documento se puede encontrar una lista completa de los elementos SVG y su estado de implementación en Firefox 2.0. El resto del documento aporta información sobre las limitaciones en la implementación.

-

La particular implementación que hemos realizado puede dificultar la 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 cuántos de estos detalles sobre de la implementación pueden haber cambiado. Por desgracia la hoja de ruta actual sitúa la publicación de Firefox con la nueva versión de Gecko en el primer trimestre de 2007. Sin embargo si desea empezar a experimentar con las nuevas funcionalidades, tiene a su disposición en las compilaciones nocturnas las últimas evoluciones. También puede consultar la tabla actualizada sobre la implementación de SVG en la versión de desarrollo.

-

Rendimiento

-

Firefox usa el mismo motor de renderizado, cairo, en todas las plataformas. Por lo tanto sus características de interpretación serán similares. El rendimiento en Linux es el 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.

-

Rango de coordenadas

-

Si el contenido posee una geometría con un inmenso rango de coordenadas, habrá que tener cuidado con los problemas ocasionados por el uso interno de cairo para la representación de punto fijo de 16.16 bits para los cálculos. Cairo no recorta las primitivas antes del proceso de rasterización por lo que las coordenadas finales que excedan el rango de -32678 a 32677 tras la transformación provocarán errores de renderizado y posiblemente un rendimiento muy bajo.

-

Texto en Windows 98

-

Un lamentable efecto secundario de usar Cairo como backend de renderizado en Windows es que el renderizado de texto no funcionará en Windows 98. En realidad la cosa es aún peor, si aparece cualquier texto durante el renderizado de contenidos SVG, todo el dibujo se parará.

-

Selección de fuente

-

Si está familiarizado con CSS probablemente sabrá que pueden 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 ésta 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 grupos

-

La propiedad de opacidad de grupo opacity permite que los objetos contenedores SVG puedan ser tratados como capas semitransparentes, y está separada de las propiedades "fill-opacity" y "stroke-opacity". La implementación 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.

-

Fuentes rotadas

-

En las plataformas Microsoft Windows y Mac OSX, un texto rotado no es rellenado completamente. El error es por lo general despreciable y puede solucionarse usando un relleno un poquito más grueso. A continuación se muestra un ejemplo con la diferencia:

-

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 sobremanera el rendimiento en Firefox 1.5.

-

Eventos

-

Soportamos los atributos de SVG para eventos, a excepción de onfocusin, onfocusout, y onactivate.

-

Nuestro actual manejo del evento onload no es estándar, pero creemos que aún así no impide su uso correcto. Mientras que el código especificado por el atributo onload sea llamado para cada elemento, un evento SVGLoad será 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 Guías de estilo para crear SVG, Jonathan Watt explica problemas comunes.

-

Situaciones de uso de SVG

-

Firefox 1.5 maneja SVG como un documento completo, o como referencia para los elementos embed, object, e iframe. Actualmente no puede ser usado en HTML o XHTML como fuente del elemento img, ni para las propiedades CSS relativas a las imágenes.

-

Animaciones

-

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.

-

Fallos corregidos en Firefox 2

-

Firefox 2 ha arreglado algunos fallos en su implementación para SVG. Esta sección presenta un repaso rápido a los arreglos más interesantes.

-
    -
  • Se ha solucionado un problema al rellenar y rotar texto en el que la posición del dibujo no era reiniciada correctamente entre dos operaciones (bug 333615).
    • -
-
    -
  • Los gradientes radiales ahora mantienen los atributos fx y fy para asegurar que se encuentran dentro de la circunferencia de un círculo (bug 330682).
    • -
-
    -
  • La longitud del texto ahora puede ser calculada usando su método getComputedTextLength(), lo que mejora la compatibilidad con ciertos sitios web (bugs 311031 and 264380).
    • -
-
    -
  • Los elementos <tspan> ahora soportan correctamente los atributos dx y dy y funcionan si los atributos x e y no han sido especificados (bug 311063).
    • -
-
    -
  • Se ha mejorado la lógica de invalidación en el redibujado, lo que evita el parpadeo de los píxeles en ciertos casos (bug 312269).
    • -
-
    -
  • Arreglado un fallo que impedía que los eventos fuesen manejados apropiadamente por objetos expuestos por el camino de recorte de otro objeto (bug 315861).
    • -
-
    -
  • Arreglado un fallo que podía provocar el cierre de la aplicación si un elemento <path> tenía un atributo d con una cadena vacía (bug 318379).
    • -
-
    -
  • El atributo overflow ahora funciona para el elemento marker, usando la sintaxis overflow="visible", la cual antes no funcionaba correctamente (bug 320623).
    • -
-
    -
  • Ahora se puede acceder al atributo <style> del elemento marker sin que se lance ninguna excepción (bug 323589).
    • -
-
    -
  • Ahora se pueden usar valores porcentuales en el radio de un gradiente radial (bug 323669).
    • -
-
    -
  • El método documentElement.createSVGAngle() ahora está implementado (bug 327437).
    • -
-
    -
  • Cuando un elemento <stop> se convierte en hijo de otro elemento <stop> dicho elemento deja de ser un aserto (bug 328137).
    • -
-
    -
  • Ahora funciona el cambio de la altura, anchura y orientación de los pinceles (bug 325728).
    • -
-
    -
  • El tamaño de las fuentes impresas en Windows ya no es tan grande como el especificado por el SVG (bug 314707).
    • -
-

Estado de la implementación de los elementos

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Elemento Notas
Módulo de estructura
svg -
    -
  • Implementado.
    • -
  • Los atributos DOM currentScale y currentTranslate están implementados pero no existe una interfaz de usuario para pan ni zoom.
    • -
  • 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.
    • -
  • Solo disponible en el DOM, sin interfaz de usuario.
    • -
-
title -
    -
  • Implementado.
    • -
-
metadata -
    -
  • Implementado.
    • -
  • Solo disponible en el DOM, sin interfaz de usuario. </td>
    • -
-
symbol -
    -
  • Implementado.
    • -
-
use -
    -
  • Implementado.
    • -
  • Solo funciona para referencias internas al documento (bug 269482).
    • -
  • No sigue completamente las reglas de la cascada <svg:use> (bug 265894).
    • -
  • No entrega eventos a un arbol SVGElementInstance (bug 265895).
    • -
-
Módulo de procesamiento condicional
switch -
    -
  • Implementado.
    • -
-
Módulo de imagen
image -
    -
  • Implementado.
    • -
  • Solo funciona para tramas de bitmaps (bug 272288).
    • -
-
Módulo de estilo
style -
    -
  • Implementado.
    • -
-
Módulo de formas
path -
    -
  • Implementado.
    • -
  • Interfaz SVGPathElement -
      -
    • Atributos no implementados: pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList
      • -
    • Bindings no implementados: getTotalLength, getPointAtLength, getPathSegAtLength
      • -
    -
    • -
  • Interfaz SVGPathSegList -
      -
    • Bindings No implementados: replaceItem()
      • -
    -
    • -
-
rect -
    -
  • Implementado.
    • -
-
circle -
    -
  • Implementado.
    • -
-
line -
    -
  • Implementado.
    • -
-
ellipse -
    -
  • Implementado.
    • -
-
polyline -
    -
  • Implementado.
    • -
-
polygon -
    -
  • Implementado.
    • -
-
Módulo de 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 -
    -
  • Implementado en Firefox 2.
    • -
  • Atributos no implementados: method, spacing, textLength, lengthAdjust
    • -
-
altGlyph -
    -
  • No implementado.
    • -
-
altGlyphDef -
    -
  • No implementado.
    • -
-
altGlyphItem -
    -
  • No implementado.
    • -
-
glyphRef -
    -
  • No implementado.
    • -
-
Módulo de pinceles
marker -
    -
  • Implementado.
    • -
-
Color Módulo de perfiles
color-profile -
    -
  • No implementado.
    • -
-
Módulo de gradientes
linearGradient -
    -
  • Implementado.
    • -
-
radialGradient -
    -
  • Implementado.
    • -
-
stop -
    -
  • Implementado.
    • -
-
Módulo de patrones
pattern -
    -
  • No implementado.
    • -
-
Módulo de recorte
clipPath -
    -
  • Implementado.
    • -
  • No maneja los caminos de recorte que tiene elementos con diferentes propiedades de reglas de recorte o que referencian otros clipPaths. (bug 267224).
    • -
-
Módulo de máscaras
mask -
    -
  • No implementado.
    • -
-
Módulo de filtros
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 de cursores
cursor -
    -
  • No implementado.
    • -
-
Módulos de hiperenlaces
a -
    -
  • Implementado como un binding XBL - object is not of type SVGAElement.
    • -
  • Sólo están implementados los atributos xlink:href, xlink:show y xlink:target (en Firefox 2).
    • -
-
Módulo de vista
view -
    -
  • No implementado.
    • -
-
Módulo de scripting
script -
    -
  • Implementado.
    • -
-
Módulo de animación
animate -
    -
  • No implementado.
    • -
-
set -
    -
  • No implementado.
    • -
-
animateMotion -
    -
  • No implementado.
    • -
-
animateTransform -
    -
  • No implementado.
    • -
-
animateColor -
    -
  • No implementado.
    • -
-
mpath -
    -
  • No implementado.
    • -
-
Módulo de 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 de extensibilidad
foreignObject -
    -
  • Implementado, aunque no integrado.
    • -
-
-

{{ languages( { "fr": "fr/SVG_dans_Firefox_1.5", "ja": "ja/SVG_in_Firefox_1.5", "pl": "pl/SVG_w_Firefoksie" } ) }}

diff --git a/files/es/tipo_mime_incorrecto_en_archivos_css/index.html b/files/es/tipo_mime_incorrecto_en_archivos_css/index.html deleted file mode 100644 index fbd15d6764..0000000000 --- a/files/es/tipo_mime_incorrecto_en_archivos_css/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Tipo MIME incorrecto en archivos CSS -slug: Tipo_MIME_incorrecto_en_archivos_CSS -tags: - - CSS - - Todas_las_Categorías -translation_of: Web/HTTP/Basics_of_HTTP/MIME_types -translation_of_original: Incorrect_MIME_Type_for_CSS_Files ---- -

¿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

-
  • Autor(es): Tristan Nitot -
  • Última actualización: March 18th, 2002 -
  • Copyright © 2001-2003 Netscape. -
-
-{{ 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/tools/accesos_directos/index.html b/files/es/tools/accesos_directos/index.html deleted file mode 100644 index 9372393011..0000000000 --- a/files/es/tools/accesos_directos/index.html +++ /dev/null @@ -1,1266 +0,0 @@ ---- -title: Accesos directos -slug: Tools/Accesos_directos -tags: - - Herramientas - - 'l10n:priority' -translation_of: Tools/Keyboard_shortcuts ---- -
{{ToolsSidebar}}
- -

Esta página muestra todos los accesos directos utilizados para las herramientas para desarrolladores de Firefox.

- -

La primera sección muestra el acceso directo para cada herramienta mientras que la segunda sección muestra los accesos directos aplicables sólo a las herramientas de desarrolladores. Por último hay una sección para cada herramienta, que lista todos los accesos directos que puedes usar dentro de la misma.

- -

Debido a que los accesos directos dependen de la ubicación, no están documentados en esta página.

- -

Herramientas de apertura y cierre

- -

Estos accesos directos funcionan en la ventana principal del navegador para abrir la herramienta especificada. Los mismos accesos directos funcionarán para cerrar las herramientas alojadas en la Caja de herramientas si la herramienta está activa. Para herramientas que se abren en una nueva ventana, como la consola del navegador, debe cerrar la ventana para cerrar la herramienta.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Abre la caja de herramientas (con la herramienta más reciente activada)Ctrl + Shift + ICmd + Opt + ICtrl + Shift + I
Trae la caja de herramientas a primer plano (solo si está en una ventana separada y no en primer plano)Ctrl + Shift + I o F12Cmd + Opt + I o F12Ctrl + Shift + I o F12
Cierra la caja de herramientas (si está en una ventana separada y en primer plano)Ctrl + Shift + I o F12Cmd + Opt + I o F12Ctrl + Shift + I o F12
Abre la consola web 1Ctrl + Shift + KCmd + Opt + KCtrl + Shift + K
Abre el inspector de elementosCtrl + Shift + CCmd + Opt + CCtrl + Shift + C
Abre el depurador 2Ctrl + Shift + SCmd + Opt + SCtrl + Shift + S
Abre el editor de estilosShift + F7Shift + F7 1Shift + F7
Abre el perfiladorShift + F5Shift + F5 1Shift + F5
Abre el monitor de red 3Ctrl + Shift + ECmd + Opt + ECtrl + Shift + E
Despliega las herramientas de desarrolladorShift + F2Shift + F2 1Shift + F2
Despliega la vista de diseño adaptableCtrl + Shift + MCmd + Opt + MCtrl + Shift + M
Abre la consola del navegador 4Ctrl + Shift + JCmd + Shift + JCtrl + Shift + J
Abre la caja de herramientas del navegadorCtrl + Alt + Shift + ICmd + Opt + Shift + ICtrl + Alt + Shift + I
Abre el bloc de notasShift + F4Shift + F4Shift + F4
Abre el WebIDEShift + F8Shift + F8Shift + F8
Abre el inspector de almacenamiento 5Shift + F9Shift + F9Shift + F9
Abre el depurador 2Ctrl + Shift + ZCmd + Opt + ZCtrl + Shift + Z
- -

1. A diferencia de otras herramientas alojadas en la caja de herramientas, este acceso directo tampoco cierra la Consola Web. En cambio, se centra en la línea de comandos de la consola web. Para cerrar la consola web, use el acceso directo de la caja de herramientas global de Ctrl + Shift + I (Cmd + Opt + I en una Mac).

- -

2. A partir de Firefox 66, este acceso directo ya no estará asociado con el depurador. A partir de Firefox 71, la letra de este acceso directo pasará a ser la Z.

- -

3. Antes de Firefox 55, el atajo de teclaro era Ctrl + Shift + Q (Cmd + Opt + Q en Mac).

- -

4. Hasta Firefox 38, cuando la consola del navegador está oculta por una ventana normal de Firefox, la misma combinación de teclas cierra la consola del navegador. Desde Firefox 38 en adelante, si la consola del navegador está oculta por una ventana normal de Firefox, esta combinación de teclas vuelve a colocar la consola del navegador en la parte superior y se enfoca en ella..

- -

5. La herramienta está deshabilitada de forma predeterminada, por lo que el acceso directo no funcionará hasta que se habilite desde el Panel de configuración.

- -

Caja de Herramientas

- -
-

Estos accesos directos funcionan siempre que la caja de herramientas esté abierta, sin importar qué herramienta esté activa.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Recorre las herramientas de izquierda a derechaCtrl + ]Cmd + ]Ctrl + ]
Recorre las herramientas de derecha a izquierdaCtrl + [Cmd + [Ctrl + [
Alterna entre la herramienta activa y la configuración.F1F1F1
Alterna caja de herramientas entre los 2 últimos modos de acoplamientoCtrl + Shift + DCmd + Shift + DCtrl + Shift + D
Alterna consola dividida (excepto si la consola es la herramienta seleccionada actualmente)EscEscEsc
-
- -
-
-
Estos accesos directos funcionan en todas las herramientas alojadas en la caja de herramientas.
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Incrementa el tamaño de la fuenteCtrl + + Cmd + + Ctrl + +
Decrementa el tamaño de la fuenteCtrl + -Cmd + -Ctrl + -
Restaura el tamaño por defecto de la fuenteCtrl + 0Cmd + 0Ctrl + 0
-
- -

Editor de código fuente

- -
-

Esta tabla enumera los accesos directos predeterminados para el editor de código fuente.

- -

En la sección Preferencias del editor de la configuración de las herramientas del desarrollador, es posible optar por utilizar las combinaciones de teclas Vim, Emacs o Sublime Text en su lugar.

- -

Para seleccionarlos, visite about:config, seleccione la configuración devtools.editor.keymap y asigne "vim" o "emacs", o "sublime" a esa configuración. Si hace esto, los enlaces seleccionados se usarán para todas las herramientas de desarrollador que usan el editor de origen. Debe volver a abrir el editor para que el cambio surta efecto.

- -

Desde Firefox 33 en adelante, la preferencia de vinculación de teclas se expone en la sección Preferencias del editor de la configuración de las herramientas del desarrollador, y puede configurarla allí en lugar de en about:config.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Ir a la lineaCtrl + JCmd + JCtrl + J
Buscar en la páginaCtrl + FCmd + FCtrl + F
Volver a buscar en la páginaCtrl + GCmd + GCtrl + G
Seleccionar todoCtrl + ACmd + ACtrl + A
CortarCtrl + XCmd + XCtrl + X
CopiarCtrl + CCmd + CCtrl + C
PegarCtrl + VCmd + VCtrl + V
DesacerCtrl + ZCmd + ZCtrl + Z
RehacerCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
IdentarTabTabTab
Quitar identado o sangríaShift + TabShift + TabShift + Tab
Mover línea(s) hacia arribaAlt + UpAlt + UpAlt + Up
Mover línea (s) hacia abajoAlt + DownAlt + DownAlt + Down
Comentar/Decomentar linea(s)Ctrl + /Cmd + /Ctrl + /
-
- -

Inspector de páginas

- -
- - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Abre el inspectorCtrl + Shift + CCmd + Shift + CCtrl + Shift + C
- -

Selector de nodos

- -

Estos accesos directos funcionan mientras el selector de nodos está activo.

- - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Seleccione el elemento debajo del mouse y cancela el modo selectorClickClickClick
Seleccione el elemento debajo del mouse y permanece en modo selectorShift+ClickShift+ClickShift+Click
- -

Panel HTML

- -

Estos accesos directos funcionan mientras se esté en el panel HTML del Inspector.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Elimina el nodo seleccionadoDeleteDeleteDelete
Deshace el borrado de un nodoCtrl + ZCmd + ZCtrl + Z
Rehace el borrado de un nodoCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
Moverse al siguiente nodo (solo nodos expandidos)Down arrowDown arrowDown arrow
Moverse al nodo anteriorUp arrowUp arrowUp arrow
Moverse al primer nodo del arbolHomeHomeHome
Moverse al últiimo nodo del arbolEndEndEnd
Expandir el nodo seleccionado actualmenteRight arrowRight arrowRight arrow
Contraer el nodo seleccionado actualmenteLeft arrowLeft arrowLeft arrow
(Cuando se selecciona un nodo) moverse dentro del nodo para que pueda comenzar a recorrer los atributos.EnterReturnEnter
Avanza por los atributos de un nodoTabTabTab
Retrocede a través de los atributos de un nodoShift + TabShift + TabShift + Tab
(Cuando se selecciona un atributo) comienza a editar el atributoEnterReturnEnter
Oculta / muestra el nodo seleccionadoHHH
Se centra en el cuadro de búsqueda en el panel HTMLCtrl + FCmd + FCtrl + F
Editar como HTMLF2F2F2
Deja de editar como HTMLF2 / Ctrl +EnterF2 / Cmd + ReturnF2 / Ctrl + Enter
Copia el HTML externo del nodo seleccionadoCtrl + CCmd + CCtrl + C
Desplazar el nodo seleccionado a la vistaSSS
Encuentra la siguiente coincidencia en el marcado, cuando la búsqueda está activaEnterReturnEnter
Encuentra la coincidencia anterior en el marcado, cuando la búsqueda está activaShift + EnterShift + ReturnShift + Enter
- -

Barra de rutas de exploración o migas de pan

- -

Estos atajos funcionan cuando la barra de rutas de exploración está enfocada.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Moverse al elemento anterior en la barraLeft arrowLeft arrowLeft arrow
Moverse al siguiente elemento en la barraRight arrowRight arrowRight arrow
Enfoca el panel HTMLShift + TabShift + TabShift + Tab
Enfoca el panel CSSTabTabTab
- -

Panel CSS

- -

Estos atajos funcionan cuando estás en el Inspector del panel CSS.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Se centra en el cuadro de búsqueda del panel CSSCtrl + FCmd + FCtrl + F
Borrar el contenido del cuadro de búsqueda (solo cuando el cuadro de búsqueda está enfocado y se ha ingresado contenido)EscEscEsc
Avanza a través de propiedades y valores del panelTabTabTab
Retroceda a través de propiedades y valores del panelShift + TabShift + TabShift + Tab
Comienza a editar la propiedad o el valor (Vista de reglas solamente, cuando se selecciona una propiedad o valor, pero aún no se está editando)Enter or SpaceReturn or SpaceEnter or Space
Se desplaza hacia arriba y hacia abajo a través de sugerencias de autocompletar (sólo vista de Reglas, cuando se edita una propiedad o valor)Up arrow , Down arrowUp arrow , Down arrowUp arrow , Down arrow
Elige la sugerencia actual de autocompletar (sólo vista de reglas, cuando se edita una propiedad o valor)Enter or TabReturn or TabEnter or Tab
Incrementar el valor seleccionado en 1Up arrowUp arrowUp arrow
Reducir el valor seleccionado en 1Down arrowDown arrowDown arrow
Incrementar el valor seleccionado en 100Shift + Page UpShift + Page UpShift + Page Up
Decrementar el valor seleccionado en 100Shift + Page DownShift + Page DownShift + Page Down
Incrementar el valor seleccionado en 10Shift + Up arrowShift + Up arrowShift + Up arrow
Reducir el valor seleccionado en 10Shift + Down arrowShift + Down arrowShift + Down arrow
Incrementar el valor seleccionado en 0.1Alt + Up arrow (Ctrl + Up arrow from Firefox 60 onwards.)Alt + Up arrowAlt + Up arrow (Ctrl + Up arrow from Firefox 60 onwards.)
Reducir el valor seleccionado en 0.1Alt + Down arrow (Ctrl + Down arrow from Firefox 60 onwards).Alt + Down arrowAlt + Down arrow (Ctrl + Down arrow from Firefox 60 onwards).
Mostrar / ocultar más información sobre la propiedad actual (sólo vista calculada, cuando se selecciona una propiedad)Enter or SpaceReturn or SpaceEnter or Space
Abrir la página de referencia de MDN sobre la propiedad actual (solo vista calculada, cuando se selecciona una propiedad)F1F1F1
Abra el archivo CSS actual en el Editor de estilos (solo vista calculada, donde se muestra más información para una propiedad y se enfoca una referencia de archivo CSS).EnterReturnEnter
-
- -

Depurador

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Cerrar archivoCtrl + WCmd + WCtrl + W
Buscar texto en el archivo actualCtrl + FCmd + FCtrl + F
Buscar texto en todos los archivosCtrl + Shift + FCmd + Shift + FCtrl + Shift + F
Encuentra el siguiente en el archivo actualCtrl + GCmd + GCtrl + G
Buscar cadenas por nombreCtrl + PCmd + PCtrl + P
Reanudar la ejecución en un punto de interrupciónF8F8 1F8
SiguienteF10F10 1F10
AnteriorF11F11 1F11
SalirShift + F11Shift + F11 1Shift + F11
Alternar punto de interrupción en la línea seleccionada actualmenteCtrl + BCmd + BCtrl + B
Alternar punto de interrupción condicional en la línea seleccionada actualmenteCtrl + Shift + BCmd + Shift + BCtrl + Shift + B
- -

1. De manera predeterminada, en algunos Mac, la tecla de función se reasigna para usar una función especial: por ejemplo, para cambiar el brillo de la pantalla o el volumen. Consulte esta guía para usar estas teclas como teclas de función estándar. Para usar una tecla reasignada como una tecla de función estándar, mantenga presionada la tecla Función también (para abrir el Profiler, use Shift + Function + F5).

- -
-

Nota: Antes de Firefox 66, la combinación Ctrl + Shift + S en Windows y Linux o Cmd + Opt + S en macOS abriría / cerraría el depurador. Desde Firefox 66 y versiones posteriores, este ya no es el caso.

-
-
- -

Depurador (Antes de Firefox 52)

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CommandWindowsmacOSLinux
Abrir el depuradorCtrl + Shift + SCmd + Opt + SCtrl + Shift + S
Buscar una cadena en el archivo actual usando el script filterCtrl + FCmd + FCtrl + F
Encuentra el siguiente en el archivo actualEnter / Up arrowReturn / Up arrowEnter / Up arrow
Encuentra el anterior en el archivo actualShift + Enter / Down arrowShift + Return / Down arrowShift + Enter / Down arrow
Buscar en todas las fuentes usando el script filterCtrl + Alt + FCmd + Opt + FCtrl + Alt + F
Buscar cadenas por nombreCtrl + P / Ctrl + OCmd + P / Ctrl + OCtrl + P / Ctrl + O
Buscar definiciones de funcionesCtrl + DCmd + DCtrl + D
Filtrar variables cuando la ejecución está en pausaCtrl + Alt + VCmd + Opt + VCtrl + Alt + V
Reanudar la ejecución en un punto de interrupciónF8F8 1F8
SiguienteF10F10 1F10
AnteriorF11F11 1F11
SalirShift + F11Shift + F11 1Shift + F11
Alternar punto de interrupción en la línea seleccionada Ctrl + BCmd + BCtrl + B
Alternar punto de interrupción condicional en la línea seleccionadaCtrl + Shift + BCmd + Shift + BCtrl + Shift + B
Agregar texto seleccionado a las expresiones de WatchCtrl + Shift + ECmd + Shift + ECtrl + Shift + E
Ir a la linea usando el script filterCtrl + LCmd + LCtrl + L
Buscar usando el script filterCtrl + OCmd + OCtrl + O
En el panel de código fuente, salta a la definición de la funciónCtrl + clickCmd + clickCtrl + click
- -

1. De manera predeterminada, en algunos Mac, la tecla de función se reasigna para usar una función especial: por ejemplo, para cambiar el brillo de la pantalla o el volumen. Consulte esta guía para usar estas teclas como teclas de función estándar. Para usar una tecla reasignada como una tecla de función estándar, mantenga presionada la tecla Función también (para abrir el Profiler, use Shift + Function + F5)

-
- -

Consola web

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandosWindowsmacOSLinux
Abre la consola webCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
Buscar en el panel de visualización de mensajesCtrl + FCmd + FCtrl + F
Abre el panel inspector de objetosCtrl + ClickCtrl + ClickCtrl + Click
Limpia el panel inspector de objetosEscEscEsc
Centrarse en la línea de comandoCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
Limpiar salida -

Ctrl + L

- -

From Firefox 44:

- -

Ctrl + Shift + L

- 		Ctrl + L -

Ctrl + L

- -

From Firefox 44:

- -

Ctrl + Shift + L

-
- -

Interprete de línea de comandos

- -

Estos atajos se aplican cuando estás en el Interprete de línea de comandos.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Desplazarse hasta el inicio de la salida de la consola (solo si la línea de comando está vacía)HomeHomeHome
Desplazarse hasta el final de la salida de la consola (solo si la línea de comando está vacía)EndEndEnd
Avanzar página a través de la salida de la consolaPage upPage upPage up
Retroceder una página a través de la salida de la consolaPage downPage downPage down
Ir hacia atrás a través del historial de comandosUp arrowUp arrowUp arrow
Ir hacia delante a través del historial de comandosDown arrowDown arrowDown arrow
Inicie la búsqueda inversa a través del historial de comandos / retroceda a través de comandos coincidentesF9Ctrl + RF9
Avance por el historial de comandos coincidentes (después de iniciar la búsqueda inversa)Shift + F9Ctrl + SShift + F9
Moverse al principio de la líneaHomeCtrl + ACtrl + A
Moverse al final de la líneaEndCtrl + ECtrl + E
Ejecutar la expresión actualEnterReturnEnter
Agregar una nueva línea (para ingresar expresiones de varias líneas)Shift + EnterShift + ReturnShift + Enter
- -

Ventana emergente de autocompletado

- -

Estos atajos se aplican mientras la ventana emergente de autocompletado está desplegada:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Elija la sugerencia actual de autocompletadoTabTabTab
Cancelar la ventana emergente de autocompletadoEscEscEsc
Ir a la sugerencia de autocompletado anteriorUp arrowUp arrowUp arrow
Ir a la siguiente sugerencia de autocompletadoDown arrowDown arrowDown arrow
Página arriba a través de sugerencias de autocompletadoPage upPage upPage up
Página abajo a través de sugerencias de autocompletadoPage downPage downPage down
Desplazarse al principio de  las sugerencias de autocompletadoHomeHomeHome
Desplazarse hasta el final de las sugerencias de autocompletadoEndEndEnd
-
- -

Editor de Estilo

- - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Abrir el editor de estiloShift + F7Shift + F7Shift + F7
Abrir una ventana emergente de autocompletadoCtrl + SpaceCmd + SpaceCtrl + Space
- -
-

Bloc de Notas

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Abrir el bloc de notasShift + F4Shift + F4Shift + F4
Ejecutar el código del bloc de notasCtrl + RCmd + RCtrl + R
Ejecutar el código del bloc de notas y mostrar el resultado en el inspector de objetosCtrl + ICmd + ICtrl + I
Ejecutar el código del bloc de notas e insertar el resultado como un comentarioCtrl + LCmd + LCtrl + L
Reevaluar la función actualCtrl + ECmd + ECtrl + E
Recargar la página actual y ejecutar el código del bloc de notaCtrl + Shift + RCmd + Shift + RCtrl + Shift + R
Guardar el código del bloc de notasCtrl + SCmd + SCtrl + S
Abrir un código existenteCtrl + OCmd + OCtrl + O
Crear una nueva página del bloc de notasCtrl + NCmd + NCtrl + N
Cerrar el bloc de notasCtrl + WCmd + WCtrl + W
Imprimir el código en el bloc de notasCtrl + PCmd + PCtrl + P
Mostrar sugerencias de autocompletadoCtrl + SpaceCtrl + SpaceCtrl + Space
Mostrar documentaciónCtrl + Shift + SpaceCtrl + Shift + SpaceCtrl + Shift + Space
-
- -
-

Selector de color (Gotero)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Seleccionar el color actualEnterReturnEnter
Salir del goteroEscEscEsc
Moverse por 1 píxelArrow keysArrow keysArrow keys
Moverse por 10 píxelsShift + arrow keysShift + arrow keysShift + arrow keys
-
diff --git a/files/es/tools/add-ons/index.html b/files/es/tools/add-ons/index.html deleted file mode 100644 index 53b7924169..0000000000 --- a/files/es/tools/add-ons/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Add-ons -slug: Tools/Add-ons -tags: - - NeedsTranslation - - TopicStub - - Web Development - - 'Web Development:Tools' -translation_of: 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/tools/debugger/how_to/use_a_source_map/index.html b/files/es/tools/debugger/how_to/use_a_source_map/index.html new file mode 100644 index 0000000000..30e60902cd --- /dev/null +++ b/files/es/tools/debugger/how_to/use_a_source_map/index.html @@ -0,0 +1,36 @@ +--- +title: Uso de un mapa fuente +slug: Tools/Debugger/How_to/Uso_de_un_mapa_fuente +tags: + - Debug + - mapa fuente + - source map +translation_of: Tools/Debugger/How_to/Use_a_source_map +--- +
{{ToolsSidebar}}
+ +

Los fuentes JavaScript ejecutados por el explorador frecuentemente son transformados de alguna manera desde el original creado por el desarrollador. Por ejemplo:

+ +
    +
  • los fuentes a menudo se combinan y minifican para hacer la transferencia desde el servidor más eficiente.
    • +
  • el código JavaScript que se ejecuta en una página a menudo es generado automáticamente. Como el compilado desde los lenguajes CoffeeScript o TypeScript.
    • +
+ +

En estas situaciones, es mucho más fácil depurar el código fuente en el estado original, que el fuente en el estado transformado que el navegador ha descargado. Un mapa fuente es un fichero que mapea el código transformado hacia el estado original, permitiendo al navegador reconstruir el fuente original y presentar el código original en el debugger.

+ +

Para habilitar al debugger trabajar con un mapa fuente, debes:

+ +
    +
  • generar el mapa fuente
    • +
  • incluir un comentario en el fichero transformado, apuntando al mapa fuente. La sintaxis del comentario es la siguiente:
    • +
+ +
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
+ +

{{EmbedYouTube("Fqd15gHC4Pg")}}

+ +

En el video anterior, cargamos https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. Esta página carga un fuente llamado "main.js" que fue originalmente escrito en CoffeeScript y compilado a JavaScript. El fuente compilado contiene un comentario como el siguiente, que apunta al mapa fuente:

+ +
//# sourceMappingURL=main.js.map
+ +

En el panel de fuentes del debugger, el fichero fuente original en CoffeeScript aparece ahora como "main.coffee", y podemos depurarlo como cualquier otro fichero fuente.

diff --git a/files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html b/files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html deleted file mode 100644 index 30e60902cd..0000000000 --- a/files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Uso de un mapa fuente -slug: Tools/Debugger/How_to/Uso_de_un_mapa_fuente -tags: - - Debug - - mapa fuente - - source map -translation_of: Tools/Debugger/How_to/Use_a_source_map ---- -
{{ToolsSidebar}}
- -

Los fuentes JavaScript ejecutados por el explorador frecuentemente son transformados de alguna manera desde el original creado por el desarrollador. Por ejemplo:

- -
    -
  • los fuentes a menudo se combinan y minifican para hacer la transferencia desde el servidor más eficiente.
    • -
  • el código JavaScript que se ejecuta en una página a menudo es generado automáticamente. Como el compilado desde los lenguajes CoffeeScript o TypeScript.
    • -
- -

En estas situaciones, es mucho más fácil depurar el código fuente en el estado original, que el fuente en el estado transformado que el navegador ha descargado. Un mapa fuente es un fichero que mapea el código transformado hacia el estado original, permitiendo al navegador reconstruir el fuente original y presentar el código original en el debugger.

- -

Para habilitar al debugger trabajar con un mapa fuente, debes:

- -
    -
  • generar el mapa fuente
    • -
  • incluir un comentario en el fichero transformado, apuntando al mapa fuente. La sintaxis del comentario es la siguiente:
    • -
- -
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
- -

{{EmbedYouTube("Fqd15gHC4Pg")}}

- -

En el video anterior, cargamos https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. Esta página carga un fuente llamado "main.js" que fue originalmente escrito en CoffeeScript y compilado a JavaScript. El fuente compilado contiene un comentario como el siguiente, que apunta al mapa fuente:

- -
//# sourceMappingURL=main.js.map
- -

En el panel de fuentes del debugger, el fichero fuente original en CoffeeScript aparece ahora como "main.coffee", y podemos depurarlo como cualquier otro fichero fuente.

diff --git "a/files/es/tools/desempe\303\261o/index.html" "b/files/es/tools/desempe\303\261o/index.html" deleted file mode 100644 index 9dbf8e643d..0000000000 --- "a/files/es/tools/desempe\303\261o/index.html" +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Rendimiento -slug: Tools/Desempeño -translation_of: Tools/Performance ---- -

La herramienta de Rendimiento te da una visión general de la capacidad de respuesta del sitio que visitas así como de su JavaScript y el modelo de diseño. Con esta herramienta puedes generar un perfil o registro de un sitio web en un período de tiempo. En dicho perfil la herramienta te ofrece una vista general de todas las acciones que tu navegador empleó para generar el sitio web así como una gráfica con el tiempo de respuesta de dicha pagina.

- -

Para examinar con más detalle los aspectos del perfil tienes tres herramientas auxiliares:

- -
    -
  • Waterfall  muestra qué operaciones ejecutó el navegador, tales como el modelo de ejecución empleado, JavaScript, repaints y liberación de memoria.
    • -
  • Call Tree muestra en qué funciones de JavaScript se requirió más tiempo del navegador.
    • -
  • Flame Chart muestra la pila de llamadas de JavaScript a lo largo de la grabación.
    • -
- -

{{EmbedYouTube("WBmttwfA_k8")}}

- -
-

Preámbulo

- -
-
-
-
UI Tour
-
-

Guía rápida de la interfaz para comenzar a manejar la herramienta de rendimiento.

-
-
-
- -
-
-
How to
-
Tareas básicas: abrir la herramienta, crear, guardar, cargar y configurar las grabaciones.
-
-
-
- -
-

Componentes de la herramienta de Rendimiento

- -
-
-
-
Frame rate
-
Comprender la capacidad de respuesta general de tu sitio.
-
Call Tree
-
Encontrar cuellos de botella en el JavaScript de tu sitio.
-
-
- -
-
-
Waterfall
-
Comprender el trabajo que el navegador realiza cuando un usuario interactúa con el sitio web.
-
Flame Chart
-
Ver qué funciones de JavaScript se ejecutan , y cuando , en el transcurso de la grabación.
-
 
-
-
-
- -
-

Escenarios

- -
-
-
-
Animating CSS properties
-
Utiliza Waterfall para entender cómo el navegador actualiza una página, y cómo las diferentes propiedades CSS pueden afectar al rendimiento.
-
 
-
-
- -
-
-
Intensive JavaScript
-
Utiliza la velocidad de los fotogramas y la herramienta Waterfall para resaltar los problemas de rendimiento provocados por los JavaScript de larga duración y cómo los workers pueden ayudar en esta situación.
-
-
-
- -

 

- -
-
-
 
-
-
- -

 

diff --git "a/files/es/tools/desempe\303\261o/ui_tour/index.html" "b/files/es/tools/desempe\303\261o/ui_tour/index.html" deleted file mode 100644 index 8898abae03..0000000000 --- "a/files/es/tools/desempe\303\261o/ui_tour/index.html" +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Paseo por la interfaz de usuario -slug: Tools/Desempeño/UI_Tour -translation_of: Tools/Performance/UI_Tour ---- -

La interfaz de usuario (UI) de las herramientas de rendimiento, consta de cuatro partes principales:

- -

- - - -

Barra de herramientas (Toolbar)

- -

De izquierde a derecha la barra de herramientas contiene los siguientes botones:

- -
    -
  • -

    Borrar la lista de grabaciones.

    -
    • -
- -
-

Nota: Si haces esto, perderas cualquier grabación que no haya sido guardada.

-
- -
    -
  • Inicia o detiene una grabación.
    • -
  • Importar una grabación previamente guardada.
    • -
  • Filtra los marcadores que muestra la vista en cascada.
    • -
  • Cambia la vista activa en la ventana de detalles.
    • -
  • Muestra un popup con la configuración.
    • -
- -

- -

Lista de grabaciones (Recordings pane)

- -

La lista de grabaciones muestra todas las grabaciones activas, incluyendo las realizadas durante la sesion y las que hayas importado.

- -

- -

En el hay una grabación seleccionada en todo momento y esta se mostrara en el resto de la herramienta. Para seleccionar una grabación diferente, presiónala en la lista del panel. Para guardarla como un archivo JSON haz click en "Guardar".

- -

Vista previa de la grabacion (Recording overview)

- -

Muestra un resumen de toda la grabación, donde el eje-x representa el tiempo.

- -

- -

Contiene dos elementos: una vista previa de la vista en cascada y gráfico con el promedio de fotogramas.

- -

Resumen de la vista en cascada

- -

Nos presenta una versión comprimida de la vista en cascada:

- -

- -

Las operaciones grabadas están codificadas con el mismo esquema de colores empleado para la vista en cascada que se muestra en la ventana de detalles.

- -

Gráfico con el promedio de fotogramas

- -

El promedio de fotogramas nos da una idea de como el navegador responde durante la grabación:

- -

- -

Puedes consultar la entrada sobre el promedio de fotogramas.

- -

Relacionando eventos

- -

Como estos eventos están sincronizados, puedes crear una correlación entre ellos.

- -

Por ejemplo en la captura de pantalla inferior, una larga operación de pintado (representada con una barra verde en el resumen de la vista en cascada) corresponde con una caída en el promedio de fotogramas:

- -

- -

Ampliando

- -

Puedes usar la vista previa para seleccionar un trozo de la grabación para examinarlo con mas detalle. Al hacer esto, la ventana de detalles se actualizara con el contenido marcado. En la captura inferior hemos seleccionado la caída en el promedio de fotogramas y así podemos ver la operación de pintado con mas detalle:

- -

- -

Ventana de detalles (Details pane)

- -

La ventana de detalles muestra cualquier herramienta seleccionada. Para cambiar entre ellas, usa los botones de la barra de herramientas.

- -

Vista en cascada

- -

La vista en cascada da una vision de que esta haciendo el navegador durante la grabación: ejecutar Javascript, actualizar CSS,  actualizar la composición de la pagina y el rendimiento del redibujado. El eje-x representa el tiempo y las operaciones grabadas van apareciendo en forma de cascada, reflejando así la naturaleza que tiene el navegador el ejecutar las tareas en serie.

- -

- -

Para aprender mas sobre la vista en cascada puedes visitar su entrada.

- -

Árbol de llamadas

- -

El árbol de llamadas es una muestra del Javascript que se ejecuta en la pagina. Son una serie de muestras del estado del motor de Javascript y registra el stack de código ejecutado en el momento que se toma la muestra. Estadísticamente, el numero de muestras tomadas al ejecutar una función especifica, corresponde con la cantidad de tiempo que el navegador ha empleado para ejecutarlo, así puedes identificar los cuellos de botella en tu código.

- -


- Para aprender mas sobre el árbol de llamadas puedes visitar su entrada.

- -

Gráfico de llama

- -

Si el árbol de llamadas te muestra estadísticamente que funciones de tu sitio gastan mas tiempo de ejecución durante la grabación, el gráfico de llama nos indica cualquier stack llamado durante la misma:

- -

- -

Para aprender mas sobre el gráfico de llama puedes visitar su entrada.

- -

Asignaciones

- -
-

La vista de Asignaciones es nueva en Firefox 46.

-
- -

La vista de Asignaciones es como el árbol de llamadas, pero para las asignaciones: Nos muestra que funciones en tu pagina tienen mas memoria asignada durante el transacurso de la grabación.

- -

- -

La vista de Asignaciones solo aparece si haz seleccionado "Grabar Asignaciones" en las opciones de las herramientas de rendimiento antes de hacer una nueva grabación.

- -

{{EmbedYouTube("Le9tTo7bqts")}}

- -

Para aprender mas sobre las Asignaciones puedes visitar su entrada.

diff --git a/files/es/tools/editor_audio_web/index.html b/files/es/tools/editor_audio_web/index.html deleted file mode 100644 index 2db0cdbe58..0000000000 --- a/files/es/tools/editor_audio_web/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Editor de audio web -slug: Tools/Editor_Audio_Web -translation_of: Tools/Web_Audio_Editor ---- -
-

El editor de audio web es nuevo en Firefox 32.

-
-

Con la API de Audio Web, los desarrolladores crean un contexto de audio. Dentro de ese contexto construyen un número de  nodos de audio, incluyendo:

- -

Cada nodo tiene cero o más propiedades AudioParam que configuran su operación. Por ejemplo, GainNode tiene solamente la propiedad gain, mientras que OscillatorNode tiene las propiedades frequency y detune.

-

El desarrollador conecta los nodos en un gráfico y ese gráfico completo define el comportamiento del flujo de audio.

-

El editor de audio web examina un contexto de audio construido en la página y proporciona una visualización de su gráfico. Esto da una vista de alto nivel de su operación y permite asegurar que todos los nodos están conectados de la forma esperada. Entonces se pueden examinar y editar las propiedades AudioParam para cada nodo del gráfico. Algunas propiedades no-AudioParam, como una propiedad OscillatorNode's type son mostradas y también se pueden editar.

-

Esta herramienta todavía es experimental. Si encuentra errores, nos encantaría que los informe en Bugzilla. Si tiene alguna opinión o sugerencias para nuevas funcionalidades, ffdevtools.uservoice.com o Twitter son lugares excelentes para registrarlas.

-

Abriendo el editor de audio web

-

El editor de audio web no está habilitado por defecto en Firefox 32. Para habilitarlo, abra la Configuración de herramientas de desarrollador y marque "Audio web". Ahora debería haber una pestaña extra en la Barra de herramientas llamada "Audio web". Haga clic en esa pestaña y cargue una página que construya un contexto de audio. Dos demos interesantes son:

-
    -
  • Voice-change-O-Matic, puede aplicar varios efectos a la entrada de micrófono y también muestra una visualización del resultado
    • -
  • Violent Theremin, cambia el tono y el volumen de una onda sinusoidal al mover el puntero del mouse
    • -
-

Visualizando el gráfico

-

El editor de audio web ahora mostrará el gráfico del contexto de audio cargado. Aquí está el gráfico del demo de Violent Theremin:

-

Se puede ver que usa tres nodos: un OscillatorNode como fuente, un GainNode para controlar el volumen y un AudioDestinationNode como destino.

-

Inspeccionando y modificando AudioNodes

-

Si hace clic en un nodo, se restalta y aparece un inspector del nodo en el lado derecho. Ahí se listan los valores de las propiedades del nodo AudioParam. Por ejemplo, así se ve el OscillatorNode:

-

Con el demo de Violent Theremin, el parámetro frecuencia es modificado cuando el usuario mueve el mouse hacia la izquierda o la derecha y eso se puede ver reflejado en el inspector del nodo. Sin embargo, el valor no es actualizado en tiempo real: hay que hacer clic en el nodo nuevamente para ver el valor actualizado.

-

Si se hace clic en el valor en el inspector del nodo se puede modificar: presione Intro o Tab y el nuevo valor tiene efecto inmediatamente.

diff --git a/files/es/tools/editor_estilo/index.html b/files/es/tools/editor_estilo/index.html deleted file mode 100644 index cdfc54bebf..0000000000 --- a/files/es/tools/editor_estilo/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Editor de Estilo -slug: Tools/Editor_Estilo -tags: - - CSS - - Desarrollo web - - Herramientas - - Herramientas de desarrollo web - - Hojas de estilo -translation_of: Tools/Style_Editor ---- -

El editor de estilo te permite:

- -
    -
  • ver y editar todas las hojas de estilo asociadas con una página
    • -
  • crear nuevas hojas de estilo desde bosquejos y aplicarlas a una página
    • -
  • importar hojas de estilo existentes y aplicarlas en la página
    • -
- -

{{EmbedYouTube("7839qc55r7o")}}

- -

Para abrir el Editor de Estilo selecciona la opción "Editor de Estilo" desde el menú "Web Developer" (este es un submenu del menú "Tools" o "Herramientas" en una Mac). El Toolbox o caja de herramientas aparecerá en la parte inferior de la ventana del navegador, con el Editor de Estilo activado:

- -

- -

El Editor de Estilo está divivido en  dos secciones principales: el panel de estilos en la izquierda y el editor en la derecha.

- -
-

From Firefox 33 onwards, there's a third component to the Style Editor: the media sidebar.

-
- -

El panel de hojas de estilo

- -

El panel de hojas de estilo, en la izquierda, muestra todas las hojas de estilos que están siendo utilizadas por el documento actual.  You can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of the sheet's name. Puede guardar los cambios hechos en la hoja de estilos a su computador, haciendo clic en el botón Guardar en la esquina inferior derecha de cada hoja de estilos de la lista.

- -

El panel de edición

- -

A la derecha está el panel de edición. Aquí está disponible el código fuente de la hoja de estilo seleccionada, lista para ver y editar. Cualquier cambio que realice será aplicada inmediatamente. This makes it easy to experiment with, revise, and test changes. Una vez esté satisfecho con sus cambios, puede guardar una copia localmente, haciendo clic en el botón Guardar.

- -

El editor contiene numeración de líneas y resaltamiento de código, haciendo más fácil la lectura de su CSS. También soporta keyboard shortcuts.

- -

El Editor de Estilos automáticamente des-minimiza las hojas de estilo que detecta, sin afectar el original. Esto facilita mucho el trabajo en páginas que ya han sido optimizadas.

- -

El Editor de Estilos soporta autocompletado. Empiece escribiendo y el sistema le ofrecerá una lista de sugerencias.

- -

Puede deshabilitar el autocompletado en Style Editor settings.

- -

La barra lateral "media"

- -

A partir de Firefox 33 en adelante, el Editor de Estilos muestra una barra lateral a la derecha cuando se encuentra alguna regla @media (@media rules). La barra lateral muestra las reglas y provee un link a la línea donde se define dicha regla. Haga clic en un ítem para ir hacia la definición de esa regla en la hoja de estilo. El texto condicional de la regla estará en gris si el media query no aplica.

- -

La barra lateral de medios funciona especialmente bien con Responsive Design View para crear y depurar diseños móviles :

- -

- -

Creación e importación de hojas de estilo

- -

Se puede crear una nueva hoja de estilos haciendo click en el nuevo botón de la barra de herrramientas. A continuación puedes comenzar a introducir  CSS en el nuevo editor y ver como los nuevos estilos se aplican de forma inmediata ,al igual que los cambios en otras hojas.

- -

Se puede cargar una hoja de estilos desde el disco y aplicarlo a la página haciendo click en el boton de importar.

- -

Soporte de mapa fuente

- -

{{EmbedYouTube("zu2eZbYtEUQ")}}

- -

Los desarrolladores web, con frecuencia crean archivos CSS  utilizando un preprocesador como  Sass, Less, o Stylus. Estas herramientas generan archivos CSS  procedentes de un sintasix mas rico y expresivo. Si haces esto, seras capaz de editar y  ver que el  CSS  generado no es tan util, porque el código que mantienes es el sintaxis preprocesado, no el  CSS generado. Por lo que necesitarás editar el CSS generado, y después manualmente trabajar sobre como reaplicarlo a la fuente original.

- -

Mapas Fuente habilita para regresar desde el CSS generado a la síntasix original, entonces  se puede ver, y te permite editar archivos en la síntasix original. A partir de Firefox 29 en adelante, el editor de estilos puede interpretar mapas fuente de CSS .

- -

Esto significa que si utilizas, por ejemplo, Sass, el Editor de Estilos  mostrará,y permitirá editar,archivos Sass , en lugar del CSS que se ha generado desde ellos:

- -

Para que esto funcione ,es necesario:

- -
    -
  • utilizar un preprocesador CSS que interprete  Source Map Revision 3 proposal. Actualmente esto significa Sass 3.3.0  o superior , o la versión 1.5.0 de Less. Otros preprocesadores están trabajando activamente en añadir soporte, o lo están considerando.
    • -
  • actualmente el preprocesador da instrucciones para generar un mapa fuente, por ejemplo pasando el argumento --sourcemap a la herramienta de comando en linea de  Sass.
    • -
- -

Visualización de las fuentes originales

- -

Ahora, si compruebas "mostrar fuentes originales" en los ajustes del Editor de estilos, el vínculo junto a las reglas  CSS en la Vista de Reglas ,vincula con las fuentes originales en el Editor de Estilos.

- -

Edición de las fuentes originales

- -

Se pueden editar tambien las fuentes originales en el  Editor de estilos y ver el resultado aplicado a la página de inmediato. Para conseguir que esto funcione hay dos pasos adicionales.

- -

Primero, configura el preprocesador para que muestre la fuente original y automaticamente regenere el CSS cuando cambien las fuentes. Con Sass puedes hacer esto simplemente pasando la opción --watch :

- -
sass index.scss:index.css --sourcemap --watch
- -

A continuación, guarda la fuente original en el editor de estilos haciendo click en el botón   "Guardar" junto al archivo, y este se guardará sobre el archivo original.

- -

Ahora cuando hagas cambios en el archivo original en el  Editor de Estilos , el CSS se regenerará y podrás ver los cambios de forma inmediata.

- -

Atajos de Teclado

- -

Atajos del editor de código fuente

- -

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

- -

{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}

diff --git a/files/es/tools/keyboard_shortcuts/index.html b/files/es/tools/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..9372393011 --- /dev/null +++ b/files/es/tools/keyboard_shortcuts/index.html @@ -0,0 +1,1266 @@ +--- +title: Accesos directos +slug: Tools/Accesos_directos +tags: + - Herramientas + - 'l10n:priority' +translation_of: Tools/Keyboard_shortcuts +--- +
{{ToolsSidebar}}
+ +

Esta página muestra todos los accesos directos utilizados para las herramientas para desarrolladores de Firefox.

+ +

La primera sección muestra el acceso directo para cada herramienta mientras que la segunda sección muestra los accesos directos aplicables sólo a las herramientas de desarrolladores. Por último hay una sección para cada herramienta, que lista todos los accesos directos que puedes usar dentro de la misma.

+ +

Debido a que los accesos directos dependen de la ubicación, no están documentados en esta página.

+ +

Herramientas de apertura y cierre

+ +

Estos accesos directos funcionan en la ventana principal del navegador para abrir la herramienta especificada. Los mismos accesos directos funcionarán para cerrar las herramientas alojadas en la Caja de herramientas si la herramienta está activa. Para herramientas que se abren en una nueva ventana, como la consola del navegador, debe cerrar la ventana para cerrar la herramienta.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Abre la caja de herramientas (con la herramienta más reciente activada)Ctrl + Shift + ICmd + Opt + ICtrl + Shift + I
Trae la caja de herramientas a primer plano (solo si está en una ventana separada y no en primer plano)Ctrl + Shift + I o F12Cmd + Opt + I o F12Ctrl + Shift + I o F12
Cierra la caja de herramientas (si está en una ventana separada y en primer plano)Ctrl + Shift + I o F12Cmd + Opt + I o F12Ctrl + Shift + I o F12
Abre la consola web 1Ctrl + Shift + KCmd + Opt + KCtrl + Shift + K
Abre el inspector de elementosCtrl + Shift + CCmd + Opt + CCtrl + Shift + C
Abre el depurador 2Ctrl + Shift + SCmd + Opt + SCtrl + Shift + S
Abre el editor de estilosShift + F7Shift + F7 1Shift + F7
Abre el perfiladorShift + F5Shift + F5 1Shift + F5
Abre el monitor de red 3Ctrl + Shift + ECmd + Opt + ECtrl + Shift + E
Despliega las herramientas de desarrolladorShift + F2Shift + F2 1Shift + F2
Despliega la vista de diseño adaptableCtrl + Shift + MCmd + Opt + MCtrl + Shift + M
Abre la consola del navegador 4Ctrl + Shift + JCmd + Shift + JCtrl + Shift + J
Abre la caja de herramientas del navegadorCtrl + Alt + Shift + ICmd + Opt + Shift + ICtrl + Alt + Shift + I
Abre el bloc de notasShift + F4Shift + F4Shift + F4
Abre el WebIDEShift + F8Shift + F8Shift + F8
Abre el inspector de almacenamiento 5Shift + F9Shift + F9Shift + F9
Abre el depurador 2Ctrl + Shift + ZCmd + Opt + ZCtrl + Shift + Z
+ +

1. A diferencia de otras herramientas alojadas en la caja de herramientas, este acceso directo tampoco cierra la Consola Web. En cambio, se centra en la línea de comandos de la consola web. Para cerrar la consola web, use el acceso directo de la caja de herramientas global de Ctrl + Shift + I (Cmd + Opt + I en una Mac).

+ +

2. A partir de Firefox 66, este acceso directo ya no estará asociado con el depurador. A partir de Firefox 71, la letra de este acceso directo pasará a ser la Z.

+ +

3. Antes de Firefox 55, el atajo de teclaro era Ctrl + Shift + Q (Cmd + Opt + Q en Mac).

+ +

4. Hasta Firefox 38, cuando la consola del navegador está oculta por una ventana normal de Firefox, la misma combinación de teclas cierra la consola del navegador. Desde Firefox 38 en adelante, si la consola del navegador está oculta por una ventana normal de Firefox, esta combinación de teclas vuelve a colocar la consola del navegador en la parte superior y se enfoca en ella..

+ +

5. La herramienta está deshabilitada de forma predeterminada, por lo que el acceso directo no funcionará hasta que se habilite desde el Panel de configuración.

+ +

Caja de Herramientas

+ +
+

Estos accesos directos funcionan siempre que la caja de herramientas esté abierta, sin importar qué herramienta esté activa.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Recorre las herramientas de izquierda a derechaCtrl + ]Cmd + ]Ctrl + ]
Recorre las herramientas de derecha a izquierdaCtrl + [Cmd + [Ctrl + [
Alterna entre la herramienta activa y la configuración.F1F1F1
Alterna caja de herramientas entre los 2 últimos modos de acoplamientoCtrl + Shift + DCmd + Shift + DCtrl + Shift + D
Alterna consola dividida (excepto si la consola es la herramienta seleccionada actualmente)EscEscEsc
+
+ +
+
+
Estos accesos directos funcionan en todas las herramientas alojadas en la caja de herramientas.
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Incrementa el tamaño de la fuenteCtrl + + Cmd + + Ctrl + +
Decrementa el tamaño de la fuenteCtrl + -Cmd + -Ctrl + -
Restaura el tamaño por defecto de la fuenteCtrl + 0Cmd + 0Ctrl + 0
+
+ +

Editor de código fuente

+ +
+

Esta tabla enumera los accesos directos predeterminados para el editor de código fuente.

+ +

En la sección Preferencias del editor de la configuración de las herramientas del desarrollador, es posible optar por utilizar las combinaciones de teclas Vim, Emacs o Sublime Text en su lugar.

+ +

Para seleccionarlos, visite about:config, seleccione la configuración devtools.editor.keymap y asigne "vim" o "emacs", o "sublime" a esa configuración. Si hace esto, los enlaces seleccionados se usarán para todas las herramientas de desarrollador que usan el editor de origen. Debe volver a abrir el editor para que el cambio surta efecto.

+ +

Desde Firefox 33 en adelante, la preferencia de vinculación de teclas se expone en la sección Preferencias del editor de la configuración de las herramientas del desarrollador, y puede configurarla allí en lugar de en about:config.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Ir a la lineaCtrl + JCmd + JCtrl + J
Buscar en la páginaCtrl + FCmd + FCtrl + F
Volver a buscar en la páginaCtrl + GCmd + GCtrl + G
Seleccionar todoCtrl + ACmd + ACtrl + A
CortarCtrl + XCmd + XCtrl + X
CopiarCtrl + CCmd + CCtrl + C
PegarCtrl + VCmd + VCtrl + V
DesacerCtrl + ZCmd + ZCtrl + Z
RehacerCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
IdentarTabTabTab
Quitar identado o sangríaShift + TabShift + TabShift + Tab
Mover línea(s) hacia arribaAlt + UpAlt + UpAlt + Up
Mover línea (s) hacia abajoAlt + DownAlt + DownAlt + Down
Comentar/Decomentar linea(s)Ctrl + /Cmd + /Ctrl + /
+
+ +

Inspector de páginas

+ +
+ + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Abre el inspectorCtrl + Shift + CCmd + Shift + CCtrl + Shift + C
+ +

Selector de nodos

+ +

Estos accesos directos funcionan mientras el selector de nodos está activo.

+ + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Seleccione el elemento debajo del mouse y cancela el modo selectorClickClickClick
Seleccione el elemento debajo del mouse y permanece en modo selectorShift+ClickShift+ClickShift+Click
+ +

Panel HTML

+ +

Estos accesos directos funcionan mientras se esté en el panel HTML del Inspector.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Elimina el nodo seleccionadoDeleteDeleteDelete
Deshace el borrado de un nodoCtrl + ZCmd + ZCtrl + Z
Rehace el borrado de un nodoCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
Moverse al siguiente nodo (solo nodos expandidos)Down arrowDown arrowDown arrow
Moverse al nodo anteriorUp arrowUp arrowUp arrow
Moverse al primer nodo del arbolHomeHomeHome
Moverse al últiimo nodo del arbolEndEndEnd
Expandir el nodo seleccionado actualmenteRight arrowRight arrowRight arrow
Contraer el nodo seleccionado actualmenteLeft arrowLeft arrowLeft arrow
(Cuando se selecciona un nodo) moverse dentro del nodo para que pueda comenzar a recorrer los atributos.EnterReturnEnter
Avanza por los atributos de un nodoTabTabTab
Retrocede a través de los atributos de un nodoShift + TabShift + TabShift + Tab
(Cuando se selecciona un atributo) comienza a editar el atributoEnterReturnEnter
Oculta / muestra el nodo seleccionadoHHH
Se centra en el cuadro de búsqueda en el panel HTMLCtrl + FCmd + FCtrl + F
Editar como HTMLF2F2F2
Deja de editar como HTMLF2 / Ctrl +EnterF2 / Cmd + ReturnF2 / Ctrl + Enter
Copia el HTML externo del nodo seleccionadoCtrl + CCmd + CCtrl + C
Desplazar el nodo seleccionado a la vistaSSS
Encuentra la siguiente coincidencia en el marcado, cuando la búsqueda está activaEnterReturnEnter
Encuentra la coincidencia anterior en el marcado, cuando la búsqueda está activaShift + EnterShift + ReturnShift + Enter
+ +

Barra de rutas de exploración o migas de pan

+ +

Estos atajos funcionan cuando la barra de rutas de exploración está enfocada.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Moverse al elemento anterior en la barraLeft arrowLeft arrowLeft arrow
Moverse al siguiente elemento en la barraRight arrowRight arrowRight arrow
Enfoca el panel HTMLShift + TabShift + TabShift + Tab
Enfoca el panel CSSTabTabTab
+ +

Panel CSS

+ +

Estos atajos funcionan cuando estás en el Inspector del panel CSS.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Se centra en el cuadro de búsqueda del panel CSSCtrl + FCmd + FCtrl + F
Borrar el contenido del cuadro de búsqueda (solo cuando el cuadro de búsqueda está enfocado y se ha ingresado contenido)EscEscEsc
Avanza a través de propiedades y valores del panelTabTabTab
Retroceda a través de propiedades y valores del panelShift + TabShift + TabShift + Tab
Comienza a editar la propiedad o el valor (Vista de reglas solamente, cuando se selecciona una propiedad o valor, pero aún no se está editando)Enter or SpaceReturn or SpaceEnter or Space
Se desplaza hacia arriba y hacia abajo a través de sugerencias de autocompletar (sólo vista de Reglas, cuando se edita una propiedad o valor)Up arrow , Down arrowUp arrow , Down arrowUp arrow , Down arrow
Elige la sugerencia actual de autocompletar (sólo vista de reglas, cuando se edita una propiedad o valor)Enter or TabReturn or TabEnter or Tab
Incrementar el valor seleccionado en 1Up arrowUp arrowUp arrow
Reducir el valor seleccionado en 1Down arrowDown arrowDown arrow
Incrementar el valor seleccionado en 100Shift + Page UpShift + Page UpShift + Page Up
Decrementar el valor seleccionado en 100Shift + Page DownShift + Page DownShift + Page Down
Incrementar el valor seleccionado en 10Shift + Up arrowShift + Up arrowShift + Up arrow
Reducir el valor seleccionado en 10Shift + Down arrowShift + Down arrowShift + Down arrow
Incrementar el valor seleccionado en 0.1Alt + Up arrow (Ctrl + Up arrow from Firefox 60 onwards.)Alt + Up arrowAlt + Up arrow (Ctrl + Up arrow from Firefox 60 onwards.)
Reducir el valor seleccionado en 0.1Alt + Down arrow (Ctrl + Down arrow from Firefox 60 onwards).Alt + Down arrowAlt + Down arrow (Ctrl + Down arrow from Firefox 60 onwards).
Mostrar / ocultar más información sobre la propiedad actual (sólo vista calculada, cuando se selecciona una propiedad)Enter or SpaceReturn or SpaceEnter or Space
Abrir la página de referencia de MDN sobre la propiedad actual (solo vista calculada, cuando se selecciona una propiedad)F1F1F1
Abra el archivo CSS actual en el Editor de estilos (solo vista calculada, donde se muestra más información para una propiedad y se enfoca una referencia de archivo CSS).EnterReturnEnter
+
+ +

Depurador

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Cerrar archivoCtrl + WCmd + WCtrl + W
Buscar texto en el archivo actualCtrl + FCmd + FCtrl + F
Buscar texto en todos los archivosCtrl + Shift + FCmd + Shift + FCtrl + Shift + F
Encuentra el siguiente en el archivo actualCtrl + GCmd + GCtrl + G
Buscar cadenas por nombreCtrl + PCmd + PCtrl + P
Reanudar la ejecución en un punto de interrupciónF8F8 1F8
SiguienteF10F10 1F10
AnteriorF11F11 1F11
SalirShift + F11Shift + F11 1Shift + F11
Alternar punto de interrupción en la línea seleccionada actualmenteCtrl + BCmd + BCtrl + B
Alternar punto de interrupción condicional en la línea seleccionada actualmenteCtrl + Shift + BCmd + Shift + BCtrl + Shift + B
+ +

1. De manera predeterminada, en algunos Mac, la tecla de función se reasigna para usar una función especial: por ejemplo, para cambiar el brillo de la pantalla o el volumen. Consulte esta guía para usar estas teclas como teclas de función estándar. Para usar una tecla reasignada como una tecla de función estándar, mantenga presionada la tecla Función también (para abrir el Profiler, use Shift + Function + F5).

+ +
+

Nota: Antes de Firefox 66, la combinación Ctrl + Shift + S en Windows y Linux o Cmd + Opt + S en macOS abriría / cerraría el depurador. Desde Firefox 66 y versiones posteriores, este ya no es el caso.

+
+
+ +

Depurador (Antes de Firefox 52)

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandWindowsmacOSLinux
Abrir el depuradorCtrl + Shift + SCmd + Opt + SCtrl + Shift + S
Buscar una cadena en el archivo actual usando el script filterCtrl + FCmd + FCtrl + F
Encuentra el siguiente en el archivo actualEnter / Up arrowReturn / Up arrowEnter / Up arrow
Encuentra el anterior en el archivo actualShift + Enter / Down arrowShift + Return / Down arrowShift + Enter / Down arrow
Buscar en todas las fuentes usando el script filterCtrl + Alt + FCmd + Opt + FCtrl + Alt + F
Buscar cadenas por nombreCtrl + P / Ctrl + OCmd + P / Ctrl + OCtrl + P / Ctrl + O
Buscar definiciones de funcionesCtrl + DCmd + DCtrl + D
Filtrar variables cuando la ejecución está en pausaCtrl + Alt + VCmd + Opt + VCtrl + Alt + V
Reanudar la ejecución en un punto de interrupciónF8F8 1F8
SiguienteF10F10 1F10
AnteriorF11F11 1F11
SalirShift + F11Shift + F11 1Shift + F11
Alternar punto de interrupción en la línea seleccionada Ctrl + BCmd + BCtrl + B
Alternar punto de interrupción condicional en la línea seleccionadaCtrl + Shift + BCmd + Shift + BCtrl + Shift + B
Agregar texto seleccionado a las expresiones de WatchCtrl + Shift + ECmd + Shift + ECtrl + Shift + E
Ir a la linea usando el script filterCtrl + LCmd + LCtrl + L
Buscar usando el script filterCtrl + OCmd + OCtrl + O
En el panel de código fuente, salta a la definición de la funciónCtrl + clickCmd + clickCtrl + click
+ +

1. De manera predeterminada, en algunos Mac, la tecla de función se reasigna para usar una función especial: por ejemplo, para cambiar el brillo de la pantalla o el volumen. Consulte esta guía para usar estas teclas como teclas de función estándar. Para usar una tecla reasignada como una tecla de función estándar, mantenga presionada la tecla Función también (para abrir el Profiler, use Shift + Function + F5)

+
+ +

Consola web

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandosWindowsmacOSLinux
Abre la consola webCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
Buscar en el panel de visualización de mensajesCtrl + FCmd + FCtrl + F
Abre el panel inspector de objetosCtrl + ClickCtrl + ClickCtrl + Click
Limpia el panel inspector de objetosEscEscEsc
Centrarse en la línea de comandoCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
Limpiar salida +

Ctrl + L

+ +

From Firefox 44:

+ +

Ctrl + Shift + L

+ 		Ctrl + L +

Ctrl + L

+ +

From Firefox 44:

+ +

Ctrl + Shift + L

+
+ +

Interprete de línea de comandos

+ +

Estos atajos se aplican cuando estás en el Interprete de línea de comandos.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Desplazarse hasta el inicio de la salida de la consola (solo si la línea de comando está vacía)HomeHomeHome
Desplazarse hasta el final de la salida de la consola (solo si la línea de comando está vacía)EndEndEnd
Avanzar página a través de la salida de la consolaPage upPage upPage up
Retroceder una página a través de la salida de la consolaPage downPage downPage down
Ir hacia atrás a través del historial de comandosUp arrowUp arrowUp arrow
Ir hacia delante a través del historial de comandosDown arrowDown arrowDown arrow
Inicie la búsqueda inversa a través del historial de comandos / retroceda a través de comandos coincidentesF9Ctrl + RF9
Avance por el historial de comandos coincidentes (después de iniciar la búsqueda inversa)Shift + F9Ctrl + SShift + F9
Moverse al principio de la líneaHomeCtrl + ACtrl + A
Moverse al final de la líneaEndCtrl + ECtrl + E
Ejecutar la expresión actualEnterReturnEnter
Agregar una nueva línea (para ingresar expresiones de varias líneas)Shift + EnterShift + ReturnShift + Enter
+ +

Ventana emergente de autocompletado

+ +

Estos atajos se aplican mientras la ventana emergente de autocompletado está desplegada:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Elija la sugerencia actual de autocompletadoTabTabTab
Cancelar la ventana emergente de autocompletadoEscEscEsc
Ir a la sugerencia de autocompletado anteriorUp arrowUp arrowUp arrow
Ir a la siguiente sugerencia de autocompletadoDown arrowDown arrowDown arrow
Página arriba a través de sugerencias de autocompletadoPage upPage upPage up
Página abajo a través de sugerencias de autocompletadoPage downPage downPage down
Desplazarse al principio de  las sugerencias de autocompletadoHomeHomeHome
Desplazarse hasta el final de las sugerencias de autocompletadoEndEndEnd
+
+ +

Editor de Estilo

+ + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Abrir el editor de estiloShift + F7Shift + F7Shift + F7
Abrir una ventana emergente de autocompletadoCtrl + SpaceCmd + SpaceCtrl + Space
+ +
+

Bloc de Notas

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Abrir el bloc de notasShift + F4Shift + F4Shift + F4
Ejecutar el código del bloc de notasCtrl + RCmd + RCtrl + R
Ejecutar el código del bloc de notas y mostrar el resultado en el inspector de objetosCtrl + ICmd + ICtrl + I
Ejecutar el código del bloc de notas e insertar el resultado como un comentarioCtrl + LCmd + LCtrl + L
Reevaluar la función actualCtrl + ECmd + ECtrl + E
Recargar la página actual y ejecutar el código del bloc de notaCtrl + Shift + RCmd + Shift + RCtrl + Shift + R
Guardar el código del bloc de notasCtrl + SCmd + SCtrl + S
Abrir un código existenteCtrl + OCmd + OCtrl + O
Crear una nueva página del bloc de notasCtrl + NCmd + NCtrl + N
Cerrar el bloc de notasCtrl + WCmd + WCtrl + W
Imprimir el código en el bloc de notasCtrl + PCmd + PCtrl + P
Mostrar sugerencias de autocompletadoCtrl + SpaceCtrl + SpaceCtrl + Space
Mostrar documentaciónCtrl + Shift + SpaceCtrl + Shift + SpaceCtrl + Shift + Space
+
+ +
+

Selector de color (Gotero)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Seleccionar el color actualEnterReturnEnter
Salir del goteroEscEscEsc
Moverse por 1 píxelArrow keysArrow keysArrow keys
Moverse por 10 píxelsShift + arrow keysShift + arrow keysShift + arrow keys
+
diff --git a/files/es/tools/monitor_de_red/index.html b/files/es/tools/monitor_de_red/index.html deleted file mode 100644 index f50f1ee0fc..0000000000 --- a/files/es/tools/monitor_de_red/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: Monitor de Red -slug: Tools/Monitor_de_Red -tags: - - Debugging - - Firefox - - Guía - - Herramientas - - Herramientas de Desarrollador - - Redes -translation_of: Tools/Network_Monitor ---- -

El monitor de red muestra todas las solicitudes de red que Firefox realiza (por ejemplo, cuando carga una página, o debido a XMLHttpRequests), cuanto tiempo toma cada petición, y los detalles de cada petición. Para abrir el monitor seleccione "Red" del menu "Desarrollador Web"  (el cual es un Submenú del Menú "Herramientas" en Mac), o abra Herramientas de Desarrollador Web y seleccione la solapa "Red".

- -

El monitor de red aparecerá al final de la ventana de navegación. Recargue la página para ver las solicitudes:

- -

- -

Lista de Solicitudes de Red

- -

Por defecto, el Monitor de Red muestra una lista de todas las solicitudes de red hechas durante la carga de una página. Cada solicitud es mostrada en su propia linea:
-

- -

Por defecto, el Monitor de Red se limpia cada vez que ud. navega a una nueva página o recarga la página actual. Desde Firefox 31 en adelante se puede cambiar este comportamiento selecccionando "Habilitar Registros Persistentes" en las Opciones de Herramientas.

- -

Area de Solicitudes de Red

- -

Cada fila muestra:

- -
    -
  • √: El código HTTP retornado. Este es mostrado por un ícono a colores: Verde para correcto (Códigos 2XX ), naranja para redirección (3XX), o rojo para errores (4XX and 5XX). Desde Firefox 30 en adelante, el código exacto es mostrado inmediatamente después del ícono.
    • -
  • Método: El método de Solicitud HTTP
    • -
  • Archivo: Nombre base del archivo solicitado.
    • -
  • Dominio: Dominio del path solicitado.
    • -
  • Tipo: Content-type de la respuesta
    • -
  • Tamaño: Tamaño de la respuesta
    • -
- -

La barra de herramientas en la parte superior etiqueta estas columnas, y hacer click en las etiquetas ordena todas las solicitudes por esa columna.

- -

Desde Firefox 30 en adelante, si el archivo es una imagen, la fila incluye una miniatura de la imagen, y pasar por arriba del nombre del archivo muestra un preview en un tooltip:

- -

- -

Linea de Tiempo

- -

La lista de solicitudes también muestra una linea de tiempo para las diferentes partes de cada solicitud. Cada linea de tiempo es dada en posición horizontal en su fila relativa a las otras solicitudes de red, de manera que ud. pueda ver el tiempo total que tomó cargar la página. Para más detalles sobre los códigos de color usados aqui, vea la sección en la página Tiempos.

- -

Filtrando por tipo de Contenido

- -

Al final de la ventana una fila de botones le permite a ud. filtrar las solicitudes por el tipo de contenido de la respuesta:

- -

En el extremo derecho de esta fila hay un botón llamado "Limpiar": como ud. podrá adivinar, esto le permite limpiar la lista de solicitudes de red.

- - - -

Haciendo click en una fila de la lista muestra un menú contextual con las siguientes opciones:

- -
    -
  • Abrir en nueva pestaña
    • -
  • Copiar URL
    • -
  • Copiar como cURL (solo desde Firefox 31 en adelante)
    • -
  • Copiar imagen como Data URI (solo para imágenes)
    • -
  • Editar y Reenviar
    • -
  • Comenzar Análisis de Performance para la página
    • -
- -

Editar y Reenviar

- -

Esta opción abre un editor que le permite editar el método de Solicitud, URL, parámetros, y cabeceras, y reenviar la solicitud.

- -

Copiar como cURL

- -
-

Esta característica es nueva en Firefox 31.

-
- -

Esta opción copia la solicitud de red al portapapeles como un comando cURL, de manera que ud. pueda ejectutarlo desde una línea de comandos. El comando puede incluir las siguientes opciones:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-X [METODO]Si el método no es GET o POST
--dataPara parámetros de solicitud URL encodeados
--data-binaryPara parámetros de solicitud multiparte
--http/VERSIONSi la versión de HTTP no es 1.1
-ISi el método no es HEAD
-H -

Uno para cada encabezado de solicitud.

- -

Deesde Firefox 34, si el encabezado "Accept-Encoding" está presente, el comando cURL incluirá --compressed en vez de  -H "Accept-Encoding: gzip, deflate".  Esto significa que la respuesta será automáticamente descomprimida.

-
- -

Detalles de Solicitud de red

- -

Hacer click en una fila muestra en un nuevo panel en la parte derecha del monitor de red, que provee más información detallada sobre la solicitud.

- -

Las pestañas de la parte superior de este panel le permiten cambiar entre 5 diferentes páginas:

- -
    -
  • Encabezados
    • -
  • Cookies
    • -
  • Parámetros
    • -
  • Respuestas
    • -
  • Tiempos
    • -
- -

Desde Firefox 30 en adelante, hay una sexta página que aparece solamente si el tipo de contenido es HTML, la página de Vista Preliminar.

- -

Hacer click en el ícono de la izquierda de las pestañas cierra el panel y vuelve a la vista de lista.

- -

Encabezados

- -

Esta pestaña lista información básica sobre la solicitud incluyendo URL y código de estado, asi como la solicitud HTTP y encabezados de respuesta que fueron enviados:

- -

Ud. puede filtrar las encabezados que se muestran:

- -

Cookies

- -

Esta pestaña lista detalles completos de cualquier cookie que fue enviada con la solicitud o respuesta:

- -

Al igual que con los encabezados, ud. puede filtrar las cookies que se muestran.

- -

Parametros

- -

Esta pestaña muestra los parámetros GET y datos POST de una solicitud:

- -

Respuesta

- -

El contenido completo de la respuesta. Si la respuesta es HTML, JS o CSS, será mostrada como texto:

- -

Si la respuesta es JSON, será mostrada como un objeto inspeccionable:

- -

Si la respuesta es una imagen, la pestaña muestra una vista preliminar:

- -

Tiempos

- -

La pestaña de tiempo muestra una lista más detallada y comentada de la barra de línea de tiempo para esa solicitud, mostrando como el tiempo de espera total es dividido en varias etapas:

- -

- -

Vista Preliminar

- -
-

Esta caracteristica es nueva en  Firefox 30.

-
- -

Desde Firefox 30 en adelante, si el tipo de archivo es HTML una sexta pestaña aparece llamada "Vista Preliminar". Esta hace un render de aquel HTML:

- -

- -

Análisis de Rendimiento

- -
-

La herramienta de análisis de rendimiento es nueva en Firefox 29.

-
- -

Desde Firefox 29 en adelante, el Monitor de Red trae una herramienta de análisis de rendimiento (performance), para ayudarlo a ver cuánto le toma al navegador descargar las diferentes partes de su sitio.
-
- Para correr la herramienta de análisis de performance haga click en el icono de cronómetro en la barra de herramientas en la parte inferior del Monitor de Red:

- -

(Alternativamente, si ud. acaba de abrir el Monitor de Red, por ende no está todavia poblado con la lista de Solicitudes, ud. tendrá el icono de Cronómetro en la ventana principal.)

- -

El Monitor de Red luego carga el sitio dos veces: una vez con un cache de navegador vacio, y una vez con el chaché óptimo. Esto simula la primera vez que un usuario visita su sitio, y visitas siguientes. Muestra los resultados para cada corrida de lado a lado o verticalmente si la ventana de Navegación es angosta:

- -

El resultado de cada recarga es resumido en una tabla y un gráfico sectorial o de torta. La tabla agrupa recursos por tipo, y muestra el tamaño total de cada recurso y el tiempo total que tomó en cargarlos. El gráfico de torta acompañante muestra el tamaño relativo de cada tipo de recurso.

- -

Para volver a la lista de Solicitudes de Red del Monitor de Red haga click en el botón "Volver" en la izquierda.

- -

Hacer click en una porción de la torta lo lleva al Monitor de Red para esa recarga, con un filtro automáticamente aplicado para ver solo este tipo de recurso.

diff --git a/files/es/tools/network_monitor/index.html b/files/es/tools/network_monitor/index.html new file mode 100644 index 0000000000..f50f1ee0fc --- /dev/null +++ b/files/es/tools/network_monitor/index.html @@ -0,0 +1,189 @@ +--- +title: Monitor de Red +slug: Tools/Monitor_de_Red +tags: + - Debugging + - Firefox + - Guía + - Herramientas + - Herramientas de Desarrollador + - Redes +translation_of: Tools/Network_Monitor +--- +

El monitor de red muestra todas las solicitudes de red que Firefox realiza (por ejemplo, cuando carga una página, o debido a XMLHttpRequests), cuanto tiempo toma cada petición, y los detalles de cada petición. Para abrir el monitor seleccione "Red" del menu "Desarrollador Web"  (el cual es un Submenú del Menú "Herramientas" en Mac), o abra Herramientas de Desarrollador Web y seleccione la solapa "Red".

+ +

El monitor de red aparecerá al final de la ventana de navegación. Recargue la página para ver las solicitudes:

+ +

+ +

Lista de Solicitudes de Red

+ +

Por defecto, el Monitor de Red muestra una lista de todas las solicitudes de red hechas durante la carga de una página. Cada solicitud es mostrada en su propia linea:
+

+ +

Por defecto, el Monitor de Red se limpia cada vez que ud. navega a una nueva página o recarga la página actual. Desde Firefox 31 en adelante se puede cambiar este comportamiento selecccionando "Habilitar Registros Persistentes" en las Opciones de Herramientas.

+ +

Area de Solicitudes de Red

+ +

Cada fila muestra:

+ +
    +
  • √: El código HTTP retornado. Este es mostrado por un ícono a colores: Verde para correcto (Códigos 2XX ), naranja para redirección (3XX), o rojo para errores (4XX and 5XX). Desde Firefox 30 en adelante, el código exacto es mostrado inmediatamente después del ícono.
    • +
  • Método: El método de Solicitud HTTP
    • +
  • Archivo: Nombre base del archivo solicitado.
    • +
  • Dominio: Dominio del path solicitado.
    • +
  • Tipo: Content-type de la respuesta
    • +
  • Tamaño: Tamaño de la respuesta
    • +
+ +

La barra de herramientas en la parte superior etiqueta estas columnas, y hacer click en las etiquetas ordena todas las solicitudes por esa columna.

+ +

Desde Firefox 30 en adelante, si el archivo es una imagen, la fila incluye una miniatura de la imagen, y pasar por arriba del nombre del archivo muestra un preview en un tooltip:

+ +

+ +

Linea de Tiempo

+ +

La lista de solicitudes también muestra una linea de tiempo para las diferentes partes de cada solicitud. Cada linea de tiempo es dada en posición horizontal en su fila relativa a las otras solicitudes de red, de manera que ud. pueda ver el tiempo total que tomó cargar la página. Para más detalles sobre los códigos de color usados aqui, vea la sección en la página Tiempos.

+ +

Filtrando por tipo de Contenido

+ +

Al final de la ventana una fila de botones le permite a ud. filtrar las solicitudes por el tipo de contenido de la respuesta:

+ +

En el extremo derecho de esta fila hay un botón llamado "Limpiar": como ud. podrá adivinar, esto le permite limpiar la lista de solicitudes de red.

+ + + +

Haciendo click en una fila de la lista muestra un menú contextual con las siguientes opciones:

+ +
    +
  • Abrir en nueva pestaña
    • +
  • Copiar URL
    • +
  • Copiar como cURL (solo desde Firefox 31 en adelante)
    • +
  • Copiar imagen como Data URI (solo para imágenes)
    • +
  • Editar y Reenviar
    • +
  • Comenzar Análisis de Performance para la página
    • +
+ +

Editar y Reenviar

+ +

Esta opción abre un editor que le permite editar el método de Solicitud, URL, parámetros, y cabeceras, y reenviar la solicitud.

+ +

Copiar como cURL

+ +
+

Esta característica es nueva en Firefox 31.

+
+ +

Esta opción copia la solicitud de red al portapapeles como un comando cURL, de manera que ud. pueda ejectutarlo desde una línea de comandos. El comando puede incluir las siguientes opciones:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-X [METODO]Si el método no es GET o POST
--dataPara parámetros de solicitud URL encodeados
--data-binaryPara parámetros de solicitud multiparte
--http/VERSIONSi la versión de HTTP no es 1.1
-ISi el método no es HEAD
-H +

Uno para cada encabezado de solicitud.

+ +

Deesde Firefox 34, si el encabezado "Accept-Encoding" está presente, el comando cURL incluirá --compressed en vez de  -H "Accept-Encoding: gzip, deflate".  Esto significa que la respuesta será automáticamente descomprimida.

+
+ +

Detalles de Solicitud de red

+ +

Hacer click en una fila muestra en un nuevo panel en la parte derecha del monitor de red, que provee más información detallada sobre la solicitud.

+ +

Las pestañas de la parte superior de este panel le permiten cambiar entre 5 diferentes páginas:

+ +
    +
  • Encabezados
    • +
  • Cookies
    • +
  • Parámetros
    • +
  • Respuestas
    • +
  • Tiempos
    • +
+ +

Desde Firefox 30 en adelante, hay una sexta página que aparece solamente si el tipo de contenido es HTML, la página de Vista Preliminar.

+ +

Hacer click en el ícono de la izquierda de las pestañas cierra el panel y vuelve a la vista de lista.

+ +

Encabezados

+ +

Esta pestaña lista información básica sobre la solicitud incluyendo URL y código de estado, asi como la solicitud HTTP y encabezados de respuesta que fueron enviados:

+ +

Ud. puede filtrar las encabezados que se muestran:

+ +

Cookies

+ +

Esta pestaña lista detalles completos de cualquier cookie que fue enviada con la solicitud o respuesta:

+ +

Al igual que con los encabezados, ud. puede filtrar las cookies que se muestran.

+ +

Parametros

+ +

Esta pestaña muestra los parámetros GET y datos POST de una solicitud:

+ +

Respuesta

+ +

El contenido completo de la respuesta. Si la respuesta es HTML, JS o CSS, será mostrada como texto:

+ +

Si la respuesta es JSON, será mostrada como un objeto inspeccionable:

+ +

Si la respuesta es una imagen, la pestaña muestra una vista preliminar:

+ +

Tiempos

+ +

La pestaña de tiempo muestra una lista más detallada y comentada de la barra de línea de tiempo para esa solicitud, mostrando como el tiempo de espera total es dividido en varias etapas:

+ +

+ +

Vista Preliminar

+ +
+

Esta caracteristica es nueva en  Firefox 30.

+
+ +

Desde Firefox 30 en adelante, si el tipo de archivo es HTML una sexta pestaña aparece llamada "Vista Preliminar". Esta hace un render de aquel HTML:

+ +

+ +

Análisis de Rendimiento

+ +
+

La herramienta de análisis de rendimiento es nueva en Firefox 29.

+
+ +

Desde Firefox 29 en adelante, el Monitor de Red trae una herramienta de análisis de rendimiento (performance), para ayudarlo a ver cuánto le toma al navegador descargar las diferentes partes de su sitio.
+
+ Para correr la herramienta de análisis de performance haga click en el icono de cronómetro en la barra de herramientas en la parte inferior del Monitor de Red:

+ +

(Alternativamente, si ud. acaba de abrir el Monitor de Red, por ende no está todavia poblado con la lista de Solicitudes, ud. tendrá el icono de Cronómetro en la ventana principal.)

+ +

El Monitor de Red luego carga el sitio dos veces: una vez con un cache de navegador vacio, y una vez con el chaché óptimo. Esto simula la primera vez que un usuario visita su sitio, y visitas siguientes. Muestra los resultados para cada corrida de lado a lado o verticalmente si la ventana de Navegación es angosta:

+ +

El resultado de cada recarga es resumido en una tabla y un gráfico sectorial o de torta. La tabla agrupa recursos por tipo, y muestra el tamaño total de cada recurso y el tiempo total que tomó en cargarlos. El gráfico de torta acompañante muestra el tamaño relativo de cada tipo de recurso.

+ +

Para volver a la lista de Solicitudes de Red del Monitor de Red haga click en el botón "Volver" en la izquierda.

+ +

Hacer click en una porción de la torta lo lleva al Monitor de Red para esa recarga, con un filtro automáticamente aplicado para ver solo este tipo de recurso.

diff --git a/files/es/tools/page_inspector/3-pane_mode/index.html b/files/es/tools/page_inspector/3-pane_mode/index.html new file mode 100644 index 0000000000..7165d90a4d --- /dev/null +++ b/files/es/tools/page_inspector/3-pane_mode/index.html @@ -0,0 +1,69 @@ +--- +title: El 3er panel del modo inspector +slug: Tools/Page_Inspector/3er-panel_modo +tags: + - 3 paneles + - CSS + - Guía + - Herramientas + - Inspectord +translation_of: Tools/Page_Inspector/3-pane_mode +--- +
{{ToolsSidebar}}
+ +

Este articulo explica como usar el 3er panel del modo inspector.

+ +

Feature summary

+ +

Desde Firefox 62 en adelante, el Inspector de página tieen un nuevo modo disponible— modo 3er-Panel. cuando este es activado, te permitira ver en simultaneo lo siguiente:

+ + + +

The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

+ +
+

Nota: En tamaños de pantalla mas reducidos, las pestañas apareceran bajo el panel de Reglas CSS.

+
+ +

Tener las reglas de CCS en su propio panel es muy util ya que no solo te permite revisar el HTML y editar el CSS que esta aplicado a este, si no que tambien puedes ver en tiempo real como afectan tus caracteristicas CSS afectan a los estilos computados. solo necesitas tener la pestaña abierta para ver el efecto.

+ +

A brief walkthrough

+ +

El inspector de 3 paneles esta desactivado por defecto. este se activa con el  toggle que se encuentra el parte superior izquierda de la pestaña.

+ +

a view of the tabs panel, showing the 2 to 3 pane toggle icon

+ +

presionando el toggle podras cambiar de la vista de  2 a 3 paneles.

+ +

The firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right

+ +

The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

+ +

Con el modo de 3 paneles activado, podras ver los cambios en vivo realizados a las reglas de CSS en tu página. Por ejemplo, puedes editar las propiedades de una Rejilla CSS y ver inmediatamente los cambios en el Inspector de rejilla.

+ +

{{EmbedYouTube("ELS2OOUvxIw")}}

+ +

Habilitando el  inspector de 3 paneles en versiones anteriores a Firefox 62

+ +

en anteriores versiones de Firefox (desde Firefox 59/60), puedes activar el modo de 3 paneles en su version Beta para esto vas a about:config y pasando las siguientes  true:

+ +

devtools.inspector.split-rule-enabled — esto cambia el modo de 3 paneles de on a off.

+ +

devtools.inspector.split-sidebar-toggle — esto añade el boton a la UI.

+ +

en Firefox 61, estas preferencias se renombran como:

+ +
    +
  • devtools.inspector.three-pane-enabled
    • +
  • devtools.inspector.three-pane-toggle
    • +
+ +

debes pasar estas dos a true en el Beta para probar las caracteristicas enFirefox 61.

+ +
+

Nota: El inspector de 3 paneles esta disponible en la edicion Nightly/Developer desde Firefox 62.

+
diff --git a/files/es/tools/page_inspector/3er-panel_modo/index.html b/files/es/tools/page_inspector/3er-panel_modo/index.html deleted file mode 100644 index 7165d90a4d..0000000000 --- a/files/es/tools/page_inspector/3er-panel_modo/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: El 3er panel del modo inspector -slug: Tools/Page_Inspector/3er-panel_modo -tags: - - 3 paneles - - CSS - - Guía - - Herramientas - - Inspectord -translation_of: Tools/Page_Inspector/3-pane_mode ---- -
{{ToolsSidebar}}
- -

Este articulo explica como usar el 3er panel del modo inspector.

- -

Feature summary

- -

Desde Firefox 62 en adelante, el Inspector de página tieen un nuevo modo disponible— modo 3er-Panel. cuando este es activado, te permitira ver en simultaneo lo siguiente:

- - - -

The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

- -
-

Nota: En tamaños de pantalla mas reducidos, las pestañas apareceran bajo el panel de Reglas CSS.

-
- -

Tener las reglas de CCS en su propio panel es muy util ya que no solo te permite revisar el HTML y editar el CSS que esta aplicado a este, si no que tambien puedes ver en tiempo real como afectan tus caracteristicas CSS afectan a los estilos computados. solo necesitas tener la pestaña abierta para ver el efecto.

- -

A brief walkthrough

- -

El inspector de 3 paneles esta desactivado por defecto. este se activa con el  toggle que se encuentra el parte superior izquierda de la pestaña.

- -

a view of the tabs panel, showing the 2 to 3 pane toggle icon

- -

presionando el toggle podras cambiar de la vista de  2 a 3 paneles.

- -

The firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right

- -

The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

- -

Con el modo de 3 paneles activado, podras ver los cambios en vivo realizados a las reglas de CSS en tu página. Por ejemplo, puedes editar las propiedades de una Rejilla CSS y ver inmediatamente los cambios en el Inspector de rejilla.

- -

{{EmbedYouTube("ELS2OOUvxIw")}}

- -

Habilitando el  inspector de 3 paneles en versiones anteriores a Firefox 62

- -

en anteriores versiones de Firefox (desde Firefox 59/60), puedes activar el modo de 3 paneles en su version Beta para esto vas a about:config y pasando las siguientes  true:

- -

devtools.inspector.split-rule-enabled — esto cambia el modo de 3 paneles de on a off.

- -

devtools.inspector.split-sidebar-toggle — esto añade el boton a la UI.

- -

en Firefox 61, estas preferencias se renombran como:

- -
    -
  • devtools.inspector.three-pane-enabled
    • -
  • devtools.inspector.three-pane-toggle
    • -
- -

debes pasar estas dos a true en el Beta para probar las caracteristicas enFirefox 61.

- -
-

Nota: El inspector de 3 paneles esta disponible en la edicion Nightly/Developer desde Firefox 62.

-
diff --git a/files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html b/files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html deleted file mode 100644 index e45754096e..0000000000 --- a/files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Abrir el Inspector -slug: Tools/Page_Inspector/How_to/Abrir_el_Inspector -tags: - - Guía - - Herramientas - - Inspector - - Tools -translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector ---- -

Hay dos maneras básicas para abrir el Inspector:

- -
    -
  • Si no tenemos seleccionado ningun elemento: desde la barra de menú "Herramientas -> Desarrollador Web -> Inspector" ; o utilizando un atajo de teclado equivalente
    • -
  • -

    Si tenemos seleccionado un elemento: haz click derecho en un elemento de la página web y selecciona "Inspeccionar elemento"

    -
    • -
- -

El Inspector aparecerá en la parte inferior de la ventana del navegador:

- -

The all-new Inspector in Firefox 57 DevTools.Para empezar a aprender sobre el Inspector ve al Tour por la UI.

diff --git a/files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html b/files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html deleted file mode 100644 index 992a5b8326..0000000000 --- a/files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Examinar y editar el modelo de cajas -slug: Tools/Page_Inspector/How_to/Examinar_y_editar_el_modelo_de_cajasmodel -tags: - - Guía - - Herramientas - - Tools -translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model ---- -

Visualización del modelo de caja

- -

Con el botón Seleccionar elemento pulsado, si se pasa el ratón por encima de un elemento en la página, el modelo de caja para ese elemento se muestra superpuesto en la página:

- -

{{EmbedYouTube("vDRzN-svJHQ")}}

- -

También se muestra superpuesto en la página si en el panel HTML ponemos el cursor sobre la marca de un elemento :

- -

{{EmbedYouTube("xA4IxTttNLk")}}

- -

Si se trata de un elemento en línea que está dividido en varias filas, se destaca cada una de las líneas individuales que componen el elemento:

- -

- -

Vista Modelo de Caja

- -

Cuando se selecciona un elemento, podemos obtener una vista detallada del modelo de caja en dos de las vistas del panel CCS: Calculado y Disposición:

- -
    -
  • en la vista Calculado aparece en primer término, seguido de la sección con el listado de reglas que se aplican al elemento;
    • -
  • en la vista Disposición está en segundo término, detrás de la sección 'Rejilla' y seguido de la sección Propiedades del modelo de caja (box-sizing, display, float, line-height, position y z-index) indicando sus valores
    • -
- -

- -

Si ponemos el cursor sobre un valor en la vista modelo de caja al lado aparece un tooltip que nos indica de qué regla procede el valor:

- -

- -

Si desplazamos el cursor sobre una parte del modelo de caja en la vista Modelo de caja, se resalta la parte correspondiente de la página y aparece otro tooltip con información indicando el elemento, su clase y/o ID y sus dimensiones (ancho x alto):

- -

{{EmbedYouTube("H3ZxRbbyfwI")}}

- -

Edición del modelo de caja

- -

También podemos editar los valores en la Vista Modelo de Caja: hacer clic sobre un valor permite editarlo y ver los resultados inmediatamente en la página:

- -

{{EmbedYouTube("gHjDjM8GJ9I")}}

diff --git a/files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html b/files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html deleted file mode 100644 index 2a361a1d90..0000000000 --- a/files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html +++ /dev/null @@ -1,364 +0,0 @@ ---- -title: Examinar y editar HTML -slug: Tools/Page_Inspector/How_to/Examinar_y_editar_HTML -tags: - - Guía - - Herramientas - - Inspector - - Tools -translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_HTML ---- -

Puedes examinar y editar el HTML de la página en el panel HTML.

- - - -

HTML breadcrumbs (migas de pan)

- -

En la parte inferior del panel HTML hay una barra de navegación de migas de pan. Muestra la jerarquía completa en el documento para la rama que contiene el elemento seleccionado:

- -

- -

Pasar el ratón sobre cada miguita de pan destaca ese elemento de la página.

- -

La barra breadcrumbs tiene sus propios atajos de teclado.

- -
-

Ten en cuenta que antes de Firefox 48, esta barra de herramientas estaba en la parte superior del panel HTML.

-
- -

Buscar

- -

A partir de Firefox 45, el campo de búsqueda del Inspector de páginas busca coincidencias en todo el marcado del documento actual y en cualquier frame.

- -

Para empezar a buscar un marcador, haz clic en el cuadro de búsqueda para expandirlo o presiona Ctrl + F , o Cmd + F en Mac.

- -

A medida que escribes, en la ventana emergente se autocompletarán sugerencias con los atributos de clase o de ID que coincidan con el término de búsqueda actual:

- -

- -

Presiona Up y Down para desplazarte por las sugerencias, Tab para elegir la sugerencia actual y entonces Enter para seleccionar el primer nodo con ese atributo.

- -

Si sólo introduces el término de búsqueda sin seleccionar un valor entre las sugerencias, el término de búsqueda se aplicará al texto completo del documento, incluyendo todos los nombres y valores de atributos y el contenido de texto de los nodos.

- -

{{EmbedYouTube("AKBhnfp1Opo")}}

- -

Para desplazarte por las sugerencias presiona Enter . A partir de Firefox 48 es posible el desplazamiento hacia atrás con Shift + Enter .

- -

Árbol HTML

- -

El resto del panel muestra el HTML de la página como un árbol (esta interfaz de usuario también se llama Vista de marcado). Justo a la izquierda de cada nodo hay una flecha: haz clic en la flecha para desplegar el nodo. Si mantienes pulsada la tecla Alt mientras haces clic en la flecha, se desplegará el nodo y todos los nodos situados debajo de él.

- -

The new Firefox 57 inspector HTML tree.

- -

Mover el ratón sobre un nodo del árbol destaca el elemento en la página.

- -

Los nodos no-visibles se representan descoloridos o desaturados. La invisibilidad puede deberse a razones diversas, entre ellas el uso de display: none, o que el elemento no tenga ninguna dimensión.

- -

A partir de Firefox 53 se muestra una elipsis entre la etiqueta de apertura y cierre de un elemento si el nodo está colapsado y contiene más contenido. Antes de Firefox 53, era imposible determinar si un nodo colapsado tenía hijos. Ahora los hijos se indican en el árbol con este icono:

- -
-

Nota: Hay atajos de teclado útiles para usar en el árbol HTML — ve a la lista de atajos de teclado del panel HTML.

-
- -

::before y ::after

- -

Desde Firefox 35 en adelante, puede inspeccionar los pseudoelementos añadidos usando {{cssxref("::before")}} y {{cssxref("::after")}}:

- -

{{EmbedYouTube("ecfqTGvzsNc")}}

- -

Whitespace-only text nodes

- -
Nuevo en Firefox 52
- -

Los desarrolladores web no escriben todo su código en una sola línea de texto. Introducen espacios en blanco con Space , Return , y Tab entre sus elementos HTML para que el marcado sea más legible.

- -

Normalmente este espacio en blanco parece no tener efecto ni salida visual, pero de hecho, cuando un navegador analiza HTML genera automáticamente nodos de texto anónimos para elementos que no están contenidos en un nodo. Esto incluye los espacios en blanco que hay después de cualquier tipo de texto.

- -

Si estos nodos de texto generados automáticamente están inline level, los navegadores les asignarán una anchura y altura distinta de cero. Así puede que encuentres espacios extraños entre los elementos, incluso si no has puesto ningún margen o relleno en ellos.

- -

Desde Firefox 52, el Inspector muestra los nodos whitespace para que puedas saber de dónde vienen los huecos en su marcado.

- -

Los nodos Whitespace se representan con un punto: y cuando pasas el ratón sobre ellos muestra un tooltip explicativo

- -

- -

Para ver esto en la práctica ve a la demo en https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html.

- -

Elemento: menú contextual emergente

- -

Puedes realizar ciertas tareas comunes en un elemento utilizando su menú contextual emergente. Para activar este menú, haz clic derecho en el elemento. El menú contiene los siguientes elementos - haz clic en los enlaces para encontrar la descripción de cada comando en {{anch("Context menu reference")}}:

- - - -

* Estas opciones sólo aparecen en determinados contextos, por ejemplo, la opción "Abrir archivo en el editor de estilo" sólo aparece cuando haces clic con el botón contextual sobre el enlace a un archivo CSS.

- -

Context menu reference

- -
-

Nota: A partir de Firefox 49 el menú contextual se reorganizó significativamente para hacerlo más compacto. No te preocupes si la estructura de tu menú es ligeramente diferente de la que se muestra arriba: estarán disponibles las mismas opciones

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Edit as /en-US/docs/HTML -

Editar el HTML del elemento

-
(Copy) Inner HTMLCopiar el HTML interno para el elemento.
(Copy) Outer HTML -

Copiar el HTML externo para el elemento.

- -

Presione Ctrl + C (o Cmd + C en Mac) realiza la misma acción.

-
(Copy) Unique Selector/CSS SelectorCopiar el selector CSS que selecciona únicamente el elemento
(Copy) CSS PathCopiar el selector CSS que representa la ruta completa al elemento.
(Copy) Image Data-URLCopiar imagen como data:// URL, l elemento selecionado es una imagen
(Copy) Attribute -

Copiar el atributo del elemento.

-
Show DOM P/en-US/docs/ropertiesAbrir la split console e introducir el comando "inspect($0)" para inspect el elemento actualmente selecionado.
Use in Console -
-

Nuevo en Firefox 43(Copy) Image Data-URL (Copy) Attribute

-
- Asigna el nodo actualmente seleccionado a una variable llamada temp0 (o temp1 si temp0 esta ya asignado, y así sucesivamente), entonces abre la split console,que le permite interactuar con ese nodo utilizando la línea de comandos de la consola.
Expand All -
-

Nuevo en Firefox 44

-
- En la vista de árbol, expande el elemento actual y todos los elementos debajo de él. Esto equivale a mantener presionada la tecla Alt y hacer clic en el triángulo antes del elemento.
Collapse -
-

Nuevo en Firefox 44

-
- En la vista de árbol, contrae el elemento actual. Esto equivale a hacer clic en la flecha de acceso situada junto al elemento que se ha expandido.
(Paste) Inner HTMLPegar el contenido del portapapeles en el nodo como su HTML interno.
(Paste) Outer HTMLPegar el contenido del portapapeles en el nodo como su HTML externo.
(Paste) BeforePegar el contenido del portapapeles en el documento inmediatamente antes de este nodo
(Paste) AfterPegar el contenido del portapapeles en el documento inmediatamente después de este nodo
(Paste) As First ChildPegar el contenido del portapapeles en el documento como primerdescendiente de este nodo
(Paste) As Last ChildPegar el contenido del portapapeles en el documento como último descendiente de este nodo
Scroll Into View -

Desplazamiento en la página web para que el nodo seleccionado sea visible.

- -

Desde Firefox 44, pulsando el atajo de teclado S también sirve para desplazarse en la página hasta que el nodo seleccionado está a la vista.

-
Screenshot NodeHace una captura del nodo seleccionado y la guarda en tu directorio de Descargas. Ver Taking screenshots.
Create New NodeCrea un nuevo elemento <div> como último descendiente del elemento actualmente seleccionado. Ver Inserting new nodes.
Duplicate Node -
-

Nuevo en Firefox 44

-
- -

Crear una copia de este elemento e insertarla inmediatamente antes de este elemento.

-
Delete NodeElimina el elemento del DOM.
Attribute/Add Attribute -
-

Nuevo en Firefox 44

-
- Añade un atributo al elemento.
Attribute/Edit Attribute -
-

Nuevo en Firefox 44

-
- (solo cuando se invoca en un atributo) Editar el atributo.
Attribute/Remove Attribute -
-

Nuevo en Firefox 44

-
- (solo cuando se invoca en un atributo) Suprimir el atributo.
Open Link in New Tab(solo cuando se invoca sobre un enlace como atributo href) Abrir el item enlazado en una nueva pestaña.
Open File in Debugger(solo cuando se invoca sobre un enlace a un archivo de código JS) Abrir el archivo enlazado en el depurador.
Open File in Style-Editor(solo cuando se invoca sobre un enlace a un archivo de código CSS) Abrir el archivo CSS enlazado en un editor de estilos
Copy Link Address(solo cuando se invoca en una URL) Copiar la URL.
:hoverSelecciona la pseudoclase CSS :hover
:activeSelecciona la pseudoclase CSS :active
:focusSelecciona la pseudoclase CSS :focus CSS
- -

Editar HTML

- -

 

- -

Puedes editar el HTML - etiquetas, atributos y contenido - directamente en el panel HTML: haz doble clic en el texto que quieras editar, modifícalo y pulsa Enter para ver los cambios reflejados inmediatamente.

- -

Para editar el HTML externo de un elemento (HTML externo), activa el menú emergente del elemento y selecciona "Editar como HTML". Verás un cuadro de texto en el panel HTML:

- -

Edit HTML directly in the Inspector panel in Firefox 57

- -

Aquí puedes añadir cualquier HTML: cambiar la etiqueta del elemento, cambiar elementos existentes o añadir otros nuevos. Una vez que hagas clic fuera del cuadro, los cambios se aplican a la página.

- -

A partir de Firefox 52, si estás editando HTML, el menú contextual que verás es el habitual al trabajar con texto editable:

- -

- -

Copiar y pegar

- -

Puedes usar el menú emergente desplegable para copiar nodos en el árbol HTML y pegarlos en la ubicación deseada.

- -

Arrastrar y Soltar (Drag and drop)

- -

Puedes editar HTML moviendo nodos en el árbol HTML. Simplemente haz clic manteniendo presionado sobre cualquier elemento y arrástralo hacia arriba o hacia abajo en el árbol. Cuando sueltes el botón del ratón, el elemento se insertará en la posición correspondiente:

- -

{{EmbedYouTube("oI-a035nfWk")}}

- -

A partir de Firefox 44, puedes cancelar el arrastrar y soltar pulsando la tecla Esc .

- -

Insertar nuevos nodos

- -
Nuevo en Firefox 48
- -

A partir de Firefox 48, hay un icono "+" en la parte superior de la vista de marcado:

- -

- -

Haz clic en este icono para insertar un <div> vacío en el documento como el último hijo del elemento seleccionado actualmente. A continuación, puedes editar el contenido y el estilo del nuevo nodo tal como lo harías con cualquier otro nodo del documento.

- -

{{EmbedYouTube("NG5daffvVZM")}}

- -

Puedes acceder a la misma funcionalidad utilizando el menú desplegable "Crear nuevo nodo".

- -

Ten en cuenta que este botón está desactivado si el tipo de elemento seleccionado es tal que añadir un último hijo no produciría ningún efecto (por ejemplo, si es un elemento <html> o <iframe>). Sin embargo, está habilitado en lugares donde no es válido insertar <div>, como <style> o <link>. En estos casos, el elemento se añade como texto.

diff --git a/files/es/tools/page_inspector/how_to/examine_and_edit_html/index.html b/files/es/tools/page_inspector/how_to/examine_and_edit_html/index.html new file mode 100644 index 0000000000..2a361a1d90 --- /dev/null +++ b/files/es/tools/page_inspector/how_to/examine_and_edit_html/index.html @@ -0,0 +1,364 @@ +--- +title: Examinar y editar HTML +slug: Tools/Page_Inspector/How_to/Examinar_y_editar_HTML +tags: + - Guía + - Herramientas + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_HTML +--- +

Puedes examinar y editar el HTML de la página en el panel HTML.

+ + + +

HTML breadcrumbs (migas de pan)

+ +

En la parte inferior del panel HTML hay una barra de navegación de migas de pan. Muestra la jerarquía completa en el documento para la rama que contiene el elemento seleccionado:

+ +

+ +

Pasar el ratón sobre cada miguita de pan destaca ese elemento de la página.

+ +

La barra breadcrumbs tiene sus propios atajos de teclado.

+ +
+

Ten en cuenta que antes de Firefox 48, esta barra de herramientas estaba en la parte superior del panel HTML.

+
+ +

Buscar

+ +

A partir de Firefox 45, el campo de búsqueda del Inspector de páginas busca coincidencias en todo el marcado del documento actual y en cualquier frame.

+ +

Para empezar a buscar un marcador, haz clic en el cuadro de búsqueda para expandirlo o presiona Ctrl + F , o Cmd + F en Mac.

+ +

A medida que escribes, en la ventana emergente se autocompletarán sugerencias con los atributos de clase o de ID que coincidan con el término de búsqueda actual:

+ +

+ +

Presiona Up y Down para desplazarte por las sugerencias, Tab para elegir la sugerencia actual y entonces Enter para seleccionar el primer nodo con ese atributo.

+ +

Si sólo introduces el término de búsqueda sin seleccionar un valor entre las sugerencias, el término de búsqueda se aplicará al texto completo del documento, incluyendo todos los nombres y valores de atributos y el contenido de texto de los nodos.

+ +

{{EmbedYouTube("AKBhnfp1Opo")}}

+ +

Para desplazarte por las sugerencias presiona Enter . A partir de Firefox 48 es posible el desplazamiento hacia atrás con Shift + Enter .

+ +

Árbol HTML

+ +

El resto del panel muestra el HTML de la página como un árbol (esta interfaz de usuario también se llama Vista de marcado). Justo a la izquierda de cada nodo hay una flecha: haz clic en la flecha para desplegar el nodo. Si mantienes pulsada la tecla Alt mientras haces clic en la flecha, se desplegará el nodo y todos los nodos situados debajo de él.

+ +

The new Firefox 57 inspector HTML tree.

+ +

Mover el ratón sobre un nodo del árbol destaca el elemento en la página.

+ +

Los nodos no-visibles se representan descoloridos o desaturados. La invisibilidad puede deberse a razones diversas, entre ellas el uso de display: none, o que el elemento no tenga ninguna dimensión.

+ +

A partir de Firefox 53 se muestra una elipsis entre la etiqueta de apertura y cierre de un elemento si el nodo está colapsado y contiene más contenido. Antes de Firefox 53, era imposible determinar si un nodo colapsado tenía hijos. Ahora los hijos se indican en el árbol con este icono:

+ +
+

Nota: Hay atajos de teclado útiles para usar en el árbol HTML — ve a la lista de atajos de teclado del panel HTML.

+
+ +

::before y ::after

+ +

Desde Firefox 35 en adelante, puede inspeccionar los pseudoelementos añadidos usando {{cssxref("::before")}} y {{cssxref("::after")}}:

+ +

{{EmbedYouTube("ecfqTGvzsNc")}}

+ +

Whitespace-only text nodes

+ +
Nuevo en Firefox 52
+ +

Los desarrolladores web no escriben todo su código en una sola línea de texto. Introducen espacios en blanco con Space , Return , y Tab entre sus elementos HTML para que el marcado sea más legible.

+ +

Normalmente este espacio en blanco parece no tener efecto ni salida visual, pero de hecho, cuando un navegador analiza HTML genera automáticamente nodos de texto anónimos para elementos que no están contenidos en un nodo. Esto incluye los espacios en blanco que hay después de cualquier tipo de texto.

+ +

Si estos nodos de texto generados automáticamente están inline level, los navegadores les asignarán una anchura y altura distinta de cero. Así puede que encuentres espacios extraños entre los elementos, incluso si no has puesto ningún margen o relleno en ellos.

+ +

Desde Firefox 52, el Inspector muestra los nodos whitespace para que puedas saber de dónde vienen los huecos en su marcado.

+ +

Los nodos Whitespace se representan con un punto: y cuando pasas el ratón sobre ellos muestra un tooltip explicativo

+ +

+ +

Para ver esto en la práctica ve a la demo en https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html.

+ +

Elemento: menú contextual emergente

+ +

Puedes realizar ciertas tareas comunes en un elemento utilizando su menú contextual emergente. Para activar este menú, haz clic derecho en el elemento. El menú contiene los siguientes elementos - haz clic en los enlaces para encontrar la descripción de cada comando en {{anch("Context menu reference")}}:

+ + + +

* Estas opciones sólo aparecen en determinados contextos, por ejemplo, la opción "Abrir archivo en el editor de estilo" sólo aparece cuando haces clic con el botón contextual sobre el enlace a un archivo CSS.

+ +

Context menu reference

+ +
+

Nota: A partir de Firefox 49 el menú contextual se reorganizó significativamente para hacerlo más compacto. No te preocupes si la estructura de tu menú es ligeramente diferente de la que se muestra arriba: estarán disponibles las mismas opciones

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Edit as /en-US/docs/HTML +

Editar el HTML del elemento

+
(Copy) Inner HTMLCopiar el HTML interno para el elemento.
(Copy) Outer HTML +

Copiar el HTML externo para el elemento.

+ +

Presione Ctrl + C (o Cmd + C en Mac) realiza la misma acción.

+
(Copy) Unique Selector/CSS SelectorCopiar el selector CSS que selecciona únicamente el elemento
(Copy) CSS PathCopiar el selector CSS que representa la ruta completa al elemento.
(Copy) Image Data-URLCopiar imagen como data:// URL, l elemento selecionado es una imagen
(Copy) Attribute +

Copiar el atributo del elemento.

+
Show DOM P/en-US/docs/ropertiesAbrir la split console e introducir el comando "inspect($0)" para inspect el elemento actualmente selecionado.
Use in Console +
+

Nuevo en Firefox 43(Copy) Image Data-URL (Copy) Attribute

+
+ Asigna el nodo actualmente seleccionado a una variable llamada temp0 (o temp1 si temp0 esta ya asignado, y así sucesivamente), entonces abre la split console,que le permite interactuar con ese nodo utilizando la línea de comandos de la consola.
Expand All +
+

Nuevo en Firefox 44

+
+ En la vista de árbol, expande el elemento actual y todos los elementos debajo de él. Esto equivale a mantener presionada la tecla Alt y hacer clic en el triángulo antes del elemento.
Collapse +
+

Nuevo en Firefox 44

+
+ En la vista de árbol, contrae el elemento actual. Esto equivale a hacer clic en la flecha de acceso situada junto al elemento que se ha expandido.
(Paste) Inner HTMLPegar el contenido del portapapeles en el nodo como su HTML interno.
(Paste) Outer HTMLPegar el contenido del portapapeles en el nodo como su HTML externo.
(Paste) BeforePegar el contenido del portapapeles en el documento inmediatamente antes de este nodo
(Paste) AfterPegar el contenido del portapapeles en el documento inmediatamente después de este nodo
(Paste) As First ChildPegar el contenido del portapapeles en el documento como primerdescendiente de este nodo
(Paste) As Last ChildPegar el contenido del portapapeles en el documento como último descendiente de este nodo
Scroll Into View +

Desplazamiento en la página web para que el nodo seleccionado sea visible.

+ +

Desde Firefox 44, pulsando el atajo de teclado S también sirve para desplazarse en la página hasta que el nodo seleccionado está a la vista.

+
Screenshot NodeHace una captura del nodo seleccionado y la guarda en tu directorio de Descargas. Ver Taking screenshots.
Create New NodeCrea un nuevo elemento <div> como último descendiente del elemento actualmente seleccionado. Ver Inserting new nodes.
Duplicate Node +
+

Nuevo en Firefox 44

+
+ +

Crear una copia de este elemento e insertarla inmediatamente antes de este elemento.

+
Delete NodeElimina el elemento del DOM.
Attribute/Add Attribute +
+

Nuevo en Firefox 44

+
+ Añade un atributo al elemento.
Attribute/Edit Attribute +
+

Nuevo en Firefox 44

+
+ (solo cuando se invoca en un atributo) Editar el atributo.
Attribute/Remove Attribute +
+

Nuevo en Firefox 44

+
+ (solo cuando se invoca en un atributo) Suprimir el atributo.
Open Link in New Tab(solo cuando se invoca sobre un enlace como atributo href) Abrir el item enlazado en una nueva pestaña.
Open File in Debugger(solo cuando se invoca sobre un enlace a un archivo de código JS) Abrir el archivo enlazado en el depurador.
Open File in Style-Editor(solo cuando se invoca sobre un enlace a un archivo de código CSS) Abrir el archivo CSS enlazado en un editor de estilos
Copy Link Address(solo cuando se invoca en una URL) Copiar la URL.
:hoverSelecciona la pseudoclase CSS :hover
:activeSelecciona la pseudoclase CSS :active
:focusSelecciona la pseudoclase CSS :focus CSS
+ +

Editar HTML

+ +

 

+ +

Puedes editar el HTML - etiquetas, atributos y contenido - directamente en el panel HTML: haz doble clic en el texto que quieras editar, modifícalo y pulsa Enter para ver los cambios reflejados inmediatamente.

+ +

Para editar el HTML externo de un elemento (HTML externo), activa el menú emergente del elemento y selecciona "Editar como HTML". Verás un cuadro de texto en el panel HTML:

+ +

Edit HTML directly in the Inspector panel in Firefox 57

+ +

Aquí puedes añadir cualquier HTML: cambiar la etiqueta del elemento, cambiar elementos existentes o añadir otros nuevos. Una vez que hagas clic fuera del cuadro, los cambios se aplican a la página.

+ +

A partir de Firefox 52, si estás editando HTML, el menú contextual que verás es el habitual al trabajar con texto editable:

+ +

+ +

Copiar y pegar

+ +

Puedes usar el menú emergente desplegable para copiar nodos en el árbol HTML y pegarlos en la ubicación deseada.

+ +

Arrastrar y Soltar (Drag and drop)

+ +

Puedes editar HTML moviendo nodos en el árbol HTML. Simplemente haz clic manteniendo presionado sobre cualquier elemento y arrástralo hacia arriba o hacia abajo en el árbol. Cuando sueltes el botón del ratón, el elemento se insertará en la posición correspondiente:

+ +

{{EmbedYouTube("oI-a035nfWk")}}

+ +

A partir de Firefox 44, puedes cancelar el arrastrar y soltar pulsando la tecla Esc .

+ +

Insertar nuevos nodos

+ +
Nuevo en Firefox 48
+ +

A partir de Firefox 48, hay un icono "+" en la parte superior de la vista de marcado:

+ +

+ +

Haz clic en este icono para insertar un <div> vacío en el documento como el último hijo del elemento seleccionado actualmente. A continuación, puedes editar el contenido y el estilo del nuevo nodo tal como lo harías con cualquier otro nodo del documento.

+ +

{{EmbedYouTube("NG5daffvVZM")}}

+ +

Puedes acceder a la misma funcionalidad utilizando el menú desplegable "Crear nuevo nodo".

+ +

Ten en cuenta que este botón está desactivado si el tipo de elemento seleccionado es tal que añadir un último hijo no produciría ningún efecto (por ejemplo, si es un elemento <html> o <iframe>). Sin embargo, está habilitado en lugares donde no es válido insertar <div>, como <style> o <link>. En estos casos, el elemento se añade como texto.

diff --git a/files/es/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html b/files/es/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html new file mode 100644 index 0000000000..992a5b8326 --- /dev/null +++ b/files/es/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html @@ -0,0 +1,47 @@ +--- +title: Examinar y editar el modelo de cajas +slug: Tools/Page_Inspector/How_to/Examinar_y_editar_el_modelo_de_cajasmodel +tags: + - Guía + - Herramientas + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model +--- +

Visualización del modelo de caja

+ +

Con el botón Seleccionar elemento pulsado, si se pasa el ratón por encima de un elemento en la página, el modelo de caja para ese elemento se muestra superpuesto en la página:

+ +

{{EmbedYouTube("vDRzN-svJHQ")}}

+ +

También se muestra superpuesto en la página si en el panel HTML ponemos el cursor sobre la marca de un elemento :

+ +

{{EmbedYouTube("xA4IxTttNLk")}}

+ +

Si se trata de un elemento en línea que está dividido en varias filas, se destaca cada una de las líneas individuales que componen el elemento:

+ +

+ +

Vista Modelo de Caja

+ +

Cuando se selecciona un elemento, podemos obtener una vista detallada del modelo de caja en dos de las vistas del panel CCS: Calculado y Disposición:

+ +
    +
  • en la vista Calculado aparece en primer término, seguido de la sección con el listado de reglas que se aplican al elemento;
    • +
  • en la vista Disposición está en segundo término, detrás de la sección 'Rejilla' y seguido de la sección Propiedades del modelo de caja (box-sizing, display, float, line-height, position y z-index) indicando sus valores
    • +
+ +

+ +

Si ponemos el cursor sobre un valor en la vista modelo de caja al lado aparece un tooltip que nos indica de qué regla procede el valor:

+ +

+ +

Si desplazamos el cursor sobre una parte del modelo de caja en la vista Modelo de caja, se resalta la parte correspondiente de la página y aparece otro tooltip con información indicando el elemento, su clase y/o ID y sus dimensiones (ancho x alto):

+ +

{{EmbedYouTube("H3ZxRbbyfwI")}}

+ +

Edición del modelo de caja

+ +

También podemos editar los valores en la Vista Modelo de Caja: hacer clic sobre un valor permite editarlo y ver los resultados inmediatamente en la página:

+ +

{{EmbedYouTube("gHjDjM8GJ9I")}}

diff --git a/files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html b/files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html deleted file mode 100644 index f4ab42dabe..0000000000 --- a/files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Inspeccionar y seleccionar colores -slug: Tools/Page_Inspector/How_to/Inspeccionar_y_seleccionar_colores -tags: - - Guía - - Herramientas - - Inspector -translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors ---- -

En la Vista reglas del panel CSS, si una regla contiene un valor de color, verás una muestra del color junto al valor:

- -

- -

Si haces clic en la muestra de color, verás una ventana emergente que te permite cambiar el color:

- -

- -

El selector de color incluye un icono de cuentagotas: al hacer clic en este icono, podrás utilizar el cuentagotas para seleccionar un nuevo color para el elemento:

- -

{{EmbedYouTube("0Zx1TN21QOo")}}

- -

A partir de Firefox 40, al hacer clic en la muestra de color mientras mantienes pulsada la tecla Shift, cambiará el formato de color: hexadecimal, HSL y RGB

- -

{{EmbedYouTube("gYL8-gxc1MA")}}

- -

Firefox 53 y versiones más recientes son compatibles con los valores de CSS color level 4.

diff --git a/files/es/tools/page_inspector/how_to/inspect_and_select_colors/index.html b/files/es/tools/page_inspector/how_to/inspect_and_select_colors/index.html new file mode 100644 index 0000000000..f4ab42dabe --- /dev/null +++ b/files/es/tools/page_inspector/how_to/inspect_and_select_colors/index.html @@ -0,0 +1,26 @@ +--- +title: Inspeccionar y seleccionar colores +slug: Tools/Page_Inspector/How_to/Inspeccionar_y_seleccionar_colores +tags: + - Guía + - Herramientas + - Inspector +translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors +--- +

En la Vista reglas del panel CSS, si una regla contiene un valor de color, verás una muestra del color junto al valor:

+ +

+ +

Si haces clic en la muestra de color, verás una ventana emergente que te permite cambiar el color:

+ +

+ +

El selector de color incluye un icono de cuentagotas: al hacer clic en este icono, podrás utilizar el cuentagotas para seleccionar un nuevo color para el elemento:

+ +

{{EmbedYouTube("0Zx1TN21QOo")}}

+ +

A partir de Firefox 40, al hacer clic en la muestra de color mientras mantienes pulsada la tecla Shift, cambiará el formato de color: hexadecimal, HSL y RGB

+ +

{{EmbedYouTube("gYL8-gxc1MA")}}

+ +

Firefox 53 y versiones más recientes son compatibles con los valores de CSS color level 4.

diff --git a/files/es/tools/page_inspector/how_to/open_the_inspector/index.html b/files/es/tools/page_inspector/how_to/open_the_inspector/index.html new file mode 100644 index 0000000000..e45754096e --- /dev/null +++ b/files/es/tools/page_inspector/how_to/open_the_inspector/index.html @@ -0,0 +1,22 @@ +--- +title: Abrir el Inspector +slug: Tools/Page_Inspector/How_to/Abrir_el_Inspector +tags: + - Guía + - Herramientas + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector +--- +

Hay dos maneras básicas para abrir el Inspector:

+ +
    +
  • Si no tenemos seleccionado ningun elemento: desde la barra de menú "Herramientas -> Desarrollador Web -> Inspector" ; o utilizando un atajo de teclado equivalente
    • +
  • +

    Si tenemos seleccionado un elemento: haz click derecho en un elemento de la página web y selecciona "Inspeccionar elemento"

    +
    • +
+ +

El Inspector aparecerá en la parte inferior de la ventana del navegador:

+ +

The all-new Inspector in Firefox 57 DevTools.Para empezar a aprender sobre el Inspector ve al Tour por la UI.

diff --git a/files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html b/files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html deleted file mode 100644 index bd926e4bed..0000000000 --- a/files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Reposicionando elementos en la página -slug: Tools/Page_Inspector/How_to/Reposicionando_elementos_en_la_pagina -translation_of: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page ---- -
Novedades en Firefox 48
- -

A partir de Firefox 48 puede mover elementos con position: absolute arrastrándolos alrededor de la página.

- -

{{EmbedYouTube("Or5HM1FFhvE")}}

- -

Si un elemento tiene su propiedad  {{cssxref("position")}} seteada en absolute, relative o fixed y una o más de las propiedades {{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} or {{cssxref("right")}} , la Vista del modelo de caja muestra un botón:

- -

- -

Si hace click en ese botón, aparecen dos identificadores junto al elemento:

- -

Example for changing the position of an element within the content

- -

Puede utilizar estos identificadores para arrastrar el elemento alrededor de la página.

- -

Si el elemento está posicionado de forma absoluta, se muestran líneas discontinuas que representan el origen de desplazamiento. Para los elementos relativamente posicionados, las líneas discontinuas indican la posición original del nodo. Los desplazamientos están indicados por una línea y una descripción de herramientas para cada lado.

diff --git a/files/es/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html b/files/es/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html new file mode 100644 index 0000000000..bd926e4bed --- /dev/null +++ b/files/es/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html @@ -0,0 +1,22 @@ +--- +title: Reposicionando elementos en la página +slug: Tools/Page_Inspector/How_to/Reposicionando_elementos_en_la_pagina +translation_of: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page +--- +
Novedades en Firefox 48
+ +

A partir de Firefox 48 puede mover elementos con position: absolute arrastrándolos alrededor de la página.

+ +

{{EmbedYouTube("Or5HM1FFhvE")}}

+ +

Si un elemento tiene su propiedad  {{cssxref("position")}} seteada en absolute, relative o fixed y una o más de las propiedades {{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} or {{cssxref("right")}} , la Vista del modelo de caja muestra un botón:

+ +

+ +

Si hace click en ese botón, aparecen dos identificadores junto al elemento:

+ +

Example for changing the position of an element within the content

+ +

Puede utilizar estos identificadores para arrastrar el elemento alrededor de la página.

+ +

Si el elemento está posicionado de forma absoluta, se muestran líneas discontinuas que representan el origen de desplazamiento. Para los elementos relativamente posicionados, las líneas discontinuas indican la posición original del nodo. Los desplazamientos están indicados por una línea y una descripción de herramientas para cada lado.

diff --git a/files/es/tools/performance/index.html b/files/es/tools/performance/index.html new file mode 100644 index 0000000000..9dbf8e643d --- /dev/null +++ b/files/es/tools/performance/index.html @@ -0,0 +1,91 @@ +--- +title: Rendimiento +slug: Tools/Desempeño +translation_of: Tools/Performance +--- +

La herramienta de Rendimiento te da una visión general de la capacidad de respuesta del sitio que visitas así como de su JavaScript y el modelo de diseño. Con esta herramienta puedes generar un perfil o registro de un sitio web en un período de tiempo. En dicho perfil la herramienta te ofrece una vista general de todas las acciones que tu navegador empleó para generar el sitio web así como una gráfica con el tiempo de respuesta de dicha pagina.

+ +

Para examinar con más detalle los aspectos del perfil tienes tres herramientas auxiliares:

+ +
    +
  • Waterfall  muestra qué operaciones ejecutó el navegador, tales como el modelo de ejecución empleado, JavaScript, repaints y liberación de memoria.
    • +
  • Call Tree muestra en qué funciones de JavaScript se requirió más tiempo del navegador.
    • +
  • Flame Chart muestra la pila de llamadas de JavaScript a lo largo de la grabación.
    • +
+ +

{{EmbedYouTube("WBmttwfA_k8")}}

+ +
+

Preámbulo

+ +
+
+
+
UI Tour
+
+

Guía rápida de la interfaz para comenzar a manejar la herramienta de rendimiento.

+
+
+
+ +
+
+
How to
+
Tareas básicas: abrir la herramienta, crear, guardar, cargar y configurar las grabaciones.
+
+
+
+ +
+

Componentes de la herramienta de Rendimiento

+ +
+
+
+
Frame rate
+
Comprender la capacidad de respuesta general de tu sitio.
+
Call Tree
+
Encontrar cuellos de botella en el JavaScript de tu sitio.
+
+
+ +
+
+
Waterfall
+
Comprender el trabajo que el navegador realiza cuando un usuario interactúa con el sitio web.
+
Flame Chart
+
Ver qué funciones de JavaScript se ejecutan , y cuando , en el transcurso de la grabación.
+
 
+
+
+
+ +
+

Escenarios

+ +
+
+
+
Animating CSS properties
+
Utiliza Waterfall para entender cómo el navegador actualiza una página, y cómo las diferentes propiedades CSS pueden afectar al rendimiento.
+
 
+
+
+ +
+
+
Intensive JavaScript
+
Utiliza la velocidad de los fotogramas y la herramienta Waterfall para resaltar los problemas de rendimiento provocados por los JavaScript de larga duración y cómo los workers pueden ayudar en esta situación.
+
+
+
+ +

 

+ +
+
+
 
+
+
+ +

 

diff --git a/files/es/tools/performance/ui_tour/index.html b/files/es/tools/performance/ui_tour/index.html new file mode 100644 index 0000000000..8898abae03 --- /dev/null +++ b/files/es/tools/performance/ui_tour/index.html @@ -0,0 +1,134 @@ +--- +title: Paseo por la interfaz de usuario +slug: Tools/Desempeño/UI_Tour +translation_of: Tools/Performance/UI_Tour +--- +

La interfaz de usuario (UI) de las herramientas de rendimiento, consta de cuatro partes principales:

+ +

+ + + +

Barra de herramientas (Toolbar)

+ +

De izquierde a derecha la barra de herramientas contiene los siguientes botones:

+ +
    +
  • +

    Borrar la lista de grabaciones.

    +
    • +
+ +
+

Nota: Si haces esto, perderas cualquier grabación que no haya sido guardada.

+
+ +
    +
  • Inicia o detiene una grabación.
    • +
  • Importar una grabación previamente guardada.
    • +
  • Filtra los marcadores que muestra la vista en cascada.
    • +
  • Cambia la vista activa en la ventana de detalles.
    • +
  • Muestra un popup con la configuración.
    • +
+ +

+ +

Lista de grabaciones (Recordings pane)

+ +

La lista de grabaciones muestra todas las grabaciones activas, incluyendo las realizadas durante la sesion y las que hayas importado.

+ +

+ +

En el hay una grabación seleccionada en todo momento y esta se mostrara en el resto de la herramienta. Para seleccionar una grabación diferente, presiónala en la lista del panel. Para guardarla como un archivo JSON haz click en "Guardar".

+ +

Vista previa de la grabacion (Recording overview)

+ +

Muestra un resumen de toda la grabación, donde el eje-x representa el tiempo.

+ +

+ +

Contiene dos elementos: una vista previa de la vista en cascada y gráfico con el promedio de fotogramas.

+ +

Resumen de la vista en cascada

+ +

Nos presenta una versión comprimida de la vista en cascada:

+ +

+ +

Las operaciones grabadas están codificadas con el mismo esquema de colores empleado para la vista en cascada que se muestra en la ventana de detalles.

+ +

Gráfico con el promedio de fotogramas

+ +

El promedio de fotogramas nos da una idea de como el navegador responde durante la grabación:

+ +

+ +

Puedes consultar la entrada sobre el promedio de fotogramas.

+ +

Relacionando eventos

+ +

Como estos eventos están sincronizados, puedes crear una correlación entre ellos.

+ +

Por ejemplo en la captura de pantalla inferior, una larga operación de pintado (representada con una barra verde en el resumen de la vista en cascada) corresponde con una caída en el promedio de fotogramas:

+ +

+ +

Ampliando

+ +

Puedes usar la vista previa para seleccionar un trozo de la grabación para examinarlo con mas detalle. Al hacer esto, la ventana de detalles se actualizara con el contenido marcado. En la captura inferior hemos seleccionado la caída en el promedio de fotogramas y así podemos ver la operación de pintado con mas detalle:

+ +

+ +

Ventana de detalles (Details pane)

+ +

La ventana de detalles muestra cualquier herramienta seleccionada. Para cambiar entre ellas, usa los botones de la barra de herramientas.

+ +

Vista en cascada

+ +

La vista en cascada da una vision de que esta haciendo el navegador durante la grabación: ejecutar Javascript, actualizar CSS,  actualizar la composición de la pagina y el rendimiento del redibujado. El eje-x representa el tiempo y las operaciones grabadas van apareciendo en forma de cascada, reflejando así la naturaleza que tiene el navegador el ejecutar las tareas en serie.

+ +

+ +

Para aprender mas sobre la vista en cascada puedes visitar su entrada.

+ +

Árbol de llamadas

+ +

El árbol de llamadas es una muestra del Javascript que se ejecuta en la pagina. Son una serie de muestras del estado del motor de Javascript y registra el stack de código ejecutado en el momento que se toma la muestra. Estadísticamente, el numero de muestras tomadas al ejecutar una función especifica, corresponde con la cantidad de tiempo que el navegador ha empleado para ejecutarlo, así puedes identificar los cuellos de botella en tu código.

+ +


+ Para aprender mas sobre el árbol de llamadas puedes visitar su entrada.

+ +

Gráfico de llama

+ +

Si el árbol de llamadas te muestra estadísticamente que funciones de tu sitio gastan mas tiempo de ejecución durante la grabación, el gráfico de llama nos indica cualquier stack llamado durante la misma:

+ +

+ +

Para aprender mas sobre el gráfico de llama puedes visitar su entrada.

+ +

Asignaciones

+ +
+

La vista de Asignaciones es nueva en Firefox 46.

+
+ +

La vista de Asignaciones es como el árbol de llamadas, pero para las asignaciones: Nos muestra que funciones en tu pagina tienen mas memoria asignada durante el transacurso de la grabación.

+ +

+ +

La vista de Asignaciones solo aparece si haz seleccionado "Grabar Asignaciones" en las opciones de las herramientas de rendimiento antes de hacer una nueva grabación.

+ +

{{EmbedYouTube("Le9tTo7bqts")}}

+ +

Para aprender mas sobre las Asignaciones puedes visitar su entrada.

diff --git a/files/es/tools/profiler/index.html b/files/es/tools/profiler/index.html deleted file mode 100644 index 23fa9e1e34..0000000000 --- a/files/es/tools/profiler/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: JavaScript Profiler -slug: Tools/Profiler -translation_of: Tools/Performance -translation_of_original: 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:

-
    -
  • El lado izquierdo muestra todos los perfiles que ha capturado y le permite cargar cada uno. Justo por encima de esto hay dos botones: el botón del cronómetro (stopwatch) le permite grabar un nuevo perfil, mientras que el botón Importar (Import) ... permite importar los datos guardados anteriormente. Cuando se selecciona el perfil, puede guardar sus datos como un archivo JSON haciendo clic en el botón Guardar (Save). 
    • -
  • El lado derecho muestra el perfil actualmente cargado.
    • -
-

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/tools/remote_debugging/debugging_over_a_network/index.html b/files/es/tools/remote_debugging/debugging_over_a_network/index.html deleted file mode 100644 index a827b255cb..0000000000 --- a/files/es/tools/remote_debugging/debugging_over_a_network/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Debugging over a network -slug: Tools/Remote_Debugging/Debugging_over_a_network -translation_of: 'Tools/about:debugging#Connecting_over_the_Network' -translation_of_original: Tools/Remote_Debugging/Debugging_over_a_network ---- -
-

{{draft}}

-
- -

Coming soon...

diff --git a/files/es/tools/remote_debugging/firefox_for_android/index.html b/files/es/tools/remote_debugging/firefox_for_android/index.html new file mode 100644 index 0000000000..497d026a34 --- /dev/null +++ b/files/es/tools/remote_debugging/firefox_for_android/index.html @@ -0,0 +1,132 @@ +--- +title: Depuración remota en Firefox para Android +slug: Tools/Remote_Debugging/Firefox_para_Android +translation_of: Tools/Remote_Debugging/Firefox_for_Android +--- +

Esta guía explica como usar la depuración remota para inspeccionar o depurar código funcionando en Firefox para Android conectado por USB.

+ +

+ +

Esta guía se divide en dos partes: la primera parte, "Requisitos previos" cubre la materia que solo hay que hacer una vez, mientras que la segunda parte, "Conectando", cubre la materia que hay que hacer cada vez que conectas el dispositivo. 

+ +

Requisitos previos

+ +

Primero, lo que necesitará:

+ +
    +
  • un ordenador de sobremesa o un portátil con Firefox funcionando
    • +
  • un dispositivo Android con capacidad de arrancar Firefox para Android con Firefox para Android funcionando en él
    • +
  • un cable USB que conecte ambos dispositivos
    • +
+ +

Configuración ADB

+ +

A continuación, necesitarás que el ordenador de sobremesa y el dispositivo Android hablen entre si utilizando la herramienta de la línea de comandos del adb.

+ +

En el dispositivo Android

+ + + +

En el ordenador de sobremesa

+ +
    +
  • Instala la versión correcta del SDK de Android para tu dispositivo.
    • +
  • Utilizando el SDK de Android, instala las herramientas de la plataforma Android.
    • +
  • Las herramientas de la plataforma Android instalan adb en un subdirectorio llamado "platform-tools" dentro del directorio donde hayas instalado el Android SDK. Asegúrate que el directorio "platform-tools" aparece en la variable "path" de tu sistema operativo.
    • +
+ +

Para comprobar que funciona, abre en tu ordenador de sobremesa la aplicación que te deja escribir comandos en línea del sistema operativo y teclea:

+ +
adb devices
+ +

Deberías ver una respuesta parecida a esta:

+ +
List of devices attached
+51800F220F01564 device
+
+ +

(La cadena de texto hexadecimal será diferente.)

+ +

Si obtienes ésto, entonces adb ha encontrado tu dispositivo y has configurado correctamente el ADB.

+ +

Habilitar la depuración remota

+ +

A continuación, tienes que activar la depuración remota en el ordenador de sobremesa y en el dispositivo Android.

+ +

Firefox versión 24 y anteriores para Android

+ +

Para habilitar la depuración remota en el dispositivo, tienes que ajustar la preferencia devtools.debugger.remote-enabled al valor true.

+ +

Introduce la dirección about:config en Firefox para Android, escribe "devtools" dentro del cuadro de búsqueda y pulsa la tecla Search. Verás todas las preferencias de DevTools. Busca la preferencia devtools.debugger.remote-enabled preference, y pulsa "Toggle".

+ +

+ +

Firefox versión 25 y posteriores para Android

+ +

En Firefox v.25 y posteriores para Android, hay un elemento de menú para habilitar la depuración remota. Abre el menú, selecciona "Settings", luego "Developer tools" (en algunos dispositivos Android puede que necesites seleccionar "More" para ver la opción "Settings"). Marca la casilla "Remote debugging":

+ +

+ +

El navegador mostrará una notificación para recordarte que debes configurar el redireccionamiento de puertos, lo cuál haremos más adelante.

+ +

En el ordenador de sobremesa

+ +

En el ordenador, la depuración remota se habilita  a través de un ajuste en la caja de herramientas. Abre la caja de herramientas, haz clic en el botón "Settings"  de la barra de herramientas, y marca "Enable remote debugging" en la pestaña de Settings:

+ +

+ +
Si estás utilizando una versión de Firefox anterior a la 27, tendrás que reiniciar el navegador para que se aplique la nueva configuración.
+ +

Verás una nueva opción en el menú "Web Developer" con la etiqueta  "Connect...":

+ +

+ +

Conectarse

+ +

Ahora puedes conectar la herramienta de depuración remota con el dispositivo. En primer lugar, conecta el dispositivo al ordenador con un cable USB, si no lo has hecho todavía.

+ +

En el ordenador de sobremesa

+ +

Ve al símbolo del sistema y teclea:

+ +
adb forward tcp:6000 tcp:6000
+ +

(Si has cambiado el valor que el dispositivo Android usa para el puerto de depuración, deberás modificarlo a este valor.)

+ +

Para Firefox OS, teclea:

+ +
adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket
+ +

Tendrás que volver a ejecutar este comando cada vez que conectes físicamente el ordenador de sobremesa y el dispositivo con el cable USB.

+ +

A continuación, ve al menú Web Developer del Firefox, y selecciona  "Connect...". Verás una página parecida a ésta:

+ +

Si no has cambiado los números de puerto, elige 6000 y pulsa el botón 'Connect'.

+ +

En el dispositivo Android

+ +
+
A continuación verás un cuadro de diálogo en el dispositivo Android que pide que  confirmes la conexión:
+
+ +

Haz click en "OK". El ordenador de sobremesa espera unos segundos para darte tiempo para que confirmes en el cuadro de diálogo: si se agota el tiempo de espera, solo tienes que volver a hacer click en "Connect" en el cuadro de diálogo del ordenador de sobremesa.

+ +

En el ordenador de sobremesa

+ +

A continuación, el ordenador te muestra un cuadro de diálogo parecido a este:

+ +

Te pregunta si quieres depurar el contenido de la web que se ejecuta en alguna pestaña del navegador, o depurar el código del propio navegador.

+ +
    +
  • Verás una entrada por cada pestaña abierta debajo de "Available remote tabs",  y haciendo click sobre una conectarás la herramienta de depuración al contenido web de la pestaña. Si quieres depurar el contenido de tu web, elige la pestaña pertinente.
    • +
  • Verás una entrada debajo de "Available remote processes": este es el propio proceso del navegador. Elige esta opción si quieres depurar el código del navegador.
    • +
+ +

Elegimos conectarnos al sitio web mozilla.org.  Se abrirá una ventana con la Caja de herramientas, vinculada a la pestaña del Firefox para Android que muestra el sito de mozilla.org:

+ +

+ +

La caja de herramientas y las herramientas que contiene, funcionan de la misma manera que lo hacen cuando están conectadas a un contenido local.

diff --git a/files/es/tools/remote_debugging/firefox_para_android/index.html b/files/es/tools/remote_debugging/firefox_para_android/index.html deleted file mode 100644 index 497d026a34..0000000000 --- a/files/es/tools/remote_debugging/firefox_para_android/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Depuración remota en Firefox para Android -slug: Tools/Remote_Debugging/Firefox_para_Android -translation_of: Tools/Remote_Debugging/Firefox_for_Android ---- -

Esta guía explica como usar la depuración remota para inspeccionar o depurar código funcionando en Firefox para Android conectado por USB.

- -

- -

Esta guía se divide en dos partes: la primera parte, "Requisitos previos" cubre la materia que solo hay que hacer una vez, mientras que la segunda parte, "Conectando", cubre la materia que hay que hacer cada vez que conectas el dispositivo. 

- -

Requisitos previos

- -

Primero, lo que necesitará:

- -
    -
  • un ordenador de sobremesa o un portátil con Firefox funcionando
    • -
  • un dispositivo Android con capacidad de arrancar Firefox para Android con Firefox para Android funcionando en él
    • -
  • un cable USB que conecte ambos dispositivos
    • -
- -

Configuración ADB

- -

A continuación, necesitarás que el ordenador de sobremesa y el dispositivo Android hablen entre si utilizando la herramienta de la línea de comandos del adb.

- -

En el dispositivo Android

- - - -

En el ordenador de sobremesa

- -
    -
  • Instala la versión correcta del SDK de Android para tu dispositivo.
    • -
  • Utilizando el SDK de Android, instala las herramientas de la plataforma Android.
    • -
  • Las herramientas de la plataforma Android instalan adb en un subdirectorio llamado "platform-tools" dentro del directorio donde hayas instalado el Android SDK. Asegúrate que el directorio "platform-tools" aparece en la variable "path" de tu sistema operativo.
    • -
- -

Para comprobar que funciona, abre en tu ordenador de sobremesa la aplicación que te deja escribir comandos en línea del sistema operativo y teclea:

- -
adb devices
- -

Deberías ver una respuesta parecida a esta:

- -
List of devices attached
-51800F220F01564 device
-
- -

(La cadena de texto hexadecimal será diferente.)

- -

Si obtienes ésto, entonces adb ha encontrado tu dispositivo y has configurado correctamente el ADB.

- -

Habilitar la depuración remota

- -

A continuación, tienes que activar la depuración remota en el ordenador de sobremesa y en el dispositivo Android.

- -

Firefox versión 24 y anteriores para Android

- -

Para habilitar la depuración remota en el dispositivo, tienes que ajustar la preferencia devtools.debugger.remote-enabled al valor true.

- -

Introduce la dirección about:config en Firefox para Android, escribe "devtools" dentro del cuadro de búsqueda y pulsa la tecla Search. Verás todas las preferencias de DevTools. Busca la preferencia devtools.debugger.remote-enabled preference, y pulsa "Toggle".

- -

- -

Firefox versión 25 y posteriores para Android

- -

En Firefox v.25 y posteriores para Android, hay un elemento de menú para habilitar la depuración remota. Abre el menú, selecciona "Settings", luego "Developer tools" (en algunos dispositivos Android puede que necesites seleccionar "More" para ver la opción "Settings"). Marca la casilla "Remote debugging":

- -

- -

El navegador mostrará una notificación para recordarte que debes configurar el redireccionamiento de puertos, lo cuál haremos más adelante.

- -

En el ordenador de sobremesa

- -

En el ordenador, la depuración remota se habilita  a través de un ajuste en la caja de herramientas. Abre la caja de herramientas, haz clic en el botón "Settings"  de la barra de herramientas, y marca "Enable remote debugging" en la pestaña de Settings:

- -

- -
Si estás utilizando una versión de Firefox anterior a la 27, tendrás que reiniciar el navegador para que se aplique la nueva configuración.
- -

Verás una nueva opción en el menú "Web Developer" con la etiqueta  "Connect...":

- -

- -

Conectarse

- -

Ahora puedes conectar la herramienta de depuración remota con el dispositivo. En primer lugar, conecta el dispositivo al ordenador con un cable USB, si no lo has hecho todavía.

- -

En el ordenador de sobremesa

- -

Ve al símbolo del sistema y teclea:

- -
adb forward tcp:6000 tcp:6000
- -

(Si has cambiado el valor que el dispositivo Android usa para el puerto de depuración, deberás modificarlo a este valor.)

- -

Para Firefox OS, teclea:

- -
adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket
- -

Tendrás que volver a ejecutar este comando cada vez que conectes físicamente el ordenador de sobremesa y el dispositivo con el cable USB.

- -

A continuación, ve al menú Web Developer del Firefox, y selecciona  "Connect...". Verás una página parecida a ésta:

- -

Si no has cambiado los números de puerto, elige 6000 y pulsa el botón 'Connect'.

- -

En el dispositivo Android

- -
-
A continuación verás un cuadro de diálogo en el dispositivo Android que pide que  confirmes la conexión:
-
- -

Haz click en "OK". El ordenador de sobremesa espera unos segundos para darte tiempo para que confirmes en el cuadro de diálogo: si se agota el tiempo de espera, solo tienes que volver a hacer click en "Connect" en el cuadro de diálogo del ordenador de sobremesa.

- -

En el ordenador de sobremesa

- -

A continuación, el ordenador te muestra un cuadro de diálogo parecido a este:

- -

Te pregunta si quieres depurar el contenido de la web que se ejecuta en alguna pestaña del navegador, o depurar el código del propio navegador.

- -
    -
  • Verás una entrada por cada pestaña abierta debajo de "Available remote tabs",  y haciendo click sobre una conectarás la herramienta de depuración al contenido web de la pestaña. Si quieres depurar el contenido de tu web, elige la pestaña pertinente.
    • -
  • Verás una entrada debajo de "Available remote processes": este es el propio proceso del navegador. Elige esta opción si quieres depurar el código del navegador.
    • -
- -

Elegimos conectarnos al sitio web mozilla.org.  Se abrirá una ventana con la Caja de herramientas, vinculada a la pestaña del Firefox para Android que muestra el sito de mozilla.org:

- -

- -

La caja de herramientas y las herramientas que contiene, funcionan de la misma manera que lo hacen cuando están conectadas a un contenido local.

diff --git a/files/es/tools/responsive_design_mode/index.html b/files/es/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..2571bc5aa4 --- /dev/null +++ b/files/es/tools/responsive_design_mode/index.html @@ -0,0 +1,18 @@ +--- +title: Responsive Design View +slug: Tools/Responsive_Design_View +translation_of: Tools/Responsive_Design_Mode +--- +

{{ fx_minversion_header("15.0") }}

+ +

La vista de Diseño Adaptable hace que sea fácil ver cómo sus diseños se verán y funcionarán en diferentes tamaños de pantallas. Diseño Adaptable se adapta a diferentes tamaños de pantalla para proporcionar una presentación adecuada para diferentes tipos de dispositivos, principalmente teléfonos móviles. La captura de pantalla siguiente es un ejemplo de la página web mozilla.org vista con un área de contenido 320 por 480.

+ +

La vista de Diseño Adaptable es conveniente porque se puede cambiar rápidamente el tamaño del área de contenido sin cambiar el tamaño de la ventana del navegador. Cambiar el tamaño de la ventana del navegador puede ser molesto porque todos los tamaños de tus pestañas cambian entonces y también hay menos espacio en la ventana de herramientas de desarrollo.

+ +

Tu puedes encontrar la vista de Diseño Adaptable en el menú Desarrollador Web.

+ +

Como alternativa, puede usar el atajo ctrl-shift-M en Windows o Linux y cmd-opt-M en Mac  para iniciar la vista de Diseño adaptable. Presionando la tecla <esc> se cerrará la vista. Mientras que estás en la vista de Diseñó Adaptable, puedes seguir con normalidad en el área de contenido reescalado.

+ +

En la parte superior de la vista de Diseño Adaptable, hay un menú desplegable de tamaños preestablecidos que son convenientes para ver rápidamente su diseño en un número de tamaños de pantallas más comunes. También hay un botón de rotación para cambiar inmediatamente la anchura y altura (similar a la rotación de un teléfono móvil o tableta ).

+ +

Usted puede utilizar el controlador de tamaño en la parte inferior derecha del área de contenido para cambiar el tamaño del área de contenido.

diff --git a/files/es/tools/responsive_design_view/index.html b/files/es/tools/responsive_design_view/index.html deleted file mode 100644 index 2571bc5aa4..0000000000 --- a/files/es/tools/responsive_design_view/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Responsive Design View -slug: Tools/Responsive_Design_View -translation_of: Tools/Responsive_Design_Mode ---- -

{{ fx_minversion_header("15.0") }}

- -

La vista de Diseño Adaptable hace que sea fácil ver cómo sus diseños se verán y funcionarán en diferentes tamaños de pantallas. Diseño Adaptable se adapta a diferentes tamaños de pantalla para proporcionar una presentación adecuada para diferentes tipos de dispositivos, principalmente teléfonos móviles. La captura de pantalla siguiente es un ejemplo de la página web mozilla.org vista con un área de contenido 320 por 480.

- -

La vista de Diseño Adaptable es conveniente porque se puede cambiar rápidamente el tamaño del área de contenido sin cambiar el tamaño de la ventana del navegador. Cambiar el tamaño de la ventana del navegador puede ser molesto porque todos los tamaños de tus pestañas cambian entonces y también hay menos espacio en la ventana de herramientas de desarrollo.

- -

Tu puedes encontrar la vista de Diseño Adaptable en el menú Desarrollador Web.

- -

Como alternativa, puede usar el atajo ctrl-shift-M en Windows o Linux y cmd-opt-M en Mac  para iniciar la vista de Diseño adaptable. Presionando la tecla <esc> se cerrará la vista. Mientras que estás en la vista de Diseñó Adaptable, puedes seguir con normalidad en el área de contenido reescalado.

- -

En la parte superior de la vista de Diseño Adaptable, hay un menú desplegable de tamaños preestablecidos que son convenientes para ver rápidamente su diseño en un número de tamaños de pantallas más comunes. También hay un botón de rotación para cambiar inmediatamente la anchura y altura (similar a la rotación de un teléfono móvil o tableta ).

- -

Usted puede utilizar el controlador de tamaño en la parte inferior derecha del área de contenido para cambiar el tamaño del área de contenido.

diff --git a/files/es/tools/style_editor/index.html b/files/es/tools/style_editor/index.html new file mode 100644 index 0000000000..cdfc54bebf --- /dev/null +++ b/files/es/tools/style_editor/index.html @@ -0,0 +1,101 @@ +--- +title: Editor de Estilo +slug: Tools/Editor_Estilo +tags: + - CSS + - Desarrollo web + - Herramientas + - Herramientas de desarrollo web + - Hojas de estilo +translation_of: Tools/Style_Editor +--- +

El editor de estilo te permite:

+ +
    +
  • ver y editar todas las hojas de estilo asociadas con una página
    • +
  • crear nuevas hojas de estilo desde bosquejos y aplicarlas a una página
    • +
  • importar hojas de estilo existentes y aplicarlas en la página
    • +
+ +

{{EmbedYouTube("7839qc55r7o")}}

+ +

Para abrir el Editor de Estilo selecciona la opción "Editor de Estilo" desde el menú "Web Developer" (este es un submenu del menú "Tools" o "Herramientas" en una Mac). El Toolbox o caja de herramientas aparecerá en la parte inferior de la ventana del navegador, con el Editor de Estilo activado:

+ +

+ +

El Editor de Estilo está divivido en  dos secciones principales: el panel de estilos en la izquierda y el editor en la derecha.

+ +
+

From Firefox 33 onwards, there's a third component to the Style Editor: the media sidebar.

+
+ +

El panel de hojas de estilo

+ +

El panel de hojas de estilo, en la izquierda, muestra todas las hojas de estilos que están siendo utilizadas por el documento actual.  You can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of the sheet's name. Puede guardar los cambios hechos en la hoja de estilos a su computador, haciendo clic en el botón Guardar en la esquina inferior derecha de cada hoja de estilos de la lista.

+ +

El panel de edición

+ +

A la derecha está el panel de edición. Aquí está disponible el código fuente de la hoja de estilo seleccionada, lista para ver y editar. Cualquier cambio que realice será aplicada inmediatamente. This makes it easy to experiment with, revise, and test changes. Una vez esté satisfecho con sus cambios, puede guardar una copia localmente, haciendo clic en el botón Guardar.

+ +

El editor contiene numeración de líneas y resaltamiento de código, haciendo más fácil la lectura de su CSS. También soporta keyboard shortcuts.

+ +

El Editor de Estilos automáticamente des-minimiza las hojas de estilo que detecta, sin afectar el original. Esto facilita mucho el trabajo en páginas que ya han sido optimizadas.

+ +

El Editor de Estilos soporta autocompletado. Empiece escribiendo y el sistema le ofrecerá una lista de sugerencias.

+ +

Puede deshabilitar el autocompletado en Style Editor settings.

+ +

La barra lateral "media"

+ +

A partir de Firefox 33 en adelante, el Editor de Estilos muestra una barra lateral a la derecha cuando se encuentra alguna regla @media (@media rules). La barra lateral muestra las reglas y provee un link a la línea donde se define dicha regla. Haga clic en un ítem para ir hacia la definición de esa regla en la hoja de estilo. El texto condicional de la regla estará en gris si el media query no aplica.

+ +

La barra lateral de medios funciona especialmente bien con Responsive Design View para crear y depurar diseños móviles :

+ +

+ +

Creación e importación de hojas de estilo

+ +

Se puede crear una nueva hoja de estilos haciendo click en el nuevo botón de la barra de herrramientas. A continuación puedes comenzar a introducir  CSS en el nuevo editor y ver como los nuevos estilos se aplican de forma inmediata ,al igual que los cambios en otras hojas.

+ +

Se puede cargar una hoja de estilos desde el disco y aplicarlo a la página haciendo click en el boton de importar.

+ +

Soporte de mapa fuente

+ +

{{EmbedYouTube("zu2eZbYtEUQ")}}

+ +

Los desarrolladores web, con frecuencia crean archivos CSS  utilizando un preprocesador como  Sass, Less, o Stylus. Estas herramientas generan archivos CSS  procedentes de un sintasix mas rico y expresivo. Si haces esto, seras capaz de editar y  ver que el  CSS  generado no es tan util, porque el código que mantienes es el sintaxis preprocesado, no el  CSS generado. Por lo que necesitarás editar el CSS generado, y después manualmente trabajar sobre como reaplicarlo a la fuente original.

+ +

Mapas Fuente habilita para regresar desde el CSS generado a la síntasix original, entonces  se puede ver, y te permite editar archivos en la síntasix original. A partir de Firefox 29 en adelante, el editor de estilos puede interpretar mapas fuente de CSS .

+ +

Esto significa que si utilizas, por ejemplo, Sass, el Editor de Estilos  mostrará,y permitirá editar,archivos Sass , en lugar del CSS que se ha generado desde ellos:

+ +

Para que esto funcione ,es necesario:

+ +
    +
  • utilizar un preprocesador CSS que interprete  Source Map Revision 3 proposal. Actualmente esto significa Sass 3.3.0  o superior , o la versión 1.5.0 de Less. Otros preprocesadores están trabajando activamente en añadir soporte, o lo están considerando.
    • +
  • actualmente el preprocesador da instrucciones para generar un mapa fuente, por ejemplo pasando el argumento --sourcemap a la herramienta de comando en linea de  Sass.
    • +
+ +

Visualización de las fuentes originales

+ +

Ahora, si compruebas "mostrar fuentes originales" en los ajustes del Editor de estilos, el vínculo junto a las reglas  CSS en la Vista de Reglas ,vincula con las fuentes originales en el Editor de Estilos.

+ +

Edición de las fuentes originales

+ +

Se pueden editar tambien las fuentes originales en el  Editor de estilos y ver el resultado aplicado a la página de inmediato. Para conseguir que esto funcione hay dos pasos adicionales.

+ +

Primero, configura el preprocesador para que muestre la fuente original y automaticamente regenere el CSS cuando cambien las fuentes. Con Sass puedes hacer esto simplemente pasando la opción --watch :

+ +
sass index.scss:index.css --sourcemap --watch
+ +

A continuación, guarda la fuente original en el editor de estilos haciendo click en el botón   "Guardar" junto al archivo, y este se guardará sobre el archivo original.

+ +

Ahora cuando hagas cambios en el archivo original en el  Editor de Estilos , el CSS se regenerará y podrás ver los cambios de forma inmediata.

+ +

Atajos de Teclado

+ +

Atajos del editor de código fuente

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}

diff --git a/files/es/tools/taking_screenshots/index.html b/files/es/tools/taking_screenshots/index.html new file mode 100644 index 0000000000..d842153d65 --- /dev/null +++ b/files/es/tools/taking_screenshots/index.html @@ -0,0 +1,42 @@ +--- +title: Tomar capturas de pantalla +slug: Tools/Tomar_capturas_de_pantalla +tags: + - Herramientas +translation_of: Tools/Taking_screenshots +--- +

Puedes usar las Herramientas de Desarrollo (Developer Tools) para tomar una captura de pantalla de toda la página, o de un único elemento de la página.

+ +

Tomar una captura de pantalla de la página

+ +

Usa el ícono de captura de pantalla: para tomar una captura completa de la página actual.

+ +

Por defecto, el ícono de captura de pantalla no está habilitado. Para habilitarlo::

+ +
    +
  • visita la página de  Ajustes (Settings)
    • +
  • encuentra la sección con el texto "Available Toolbox Buttons"
    • +
  • marca la caja con la etiqueta "Take a screenshot of the entire page".
    • +
+ +

Verás el ícono en la barra de herramientas:

+ +

{{EmbedYouTube("KB5V9uJgcS4")}}

+ +

Haz clic en el ícono para tomar una capura de la página actual. La captura se guarda en el directorio de descargas de tu navegador:

+ +

{{EmbedYouTube("HKS6MofdXVE")}}

+ +

Tomar una captura de un elemento

+ +

Para tomar una captura de un único elemento en la página, activa el menú contextual en ese elemento en el panel HTML del Inspector, y selecciona "Screenshot Node". La captura se guarda en el directorio de descargas del navegador:

+ +

{{EmbedYouTube("p2pjF_BrE1o")}}

+ +

Copiar capturas de pantalla al portapapeles

+ +

Desde Firefox 53, también puedes copiar la captura al portapapeles. Sólo marca la caja en Ajustes con la etiqueta "Screenshot to clipboard":

+ +

{{EmbedYouTube("AZedFGh6F78")}}

+ +

Ahora, cuando tomes una captura, la captura también es copiada al portapapeles.

diff --git a/files/es/tools/tomar_capturas_de_pantalla/index.html b/files/es/tools/tomar_capturas_de_pantalla/index.html deleted file mode 100644 index d842153d65..0000000000 --- a/files/es/tools/tomar_capturas_de_pantalla/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Tomar capturas de pantalla -slug: Tools/Tomar_capturas_de_pantalla -tags: - - Herramientas -translation_of: Tools/Taking_screenshots ---- -

Puedes usar las Herramientas de Desarrollo (Developer Tools) para tomar una captura de pantalla de toda la página, o de un único elemento de la página.

- -

Tomar una captura de pantalla de la página

- -

Usa el ícono de captura de pantalla: para tomar una captura completa de la página actual.

- -

Por defecto, el ícono de captura de pantalla no está habilitado. Para habilitarlo::

- -
    -
  • visita la página de  Ajustes (Settings)
    • -
  • encuentra la sección con el texto "Available Toolbox Buttons"
    • -
  • marca la caja con la etiqueta "Take a screenshot of the entire page".
    • -
- -

Verás el ícono en la barra de herramientas:

- -

{{EmbedYouTube("KB5V9uJgcS4")}}

- -

Haz clic en el ícono para tomar una capura de la página actual. La captura se guarda en el directorio de descargas de tu navegador:

- -

{{EmbedYouTube("HKS6MofdXVE")}}

- -

Tomar una captura de un elemento

- -

Para tomar una captura de un único elemento en la página, activa el menú contextual en ese elemento en el panel HTML del Inspector, y selecciona "Screenshot Node". La captura se guarda en el directorio de descargas del navegador:

- -

{{EmbedYouTube("p2pjF_BrE1o")}}

- -

Copiar capturas de pantalla al portapapeles

- -

Desde Firefox 53, también puedes copiar la captura al portapapeles. Sólo marca la caja en Ajustes con la etiqueta "Screenshot to clipboard":

- -

{{EmbedYouTube("AZedFGh6F78")}}

- -

Ahora, cuando tomes una captura, la captura también es copiada al portapapeles.

diff --git a/files/es/tools/web_audio_editor/index.html b/files/es/tools/web_audio_editor/index.html new file mode 100644 index 0000000000..2db0cdbe58 --- /dev/null +++ b/files/es/tools/web_audio_editor/index.html @@ -0,0 +1,31 @@ +--- +title: Editor de audio web +slug: Tools/Editor_Audio_Web +translation_of: Tools/Web_Audio_Editor +--- +
+

El editor de audio web es nuevo en Firefox 32.

+
+

Con la API de Audio Web, los desarrolladores crean un contexto de audio. Dentro de ese contexto construyen un número de  nodos de audio, incluyendo:

+ +

Cada nodo tiene cero o más propiedades AudioParam que configuran su operación. Por ejemplo, GainNode tiene solamente la propiedad gain, mientras que OscillatorNode tiene las propiedades frequency y detune.

+

El desarrollador conecta los nodos en un gráfico y ese gráfico completo define el comportamiento del flujo de audio.

+

El editor de audio web examina un contexto de audio construido en la página y proporciona una visualización de su gráfico. Esto da una vista de alto nivel de su operación y permite asegurar que todos los nodos están conectados de la forma esperada. Entonces se pueden examinar y editar las propiedades AudioParam para cada nodo del gráfico. Algunas propiedades no-AudioParam, como una propiedad OscillatorNode's type son mostradas y también se pueden editar.

+

Esta herramienta todavía es experimental. Si encuentra errores, nos encantaría que los informe en Bugzilla. Si tiene alguna opinión o sugerencias para nuevas funcionalidades, ffdevtools.uservoice.com o Twitter son lugares excelentes para registrarlas.

+

Abriendo el editor de audio web

+

El editor de audio web no está habilitado por defecto en Firefox 32. Para habilitarlo, abra la Configuración de herramientas de desarrollador y marque "Audio web". Ahora debería haber una pestaña extra en la Barra de herramientas llamada "Audio web". Haga clic en esa pestaña y cargue una página que construya un contexto de audio. Dos demos interesantes son:

+
    +
  • Voice-change-O-Matic, puede aplicar varios efectos a la entrada de micrófono y también muestra una visualización del resultado
    • +
  • Violent Theremin, cambia el tono y el volumen de una onda sinusoidal al mover el puntero del mouse
    • +
+

Visualizando el gráfico

+

El editor de audio web ahora mostrará el gráfico del contexto de audio cargado. Aquí está el gráfico del demo de Violent Theremin:

+

Se puede ver que usa tres nodos: un OscillatorNode como fuente, un GainNode para controlar el volumen y un AudioDestinationNode como destino.

+

Inspeccionando y modificando AudioNodes

+

Si hace clic en un nodo, se restalta y aparece un inspector del nodo en el lado derecho. Ahí se listan los valores de las propiedades del nodo AudioParam. Por ejemplo, así se ve el OscillatorNode:

+

Con el demo de Violent Theremin, el parámetro frecuencia es modificado cuando el usuario mueve el mouse hacia la izquierda o la derecha y eso se puede ver reflejado en el inspector del nodo. Sin embargo, el valor no es actualizado en tiempo real: hay que hacer clic en el nodo nuevamente para ver el valor actualizado.

+

Si se hace clic en el valor en el inspector del nodo se puede modificar: presione Intro o Tab y el nuevo valor tiene efecto inmediatamente.

diff --git a/files/es/tools/web_console/iniciando_la_consola_web/index.html b/files/es/tools/web_console/iniciando_la_consola_web/index.html deleted file mode 100644 index 59b0156a49..0000000000 --- a/files/es/tools/web_console/iniciando_la_consola_web/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Iniciando la Consola Web -slug: Tools/Web_Console/Iniciando_la_Consola_Web -translation_of: Tools/Web_Console/UI_Tour ---- -

Para abrir la Consola Web:

- -
    -
  • Puedes seleccionar "Consola Web" desde el submenu Desarrollador Web en el menu de Firefox ( o menu Herramientas si despliegas la barra menu o estas utilizando Mac OS X)
    • -
  • o presionando el CtrlShiftK (CommandOptionK en OS X) atajo de teclado.
    • -
- -

La Caja de herramientas (Toolbox) aparecera en la parte baja de la ventana del navegador, con la Consola Web activada (solamente se le llama "Consola" en la barra de herramientas DevTools (DevTools toolbar)):

- -

- -

La interfaz de la Consola Web esta dividida en tres secciones horizontales que son:

- -
    -
  • Barra de herramientas (Toolbar): A lo largo de la parte de arriba esta la barra de herramientas, contiene botones con etiquetas como "Net", "CSS", and "JS". Esta barra de herramientas se usa para filtrar cuales mensajes seran mostrados.
    • -
  • Linea de comando (Command Line): A lo largo  de la parte de abajo esta una linea de comando que se puede utilizar para ingresar expresiones en  JavaScript 
    • -
  • Panel de Mensaje (Message Display Pane): se localiza en medio de la barra de herramientas y la linea de omando, ocupa la mayor parte de la ventana, es el espacio en el cual la Consola Web muestra los mensajes.
    • -
diff --git "a/files/es/tools/web_console/la_l\303\255nea_de_comandos_del_int\303\251rprete/index.html" "b/files/es/tools/web_console/la_l\303\255nea_de_comandos_del_int\303\251rprete/index.html" deleted file mode 100644 index 06e5922248..0000000000 --- "a/files/es/tools/web_console/la_l\303\255nea_de_comandos_del_int\303\251rprete/index.html" +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: La línea de comandos del intérprete de JavaScript -slug: Tools/Web_Console/La_línea_de_comandos_del_intérprete -tags: - - Debugging - - Depuración - - Desarrollo web - - consola web -translation_of: Tools/Web_Console/The_command_line_interpreter ---- -
{{ToolsSidebar}}
- -

Puedes interpretar expresiones JavaScript en tiempo real utilizando el intérprete proporcionado por la Consola web. Tiene dos modos: entrada unilínea y entrada multilínea.

- -

Modo unilínea

- -

Para entrada de una sola línea, puedes escribir expresiones JavaScript en el campo en la parte inferior del registro de la consola, en el indicador >>.

- -

La consola web, mostrando el modo unilínea

- -

Para ingresar expresiones en el modo unilínea, escribe en el indicador y presiona Intro. Para ingresar expresiones de varias líneas, presiona Mayús+Intro después de escribir cada línea, luego Intro para ejecutar todas las líneas ingresadas.

- -

La expresión que escribas se repite debajo de la petición de entrada, seguida del resultado.

- -

Si tu entrada no parece estar completa cuando presiones Intro, la consola lo trata como Mayús+Intro, lo cual te permite finalizar tu entrada.

- -

Por ejemplo, si escribes:

- -
function foo() {
- -

y luego Intro, la consola no ejecuta inmediatamente la entrada, pero se comporta como si hubieras presionado Mayús+Intro, para que puedas terminar de ingresar la definición de la función.

- -

Modo multilínea

- -

Para la entrada multilínea, haz clic en el icono de "panel dividido" en el lado derecho del campo de entrada unilínea, o presiona Ctrl+B (Windows/Linux) o Cmd+B (macOS). El panel de edición multilínea se abre en el lado izquierdo de la Consola web.

- -

Modo multilínea en la consola web

- -

De manera predeterminada, en este modo puedes ingresar múltiples líneas de JavaScript, presionando Intro después de cada una. Para ejecutar el fragmento que se encuentre actualmente en el panel de edición, haz clic en el botón Ejecutar o presiona Ctrl+Intro (o Cmd+Intro en MacOS). El fragmento se repite debajo de la petición de entrada (en el panel del lado derecho), seguido del resultado. También puedes seleccionar un rango de líneas en el panel de edición y ejecutar solo el código en esas líneas.

- -

A partir de Firefox 76, si el fragmento de código tiene más de cinco líneas, solo las primeras cinco líneas se repiten en la consola, precedidas por un triángulo desplegable (o "twistie") y seguidos por puntos suspensivos (…). Haz clic en cualquier parte del área que contiene el código reproducido para mostrar el fragmento completo; haz clic de nuevo en esa área para contraerlo.

- -

Puedes abrir archivos en el modo multilínea y guardar el contenido actual del panel de edición en un archivo.

- -
    -
  • Para abrir un archivo, presiona Ctrl+O (Cmd+O en MacOS). Se abre un cuadro de diálogo de archivo para que puedas seleccionar el archivo que deseas abrir.
    • -
  • Para guardar el contenido del panel de edición, presiona Ctrl+S (Cmd+S en MacOS). Se abre un cuadro de diálogo de archivo para que puedas especificar la ubicación en la que deseas guardar el archivo.
    • -
- -

Para volver al modo unilínea, haz clic en el icono X en la parte superior del panel de edición multilínea o presiona Ctrl+B (Windows/Linux) o Cmd+B (MacOS).

- -

Acceder a variables

- -

Puedes acceder a las variables definidas en la página, tanto variables integradas como window como variables agregadas por bibliotecas de JavaScript como jQuery:

- -

Accder a variables

- -

Autocompletado

- -

El editor tiene autocompletado: ingresa las primeras letras y aparecerá una ventana emergente con posibles terminaciones:

- -

Autocompletado

- -

Presiona Intro, Tab o la tecla de flecha derecha para aceptar la sugerencia, usa las flechas arriba/abajo para pasar a una diferente sugerencia, o simplemente sigue escribiendo si no te gusta ninguna de las sugerencias.

- -

Las sugerencias de autocompletado de la consola no distinguen entre mayúsculas y minúsculas.

- -

La consola sugiere terminaciones del ámbito del marco de la pila que se está ejecutando actualmente. Esto significa que si has alcanzado un punto de interrupción en una función, obtienes autocompletado para los objetos locales a la función.

- -

También obtienes sugerencias de autocompletado para elementos de arreglo:

- -

Autocompletado en arreglos

- -

Puedes habilitar o deshabilitar el autocompletado a través del menú Configuración ("engrane") en la barra de herramientas de la Consola web. El elemento de menú Habilitar autocompletado tiene una marca de verificación junto a él cuando la función está habilitada, que falta cuando está inhabilitada. Selecciona el elemento del menú para cambiar el estado.

- -

Evaluación instantánea

- -
-

Esta característica está disponible en Firefox Nightly, en las versiones etiquetadas con 74 y posteriores.

-
- -

Cuando la característica de "evaluación instantánea" está habilitada, el intérprete muestra los resultados de las expresiones mientras las escribes en el modo unilínea. Ten en cuenta que el resultado puede ser un mensaje de error. Las expresiones que tienen efectos secundarios no se evalúan.

- -

Puedes habilitar o deshabilitar la evaluación instantánea a través del menú Configuración ("engrane") en la barra de herramientas de la Consola web. El elemento Evaluación instantánea del menú tiene una marca de verificación junto a él cuando la característica está habilitada, y falta cuando está inhabilitada. Selecciona el elemento del menú para cambiar el estado.

- -

Contexto de ejecución

- -

El código que has ejecutado se convierte en parte del contexto de ejecución, independientemente del modo de edición en el que te encontrabas cuando lo ejecutaste. Por ejemplo, si escribes una definición de función en el editor multilínea y haces clic en Ejecutar, puedes cambiar al modo unilínea y seguir utilizando tu función.

- -

Resaltado de sintaxis

- -

La salida de la consola mostrando la sintaxis resaltada

- -

El texto que ingreses tiene resaltado de sintaxis tan pronto como hayas escrito lo suficiente para que el resaltador lo analice e infiera el significado de las "palabras".

- -

La salida también se resalta cuando es apropiado.

- -
-

Nota: El resaltado de sintaxis no está visible en tu navegador si se han habilitado las funciones de accesibilidad.

-
- -

Historial de ejecución

- -

El intérprete recuerda las expresiones que has escrito. Para avanzar y retroceder en tu historial:

- -
    -
  • En el modo unilínea, usa las flechas hacia arriba y hacia abajo.
    • -
  • En el modo multilínea, utiliza los iconos ⋀ y ⋁ de la barra de herramientas del panel de edición.
    • -
- -

El historial de expresiones se conserva entre sesiones. Para borrar el historial, usa la función auxiliar clearHistory().

- -

Puedes iniciar una búsqueda inversa a través del historial de expresiones, al igual que en bash en Linux y Mac o PowerShell en Windows. En Windows y Linux, presiona F9. En Mac, presiona Ctrl+R (Nota: ¡no Cmd+R!) para iniciar la búsqueda inversa.

- -

Búsqueda inversa

- -

Ingresa el texto que deseas buscar en el cuadro de entrada en la parte inferior de la consola. Empieza a escribir parte de la expresión que estás buscando y la primera coincidencia se mostrará en la consola. Si escribes F9 repetidamente en Windows y Linux (Ctrl+R en Mac), retrocedes por las coincidencias.

- -

Ejemplo de búsqueda inversa

- -

Una vez que hayas iniciado la búsqueda inversa, puedes usar Mayús+F9 en Windows o Linux (Ctrl+S en Mac) para buscar hacia adelante en la lista de coincidencias. También puedes utilizar los iconos ⋀ y ⋁ en la barra de búsqueda de expresiones.

- -

Cuando encuentres la expresión que deseas, presiona Intro (Intro) para ejecutar la instrucción.

- -

Trabajando con iframes

- -

Si una página contiene iframes incrustados, puedes utilizar la función cd() para cambiar el alcance de la consola a un iframe específico, y luego puedes ejecutar funciones definidas en el documento alojado por ese iframe. Hay tres formas de seleccionar un iframe usando cd():

- -

Puedes pasar el elemento iframe del DOM:

- -
var frame = document.getElementById("frame1");
-cd(frame);
- -

Puedes pasar un selector de CSS que coincida con el iframe:

- -
cd("#frame1");
- -

Puedes pasar el objeto window global del iframe:

- -
var frame = document.getElementById("frame1");
-cd(frame.contentWindow);
-
- -

Para volver a cambiar el contexto al objeto window de nivel superior, llama a cd() sin argumentos:

- -
cd();
- -

Por ejemplo, supongamos que tenemos un documento que incluye un iframe:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-  </head>
-  <body>
-    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
-  </body>
-</html>
- -

El iframe define una nueva función:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <script>
-      function whoAreYou() {
-        return "Yo soy el frame1";
-      }
-   </script>
-  </head>
-  <body>
-  </body>
-</html>
- -

Puedes cambiar el contexto al iframe de esta manera:

- -
cd("#frame1");
- -

Ahora verás que el objeto window global del documento es el iframe:

- -

window global del documentoY puedes llamar a la función definida en el iframe:

- -

función en la consola web

- -

Comandos auxiliares

- -

{{ page("es/docs/Tools/Web_Console/Helpers", "Los comandos") }}

diff --git a/files/es/tools/web_console/the_command_line_interpreter/index.html b/files/es/tools/web_console/the_command_line_interpreter/index.html new file mode 100644 index 0000000000..06e5922248 --- /dev/null +++ b/files/es/tools/web_console/the_command_line_interpreter/index.html @@ -0,0 +1,188 @@ +--- +title: La línea de comandos del intérprete de JavaScript +slug: Tools/Web_Console/La_línea_de_comandos_del_intérprete +tags: + - Debugging + - Depuración + - Desarrollo web + - consola web +translation_of: Tools/Web_Console/The_command_line_interpreter +--- +
{{ToolsSidebar}}
+ +

Puedes interpretar expresiones JavaScript en tiempo real utilizando el intérprete proporcionado por la Consola web. Tiene dos modos: entrada unilínea y entrada multilínea.

+ +

Modo unilínea

+ +

Para entrada de una sola línea, puedes escribir expresiones JavaScript en el campo en la parte inferior del registro de la consola, en el indicador >>.

+ +

La consola web, mostrando el modo unilínea

+ +

Para ingresar expresiones en el modo unilínea, escribe en el indicador y presiona Intro. Para ingresar expresiones de varias líneas, presiona Mayús+Intro después de escribir cada línea, luego Intro para ejecutar todas las líneas ingresadas.

+ +

La expresión que escribas se repite debajo de la petición de entrada, seguida del resultado.

+ +

Si tu entrada no parece estar completa cuando presiones Intro, la consola lo trata como Mayús+Intro, lo cual te permite finalizar tu entrada.

+ +

Por ejemplo, si escribes:

+ +
function foo() {
+ +

y luego Intro, la consola no ejecuta inmediatamente la entrada, pero se comporta como si hubieras presionado Mayús+Intro, para que puedas terminar de ingresar la definición de la función.

+ +

Modo multilínea

+ +

Para la entrada multilínea, haz clic en el icono de "panel dividido" en el lado derecho del campo de entrada unilínea, o presiona Ctrl+B (Windows/Linux) o Cmd+B (macOS). El panel de edición multilínea se abre en el lado izquierdo de la Consola web.

+ +

Modo multilínea en la consola web

+ +

De manera predeterminada, en este modo puedes ingresar múltiples líneas de JavaScript, presionando Intro después de cada una. Para ejecutar el fragmento que se encuentre actualmente en el panel de edición, haz clic en el botón Ejecutar o presiona Ctrl+Intro (o Cmd+Intro en MacOS). El fragmento se repite debajo de la petición de entrada (en el panel del lado derecho), seguido del resultado. También puedes seleccionar un rango de líneas en el panel de edición y ejecutar solo el código en esas líneas.

+ +

A partir de Firefox 76, si el fragmento de código tiene más de cinco líneas, solo las primeras cinco líneas se repiten en la consola, precedidas por un triángulo desplegable (o "twistie") y seguidos por puntos suspensivos (…). Haz clic en cualquier parte del área que contiene el código reproducido para mostrar el fragmento completo; haz clic de nuevo en esa área para contraerlo.

+ +

Puedes abrir archivos en el modo multilínea y guardar el contenido actual del panel de edición en un archivo.

+ +
    +
  • Para abrir un archivo, presiona Ctrl+O (Cmd+O en MacOS). Se abre un cuadro de diálogo de archivo para que puedas seleccionar el archivo que deseas abrir.
    • +
  • Para guardar el contenido del panel de edición, presiona Ctrl+S (Cmd+S en MacOS). Se abre un cuadro de diálogo de archivo para que puedas especificar la ubicación en la que deseas guardar el archivo.
    • +
+ +

Para volver al modo unilínea, haz clic en el icono X en la parte superior del panel de edición multilínea o presiona Ctrl+B (Windows/Linux) o Cmd+B (MacOS).

+ +

Acceder a variables

+ +

Puedes acceder a las variables definidas en la página, tanto variables integradas como window como variables agregadas por bibliotecas de JavaScript como jQuery:

+ +

Accder a variables

+ +

Autocompletado

+ +

El editor tiene autocompletado: ingresa las primeras letras y aparecerá una ventana emergente con posibles terminaciones:

+ +

Autocompletado

+ +

Presiona Intro, Tab o la tecla de flecha derecha para aceptar la sugerencia, usa las flechas arriba/abajo para pasar a una diferente sugerencia, o simplemente sigue escribiendo si no te gusta ninguna de las sugerencias.

+ +

Las sugerencias de autocompletado de la consola no distinguen entre mayúsculas y minúsculas.

+ +

La consola sugiere terminaciones del ámbito del marco de la pila que se está ejecutando actualmente. Esto significa que si has alcanzado un punto de interrupción en una función, obtienes autocompletado para los objetos locales a la función.

+ +

También obtienes sugerencias de autocompletado para elementos de arreglo:

+ +

Autocompletado en arreglos

+ +

Puedes habilitar o deshabilitar el autocompletado a través del menú Configuración ("engrane") en la barra de herramientas de la Consola web. El elemento de menú Habilitar autocompletado tiene una marca de verificación junto a él cuando la función está habilitada, que falta cuando está inhabilitada. Selecciona el elemento del menú para cambiar el estado.

+ +

Evaluación instantánea

+ +
+

Esta característica está disponible en Firefox Nightly, en las versiones etiquetadas con 74 y posteriores.

+
+ +

Cuando la característica de "evaluación instantánea" está habilitada, el intérprete muestra los resultados de las expresiones mientras las escribes en el modo unilínea. Ten en cuenta que el resultado puede ser un mensaje de error. Las expresiones que tienen efectos secundarios no se evalúan.

+ +

Puedes habilitar o deshabilitar la evaluación instantánea a través del menú Configuración ("engrane") en la barra de herramientas de la Consola web. El elemento Evaluación instantánea del menú tiene una marca de verificación junto a él cuando la característica está habilitada, y falta cuando está inhabilitada. Selecciona el elemento del menú para cambiar el estado.

+ +

Contexto de ejecución

+ +

El código que has ejecutado se convierte en parte del contexto de ejecución, independientemente del modo de edición en el que te encontrabas cuando lo ejecutaste. Por ejemplo, si escribes una definición de función en el editor multilínea y haces clic en Ejecutar, puedes cambiar al modo unilínea y seguir utilizando tu función.

+ +

Resaltado de sintaxis

+ +

La salida de la consola mostrando la sintaxis resaltada

+ +

El texto que ingreses tiene resaltado de sintaxis tan pronto como hayas escrito lo suficiente para que el resaltador lo analice e infiera el significado de las "palabras".

+ +

La salida también se resalta cuando es apropiado.

+ +
+

Nota: El resaltado de sintaxis no está visible en tu navegador si se han habilitado las funciones de accesibilidad.

+
+ +

Historial de ejecución

+ +

El intérprete recuerda las expresiones que has escrito. Para avanzar y retroceder en tu historial:

+ +
    +
  • En el modo unilínea, usa las flechas hacia arriba y hacia abajo.
    • +
  • En el modo multilínea, utiliza los iconos ⋀ y ⋁ de la barra de herramientas del panel de edición.
    • +
+ +

El historial de expresiones se conserva entre sesiones. Para borrar el historial, usa la función auxiliar clearHistory().

+ +

Puedes iniciar una búsqueda inversa a través del historial de expresiones, al igual que en bash en Linux y Mac o PowerShell en Windows. En Windows y Linux, presiona F9. En Mac, presiona Ctrl+R (Nota: ¡no Cmd+R!) para iniciar la búsqueda inversa.

+ +

Búsqueda inversa

+ +

Ingresa el texto que deseas buscar en el cuadro de entrada en la parte inferior de la consola. Empieza a escribir parte de la expresión que estás buscando y la primera coincidencia se mostrará en la consola. Si escribes F9 repetidamente en Windows y Linux (Ctrl+R en Mac), retrocedes por las coincidencias.

+ +

Ejemplo de búsqueda inversa

+ +

Una vez que hayas iniciado la búsqueda inversa, puedes usar Mayús+F9 en Windows o Linux (Ctrl+S en Mac) para buscar hacia adelante en la lista de coincidencias. También puedes utilizar los iconos ⋀ y ⋁ en la barra de búsqueda de expresiones.

+ +

Cuando encuentres la expresión que deseas, presiona Intro (Intro) para ejecutar la instrucción.

+ +

Trabajando con iframes

+ +

Si una página contiene iframes incrustados, puedes utilizar la función cd() para cambiar el alcance de la consola a un iframe específico, y luego puedes ejecutar funciones definidas en el documento alojado por ese iframe. Hay tres formas de seleccionar un iframe usando cd():

+ +

Puedes pasar el elemento iframe del DOM:

+ +
var frame = document.getElementById("frame1");
+cd(frame);
+ +

Puedes pasar un selector de CSS que coincida con el iframe:

+ +
cd("#frame1");
+ +

Puedes pasar el objeto window global del iframe:

+ +
var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+
+ +

Para volver a cambiar el contexto al objeto window de nivel superior, llama a cd() sin argumentos:

+ +
cd();
+ +

Por ejemplo, supongamos que tenemos un documento que incluye un iframe:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
+  </body>
+</html>
+ +

El iframe define una nueva función:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function whoAreYou() {
+        return "Yo soy el frame1";
+      }
+   </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

Puedes cambiar el contexto al iframe de esta manera:

+ +
cd("#frame1");
+ +

Ahora verás que el objeto window global del documento es el iframe:

+ +

window global del documentoY puedes llamar a la función definida en el iframe:

+ +

función en la consola web

+ +

Comandos auxiliares

+ +

{{ page("es/docs/Tools/Web_Console/Helpers", "Los comandos") }}

diff --git a/files/es/tools/web_console/ui_tour/index.html b/files/es/tools/web_console/ui_tour/index.html new file mode 100644 index 0000000000..59b0156a49 --- /dev/null +++ b/files/es/tools/web_console/ui_tour/index.html @@ -0,0 +1,23 @@ +--- +title: Iniciando la Consola Web +slug: Tools/Web_Console/Iniciando_la_Consola_Web +translation_of: Tools/Web_Console/UI_Tour +--- +

Para abrir la Consola Web:

+ +
    +
  • Puedes seleccionar "Consola Web" desde el submenu Desarrollador Web en el menu de Firefox ( o menu Herramientas si despliegas la barra menu o estas utilizando Mac OS X)
    • +
  • o presionando el CtrlShiftK (CommandOptionK en OS X) atajo de teclado.
    • +
+ +

La Caja de herramientas (Toolbox) aparecera en la parte baja de la ventana del navegador, con la Consola Web activada (solamente se le llama "Consola" en la barra de herramientas DevTools (DevTools toolbar)):

+ +

+ +

La interfaz de la Consola Web esta dividida en tres secciones horizontales que son:

+ +
    +
  • Barra de herramientas (Toolbar): A lo largo de la parte de arriba esta la barra de herramientas, contiene botones con etiquetas como "Net", "CSS", and "JS". Esta barra de herramientas se usa para filtrar cuales mensajes seran mostrados.
    • +
  • Linea de comando (Command Line): A lo largo  de la parte de abajo esta una linea de comando que se puede utilizar para ingresar expresiones en  JavaScript 
    • +
  • Panel de Mensaje (Message Display Pane): se localiza en medio de la barra de herramientas y la linea de omando, ocupa la mayor parte de la ventana, es el espacio en el cual la Consola Web muestra los mensajes.
    • +
diff --git a/files/es/traducir_las_descripciones_de_las_extensiones/index.html b/files/es/traducir_las_descripciones_de_las_extensiones/index.html deleted file mode 100644 index f2a85cff51..0000000000 --- a/files/es/traducir_las_descripciones_de_las_extensiones/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Traducir las descripciones de las extensiones -slug: Traducir_las_descripciones_de_las_extensiones -tags: - - Complementos - - Localización - - Todas_las_Categorías - - extensiones ---- -

 

-

Localizing in Gecko 1.9

-

{{ Gecko_minversion_header(1.9) }} {{ Fx_minversion_header(3) }}

-

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

-
    -
  • Si aún no dispone de ellas, cree localized properties files. Asegúrese de que utiliza la codificación UTF-8 para garantizar que los caracteres extranjeros se muestren correctamente.
    • -
  • Añada la siguiente línea a cada uno de sus ficheros de propiedades de localización (donde: EXTENSION_ID corresponda a su identificador de extensión (extension ID) (<em:id> de install.rdf) y LOCALIZED_DESCRIPTION es la descripción de su extensión, que usted desea que aparezca en el idioma determinado): - 
    extensions.EXTENSION_ID.description=LOCALIZED_DESCRIPTION
    -
    • -
  • Si aún no dispone de uno, cree a default preferences file.
    • -
  • Añádale la siguiente línea (donde: EXTENSION_ID coincida con su identificador de aplicación (application ID) de install.rdf y PATH_TO_LOCALIZATION_FILE sea la ruta correcta del fichero de localización que usted añadió anteriormente): - 
    pref("extensions.EXTENSION_ID.description", "PATH_TO_LOCALIZATION_FILE");
    -
    • -
-

Cadenas Localizables

-

Los siguientes "metadatos" de las extensiones o aplicaciones añadidas (add-ons) pueden ser localizados utilizando este proceso:

-
    -
  • name (nombre)
    • -
  • description (descripción)
    • -
  • creator (creador)
    • -
  • homepageURL (URL de la página de inicio)
    • -
-

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:

-
    -
  • developer (desarrollador)
    • -
  • translator (traductor)
    • -
  • contributor (contribuidor)
    • -
diff --git "a/files/es/traducir_una_extensi\303\263n/index.html" "b/files/es/traducir_una_extensi\303\263n/index.html" deleted file mode 100644 index 7c5c33627a..0000000000 --- "a/files/es/traducir_una_extensi\303\263n/index.html" +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: Traducir una extensión -slug: Traducir_una_extensión -tags: - - Complementos - - Localización - - Todas_las_Categorías - - extensiones ---- -

{{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/trazado_de_una_tabla_html_mediante_javascript_y_la_interface_dom/index.html b/files/es/trazado_de_una_tabla_html_mediante_javascript_y_la_interface_dom/index.html deleted file mode 100644 index b8bc2e4cf9..0000000000 --- a/files/es/trazado_de_una_tabla_html_mediante_javascript_y_la_interface_dom/index.html +++ /dev/null @@ -1,337 +0,0 @@ ---- -title: Trazado de una tabla HTML mediante JavaScript y la Interface DOM -slug: Trazado_de_una_tabla_HTML_mediante_JavaScript_y_la_Interface_DOM -translation_of: >- - Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces ---- -

Introducción

- -

Este artículo es un resumen de algunos métodos DOM nivel 1 poderosos y fundamentales así como una descripción de cómo utilizarlos utilizando Javascript.  Aprenderás a crear, accesar, controlar, y remover elementos HTML dinámicamente.  Los métodos DOM presentados aquí no son específicos de HTML; también aplican para XML. Las demostraciones aquí proporcionadas funcionarán en cualquier navegador moderno, incluyendo todas las versiones de Firefox e IE 5+.

- -
Los métodos DOM presentados aquí forman parte del Modelo de Documento basado en Objetos (DOM: Document Object Model por sus siglas en inglés) de especificación nivel 1.  DOM nivel 1 incluye métodos tanto para acceso genérico del documento (DOM 1 Core) así como métodos específicos para documentos HTML (DOM 1 HTML).
- -

Ejemplo: Crear una tabla HTML dinámicamente (Ejemplo1.html)

- -

Contenido HTML

- -
<input type="button" value="Genera una tabla" onclick="genera_tabla()">
-
- -

JavaScript Content

- -
function genera_tabla() {
-  // Obtener la referencia del elemento body
-  var body = document.getElementsByTagName("body")[0];
-
-  // Crea un elemento <table> y un elemento <tbody>
-  var tabla   = document.createElement("table");
-  var tblBody = document.createElement("tbody");
-
-  // Crea las celdas
-  for (var i = 0; i < 2; i++) {
-    // Crea las hileras de la tabla
-    var hilera = document.createElement("tr");
-
-    for (var j = 0; j < 2; j++) {
-      // Crea un elemento <td> y un nodo de texto, haz que el nodo de
-      // texto sea el contenido de <td>, ubica el elemento <td> al final
-      // de la hilera de la tabla
-      var celda = document.createElement("td");
-      var textoCelda = document.createTextNode("celda en la hilera "+i+", columna "+j);
-      celda.appendChild(textoCelda);
-      hilera.appendChild(celda);
-    }
-
-    // agrega la hilera al final de la tabla (al final del elemento tblbody)
-    tblBody.appendChild(hilera);
-  }
-
-  // posiciona el <tbody> debajo del elemento <table>
-  tabla.appendChild(tblBody);
-  // appends <table> into <body>
-  body.appendChild(tabla);
-  // modifica el atributo "border" de la tabla y lo fija a "2";
-  tabla.setAttribute("border", "2");
-}
- -

{{ EmbedLiveSample('Overview_of_Sample1.html') }}

- -

Observa cuidadosamente el orden en el que se crearon los elementos en el nodo de texto:

- -
    -
  1. Primero se crea el elemento <table>.
    2. -
  2. Posteriormente, creamos el elemento <tbody> , que es el hijo del elemento <table> .
    3. -
  3. Después, utilizamos ciclos para crear los elementos <tr>, que son hijos del elemento <tbody>.
    4. -
  4. Para cada elemento <tr>, utilizamos nuevamente ciclos para generar los elementos <td> que son hijos de los elementos <tr>.
    5. -
  5. Para cada elemento <td>, creamos nodos de texto con el contenido de cada celda.
    6. -
- -

Una vez creados los elementos <table>, <tbody>, <tr>, y <td> así como los nodos de texto, adicionamos a cada hijo bajo su padre en el órden opuesto:

- -
    -
  1. Primero, anexamos cada nodo de texto a su elemento padre <td> : - 
    celda.appendChild(textoCelda);
    -
    2. -
  2. Posteriormente, anexamos cada elemento <td> a su elemento padre <tr> : - 
    hilera.appendChild(celda);
    -
    3. -
  3. Posteriomente, anexamos cada elemento <tr> a su elemento padre <tbody>: - 
    tblBody.appendChild(hilera);
    -
    4. -
  4. Después, anexamos el elemento <tbody> a su elemento padre <table>: - 
    tabla.appendChild(tblBody);
    -
    5. -
  5. Finalmente, anexamos el elemento <table> a su elemento padre <body>: - 
    body.appendChild(tabla);
    -
    6. -
- -

Recuérda esta técnica. Te será muy útil en la programación bajo el estándar W3C DOM. Primero, creas los elementos de arriba a abajo; posteriormente adicionas los hijos a los padres de abajo a arriba.

- -

A continuación aparece el código HTML generado por el código JavaScript:

- -
...
-<table border="2">
-    <tbody>
-        <tr><td>celda en la hilera 0, columna 0</td><td>celda en la hilera 0, columna 1</td></tr>
-        <tr><td>celda en la hilera 1, columna 0</td><td>celda en la hilera 1, columna 1</td></tr>
-    </tbody>
-</table>
-...
-
- -

Aquí está el árbol de objetos DOM generado por el código del elemento <TABLE> :

- -

Image:sample1-tabledom.jpg

- -

Tú puedes construir esta tabla y sus elementos internos utilizando sólo algunos de los varios métodos del DOM. Recuerda tener en mente el modelo de la estructura que planeas crear; esto hará mucho más fácil la escritura del código necesario.

- -

En el árbol del elemento <table> de la Figura 1, el elemento <table> tiene solamente un hijo mientras que <tbody> tiene dos.  A su vez, cada hijo de <tbody> tiene dos hijos. Finalmente, cada elemento <td> tiene sólo uno, el nodo de texto.

- -

Ejemplo: Configuración del color de fondo de un párrafo

- -

getElementsByTagName(tagNameValue) es un método disponible en cualquier elemento DOM o el elemento raíz del documento. Cuando se le llama, devolverá una matriz con todos los descendientes de elementos que coincidan con el nombre de la etiqueta. El primer elemento de la lista se encuentra en la posición [0] de la matriz.

- -

HTML Content

- -
<body>
-  <input type="button" value="Set paragraph background color" onclick="set_background()">
-  <p>hi</p>
-  <p>hello</p>
-</body>
- -

JavaScript Content

- -
function set_background() {
-  // get a list of all the body elements (there will only be one),
-  // and then select the zeroth (or first) such element
-  myBody = document.getElementsByTagName("body")[0];
-
-  // now, get all the p elements that are descendants of the body
-  myBodyElements = myBody.getElementsByTagName("p");
-
-  // get the second item of the list of p elements
-  myP = myBodyElements[1];
-  myP.style.background = "rgb(255,0,0)";
-}
- -

{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}

- -

En este ejemplo, establecemos la variable myP en el objeto DOM para el segundo elementop dentro del body:

- -
    -
  1. Primero, obtendremos una lista de todos los elementos body mediante - 
    myBody = document.getElementsByTagName("body")[0]
    - Como en cualquier documento HTML sólo hay un elemento body válido, esta lista tendrá sólo un elemento, que recuperamos seleccionando el primer elemento de esa lista usando {{mediawiki.external(0)}}.
    2. -
  2. Luego, obtenemos todos los elementos p que son descendientes del body mediante - 
    myBodyElements = myBody.getElementsByTagName("p");
    -
    3. -
  3. Finalmente, obtenemos el segundo item de la lista de elementos p mediante - 
    myP = myBodyElements[1];
    -
    4. -
- -

Image:sample2a2.jpg

- -

Una vez que haya obtenido el objeto DOM para un elemento HTML, puede establecer sus propiedades. Por ejemplo, si desea establecer la propiedad estilo de color de fondo, agregue:

- -
myP.style.background = "rgb(255,0,0)";
-// setting inline STYLE attribute
-
- -

Creating TextNodes with document.createTextNode("..")

- -

Use the document object to invoke the createTextNode method and create your text node. You just need to pass the text content. The return value is an object that represents the text node.

- -
myTextNode = document.createTextNode("world");
-
- -

This means that you have created a node of the type TEXT_NODE (a piece of text) whose text data is "world", and myTextNode is your reference to this node object. To insert this text into your HTML page, you need to make this text node a child of some other node element.

- -

Inserting Elements with appendChild(..)

- -

So, by calling myP.appendChild({{mediawiki.external('node_element')}}), you are making the element a new child of the second <p> element.

- -
myP.appendChild(myTextNode);
-
- -

After testing this sample, note that the words hello and world are together: helloworld. So visually, when you see the HTML page it seems like the two text nodes hello and world are a single node, but remember that in the document model, there are two nodes. The second node is a new node of type TEXT_NODE, and it is the second child of the second <p> tag. The following figure shows the recently created Text Node object inside the document tree.

- -

Image:sample2b2.jpg

- -
createTextNode and appendChild is a simple way to include white space between the words hello and world. Another important note is that the appendChild method will append the child after the last child, just like the word world has been added after the word hello. So if you want to append a Text Node between hello and world you will need to use insertBefore instead of appendChild.
- -

Creating New Elements with the document object and the createElement(..) method

- -

You can create new HTML elements or any other element you want with createElement. For example, if you want to create a new <p> element as a child of the <body> element, you can use the myBody in the previous example and append a new element node. To create a node simply call document.createElement("tagname"). For example:

- -
myNewPTAGnode = document.createElement("p");
-myBody.appendChild(myNewPTAGnode);
-
- -

Image:sample2c.jpg

- -

Removing nodes with the removeChild(..) method

- -

Nodes can be removed. The following code removes text node myTextNode (containing the word "world") from the second <p> element, myP.

- -
myP.removeChild(myTextNode);
-
- -

Text node myTextNode (containing the word "world") still exists. The following code attaches myTextNode to the recently created <p> element, myNewPTAGnode.

- -
myNewPTAGnode.appendChild(myTextNode);
-
- -

The final state for the modified object tree looks like this:

- -

Image:sample2d.jpg

- -

Creating a table dynamically (back to Sample1.html)

- -

For the rest of this article we will continue working with sample1.html. The following figure shows the table object tree structure for the table created in the sample.

- -

Reviewing the HTML Table structure

- -

Image:sample1-tabledom.jpg

- -

Creating element nodes and inserting them into the document tree

- -

The basic steps to create the table in sample1.html are:

- -
    -
  • Get the body object (first item of the document object).
    • -
  • Create all the elements.
    • -
  • Finally, append each child according to the table structure (as in the above figure). The following source code is a commented version for the sample1.html.
    • -
- -
At the end of the start function there is a new line of code. The table's border property was set using another DOM method, setAttribute. setAttribute has two arguments: the attribute name and the attribute value. You can set any attribute of any element using the setAttribute method.
- -
<head>
-<title>Sample code - Traversing an HTML Table with JavaScript and DOM Interfaces</title>
-<script>
-    function start() {
-        // get the reference for the body
-        var mybody = document.getElementsByTagName("body")[0];
-
-        // creates <table> and <tbody> elements
-        mytable     = document.createElement("table");
-        mytablebody = document.createElement("tbody");
-
-        // creating all cells
-        for(var j = 0; j < 2; j++) {
-            // creates a <tr> element
-            mycurrent_row = document.createElement("tr");
-
-            for(var i = 0; i < 2; i++) {
-                // creates a <td> element
-                mycurrent_cell = document.createElement("td");
-                // creates a Text Node
-                currenttext = document.createTextNode("cell is row " + j + ", column " + i);
-                // appends the Text Node we created into the cell <td>
-                mycurrent_cell.appendChild(currenttext);
-                // appends the cell <td> into the row <tr>
-                mycurrent_row.appendChild(mycurrent_cell);
-            }
-            // appends the row <tr> into <tbody>
-            mytablebody.appendChild(mycurrent_row);
-        }
-
-        // appends <tbody> into <table>
-        mytable.appendChild(mytablebody);
-        // appends <table> into <body>
-        mybody.appendChild(mytable);
-        // sets the border attribute of mytable to 2;
-        mytable.setAttribute("border","2");
-    }
-</script>
-</head>
-<body onload="start()">
-</body>
-</html>
- -

Manipulating the table with DOM and CSS

- -

Getting a text node from the table

- -

This example introduces two new DOM attributes. First it uses the childNodes attribute to get the list of child nodes of mycel. The childNodes list includes all child nodes, regardless of what their name or type is. Like getElementsByTagName(), it returns a list of nodes. The differences are that (a) getElementsByTagName() only returns elements of the specified tag name; and (b) getElementsByTagName() returns descendants at any level, not just immediate children. Once you have the returned list, use {{mediawiki.external('x')}} method to retrieve the desired child item. This example stores in myceltext the text node of the second cell in the second row of the table. Then, to display the results in this example, it creates a new text node whose content is the data of myceltext and appends it as a child of the <body> element.

- -
If your object is a text node, you can use the data attribute and retrieve the text content of the node.
- -
mybody      = document.getElementsByTagName("body")[0];
-mytable     = mybody.getElementsByTagName("table")[0];
-mytablebody = mytable.getElementsByTagName("tbody")[0];
-myrow       = mytablebody.getElementsByTagName("tr")[1];
-mycel       = myrow.getElementsByTagName("td")[1];
-
-// first item element of the childNodes list of mycel
-myceltext=mycel.childNodes[0];
-
-// content of currenttext is the data content of myceltext
-currenttext=document.createTextNode(myceltext.data);
-mybody.appendChild(currenttext);
-
- -

Getting an attribute value

- -

At the end of sample1 there is a call to setAttribute on the mytable object. This call was used to set the border property of the table. To retrieve the value of the attribute, use the getAttribute method:

- -
mytable.getAttribute("border");
-
- -

Hiding a column by changing style properties

- -

Once you have the object in your JavaScript variable, you can set style properties directly. The following code is a modified version of sample1.html in which each cell of the second column is hidden and each cell of the first column is changed to have a red background. Note that the style property was set directly.

- -
<html>
-<body onload="start()">
-</body>
-<script>
-    function start() {
-       var mybody =document.getElementsByTagName("body")[0];
-       mytable     = document.createElement("table");
-       mytablebody = document.createElement("tbody");
-
-       for(var j = 0; j < 2; j++) {
-           mycurrent_row=document.createElement("tr");
-           for(var i = 0; i < 2; i++) {
-               mycurrent_cell = document.createElement("td");
-               currenttext = document.createTextNode("cell is:" + i + j);
-               mycurrent_cell.appendChild(currenttext);
-               mycurrent_row.appendChild(mycurrent_cell);
-               // set the cell background color
-               // if the column is 0. If the column is 1 hide the cel
-               if (i == 0) {
-                   mycurrent_cell.style.background = "rgb(255,0,0)";
-               } else {
-                   mycurrent_cell.style.display = "none";
-               }
-           }
-           mytablebody.appendChild(mycurrent_row);
-       }
-       mytable.appendChild(mytablebody);
-       mybody.appendChild(mytable);
-    }
-</script>
-</html>
-
diff --git a/files/es/usando_archivos_desde_aplicaciones_web/index.html b/files/es/usando_archivos_desde_aplicaciones_web/index.html deleted file mode 100644 index a3f0c8546e..0000000000 --- a/files/es/usando_archivos_desde_aplicaciones_web/index.html +++ /dev/null @@ -1,377 +0,0 @@ ---- -title: Usando archivos desde aplicaciones web -slug: Usando_archivos_desde_aplicaciones_web -tags: - - Archivos - - HTML5 - - para_revisar - - páginas_a_traducir ---- -

{{ 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/usar_c\303\263digo_de_mozilla_en_otros_proyectos/index.html" "b/files/es/usar_c\303\263digo_de_mozilla_en_otros_proyectos/index.html" deleted file mode 100644 index 5cb8795395..0000000000 --- "a/files/es/usar_c\303\263digo_de_mozilla_en_otros_proyectos/index.html" +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Usando código de Mozilla en otros proyectos -slug: Usar_código_de_Mozilla_en_otros_proyectos -tags: - - para_revisar - - páginas_a_traducir ---- -

Hay varias maneras en las que puede usar código de Mozilla en su propio proyecto.

-
  • Mozilla proporciona un plataforma de desarrollo para aplicaciones de escritorio, llama XUL, sobre la cual usted puede construir aplicaciones.
  • Varios componentes de la plataforma, tales como el motor de JavaScript SpiderMonkey, pueden ser utilizados en su propio proyecto.
  • Varios componentes de la plataforma, tales como el motor de JavaScript SpiderMonkey, pueden ser utilizados en su propio proyecto sin el resto de la plataforma.
  • También hay módulos que no son utilizados en Firefox pero están disponibles para el uso de otras aplicaciones; un ejemplo de esto es Rhino, el motor JavaScript escrito en Java.
  • Usted puede embeber Gecko, el motor de renderizado utilizado por Firefox para procesar paginas web, como un navegador dentro de su propia aplicación.
    • -
- -

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/usar_web_workers/index.html b/files/es/usar_web_workers/index.html deleted file mode 100644 index 0dacf19312..0000000000 --- a/files/es/usar_web_workers/index.html +++ /dev/null @@ -1,260 +0,0 @@ ---- -title: Usar web workers -slug: Usar_web_workers -tags: - - Firefox 3.5 - - Gecko 1.9.1 - - HTML5 - - JavaScript - - Workers - - para_revisar ---- -

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

-
    -
  • appName
    • -
  • appVersion
    • -
  • platform
    • -
  • userAgent
    • -
-

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/usar_xpinstall_para_instalar_plugins/index.html b/files/es/usar_xpinstall_para_instalar_plugins/index.html deleted file mode 100644 index 260a29a8e5..0000000000 --- a/files/es/usar_xpinstall_para_instalar_plugins/index.html +++ /dev/null @@ -1,236 +0,0 @@ ---- -title: Usar XPInstall para instalar plugins -slug: Usar_XPInstall_para_instalar_plugins -tags: - - Plugins - - Todas_las_Categorías - - XPInstall ---- -

-

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

-
  • El componente software que va a ser instalado. En nuestro caso es el software del plugin. -
  • Un fichero JavaScript llamado install.js, el cual contiene la lógica que conduce la instalación. Esto incluye instrucciones que indican dónde se va a instalar el software y mensajes para informar al usuario. -
-

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

-
  • Los navegadores recientes de Netscape tales como Netscape 6.2.x y Netscape 7.0, ambos basados en Netscape Gecko que es el núcleo del navegador Mozilla. -
-
  • Las versiones recientes sólo beta del software de AOL basado en Netscape Gecko, el motor de renderizado del proyecto Mozilla. -
-

Advertencias: -

-
  • El navegador CompuServe de AOL Time Warner, basado también en Netscape Gecko, no soporta XPInstall. -
-
  • Netscape Communicator 4.x no soporta XPInstall. -
-

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

-
  • Bibliotecas compartidas (p.e., en Windows, son DLLs, en Unix son los ficheros *.so). Dichos ficheros están compilados en código nativo con la API para plugins de Netscape. -
-
  • Si el plugin es scriptable, entonces también consistirá en un fichero XPT. Un ejemplo podría ser Flash 6r47 en Windows, el cual está compuesto por una DLL (llamada npswf32.dll) y un fichero XPT para la programación (llamado flashplayer.xpt). Si estás desarrollando un plugin y quieres hacerlo scriptable, mírate las partes importantes de la API para plugins. -
-
  • Software adicional. Muchos plugins son parte de software adicional para tipos multimedia. Por ejemplo, RealPlayer para Windows consta de un plugin DLL pero también de la aplicación RealPlayer (EXE), de la que el plugin DLL es subconjunto. En este caso, el plugin es parte del paquete de software específico del navegador como mecanismo para darle a la aplicación ganchos adicionales en el navegador. -
-

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 utiliza ficheros ZIP renombrados a XPI (*.xpi) y SmartUpdate utiliza ficheros JAR (*.jar) -
  • A diferencia de los ficheros JAR de SmartUpdate, los paquetes XPI no tienen que estar firmados digitalmente con un certificado digital. -
  • Los paquetes XPI hacen uso de diferentes APIs dentro de install.js, aunque el concepto es el mismo. -
-

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

-
  • Instalar los componentes del software del plugin para el navegador (p.e., DLLs en Windows y ficheros XPT si procede) a una ubicación secundaria además de en el directorio de plugins del navegador actual. -
  • Escribir claves en el registro de Windows para que guarden la información de esta ubicación secundaria, en particular la ruta de los plugins y la de los XPT (si procede) para que los navegadores de Netscape Gecko puedan buscar el plugin desde la ubicación secundaria si son instalados después de que lo fuese el plugin (o si un navegador de Netscape Gecko concreto reemplaza al navegador actual). La información que deberían contener las claves es explicada con detalle en la especificación publicada en mozilla.org. Existe además un ejemplo de una entrada de registro creada por una compañía imaginaria que ilustra lo que se explica en la especificación para dichas claves de registro. -
  • En Windows, las claves del registro mencionadas antes siguen una nomenclatura usando el concepto de identificador de plugin como nombre de clave bajo la subclave MozillaPlugins. El identificador de plugin (o PLID) es un concepto útil que es también aplicable cuando se inicializa la instalación a través de la API initInstall. -
-

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

-
  • Una cadena con el nombre de la aplicación. -
  • Una cadena representando el identificador del plugin asociado con el plugin. En realidad, este valor se guarda en el registro de versión de cliente tras la instalación, un fichero de los navegadores Mozilla que guarda metadatos con el software que acaba de ser instalado. Este valor puede ser consultado con JavaScript a través de una página web y es útil para inicializar descargas XPInstall vía scripts disparados. Se puede determinar la versión del software que ha sido instalado y determinar si se tiene que actualizar o no, todo esto utilizando JavaScript en una página web. -
  • Una cadena que represnta la versión de cuatro dígitos del software. -
-

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

-
  • Instala tanto el fichero DLL como el XPT en el directorio de plugins del navegador. El propio plugin es imaginario: MyPlugin. Sin embargo, las variables que determinan el nombre del plugin pueden ser modificadas fácilmente. Este fichero install.js supone que el software del plugin que va a ser instalado está compuesto por un fichero DLL y por otro XBT, lo cual no siempre es cierto. Muchos plugins pueden traer más de una DLL o quizá código nativo adicional. No obstante, es una suposición más que segura para la mayoría de los plugins, especialmente para el plugin Flash de Macromedia compuesto por una única DLL (en Windows es npswf32.dll) y un único fichero XPT para script (llamado flashplayer.xpt). -
  • Adicionalmente, instala el plugin en una ubicación secundaria en el ordenador del usuario. Concretamente, como muchos ficheros OCX (los controles ActiveX), se instala en un directorio especial dentro de C:\WINNT\System32, llamado C:\WINNT\System32\MyPlugin. XPInstall es capaz de determinar cuál es este directorio gracias a la llamada API getFolder. Hemos escrito nuestra propia función de JavaScript que contiene todo el código de la instalación secundaria (la función createSecondaryInstall()). -
  • Y por último, escribe las claves de registro requeridas en Windows. Esto se hace a través de la función creada, llamada registerPLID(). -
-

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

-
  • Las páginas HTML y JavaScript ya poseen un modo de detectar qué plugins están instalados. Además, gracias al objeto InstallTrigger el cual es accesible por las páginas web, se puede conocer la última versión del paquete XPI instalado. -
  • El objeto InstallTrigger también puede iniciar una descarga XPI automáticamente. Esto es útil ya que los usuarios pueden visitar un sitio web y, de forma opcional, obtener el software del servidor (mediante flujo de datos) ofrecido al usuario por la página web. -
-

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/using_the_w3c_dom_level_1_core/index.html b/files/es/using_the_w3c_dom_level_1_core/index.html deleted file mode 100644 index 6c5f14c025..0000000000 --- a/files/es/using_the_w3c_dom_level_1_core/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Using the W3C DOM Level 1 Core -slug: Using_the_W3C_DOM_Level_1_Core -tags: - - DOM - - NeedsTranslation - - NeedsUpdate - - TopicStub -translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core ---- -

The W3C's DOM Level 1 Core is a powerful object model for changing the content tree of documents. It is supported in all major browsers including Mozilla Firefox and Microsoft Internet Explorer. It is a powerful base for scripting on the web.

- -

What is a content tree?

- -

Many HTML authors may think of HTML as something flat -- a bunch of text with tags in the middle. However, it is something much more than that. Any HTML document (or for that matter any SGML document or XML document) is a tree structure. For example, the following document and tree structure are similar (although not identical -- see the notes on whitespace in the DOM):

- -
<html>
-<head>
-  <title>My Document</title>
-</head>
-<body>
-  <h1>Header</h1>
-  <p>Paragraph</p>
-</body>
-</html>
-
- -

image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg

- -

When Mozilla parses a document, it builds a content tree and then uses it to display the document.

- -

The terms used to describe trees show up often in the DOM Level 1 Core. Each of the boxes I drew in the tree above is a node in the tree. The line above a node expresses a parent-child relationship: the node on top is the parent, and the node on the bottom is the child. Two children of the same parent are therefore siblings. Similarly, one can refer to ancestors and descendants. (Cousins are too messy, though.)

- -

What does the DOM Level 1 Core let me do?

- -

The W3C DOM Level 1 allows you to change the content tree any way you want. It is powerful enough to build any HTML document from scratch. It allows authors to change anything in the document from script, at any time. The easiest way for web page authors to change the DOM dynamically is using JavaScript. In JavaScript, the document is accessible the same way it has been in older browsers: from the document property of the global object. This document object implements the Document interface from the W3C's DOM Level 1 spec.

- -

A simple example

- -

Suppose the author wants to take the above document and change the contents of the header, and write two paragraphs instead of one. The following script would do the job:

- -

HTML Content

- -
<body>
-<input type="button" value="Change this document." onclick="change()">
-<h2>Header</h2>
-<p>Paragraph</p>
-</body>
-
- -

JavaScript Content

- -
  function change() {
-    // document.getElementsByTagName("H2") returns a NodeList of the <h2>
-    // elements in the document, and the first is number 0:
-
-    var header = document.getElementsByTagName("H2").item(0);
-    // the firstChild of the header is a Text node:
-    header.firstChild.data = "A dynamic document";
-    // now the header is "A dynamic document".
-
-    var para = document.getElementsByTagName("P").item(0);
-    para.firstChild.data = "This is the first paragraph.";
-
-    // create a new Text node for the second paragraph
-    var newText = document.createTextNode("This is the second paragraph.");
-    // create a new Element to be the second paragraph
-    var newElement = document.createElement("P");
-    // put the text in the paragraph
-    newElement.appendChild(newText);
-    // and put the paragraph on the end of the document by appending it to
-    // the BODY (which is the parent of para)
-    para.parentNode.appendChild(newElement);
-  }
- -

{{ EmbedLiveSample('A_simple_example', 800, 300) }}

- -

You can see this script as a complete example.

- -

How can I learn more?

- -

Now that you are familiar with the basic concepts of the DOM, there is a document explaining the DOM Level 1 fundamental methods. It is the follow-up to this document.

- -

See also the DOM Level 1 Core specification from the W3C. It's a reasonably clear spec, although it is formal. The main thing that's useful to authors is the description of the different DOM objects and all their properties and methods. Also see our other DOM documentation.

- -
-

Original Document Information

- -
    -
  • Author(s): L. David Baron <dbaron at dbaron dot org>
    • -
  • Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a Creative Commons license
    • -
-
diff --git "a/files/es/uso_del_n\303\272cleo_del_nivel_1_del_dom/index.html" "b/files/es/uso_del_n\303\272cleo_del_nivel_1_del_dom/index.html" deleted file mode 100644 index 1e5b13b9a6..0000000000 --- "a/files/es/uso_del_n\303\272cleo_del_nivel_1_del_dom/index.html" +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Uso del núcleo del nivel 1 del DOM -slug: Uso_del_núcleo_del_nivel_1_del_DOM -tags: - - DOM - - Todas_las_Categorías ---- -

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

- -
    -
  • Author(s): L. David Baron <dbaron at dbaron dot org>
    • -
  • Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a Creative Commons license
    • -
-
diff --git a/files/es/vigilar_plugins/index.html b/files/es/vigilar_plugins/index.html deleted file mode 100644 index 2e5c6a0863..0000000000 --- a/files/es/vigilar_plugins/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Vigilar plugins -slug: Vigilar_plugins -tags: - - Firefox 3 - - Plugins - - Todas_las_Categorías ---- -

{{ Fx_minversion_header(3) }} -

-

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/web/accesibilidad/comunidad/index.html b/files/es/web/accesibilidad/comunidad/index.html deleted file mode 100644 index 34acce8e6e..0000000000 --- a/files/es/web/accesibilidad/comunidad/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Comunidad -slug: Web/Accesibilidad/Comunidad -tags: - - Accesibilidad - - Todas_las_Categorías -translation_of: Web/Accessibility/Community ---- -

 

-

Si conoces alguna lista de correo, grupo de noticias, foro, o comunidad relacionada con la - - accesibilidad - que pueda ser de interés. Por favor, pon aquí un enlace.

-

Mozilla

-
    -
  • La - - Accesibilidad - en la comunidad Mozilla... en inglés
    • -
-

{{ DiscussionList("support-accessibility", "mozilla.support.accessibility") }}

-

Listas de correo

-
    -
  • Accesoweb Lista en castellano sobre problemas y soluciones de diseño accesible para la Red de la Fundación Sidar.
    • -
-

Foros

-
    -
  •  
    • -
-

 

-

Bitácoras

- -

Wikis

-
    -
  •  
    • -
-

 

-

Otros Sitios

- -

categorías

diff --git a/files/es/web/accesibilidad/index.html b/files/es/web/accesibilidad/index.html deleted file mode 100644 index ea30623a6d..0000000000 --- a/files/es/web/accesibilidad/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Accesibilidad -slug: Web/Accesibilidad -tags: - - Accesibilidad - - Todas_las_Categorías -translation_of: Web/Accessibility ---- -
Guía Breve de Accesibilidad Web
-Las cuatro cosas básicas y un montón de buenos enlaces.
- -

La accesibilidad web (a menudo abreviada como A11y) se refiere a la posibilidad de acceso a los diferentes sitios web y a todo su contenido por todas las personas, independientemente de sus limitaciones fìsicas (discapacidad) o las derivadas del contexto de uso (tecnológicas o ambientales).{{ Ref(1) }}

- -

Para muchas personas, la tecnología facilita las cosas. Para las personas con algun tipo de discapacidad, la tecnología hace las cosas posibles. Accesibilidad significa desarrollar contenido para que sea lo más accesible posible sin importar las habilidades físicas y cognitivas de un individuo y sin importar cómo acceda a la web.

- -

" La Web está diseñada fundamentalmente para que funcione para todas las personas , independientemente de su hardware, software, idioma, cultura, ubicación, capacidad física o mental.

- -

El máximo organismo dentro de la jerarquía de Internet que se encarga de promover la accesibilidad es el W3C, en especial su grupo de trabajo WAI.

- - - - - - - - -
-

Documentación

- -
-
Introducción a la Accesibilidad Web (externo)
-
WAI: estrategias, pautas, recursos para hacer la Web accesible a personas con discapacidad.
-
- -
-
Pautas de Accesibilidad al Contenido en la Web 1.0 (externo)
-
"Estas pautas explican cómo hacer accesibles los contenidos de la Web a personas con discapacidad."
-
- -
-
Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1.0
-
Este documento es el punto de acceso a una serie de documentos relacionados que describen técnicas para satisfacer los requisitos definidos en las "Pautas de Accesibilidad al Contenido en la Web 1.0"
-
- -
-
FAQ sobre las "Pautas de Accesibilidad al Contenido en la Web 1.0"
-
Esta página de preguntas frecuentes proporciona información sobre la recomendación W3C WACG 1.0. Es una traducción de Fact Sheet for "Web Content Accessibility Guidelines 1.0"
-
- -
-
-
When authored according to these guidelines, XUL is capable of generating accessible user interfaces. Coders, reviewers, designers and QA engineers should be familiar with these guidelines.
-
- -

Ver más...

- 		-

Comunidad

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

{{ DiscussionList("support-accessibility", "mozilla.support.accessibility") }}

- -

Ver más...

- -

Herramientas

- - - -

Ver más...

- -

Temas relacionados

- -
-
· Desarrollo Web · Desarrollando Mozilla ·
-
-
- -
-

{{ Note(1) }} Definición de la Wikipedia

- -

Categorias

- -

Interwiki Language Links

- -

{{ languages( { "en": "en/Accessibility", "fr": "fr/Accessibilit\u00e9", "ja": "ja/Accessibility", "pl": "pl/Dost\u0119pno\u015b\u0107" } ) }}

diff --git a/files/es/web/accesibilidad/understanding_wcag/etiquetas_de_texto_y_nombres/index.html b/files/es/web/accesibilidad/understanding_wcag/etiquetas_de_texto_y_nombres/index.html deleted file mode 100644 index ffaade2cb1..0000000000 --- a/files/es/web/accesibilidad/understanding_wcag/etiquetas_de_texto_y_nombres/index.html +++ /dev/null @@ -1,266 +0,0 @@ ---- -title: Etiquetas de texto y nombres -slug: Web/Accesibilidad/Understanding_WCAG/Etiquetas_de_texto_y_nombres -tags: - - Accesibilidad - - Etiquetas de texto - - WCAG -translation_of: Web/Accessibility/Understanding_WCAG/Text_labels_and_names ---- -

Hay muchas situaciones en las cuales un control, dialogo o cualquier otra característica de un sitio web deberían recibir un nombre o etiqueta descriptiva para permitir a los usuarios de técnologías asistivas entender cual es su propósito y ser capaz de entenderlo y operarlo correctamente. Hay un número de diferentes tipos de problemas en esta categoría, dependientes del contexto, y cada uno tiene su propia solución. Los diferentes problemas y soluciones son discutidas en las secciones posteriores.

- -

Utilizar el atributo alt para etiquetar elementos que ocupen un área que tiene el atributo href

- -

En mapas de imágenes, cada elemento {{htmlelement("area")}} con un atributo alt definiendo un nombre que describa el recurso al que enlaza el area. Fallar al hacer eso provoca que un mapa de imagen sea difícil de usar para usuarios que usen tecnología asistiva — ellos necesitan texto alternativo para ser capaces de entender el propósito de una imagen.

- -

Ejemplos

- -

El siguiente ejemplo muestra un simple mapa de imagen (tomada de H24: Providing text alternatives for the area elements of image maps):

- -
<img src="welcome.gif" usemap="#map1"
-    alt="Areas in the library. Select an area for
-more information on that area." />
-<map id="map1" name="map1">
-  <area shape="rect" coords="0,0,30,30"
-    href="reference.html" alt="Reference" />
-  <area shape="rect" coords="34,34,100,100"
-    href="media.html" alt="Audio visual lab" />
-</map>
- -

Ver la página de referencia del elemento <area> para unu ejemplo interactivo.

- -

Ver también

- - - -

Los diálogos deberían ser etiquetados

- -

Para cualquier contenedor cuyo contenido actue como una caja de diálogo (por ejemplo, un modal preguntando al usuario realizar una elección o responder a una acción siendo tomada), debe tener una etiqueta descriptiva o nombre, para que la tecnología asistiva le permita al usuario descrubir fácilmente cual es su propósito.

- -

Una caja de diálogo es generalmente denominada con un ARIA role="dialog" o role="alertdialog"; se puede usar tanto el atributo aria-label o aria-labelledby para proporcionar una etiqueta.

- -

Ejemplos

- -

El siguiente ejemplo muestra una caja de dialogo sencilla, definida como role="dialog" y etiquetada con aria-labelledby.

- -
<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
-  <h2 id="dialog1Title">Your personal details were successfully updated</h2>
-  <p id="dialog1Desc">You can change your details at any time in the user account section.</p>
-  <button>Close</button>
-</div>
- -

Si la caja de diálogo no tiene un encabezado, se puede usar aria-label para contener la etiqueta de texto:

- -
<div role="dialog" aria-label="Personal details updated confirmation">
-  <p>Your personal details were successfully updated. You can
-    change your details at any time in the user account section.</p>
-  <button>Close</button>
-</div>
- -

Ver también

- - - -

Los documentos deben tener un título

- -

Es importante que cada documento HTML, incluya un elemento {{htmlelement("title")}} que describa el propósito de la página. Una técnica común de navegación para usuarios que usan tecnologías asistivas es inferir el contenido de la página leyendo su título. Si no hay título disponible, tienen que navegar por la página para determinar su contenido, lo cual puede ser un proceso largo y confuso.

- -

Ejemplos

- -

El título para el artículo de refencia sobre el elemento {{htmlelement("title")}} es como sigue:

- -
<title>&lt;title&gt;: The Document Title element - HTML: Hypertext Markup Language | MDN</title>
- -

Otro ejemplo podría ser:

- -
<title>Fill in your details to register — myGov services</title>
- -

Para ayudar al usuario, se puede actualizar el titulo de la página para reflejar cambios significativos al estado de la página (como problemas en la validación de un formulario):

- -
<title>2 errors — Fill in your details to register — myGov services</title>
- -

Ver también

- -
    -
  • {{htmlelement("title")}}
    • -
- -

Contenido incrustado debe ser etiquetado

- -

Asegurarse que elementos que incrusten contenido tengan un atributo título que describa el contenido incrustado. Esto incluye al elemento {{htmlelement("embed")}} y al elemento {{htmlelement("object")}}. Estos elementos son usualmente definidos por un contenido gráfico, similar a un elemento {{HTMLelement("img")}}. Un título descriptivo ayuda a los usuarios de tecnologías asistivas entender que muestra el elemento.

- -

Figuras con leyendas opcionales deberían ser etiquetadas

- -

Para una mejor accesibilidad, incluir un {{HTMLElement("figcaption")}} dentro de un elemento {{HTMLElement("figure")}}, incluso si hacerlo es opcional técnicamente. La leyenda es adicional a cualquier texto alternativo en las imágenes dentro de la figura. La leyenda describe el proósito de una figura en el documento, que puede ser diferente de una descripción sencilla de un elemento visual, tal como lo proporciona el texto alternativo.

- -

Ejemplo

- -

El siguiente ejemplo muestra código para una figura con un pie de página. El atributo alt del elemento {{htmlelement("img")}} describe la apariencia de la imagen; el elemento {{htmlelement("figcaption")}} lo describe desde una perspectiva funcional (en este caso, el nombre en latín de la flor de la imagen).

- -
<figure>
-  <img src="milkweed.jpg"
-      alt="Black and white close-up photo of milkweed flowers">
- <figcaption>Asclepias verticillata</figcaption>
-</figure>
-
- -

Los elementos de un conjuto campos deben ser etiquetados

- -

Los elementos de un conjunto de campos (fieldset) deben tener un texto descriptivo, similar a otros elementos del formulario. Utilice el elemento {{htmlelement("legend")}} para describir el propósito de un conjunto de campos (fieldset).

- -

Utilizar una leyenda para etiquetar un conjunto de campos

- -

Al agrupar un conjunto de elementos de un formulario con un elemento {{htmlelement("fieldset")}}, se debería incluir un elemento {{htmlelement("legend")}} anidado dento de éste, conteninedo una clara descripción del grupo.

- -

Usuarios de tecnologías asistivas encuentras esta descripción útil cuando tratan de entender el propósito del grupo. Sin la leyenda, tienen que navegar individualmente por todos los controles del formulario en el grupo para inferir una idea del propósito general, lo que puede resultar confuso.

- -

Ejemplo

- -
<form>
-  <fieldset>
-    <legend>Choose your favorite monster</legend>
-
-    <input type="radio" id="kraken" name="monster">
-    <label for="kraken">Kraken</label><br/>
-
-    <input type="radio" id="sasquatch" name="monster">
-    <label for="sasquatch">Sasquatch</label><br/>
-
-    <input type="radio" id="mothman" name="monster">
-    <label for="mothman">Mothman</label>
-  </fieldset>
-</form>
- -

Puede ver un ejemplo interactivo en la página de referencia de <fieldset>.

- -

Ver también

- -
    -
  • {{htmlelement("fieldset")}}
    • -
  • {{htmlelement("legend")}}
    • -
- -

Los elementos de un formulario deben estar etiquetados

- -

Todos los elementos dentro de un formulario deben tener un elemento {{htmlelement("label")}} que identifique su propósito. Esto aplica a todos los tipos de elementos {{htmlelement("input")}}, como también para elementos {{htmlelement("button")}}, {{htmlelement("output")}}, {{htmlelement("select")}}, {{htmlelement("textarea")}}, {{htmlelement("progress")}} y {{htmlelement("meter")}}, como para cualquier elemento con el ARIA role switch.

- -

El elemento del formulario puede ser puesto dentro de un elemento {{htmlelement("label")}}, en cuyo caso la asociación entre el elemento del formulario y la etiqueta es obvia por la estructura. O, se puede crear una asociación entre un {{htmlelement("label")}} y el elemento del formulario al especificar el valor id del elemento del formulario y el valor del atributo for de la etiqueta.

- -

Ejemplos

- -
<label>I agree to the terms and conditions.
-  <input type="checkbox" id="terms">
-</label>
-
-<input type="checkbox" id="emailoptin">
-<label for="emailoptin">Yes, please send me news about this product.</label>
-
- -

Los elementos de un formulario deberían tener una etiqueta de texto visible

- -

En adición a tener un elemento {{htmlelement("label")}} para cada elemento del formulario, estas etiquetas deberían ser visibles, no ocultarse. Las etiquetas visbles ayudan a todos los usuarios entender el propósito de un elemento de formulario. No dependa de un texto temporal porque éste desaparece tan pronto como el usuario empieza a escribir.

- -

Los elementos marco ('frame') deben estar etiquetados

- -

Los elementos marco ('frame'), tanto {{htmlelement("iframe")}} como el obsoleto y antiguo {{htmlelement("frame")}}, deben tener un título para describir el contenido del marco. Utilice el atributo title para etiquetar un elemento 'frame'. Sin un título, los usuarios que usen una tecnología asistiva tienen que navegar dentro del marco para entender que contiene, lo que puede ser difícil y confuso. 

- -

El elemento <frame> ya no forma parte de la especificación HTML en la versión HTML5. El soporte podría ser abandonado por los navegadores en el futuro. Además, es difícil para los lectores de pantalla el navegar páginas con elementos <frame>. Para una mejor accesibilidad y mantenimiento futuro, se debe rediseñar cualquier página que use marcos y reemplazarlos con el uso de CSS para lograr un diseño similar.

- -

Como una mejor práctica, también proporcionar un {{htmlelement("title")}} para el documento que esta encapsulado en el marco, con un contenido identico al atributo title del marco. (Esto asumiendo que el documento encapsulado esta en control de uno, si no, tratar de coincidir el atributo title del marco con el título del documento.) Algunos lectores de pantalla reemplazan el contenido del atributo title con el contenido del {{htmlelement("title")}} del documento encapsulado. Es más seguro y más accesible el proporcionar el mismo título en ambos lugares.

- -

Ejemplos

- -
<iframe
-    title="MDN Web docs"
-    width="300"
-    height="200"
-    src="https://developer.mozilla.org">
-</iframe>
-
-
- -

Usar el atributo alt para etiquetar elementos mglyph

- -

Al escribir ecuaciones con MathML, a cada elemento {{mathmlelement("mglyph")}} se le debe asignar el atributo alt conteniendo un nombre que describa el símbolo. Puesto que los elementos mglyph son usados para símbolos no estándar sin definiciones Unicode, los lectores de pantalla no serán capaces de automáticamente nombrarlos. El texto alternativo ayuda a los usuarios de lectores de pantalla entender el símbolo.

- -

Los encabezados deben ser etiquetados

- -

Asegurarse que los encabezados tengan un contenido no vacío y no estén ocultos como con el CSS display:none o aria-hidden=true. Los usuarios de lectores de pantalla confían en los encabezados para entender la estructura y el contenido de un documento.

- -

Además, es importante usar los elementos de encabezado sólo para los encabezados de sección reales, y no como una forma rápida de hacer que el texto se destaque. Los lectores de pantalla suelen "hojear" los encabezados de una página, de manera muy parecida a los usuarios con visión, el texto que no sea encabezado que se marca con elementos de encabezamiento puede causar confusión.

- -

Los encabezados deberían tener contenido de texto visible

- -

Asegurarse que los encabezados tengan un contenido no vacío y no estén ocultos como con el CSS display:none or aria-hidden=true. Los usuarios de lectores de pantalla confían en los encabezados para entender la estructura y el contenido de un documento. No use encabezados para marcar imágenes u otro contenido gráfico.

- -

Utilizar el atributo title para describir el contenido de un <iframe>

- -

Asegurarse que los elementos {{htmlelement("iframe")}} tienen un atributo title para describir el contenido de un marco. Sin un título, los usuarios de tecnologías asistivas tienen que navegar dentro del marco para entender que contiene, lo que puede ser difícil y confuso. 

- -

Una mejor práctica consiste en proveer un {{htmlelement("title")}} al documento encapsulado por el marco, con un contenido identico al atributo title del marco. (Asumiendo que el documento encapsulado es propio, si no, tratar de hacer coincidir el atributo title del marco con el título del documento.) Algunos lectores de pantalla reemplazan el contenido del atributo title con el contenido del {{htmlelement("title")}} del documento encapsulado. Es más seguro y accesible definir el mismo título en ambos lugares.

- -

Contenido con imágenes deben ser etiquetados

- -

Proporcionar un texto descriptivo para todas las imágenes y elementos parecidos a imágenes que tengan contenido (es decir que no sean decorativos. Esto incluye imágenes SVG, elementos {{htmlelement("img")}}, {{htmlelement("canvas")}}, {{htmlelement("map")}}, y {{htmlelement("area")}}, así como elementos {{htmlelement("input")}} donde este definido type=image y elementos {{htmlelement("object")}} donde el type empiece con image/. La forma típica de hacer esto es con el atributo alt. Asegurarse de que la descripción trasmite lo que muestra la imagen

- -

Ejemplo

- -
<img src="milkweed.jgp"
-     alt="Black and white close-up photo of milkweed flowers">
- -

Elementos interactivos deben ser etiquetados

- -

Si un elemento esta destinado para que los usuarios interactúen con él, debe estar etiquetado. Los elementos interactivos incluyen enlaces ({{htmlelement("a")}}), elementos de un formulario, botones, y cualquier elemento que tenga manejadores de eventos para ratón o teclado. La forma para etiquetar un elemento depende de su tipo: para elementos de un formulario, utilizar un {{htmlelement("label")}}; para enlaces, botones y elementos sobre los que se puede hacere click, el contenido del texto del elemento suele proporcionar la etiqueta. Si no existe otra opción para etiquetar un elemento, utilizar el atributo aria-label.

- -

Usar el atributo label en elementos optgroup

- -

En un elemento {{htmlelement("optgroup")}}, utilizar el atributo label para describir el gupo para que tecnologías asistivas puedan acceder a dicha descripción para sus usuarios.

- -

Ejemplo

- -

En este ejemplo, el atributo label en los elementos <optgroup> da un nombre de categoría para el grupo de opciones.

- -
<label for="dino-select">Choose a dinosaur:</label>
-<select id="dino-select">
-    <optgroup label="Theropods">
-        <option>Tyrannosaurus</option>
-        <option>Velociraptor</option>
-        <option>Deinonychus</option>
-    </optgroup>
-    <optgroup label="Sauropods">
-        <option>Diplodocus</option>
-        <option>Saltasaurus</option>
-        <option>Apatosaurus</option>
-    </optgroup>
-</select>
- -

Las barras de herramientas deben ser etiquetadas cuando haya más de una barra

- -

Si se define más una barra de herramientas en una aplicación web utilizando el rol ARIA toolbar, se debe usar el atributo aria-label para etiquetar cada una de ellas de manera que pueda ser descrita por la tecnología de asistencia. Es una buena práctica etiquetar una barra de herramientas aún cuando solo haya una en la página

- -

Ver también

- - - -

Criterios de aprobación relacionados a WCAG

- -
-
1.1.1 Contenido no textual (A)
-
Todo contenido no textual que es presentado al usuario tiene un texto alternativo que sirve un propósito similar, excepto para las situaciones listadas en el enlace anterior.
-
2.4.4 Propósito del enlace (en contexto) (A)
-
El propósito de cada enlace puede determinarse a partir del texto del enlace o del texto del enlace en conjunto con contexto determinado programáticamente, salvo cuando el propósito del enlace sea ambiguo para los usuarios en general.
-
2.4.9 Propósito del enlace (sólo el enlace) (AAA)
-
Se dispone de un mecanismo que permite identificar el propósito de cada enlace a partir del texto del enlace solamente, excepto cuando el propósito del enlace es ambiguo para los usuarios en general.
-
diff --git a/files/es/web/accesibilidad/understanding_wcag/index.html b/files/es/web/accesibilidad/understanding_wcag/index.html deleted file mode 100644 index f58fae9c48..0000000000 --- a/files/es/web/accesibilidad/understanding_wcag/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Understanding the Web Content Accessibility Guidelines -slug: Web/Accesibilidad/Understanding_WCAG -translation_of: Web/Accessibility/Understanding_WCAG ---- -

Esto es parte de un grupo de artículos que explican rápidamente los pasos necesario para cumplir con la normativa de W3C Web Content Accessibility Guides 2.0 o 2.1 (también conocida como WCAG).

- -

La norma WCAG 2.0 y 2.1 provee unas guías detalladas para lograr que el contenido de nuestro sitio sea accesible para personas con distintos tipos de discapacidades. Es exhaustivo y muy detallado, por lo que cuesta comprenderlo rápidamente. Por esta razón, hemos resumido los pasos a seguir para que puedas cumplir con las diferentes recomendaciones e incluimos links al pie para más detalles en los lugares necesarios.

- -

Los cuatro principios

- -

La normativa WCAG tiene cuatro secciones, cuatro categorías en las cuales el contenido debe ser accesible (para más información puedes referirte a Understanding the Four Principles of Accessibility (inglés)).

- -

Cada uno de los siguientes enlaces te llevarán a páginas en las que podrás expandir tu conocimiento en cada una de las áreas de WCAG 2.0 y 2.1.

- -
    -
  • Perceptible: Los usuarios deben poder percibir el contenido de alguna forma, a través de alguno de sus sentidos.
    • -
  • Operable: Los usuarios deben poder controlar los elementos de interfaz (por ejemplo, se deben poder cliquear botones de alguna forma, ya sea utilizando el ratón, teclado o comando de voz).
    • -
  • Comprensible: El contenido debe ser comprensible para los usuarios.
    • -
  • Robusto: El contenido debe ser desarrollado utilizando estándares actuales que funcionarán en todos los navegadores del momento, hoy y en el futuro.
    • -
- -

Debo usar WCAG 2.0 o 2.1?

- -

WCAG 2.1 es el estándar más reciente y relevante. Utilízalo para mejorar la calidad de navegación de los usuarios con discapacidades y para reducir las posibles acciones legales a los dueños del sitio web.

- -

Al momento de asignar recursos, ten como objetivo WCAG 2.0, luego sube a 2.1.

- -

¿Qué es WCAG 2.1?

- -

WCAG 2.1 fue publicado el 5 de junio de 2018 como recomendación oficial. La Unión Europea (EU) lo adoptó como estándar en septiembre de ese mismo año. La W3C publicó un anuncio de prensa al respecto.

- -

WCAG 2.1 incluye:

- - - - - -

Esta guía tiene como objetivo proveer información para que puedas construir mejores sitios, más accesibles. Sin embargo, no somos abogados y nada de esto es un asesoramiento legal. Si estás preocupado/a por las implicaciones legales de la accesibilidad web recomendamos que investigues la legislación de tu país o que consultes a un abogado calificado.

- -

¿Qué es la accesibilidad? y guías de accesibilidad y sobre la ley proveen más información al respecto (en inglés).

diff --git a/files/es/web/accesibilidad/understanding_wcag/perceivable/color_contraste/index.html b/files/es/web/accesibilidad/understanding_wcag/perceivable/color_contraste/index.html deleted file mode 100644 index 2db0f4e251..0000000000 --- a/files/es/web/accesibilidad/understanding_wcag/perceivable/color_contraste/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Contraste del color -slug: Web/Accesibilidad/Understanding_WCAG/Perceivable/Color_contraste -tags: - - Accesibilidad - - Perceptible - - contraste -translation_of: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast ---- -

El contraste del color entre el fondo y el contenido del primer plano (que suele ser texto) debe ser lo suficientemente alto como para garantizar la legibilidad.

- -

Al diseñar interfaces legibles para diferentes capacidades de visión, las directrices de la WCAG recomiendan las siguientes relaciones de contraste:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Tipo de contenidoRelación mínima (nivel AA)Relación mejorada (nivel AAA)
Cuerpo de texto4.5 : 17 : 1
Texto a gran escala (120-150% mayor que el cuerpo de texto)3 : 14.5 : 1
Componentes activos de la interfaz de usuario y objetos gráficos como iconos y gráficos3 : 1No definido
- -

Estas proporciones no se aplican al texto "incidental", como controles inactivos, logotipos o texto puramente decorativo.

- -

Consulta la sección {{anch("Solución")}} a continuación para obtener más información.

- -

Tener un buen contraste de color en tu sitio web beneficia a todos tus usuarios, pero es particularmente beneficioso para los que tienen cierto tipo de ceguera al color y otras afecciones similares, como los que experimentan una baja sensibilidad al contraste y tienen dificultades para diferenciar colores parecidos. Esto se debe a que no distinguen las áreas brillantes y oscuras con tanta facilidad como las personas que no tienen esa discapacidad, y por lo tanto tienen problemas para ver los bordes y otros detalles.  

- -

Es bueno tener un diseño atractivo en tu sitio web, pero el diseño es inútil si tus usuarios no pueden leer el contenido.

- -

Ejemplos

- -

Veamos algunos ejemplos simples con código HTML y CSS:

- -
<div class="good">Buen contraste</div>
-<div class="bad">Mal contraste</div>
- -
div {
-  /* General div styles here */
-}
-
-.good {
-  background-color: #fae6fa;
-}
-
-.bad {
-  background-color: #400064;
-}
- -

Ambos fragmentos de texto tienen color negro por defecto. El <div> "good" tiene un color de fondo púrpura claro, lo que hace que el texto sea fácil de leer:

- - - -

{{EmbedLiveSample('example1', '100%', '100')}}

- -

El <div> "bad", por otro lado, tiene un color de fondo púrpura muy oscuro, lo que hace que el texto sea mucho más difícil de leer:

- - - -

{{EmbedLiveSample('example2', '100%', '100')}}

- -
-
- -

Solución

- -

Al elegir un esquema de color para tu sitio web, selecciona colores de primer plano y de fondo que tengan un buen contraste. Haz que el contraste de color sea lo mejor posible dentro de las limitaciones de tu diseño — preferiblemente elige el nivel AAA (ver 1.4.6 más abajo), pero al menos cumple con el nivel AA (ver 1.4.3 más abajo).

- -

Si incluyes contenido no textual, como vídeo o animación, debes seguir 1.4.11 (nuevamente, ver más abajo).

- -

Para verificar el contraste a medida que seleccionas los colores puedes utlizar una herramienta como Color Contrast Checker de WebAIM.

- -

También puedes comprobar el contraste de color sobre la marcha utilizando las herramientas para desarrolladores de Firefox— ver nuestra guía Accessibility inspector, y en particular la sección Check for accessibility issues. Prueba a usarlo en los ejemplos en vivo en la sección de descripción.

- -

Criterios de conformidad relacionados con WCAG

- -
-
1.4.3 Contraste mínimo (AA)
-
El contraste de color entre el fondo y el contenido del primer plano debe tener un nivel mínimo para garantizar la legibilidad: -
    -
  • El texto y el fondo deben tener una relación de contraste de al menos 4.5:1.
    • -
  • Los encabezados (o simplemente el texto más grande) deben tener una relación de contraste de al menos 3:1. El texto más grande se define como de al menos 18pt, o 14pt en negrita.
    • -
-
-
1.4.6 Contraste mejorado (AAA)
-
Esto sigue y se basa en el criterio 1.4.3. -
    -
  • El texto y el fondo deben tener una relación de contraste de al menos 7:1.
    • -
  • Los encabezados (o simplemente el texto más grande) deben tener una relación de contraste de al menos 4.5:1.
    • -
-
-
1.4.11 Contraste no textual (AA) (añadido en 2.1)
-
Debe haber una relación mínima de contraste de color de 3 a 1 para los componentes de la interfaz de usuario y los objetos gráficos.
-
- -

Ver también

- - diff --git a/files/es/web/accesibilidad/understanding_wcag/perceivable/index.html b/files/es/web/accesibilidad/understanding_wcag/perceivable/index.html deleted file mode 100644 index 6bf99039f8..0000000000 --- a/files/es/web/accesibilidad/understanding_wcag/perceivable/index.html +++ /dev/null @@ -1,336 +0,0 @@ ---- -title: Perceivable -slug: Web/Accesibilidad/Understanding_WCAG/Perceivable -translation_of: Web/Accessibility/Understanding_WCAG/Perceivable ---- -

Este artículo ofrece consejos prácticos sobre cómo hacer que tu sitio web cumpla con los criterios de Percepción de WCAG 2.0 y 2.1. Los estados perceptivos que los usuarios deben poder reconocer utilizando alguno de sus sentidos.

- -
-

Nota: Para leer las definiciones de la W3C sobre Percepción y las guías para cumplir con los criterios dirígete a Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

-
- -

Pauta 1.1 — Dar alternativas de texto para contenido no textual.

- -

La clave aquí es convertir el texto a otros formatos que puedan ser entendidos por personas con otras capacidades; ya sea si utilizan un screen-reader, zoom o un lector de braille. El contenido no textual se refiere a elementos multimedia como imágenes, audio y vídeo.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Criterio de éxitoCómo cumplirRecursos prácticos
1.1.1 Alternativas textuales  (A)Toda imagen que sea útil para el usuario debe tener un texto alternativo.Texto alternativo.
-

Las imágenes complejas o gráficos deben tener una alternativa accesible, ya sea en al misma página o en una externa. Utiliza un elemento de link en vez del atributo longdesc.

- 		-

Una alternativa textual o una tabla puede resolverlo (ver HTML table advanced features and accessibility y Other text alternative mechanisms para leer sobre el argumento en contra de longdesc.

-
El contenido multimedia (por ejemlo, audio o vídeo) debería tener por lo menos una descripción accesible disponible (captions o similar). -

Ver alternativas de texto para opciones de captions, y Audio transcripts, Video text tracks o Other multimedia content para otras alternativas.

-
Los elementos de interfaz como botones o elementos de formulario deberán tener labels que describan su propósito.Deberás asegurarte de que los botones describan su función (por ejemplo, <button>Subir imagen</button>). Para más información ver UI controls.
-

Implementa elementos decorativos (imágenes o vídeos) de manera que sea invisibles para lectores de pantalla, de esta forma evitarás confundir a estos usuarios.

- 		-

Las imágenes decorativas deben ser implementadas utilizando la propiedad background-image. Si debes incluir una imagen con la etiqueta {{htmlelement("img")}} deberás agregarle un atributo alt vacío, de otra manera los lectores de pantalla podrían leerlo.

- -

Si incluyes un vídeo o audio en tu sitio que se reproduce automáticamente intenta de que sea lo menos molesto posible. No hagas que se vea ni actúe como contenido y provee una forma de apagarlo.

-
- -
-

Nota: Ver también WCAG description for Guideline 1.1: Text alternatives.

-
- -

Pauta 1.2 — Proporcionar alternativas para los medios tempo-dependientes.

- -

Los medios tempo-dependientes se refieren a multimedia con una duración (audio y vídeo, por ejemplo). Ten en cuenta que si este contenido multimedia funciona como una alternativa a un contenido textual no necesitas proveer otra alternavtiva.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Criterio de éxitoCómo cumplirRecursos prácticos
1.2.1 Provee alternativas para multimedia de solo audio o solo vídeo (A)A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video).See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.2 Provee captions para los vídeos (A)You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video.See Video text tracks for HTML5 video captions, and Other multimedia content for other technologies. See also Add your own subtitles & closed captions (YouTube).
-

1.2.3 Provee texto alternativo o una descripción para el audio del vídeo (A)

- 		You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone.See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.4 Provee captions para audio en vivo (AA)You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.) 
1.2.5 Provee descripciones de adio para vídeo pre-grabado (AA)Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video. 
1.2.6 Provee lenguaje de signos equivalente a el audio pre-grabado (AAA)An equivalent sign language video should be provided for any prerecorded content containing audio. 
1.2.7 Provee un vídeo extendido con descripciones de audio (AAA)Where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g. there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions). 
1.2.8 Provee una alternativa para los elementos multimedia pre-grabados (AAA)For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content.See Audio transcripts for transcript information.
1.2.9 Provee una transcripción para el audio en vivo (AAA)For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content.See Audio transcripts for transcript information.
- -
-

Nota: Ver también la descripción de WCAG Guideline 1.2: Time-based Media: Provide alternatives for time-based media.

-
- -

Pauta 1.3 — Crear contenido que pueda presentarse de diferentes formas

- -

Esta pauta hace referencia a la posibilidad de que todo contenido pueda ser consumido de distintas formas, adaptándose a las necesidades del usuario.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Criterios de éxitoCómo cumplirRecursos prácticos
1.3.1 Info and relationships (A) -

Any content structure — or visual relationship made between content —  can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are:

- -
    -
  • Text labels and the form elements they describe are associated unambiguously using the {{htmlelement("label")}} element, which can be picked up by screenreaders, etc.
    • -
  • Image alt text — content images should have text available that clearly describes the image's contents, which can be programmatically associated with it (e.g. alt text), or otherwise is easy to associate (e.g. describes it and is sat right next to it). This should means that the full meaning can still be inferred even if you can't see the image.
    • -
  • Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}).
    • -
- 		The whole of -

HTML: A good basis for accessibility is packed with information about this, but you should particularly refer to Good semantics, UI controls, and Text alternatives.

-
1.3.2 Meaningful content sequence (A)A sensible, logical reading order should be easy to determine for any content, even if it is visually presented in an unusual way. The order should be made obvious by use of correct semantic elements (e.g. headings, paragraphs), with CSS being used to create any unusual layout styles, irrespective of the markup.Again, refer to HTML: A good basis for accessibility.
1.3.3 Sensory characteristics (A) -

Instructions for operating controls or understanding content do not rely on a single sense — this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. So for example:

- -
    -
  • "Click the round button to continue" — The button should be clearly labelled so that it is obvious that it is the button you need to press. If there are multiple buttons, make sure there are all clearly labelled to distinguish their function.
    • -
  • "Listen to the audio instructions for guidance" — This is obviously problematic — audio will be inaccessible to those with heading impairments, whereas text can be read, but also spoken by a screenreader if required.
    • -
  • "Swipe from the right hand side of the screen to reveal the menu" — some users might not be able to swipe the screen, either due to disability or because their device does not support touch. An alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means.
    • -
- -
-

Note: Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.

-
- 		 
1.3.4 Orientation (AA) added in 2.1Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. -

Understanding Orientation 

-
1.3.5 Identify Input Purpose (AA) added in 2.1 -

 

- -

Follow the list of 53 input fields to programmatically identify the purpose of a field.   

- 		Understanding Identify Input Purpose
1.3.6 Identify Purpose (AAA) added in 2.1In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.Understanding Identify Purpose
- -
-

Nota: Ver también la descripción de WCAG: Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.

-
- -

Pauta 1.4: Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo

- -

Esta pauta tiene como objetivo la creación de contenido que sea fácil de diferenciar del fondo y otras decoraciones. El ejemplo clásico es sobre color (tanto en relación al contraste como utilizarlo para transmitir información), pero aplica también en otras situaciones.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Criterios de éxitoCómo cumplirRecursos prácticos
1.4.1 Use of color (A) -

Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of "required" would be more appropriate.

- 		See Color and color contrast and Multiple labels.
1.4.2 Audio controls (A)For any audio that plays for longer than three seconds, accessible controls should be provided to play and pause the audio/video, and mute/adjust volume.Use native <button>s to provide accessible keyboard controls, as shown in Video player syling basics.
1.4.3 Minimum contrast (AA) -

The color contrast between background and foreground content should be at a minimum level to ensure legibility:

- -
    -
  • Text and its background should have a contrast ratio of at least 4.5.1.
    • -
  • Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold.
    • -
- 		See Color and color contrast.
1.4.4 Resize text (AA)The page should be readable and usable when the text size is doubled. This means that designs should be responsive, so that when the text size is increased, the content is still accessible. 
1.4.5 Images of text (AA)Images should NOT be used to present content where text would do the job. For example, if an image is mostly textual, it could be represented using text as well as images. 
1.4.6 Enhanced contrast (AAA) -

This follows, and builds on, criterion 1.4.3.

- -
    -
  • Text and its background should have a contrast ratio of at least 7.1.
    • -
  • Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold.
    • -
- 		 
1.4.7 Low or no background audio (AAA)Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood. 
1.4.8 Visual presentation (AAA) -

For text content presentation, the following should be true:

- -
    -
  • Foreground and background colors should be user-selectable.
    • -
  • Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.
    • -
  • Text should not be fully justified (e.g. text-align: justify;)
    • -
  • line height should be at least 1.5 times the text size within paragraphs (e.g. line-height: 1.5;), and at least 2.25 times the text size between paragraphs (e.g. padding: 2.25rem;)
    • -
  • When the text size is doubled, the content should not need to be scrolled.
    • -
- 		 
1.4.9 Images of text (No Exception) (AAA)Text should not be presented as part of an image unless it is purely decoration (i.e. it does not convey any content), or cannot be presented in any other way. 
1.4.10 Reflow (AA) added in 2.1 -
    -
  • No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic)   
    • -
  • No vertical scrolling for top-to-bottom languages (like Japanese)
    • -
  • Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).
    • -
- 		Understanding Reflow
1.4.11 Non-Text Contrast(AA) added in 2.1Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. Understanding Non-Text Contrast
1.4.12 Text Spacing (AA) added in 2.1 -

No loss of content or functionality occurs when the following styles are applied: 

- -
    -
  • Line height (line spacing) to at least 1.5 times the font size;
    • -
  • Spacing following paragraphs to at least 2 times the font size;
    • -
  • Letter spacing (tracking) to at least 0.12 times the font size;
    • -
  • Word spacing to at least 0.16 times the font size.
    • -
- 		Understanding Text Spacing
1.4.13 Content on Hover or Focus (AA) added in 2.1 -

Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:

- -
    -
  • dismissable (can be closed/removed)
    • -
  • hoverable (the additional content does not disappear when the pointer is over it) 
    • -
  • persistent (the additional content does not disappear without user action)
    • -
- 		Understanding Content on Hover or Focus
- -
-

Nota: Ver también la descripción de WCAG: Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background..

-
diff --git a/files/es/web/accesibilidad/understanding_wcag/teclado/index.html b/files/es/web/accesibilidad/understanding_wcag/teclado/index.html deleted file mode 100644 index 239dd6727b..0000000000 --- a/files/es/web/accesibilidad/understanding_wcag/teclado/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Teclado (Keyboard) -slug: Web/Accesibilidad/Understanding_WCAG/Teclado -tags: - - Accesibilidad - - teclado -translation_of: Web/Accessibility/Understanding_WCAG/Keyboard ---- -
Para ser completamente accesible, una página web debe ser operable por alguién utilizando únicamente un teclado para acceder y controlarla. Esto incluye usuarios de lectores de pantalla, pero también puede incluir a quienes tienen dificultades utilizando un dispositivo apuntador como un ratón o una bola de rastreo, o aquellos cuyo ratón no esta funcionando temporalmente, o la gente que simplemente prefiere usar un teclado como entrada siempre que les sea posible.
- -

Los elementos enfocables deben tener una semántica interactiva

- -

Si un elemento puede ser enfocado utilizando un teclado, entonces debería ser interactivo, es decir, el usuario debería ser capaz de hacer algo y producir un cambio de algún tipo (por ejemplo, activar un enlace o cambiar una opción).

- -
-

Nota: Una excepción importante a esta regla es si el elemento tiene aplicado role="document", dentro un contexto interactivo (como un role="application"). En tal caso, enfocar el documento anidado es la única forma de devolver la tecnología de asistencia a un estado de no interactividad (comúnmente llamado "modo navegador").

-
- -

La mayoría de los elementos son enfocables por defecto, y se puede hacer que un elemento sea enfocable al añadir el atributo tabindex=0. Sin embargo, sólo se debería añadir tabindex si el elemento también se hace interactivo, por ejemplo, definiendo los eventos de teclado apropiados para los manejadores de eventos.

- -

Ver también

- - - -

Evitar usar el atributo tabindex con un valor mayor a cero

- -

El atributo tabindex indica que un elemento es enfocable utilizando el teclado. Un valor de cero indica que el elemento es parte del orden de enfoque normal, que está basado en el orden de los elementos en el documento HTML. Un valor positivo pone al elemento adelante de aquellos con el orden normal; elementos con valores positivos son enfocados en el orden del valor de tabindex (1, luego 2, después 3, etc.).

- -

Esto genera una confusión para usuarios que solo usen el teclado cuando el orden del enfoque difiera al orden lógico de la página. Una mejor estrategia es estructurar el documento HTML para que los elementos enfocables estén es un orden lógico, sin la necesidad de reordenarlos con un valor positivo de tabindex.

- -

Ver también

- - - -

Los elementos a los que se les puede hacer click deben ser enfocables y deberían tener semánticas interactivas

- -

Si a un elemento se le puede hacer click con un dispositivo apuntador, como un ratón, entonces también debería enfocable utilizando el teclado, y el usuario debería ser capaz de hacer algo al interactuar con este.

- -

A un elemento se le puede hacer click si tiene in manejador de evento onclick definido. Se puede hacer enfocable al añadir un atributo-valor tabindex=0. Se puede hacer que se opere con un teclado al definir un manejador de evento onkeydown; en la mayoría de los casos, la acción tomada por el manejador de eventos debería ser la misma para los dos tipos de eventos

- -

Ver también

- - - -

Los elementos interactivos deben ser capaz de ser activos utilizando un teclado

- -

Si el usuario puede interactuar con un elemento utilizando el tacto o un dispositivo apuntador, entonces el elemento debería ser también capaz de interactuar con el teclado, Es decir, si hay manejadores de evento definidos para los eventos al tacto y al hacer click, también debería haber manejadores de eventos para el teclado. Los manejadores de eventos para el teclado deberían realizar la misma interacción que sus contrapartes con el tacto y al hacer click.

- -

Ver también

- -
    -
  • Manejador de evento global: onkeydown
    • -
  • Manejador de evento global: onkeyup
    • -
- -

Los elementos interactivos deben ser enfocables

- -

Si el usuario puede interactuar con un elemento (por ejemplo, usando el tacto o con un dispositivo apuntador) entonces debería ser enfocable utilizando el teclado. Puede hacerse enfocable al añadirle el atributo-valor tabindex=0. Eso añadirá el elemento a la lista de elementos que pueden ser enfocados al presionar la tecla Tab, en la secuencia en que dichos elementos se encuentran definidos en el documento HTML.

- -

Ver también

- - - -

Elementos enfocables deben tener un estilo al estar enfocados

- -

Cualquier elemento que pueda recibir el enfoque desde el teclado, debería tener un estilo visible que indique cuando el elemento esta enfocado. Se puede hacer esto con la pseudo-clase de CSS :focus.

- -

Elementos enfocables estándar como enlaces y los campos de entrada reciben un estilo especial por parte del navegador de forma predeterminada, por lo que podría no ser necesario especificar un estilo de enfoque para éstos, a menos que se quiera que el estilo de enfoque sea más distintivo.

- -

Si se crean componentes enfocables, se debe estar seguro de que también se defina el estilo de enfoque para éstos.

- -

If you create your own focusable components, be sure that you also define focus styling for them.

- -

Ver también

- - diff --git a/files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html b/files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html deleted file mode 100644 index 6d744bb956..0000000000 --- a/files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Usando el atributo aria-required -slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_atributo_aria-required -tags: - - Accesibilidad -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute ---- -

Descripción

- -

El atributo aria-required es usado para indicar al usuario que un input es requerido en un elemento antes de que un form pueda ser enviado. Este atributo puede ser usado en un form con cualquier elemento HTML típico; no se limita a elementosque tengan un role ARIA asignado.

- -

{{ HTMLVersionInline("5") }} ahora tiene el atributo required, pero aria-required todavía es útil para un agente de usuario que no soporta HTML5.

- -

Value

- -

true o false (Default: false)

- -

Posibles efectos en agentes de usuario y tecnología asistente.

- -

Los lectores de pantalla deben anunciar el campo como requerido.

- -

Nota que este atributo no cambiará automáticamente la presentación del campo.

- -
Nota: Las opiniones pueden diferir en cuanto a cómo esta técnica debería ser manejada por la tecnología asistente.  La información prevista arribaes una de esas opciones y por lo tanto no es normativa.
- -

Ejemplos

- -

Ejemplo 1: Un formulario sencillo

- -
 <form action="post">
-     <label for="firstName">First name:</label>
-     <input id="firstName" type="text" aria-required="true" />
-     <br/>
-     <label for="lastName">Last name:</label>
-     <input id="lastName" type="text" aria-required="true" />
-     <br/>
-     <label for="streetAddress">Street address:</label>
-     <input id="streetAddress" type="text" />
- </form>
-
- -

Ejemplos en acción:

- -

Ejemplo de un Tooltip (incluye el uso del atributo aria-required)

- -

Notas 

- -

Usan ARIA roles

- -
    -
  • Combobox
    • -
  • Gridcell
    • -
  • Listbox
    • -
  • Radiogroup
    • -
  • Spinbutton
    • -
  • Textbox
    • -
  • Tree
    • -
- -

Técnicas relacionadas con ARIA

- - - -

Compatibilidad

- -

Por determinar: Agregar información de soporte para combinaciones comunes de productos UA y AT.

- -

Recursos adicionales

- - diff --git a/files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html b/files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html deleted file mode 100644 index fad923dd3a..0000000000 --- a/files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Usando el rol alertdialog -slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_rol_alertdialog -tags: - - ARIA - - Accesibilidad - - Alertas - - Desarrollo web - - HTML - - agente - - alertdialog - - modal -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role ---- -

Descripción

- -
-

Esta técnica demuestra como usar el rol alertdialog.

-
- -

El rol alertdialog es utilizado para notificar al usuario información urgenete que demanden la atención inmediata del usuario. Como el nombre implica, alertdialog es un tipo de díalogo. Esto significa que la mayoría de las instrucciones proveidas en la técnica de ''usando el rol dialog' son aplicables al rol alertdialog también: 

- -
    -
  • El díalogo de alerta debe siempre recibir un nombre accesible (a través de aria-labelledby o aria-label), y en la mayoría de los casos el texto de alerta debe ser marcado como la descripción accesible del díalogo de alerta (utilizando aria-describedby).
    • -
  • A diferencia de alertas regulares, un díalogo de alerta debe tener al menos un control enfocable y el foco debe moverse a ese control cuando el díalogo de alerta aparece. Generalmente los díalogos de alerta tienen al menos un botón de Confirmación, Cerrar o Cancelar que pueder ser usado para moverl el foco. Adicionalmente, díalogos de alerta pueder tener otros controles interactivos tales como campos de texto, pestañas o checkboxes. El enfoque de control al que se debe desplazar depende del propósito del diálogo.
    • -
  • El orden de la pestaña dentro del díalogo de alerta debe ajustarse.
    • -
- -

La diferencia con díalogos normales es que el rol de alertdialog debe ser utilizado únicamente cuando una alerta, error, o advertencia ocurre. En otras palabras, cuando la información o controles de un díalogo requieren la inmediata atención del usuario debe usarse alertdialog en lugar de dialog. Sin embargo, depende del desarrollador hacer esta distinción.

- -

Debido a su carácter urgente los díalogos de alerta deben ser siempre modales.

- -
Nota: Este rol solo debe ser usado para mensajes de alerta que tienen controles interactivos asociado. Si un díalogo de alerta solo contiene contenido estático y no tiene controles interactivos, alertdialog es probablemente el rol incorrecto para ser utilizado.. El rol alert debe ser usado en su lugar en éste caso (como se describe en la técnica de Utilizando el rol alert).
- -

Posibles efectos de agentes de usuario y tecnología de asistencia

- -

Cuando un rol alertdialog es utilizado, el agente de usuario debería hacer lo siguiente:

- -
    -
  • Exponer el elemento como un díalogo a la API de accesibilidad del sistema operativo.
    • -
  • Disparar un evento de alerta accesible usando la API de accesibilidad del sistema operativo si lo soporta.
    • -
- -

Cuando la aleta de díalogo aparece, los lectores de pantalla deberían anunciar la alerta.

- -

Cuando el díalogo de alerta es etiquetado correctamente y el foco es movido de un control a el interior del díalogo, los lectores de pantalla deberían anunciar el rol accesible del díalogo así como su nombre y su descriipción antes de anunciar el elemento enfocado. 

- -
Nota: Opiniones pueden diferir en como tecnología de asistencia debe manejar esta técnica. La información proveída arriba es una de éstas opiniones y por lo tanto no es normativa.
- -

Ejemplos

- -

Ejemplos 1: Un díalogo de alerta básico

- -

El fragmento de código siguiente muestra como marcar un díalogo de alerta que solo provee un mensaje y un botón de OK.

- -
<div role="alertdialog" aria-labelledby="tituloDialogo1" aria-describedby="descrDialogo1">
-  <div role="document" tabindex="0">
-    <h2 id="tituloDialogo1">Tu sesión esta apunto de expirar</h2>
-    <p id="descrDialogo1">Para extender tu sesión de clic en el botón OK</p>
-    <button>OK</button>
-  </div>
-</div>
- -

Ejemplos en funcionamiento:

- -

Pendiente

- -

Notas 

- -

Atributos ARIA utilizados

- - - -

Técnicas ARIA relacionadas

- - - -

Compatibilidad

- -

Pendiente: Add support information for common UA and AT product combinations

- -

Recursos adicionales

diff --git a/files/es/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html b/files/es/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html new file mode 100644 index 0000000000..fad923dd3a --- /dev/null +++ b/files/es/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html @@ -0,0 +1,89 @@ +--- +title: Usando el rol alertdialog +slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_rol_alertdialog +tags: + - ARIA + - Accesibilidad + - Alertas + - Desarrollo web + - HTML + - agente + - alertdialog + - modal +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role +--- +

Descripción

+ +
+

Esta técnica demuestra como usar el rol alertdialog.

+
+ +

El rol alertdialog es utilizado para notificar al usuario información urgenete que demanden la atención inmediata del usuario. Como el nombre implica, alertdialog es un tipo de díalogo. Esto significa que la mayoría de las instrucciones proveidas en la técnica de ''usando el rol dialog' son aplicables al rol alertdialog también: 

+ +
    +
  • El díalogo de alerta debe siempre recibir un nombre accesible (a través de aria-labelledby o aria-label), y en la mayoría de los casos el texto de alerta debe ser marcado como la descripción accesible del díalogo de alerta (utilizando aria-describedby).
    • +
  • A diferencia de alertas regulares, un díalogo de alerta debe tener al menos un control enfocable y el foco debe moverse a ese control cuando el díalogo de alerta aparece. Generalmente los díalogos de alerta tienen al menos un botón de Confirmación, Cerrar o Cancelar que pueder ser usado para moverl el foco. Adicionalmente, díalogos de alerta pueder tener otros controles interactivos tales como campos de texto, pestañas o checkboxes. El enfoque de control al que se debe desplazar depende del propósito del diálogo.
    • +
  • El orden de la pestaña dentro del díalogo de alerta debe ajustarse.
    • +
+ +

La diferencia con díalogos normales es que el rol de alertdialog debe ser utilizado únicamente cuando una alerta, error, o advertencia ocurre. En otras palabras, cuando la información o controles de un díalogo requieren la inmediata atención del usuario debe usarse alertdialog en lugar de dialog. Sin embargo, depende del desarrollador hacer esta distinción.

+ +

Debido a su carácter urgente los díalogos de alerta deben ser siempre modales.

+ +
Nota: Este rol solo debe ser usado para mensajes de alerta que tienen controles interactivos asociado. Si un díalogo de alerta solo contiene contenido estático y no tiene controles interactivos, alertdialog es probablemente el rol incorrecto para ser utilizado.. El rol alert debe ser usado en su lugar en éste caso (como se describe en la técnica de Utilizando el rol alert).
+ +

Posibles efectos de agentes de usuario y tecnología de asistencia

+ +

Cuando un rol alertdialog es utilizado, el agente de usuario debería hacer lo siguiente:

+ +
    +
  • Exponer el elemento como un díalogo a la API de accesibilidad del sistema operativo.
    • +
  • Disparar un evento de alerta accesible usando la API de accesibilidad del sistema operativo si lo soporta.
    • +
+ +

Cuando la aleta de díalogo aparece, los lectores de pantalla deberían anunciar la alerta.

+ +

Cuando el díalogo de alerta es etiquetado correctamente y el foco es movido de un control a el interior del díalogo, los lectores de pantalla deberían anunciar el rol accesible del díalogo así como su nombre y su descriipción antes de anunciar el elemento enfocado. 

+ +
Nota: Opiniones pueden diferir en como tecnología de asistencia debe manejar esta técnica. La información proveída arriba es una de éstas opiniones y por lo tanto no es normativa.
+ +

Ejemplos

+ +

Ejemplos 1: Un díalogo de alerta básico

+ +

El fragmento de código siguiente muestra como marcar un díalogo de alerta que solo provee un mensaje y un botón de OK.

+ +
<div role="alertdialog" aria-labelledby="tituloDialogo1" aria-describedby="descrDialogo1">
+  <div role="document" tabindex="0">
+    <h2 id="tituloDialogo1">Tu sesión esta apunto de expirar</h2>
+    <p id="descrDialogo1">Para extender tu sesión de clic en el botón OK</p>
+    <button>OK</button>
+  </div>
+</div>
+ +

Ejemplos en funcionamiento:

+ +

Pendiente

+ +

Notas 

+ +

Atributos ARIA utilizados

+ + + +

Técnicas ARIA relacionadas

+ + + +

Compatibilidad

+ +

Pendiente: Add support information for common UA and AT product combinations

+ +

Recursos adicionales

diff --git a/files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html new file mode 100644 index 0000000000..6d744bb956 --- /dev/null +++ b/files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html @@ -0,0 +1,76 @@ +--- +title: Usando el atributo aria-required +slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_atributo_aria-required +tags: + - Accesibilidad +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute +--- +

Descripción

+ +

El atributo aria-required es usado para indicar al usuario que un input es requerido en un elemento antes de que un form pueda ser enviado. Este atributo puede ser usado en un form con cualquier elemento HTML típico; no se limita a elementosque tengan un role ARIA asignado.

+ +

{{ HTMLVersionInline("5") }} ahora tiene el atributo required, pero aria-required todavía es útil para un agente de usuario que no soporta HTML5.

+ +

Value

+ +

true o false (Default: false)

+ +

Posibles efectos en agentes de usuario y tecnología asistente.

+ +

Los lectores de pantalla deben anunciar el campo como requerido.

+ +

Nota que este atributo no cambiará automáticamente la presentación del campo.

+ +
Nota: Las opiniones pueden diferir en cuanto a cómo esta técnica debería ser manejada por la tecnología asistente.  La información prevista arribaes una de esas opciones y por lo tanto no es normativa.
+ +

Ejemplos

+ +

Ejemplo 1: Un formulario sencillo

+ +
 <form action="post">
+     <label for="firstName">First name:</label>
+     <input id="firstName" type="text" aria-required="true" />
+     <br/>
+     <label for="lastName">Last name:</label>
+     <input id="lastName" type="text" aria-required="true" />
+     <br/>
+     <label for="streetAddress">Street address:</label>
+     <input id="streetAddress" type="text" />
+ </form>
+
+ +

Ejemplos en acción:

+ +

Ejemplo de un Tooltip (incluye el uso del atributo aria-required)

+ +

Notas 

+ +

Usan ARIA roles

+ +
    +
  • Combobox
    • +
  • Gridcell
    • +
  • Listbox
    • +
  • Radiogroup
    • +
  • Spinbutton
    • +
  • Textbox
    • +
  • Tree
    • +
+ +

Técnicas relacionadas con ARIA

+ + + +

Compatibilidad

+ +

Por determinar: Agregar información de soporte para combinaciones comunes de productos UA y AT.

+ +

Recursos adicionales

+ + diff --git a/files/es/web/accessibility/aria/forms/alertas/index.html b/files/es/web/accessibility/aria/forms/alertas/index.html deleted file mode 100644 index 65cc3d3d09..0000000000 --- a/files/es/web/accessibility/aria/forms/alertas/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Alertas -slug: Web/Accessibility/ARIA/forms/alertas -tags: - - ARIA - - Accesibilidad - - Forms - - Web - - formulários -translation_of: Web/Accessibility/ARIA/forms/alerts ---- -

El problema

- -

Tienes un formulario — un formulario de contacto — por ejemplo, en el que deseas poner algún control de error accesible. Ejemplos de problemas comunes incluyen direcciones de correo electrónico que no son válidas o un campo de nombre que no contiene al menos un nombre o apellido.

- -

El formulario

- -

Primero, lee acerca de la técnica requerida por aria si no lo has hecho, ya que esta técnica amplía a esa.

- -

Aquí hay un sencillo formulario:

- -
 <form method="post" action="post.php">
-   <fieldset>
-     <legend>Introduce tus datos de contacto</legend>
-     <label for="name">Tu nombre (obligatorio):</label>
-     <input name="name" id="name" aria-required="true"/>
-     <br />
-     <label for="email">Dirección de correo electrónico (obligatorio):</label>
-     <input name="email" id="email" aria-required="true"/>
-     <br />
-     <label for="website">Sitio web (opcional):</label>
-     <input name="website" id="website"/>
-   </fieldset>
-   <label for="message">Por favor ingresa tu mensaje (requerido):</label>
-   <br />
-   <textarea name="message" id="message" rows="5" cols="80"
-             aria-required="true"></textarea>
-   <br />
-   <input type="submit" name="submit" value="Enviar mensaje"/>
-   <input type="reset" name="reset" value="Restablecer formulario"/>
- </form>
-
- -

Verificación de validez y notificación al usuario

- -

La validación de formularios consta de varios pasos:

- -
    -
  1. Verificando si la dirección de correo electrónico o el nombre ingresado son válidos. Cada campo tiene un conjunto de criterios que se deben cumplir para aprobar la validación. Para simplificar este ejemplo, verificaremos si la dirección de correo electrónico contiene el símbolo "@" y si la entrada del nombre contiene al menos 1 carácter.
    2. -
  2. Si no se cumplen los criterios anteriores, el atributo aria-invalid del campo recibirá un valor de "true".
    3. -
  3. Si no se cumplieron los criterios, se notificará al usuario mediante una alerta. En lugar de usar la función "alert" de JavaScript, usaremos un widget WAI-ARIA simple para la notificación. Esto notifica al usuario del error, pero le permite continuar modificando el formulario sin perder el foco (causado por el controlador "onblur" en la función "alert" predeterminada de JavaScript).
    4. -
- -

A continuación se muestra un código JavaScript de ejemplo que se podría insertar encima de la etiqueta de cierre "head":

- -
 <script type="application/javascript">
- function removeOldAlert()
- {
-   var oldAlert = document.getElementById("alert");
-   if (oldAlert){
-     document.body.removeChild(oldAlert);
-   }
- }
-
- function addAlert(aMsg)
- {
-   removeOldAlert();
-   var newAlert = document.createElement("div");
-   newAlert.setAttribute("role", "alert");
-   newAlert.setAttribute("id", "alert");
-   var msg = document.createTextNode(aMsg);
-   newAlert.appendChild(msg);
-   document.body.appendChild(newAlert);
- }
-
- function checkValidity(aID, aSearchTerm, aMsg)
- {
-   var elem = document.getElementById(aID);
-   var invalid = (elem.value.indexOf(aSearchTerm) < 0);
-   if (invalid) {
-     elem.setAttribute("aria-invalid", "true");
-     addAlert(aMsg);
-   } else {
-     elem.setAttribute("aria-invalid", "false");
-     removeOldAlert();
-   }
- }
- </script>
-
- -

La función checkValidity

- -

El método principal en JavaScript utilizado para la validación de formularios es la función checkValidity. Este método toma tres parámetros: el ID de el input que se va a validar, el término que se busca para asegurar la validez y el mensaje de error que se inserta en la alerta.

- -

Para ver si es válido, la función comprueba si el valor indexOf del input es algo mayor que -1. Se devuelve un valor de -1 o menos si el índice del término de búsqueda no se pudo encontrar dentro del valor.

- -

Si no es válido, la función hace dos cosas:

- -
    -
  1. Establece el atributo aria-invalid del elemento en "true", lo que indicará a los lectores de pantalla que hay contenido no válido aquí.
    2. -
  2. Llamará a la función addAlert para agregar la alerta con el mensaje de error proporcionado.
    3. -
- -

Si se encuentra el término de búsqueda, el atributo aria-invalid se restablece a “false”. Además, se eliminan las alertas sobrantes.

- -

La función addAlert

- -

Esta función primero elimina las alertas antiguas. La función es simple: busca un elemento con id "alert" y, si lo encuentra, lo elimina del modelo de objetos del documento.

- -

A continuación, la función crea un elemento div para contener el texto de alerta. Obtiene un ID de "alert". Y obtiene un conjunto de roles de "alert". En realidad, está inspirado en ARIA, aunque no dice "aria" en el nombre del atributo. Esto se debe a que ese rol se basa en el Módulo de atributos de rol XHTML que simplemente se transfirió a HTML para simplificar.

- -

El texto se agrega al elemento div y el elemento div se agrega al documento.

- -

En el momento en que esto suceda, Firefox lanzará un evento "alert" a las tecnologías de asistencia cuando aparezca este div. La mayoría de los lectores de pantalla la recogerán automáticamente y la pregonarán. Esto es similar a la barra de notificaciones en Firefox que te pregunta si deseas guardar una contraseña. La alerta que acabamos de crear no tiene ningún botón para presionar, solo nos dice lo que está mal.

- -

Modificar el evento "onblur"

- -

Todo lo que queda ahora es agregar el controlador de eventos. Necesitamos cambiar las dos entradas para el correo electrónico y el nombre para esto:

- -
 <input name="name" id="name" aria-required="true"
-        onblur="checkValidity('name', '', '¡Se ingresó un nombre no válido!');"/>
- <br />
- <input name="email" id="email" aria-required="true"
-        onblur="checkValidity('email', '@', 'Dirección de correo electrónico no válida');"/>
-
- -

Probar el ejemplo

- -

Si usas Firefox 3 y un lector de pantalla compatible actualmente, intenta lo siguiente:

- -
    -
  1. Ingresa solo tu primer nombre como nombre. Al pulsar la tecla de tabulación, escucharás una alerta que te indicará que ingresaste un nombre no válido. Luego puedes volver atrás con Mayús-Tab y corregir el error.
    2. -
  2. Ingresa una dirección de correo electrónico sin el símbolo “@”. Cuando salgas de este campo, deberías escuchar una advertencia que dice que no ingresaste una dirección de correo electrónico válida.
    3. -
- -

En ambos casos, al volver a enfocar el campo en cuestión, tu lector de pantalla debería decirte que este campo no es válido. JAWS 9 admite esto, pero JAWS 8 no, por lo que es posible que esto no funcione en todas las versiones de los lectores de pantalla compatibles.

- -

Algunas preguntas que podrías tener

- -
-
P. ¿Por qué pusiste “(obligatorio)” en el texto de la etiqueta y el atributo aria-required en algunas de las entradas?
-
R. Si se tratara de un formulario real en vivo y el sitio estuviera siendo visitado por un navegador que aún no es compatible con ARIA, aún quisiéramos dar una indicación de que este es un campo obligatorio.
-
P. ¿Por qué no vuelve a enfocarse en el campo no válido automáticamente?
-
R. Porque esto no está permitido por las especificaciones de la API de Windows y posiblemente otras. Además, dejar que el enfoque salte sin interacción real del usuario con demasiada frecuencia no es algo agradable en general. 
-
- -
Aún no definido: reconsideremos esto ─ personalmente, creo que establecer el enfoque podría ser bueno si se hace sin causar una trampa en el teclado.
diff --git a/files/es/web/accessibility/aria/forms/alerts/index.html b/files/es/web/accessibility/aria/forms/alerts/index.html new file mode 100644 index 0000000000..65cc3d3d09 --- /dev/null +++ b/files/es/web/accessibility/aria/forms/alerts/index.html @@ -0,0 +1,147 @@ +--- +title: Alertas +slug: Web/Accessibility/ARIA/forms/alertas +tags: + - ARIA + - Accesibilidad + - Forms + - Web + - formulários +translation_of: Web/Accessibility/ARIA/forms/alerts +--- +

El problema

+ +

Tienes un formulario — un formulario de contacto — por ejemplo, en el que deseas poner algún control de error accesible. Ejemplos de problemas comunes incluyen direcciones de correo electrónico que no son válidas o un campo de nombre que no contiene al menos un nombre o apellido.

+ +

El formulario

+ +

Primero, lee acerca de la técnica requerida por aria si no lo has hecho, ya que esta técnica amplía a esa.

+ +

Aquí hay un sencillo formulario:

+ +
 <form method="post" action="post.php">
+   <fieldset>
+     <legend>Introduce tus datos de contacto</legend>
+     <label for="name">Tu nombre (obligatorio):</label>
+     <input name="name" id="name" aria-required="true"/>
+     <br />
+     <label for="email">Dirección de correo electrónico (obligatorio):</label>
+     <input name="email" id="email" aria-required="true"/>
+     <br />
+     <label for="website">Sitio web (opcional):</label>
+     <input name="website" id="website"/>
+   </fieldset>
+   <label for="message">Por favor ingresa tu mensaje (requerido):</label>
+   <br />
+   <textarea name="message" id="message" rows="5" cols="80"
+             aria-required="true"></textarea>
+   <br />
+   <input type="submit" name="submit" value="Enviar mensaje"/>
+   <input type="reset" name="reset" value="Restablecer formulario"/>
+ </form>
+
+ +

Verificación de validez y notificación al usuario

+ +

La validación de formularios consta de varios pasos:

+ +
    +
  1. Verificando si la dirección de correo electrónico o el nombre ingresado son válidos. Cada campo tiene un conjunto de criterios que se deben cumplir para aprobar la validación. Para simplificar este ejemplo, verificaremos si la dirección de correo electrónico contiene el símbolo "@" y si la entrada del nombre contiene al menos 1 carácter.
    2. +
  2. Si no se cumplen los criterios anteriores, el atributo aria-invalid del campo recibirá un valor de "true".
    3. +
  3. Si no se cumplieron los criterios, se notificará al usuario mediante una alerta. En lugar de usar la función "alert" de JavaScript, usaremos un widget WAI-ARIA simple para la notificación. Esto notifica al usuario del error, pero le permite continuar modificando el formulario sin perder el foco (causado por el controlador "onblur" en la función "alert" predeterminada de JavaScript).
    4. +
+ +

A continuación se muestra un código JavaScript de ejemplo que se podría insertar encima de la etiqueta de cierre "head":

+ +
 <script type="application/javascript">
+ function removeOldAlert()
+ {
+   var oldAlert = document.getElementById("alert");
+   if (oldAlert){
+     document.body.removeChild(oldAlert);
+   }
+ }
+
+ function addAlert(aMsg)
+ {
+   removeOldAlert();
+   var newAlert = document.createElement("div");
+   newAlert.setAttribute("role", "alert");
+   newAlert.setAttribute("id", "alert");
+   var msg = document.createTextNode(aMsg);
+   newAlert.appendChild(msg);
+   document.body.appendChild(newAlert);
+ }
+
+ function checkValidity(aID, aSearchTerm, aMsg)
+ {
+   var elem = document.getElementById(aID);
+   var invalid = (elem.value.indexOf(aSearchTerm) < 0);
+   if (invalid) {
+     elem.setAttribute("aria-invalid", "true");
+     addAlert(aMsg);
+   } else {
+     elem.setAttribute("aria-invalid", "false");
+     removeOldAlert();
+   }
+ }
+ </script>
+
+ +

La función checkValidity

+ +

El método principal en JavaScript utilizado para la validación de formularios es la función checkValidity. Este método toma tres parámetros: el ID de el input que se va a validar, el término que se busca para asegurar la validez y el mensaje de error que se inserta en la alerta.

+ +

Para ver si es válido, la función comprueba si el valor indexOf del input es algo mayor que -1. Se devuelve un valor de -1 o menos si el índice del término de búsqueda no se pudo encontrar dentro del valor.

+ +

Si no es válido, la función hace dos cosas:

+ +
    +
  1. Establece el atributo aria-invalid del elemento en "true", lo que indicará a los lectores de pantalla que hay contenido no válido aquí.
    2. +
  2. Llamará a la función addAlert para agregar la alerta con el mensaje de error proporcionado.
    3. +
+ +

Si se encuentra el término de búsqueda, el atributo aria-invalid se restablece a “false”. Además, se eliminan las alertas sobrantes.

+ +

La función addAlert

+ +

Esta función primero elimina las alertas antiguas. La función es simple: busca un elemento con id "alert" y, si lo encuentra, lo elimina del modelo de objetos del documento.

+ +

A continuación, la función crea un elemento div para contener el texto de alerta. Obtiene un ID de "alert". Y obtiene un conjunto de roles de "alert". En realidad, está inspirado en ARIA, aunque no dice "aria" en el nombre del atributo. Esto se debe a que ese rol se basa en el Módulo de atributos de rol XHTML que simplemente se transfirió a HTML para simplificar.

+ +

El texto se agrega al elemento div y el elemento div se agrega al documento.

+ +

En el momento en que esto suceda, Firefox lanzará un evento "alert" a las tecnologías de asistencia cuando aparezca este div. La mayoría de los lectores de pantalla la recogerán automáticamente y la pregonarán. Esto es similar a la barra de notificaciones en Firefox que te pregunta si deseas guardar una contraseña. La alerta que acabamos de crear no tiene ningún botón para presionar, solo nos dice lo que está mal.

+ +

Modificar el evento "onblur"

+ +

Todo lo que queda ahora es agregar el controlador de eventos. Necesitamos cambiar las dos entradas para el correo electrónico y el nombre para esto:

+ +
 <input name="name" id="name" aria-required="true"
+        onblur="checkValidity('name', '', '¡Se ingresó un nombre no válido!');"/>
+ <br />
+ <input name="email" id="email" aria-required="true"
+        onblur="checkValidity('email', '@', 'Dirección de correo electrónico no válida');"/>
+
+ +

Probar el ejemplo

+ +

Si usas Firefox 3 y un lector de pantalla compatible actualmente, intenta lo siguiente:

+ +
    +
  1. Ingresa solo tu primer nombre como nombre. Al pulsar la tecla de tabulación, escucharás una alerta que te indicará que ingresaste un nombre no válido. Luego puedes volver atrás con Mayús-Tab y corregir el error.
    2. +
  2. Ingresa una dirección de correo electrónico sin el símbolo “@”. Cuando salgas de este campo, deberías escuchar una advertencia que dice que no ingresaste una dirección de correo electrónico válida.
    3. +
+ +

En ambos casos, al volver a enfocar el campo en cuestión, tu lector de pantalla debería decirte que este campo no es válido. JAWS 9 admite esto, pero JAWS 8 no, por lo que es posible que esto no funcione en todas las versiones de los lectores de pantalla compatibles.

+ +

Algunas preguntas que podrías tener

+ +
+
P. ¿Por qué pusiste “(obligatorio)” en el texto de la etiqueta y el atributo aria-required en algunas de las entradas?
+
R. Si se tratara de un formulario real en vivo y el sitio estuviera siendo visitado por un navegador que aún no es compatible con ARIA, aún quisiéramos dar una indicación de que este es un campo obligatorio.
+
P. ¿Por qué no vuelve a enfocarse en el campo no válido automáticamente?
+
R. Porque esto no está permitido por las especificaciones de la API de Windows y posiblemente otras. Además, dejar que el enfoque salte sin interacción real del usuario con demasiada frecuencia no es algo agradable en general. 
+
+ +
Aún no definido: reconsideremos esto ─ personalmente, creo que establecer el enfoque podría ser bueno si se hace sin causar una trampa en el teclado.
diff --git a/files/es/web/accessibility/aria/forms/basic_form_hints/index.html b/files/es/web/accessibility/aria/forms/basic_form_hints/index.html new file mode 100644 index 0000000000..48f2dba3e3 --- /dev/null +++ b/files/es/web/accessibility/aria/forms/basic_form_hints/index.html @@ -0,0 +1,115 @@ +--- +title: Consejos básicos para formularios +slug: Web/Accessibility/ARIA/forms/consejos_basicos_para_formularios +tags: + - ARIA + - Accesibilidad + - formulários +translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints +--- +

Cuando se implementan formularios utilizando elementos relacionados con los formularios HTML tradicionales, es importante proveer etiquetas para los controles y explicitamente asociar una etiqueta con su control. Cuando un usuario de lector de pantalla navega una página, el lector de pantalla describirá los controles del formulario. Sin una asociación directa entre el control y su etiqueta, el lector de pantalla no tiene forma de saber que etiqueta es la correcta para el control.

+ +

El ejemplo siguiente muestra un formulario sencillo con etiquetas. Note que cada elemento {{ HTMLElement("input") }} tiene un id, y cada elemento {{ HTMLElement("label") }} tiene un atributo for, indicando el id asociado al {{ HTMLElement("input") }}.

+ +
<form>
+  <ul>
+    <li>
+      <input id="vino-1" type="checkbox" value="riesling"/>
+      <label for="vino-1">Berg Rottland Riesling</label>
+    </li>
+    <li>
+      <input id="vino-2" type="checkbox" value="pinot-blanc"/>
+      <label for="vino-2">Pinot Blanc</label>
+    </li>
+    <li>
+      <input id="vino-3" type="checkbox" value="pinot-grigio"/>
+      <label for="vino-3">Pinot Grigio</label>
+    </li>
+    <li>
+      <input id="vino-4" type="checkbox" value="gewurztraminer"/>
+      <label for="vino-4">Gewürztraminer</label>
+    </li>
+  </ul>
+</form>
+
+ +

Etiquetando con ARIA

+ +

El elemento HTML {{ HTMLElement("label") }} es apropiado para elementos relacionados a formularios, pero muchos controles de formulario son implementados como un widget dinámico de JavaScript, utilizando {{ HTMLElement("div") }}s o {{ HTMLElement("span") }}s. WAI-ARIA, la especificación Accessible Rich Internet Applications de W3C's Web Accessibility Initiative, provee el atributo aria-labelledby para estos casos.

+ +

El siguiente ejemplo muestra un grupo de radio buttons implementado usando una lista no ordenada. Note que en la línea 3, el elemento {{ HTMLElement("ul") }} define el atributo aria-labelledby a etiqueta_rg1, el id de elemento {{ HTMLElement("h3") }} en la línea 1, que es la etiqueta para el grupo de controles radio.

+ +
<h3 id="etiqueta_rg1">Opciones para el almuerzo</h3>
+
+<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="etiqueta_rg1">
+  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
+    <img role="presentation" src="radio-unchecked.gif" /> Thai
+  </li>
+  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
+    <img role="presentation" src="radio-unchecked.gif" /> Subway
+  </li>
+  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
+    <img role="presentation" src="radio-checked.gif" /> Radio Maria
+  </li>
+</ul>
+
+ +

Describiendo con ARIA

+ +

Los controles de formulario en ocasiones tienen una descripción asociada con ellos, además de la descripción de la etiqueta. ARIA provee el atributo aria-describedby  para directamente asociar la descripción con el control.

+ +

El ejemplo siguiente muestra un elemento {{ HTMLElement("button") }} que es descrito por una oración de un diferento elemento {{ HTMLElement("div") }}. El atributo aria-describedby en el {{ HTMLElement("button") }} referencia al id del {{ HTMLElement("div") }}.

+ +
<button aria-describedby="descriptionRevert">Revertir</button>
+<div id="descriptionRevert">Revertir deshará cualquier cambio que se haya hecho desde la última que se guardo.</div>
+ +
+

Nota: El atributo aria-describedby es utilizado para otros própositos además de los controles de formularios.

+
+ +

Campos requeridos e inválidos

+ +
+

Nota: Ahora que required esta disponible para más del 97% de usuarios globalmente, no se recomienda que se use al mismo tiempo required y aria-required.

+
+ +

Los desarrolladores Web típicamente usan estrategias de presentación para inidicar campos requeridos o inválidos. Tecnologías asistivas (Assistive technologies - ATs) no necesariamente pueden inferir de la presentación. ARIA provee atributos para indicar que controles de formulario son requeridos o inválidos:

+ +
    +
  • La propiedad aria-required puede ser aplicada a un elemento de un formulario para indicar a a una AT que es requerida para completar el formulario.
    • +
  • El estado aria-invalid puede ser aplicado programáticamente, para indicar al AT que campos de información tienen información incorrecta para que el usuario sepa que ingresaron información inválida.
    • +
+ +

El siguiente ejemplo muestra un formulario sencillo con tres campos. En las líneas 4 y 12, los atributos aria-required son establecidos a true (en adición a los asteriscos junto a las etiquetas), indicando que los campos de nombre y email son requeridos. La segunda parte del ejemplo, es un fragmento de código de JavaScript que valida el formato del email, y establece el atributo aria-invalid del campo email (línea 12 del HTML) de acuerdo al resultado (adicionalmente de cambiar la presentación del elemento).

+ +
<form>
+  <div>
+    <label for="nombre">* Nombre:</label>
+    <input type="text" value="nombre" id="nombre" aria-required="true"/>
+  </div>
+  <div>
+    <label for="telefono">Phone:</label>
+    <input type="text" value="telefono" id="telefono" aria-required="false"/>
+  </div>
+  <div>
+    <label for="email">* E-mail:</label>
+    <input type="text" value="email" id="email" aria-required="true"/>
+  </div>
+</form>
+ +

The script that validates the form entry would look something like this:

+ +
var validar = function () {
+  var elementoEmail = document.getElementById(emailFieldId);
+  var esValido = emailValid(formData.email); // regresa verdadero si es válido, de otro modo devuelve falso.
+
+  elementoEmail.setAttribute("aria-invalid", !esValido);
+  setElementBorderColour(elementoEmail, esValido); // establece el borde de color rojo si el segundo argumento es falso
+};
+
+ +

Ofreciendo Mensajes de Error Útiles

+ +

Lea como usar alertas ARIA para mejorar formularios.

+ +

Para mayor orientación en el uso de ARIA para la accesibilidad de los formularios, vea el documento Prácticas de Autoria WAI-ARIA (WAI-ARIA Authoring Practices).

diff --git a/files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html b/files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html deleted file mode 100644 index 48f2dba3e3..0000000000 --- a/files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Consejos básicos para formularios -slug: Web/Accessibility/ARIA/forms/consejos_basicos_para_formularios -tags: - - ARIA - - Accesibilidad - - formulários -translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints ---- -

Cuando se implementan formularios utilizando elementos relacionados con los formularios HTML tradicionales, es importante proveer etiquetas para los controles y explicitamente asociar una etiqueta con su control. Cuando un usuario de lector de pantalla navega una página, el lector de pantalla describirá los controles del formulario. Sin una asociación directa entre el control y su etiqueta, el lector de pantalla no tiene forma de saber que etiqueta es la correcta para el control.

- -

El ejemplo siguiente muestra un formulario sencillo con etiquetas. Note que cada elemento {{ HTMLElement("input") }} tiene un id, y cada elemento {{ HTMLElement("label") }} tiene un atributo for, indicando el id asociado al {{ HTMLElement("input") }}.

- -
<form>
-  <ul>
-    <li>
-      <input id="vino-1" type="checkbox" value="riesling"/>
-      <label for="vino-1">Berg Rottland Riesling</label>
-    </li>
-    <li>
-      <input id="vino-2" type="checkbox" value="pinot-blanc"/>
-      <label for="vino-2">Pinot Blanc</label>
-    </li>
-    <li>
-      <input id="vino-3" type="checkbox" value="pinot-grigio"/>
-      <label for="vino-3">Pinot Grigio</label>
-    </li>
-    <li>
-      <input id="vino-4" type="checkbox" value="gewurztraminer"/>
-      <label for="vino-4">Gewürztraminer</label>
-    </li>
-  </ul>
-</form>
-
- -

Etiquetando con ARIA

- -

El elemento HTML {{ HTMLElement("label") }} es apropiado para elementos relacionados a formularios, pero muchos controles de formulario son implementados como un widget dinámico de JavaScript, utilizando {{ HTMLElement("div") }}s o {{ HTMLElement("span") }}s. WAI-ARIA, la especificación Accessible Rich Internet Applications de W3C's Web Accessibility Initiative, provee el atributo aria-labelledby para estos casos.

- -

El siguiente ejemplo muestra un grupo de radio buttons implementado usando una lista no ordenada. Note que en la línea 3, el elemento {{ HTMLElement("ul") }} define el atributo aria-labelledby a etiqueta_rg1, el id de elemento {{ HTMLElement("h3") }} en la línea 1, que es la etiqueta para el grupo de controles radio.

- -
<h3 id="etiqueta_rg1">Opciones para el almuerzo</h3>
-
-<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="etiqueta_rg1">
-  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
-    <img role="presentation" src="radio-unchecked.gif" /> Thai
-  </li>
-  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
-    <img role="presentation" src="radio-unchecked.gif" /> Subway
-  </li>
-  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
-    <img role="presentation" src="radio-checked.gif" /> Radio Maria
-  </li>
-</ul>
-
- -

Describiendo con ARIA

- -

Los controles de formulario en ocasiones tienen una descripción asociada con ellos, además de la descripción de la etiqueta. ARIA provee el atributo aria-describedby  para directamente asociar la descripción con el control.

- -

El ejemplo siguiente muestra un elemento {{ HTMLElement("button") }} que es descrito por una oración de un diferento elemento {{ HTMLElement("div") }}. El atributo aria-describedby en el {{ HTMLElement("button") }} referencia al id del {{ HTMLElement("div") }}.

- -
<button aria-describedby="descriptionRevert">Revertir</button>
-<div id="descriptionRevert">Revertir deshará cualquier cambio que se haya hecho desde la última que se guardo.</div>
- -
-

Nota: El atributo aria-describedby es utilizado para otros própositos además de los controles de formularios.

-
- -

Campos requeridos e inválidos

- -
-

Nota: Ahora que required esta disponible para más del 97% de usuarios globalmente, no se recomienda que se use al mismo tiempo required y aria-required.

-
- -

Los desarrolladores Web típicamente usan estrategias de presentación para inidicar campos requeridos o inválidos. Tecnologías asistivas (Assistive technologies - ATs) no necesariamente pueden inferir de la presentación. ARIA provee atributos para indicar que controles de formulario son requeridos o inválidos:

- -
    -
  • La propiedad aria-required puede ser aplicada a un elemento de un formulario para indicar a a una AT que es requerida para completar el formulario.
    • -
  • El estado aria-invalid puede ser aplicado programáticamente, para indicar al AT que campos de información tienen información incorrecta para que el usuario sepa que ingresaron información inválida.
    • -
- -

El siguiente ejemplo muestra un formulario sencillo con tres campos. En las líneas 4 y 12, los atributos aria-required son establecidos a true (en adición a los asteriscos junto a las etiquetas), indicando que los campos de nombre y email son requeridos. La segunda parte del ejemplo, es un fragmento de código de JavaScript que valida el formato del email, y establece el atributo aria-invalid del campo email (línea 12 del HTML) de acuerdo al resultado (adicionalmente de cambiar la presentación del elemento).

- -
<form>
-  <div>
-    <label for="nombre">* Nombre:</label>
-    <input type="text" value="nombre" id="nombre" aria-required="true"/>
-  </div>
-  <div>
-    <label for="telefono">Phone:</label>
-    <input type="text" value="telefono" id="telefono" aria-required="false"/>
-  </div>
-  <div>
-    <label for="email">* E-mail:</label>
-    <input type="text" value="email" id="email" aria-required="true"/>
-  </div>
-</form>
- -

The script that validates the form entry would look something like this:

- -
var validar = function () {
-  var elementoEmail = document.getElementById(emailFieldId);
-  var esValido = emailValid(formData.email); // regresa verdadero si es válido, de otro modo devuelve falso.
-
-  elementoEmail.setAttribute("aria-invalid", !esValido);
-  setElementBorderColour(elementoEmail, esValido); // establece el borde de color rojo si el segundo argumento es falso
-};
-
- -

Ofreciendo Mensajes de Error Útiles

- -

Lea como usar alertas ARIA para mejorar formularios.

- -

Para mayor orientación en el uso de ARIA para la accesibilidad de los formularios, vea el documento Prácticas de Autoria WAI-ARIA (WAI-ARIA Authoring Practices).

diff --git a/files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html b/files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html deleted file mode 100644 index 4bc8cafa67..0000000000 --- a/files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: >- - Etiquetas complejas: Utilizando ARIA para etiquetas con campos embebidos - dentro de ellos -slug: Web/Accessibility/ARIA/forms/Etiquetas_complejas -tags: - - ARIA - - Accesibilidad - - Firefox - - Guía - - HTML - - NeedsContent - - aria-labelledby - - etiqueta - - label -translation_of: Web/Accessibility/ARIA/forms/Multipart_labels ---- -
-

Problema

- -

Tiene un formulario donde le pregunta a su usuario una pregunta, pero la respuesta es mencionada en la misma pregunta. Un ejemplo clásico que todos conocemos de las configuraciones de nuestro navegador es la opción "Eliminar el historial despues de x días". "Eliminar  el historial despues" está a la izquierda de la caja de texto, x es el número, por ejemplo 21, y la palabra "días" sigue a la caja de texto, formando una oración que es fácil de comprender.

- -

Si se esta usando un lector de pantalla, quizá ha notado que, cuando se van a las configuraciónes de Firefox, el lector dice: ¿"Eliminar el historial después de 21 días"?, seguidamente anuncia que está en una caja de texto y que contiene el número 21. ¿No es super? No necesita navegar alrededor para darse cuenta de la unidad. "Días" podría ser fácilmente "meses" o "años", y en muchos dialogos ordinarios no hay forma de descubrirlo más que navegando utilizando los comandos de revisión del lector de pantalla.

- -

La solución esta en un atributo ARIA llamado aria-labelledby. Su parámetro es una cadena de texto que consiste de los IDs de los elementos HTML que se deseen concatenar dentro de un solo nombre accesible.

- -

Tanto aria-labelledby y aria-describedby se especifican en el elemento de formulario   que debe etiquetarse, por ejemplo un <input>. En ambos casos, la etiqueta for/label para ligar a los controles que puedan existir son anuladas por aria-labelledby. Si en una página se provee aria-labelledby, se debería colocar también una etiqueta para también soportar navegadores antiguos que no tengan aún soperte ARIA. Con Firefox 3, los usuarios ciegos tendrán automáticamente mejor accesibilidad con el nuevo atributo, pero los usuarios de navadores antiguos de esta forma no son dejados en la oscuridad.

- -

Ejemplo:

- apagar computadora después de  minutos - -
<input aria-labelledby="etiquetaApagado tiempoApagado unidadApagado" type="checkbox" />
-<span id="etiquetaApagado">Apagar computadora después de </span>
-<input aria-labelledby="etiquetaApagado tiempoApagado unidadApagado" id="tiempoApagado" type="text" value="10" />
-<span id="unidadApagado"> minutos</span>
-
- -

Nota para usuarios de JAWS 8

- -

JAWS 8.0 tiene su propia lógica para encontrar etiquetas, causando que siempre sobreescriba el nombre accesible que obtiene la caja de texto de un documento HTML. Con JAWS 8, no se ha encontrado una manera de hacer que acepte la etiqueta del ejemplo anterior. Pero NVDA y  Window-Eyes funcionan correctamente, Orca on Linux tampoco tiene problemas.

- -
TBD (pendiente): añadir más información sobre compatiblidad
- -

¿Puede hacerse sin ARIA?

- -

 Community member Ben Millard has pointed out in a blog post that controls can be embedded in labels as shown in the above example using HTML 4, simply by embedding the input into the label. Thanks for that info, Ben! It is very useful and shows that some techniques that have been available for years escape even the gurus sometimes. This technique works in Firefox; however, it doesn't currently work in many other browsers, including IE. For labels with embedded form controls, using aria-labelledby is still the best approach.

-
diff --git a/files/es/web/accessibility/aria/forms/multipart_labels/index.html b/files/es/web/accessibility/aria/forms/multipart_labels/index.html new file mode 100644 index 0000000000..4bc8cafa67 --- /dev/null +++ b/files/es/web/accessibility/aria/forms/multipart_labels/index.html @@ -0,0 +1,47 @@ +--- +title: >- + Etiquetas complejas: Utilizando ARIA para etiquetas con campos embebidos + dentro de ellos +slug: Web/Accessibility/ARIA/forms/Etiquetas_complejas +tags: + - ARIA + - Accesibilidad + - Firefox + - Guía + - HTML + - NeedsContent + - aria-labelledby + - etiqueta + - label +translation_of: Web/Accessibility/ARIA/forms/Multipart_labels +--- +
+

Problema

+ +

Tiene un formulario donde le pregunta a su usuario una pregunta, pero la respuesta es mencionada en la misma pregunta. Un ejemplo clásico que todos conocemos de las configuraciones de nuestro navegador es la opción "Eliminar el historial despues de x días". "Eliminar  el historial despues" está a la izquierda de la caja de texto, x es el número, por ejemplo 21, y la palabra "días" sigue a la caja de texto, formando una oración que es fácil de comprender.

+ +

Si se esta usando un lector de pantalla, quizá ha notado que, cuando se van a las configuraciónes de Firefox, el lector dice: ¿"Eliminar el historial después de 21 días"?, seguidamente anuncia que está en una caja de texto y que contiene el número 21. ¿No es super? No necesita navegar alrededor para darse cuenta de la unidad. "Días" podría ser fácilmente "meses" o "años", y en muchos dialogos ordinarios no hay forma de descubrirlo más que navegando utilizando los comandos de revisión del lector de pantalla.

+ +

La solución esta en un atributo ARIA llamado aria-labelledby. Su parámetro es una cadena de texto que consiste de los IDs de los elementos HTML que se deseen concatenar dentro de un solo nombre accesible.

+ +

Tanto aria-labelledby y aria-describedby se especifican en el elemento de formulario   que debe etiquetarse, por ejemplo un <input>. En ambos casos, la etiqueta for/label para ligar a los controles que puedan existir son anuladas por aria-labelledby. Si en una página se provee aria-labelledby, se debería colocar también una etiqueta para también soportar navegadores antiguos que no tengan aún soperte ARIA. Con Firefox 3, los usuarios ciegos tendrán automáticamente mejor accesibilidad con el nuevo atributo, pero los usuarios de navadores antiguos de esta forma no son dejados en la oscuridad.

+ +

Ejemplo:

+ apagar computadora después de  minutos + +
<input aria-labelledby="etiquetaApagado tiempoApagado unidadApagado" type="checkbox" />
+<span id="etiquetaApagado">Apagar computadora después de </span>
+<input aria-labelledby="etiquetaApagado tiempoApagado unidadApagado" id="tiempoApagado" type="text" value="10" />
+<span id="unidadApagado"> minutos</span>
+
+ +

Nota para usuarios de JAWS 8

+ +

JAWS 8.0 tiene su propia lógica para encontrar etiquetas, causando que siempre sobreescriba el nombre accesible que obtiene la caja de texto de un documento HTML. Con JAWS 8, no se ha encontrado una manera de hacer que acepte la etiqueta del ejemplo anterior. Pero NVDA y  Window-Eyes funcionan correctamente, Orca on Linux tampoco tiene problemas.

+ +
TBD (pendiente): añadir más información sobre compatiblidad
+ +

¿Puede hacerse sin ARIA?

+ +

 Community member Ben Millard has pointed out in a blog post that controls can be embedded in labels as shown in the above example using HTML 4, simply by embedding the input into the label. Thanks for that info, Ben! It is very useful and shows that some techniques that have been available for years escape even the gurus sometimes. This technique works in Firefox; however, it doesn't currently work in many other browsers, including IE. For labels with embedded form controls, using aria-labelledby is still the best approach.

+
diff --git a/files/es/web/accessibility/community/index.html b/files/es/web/accessibility/community/index.html new file mode 100644 index 0000000000..34acce8e6e --- /dev/null +++ b/files/es/web/accessibility/community/index.html @@ -0,0 +1,44 @@ +--- +title: Comunidad +slug: Web/Accesibilidad/Comunidad +tags: + - Accesibilidad + - Todas_las_Categorías +translation_of: Web/Accessibility/Community +--- +

 

+

Si conoces alguna lista de correo, grupo de noticias, foro, o comunidad relacionada con la + + accesibilidad + que pueda ser de interés. Por favor, pon aquí un enlace.

+

Mozilla

+
    +
  • La + + Accesibilidad + en la comunidad Mozilla... en inglés
    • +
+

{{ DiscussionList("support-accessibility", "mozilla.support.accessibility") }}

+

Listas de correo

+
    +
  • Accesoweb Lista en castellano sobre problemas y soluciones de diseño accesible para la Red de la Fundación Sidar.
    • +
+

Foros

+
    +
  •  
    • +
+

 

+

Bitácoras

+ +

Wikis

+
    +
  •  
    • +
+

 

+

Otros Sitios

+ +

categorías

diff --git a/files/es/web/accessibility/index.html b/files/es/web/accessibility/index.html new file mode 100644 index 0000000000..ea30623a6d --- /dev/null +++ b/files/es/web/accessibility/index.html @@ -0,0 +1,93 @@ +--- +title: Accesibilidad +slug: Web/Accesibilidad +tags: + - Accesibilidad + - Todas_las_Categorías +translation_of: Web/Accessibility +--- +
Guía Breve de Accesibilidad Web
+Las cuatro cosas básicas y un montón de buenos enlaces.
+ +

La accesibilidad web (a menudo abreviada como A11y) se refiere a la posibilidad de acceso a los diferentes sitios web y a todo su contenido por todas las personas, independientemente de sus limitaciones fìsicas (discapacidad) o las derivadas del contexto de uso (tecnológicas o ambientales).{{ Ref(1) }}

+ +

Para muchas personas, la tecnología facilita las cosas. Para las personas con algun tipo de discapacidad, la tecnología hace las cosas posibles. Accesibilidad significa desarrollar contenido para que sea lo más accesible posible sin importar las habilidades físicas y cognitivas de un individuo y sin importar cómo acceda a la web.

+ +

" La Web está diseñada fundamentalmente para que funcione para todas las personas , independientemente de su hardware, software, idioma, cultura, ubicación, capacidad física o mental.

+ +

El máximo organismo dentro de la jerarquía de Internet que se encarga de promover la accesibilidad es el W3C, en especial su grupo de trabajo WAI.

+ + + + + + + + +
+

Documentación

+ +
+
Introducción a la Accesibilidad Web (externo)
+
WAI: estrategias, pautas, recursos para hacer la Web accesible a personas con discapacidad.
+
+ +
+
Pautas de Accesibilidad al Contenido en la Web 1.0 (externo)
+
"Estas pautas explican cómo hacer accesibles los contenidos de la Web a personas con discapacidad."
+
+ +
+
Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1.0
+
Este documento es el punto de acceso a una serie de documentos relacionados que describen técnicas para satisfacer los requisitos definidos en las "Pautas de Accesibilidad al Contenido en la Web 1.0"
+
+ +
+
FAQ sobre las "Pautas de Accesibilidad al Contenido en la Web 1.0"
+
Esta página de preguntas frecuentes proporciona información sobre la recomendación W3C WACG 1.0. Es una traducción de Fact Sheet for "Web Content Accessibility Guidelines 1.0"
+
+ +
+
+
When authored according to these guidelines, XUL is capable of generating accessible user interfaces. Coders, reviewers, designers and QA engineers should be familiar with these guidelines.
+
+ +

Ver más...

+ 		+

Comunidad

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

{{ DiscussionList("support-accessibility", "mozilla.support.accessibility") }}

+ +

Ver más...

+ +

Herramientas

+ + + +

Ver más...

+ +

Temas relacionados

+ +
+
· Desarrollo Web · Desarrollando Mozilla ·
+
+
+ +
+

{{ Note(1) }} Definición de la Wikipedia

+ +

Categorias

+ +

Interwiki Language Links

+ +

{{ languages( { "en": "en/Accessibility", "fr": "fr/Accessibilit\u00e9", "ja": "ja/Accessibility", "pl": "pl/Dost\u0119pno\u015b\u0107" } ) }}

diff --git a/files/es/web/accessibility/understanding_wcag/index.html b/files/es/web/accessibility/understanding_wcag/index.html new file mode 100644 index 0000000000..f58fae9c48 --- /dev/null +++ b/files/es/web/accessibility/understanding_wcag/index.html @@ -0,0 +1,56 @@ +--- +title: Understanding the Web Content Accessibility Guidelines +slug: Web/Accesibilidad/Understanding_WCAG +translation_of: Web/Accessibility/Understanding_WCAG +--- +

Esto es parte de un grupo de artículos que explican rápidamente los pasos necesario para cumplir con la normativa de W3C Web Content Accessibility Guides 2.0 o 2.1 (también conocida como WCAG).

+ +

La norma WCAG 2.0 y 2.1 provee unas guías detalladas para lograr que el contenido de nuestro sitio sea accesible para personas con distintos tipos de discapacidades. Es exhaustivo y muy detallado, por lo que cuesta comprenderlo rápidamente. Por esta razón, hemos resumido los pasos a seguir para que puedas cumplir con las diferentes recomendaciones e incluimos links al pie para más detalles en los lugares necesarios.

+ +

Los cuatro principios

+ +

La normativa WCAG tiene cuatro secciones, cuatro categorías en las cuales el contenido debe ser accesible (para más información puedes referirte a Understanding the Four Principles of Accessibility (inglés)).

+ +

Cada uno de los siguientes enlaces te llevarán a páginas en las que podrás expandir tu conocimiento en cada una de las áreas de WCAG 2.0 y 2.1.

+ +
    +
  • Perceptible: Los usuarios deben poder percibir el contenido de alguna forma, a través de alguno de sus sentidos.
    • +
  • Operable: Los usuarios deben poder controlar los elementos de interfaz (por ejemplo, se deben poder cliquear botones de alguna forma, ya sea utilizando el ratón, teclado o comando de voz).
    • +
  • Comprensible: El contenido debe ser comprensible para los usuarios.
    • +
  • Robusto: El contenido debe ser desarrollado utilizando estándares actuales que funcionarán en todos los navegadores del momento, hoy y en el futuro.
    • +
+ +

Debo usar WCAG 2.0 o 2.1?

+ +

WCAG 2.1 es el estándar más reciente y relevante. Utilízalo para mejorar la calidad de navegación de los usuarios con discapacidades y para reducir las posibles acciones legales a los dueños del sitio web.

+ +

Al momento de asignar recursos, ten como objetivo WCAG 2.0, luego sube a 2.1.

+ +

¿Qué es WCAG 2.1?

+ +

WCAG 2.1 fue publicado el 5 de junio de 2018 como recomendación oficial. La Unión Europea (EU) lo adoptó como estándar en septiembre de ese mismo año. La W3C publicó un anuncio de prensa al respecto.

+ +

WCAG 2.1 incluye:

+ + + + + +

Esta guía tiene como objetivo proveer información para que puedas construir mejores sitios, más accesibles. Sin embargo, no somos abogados y nada de esto es un asesoramiento legal. Si estás preocupado/a por las implicaciones legales de la accesibilidad web recomendamos que investigues la legislación de tu país o que consultes a un abogado calificado.

+ +

¿Qué es la accesibilidad? y guías de accesibilidad y sobre la ley proveen más información al respecto (en inglés).

diff --git a/files/es/web/accessibility/understanding_wcag/keyboard/index.html b/files/es/web/accessibility/understanding_wcag/keyboard/index.html new file mode 100644 index 0000000000..239dd6727b --- /dev/null +++ b/files/es/web/accessibility/understanding_wcag/keyboard/index.html @@ -0,0 +1,92 @@ +--- +title: Teclado (Keyboard) +slug: Web/Accesibilidad/Understanding_WCAG/Teclado +tags: + - Accesibilidad + - teclado +translation_of: Web/Accessibility/Understanding_WCAG/Keyboard +--- +
Para ser completamente accesible, una página web debe ser operable por alguién utilizando únicamente un teclado para acceder y controlarla. Esto incluye usuarios de lectores de pantalla, pero también puede incluir a quienes tienen dificultades utilizando un dispositivo apuntador como un ratón o una bola de rastreo, o aquellos cuyo ratón no esta funcionando temporalmente, o la gente que simplemente prefiere usar un teclado como entrada siempre que les sea posible.
+ +

Los elementos enfocables deben tener una semántica interactiva

+ +

Si un elemento puede ser enfocado utilizando un teclado, entonces debería ser interactivo, es decir, el usuario debería ser capaz de hacer algo y producir un cambio de algún tipo (por ejemplo, activar un enlace o cambiar una opción).

+ +
+

Nota: Una excepción importante a esta regla es si el elemento tiene aplicado role="document", dentro un contexto interactivo (como un role="application"). En tal caso, enfocar el documento anidado es la única forma de devolver la tecnología de asistencia a un estado de no interactividad (comúnmente llamado "modo navegador").

+
+ +

La mayoría de los elementos son enfocables por defecto, y se puede hacer que un elemento sea enfocable al añadir el atributo tabindex=0. Sin embargo, sólo se debería añadir tabindex si el elemento también se hace interactivo, por ejemplo, definiendo los eventos de teclado apropiados para los manejadores de eventos.

+ +

Ver también

+ + + +

Evitar usar el atributo tabindex con un valor mayor a cero

+ +

El atributo tabindex indica que un elemento es enfocable utilizando el teclado. Un valor de cero indica que el elemento es parte del orden de enfoque normal, que está basado en el orden de los elementos en el documento HTML. Un valor positivo pone al elemento adelante de aquellos con el orden normal; elementos con valores positivos son enfocados en el orden del valor de tabindex (1, luego 2, después 3, etc.).

+ +

Esto genera una confusión para usuarios que solo usen el teclado cuando el orden del enfoque difiera al orden lógico de la página. Una mejor estrategia es estructurar el documento HTML para que los elementos enfocables estén es un orden lógico, sin la necesidad de reordenarlos con un valor positivo de tabindex.

+ +

Ver también

+ + + +

Los elementos a los que se les puede hacer click deben ser enfocables y deberían tener semánticas interactivas

+ +

Si a un elemento se le puede hacer click con un dispositivo apuntador, como un ratón, entonces también debería enfocable utilizando el teclado, y el usuario debería ser capaz de hacer algo al interactuar con este.

+ +

A un elemento se le puede hacer click si tiene in manejador de evento onclick definido. Se puede hacer enfocable al añadir un atributo-valor tabindex=0. Se puede hacer que se opere con un teclado al definir un manejador de evento onkeydown; en la mayoría de los casos, la acción tomada por el manejador de eventos debería ser la misma para los dos tipos de eventos

+ +

Ver también

+ + + +

Los elementos interactivos deben ser capaz de ser activos utilizando un teclado

+ +

Si el usuario puede interactuar con un elemento utilizando el tacto o un dispositivo apuntador, entonces el elemento debería ser también capaz de interactuar con el teclado, Es decir, si hay manejadores de evento definidos para los eventos al tacto y al hacer click, también debería haber manejadores de eventos para el teclado. Los manejadores de eventos para el teclado deberían realizar la misma interacción que sus contrapartes con el tacto y al hacer click.

+ +

Ver también

+ +
    +
  • Manejador de evento global: onkeydown
    • +
  • Manejador de evento global: onkeyup
    • +
+ +

Los elementos interactivos deben ser enfocables

+ +

Si el usuario puede interactuar con un elemento (por ejemplo, usando el tacto o con un dispositivo apuntador) entonces debería ser enfocable utilizando el teclado. Puede hacerse enfocable al añadirle el atributo-valor tabindex=0. Eso añadirá el elemento a la lista de elementos que pueden ser enfocados al presionar la tecla Tab, en la secuencia en que dichos elementos se encuentran definidos en el documento HTML.

+ +

Ver también

+ + + +

Elementos enfocables deben tener un estilo al estar enfocados

+ +

Cualquier elemento que pueda recibir el enfoque desde el teclado, debería tener un estilo visible que indique cuando el elemento esta enfocado. Se puede hacer esto con la pseudo-clase de CSS :focus.

+ +

Elementos enfocables estándar como enlaces y los campos de entrada reciben un estilo especial por parte del navegador de forma predeterminada, por lo que podría no ser necesario especificar un estilo de enfoque para éstos, a menos que se quiera que el estilo de enfoque sea más distintivo.

+ +

Si se crean componentes enfocables, se debe estar seguro de que también se defina el estilo de enfoque para éstos.

+ +

If you create your own focusable components, be sure that you also define focus styling for them.

+ +

Ver también

+ + diff --git a/files/es/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html b/files/es/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html new file mode 100644 index 0000000000..2db0f4e251 --- /dev/null +++ b/files/es/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html @@ -0,0 +1,162 @@ +--- +title: Contraste del color +slug: Web/Accesibilidad/Understanding_WCAG/Perceivable/Color_contraste +tags: + - Accesibilidad + - Perceptible + - contraste +translation_of: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast +--- +

El contraste del color entre el fondo y el contenido del primer plano (que suele ser texto) debe ser lo suficientemente alto como para garantizar la legibilidad.

+ +

Al diseñar interfaces legibles para diferentes capacidades de visión, las directrices de la WCAG recomiendan las siguientes relaciones de contraste:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipo de contenidoRelación mínima (nivel AA)Relación mejorada (nivel AAA)
Cuerpo de texto4.5 : 17 : 1
Texto a gran escala (120-150% mayor que el cuerpo de texto)3 : 14.5 : 1
Componentes activos de la interfaz de usuario y objetos gráficos como iconos y gráficos3 : 1No definido
+ +

Estas proporciones no se aplican al texto "incidental", como controles inactivos, logotipos o texto puramente decorativo.

+ +

Consulta la sección {{anch("Solución")}} a continuación para obtener más información.

+ +

Tener un buen contraste de color en tu sitio web beneficia a todos tus usuarios, pero es particularmente beneficioso para los que tienen cierto tipo de ceguera al color y otras afecciones similares, como los que experimentan una baja sensibilidad al contraste y tienen dificultades para diferenciar colores parecidos. Esto se debe a que no distinguen las áreas brillantes y oscuras con tanta facilidad como las personas que no tienen esa discapacidad, y por lo tanto tienen problemas para ver los bordes y otros detalles.  

+ +

Es bueno tener un diseño atractivo en tu sitio web, pero el diseño es inútil si tus usuarios no pueden leer el contenido.

+ +

Ejemplos

+ +

Veamos algunos ejemplos simples con código HTML y CSS:

+ +
<div class="good">Buen contraste</div>
+<div class="bad">Mal contraste</div>
+ +
div {
+  /* General div styles here */
+}
+
+.good {
+  background-color: #fae6fa;
+}
+
+.bad {
+  background-color: #400064;
+}
+ +

Ambos fragmentos de texto tienen color negro por defecto. El <div> "good" tiene un color de fondo púrpura claro, lo que hace que el texto sea fácil de leer:

+ + + +

{{EmbedLiveSample('example1', '100%', '100')}}

+ +

El <div> "bad", por otro lado, tiene un color de fondo púrpura muy oscuro, lo que hace que el texto sea mucho más difícil de leer:

+ + + +

{{EmbedLiveSample('example2', '100%', '100')}}

+ +
+
+ +

Solución

+ +

Al elegir un esquema de color para tu sitio web, selecciona colores de primer plano y de fondo que tengan un buen contraste. Haz que el contraste de color sea lo mejor posible dentro de las limitaciones de tu diseño — preferiblemente elige el nivel AAA (ver 1.4.6 más abajo), pero al menos cumple con el nivel AA (ver 1.4.3 más abajo).

+ +

Si incluyes contenido no textual, como vídeo o animación, debes seguir 1.4.11 (nuevamente, ver más abajo).

+ +

Para verificar el contraste a medida que seleccionas los colores puedes utlizar una herramienta como Color Contrast Checker de WebAIM.

+ +

También puedes comprobar el contraste de color sobre la marcha utilizando las herramientas para desarrolladores de Firefox— ver nuestra guía Accessibility inspector, y en particular la sección Check for accessibility issues. Prueba a usarlo en los ejemplos en vivo en la sección de descripción.

+ +

Criterios de conformidad relacionados con WCAG

+ +
+
1.4.3 Contraste mínimo (AA)
+
El contraste de color entre el fondo y el contenido del primer plano debe tener un nivel mínimo para garantizar la legibilidad: +
    +
  • El texto y el fondo deben tener una relación de contraste de al menos 4.5:1.
    • +
  • Los encabezados (o simplemente el texto más grande) deben tener una relación de contraste de al menos 3:1. El texto más grande se define como de al menos 18pt, o 14pt en negrita.
    • +
+
+
1.4.6 Contraste mejorado (AAA)
+
Esto sigue y se basa en el criterio 1.4.3. +
    +
  • El texto y el fondo deben tener una relación de contraste de al menos 7:1.
    • +
  • Los encabezados (o simplemente el texto más grande) deben tener una relación de contraste de al menos 4.5:1.
    • +
+
+
1.4.11 Contraste no textual (AA) (añadido en 2.1)
+
Debe haber una relación mínima de contraste de color de 3 a 1 para los componentes de la interfaz de usuario y los objetos gráficos.
+
+ +

Ver también

+ + diff --git a/files/es/web/accessibility/understanding_wcag/perceivable/index.html b/files/es/web/accessibility/understanding_wcag/perceivable/index.html new file mode 100644 index 0000000000..6bf99039f8 --- /dev/null +++ b/files/es/web/accessibility/understanding_wcag/perceivable/index.html @@ -0,0 +1,336 @@ +--- +title: Perceivable +slug: Web/Accesibilidad/Understanding_WCAG/Perceivable +translation_of: Web/Accessibility/Understanding_WCAG/Perceivable +--- +

Este artículo ofrece consejos prácticos sobre cómo hacer que tu sitio web cumpla con los criterios de Percepción de WCAG 2.0 y 2.1. Los estados perceptivos que los usuarios deben poder reconocer utilizando alguno de sus sentidos.

+ +
+

Nota: Para leer las definiciones de la W3C sobre Percepción y las guías para cumplir con los criterios dirígete a Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

+
+ +

Pauta 1.1 — Dar alternativas de texto para contenido no textual.

+ +

La clave aquí es convertir el texto a otros formatos que puedan ser entendidos por personas con otras capacidades; ya sea si utilizan un screen-reader, zoom o un lector de braille. El contenido no textual se refiere a elementos multimedia como imágenes, audio y vídeo.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Criterio de éxitoCómo cumplirRecursos prácticos
1.1.1 Alternativas textuales  (A)Toda imagen que sea útil para el usuario debe tener un texto alternativo.Texto alternativo.
+

Las imágenes complejas o gráficos deben tener una alternativa accesible, ya sea en al misma página o en una externa. Utiliza un elemento de link en vez del atributo longdesc.

+ 		+

Una alternativa textual o una tabla puede resolverlo (ver HTML table advanced features and accessibility y Other text alternative mechanisms para leer sobre el argumento en contra de longdesc.

+
El contenido multimedia (por ejemlo, audio o vídeo) debería tener por lo menos una descripción accesible disponible (captions o similar). +

Ver alternativas de texto para opciones de captions, y Audio transcripts, Video text tracks o Other multimedia content para otras alternativas.

+
Los elementos de interfaz como botones o elementos de formulario deberán tener labels que describan su propósito.Deberás asegurarte de que los botones describan su función (por ejemplo, <button>Subir imagen</button>). Para más información ver UI controls.
+

Implementa elementos decorativos (imágenes o vídeos) de manera que sea invisibles para lectores de pantalla, de esta forma evitarás confundir a estos usuarios.

+ 		+

Las imágenes decorativas deben ser implementadas utilizando la propiedad background-image. Si debes incluir una imagen con la etiqueta {{htmlelement("img")}} deberás agregarle un atributo alt vacío, de otra manera los lectores de pantalla podrían leerlo.

+ +

Si incluyes un vídeo o audio en tu sitio que se reproduce automáticamente intenta de que sea lo menos molesto posible. No hagas que se vea ni actúe como contenido y provee una forma de apagarlo.

+
+ +
+

Nota: Ver también WCAG description for Guideline 1.1: Text alternatives.

+
+ +

Pauta 1.2 — Proporcionar alternativas para los medios tempo-dependientes.

+ +

Los medios tempo-dependientes se refieren a multimedia con una duración (audio y vídeo, por ejemplo). Ten en cuenta que si este contenido multimedia funciona como una alternativa a un contenido textual no necesitas proveer otra alternavtiva.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Criterio de éxitoCómo cumplirRecursos prácticos
1.2.1 Provee alternativas para multimedia de solo audio o solo vídeo (A)A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video).See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.2 Provee captions para los vídeos (A)You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video.See Video text tracks for HTML5 video captions, and Other multimedia content for other technologies. See also Add your own subtitles & closed captions (YouTube).
+

1.2.3 Provee texto alternativo o una descripción para el audio del vídeo (A)

+ 		You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone.See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.4 Provee captions para audio en vivo (AA)You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.) 
1.2.5 Provee descripciones de adio para vídeo pre-grabado (AA)Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video. 
1.2.6 Provee lenguaje de signos equivalente a el audio pre-grabado (AAA)An equivalent sign language video should be provided for any prerecorded content containing audio. 
1.2.7 Provee un vídeo extendido con descripciones de audio (AAA)Where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g. there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions). 
1.2.8 Provee una alternativa para los elementos multimedia pre-grabados (AAA)For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content.See Audio transcripts for transcript information.
1.2.9 Provee una transcripción para el audio en vivo (AAA)For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content.See Audio transcripts for transcript information.
+ +
+

Nota: Ver también la descripción de WCAG Guideline 1.2: Time-based Media: Provide alternatives for time-based media.

+
+ +

Pauta 1.3 — Crear contenido que pueda presentarse de diferentes formas

+ +

Esta pauta hace referencia a la posibilidad de que todo contenido pueda ser consumido de distintas formas, adaptándose a las necesidades del usuario.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Criterios de éxitoCómo cumplirRecursos prácticos
1.3.1 Info and relationships (A) +

Any content structure — or visual relationship made between content —  can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are:

+ +
    +
  • Text labels and the form elements they describe are associated unambiguously using the {{htmlelement("label")}} element, which can be picked up by screenreaders, etc.
    • +
  • Image alt text — content images should have text available that clearly describes the image's contents, which can be programmatically associated with it (e.g. alt text), or otherwise is easy to associate (e.g. describes it and is sat right next to it). This should means that the full meaning can still be inferred even if you can't see the image.
    • +
  • Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}).
    • +
+ 		The whole of +

HTML: A good basis for accessibility is packed with information about this, but you should particularly refer to Good semantics, UI controls, and Text alternatives.

+
1.3.2 Meaningful content sequence (A)A sensible, logical reading order should be easy to determine for any content, even if it is visually presented in an unusual way. The order should be made obvious by use of correct semantic elements (e.g. headings, paragraphs), with CSS being used to create any unusual layout styles, irrespective of the markup.Again, refer to HTML: A good basis for accessibility.
1.3.3 Sensory characteristics (A) +

Instructions for operating controls or understanding content do not rely on a single sense — this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. So for example:

+ +
    +
  • "Click the round button to continue" — The button should be clearly labelled so that it is obvious that it is the button you need to press. If there are multiple buttons, make sure there are all clearly labelled to distinguish their function.
    • +
  • "Listen to the audio instructions for guidance" — This is obviously problematic — audio will be inaccessible to those with heading impairments, whereas text can be read, but also spoken by a screenreader if required.
    • +
  • "Swipe from the right hand side of the screen to reveal the menu" — some users might not be able to swipe the screen, either due to disability or because their device does not support touch. An alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means.
    • +
+ +
+

Note: Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.

+
+ 		 
1.3.4 Orientation (AA) added in 2.1Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. +

Understanding Orientation 

+
1.3.5 Identify Input Purpose (AA) added in 2.1 +

 

+ +

Follow the list of 53 input fields to programmatically identify the purpose of a field.   

+ 		Understanding Identify Input Purpose
1.3.6 Identify Purpose (AAA) added in 2.1In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.Understanding Identify Purpose
+ +
+

Nota: Ver también la descripción de WCAG: Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.

+
+ +

Pauta 1.4: Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo

+ +

Esta pauta tiene como objetivo la creación de contenido que sea fácil de diferenciar del fondo y otras decoraciones. El ejemplo clásico es sobre color (tanto en relación al contraste como utilizarlo para transmitir información), pero aplica también en otras situaciones.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Criterios de éxitoCómo cumplirRecursos prácticos
1.4.1 Use of color (A) +

Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of "required" would be more appropriate.

+ 		See Color and color contrast and Multiple labels.
1.4.2 Audio controls (A)For any audio that plays for longer than three seconds, accessible controls should be provided to play and pause the audio/video, and mute/adjust volume.Use native <button>s to provide accessible keyboard controls, as shown in Video player syling basics.
1.4.3 Minimum contrast (AA) +

The color contrast between background and foreground content should be at a minimum level to ensure legibility:

+ +
    +
  • Text and its background should have a contrast ratio of at least 4.5.1.
    • +
  • Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold.
    • +
+ 		See Color and color contrast.
1.4.4 Resize text (AA)The page should be readable and usable when the text size is doubled. This means that designs should be responsive, so that when the text size is increased, the content is still accessible. 
1.4.5 Images of text (AA)Images should NOT be used to present content where text would do the job. For example, if an image is mostly textual, it could be represented using text as well as images. 
1.4.6 Enhanced contrast (AAA) +

This follows, and builds on, criterion 1.4.3.

+ +
    +
  • Text and its background should have a contrast ratio of at least 7.1.
    • +
  • Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold.
    • +
+ 		 
1.4.7 Low or no background audio (AAA)Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood. 
1.4.8 Visual presentation (AAA) +

For text content presentation, the following should be true:

+ +
    +
  • Foreground and background colors should be user-selectable.
    • +
  • Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.
    • +
  • Text should not be fully justified (e.g. text-align: justify;)
    • +
  • line height should be at least 1.5 times the text size within paragraphs (e.g. line-height: 1.5;), and at least 2.25 times the text size between paragraphs (e.g. padding: 2.25rem;)
    • +
  • When the text size is doubled, the content should not need to be scrolled.
    • +
+ 		 
1.4.9 Images of text (No Exception) (AAA)Text should not be presented as part of an image unless it is purely decoration (i.e. it does not convey any content), or cannot be presented in any other way. 
1.4.10 Reflow (AA) added in 2.1 +
    +
  • No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic)   
    • +
  • No vertical scrolling for top-to-bottom languages (like Japanese)
    • +
  • Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).
    • +
+ 		Understanding Reflow
1.4.11 Non-Text Contrast(AA) added in 2.1Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. Understanding Non-Text Contrast
1.4.12 Text Spacing (AA) added in 2.1 +

No loss of content or functionality occurs when the following styles are applied: 

+ +
    +
  • Line height (line spacing) to at least 1.5 times the font size;
    • +
  • Spacing following paragraphs to at least 2 times the font size;
    • +
  • Letter spacing (tracking) to at least 0.12 times the font size;
    • +
  • Word spacing to at least 0.16 times the font size.
    • +
+ 		Understanding Text Spacing
1.4.13 Content on Hover or Focus (AA) added in 2.1 +

Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:

+ +
    +
  • dismissable (can be closed/removed)
    • +
  • hoverable (the additional content does not disappear when the pointer is over it) 
    • +
  • persistent (the additional content does not disappear without user action)
    • +
+ 		Understanding Content on Hover or Focus
+ +
+

Nota: Ver también la descripción de WCAG: Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background..

+
diff --git a/files/es/web/accessibility/understanding_wcag/text_labels_and_names/index.html b/files/es/web/accessibility/understanding_wcag/text_labels_and_names/index.html new file mode 100644 index 0000000000..ffaade2cb1 --- /dev/null +++ b/files/es/web/accessibility/understanding_wcag/text_labels_and_names/index.html @@ -0,0 +1,266 @@ +--- +title: Etiquetas de texto y nombres +slug: Web/Accesibilidad/Understanding_WCAG/Etiquetas_de_texto_y_nombres +tags: + - Accesibilidad + - Etiquetas de texto + - WCAG +translation_of: Web/Accessibility/Understanding_WCAG/Text_labels_and_names +--- +

Hay muchas situaciones en las cuales un control, dialogo o cualquier otra característica de un sitio web deberían recibir un nombre o etiqueta descriptiva para permitir a los usuarios de técnologías asistivas entender cual es su propósito y ser capaz de entenderlo y operarlo correctamente. Hay un número de diferentes tipos de problemas en esta categoría, dependientes del contexto, y cada uno tiene su propia solución. Los diferentes problemas y soluciones son discutidas en las secciones posteriores.

+ +

Utilizar el atributo alt para etiquetar elementos que ocupen un área que tiene el atributo href

+ +

En mapas de imágenes, cada elemento {{htmlelement("area")}} con un atributo alt definiendo un nombre que describa el recurso al que enlaza el area. Fallar al hacer eso provoca que un mapa de imagen sea difícil de usar para usuarios que usen tecnología asistiva — ellos necesitan texto alternativo para ser capaces de entender el propósito de una imagen.

+ +

Ejemplos

+ +

El siguiente ejemplo muestra un simple mapa de imagen (tomada de H24: Providing text alternatives for the area elements of image maps):

+ +
<img src="welcome.gif" usemap="#map1"
+    alt="Areas in the library. Select an area for
+more information on that area." />
+<map id="map1" name="map1">
+  <area shape="rect" coords="0,0,30,30"
+    href="reference.html" alt="Reference" />
+  <area shape="rect" coords="34,34,100,100"
+    href="media.html" alt="Audio visual lab" />
+</map>
+ +

Ver la página de referencia del elemento <area> para unu ejemplo interactivo.

+ +

Ver también

+ + + +

Los diálogos deberían ser etiquetados

+ +

Para cualquier contenedor cuyo contenido actue como una caja de diálogo (por ejemplo, un modal preguntando al usuario realizar una elección o responder a una acción siendo tomada), debe tener una etiqueta descriptiva o nombre, para que la tecnología asistiva le permita al usuario descrubir fácilmente cual es su propósito.

+ +

Una caja de diálogo es generalmente denominada con un ARIA role="dialog" o role="alertdialog"; se puede usar tanto el atributo aria-label o aria-labelledby para proporcionar una etiqueta.

+ +

Ejemplos

+ +

El siguiente ejemplo muestra una caja de dialogo sencilla, definida como role="dialog" y etiquetada con aria-labelledby.

+ +
<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
+  <h2 id="dialog1Title">Your personal details were successfully updated</h2>
+  <p id="dialog1Desc">You can change your details at any time in the user account section.</p>
+  <button>Close</button>
+</div>
+ +

Si la caja de diálogo no tiene un encabezado, se puede usar aria-label para contener la etiqueta de texto:

+ +
<div role="dialog" aria-label="Personal details updated confirmation">
+  <p>Your personal details were successfully updated. You can
+    change your details at any time in the user account section.</p>
+  <button>Close</button>
+</div>
+ +

Ver también

+ + + +

Los documentos deben tener un título

+ +

Es importante que cada documento HTML, incluya un elemento {{htmlelement("title")}} que describa el propósito de la página. Una técnica común de navegación para usuarios que usan tecnologías asistivas es inferir el contenido de la página leyendo su título. Si no hay título disponible, tienen que navegar por la página para determinar su contenido, lo cual puede ser un proceso largo y confuso.

+ +

Ejemplos

+ +

El título para el artículo de refencia sobre el elemento {{htmlelement("title")}} es como sigue:

+ +
<title>&lt;title&gt;: The Document Title element - HTML: Hypertext Markup Language | MDN</title>
+ +

Otro ejemplo podría ser:

+ +
<title>Fill in your details to register — myGov services</title>
+ +

Para ayudar al usuario, se puede actualizar el titulo de la página para reflejar cambios significativos al estado de la página (como problemas en la validación de un formulario):

+ +
<title>2 errors — Fill in your details to register — myGov services</title>
+ +

Ver también

+ +
    +
  • {{htmlelement("title")}}
    • +
+ +

Contenido incrustado debe ser etiquetado

+ +

Asegurarse que elementos que incrusten contenido tengan un atributo título que describa el contenido incrustado. Esto incluye al elemento {{htmlelement("embed")}} y al elemento {{htmlelement("object")}}. Estos elementos son usualmente definidos por un contenido gráfico, similar a un elemento {{HTMLelement("img")}}. Un título descriptivo ayuda a los usuarios de tecnologías asistivas entender que muestra el elemento.

+ +

Figuras con leyendas opcionales deberían ser etiquetadas

+ +

Para una mejor accesibilidad, incluir un {{HTMLElement("figcaption")}} dentro de un elemento {{HTMLElement("figure")}}, incluso si hacerlo es opcional técnicamente. La leyenda es adicional a cualquier texto alternativo en las imágenes dentro de la figura. La leyenda describe el proósito de una figura en el documento, que puede ser diferente de una descripción sencilla de un elemento visual, tal como lo proporciona el texto alternativo.

+ +

Ejemplo

+ +

El siguiente ejemplo muestra código para una figura con un pie de página. El atributo alt del elemento {{htmlelement("img")}} describe la apariencia de la imagen; el elemento {{htmlelement("figcaption")}} lo describe desde una perspectiva funcional (en este caso, el nombre en latín de la flor de la imagen).

+ +
<figure>
+  <img src="milkweed.jpg"
+      alt="Black and white close-up photo of milkweed flowers">
+ <figcaption>Asclepias verticillata</figcaption>
+</figure>
+
+ +

Los elementos de un conjuto campos deben ser etiquetados

+ +

Los elementos de un conjunto de campos (fieldset) deben tener un texto descriptivo, similar a otros elementos del formulario. Utilice el elemento {{htmlelement("legend")}} para describir el propósito de un conjunto de campos (fieldset).

+ +

Utilizar una leyenda para etiquetar un conjunto de campos

+ +

Al agrupar un conjunto de elementos de un formulario con un elemento {{htmlelement("fieldset")}}, se debería incluir un elemento {{htmlelement("legend")}} anidado dento de éste, conteninedo una clara descripción del grupo.

+ +

Usuarios de tecnologías asistivas encuentras esta descripción útil cuando tratan de entender el propósito del grupo. Sin la leyenda, tienen que navegar individualmente por todos los controles del formulario en el grupo para inferir una idea del propósito general, lo que puede resultar confuso.

+ +

Ejemplo

+ +
<form>
+  <fieldset>
+    <legend>Choose your favorite monster</legend>
+
+    <input type="radio" id="kraken" name="monster">
+    <label for="kraken">Kraken</label><br/>
+
+    <input type="radio" id="sasquatch" name="monster">
+    <label for="sasquatch">Sasquatch</label><br/>
+
+    <input type="radio" id="mothman" name="monster">
+    <label for="mothman">Mothman</label>
+  </fieldset>
+</form>
+ +

Puede ver un ejemplo interactivo en la página de referencia de <fieldset>.

+ +

Ver también

+ +
    +
  • {{htmlelement("fieldset")}}
    • +
  • {{htmlelement("legend")}}
    • +
+ +

Los elementos de un formulario deben estar etiquetados

+ +

Todos los elementos dentro de un formulario deben tener un elemento {{htmlelement("label")}} que identifique su propósito. Esto aplica a todos los tipos de elementos {{htmlelement("input")}}, como también para elementos {{htmlelement("button")}}, {{htmlelement("output")}}, {{htmlelement("select")}}, {{htmlelement("textarea")}}, {{htmlelement("progress")}} y {{htmlelement("meter")}}, como para cualquier elemento con el ARIA role switch.

+ +

El elemento del formulario puede ser puesto dentro de un elemento {{htmlelement("label")}}, en cuyo caso la asociación entre el elemento del formulario y la etiqueta es obvia por la estructura. O, se puede crear una asociación entre un {{htmlelement("label")}} y el elemento del formulario al especificar el valor id del elemento del formulario y el valor del atributo for de la etiqueta.

+ +

Ejemplos

+ +
<label>I agree to the terms and conditions.
+  <input type="checkbox" id="terms">
+</label>
+
+<input type="checkbox" id="emailoptin">
+<label for="emailoptin">Yes, please send me news about this product.</label>
+
+ +

Los elementos de un formulario deberían tener una etiqueta de texto visible

+ +

En adición a tener un elemento {{htmlelement("label")}} para cada elemento del formulario, estas etiquetas deberían ser visibles, no ocultarse. Las etiquetas visbles ayudan a todos los usuarios entender el propósito de un elemento de formulario. No dependa de un texto temporal porque éste desaparece tan pronto como el usuario empieza a escribir.

+ +

Los elementos marco ('frame') deben estar etiquetados

+ +

Los elementos marco ('frame'), tanto {{htmlelement("iframe")}} como el obsoleto y antiguo {{htmlelement("frame")}}, deben tener un título para describir el contenido del marco. Utilice el atributo title para etiquetar un elemento 'frame'. Sin un título, los usuarios que usen una tecnología asistiva tienen que navegar dentro del marco para entender que contiene, lo que puede ser difícil y confuso. 

+ +

El elemento <frame> ya no forma parte de la especificación HTML en la versión HTML5. El soporte podría ser abandonado por los navegadores en el futuro. Además, es difícil para los lectores de pantalla el navegar páginas con elementos <frame>. Para una mejor accesibilidad y mantenimiento futuro, se debe rediseñar cualquier página que use marcos y reemplazarlos con el uso de CSS para lograr un diseño similar.

+ +

Como una mejor práctica, también proporcionar un {{htmlelement("title")}} para el documento que esta encapsulado en el marco, con un contenido identico al atributo title del marco. (Esto asumiendo que el documento encapsulado esta en control de uno, si no, tratar de coincidir el atributo title del marco con el título del documento.) Algunos lectores de pantalla reemplazan el contenido del atributo title con el contenido del {{htmlelement("title")}} del documento encapsulado. Es más seguro y más accesible el proporcionar el mismo título en ambos lugares.

+ +

Ejemplos

+ +
<iframe
+    title="MDN Web docs"
+    width="300"
+    height="200"
+    src="https://developer.mozilla.org">
+</iframe>
+
+
+ +

Usar el atributo alt para etiquetar elementos mglyph

+ +

Al escribir ecuaciones con MathML, a cada elemento {{mathmlelement("mglyph")}} se le debe asignar el atributo alt conteniendo un nombre que describa el símbolo. Puesto que los elementos mglyph son usados para símbolos no estándar sin definiciones Unicode, los lectores de pantalla no serán capaces de automáticamente nombrarlos. El texto alternativo ayuda a los usuarios de lectores de pantalla entender el símbolo.

+ +

Los encabezados deben ser etiquetados

+ +

Asegurarse que los encabezados tengan un contenido no vacío y no estén ocultos como con el CSS display:none o aria-hidden=true. Los usuarios de lectores de pantalla confían en los encabezados para entender la estructura y el contenido de un documento.

+ +

Además, es importante usar los elementos de encabezado sólo para los encabezados de sección reales, y no como una forma rápida de hacer que el texto se destaque. Los lectores de pantalla suelen "hojear" los encabezados de una página, de manera muy parecida a los usuarios con visión, el texto que no sea encabezado que se marca con elementos de encabezamiento puede causar confusión.

+ +

Los encabezados deberían tener contenido de texto visible

+ +

Asegurarse que los encabezados tengan un contenido no vacío y no estén ocultos como con el CSS display:none or aria-hidden=true. Los usuarios de lectores de pantalla confían en los encabezados para entender la estructura y el contenido de un documento. No use encabezados para marcar imágenes u otro contenido gráfico.

+ +

Utilizar el atributo title para describir el contenido de un <iframe>

+ +

Asegurarse que los elementos {{htmlelement("iframe")}} tienen un atributo title para describir el contenido de un marco. Sin un título, los usuarios de tecnologías asistivas tienen que navegar dentro del marco para entender que contiene, lo que puede ser difícil y confuso. 

+ +

Una mejor práctica consiste en proveer un {{htmlelement("title")}} al documento encapsulado por el marco, con un contenido identico al atributo title del marco. (Asumiendo que el documento encapsulado es propio, si no, tratar de hacer coincidir el atributo title del marco con el título del documento.) Algunos lectores de pantalla reemplazan el contenido del atributo title con el contenido del {{htmlelement("title")}} del documento encapsulado. Es más seguro y accesible definir el mismo título en ambos lugares.

+ +

Contenido con imágenes deben ser etiquetados

+ +

Proporcionar un texto descriptivo para todas las imágenes y elementos parecidos a imágenes que tengan contenido (es decir que no sean decorativos. Esto incluye imágenes SVG, elementos {{htmlelement("img")}}, {{htmlelement("canvas")}}, {{htmlelement("map")}}, y {{htmlelement("area")}}, así como elementos {{htmlelement("input")}} donde este definido type=image y elementos {{htmlelement("object")}} donde el type empiece con image/. La forma típica de hacer esto es con el atributo alt. Asegurarse de que la descripción trasmite lo que muestra la imagen

+ +

Ejemplo

+ +
<img src="milkweed.jgp"
+     alt="Black and white close-up photo of milkweed flowers">
+ +

Elementos interactivos deben ser etiquetados

+ +

Si un elemento esta destinado para que los usuarios interactúen con él, debe estar etiquetado. Los elementos interactivos incluyen enlaces ({{htmlelement("a")}}), elementos de un formulario, botones, y cualquier elemento que tenga manejadores de eventos para ratón o teclado. La forma para etiquetar un elemento depende de su tipo: para elementos de un formulario, utilizar un {{htmlelement("label")}}; para enlaces, botones y elementos sobre los que se puede hacere click, el contenido del texto del elemento suele proporcionar la etiqueta. Si no existe otra opción para etiquetar un elemento, utilizar el atributo aria-label.

+ +

Usar el atributo label en elementos optgroup

+ +

En un elemento {{htmlelement("optgroup")}}, utilizar el atributo label para describir el gupo para que tecnologías asistivas puedan acceder a dicha descripción para sus usuarios.

+ +

Ejemplo

+ +

En este ejemplo, el atributo label en los elementos <optgroup> da un nombre de categoría para el grupo de opciones.

+ +
<label for="dino-select">Choose a dinosaur:</label>
+<select id="dino-select">
+    <optgroup label="Theropods">
+        <option>Tyrannosaurus</option>
+        <option>Velociraptor</option>
+        <option>Deinonychus</option>
+    </optgroup>
+    <optgroup label="Sauropods">
+        <option>Diplodocus</option>
+        <option>Saltasaurus</option>
+        <option>Apatosaurus</option>
+    </optgroup>
+</select>
+ +

Las barras de herramientas deben ser etiquetadas cuando haya más de una barra

+ +

Si se define más una barra de herramientas en una aplicación web utilizando el rol ARIA toolbar, se debe usar el atributo aria-label para etiquetar cada una de ellas de manera que pueda ser descrita por la tecnología de asistencia. Es una buena práctica etiquetar una barra de herramientas aún cuando solo haya una en la página

+ +

Ver también

+ + + +

Criterios de aprobación relacionados a WCAG

+ +
+
1.1.1 Contenido no textual (A)
+
Todo contenido no textual que es presentado al usuario tiene un texto alternativo que sirve un propósito similar, excepto para las situaciones listadas en el enlace anterior.
+
2.4.4 Propósito del enlace (en contexto) (A)
+
El propósito de cada enlace puede determinarse a partir del texto del enlace o del texto del enlace en conjunto con contexto determinado programáticamente, salvo cuando el propósito del enlace sea ambiguo para los usuarios en general.
+
2.4.9 Propósito del enlace (sólo el enlace) (AAA)
+
Se dispone de un mecanismo que permite identificar el propósito de cada enlace a partir del texto del enlace solamente, excepto cuando el propósito del enlace es ambiguo para los usuarios en general.
+
diff --git "a/files/es/web/api/animation/animaci\303\263n/index.html" "b/files/es/web/api/animation/animaci\303\263n/index.html" deleted file mode 100644 index 770036b76d..0000000000 --- "a/files/es/web/api/animation/animaci\303\263n/index.html" +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Animation() -slug: Web/API/Animation/Animación -tags: - - Animacion -translation_of: Web/API/Animation/Animation ---- -

{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}

- -

El constructor Animation() de Web Animations API devuelve una instancia del objeto Animation.

- -

Sintaxis

- -
var animation = new Animation([effect][, timeline]);
- -

Parámetros

- -
-
effect {{optional_inline}}
-
El efecto objetivo, es un objeto de la interfaz {{domxref("AnimationEffectReadOnly")}} ,para asignarlo a la animación. Aunque en el futuro podrían ser asignados otros efectos como SequenceEffect o GroupEffect, el único efecto disponible actualmente es {{domxref("KeyframeEffect")}}. Este puede ser null (valor por defecto) para indicar que no debe aplicarse ningún efecto.
-
timeline {{optional_inline}}
-
Especifica el  timeline con el que asociar la animación, como un objeto de tipo basado en la interfaz {{domxref("AnimationTimeline")}} . Actualmente el único tipo de línea de tiempo disponible es {{domxref("DocumentTimeline")}}, pero en el futuro habrá lineas de tiempo asociadas , por ejemplo, con gestos o desplazamiento. El valor por defecto es {{domxref("Document.timeline")}}, pero puede ser establecido en null.
-
- -

Ejemplos

- -

En el ejemplo Follow the White Rabbit , el constructor Animation() es usado para crear una Animation para el rabbitDownKeyframes utilizando el timeline del documento:

- -
var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
-
- -

Especificaciones

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-animation', 'Animation()' )}}{{Spec2('Web Animations')}}Editor's draft.
- -

Compatibilidad del navegador

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile(48)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] La Web Animations API solo está habilitada de manera predeterminada en Firefox Developer Edition y Nightly builds. Puedes habilitarla en compilaciones de lanzamiento estableciendo la preferencia de dom.animations-api.core.enabled en true, y puede desactivarse en cualquier versión de Firefox estableciendo esta preferencia en false.

- -

Ver también

- - diff --git a/files/es/web/api/animation/animation/index.html b/files/es/web/api/animation/animation/index.html new file mode 100644 index 0000000000..770036b76d --- /dev/null +++ b/files/es/web/api/animation/animation/index.html @@ -0,0 +1,106 @@ +--- +title: Animation() +slug: Web/API/Animation/Animación +tags: + - Animacion +translation_of: Web/API/Animation/Animation +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}

+ +

El constructor Animation() de Web Animations API devuelve una instancia del objeto Animation.

+ +

Sintaxis

+ +
var animation = new Animation([effect][, timeline]);
+ +

Parámetros

+ +
+
effect {{optional_inline}}
+
El efecto objetivo, es un objeto de la interfaz {{domxref("AnimationEffectReadOnly")}} ,para asignarlo a la animación. Aunque en el futuro podrían ser asignados otros efectos como SequenceEffect o GroupEffect, el único efecto disponible actualmente es {{domxref("KeyframeEffect")}}. Este puede ser null (valor por defecto) para indicar que no debe aplicarse ningún efecto.
+
timeline {{optional_inline}}
+
Especifica el  timeline con el que asociar la animación, como un objeto de tipo basado en la interfaz {{domxref("AnimationTimeline")}} . Actualmente el único tipo de línea de tiempo disponible es {{domxref("DocumentTimeline")}}, pero en el futuro habrá lineas de tiempo asociadas , por ejemplo, con gestos o desplazamiento. El valor por defecto es {{domxref("Document.timeline")}}, pero puede ser establecido en null.
+
+ +

Ejemplos

+ +

En el ejemplo Follow the White Rabbit , el constructor Animation() es usado para crear una Animation para el rabbitDownKeyframes utilizando el timeline del documento:

+ +
var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-animation', 'Animation()' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile(48)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] La Web Animations API solo está habilitada de manera predeterminada en Firefox Developer Edition y Nightly builds. Puedes habilitarla en compilaciones de lanzamiento estableciendo la preferencia de dom.animations-api.core.enabled en true, y puede desactivarse en cualquier versión de Firefox estableciendo esta preferencia en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/currenttime/index.html b/files/es/web/api/animation/currenttime/index.html new file mode 100644 index 0000000000..acd56f9170 --- /dev/null +++ b/files/es/web/api/animation/currenttime/index.html @@ -0,0 +1,114 @@ +--- +title: Animation.currentTime +slug: Web/API/Animation/tiempoActual +tags: + - Animacion +translation_of: Web/API/Animation/currentTime +--- +

{{APIRef("Web Animations")}}{{SeeCompatTable}}

+ +

La propiedad Animation.currentTime de la Web Animations API devuelve y establece el valor del tiempo de la animación en milisegundos, tanto si se está ejecutando como en pausa.

+ +

Si la animación carece de un {{domxref("AnimationTimeline", "timeline")}}, está inactiva, o no ha sido reproducida todavía, el valor devuelto por currentTime es null.

+ +

Sintaxis

+ +
var currentTime = Animation.currentTime;
+Animation.currentTime = newTime;
+ +

Valor

+ +

Un número que representa el tiempo actual en milisegundos, o null para desactivar la animación.

+ +

Ejemplos

+ +

En el juego Drink Me/Eat Me , la altura de Alicia está animada, por lo que puede cambiar de pequeña a grande y de grande a pequeña. Al inicio del juego, su altura de fija estableciendo el currentTime (tiempoActual) a la mitad de la duración total delKeyframeEffect:

+ +
aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
+ +

Un modo más genérico para encontrar la marca del 50% en una animación sería :

+ +
animation.currentTime =
+  animation.effect.getComputedTiming().delay +
+  animation.effect.getComputedTiming().activeDuration / 2;
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-currenttime', 'currentTime')}}{{Spec2("Web Animations")}} 
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(39.0)}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(39.0)}}
+
+ +

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta estableciendo la preferencia dom.animations-api.core.enabled en true, y puede ser deshabilitado en cualquier versión de Firefox, estableciendo esta preferencia en false.

+ +

Ver también

+ +
    +
  • {{domxref("Animation")}} para otros métodos y propiedades que puede usar para controlar la animación de la página web.
    • +
  • {{domxref("Animation.startTime")}} para programar el tiempo de inicio de una animación.
    • +
  • Web Animations API
    • +
diff --git a/files/es/web/api/animation/finished/index.html b/files/es/web/api/animation/finished/index.html new file mode 100644 index 0000000000..5d321ba012 --- /dev/null +++ b/files/es/web/api/animation/finished/index.html @@ -0,0 +1,120 @@ +--- +title: Animation.finished +slug: Web/API/Animation/terminado +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference +translation_of: Web/API/Animation/finished +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

La propiedad de solo-lectura de Animation.finished de la  Web Animations API devuelve un {{jsxref("Promise")}} que se resuelve una vez que la animación a terminado de reproducirse.

+ +
+

Una vez que la reproducción de la animación abandona el estado  finished  ( es decir, la reproducción se está ejecutando otra vez ), Un nuevo Promise es creado para esta propiedad. El nuevo Promise será resuelto cuando se haya completado la actual secuencia de la animación.

+
+ +

Sintaxis

+ +
var animationsPromise = Animation.finished;
+
+ +

Valor

+ +

Un objeto {{jsxref("Promise")}} que se resuelve cuando haya finalizado la reproducción de la animación.

+ +

Ejemplos

+ +

El siguiente código espera a que todas las animaciones que se ejecutan en el elemento elem hayan terminado, después elimina el elemento del arbol del DOM:

+ +
Promise.all(
+  elem.getAnimations().map(
+    function(animation) {
+      return animation.finished
+    }
+  )
+).then(
+  function() {
+    return elem.remove();
+  }
+);
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-finished', 'Animation.finished' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/terminado/index.html b/files/es/web/api/animation/terminado/index.html deleted file mode 100644 index 5d321ba012..0000000000 --- a/files/es/web/api/animation/terminado/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Animation.finished -slug: Web/API/Animation/terminado -tags: - - API - - Animacion - - Animaciones Web - - Experimental - - Reference -translation_of: Web/API/Animation/finished ---- -

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

- -

La propiedad de solo-lectura de Animation.finished de la  Web Animations API devuelve un {{jsxref("Promise")}} que se resuelve una vez que la animación a terminado de reproducirse.

- -
-

Una vez que la reproducción de la animación abandona el estado  finished  ( es decir, la reproducción se está ejecutando otra vez ), Un nuevo Promise es creado para esta propiedad. El nuevo Promise será resuelto cuando se haya completado la actual secuencia de la animación.

-
- -

Sintaxis

- -
var animationsPromise = Animation.finished;
-
- -

Valor

- -

Un objeto {{jsxref("Promise")}} que se resuelve cuando haya finalizado la reproducción de la animación.

- -

Ejemplos

- -

El siguiente código espera a que todas las animaciones que se ejecutan en el elemento elem hayan terminado, después elimina el elemento del arbol del DOM:

- -
Promise.all(
-  elem.getAnimations().map(
-    function(animation) {
-      return animation.finished
-    }
-  )
-).then(
-  function() {
-    return elem.remove();
-  }
-);
- -

Especificaciones

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-finished', 'Animation.finished' )}}{{Spec2('Web Animations')}}Editor's draft.
- -

Compatibilidad del navegador

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

- -

Ver también

- - diff --git a/files/es/web/api/animation/tiempoactual/index.html b/files/es/web/api/animation/tiempoactual/index.html deleted file mode 100644 index acd56f9170..0000000000 --- a/files/es/web/api/animation/tiempoactual/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Animation.currentTime -slug: Web/API/Animation/tiempoActual -tags: - - Animacion -translation_of: Web/API/Animation/currentTime ---- -

{{APIRef("Web Animations")}}{{SeeCompatTable}}

- -

La propiedad Animation.currentTime de la Web Animations API devuelve y establece el valor del tiempo de la animación en milisegundos, tanto si se está ejecutando como en pausa.

- -

Si la animación carece de un {{domxref("AnimationTimeline", "timeline")}}, está inactiva, o no ha sido reproducida todavía, el valor devuelto por currentTime es null.

- -

Sintaxis

- -
var currentTime = Animation.currentTime;
-Animation.currentTime = newTime;
- -

Valor

- -

Un número que representa el tiempo actual en milisegundos, o null para desactivar la animación.

- -

Ejemplos

- -

En el juego Drink Me/Eat Me , la altura de Alicia está animada, por lo que puede cambiar de pequeña a grande y de grande a pequeña. Al inicio del juego, su altura de fija estableciendo el currentTime (tiempoActual) a la mitad de la duración total delKeyframeEffect:

- -
aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
- -

Un modo más genérico para encontrar la marca del 50% en una animación sería :

- -
animation.currentTime =
-  animation.effect.getComputedTiming().delay +
-  animation.effect.getComputedTiming().activeDuration / 2;
- -

Especificaciones

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-currenttime', 'currentTime')}}{{Spec2("Web Animations")}} 
- -

Compatibilidad del navegador

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(39.0)}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(39.0)}}
-
- -

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta estableciendo la preferencia dom.animations-api.core.enabled en true, y puede ser deshabilitado en cualquier versión de Firefox, estableciendo esta preferencia en false.

- -

Ver también

- -
    -
  • {{domxref("Animation")}} para otros métodos y propiedades que puede usar para controlar la animación de la página web.
    • -
  • {{domxref("Animation.startTime")}} para programar el tiempo de inicio de una animación.
    • -
  • Web Animations API
    • -
diff --git a/files/es/web/api/api_de_almacenamiento_web/index.html b/files/es/web/api/api_de_almacenamiento_web/index.html deleted file mode 100644 index 26a858d254..0000000000 --- a/files/es/web/api/api_de_almacenamiento_web/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: API de almacenamiento web -slug: Web/API/API_de_almacenamiento_web -tags: - - API - - API de almacenamiento web - - Almacenamiento web - - Storage - - localStorage - - sessionStorage -translation_of: Web/API/Web_Storage_API ---- -

{{DefaultAPISidebar("Web Storage API")}}

- -

La API de almacenamiento web proporciona los mecanismos mediante los cuales el navegador puede almacenar información de tipo clave/valor, de una forma mucho más intuitiva que utilizando cookies.

- -

Almacenamiento web, conceptos y uso

- -

Los dos mecanismos en el almacenamiento web son los siguientes:

- -
    -
  • sessionStorage mantiene un área de almacenamiento separada para cada origen que está disponible mientras dure la sesión de la página (mientras el navegador esté abierto, incluyendo recargas de página y restablecimientos).
    • -
  • localStorage hace lo mismo, pero persiste incluso cuando el navegador se cierre y se reabra.
    • -
- -

Estos mecanismos están disponibles mediante las propiedades Window.sessionStorage y  Window.localStorage (dicho con más precisión, en navegadores con soporte, el objeto Window implementa los objetos  WindowLocalStorage y WindowSessionStorage, en los cuales se basan las propiedades localStorage y sessionStorage). Al invocar uno de éstos, se creará una instancia del objeto Storage, a través del cual los datos pueden ser creados, recuperados y eliminados. sessionStorage y localStorage utilizan un objeto de almacenamiento diferente según su origen — funcionan y son controlados por separado.

- -
-

Nota: Acceder al Almacenamiento web desde IFrames de terceros está prohibido si el usuario tiene deshabilitadas las cookies de terceros (Firefox implementa este comportamiento a partir de la versión 43).

-
- -
-

Nota: El almacenamiento web no es lo mismo que mozStorage (interfaces Mozilla's XPCOM para SQLite) o la Session store API (una utilidad de almacenamiento XPCOM usada por extensiones).

-
- -

Interfaces de almacenamiento web

- -
-
{{domxref("Storage")}}
-
Permite crear, recuperar y eliminar datos de un dominio y tipo de almacenamiento (sesión o local) específicos.
-
{{domxref("Window")}}
-
La API de almacenamiento web extiende el objeto {{domxref("Window")}} con dos nuevas propiedades — {{domxref("Window.sessionStorage")}} y {{domxref("Window.localStorage")}} — que proveen acceso a la sesión actual del dominio y a objetos {{domxref("Storage")}} locales, respectivamente. También ofrece un manejador de evento {{domxref("Window.onstorage")}} que se dispara cuando un área de la memoria cambia (por ejemplo, cuando se almacena un nuevo elemento).
-
{{domxref("StorageEvent")}}
-
El evento storage se dispara en el objeto Window de un documento cuando un área de la memoria cambia.
-
- -

Ejemplos

- -

Para ilustrar algunos usos típicos del almacenamiento web, hemos creado un ejemplo simple, llamado Demo de almacenamiento web. La página de inicio proporciona controles que puedes utilizar para personalizar el color, la tipografía y la imagen decorativa. Cuando seleccionas una opción diferente, la página se actualiza instantáneamente; además, tus opciones se almacenan en localStorage, de forma que si abandonas la página y la vuelves a cargar, tus opciones son recordadas.

- -

También creamos una página de salida del evento — si cargas esta página en otra pestaña y luego haces cambios a tus opciones en la página de inicio, verás que se muestra la información almacenada actualizada puesto que se dispara un evento {{event("StorageEvent")}}.

- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Web Storage')}}{{Spec2('Web Storage')}} 
- -

Compatibilidad de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracteristicaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
-
- -

Todos los navegadores tienen distintos niveles de capacidad tanto para localStorage como para sessionStorage. Aquí está una análisis detallado de todas las capacidades de almacenamiento de diferentes navegadores.

- -
-

Nota: Desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de caché, la cual está sujeta a limpiezas ocasionales, a petición del sistema operativo, típicamente cuando el espacio es reducido.

-
- - - -

La mayoría de los navegadores de hoy en día soportan una opción de privacidad llamada  'Modo incógnito', 'Navegación privada', o algo similar, que básicamente se asegura de que la sesión de navegación no deje rastros después de que el navegador se cierra. Esto es fundamentalmente incompatible con el almacenamiento web por obvias razones. Por ello, muchos navegadores están experimentando con diferentes escenarios para lidiar con esta incompatibilidad.

- -

La mayoría de los navegadores han optado por una estrategia donde las API de almacenamiento siguen disponibles y aparentemente completamente funcionales, con la única gran diferencia de que todos los datos almacenados son eliminados después de cerrar el navegador. Para estos navegadores aún hay diferentes interpretaciones sobre qué debería hacerse con los datos almacenados existentes (de una sesión de navegación normal). ¿Deberían de estar disponibles para lectura cuando esté en modo privado? Entonces, hay algunos navegadores, sobre todo Safari, que han optado por una solución donde el almacenamiento está disponible, pero vacío, y tiene un cupo de 0 bytes asignado, por lo que se vuelve imposible usar esta memoria para escribir datos.

- -

Los desarrolladores deberían de estar conscientes de estas diferentes implementaciones y tenerlas en cuenta a la hora de desarrollar aplicaciones web que depende de la API de almacenamiento web. Para más información, échale un vistazo a esta entrada de blog WHATWG que trata específicamente con este tema.

- -

Ver también

- - diff --git a/files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html b/files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html deleted file mode 100644 index 086af18610..0000000000 --- a/files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: Usando la API de almacenamiento web -slug: Web/API/API_de_almacenamiento_web/Usando_la_API_de_almacenamiento_web -tags: - - API - - API de almacenamiento web - - Guía - - localStorage - - sessionStorage -translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API ---- -
{{DefaultAPISidebar("Web Storage API")}}
- -
-

La API de almacenamiento web proporciona los mecanismos mediante los cuales el navegador puede almacenar información de tipo clave/valor, de una forma mucho más intuitiva que utilizando cookies.

- -

Este artículo proporciona una guía general de cómo usar esta tecnología.

-
- -

Conceptos básicos

- -

Los objetos de almacenamiento son simples almacenes de clave/valor, similares a objetos, pero que permanecen intactos cuando la página se recarga. Las claves y los valores siempre son cadenas de texto (fíjate que las claves con enteros se convierten automáticamente a cadenas, tal y como lo hacen los objetos). Puedes acceder a estos valores como un objeto, o con los métodos {{domxref("Storage.getItem()")}} y {{domxref("Storage.setItem()")}}. Estas tres líneas modifican el valor de colorSetting de la misma manera:

- -
localStorage.colorSetting = '#a4509b';
-localStorage['colorSetting'] = '#a4509b';
-localStorage.setItem('colorSetting', '#a4509b');
- -
-

Nota: Se recomiendo usar la API de almacenamiento web (setItem, getItem, removeItem, key, length) para prevenir las dificultades asociadas al uso de simples objetos como almacenes de valores llave/valor.

-
- -

Los dos mecanismos en el almacenamiento web son los siguientes:

- -
    -
  • sessionStorage mantiene un área de almacenamiento separada para cada origen que está disponible mientras dure la sesión de la página (mientras el navegador esté abierto, incluyendo recargas de página y restablecimientos).
    • -
  • localStorage hace lo mismo, pero persiste incluso cuando el navegador se cierre y se reabra.
    • -
- -

Estos mecanismos están disponibles mediante las propiedades Window.sessionStorage y  Window.localStorage (dicho con más precisión, en navegadores con soporte, el objeto Window implementa los objetos  WindowLocalStorage y WindowSessionStorage, en los cuales se basan las propiedades localStorage y sessionStorage). Al invocar uno de éstos, se creará una instancia del objeto Storage, a través del cual los datos pueden ser creados, recuperados y eliminados. sessionStorage y localStorage utilizan un objeto de almacenamiento diferente según su origen — funcionan y son controlados por separado.

- -

Así que, por ejemplo, si en un inicio se llama a localStorage en un documento, esto devolverá un objeto {{domxref("Storage")}}; llamar a sessionStorage en un documento devolverá un objeto {{domxref("Storage")}} diferente. Ambos objetos se pueden manipular de la misma forma, pero separados.

- -

Detectar la característica localStorage

- -

Para poder usar localStorage, debemos de verificar que tiene soporte y que está disponible en la sesión del buscador actual.

- -

Probar la disponibilidad

- -
-

Nota: esta API está disponible en las versiones actuales de todos los navegadores principales. La prueba de disponibilidad es necesaria sólo si debes soportar navegadores muy antiguos, como Internet Explorer 6 o 7, o en las circunstancias limitadas descritas más abajo.

-
- -

Los buscadores que soportan localStorage tienen una propiedad en el objeto window que se llama localStorage. Sin embargo, por varias razones, el sólo asegurarse de que la propiedad existe puede arrojar excepciones. El que localStorage exista no es garantía suficiente de que en verdad esté disponible, puesto que varios buscadores ofrecen configuraciones que lo inhabilitan. Así que un buscador puede soportar localStorage, pero puede no hacerlo disponible para los scripts en la página. Un ejemplo de esto es Safari, que en el modo de búsqueda privada ofrece un objeto localStorage vacío con un cupo de 0, por lo que es inutilizable. Sin embargo, es posible que aún así obtengamos un QuotaExceededError legítimo, lo que significa que ya usamos todo el espacio de almacenamiento disponible, aunque el almacenamiento esté, de hecho, disponible. Nuestra detección de la característica debe de tomar en cuenta estos escenarios.

- -

Esta función detecta si localStorage tiene soporte y está disponible:

- -
function storageAvailable(type) {
-    try {
-        var storage = window[type],
-            x = '__storage_test__';
-        storage.setItem(x, x);
-        storage.removeItem(x);
-        return true;
-    }
-    catch(e) {
-        return e instanceof DOMException && (
-            // everything except Firefox
-            e.code === 22 ||
-            // Firefox
-            e.code === 1014 ||
-            // test name field too, because code might not be present
-            // everything except Firefox
-            e.name === 'QuotaExceededError' ||
-            // Firefox
-            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
-            // acknowledge QuotaExceededError only if there's something already stored
-            storage.length !== 0;
-    }
-}
- -

Y aquí se muestra cómo usarla:

- -
if (storageAvailable('localStorage')) {
-  // Yippee! We can use localStorage awesomeness
-}
-else {
-  // Too bad, no localStorage for us
-}
- -

También puedes probar sessionStorage invocando storageAvailable('sessionStorage').

- -

Aquí puedes ver una breve historia de la detección de la característica localStorage.

- -

Ejemplo

- -

Para ilustrar un uso típico de almacenamiento web, creamos un ejemplo simple que llamamos Demo de almacenamiento web. La página de inicio proporciona unos controles que se pueden usar para personalizar el color, la tipografía y la imagen decorativa:

- -

Cuando seleccionas una opción diferente, la página se actualiza instantáneamente; además, tus opciones se almacenan en localStorage, de forma que si abandonas la página y la vuelves a cargar, tus opciones son recordadas.

- -

También creamos una página de salida del evento — si cargas esta página en otra pestaña y luego haces cambios a tus opciones en la página de inicio, verás que se muestra la información almacenada actualizada puesto que se dispara un {{domxref("StorageEvent")}}.

- -

- -
-

Nota: Puedes ver las páginas de ejemplo usando los links de arriba y también puedes ver el código fuente.

-
- -

Probar si la memoria tiene valores

- -

En el inicio de main.js, probamos si el objeto ya tiene valores (es decir, si la página ya fue visitada):

- -
if(!localStorage.getItem('bgcolor')) {
-  populateStorage();
-} else {
-  setStyles();
-}
- -

El método {{domxref("Storage.getItem()")}} se usa para obtener un dato de la memoria; en este caso, estamos probando si el dato bgcolor existe; si no, corremos populateStorage() para añadir los valores personalizados actuales a la memoria. Si ya hay valores guardados, corremos setStyles() para actualizar el estilo de la página con los valores almacenados.

- -

Nota: También puedes usar {{domxref("Storage.length")}} para probar si el objeto de almacenamiento está vació o no.

- -

Obtener valores de la memoria

- -

Como dijimos arriba, los valores se pueden recuperar de la memoria usando {{domxref("Storage.getItem()")}}. Este método usa la llave del dato como argumento y devuelve el valor. Por ejemplo:

- -
function setStyles() {
-  var currentColor = localStorage.getItem('bgcolor');
-  var currentFont = localStorage.getItem('font');
-  var currentImage = localStorage.getItem('image');
-
-  document.getElementById('bgcolor').value = currentColor;
-  document.getElementById('font').value = currentFont;
-  document.getElementById('image').value = currentImage;
-
-  htmlElem.style.backgroundColor = '#' + currentColor;
-  pElem.style.fontFamily = currentFont;
-  imgElem.setAttribute('src', currentImage);
-}
- -

Aquí, en las primeras tres líneas tomamos los valores del almacenamiento local. Después, fijamos los valores mostrados en los elementos del formulario a esos valores, de forma que se mantengan sincronizados cuando recargues la página. Finalmente, actualizamos los estilos y la imagen decorativa en la página para que tus opciones personalizadas vuelvan a aparecer al recargar.

- -

Guardar valores en la memoria

- -

{{domxref("Storage.setItem()")}} se usa tanto para crear nuevos datos como para actualizar valores existentes (si el dato ya existía). Este método recibe dos argumentos: la llave del dato que se va a crear/modificar y el valor que se va a guardar.

- -
function populateStorage() {
-  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
-  localStorage.setItem('font', document.getElementById('font').value);
-  localStorage.setItem('image', document.getElementById('image').value);
-
-  setStyles();
-}
- -

La función populateStorage() define tres elementos en el almacenamiento local — el color de fondo, la tipografía y la ruta de almacenamiento de la imagen. Luego corre la función setStyles() para actualizar el estilo de la página, etc.

- -

También incluimos un manejador onchange para cada elemento del formulario, de manera que los datos y los estilos son actualizados cada vez que un valor del formulario cambia:

- -
bgcolorForm.onchange = populateStorage;
-fontForm.onchange = populateStorage;
-imageForm.onchange = populateStorage;
- -

Responder a cambios en la memoria con el evento StorageEvent

- -

El evento {{domxref("StorageEvent")}} se dispara siempre que se hace un cambio al objeto {{domxref("Storage")}} (nota que este evento no se dispara para cambios en sessionStorage). Este evento no va a trabajar en la misma página en la que se están haciendo los cambios, sino que es una manera para que las otras páginas del dominio que usan la memoria sincronicen los cambios que se están haciendo. Las páginas en otros dominios no pueden acceder a los mismos objetos de almacenamiento.

- -

En la página de eventos (ver events.js) el único JavaScript es el siguiente:

- -
window.addEventListener('storage', function(e) {
-  document.querySelector('.my-key').textContent = e.key;
-  document.querySelector('.my-old').textContent = e.oldValue;
-  document.querySelector('.my-new').textContent = e.newValue;
-  document.querySelector('.my-url').textContent = e.url;
-  document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
-});
- -

Aquí añadimos un detector de evento al objeto window que se dispara cuando el objeto {{domxref("Storage")}} asociado con el origen actual cambia. Como puedes ver arriba, el objeto asociado a este evento tiene varias propiedades que contienen información útil — la llave del dato que cambió, el valor anterior al cambio, el nuevo valor tras el cambio, la URL del documento que cambió la memoria y el objeto de almacenamiento mismo (que volvimos una cadena para que pudieras ver su contenido).

- -

Borrar registros

- -

El almacenamiento web también provee un par de métodos simples para remover datos. No los usamos en nuestro demo, pero se pueden añadir de manera muy simple a tu proyecto:

- -
    -
  • {{domxref("Storage.removeItem()")}} recibe un solo argumento — la llave del dato que quieres eliminar — y lo remueve del objeto de almacenamiento de ese dominio.
    • -
  • {{domxref("Storage.clear()")}} no recibe argumentos; vacía todo el objeto de almacenamiento de ese dominio.
    • -
- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilidad de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
-
- -

Todos los navegadores tienen distintos niveles de capacidad tanto para localStorage como para sessionStorage. Aquí está una análisis detallado de todas las capacidades de almacenamiento de diferentes navegadores.

- -
-

Nota: Desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de caché, la cual está sujeta a limpiezas ocasionales, a petición del sistema operativo, típicamente cuando el espacio es reducido.

-
- -

Ver también

- - diff --git a/files/es/web/api/api_del_portapapeles/index.html b/files/es/web/api/api_del_portapapeles/index.html deleted file mode 100644 index 53e43f6bd5..0000000000 --- a/files/es/web/api/api_del_portapapeles/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: API del portapapeles -slug: Web/API/API_del_portapapeles -translation_of: Web/API/Clipboard_API ---- -
{{DefaultAPISidebar("Clipboard API")}}
- -

La API del portapapeles permite acceder los comandos del portapapeles (cortar, copiar y pegar), así como leer y escribir de manera asíncrona el portapapeles del sistema. Acceder al contenido del portapapeles está sujeta a la API de permisos: El permiso clipboard-write es concedido automáticamente a las páginas cuando están en la pestaña activa. El permiso clipboard-read debe ser solicitado, lo que se puede hacer intentando leer directamente el portapapeles.

- -

Esta API está diseñada para reemplazar el acceso al portapapeles usando {{domxref("document.execCommand()")}}.

- -

Accediendo al portapapeles

- -

En vez de instanciar un objeto Clipboard, se puede acceder al portapapeles del sistema a través de la variable global {{domxref("Navigator.clipboard")}}:

- -
navigator.clipboard.readText().then(
-  clipText => document.querySelector(".editor").innerText += clipText);
- -

Esta pieza de código lee el texto que hay en el portapapeles y lo añade al primer elemento que tenga la clase editor. Desde que {{domxref("Clipboard.readText", "readText()")}} (y también {{domxref("Clipboard.read", "read()")}}, de hecho) devuelve una cadena de texto vacía si el contenido del portapapeles no es texto, este código es seguro.

- -

Interfaces

- -
-
{{domxref("Clipboard")}} {{securecontext_inline}}
-
Proporciona una interfaz para leer y escribir texto y datos. La especificación se refiere a esto como 'Async Clipboard API.'
-
{{domxref("ClipboardEvent")}} {{securecontext_inline}}
-
Representa la información del evento que se ha disparado. Los eventos que se pueden disparar son: {{domxref("Element/cut_event", "cortar")}}, {{domxref("Element/copy_event", "copiar")}}, y {{domxref("Element/paste_event", "pegar")}}. La especificación se refiere a esto como 'Clipboard Event API'.
-
{{domxref("ClipboardItem")}} {{securecontext_inline}}
-
Representa uno de los objetos del portapapeles, usado en la lectura y escritura de datos.
-
- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoObservaciones
{{SpecName('Clipboard API')}}{{Spec2('Clipboard API')}}Definición primitiva.
- -

Compatibilidad con navegadores

- -

Clipboard

- -
- - -

{{Compat("api.Clipboard")}}

- -

ClipboardEvent

- - - -

{{Compat("api.ClipboardEvent")}}

- -

ClipboardItem

- - - -

{{Compat("api.ClipboardItem")}}

- -

Véase también

- - -
diff --git a/files/es/web/api/battery_status_api/index.html b/files/es/web/api/battery_status_api/index.html new file mode 100644 index 0000000000..9cdc7259be --- /dev/null +++ b/files/es/web/api/battery_status_api/index.html @@ -0,0 +1,39 @@ +--- +title: API de Estado de Bateria +slug: WebAPI/Estado_de_Bateria +tags: + - API + - Apps + - Firefox OS + - Mobile +translation_of: Web/API/Battery_Status_API +--- +

La API de Estado de Batería, también conocida como "Battery API", provee información acerca del sistema de carga de la batería y permite notificar mediante eventos que son enviados cuando el nivel de la batería cambia. Este puede ser usado para ajustar el uso de recursos por parte de una aplicación y evitar un gasto innecesario de energía cuando la batería esta baja o para guardar cambios en un archivo antes de que la batería se agote y así prevenir perdida de información.

+

La API de Estado de Batería se puede extender mediante {{domxref("window.navigator")}} con una propiedad {{domxref("window.navigator.battery")}} que pertenece al objeto {{domxref("BatteryManager")}} y agrega algunos nuevos eventos que usted puede recibir en el monitor de estado de la batería.

+

Ejemplo

+

En este ejemplo, observamos los cambios en el estado de la carga (este o no conectado y cargando) y  en el nivel de la batería. Esto se hace escuchando el evento {{event("chargingchange")}} y el evento {{event("levelchange")}} respectivamente.

+
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
+
+function updateBatteryStatus() {
+  console.log("Battery status: " + battery.level * 100 + " %");
+
+  if (battery.charging) {
+    console.log("Battery is charging");
+  }
+}
+
+battery.addEventListener("chargingchange", updateBatteryStatus);
+battery.addEventListener("levelchange", updateBatteryStatus);
+updateBatteryStatus();
+
+

Vea también: El ejemplo en las especificaciones

+

Especificaciones

+

{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}

+

Compatibilidad del Navegador

+

{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}

+

Vea también

+ diff --git a/files/es/web/api/canvas_api/a_basic_ray-caster/index.html b/files/es/web/api/canvas_api/a_basic_ray-caster/index.html new file mode 100644 index 0000000000..7917541554 --- /dev/null +++ b/files/es/web/api/canvas_api/a_basic_ray-caster/index.html @@ -0,0 +1,59 @@ +--- +title: A basic ray-caster +slug: Web/HTML/Canvas/A_basic_ray-caster +tags: + - Avanzado + - Canvas + - Ejemplo + - Espanol(2) + - Gráficos(2) + - HTML + - Necesita traducción + - Web +translation_of: Web/API/Canvas_API/A_basic_ray-caster +--- +
{{CanvasSidebar}}
+ +
+

Este artículo proporciona un interesante ejemplo de la vida real usando el elemento {{HTMLElement("canvas")}} para renderizar un sencillo entorno 3D usando una técnica de render llamada ray-casting.

+
+ +

{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}

+ +

Abrir en una nueva ventana

+ +

¿Por qué?

+ +

 

+ +

Después de darme cuenta, para mi satisfacción, de que el ingenioso elemento <canvas> sobre el que había estado leyendo, no sólo iba a recibir soporte por parte de Firefox, sino que ya estaba soportado por la versión actual de Safari, así que tenía que ponerme manos a la obra y hacer un pequeño experimento.

+ +

El tutorial y el resumen que encontré en la MDN son geniales, pero nadie había escrito nada (todavía) sobre animación, así que pensé que sería una buena oportunidad para portar un sencillo raycaster en el que había trabajado hacía tiempo y comprobar qué tipo de rendimiento podía esperar de un buffer de pixeles controlado por JavaScript.

+ +

¿Cómo?

+ +

La idea es sencilla, usar {{domxref("WindowTimers.setInterval","setInterval()")}} con un retraso arbitrario que se corresponde con la velocidad de fotogramas deseada. Por cada llamada al intervalo se ejecutará una función que volverá a pintar el elemento <canvas>  en el que se muestra la vista actual del usuario. Sé que podría haber empezado con un ejemplo más simple, pero creo que el tutorial sobre <canvas> vale para eso, y quería ver si podía hacer esto.

+ +

Continuemos, por cada actualización, el raycaster comprueba si has presionado alguna tecla, si no has presionado ninguna se mantendrán los cálculos para ahorrar tiempo de ejecución. Si se ha presionado alguna tecla, el <canvas> es borrado, el suelo y el cielo son pintados, la posición y la orientación de la cámara son actualizados, y los rayos son lanzados. Según van intersectando los rayos con las paredes se van pintando líneas verticales de pared del color de la pared con la que han colisionado, mezcladas con una versión más oscura del color en función de la distancia a la que se encuentra la pared. La altura de la línea vertical depende directamente de la distancia a la que el rayo es interesectado, dibujándose centrada con respecto la línea del horizonte.

+ +

El código que he terminado usando es una amalgama regurgitada del código que aparece en los capítulos sobre raycasting del libro de André LaMothe Tricks of the Game Programming Gurus y una versión en java de un raycaster que encontré online, a su vez pasado por el filtro de mi pulsión a renombrar todo para que tenga sentido para mí y todo el chapuceo necesario para que las cosas funcionen bien.

+ +

Resultados

+ +

El <canvas> en Safari 2.0.1 rindió sorprendentemente bien. Renderizando columnas de 8 pixeles de ancho, puedo correr una ventana de 320 x 240 a 24 FPS en mi Apple Mini. Firefox 1.5 Beta 1 es incluso más rápido; puedo correr una ventana de 320 x 240 a 24 FPS con columnas de 4 píxeles de ancho. No es exactamente un nuevo miembro de la familia de ID Software, pero es bastante decente teniendo en cuenta que es un entorno completamente interpretado, y que no me he tenido que preocupar de reservar memoria, ni modos de vídeo o escribir rutinas en ensamblador. Aún así el código intenta ser lo más eficiente posible, usando tablas de acceso rápido para valores precalculados, pero no soy ningún gurú de la optimización, así que seguramente haya varias cosas que se puedan escribir más rápido.

+ +

Además, deja bastante que desear en términos de intentar convertir esto en un motor de juego - no hay texturas en las paredes, no hay sprites, no hay puertas, ni siquiera hay teletransportadores que te permitan ir a otro nivel. Pero tengo bastante confianza en que todas esas cosas se podrían añadir con el suficiente tiempo disponible. La API de canvas soporta copiado de píxeles de imágenes, así que tener texturas parece bastante factible. Dejaré esto para otro artículo, seguramente para otra persona. =)

+ +

El ray-caster

+ +

El gente tan maravillosa que hay aquí han copiado manualmente mis archivos así vosotros podéis echarle un vistazo, y para vuestro disfrute he puesto los archivos individuales como listados de código (ver abajo).

+ +

¡Así que aquí lo tenéis, arrancad Safari 1.3+ o Firefox 1.5+ o cualquier otro navegador que soporte el elemento <canvas> y a disfrutar!
+
+ input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

+ +

Ver también

+ + diff --git a/files/es/web/api/canvas_api/index.html b/files/es/web/api/canvas_api/index.html new file mode 100644 index 0000000000..dfdde2bf63 --- /dev/null +++ b/files/es/web/api/canvas_api/index.html @@ -0,0 +1,170 @@ +--- +title: API Canvas +slug: Web/HTML/Canvas +tags: + - API + - Canvas + - JavaScript + - Referencia + - introducción +translation_of: Web/API/Canvas_API +--- +
{{CanvasSidebar}}
+ +

Añadido en HTML5, el elemento HTML {{HTMLElement("canvas")}} se puede usar para dibujar gráficos mediante scripting en JavaScript. Por ejemplo, se puede usar para hacer gráficas, composiciones fotográficas, crear animaciones, o incluso procesado o renderizado de vídeo en tiempo real.

+ +

Las aplicaciones de Mozilla soportan <canvas> desde Gecko 1.8 (es decir, Firefox 1.5). El elemento fue inicialmenmte presentado por Apple para el Dashboard de OS X y Safari. Internet Explorer soporta <canvas> desde la versión 9 en adelante; para versiones anteriores de IE, se puede añadir soporte para <canvas> a una página incluyendo un script del proyecto de Google Explorer Canvas. Google Chrome y Opera 9 también soportan <canvas>.

+ +

El elemento <canvas> también se usa en WebGL para dibujar gráficos 3D con aceleración por hardware en páginas web.

+ +

Ejemplo

+ +

Esto es un trozo de código que usa el método {{domxref("CanvasRenderingContext2D.fillRect()")}}.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+ +

Edita este código para ver tus cambios en tiempo real en este canvas:

+ + + +

{{ EmbedLiveSample('Código_editable', 700, 360) }}

+ +

Referencia

+ +
+
    +
  • {{domxref("HTMLCanvasElement")}}
    • +
  • {{domxref("CanvasRenderingContext2D")}}
    • +
  • {{domxref("CanvasGradient")}}
    • +
  • {{domxref("CanvasImageSource")}}
    • +
  • {{domxref("CanvasPattern")}}
    • +
  • {{domxref("ImageBitmap")}}
    • +
  • {{domxref("ImageData")}}
    • +
  • {{domxref("RenderingContext")}}
    • +
  • {{domxref("TextMetrics")}}
    • +
  • {{domxref("OffscreenCanvas")}}{{experimental_inline}}
    • +
  • {{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}
    • +
+
+ +

Las interfaces relacionadas con WebGLRenderingContext están en WebGL.

+ +

{{domxref("CanvasCaptureMediaStream")}} está relacionado..

+ +

Guías y tutoriales

+ +
+
Tutorial Canvas
+
Tutorial exhaustivo que cubre tanto el uso básico de <canvas> como sus características avanzadas.
+
Fragmentos de código: Canvas
+
Algunos fragmentos de código orientados al desarrollador de extensiones usando <canvas>.
+
Demo: Un laberinto básico
+
Una demo de una animación de laberinto usando canvas.
+
Dibujar objetos DOM en un canvas
+
Cómo dibujar contenido DOM, como elementos HTML, en un canvas.
+
Manipulación de vídeo usando canvas
+
Combinando {{HTMLElement("video")}} y {{HTMLElement("canvas")}} para manipular datos de vídeo en tiempo real.
+
+ +

Recursos

+ +

Genéricos

+ + + +

Librerías

+ +
    +
  • Fabric.js es una librería open-source para canvas con capacidad de parsear SVG.
    • +
  • Kinetic.js es una librería open-source de canvas enfocada en la interactividad para aplicaciones móviles y de escritorio.
    • +
  • Paper.js es un framework para gráficos vectoriales open source que funciona sobre Canvas HTML5.
    • +
  • Origami.js es una librería ligera open-source para canvas.
    • +
  • libCanvas es un framework ligero y potente para canvas.
    • +
  • Processing.js es un port de PVL (Processing visualization language).
    • +
  • PlayCanvas es un motor open source de juegos.
    • +
  • Pixi.js es un motor open source de juegos.
    • +
  • PlotKit es una librería para hacer gráficas.
    • +
  • Rekapi es una API para animación por frames para Canvas.
    • +
  • PhiloGL es un framework WebGL para visualización de datos, programación creativa y desarrollo de juegos.
    • +
  • JavaScript InfoVis Toolkit crea visualizaciones de datos 2D interactivas para Web.
    • +
  • EaselJS es una librería open source/libre que facilita el uso de canvas para arte y juegos
    • +
  • Scrawl-canvas es otra librería open-source javascript para crear y manipular elementos canvas en 2D
    • +
  • heatmap.js es una librería open-source para crear mapas (heatmaps)
    • +
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML WHATWG')}} 
+ +

Ver también

+ + diff --git a/files/es/web/api/canvas_api/manipulating_video_using_canvas/index.html b/files/es/web/api/canvas_api/manipulating_video_using_canvas/index.html new file mode 100644 index 0000000000..a3ae61673d --- /dev/null +++ b/files/es/web/api/canvas_api/manipulating_video_using_canvas/index.html @@ -0,0 +1,126 @@ +--- +title: Manipular video por medio de canvas +slug: Web/HTML/anipular_video_por_medio_de_canvas +tags: + - Canvas + - Firefox 3.5 + - Video + - para_revisar +translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas +--- +

{{ fx_minversion_header (3.5) }}

+

Al combinar las capacidades del elemento video introducido en Firefox 3.5 con un elemento canvas , puedes manipular los datos de video en tiempo real para incorporar una variedad de efectos visuales que se mostrarán en el video.  Este artículo, adaptado de esta entrada del blog de Paul Rouget, muestra cómo realizar una inserción croma (también conocida como el "efecto pantalla verde") utilizando el código JavaScript.

+

Ver este ejemplo en vivo .

+

El contenido del documento

+

El documento XHTML que se utiliza para representar este contenido se muestra a continuación.

+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      body {
+        background: black;
+        color:#CCCCCC;
+      }
+      #c2 {
+        background-image: url(foo.png);
+        background-repeat: no-repeat;
+      }
+      div {
+        float: left;
+        border :1px solid #444444;
+        padding:10px;
+        margin: 10px;
+        background:#3B3B3B;
+      }
+    </style>
+    <script type="text/javascript;version=1.8" src="main.js"></script>
+  </head>
+
+  <body onload="processor.doLoad()">
+    <div>
+      <video id="video" src="video.ogv" controls="true"/>
+    </div>
+    <div>
+      <canvas id="c1" width="160" height="96"/>
+      <canvas id="c2" width="160" height="96"/>
+    </div>
+  </body>
+</html>
+
+

Los puntos clave a tener en cuenta son:

+
    +
  1. Este documento establece dos elemento canvas , con los identificadores de c1 y c2 .  Canvas c1 se utiliza para mostrar la imagen actual del video original, mientras que c2 se utiliza para mostrar el video después de realizar la manipulación con el efecto croma; c2 se carga previamente con la imagen fija que se utilizará para sustituir el fondo verde en el video.
    2. +
  2. El código JavaScript es importado de un script llamado main.js ; este script utiliza JavaScript 1.8 características, de modo que la versión se especifica en la línea 22 al importar la secuencia de comandos.
    3. +
  3. Cuando se carga el documento, se ejecuta el método processor.doLoad() de main.js.
    4. +
+

El código JavaScript

+

El código JavaScript en main.js consta de tres métodos.

+

Inicializar el reproductor de croma

+

El método doLoad() se llama cuando el documento XHTML se carga inicialmente.  La función de este método es preparar las variables necesarias para el código de procesamiento del croma y la creación de un detector de eventos para que podamos detectar cuándo inicia el usuario la reproducción del video.

+
  doLoad: function() {
+    this.video = document.getElementById("video");
+    this.c1 = document.getElementById("c1");
+    this.ctx1 = this.c1.getContext("2d");
+    this.c2 = document.getElementById("c2");
+    this.ctx2 = this.c2.getContext("2d");
+    let self = this;
+    this.video.addEventListener("play", function() {
+        self.width = self.video.videoWidth / 2;
+        self.height = self.video.videoHeight / 2;
+        self.timerCallback();
+      }, false);
+  },
+
+

Este código obtiene referencias a los elementos del documento XHTML que son de particular interés, a saber, el elemento video y los dos elementos canvas.  También recupera las referencias a los contextos gráficos para cada uno de los dos elementos canvas.  Estos serán utilizados cuando estamos haciendo de verdad el efecto croma.

+

Luego addEventListener() es llamado para empezar a ver el elemento video de forma que podamos obtener una notificación cuando el usuario presione el botón de reproducción en el video.  En respuesta al usuario que inicia la reproducción, el código obtiene la anchura y la altura de video, reduciendo a la mitad cada uno (vamos a reducir a la mitad el tamaño del video, cuando llevamos a cabo la manipulación efecto croma). A continuación, llama al método timerCallback() para iniciar el visionado del video y la computación del efecto visual.

+

La devolución de llamada del temporizador

+

La devolución de llamada del temporizador se llama inicialmente cuando el video comienza a reproducirse (cuando tiene lugar el evento "reproducir"), a continuación, toma la responsabilidad por la que se establece a sí mismo para ser llamado periódicamente, a fin de poner en marcha el efecto croma para cada imagen.

+
  timerCallback: function() {
+    if (this.video.paused || this.video.ended) {
+      return;
+    }
+    this.computeFrame();
+    let self = this;
+    setTimeout(function () {
+        self.timerCallback();
+      }, 0);
+  },
+
+

Lo primero que la devolución de llamada hace es comprobar si el video se está aún reproduciendo, y si no lo está, la devolución de llamada regresa inmediatamente sin hacer nada.

+

A continuación, llama al método computeFrame(), que lleva a cabo la manipulación del efecto croma en la imagen de video actual.

+

Lo último que la devolución de llamada hace es llamar a setTimeout() para programarse para ser llamado lo más pronto posible.  En el mundo real, es probable que programes esto en función de la velocidad de fotogramas del video.

+

Manipulación de los datos de la imagen del video

+

El método computeFrame(), que se muestra a continuación, se encarga de ir a buscar realmente un fotograma de datos y realizar el efecto croma.

+
  computeFrame: function() {
+    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
+    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+    let l = frame.data.length / 4;
+
+    for (let i = 0; i < l; i++) {
+      let r = frame.data[i * 4 + 0];
+      let g = frame.data[i * 4 + 1];
+      let b = frame.data[i * 4 + 2];
+      if (g > 100 && r > 100 && b < 43)
+        frame.data[i * 4 + 3] = 0;
+    }
+    this.ctx2.putImageData(frame, 0, 0);
+    return;
+  }
+
+

Cuando esta rutina es llamada, el elemento video muestra el fotograma de datos de video más reciente, que tiene este aspecto:

+

video.png

+

En la línea 2, ese fotograma de video se copia al contexto gráfico ctx1 del primer lienzo, especificando como alto y ancho los valores que previamente guardamos para dibujar el fotograma a mitad de tamaño.  Ten en cuenta que puedes pasar simplemente el elemento de video al método drawImage() del contexto para dibujar el fotograma de video actual en dicho contexto.  El resultado es:

+

sourcectx.png

+

Línea 3 obtiene una copia de los datos gráficos del actual fotograma de video llamando al método getImageData() en el primer contexto.  Esto proporciona los datos de imagen en píxeles de 32 bits sin procesar que podemos después manipular.  Línea 4 calcula el número de píxeles de la imagen al dividir entre cuatro el tamaño total de los datos de la imagen del fotograma.

+

El bucle for que comienza en la línea 6 explora a través de los píxeles del fotograma, extrayendo los valores rojo, verde y azul para cada píxel, y compara los valores frente a números predeterminados que se utilizan para detectar la pantalla verde que se reemplazará por la imagen de fondo fija importada de foo.png .

+

Cada píxel de datos de imagen del fotograma que se encuentra que está dentro de los parámetros que se consideran parte de la pantalla verde tiene su valor alfa reemplazado por un cero, lo que indica que el píxel es totalmente transparente.  Como resultado, la imagen final tiene toda el área de pantalla verde 100% transparente, de modo que cuando se dibuja en el contexto de destino en la línea 13, el resultado es una superposición sobre el fondo estático.

+

La imagen resultante tiene este aspecto:

+

output.png

+

Esto se hace en varias ocasiones mientras el video se reproduce, de manera que fotograma tras fotograma se procesa y se muestra con el efecto de croma.

+

Ver este ejemplo en vivo .

+

Consulta también

+ +

{{ languages ( { "en": "En/Manipulating_video_using_canvas" } ) }}

diff --git a/files/es/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/es/web/api/canvas_api/tutorial/advanced_animations/index.html new file mode 100644 index 0000000000..15ab72ee7f --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -0,0 +1,380 @@ +--- +title: Advanced animations +slug: Web/Guide/HTML/Canvas_tutorial/Advanced_animations +tags: + - Canvas + - Tutoria + - graficos +translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
+ +
+

En el último capítulo hicimos unas animaciones básicas y nos familiarizamos con varias maneras de mover cosas. En esta parte examinaremos la moción misma y agregaremos la física para hacer nuestras animaciones más avanzadas.

+
+ +

Dibujar una bola

+ +

Vamos a usar una bola para nuestro estudio de la animación, entonces primero dibujamos la bola dentro del canvas. El siguente código lo configurará.

+ +
<canvas id="canvas" width="600" height="300"></canvas>
+
+ +

Como siempre, necesitamos un entorno para dibujar. Para dibujar la bola, creamos un contenido ball lo cual contiene propiedades y un método draw().

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();
+ +

Nada especial aquí; la bola es en realidad un circulo sencillo y se dibuja con el método {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.

+ +

Agregar velocidad

+ +

Ya que tenemos una bola, estamos listos agregar una animación básica así como aprendimos en el último capítulo de esta tutoría. De nuevo, {{domxref("window.requestAnimationFrame()")}} nos ayuda controlar la animación. La bola empieza moverse por agregar un vector de velocidad a la posición. Para cada fotograma, también {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} el canvas para quitar los circulos viejos de los fotogramas anteriores.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+
+ +

Límites

+ +

Si no probamos los límites, de repente nuestra bola se agota el canvas. Necesitamos verificar si las posiciones x e y están fuera de las dimensiones del canvas y invertir la direción de los vectores de velocidad. Para hacer eso, agregamos los siguentes pasos al método draw:

+ +
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  ball.vx = -ball.vx;
+}
+ +

Primera demo

+ +

Veamos como se ve en acción hasta este punto. Dirige el ratón dentro del canvas para empezar la animación.

+ + + +

{{EmbedLiveSample("First_demo", "610", "310")}}

+ +

Aceleración

+ +

Para convertir la moción en más auténtica, puedes jugar con la velocidad, así por ejemplo:

+ +
ball.vy *= .99;
+ball.vy += .25;
+ +

Esto reduce el vector vertical de velocidad para cada fotograma para que la bola termina rebotando en el suelo.

+ + + +

{{EmbedLiveSample("Second_demo", "610", "310")}}

+ +

Efecto de rezagar

+ +

Hasta este punto hemos limpiado los fotogramas anteriores con el método {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}. Si reemplazas este método con un semi-transparente {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, puedes facilmente crear un efecto de rezagar.

+ +
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+ + + +

{{EmbedLiveSample("Third_demo", "610", "310")}}

+ +

Agregar control de ratón

+ +

Para controlar la bola, podemos hacerla seguir nuestro ratón usando el evento mousemove, por ejemplo. El evento click solta la bola y la deja rebotar de nuevo.

+ + + +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e) {
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener('click', function(e) {
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+
+ +

Mueve la bola usando el ratón y suéltala haciendo click.

+ +

{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}

+ +

Breakout

+ +

Este capítulo corto sólo explica algunas técnicas para crear animaciones más avanzadas. ¡Hay muchos más!  ¿Qué tal agregar una raqueta, algunos ladrillos, y convertir esta demo en un partido Breakout? Visita nuestra área de Game development para mayor información.

+ +

Vea también

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git a/files/es/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/es/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html new file mode 100644 index 0000000000..ab76918132 --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -0,0 +1,726 @@ +--- +title: Applying styles and colors +slug: Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors +translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
+ +
+

En el capítulo acerca de dibujar formas, usamos unicamente los estilos de linea y de relleno por defecto. Aqui exploraremos las opciones del canvas que tenemos a nuestra disposición para hacer los dibujos un tanto más atractivos. Aprenderas como agregar diferentes colores, estilos de linea, gradiantes, patrones y sombras a tus dibujos.

+
+ +

Colors

+ +

Hasta ahrora nosotros solo me hemos visto metodos en el contexto de dibujo. Si quisieramos aplicar colores a las formas, hay dos importantes propiedades que podemos usar: fillStyle y strokeStyle.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
+
Configura el estilo cuando se rellenan las formas.
+
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
+
Configura el estilo al contorno perimetral de las formas.
+
+ +

color es una cadena que representa  un CSS {{cssxref("<color>")}}, un objeto gradiante, o un objeto patron. Miraremos en objetos de gradientes y patrones mas tarde. Por defecto, el color del trazo y del relleno son configurados en negro (valor de color CSS #000000).

+ +
+

Nota:  Cuando configuras la propiedad  strokeStyle y/o fillStyle, el nuevo valor llega a ser el vador por defecto para los dibujos posteriores. Para cada forma que tu quieras en un color difrente, necesitaras reasignar las propiedades anteriores.

+
+ +

Las cadenas validas que tu pueden entrar deberian, segun la especificación, ser valores de  {{cssxref("<color>")}} CSS. En el siguiente ejemplo, describimos en mismo color.

+ +
// these all set the fillStyle to 'orange'
+
+ctx.fillStyle = 'orange';
+ctx.fillStyle = '#FFA500';
+ctx.fillStyle = 'rgb(255, 165, 0)';
+ctx.fillStyle = 'rgba(255, 165, 0, 1)';
+
+ +

A fillStyle example

+ +

En este ejemplo, usamos dos bucles for para dibujar una cuadrícula de rectangulos, cada uno de diferente color. La imagen resultante deberia ser similar a la de la screenhot. No hay nada demasiado espectacular en el proceso. Usamos dos variables i y j para generar un unico color RGB para cada celda cuadrada, modificando las componentes rojo y verde. El canal azul tiene un valor fijo. Modificando los canales, puedes generar todo tipo de paletas. Incrementando los paos, puedes lograr algo similar que se parezca a las paletas de colores que Photoshop usa.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 6; i++) {
+    for (var j = 0; j < 6; j++) {
+      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' +
+                       Math.floor(255 - 42.5 * j) + ', 0)';
+      ctx.fillRect(j * 25, i * 25, 25, 25);
+    }
+  }
+}
+ + + +

The result looks like this:

+ +

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+ +

A strokeStyle example

+ +

Este ejemplo es similar al de arriba, pero usa la propiedad  strokeStyle para cambiar el color del contorno de las formas. Usamos el método  arc() para dibujar circulos en lugar de celdas cuadradas.

+ +
  function draw() {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    for (var i = 0; i < 6; i++) {
+      for (var j = 0; j < 6; j++) {
+        ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' +
+                         Math.floor(255 - 42.5 * j) + ')';
+        ctx.beginPath();
+        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
+        ctx.stroke();
+      }
+    }
+  }
+
+ + + +

The result looks like this:

+ +

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

+ +

Transparency

+ +

Ademas de dibujar formas opacas en el canvas, podemos dibujar formas semi-transparentes(o translucidas). Esto se logra bien configurando la propiedad  globalAlpha o asignando un color semi-transparente al estilo del trazo u  u/y al de relleno.

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
+
Applies the specified transparency value to all future shapes drawn on the canvas. The value must be between 0.0 (fully transparent) to 1.0 (fully opaque). This value is 1.0 (fully opaque) by default.
+
+ +

The globalAlpha property can be useful if you want to draw a lot of shapes on the canvas with similar transparency, but otherwise it's generally more useful to set the transparency on individual shapes when setting their colors.

+ +

Debido qaque las propiedades  strokeStyle y fillStyle aceptan valores de color rgba de CSS, podemos usar la siguiente notacion para asignar una color transparente a ellos.

+ +
// Assigning transparent colors to stroke and fill style
+
+ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
+ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+
+ +

The rgba() function is similar to the rgb() function but it has one extra parameter. The last parameter sets the transparency value of this particular color. The valid range is again between 0.0 (fully transparent) and 1.0 (fully opaque).

+ +

A globalAlpha example

+ +

In this example, we'll draw a background of four different colored squares. On top of these, we'll draw a set of semi-transparent circles. The globalAlpha property is set at 0.2 which will be used for all shapes from that point on. Every step in the for loop draws a set of circles with an increasing radius. The final result is a radial gradient. By overlaying ever more circles on top of each other, we effectively reduce the transparency of the circles that have already been drawn. By increasing the step count and in effect drawing more circles, the background would completely disappear from the center of the image.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // draw background
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0, 0, 75, 75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75, 0, 75, 75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0, 75, 75, 75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75, 75, 75, 75);
+  ctx.fillStyle = '#FFF';
+
+  // set transparency value
+  ctx.globalAlpha = 0.2;
+
+  // Draw semi transparent circles
+  for (var i = 0; i < 7; i++) {
+    ctx.beginPath();
+    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
+ + + +

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

+ +

An example using rgba()

+ +

In this second example, we do something similar to the one above, but instead of drawing circles on top of each other, I've drawn small rectangles with increasing opacity. Using rgba() gives you a little more control and flexibility because we can set the fill and stroke style individually.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Draw background
+  ctx.fillStyle = 'rgb(255, 221, 0)';
+  ctx.fillRect(0, 0, 150, 37.5);
+  ctx.fillStyle = 'rgb(102, 204, 0)';
+  ctx.fillRect(0, 37.5, 150, 37.5);
+  ctx.fillStyle = 'rgb(0, 153, 255)';
+  ctx.fillRect(0, 75, 150, 37.5);
+  ctx.fillStyle = 'rgb(255, 51, 0)';
+  ctx.fillRect(0, 112.5, 150, 37.5);
+
+  // Draw semi transparent rectangles
+  for (var i = 0; i < 10; i++) {
+    ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')';
+    for (var j = 0; j < 4; j++) {
+      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
+    }
+  }
+}
+ + + +

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

+ +

Line styles

+ +

There are several properties which allow us to style lines.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
+
Sets the width of lines drawn in the future.
+
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
+
Sets the appearance of the ends of lines.
+
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
+
Sets the appearance of the "corners" where lines meet.
+
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
+
Establishes a limit on the miter when two lines join at a sharp angle, to let you control how thick the junction becomes.
+
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
+
Returns the current line dash pattern array containing an even number of non-negative numbers.
+
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
+
Sets the current line dash pattern.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
+
Specifies where to start a dash array on a line.
+
+ +

You'll get a better understanding of what these do by looking at the examples below.

+ +

A lineWidth example

+ +

This property sets the current line thickness. Values must be positive numbers. By default this value is set to 1.0 units.

+ +

The line width is the thickness of the stroke centered on the given path. In other words, the area that's drawn extends to half the line width on either side of the path. Because canvas coordinates do not directly reference pixels, special care must be taken to obtain crisp horizontal and vertical lines.

+ +

In the example below, 10 straight lines are drawn with increasing line widths. The line on the far left is 1.0 units wide. However, the leftmost and all other odd-integer-width thickness lines do not appear crisp, because of the path's positioning.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 10; i++) {
+    ctx.lineWidth = 1 + i;
+    ctx.beginPath();
+    ctx.moveTo(5 + i * 14, 5);
+    ctx.lineTo(5 + i * 14, 140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

+ +

Obtaining crisp lines requires understanding how paths are stroked. In the images below, the grid represents the canvas coordinate grid. The squares between gridlines are actual on-screen pixels. In the first grid image below, a rectangle from (2,1) to (5,5) is filled. The entire area between them (light red) falls on pixel boundaries, so the resulting filled rectangle will have crisp edges.

+ +

+ +

If you consider a path from (3,1) to (3,5) with a line thickness of 1.0, you end up with the situation in the second image. The actual area to be filled (dark blue) only extends halfway into the pixels on either side of the path. An approximation of this has to be rendered, which means that those pixels being only partially shaded, and results in the entire area (the light blue and dark blue) being filled in with a color only half as dark as the actual stroke color. This is what happens with the 1.0 width line in the previous example code.

+ +

To fix this, you have to be very precise in your path creation. Knowing that a 1.0 width line will extend half a unit to either side of the path, creating the path from (3.5,1) to (3.5,5) results in the situation in the third image—the 1.0 line width ends up completely and precisely filling a single pixel vertical line.

+ +
+

Note: Be aware that in our vertical line example, the Y position still referenced an integer gridline position—if it hadn't, we would see pixels with half coverage at the endpoints (but note also that this behavior depends on the current lineCap style whose default value is butt; you may want to compute consistent strokes with half-pixel coordinates for odd-width lines, by setting the lineCap style to square, so that the outer border of the stroke around the endpoint will be automatically extended to cover the whole pixel exactly).

+ +

Note also that only start and final endpoints of a path are affected: if a path is closed with closePath(), there's no start and final endpoint; instead, all endpoints in the path are connected to their attached previous and next segment using the current setting of the lineJoin style, whose default value is miter, with the effect of automatically extending the outer borders of the connected segments to their intersection point, so that the rendered stroke will exactly cover full pixels centered at each endpoint if those connected segments are horizontal and/or vertical). See the next two sections for demonstrations of these additional line styles.

+
+ +

For even-width lines, each half ends up being an integer amount of pixels, so you want a path that is between pixels (that is, (3,1) to (3,5)), instead of down the middle of pixels.

+ +

While slightly painful when initially working with scalable 2D graphics, paying attention to the pixel grid and the position of paths ensures that your drawings will look correct regardless of scaling or any other transformations involved. A 1.0-width vertical line drawn at the correct position will become a crisp 2-pixel line when scaled up by 2, and will appear at the correct position.

+ +

A lineCap example

+ +

The lineCap property determines how the end points of every line are drawn. There are three possible values for this property and those are: butt, round and square. By default this property is set to butt.

+ +

+ +
+
butt
+
The ends of lines are squared off at the endpoints.
+
round
+
The ends of lines are rounded.
+
square
+
The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
+
+ +

In this example, we'll draw three lines, each with a different value for the lineCap property. I also added two guides to see the exact differences between the three. Each of these lines starts and ends exactly on these guides.

+ +

The line on the left uses the default butt option. You'll notice that it's drawn completely flush with the guides. The second is set to use the round option. This adds a semicircle to the end that has a radius half the width of the line. The line on the right uses the square option. This adds a box with an equal width and half the height of the line thickness.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt', 'round', 'square'];
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10, 10);
+  ctx.lineTo(140, 10);
+  ctx.moveTo(10, 140);
+  ctx.lineTo(140, 140);
+  ctx.stroke();
+
+  // Draw lines
+  ctx.strokeStyle = 'black';
+  for (var i = 0; i < lineCap.length; i++) {
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25 + i * 50, 10);
+    ctx.lineTo(25 + i * 50, 140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+ +

A lineJoin example

+ +

The lineJoin property determines how two connecting segments (of lines, arcs or curves) with non-zero lengths in a shape are joined together (degenerate segments with zero lengths, whose specified endpoints and control points are exactly at the same position, are skipped).

+ +

There are three possible values for this property: round, bevel and miter. By default this property is set to miter. Note that the lineJoin setting has no effect if the two connected segments have the same direction, because no joining area will be added in this case.

+ +

+ +
+
round
+
Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to half the line width.
+
bevel
+
Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
+
miter
+
Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is effected by the miterLimit property which is explained below.
+
+ +

The example below draws three different paths, demonstrating each of these three lineJoin property settings; the output is shown above.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineJoin = ['round', 'bevel', 'miter'];
+  ctx.lineWidth = 10;
+  for (var i = 0; i < lineJoin.length; i++) {
+    ctx.lineJoin = lineJoin[i];
+    ctx.beginPath();
+    ctx.moveTo(-5, 5 + i * 40);
+    ctx.lineTo(35, 45 + i * 40);
+    ctx.lineTo(75, 5 + i * 40);
+    ctx.lineTo(115, 45 + i * 40);
+    ctx.lineTo(155, 5 + i * 40);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

+ +

A demo of the miterLimit property

+ +

As you've seen in the previous example, when joining two lines with the miter option, the outside edges of the two joining lines are extended up to the point where they meet. For lines which are at large angles with each other, this point is not far from the inside connection point. However, as the angles between each line decreases, the distance (miter length) between these points increases exponentially.

+ +

The miterLimit property determines how far the outside connection point can be placed from the inside connection point. If two lines exceed this value, a bevel join gets drawn instead. Note that the maximum miter length is the product of the line width measured in the current coordinate system, by the value of this miterLimit property (whose default value is 10.0 in the HTML {{HTMLElement("canvas")}}), so the miterLimit can be set independently from the current display scale or any affine transforms of paths: it only influences the effectively rendered shape of line edges.

+ +

More exactly, the miter limit is the maximum allowed ratio of the extension length (in the HTML canvas, it is measured between the outside corner of the joined edges of the line and the common endpoint of connecting segments specified in the path) to half the line width. It can equivalently be defined as the maximum allowed ratio of the distance between the inside and outside points of jonction of edges, to the total line width. It is then equal to the cosecant of half the minimum inner angle of connecting segments below which no miter join will be rendered, but only a bevel join:

+ +
    +
  • miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
    • +
  • The default miter limit of 10.0 will strip all miters for sharp angles below about 11 degrees.
    • +
  • A miter limit equal to √2 ≈ 1.4142136 (rounded up) will strip miters for all acute angles, keeping miter joins only for obtuse or right angles.
    • +
  • A miter limit equal to 1.0 is valid but will disable all miters.
    • +
  • Values below 1.0 are invalid for the miter limit.
    • +
+ +

Here's a little demo in which you can set miterLimit dynamically and see how this effects the shapes on the canvas. The blue lines show where the start and endpoints for each of the lines in the zig-zag pattern are.

+ +

If you specify a miterLimit value below 4.2 in this demo, none of the visible corners will join with a miter extension, but only with a small bevel near the blue lines; with a miterLimit above 10, most corners in this demo should join with a miter far away from the blue lines, and whose height is decreasing between corners from left to right because they connect with growing angles; with intermediate values, the corners on the left side will only join with a bevel near the blue lines, and the corners on the right side with a miter extension (also with a decreasing height).

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Clear canvas
+  ctx.clearRect(0, 0, 150, 150);
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5, 50, 160, 50);
+
+  // Set line styles
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // check input
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // Draw lines
+  ctx.beginPath();
+  ctx.moveTo(0, 100);
+  for (i = 0; i < 24 ; i++) {
+    var dy = i % 2 == 0 ? 25 : -25;
+    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
+  }
+  ctx.stroke();
+  return false;
+}
+
+ + + +

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

+ +

Using line dashes

+ +

The setLineDash method and the lineDashOffset property specify the dash pattern for lines. The setLineDash method accepts a list of numbers that specifies distances to alternately draw a line and a gap and the lineDashOffset property sets an offset where to start the pattern.

+ +

In this example we are creating a marching ants effect. It is an animation technique often found in selection tools of computer graphics programs. It helps the user to distinguish the selection border from the image background by animating the border. In a later part of this tutorial, you can learn how to do this and other basic animations.

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+var offset = 0;
+
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10, 10, 100, 100);
+}
+
+function march() {
+  offset++;
+  if (offset > 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();
+ +

{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

+ +

Gradients

+ +

Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the fillStyle or strokeStyle properties.

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
+
Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).
+
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
+
Creates a radial gradient. The parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2.
+
+ +

For example:

+ +
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+
+ +

Once we've created a CanvasGradient object we can assign colors to it by using the addColorStop() method.

+ +
+
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
+
Creates a new color stop on the gradient object. The position is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the color argument must be a string representing a CSS {{cssxref("<color>")}}, indicating the color the gradient should reach at that offset into the transition.
+
+ +

You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.

+ +
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
+
+ +

A createLinearGradient example

+ +

In this example, we'll create two different gradients. As you can see here, both the strokeStyle and fillStyle properties can accept a canvasGradient object as valid input.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
+
+  // assign gradients to fill and stroke styles
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // draw shapes
+  ctx.fillRect(10, 10, 130, 130);
+  ctx.strokeRect(50, 50, 50, 50);
+
+}
+
+ + + +

The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.

+ +

In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.

+ +

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

+ +

A createRadialGradient example

+ +

In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)');
+
+  var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)');
+
+  var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0, 201, 255, 0)');
+
+  var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228, 199, 0, 0)');
+
+  // draw shapes
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0, 0, 150, 150);
+}
+
+ + + +

In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.

+ +

The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient #019F62 = rgba(1,159,98,1).

+ +

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

+ +

Patterns

+ +

In one of the examples on the previous page, we used a series of loops to create a pattern of images. There is, however, a much simpler method: the createPattern() method.

+ +
+
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
+
Creates and returns a new canvas pattern object. image is a {{domxref("CanvasImageSource")}} (that is, an {{domxref("HTMLImageElement")}}, another canvas, a {{HTMLElement("video")}} element, or the like. type is a string indicating how to use the image.
+
+ +

The type specifies how to use the image in order to create the pattern, and must be one of the following string values:

+ +
+
repeat
+
Tiles the image in both vertical and horizontal directions.
+
repeat-x
+
Tiles the image horizontally but not vertically.
+
repeat-y
+
Tiles the image vertically but not horizontally.
+
no-repeat
+
Doesn't tile the image. It's used only once.
+
+ +

We use this method to create a {{domxref("CanvasPattern")}} object which is very similar to the gradient methods we've seen above. Once we've created a pattern, we can assign it to the fillStyle or strokeStyle properties. For example:

+ +
var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img, 'repeat');
+
+ +
+

Note: Like with the drawImage() method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.

+
+ +

A createPattern example

+ +

In this last example, we'll create a pattern to assign to the fillStyle property. The only thing worth noting is the use of the image's onload handler. This is to make sure the image is loaded before it is assigned to the pattern.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // create new image object to use as pattern
+  var img = new Image();
+  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.onload = function() {
+
+    // create pattern
+    var ptrn = ctx.createPattern(img, 'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0, 0, 150, 150);
+
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

+ +

Shadows

+ +

Using shadows involves just four properties:

+ +
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
+
Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
+
Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
+
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
+
Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.
+
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
+
A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.
+
+ +

The properties shadowOffsetX and shadowOffsetY indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.

+ +

The shadowBlur property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

+ +

The shadowColor property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

+ +
+

Note: Shadows are only drawn for source-over compositing operations.

+
+ +

A shadowed text example

+ +

This example draws a text string with a shadowing effect.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
+
+  ctx.font = '20px Times New Roman';
+  ctx.fillStyle = 'Black';
+  ctx.fillText('Sample String', 5, 30);
+}
+
+ + + +

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

+ +

We will look at the font property and fillText method in the next chapter about drawing text.

+ +

Canvas fill rules

+ +

When using fill (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersects itself or is nested.
+
+ Two values are possible:

+ + + +

In this example we are using the evenodd rule.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.beginPath();
+  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
+  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
+  ctx.fill('evenodd');
+}
+ + + +

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git a/files/es/web/api/canvas_api/tutorial/basic_animations/index.html b/files/es/web/api/canvas_api/tutorial/basic_animations/index.html new file mode 100644 index 0000000000..94c66fb05d --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/basic_animations/index.html @@ -0,0 +1,333 @@ +--- +title: Animaciones básicas +slug: Web/Guide/HTML/Canvas_tutorial/Basic_animations +tags: + - Canvas + - HTML5 + - Intermedio + - Tutorial + - graficos +translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}
+ +
+

Ya que estamos usando JavaScript para controlar elementos {{HTMLElement("canvas")}} , también es muy fácil hacer animaciones (interactivas). En este capitulo veremos como hacer algunas animaciones básicas.

+
+ +

Probablemente la mayor limitación es que una vez que se dibuja una forma, se mantiene de esa manera. Si necesitamos moverlo tenemos que volver a dibujarlo y todo lo que se dibujó antes. Se necesita mucho tiempo para volver a dibujar estructuras complejas y el rendimiento depende en gran medida de la velocidad de la computadora en la que se ejecuta.

+ +

Pasos básicos de animación

+ +

Estos son los pasos que necesitas para dibujar un cuadro:

+ +
    +
  1. Limpiar el canvas
    + A menos que las formas que vas a dibujar llenen el canvas completo (por ejemplo, una imagen de fondo), debes borrar cualquier forma que haya dibujado previamente. La forma más fácil de hacerlo es usar el método {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.
    2. +
  2. Guardar el estado del canvas
    + Si estás cambiando alguna configuración (como estilos, transformaciones, etc.) que afecte el estado del canvas y deseas asegurarte de que se utiliza el estado original cada vez que se dibuja una figura, debes guardar ese estado original. 
    3. +
  3. Dibujar formas animadas
    + El paso en el que realizas el renderizado del cuadro actual.
    4. +
  4. Restaurar el estado del canvas
    + Si has guardado el estado, restáuralo antes de dibujar un nuevo cuadro.
    5. +
+ +

Controlando una animación

+ +

Las formas se dibujan en el canvas utilizando los métodos de canvas directamente o llamando a funciones personalizadas. En circunstancias normales, solo vemos que estos resultados aparecen en el canvas cuando el script termina de ejecutarse. Por ejemplo, no es posible hacer una animación desde un bucle for.

+ +

Eso significa que necesitamos una forma de ejecutar nuestras funciones de dibujo durante un período de tiempo. Hay dos formas de controlar una animación como esta.

+ +

Actualizaciones Programadas

+ +

Primero {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, y {{domxref("window.requestAnimationFrame()")}} son funciones que pueden ser usadas para llamar una función especifica en un periodo de tiempo establecido.

+ +
+
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
+
Ejecuta una función especificada por function cada delay milisegundos.
+
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
+
Ejecuta una función especificada por function dentro de delay milisegundos.
+
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
+
Comunica al navegador que  deseas iniciar una animación y requieres que el navegador llame a las funciones especificas para actualizar la misma antes de la siguiente escena.
+
+ +

Si no quieres ninguna interacción del usuario puedes usar la función setInterval() que repite la ejecución del código suministrado. Si lo que queremos es hacer un juego, podríamos usar eventos de teclado o el mouse para controlar la animación y usar setTimeout(). Al establecer los {{domxref("EventListener")}}, capturamos cualquier interacción del usuario y ejecutamos nuestras funciones de animación.

+ +
+

En los siguiente ejemplo,usaremos el método para controlar animaciones {{domxref("window.requestAnimationFrame()")}}. El método requestAnimationFrame provee formas amigables y mas eficientes  para animar llamando cada marco de animación cuando el sistema esta listo para dibujar. La cantidad de devoluciones de llamadas suele ser 60 veces por segundo y podría ser reducido a menor periodo cuando se corre en un segundo plano. Para mas información acerca de los ciclos de animación, especialmente para juegos, Ver el Articulo Anatomía de un videojuego en nuestra GameZona de desarrollo de Juegos.

+
+ +

Un sistema solar animado

+ +

Este ejemplo animado es un pequeño modelo de nuestro sistema solar.

+ +
var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init(){
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  window.requestAnimationFrame(draw);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0,0,300,300); // limpiar canvas
+
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.save();
+  ctx.translate(150,150);
+
+  // La tierra
+  var time = new Date();
+  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
+  ctx.translate(105,0);
+  ctx.fillRect(0,-12,50,24); // Sombra
+  ctx.drawImage(earth,-12,-12);
+
+  // La luna
+  ctx.save();
+  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
+  ctx.translate(0,28.5);
+  ctx.drawImage(moon,-3.5,-3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150,150,105,0,Math.PI*2,false); // Órbita terrestre
+  ctx.stroke();
+
+  ctx.drawImage(sun,0,0,300,300);
+
+  window.requestAnimationFrame(draw);
+}
+
+init();
+
+ + + +

{{EmbedLiveSample("Un_sistema_solar_animado", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

+ +

Un reloj animado

+ +

Este ejemplo dibuja una reloj animado, mostrando la hora actual.

+ +
function clock(){
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0,0,150,150);
+  ctx.translate(75,75);
+  ctx.scale(0.4,0.4);
+  ctx.rotate(-Math.PI/2);
+  ctx.strokeStyle = "black";
+  ctx.fillStyle = "white";
+  ctx.lineWidth = 8;
+  ctx.lineCap = "round";
+
+  // Aguja de la hora
+  ctx.save();
+  for (var i=0;i<12;i++){
+    ctx.beginPath();
+    ctx.rotate(Math.PI/6);
+    ctx.moveTo(100,0);
+    ctx.lineTo(120,0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // Aguja del minuto
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i=0;i<60;i++){
+    if (i%5!=0) {
+      ctx.beginPath();
+      ctx.moveTo(117,0);
+      ctx.lineTo(120,0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI/30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr>=12 ? hr-12 : hr;
+
+  ctx.fillStyle = "black";
+
+  // Escribimos la hora
+  ctx.save();
+  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20,0);
+  ctx.lineTo(80,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // escribimos los minutos
+  ctx.save();
+  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28,0);
+  ctx.lineTo(112,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // escribimos los segundos
+  ctx.save();
+  ctx.rotate(sec * Math.PI/30);
+  ctx.strokeStyle = "#D40000";
+  ctx.fillStyle = "#D40000";
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30,0);
+  ctx.lineTo(83,0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(0,0,0,0)";
+  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.stroke();
+
+  ctx.restore();
+
+  window.requestAnimationFrame(clock);
+}
+
+window.requestAnimationFrame(clock);
+ + + +

{{EmbedLiveSample("Un_reloj_animado", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

+ +

Un panorama en bucle

+ +

En este ejemplo, una foto panorámica avanza de izquierda a derecha. Donde usaremos una imagen del Parque Nacional de Yosemite que tomamos de Wikipedia, pero tu podrías usar cualquier imagen que sea mas grande que el canvas.

+ +
var img = new Image();
+
+// Variables de usuario - personalizar estas para cambiar la imagen cuando inicie el desplazamiento
+// dirección y velocidad.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; //más bajo es más rápido
+var scale = 1.05;
+var y = -4.5; //desplazamiento vertical
+
+// Programa principal
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width * scale;
+    imgH = img.height * scale;
+
+    if (imgW > CanvasXSize) {
+        // imagen más grande que canvas
+        x = CanvasXSize - imgW;
+    }
+    if (imgW > CanvasXSize) {
+        // ancho de imagen más grande que canvas
+        clearX = imgW;
+    } else {
+        clearX = CanvasXSize;
+    }
+    if (imgH > CanvasYSize) {
+        // altura de la imagen más grande que canvas
+        clearY = imgH;
+    } else {
+        clearY = CanvasYSize;
+    }
+
+    // obtener contexto de canvas
+    ctx = document.getElementById('canvas').getContext('2d');
+
+    // establecer frecuencia de actualización
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
+
+    // si la imagen es <= tamaño de Canvas
+    if (imgW <= CanvasXSize) {
+        // reiniciar, comenzar desde el principio
+        if (x > CanvasXSize) {
+            x = -imgW + x;
+        }
+        // dibujar image1 adicional
+        if (x > 0) {
+            ctx.drawImage(img, -imgW + x, y, imgW, imgH);
+        }
+        // dibujar image2 adicional
+        if (x - imgW > 0) {
+            ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
+        }
+    }
+
+    // la imagen es > tamaño de Canvas
+    else {
+        // reiniciar, comenzar desde el principio
+        if (x > (CanvasXSize)) {
+            x = CanvasXSize - imgW;
+        }
+        // dibujar image adicional
+        if (x > (CanvasXSize-imgW)) {
+            ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
+        }
+    }
+    // dibujar imagen
+    ctx.drawImage(img, x, y,imgW, imgH);
+    // cantidad para moverse
+    x += dx;
+}
+ +

Debajo esta el elemento {{HTMLElement("canvas")}} en el cual va la imagen se va ha desplazar. Nota que el ancho y el alto especificado aquí son las variables CanvasXZSize y CanvasYSize.

+ +
<canvas id="canvas" width="800" height="200"></canvas>
+ +

{{EmbedLiveSample("Un_panorama_en_bucle", "830", "230")}}

+ +

Otros ejemplos

+ +
+
Un ray-caster básico
+
Un buen ejemplo de como hacer animaciones usando como control el teclado.
+
Animaciones avanzadas
+
Vamos a echar un vistazo a algunas técnicas de animación avanzadas y física en el próximo capítulo.
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}

diff --git a/files/es/web/api/canvas_api/tutorial/basic_usage/index.html b/files/es/web/api/canvas_api/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..17136d7a7e --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/basic_usage/index.html @@ -0,0 +1,146 @@ +--- +title: Uso básico de Canvas +slug: Web/Guide/HTML/Canvas_tutorial/Basic_usage +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Dibujando_formas")}}
+ +
+

Comenzamos este tutorial observando el elemento  {{HTMLElement("canvas")}}. Al final de esta página, sabrás como configurar el entorno 2D de canvas y habrás dibujado el primer ejemplo en tu navegador.

+
+ +

El elemento <canvas>

+ +
<canvas id="tutorial" width="150" height="150"></canvas>
+
+ +

A primera vista, un elemento {{HTMLElement("canvas")}} es parecido al elemento {{HTMLElement("img")}}, con la diferencia que este no tiene los atributos src y alt. El elemento <canvas> tiene solo dos atributos - {{htmlattrxref("width", "canvas")}} y {{htmlattrxref("height", "canvas")}}. Ambos son opcionales y pueden ser definidos usando propiedades DOM. Cuando los atributos ancho y alto no estan especificados, el lienzo se inicializara con 300 pixels ancho y 150 pixels de alto. El elemento puede ser arbitrariamente redimensionado por CSS, pero durante el renderizado la imagen es escalada para ajustarse al tamaño de su layout. Si el tamaño del CSS no respeta el ratio del canvas inicial, este aparecerá distorsionado.

+ +
+

Nota: Si su renderizado se ve distorsionado, pruebe especificar los atributos width y height explícitamente en los atributos del <canvas> , y no usando CSS.

+
+ +

El atributo id no está especificado para el elemento  <canvas> pero es uno de los atributos globales de HTML el cual puede ser aplicado a cualquier elemento HTML (como class por ejemplo). Siempre es buena idea proporcionar un id porque esto hace más fácil identificarlo en un script.

+ +

El elemento <canvas> puede ser estilizado como a cualquier imagen normal (margin, border, background, etc). Estas reglas, sin embargo, no afectan a lo dibujado sobre el canvas. Mas adelante veremos cómo se hace esto en un capítulo dedicado en este tutorial. Cuando no tenemos reglas de estilo aplicadas al canvas, este será completamente transparente.

+ +
+

Contenido alternativo

+ +

El elemento <canvas> se diferencia de un tag {{HTMLElement("img")}} en que, como los elementos {{HTMLElement("video")}}, {{HTMLElement("audio")}} o {{HTMLElement("picture")}}, es fácil definir contenido alternativo (fallback content) para mostrarse en navegadores viejos que no soporten el elemento <canvas>, como versiones de Internet Explorer previas a la versión 9 o navegadores de texto. Siempre debes proporcionar contenido alternativo para mostrar en estos navegadores.

+ +

Proporcionar contenido alternativo es muy explicito: solo debemos insertar el contenido alterno dentro del elemento <canvas>. Los navegadores que no soporten <canvas> ignoraran el contenedor y mostrarán el contenido indicado dentro de este. Navegadores que soporten <canvas> ignorarán el contenido en su interior (de las etiquetas), y mostrarán el canvas normalmente.

+ +

Por ejemplo, podremos proporcionar un texto descriptivo del contenido del canvas o proveer una imagen estática del contenido rederizado. Nos podría quedar algo así:

+ +
<canvas id="stockGraph" width="150" height="150">
+  current stock price: $3.15 +0.15
+</canvas>
+
+<canvas id="clock" width="150" height="150">
+  <img src="images/clock.png" width="150" height="150" alt=""/>
+</canvas>
+
+ +

Etiqueta </canvas> requerida

+ +

De manera distinta al elemento {{HTMLElement("img")}}, el elemento {{HTMLElement("canvas")}} requiere cerrar la etiqueta  (</canvas>).

+ +
+

Note: Aunque las versiones anteriores del navegador Safari de Apple no requeria el cierre de la etiqueta, la especificacion indica que es necesaria, asi que tu deberias incluir esta para asegurarte la compatibilidad. Aquellas versiones de Safari (anteriores versiones a 2.0) renderizaran el contenido de regreso agregandolo al canvas mismo a no ser que utilice trucos de CSS para enmascararlo. Afortunadamente, los usuarios de aquellas versiones de Safari son raros hoy en dia.

+
+ +

Si el contenido alternativo no se necesita, un simple <canvas id="foo" ...></canvas> es completamente compatible con todos los navegadores que soportan canvas.

+ +

El contexto de renderización

+ +

{{HTMLElement("canvas")}} crea un lienzo de dibujo fijado que expone uno o mas contextos renderizados, los cuales son usados para crear y manipular el contenido mostrado. Nos enfocaremos en renderizacion de contextos 2D. Otros contextos deberan proveer diferentes tipos de renderizaciones; por ejemplo, WebGL usa un 3D contexto ("experimental-webgl") basado sobre OpenGL ES.

+ +

El canvas esta inicialmente en blanco. Para mostrar alguna cosa, un script primero necesita acceder al contexto a renderizar y dibujar sobre este. El elemento  {{HTMLElement("canvas")}} tiene un method llamado  getContext(), usado para obtener el contexto a renderizar y sus funciones de dibujo. getContext() toma un parametro, el tipo de contexto. Para graficos 2D, como los que cubre este tutorial, su especificacion es "2d".

+ +
var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+
+ +

La primera linea regresa el nodo DOM para el elemento {{HTMLElement("canvas")}} llamando al metodo  {{domxref("document.getElementById()")}}. Una vez tu tienes el elemento nodo, tu puedes acceder al contexto de dibujo usando su metodo getContext().

+ +
+

Comprobando soporte

+ +

El contenido de regreso que es mostrado en navegadores los cuales no soportan {{HTMLElement("canvas")}}. Para los Scripts puede tambien comprobarse su soporte desde la programacion por un simple test para la presencia del metodo getContext(). Con un trozo de codigo parecido al que viene debajo:

+ +
var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext){
+  var ctx = canvas.getContext('2d');
+  // drawing code here
+} else {
+  // canvas-unsupported code here
+}
+
+
+
+ +

Un esqueleto de plantilla

+ +

Aqui esta una plantilla minimalista, la cual usaremos como punto de partida para posteriores ejemplos.

+ +
<html>
+  <head>
+    <title>Canvas tutorial</title>
+    <script type="text/javascript">
+      function draw(){
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext){
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    </script>
+    <style type="text/css">
+      canvas { border: 1px solid black; }
+    </style>
+  </head>
+  <body onload="draw();">
+    <canvas id="tutorial" width="150" height="150"></canvas>
+  </body>
+</html>
+
+ +

El script incluye una funcion llamada draw(), la cual es ejecutada una vez finalizada la carga de la pagina; este esta hecho usando el evento load del documento. Esta funcion, o una parecida, podria tambien ser llamada usando {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, o cualquier otro manejador de evento, a lo largo de que la pagina esta siendo cargada la primera vez.

+ +

Aqui esta como la plantilla se ve en acción:

+ +

{{EmbedLiveSample("Un_esqueleto_de_plantilla", 160, 160)}}

+ +

Un simple ejemplo

+ +

Para comenzar, daremos un vistazo a un simple ejemplo que dibuja dos rectangulos que se intersectan, uno de los cuales tiene alpha transparencia. Exploraremos como esto trabaja en mas detalle en posteriores ejemplos.

+ +
<html>
+ <head>
+  <script type="application/javascript">
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = 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);
+      }
+    }
+  </script>
+ </head>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+
+ +

Este ejemplo quedaría así:

+ +

{{EmbedLiveSample("Un_simple_ejemplo", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

+ +

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Dibujando_formas")}}

diff --git a/files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html b/files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html deleted file mode 100644 index b85b83238c..0000000000 --- a/files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html +++ /dev/null @@ -1,295 +0,0 @@ ---- -title: Ejemplo de composición -slug: Web/API/Canvas_API/Tutorial/Compositing/Ejemplo -tags: - - Canvas - - Ejemplo - - HTML - - HTML5 - - Tutorial - - graficos -translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example ---- -
{{CanvasSidebar}}
- -

Este programa de ejemplo muestra una cantidad de operaciones de composición. La salida se ve así:

- -

{{EmbedLiveSample("Ejemplo_de_composición", "100%", 7250)}}

- -

Ejemplo de composición

- -

Este código establece los valores globales utilizados por el resto del programa.

- -
var canvas1 = document.createElement("canvas");
-var canvas2 = document.createElement("canvas");
-var gco = [ 'source-over','source-in','source-out','source-atop',
-            'destination-over','destination-in','destination-out','destination-atop',
-            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
-            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
-            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
-          ].reverse();
-var gcoText = [
-'Esta es la configuración predeterminada y dibuja nuevas formas sobre el contenido del canvas existente.',
-'La nueva forma se dibuja solo donde la nueva forma y el canvas de destino se superponen. Todo lo demás se hace transparente.',
-'La nueva forma se dibuja donde no se superpone al contenido del canvas existente.',
-'La nueva forma solo se dibuja donde se solapa con el contenido del canvas existente.',
-'Se dibujan nuevas formas detrás del contenido del canvas existente',
-'El contenido del canvas existente se conserva donde la nueva forma y el contenido del canvas existente se superponen. Todo lo demás se hace transparente.',
-'El contenido existente se mantiene donde no se superpone a la nueva forma.',
-'El canvas existente solo se conserva donde se solapa con la nueva forma. La nueva forma se dibuja detrás del contenido del canvas.',
-'Donde ambas formas se superponen, el color se determina agregando valores de color.',
-'Solo se muestra la nueva forma.',
-'Las formas se hacen transparentes donde ambas se superponen y se dibujan de manera normal en cualquier otro lugar.',
-'Los píxeles de la capa superior se multiplican con el píxel correspondiente de la capa inferior. El resultado es una imagen más oscura. ',
-'Los píxeles están invertidos, multiplicados e invertidos nuevamente. Una imagen más clara es el resultado (opuesto a multiplicar).',
-'Una combinación de multiplicar y pantalla. Las partes oscuras en la capa base se oscurecen y las partes claras se vuelven más claras.',
-'Conserva los píxeles más oscuros de ambas capas.',
-'Conserva los píxeles más claros de ambas capas.',
-'Divide la capa inferior por la capa superior invertida.',
-'Divide la capa inferior invertida por la capa superior, y luego invierte el resultado.',
-'Una combinación de multiplicar y pantalla como superposición, pero con la parte superior y la capa inferior intercambiado.',
-'Una versión más suave de la luz dura. Negro puro o blanco no da como resultado negro o blanco puro.',
-'Resta la capa inferior de la capa superior o viceversa para obtener siempre un valor positivo.',
-'Al igual que la diferencia, pero con menor contraste.',
-'Conserva la luma y el croma de la capa inferior, mientras adopta el tono de la capa superior.',
-'Conserva la luma y el tono de la capa inferior, mientras adopta el croma de la capa superior.',
-'Conserva la luma de la capa inferior, mientras adopta el matiz y el croma de la capa superior.',
-'Conserva el tono y el croma de la capa inferior, mientras adopta la luma de la capa superior.'
-          ].reverse();
-var width = 320;
-var height = 340;
-
- -

Programa principal

- -

Cuando se carga la página, este código se ejecuta para configurar y ejecutar el ejemplo:

- -
window.onload = function() {
-    // lum en sRGB
-    var lum = {
-        r: 0.33,
-        g: 0.33,
-        b: 0.33
-    };
-    // redimensionar canvas
-    canvas1.width = width;
-    canvas1.height = height;
-    canvas2.width = width;
-    canvas2.height = height;
-    lightMix()
-    colorSphere();
-    runComposite();
-    return;
-};
-
- -

Y este código, runComposite(), maneja la mayor parte del trabajo, dependiendo de una serie de funciones de utilidad para hacer las partes difíciles.

- -
function createCanvas() {
-    var canvas = document.createElement("canvas");
-    canvas.style.background = "url("+op_8x8.data+")";
-    canvas.style.border = "1px solid #000";
-    canvas.style.margin = "5px";
-    canvas.width = width/2;
-    canvas.height = height/2;
-    return canvas;
-}
-
-function runComposite() {
-    var dl = document.createElement("dl");
-    document.body.appendChild(dl);
-    while(gco.length) {
-        var pop = gco.pop();
-        var dt = document.createElement("dt");
-        dt.textContent = pop;
-        dl.appendChild(dt);
-        var dd = document.createElement("dd");
-        var p = document.createElement("p");
-        p.textContent = gcoText.pop();
-        dd.appendChild(p);
-
-        var canvasToDrawOn = createCanvas();
-        var canvasToDrawFrom = createCanvas();
-        var canvasToDrawResult = createCanvas();
-
-        var ctx = canvasToDrawResult.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
-        ctx.globalCompositeOperation = pop;
-        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
-        ctx.globalCompositeOperation = "source-over";
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText(pop, 5, height/2 - 5);
-        ctx.restore();
-
-        var ctx = canvasToDrawOn.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText('existing content', 5, height/2 - 5);
-        ctx.restore();
-
-        var ctx = canvasToDrawFrom.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText('new content', 5, height/2 - 5);
-        ctx.restore();
-
-        dd.appendChild(canvasToDrawOn);
-        dd.appendChild(canvasToDrawFrom);
-        dd.appendChild(canvasToDrawResult);
-
-        dl.appendChild(dd);
-    }
-};
-
- -

Funciones de utilidad

- -

El programa se basa en una serie de funciones de utilidad.

- -
var lightMix = function() {
-    var ctx = canvas2.getContext("2d");
-    ctx.save();
-    ctx.globalCompositeOperation = "lighter";
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(255,0,0,1)";
-    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
-    ctx.fill()
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(0,0,255,1)";
-    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
-    ctx.fill()
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(0,255,0,1)";
-    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
-    ctx.fill();
-    ctx.restore();
-    ctx.beginPath();
-    ctx.fillStyle = "#f00";
-    ctx.fillRect(0,0,30,30)
-    ctx.fill();
-};
-
- -
var colorSphere = function(element) {
-    var ctx = canvas1.getContext("2d");
-    var width = 360;
-    var halfWidth = width / 2;
-    var rotate = (1 / 360) * Math.PI * 2; // por grado
-    var offset = 0; // scrollbar offset
-    var oleft = -20;
-    var otop = -20;
-    for (var n = 0; n <= 359; n ++) {
-        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
-        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
-        gradient.addColorStop(0, "rgba(0,0,0,0)");
-        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
-        gradient.addColorStop(1, "rgba(255,255,255,1)");
-        ctx.beginPath();
-        ctx.moveTo(oleft + halfWidth, otop);
-        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
-        ctx.lineTo(oleft + halfWidth + 6, otop);
-        ctx.fillStyle = gradient;
-        ctx.fill();
-        ctx.translate(oleft + halfWidth, otop + halfWidth);
-        ctx.rotate(rotate);
-        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
-    }
-    ctx.beginPath();
-    ctx.fillStyle = "#00f";
-    ctx.fillRect(15,15,30,30)
-    ctx.fill();
-    return ctx.canvas;
-};
-
- -
// HSV (1978) = H: Hue / S: Saturation / V: Value
-Color = {};
-Color.HSV_RGB = function (o) {
-    var H = o.H / 360,
-        S = o.S / 100,
-        V = o.V / 100,
-        R, G, B;
-    var A, B, C, D;
-    if (S == 0) {
-        R = G = B = Math.round(V * 255);
-    } else {
-        if (H >= 1) H = 0;
-        H = 6 * H;
-        D = H - Math.floor(H);
-        A = Math.round(255 * V * (1 - S));
-        B = Math.round(255 * V * (1 - (S * D)));
-        C = Math.round(255 * V * (1 - (S * (1 - D))));
-        V = Math.round(255 * V);
-        switch (Math.floor(H)) {
-            case 0:
-                R = V;
-                G = C;
-                B = A;
-                break;
-            case 1:
-                R = B;
-                G = V;
-                B = A;
-                break;
-            case 2:
-                R = A;
-                G = V;
-                B = C;
-                break;
-            case 3:
-                R = A;
-                G = B;
-                B = V;
-                break;
-            case 4:
-                R = C;
-                G = A;
-                B = V;
-                break;
-            case 5:
-                R = V;
-                G = A;
-                B = B;
-                break;
-        }
-    }
-    return {
-        R: R,
-        G: G,
-        B: B
-    };
-};
-
-var createInterlace = function (size, color1, color2) {
-    var proto = document.createElement("canvas").getContext("2d");
-    proto.canvas.width = size * 2;
-    proto.canvas.height = size * 2;
-    proto.fillStyle = color1; // top-left
-    proto.fillRect(0, 0, size, size);
-    proto.fillStyle = color2; // top-right
-    proto.fillRect(size, 0, size, size);
-    proto.fillStyle = color2; // bottom-left
-    proto.fillRect(0, size, size, size);
-    proto.fillStyle = color1; // bottom-right
-    proto.fillRect(size, size, size, size);
-    var pattern = proto.createPattern(proto.canvas, "repeat");
-    pattern.data = proto.canvas.toDataURL();
-    return pattern;
-};
-
-var op_8x8 = createInterlace(8, "#FFF", "#eee");
diff --git a/files/es/web/api/canvas_api/tutorial/compositing/example/index.html b/files/es/web/api/canvas_api/tutorial/compositing/example/index.html new file mode 100644 index 0000000000..b85b83238c --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/compositing/example/index.html @@ -0,0 +1,295 @@ +--- +title: Ejemplo de composición +slug: Web/API/Canvas_API/Tutorial/Compositing/Ejemplo +tags: + - Canvas + - Ejemplo + - HTML + - HTML5 + - Tutorial + - graficos +translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example +--- +
{{CanvasSidebar}}
+ +

Este programa de ejemplo muestra una cantidad de operaciones de composición. La salida se ve así:

+ +

{{EmbedLiveSample("Ejemplo_de_composición", "100%", 7250)}}

+ +

Ejemplo de composición

+ +

Este código establece los valores globales utilizados por el resto del programa.

+ +
var canvas1 = document.createElement("canvas");
+var canvas2 = document.createElement("canvas");
+var gco = [ 'source-over','source-in','source-out','source-atop',
+            'destination-over','destination-in','destination-out','destination-atop',
+            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
+            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
+            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
+          ].reverse();
+var gcoText = [
+'Esta es la configuración predeterminada y dibuja nuevas formas sobre el contenido del canvas existente.',
+'La nueva forma se dibuja solo donde la nueva forma y el canvas de destino se superponen. Todo lo demás se hace transparente.',
+'La nueva forma se dibuja donde no se superpone al contenido del canvas existente.',
+'La nueva forma solo se dibuja donde se solapa con el contenido del canvas existente.',
+'Se dibujan nuevas formas detrás del contenido del canvas existente',
+'El contenido del canvas existente se conserva donde la nueva forma y el contenido del canvas existente se superponen. Todo lo demás se hace transparente.',
+'El contenido existente se mantiene donde no se superpone a la nueva forma.',
+'El canvas existente solo se conserva donde se solapa con la nueva forma. La nueva forma se dibuja detrás del contenido del canvas.',
+'Donde ambas formas se superponen, el color se determina agregando valores de color.',
+'Solo se muestra la nueva forma.',
+'Las formas se hacen transparentes donde ambas se superponen y se dibujan de manera normal en cualquier otro lugar.',
+'Los píxeles de la capa superior se multiplican con el píxel correspondiente de la capa inferior. El resultado es una imagen más oscura. ',
+'Los píxeles están invertidos, multiplicados e invertidos nuevamente. Una imagen más clara es el resultado (opuesto a multiplicar).',
+'Una combinación de multiplicar y pantalla. Las partes oscuras en la capa base se oscurecen y las partes claras se vuelven más claras.',
+'Conserva los píxeles más oscuros de ambas capas.',
+'Conserva los píxeles más claros de ambas capas.',
+'Divide la capa inferior por la capa superior invertida.',
+'Divide la capa inferior invertida por la capa superior, y luego invierte el resultado.',
+'Una combinación de multiplicar y pantalla como superposición, pero con la parte superior y la capa inferior intercambiado.',
+'Una versión más suave de la luz dura. Negro puro o blanco no da como resultado negro o blanco puro.',
+'Resta la capa inferior de la capa superior o viceversa para obtener siempre un valor positivo.',
+'Al igual que la diferencia, pero con menor contraste.',
+'Conserva la luma y el croma de la capa inferior, mientras adopta el tono de la capa superior.',
+'Conserva la luma y el tono de la capa inferior, mientras adopta el croma de la capa superior.',
+'Conserva la luma de la capa inferior, mientras adopta el matiz y el croma de la capa superior.',
+'Conserva el tono y el croma de la capa inferior, mientras adopta la luma de la capa superior.'
+          ].reverse();
+var width = 320;
+var height = 340;
+
+ +

Programa principal

+ +

Cuando se carga la página, este código se ejecuta para configurar y ejecutar el ejemplo:

+ +
window.onload = function() {
+    // lum en sRGB
+    var lum = {
+        r: 0.33,
+        g: 0.33,
+        b: 0.33
+    };
+    // redimensionar canvas
+    canvas1.width = width;
+    canvas1.height = height;
+    canvas2.width = width;
+    canvas2.height = height;
+    lightMix()
+    colorSphere();
+    runComposite();
+    return;
+};
+
+ +

Y este código, runComposite(), maneja la mayor parte del trabajo, dependiendo de una serie de funciones de utilidad para hacer las partes difíciles.

+ +
function createCanvas() {
+    var canvas = document.createElement("canvas");
+    canvas.style.background = "url("+op_8x8.data+")";
+    canvas.style.border = "1px solid #000";
+    canvas.style.margin = "5px";
+    canvas.width = width/2;
+    canvas.height = height/2;
+    return canvas;
+}
+
+function runComposite() {
+    var dl = document.createElement("dl");
+    document.body.appendChild(dl);
+    while(gco.length) {
+        var pop = gco.pop();
+        var dt = document.createElement("dt");
+        dt.textContent = pop;
+        dl.appendChild(dt);
+        var dd = document.createElement("dd");
+        var p = document.createElement("p");
+        p.textContent = gcoText.pop();
+        dd.appendChild(p);
+
+        var canvasToDrawOn = createCanvas();
+        var canvasToDrawFrom = createCanvas();
+        var canvasToDrawResult = createCanvas();
+
+        var ctx = canvasToDrawResult.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = pop;
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText(pop, 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawOn.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('existing content', 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawFrom.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('new content', 5, height/2 - 5);
+        ctx.restore();
+
+        dd.appendChild(canvasToDrawOn);
+        dd.appendChild(canvasToDrawFrom);
+        dd.appendChild(canvasToDrawResult);
+
+        dl.appendChild(dd);
+    }
+};
+
+ +

Funciones de utilidad

+ +

El programa se basa en una serie de funciones de utilidad.

+ +
var lightMix = function() {
+    var ctx = canvas2.getContext("2d");
+    ctx.save();
+    ctx.globalCompositeOperation = "lighter";
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(255,0,0,1)";
+    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,0,255,1)";
+    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,255,0,1)";
+    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
+    ctx.fill();
+    ctx.restore();
+    ctx.beginPath();
+    ctx.fillStyle = "#f00";
+    ctx.fillRect(0,0,30,30)
+    ctx.fill();
+};
+
+ +
var colorSphere = function(element) {
+    var ctx = canvas1.getContext("2d");
+    var width = 360;
+    var halfWidth = width / 2;
+    var rotate = (1 / 360) * Math.PI * 2; // por grado
+    var offset = 0; // scrollbar offset
+    var oleft = -20;
+    var otop = -20;
+    for (var n = 0; n <= 359; n ++) {
+        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
+        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
+        gradient.addColorStop(0, "rgba(0,0,0,0)");
+        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
+        gradient.addColorStop(1, "rgba(255,255,255,1)");
+        ctx.beginPath();
+        ctx.moveTo(oleft + halfWidth, otop);
+        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
+        ctx.lineTo(oleft + halfWidth + 6, otop);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        ctx.translate(oleft + halfWidth, otop + halfWidth);
+        ctx.rotate(rotate);
+        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
+    }
+    ctx.beginPath();
+    ctx.fillStyle = "#00f";
+    ctx.fillRect(15,15,30,30)
+    ctx.fill();
+    return ctx.canvas;
+};
+
+ +
// HSV (1978) = H: Hue / S: Saturation / V: Value
+Color = {};
+Color.HSV_RGB = function (o) {
+    var H = o.H / 360,
+        S = o.S / 100,
+        V = o.V / 100,
+        R, G, B;
+    var A, B, C, D;
+    if (S == 0) {
+        R = G = B = Math.round(V * 255);
+    } else {
+        if (H >= 1) H = 0;
+        H = 6 * H;
+        D = H - Math.floor(H);
+        A = Math.round(255 * V * (1 - S));
+        B = Math.round(255 * V * (1 - (S * D)));
+        C = Math.round(255 * V * (1 - (S * (1 - D))));
+        V = Math.round(255 * V);
+        switch (Math.floor(H)) {
+            case 0:
+                R = V;
+                G = C;
+                B = A;
+                break;
+            case 1:
+                R = B;
+                G = V;
+                B = A;
+                break;
+            case 2:
+                R = A;
+                G = V;
+                B = C;
+                break;
+            case 3:
+                R = A;
+                G = B;
+                B = V;
+                break;
+            case 4:
+                R = C;
+                G = A;
+                B = V;
+                break;
+            case 5:
+                R = V;
+                G = A;
+                B = B;
+                break;
+        }
+    }
+    return {
+        R: R,
+        G: G,
+        B: B
+    };
+};
+
+var createInterlace = function (size, color1, color2) {
+    var proto = document.createElement("canvas").getContext("2d");
+    proto.canvas.width = size * 2;
+    proto.canvas.height = size * 2;
+    proto.fillStyle = color1; // top-left
+    proto.fillRect(0, 0, size, size);
+    proto.fillStyle = color2; // top-right
+    proto.fillRect(size, 0, size, size);
+    proto.fillStyle = color2; // bottom-left
+    proto.fillRect(0, size, size, size);
+    proto.fillStyle = color1; // bottom-right
+    proto.fillRect(size, size, size, size);
+    var pattern = proto.createPattern(proto.canvas, "repeat");
+    pattern.data = proto.canvas.toDataURL();
+    return pattern;
+};
+
+var op_8x8 = createInterlace(8, "#FFF", "#eee");
diff --git a/files/es/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/es/web/api/canvas_api/tutorial/drawing_shapes/index.html new file mode 100644 index 0000000000..3467533e93 --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -0,0 +1,513 @@ +--- +title: Dibujando formas con canvas +slug: Web/Guide/HTML/Canvas_tutorial/Dibujando_formas +tags: + - Canvas + - HTML + - HTML Canvas + - HTML5 + - Intermedio + - Tutorial + - graficos +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
+ +
+

Ahora que hemos preparado nuestro entorno canvas, podemos entrar en detalles de como dibujar en el canvas. Al final de este artículo, habrás aprendido  como dibujar rectángulos, triángulos, líneas, arcos y curvas, dándote familiaridad con algunas figuras básicas. Trabajar con rutas es esencial cuando dibujamos objetos sobre el canvas y veremos como se puede hacer eso.

+
+ +

La cuadrícula

+ +

Antes de que podamos empezar a dibujar, necesitamos hablar sobre la cuadrícula del canvas o el espacio de coordenadas. La plantilla HTML de la página anterior tenía un elemento canvas con un 'height' y un 'width' de 150 píxeles. A la derecha, puedes ver este canvas con la cuadrícula por defecto superpuesta. Normalmente una unidad en la cuadrícula corresponde a un píxel en el elemento canvas. El origen de esta cuadrícula está posicionado en la esquina superior izquierda (coordenada (0,0)). Todos los elementos estan posicionados de manera relativa a este punto, así que la posición de la esquina superior izquierda del cuadrado azul es de 'x' pixeles desde la izquierda y 'y' pixeles desde arriba (coordenada (x,y)). Mas tarde en este tutorial veremos como trasladar el punto de origen a una posicion diferente, girar la cuadrícula e incluso darle una escala diferente. Por ahora nos dedicaremos a lo mas común.

+ +

Dibujando rectángulos

+ +

A diferencia de SVG, {{HTMLElement("canvas")}} solo soporta una forma primitiva: rectangulos. Todas las otras formas deben ser creadas por la combinación de uno o más trazos, listas de puntos conectados por líneas. Afortunadamente, tenemos una variedad de funciones para dibujar trazos  que hacen posible componer formas muy complejas.

+ +
+

Primero veamos el rectángulo. Aquí hay tres funciones que podemos usar en el canvas para dibujarlos:

+ +
+
fillRect(x, y, width, height)
+
Dibuja un rectángulo relleno.
+
strokeRect(x, y, width, height)
+
Dibuja el contorno de un rectángulo.
+
clearRect(x, y, width, height)
+
Borra un área rectangular especificada, dejándola totalmente transparente.
+
+ +

Cada una de estas tres funciones toma los mismos parámetros. X e Y especifican la posición del canvas (en relación con el origen) desde la esquina superior izquierda del rectángulo. Tambien especifica los parámetros de anchura y altura que proporcionan el tamaño del rectángulo.

+ +

A continuación se muestra la función draw() de la página anterior, pero ahora haciendo uso de estas tres funciones.

+ +

Ejemplo de forma rectangular

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25,25,100,100);
+    ctx.clearRect(45,45,60,60);
+    ctx.strokeRect(50,50,50,50);
+  }
+}
+ +

El resultado de este ejemplo se muestra a continuación.

+ +

{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

+ +

La función fillRect() dibuja un cuadrado grande negro de 100 píxeles en cada lado. La función clearRect() luego borra un cuadrado de 60x60 píxeles del centro, y luego strokeRect() es llamado para crear un contorno rectangular de 50x50 píxeles dentro del cuadrado borrado.

+ +

En las próximas páginas veremos dos métodos alternativos para clearRect(), y también veremos cómo cambiar el color y el trazo de diferentes formas.

+ +

A diferencia de las funciones de trazo que veremos en la próxima sección, las tres funciones del rectángulo dibujan inmediatamente en el canvas.

+ +

Dibujando trazos

+ +

Crear formas mediante trazos requiere algunos pasos adicionales.

+ +
    +
  1. Primero, se crea el trazo.
    2. +
  2. A continuación, se usan comandos de dibujo para dibujar dentro del trazo.
    3. +
  3. Después, se cierra el trazo.
    4. +
  4. Una vez el trazo ha sido creado, se le puede dar contorno o relleno para renderizarlo.
    5. +
+ +

Estas son las funciones que se usan para llevar a cabo estos pasos:

+ +
+
beginPath()
+
Crea un nuevo trazo. Una vez creado, los comandos de dibujo futuros son aplicados dentro del trazo y usados para construir el nuevo trazo hacia arriba.
+
closePath()
+
Cierra el trazo de tal forma que los comandos de dibujo futuros son, una vez más redireccionados al contexto.
+
stroke()
+
Dibuja el contorno de la forma.
+
fill()
+
Dibuja una forma solida rellenando el área del trazo.
+
+ +

El primer paso para crear un trazo es llamar la función beginPath(). Internamente, los trazos son guardados como una lista de subtrazos (lineas, arcos, etc) los cuales juntos crean una forma. Todo tiempo que sea llamado este método la lista es reseteada y podemos empezar a dibujar nuevas formas.

+ +
Nota: Cuando el trazo actual este vacio, como aparece inmediatamente despues de llamar la función beginPath(), o en un canvas nuevo, el primer comando para la construcción del trazo es siempre tratada como un moveTo(), independientemente de cual es el trazo actual. Por esta razón casi siempre querrás específicamente setear tu posición de inicio despues de resetear un trazo.
+ +

El segundo paso es llamar los métodos que específican los trazos a crear. Los veremos en seguida.

+ +

El tercero, y un paso opcional, es llamar a la función closePath(). Este método trata de cerrar la forma dibujando una linea recta desde el punto actual al inicio. Si la forma ya ha sido cerrada o hay solamente un punto en la lista, la función hace nada.

+ +
Nota: Cuando llamas a la función fill(), cualquier forma abierta es cerrada automaticamente, de tal forma que no tendrás que llamar a la función closePath(). Este no es el caso cuando llamas a la función stroke().
+ +

Dibujando un triangulo

+ +

Por ejemplo, el código para dibujar un triangulo luciría como el siguiente:

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75,50);
+    ctx.lineTo(100,75);
+    ctx.lineTo(100,25);
+    ctx.closePath();
+    ctx.fill();
+  }
+}
+
+ +

El resultado lucirá así:

+ +

{{EmbedLiveSample("Drawing_a_triangle", 160, 160)}}

+ +

Moviendo la pluma

+ +

Una función muy útil, la cual realmente no dibuja algo pero convierte parte de la lista de trazos descrita arriba, es la función moveTo(). Puedes, probablemente, pensar mejor de esta como levantar el lápiz o la pluma de un punto en un pedazo de papel y ponerlo en el siguiente punto.

+ +
+
moveTo(x, y)
+
Mueve la pluma a las coordenadas específicadas por x e y.
+
+ +

Cuando el canvas es inicializado ó la función beginPath() es llamada, querrás usar la función moveTo() para colocar el punto de inicio en alguna otra parte. Podríamos usar moveTo() para dibujar trazos sin conectar. Toma un vistazo a la cara sonriente de abajo. He marcado los lugares donde use el método moveTo() (las líneas rojas).

+ +

Para intentar esto por tí mismo, puedes usar el pequeño código de abajo. Solo pégalo dentro de la función draw() que vimos antes.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75,75,50,0,Math.PI*2,true); // Círculo externo
+    ctx.moveTo(110,75);
+    ctx.arc(75,75,35,0,Math.PI,false);   // Boca (contra reloj)
+    ctx.moveTo(65,65);
+    ctx.arc(60,65,5,0,Math.PI*2,true);  // Ojo izquierdo
+    ctx.moveTo(95,65);
+    ctx.arc(90,65,5,0,Math.PI*2,true);  // Ojo derecho
+    ctx.stroke();
+  }
+}
+
+ +

El resultado luce así:

+ +

{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

+ +

Si quisieras ver las líneas conectadas, puedes remover las líneas de código que llaman moveTo().

+ +
+

Nota: Para aprender más sobre la función arc(), vea los {{anch("Arcs")}} a continuación.

+
+ +

Líneas

+ +

Para dibujar lineas rectas usa el método lineTo().

+ +
+
lineTo(x, y)
+
Dibuja una línea desde la posición actual del dibujo a la posición específicada por x e y.
+
+ +

Este método toma dos argumentos x e y, los cuales son las coordenadas del punto final de la linea. El punto de inicio es dependiente de los trazos previamente dibujados, donde el punto final del trazo anterior es el punto inicial para el siguiente, etc. El punto de inicio también puede ser cambiado usando el método moveTo().

+ +

El ejemplo siguiente dibuja dos triángulos, uno rellenado y el otro contorneado.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Triángulo rellenado
+    ctx.beginPath();
+    ctx.moveTo(25,25);
+    ctx.lineTo(105,25);
+    ctx.lineTo(25,105);
+    ctx.fill();
+
+    // Triángulo contorneado
+    ctx.beginPath();
+    ctx.moveTo(125,125);
+    ctx.lineTo(125,45);
+    ctx.lineTo(45,125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+
+ +

Esto comienza llamando a beginPath() para empezar una nueva forma. Entonces usamos el método moveTo() para mover el punto de inicio a la posición deseada. Debajo de esto dos líneas son dibujadas lo cual pinta dos lados del triángulo.

+ +

{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

+ +

Te darás cuenta de la diferencia entre el triángulo rellenado y el contorneado. Esto es, como se menciona arriba, porque las formas son automáticamente cerradas cuando un trazo es rellenado, pero no cuando esta contorneado. Si sacamos el closePath() para el triángulo contorneado, solamente dos líneas serian dibujadas, no un triángulo completo.

+ +

Arcos

+ +

Para dibujar arcos o circulos usamos el método arc(). También puedes usar arcTo(), pero su implementación es un poco menos confiable, así que no lo cubriremos aquí.

+ +
+
arc(x, y, radius, startAngle, endAngle, anticlockwise)
+
Dibuja un arco.
+
+ +

Este método toma cinco parámetros: x e y son las coordenadas del centro del círculo en el cual el arco debería ser dibujado. radius se explica por sí solo. Los parámetros startAngle y endAngle definen el punto de inicio y punto final del arco en radianes a lo largo de la curva del círculo. Estos son medidos desde el eje x. El parámetro anticlockwise es un valor Booleano el cual cuando es verdadero (true) dibuja el arco al contrario de las manecillas del reloj, de lo contrario el arco es dibujado al sentido de las manecillas del reloj.

+ +
+

Nota: Los ángulos en la función del arco (arc) son medidos en radianes, no en grados. Para convertir grados a radianes puedes usar la siguiente expresión en Javascript: radians = (Math.PI/180)*degrees.

+
+ +

El siguiente ejemplo es un poco más complejo que otros que hemos visto arriba. Esto dibuja 12 diferentes arcos, todos con diferentes ángulos y rellenos.

+ +

Las dos sentencias for son para iterar a través de las filas y columnas de los arcos. Para cada arco, empezamos un nuevo trazo llamando beginPath(). En el código, cada uno de los parámetros para el arco estan en una variable para su entendimiento, pero no es necesario esto en la vida real.

+ +

Las coordenadas x e y deberían ser suficientemente claras. radius y startAngle estan arreglados. El endAngle inicia en 180 grados (la mitad de un círculo) en la primera columna y es incrementado por pasos de 90 grados, culminando en un círculo completo en la última columna.

+ +

El parámetro clockwise resulta, en la primera y tercera fila siendo dibujado como un arco al sentido de las manecillas de reloj y la segunda y cuarta fila como arcos al contrario de las manecillas de reloj. Finalmente, la estructura if hace los arcos contorneados a la mitad desde arriba y los arcos hacia abajorellenados a la mitad.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    for(var i=0;i<4;i++){
+      for(var j=0;j<3;j++){
+        ctx.beginPath();
+        var x              = 25+j*50;               // Coordenada x
+        var y              = 25+i*50;               // Coordenada y
+        var radius         = 20;                    // Radio del arco
+        var startAngle     = 0;                     // Punto inicial del círculo
+        var endAngle       = Math.PI+(Math.PI*j)/2; // Punto final del círculo
+        var anticlockwise  = i%2==0 ? false : true; // Sentido de las manecillas del reloj y contrario a ellas
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i>1){
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+
+{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}} + +

Curvas Bezier curvas cuadráticas

+ +

El siguiente tipo de trazos disponibles son las  curvas Bézier, en sus dos variantes, cúbicas y cuadráticas. Son usadas generalmente para dibujar complejas formas orgánicas.

+ +
+
quadraticCurveTo(cp1x, cp1y, x, y)
+
Dibuja una curva cuadrática de Bézier desde la posición actual de la pluma hasta el punto final especificado por x e y, utilizando el punto de control especificado por cp1x y cp1y.
+
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
+
Dibuja una curva cúbica de Bézier desde la posición actual de la pluma hasta el punto final especificado por x e y, utilizando los puntos de control especificados por (cp1x, cp1y) y (cp2x, cp2y).
+
+ +

La diferencia entre estos puede describirse mejor utilizando la imagen de la derecha. Una curva cuadrática de Bézier tiene un punto inicial y un punto final (puntos azules) y un solo punto de control (indicado por el punto rojo), mientras que una curva cúbica de Bézier utiliza dos puntos de control.

+ +

Los parámetros x e y de ambos métodos son las coordenadas del punto final. cp1x y cp1y son las coordenadas del primer punto de control, y cp2x y cp2y son las coordenadas del segundo punto de control.

+ +

El uso de curvas cuadráticas y cúbicas Bézier puede ser bastante difícil, ya que a diferencia del software de dibujo vectorial como Adobe Illustrator, no tenemos respuesta visual directa en cuanto a lo que estamos haciendo. Esto hace bastante difícil dibujar formas complejas. En el siguiente ejemplo, vamos a dibujar algunas formas orgánicas simples, pero si tienes el tiempo y, sobre todo, la paciencia, se pueden crear formas mucho más complejas.

+ +

No hay nada muy difícil en estos ejemplos. En ambos casos vemos una sucesión de curvas que se dibujan que finalmente dan lugar a una forma completa.

+ +

Curvas de Bezier cuadraticas

+ +

Este ejemplo usa multiples curvas cuadraticas de Bézier para renderizar un globo de voz.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75,25);
+    ctx.quadraticCurveTo(25,25,25,62.5);
+    ctx.quadraticCurveTo(25,100,50,100);
+    ctx.quadraticCurveTo(50,120,30,125);
+    ctx.quadraticCurveTo(60,120,65,100);
+    ctx.quadraticCurveTo(125,100,125,62.5);
+    ctx.quadraticCurveTo(125,25,75,25);
+    ctx.stroke();
+  }
+}
+
+ +

{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

+ +

Curvas cúbicas Bezier

+ +

Este ejemplo dibuja un corazon usanco curvas cúbicas de Bézier.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75,40);
+    ctx.bezierCurveTo(75,37,70,25,50,25);
+    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
+    ctx.bezierCurveTo(20,80,40,102,75,120);
+    ctx.bezierCurveTo(110,102,130,80,130,62.5);
+    ctx.bezierCurveTo(130,62.5,130,25,100,25);
+    ctx.bezierCurveTo(85,25,75,37,75,40);
+    ctx.fill();
+  }
+}
+
+ +

{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

+ +

Rectangles

+ +

In addition to the three methods we saw in {{anch("Drawing rectangles")}}, which draw rectangular shapes directly to the canvas, there's also the rect() method, which adds a rectangular path to a currently open path.

+ +
+
rect(x, y, width, height)
+
Draws a rectangle whose top-left corner is specified by (x, y) with the specified width and height.
+
+ +

When this method is executed, the moveTo() method is automatically called with the parameters (0,0). In other words, the current pen position is automatically reset to the default coordinates.

+ +

Making combinations

+ +

So far, each example on this page has used only one type of path function per shape. However, there's no limitation to the number or types of paths you can use to create a shape. So in this final example, let's combine all of the path functions to make a set of very famous game characters.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx,12,12,150,150,15);
+    roundedRect(ctx,19,19,150,150,9);
+    roundedRect(ctx,53,53,49,33,10);
+    roundedRect(ctx,53,119,49,16,6);
+    roundedRect(ctx,135,53,49,33,10);
+    roundedRect(ctx,135,119,25,49,10);
+
+    ctx.beginPath();
+    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
+    ctx.lineTo(31,37);
+    ctx.fill();
+
+    for(var i=0;i<8;i++){
+      ctx.fillRect(51+i*16,35,4,4);
+    }
+
+    for(i=0;i<6;i++){
+      ctx.fillRect(115,51+i*16,4,4);
+    }
+
+    for(i=0;i<8;i++){
+      ctx.fillRect(51+i*16,99,4,4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83,116);
+    ctx.lineTo(83,102);
+    ctx.bezierCurveTo(83,94,89,88,97,88);
+    ctx.bezierCurveTo(105,88,111,94,111,102);
+    ctx.lineTo(111,116);
+    ctx.lineTo(106.333,111.333);
+    ctx.lineTo(101.666,116);
+    ctx.lineTo(97,111.333);
+    ctx.lineTo(92.333,116);
+    ctx.lineTo(87.666,111.333);
+    ctx.lineTo(83,116);
+    ctx.fill();
+
+    ctx.fillStyle = "white";
+    ctx.beginPath();
+    ctx.moveTo(91,96);
+    ctx.bezierCurveTo(88,96,87,99,87,101);
+    ctx.bezierCurveTo(87,103,88,106,91,106);
+    ctx.bezierCurveTo(94,106,95,103,95,101);
+    ctx.bezierCurveTo(95,99,94,96,91,96);
+    ctx.moveTo(103,96);
+    ctx.bezierCurveTo(100,96,99,99,99,101);
+    ctx.bezierCurveTo(99,103,100,106,103,106);
+    ctx.bezierCurveTo(106,106,107,103,107,101);
+    ctx.bezierCurveTo(107,99,106,96,103,96);
+    ctx.fill();
+
+    ctx.fillStyle = "black";
+    ctx.beginPath();
+    ctx.arc(101,102,2,0,Math.PI*2,true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89,102,2,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}
+
+// A utility function to draw a rectangle with rounded corners.
+
+function roundedRect(ctx,x,y,width,height,radius){
+  ctx.beginPath();
+  ctx.moveTo(x,y+radius);
+  ctx.lineTo(x,y+height-radius);
+  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
+  ctx.lineTo(x+width-radius,y+height);
+  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
+  ctx.lineTo(x+width,y+radius);
+  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
+  ctx.lineTo(x+radius,y);
+  ctx.quadraticCurveTo(x,y,x,y+radius);
+  ctx.stroke();
+}
+
+ +
+

The resulting image looks like this:

+ +

{{EmbedLiveSample("Making_combinations", 160, 160)}}

+ +

We won't go over this in detail, since it's actually surprisingly simple. The most important things to note are the use of the fillStyle property on the drawing context, and the use of a utility function (in this case roundedRect()). Using utility functions for bits of drawing you do often can be very helpful and reduce the amount of code you need, as well as its complexity.

+ +

We'll take another look at fillStyle, in more detail, later in this tutorial. Here, all we're doing is using it to change the fill color for paths from the default color of black to white, and then back again.

+ +

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_usage", "Web/Guide/HTML/Canvas_tutorial/Using_images")}}

+
+
+ +

 

diff --git a/files/es/web/api/canvas_api/tutorial/drawing_text/index.html b/files/es/web/api/canvas_api/tutorial/drawing_text/index.html new file mode 100644 index 0000000000..10a5970824 --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/drawing_text/index.html @@ -0,0 +1,67 @@ +--- +title: Dibujar texto usando canvas +slug: Dibujar_texto_usando_canvas +tags: + - 'HTML:Canvas' +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +--- +

{{ Gecko_minversion_header(1.9) }} +{{ Fx_minversion_header(3) }} +El elemento <canvas> permite dibujar texto en él a través de una API experimental de Mozilla. +

+

API

+
attribute DOMString mozTextStyle;
+void mozDrawText(in DOMString textToDraw);
+float mozMeasureText(in DOMString textToMeasure);
+void mozPathText(in DOMString textToPath);
+void mozTextAlongPath(in DOMString textToDraw, in boolean stroke);
+
+

Notas

+
  • El tipo de letra predeterminado es sans-serif 12pt. +
  • Estas extensiones de texto no están aún estandarizadas por WHATWG. +
  • No necesitas un contexto especial para usarlas; el contexto 2D funciona bien. +
  • Todos los dibujos se realizan usando la transformación actual. +
  • Revisa el {{ Bug(339553) }} si quieres leer más sobre las implementaciones específicas. +
+

Demostraciones

+

Mira algunos ejemplos aquí, aquí, y aquí. +

+

Cambiar el tipo de letra actual

+

El atributo mozTextStyle contiene el estilo de texto actual. Usa la misma sintaxis que el especificado para las tipografías CSS. +

Ej: +

+
ctx.mozTextStyle = "20pt Arial"
+
+

Dibujar texto

+

Dibujar es muy sencillo. mozDrawText usa el estilo de texto actual, cualquiera que sea éste. Se usa el color de relleno del contexto como color del texto. +

+
ctx.translate(10, 50);
+ctx.fillStyle = "Red";
+ctx.mozDrawText("Sample String");
+
+

Medir texto

+

A veces es útil saber qué tan ancho es un trozo de texto en particular (para centrarlo en una ventana, por ejemplo). +

+
var text = "Sample String";
+var width = ctx.canvas.width;
+var len = ctx.mozMeasureText(text);
+ctx.translate(len/2, 0);
+ctx.mozDrawText(text);
+
+

Interacción texto/trazo

+

Si quieres tachar un texto, mozDrawText no te lo permite. En cambio, mozPathText agrega el tachado de texto al trazo actual. +

+
ctx.fillStyle = "green";
+ctx.strokeStyle = "black";
+ctx.mozPathText("Sample String");
+ctx.fill()
+ctx.stroke()
+
+

Supongamos ahora que quieres agregar un texto que se acomode a un trazo que dibujaste (una línea curva o algo parecido) es donde aparece mozTextAlongPath. Al contrario de otras funciones de texto, mozTextAlongPath necesita dos argumentos: el texto y qué se quiere hacer con él. mozTextAlongPath aproxima el trazo actual como una serie de segmentos de línea y ubica cada carácter encima de ese trazo. Los caracteres no son cambiados de tamaño o transformados de acuerdo a la curvatura de la base; toman la orientación del trazo a la mitad del carácter. +

Una vez que mozTextAlongPath sabe dónde está el carácter, busca el segundo parámetro para decidir qué hacer con él. Si el segundo parámetro es false, entonces dibuja el carácter como lo haría mozDrawText. Si es true, agrega el carácter al trazo actual, como lo hace mozPathText. Esto puede usarse para crear efectos únicos. +


+


+

+
+
+{{ languages( { "en": "en/Drawing_text_using_a_canvas", "fr": "fr/Dessin_de_texte_avec_canvas", "ja": "ja/Drawing_text_using_a_canvas", "pl": "pl/Rysowanie_tekstu_przy_u\u017cyciu_canvas" } ) }} diff --git a/files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html b/files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html new file mode 100644 index 0000000000..967710de49 --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html @@ -0,0 +1,99 @@ +--- +title: Hit regions and accessibility +slug: Web/Guide/HTML/Canvas_tutorial/Hit_regions_and_accessibility +translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility +--- +
{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
+ +
The {{HTMLElement("canvas")}} element on its own is just a bitmap and does not provide information about any drawn objects. Canvas content is not exposed to accessibility tools like semantic HTML is. In general, you should avoid using canvas in an accessible website or app. The following guidelines can help to make it more accessible.
+ +
El elemento {{HTMLElement ("canvas")}} por sí solo es solo un mapa de bits y no proporciona información sobre ningún objeto dibujado. El contenido del lienzo no está expuesto a herramientas de accesibilidad como el HTML semántico. En general, debe evitar usar canvas en un sitio web o aplicación accesible. Las siguientes pautas pueden ayudar a que sea más accesible.
+ +

Fallback content

+ +

The content inside the <canvas> ... </canvas> tags can be used as a fallback for browsers which don't support canvas rendering. It's also very useful for assistive technology users (like screen readers) which can read and interpret the sub DOM in it. A good example at html5accessibility.com demonstrates how this can be done:

+ +
<canvas>
+  <h2>Shapes</h2>
+  <p>A rectangle with a black border.
+   In the background is a pink circle.
+   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
+   Partially overlaying the circle is a green
+   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
+   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
+   both of which are semi-opaque, so the full circle can be seen underneath.</p>
+</canvas>
+ +

See the video how NVDA reads this example by Steve Faulkner.

+ +

ARIA rules

+ +

Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications more accessible to people with disabilities. You can use ARIA attributes to describe the behavior and purpose of the canvas element. See ARIA and ARIA techniques for more information.

+ +
<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
+
+ +

Hit regions

+ +

Whether the mouse coordinates are within a particular area on the canvas, is a common problem to solve. The hit region API allows you to define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools. It allows you to make hit detection easier and lets you route events to DOM elements. The API has the following three methods (which are still experimental in current web browsers; check the browser compatibility tables).

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
Adds a hit region to the canvas.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
Removes the hit region with the specified id from the canvas.
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
Removes all hit regions from the canvas.
+
+ +

You can add a hit region to your path and check for the {{domxref("MouseEvent.region")}} property to test if your mouse is hitting your region, for example.

+ +
<canvas id="canvas"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
+ctx.fill();
+ctx.addHitRegion({id: 'circle'});
+
+canvas.addEventListener('mousemove', function(event) {
+  if (event.region) {
+    alert('hit region: ' + event.region);
+  }
+});
+</script>
+ +

The addHitRegion() method also takes a control option to route events to an element (that is a descendant of the canvas):

+ +
ctx.addHitRegion({control: element});
+ +

This can be useful for routing to {{HTMLElement("input")}} elements, for example. See also this codepen demo.

+ +

Focus rings

+ +

When working with the keyboard, focus rings are a handy indicator to help navigating on a page. To draw focus rings on a canvas drawing, the drawFocusIfNeeded property can be used.

+ +
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}
+
If a given element is focused, this method draws a focus ring around the current path.
+
+ +

Additionally, the scrollPathIntoView() method can be used to make an element visible on the screen if focused, for example.

+ +
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}
+
Scrolls the current path or a given path into the view.
+
+ +

See also

+ + + +
{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
diff --git a/files/es/web/api/canvas_api/tutorial/index.html b/files/es/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..da5b0b3cc9 --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,61 @@ +--- +title: Tutorial Canvas +slug: Web/Guide/HTML/Canvas_tutorial +tags: + - Canvas + - HTML5 + - graficos +translation_of: Web/API/Canvas_API/Tutorial +--- +

+ +

<canvas> es un elemento HTML el cual puede ser usado para dibujar gráficos usando scripts (normalmente JavaScript). Este puede, por ejemplo, ser usado para dibujar gráficos, realizar composición de fotos o simples (y no tan simples) animaciones. Las imágenes a la derecha muestran algunos ejemplos de implementaciones <canvas>  las cuales se verán en un futuro en este tutorial.

+ +

<canvas>  fue introducido primero por Apple para el Mac OS X Dashboard y después implementado en Safari y Google Chrome. Navegadores basados en Gecko 1.8, tal como Firefox 1.5, que también soportan este elemento. El <canvas> es un elemento parte de las especificaciones de la WhatWG Web applications 1.0 mejor conocida como HTML5.

+ +

En este tutorial se describe cómo usar el elemento <canvas> para dibujar gráficos en 2D, empezando con lo básico. Los ejemplos le proveerán mayor claridad a las ideas que pueda tener referentes al canvas, así como los códigos que necesita para crear su propio contenido.

+ +

Antes de Empezar

+ +

Usar el elemento <canvas> no es algo muy díficil pero necesita saber y entender los aspectos básicos del HTML y JavaScript. El elemento <canvas> no está soportado en navegadores viejos, pero están soportado en la mayoría de las versiones más recientes de los navegadores. El tamaño por defecto del canvas es 300px * 150px [ancho (width) * alto (height)]. Pero se puede personalizar el tamaño usando las propiedades height y width de CSS. Con el fin de dibujar gráficos en el lienzo <canvas> se utiliza un objeto de contexto de JavaScript que crea gráficos sobre la marcha.

+ +

En este Tutorial

+ + + +

Vea también

+ + + +

Nota a los contribuyentes

+ +

Debido a un desafortunado error técnico que ocurrió el 17 de junio del 2013, perdimos la historia de este tutorial, incluyendo atribuciones a todos los contribuyentes del pasado a su contenido. Pedimos disculpas por esto, y esperamos que perdone este desafortunado percance.

+ +
{{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}
diff --git a/files/es/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/es/web/api/canvas_api/tutorial/optimizing_canvas/index.html new file mode 100644 index 0000000000..145e2734f0 --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -0,0 +1,19 @@ +--- +title: Optimizing canvas +slug: Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +

{{HTMLElement("canvas")}} es uno de los estándares más utilizados para la representación de gráficos 2D en la Web. Se utiliza ampliamente en los juegos y visualizaciones complejas. Sin embargo, as Web sites and apps push canvas to the limits, el rendimiento comienza a sufrir. This article aims to provide suggestions for optimizing your use of the canvas element, to ensure that your Web site or app performs well.

+

A continuación una lista de tips par mejorar el rendimiento:

+
    +
  • Repintar primitives similares o objetos repetidos dentro y fuera de la pantalla canvas.
    • +
  • Batch canvas calls together (for example, draw a poly-line instead of multiple separate lines).
    • +
  • Avoid floating-point coordinates and use integers instead.
    • +
  • Avoid unnecessary canvas state changes.
    • +
  • Render screen differences only, not the whole new state.
    • +
  • Utilice varios lienzos en capas para escenas complejas.
    • +
  • Evite la propiedad shadowBlur siempre que sea posible.
    • +
  • Con las animaciones, use {{domxref("window.requestAnimationFrame()")}}.
    • +
  • Probar el rendimiento con JSPerf.
    • +
+

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_animations")}}

diff --git a/files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html b/files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html new file mode 100644 index 0000000000..14ccc9c4a5 --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html @@ -0,0 +1,301 @@ +--- +title: Pixel manipulation with canvas +slug: Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas +translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
+ +
+

Hasta ahora, no habíamos mirado los píxeles reales de nuestro canvas. Con el objeto ImageData, puedes leer y escribir directamente un array de datos para manipular píxeles.

+ +

También veremos cómo se puede controlar el suavizado de la imagen (antialiasing) y cómo guardar imágenes de tu canvas.

+
+ +

El objeto ImageData

+ +

El objeto {{domxref("ImageData")}} representa los datos pixelados subyacentes de un área de un objeto lienzo. Contiene los siguientes atributos de sólo lectura:

+ +
+
width
+
El ancho de la imagen en píxeles.
+
height
+
La altura de la imagen en píxeles.
+
data
+
Un objeto {{jsxref("Uint8ClampedArray")}} que representa un array unidimensional, contiene información en formato RGBA, con valores desde 0 hasta 255 (incluído).
+
+ +

La propiedad data devuelve un  {{jsxref("Uint8ClampedArray")}}, al que se puede acceder para ver los datos originales del pixel; cada pixel está representado por cuatro valores (rojo, verde, azul, y alfa, en ese orden; esto es, formato "RGBA"). Cada componente de color se representa con un valor entero entre 0 y 255. Dentro del array, cada componente ocupa un índice consecutivo, comenzando con 0 desde el punto superior izquierdo, continuando de izquierda a derecha y de arriba hacia abajo, a través del array.

+ +

El {{jsxref("Uint8ClampedArray")}} contiene alto × ancho × 4 bytes de datos, con valores de índice en el rango entre 0 y (alto×ancho×4)-1.

+ +

Por ejemplo, para leer el valor del componente azul del pixel en la columna 200, fila 50 de una imagen, deberías hacer lo siguiente:

+ +

blueComponent = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];

+ +

Si se le da un conjunto de coordenadas (X e Y), puede que termine haciendo algo así:

+ +
var xCoord = 50;
+var yCoord = 100;
+var canvasWidth = 1024;
+
+function getColorIndicesForCoord(x, y, width) {
+  var red = y * (width * 4) + x * 4;
+  return [red, red + 1, red + 2, red + 3];
+}
+
+var colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
+
+var redIndex = colorIndices[0];
+var greenIndex = colorIndices[1];
+var blueIndex = colorIndices[2];
+var alphaIndex = colorIndices[3];
+
+var redForCoord = imageData.data[redIndex];
+var greenForCoord = imageData.data[greenIndex];
+var blueForCoord = imageData.data[blueIndex];
+var alphaForCoord = imageData.data[alphaIndex];
+
+ +

O, en ES6 sería algo así:

+ +
const xCoord = 50;
+const yCoord = 100;
+const canvasWidth = 1024;
+
+const getColorIndicesForCoord = (x, y, width) => {
+  const red = y * (width * 4) + x * 4;
+  return [red, red + 1, red + 2, red + 3];
+};
+
+const colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
+
+const [redIndex, greenIndex, blueIndex, alphaIndex] = colorIndices;
+
+ +

You may also access the size of the pixel array in bytes by reading the Uint8ClampedArray.length attribute:

+ +
var numBytes = imageData.data.length;
+
+ +

Creando un objeto ImageData

+ +

Para crear un objeto nuevo y vacío tipo ImageData, debes usar el método  {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Hay dos versiones del método createImageData():

+ +
var myImageData = ctx.createImageData(width, height);
+ +

Esto crea un nuevo objeto ImageData con las dimensiones especificadas. Todos los pixels tienen valor correspondiente a negro - transparente (0,0,0,0).

+ +

También puedes crear un nuevo objeto ImageData con las mismas dimensiones que otro objeto, especificado por anotherImageData. Los píxels del nuevo objeto tienen valor negro - transparente. ¡Esto no es una copia de los datos de la imagen!

+ +
var myImageData = ctx.createImageData(anotherImageData);
+ +

Getting the pixel data for a context

+ +

To obtain an ImageData object containing a copy of the pixel data for a canvas context, you can use the getImageData() method:

+ +
var myImageData = ctx.getImageData(left, top, width, height);
+ +

This method returns an ImageData object representing the pixel data for the area of the canvas whose corners are represented by the points (left,top), (left+width, top), (left, top+height), and (left+width, top+height). The coordinates are specified in canvas coordinate space units.

+ +
+

Note: Any pixels outside the canvas are returned as transparent black in the resulting ImageData object.

+
+ +

This method is also demonstrated in the article Manipulating video using canvas.

+ +

A color picker

+ +

In this example we are using the getImageData() method to display the color under the mouse cursor. For this, we need the current position of the mouse with layerX and layerY, then we look up the pixel data on that position in the pixel array that getImageData() provides us. Finally, we use the array data to set a background color and a text in the <div> to display the color.

+ + + +
var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+img.onload = function() {
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+};
+var color = document.getElementById('color');
+function pick(event) {
+  var x = event.layerX;
+  var y = event.layerY;
+  var pixel = ctx.getImageData(x, y, 1, 1);
+  var data = pixel.data;
+  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
+             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
+  color.style.background =  rgba;
+  color.textContent = rgba;
+}
+canvas.addEventListener('mousemove', pick);
+
+ +

{{ EmbedLiveSample('A_color_picker', 610, 240) }}

+ +

Painting pixel data into a context

+ +

You can use the putImageData() method to paint pixel data into a context:

+ +
ctx.putImageData(myImageData, dx, dy);
+
+ +

The dx and dy parameters indicate the device coordinates within the context at which to paint the top left corner of the pixel data you wish to draw.

+ +

For example, to paint the entire image represented by myImageData to the top left corner of the context, you can simply do the following:

+ +
ctx.putImageData(myImageData, 0, 0);
+
+ +

Grayscaling and inverting colors

+ +

In this example we iterate over all pixels to change their values, then we put the modified pixel array back to the canvas using putImageData(). The invert function simply subtracts each color from the max value 255. The grayscale function simply uses the average of red, green and blue. You can also use a weighted average, given by the formula x = 0.299r + 0.587g + 0.114b, for example. See Grayscale on Wikipedia for more information.

+ + + +
var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  var data = imageData.data;
+
+  var invert = function() {
+    for (var i = 0; i < data.length; i += 4) {
+      data[i]     = 255 - data[i];     // red
+      data[i + 1] = 255 - data[i + 1]; // green
+      data[i + 2] = 255 - data[i + 2]; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var grayscale = function() {
+    for (var i = 0; i < data.length; i += 4) {
+      var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+      data[i]     = avg; // red
+      data[i + 1] = avg; // green
+      data[i + 2] = avg; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var invertbtn = document.getElementById('invertbtn');
+  invertbtn.addEventListener('click', invert);
+  var grayscalebtn = document.getElementById('grayscalebtn');
+  grayscalebtn.addEventListener('click', grayscale);
+}
+
+ +

{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}

+ +

Zooming and anti-aliasing

+ +

With the help of the {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} method, a second canvas and the {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property, we are able to zoom into our picture and see the details.

+ +

We get the position of the mouse and crop an image of 5 pixels left and above to 5 pixels right and below. Then we copy that one over to another canvas and resize the image to the size we want it to. In the zoom canvas we resize a 10×10 pixel crop of the original canvas to 200×200.

+ +
zoomctx.drawImage(canvas,
+                  Math.abs(x - 5), Math.abs(y - 5),
+                  10, 10, 0, 0, 200, 200);
+ +

Because anti-aliasing is enabled by default, we might want to disable the smoothing to see clear pixels. You can toggle the checkbox to see the effect of the imageSmoothingEnabled property (which needs prefixes for different browsers).

+ + + + + +
var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var zoomctx = document.getElementById('zoom').getContext('2d');
+
+  var smoothbtn = document.getElementById('smoothbtn');
+  var toggleSmoothing = function(event) {
+    zoomctx.imageSmoothingEnabled = this.checked;
+    zoomctx.mozImageSmoothingEnabled = this.checked;
+    zoomctx.webkitImageSmoothingEnabled = this.checked;
+    zoomctx.msImageSmoothingEnabled = this.checked;
+  };
+  smoothbtn.addEventListener('change', toggleSmoothing);
+
+  var zoom = function(event) {
+    var x = event.layerX;
+    var y = event.layerY;
+    zoomctx.drawImage(canvas,
+                      Math.abs(x - 5),
+                      Math.abs(y - 5),
+                      10, 10,
+                      0, 0,
+                      200, 200);
+  };
+
+  canvas.addEventListener('mousemove', zoom);
+}
+ +

{{ EmbedLiveSample('Zoom_example', 620, 490) }}

+ +

Guardando las imágenes

+ +

The {{domxref("HTMLCanvasElement")}} provides a toDataURL() method, which is useful when saving images. It returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.

+ +
+
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}
+
Default setting. Creates a PNG image.
+
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}
+
Creates a JPG image. Optionally, you can provide a quality in the range from 0 to 1, with one being the best quality and with 0 almost not recognizable but small in file size.
+
+ +

Once you have generated a data URI from you canvas, you are able to use it as the source of any {{HTMLElement("image")}} or put it into a hyper link with a download attribute to save it to disc, for example.

+ +

You can also create a {{domxref("Blob")}} from the canvas.

+ +
+
{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}
+
Creates a Blob object representing the image contained in the canvas.
+
+ +

See also

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}

diff --git a/files/es/web/api/clipboard_api/index.html b/files/es/web/api/clipboard_api/index.html new file mode 100644 index 0000000000..53e43f6bd5 --- /dev/null +++ b/files/es/web/api/clipboard_api/index.html @@ -0,0 +1,76 @@ +--- +title: API del portapapeles +slug: Web/API/API_del_portapapeles +translation_of: Web/API/Clipboard_API +--- +
{{DefaultAPISidebar("Clipboard API")}}
+ +

La API del portapapeles permite acceder los comandos del portapapeles (cortar, copiar y pegar), así como leer y escribir de manera asíncrona el portapapeles del sistema. Acceder al contenido del portapapeles está sujeta a la API de permisos: El permiso clipboard-write es concedido automáticamente a las páginas cuando están en la pestaña activa. El permiso clipboard-read debe ser solicitado, lo que se puede hacer intentando leer directamente el portapapeles.

+ +

Esta API está diseñada para reemplazar el acceso al portapapeles usando {{domxref("document.execCommand()")}}.

+ +

Accediendo al portapapeles

+ +

En vez de instanciar un objeto Clipboard, se puede acceder al portapapeles del sistema a través de la variable global {{domxref("Navigator.clipboard")}}:

+ +
navigator.clipboard.readText().then(
+  clipText => document.querySelector(".editor").innerText += clipText);
+ +

Esta pieza de código lee el texto que hay en el portapapeles y lo añade al primer elemento que tenga la clase editor. Desde que {{domxref("Clipboard.readText", "readText()")}} (y también {{domxref("Clipboard.read", "read()")}}, de hecho) devuelve una cadena de texto vacía si el contenido del portapapeles no es texto, este código es seguro.

+ +

Interfaces

+ +
+
{{domxref("Clipboard")}} {{securecontext_inline}}
+
Proporciona una interfaz para leer y escribir texto y datos. La especificación se refiere a esto como 'Async Clipboard API.'
+
{{domxref("ClipboardEvent")}} {{securecontext_inline}}
+
Representa la información del evento que se ha disparado. Los eventos que se pueden disparar son: {{domxref("Element/cut_event", "cortar")}}, {{domxref("Element/copy_event", "copiar")}}, y {{domxref("Element/paste_event", "pegar")}}. La especificación se refiere a esto como 'Clipboard Event API'.
+
{{domxref("ClipboardItem")}} {{securecontext_inline}}
+
Representa uno de los objetos del portapapeles, usado en la lectura y escritura de datos.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('Clipboard API')}}{{Spec2('Clipboard API')}}Definición primitiva.
+ +

Compatibilidad con navegadores

+ +

Clipboard

+ +
+ + +

{{Compat("api.Clipboard")}}

+ +

ClipboardEvent

+ + + +

{{Compat("api.ClipboardEvent")}}

+ +

ClipboardItem

+ + + +

{{Compat("api.ClipboardItem")}}

+ +

Véase también

+ + +
diff --git a/files/es/web/api/console/tabla/index.html b/files/es/web/api/console/tabla/index.html deleted file mode 100644 index 53f57f5636..0000000000 --- a/files/es/web/api/console/tabla/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: Console.table() -slug: Web/API/Console/tabla -tags: - - API - - Consola - - DOM - - Depuración -translation_of: Web/API/Console/table ---- -
{{APIRef("Console API")}}
- -

Muestra datos tabulares como una tabla.

- -

Esta función toma un argumento obligatorio: data, que debe ser un array o un objeto, y un parámetro adicional: columns.

- -

Muestra data como una tabla en la consola. Cada elemento en el array (o propiedad enumerable si data es un objeto) será una fila en la tabla.

- -

La primera columna de la tabla se identificará como (index). Si data es un array, sus valores serán los índices del array. Si data es un objeto, entonces sus valores serán los nombres de las propiedades. Tenga en cuenta que (en Firefox) console.table está limitado a mostrar 1000 filas (la primera columna es la llamada index).

- -

{{AvailableInWorkers}}

- -

Colecciones de tipos primitivos

- -

El argumento data puede ser un array o un objeto.

- -
// un array de strings
-
-console.table(["apples", "oranges", "bananas"]);
- -

- -
// un objeto cuyas propiedades son strings
-
-function Person(firstName, lastName) {
-  this.firstName = firstName;
-  this.lastName = lastName;
-}
-
-var me = new Person("John", "Smith");
-
-console.table(me);
- -

- -

Colecciones de tipos compuestos

- -

Si los elementos en el array, o propiedades en el objeto, son también arrays u objetos, sus elementos o propiedades serán enumeradas en la fila, una por columna:

- -
// un array de arrays
-
-var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
-console.table(people);
- -

Table displaying array of arrays

- -
// un array de objetos
-
-function Person(firstName, lastName) {
-  this.firstName = firstName;
-  this.lastName = lastName;
-}
-
-var john = new Person("John", "Smith");
-var jane = new Person("Jane", "Doe");
-var emily = new Person("Emily", "Jones");
-
-console.table([john, jane, emily]);
- -

Tenga en cuenta que si el array contiene objetos, las columnas se etiquetarán con el nombre de la propiedad.

- -

Table displaying array of objects

- -
// un objeto cuyas propiedades son objetos
-
-var family = {};
-
-family.mother = new Person("Jane", "Smith");
-family.father = new Person("John", "Smith");
-family.daughter = new Person("Emily", "Smith");
-
-console.table(family);
- -

Table displaying object of objects

- -

Restringiendo las columnas mostradas

- -

Por defecto, console.table() muestra todos los elementos de cada fila. Puedes emplear el parámetro opcional columns  para seleccionar un subconjunto de columnas que mostrar:

- -
// an array of objects, logging only firstName
-
-function Person(firstName, lastName) {
-  this.firstName = firstName;
-  this.lastName = lastName;
-}
-
-var john = new Person("John", "Smith");
-var jane = new Person("Jane", "Doe");
-var emily = new Person("Emily", "Jones");
-
-console.table([john, jane, emily], ["firstName"]);
- -

Table displaying array of objects with filtered output

- -

Ordenando columnas

- -

Se puede ordenar la tabla por una columna en particular pulsando en la etiqueta de dicha columna.

- -

Sintaxis

- -
console.table(data [, columns]);
-
- -

Parámetros

- -
-
data
-
La información a mostrar. Puede ser tanto un array como un objeto.
-
columns
-
Un array que contenga los nombres de las columnas a incluir.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("Console API", "#table", "console.table()")}}{{Spec2("Console API")}}Definición inicial
- -

Compatibilidad con navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("34.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Disponible en workers{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("34.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Disponible en workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/es/web/api/console/table/index.html b/files/es/web/api/console/table/index.html new file mode 100644 index 0000000000..53f57f5636 --- /dev/null +++ b/files/es/web/api/console/table/index.html @@ -0,0 +1,212 @@ +--- +title: Console.table() +slug: Web/API/Console/tabla +tags: + - API + - Consola + - DOM + - Depuración +translation_of: Web/API/Console/table +--- +
{{APIRef("Console API")}}
+ +

Muestra datos tabulares como una tabla.

+ +

Esta función toma un argumento obligatorio: data, que debe ser un array o un objeto, y un parámetro adicional: columns.

+ +

Muestra data como una tabla en la consola. Cada elemento en el array (o propiedad enumerable si data es un objeto) será una fila en la tabla.

+ +

La primera columna de la tabla se identificará como (index). Si data es un array, sus valores serán los índices del array. Si data es un objeto, entonces sus valores serán los nombres de las propiedades. Tenga en cuenta que (en Firefox) console.table está limitado a mostrar 1000 filas (la primera columna es la llamada index).

+ +

{{AvailableInWorkers}}

+ +

Colecciones de tipos primitivos

+ +

El argumento data puede ser un array o un objeto.

+ +
// un array de strings
+
+console.table(["apples", "oranges", "bananas"]);
+ +

+ +
// un objeto cuyas propiedades son strings
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);
+ +

+ +

Colecciones de tipos compuestos

+ +

Si los elementos en el array, o propiedades en el objeto, son también arrays u objetos, sus elementos o propiedades serán enumeradas en la fila, una por columna:

+ +
// un array de arrays
+
+var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+console.table(people);
+ +

Table displaying array of arrays

+ +
// un array de objetos
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily]);
+ +

Tenga en cuenta que si el array contiene objetos, las columnas se etiquetarán con el nombre de la propiedad.

+ +

Table displaying array of objects

+ +
// un objeto cuyas propiedades son objetos
+
+var family = {};
+
+family.mother = new Person("Jane", "Smith");
+family.father = new Person("John", "Smith");
+family.daughter = new Person("Emily", "Smith");
+
+console.table(family);
+ +

Table displaying object of objects

+ +

Restringiendo las columnas mostradas

+ +

Por defecto, console.table() muestra todos los elementos de cada fila. Puedes emplear el parámetro opcional columns  para seleccionar un subconjunto de columnas que mostrar:

+ +
// an array of objects, logging only firstName
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily], ["firstName"]);
+ +

Table displaying array of objects with filtered output

+ +

Ordenando columnas

+ +

Se puede ordenar la tabla por una columna en particular pulsando en la etiqueta de dicha columna.

+ +

Sintaxis

+ +
console.table(data [, columns]);
+
+ +

Parámetros

+ +
+
data
+
La información a mostrar. Puede ser tanto un array como un objeto.
+
columns
+
Un array que contenga los nombres de las columnas a incluir.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Console API", "#table", "console.table()")}}{{Spec2("Console API")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("34.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Disponible en workers{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("34.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Disponible en workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/crypto/getrandomvalues/index.html b/files/es/web/api/crypto/getrandomvalues/index.html new file mode 100644 index 0000000000..b6e09439a9 --- /dev/null +++ b/files/es/web/api/crypto/getrandomvalues/index.html @@ -0,0 +1,75 @@ +--- +title: Crypto.getRandomValues() +slug: Web/API/RandomSource/Obtenervaloresaleatorios +tags: + - API + - Criptografía + - Referencia + - metodo +translation_of: Web/API/Crypto/getRandomValues +--- +

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

+ +

El método Crypto.getRandomValues() permite obtener valores aleatorios criptográficamente fuertes. El array que se pasa como parámetro se rellena con números aleatorios (entiéndase aleatorios en el sentido criptográfico).

+ +

Con el fin de garantizar un rendimiento razonable, las distintas implementaciones no utilizan un generador de numeros aleatorios puro, sino que utilizan un generador numérico pseudo-aleatorio, sembrado con un valor con suficiente entropía. Los generadores numéricos pseudo-aleatorios utilizados difieren entre {{Glossary("user agent", "user agents")}}, pero son adecuados para usos criptográficos. Se require también que las distintas implementaciones usen una semilla con suficiente entropía, como una fuente de entropía a nivel de sistema.

+ +

Sintaxis

+ +
cryptoObj.getRandomValues(typedArray);
+ +

Parámetros

+ +
+
typedArray
+
Es un entero {{jsxref("TypedArray")}}, que puede ser un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Int16Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, o un {{jsxref("Uint32Array")}}. Todos los elementos dentro del array seran sobreescritos con números aleatorios.
+
+ +

Excepciones

+ +
    +
  • Una {{exception("QuotaExceededError")}} {{domxref("DOMException")}} es lanzada si la longitud solicitada es mayor a 65536 bytes.
    • +
+ +

Ejemplo

+ +
/* Asumiendo que window.crypto.getRandomValues está disponible */
+
+var array = new Uint32Array(10);
+window.crypto.getRandomValues(array);
+
+console.log("Tus numeros de la suerte:");
+for (var i = 0; i < array.length; i++) {
+    console.log(array[i]);
+}
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}{{Spec2('Web Crypto API')}}Definición Inicial
+ +

Compatibilidad del navegador

+ +

La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, por favor, compruebe https://github.com/mdn/browser-compat-data y envianos un pull request.

+ +

{{Compat("api.Crypto.getRandomValues")}}

+ +

Ver también

+ +
    +
  • {{ domxref("Window.crypto") }} para obtener un objeto tipo {{domxref("Crypto")}}.
    • +
  • {{jsxref("Math.random")}}, una fuente no criptográfica de números aleatorios.
    • +
diff --git a/files/es/web/api/document/abrir/index.html b/files/es/web/api/document/abrir/index.html deleted file mode 100644 index 13b541561d..0000000000 --- a/files/es/web/api/document/abrir/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Document.open() -slug: Web/API/Document/abrir -translation_of: Web/API/Document/open ---- -
{{APIRef("DOM")}}
- -

El método Document.open() abre un documento para escritura (writing)

- -

Esto viene con algunos efectos secundarios. Por ejemplo:

- -
    -
  • Todos las atenciones de eventos actualmente registrados en el documento, los nodos dentro del documento o la ventana del documento son eliminados.
    • -
  • Todos los nodos existentes se eliminan del documento.
    • -
- -

Sintaxis

- -
document.open();
-
- -

Parametros

- -

Ninguno.

- -

Valor devuelto

- -

Una instancia del objeto Document (Document).

- -

Ejemplos

- -

El código simple a continuación abre el documento y reemplaza su contenido con un número de diferentes fragmentos HTML antes de cerrarlo nuevamente.

- -
document.open();
-document.write("<p>Hola mundo!</p>");
-document.write("<p>Soy un pez</p>");
-document.write("<p>El numero es 42</p>");
-document.close();
- -

Notas

- -
-

Traducción pendiente para el texto que sigue

-
- -

An automatic document.open() call happens when {{domxref("document.write()")}} is called after the page has loaded.

- -

For years Firefox and Internet Explorer additionally erased all JavaScript variables, etc., in addition to removing all nodes. This is no longer the case.document non-spec'ed parameters to document.open

- -

Gecko-specific notes

- -

Starting with Gecko 1.9, this method is subject to the same same-origin policy as other properties, and does not work if doing so would change the document's origin.

- -

Starting with Gecko 1.9.2, document.open() uses the principal of the document whose URI it uses, instead of fetching the principal off the stack. As a result, you can no longer call {{domxref("document.write()")}} into an untrusted document from chrome, even using wrappedJSObject. See Security check basics for more about principals.

- -

Three-argument document.open()

- -

There is a lesser-known and little-used three-argument version of document.open() , which is an alias of {{domxref("Window.open()")}} (see its page for full details).

- -

This call, for example opens github.com in a new window, with its opener set to null:

- -
document.open('https://www.github.com','', 'noopener=true')
- -

Two-argument document.open()

- -

Browsers used to support a two-argument document.open(), with the following signature:

- -
document.open(type, replace)
- -

Where type specified the MIME type of the data you are writing (e.g. text/html) and replace if set (i.e. a string of "replace") specified that the history entry for the new document would replace the current history entry of the document being written to.

- -

This form is now obsolete; it won't throw an error, but instead just forwards to document.open() (i.e. is the equivalent of just running it with no arguments).  The history-replacement behavior now always happens.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("HTML WHATWG", "#dom-document-open", "document.open()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}{{Spec2("DOM2 HTML")}}
- -

Browser compatibility

- - - -

{{Compat("api.Document.open")}}

- -

See also

- -
    -
  • {{domxref("Document")}}
    • -
  • {{domxref("Window.open()")}}
    • -
diff --git a/files/es/web/api/document/async/index.html b/files/es/web/api/document/async/index.html deleted file mode 100644 index 132fd106e1..0000000000 --- a/files/es/web/api/document/async/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Document.async -slug: Web/API/Document/async -translation_of: Web/API/XMLDocument/async ---- -

document.async es utilizado para indicar cuándo un llamado de  {{domxref("document.load")}} debe ser sincrónico o asincrónico. true es su valor por defecto, indicando que el documento se cargó asincrónicamente.

- -

(Desde la versión 1.4 alpha es posible cargar documentos sincrónicamente)

- -

Ejemplo

- -
function loadXMLData(e) {
-  alert(new XMLSerializer().serializeToString(e.target)); // Devuelve los contenidos de querydata.xml como un string
-}
-
-var xmlDoc = document.implementation.createDocument("", "test", null);
-
-xmlDoc.async = false;
-xmlDoc.onload = loadXMLData;
-xmlDoc.load('querydata.xml');
- -

Especificación

- - - -

Véase también

- - diff --git a/files/es/web/api/document/cookie/index.html b/files/es/web/api/document/cookie/index.html new file mode 100644 index 0000000000..791ae788f2 --- /dev/null +++ b/files/es/web/api/document/cookie/index.html @@ -0,0 +1,119 @@ +--- +title: document.cookie +slug: DOM/document.cookie +tags: + - NeedsContent +translation_of: Web/API/Document/cookie +--- +

{{ApiRef("DOM")}}

+ +

Resumen

+ +

Con document.cookie se obtienen y definen las cookies asociadas con el documento.

+ +

Sintaxis

+ +

Leer todas las cookies accesibles desde una localización

+ +
todasLasCookies = document.cookie;
+
+ +

En el código anterior todasLasCookies es una cadena que contiene una lista de todas las cookies separadas por punto y coma (en pares clave=valor). Tenga en cuenta que clave y valor pueden estar rodeadas por espacios en blanco (caracteres espacio y tabulación): de hecho RFC 6265 especifica que debe haber un espacio en blanco después de cada punto y coma (;), pero algunos agentes de usuario no son muy estrictos con esto.

+ + + +
document.cookie = nuevaCookie;
+ +

En el código anterior, nuevacookie es una cadena de la forma clave=valor. Tenga en cuenta que solo se puede crear o actualizar una cookie de cada vez mediante este método. Considere también que:

+ +
    +
  • Cualquiera de los siguientes atributos opcionales se puede escribir después del par clave-valor, especificando la cookie que se va a crear o actualizar, precedidos de un punto y coma. +
      +
    • ;path=path (p. ej.: '/'. '/midir'). Si no se especifica, por defecto corresponde a la ruta del documento actual.
      + La ruta debe ser absoluta (ver RFC 6265). Para más información sobre cómo utilizar rutas relativas, ir a este párrafo.
      • +
    • ;domain=domain (p. ej. 'example.com', 'subdomain.example.com'). Si no se especifica, su valor por defecto es la porción de la dirección web de la ubicación actual del archivo. A diferencia de lo que ocurría en las primeras especificaciones, los puntos iniciales de los nombre de dominio se ignoran, pero los navegadores pueden impedir crear cookies que contengan dichos puntos. Si se especifica un dominio, los subdominios siempre son incluidos.
      • +
    • ;max-age=duración-máxima-en-segundos Por ejemplo: 60*60*24*365 para un año.
      • +
    • ;expires=fecha-en-formato-GMTString Si no se especifica max-age ni expires, la cookie expirará al terminar la sesión actual.
      • +
    • ;secure La cookie sólo será transmitida en un protocolo seguro (HTTPS, SSL). Antes de Chrmoe 52, este atributo podía aparecer con cookes de dominios http.
      • +
    • ;samesite Este atributo impide al navegador enviar esta cookie a través de peticiones cross-site. Los valores posibles son lax o strict. El soporte de este atributo se añadió en Chrome 51. +
        +
      • El valor strict impide que la cookie sea enviada por el navegador al sitio destino en contexto de navegador cross-site, incluso cuando sigue un enlace regular.
        • +
      • El valor lax sólo envía cookies a las peticiones de GET de ALTO NIVEL. Es suficiente para seguir al usuario, pero evitará muchos ataques CSRF.
        • +
      +
      • +
    +
    • +
  • El valor de la cookie puede ser evaluado mediante encodeURIComponent() para asegurarse de que dicha cadena no incluya comas, punto y coma, ni espacios en blanco (lo cual no está permitido en el valor de una cookie).
    • +
  • Algunas implementaciones de agente de usuario soporta los siguientes prefijos de cookie: +
      +
    • __Secure-  Señales para el navegador que solo deben incluirse en las perticiones de cookie transmitidas por un canal seguro.
      • +
    • __Host- Señales del navegador que además de la restricción de uso de cookies que provienen de un origen serugo, el ámbito de la cookie está limitado a un atributo path que proporciona el servidor. Si el servidor omite el atributo path, el directorio de las petición URI está en uso. Tabién las señales del atributo dominio no deben estar presentes, lo cual previene que la cookie sea usada en otros dominis. Para Chrome, el atributo path debe tener el mismo origen.
      • +
    +
    • +
+ +
{{ gecko_callout_heading("6.0") }}
+ +
Nótese que previamente a Gecko 6.0 {{ geckoRelease("6.0") }}, rutas que contenían comillas eran tratadas como si las comillas fueran parte de la cadena, en lugar de considerarse como un delimitador de la ruta actual. Esto ya ha sido arreglado.
+ +

Ejemplos

+ +

Ejemplo # 1: Uso sencillo

+ +
document.cookie = "nombre=oeschger";
+document.cookie = "comida_preferida=tripa";
+function alertCookie() {
+  alert(document.cookie); // visualizar: nombre=oeschger;comida favorita=tripa
+
+}
+ +
<button onclick="alertCookie()">Mostrar cookies</button>
+ +

{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}

+ + + +
document.cookie = "test1=Hola";
+document.cookie = "test2=Mundo";
+
+var cookieValor = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+
+function alertCookieValue() {
+  alert(cookieValor);
+}
+
+ +
<button onclick="alertCookieValue()">Mostrar valor de cookie</button>
+ +

{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}

+ +

Ejemplo #3: Hacer algo una sola vez

+ +

De manera a usar el siguiente código, favor remplace todas las veces la palabra hacerAlgoUnaSolaVez (el nombre de la cookie) con un nombre personalizado.

+ +
function hazUnaVez() {
+  if (document.cookie.replace(/(?:(?:^|.*;\s*)hacerAlgoUnaSolaVez\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
+    alert("Hacer algo aquí!");
+    document.cookie = "hacerAlgoUnaSolaVez=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+  }
+}
+ +
<button onclick="dhacerUnaVez()">Solo hacer algo una vez</button>
+ +

{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}

+ +

Seguridad

+ +

Es importante mencionar que la restricción path no protege contra la lectura no autorizada de cookies de una ruta distinta. Puede ser fácilmente resuelto mediante DOM (por ejemplo creando un iframe oculto con la ruta de la cookie y accediendo a la propiedad contentDocument.cookie del iframe). La única manera de proteger el acceso a cookies es ocupando un dominio o subdominio diferente, debido a la política de mismo origen.

+ +

Notas

+ +
    +
  • Empezando con Firefox 2, está disponible un mejor mecanismo de almacenamiento en cliente - WHATWG DOM Storage.
    • +
  • Puedes eliminar una cookie simplemente estableciendo su fecha de expiración a cero.
    • +
  • Cabe mencionar que entre más cookies se tengan, mayor cantidad de datos serán transferidos entre el servidor y el cliente en cada solicitud. Esto reducirá el tiempo entre cada solicitud. Es altamente recomendado que se utilice WHATWG DOM Storage si se van a mantener los datos solamente en el cliente.
    • +
+ +

Especificación

+ +

DOM Level 2: HTMLDocument.cookie

diff --git a/files/es/web/api/document/crearatributo/index.html b/files/es/web/api/document/crearatributo/index.html deleted file mode 100644 index 22f769d577..0000000000 --- a/files/es/web/api/document/crearatributo/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Document.createAttribute() -slug: Web/API/Document/crearAtributo -tags: - - Atributos - - Crear Atributo - - JavaScript - - Métodos -translation_of: Web/API/Document/createAttribute ---- -
{{ ApiRef("DOM") }}
- -

El método Document.createAttribute() crea un nuevo nodo de tipo atributo (attr), y lo retorna. El objeto crea un nodo implementando la interfaz {{domxref("Attr")}}. El DOM no impone que tipo de atributos pueden ser agregados a un particular elemento de esta forma.

- -
-

El texto pasado como parametro es convertido a minusculas.

-
- -

Sintaxis

- -
atributo = document.createAttribute(nombre)
-
- -

Parametros

- -
    -
  • nombre es un string conteniendo el nombre del atributo.
    • -
- -

Valor que retorna

- -

Un nodo {{domxref("Attr")}} nodo.

- -

Excepciones

- -
    -
  • INVALID_CHARACTER_ERR si el parametro contiene caracteres invalidos para un atributo XML .
    • -
- -

Ejemplo

- -
var nodo = document.getElementById("div1");
-var a = document.createAttribute("miAtributo");
-a.value = "nuevoVal";
-nodo.setAttributeNode(a);
-console.log(nodo.getAttribute("miAtributo")); // "nuevoVal"
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}{{Spec2("DOM WHATWG")}}Comportamiento preciso con caracteres en mayuscula 
{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM3 Core')}}Sin cambios
{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM2 Core')}}Sin cambios
{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM1')}}Definición inicial
- -

Compatibilidad del buscador

- - - -

{{Compat("api.Document.createAttribute")}}

- -

Ver ademas

- -
    -
  • {{domxref("Document.createElement()")}}
    • -
diff --git a/files/es/web/api/document/createattribute/index.html b/files/es/web/api/document/createattribute/index.html new file mode 100644 index 0000000000..22f769d577 --- /dev/null +++ b/files/es/web/api/document/createattribute/index.html @@ -0,0 +1,91 @@ +--- +title: Document.createAttribute() +slug: Web/API/Document/crearAtributo +tags: + - Atributos + - Crear Atributo + - JavaScript + - Métodos +translation_of: Web/API/Document/createAttribute +--- +
{{ ApiRef("DOM") }}
+ +

El método Document.createAttribute() crea un nuevo nodo de tipo atributo (attr), y lo retorna. El objeto crea un nodo implementando la interfaz {{domxref("Attr")}}. El DOM no impone que tipo de atributos pueden ser agregados a un particular elemento de esta forma.

+ +
+

El texto pasado como parametro es convertido a minusculas.

+
+ +

Sintaxis

+ +
atributo = document.createAttribute(nombre)
+
+ +

Parametros

+ +
    +
  • nombre es un string conteniendo el nombre del atributo.
    • +
+ +

Valor que retorna

+ +

Un nodo {{domxref("Attr")}} nodo.

+ +

Excepciones

+ +
    +
  • INVALID_CHARACTER_ERR si el parametro contiene caracteres invalidos para un atributo XML .
    • +
+ +

Ejemplo

+ +
var nodo = document.getElementById("div1");
+var a = document.createAttribute("miAtributo");
+a.value = "nuevoVal";
+nodo.setAttributeNode(a);
+console.log(nodo.getAttribute("miAtributo")); // "nuevoVal"
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}{{Spec2("DOM WHATWG")}}Comportamiento preciso con caracteres en mayuscula 
{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM3 Core')}}Sin cambios
{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM2 Core')}}Sin cambios
{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM1')}}Definición inicial
+ +

Compatibilidad del buscador

+ + + +

{{Compat("api.Document.createAttribute")}}

+ +

Ver ademas

+ +
    +
  • {{domxref("Document.createElement()")}}
    • +
diff --git a/files/es/web/api/document/createevent/index.html b/files/es/web/api/document/createevent/index.html new file mode 100644 index 0000000000..7b273c6e33 --- /dev/null +++ b/files/es/web/api/document/createevent/index.html @@ -0,0 +1,35 @@ +--- +title: Event.createEvent() +slug: Web/API/Event/createEvent +tags: + - API + - DOM + - Evento + - metodo +translation_of: Web/API/Document/createEvent +translation_of_original: Web/API/Event/createEvent +--- +

{{APIRef("DOM")}}

+ +

Crea un nuevo evento, que debe ser inicializado llamando a su método init().

+ +

Sintaxis

+ +
document.createEvent(tipo);
+ +
+
tipo
+
Una string indicando el tipo de evento a crear.
+
+ +

Este método devuelve un nuevo objeto {{ domxref("Event") }} del DOM del tipo indicado, que debe ser inicializado antes de su uso.

+ +

Ejemplo

+ +
var nuevoEvento = document.createEvent("UIEvents");
+ +

Especificación

+ + diff --git a/files/es/web/api/document/getselection/index.html b/files/es/web/api/document/getselection/index.html deleted file mode 100644 index 6c03b64dcf..0000000000 --- a/files/es/web/api/document/getselection/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Document.getSelection() -slug: Web/API/Document/getSelection -tags: - - Referencia - - Selección - - metodo -translation_of: Web/API/DocumentOrShadowRoot/getSelection -translation_of_original: Web/API/Document/getSelection ---- -

{{APIRef("DOM")}}

- -

Este método funciona exactamente igual que {{domxref("Window.getSelection()")}}; devuelve un objeto {{domxref("Selection")}} que representa el texto que se ha seleccionado en el documento.

diff --git a/files/es/web/api/document/open/index.html b/files/es/web/api/document/open/index.html new file mode 100644 index 0000000000..13b541561d --- /dev/null +++ b/files/es/web/api/document/open/index.html @@ -0,0 +1,109 @@ +--- +title: Document.open() +slug: Web/API/Document/abrir +translation_of: Web/API/Document/open +--- +
{{APIRef("DOM")}}
+ +

El método Document.open() abre un documento para escritura (writing)

+ +

Esto viene con algunos efectos secundarios. Por ejemplo:

+ +
    +
  • Todos las atenciones de eventos actualmente registrados en el documento, los nodos dentro del documento o la ventana del documento son eliminados.
    • +
  • Todos los nodos existentes se eliminan del documento.
    • +
+ +

Sintaxis

+ +
document.open();
+
+ +

Parametros

+ +

Ninguno.

+ +

Valor devuelto

+ +

Una instancia del objeto Document (Document).

+ +

Ejemplos

+ +

El código simple a continuación abre el documento y reemplaza su contenido con un número de diferentes fragmentos HTML antes de cerrarlo nuevamente.

+ +
document.open();
+document.write("<p>Hola mundo!</p>");
+document.write("<p>Soy un pez</p>");
+document.write("<p>El numero es 42</p>");
+document.close();
+ +

Notas

+ +
+

Traducción pendiente para el texto que sigue

+
+ +

An automatic document.open() call happens when {{domxref("document.write()")}} is called after the page has loaded.

+ +

For years Firefox and Internet Explorer additionally erased all JavaScript variables, etc., in addition to removing all nodes. This is no longer the case.document non-spec'ed parameters to document.open

+ +

Gecko-specific notes

+ +

Starting with Gecko 1.9, this method is subject to the same same-origin policy as other properties, and does not work if doing so would change the document's origin.

+ +

Starting with Gecko 1.9.2, document.open() uses the principal of the document whose URI it uses, instead of fetching the principal off the stack. As a result, you can no longer call {{domxref("document.write()")}} into an untrusted document from chrome, even using wrappedJSObject. See Security check basics for more about principals.

+ +

Three-argument document.open()

+ +

There is a lesser-known and little-used three-argument version of document.open() , which is an alias of {{domxref("Window.open()")}} (see its page for full details).

+ +

This call, for example opens github.com in a new window, with its opener set to null:

+ +
document.open('https://www.github.com','', 'noopener=true')
+ +

Two-argument document.open()

+ +

Browsers used to support a two-argument document.open(), with the following signature:

+ +
document.open(type, replace)
+ +

Where type specified the MIME type of the data you are writing (e.g. text/html) and replace if set (i.e. a string of "replace") specified that the history entry for the new document would replace the current history entry of the document being written to.

+ +

This form is now obsolete; it won't throw an error, but instead just forwards to document.open() (i.e. is the equivalent of just running it with no arguments).  The history-replacement behavior now always happens.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "#dom-document-open", "document.open()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}{{Spec2("DOM2 HTML")}}
+ +

Browser compatibility

+ + + +

{{Compat("api.Document.open")}}

+ +

See also

+ +
    +
  • {{domxref("Document")}}
    • +
  • {{domxref("Window.open()")}}
    • +
diff --git a/files/es/web/api/document/pointerlockchange_event/index.html b/files/es/web/api/document/pointerlockchange_event/index.html new file mode 100644 index 0000000000..2d5af4205b --- /dev/null +++ b/files/es/web/api/document/pointerlockchange_event/index.html @@ -0,0 +1,80 @@ +--- +title: pointerlockchange +slug: Web/Events/pointerlockchange +translation_of: Web/API/Document/pointerlockchange_event +--- +

El evento pointerlockchange es disparado cuando el cursor del navegador es bloqueado o desbloqueado.

+ +

Información general

+ +
+
Specification
+
Pointer Lock
+
Interface
+
Event
+
Bubbles
+
Yes
+
Cancelable
+
No
+
Target
+
Document
+
Default Action
+
None
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Ejemplo

+ +
//Ten en cuenta que el nombre del evento, en este caso "pointerlockchange" puede variar según el navegador.
+document.addEventListener("pointerlockchange", function( event ) {
+    // El objetivo, parámetro "target", del objeto "event" es siempre el objeto "document".
+    // para recuperar el objeto que recibe el bloqueo/desbloqueo es document.pointerlockElement.
+    document.pointerLockElement;
+
+});
+
+ +

Eventos relacionados

+ + + +

Véase también:

+ + diff --git a/files/es/web/api/document/pointerlockelement/index.html b/files/es/web/api/document/pointerlockelement/index.html deleted file mode 100644 index cc5d490e5c..0000000000 --- a/files/es/web/api/document/pointerlockelement/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Document.pointerLockElement -slug: Web/API/Document/pointerLockElement -translation_of: Web/API/DocumentOrShadowRoot/pointerLockElement ---- -
{{APIRef("DOM")}}
- -

La propiedad pointerLockElement conserva el elemento adquirido, para el evento del mouse, mientras el bloqueo se encuentre activo .  Es null si el bloqueo se encuentra en estado pendiente para bloqueo, o si el bloqueo se ha liberado, es decir ya no se encuentra en estado bloqueado, o si el elemento bloqueado se encuentra en otro documento.

- -

Sintaxis

- -
var elemento = document.pointerLockElement;
-
- -

Valor retornado

- -

Un {{domxref("Element")}} o null.

- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Bloquear puntero','l#extension-to-the-document-interface','Document')}}{{Spec2('Pointer lock')}}Extiende de la interfaz Document
- -

Compatibilidad del Navegador

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{ CompatVersionUnknown() }} {{property_prefix("webkit")}}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }} {{property_prefix("moz")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Soporte sin prefijar{{ CompatVersionUnknown() }}{{CompatUnknown}}{{CompatGeckoDesktop(50)}}   
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Véase también:

- -
    -
  • {{ domxref("Document.exitPointerLock()") }}
    • -
  • {{ domxref("Element.requestPointerLock()") }}
    • -
  • Pointer Lock
    • -
diff --git a/files/es/web/api/document/stylesheets/index.html b/files/es/web/api/document/stylesheets/index.html deleted file mode 100644 index 0458cb3fc9..0000000000 --- a/files/es/web/api/document/stylesheets/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Document.styleSheets -slug: Web/API/Document/styleSheets -translation_of: Web/API/DocumentOrShadowRoot/styleSheets -translation_of_original: Web/API/Document/styleSheets ---- -

{{ ApiRef() }}

-

Resumen

-

Devuelve una lista de objetos de tipo stylesheet para las hojas de estilo que están específicamente enlazadas o contenidas en el documento.

-

Propiedades

-

styleSheetList.length - devuelve el número de objetos de tipo stylesheet contenidos en el objeto.

-

Sintaxis

-
styleSheetList = document.styleSheets
-
-

El objeto devuelto es del tipo StyleSheetList.

-

Es una colección ordenada de objetos de tipo stylesheet. styleSheetList.item(index) o simplemente styleSheetList{{ mediawiki.external(' - - index - ') }} devuelve un único objeto de tipo stylesheet con el índice especificado (el índice es de origen 0).

-

Especificación

-

DOM Level 2 Style: styleSheets

-

{{ languages( { "ja": "ja/DOM/document.styleSheets", "pl": "pl/DOM/document.styleSheets" } ) }}

diff --git a/files/es/web/api/document_object_model/events/index.html b/files/es/web/api/document_object_model/events/index.html new file mode 100644 index 0000000000..fce2530535 --- /dev/null +++ b/files/es/web/api/document_object_model/events/index.html @@ -0,0 +1,72 @@ +--- +title: Eventos y el DOM +slug: Referencia_DOM_de_Gecko/Eventos +tags: + - DOM + - Guía +translation_of: 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/web/api/document_object_model/examples/index.html b/files/es/web/api/document_object_model/examples/index.html new file mode 100644 index 0000000000..33f0e9e2b7 --- /dev/null +++ b/files/es/web/api/document_object_model/examples/index.html @@ -0,0 +1,367 @@ +--- +title: Ejemplos +slug: Referencia_DOM_de_Gecko/Ejemplos +tags: + - DOM + - Referencia_DOM_de_Gecko + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Web/API/Document_Object_Model/Examples +--- +

En este capítulo se brindan ejemplos relativamente extensos que ilustran el uso del DOM para el desarrollo web y XML. Siempre que sea posible, usaremos las APIs, trucos y patrones comunes en JavaScript para la manipulación del objeto document.

+ +

Ejemplo 1: Altos y anchos

+ +

El ejemplo siguiente muestra el uso de las propiedades de alto (height) y ancho (width) junto a imágenes de dimensiones variadas:

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="es">
+
+<head>
+<title>Ejemplo de height/width</title>
+<script type="text/javascript">
+function iniciar()
+{
+  var arrImages = new Array(3);
+  arrImages[0] = document.getElementById("imagen1");
+  arrImages[1] = document.getElementById("imagen2");
+  arrImages[2] = document.getElementById("imagen3");
+  var objOutput = document.getElementById("salida");
+  var strHtml = "<ul>";
+  for (var i = 0; i < arrImages.length; i++)
+    strHtml += "<li>imagen" + (i+1) +
+            ": height=" + arrImages[i].height +
+            ", width=" + arrImages[i].width +
+            ", style.height=" + arrImages[i].style.height +
+            ", style.width=" + arrImages[i].style.width +
+            "<\/li>";
+  strHtml += "<\/ul>";
+  salida.innerHTML = strHtml;
+}
+</script>
+</head>
+<body onload="iniciar();">
+
+<p>La 1ª imagen:
+- alto (height): no
+- ancho (width): no
+- estilo (style): no
+    <img id="imagen1" src="http://www.mozilla.org/images/mozilla-banner.gif">
+</p>
+<p>La 2ª imagen:
+- height="50"
+- width="500"
+- style: no
+    <img id="imagen2" src="http://www.mozilla.org/images/mozilla-banner.gif"
+         height="50" width="500">
+</p>
+<p>La 3ª imagen:
+- height y width: no
+- style="height: 50px; width: 500px;": sí
+    <img id="imagen3" src="http://www.mozilla.org/images/mozilla-banner.gif"
+         style="height: 50px; width: 500px;">
+</p>
+
+<div id="salida"> </div>
+</body>
+</html>
+
+ +

height y width son además propiedades de los elementos OBJECT y APPLET.

+ +

Ejemplo 2: Atributos de una imagen

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="es">
+
+<head>
+<title>Modificación del borde de una imagen</title>
+<script type="text/javascript">
+function setBorderWidth(width) {
+  document.getElementById("img1").style.borderWidth = width + "px";
+}
+</script>
+</head>
+
+<body>
+<p>
+  <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100"
+height="100" alt="test de borde">
+</p>
+
+<form name="Formulario">
+  <p><input type="button" value="Definir un borde de 20px"
+onclick="setBorderWidth(20);"> <input type="button" value="Definir un borde de 5px"
+onclick="setBorderWidth(5);"></p>
+</form>
+
+</body>
+</html>
+
+ +

Ejemplo 3: Manipulación de estilos

+ +

En este ejemplo sencillo, algunas propiedades de estilo básicas de un elemento párrafo HTML son accedidas utilizando el objeto estilo en el elemento y aquellas propiedades de estilo CSS del objeto, pueden ser entregadas y establecidas desde el DOM. En este caso, está manipulando los estilos directamente. En el siguiente ejemplo (ver ejemplo 4), puede utilizar las hojas de estilo y sus reglas para cambiar estilos para el documento entero.

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="en">
+
+<head>
+<title>Changing color and font-size example</title>
+<script type="text/javascript">
+function changeText() {
+	var p = document.getElementById("pid");
+	p.style.color = "blue"
+	p.style.fontSize = "18pt"
+}
+</script>
+</head>
+<body>
+<p id="pid"
+onclick="window.location.href = 'http://www.cnn.com/';">linker</p>
+<form>
+<p><input value="rec" type="button" onclick="changeText();"></p>
+</form>
+</body>
+</html>
+
+ +

Ejemplo 4: Utilización de las hojas de estilo

+ +

La propiedad de las hojas de estilo en un objeto de documento muestra una lista de las hojas de estilo que acompañan a ése documento. Usando los objetos de la hoja de estilo, del estilo y de las reglas de CSS se puede acceder individualmente a esas hojas de estilo y sus reglas, como se demuestra en este ejemplo, el cual muestra todos los selectores de reglas de estilo en la consola.

+ +
ss = document.styleSheets;
+for(i=0; i<ss.length; i++)
+ {
+ for(j=0; j<ss[0].cssRules.length; j++)
+  {
+  dump( ss[i].cssRules[j].selectorText + "\n" );
+  }
+ }
+
+ +

Para un documento con una sola hoja de estilo en la cual son definidas las tres reglas siguientes:

+ +
BODY { background-color: darkblue; }
+P { font-face: Arial; font-size: 10pt; margin-left: .125in; }
+#lumpy { display: none; }
+
+ +

El script sale así:

+ +
BODY
+P
+#LUMPY
+
+ +

Ejemplo 5: Propagación del evento

+ +

Este ejemplo muestra de una forma muy simple como los eventos se inician y son gestionados en el DOM. Cuando el cuerpo (body ) de ese documento HTML se carga,un evento listener es registrado con la columna superior de la TABLA. El evento listener maneja el evento ejecutando la función stopEvent, que cambia el valor en el final de la celda de la tabla.

+ +

Sin embargo, stopEvent también llama a un método del objeto evento, event.stopPropagation, que mantiene el evento del burbujeo a continuación dentro del DOM. Note que la tabla misma tiene un manejador de evento onclick que muestra un mensaje cuando la tabla es seleccionada. Pero el método stopEvent ha detenido la propagación, y así despues los datos en la tabla son actualizados, la fase de evento es efectivamente finalizada, y un cuadro de alerta es mostrado para confirmar esto.

+ +
<html>
+<head>
+<title>Propagación del evento</title>
+
+<style type="text/css">
+ #t-daddy { border: 1px solid red }
+ #c1 { background-color: pink; }
+</style>
+
+<script type="text/javascript">
+
+function stopEvent(ev) {
+  c2 = document.getElementById("c2");
+  c2.innerHTML = "hola";
+
+  // this ought to keep t-daddy from getting the click.
+  ev.stopPropagation();
+  alert("La propagación del evento se ha parado.");
+}
+
+function load() {
+  elem = document.getElementById("tbl1");
+  elem.addEventListener("click", stopEvent, false);
+}
+</script>
+</head>
+
+<body onload="load();">
+
+<table id="t-daddy" onclick="alert('hi');">
+ <tr id="tbl1">
+  <td id="c1">uno</td>
+ </tr>
+ <tr>
+  <td id="c2">dos</td>
+ </tr>
+</table>
+
+</body>
+</html>
+
+ +

Ejemplo 6: Conseguir el estilo computado (getComputedStyle)

+ +

Este ejemplo demuestra como el método window.getComputedStyle puedes utilizarse para obtener los estilos de un elemento que no son especificados en el atributo style o con JavaScript (por ejemplo, element.style.backgroundColor="rgb(173, 216, 230)"). Estos últimos tipos de estilos se pueden recuperar con el atributo element.style, las propiedades del cual están en la lista de propiedades de CSS del DOM.

+ +

getComputedStyle() devuelve un objeto ComputedCSSStyleDeclaration, cuyas propiedades de estilo individuales pueden ser referenciadas con este método del objeto getPropertyValue(), el siguiente documento de ejemplo lo muestra.

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="en">
+
+<head>
+ <title>Ejemplo de ''getComputedStyle''</title>
+
+ <script type="text/javascript">
+   function cStyles()
+  {
+   var RefDiv = document.getElementById("d1");
+
+   var txtHeight = document.getElementById("t1");
+   var h_style =
+document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
+   txtHeight.value = h_style;
+
+   var txtWidth = document.getElementById("t2");
+   var w_style =
+document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
+   txtWidth.value = w_style;
+
+   var txtBackgroundColor = document.getElementById("t3");
+   var b_style =
+document.defaultView.getComputedStyle(RefDiv,
+null).getPropertyValue("background-color");
+   txtBackgroundColor.value = b_style;
+  }
+ </script>
+
+ <style type="text/css">
+   #d1 { margin-left: 10px; background-color: rgb(173, 216, 230);
+height: 20px; max-width: 20px; }
+ </style>
+
+</head>
+
+<body>
+
+<div id="d1">&nbsp;</div>
+
+<form action="">
+<p><button type="button" onclick="cStyles();">getComputedStyle</button>
+  height<input id="t1" type="text" value="1">
+  max-width<input id="t2" type="text" value="2">
+  bg-color<input id="t3" type="text" value="3"></p>
+</form>
+
+</body>
+</html>
+
+ +

Ejemplo 7: Mostrar las propiedades del objeto de evento

+ +

Este ejemplo utiliza métodos del DOM para mostrar todas las propiedades del evento de window.onload y sus valores en una tabla. Muestra además una cómoda técnica del uso de un buclefor...in para iterar sobre las propiedades de un objeto y conseguir sus valores.

+ +

Las propiedades de los objetos de evento difieren bastante entre los navegadores, la especificación W3C de los eventos del DOM 2 enumera las propiedades estándares, sin embargo algunos navegadores han extendido estas diferencias.

+ +

El siguiente código colocado dentro de un nuevo archivo de texto y cargado en un surtido de navegadores, sorprenderá por las diferencias de los números y nombres de propiedades y/o al ponerle más elementos a la página y llamar esa función desde diferentes gestores de evento.

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+   "http://www.w3.org/TR/html4/strict.dtd">
+
+<title>Muestra las propiedades del evento</title>
+
+<style type="text/css">
+  table {border-collapse: collapse;}
+  thead {font-weight: bold;}
+  td {padding: 2px 10px 2px 10px;}
+  .odd {background-color: #efdfef;}
+  .even {background-color: #ffffff;}
+</style>
+
+<script type="text/javascript">
+
+function showEventProperties(e)
+{
+  function addCell(row, text) {
+    var cell = row.insertCell(-1);
+    cell.appendChild(document.createTextNode(text));
+  }
+
+  document.getElementById('eventType').innerHTML = e.type;
+
+  var e = e || window.event;
+  var table = document.createElement('table');
+  var thead = table.createTHead();
+  var row = thead.insertRow(-1);
+  var lableList = ['#', 'Propriété', 'Valeur'];
+  var len = lableList.length;
+
+  for (var i=0; i<len; i++) {
+    addCell(row, lableList[i]);
+  }
+
+  var tbody = document.createElement('tbody');
+  table.appendChild(tbody);
+
+  for (var p in e) {
+    row = tbody.insertRow(-1);
+    row.className = (row.rowIndex % 2)? 'odd':'even';
+    addCell(row, row.rowIndex);
+    addCell(row, p);
+    addCell(row, e[p]);
+  }
+
+  document.body.appendChild(table);
+}
+window.onload = function(event){
+  showEventProperties(event);
+}
+</script>
+
+<h1>Propiedades del objeto evento del DOM<span id="eventType"></span></h1>
+
+ +

Ejemplo 8: Utilización del interfaz de tabla del DOM

+ +

La interfaz HTMLTableElement del DOM provee algunos métodos de conveniencia para crear y manipular tablas. Dos métodos usados frecuentemente son table.insertRow y row.insertCell.

+ +

Para agregar una columna y algunas celdas a una tabla existente:

+ +
<table id="table0">
+ <tr>
+  <td>Row 0 Cell 0</td>
+  <td>Row 0 Cell 1</td>
+ </tr>
+</table>
+
+<script type="text/javascript">
+
+var table = document.getElementById('table0');
+var row = table.insertRow(-1);
+var cell, text;
+for (var i=0; i<2; i++) {
+  cell = row.insertCell(-1);
+  text = 'Row ' + row.rowIndex + ' Cell ' + i;
+  cell.appendChild(document.createTextNode(text));
+}
+
+</script>
+
+ +

Notas

+ +
    +
  • Una propiedad innerHTML de la tabla nunca debería ser utilizada para modificar una tabla, aunque puede utilizarla para escribir una tabla entera o el contenido de una celda.
    • +
  • Si los métodos Core del DOMdocument.createElement y element.appendChild son utilizados para crear columnas y celdas, IE requiere que sean agregadas a un elemento tbody, mientras que otros navegadores permitirán agregar a un elemento de la tabla (las columnas serán agregadas al último elemento tbody).
    • +
  • Hay un número de otros métodos de conveniencia pertenecientes a la interfaz de tabla que pueden ser utilizados para crear y modificar tablas.
    • +
diff --git a/files/es/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/es/web/api/document_object_model/how_to_create_a_dom_tree/index.html new file mode 100644 index 0000000000..25546a1704 --- /dev/null +++ b/files/es/web/api/document_object_model/how_to_create_a_dom_tree/index.html @@ -0,0 +1,130 @@ +--- +title: Cómo crear un DOM tree +slug: How_to_create_a_DOM_tree +translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree +--- +

 

+

Esta página describe cómo usar el API DOM Core en JavaScript para crear o modificar objetos DOM. Es aplicable a todas las aplicaciones basadas en Gecko (como Mozilla Firefox) cuyo código tenga privilegios (como las extensiones) y a las que no (páginas web).

+

Creación dinámica de un DOM tree

+

Considere el siguiente documento XML:

+
<?xml version="1.0"?>
+<people>
+  <person first-name="eric" middle-initial="H" last-name="jung">
+    <address street="321 south st" city="denver" state="co" country="usa"/>
+    <address street="123 main st" city="arlington" state="ma" country="usa"/>
+  </person>
+
+  <person first-name="jed" last-name="brown">
+    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
+    <address street="123 west st" city="seattle" state="wa" country="usa"/>
+    <address street="321 south avenue" city="denver" state="co" country="usa"/>
+  </person>
+</people>
+
+

El W3C DOM API soportado por Mozilla, puede ser usado para crear una representación en memoria del documento anterior, como se ve a continuación:

+
var doc = document.implementation.createDocument("", "", null);
+var peopleElem = doc.createElement("people");
+
+var personElem1 = doc.createElement("person");
+personElem1.setAttribute("first-name", "eric");
+personElem1.setAttribute("middle-initial", "h");
+personElem1.setAttribute("last-name", "jung");
+
+var addressElem1 = doc.createElement("address");
+addressElem1.setAttribute("street", "321 south st");
+addressElem1.setAttribute("city", "denver");
+addressElem1.setAttribute("state", "co");
+addressElem1.setAttribute("country", "usa");
+personElem1.appendChild(addressElem1);
+
+var addressElem2 = doc.createElement("address");
+addressElem2.setAttribute("street", "123 main st");
+addressElem2.setAttribute("city", "arlington");
+addressElem2.setAttribute("state", "ma");
+addressElem2.setAttribute("country", "usa");
+personElem1.appendChild(addressElem2);
+
+var personElem2 = doc.createElement("person");
+personElem2.setAttribute("first-name", "jed");
+personElem2.setAttribute("last-name", "brown");
+
+var addressElem3 = doc.createElement("address");
+addressElem3.setAttribute("street", "321 north st");
+addressElem3.setAttribute("city", "atlanta");
+addressElem3.setAttribute("state", "ga");
+addressElem3.setAttribute("country", "usa");
+personElem2.appendChild(addressElem3);
+
+var addressElem4 = doc.createElement("address");
+addressElem4.setAttribute("street", "123 west st");
+addressElem4.setAttribute("city", "seattle");
+addressElem4.setAttribute("state", "wa");
+addressElem4.setAttribute("country", "usa");
+personElem2.appendChild(addressElem4);
+
+var addressElem5 = doc.createElement("address");
+addressElem5.setAttribute("street", "321 south avenue");
+addressElem5.setAttribute("city", "denver");
+addressElem5.setAttribute("state", "co");
+addressElem5.setAttribute("country", "usa");
+personElem2.appendChild(addressElem5);
+
+peopleElem.appendChild(personElem1);
+peopleElem.appendChild(personElem2);
+doc.appendChild(peopleElem);
+
+

Vea también el Capítulo DOM del Tutorial de XUL.

+

Se puede automatizar la creación de un DOM tree usando el JXON reverse algorithm (algoritmo inverso JXON) en asociación con la siguiente representación JSON:

+
{
+  "people": {
+    "person": [{
+      "address": [{
+        "@street": "321 south st",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }, {
+        "@street": "123 main st",
+        "@city": "arlington",
+        "@state": "ma",
+        "@country": "usa"
+      }],
+      "@first-name": "eric",
+      "@middle-initial": "H",
+      "@last-name": "jung"
+    }, {
+      "address": [{
+        "@street": "321 north st",
+        "@city": "atlanta",
+        "@state": "ga",
+        "@country": "usa"
+      }, {
+        "@street": "123 west st",
+        "@city": "seattle",
+        "@state": "wa",
+        "@country": "usa"
+      }, {
+        "@street": "321 south avenue",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }],
+      "@first-name": "jed",
+      "@last-name": "brown"
+    }]
+  }
+}
+
+

¿Ahora qué?

+

Los DOM trees pueden ser invocados usando expresiones XPath, convertidos a cadenas de texto, salvados a un archivo local o remoto usando XMLSerializer (sin tener que convertirlo primero a una cadena de texto), Enviados mediante POST a un servidor web (via XMLHttpRequest), transformados usando XSLT, XLink, convertidos a un objeto JavaScript a tráves del  algoritmo JXON, etc.

+

Adicionalmente se puede hacer uso de los DOM trees para modelar los datos que no estén bien formados para RDF (o si sólo no prefieres usar RDF). Otra aplicación que puedes darle, se relaciona a XUL (que es XML), la UI (interfaz) de tu aplicación puede ser manipulada dinámicamente, descargada, subida, guardada, cargada, convertida, o transformada fácilmente.

+

Vea también

+ +

{{ languages( { "fr": "fr/Comment_cr\u00e9er_un_arbre_DOM", "ja": "ja/How_to_create_a_DOM_tree", "zh-cn": "zh-cn/How_to_create_a_DOM_tree" } ) }}

diff --git a/files/es/web/api/document_object_model/index.html b/files/es/web/api/document_object_model/index.html new file mode 100644 index 0000000000..0f3a2a7f75 --- /dev/null +++ b/files/es/web/api/document_object_model/index.html @@ -0,0 +1,91 @@ +--- +title: Referencia DOM de Gecko +slug: Referencia_DOM_de_Gecko +tags: + - DOM + - NecesitaRevisiónTécnica + - Todas_las_Categorías +translation_of: Web/API/Document_Object_Model +--- +

+« Referencia DOM de Gecko +


+Aquí está la tabla de contenido para la referencia DOM de Gecko. +

+

Prefacio

+ +

Introducción

+ +

La referencia al elemento (element) de DOM

+ +

La referencia a la ventana (window) de DOM

+ +

La referencia al document de DOM

+ +

La referencia al event de DOM

+ +

La referencia al estilo (style) de DOM

+ +

La referencia al rango (range) de DOM

+ +

La referencia a la selección (selection) de DOM

+ +

Interfaz del elemento formulario (form) en HTML

+ +

Interfaz del elemento tabla (table) en HTML

+ +

Ejemplos DOM

+ +
+

Información sobre el documento original

+
  • Última actualización: 22 de Octubre de 2006 +
+
+{{ languages( { "en": "en/Gecko_DOM_Reference", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko", "it": "it/Reference_del_DOM_di_Gecko", "ja": "ja/Gecko_DOM_Reference", "ko": "ko/Gecko_DOM_Reference", "pl": "pl/Dokumentacja_Gecko_DOM", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003" } ) }} diff --git a/files/es/web/api/document_object_model/introduction/index.html b/files/es/web/api/document_object_model/introduction/index.html new file mode 100644 index 0000000000..5c604a7a6c --- /dev/null +++ b/files/es/web/api/document_object_model/introduction/index.html @@ -0,0 +1,248 @@ +--- +title: Introducción +slug: Referencia_DOM_de_Gecko/Introducción +tags: + - DOM + - Gecko + - Manuales + - Todas_las_Categorías +translation_of: Web/API/Document_Object_Model/Introduction +--- +

 

+ +

Ésta sección da una breve introducción conceptual del DOM: qué es, cómo proporciona la estructura para los documentos HTML y XML, cómo se accede a él, y cómo esta "API" presenta la información de referencia y ejemplos.

+ +

¿Qué es el DOM?

+ +

El modelo de objeto de documento (DOM) es una interfaz de programación para los documentos HTML y XML. Facilita una representación estructurada del documento y define de qué manera los programas pueden acceder, al fin de modificar, tanto su estructura, estilo y contenido. El DOM da una representación del documento como un grupo de nodos y objetos estructurados que tienen propiedades y métodos. Esencialmente, conecta las páginas web a scripts o lenguajes de programación.

+ +

Una página web es un documento. Éste documento puede exhibirse en la ventana de un navegador o también como código fuente HTML. Pero, en los dos casos, es el mismo documento. El modelo de objeto de documento (DOM) proporciona otras formas de presentar, guardar y manipular este mismo documento. El DOM es una representación completamente orientada al objeto de la página web y puede ser modificado con un lenguaje de script como JavaScript.

+ +

El W3C DOM estándar forma la base del funcionamiento del DOM en muchos navegadores modernos. Varios navegadores ofrecen extensiones más allá del estándar W3C, hay que ir con extremo cuidado al utilizarlas en la web, ya que los documentos pueden ser consultados por navegadores que tienen DOMs diferentes.

+ +

Por ejemplo, el DOM de W3C especifica que el método getElementsByTagName en el código de abajo debe devolver una lista de todos los elementos <p> del documento:

+ +
paragraphs = document.getElementsByTagName ("p");
+// paragraphs[0] es el primer elemento <p>
+// paragraphs[1] es el segundo elemento <p>, etc.
+alert (paragraphs [0].nodeName);
+
+ +

Todas las propiedades, métodos y eventos disponibles para la manipulación y la creación de páginas web está organizado dentro de objetos. Un ejemplo: el objeto document representa al documento mismo, el objeto table hace funcionar la interfaz especial HTMLTableElement del DOM para acceder a tablas HTML, y así sucesivamente. Ésta documentación procura una relación objeto-por-objeto del DOM que funciona con los navegadores basados en Gecko.

+ +

DOM y JavaScript

+ +

El ejemplo corto de abajo, como casi todos los ejemplos de esta referencia, es JavaScript. Es decir, es escrito en JavaScript pero utiliza el DOM para acceder al documento y a sus elementos. El DOM no es un lenguaje de programación pero sin él, el lenguaje JavaScript no tiene ningún modelo o noción de las páginas web, de la páginas XML ni de los elementos con los cuales es usualmente relacionado. Cada elemento -"el documento íntegro, el título, las tablas dentro del documento, los títulos de las tablas, el texto dentro de las celdas de las tablas"- es parte del modelo de objeto del documento para cada documento, así se puede acceder y manipularlos utilizando el DOM y un lenguaje de escritura, como JavaScript.

+ +

En el comienzo, JavaScript y el DOM estaban herméticamente enlazados, pero después se desarrollaron como entidades separadas. El contenido de la página es almacenado en DOM y el acceso y la manipulación se hace vía JavaScript, podría representarse aproximadamente así:

+ +

API(web o página XML) = DOM + JS(lenguaje de script)

+ +

El DOM fue diseñado para ser independiente de cualquier lenguaje de programación particular, hace que la presentación estructural del documento sea disponible desde un simple y consistente API. Aunque en este manual nos centramos exclusivamente en JavaScript, la directrices del DOM pueden construirse para cualquier lenguaje, así lo demuestra el siguiente ejemplo de Python:

+ +
# Ejemplo DOM de Python
+import xml.dom.minidom as m
+doc = m.parse("C:\\Projects\\Py\\chap1.xml");
+doc.nodeName # Propiedad DOM del objeto document;
+p_list = doc.getElementsByTagName("para");
+ +

¿Cómo se accede al DOM?

+ +

No se tiene que hacer nada especial para empezar a utilizar el DOM. Los diferentes navegadores tienen directrices DOM distintas, y éstas directrices tienen diversos grados de conformidad al actual estándar DOM (un tema que se intenta evitar en este manual), pero todos los navegadores web usan el modelo de objeto de documento para hacer accesibles las páginas web al script.

+ +

Cuando se crea un script –esté en un elemento <SCRIPT> o incluido en una página web por la instrucción de cargar un script– inmediatamente está disponible para usarlo con el API, accediendo así a los elementos document o window, para manipular el documento mismo o sus diferentes partes, las cuales son los varios elementos de una página web. La programación DOM hace algo tan simple como lo siguiente, lo cual abre un mensaje de alerta usando la función alert() desde el objeto window, o permite métodos DOM más sofisticados para crear realmente un nuevo contenido, como en el largo ejemplo de más abajo.

+ +
<body onload="window.alert('Bienvenido a mi página!');">
+
+ +

Aparte del elemento <script> en el cual JavaScript es definido, el ejemplo siguiente muestra la función a ejecutar cuando el documento se está cargando (y que el DOM completo es disponible para su uso). Esta función crea un nuevo elemento H1, le pone texto y después lo agrega al árbol del documento:

+ +
<html>
+  <head>
+    <script>
+       // ejecuta esta función cuando se cargue el documento
+       window.onload = function() {
+
+         // crea dinámicamente un par de elementos HTML en una página vacia
+         var heading = document.createElement("h1");
+         var heading_text = document.createTextNode("el texto que desee");
+         heading.appendChild(heading_text);
+         document.body.appendChild(heading);
+      }
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

Tipos de datos importantes

+ +

Esta parte intenta describir, de la manera más simple posible, los diferentes objetos y tipos. Pero hay que conocer una cantidad de tipos de datos diferentes que son utilizados por el API. Para simplificarlo, los ejemplos de sintaxis en esta API se refieren a nodos como elements, a una lista de nodos como nodeLists (o simples elementos) y a nodos de atributo como attributes.

+ +

La siguiente tabla describe brevemente estos tipos de datos.

+ + + + + + + + + + + + + + + + + + + + + + + + +
documentCuando un miembro devuelve un objeto del tipo document (por ejemplo, la propiedad ownerDocument de un elemento devuelve el documento "document" al cual pertenece), este objeto es la raíz del objeto documento en sí mismo. El capítulo La referencia al documento (document) de DOM lo explica con más detalles.
elementelement se refiere a un elemento o a un nodo de tipo de elemento "element" devuelto por un miembro del API de DOM. Dicho de otra manera, por ejemplo, el método document.createElement() devuelve un objeto referido a un nodo, lo que significa que este método devuelve el elemento que acaba de ser creado en el DOM. Los objetos element ponen en funcionamiento a la interfaz Element del DOM y también a la interfaz de nodo "Node" más básica, las cuales son incluidas en esta referencia.
nodeListUna "nodeList" es una serie de elementos, parecido a lo que devuelve el método document.getElementsByTagName(). Se accede a los items de la nodeList de cualquiera de las siguientes dos formas: +
    +
  • list.item (1)
    • +
  • lista {{mediawiki.external (1)}}
    • +
+ +

Ambas maneras son equivalentes. En la primera, item() es el método del objeto nodeList. En la última se utiliza la típica sintaxis de acceso a listas para llegar al segundo ítem de la lista.

+
attributeCuando un atributo ("attribute") es devuelto por un miembro (por ej., por el método createAttribute()), es una referencia a un objeto que expone una interfaz particular (aunque limitada) a los atributos. Los atributos son nodos en el DOM igual que los elementos, pero no suelen usarse así.
NamedNodeMapUn namedNodeMap es una serie, pero los ítems son accesibles tanto por el nombre o por un índice, este último caso es meramente una conveniencia para enumerar ya que no están en ningún orden en particular en la lista. Un NamedNodeMap es un método de ítem() por esa razón, y permite poner o quitar ítems en un NamedNodeMap
+ +

Interfaces del DOM

+ +

Uno de los propósitos de esta guía es minimizar el hablar de interfaces abstractas, heredadas y otros detalles de funcionamiento. Más bien, concentrarse sobre los objetos en el DOM y sobre las actuales cosas que se pueden usar para manipular la jerarquía de DOM. Desde el punto de vista del programador web, es bastante indiferente saber que la representación del objeto del elemento HTML form toma la propidedad name desde la interfaz HTMLFormElement pero que las propiedades className se toman desde la propia interfaz HTMLElement. En ambos casos, la propiedad está sólo en el objeto form.

+ +

Pero puede resultar confuso el funcionamiento de la fuerte relación entre objetos e interfaces en el DOM, por eso esta sección intentará hablar un poquito sobre las interfaces actuales en la especificación del DOM y de como se dispone de ellas.

+ +

Interfaces y objetos

+ +

En algunos casos un objeto pone en ejecución a una sola interfaz. Pero a menudo un objeto toma prestada una tabla HTML (table) desde muchas interfaces diversas. El objeto table, por ejemplo, pone en funcionamiento una Interfaz especial del elemento table HTML, la cual incluye métodos como createCaption y insertRow. Pero como también es un elemento HTML, table pone en marcha a la interfaz del Element descrita en el capítulo La referencia al elemento del DOM. Y finalmente, puesto que un elemento HTML es también, por lo que concierna al DOM, un nodo en el árbol de nodos que hace el modelo de objeto para una página web o XML, el elemento de table hace funcionar la interfaz más básica de Node, desde el cual deriva Element.

+ +

La referencia a un objeto table, como en el ejemplo siguiente, utiliza estas interfaces intercambiables sobre el objeto.

+ +
var table = document.getElementById("table");
+var tableAttrs = table.attributes; // Node/interfaz Element
+for (var i = 0; i < tableAttrs.length; i++) {
+  // interfaz HTMLTableElement: atributo border
+  if(tableAttrs[i].nodeName.toLowerCase() == "border")
+    table.border = "1";
+}
+// interfaz HTMLTableElement: atributo summary
+table.summary = "nota: borde aumentado";
+ +

Interfaces esenciales en el DOM

+ +

Esta sección lista las interfaces más comúnmente utilizadas en el DOM. La idea no es describir qué hacen estas APIs pero sí dar una idea de las clases de métodos y propiedades que se encuentran con el uso del DOM. Muchos ejemplos de uso común de esta API se encuentran en el capítulo Ejemplos DOM al final de este manual.

+ +

document y window son objetos cuya interfaces son generalmente muy usadas en la programación de DOM. En término simple, el objeto window representa algo como podría ser el navegador, y el objeto document es la raíz del documento en sí. Element hereda de la interfaz genérica Node, y juntos, estas dos interfaces proporcionan muchos métodos y propiedades utilizables sobre los elementos individuales. Éstos elementos pueden igualmente tener interfaces específicas según el tipo de datos representados, como en el ejemplo anterior del objeto table. Lo siguiente es una breve lista de los APIS comunes en la web y en las páginas escritas en XML utilizando el DOM.

+ + + +

Probando el API del DOM

+ +

Ésta parte procura ejemplos para todas las interfaces usadas en el desarrollo web. En algunos casos, los ejemplos son páginas HTML enteras, con el acceso del DOM a un elemento de <script>, la interfaz necesaria (por ejemplo, botones) para la ejecución del script en un formulario, y también que los elementos HTML sobre los cuales opera el DOM se listen. Según el caso, los ejemplos se pueden copiar y pegar en un documento web para probarlos.

+ +

No es el caso donde los ejemplos son muchos más concisos. Para la ejecución de estos ejemplos que sólo demuestran la relación básica entre la interfaz y los elementos HTML, resulta útil tener una página de prueba en la cual las interfaces serán fácilmente accesibles por los scripts. La muy simple página siguiente proporciona en las cabeceras un elemento de script en el cual se pondrán las funciones para testar la interfaz elegida, algunos elementos HTML con atributos que se puedan leer, editar y también manipular, así como la interfaz web necesaria para llamar esas funciones desde el navegador.

+ +

Para probar y ver como trabajan en la plataforma del navegador las interfaces del DOM, esta página de prueba o una nueva similar son factibles. El contenido de la función test() se puede actualizar según la necesidad, para crear más botones o poner más elementos.

+ +
<html>
+  <head>
+    <title>Pruebas DOM</title>
+    <script type="application/javascript">
+    function setBodyAttr(attr, value){
+      if (document.body) eval('document.body.'+attr+'="'+value+'"');
+      else notSupported();
+    }
+    </script>
+  </head>
+  <body>
+    <div style="margin: .5in; height: 400;">
+      <p><b><tt>texto</tt></b></p>
+      <form>
+        <select onChange="setBodyAttr('text',
+        this.options[this.selectedIndex].value);">
+          <option value="black">negro
+          <option value="darkblue">azul oscuro
+        </select>
+        <p><b><tt>bgColor</tt></b></p>
+        <select onChange="setBodyAttr('bgColor',
+        this.options[this.selectedIndex].value);">
+          <option value="white">blanco
+          <option value="lightgrey">gris
+        </select>
+        <p><b><tt>link</tt></b></p>
+        <select onChange="setBodyAttr('link',
+        this.options[this.selectedIndex].value);">
+          <option value="blue">azul
+          <option value="green">verde
+        </select>  <small>
+        <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
+        (sample link)</a></small><br>
+      </form>
+      <form>
+        <input type="button" value="version" onclick="ver()" />
+      </form>
+    </div>
+  </body>
+</html>
+ +

La creación de una página de prueba con una paleta de botones, campos de texto u otros elementos HTML, permitirá testar una gran cantidad de interfaces en un mismo documento, por ejemplo una serie de propiedades que afectan a los colores de una página web. Lo siguiente permite hacerse una idea de como pueden agruparse las interfaces para probarlas.

+ +

Figura 0.1 Muestra DOM página de prueba

+ +

+ +

En este ejemplo, los menúes desplegables actualizan dinámicamente los aspectos de la página web accesibles al DOM como el color de fondo (bgColor), de los hiper-enlaces (aLink), y el del texto (text). El hecho de diseñar páginas, testar las interfaces que se encuentren a lo largo de la lectura son una parte importante del aprendizaje para una utilización eficaz del DOM.

+ +

Otros enlaces

+ + + +
+ + +
 
+ +
 
+
+ +
+ + +
 
+ +
 
+
+ +
+ + +
 
+ +
 
+
diff --git a/files/es/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/es/web/api/document_object_model/locating_dom_elements_using_selectors/index.html new file mode 100644 index 0000000000..cf8a94cd4a --- /dev/null +++ b/files/es/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -0,0 +1,50 @@ +--- +title: Localizando elementos DOM usando selectores +slug: Referencia_DOM_de_Gecko/Localizando_elementos_DOM_usando_selectores +tags: + - DOM + - Necesita actualizacion para principiantes + - Principiante +translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors +--- +

Los selectores api proveen metodos que hacen mas facil y rapido devolver elementos del nodo {{domxref("Element")}} del DOM mediante emparejamiento de un conjunto de selectores. Esto es mucho mas rapido que las tecnicas anteriores, donde fuera necesario, por ejemplo usar un loop en un codigo JavaScript para localizar el item especifico que quisieras encontrar.

+ +

Interfaz de NodeSelector

+ +

Esta especificación añade dos nuevos metodos a cualquier objeto implementando el {{domxref("Document")}}, {{domxref("DocumentFragment")}}, o {{domxref("Element")}} interfaces:

+ +
+
{{domxref("Element.querySelector", "querySelector()")}}
+
Devuelve la primera coincidencia del (elemento) {{domxref("Element")}} nodo dentro de las subramas del nodo. Sino se encuentra un nodo coincidente, se devuelve null .
+
{{domxref("Element.querySelectorAll", "querySelectorAll()")}}
+
devuelve un listado de nodos {{domxref("NodeList")}} conteniendo todos los elementos del nodo coincidentes( Element) dentro de las subramas del nodo, o Devuelve un Listado de Nodos vacio NodeList sino se encuentran coincidencias.
+
+ +
Note: El {{domxref("NodeList")}} devuelto por {{domxref("Element.querySelectorAll()", "querySelectorAll()")}} no es dinamico, Es decir que cualquier cambio realizado en el DOM no se vera reflejado en la coleccion. Esto es diferente de otros metodos de querying del dom que si devuelven listados de nodos dinamicos.
+ +

Encontraras ejemplos y detalles leyendo el documento de metodos {{domxref("Element.querySelector()")}} y {{domxref("Element.querySelectorAll()")}}, Tambien en el articulo Code snippets for querySelector.

+ +

Selectors

+ +

El metodo de selectores acepta uno o mas selectores seperados por comas entre cada selector  para determinar que elemento o elementos deben ser devueltos. por ejemplo para seleccionar todos los elementos (p) del parrafo en un documento donde la clase CSS sea tanto warning or note, podes hacer lo siguiente:

+ +
var special = document.querySelectorAll( "p.warning, p.note" );
+ +

tambien por usar query para etiquetas id. Por ejemplo:

+ +
var el = document.querySelector( "#main, #basic, #exclamation" );
+ +

luego de ejecutar el codigo de arriba, la variable el contiene el primer elemento del documento, su ID puede ser uno de los siguentes  main, basic, or exclamation.

+ +

Podes usar cualquier selector CSS con los metodos querySelector() y querySelectorAll().

+ +

Ver tambien.

+ +
    +
  • Selectors API
    • +
  • {{domxref("Element.querySelector()")}}
    • +
  • {{domxref("Element.querySelectorAll()")}}
    • +
  • {{domxref("Document.querySelector()")}}
    • +
  • {{domxref("Document.querySelectorAll()")}}
    • +
  • Code snippets for querySelector
    • +
diff --git a/files/es/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html b/files/es/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html new file mode 100644 index 0000000000..b8bc2e4cf9 --- /dev/null +++ b/files/es/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html @@ -0,0 +1,337 @@ +--- +title: Trazado de una tabla HTML mediante JavaScript y la Interface DOM +slug: Trazado_de_una_tabla_HTML_mediante_JavaScript_y_la_Interface_DOM +translation_of: >- + Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces +--- +

Introducción

+ +

Este artículo es un resumen de algunos métodos DOM nivel 1 poderosos y fundamentales así como una descripción de cómo utilizarlos utilizando Javascript.  Aprenderás a crear, accesar, controlar, y remover elementos HTML dinámicamente.  Los métodos DOM presentados aquí no son específicos de HTML; también aplican para XML. Las demostraciones aquí proporcionadas funcionarán en cualquier navegador moderno, incluyendo todas las versiones de Firefox e IE 5+.

+ +
Los métodos DOM presentados aquí forman parte del Modelo de Documento basado en Objetos (DOM: Document Object Model por sus siglas en inglés) de especificación nivel 1.  DOM nivel 1 incluye métodos tanto para acceso genérico del documento (DOM 1 Core) así como métodos específicos para documentos HTML (DOM 1 HTML).
+ +

Ejemplo: Crear una tabla HTML dinámicamente (Ejemplo1.html)

+ +

Contenido HTML

+ +
<input type="button" value="Genera una tabla" onclick="genera_tabla()">
+
+ +

JavaScript Content

+ +
function genera_tabla() {
+  // Obtener la referencia del elemento body
+  var body = document.getElementsByTagName("body")[0];
+
+  // Crea un elemento <table> y un elemento <tbody>
+  var tabla   = document.createElement("table");
+  var tblBody = document.createElement("tbody");
+
+  // Crea las celdas
+  for (var i = 0; i < 2; i++) {
+    // Crea las hileras de la tabla
+    var hilera = document.createElement("tr");
+
+    for (var j = 0; j < 2; j++) {
+      // Crea un elemento <td> y un nodo de texto, haz que el nodo de
+      // texto sea el contenido de <td>, ubica el elemento <td> al final
+      // de la hilera de la tabla
+      var celda = document.createElement("td");
+      var textoCelda = document.createTextNode("celda en la hilera "+i+", columna "+j);
+      celda.appendChild(textoCelda);
+      hilera.appendChild(celda);
+    }
+
+    // agrega la hilera al final de la tabla (al final del elemento tblbody)
+    tblBody.appendChild(hilera);
+  }
+
+  // posiciona el <tbody> debajo del elemento <table>
+  tabla.appendChild(tblBody);
+  // appends <table> into <body>
+  body.appendChild(tabla);
+  // modifica el atributo "border" de la tabla y lo fija a "2";
+  tabla.setAttribute("border", "2");
+}
+ +

{{ EmbedLiveSample('Overview_of_Sample1.html') }}

+ +

Observa cuidadosamente el orden en el que se crearon los elementos en el nodo de texto:

+ +
    +
  1. Primero se crea el elemento <table>.
    2. +
  2. Posteriormente, creamos el elemento <tbody> , que es el hijo del elemento <table> .
    3. +
  3. Después, utilizamos ciclos para crear los elementos <tr>, que son hijos del elemento <tbody>.
    4. +
  4. Para cada elemento <tr>, utilizamos nuevamente ciclos para generar los elementos <td> que son hijos de los elementos <tr>.
    5. +
  5. Para cada elemento <td>, creamos nodos de texto con el contenido de cada celda.
    6. +
+ +

Una vez creados los elementos <table>, <tbody>, <tr>, y <td> así como los nodos de texto, adicionamos a cada hijo bajo su padre en el órden opuesto:

+ +
    +
  1. Primero, anexamos cada nodo de texto a su elemento padre <td> : + 
    celda.appendChild(textoCelda);
    +
    2. +
  2. Posteriormente, anexamos cada elemento <td> a su elemento padre <tr> : + 
    hilera.appendChild(celda);
    +
    3. +
  3. Posteriomente, anexamos cada elemento <tr> a su elemento padre <tbody>: + 
    tblBody.appendChild(hilera);
    +
    4. +
  4. Después, anexamos el elemento <tbody> a su elemento padre <table>: + 
    tabla.appendChild(tblBody);
    +
    5. +
  5. Finalmente, anexamos el elemento <table> a su elemento padre <body>: + 
    body.appendChild(tabla);
    +
    6. +
+ +

Recuérda esta técnica. Te será muy útil en la programación bajo el estándar W3C DOM. Primero, creas los elementos de arriba a abajo; posteriormente adicionas los hijos a los padres de abajo a arriba.

+ +

A continuación aparece el código HTML generado por el código JavaScript:

+ +
...
+<table border="2">
+    <tbody>
+        <tr><td>celda en la hilera 0, columna 0</td><td>celda en la hilera 0, columna 1</td></tr>
+        <tr><td>celda en la hilera 1, columna 0</td><td>celda en la hilera 1, columna 1</td></tr>
+    </tbody>
+</table>
+...
+
+ +

Aquí está el árbol de objetos DOM generado por el código del elemento <TABLE> :

+ +

Image:sample1-tabledom.jpg

+ +

Tú puedes construir esta tabla y sus elementos internos utilizando sólo algunos de los varios métodos del DOM. Recuerda tener en mente el modelo de la estructura que planeas crear; esto hará mucho más fácil la escritura del código necesario.

+ +

En el árbol del elemento <table> de la Figura 1, el elemento <table> tiene solamente un hijo mientras que <tbody> tiene dos.  A su vez, cada hijo de <tbody> tiene dos hijos. Finalmente, cada elemento <td> tiene sólo uno, el nodo de texto.

+ +

Ejemplo: Configuración del color de fondo de un párrafo

+ +

getElementsByTagName(tagNameValue) es un método disponible en cualquier elemento DOM o el elemento raíz del documento. Cuando se le llama, devolverá una matriz con todos los descendientes de elementos que coincidan con el nombre de la etiqueta. El primer elemento de la lista se encuentra en la posición [0] de la matriz.

+ +

HTML Content

+ +
<body>
+  <input type="button" value="Set paragraph background color" onclick="set_background()">
+  <p>hi</p>
+  <p>hello</p>
+</body>
+ +

JavaScript Content

+ +
function set_background() {
+  // get a list of all the body elements (there will only be one),
+  // and then select the zeroth (or first) such element
+  myBody = document.getElementsByTagName("body")[0];
+
+  // now, get all the p elements that are descendants of the body
+  myBodyElements = myBody.getElementsByTagName("p");
+
+  // get the second item of the list of p elements
+  myP = myBodyElements[1];
+  myP.style.background = "rgb(255,0,0)";
+}
+ +

{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}

+ +

En este ejemplo, establecemos la variable myP en el objeto DOM para el segundo elementop dentro del body:

+ +
    +
  1. Primero, obtendremos una lista de todos los elementos body mediante + 
    myBody = document.getElementsByTagName("body")[0]
    + Como en cualquier documento HTML sólo hay un elemento body válido, esta lista tendrá sólo un elemento, que recuperamos seleccionando el primer elemento de esa lista usando {{mediawiki.external(0)}}.
    2. +
  2. Luego, obtenemos todos los elementos p que son descendientes del body mediante + 
    myBodyElements = myBody.getElementsByTagName("p");
    +
    3. +
  3. Finalmente, obtenemos el segundo item de la lista de elementos p mediante + 
    myP = myBodyElements[1];
    +
    4. +
+ +

Image:sample2a2.jpg

+ +

Una vez que haya obtenido el objeto DOM para un elemento HTML, puede establecer sus propiedades. Por ejemplo, si desea establecer la propiedad estilo de color de fondo, agregue:

+ +
myP.style.background = "rgb(255,0,0)";
+// setting inline STYLE attribute
+
+ +

Creating TextNodes with document.createTextNode("..")

+ +

Use the document object to invoke the createTextNode method and create your text node. You just need to pass the text content. The return value is an object that represents the text node.

+ +
myTextNode = document.createTextNode("world");
+
+ +

This means that you have created a node of the type TEXT_NODE (a piece of text) whose text data is "world", and myTextNode is your reference to this node object. To insert this text into your HTML page, you need to make this text node a child of some other node element.

+ +

Inserting Elements with appendChild(..)

+ +

So, by calling myP.appendChild({{mediawiki.external('node_element')}}), you are making the element a new child of the second <p> element.

+ +
myP.appendChild(myTextNode);
+
+ +

After testing this sample, note that the words hello and world are together: helloworld. So visually, when you see the HTML page it seems like the two text nodes hello and world are a single node, but remember that in the document model, there are two nodes. The second node is a new node of type TEXT_NODE, and it is the second child of the second <p> tag. The following figure shows the recently created Text Node object inside the document tree.

+ +

Image:sample2b2.jpg

+ +
createTextNode and appendChild is a simple way to include white space between the words hello and world. Another important note is that the appendChild method will append the child after the last child, just like the word world has been added after the word hello. So if you want to append a Text Node between hello and world you will need to use insertBefore instead of appendChild.
+ +

Creating New Elements with the document object and the createElement(..) method

+ +

You can create new HTML elements or any other element you want with createElement. For example, if you want to create a new <p> element as a child of the <body> element, you can use the myBody in the previous example and append a new element node. To create a node simply call document.createElement("tagname"). For example:

+ +
myNewPTAGnode = document.createElement("p");
+myBody.appendChild(myNewPTAGnode);
+
+ +

Image:sample2c.jpg

+ +

Removing nodes with the removeChild(..) method

+ +

Nodes can be removed. The following code removes text node myTextNode (containing the word "world") from the second <p> element, myP.

+ +
myP.removeChild(myTextNode);
+
+ +

Text node myTextNode (containing the word "world") still exists. The following code attaches myTextNode to the recently created <p> element, myNewPTAGnode.

+ +
myNewPTAGnode.appendChild(myTextNode);
+
+ +

The final state for the modified object tree looks like this:

+ +

Image:sample2d.jpg

+ +

Creating a table dynamically (back to Sample1.html)

+ +

For the rest of this article we will continue working with sample1.html. The following figure shows the table object tree structure for the table created in the sample.

+ +

Reviewing the HTML Table structure

+ +

Image:sample1-tabledom.jpg

+ +

Creating element nodes and inserting them into the document tree

+ +

The basic steps to create the table in sample1.html are:

+ +
    +
  • Get the body object (first item of the document object).
    • +
  • Create all the elements.
    • +
  • Finally, append each child according to the table structure (as in the above figure). The following source code is a commented version for the sample1.html.
    • +
+ +
At the end of the start function there is a new line of code. The table's border property was set using another DOM method, setAttribute. setAttribute has two arguments: the attribute name and the attribute value. You can set any attribute of any element using the setAttribute method.
+ +
<head>
+<title>Sample code - Traversing an HTML Table with JavaScript and DOM Interfaces</title>
+<script>
+    function start() {
+        // get the reference for the body
+        var mybody = document.getElementsByTagName("body")[0];
+
+        // creates <table> and <tbody> elements
+        mytable     = document.createElement("table");
+        mytablebody = document.createElement("tbody");
+
+        // creating all cells
+        for(var j = 0; j < 2; j++) {
+            // creates a <tr> element
+            mycurrent_row = document.createElement("tr");
+
+            for(var i = 0; i < 2; i++) {
+                // creates a <td> element
+                mycurrent_cell = document.createElement("td");
+                // creates a Text Node
+                currenttext = document.createTextNode("cell is row " + j + ", column " + i);
+                // appends the Text Node we created into the cell <td>
+                mycurrent_cell.appendChild(currenttext);
+                // appends the cell <td> into the row <tr>
+                mycurrent_row.appendChild(mycurrent_cell);
+            }
+            // appends the row <tr> into <tbody>
+            mytablebody.appendChild(mycurrent_row);
+        }
+
+        // appends <tbody> into <table>
+        mytable.appendChild(mytablebody);
+        // appends <table> into <body>
+        mybody.appendChild(mytable);
+        // sets the border attribute of mytable to 2;
+        mytable.setAttribute("border","2");
+    }
+</script>
+</head>
+<body onload="start()">
+</body>
+</html>
+ +

Manipulating the table with DOM and CSS

+ +

Getting a text node from the table

+ +

This example introduces two new DOM attributes. First it uses the childNodes attribute to get the list of child nodes of mycel. The childNodes list includes all child nodes, regardless of what their name or type is. Like getElementsByTagName(), it returns a list of nodes. The differences are that (a) getElementsByTagName() only returns elements of the specified tag name; and (b) getElementsByTagName() returns descendants at any level, not just immediate children. Once you have the returned list, use {{mediawiki.external('x')}} method to retrieve the desired child item. This example stores in myceltext the text node of the second cell in the second row of the table. Then, to display the results in this example, it creates a new text node whose content is the data of myceltext and appends it as a child of the <body> element.

+ +
If your object is a text node, you can use the data attribute and retrieve the text content of the node.
+ +
mybody      = document.getElementsByTagName("body")[0];
+mytable     = mybody.getElementsByTagName("table")[0];
+mytablebody = mytable.getElementsByTagName("tbody")[0];
+myrow       = mytablebody.getElementsByTagName("tr")[1];
+mycel       = myrow.getElementsByTagName("td")[1];
+
+// first item element of the childNodes list of mycel
+myceltext=mycel.childNodes[0];
+
+// content of currenttext is the data content of myceltext
+currenttext=document.createTextNode(myceltext.data);
+mybody.appendChild(currenttext);
+
+ +

Getting an attribute value

+ +

At the end of sample1 there is a call to setAttribute on the mytable object. This call was used to set the border property of the table. To retrieve the value of the attribute, use the getAttribute method:

+ +
mytable.getAttribute("border");
+
+ +

Hiding a column by changing style properties

+ +

Once you have the object in your JavaScript variable, you can set style properties directly. The following code is a modified version of sample1.html in which each cell of the second column is hidden and each cell of the first column is changed to have a red background. Note that the style property was set directly.

+ +
<html>
+<body onload="start()">
+</body>
+<script>
+    function start() {
+       var mybody =document.getElementsByTagName("body")[0];
+       mytable     = document.createElement("table");
+       mytablebody = document.createElement("tbody");
+
+       for(var j = 0; j < 2; j++) {
+           mycurrent_row=document.createElement("tr");
+           for(var i = 0; i < 2; i++) {
+               mycurrent_cell = document.createElement("td");
+               currenttext = document.createTextNode("cell is:" + i + j);
+               mycurrent_cell.appendChild(currenttext);
+               mycurrent_row.appendChild(mycurrent_cell);
+               // set the cell background color
+               // if the column is 0. If the column is 1 hide the cel
+               if (i == 0) {
+                   mycurrent_cell.style.background = "rgb(255,0,0)";
+               } else {
+                   mycurrent_cell.style.display = "none";
+               }
+           }
+           mytablebody.appendChild(mycurrent_row);
+       }
+       mytable.appendChild(mytablebody);
+       mybody.appendChild(mytable);
+    }
+</script>
+</html>
+
diff --git a/files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html b/files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html new file mode 100644 index 0000000000..6c5f14c025 --- /dev/null +++ b/files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html @@ -0,0 +1,93 @@ +--- +title: Using the W3C DOM Level 1 Core +slug: Using_the_W3C_DOM_Level_1_Core +tags: + - DOM + - NeedsTranslation + - NeedsUpdate + - TopicStub +translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core +--- +

The W3C's DOM Level 1 Core is a powerful object model for changing the content tree of documents. It is supported in all major browsers including Mozilla Firefox and Microsoft Internet Explorer. It is a powerful base for scripting on the web.

+ +

What is a content tree?

+ +

Many HTML authors may think of HTML as something flat -- a bunch of text with tags in the middle. However, it is something much more than that. Any HTML document (or for that matter any SGML document or XML document) is a tree structure. For example, the following document and tree structure are similar (although not identical -- see the notes on whitespace in the DOM):

+ +
<html>
+<head>
+  <title>My Document</title>
+</head>
+<body>
+  <h1>Header</h1>
+  <p>Paragraph</p>
+</body>
+</html>
+
+ +

image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg

+ +

When Mozilla parses a document, it builds a content tree and then uses it to display the document.

+ +

The terms used to describe trees show up often in the DOM Level 1 Core. Each of the boxes I drew in the tree above is a node in the tree. The line above a node expresses a parent-child relationship: the node on top is the parent, and the node on the bottom is the child. Two children of the same parent are therefore siblings. Similarly, one can refer to ancestors and descendants. (Cousins are too messy, though.)

+ +

What does the DOM Level 1 Core let me do?

+ +

The W3C DOM Level 1 allows you to change the content tree any way you want. It is powerful enough to build any HTML document from scratch. It allows authors to change anything in the document from script, at any time. The easiest way for web page authors to change the DOM dynamically is using JavaScript. In JavaScript, the document is accessible the same way it has been in older browsers: from the document property of the global object. This document object implements the Document interface from the W3C's DOM Level 1 spec.

+ +

A simple example

+ +

Suppose the author wants to take the above document and change the contents of the header, and write two paragraphs instead of one. The following script would do the job:

+ +

HTML Content

+ +
<body>
+<input type="button" value="Change this document." onclick="change()">
+<h2>Header</h2>
+<p>Paragraph</p>
+</body>
+
+ +

JavaScript Content

+ +
  function change() {
+    // document.getElementsByTagName("H2") returns a NodeList of the <h2>
+    // elements in the document, and the first is number 0:
+
+    var header = document.getElementsByTagName("H2").item(0);
+    // the firstChild of the header is a Text node:
+    header.firstChild.data = "A dynamic document";
+    // now the header is "A dynamic document".
+
+    var para = document.getElementsByTagName("P").item(0);
+    para.firstChild.data = "This is the first paragraph.";
+
+    // create a new Text node for the second paragraph
+    var newText = document.createTextNode("This is the second paragraph.");
+    // create a new Element to be the second paragraph
+    var newElement = document.createElement("P");
+    // put the text in the paragraph
+    newElement.appendChild(newText);
+    // and put the paragraph on the end of the document by appending it to
+    // the BODY (which is the parent of para)
+    para.parentNode.appendChild(newElement);
+  }
+ +

{{ EmbedLiveSample('A_simple_example', 800, 300) }}

+ +

You can see this script as a complete example.

+ +

How can I learn more?

+ +

Now that you are familiar with the basic concepts of the DOM, there is a document explaining the DOM Level 1 fundamental methods. It is the follow-up to this document.

+ +

See also the DOM Level 1 Core specification from the W3C. It's a reasonably clear spec, although it is formal. The main thing that's useful to authors is the description of the different DOM objects and all their properties and methods. Also see our other DOM documentation.

+ +
+

Original Document Information

+ +
    +
  • Author(s): L. David Baron <dbaron at dbaron dot org>
    • +
  • Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a Creative Commons license
    • +
+
diff --git a/files/es/web/api/document_object_model/whitespace/index.html b/files/es/web/api/document_object_model/whitespace/index.html new file mode 100644 index 0000000000..a943896180 --- /dev/null +++ b/files/es/web/api/document_object_model/whitespace/index.html @@ -0,0 +1,476 @@ +--- +title: 'Cómo manejan el espacio en blanco HTML, CSS y el DOM' +slug: Referencia_DOM_de_Gecko/Cómo_espacioenblanco +tags: + - CSS + - DOM + - HTML + - JavaScript + - espacioenblanco + - whitespace +translation_of: Web/API/Document_Object_Model/Whitespace +--- +
{{APIRef("DOM")}}
+ +

La presencia de espacios en blanco en el DOM puede causar problemas de diseño y dificultar la manipulación del árbol de contenido de formas inesperadas, dependiendo de dónde se encuentra. Este artículo explora cuándo pueden surgir dificultades y analiza qué se puede hacer para mitigar los problemas resultantes.

+ +

¿Qué es el espacio en blanco?

+ +

El espacio en blanco es cualquier cadena de texto compuesta solo por espacios, tabulaciones o saltos de línea (para ser precisos, secuencias CRLF, retornos de carro o avances de línea). Estos caracteres te permiten formatear tu código de una manera que lo hará fácilmente legible por ti y otras personas. De hecho, gran parte de nuestro código fuente está lleno de estos caracteres de espacio en blanco, y solo tendemos a deshacernos de ellos en un paso de compilación de producción para reducir el tamaño de descarga del código.

+ +

¿HTML ignora en gran medida los espacios en blanco?

+ +

En el caso de HTML, los espacios en blanco se ignoran en gran medida: los espacios en blanco entre palabras se tratan como un solo carácter y los espacios en blanco al principio y al final de los elementos y los elementos externos se ignoran. Tomemos el siguiente ejemplo minimalista:

+ + + +
<!DOCTYPE html>
+
+    <h1>       ¡Hola      mundo!     </h1>
+ +

{{EmbedLiveSample('HTML_largely_ignores_whitespace')}}

+ +

Este código fuente contiene un par de avances de línea después del DOCTYPE y un montón de caracteres de espacio antes, después y dentro del elemento <h1>, pero al navegador no parece importarle en absoluto y solo muestra las palabras "¡Hola mundo!" como si estos caracteres no existieran en absoluto:

+ +

Esto es para que los espacios en blanco no afecten el diseño de tu página. Crear espacio alrededor y dentro de los elementos es el trabajo de CSS.

+ +

¿Qué sucede con los espacios en blanco?

+ +

Sin embargo, no solo desaparecen.

+ +

Cualquier carácter de espacio en blanco que esté fuera de los elementos HTML del documento original se representan en el DOM. Esto es necesario internamente para que el editor pueda preservar el formato de los documentos. Esto significa que:

+ +
    +
  • Habrá algunos nodos de texto que contienen solo espacios en blanco, y
    • +
  • Algunos nodos de texto tendrán espacios en blanco al principio o al final.
    • +
+ +

Tomemos el siguiente documento, por ejemplo:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Mi Documento</title>
+</head>
+<body>
+  <h1>Encabezado</h1>
+  <p>
+    Párrafo
+  </p>
+</body>
+</html>
+
+ +

El árbol del DOM para esto se ve así:

+ +

árbol de dom equivalente al ejemplo de HTML anterior

+ +

Conservar caracteres de espacio en blanco en el DOM es útil de muchas maneras, pero hay ciertos lugares donde esto hace que ciertos diseños sean más difíciles de implementar y causa problemas a los desarrolladores que quieren iterar a través de los nodos del DOM. Veremos estas y algunas soluciones más adelante.

+ +

¿CSS cómo procesa los espacios en blanco?

+ +

La mayoría de los espacios en blanco se ignoran, no todos. En el ejemplo anterior, uno de los espacios entre "!Hola" y "mundo!" todavía existe cuando la página se representa en un navegador. Hay reglas en el motor del navegador que deciden qué caracteres de espacio en blanco son útiles y cuáles no; estos se especifican al menos en parte en el Módulo de texto CSS Nivel 3, y especialmente las partes sobre la propiedad white-space en CSS y detalles de procesamiento del espacio en blanco, pero también ofrecemos una explicación más sencilla a continuación.

+ +

Tomemos otro ejemplo realmente simple. Para hacerlo más fácil, ilustramos todos los espacios con ◦, todas las tabulaciones con ⇥ y todos los saltos de línea con ⏎:

+ +

Este ejemplo:

+ +
<h1>◦◦◦¡Hola◦⏎
+⇥⇥⇥⇥<span>◦mundo!</span>⇥◦◦</h1>
+ +

se representa en el navegador así:

+ + + +

{{EmbedLiveSample('Hidden_example')}}

+ +

El elemento <h1> contiene solo elementos en línea. De hecho contiene:

+ +
    +
  • Un nodo de texto (que consta de algunos espacios, la palabra "¡Hola" y algunas tabulaciones).
    • +
  • Un elemento en línea (el <span>, que contiene un espacio, y la palabra "mundo!").
    • +
  • Otro nodo de texto (que consta solo de tabulaciones y espacios).
    • +
+ +

Debido a esto, establece lo que se llama un {{cssxref("Inline_formatting_context", "contexto de formato en línea")}}. Este es uno de los posibles contextos de representación de diseño con los que funcionan los motores del navegador.

+ +

Dentro de este contexto, el procesamiento de caracteres de espacio en blanco se puede resumir de la siguiente manera:

+ +
    +
  1. +

    Primero, todos los espacios y tabulaciones inmediatamente antes y después de un salto de línea se ignoran, por lo que, si tomamos nuestro marcado de ejemplo anterior y aplicamos esta primera regla, obtenemos:

    + + 
    <h1>◦◦◦¡Hola⏎
+<span>◦mundo!</span>⇥◦◦</h1>
    +
    2. +
  2. +

    A continuación, todos los caracteres de tabulación se tratan como caracteres de espacio, por lo que el ejemplo se convierte en:

    + + 
    <h1>◦◦◦¡Hola⏎
+<span>◦mundo!</span>◦◦◦</h1>
    +
    3. +
  3. +

    A continuación, los saltos de línea se convierten en espacios:

    + + 
    <h1>◦◦◦¡Hola◦<span>◦mundo!</span>◦◦◦</h1>
    +
    4. +
  4. +

    Después de eso, cualquier espacio inmediatamente después de otro espacio (incluso a través de dos elementos en línea separados) se ignora, por lo que terminamos con:

    + + 
    <h1>◦¡Hola◦<span>mundo!</span>◦</h1>
    +
    5. +
  5. +

    Y finalmente, las secuencias de espacios al principio y al final de una línea se eliminan, por lo que eventualmente obtenemos esto:

    + + 
    <h1>¡Hola◦<span>mundo!</span></h1>
    +
    6. +
+ +

Es por eso que las personas que visitan la página web simplemente verán la frase "¡Hola mundo!" muy bien escrita en la parte superior de la página, en lugar de un "!Hola" con una sangría extraña, seguido de un "mundo!" en la línea debajo de esa.

+ +
+

Nota: Firefox DevTools ha admitido el resaltado de nodos de texto desde la versión 52, lo que facilita ver exactamente qué contenido hay dentro de los nodos de espacios en blanco. Los nodos de espacios en blanco puros están marcados con una etiqueta "whitespace".

+
+ +

Espacio en blanco en contextos de formato de bloque

+ +

Anteriormente, solo miramos elementos que contienen elementos en línea y contextos de formato en línea. Si un elemento contiene al menos un elemento de bloque, entonces establece lo que se llama un {{cssxref("Block_formatting_context", "contexto de formato de bloque")}}.

+ +

En este contexto, los espacios en blanco se tratan de manera muy diferente. Veamos un ejemplo para explicar cómo. Hemos marcado los espacios en blanco como antes.

+ +
<body>⏎
+⇥<div>◦◦¡Hola◦◦</div>⏎
+⏎
+◦◦◦<div>◦◦mundo!◦◦</div>◦◦⏎
+</body>
+ +

Tenemos 3 nodos de texto que contienen solo espacios en blanco, uno antes del primer <div>, uno entre los 2 <div>s y uno después del segundo <div>.

+ +

Esto se renderiza así:

+ + + +

{{EmbedLiveSample('Hidden_example_2')}}

+ +

Podemos resumir cómo se maneja el espacio en blanco aquí de la siguiente manera (puede haber algunas pequeñas diferencias en el comportamiento exacto entre los navegadores, pero básicamente, esto funciona):

+ +
    +
  1. +

    Debido a que estamos dentro de un contexto de formato de bloque, todo debe ser un bloque, por lo que nuestros 3 nodos de texto también se convierten en bloques, al igual que los 2 <div>s. Los bloques ocupan todo el ancho disponible y se apilan unos encima de los otros, lo cual significa que terminamos con un diseño compuesto por esta lista de bloques:

    + + 
    <block>⏎⇥</block>
+<block>◦◦¡Hola◦◦</block>
+<block>⏎◦◦◦</block>
+<block>◦◦mundo!◦◦</block>
+<block>◦◦⏎</block>
    +
    2. +
  2. +

    Esto luego se simplifica aún más aplicando las reglas de procesamiento para espacios en blanco en contextos de formato en línea a estos bloques:

    + + 
    <block></block>
+<block>¡Hola</block>
+<block></block>
+<block>mundo!</block>
+<block></block>
    +
    3. +
  3. +

    Los 3 bloques vacíos que tenemos ahora no van a ocupar ningún espacio en el diseño final, porque no contienen nada, así que terminaremos con solo 2 bloques ocupando espacio en la página. Las personas que visitan la página web ven las palabras "!Hola" y "mundo!" en 2 líneas separadas, ya que esperarías que se distribuyeran 2 <div>s. El motor del navegador esencialmente ha ignorado todos los espacios en blanco que se agregaron en el código fuente.

    +
    4. +
+ +

Espacios entre elementos en línea y bloques en línea

+ +

Ahora analicemos algunos problemas que pueden surgir debido a los espacios en blanco y qué se puede hacer al respecto. En primer lugar, veremos qué sucede con los espacios entre los elementos en línea y de bloque en línea. De hecho, ya vimos esto en nuestro primer ejemplo, cuando describimos cómo se procesan los espacios en blanco dentro de los contextos de formato en línea.

+ +

Dijimos que había reglas para ignorar la mayoría de los caracteres, pero que los caracteres que separan palabras permanecen. Cuando solo se trata de elementos a nivel de bloque como <p> que solo contienen elementos en línea como <em>, <strong>, <span>, etc., normalmente no te importa esto porque el espacio en blanco adicional que llega al diseño es útil para separar las palabras en la oración.

+ +

Sin embargo, se vuelve más interesante cuando comienzas a usar elementos inline-block. Estos elementos se comportan como elementos en línea en el exterior y como bloques en el interior, y a menudo se utilizan para mostrar piezas de la IU más complejas que solo texto, una al lado de la otra en la misma línea, por ejemplo, elementos del menú de navegación.

+ +

Debido a que son bloques, muchas personas esperan que se comporten como tales, pero en realidad no es así. Si hay espacios en blanco de formato entre elementos en línea adyacentes, esto dará como resultado un espacio en el diseño, al igual que los espacios entre palabras en el texto.

+ +

Considera este ejemplo (nuevamente, los espacios en blanco en el HTML están marcados para que sean visibles):

+ +
.people-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.people-list li {
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  background: #f06;
+  border: 1px solid;
+}
+
+ +
<ul class="people-list">⏎
+
+◦◦<li></li>⏎
+
+◦◦<li></li>⏎
+
+◦◦<li></li>⏎
+
+◦◦<li></li>⏎
+
+◦◦<li></li>⏎
+
+</ul>
+ +

Esto se traduce de la siguiente manera:

+ + + +

{{EmbedLiveSample('Hidden_example_3')}}

+ +

Probablemente no desees los espacios entre los bloques — dependiendo del caso de uso (¿esta es una lista de avatares o botones de navegación horizontales?), Probablemente desees que los lados del elemento estén alineados entre sí y poder controlar cualquier espacio tú mismo.

+ +

El Inspector HTML de Firefox DevTools resaltará los nodos de texto y también te mostrará exactamente qué áreas están ocupando los elementos, lo que es útil si te preguntas qué está causando el problema y tal vez estés pensando que tienes un margen adicional allí o algo así.

+ +

Espacio en blanco en Devtools

+ +

Hay algunas formas de solucionar este problema:

+ +

Utiliza Flexbox para crear la lista horizontal de elementos en lugar de probar una solución de inline-block. Esto se encarga de todo por ti y definitivamente es la solución preferida:

+ +
ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+ +

Si necesitas confiar en inline-block, puedes establecer el {{cssxref("font-size")}} de la lista a 0. Esto solo trabaja si tus bloques no tienen el tamaño ems (según el font-size, por lo que el tamaño del bloque también terminaría siendo 0). rems sería una buena opción aquí:

+ +
ul {
+  font-size: 0;
+  ...
+}
+
+li {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  ...
+}
+
+ +

O puedes establecer un margen negativo en los elementos de la lista:

+ +
li {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  margin-right: -0.25rem;
+}
+ +

También puedes resolver este problema colocando los elementos de tu lista en la misma línea en la fuente, lo cual hace que los nodos de espacios en blanco no se creen en primer lugar:

+ +
<li></li><li></li><li></li><li></li><li></li>
+ +

Recorrido del DOM y el espacio en blanco

+ +

Al intentar realizar una manipulación del DOM en JavaScript, también puedes encontrar problemas debido a los nodos de espacios en blanco. Por ejemplo, si tienes una referencia a un nodo padre y deseas afectar su primer elemento hijo usando Node.firstChild, si hay un nodo de espacio en blanco deshonesto justo después de la etiqueta de apertura principal, no obtendrás el resultado que esperabas. Se seleccionaría el nodo de texto en lugar del elemento al que deseas afectar.

+ +

Veamos otro ejemplo, si tienes un determinado subconjunto de elementos en los que deseas hacer algo en función de si están vacíos (no tienen nodos secundarios) o, no puedes verificar si cada elemento está vacío usando algo como Node.hasChildNodes(), pero nuevamente, si algún elemento destino contiene nodos de texto, podrías terminar con resultados falsos.

+ +

Funciones auxiliares de espacios en blanco

+ +

El siguiente código JavaScript define varias funciones que facilitan el manejo de espacios en blanco en el DOM:

+ +
/**
+ * En todo, el espacio en blanco se define como uno de los caracteres
+ *  "\t" TAB \u0009
+ *  "\n" LF  \u000A
+ *  "\r" CR  \u000D
+ *  " "  SPC \u0020
+ *
+ * Esto no usa la "\s" de Javascript porque eso incluye
+ * espacios irrompibles (y también algunos otros caracteres).
+ */
+
+
+/**
+ * Determina si el contenido de texto de un nodo es completamente de espacios en blanco.
+ *
+ * @param nod  Un nodo que implementa la interfaz | CharacterData | (es decir,
+ *             un nodo |Text|, |Comment| o |CDATASection|
+ * @return     True si todo el contenido de texto de |nod| es espacio en blanco,
+ *             de lo contrario false.
+ */
+function is_all_ws( nod )
+{
+  // Usa las características de String y RegExp de ECMA-262 Edición 3
+  return !(/[^\t\n\r ]/.test(nod.textContent));
+}
+
+
+/**
+ * Determina si un nodo debe ser ignorado por las funciones del iterador.
+ *
+ * @param nod  Un objeto implementando la interfaz |Node| de DOM1.
+ * @return     true si el nodo es:
+ *                1) Un nodo |Text| en que todo es espacio en blanco
+ *                2) Un nodo |Comment|
+ *             y de lo contrario false.
+ */
+
+function is_ignorable( nod )
+{
+  return ( nod.nodeType == 8) || // Un nodo comment
+         ( (nod.nodeType == 3) && is_all_ws(nod) ); // un nodo text, todo es eeb
+}
+
+/**
+ * Versión de |previousSibling| que omite los nodos que son completamente
+ * espacio en blanco o comentarios.  (Normalmente |previousSibling| es una propiedad
+ * de todos los nodos DOM que devuelve el nodo hermano, el nodo que es
+ * un hijo del mismo padre, que ocurre inmediatamente antes del
+ * nodo de referencia).
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El hermano anterior más cercano a |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function node_before( sib )
+{
+  while ((sib = sib.previousSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Versión de |nextSibling| que omite los nodos que son completamente
+ * espacio en blanco o comentarios.
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El hermano más cercano a |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function node_after( sib )
+{
+  while ((sib = sib.nextSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Versión de |lastChild| que omite los nodos que son completamente
+ * espacio en blanco o comentarios.  (Normalmente |lastChild| es una propiedad
+ * de todos los nodos del DOM que da el último de los nodos contenidos
+ * directamente en el nodo de referencia).
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El último hijo de |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function last_child( par )
+{
+  var res=par.lastChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.previousSibling;
+  }
+  return null;
+}
+
+/**
+ * Versión de |firstChild| que omite los nodos que son completamente
+ * espacios en blanco y comentarios.
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El primer hijo de |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function first_child( par )
+{
+  var res=par.firstChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.nextSibling;
+  }
+  return null;
+}
+
+/**
+ * Versión de |data| que no incluye espacios en blanco al principio
+ * y finaliza y normaliza todos los espacios en blanco a un solo espacio.  (Normalmente
+ * |data| es una propiedad de los nodos de texto que proporciona el texto del nodo).
+ *
+ * @param txt  El nodo de texto cuyos datos se deben devolver
+ * @return     Una cadena que proporciona el contenido del nodo de texto con
+ *             espacios en blanco colapsados.
+ */
+function data_of( txt )
+{
+  var data = txt.textContent;
+  // Usa las características de String y RegExp de ECMA-262 Edición 3
+  data = data.replace(/[\t\n\r ]+/g, " ");
+  if (data.charAt(0) == " ")
+    data = data.substring(1, data.length);
+  if (data.charAt(data.length - 1) == " ")
+    data = data.substring(0, data.length - 1);
+  return data;
+}
+
+ +

Ejemplo

+ +

El siguiente código demuestra el uso de las funciones anteriores. Itera sobre los hijos de un elemento (cuyos hijos son todos elementos) para encontrar aquel cuyo texto es "Este es el tercer párrafo", y luego cambia el atributo de clase y el contenido de ese párrafo.

+ +
var cur = first_child(document.getElementById("test"));
+while (cur)
+{
+  if (data_of(cur.firstChild) == "Este es el tercer párrafo.")
+  {
+    cur.className = "magic";
+    cur.firstChild.textContent = "Este es el párrafo mágico.";
+  }
+  cur = node_after(cur);
+}
+
diff --git a/files/es/web/api/documentorshadowroot/getselection/index.html b/files/es/web/api/documentorshadowroot/getselection/index.html new file mode 100644 index 0000000000..6c03b64dcf --- /dev/null +++ b/files/es/web/api/documentorshadowroot/getselection/index.html @@ -0,0 +1,13 @@ +--- +title: Document.getSelection() +slug: Web/API/Document/getSelection +tags: + - Referencia + - Selección + - metodo +translation_of: Web/API/DocumentOrShadowRoot/getSelection +translation_of_original: Web/API/Document/getSelection +--- +

{{APIRef("DOM")}}

+ +

Este método funciona exactamente igual que {{domxref("Window.getSelection()")}}; devuelve un objeto {{domxref("Selection")}} que representa el texto que se ha seleccionado en el documento.

diff --git a/files/es/web/api/documentorshadowroot/pointerlockelement/index.html b/files/es/web/api/documentorshadowroot/pointerlockelement/index.html new file mode 100644 index 0000000000..cc5d490e5c --- /dev/null +++ b/files/es/web/api/documentorshadowroot/pointerlockelement/index.html @@ -0,0 +1,105 @@ +--- +title: Document.pointerLockElement +slug: Web/API/Document/pointerLockElement +translation_of: Web/API/DocumentOrShadowRoot/pointerLockElement +--- +
{{APIRef("DOM")}}
+ +

La propiedad pointerLockElement conserva el elemento adquirido, para el evento del mouse, mientras el bloqueo se encuentre activo .  Es null si el bloqueo se encuentra en estado pendiente para bloqueo, o si el bloqueo se ha liberado, es decir ya no se encuentra en estado bloqueado, o si el elemento bloqueado se encuentra en otro documento.

+ +

Sintaxis

+ +
var elemento = document.pointerLockElement;
+
+ +

Valor retornado

+ +

Un {{domxref("Element")}} o null.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Bloquear puntero','l#extension-to-the-document-interface','Document')}}{{Spec2('Pointer lock')}}Extiende de la interfaz Document
+ +

Compatibilidad del Navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{ CompatVersionUnknown() }} {{property_prefix("webkit")}}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }} {{property_prefix("moz")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Soporte sin prefijar{{ CompatVersionUnknown() }}{{CompatUnknown}}{{CompatGeckoDesktop(50)}}   
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Véase también:

+ +
    +
  • {{ domxref("Document.exitPointerLock()") }}
    • +
  • {{ domxref("Element.requestPointerLock()") }}
    • +
  • Pointer Lock
    • +
diff --git a/files/es/web/api/documentorshadowroot/stylesheets/index.html b/files/es/web/api/documentorshadowroot/stylesheets/index.html new file mode 100644 index 0000000000..0458cb3fc9 --- /dev/null +++ b/files/es/web/api/documentorshadowroot/stylesheets/index.html @@ -0,0 +1,22 @@ +--- +title: Document.styleSheets +slug: Web/API/Document/styleSheets +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +translation_of_original: Web/API/Document/styleSheets +--- +

{{ ApiRef() }}

+

Resumen

+

Devuelve una lista de objetos de tipo stylesheet para las hojas de estilo que están específicamente enlazadas o contenidas en el documento.

+

Propiedades

+

styleSheetList.length - devuelve el número de objetos de tipo stylesheet contenidos en el objeto.

+

Sintaxis

+
styleSheetList = document.styleSheets
+
+

El objeto devuelto es del tipo StyleSheetList.

+

Es una colección ordenada de objetos de tipo stylesheet. styleSheetList.item(index) o simplemente styleSheetList{{ mediawiki.external(' + + index + ') }} devuelve un único objeto de tipo stylesheet con el índice especificado (el índice es de origen 0).

+

Especificación

+

DOM Level 2 Style: styleSheets

+

{{ languages( { "ja": "ja/DOM/document.styleSheets", "pl": "pl/DOM/document.styleSheets" } ) }}

diff --git a/files/es/web/api/domstring/binary/index.html b/files/es/web/api/domstring/binary/index.html new file mode 100644 index 0000000000..a52358f62c --- /dev/null +++ b/files/es/web/api/domstring/binary/index.html @@ -0,0 +1,31 @@ +--- +title: Cadenas binarias +slug: Web/API/DOMString/Cadenas_binarias +tags: + - Arreglos tipados JavaScript + - Cadena + - Cadena de caracteres + - DOM + - JavaScript + - Referencia + - String +translation_of: Web/API/DOMString/Binary +--- +

{{jsxref("String", "Cadenas JavaScript")}} son cadenas codificadas en UTF-16. Esto significa que cada unidad de código requiere dos bytes de memoria y puede representar 65535 puntos de código diferentes. Un subconjunto de estas cadenas está representado por cadenas UTF-16 que contienen solo caracteres ASCII (es decir, caracteres cuyo punto de código no excede 127). Por ejemplo, la cadena "¡Hola mundo!" pertenece al subconjunto ASCII, mientras que la cadena "ÀÈÌÒÙ" no. Una cadena binaria es un concepto similar al subconjunto ASCII, pero en lugar de limitar el rango a 127, permite hasta 255 puntos de código. Sin embargo, su propósito no es representar caracteres, sino datos binarios. El tamaño de los datos así representados es el doble de lo que sería en formato binario normal, sin embargo, esto no será visible para el usuario final, ya que la longitud de las cadenas de JavaScript se calcula usando dos bytes como unidad.

+ +

Las cadenas binarias no forman parte del diseño del lenguaje JavaScript. Sin embargo, al menos una función nativa requiere cadenas binarias como entrada, {{domxref("WindowBase64.btoa", "btoa()")}}: invocarla en una cadena que contiene puntos de código mayores de 255 causará un error Caracter fuera de rango.

+ +

La razón que llevó al uso de unidades de código UTF-16 como marcadores de posición para los números uint8 es que a medida que las aplicaciones web se vuelven cada vez más poderosas (agregando funciones como manipulación de audio y video, acceso a datos sin procesar usando WebSockets, y así sucesivamente) ha quedado claro que hay ocasiones en las que sería útil que el código JavaScript pudiera manipular rápida y fácilmente datos binarios sin procesar.

+ +

En el pasado, esto se tenía que simular tratando los datos sin procesar como string y utilizar el método charCodeAt() para leer los bytes del búfer de datos (es decir, usando cadenas binarias). Sin embargo, esto es lento y propenso a errores, debido a la necesidad de múltiples conversiones (especialmente si los datos binarios en realidad no son datos en formato de bytes, sino, por ejemplo, enteros de 32 bits o flotantes).

+ +

Los arreglos tipados en JavaScript proporcionan un mecanismo para acceder a datos binarios sin procesar mucho más eficientemente. La API de StringView cuyo constructor no es nativo está un nivel por encima de los arreglos tipados y proporciona una interfaz para cadenas similar a la de C.

+ +

Ve también

+ + diff --git a/files/es/web/api/domstring/cadenas_binarias/index.html b/files/es/web/api/domstring/cadenas_binarias/index.html deleted file mode 100644 index a52358f62c..0000000000 --- a/files/es/web/api/domstring/cadenas_binarias/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Cadenas binarias -slug: Web/API/DOMString/Cadenas_binarias -tags: - - Arreglos tipados JavaScript - - Cadena - - Cadena de caracteres - - DOM - - JavaScript - - Referencia - - String -translation_of: Web/API/DOMString/Binary ---- -

{{jsxref("String", "Cadenas JavaScript")}} son cadenas codificadas en UTF-16. Esto significa que cada unidad de código requiere dos bytes de memoria y puede representar 65535 puntos de código diferentes. Un subconjunto de estas cadenas está representado por cadenas UTF-16 que contienen solo caracteres ASCII (es decir, caracteres cuyo punto de código no excede 127). Por ejemplo, la cadena "¡Hola mundo!" pertenece al subconjunto ASCII, mientras que la cadena "ÀÈÌÒÙ" no. Una cadena binaria es un concepto similar al subconjunto ASCII, pero en lugar de limitar el rango a 127, permite hasta 255 puntos de código. Sin embargo, su propósito no es representar caracteres, sino datos binarios. El tamaño de los datos así representados es el doble de lo que sería en formato binario normal, sin embargo, esto no será visible para el usuario final, ya que la longitud de las cadenas de JavaScript se calcula usando dos bytes como unidad.

- -

Las cadenas binarias no forman parte del diseño del lenguaje JavaScript. Sin embargo, al menos una función nativa requiere cadenas binarias como entrada, {{domxref("WindowBase64.btoa", "btoa()")}}: invocarla en una cadena que contiene puntos de código mayores de 255 causará un error Caracter fuera de rango.

- -

La razón que llevó al uso de unidades de código UTF-16 como marcadores de posición para los números uint8 es que a medida que las aplicaciones web se vuelven cada vez más poderosas (agregando funciones como manipulación de audio y video, acceso a datos sin procesar usando WebSockets, y así sucesivamente) ha quedado claro que hay ocasiones en las que sería útil que el código JavaScript pudiera manipular rápida y fácilmente datos binarios sin procesar.

- -

En el pasado, esto se tenía que simular tratando los datos sin procesar como string y utilizar el método charCodeAt() para leer los bytes del búfer de datos (es decir, usando cadenas binarias). Sin embargo, esto es lento y propenso a errores, debido a la necesidad de múltiples conversiones (especialmente si los datos binarios en realidad no son datos en formato de bytes, sino, por ejemplo, enteros de 32 bits o flotantes).

- -

Los arreglos tipados en JavaScript proporcionan un mecanismo para acceder a datos binarios sin procesar mucho más eficientemente. La API de StringView cuyo constructor no es nativo está un nivel por encima de los arreglos tipados y proporciona una interfaz para cadenas similar a la de C.

- -

Ve también

- - diff --git a/files/es/web/api/element/accesskey/index.html b/files/es/web/api/element/accesskey/index.html deleted file mode 100644 index 7d73c395fc..0000000000 --- a/files/es/web/api/element/accesskey/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Element.accessKey -slug: Web/API/Element/accessKey -tags: - - API - - Propiedad - - necesidades de contenido -translation_of: Web/API/HTMLElement/accessKey -translation_of_original: Web/API/Element/accessKey ---- -
{{APIRef("DOM")}}
- -
 
- -

La propiedad Element.accessKey establece la pulsación de teclado mediante el cual un usuario puede presionar para saltar a este elemento.

- -
-

Nota: la propiedad Element.accessKey se usa raramente debido a sus múltiples conflictos con las asociaciones de teclas que ya están presentes  en los navegadores. Para evitar esto, los navegadores implementan el comportamiento tecla de acceso si se pulsan las claves con otras teclas "cualificadas" (como Alt + tecla de acceso).

-
- -

 

- -

 

diff --git a/files/es/web/api/element/blur_event/index.html b/files/es/web/api/element/blur_event/index.html new file mode 100644 index 0000000000..b54ad3e6a6 --- /dev/null +++ b/files/es/web/api/element/blur_event/index.html @@ -0,0 +1,156 @@ +--- +title: blur (evento) +slug: Web/Events/blur +tags: + - DOM +translation_of: Web/API/Element/blur_event +--- +

El evento blur es disparado cuando un elemento ha perdido su foco. La diferencia principal entre este evento y focusout es que sólo el último se propaga (bubbles).

+ +

Información General

+ +
+
Especificación
+
DOM L3
+
Interfaz
+
{{domxref("FocusEvent")}}
+
Burbujas
+
No
+
Cancelable
+
No
+
Objetivo
+
Element
+
Acción por defecto
+
Ninguna.
+
+ +

{{NoteStart}}El valor de  {{domxref("Document.activeElement")}} varía a traves de navegadores mientras este evento está siendo manejado ({{bug(452307)}}): IE10 lo agrega al elemento al cual el foco se movera, mientras Firefox y Chrome muy seguido lo agregan al cuerpo del documento.{{NoteEnd}}

+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipoDescripción
target {{readonlyInline}}{{domxref("EventTarget")}}Objetivo del evento (elemento DOM)
type {{readonlyInline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Si el elemento normalmente se propaga o no.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Si el evento es cancelable o no.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)null
+ +

Delegación de eventos

+ +

Hay dos maneras de implementar la delegación de eventos para este evento: usando el evento focusout en exploradores que lo soporten, o cambiando el parámetro "useCapture" de addEventListener a true:

+ +

Contenido HTML

+ +
<form id="form">
+  <input type="text" placeholder="text input">
+  <input type="password" placeholder="password">
+</form>
+ +

Contenido JavaScript

+ +
var form = document.getElementById("form");
+form.addEventListener("focus", function( event ) {
+  event.target.style.background = "pink";
+}, true);
+form.addEventListener("blur", function( event ) {
+  event.target.style.background = "";
+}, true);
+ +

{{EmbedLiveSample('Delegación_de_eventos')}}

+ +

Compatibilidad en navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]612.15.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.053{{CompatVersionUnknown}}{{CompatUnknown}}10.012.15.1
+
+ +

[1] Antes de Gecko 24 {{geckoRelease(24)}} la interfaz para este evento era {{domxref("Event")}}, no {{domxref("FocusEvent")}}. Vea ({{bug(855741)}}).

+ +

Eventos relacionados

+ +
    +
  • {{event("focus")}}
    • +
  • {{event("blur")}}
    • +
  • {{event("focusin")}}
    • +
  • {{event("focusout")}}
    • +
diff --git a/files/es/web/api/element/name/index.html b/files/es/web/api/element/name/index.html deleted file mode 100644 index c970ea8947..0000000000 --- a/files/es/web/api/element/name/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Element.name -slug: Web/API/Element/name -tags: - - API - - Compatibilidad de los navegadores - - DOM - - Elemento - - Propiedad - - Referencia - - Web - - actualizacion -translation_of: Web/API -translation_of_original: 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/web/api/element/ongotpointercapture/index.html b/files/es/web/api/element/ongotpointercapture/index.html deleted file mode 100644 index 3023c3758e..0000000000 --- a/files/es/web/api/element/ongotpointercapture/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Element.ongotpointercapture -slug: Web/API/Element/ongotpointercapture -tags: - - API - - Controlador - - DOM - - Elemento - - Eventos Puntero - - Propiedad - - Referencia -translation_of: Web/API/GlobalEventHandlers/ongotpointercapture -translation_of_original: Web/API/Element/ongotpointercapture ---- -

{{ ApiRef("DOM") }}

- -

ongotpointercapture es una propiedad {{domxref("EventHandler")}} de la interfaz {{domxref("Element")}}  que devuelve el controlador de eventos (función) para el evento tipo {{event("gotpointercapture")}}.

- -

Síntasix

- -
var gotCaptureHandler = target.ongotpointercpature;
-
- -

Valor de Retorno

- -
-
gotCaptureHandler
-
El controlador de eventos  gotpointercapture para el elemento target.
-
- -

Ejemplo

- -
<html>
-<script>
-function overHandler(ev) {
- // Determine the target event's gotpointercapture handler
- var gotCaptureHandler = ev.target.ongotpointercapture;
-}
-function init() {
- var el=document.getElementById("target");
- el.onpointerover = overHandler;
-}
-</script>
-<body onload="init();">
-<div id="target"> Touch me ... </div>
-</body>
-</html>
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Pointer Events 2','#widl-Element-ongotpointercapture', 'ongotpointercapture')}}{{Spec2('Pointer Events 2')}}Versión no estable.
{{SpecName('Pointer Events', '#widl-Element-ongotpointercapture', 'ongotpointercapture')}}{{Spec2('Pointer Events')}}Definición inicial.
- -

Compatibilidad en los Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatNo}}{{CompatVersionUnknown}} [1]{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
FunciónAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
-
- -

[1] Implementación retirada. Ver {{Bug("1166347")}}.

- -

Ver también

- -
    -
  • {{ event("gotpointercapture") }}
    • -
diff --git a/files/es/web/api/element/onlostpointercapture/index.html b/files/es/web/api/element/onlostpointercapture/index.html deleted file mode 100644 index 9a07506d45..0000000000 --- a/files/es/web/api/element/onlostpointercapture/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Element.onlostpointercapture -slug: Web/API/Element/onlostpointercapture -tags: - - API - - Controlador de Eventos - - DOM - - Eventos Puntero - - Propiedad - - Referencia -translation_of: Web/API/GlobalEventHandlers/onlostpointercapture -translation_of_original: Web/API/Element/onlostpointercapture ---- -

{{ ApiRef("DOM") }}

- -

onlostpointercapture es una propiedad {{domxref("EventHandler")}} de la interfaz {{domxref("Element")}}  que devuelve el controlador de eventos (función) para el evento tipo {{event("lostpointercapture")}} .

- -

Síntasix

- -
var lostCaptureHandler = target.onlostpointercpature;
-
- -

Valor de Retorno

- -
-
lostCaptureHandler
-
El controlador de eventos  lostpointercapture para el elemento target.
-
- -

Ejemplo

- -
<html>
-<script>
-function overHandler(ev) {
- // Determine the target event's lostpointercapture handler
- var lostCaptureHandler = ev.target.onlostpointercapture;
-}
-function init() {
- var el=document.getElementById("target");
- el.onpointerover = overHandler;
-}
-</script>
-<body onload="init();">
-<div id="target"> Touch me ... </div>
-</body>
-</html>
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Pointer Events 2','#widl-Element-onlostpointercapture', 'onlostpointercapture')}}{{Spec2('Pointer Events 2')}}Versión no estable.
{{SpecName('Pointer Events', '#widl-Element-onlostpointercapture', 'onlostpointercapture')}}{{Spec2('Pointer Events')}}Definición inicial.
- -

Compatibilidad en los Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatNo}}{{CompatVersionUnknown}} [1]{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
FunciónAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
-
- -

[1] Implementación retirada. Ver {{Bug("1166347")}}.

- -

Ver también

- -
    -
  • {{ event("lostpointercapture") }}
    • -
diff --git a/files/es/web/api/element/onwheel/index.html b/files/es/web/api/element/onwheel/index.html deleted file mode 100644 index b8f829969b..0000000000 --- a/files/es/web/api/element/onwheel/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Element.onwheel -slug: Web/API/Element/onwheel -tags: - - API - - DOM - - Gecko - - Propiedad - - Referencia -translation_of: Web/API/GlobalEventHandlers/onwheel ---- -

{{ ApiRef("DOM") }}

- -

{{ non-standard_header() }}

- -

Sumario

- -

La propiedad  onwheel devuelve el código del controlador de eventos onwheel en el elemento actual.

- -

Syntax

- -
element.onwheel = event handling code
-
- -

Notas

- -

El evento wheel se genera cuando el usuario desplaza el contenido de un elemento.

- -

Ver también

- -

Bug 18542 – el atributo onmousewheel  debe ser reemplazado con onwheel

diff --git a/files/es/web/api/elementcssinlinestyle/style/index.html b/files/es/web/api/elementcssinlinestyle/style/index.html new file mode 100644 index 0000000000..62c8903b72 --- /dev/null +++ b/files/es/web/api/elementcssinlinestyle/style/index.html @@ -0,0 +1,52 @@ +--- +title: Element.style +slug: Web/API/HTMLElement/style +translation_of: 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/web/api/elementoshtmlparavideo/index.html b/files/es/web/api/elementoshtmlparavideo/index.html deleted file mode 100644 index 4b36d9cba2..0000000000 --- a/files/es/web/api/elementoshtmlparavideo/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: Elementos HTML para Video -slug: Web/API/ElementosHTMLparaVideo -translation_of: Web/API/HTMLVideoElement ---- -
-
{{APIRef("HTML DOM")}}
-
- -

El interfaz de HTMLVideoElement provee propiedades especiales y metodos para manipular objectos de videos. Tambien, este interfaz hereda propiedades y métodos de {{domxref("HTMLMediaElement")}} y {{domxref("HTMLElement")}}.

- -

La lista de supported media formats (formatos de medios compatibles) varía de un navegador a otro. Debe proveer su video en un formato sencillo que sea compatible con todos los navegadores o proveer varias fuentes de videos in varios formatos, para que así todo navegador que necesite este cubierto.

- -

{{InheritanceDiagram(600, 140)}}

- -

Propiedades

- -

Hereda las propiedades de los interfaces anteriores, {{domxref("HTMLMediaElement")}}, y {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLVideoElement.height")}}
-
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("height", "video")}}, el cual especifica la altura del area mostrada, en pixeles CSS.
-
{{domxref("HTMLVideoElement.poster")}}
-
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("poster", "video")}}, el cual especifica que imagen sera mostrada en la ausencia de data de video.
-
{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}
-
Devuelve un unsigned long que contiene la altura intrinsica del recurso en pixeles CSS, tomando en consideracion las dimensiones, aspecto proporcional, apertura limpia, resolucion, etc., ya definidas por el formato usado por el recurso.  Si el estado disponible del elemento es HAVE_NOTHING, su valor es 0.
-
{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}
-
Devuelve un unsigned long que contiene la anchura intrinsica del recurso en pixeles CSS, tomando en consideracion las dimensiones, aspecto proporcional, apertura limpia, resolucion, etc., ya definidas por el formato usado por el recurso.  Si el estado disponible del elemento es HAVE_NOTHING, su valor es 0.
-
{{domxref("HTMLVideoElement.width")}}
-
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("width", "video")}}, el cual especifica la anchura del area mostrada, en pixeles CSS.
-
- -

Propiedades especificas para Gecko

- -
-
{{domxref("HTMLVideoElement.mozParsedFrames")}} {{readonlyInline}}{{non-standard_inline}}
-
Devuelve un unsigned long con el conteo de marcos de video que han sido analizados del recurso de multimedia.
-
{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{readonlyInline}}{{non-standard_inline}}
-
Devuelve un unsigned long con el conteo de marcos de video que han sido decifrados como imágines.
-
{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{readonlyInline}}{{non-standard_inline}}
-
Devuelve un unsigned long con el conteo de marcos decodificados que han sido  presentados a la canalización de render para pintar.
-
{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{readonlyInline}}{{non-standard_inline}}
-
Devuelve un unsigned long con el conteo de marcos presentados que han sido pintados en la pantalla.
-
{{domxref("HTMLVideoElement.mozFrameDelay")}} {{readonlyInline}}{{non-standard_inline}}
-
Devuelve un double con el tiempo, en segundos, que el último marco de video fue pintado por retrazo.
-
{{domxref("HTMLVideoElement.mozHasAudio")}} {{readonlyInline}}{{non-standard_inline}}
-
Devuelve un {{domxref("Boolean")}} indicando si existe algún audio asociado con el video.
-
- -

Métodos

- -

Hereda los métodos anteriores de {{domxref("HTMLMediaElement")}} y {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}
-
Devuelve un {{domxref("VideoPlaybackQuality")}} para objetos que contienen las medidas de reproducciones actuales.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacionEstadoComentario
{{SpecName('Media Source Extensions', '#idl-def-HTMLVideoElement', 'Extensions to HTMLVideoElement')}}{{Spec2("Media Source Extensions")}}Anadio el metodo getVideoPlaybackQuality() .
{{SpecName('HTML WHATWG', "the-video-element.html#the-video-element", "HTMLAreaElement")}}{{Spec2('HTML WHATWG')}}Sin cambios del {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-video-element", "HTMLAreaElement")}}{{Spec2('HTML5 W3C')}}Definicion incial.
- -

Compatibilidad con Navegador

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracteristicasChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Apoyo basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}9.010.50{{CompatVersionUnknown}}
mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("5.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozHasAudio {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{ CompatGeckoDesktop("15.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
getVideoPlaybackQuality(){{experimental_inline}}{{CompatUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("25.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticasAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Apoyo básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("5.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozHasAudio {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
getVideoPlaybackQuality(){{experimental_inline}}{{CompatUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("25.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Gecko implementa esto detras de la preferencia media.mediasource.enabled, predispuesto a false.

- -

Lea Tambien

- - diff --git a/files/es/web/api/event/createevent/index.html b/files/es/web/api/event/createevent/index.html deleted file mode 100644 index 7b273c6e33..0000000000 --- a/files/es/web/api/event/createevent/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Event.createEvent() -slug: Web/API/Event/createEvent -tags: - - API - - DOM - - Evento - - metodo -translation_of: Web/API/Document/createEvent -translation_of_original: Web/API/Event/createEvent ---- -

{{APIRef("DOM")}}

- -

Crea un nuevo evento, que debe ser inicializado llamando a su método init().

- -

Sintaxis

- -
document.createEvent(tipo);
- -
-
tipo
-
Una string indicando el tipo de evento a crear.
-
- -

Este método devuelve un nuevo objeto {{ domxref("Event") }} del DOM del tipo indicado, que debe ser inicializado antes de su uso.

- -

Ejemplo

- -
var nuevoEvento = document.createEvent("UIEvents");
- -

Especificación

- - diff --git a/files/es/web/api/fetch_api/basic_concepts/index.html b/files/es/web/api/fetch_api/basic_concepts/index.html new file mode 100644 index 0000000000..8c02021de6 --- /dev/null +++ b/files/es/web/api/fetch_api/basic_concepts/index.html @@ -0,0 +1,73 @@ +--- +title: Conceptos básicos de Fetch +slug: Web/API/Fetch_API/Conceptos_basicos +tags: + - API + - API Fetch + - Fetch + - conceptos + - guard + - request +translation_of: Web/API/Fetch_API/Basic_concepts +--- +

{{DefaultAPISidebar("Fetch API")}}{{draft}}

+ +
+

La API Fetch proporciona una interfaz para obtener recursos (incluso a traves de la red). Parecera familiar a quien sea que haya usado {{domxref("XMLHttpRequest")}}, pero proporciona un conjunto de características más potentes y flexibles. Este artículo explica algunos de los conceptos básicos de la API Fetch.

+
+ +
+

Este artículo será añadido en un futuro. Si encuenta un concepto de Fetch que siente necesita una mejor explicación, hagalo saber a alguien en el foro de discusión de MDN, o Mozilla IRC (#mdn room.)

+
+ +

En pocas palabras

+ +

En el corazón de Fetch estan las abstracciones de interfaz de cargas de HTTP {{domxref("Request")}}s, {{domxref("Response")}}s, {{domxref("Headers")}}, y {{domxref("Body")}}, junto a un método {{domxref("GlobalFetch.fetch","global fetch")}} para inicializar peticiones de recurso asíncronos. Porque los prinipales componentes de HTTP son abstraídos como objetos Javascript, es sencillo para otras APIs el hacer uso de dicha funcionalidad.

+ +

Service Workers es un ejemplo de una API que hace un fuerte uso de Fetch.

+ +

Fetch toma la naturaleza asíncrona de dichas peticiones un paso adelante. La API esta completamente basada en {{jsxref("Promise")}}.

+ +

Guard

+ +

Guard es una característica de objetos {{domxref("Headers")}}, con los valores posibles immutable, request, request-no-cors, response, o none, dependiendo de donde el encabezado es usado.

+ +

Cuando un nuevo objeto {{domxref("Headers")}} es creado usando el {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}}, su guarda (guard) se establece a none (por defecto). Cuando un objeto {{domxref("Request")}} o {{domxref("Response")}} es creado, tiene un objeto  {{domxref("Headers")}} asociado cuyo guarda (guard) se establece como se resume a continuación:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
nuevo tipo de objetocreando el constructorconfiguraciones de guarda (guard) del objeto {{domxref("Headers")}} asociado
{{domxref("Request")}}{{domxref("Request.Request","Request()")}}request
{{domxref("Request.Request","Request()")}} con {{domxref("Request.mode","mode")}} de no-corsrequest-no-cors
{{domxref("Response")}}{{domxref("Response.Response","Response()")}}response
Métodos {{domxref("Response.error","error()")}} o {{domxref("Response.redirect","redirect()")}}immutable
+ +

Un guarda (guard) de encabezado afecta los métodos {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, y {{domxref("Headers.append","append()")}} que cambían los contenidos del encabezado. Un TypeError es arrojado si se trata modificar un objeto {{domxref("Headers")}} cuyo guarda (guard) es immutable. Sin embargo, la operación funcionará si

+ +
    +
  • guard es request y el nombre del encabezado no es un {{Glossary("forbidden header name")}} .
    • +
  • guard es request-no-cors y el encabezado nombre/valor es un {{Glossary("simple header")}} .
    • +
  • guard es response y el nombre del encabezado no es {{Glossary("forbidden response header name")}}.
    • +
diff --git a/files/es/web/api/fetch_api/conceptos_basicos/index.html b/files/es/web/api/fetch_api/conceptos_basicos/index.html deleted file mode 100644 index 8c02021de6..0000000000 --- a/files/es/web/api/fetch_api/conceptos_basicos/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Conceptos básicos de Fetch -slug: Web/API/Fetch_API/Conceptos_basicos -tags: - - API - - API Fetch - - Fetch - - conceptos - - guard - - request -translation_of: Web/API/Fetch_API/Basic_concepts ---- -

{{DefaultAPISidebar("Fetch API")}}{{draft}}

- -
-

La API Fetch proporciona una interfaz para obtener recursos (incluso a traves de la red). Parecera familiar a quien sea que haya usado {{domxref("XMLHttpRequest")}}, pero proporciona un conjunto de características más potentes y flexibles. Este artículo explica algunos de los conceptos básicos de la API Fetch.

-
- -
-

Este artículo será añadido en un futuro. Si encuenta un concepto de Fetch que siente necesita una mejor explicación, hagalo saber a alguien en el foro de discusión de MDN, o Mozilla IRC (#mdn room.)

-
- -

En pocas palabras

- -

En el corazón de Fetch estan las abstracciones de interfaz de cargas de HTTP {{domxref("Request")}}s, {{domxref("Response")}}s, {{domxref("Headers")}}, y {{domxref("Body")}}, junto a un método {{domxref("GlobalFetch.fetch","global fetch")}} para inicializar peticiones de recurso asíncronos. Porque los prinipales componentes de HTTP son abstraídos como objetos Javascript, es sencillo para otras APIs el hacer uso de dicha funcionalidad.

- -

Service Workers es un ejemplo de una API que hace un fuerte uso de Fetch.

- -

Fetch toma la naturaleza asíncrona de dichas peticiones un paso adelante. La API esta completamente basada en {{jsxref("Promise")}}.

- -

Guard

- -

Guard es una característica de objetos {{domxref("Headers")}}, con los valores posibles immutable, request, request-no-cors, response, o none, dependiendo de donde el encabezado es usado.

- -

Cuando un nuevo objeto {{domxref("Headers")}} es creado usando el {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}}, su guarda (guard) se establece a none (por defecto). Cuando un objeto {{domxref("Request")}} o {{domxref("Response")}} es creado, tiene un objeto  {{domxref("Headers")}} asociado cuyo guarda (guard) se establece como se resume a continuación:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
nuevo tipo de objetocreando el constructorconfiguraciones de guarda (guard) del objeto {{domxref("Headers")}} asociado
{{domxref("Request")}}{{domxref("Request.Request","Request()")}}request
{{domxref("Request.Request","Request()")}} con {{domxref("Request.mode","mode")}} de no-corsrequest-no-cors
{{domxref("Response")}}{{domxref("Response.Response","Response()")}}response
Métodos {{domxref("Response.error","error()")}} o {{domxref("Response.redirect","redirect()")}}immutable
- -

Un guarda (guard) de encabezado afecta los métodos {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, y {{domxref("Headers.append","append()")}} que cambían los contenidos del encabezado. Un TypeError es arrojado si se trata modificar un objeto {{domxref("Headers")}} cuyo guarda (guard) es immutable. Sin embargo, la operación funcionará si

- -
    -
  • guard es request y el nombre del encabezado no es un {{Glossary("forbidden header name")}} .
    • -
  • guard es request-no-cors y el encabezado nombre/valor es un {{Glossary("simple header")}} .
    • -
  • guard es response y el nombre del encabezado no es {{Glossary("forbidden response header name")}}.
    • -
diff --git a/files/es/web/api/fetch_api/using_fetch/index.html b/files/es/web/api/fetch_api/using_fetch/index.html new file mode 100644 index 0000000000..51617ad047 --- /dev/null +++ b/files/es/web/api/fetch_api/using_fetch/index.html @@ -0,0 +1,377 @@ +--- +title: Uso de Fetch +slug: Web/API/Fetch_API/Utilizando_Fetch +tags: + - API + - BODY + - Experimental + - Fetch + - Guía + - HTTP + - Petición + - Promesa + - Promise + - Respuesta +translation_of: Web/API/Fetch_API/Using_Fetch +--- +

{{DefaultAPISidebar("Fetch API")}}{{ SeeCompatTable }}

+ +
+

La API Fetch proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, tales como peticiones y respuestas. También provee un método global {{domxref("GlobalFetch.fetch","fetch()")}} que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.

+
+ +

Este tipo de funcionalidad se conseguía previamente haciendo uso de {{domxref("XMLHttpRequest")}}. Fetch proporciona una alternativa mejor que puede ser empleada fácilmente por otras tecnologías como {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch también aporta un único lugar lógico en el que definir otros conceptos relacionados con HTTP como CORS y extensiones para HTTP.

+ +

La especificación fetch difiere de JQuery.ajax() en dos formas principales:

+ +
    +
  • +

    El objeto Promise devuelto desde fetch() no será rechazado con un estado de error HTTP incluso si la respuesta es un error HTTP 404 o 500. En cambio, este se resolverá normalmente (con un estado ok configurado a false), y  este solo sera rechazado ante un fallo de red o si algo impidió completar la solicitud.

    +
    • +
  • Por defecto, fetch no enviará ni recibirá cookies del servidor, resultando en peticiones no autenticadas si el sitio permite mantentener una sesión de usuario (para mandar cookies, credentials de la opción init deberan ser configuradas). Desde el 25 de agosto de 2017. La especificación cambió la politica por defecto de las credenciales a same-origin. Firefox cambió desde la versión 61.0b13.
    • +
+ +

Una petición básica de fetch es realmente simple de realizar. Eche un vistazo al siguente código:

+ +
fetch('http://example.com/movies.json')
+  .then(response => response.json())
+  .then(data => console.log(data));
+ +

Aquí estamos recuperando un archivo JSON a través de red e imprimiendo en la consola. El uso de fetch() más simple toma un argumento (la ruta del recurso que quieres obtener) y devuelve un objeto Promise conteniendo la respuesta, un objeto {{domxref("Response")}}.

+ +

Esto es, por supuesto, una respuesta HTTP no el archivo JSON. Para extraer el contenido en el cuerpo del JSON desde la respuesta, usamos el método {{domxref("Body.json","json()")}} (definido en el mixin de {{domxref("Body")}}, el cual está implementado por los objetos {{domxref("Request")}} y {{domxref("Response")}}).

+ +
+

Nota: El mixin de Body tambien tiene metodos parecidos para extraer otros tipos de contenido del cuerpo. Vease {{anch("Body")}} para más información.

+
+ +

Las peticiones de Fetch son controladas por la directiva de connect-src de Content Security Policy en vez de la directiva de los recursos que se han devuelto.

+ +

Suministrando opciones de petición

+ +

El método fetch() puede aceptar opcionalmente un segundo parámetro, un objeto init que permite controlar un numero de diferentes ajustes:

+ +

Vea {{domxref("GlobalFetch.fetch","fetch()")}}, para ver todas las opciones disponibles y más detalles.

+ +
// Ejemplo implementando el metodo POST:
+async function postData(url = '', data = {}) {
+  // Opciones por defecto estan marcadas con un *
+  const response = await fetch(url, {
+    method: 'POST', // *GET, POST, PUT, DELETE, etc.
+    mode: 'cors', // no-cors, *cors, same-origin
+    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+    credentials: 'same-origin', // include, *same-origin, omit
+    headers: {
+      'Content-Type': 'application/json'
+      // 'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    redirect: 'follow', // manual, *follow, error
+    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+    body: JSON.stringify(data) // body data type must match "Content-Type" header
+  });
+  return response.json(); // parses JSON response into native JavaScript objects
+}
+
+postData('https://example.com/answer', { answer: 42 })
+  .then(data => {
+    console.log(data); // JSON data parsed by `data.json()` call
+  });
+ +

Tenga en cuenta que  mode: "no-cors" solo permite un conjunto limitado de encabezados en la solicitud:

+ +
    +
  • Accept
    • +
  • Accept-Language
    • +
  • Content-Language
    • +
  • Content-Type with a value of application/x-www-form-urlencoded, multipart/form-data, or text/plain
    • +
+ +

Comprobando que la petición es satisfactoria

+ +

Una petición promise {{domxref("GlobalFetch.fetch","fetch()")}} será rechazada con {{jsxref("TypeError")}} cuando se encuentre un error de red, aunque esto normalmente significa problemas de permisos o similares — por ejemplo, un 404 no constituye un error de red. Una forma precisa de comprobar que la petición fetch() es satisfactoria pasa por comprobar si la promesa ha sido resuelta, además de comprobar que la propiedad {{domxref("Response.ok")}} tiene el valor true que indica que el estado de la petición HTTP es OK (código 200-299). El código sería algo así:

+ +
fetch('flores.jpg').then(function(response) {
+  if(response.ok) {
+    response.blob().then(function(miBlob) {
+      var objectURL = URL.createObjectURL(miBlob);
+      miImagen.src = objectURL;
+    });
+  } else {
+    console.log('Respuesta de red OK pero respuesta HTTP no OK');
+  }
+})
+.catch(function(error) {
+  console.log('Hubo un problema con la petición Fetch:' + error.message);
+});
+ +

Proporcionando tu propio objeto Request

+ +

En lugar de pasar la ruta al recurso que deseas solicitar a la llamada del método fetch(), puedes crear un objeto de petición utilizando el constructor {{domxref("Request.Request","Request()")}}, y pasarlo como un argumento del método fetch():

+ +
var myHeaders = new Headers();
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+
+fetch(myRequest)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+ +

Request() acepta exactamente los mismos parámetros que el método fetch(). Puedes incluso pasar un objeto de petición existente para crear una copia del mismo:

+ +
var anotherRequest = new Request(myRequest, myInit);
+ +

Esto es muy útil ya que el cuerpo de las solicitudes y respuestas son de un sólo uso. Haciendo una copia como esta te permite utilizar la petición/respuesta de nuevo, y al mismo tiempo, si lo deseas, modificar las opciones de init. La copia debe estar hecha antes de la lectura del <body>, y leyendo el <body> en la copia, se marcará como leido en la petición original.

+ +
+

Nota: Existe también un método {{domxref("Request.clone","clone()")}} que crea una copia. Este tiene una semántica ligeramente distinta al otro método de copia — el primero fallará si el cuerpo de la petición anterior ya ha sido leído (lo mismo para copiar una respuesta), mientras que clone() no.

+
+ +

Enviar una petición con credenciales incluido

+ +

Para producir que los navegadores envien una petición con las credenciales incluidas, incluso para una llamada de origen cruzado, añadimos credentials: 'include' en el el objeto init que se pasa al método fetch().

+ +
fetch('https://example.com', {
+  credentials: 'include'
+})
+ +

Si solo quieres enviar la credenciales si la URL de la petición está en el mismo origen desde donde se llamada el script, añade credentials: 'same-origin'.

+ +
// El script fué llamado desde el origen 'https://example.com'
+
+fetch('https://example.com', {
+  credentials: 'same-origin'
+})
+ +

Sin embargo para asegurarte que el navegador no incluye las credenciales en la petición, usa credentials: 'omit'.

+ +
fetch('https://example.com', {
+  credentials: 'omit'
+})
+ +

Enviando datos JSON

+ +

Usa {{domxref("GlobalFetch.fetch","fetch()")}} para enviar una petición POST con datos codificados en JSON .

+ +
var url = 'https://example.com/profile';
+var data = {username: 'example'};
+
+fetch(url, {
+  method: 'POST', // or 'PUT'
+  body: JSON.stringify(data), // data can be `string` or {object}!
+  headers:{
+    'Content-Type': 'application/json'
+  }
+}).then(res => res.json())
+.catch(error => console.error('Error:', error))
+.then(response => console.log('Success:', response));
+ +

Enviando un archivo

+ +

Los archivos pueden ser subido mediante el HTML de un elemento input <input type="file" />, {{domxref("FormData.FormData","FormData()")}} y {{domxref("GlobalFetch.fetch","fetch()")}}.

+ +
var formData = new FormData();
+var fileField = document.querySelector("input[type='file']");
+
+formData.append('username', 'abc123');
+formData.append('avatar', fileField.files[0]);
+
+fetch('https://example.com/profile/avatar', {
+  method: 'PUT',
+  body: formData
+})
+.then(response => response.json())
+.catch(error => console.error('Error:', error))
+.then(response => console.log('Success:', response));
+ +

Cabeceras

+ +

La interfaz {{domxref("Headers")}} te permite crear tus propios objetos de headers mediante el constructor {{domxref("Headers.Headers","Headers()")}}. Un objeto headers es un simple multi-mapa de nombres y valores:

+ +
var content = "Hello World";
+var myHeaders = new Headers();
+myHeaders.append("Content-Type", "text/plain");
+myHeaders.append("Content-Length", content.length.toString());
+myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
+ +

Lo mismo se puede lograr pasando un "array de arrays" o un objeto literal al constructor:

+ +
myHeaders = new Headers({
+  "Content-Type": "text/plain",
+  "Content-Length": content.length.toString(),
+  "X-Custom-Header": "ProcessThisImmediately",
+});
+ +

Los contenidos pueden ser consultados o recuperados:

+ +
console.log(myHeaders.has("Content-Type")); // true
+console.log(myHeaders.has("Set-Cookie")); // false
+myHeaders.set("Content-Type", "text/html");
+myHeaders.append("X-Custom-Header", "AnotherValue");
+
+console.log(myHeaders.get("Content-Length")); // 11
+console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
+
+myHeaders.delete("X-Custom-Header");
+console.log(myHeaders.getAll("X-Custom-Header")); // [ ]
+ +

Algunas de estas operaciones solo serán utiles en  {{domxref("ServiceWorker_API","ServiceWorkers")}}, pero estas disponen de una mejor API  para manipular headers.

+ +

Todos los métodosde de headers lanzan un TypeError si un nombre de cabecera no es un nombre de cabecera HTTP válido. Las operaciones de mutación lanzarán un TypeError si hay un guarda inmutable (ver más abajo). Si no, fallan silenciosamente. Por ejemplo:

+ +
var myResponse = Response.error();
+try {
+  myResponse.headers.set("Origin", "http://mybank.com");
+} catch(e) {
+  console.log("Cannot pretend to be a bank!");
+}
+ +

Un buen caso de uso para headers es comprobar cuando el tipo de contenido es correcto antes de que se procese:

+ +
fetch(myRequest).then(function(response) {
+  var contentType = response.headers.get("content-type");
+  if(contentType && contentType.indexOf("application/json") !== -1) {
+    return response.json().then(function(json) {
+      // process your JSON further
+    });
+  } else {
+    console.log("Oops, we haven't got JSON!");
+  }
+});
+ +

Guarda (Guard)

+ +

Desde que las cabeceras pueden ser enviadas  en peticiones y recibidas en respuestas, y tienen limitaciones sobre que información puede y debería ser mutable, los objeto headers tienen una propierdad de guarda. Este no está expuesto a la Web, pero puede afectar a que operaciones de mutación son permitidas sobre el objeto headers.

+ +

Los valores posibles de guarda (guard) son:

+ +
    +
  • none: valor por defecto.
    • +
  • request: Guarda para el objeto headers obtenido de la petición ({{domxref("Request.headers")}}).
    • +
  • request-no-cors: Guarda para un objeto headers obtenido desde una petición creada con {{domxref("Request.mode")}} a no-cors.
    • +
  • response: Guarda para una cabecera obetenida desde un respuesta ({{domxref("Response.headers")}}).
    • +
  • immutable: Mayormente utilizado para ServiceWorkers, produce un objeto headers de solo lectura.
    • +
+ +
+

Nota:  No se debería añadir o establecer una petición a un objeto headers guardado con la cabecera Content-Length. De igual manera, insertar Set-Cookie en la respuesta de la cabecera no esta permitido: ServiceWorkers no estan autorizados a establecer cookies a través de respuestas sintéticas.

+
+ +

Objetos Response

+ +

Cómo has visto anteriormente, las instancias de {{domxref("Response")}} son devueltas cuando fetch() es resuelto.

+ +

Las propiedades de response que usarás son:

+ +
    +
  • {{domxref("Response.status")}} — Entero (por defecto con valor 200) que contiene el código de estado de las respuesta.
    • +
  • {{domxref("Response.statusText")}} — Cadena (con valor por defecto "OK"), el cual corresponde al mensaje del estado de código HTTP.
    • +
  • {{domxref("Response.ok")}} — Visto en uso anteriormente, es una clave para comprobar que el estado está dentro del rango 200-299 (ambos incluidos). Este devuelve un valor {{domxref("Boolean")}}, siendo true si lo anterior se cumple y false en otro caso.
    • +
+ +

Estos pueden también creados programáticamente a través de JavaScript, pero esto solamente es realmete útil en {{domxref("ServiceWorker_API", "ServiceWorkers")}},  cuando pones un objeto response personalizado a una respuesta recibida usando un método {{domxref("FetchEvent.respondWith","respondWith()")}}:

+ +
var myBody = new Blob();
+
+addEventListener('fetch', function(event) {
+  event.respondWith(
+    new Response(myBody, {
+      headers: { "Content-Type" : "text/plain" }
+    })
+  );
+});
+ +

El constructor {{domxref("Response.Response","Response()")}} toma dos argurmentos opcionales, un cuerpo para la respuesta y un objeto init (similar al que acepta {{domxref("Request.Request","Request()")}}).

+ +
+

Nota: El método estático {{domxref("Response.error","error()")}} simplemente devuelve un error en la respuesta. De igual manera que {{domxref("Response.redirect","redirect()")}} devuelve una respuesta que resulta en un redirección a una URL especificada. Estos son solo relevantes tambien a ServiceWorkers.

+
+ +

Body

+ +

Tanto las peticiones como las respuestas pueden contener datos body. Body es una instancia de cualquiera de los siguientes tipos:

+ +
    +
  • {{domxref("ArrayBuffer")}}
    • +
  • {{domxref("ArrayBufferView")}} (Uint8Array y amigos)
    • +
  • {{domxref("Blob")}}/File
    • +
  • string
    • +
  • {{domxref("URLSearchParams")}}
    • +
  • {{domxref("FormData")}}
    • +
+ +

El mixin de {{domxref("Body")}} define los siguientes metodos para extraer un body (implementado por {{domxref("Request")}} and {{domxref("Response")}}). Todas ellas devuelven una promesa que es eventualmente resuelta con el contenido actual.

+ +
    +
  • {{domxref("Body.arrayBuffer","arrayBuffer()")}}
    • +
  • {{domxref("Body.blob","blob()")}}
    • +
  • {{domxref("Body.json","json()")}}
    • +
  • {{domxref("Body.text","text()")}}
    • +
  • {{domxref("Body.formData","formData()")}}
    • +
+ +

Este hace uso de los datos no texttuales mucho mas facil que si fuera con XHR.

+ +

Las peticiones body pueden ser establecidas pasando el parametro body:

+ +
var form = new FormData(document.getElementById('login-form'));
+fetch("/login", {
+  method: "POST",
+  body: form
+});
+ +

Tanto peticiones y respuestas (y por extensión la function fetch()), intentaran inteligentemente determinar el tipo de contenido. Una petición tambien establecerá automáticamente la propiedad Context-Type de la cabecera si no es ha establecido una.

+ +

Detectar característica

+ +

Puedes comprobar si el navegador soporta  la API de Fetch comprobando la existencia de {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} o {{domxref("GlobalFetch.fetch","fetch()")}} sobre el ámbito de {{domxref("Window")}} o {{domxref("Worker")}}. Por ejemplo:

+ +
if (self.fetch) {
+    // run my fetch request here
+} else {
+    // do something with XMLHttpRequest?
+}
+ +

Polyfill

+ +

Para utilizar fetch() en un explorador no soportado, hay disponible un Fetch Polyfill que recrea la funcionalidad para navegadores no soportados.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Vea también

+ + diff --git a/files/es/web/api/fetch_api/utilizando_fetch/index.html b/files/es/web/api/fetch_api/utilizando_fetch/index.html deleted file mode 100644 index 51617ad047..0000000000 --- a/files/es/web/api/fetch_api/utilizando_fetch/index.html +++ /dev/null @@ -1,377 +0,0 @@ ---- -title: Uso de Fetch -slug: Web/API/Fetch_API/Utilizando_Fetch -tags: - - API - - BODY - - Experimental - - Fetch - - Guía - - HTTP - - Petición - - Promesa - - Promise - - Respuesta -translation_of: Web/API/Fetch_API/Using_Fetch ---- -

{{DefaultAPISidebar("Fetch API")}}{{ SeeCompatTable }}

- -
-

La API Fetch proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, tales como peticiones y respuestas. También provee un método global {{domxref("GlobalFetch.fetch","fetch()")}} que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.

-
- -

Este tipo de funcionalidad se conseguía previamente haciendo uso de {{domxref("XMLHttpRequest")}}. Fetch proporciona una alternativa mejor que puede ser empleada fácilmente por otras tecnologías como {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch también aporta un único lugar lógico en el que definir otros conceptos relacionados con HTTP como CORS y extensiones para HTTP.

- -

La especificación fetch difiere de JQuery.ajax() en dos formas principales:

- -
    -
  • -

    El objeto Promise devuelto desde fetch() no será rechazado con un estado de error HTTP incluso si la respuesta es un error HTTP 404 o 500. En cambio, este se resolverá normalmente (con un estado ok configurado a false), y  este solo sera rechazado ante un fallo de red o si algo impidió completar la solicitud.

    -
    • -
  • Por defecto, fetch no enviará ni recibirá cookies del servidor, resultando en peticiones no autenticadas si el sitio permite mantentener una sesión de usuario (para mandar cookies, credentials de la opción init deberan ser configuradas). Desde el 25 de agosto de 2017. La especificación cambió la politica por defecto de las credenciales a same-origin. Firefox cambió desde la versión 61.0b13.
    • -
- -

Una petición básica de fetch es realmente simple de realizar. Eche un vistazo al siguente código:

- -
fetch('http://example.com/movies.json')
-  .then(response => response.json())
-  .then(data => console.log(data));
- -

Aquí estamos recuperando un archivo JSON a través de red e imprimiendo en la consola. El uso de fetch() más simple toma un argumento (la ruta del recurso que quieres obtener) y devuelve un objeto Promise conteniendo la respuesta, un objeto {{domxref("Response")}}.

- -

Esto es, por supuesto, una respuesta HTTP no el archivo JSON. Para extraer el contenido en el cuerpo del JSON desde la respuesta, usamos el método {{domxref("Body.json","json()")}} (definido en el mixin de {{domxref("Body")}}, el cual está implementado por los objetos {{domxref("Request")}} y {{domxref("Response")}}).

- -
-

Nota: El mixin de Body tambien tiene metodos parecidos para extraer otros tipos de contenido del cuerpo. Vease {{anch("Body")}} para más información.

-
- -

Las peticiones de Fetch son controladas por la directiva de connect-src de Content Security Policy en vez de la directiva de los recursos que se han devuelto.

- -

Suministrando opciones de petición

- -

El método fetch() puede aceptar opcionalmente un segundo parámetro, un objeto init que permite controlar un numero de diferentes ajustes:

- -

Vea {{domxref("GlobalFetch.fetch","fetch()")}}, para ver todas las opciones disponibles y más detalles.

- -
// Ejemplo implementando el metodo POST:
-async function postData(url = '', data = {}) {
-  // Opciones por defecto estan marcadas con un *
-  const response = await fetch(url, {
-    method: 'POST', // *GET, POST, PUT, DELETE, etc.
-    mode: 'cors', // no-cors, *cors, same-origin
-    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
-    credentials: 'same-origin', // include, *same-origin, omit
-    headers: {
-      'Content-Type': 'application/json'
-      // 'Content-Type': 'application/x-www-form-urlencoded',
-    },
-    redirect: 'follow', // manual, *follow, error
-    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
-    body: JSON.stringify(data) // body data type must match "Content-Type" header
-  });
-  return response.json(); // parses JSON response into native JavaScript objects
-}
-
-postData('https://example.com/answer', { answer: 42 })
-  .then(data => {
-    console.log(data); // JSON data parsed by `data.json()` call
-  });
- -

Tenga en cuenta que  mode: "no-cors" solo permite un conjunto limitado de encabezados en la solicitud:

- -
    -
  • Accept
    • -
  • Accept-Language
    • -
  • Content-Language
    • -
  • Content-Type with a value of application/x-www-form-urlencoded, multipart/form-data, or text/plain
    • -
- -

Comprobando que la petición es satisfactoria

- -

Una petición promise {{domxref("GlobalFetch.fetch","fetch()")}} será rechazada con {{jsxref("TypeError")}} cuando se encuentre un error de red, aunque esto normalmente significa problemas de permisos o similares — por ejemplo, un 404 no constituye un error de red. Una forma precisa de comprobar que la petición fetch() es satisfactoria pasa por comprobar si la promesa ha sido resuelta, además de comprobar que la propiedad {{domxref("Response.ok")}} tiene el valor true que indica que el estado de la petición HTTP es OK (código 200-299). El código sería algo así:

- -
fetch('flores.jpg').then(function(response) {
-  if(response.ok) {
-    response.blob().then(function(miBlob) {
-      var objectURL = URL.createObjectURL(miBlob);
-      miImagen.src = objectURL;
-    });
-  } else {
-    console.log('Respuesta de red OK pero respuesta HTTP no OK');
-  }
-})
-.catch(function(error) {
-  console.log('Hubo un problema con la petición Fetch:' + error.message);
-});
- -

Proporcionando tu propio objeto Request

- -

En lugar de pasar la ruta al recurso que deseas solicitar a la llamada del método fetch(), puedes crear un objeto de petición utilizando el constructor {{domxref("Request.Request","Request()")}}, y pasarlo como un argumento del método fetch():

- -
var myHeaders = new Headers();
-
-var myInit = { method: 'GET',
-               headers: myHeaders,
-               mode: 'cors',
-               cache: 'default' };
-
-var myRequest = new Request('flowers.jpg', myInit);
-
-fetch(myRequest)
-.then(function(response) {
-  return response.blob();
-})
-.then(function(myBlob) {
-  var objectURL = URL.createObjectURL(myBlob);
-  myImage.src = objectURL;
-});
- -

Request() acepta exactamente los mismos parámetros que el método fetch(). Puedes incluso pasar un objeto de petición existente para crear una copia del mismo:

- -
var anotherRequest = new Request(myRequest, myInit);
- -

Esto es muy útil ya que el cuerpo de las solicitudes y respuestas son de un sólo uso. Haciendo una copia como esta te permite utilizar la petición/respuesta de nuevo, y al mismo tiempo, si lo deseas, modificar las opciones de init. La copia debe estar hecha antes de la lectura del <body>, y leyendo el <body> en la copia, se marcará como leido en la petición original.

- -
-

Nota: Existe también un método {{domxref("Request.clone","clone()")}} que crea una copia. Este tiene una semántica ligeramente distinta al otro método de copia — el primero fallará si el cuerpo de la petición anterior ya ha sido leído (lo mismo para copiar una respuesta), mientras que clone() no.

-
- -

Enviar una petición con credenciales incluido

- -

Para producir que los navegadores envien una petición con las credenciales incluidas, incluso para una llamada de origen cruzado, añadimos credentials: 'include' en el el objeto init que se pasa al método fetch().

- -
fetch('https://example.com', {
-  credentials: 'include'
-})
- -

Si solo quieres enviar la credenciales si la URL de la petición está en el mismo origen desde donde se llamada el script, añade credentials: 'same-origin'.

- -
// El script fué llamado desde el origen 'https://example.com'
-
-fetch('https://example.com', {
-  credentials: 'same-origin'
-})
- -

Sin embargo para asegurarte que el navegador no incluye las credenciales en la petición, usa credentials: 'omit'.

- -
fetch('https://example.com', {
-  credentials: 'omit'
-})
- -

Enviando datos JSON

- -

Usa {{domxref("GlobalFetch.fetch","fetch()")}} para enviar una petición POST con datos codificados en JSON .

- -
var url = 'https://example.com/profile';
-var data = {username: 'example'};
-
-fetch(url, {
-  method: 'POST', // or 'PUT'
-  body: JSON.stringify(data), // data can be `string` or {object}!
-  headers:{
-    'Content-Type': 'application/json'
-  }
-}).then(res => res.json())
-.catch(error => console.error('Error:', error))
-.then(response => console.log('Success:', response));
- -

Enviando un archivo

- -

Los archivos pueden ser subido mediante el HTML de un elemento input <input type="file" />, {{domxref("FormData.FormData","FormData()")}} y {{domxref("GlobalFetch.fetch","fetch()")}}.

- -
var formData = new FormData();
-var fileField = document.querySelector("input[type='file']");
-
-formData.append('username', 'abc123');
-formData.append('avatar', fileField.files[0]);
-
-fetch('https://example.com/profile/avatar', {
-  method: 'PUT',
-  body: formData
-})
-.then(response => response.json())
-.catch(error => console.error('Error:', error))
-.then(response => console.log('Success:', response));
- -

Cabeceras

- -

La interfaz {{domxref("Headers")}} te permite crear tus propios objetos de headers mediante el constructor {{domxref("Headers.Headers","Headers()")}}. Un objeto headers es un simple multi-mapa de nombres y valores:

- -
var content = "Hello World";
-var myHeaders = new Headers();
-myHeaders.append("Content-Type", "text/plain");
-myHeaders.append("Content-Length", content.length.toString());
-myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
- -

Lo mismo se puede lograr pasando un "array de arrays" o un objeto literal al constructor:

- -
myHeaders = new Headers({
-  "Content-Type": "text/plain",
-  "Content-Length": content.length.toString(),
-  "X-Custom-Header": "ProcessThisImmediately",
-});
- -

Los contenidos pueden ser consultados o recuperados:

- -
console.log(myHeaders.has("Content-Type")); // true
-console.log(myHeaders.has("Set-Cookie")); // false
-myHeaders.set("Content-Type", "text/html");
-myHeaders.append("X-Custom-Header", "AnotherValue");
-
-console.log(myHeaders.get("Content-Length")); // 11
-console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
-
-myHeaders.delete("X-Custom-Header");
-console.log(myHeaders.getAll("X-Custom-Header")); // [ ]
- -

Algunas de estas operaciones solo serán utiles en  {{domxref("ServiceWorker_API","ServiceWorkers")}}, pero estas disponen de una mejor API  para manipular headers.

- -

Todos los métodosde de headers lanzan un TypeError si un nombre de cabecera no es un nombre de cabecera HTTP válido. Las operaciones de mutación lanzarán un TypeError si hay un guarda inmutable (ver más abajo). Si no, fallan silenciosamente. Por ejemplo:

- -
var myResponse = Response.error();
-try {
-  myResponse.headers.set("Origin", "http://mybank.com");
-} catch(e) {
-  console.log("Cannot pretend to be a bank!");
-}
- -

Un buen caso de uso para headers es comprobar cuando el tipo de contenido es correcto antes de que se procese:

- -
fetch(myRequest).then(function(response) {
-  var contentType = response.headers.get("content-type");
-  if(contentType && contentType.indexOf("application/json") !== -1) {
-    return response.json().then(function(json) {
-      // process your JSON further
-    });
-  } else {
-    console.log("Oops, we haven't got JSON!");
-  }
-});
- -

Guarda (Guard)

- -

Desde que las cabeceras pueden ser enviadas  en peticiones y recibidas en respuestas, y tienen limitaciones sobre que información puede y debería ser mutable, los objeto headers tienen una propierdad de guarda. Este no está expuesto a la Web, pero puede afectar a que operaciones de mutación son permitidas sobre el objeto headers.

- -

Los valores posibles de guarda (guard) son:

- -
    -
  • none: valor por defecto.
    • -
  • request: Guarda para el objeto headers obtenido de la petición ({{domxref("Request.headers")}}).
    • -
  • request-no-cors: Guarda para un objeto headers obtenido desde una petición creada con {{domxref("Request.mode")}} a no-cors.
    • -
  • response: Guarda para una cabecera obetenida desde un respuesta ({{domxref("Response.headers")}}).
    • -
  • immutable: Mayormente utilizado para ServiceWorkers, produce un objeto headers de solo lectura.
    • -
- -
-

Nota:  No se debería añadir o establecer una petición a un objeto headers guardado con la cabecera Content-Length. De igual manera, insertar Set-Cookie en la respuesta de la cabecera no esta permitido: ServiceWorkers no estan autorizados a establecer cookies a través de respuestas sintéticas.

-
- -

Objetos Response

- -

Cómo has visto anteriormente, las instancias de {{domxref("Response")}} son devueltas cuando fetch() es resuelto.

- -

Las propiedades de response que usarás son:

- -
    -
  • {{domxref("Response.status")}} — Entero (por defecto con valor 200) que contiene el código de estado de las respuesta.
    • -
  • {{domxref("Response.statusText")}} — Cadena (con valor por defecto "OK"), el cual corresponde al mensaje del estado de código HTTP.
    • -
  • {{domxref("Response.ok")}} — Visto en uso anteriormente, es una clave para comprobar que el estado está dentro del rango 200-299 (ambos incluidos). Este devuelve un valor {{domxref("Boolean")}}, siendo true si lo anterior se cumple y false en otro caso.
    • -
- -

Estos pueden también creados programáticamente a través de JavaScript, pero esto solamente es realmete útil en {{domxref("ServiceWorker_API", "ServiceWorkers")}},  cuando pones un objeto response personalizado a una respuesta recibida usando un método {{domxref("FetchEvent.respondWith","respondWith()")}}:

- -
var myBody = new Blob();
-
-addEventListener('fetch', function(event) {
-  event.respondWith(
-    new Response(myBody, {
-      headers: { "Content-Type" : "text/plain" }
-    })
-  );
-});
- -

El constructor {{domxref("Response.Response","Response()")}} toma dos argurmentos opcionales, un cuerpo para la respuesta y un objeto init (similar al que acepta {{domxref("Request.Request","Request()")}}).

- -
-

Nota: El método estático {{domxref("Response.error","error()")}} simplemente devuelve un error en la respuesta. De igual manera que {{domxref("Response.redirect","redirect()")}} devuelve una respuesta que resulta en un redirección a una URL especificada. Estos son solo relevantes tambien a ServiceWorkers.

-
- -

Body

- -

Tanto las peticiones como las respuestas pueden contener datos body. Body es una instancia de cualquiera de los siguientes tipos:

- -
    -
  • {{domxref("ArrayBuffer")}}
    • -
  • {{domxref("ArrayBufferView")}} (Uint8Array y amigos)
    • -
  • {{domxref("Blob")}}/File
    • -
  • string
    • -
  • {{domxref("URLSearchParams")}}
    • -
  • {{domxref("FormData")}}
    • -
- -

El mixin de {{domxref("Body")}} define los siguientes metodos para extraer un body (implementado por {{domxref("Request")}} and {{domxref("Response")}}). Todas ellas devuelven una promesa que es eventualmente resuelta con el contenido actual.

- -
    -
  • {{domxref("Body.arrayBuffer","arrayBuffer()")}}
    • -
  • {{domxref("Body.blob","blob()")}}
    • -
  • {{domxref("Body.json","json()")}}
    • -
  • {{domxref("Body.text","text()")}}
    • -
  • {{domxref("Body.formData","formData()")}}
    • -
- -

Este hace uso de los datos no texttuales mucho mas facil que si fuera con XHR.

- -

Las peticiones body pueden ser establecidas pasando el parametro body:

- -
var form = new FormData(document.getElementById('login-form'));
-fetch("/login", {
-  method: "POST",
-  body: form
-});
- -

Tanto peticiones y respuestas (y por extensión la function fetch()), intentaran inteligentemente determinar el tipo de contenido. Una petición tambien establecerá automáticamente la propiedad Context-Type de la cabecera si no es ha establecido una.

- -

Detectar característica

- -

Puedes comprobar si el navegador soporta  la API de Fetch comprobando la existencia de {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} o {{domxref("GlobalFetch.fetch","fetch()")}} sobre el ámbito de {{domxref("Window")}} o {{domxref("Worker")}}. Por ejemplo:

- -
if (self.fetch) {
-    // run my fetch request here
-} else {
-    // do something with XMLHttpRequest?
-}
- -

Polyfill

- -

Para utilizar fetch() en un explorador no soportado, hay disponible un Fetch Polyfill que recrea la funcionalidad para navegadores no soportados.

- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Definición inicial
- -

Compatibilidad en navegadores

- -

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

- -

Vea también

- - diff --git a/files/es/web/api/formdata/index.html b/files/es/web/api/formdata/index.html new file mode 100644 index 0000000000..2ca830daf7 --- /dev/null +++ b/files/es/web/api/formdata/index.html @@ -0,0 +1,84 @@ +--- +title: FormData +slug: Web/API/XMLHttpRequest/FormData +tags: + - API + - FormData + - Interfaz + - Referencia + - XMLHttpRequest +translation_of: Web/API/FormData +--- +

{{APIRef("XMLHttpRequest")}}

+ +

La interfaz FormData proporciona una manera sencilla de construir un conjunto de parejas clave/valor que representan los campos de un formulario y sus valores, que pueden ser enviados fácilmente con el método {{domxref("XMLHttpRequest.send()")}}. Utiliza el mismo formato que usaría un formulario si el tipo de codificación fuera "multipart/form-data".

+ +

También puede pasarse directamente al constructor de {{domxref("URLSearchParams")}} si se quieren generar parámetros de consulta de la misma forma en que lo haría un {{HTMLElement("form")}} si usara un envío GET simple.

+ +

Un objeto que implementa FormData puede usarse directamente en una estructura {{jsxref("Statements/for...of", "for...of")}}, en lugar de {{domxref('FormData.entries()', 'entries()')}}: for (var p of myFormData) es equivalente a for (var p of myFormData.entries()).

+ +
+

Nota: Esta característica está disponible en Web Workers.

+
+ +

Constructor

+ +
+
{{domxref("FormData.FormData","FormData()")}}
+
Crea un nuevo objeto FormData.
+
+ +

Métodos

+ +
+
{{domxref("FormData.append()")}}
+
Agrega un nuevo valor a una clave existente dentro de un objeto FormData, o añade la clave si aún no existe.
+
{{domxref("FormData.delete()")}}
+
Elimina una pareja clave/valor de un objeto FormData.
+
{{domxref("FormData.entries()")}}
+
Devuelve un {{jsxref("Iteration_protocols","iterator")}} que permite recorrer todas las parejas clave/valor contenidas en este objeto.
+
{{domxref("FormData.get()")}}
+
Devuelve el primer valor asociado con una clave dada en un objeto FormData.
+
{{domxref("FormData.getAll()")}}
+
Devuelve un array con todos los valores asociados con una clave dada en un objeto FormData.
+
{{domxref("FormData.has()")}}
+
Devuelve un booleano que indica si un objeto FormData contiene una clave determinada.
+
{{domxref("FormData.keys()")}}
+
Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todas las claves de las parejas clave/valor contenidas en este objeto.
+
{{domxref("FormData.set()")}}
+
Establece un nuevo valor para una clave existente dentro de un objeto FormData, o agrega la clave/valor si aún no existe.
+
{{domxref("FormData.values()")}}
+
Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todos los valores contenidos en este objeto.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}{{Spec2('XMLHttpRequest')}}FormData definido en XHR spec
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.FormData")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/formdata/using_formdata_objects/index.html b/files/es/web/api/formdata/using_formdata_objects/index.html new file mode 100644 index 0000000000..13f4c9635a --- /dev/null +++ b/files/es/web/api/formdata/using_formdata_objects/index.html @@ -0,0 +1,137 @@ +--- +title: Usando Objetos FormData +slug: Web/Guide/Usando_Objetos_FormData +translation_of: Web/API/FormData/Using_FormData_Objects +translation_of_original: Web/Guide/Using_FormData_Objects +--- +

Los objetos FormData le permiten compilar un conjunto de pares clave/valor para enviar mediante XMLHttpRequest. Están destinados principalmente para el envío de los datos del formulario, pero se pueden utilizar de forma independiente con el fin de transmitir los datos tecleados. Los datos transmitidos estarán en el mismo formato que usa el método submit() del formulario para enviar los datos si el tipo de codificación del formulario se establece en "multipart/form-data".

+ +

Creación de un objeto FormData desde cero

+ +

Usted mismo puede construir un objeto FormData instanciándolo y después añadiendo campos a la instancia usando su método  append() , tal y como se muestra:

+ +
var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456); // number 123456 is immediately converted to string "123456"
+
+// HTML file input user's choice...
+formData.append("userfile", fileInputElement.files[0]);
+
+// JavaScript file-like object...
+var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
+var blob = new Blob([content], { type: "text/xml"});
+
+formData.append("webmasterfile", blob);
+
+var request = new XMLHttpRequest();
+request.open("POST", "http://foo.com/submitform.php");
+request.send(formData);
+
+ +
Nota: Los campos "userfile" y "webmasterfile" contienen ambos un archivo. El número asignado al campo "accountnum" es inmediatamente convertido a string por el método FormData.append() (el valor del campo puede ser un {{ domxref("Blob") }}, {{ domxref("File") }}, o una cadena de texto; si el valor no es ni un Blob, ni un File, será convertido a un string).
+ +

Este ejemplo construye una instancia de FormData que almacenará los valores de los campos "username", "accountnum", "userfile" y "webmasterfile", entonces usará el método send() de XMLHttpRequest para enviar los datos del formulario. El campo "webmasterfile" es un Blob. Un objeto Blob representa un objeto de tipo similar a un fichero que es inalterable y que almacenará datos en formato raw. Los Blobs representan datos que no necesariamente tendrán un formato Javascript nativo. La interfaz {{ domxref("File") }} está basada en Blob, y hereda su funcionalidad y la amplía para dar soporte a archivos que estén en el sistema del usuario. Para construir un Blob, puede invocar al constructor del objeto Blob.

+ +

Recuperando un objeto FormData de un formulario HTML 

+ +

Para construir un objeto FormData que contenga los datos de un {{ HTMLElement("form") }} existente, especifique ese elemento form cuando cree el objeto FormData:

+ +
var formData = new FormData(someFormElement);
+
+ +

Por ejemplo:

+ +
var formElement = document.getElementById("myFormElement");
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+request.send(new FormData(formElement));
+
+ +

También puede añadir datos adicionales al objeto FormData antes de enviarlo. Así:

+ +
var formElement = document.getElementById("myFormElement");
+formData = new FormData(formElement);
+formData.append("serialnumber", serialNumber++);
+request.send(formData);
+ +

Esto le permite aumentar los datos del formulario antes de enviarlos para incluir información adicional que no necesariamente debiera ser editable por el usuario en el formulario.

+ +

Enviando archivos usando objetos FormData

+ +

También puede enviar archivos usando FormData. Simplemente incluye un elemento {{ HTMLElement("input") }} de tipo {{ domxref("File") }}:

+ +
<form enctype="multipart/form-data" method="post" name="fileinfo">
+  <label>Your email address:</label>
+  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
+  <label>Custom file label:</label>
+  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
+  <label>File to stash:</label>
+  <input type="file" name="file" required />
+  <input type="submit" value="Stash the file!" />
+</form>
+<div id="output"></div>
+
+ +

Luego puede enviarlo usando código como el siguiente:

+ +
var form = document.forms.namedItem("fileinfo");
+form.addEventListener('submit', function(ev) {
+
+  var
+    oOutput = document.getElementById("output"),
+    oData = new FormData(document.forms.namedItem("fileinfo"));
+
+  oData.append("CustomField", "This is some extra data");
+
+  var oReq = new XMLHttpRequest();
+  oReq.open("POST", "stash.php", true);
+  oReq.onload = function(oEvent) {
+    if (oReq.status == 200) {
+      oOutput.innerHTML = "Uploaded!";
+    } else {
+      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
+    }
+  };
+
+  oReq.send(oData);
+  ev.preventDefault();
+}, false);
+
+ +
+

Nota: el método especificado en el formulario será usado por encima del método utilizado en en la llamada a open().

+
+ +

También puede añadir un {{ domxref("File") }} o un {{ domxref("Blob") }} directamente al objeto {{ domxref("XMLHttpRequest/FormData", "FormData") }} de la siguiente manera:

+ +
data.append("myfile", myBlob, "filename.txt");
+
+ +

Cuando se usa el método append es posible usar, de manera opcional, un tercer parámetro para pasarle un nombre de fichero dentro de la cabecera Content-Disposition que será enviada al servidor. Cuando no se especifica (o el parámetro no es soportado), el nombre "blob" es el que será utilizado.

+ +

Además, puede usar FormData con jQuery si asigna las opciones correctas:

+ +
var fd = new FormData(document.getElementById("fileinfo"));
+fd.append("CustomField", "This is some extra data");
+$.ajax({
+  url: "stash.php",
+  type: "POST",
+  data: fd,
+  processData: false,  // tell jQuery not to process the data
+  contentType: false   // tell jQuery not to set contentType
+});
+
+ +

Envío de formularios y carga de archivos vía AJAX sin  objetos FormData

+ +

Si quiere saber cómo serializar y enviar vía AJAX un formulario sin utilizar objetos FormData, por favor leer este párrafo .

+ +

Vea también

+ + diff --git a/files/es/web/api/geolocation_api/index.html b/files/es/web/api/geolocation_api/index.html new file mode 100644 index 0000000000..6d50972f8b --- /dev/null +++ b/files/es/web/api/geolocation_api/index.html @@ -0,0 +1,232 @@ +--- +title: Uso de geolocalización +slug: WebAPI/Using_geolocation +tags: + - API + - Geolocalización + - Guía + - clearWatch + - watchPosition +translation_of: Web/API/Geolocation_API +--- +

{{securecontext_header}}{{APIRef("Geolocation API")}}

+ +

La API de geolocalización permite al usuario compartir su ubicación a las aplicaciones web si así lo desea. Por razones de privacidad, al usuario se le pide que confirme el permiso para proporcionar información de ubicación.

+ +

El objeto geolocation

+ +

La API de geolocalización se publica a través del objeto {{domxref("window.navigator.geolocation","navigator.geolocation")}}.

+ +

Si el objeto existe, los servicios de geolocalización están disponibles. Se puede comprobar la presencia de la geolocalización de esta manera:

+ +
if ("geolocation" in navigator) {
+  /* la geolocalización está disponible */
+} else {
+  /* la geolocalización NO está disponible */
+}
+
+ +
+

Nota: En Firefox 24 y versiones anteriores, "geolocation" in navigator siempre retornaba true incluso si la API se encontraba deshabilitada. Esto ha sido corregido en Firefox 25 para cumplir con la especificación.  ({{bug(884921)}}).

+
+ +

Obtención de la ubicación actual

+ +

Para obtener la ubicación actual del usuario, puede llamar al método {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+ +

Esto inicia una solicitud asíncrona para detectar la posición del usuario, y consulta el hardware de posicionamiento para obtener información actualizada. Cuando se determina la posición, se ejecuta la función de callback. Si lo desea, puede proporcionar otra función de callback que se ejecuta si se produce un error. Un tercer parámetro opcional, es un objeto de opciones donde se puede establecer la edad máxima de la posición devuelta, el tiempo de espera para una solicitud y si se requiere una alta precisión para la posición.

+ +
+

Nota: Por defecto, {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} intenta responder tan rápido como sea posible con un resultado de baja precisión. Es útil cuando se necesita una respuesta rápida sin importar su exactitud. A los dispositivos con GPS, por ejemplo, les puede tomar más de un minuto obtener una posición, por lo que datos menos precisos (localización por IP o wifi) pueden ser devueltos por {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+
+ +
navigator.geolocation.getCurrentPosition(function(position) {
+  haz_algo(position.coords.latitude, position.coords.longitude);
+});
+ +

En el ejemplo anterior la función do_something() será ejecutada una vez que se obtiene la posición.

+ +

Rastreando la posición actual

+ +

Si los datos de ubicación cambian (si el dispositivo se mueve o información geográfica más precisa es recibida), puede definir una función de callback que se ejecuta al cambiar la posición. Esto se logra a través de la función {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}}, que recibe los mismos parámetros que {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}. La función de callback es ejecutada varias veces, permitiendo al navegador actualizar la ubicación cada vez que cambia, o proporcionar una posición con mayor exactitud utilizando distintas técnicas de geolocalización. La función de callback de error, la cual es opcional como en {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}, es llamada solo una vez, cuando nunca serán devueltos resultados correctos.

+ +
+

Nota: Es posible usar la función {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} sin haber ejecutado antes {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+
+ +
var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

El método {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} devuelve un número que se utiliza para identificar el rastreador de posición solicitado; este valor se utiliza junto con el método {{domxref("window.navigator.geolocation.clearWatch()","clearWatch()")}} para dejar de rastrear la posición del usuario.

+ +
navigator.geolocation.clearWatch(watchID);
+
+ +

Afinando la respuesta

+ +

Ambos métodos,  {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} y {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} aceptan una función de callback en caso de éxito, una función callback opcional si ocurre algún error, y un objeto PositionOptions también opcional.

+ +

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionOptions")}}

+ +

Una llamada a {{domxref("window.navigator.geolocation.watchPosition()","watchPosition")}} luce como el siguiente ejemplo:

+ +
function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Sorry, no position available.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
+ +

Demo de watchPosition: http://www.thedotproduct.org/experiments/geo/
+ 

+ +

Describiendo una posición

+ +

La ubicación del usuario es descrita con un objeto Position referenciando a un objeto Coordinates.

+ +

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Position")}}

+ +

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Coordinates")}}

+ +

Manejo de errores

+ +

La función de callback de error, si existe cuando se llama a getCurrentPosition() o watchPosition(), recibe un objeto  PositionError como su primer parámetro.

+ +
function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+
+ +

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionError")}}

+ +

Ejemplo de geolocalización

+ + + +

Contenido HTML

+ +
<p><button onclick="geoFindMe()">Show my location</button></p>
+<div id="out"></div>
+
+ +

Contenido JavaScript

+ +
function geoFindMe() {
+  var output = document.getElementById("out");
+
+  if (!navigator.geolocation){
+    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
+    return;
+  }
+
+  function success(position) {
+    var latitude  = position.coords.latitude;
+    var longitude = position.coords.longitude;
+
+    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
+
+    var img = new Image();
+    img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
+
+    output.appendChild(img);
+  };
+
+  function error() {
+    output.innerHTML = "Unable to retrieve your location";
+  };
+
+  output.innerHTML = "<p>Locating…</p>";
+
+  navigator.geolocation.getCurrentPosition(success, error);
+}
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Geolocation_Live_Example',350,410) }}

+ +

Compatibilidad entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.605
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

Notas sobre Gecko

+ +

Firefox incluye soporte para localizar basándose en información de redes inalámbricas, usando Google Location Services. En la transacción entre Firefox y Google, los datos son compartidos incluyendo información del punto de acceso inalámbrico, un token de acceso (similar a una cookie con duración de dos semanas), y la dirección IP del usuario. Para más información, por favor consulte la Política de Privacidad de Mozilla y la Política de Privacidad de Google, dichos documentos cubren como estos datos pueden ser utilizados.

+ +

En Firefox 3.6 (Gecko 1.9.2) fue añadido soporte para utilizar el servicio GPSD para geolocalización en sistemas Linux.

+ +

Consultar también

+ + + +

 

diff --git a/files/es/web/api/globaleventhandlers/ongotpointercapture/index.html b/files/es/web/api/globaleventhandlers/ongotpointercapture/index.html new file mode 100644 index 0000000000..3023c3758e --- /dev/null +++ b/files/es/web/api/globaleventhandlers/ongotpointercapture/index.html @@ -0,0 +1,134 @@ +--- +title: Element.ongotpointercapture +slug: Web/API/Element/ongotpointercapture +tags: + - API + - Controlador + - DOM + - Elemento + - Eventos Puntero + - Propiedad + - Referencia +translation_of: Web/API/GlobalEventHandlers/ongotpointercapture +translation_of_original: Web/API/Element/ongotpointercapture +--- +

{{ ApiRef("DOM") }}

+ +

ongotpointercapture es una propiedad {{domxref("EventHandler")}} de la interfaz {{domxref("Element")}}  que devuelve el controlador de eventos (función) para el evento tipo {{event("gotpointercapture")}}.

+ +

Síntasix

+ +
var gotCaptureHandler = target.ongotpointercpature;
+
+ +

Valor de Retorno

+ +
+
gotCaptureHandler
+
El controlador de eventos  gotpointercapture para el elemento target.
+
+ +

Ejemplo

+ +
<html>
+<script>
+function overHandler(ev) {
+ // Determine the target event's gotpointercapture handler
+ var gotCaptureHandler = ev.target.ongotpointercapture;
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onpointerover = overHandler;
+}
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Pointer Events 2','#widl-Element-ongotpointercapture', 'ongotpointercapture')}}{{Spec2('Pointer Events 2')}}Versión no estable.
{{SpecName('Pointer Events', '#widl-Element-ongotpointercapture', 'ongotpointercapture')}}{{Spec2('Pointer Events')}}Definición inicial.
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatNo}}{{CompatVersionUnknown}} [1]{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementación retirada. Ver {{Bug("1166347")}}.

+ +

Ver también

+ +
    +
  • {{ event("gotpointercapture") }}
    • +
diff --git a/files/es/web/api/globaleventhandlers/onlostpointercapture/index.html b/files/es/web/api/globaleventhandlers/onlostpointercapture/index.html new file mode 100644 index 0000000000..9a07506d45 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onlostpointercapture/index.html @@ -0,0 +1,133 @@ +--- +title: Element.onlostpointercapture +slug: Web/API/Element/onlostpointercapture +tags: + - API + - Controlador de Eventos + - DOM + - Eventos Puntero + - Propiedad + - Referencia +translation_of: Web/API/GlobalEventHandlers/onlostpointercapture +translation_of_original: Web/API/Element/onlostpointercapture +--- +

{{ ApiRef("DOM") }}

+ +

onlostpointercapture es una propiedad {{domxref("EventHandler")}} de la interfaz {{domxref("Element")}}  que devuelve el controlador de eventos (función) para el evento tipo {{event("lostpointercapture")}} .

+ +

Síntasix

+ +
var lostCaptureHandler = target.onlostpointercpature;
+
+ +

Valor de Retorno

+ +
+
lostCaptureHandler
+
El controlador de eventos  lostpointercapture para el elemento target.
+
+ +

Ejemplo

+ +
<html>
+<script>
+function overHandler(ev) {
+ // Determine the target event's lostpointercapture handler
+ var lostCaptureHandler = ev.target.onlostpointercapture;
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onpointerover = overHandler;
+}
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Pointer Events 2','#widl-Element-onlostpointercapture', 'onlostpointercapture')}}{{Spec2('Pointer Events 2')}}Versión no estable.
{{SpecName('Pointer Events', '#widl-Element-onlostpointercapture', 'onlostpointercapture')}}{{Spec2('Pointer Events')}}Definición inicial.
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatNo}}{{CompatVersionUnknown}} [1]{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementación retirada. Ver {{Bug("1166347")}}.

+ +

Ver también

+ +
    +
  • {{ event("lostpointercapture") }}
    • +
diff --git a/files/es/web/api/globaleventhandlers/onunload/index.html b/files/es/web/api/globaleventhandlers/onunload/index.html deleted file mode 100644 index a665fc2027..0000000000 --- a/files/es/web/api/globaleventhandlers/onunload/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: window.onunload -slug: Web/API/GlobalEventHandlers/onunload -translation_of: Web/API/WindowEventHandlers/onunload ---- -

{{ ApiRef() }}

-

Test Summary

-

The unload event is raised when the document is unloaded.

-

Syntax

-
window.onunload = funcRef;
-
-
    -
  • funcRef is a reference to a function.
    • -
-

Example

-
<html>
-<head>
-
-<title>onunload test</title>
-
-<script type="text/javascript">
-
-window.onunload = unloadPage;
-
-function unloadPage()
-{
- alert("unload event detected!");
-}
-</script>
-</head>
-
-<body>
-<p>Reload a new page into the browser<br />
- to fire the unload event for this page.</p>
-<p>You can also use the back or forward buttons<br />
- to load a new page and fire this event.</p>
-</body>
-</html>
-
-

Notes

-

Note that using this event handler in your page prevents Firefox 1.5 from caching the page in the in-memory bfcache. See Using Firefox 1.5 caching for details.

-

Browsers equipped with pop-up window blockers will ignore all window.open() method calls in onunload event handler functions.

-

Specification

-

{{ DOM0() }}

-

{{ languages( {"zh-cn": "zh-cn/DOM/window.onunload" } ) }}

diff --git a/files/es/web/api/globaleventhandlers/onwheel/index.html b/files/es/web/api/globaleventhandlers/onwheel/index.html new file mode 100644 index 0000000000..b8f829969b --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onwheel/index.html @@ -0,0 +1,31 @@ +--- +title: Element.onwheel +slug: Web/API/Element/onwheel +tags: + - API + - DOM + - Gecko + - Propiedad + - Referencia +translation_of: Web/API/GlobalEventHandlers/onwheel +--- +

{{ ApiRef("DOM") }}

+ +

{{ non-standard_header() }}

+ +

Sumario

+ +

La propiedad  onwheel devuelve el código del controlador de eventos onwheel en el elemento actual.

+ +

Syntax

+ +
element.onwheel = event handling code
+
+ +

Notas

+ +

El evento wheel se genera cuando el usuario desplaza el contenido de un elemento.

+ +

Ver también

+ +

Bug 18542 – el atributo onmousewheel  debe ser reemplazado con onwheel

diff --git a/files/es/web/api/history_api/example/index.html b/files/es/web/api/history_api/example/index.html new file mode 100644 index 0000000000..1971f1348f --- /dev/null +++ b/files/es/web/api/history_api/example/index.html @@ -0,0 +1,415 @@ +--- +title: Ejemplo de Navegación usando Ajax +slug: DOM/Manipulando_el_historial_del_navegador/Ejemplo +translation_of: Web/API/History_API/Example +--- +

This is an example of an AJAX web site composed only of three pages (first_page.php, second_page.php and third_page.php). To see how it works, please, create the following files (or git clone https://github.com/giabao/mdn-ajax-nav-example.git ):

+ +
Note: For fully integrating the {{HTMLElement("form")}} elements within this mechanism, please take a look at the paragraph Submitting forms and uploading files.
+ +

first_page.php:

+ +
+
<?php
+    $page_title = "First page";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php } ?>
+
+    <p>This is the content of <strong>first_page.php</strong>.</p>
+
+<?php
+    if ($as_json) {
+        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
+    } else {
+?>
+</div>
+
+<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

second_page.php:

+ +
+
<?php
+    $page_title = "Second page";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php } ?>
+
+    <p>This is the content of <strong>second_page.php</strong>.</p>
+
+<?php
+    if ($as_json) {
+        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
+    } else {
+?>
+</div>
+
+<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

third_page.php:

+ +
+
<?php
+    $page_title = "Third page";
+    $page_content = "<p>This is the content of <strong>third_page.php</strong>. This content is stored into a php variable.</p>";
+
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        echo json_encode(array("page" => $page_title, "content" => $page_content));
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php echo $page_content; ?>
+</div>
+
+<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

css/style.css:

+ +
#ajax-loader {
+    position: fixed;
+    display: table;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#ajax-loader > div {
+    display: table-cell;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    background-color: #000000;
+    opacity: 0.65;
+}
+
+ +

include/after_content.php:

+ +
<p>This is the footer. It is shared between all ajax pages.</p>
+
+ +

include/before_content.php:

+ +
<p>
+[ <a class="ajax-nav" href="first_page.php">First example</a>
+| <a class="ajax-nav" href="second_page.php">Second example</a>
+| <a class="ajax-nav" href="third_page.php">Third example</a>
+| <a class="ajax-nav" href="unexisting.php">Unexisting page</a> ]
+</p>
+
+
+ +

include/header.php:

+ +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<script type="text/javascript" src="js/ajax_nav.js"></script>
+<link rel="stylesheet" href="css/style.css" />
+
+ +

js/ajax_nav.js:

+ +

(before implementing it in a working environment, please read the note about the const statement compatibility)

+ +
+
"use strict";
+
+const ajaxRequest = new (function () {
+
+    function closeReq () {
+        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
+        bIsLoading = false;
+    }
+
+    function abortReq () {
+        if (!bIsLoading) { return; }
+        oReq.abort();
+        closeReq();
+    }
+
+    function ajaxError () {
+        alert("Unknown error.");
+    }
+
+    function ajaxLoad () {
+        var vMsg, nStatus = this.status;
+        switch (nStatus) {
+            case 200:
+                vMsg = JSON.parse(this.responseText);
+                document.title = oPageInfo.title = vMsg.page;
+                document.getElementById(sTargetId).innerHTML = vMsg.content;
+                if (bUpdateURL) {
+                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
+                    bUpdateURL = false;
+                }
+                break;
+            default:
+                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
+                switch (Math.floor(nStatus / 100)) {
+                    /*
+                    case 1:
+                        // Informational 1xx
+                        console.log("Information code " + vMsg);
+                        break;
+                    case 2:
+                        // Successful 2xx
+                        console.log("Successful code " + vMsg);
+                        break;
+                    case 3:
+                        // Redirection 3xx
+                        console.log("Redirection code " + vMsg);
+                        break;
+                    */
+                    case 4:
+                        /* Client Error 4xx */
+                        alert("Client Error #" + vMsg);
+                        break;
+                    case 5:
+                        /* Server Error 5xx */
+                        alert("Server Error #" + vMsg);
+                        break;
+                    default:
+                        /* Unknown status */
+                        ajaxError();
+                }
+        }
+        closeReq();
+    }
+
+    function filterURL (sURL, sViewMode) {
+        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
+    }
+
+    function getPage (sPage) {
+        if (bIsLoading) { return; }
+        oReq = new XMLHttpRequest();
+        bIsLoading = true;
+        oReq.onload = ajaxLoad;
+        oReq.onerror = ajaxError;
+        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
+        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
+        oReq.send();
+        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
+    }
+
+    function requestPage (sURL) {
+        if (history.pushState) {
+            bUpdateURL = true;
+            getPage(sURL);
+        } else {
+            /* Ajax navigation is not supported */
+            location.assign(sURL);
+        }
+    }
+
+    function processLink () {
+        if (this.className === sAjaxClass) {
+            requestPage(this.href);
+            return false;
+        }
+        return true;
+    }
+
+    function init () {
+        oPageInfo.title = document.title;
+        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
+    }
+
+    const
+
+        /* customizable constants */
+        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
+
+        /* not customizable constants */
+        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
+        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
+        oPageInfo = {
+            title: null,
+            url: location.href
+        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
+            100: "Continue",
+            101: "Switching Protocols",
+            102: "Processing",
+            200: "OK",
+            201: "Created",
+            202: "Accepted",
+            203: "Non-Authoritative Information",
+            204: "No Content",
+            205: "Reset Content",
+            206: "Partial Content",
+            207: "Multi-Status",
+            208: "Already Reported",
+            226: "IM Used",
+            300: "Multiple Choices",
+            301: "Moved Permanently",
+            302: "Found",
+            303: "See Other",
+            304: "Not Modified",
+            305: "Use Proxy",
+            306: "Reserved",
+            307: "Temporary Redirect",
+            308: "Permanent Redirect",
+            400: "Bad Request",
+            401: "Unauthorized",
+            402: "Payment Required",
+            403: "Forbidden",
+            404: "Not Found",
+            405: "Method Not Allowed",
+            406: "Not Acceptable",
+            407: "Proxy Authentication Required",
+            408: "Request Timeout",
+            409: "Conflict",
+            410: "Gone",
+            411: "Length Required",
+            412: "Precondition Failed",
+            413: "Request Entity Too Large",
+            414: "Request-URI Too Long",
+            415: "Unsupported Media Type",
+            416: "Requested Range Not Satisfiable",
+            417: "Expectation Failed",
+            422: "Unprocessable Entity",
+            423: "Locked",
+            424: "Failed Dependency",
+            425: "Unassigned",
+            426: "Upgrade Required",
+            427: "Unassigned",
+            428: "Precondition Required",
+            429: "Too Many Requests",
+            430: "Unassigned",
+            431: "Request Header Fields Too Large",
+            500: "Internal Server Error",
+            501: "Not Implemented",
+            502: "Bad Gateway",
+            503: "Service Unavailable",
+            504: "Gateway Timeout",
+            505: "HTTP Version Not Supported",
+            506: "Variant Also Negotiates (Experimental)",
+            507: "Insufficient Storage",
+            508: "Loop Detected",
+            509: "Unassigned",
+            510: "Not Extended",
+            511: "Network Authentication Required"
+        };
+
+    var
+
+        oReq, bIsLoading = false, bUpdateURL = false;
+
+    oLoadingBox.id = "ajax-loader";
+    oCover.onclick = abortReq;
+    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
+    oCover.appendChild(oLoadingImg);
+    oLoadingBox.appendChild(oCover);
+
+    onpopstate = function (oEvent) {
+        bUpdateURL = false;
+        oPageInfo.title = oEvent.state.title;
+        oPageInfo.url = oEvent.state.url;
+        getPage();
+    };
+
+    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
+
+    // Public methods
+
+    this.open = requestPage;
+    this.stop = abortReq;
+    this.rebuildLinks = init;
+
+})();
+
+
+ +
Note: The current implementation of const (constant statement) is not part of ECMAScript 5. It is supported in Firefox & Chrome (V8) and partially supported in Opera 9+ and Safari. It is not supported in Internet Explorer 6-9, or in the preview of Internet Explorer 10. const is going to be defined by ECMAScript 6, but with different semantics. Similar to variables declared with the let statement, constants declared with const will be block-scoped. We used it only for didactic purpose. If you want a full browser compatibility of this library, please replace all the const statements with the var statements.
+ +

For more information, please see: Manipulating the browser history.

+ +

See also

+ +
    +
  • {{ domxref("window.history") }}
    • +
  • {{ domxref("window.onpopstate") }}
    • +
diff --git a/files/es/web/api/history_api/index.html b/files/es/web/api/history_api/index.html new file mode 100644 index 0000000000..eb2c0b3fdd --- /dev/null +++ b/files/es/web/api/history_api/index.html @@ -0,0 +1,228 @@ +--- +title: Manipulando el historial del navegador +slug: DOM/Manipulando_el_historial_del_navegador +tags: + - HTML5 + - historial + - para_revisar +translation_of: Web/API/History_API +--- +

El objeto DOM {{ domxref("window") }} proporciona acceso al historial del navegador a través del objeto {{ domxref("window.history", "history") }} . Este da acceso a métodos y propiedades útiles que permiten avanzar y retroceder a través del historial del usuario, así como --a partir de HTML5-- manipular el contenido del historial.

+ +

Viajando a través del historial

+ +

Retroceder y avanzar a través del historial del usuario utilizando los métodos back(), forward() y go().

+ +

Moviéndose hacia adelante y hacia atrás

+ +

Para moverte hacia atrás, solo debes hacer:

+ +
window.history.back();
+
+ +

Esto actuará exactamente como si el usuario hiciera clic en el botón "atrás" en la barra de herramientas del navegador.

+ +

De manera similar, puedes moverte hacia adelante (como si el usuario hiciera clic en en el botón "adelante"), de esta forma:

+ +
window.history.forward();
+
+ +

Moverse a un punto específico del historial

+ +

Puedes usar el método go() para cargar una página desde el historial de la sesión, identificada por su poscición relativa a la página actual  (Siendo la página actual, por supuesto, relativa al índice 0).

+ +

Para moverse atrás una página (equivalente a llamar back()):

+ +
window.history.go(-1);
+
+ +

Para moverse una página hacia adelante, como si se llamara a forward():

+ +
window.history.go(1);
+
+ +

De manera similar, puedes avanzar 2 páginas pasando 2 y así sucesivamente.

+ +

Otro uso para go() es el de actualizar la página ya sea pasando 0 como parámetro o ninguno.

+ +
// Cada una de las siguientes
+// instrucciones actualiza la página
+window.history.go(0);
+window.history.go();
+ +

Puedes obtener el número de páginas en la pila del historial consultando el valor de la propiedad length:

+ +
var numeroDeEntradas = window.history.length;
+
+ +
Nota: Internet Explorer admite el paso de cadenas de URL como parámetro para go(); esto no es estándar y no está implementado en Gecko.
+ +

Añadiendo y modificando entradas del historial

+ +

{{ gecko_minversion_header("2") }}

+ +

HTML5 introduce los métodos history.pushState() y history.replaceState(), los cuales te permiten añadir y modificar entradas del historial, respectivamente. Estos métodos trabajan en conjunto con el evento {{ domxref("window.onpopstate") }}.

+ +

Hacer uso de history.pushState() cambia el referer que es utilizado en la cabecera HTTP por los objetos XMLHttpRequest que hayan sido creados luego de cambiar el estado. El referer utilizará la URL del documento cuyo objeto window sea this al momento de la creación del objeto XMLHttpRequest.

+ +

Ejemplo

+ +

Supongamos que http://mozilla.org/foo.html ejecuta el siguiente JavaScript:

+ +
var stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");
+
+ +

Esto causará que la barra de URL muestre http://mozilla.org/bar.html, pero no provocará que el navegador carge bar.html ni tampoco que verifique si bar.html existe.

+ +

Supongamos ahora que el usuario navega hacia http://google.com, y despúes hace clic en Atrás.  En este punto, la barra de URL mostrará http://mozilla.org/bar.html, y la página tendrá un evento popstate cuyo state object contiene una copia de stateObj. La página en si se verá como foo.html, aunque la página podria modificar su contenido durante el evento popstate event.

+ +

Si hacemos clic en "atrás" nuevamente, la URL cambiará a http://mozilla.org/foo.html, y el documento generará otro evento popstate event, esta vez con un state object nulo. Aquí también, ir atrás no cambia el contenido del documento con respecto al paso anterior, aunque el documento permite actualizar su contenido manualmente después de recibir el evento popstate.

+ +

El método pushState()

+ +

pushState() toma tres parámetros: un objeto estado, un título (el cual es normalmente ignorado) y (opcionalmente) una URL.  Vamos a examinar cada uno de estos tres parametros en más detalle:

+ +
    +
  • +

    object estado —  El objeto estado es un objeto JavaScript el cual esta asociado con la nueva entrada al historial creada por pushState(). Cada vez que el usuario navega hacia un nuevo estado, un evento popstate event se dispara, y la propiedad state del evento contiene una copia del historial de entradas del objeto estado.

    + +

    El objeto estado puede ser cualquier cosa que puedas pasar a JSON.stringify. Dado que Firefox guarda los objetos estado en el disco del usuario para que puedan ser restaurados después de que el usuario reinicie su navegador, se ha impuesto  un tamaño límite de 640K caracteres en representación JSON de un objeto estado. Si pasas un objeto estado cuya representación es más larga que esto a pushState(), el método arrojará una excepción. Si necesitas más espacio, se recomienda usar sessionStorage y/o localStorage.

    +
    • +
  • +

    título — Firefox actualmente ignora este parámetro, aunque podría usarse en el futuro. Pasar una cadena de caracteres vacia aquí podría asegurar estar a salvo de futuros cambios en este método. Alternativamente podrías pasar un título corto del estado hacia el cual te estás moviendo.

    +
    • +
  • +

    URL — La URL de la nueva entrada al  historial está dada por este parámetro. Recuerda que el browser no intentará cargar esta URL después de llamar a pushState(),  pero podría intentar cargar la URL más tarde, por ejemplo, después de que el usuario reinicie su navegador. La nueva URL no necesita ser absoluta; si es relativa, es resuelta relativamente a la actual URL.  La nueva URL debe ser del mismo origen que la actual URL. Si no es así, pushState() arrojará una excepción. Este parámetro es opcional; si no se especifica, se tomará la URL actual del documento.

    +
    • +
+ +

En un sentido, llamar pushState() es similar a asignar window.location = "#foo", en tanto que también se va a crear y activar otra entrada al historial asociada con el documento actual. Pero pushState() tiene las siguientes ventajas:

+ +
    +
  • La nueva URL puede ser cualquier URL en el mismo origen de la actual URL. En contraste, asignar window.location te mantiene en el mismo {{ domxref("document") }} solamente si modificas unicamente el hash.
    • +
  • No hay por qué cambiar la URL si no se desea. Por el contrario, asignar window.location = "#foo"; solamente crea una nueva entrada en el historial si el hash actual no es #foo.
    • +
  • Puedes asociar datos arbitrarios con tu nuevo historial de entrada. Con el enfoque hash-based, tu necesitas codificar todos datos relevantes dentro de una cadena de caracteres corta.
    • +
  • Si title es utilizado por los navegadores, estos datos pueden utilizarse (independientemente de, por ejemplo, el hash).
    • +
+ +

Hay que tener en cuenta que pushState() nunca dispara un evento hashchange, incluso si la nueva URL difiere de la antigua URL únicamente en su hash.

+ +

En un documento XUL, crea el elemento XUL específico.

+ +

En otros documentos, crea un elemento con un namespace de URI nulo (null).

+ +

El método replaceState()

+ +

history.replaceState() trabaja exactamente igual a history.pushState() excepto que replaceState() modifica la entrada al historial actual en lugar de crear una nueva.

+ +

replaceState() es particularmente útil si deseas actualizar el objeto estado o la URL del la actual entrada al historial en respuesta a alguna acción del usuario.

+ +

El evento popstate

+ +

Un evento popstate es dirigido a la ventana cada vez que la entrada al historial cambia. Si la entrada al historial es activada y fue creada por un llamado a pushState o afectada por una llamada a replaceState, la propiedad state del evento popstate contiene una copia del historial de entradas del objeto estado.

+ +

Ver {{ domxref("window.onpopstate") }} para un ejemplo de uso.

+ +

Leyendo el estado actual

+ +

Cuando la página carga, debería tener un objeto de estado no nulo. Esto podría ocurrir, por ejemplo, si la página establece un object de estado (usando pushState() o replaceState()) y entonces el usuario reinicia su navegador. Cuando la página carga de nuevo, la página recibirá el evento onload, pero no el evento popstate.  Sin embargo, si lees la propiedad history.state, obtendrás el objeto estado que habrías tenido si se hubiera lanzado el evento apopstate.

+ +

Puedes leer el estado del historial actual sin tener que esperar un evento popstate usando la propiedad  history.state de esta manera:

+ +
var currentState = history.state;
+ +

Ejemplos

+ +

Para un ejemplo completo de un sitio AJAX, ver: Ejemplo de navegación AJAX.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstado Comentario
{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}{{Spec2('HTML WHATWG')}}No hay cambios desde {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}{{Spec2('HTML5 W3C')}}Definición inicial
+ +

Compatibilidad entre navegadores

+ +

{{ CompatibilityTable() }}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
replaceState, pushState5{{ CompatGeckoDesktop("2.0") }}1011.505.0
history.state18{{ CompatGeckoDesktop("2.0") }}1011.506.0
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
replaceState, pushState{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
history.state{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+ +

Ver también

+ +
    +
  • {{ domxref("window.history") }}
    • +
  • {{ domxref("window.onpopstate") }}
    • +
diff --git a/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html b/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html new file mode 100644 index 0000000000..1225072b01 --- /dev/null +++ b/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html @@ -0,0 +1,117 @@ +--- +title: Drag & Drop archivo +slug: DragDrop/Drag_and_Drop/drag_and_drop_archivo +tags: + - Guía + - arrastra y suelta + - drag and drop + - drop zone + - zona de arrastre +translation_of: Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop +--- +

{{DefaultAPISidebar("HTML Drag and Drop API")}}

+ +

Las interfaces Drag-and-Drop posibilitan arrastrar y soltar archivos en una página web. En este documento se describe cómo una aplicación puede aceptar uno, o más, archivos que son arrastrados desde el explorador de archivos de la plataforma y soltados en una página web.

+ +

Los pasos principales para configurar Drag-and-drop son: 1) definir una "zona drop (drop zone), es decir, definir un elemento donde se podrá soltar el archivo; y 2) definir funciones para la gestión de los eventos {{event("drop")}} y {{event("dragover")}}. Estos pasos se describen a continuación, tambien se incluyen ejemplos snippets de código. El código fuente completo está disponible en el repositorio drag-and-drop de MDN (cualquier sugerencia o  tema que revisar es bienvenido).

+ +

Nota: {{domxref("HTML_Drag_and_Drop_API","HTML drag and drop")}} define 2 diferentes APIs para soportar drag and drop de archivos. Una API es la interfaz {{domxref("DataTransfer")}} y la segunda API son las interfaces {{domxref("DataTransferItem")}} y {{domxref("DataTransferItemList")}}.  Este ejemplo ilustra el uso de ambas APIs (y no usa ninguna interfaz específica de Gecko).

+ +

Define la zona "drop" [drop zone]

+ +

Es necesario configurar un evento {{event("drop")}} en el objeto sobre el cual se soltará el objeto arrastrado. Este evento llamará una función global {{domxref("GlobalEventHandlers.ondrop","ondrop")}} que recibe los datos del objeto arrastrado. El siguiente código muestra cómo se hace con un elemento {{HTMLelement("div")}}:

+ +
<div id="drop_zone" ondrop="dropHandler(event);">
+  <p>Arrastra y suelta uno o más archivos a esta zona ...</p>
+</div>
+ +

Normalmente, una aplicación incluirá una función de gestión de eventos {{event("dragover")}} en el elemento objetivo del arrastre y esa función desactivará el comportamiento de arrastre por defecto del browser. Para añadir esta función necesita incluir una función global {{domxref("GlobalEventHandlers.ondragover","ondragover")}}:

+ +
<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
+  <p>Arrastra y suelta uno o más archivos a esta zona ...</p>
+</div>
+
+ +

Por último, puede que una aplicación quiera personalizar el estilo del elemento objetivo del arrastre para indicar visualmente que es una zona drag and drop. En este ejemplo, el elemento objetivo usa el siguiente estilo:

+ +
#drop_zone {
+  border: 5px solid blue;
+  width:  200px;
+  height: 100px;
+}
+
+ +
+

Fíjese que los eventos dragstart y dragend no son activados cuando se arrastra un archivo al browser desde el SO.

+
+ +

Procesar la acción de soltar [drop]

+ +

El evento {{event("drop")}} se ejecuta cuando el usuario suelta el o los archivos. En el siguiente manejador, si el navegador sorporta la interfaz {{domxref("DataTransferItemList")}} , el método {{domxref("DataTransferItem.getAsFile","getAsFile()")}} se utiliza para acceder cada fichero; de lo contrario la propiedad {{domxref("DataTransfer")}} de la interfaz {{domxref("DataTransfer.files","files")}} es usada para acceder cada archivo.

+ +

El ejemplo siguiente muestra como escribir el nombre de cada fichero arrastrado en la consola. En una aplicación real, se querrá procesar un archivo usando {{domxref("File","File API")}}.

+ +

Nótese que en este ejemplo, cualquier item arrastrado que no sea un archivo es ignorado.

+ +
function dropHandler(ev) {
+  console.log('Fichero(s) arrastrados');
+
+  // Evitar el comportamiendo por defecto (Evitar que el fichero se abra/ejecute)
+  ev.preventDefault();
+
+  if (ev.dataTransfer.items) {
+    // Usar la interfaz DataTransferItemList para acceder a el/los archivos)
+    for (var i = 0; i < ev.dataTransfer.items.length; i++) {
+      // Si los elementos arrastrados no son ficheros, rechazarlos
+      if (ev.dataTransfer.items[i].kind === 'file') {
+        var file = ev.dataTransfer.items[i].getAsFile();
+        console.log('... file[' + i + '].name = ' + file.name);
+      }
+    }
+  } else {
+    // Usar la interfaz DataTransfer para acceder a el/los archivos
+    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
+      console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
+    }
+  }
+
+  // Pasar el evento a removeDragData para limpiar
+  removeDragData(ev)
+}
+ +

Prevenir el comportamiento default de arrastrado en el browser 

+ +

El siguiente evento {{event("dragover")}} llama a  {{domxref("Event.preventDefault","preventDefault()")}} para deshabilitar (turn off) la respuesta estandar drag-and-drop del browser.

+ +
function dragOverHandler(ev) {
+  console.log('File(s) in drop zone');
+
+  // Prevent default behavior (Prevent file from being opened)
+  ev.preventDefault();
+}
+
+ +

Limpieza (Cleanup)

+ +

Typically, an application may want to perform some cleanup by deleting the file drag data. In this example, the drop event is passed along from drop handler to a custom function called removeDragData. If the browser supports the {{domxref("DataTransferItemList")}} interface, the list's {{domxref("DataTransferItemList.clear","clear()")}} method is used to delete the file drag data; otherwise the {{domxref("DataTransfer")}} object's {{domxref("DataTransfer.clearData","clearData()")}} method is used to delete the data.

+ +
function removeDragData(ev) {
+  console.log('Removing drag data')
+
+  if (ev.dataTransfer.items) {
+    // Use DataTransferItemList interface to remove the drag data
+    ev.dataTransfer.items.clear();
+  } else {
+    // Use DataTransfer interface to remove the drag data
+    ev.dataTransfer.clearData();
+  }
+}
+
+ +

See also

+ + diff --git a/files/es/web/api/html_drag_and_drop_api/index.html b/files/es/web/api/html_drag_and_drop_api/index.html new file mode 100644 index 0000000000..82e069ed48 --- /dev/null +++ b/files/es/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,57 @@ +--- +title: Arrastrar y soltar +slug: DragDrop/Drag_and_Drop +tags: + - HTML5 + - XUL +translation_of: Web/API/HTML_Drag_and_Drop_API +--- +

Firefox y otras aplicaciones de Mozilla admiten una serie de características para gestionar la funcionalidad de arrastrar y soltar. Esto le permite al usuario hacer clic y mantener presionado el botón del ratón/mouse sobre un elemento, arrastrarlo a otra ubicación y soltarlo para colocar el elemento allí. Al puntero le seguirá una representación transparente de lo que se está arrastrando durante la operación. La ubicación de destino puede ser una aplicación diferente. Sitios web, extensiones y aplicaciones XUL pueden hacer uso de esta funcionalidad para personalizar los elementos que pueden ser arrastrados, evaluar la operación, así como especificar el lugar donde los elementos se pueden soltar.

+
Esta sección trata sobre la funcionalidad de arrastrar y soltar en Firefox 3.5 (Gecko 1.9.1) y versiones posteriores. Consulta la documentación de la API anterior para Firefox 3.0 y versiones anteriores.
+ + +

Elementos básicos de arrastrar y soltar

+

Cuando comienza una operación de arrastre, se puede proporcionar una serie de datos:

+
    +
  • los datos que se van a arrastrar, que pueden ser de varios formatos diferentes. Por ejemplo, datos de texto que contienen una cadena de texto que se va a arrastrar. Para obtener más información al respecto, consulta Datos de la operación de arrastre .
    • +
  • la imagen de confirmación sobre la operación de arrastre que aparece junto al puntero durante la operación. Esta imagen puede personalizarse, sin embargo, la mayoría de las veces, no se especifica y se genera una imagen por defecto basándose en el elemento donde se ha pulsado el ratón/mouse. Para obtener más información acerca de estas imágenes, consulta Configurar la imagen de confirmación sobre la operación de descarga .
    • +
  • efectos de arrastre que se permiten. Son posibles tres efectos: copy para indicar que los datos que se arrastran se copiarán desde su ubicación actual a la ubicación de destino, move para indicar que los datos que se arrastran serán movidos y link para indicar que se creará algún tipo de relación o conexión entre la ubicación actual y la ubicación de destino. Durante la operación, se pueden modificar los efectos de arrastre y especificar cuáles en concreto se permiten en determinadas ubicaciones. Si se permite, se puede realizar una operación de colocación en esa ubicación. Consulta Efectos de arrastre para obtener más detalles.
    • +
+

Mozilla y Firefox admiten una serie de características que no se encuentran en el modelo estándar de arrastrar y soltar. Estas te permiten arrastrar elementos múltiples y arrastrar datos que no son cadenas. Para obtener más información, consulta Arrastrar y soltar múltiples elementos .

+

Para obtener una lista de tipos de datos comunes utilizados para arrastrar y soltar, consulta Tipos de operaciones de arrastre recomendados.

+

Está disponible una referencia rápida para los procedimientos recomendados en la operación de arrastre de los siguientes tipos de elementos:

+ +

Consulta DataTransfer para tener una referencia al objeto DataTransfer.

+ + +

Eventos de arrastre

+

Se utilizan una serie de eventos que se ejecutan durante las diversas etapas de la operación de arrastre y colocación. Ten en cuenta que se ejecutan sólo los eventos de arrastre, los eventos del ratón/mouse como mousemove no se ejecutan durante una operación de arrastre.

+

La propiedad dataTransfer de todos los eventos de arrastre contiene datos sobre la operación de arrastre y colocación.

+ + +
+
dragstart
+
Se ejecuta sobre un elemento cuando se inicia una operación de arrastre. El usuario está solicitando arrastrar el elemento al que dispara el evento dragstart. Durante este evento, un proceso de escucha ajustará cierto tipo de información como los datos de la operación de arrastre y la imagen que se asocia con ella. Para obtener más información al respecto, consulta Inicio de una operación de arrastre .
+
dragenter
+
Se dispara cuando el ratón/mouse se mueve primero sobre un elemento, mientras está teniendo lugar una operación de arrastre. Un proceso de escucha de este evento debe indicar si se permite una operación de arrastre sobre esta ubicación. Si no hay procesos de escucha o éstos no realizan ninguna operación, entonces no se permite, de manera predeterminada, una operación de arrastre. Este es también el evento al que escuchar si deseas proporcionar información acerca de que se permite una operación de arrastre, como, por ejemplo, mostrar un resaltado o un marcador de inserción. Para obtener más información al respecto, consulta Especificación de destinos de colocación .
+
dragover
+
Este evento se activa cuando el ratón/mouse se mueve sobre un elemento cuando está teniendo lugar una operación de arrastre. Gran parte del tiempo, la operación que tiene lugar durante un proceso de escucha será la misma que el evento dragenter. Para obtener más información al respecto, consulta Especificación de destinos de colocación.
+
dragleave
+
Este evento se activa cuando el ratón/mouse sale de un elemento mientras que está teniendo lugar una operación de arrastre. Los procesos de escucha deben eliminar cualquier resaltado o marcador de inserción que usan para la información sobre el proceso de arrastre.
+
drag
+
Este evento se activa en el origen del arrastre, es decir, el elemento donde dragstart fue disparado, durante la operación de arrastre.
+
drop
+
El evento se dispara sobre el elemento en el que se produjo la colocación al finalizar la operación de arrastre. Un proceso de escucha se encargará de recuperar los datos que se arrastran e insertarlos en la ubicación de la colocación. Este evento sólo se activará si se desea disponer de la funcionalidad de soltar. No se activará si el usuario cancela la operación de arrastre, por ejemplo, pulsando la tecla Escape, o si se liberó el botón del ratón/mouse mientras que éste no estaba sobre un destino de colocación válido. Para más información sobre esto, consulta Realizar una operación de colocación.
+
dragend
+
El origen del arrastre recibirá un evento dragend cuando la operación se haya completado, tanto si tuvo éxito como si no. Consulta Finalizar una operación de arrastre si deseas más información.
+
+ + +
{{ HTML5ArticleTOC () }}
diff --git a/files/es/web/api/html_drag_and_drop_api/recommended_drag_types/index.html b/files/es/web/api/html_drag_and_drop_api/recommended_drag_types/index.html new file mode 100644 index 0000000000..daad516a44 --- /dev/null +++ b/files/es/web/api/html_drag_and_drop_api/recommended_drag_types/index.html @@ -0,0 +1,144 @@ +--- +title: Tipos de Drag recomendados +slug: DragDrop/Recommended_Drag_Types +translation_of: Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types +--- +

A continuación se describe la mejor practica para utilizar los datos a ser arrastrado.

+

Arrastramdo Texto

+

Al arrastrar el texto, utilice el texto / texto normal. Los datos deben ser la cadena de arrastre. Por ejemplo:

+
event.dataTransfer.setData("text/plain", "This is text to drag")
+
+

Arrastrar texto en cuadros de texto y las selecciones de las páginas web se realiza de forma automática, por lo que no es necesario para manejar dragging.

+

Se recomienda que siempre se agrega datos del tipo  text/plain  como un mensaje para las aplicaciones o los destinos que no soportan otros tipos, a menos que no hay alternativa de texto lógico. Siempre agregue el tipo de texto sin formato pasado, ya que es el menos específico.

+

En códigos más viejo, encontrara text/unicode o el tipo Text.Estos equivalen text/plain,que guardara y recibia los datos del texto plano en ese lugar.

+ +

Los enlaces deben incluir los datos de los dos tipos, el primero debe ser  URL utilizando el tipo text/uri-list,y el segundo es URL utilizando el tipo text/plain. Ambos tipos deben utilizar los mismos datos, la URL del enlace. Por ejemplo:

+
var dt = event.dataTransfer;
+dt.setData("text/uri-list", "http://www.mozilla.org");
+dt.setData("text/plain", "http://www.mozilla.org");
+
+

Es constumbre, establecer el tipo text/plain de ultimo, , ya que es menos específico que el tipo de URI.

+

Note que el tipo de URL uri-list es con una "i", no una "L"

+

Note that the URL type is uri-list with an 'I', not with an 'L'.

+

To drag multiple links, you can also separate each link with a linebreak. A line that begins with a number sign (#) is a comment and should not be considered a valid URL. You can use a comment to indicate the purpose of a link, or to hold the title associated with a link. The text/plain version of the drag data should include all links but should not include the comments.

+

For example:

+
http://www.mozilla.org
+#A second link
+http://www.xulplanet.com
+
+

This sample text/uri-list data contains two links and a comment.

+

When retrieving a dropped link, you should ensure you handle the case where multiple links may have been dragged, and any comments that appear in the data. For convenience, the special type URL may be used to refer to the first valid link within the data for the text/uri-list type. You should not add data using the URL type; attempting to do so will just set the value of the text/uri-list type instead.

+
var url = event.dataTransfer.getData("URL");
+
+

You may also see data using the text/x-moz-url type which is a Mozilla specific type. If it appears, it should be used before the text/uri-list type. It holds the URL of the link followed by the title of the link, separated by a linebreak. For example:

+
http://www.mozilla.org
+Mozilla
+http://www.xulplanet.com
+XUL Planet
+
+

Dragging HTML and XML

+

HTML content may use the text/html type. The data for this type should be the serialized HTML to drag. For instance, it would be suitable to set the data value for this type to the value of the innerHTML property of an element.

+

XML content may use the text/xml type, but you should ensure that the data value is well-formed XML.

+

You may also include a plain text representation of the HTML or XML data using the text/plain type. The data should be just the text and should not include any of the source tags or attributes. For instance:

+
var dt = event.dataTransfer;
+dt.setData("text/html", "Hello there, <strong>stranger</strong>");
+dt.setData("text/plain", "Hello there, stranger");
+
+

Dragging Files

+

A local file is dragged using the application/x-moz-file type with a data value that is an nsIFile object. Non-privileged web pages are not able to retrieve or modify data of this type. Because a file is not a string, you must use the mozSetDataAt method to assign the data. Similarly, when retrieving the data, you must use the mozGetDataAt method.

+
event.dataTransfer.mozSetDataAt("application/x-moz-file", file, 0);
+
+

If possible, you may also include the file URL of the file using both the text/uri-list and/or text/plain types. These types should be added last so that the more specific application/x-moz-file type has higher priority.

+

Multiple files will be received during a drop as mutliple items in the data transfer. See Dragging and Dropping Multiple Items for more details about this.

+

The following example shows how to create an area for receiving dropped files:

+
<listbox ondragenter="return checkDrag(event)"
+         ondragover="return checkDrag(event)"
+         ondrop="doDrop(event)"/>
+
+<script>
+function checkDrag(event)
+{
+  return event.dataTransfer.types.contains("application/x-moz-file");
+}
+
+function doDrop(event)
+{
+  var file = event.dataTransfer.mozGetDataAt("application/x-moz-file", 0);
+  if (file instanceof Components.interfaces.nsIFile)
+    event.currentTarget.appendItem(file.leafName);
+}
+</script>
+
+

In this example, the event returns false only if the data transfer contains the application/x-moz-file type. During the drop event, the data associated with the file type is retrieved, and the filename of the file is added to the listbox. Note that the instanceof operator is used here as the mozGetDataAt method will return an nsISupports that needs to be checked and converted into an nsIFile. This is also a good extra check in case someone made a mistake and added a non-file for this type.

+

Dragging Images

+

Direct image dragging is not commonly done. In fact, Mozilla does not support direct image dragging on Mac or Linux platforms. Instead, images are usually dragged only by their URLs. To do this, use the text/uri-list type as with other URL links. The data should be the URL of the image or a data URL if the image is not stored on a web site or disk. For more information about data URLs, see the data URL scheme.

+

As with other links, the data for the text/plain type should also contain the URL. However, a data URL is not usually as useful in a text context, so you may wish to exclude the text/plain data in this situation.

+

In chrome or other privileged code, you may also use the image/jpeg, image/png or image/gif types, depending on the type of image. The data should be an object which implements the nsIInputStream interface. When this stream is read, it should provide the data bits for the image, as if the image was a file of that type.

+

You should also include the application/x-moz-file type if the image is located on disk. In fact, this a common way in which image files are dragged.

+

It is important to set the data in the right order, from most specific to least specific. The image type such as image/jpeg should come first, followed by the application/x-moz-file type. Next, you should set the text/uri-list data and finally the text/plain data. For example:

+
var dt = event.dataTransfer;
+dt.mozSetDataAt("image/png", stream, 0);
+dt.mozSetDataAt("application/x-moz-file", file, 0);
+dt.setData("text/uri-list", imageurl);
+dt.setData("text/plain", imageurl);
+
+

Note that the mozGetDataAt method is used for non-text data. As some contexts may only include some of these types, it is important to check which type is made available when receiving dropped images.

+

Dragging Nodes

+

Nodes and elements in a document may be dragged using the application/x-moz-node type. This data for the type should be a DOM node. This allows the drop target to receive the actual node where the drag was started from. Note that callers from a different domain will not be able to access the node even when it has been dropped.

+

You should always include a plain text alternative for the node.

+

Dragging Custom Data

+

You can also use other types that you make up for custom purposes. You should strive to always include a plain text alternative unless that object being dragged is specific to a particular site or application. In this case, the custom type ensures that the data cannot be dropped elsewhere.

+

Dragging files to an operating system folder

+

There are cases in which you may want to add a file to an existing drag event session, and you may also want to write the file to disk when the drop operation happens over a folder in the operating system when your code receives notification of the target folder's location. This only works in extensions (or other privileged code) and the data flavor "application/moz-file-promise" should be used. The following sample offers an overview of this advanced case:

+
// currentEvent is a given existing drag operation event
+
+currentEvent.dataTransfer.setData("text/x-moz-url", URL);
+currentEvent.dataTransfer.setData("application/x-moz-file-promise-url", URL);
+currentEvent.dataTransfer.setData("application/x-moz-file-promise-filename", leafName);
+currentEvent.dataTransfer.mozSetDataAt('application/x-moz-file-promise',
+                  new dataProvider(success,error),
+                  0, Components.interfaces.nsISupports);
+
+function dataProvider(){}
+
+dataProvider.prototype = {
+  QueryInterface : function(iid) {
+    if (iid.equals(Components.interfaces.nsIFlavorDataProvider)
+                  || iid.equals(Components.interfaces.nsISupports))
+      return this;
+    throw Components.results.NS_NOINTERFACE;
+  },
+  getFlavorData : function(aTransferable, aFlavor, aData, aDataLen) {
+    if (aFlavor == 'application/x-moz-file-promise') {
+
+       var urlPrimitive = {};
+       var dataSize = {};
+
+       aTransferable.getTransferData('application/x-moz-file-promise-url', urlPrimitive, dataSize);
+       var url = new String(urlPrimitive.value.QueryInterface(Components.interfaces.nsISupportsString));
+       console.log("URL file orignal is = " + url);
+
+       var namePrimitive = {};
+       aTransferable.getTransferData('application/x-moz-file-promise-filename', namePrimitive, dataSize);
+       var name = new String(namePrimitive.value.QueryInterface(Components.interfaces.nsISupportsString));
+
+       console.log("target filename is = " + name);
+
+       var dirPrimitive = {};
+       aTransferable.getTransferData('application/x-moz-file-promise-dir', dirPrimitive, dataSize);
+       var dir = dirPrimitive.value.QueryInterface(Components.interfaces.nsILocalFile);
+
+       console.log("target folder is = " + dir.path);
+
+       var file = Cc['@mozilla.org/file/local;1'].createInstance(Components.interfaces.nsILocalFile);
+       file.initWithPath(dir.path);
+       file.appendRelativePath(name);
+
+       console.log("output final path is =" + file.path);
+
+       // now you can write or copy the file yourself...
+    }
+  }
+}
+
+

{{ languages( { "ja": "Ja/DragDrop/Recommended_Drag_Types" } ) }}

diff --git a/files/es/web/api/htmlelement/accesskey/index.html b/files/es/web/api/htmlelement/accesskey/index.html new file mode 100644 index 0000000000..7d73c395fc --- /dev/null +++ b/files/es/web/api/htmlelement/accesskey/index.html @@ -0,0 +1,23 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +tags: + - API + - Propiedad + - necesidades de contenido +translation_of: Web/API/HTMLElement/accessKey +translation_of_original: Web/API/Element/accessKey +--- +
{{APIRef("DOM")}}
+ +
 
+ +

La propiedad Element.accessKey establece la pulsación de teclado mediante el cual un usuario puede presionar para saltar a este elemento.

+ +
+

Nota: la propiedad Element.accessKey se usa raramente debido a sus múltiples conflictos con las asociaciones de teclas que ya están presentes  en los navegadores. Para evitar esto, los navegadores implementan el comportamiento tecla de acceso si se pulsan las claves con otras teclas "cualificadas" (como Alt + tecla de acceso).

+
+ +

 

+ +

 

diff --git a/files/es/web/api/htmlelement/animationend_event/index.html b/files/es/web/api/htmlelement/animationend_event/index.html new file mode 100644 index 0000000000..8bca8b046f --- /dev/null +++ b/files/es/web/api/htmlelement/animationend_event/index.html @@ -0,0 +1,81 @@ +--- +title: animationend +slug: Web/Events/animationend +translation_of: Web/API/HTMLElement/animationend_event +--- +

El evento animationend es lanzado cuando una animación CSS se ha completado.

+ +

Información General

+ +
+
Especificación
+
CSS Animations
+
Interface
+
AnimationEvent
+
Bubbles
+
Si
+
Cancelable
+
No
+
Target
+
Document, Element
+
Acción por defecto
+
None
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipoDescripción
target {{ReadOnlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{ReadOnlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{ReadOnlyInline}}booleanDoes the event normally bubble?
cancelable {{ReadOnlyInline}}booleanIs it possible to cancel the event?
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}The name of the CSS property associated with the transition.
elapsedTime {{ReadOnlyInline}}FloatThe amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an "animationstart" event, the elapsedTime is zero unless there was a negative value for animation-delay, in which case the event will be fired with an elapsedTime of (-1 * delay).
+ +

Eventos relacionados

+ +
    +
  • {{Event("animationstart")}}
    • +
  • {{Event("animationend")}}
    • +
  • {{Event("animationiteration")}}
    • +
+ +

Ver también

+ + diff --git a/files/es/web/api/htmlelement/dataset/index.html b/files/es/web/api/htmlelement/dataset/index.html deleted file mode 100644 index 10c6f555f9..0000000000 --- a/files/es/web/api/htmlelement/dataset/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset -translation_of: 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:

- -
    -
  • El nombre de un attributo de datos comienza en HTML con data-. Sólo puede estar formado por letras minúsculas, números y los caracteres: guión (-), punto (.), dos puntos (:) y guión bajo (_) -- NUNCA una letra mayúscula (A a Z).
    • -
  • El nombre del atributo en JavaScript será el del correspondiente atributo HTML pero en camelCase, sin guiones, puntos, etc.
    • -
- -

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

- -
    -
  • el prefijo data- es eliminado (incluyendo el guión);
    • -
  • por cada guión (U+002D) seguido de un caracter ASCII que sea una letra en minuscula a a la z, el guión es removido y la letra se transforma en su contraparte en mayuscula;
    • -
  • otros caracteres (incluyendo otros guines) se mantienen intactos.
    • -
- -

camelCase a dash-style: La conversión opuesta, mapea una clave en un nombre de atributo, usa las siguientes reglas:

- -
    -
  • Restricción: Un guión no debe ser inmediatamente seguido por un un caracter ASCII que sea una letra minuscula de la a a la z (antes de la conversión);
    • -
  • se agrega el prefijo data-;
    • -
  • cualquier caracter ASCII que sea una letra mayuscula de la A a la Z se convierte en un guión seguido de se contraparte en minuscula;
    • -
  • otros caracteres se mantienen intactos.
    • -
- -

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

- -
    -
  • Los atributos pueden ser definidos y obtenidos usando el nombre camelCase (la clave) como la propiedad de un objeto del dataset, como en element.dataset.keyname
    • -
  • Los atributos tambien pueden ser definidos y obtenidos usando la sintaxis de corchetes, como en element.dataset[keyname]
    • -
  • El operador in puede ser usado para checar si un atributo dado existe.
    • -
- -

Definiendo valores

- -
    -
  • Cuando un atributo es definido, su valor siempre se convierte a string. Por ejemplo, null siempre se convierte en el string "null".
    • -
  • Cuando quieras remover un atributo, puedes usar el operador delete.
    • -
- -

Sintaxis

- -
    -
  • string = element.dataset.camelCasedName;
    • -
  • element.dataset.camelCasedName = string;
    • -
    -
  • string = element.dataset[camelCasedName];
    • -
  • element.dataset[camelCasedName] = string;
    • -
    -
  • Custom data attributes can also be set directly on HTML elements, but attribute names must use the data- syntax above.
    • -
- -

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

- -
    -
  • The HTML data-* class of global attributes.
    • -
  • Using data attributes
    • -
  • {{domxref("Element.getAttribute()")}} and {{domxref("Element.setAttribute()")}}
    • -
diff --git a/files/es/web/api/htmlelement/focus/index.html b/files/es/web/api/htmlelement/focus/index.html deleted file mode 100644 index d615cbf12e..0000000000 --- a/files/es/web/api/htmlelement/focus/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: HTMLElement.focus() -slug: Web/API/HTMLElement/focus -tags: - - API - - HTML DOM - - HTMLElement - - Referencia - - metodo -translation_of: Web/API/HTMLOrForeignElement/focus ---- -
{{ APIRef("HTML DOM") }}
- -

El método HTMLElement.focus() fija el foco del cursor en el elemento indicado, si éste puede ser enfocado.

- -

Sintaxis

- -
element.focus();
-element.focus(focusOption); // Object parameter
- -

Parámetros

- -
-
focusOptions {{optional_inline}} {{experimental_inline}}
-
Es un objeto con la siguiente propiedad:
-
-
-
preventScroll {{optional_inline}}
-
Es un valor Boolean: -
    -
  • Si es false, el método hará scroll hasta que el elemento esté visible en la ventana del navegador
    • -
  • Si es true,  el método NO hará scroll hasta que el elemento esté visible en la ventana del navegador.
    • -
-
-
-
-
- -

Ejemplos

- -

Enfocar un campo de texto

- -

JavaScript

- -
focusMethod = function getFocus() {
-  document.getElementById("myTextField").focus();
-}
- -

HTML

- -
<input type="text" id="myTextField" value="Campo de texto.">
-<p></p>
-<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el campo de texto!</button>
-
- -

Resultado

- -

{{ EmbedLiveSample('Focus_on_a_text_field') }}

- -

Enfocar un botón

- -

JavaScript

- -
focusMethod = function getFocus() {
-  document.getElementById("myButton").focus();
-}
-
- -

HTML

- -
<button type="button" id="myButton">Púlsame!</button>
-<p></p>
-<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el botón!</button>
-
- -

Resultado

- -

{{ EmbedLiveSample('Focus_on_a_button') }}

- - - -

Enfocar con focusOption

- -

JavaScript

- -
focusScrollMethod = function getFocus() {
-  document.getElementById("myButton").focus({preventScroll:false});
-}
-focusNoScrollMethod = function getFocusWithoutScrolling() {
-  document.getElementById("myButton").focus({preventScroll:true});
-}
-
-
- -

HTML

- -
<button type="button" onclick="focusScrollMethod()">¡Púlsame para enfocar el botón!</button>
-<button type="button" onclick="focusNoScrollMethod()">¡Púlsame para enfocar el botón sin hacer scroll!</button>
-
-<div id="container" style="height: 1000px; width: 1000px;">
-<button type="button" id="myButton" style="margin-top: 500px;">¡Púlsame!</button>
-</div>
-
-
- -

Resultado

- -

{{ EmbedLiveSample('Focus_prevent_scroll') }}

- -

Especificación

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}}
- -

Notas

- -

Si se llama a HTMLElement.focus() desde un gestor de eventos "mousedown" (ratón presionado), se debe también llamar al método event.preventDefault() para evitar que el foco abandone HTMLElement.

- -

Compatibilidad en navegadores

- - - -

{{Compat("api.HTMLElement.focus")}}

- -

Ver también

- -
    -
  • Método DOM {{domxref("HTMLElement.blur()")}} para quitar el foco sobre un elemento.
    • -
  • {{ domxref("document.activeElement") }} para saber cuál es el elemento enfocado actualmente.
    • -
diff --git a/files/es/web/api/htmlelement/style/index.html b/files/es/web/api/htmlelement/style/index.html deleted file mode 100644 index 62c8903b72..0000000000 --- a/files/es/web/api/htmlelement/style/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Element.style -slug: Web/API/HTMLElement/style -translation_of: 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/web/api/htmlelement/transitioncancel_event/index.html b/files/es/web/api/htmlelement/transitioncancel_event/index.html new file mode 100644 index 0000000000..3f9c622bd2 --- /dev/null +++ b/files/es/web/api/htmlelement/transitioncancel_event/index.html @@ -0,0 +1,163 @@ +--- +title: transitioncancel +slug: Web/Events/transitioncancel +tags: + - DOM + - Evento + - Referencia + - eventos +translation_of: Web/API/HTMLElement/transitioncancel_event +--- +

{{SeeCompatTable}}

+ +

El evento transitioncancel es lanzado cuando una transición CSS es cancelada.

+ +

Véase {{domxref("GlobalEventHandlers.ontransitioncancel")}} para mas información y ejemplos.

+ +

Información general

+ +
+
Interfaz
+
{{domxref("TransitionEvent")}}
+
Burbuja
+
Sí
+
Cancelable
+
No
+
Objetivo
+
{{domxref("document")}}, {{domxref("element")}}
+
Acción por defecto
+
Ninguna
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipoDescripción
target {{readonlyinline}}{{domxref("EventTarget")}}El objetivo del evento (the topmost target in the DOM tree).
type {{readonlyinline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readonlyinline}}{{domxref("Boolean")}}Si el evento normalmente se propaga o no
cancelable {{readonlyinline}}{{domxref("Boolean")}}Si el evento es cancelable o no
propertyName{{readonlyinline}}{{domxref("DOMString")}}El nombre de la propiedad CSS asociada con la transición.
elapsedTime{{readonlyinline}}{{domxref("Float")}} +

La cantidad de tiempo que ha durado la transición, en segundos, desde el momento en que el evento fué generado. Este valor no se ve afectado por el valor de transition-delay.

+
pseudoElement{{readonlyinline}}{{domxref("DOMString")}} +

El nombre (empezando con dos "dos puntos") del pseudo-elemento CSS en el que ha ocurrido la transición (en caso de que el objetivo del evento sea dicho pseudo-elemento correspondiente al elemento), o una cadena vacía si la transición ha ocurrido en un elemento (lo que quiere decir que el objetivo del evento es dicho elemento).

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Transitions', '#transitioncancel', 'transitioncancel')}}{{Spec2('CSS3 Transitions')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(53)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

 

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoMobile(53)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Véase también

+ +
    +
  • El manejador {{domxref("GlobalEventHandlers.ontransitioncancel")}}
    • +
  • La interfaz {{domxref("TransitionEvent")}}
    • +
  • {{event("transitionstart")}}, {{event("transitionend")}}
    • +
  • Propiedades CSS: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.
    • +
diff --git a/files/es/web/api/htmlelement/transitionend_event/index.html b/files/es/web/api/htmlelement/transitionend_event/index.html new file mode 100644 index 0000000000..8370f0e39e --- /dev/null +++ b/files/es/web/api/htmlelement/transitionend_event/index.html @@ -0,0 +1,183 @@ +--- +title: transitionend +slug: Web/Events/transitionend +tags: + - DOM + - Event + - Referencia + - Transiciones CSS + - Transiciones CSS3 + - TransitionEvent + - transitionend +translation_of: Web/API/HTMLElement/transitionend_event +--- +

El evento transitionend es lanzado cuando una transición CSS se ha completado. Si la transición es eliminada antes de haberse completado, como cuando {{cssxref("transition-property")}} es eliminado o {{cssxref("display")}} se establece a "none", entonces el evento no será generado.

+ +

Información general

+ +
+
Especificación
+
{{SpecName("CSS3 Transitions")}}
+
Interfaz
+
{{domxref("TransitionEvent")}}
+
Burbuja
+
Sí
+
Cancelable
+
Sí
+
Objetivo
+
{{domxref("Element")}}, {{domxref("Document")}}, {{domxref("Window")}}
+
Acción
+
undefined
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
propertyName {{readonlyInline}}{{domxref("DOMString")}}The name of the CSS property associated with the transition.
elapsedTime {{readonlyInline}}FloatThe amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of transition-delay.
pseudoElement {{readonlyInline}}{{domxref("DOMString")}}The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).
+ +

Ejemplo

+ +

Este ejemplo establece un manejador de evento para detectar el evento transitionend, y así cambiar el texto que se muestra dentro del elemento cuando la transición se completa.

+ +
let element = document.getElementById("slidingMenu");
+element.addEventListener("transitionend", function(event) {
+  element.innerHTML = "Done!";
+}, false);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}{{Spec2('CSS3 Transitions')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0[1]
+ 36		{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}1010.5[2]
+ 12
+ 12.10
+ 23		3.2[1]
+ 7.0.6
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}10[2]
+ 12
+ 12.10		3.2[1]
+
+ +

[1] Implementado en Chrome 1.0, Android 2.1 y WebKit 3.2 como webkitTransitionEnd. Chrome 36 y WebKit 7.0.6 usan el estándar transitionend.

+ +

[2] Implementado como oTransitionEnd desde Opera 10.5, como otransitionend desde la versión 12 y como el estándar transitionend desde la versión 12.10.

+ +

Véase también

+ +

La interfaz {{domxref("TransitionEvent")}}

+ +
    +
  • {{event("transitionstart")}}, {{event("transitioncancel")}}
    • +
  • Propiedades CSS: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.
    • +
diff --git a/files/es/web/api/htmlmediaelement/abort_event/index.html b/files/es/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..641d144c77 --- /dev/null +++ b/files/es/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,68 @@ +--- +title: abort +slug: Web/Events/abort +translation_of: Web/API/HTMLMediaElement/abort_event +translation_of_original: Web/Events/abort +--- +

The abort event is fired when the loading of a resource has been aborted.

+ +

Información general

+ +
+
Specification
+
DOM L3
+
Interface
+
UIEvent if generated from a user interface, Event otherwise.
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Element
+
Default Action
+
None
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
diff --git a/files/es/web/api/htmlorforeignelement/dataset/index.html b/files/es/web/api/htmlorforeignelement/dataset/index.html new file mode 100644 index 0000000000..10c6f555f9 --- /dev/null +++ b/files/es/web/api/htmlorforeignelement/dataset/index.html @@ -0,0 +1,132 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +translation_of: 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:

+ +
    +
  • El nombre de un attributo de datos comienza en HTML con data-. Sólo puede estar formado por letras minúsculas, números y los caracteres: guión (-), punto (.), dos puntos (:) y guión bajo (_) -- NUNCA una letra mayúscula (A a Z).
    • +
  • El nombre del atributo en JavaScript será el del correspondiente atributo HTML pero en camelCase, sin guiones, puntos, etc.
    • +
+ +

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

+ +
    +
  • el prefijo data- es eliminado (incluyendo el guión);
    • +
  • por cada guión (U+002D) seguido de un caracter ASCII que sea una letra en minuscula a a la z, el guión es removido y la letra se transforma en su contraparte en mayuscula;
    • +
  • otros caracteres (incluyendo otros guines) se mantienen intactos.
    • +
+ +

camelCase a dash-style: La conversión opuesta, mapea una clave en un nombre de atributo, usa las siguientes reglas:

+ +
    +
  • Restricción: Un guión no debe ser inmediatamente seguido por un un caracter ASCII que sea una letra minuscula de la a a la z (antes de la conversión);
    • +
  • se agrega el prefijo data-;
    • +
  • cualquier caracter ASCII que sea una letra mayuscula de la A a la Z se convierte en un guión seguido de se contraparte en minuscula;
    • +
  • otros caracteres se mantienen intactos.
    • +
+ +

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

+ +
    +
  • Los atributos pueden ser definidos y obtenidos usando el nombre camelCase (la clave) como la propiedad de un objeto del dataset, como en element.dataset.keyname
    • +
  • Los atributos tambien pueden ser definidos y obtenidos usando la sintaxis de corchetes, como en element.dataset[keyname]
    • +
  • El operador in puede ser usado para checar si un atributo dado existe.
    • +
+ +

Definiendo valores

+ +
    +
  • Cuando un atributo es definido, su valor siempre se convierte a string. Por ejemplo, null siempre se convierte en el string "null".
    • +
  • Cuando quieras remover un atributo, puedes usar el operador delete.
    • +
+ +

Sintaxis

+ +
    +
  • string = element.dataset.camelCasedName;
    • +
  • element.dataset.camelCasedName = string;
    • +
    +
  • string = element.dataset[camelCasedName];
    • +
  • element.dataset[camelCasedName] = string;
    • +
    +
  • Custom data attributes can also be set directly on HTML elements, but attribute names must use the data- syntax above.
    • +
+ +

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

+ +
    +
  • The HTML data-* class of global attributes.
    • +
  • Using data attributes
    • +
  • {{domxref("Element.getAttribute()")}} and {{domxref("Element.setAttribute()")}}
    • +
diff --git a/files/es/web/api/htmlorforeignelement/focus/index.html b/files/es/web/api/htmlorforeignelement/focus/index.html new file mode 100644 index 0000000000..d615cbf12e --- /dev/null +++ b/files/es/web/api/htmlorforeignelement/focus/index.html @@ -0,0 +1,164 @@ +--- +title: HTMLElement.focus() +slug: Web/API/HTMLElement/focus +tags: + - API + - HTML DOM + - HTMLElement + - Referencia + - metodo +translation_of: Web/API/HTMLOrForeignElement/focus +--- +
{{ APIRef("HTML DOM") }}
+ +

El método HTMLElement.focus() fija el foco del cursor en el elemento indicado, si éste puede ser enfocado.

+ +

Sintaxis

+ +
element.focus();
+element.focus(focusOption); // Object parameter
+ +

Parámetros

+ +
+
focusOptions {{optional_inline}} {{experimental_inline}}
+
Es un objeto con la siguiente propiedad:
+
+
+
preventScroll {{optional_inline}}
+
Es un valor Boolean: +
    +
  • Si es false, el método hará scroll hasta que el elemento esté visible en la ventana del navegador
    • +
  • Si es true,  el método NO hará scroll hasta que el elemento esté visible en la ventana del navegador.
    • +
+
+
+
+
+ +

Ejemplos

+ +

Enfocar un campo de texto

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myTextField").focus();
+}
+ +

HTML

+ +
<input type="text" id="myTextField" value="Campo de texto.">
+<p></p>
+<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el campo de texto!</button>
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Focus_on_a_text_field') }}

+ +

Enfocar un botón

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myButton").focus();
+}
+
+ +

HTML

+ +
<button type="button" id="myButton">Púlsame!</button>
+<p></p>
+<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el botón!</button>
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Focus_on_a_button') }}

+ + + +

Enfocar con focusOption

+ +

JavaScript

+ +
focusScrollMethod = function getFocus() {
+  document.getElementById("myButton").focus({preventScroll:false});
+}
+focusNoScrollMethod = function getFocusWithoutScrolling() {
+  document.getElementById("myButton").focus({preventScroll:true});
+}
+
+
+ +

HTML

+ +
<button type="button" onclick="focusScrollMethod()">¡Púlsame para enfocar el botón!</button>
+<button type="button" onclick="focusNoScrollMethod()">¡Púlsame para enfocar el botón sin hacer scroll!</button>
+
+<div id="container" style="height: 1000px; width: 1000px;">
+<button type="button" id="myButton" style="margin-top: 500px;">¡Púlsame!</button>
+</div>
+
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Focus_prevent_scroll') }}

+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}}
+ +

Notas

+ +

Si se llama a HTMLElement.focus() desde un gestor de eventos "mousedown" (ratón presionado), se debe también llamar al método event.preventDefault() para evitar que el foco abandone HTMLElement.

+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.HTMLElement.focus")}}

+ +

Ver también

+ +
    +
  • Método DOM {{domxref("HTMLElement.blur()")}} para quitar el foco sobre un elemento.
    • +
  • {{ domxref("document.activeElement") }} para saber cuál es el elemento enfocado actualmente.
    • +
diff --git a/files/es/web/api/htmlvideoelement/index.html b/files/es/web/api/htmlvideoelement/index.html new file mode 100644 index 0000000000..4b36d9cba2 --- /dev/null +++ b/files/es/web/api/htmlvideoelement/index.html @@ -0,0 +1,202 @@ +--- +title: Elementos HTML para Video +slug: Web/API/ElementosHTMLparaVideo +translation_of: Web/API/HTMLVideoElement +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

El interfaz de HTMLVideoElement provee propiedades especiales y metodos para manipular objectos de videos. Tambien, este interfaz hereda propiedades y métodos de {{domxref("HTMLMediaElement")}} y {{domxref("HTMLElement")}}.

+ +

La lista de supported media formats (formatos de medios compatibles) varía de un navegador a otro. Debe proveer su video en un formato sencillo que sea compatible con todos los navegadores o proveer varias fuentes de videos in varios formatos, para que así todo navegador que necesite este cubierto.

+ +

{{InheritanceDiagram(600, 140)}}

+ +

Propiedades

+ +

Hereda las propiedades de los interfaces anteriores, {{domxref("HTMLMediaElement")}}, y {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLVideoElement.height")}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("height", "video")}}, el cual especifica la altura del area mostrada, en pixeles CSS.
+
{{domxref("HTMLVideoElement.poster")}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("poster", "video")}}, el cual especifica que imagen sera mostrada en la ausencia de data de video.
+
{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}
+
Devuelve un unsigned long que contiene la altura intrinsica del recurso en pixeles CSS, tomando en consideracion las dimensiones, aspecto proporcional, apertura limpia, resolucion, etc., ya definidas por el formato usado por el recurso.  Si el estado disponible del elemento es HAVE_NOTHING, su valor es 0.
+
{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}
+
Devuelve un unsigned long que contiene la anchura intrinsica del recurso en pixeles CSS, tomando en consideracion las dimensiones, aspecto proporcional, apertura limpia, resolucion, etc., ya definidas por el formato usado por el recurso.  Si el estado disponible del elemento es HAVE_NOTHING, su valor es 0.
+
{{domxref("HTMLVideoElement.width")}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("width", "video")}}, el cual especifica la anchura del area mostrada, en pixeles CSS.
+
+ +

Propiedades especificas para Gecko

+ +
+
{{domxref("HTMLVideoElement.mozParsedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un unsigned long con el conteo de marcos de video que han sido analizados del recurso de multimedia.
+
{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un unsigned long con el conteo de marcos de video que han sido decifrados como imágines.
+
{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un unsigned long con el conteo de marcos decodificados que han sido  presentados a la canalización de render para pintar.
+
{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un unsigned long con el conteo de marcos presentados que han sido pintados en la pantalla.
+
{{domxref("HTMLVideoElement.mozFrameDelay")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un double con el tiempo, en segundos, que el último marco de video fue pintado por retrazo.
+
{{domxref("HTMLVideoElement.mozHasAudio")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un {{domxref("Boolean")}} indicando si existe algún audio asociado con el video.
+
+ +

Métodos

+ +

Hereda los métodos anteriores de {{domxref("HTMLMediaElement")}} y {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}
+
Devuelve un {{domxref("VideoPlaybackQuality")}} para objetos que contienen las medidas de reproducciones actuales.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('Media Source Extensions', '#idl-def-HTMLVideoElement', 'Extensions to HTMLVideoElement')}}{{Spec2("Media Source Extensions")}}Anadio el metodo getVideoPlaybackQuality() .
{{SpecName('HTML WHATWG', "the-video-element.html#the-video-element", "HTMLAreaElement")}}{{Spec2('HTML WHATWG')}}Sin cambios del {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-video-element", "HTMLAreaElement")}}{{Spec2('HTML5 W3C')}}Definicion incial.
+ +

Compatibilidad con Navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicasChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Apoyo basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}9.010.50{{CompatVersionUnknown}}
mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("5.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozHasAudio {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{ CompatGeckoDesktop("15.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
getVideoPlaybackQuality(){{experimental_inline}}{{CompatUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("25.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Apoyo básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("5.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozHasAudio {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
getVideoPlaybackQuality(){{experimental_inline}}{{CompatUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("25.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Gecko implementa esto detras de la preferencia media.mediasource.enabled, predispuesto a false.

+ +

Lea Tambien

+ + diff --git a/files/es/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/es/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html new file mode 100644 index 0000000000..34d4fdd438 --- /dev/null +++ b/files/es/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html @@ -0,0 +1,216 @@ +--- +title: Conceptos Básicos +slug: Web/API/IndexedDB_API/Conceptos_Basicos_Detras_De_IndexedDB +translation_of: 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:

+ +
    +
  • +

    IndexedDB almacena pares llave-valor. Los valores pueden ser objetos con estructuras complejas, y las llaves pueden ser propiedades de esos objetos. Se pueden crear índices que usan cualquier propiedad de los objetos para realizar búsquedas rápidas o enumeraciones ordenadas.

    +
    • +
  • +

    IndexedDB está hecho sobre un modelo de base de datos transaccional. Todo lo que usted haga en IndexedDB siempre ocurre en el contexto de una transacción. La API de IndexedDB provee una gran cantidad de objetos que representan índices, tablas, cursores, y más, pero cada uno de ellos están atados a una transacción particular. Así, usted no puede ejecutar ningún comando o abrir un cursor fuera de una transacción.

    + +

    Las transacciones tienen un período de vida bien definido. Por esta razón, cualquier intento de utilizar una transacción que ya se ha completado ocasionará excepciones. Igualmente, las transacciones aplican los cambios automáticamente y no se puede hacer commit automáticamente.

    + +

    Este modelo de transacciones es realmente útil cuando se considera qué podría pasar si un usuario abre dos instancias de una aplicación simultáneamente en dos pestañas. Sin operaciones transaccionales, las dos instancias podrían hacer que los cambios se pisen o se sobreescriban entre sí. Si no está familiarizado con el concepto de transacción en una base de datos, lea el artículo correspondiente en la Wikipedia y transacción en la sección de definiciones.

    +
    • +
  • +

    La API de IndexedDB es mayormente asincrona. La API no devuelve datos regresando un valor; en cambio, es necesario pasarle una funcion como callback. Usted no "guarda" un valor en la base de datos, o "lee" un valor de la misma por medios síncronos. En cambio, usted "solicita" una operación a la base de datos. Un evento del DOM es utilizado para notificarle que la operación terminó, y el tipo de evento recibido le permite saber si ésta falló o si fue exitosa. Esto puede sonar complicado al comienzo, pero hay algunas medidas de sanidad incluidas por defecto. Esto no es muy distinto de cómo funciona XMLHttpRequest.

    +
    • +
  • +

    IndexedDB usa solicitudes en todos lados. Las solicitudes (requests) son objetos que reciben los eventos del DOM mencionados previamente. Éstas cuentan con las propiedades onsuccess y onerror, sobre las cuales se puede aplicar addEventListener() y removeEventListener(). Estas también tienen las propiedades  readyState, result, y errorCode que permiten conocer el estado de la solicitud. La propiedad result es particularmente mágica, dado que puede ser muchas cosas distintas, dependiendo de cómo se generó la solicitud (por ejemplo, una instancia de IDBCursor, o la llave de un valor recién insertado en la base de datos).

    +
    • +
  • +

    IndexedDB usa eventos DOM para notificar cuando los resultados están disponibles. Los eventos del DOM siempre tienen una propiedad type (en IndexedDB, ésta es generalmente "success" o "error"). Los eventos del DOM también tienen una propiedad target que dice a dónde apunta el evento. En la mayoría de los casos, el target de un evento es el objeto IDBRequest que se generó como resultado de una operación sobre la base de datos. Los eventos exitosos no son pasados a los padres y no pueden ser cancelados. Por otro lado, los eventos de error son pasados a los padres del target y pueden cancelarse. Esto es importante, dado que los eventos de error cancelan cualquier transacción sobre la que estén corriendo a menos que sean cancelados.

    +
    • +
  • +

    IndexedDB es orientada a objetos. IndexedDB no es una base de datos relacional, con tablas, filas y columnas. Esta diferencia fundamental e importante afecta la manera como usted diseña e implementa sus aplicaciones.

    + +

    En un almacén de datos relacional, usted podría tener una tabla que almacena una colección de filas de datos y columnas de tipos de datos con un nombre. IndexedDB, por otro lado, necesita que usted cree un almacén de objetos para un tipo de datos y sencillamente almacena objetos JavaScript en ese almacén. Cada almacén de objetos puede tener una colección de índices que hacen que la iteración y la búsqueda de elementos sea más eficiente. Si usted no está familiarizado con los sistemas de manejo de datos orientados a objetos, lea el artículo de la Wikipedia sobre bases de datos orientadas a objetos.

    +
    • +
  • +

    IndexedDB no utiliza SQL (Structured Query Language). En cambio usa consultas sobre un índice que producen un cursor. Éste puede utilizarse para iterar sobre el conjunto de resultados. Si no está familiarizado con sistemas NoSQL, lea el artículo de Wikipedia sobre NoSQL.

    +
    • +
  • +

    IndexedDB se adhiere a una política de mismo origen. Un orígen es el dominio, protocolo de la capa de aplicación, y el puerto de la URL del documento donde se está ejecutando la aplicación. Cada orígen tiene su propio conjunto de bases de datos asociado. Cada base de datos tiene un nombre que la identifica dentro de un orígen.

    + +

    El límite de seguridad impuesto en IndexedDB prevé que las aplicaciones puedan acceder a datos de un orígen diferente. Por ejemplo, mientras una aplicación en http://www.example.com/app/ puede obtener datos desde http://www.example.com/dir/, debido a que comparten un mismo orígen, esta no puede leer datos desde http://www.example.com:8080/dir/ (puerto distinto) o desde https://www.example.com/dir/ (protocolo distinto), debido a que tienen distintos orígenes.

    +
    • +
+ +

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

+ +

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

+
+
+ +

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:

+ +
    +
  • Ordenamiento internacionalizado. No todos los idiomas ordenan las cadenas de la misma forma, por lo que el ordenamiento internacionalizado no está soportado. Aún cuando la base de datos no puede ordenar los datos respetando su idioma, usted puede ordenar los datos obtenidos de la base de datos por su cuenta.
    • +
  • Sincronización. La API no está diseñada para tomar en cuenta la sincronización con una base de datos del lado del servidor. Usted debe escribir el código de sincronización para estos casos.
    • +
  • Búsqueda de Texto Completo. La API no ofrece un equivalente al operador LIKE en SQL.
    • +
+ +

Adicionalmente, tenga en cuenta que los navegadores podrían eliminar la base de datos, como en las siguientes condiciones:

+ +
    +
  • El usuario pide borrar los datos del navegador.
    + Muchos navegadores tienen opciones que permiten al usuario eliminar todos los datos almacenados de un sitio, incluyendo cookies, marcadores, contraseñas, y datos de IndexedDB.
    • +
  • El navegador está en modo de navegación privada.
    + Algunos navegadores tienen modos de "navegación privada" (Firefox) o "incógnito" (Chrome). Al final de la sesión, el navegador elimina la base de datos.
    • +
  • Se alcanza el límite de espacio en disco.
    • +
  • Los datos se corrompen.
    • +
  • Se realiza un cambio incompatible a ésta característica.
    • +
+ +

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/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html b/files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html deleted file mode 100644 index 34d4fdd438..0000000000 --- a/files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: Conceptos Básicos -slug: Web/API/IndexedDB_API/Conceptos_Basicos_Detras_De_IndexedDB -translation_of: 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:

- -
    -
  • -

    IndexedDB almacena pares llave-valor. Los valores pueden ser objetos con estructuras complejas, y las llaves pueden ser propiedades de esos objetos. Se pueden crear índices que usan cualquier propiedad de los objetos para realizar búsquedas rápidas o enumeraciones ordenadas.

    -
    • -
  • -

    IndexedDB está hecho sobre un modelo de base de datos transaccional. Todo lo que usted haga en IndexedDB siempre ocurre en el contexto de una transacción. La API de IndexedDB provee una gran cantidad de objetos que representan índices, tablas, cursores, y más, pero cada uno de ellos están atados a una transacción particular. Así, usted no puede ejecutar ningún comando o abrir un cursor fuera de una transacción.

    - -

    Las transacciones tienen un período de vida bien definido. Por esta razón, cualquier intento de utilizar una transacción que ya se ha completado ocasionará excepciones. Igualmente, las transacciones aplican los cambios automáticamente y no se puede hacer commit automáticamente.

    - -

    Este modelo de transacciones es realmente útil cuando se considera qué podría pasar si un usuario abre dos instancias de una aplicación simultáneamente en dos pestañas. Sin operaciones transaccionales, las dos instancias podrían hacer que los cambios se pisen o se sobreescriban entre sí. Si no está familiarizado con el concepto de transacción en una base de datos, lea el artículo correspondiente en la Wikipedia y transacción en la sección de definiciones.

    -
    • -
  • -

    La API de IndexedDB es mayormente asincrona. La API no devuelve datos regresando un valor; en cambio, es necesario pasarle una funcion como callback. Usted no "guarda" un valor en la base de datos, o "lee" un valor de la misma por medios síncronos. En cambio, usted "solicita" una operación a la base de datos. Un evento del DOM es utilizado para notificarle que la operación terminó, y el tipo de evento recibido le permite saber si ésta falló o si fue exitosa. Esto puede sonar complicado al comienzo, pero hay algunas medidas de sanidad incluidas por defecto. Esto no es muy distinto de cómo funciona XMLHttpRequest.

    -
    • -
  • -

    IndexedDB usa solicitudes en todos lados. Las solicitudes (requests) son objetos que reciben los eventos del DOM mencionados previamente. Éstas cuentan con las propiedades onsuccess y onerror, sobre las cuales se puede aplicar addEventListener() y removeEventListener(). Estas también tienen las propiedades  readyState, result, y errorCode que permiten conocer el estado de la solicitud. La propiedad result es particularmente mágica, dado que puede ser muchas cosas distintas, dependiendo de cómo se generó la solicitud (por ejemplo, una instancia de IDBCursor, o la llave de un valor recién insertado en la base de datos).

    -
    • -
  • -

    IndexedDB usa eventos DOM para notificar cuando los resultados están disponibles. Los eventos del DOM siempre tienen una propiedad type (en IndexedDB, ésta es generalmente "success" o "error"). Los eventos del DOM también tienen una propiedad target que dice a dónde apunta el evento. En la mayoría de los casos, el target de un evento es el objeto IDBRequest que se generó como resultado de una operación sobre la base de datos. Los eventos exitosos no son pasados a los padres y no pueden ser cancelados. Por otro lado, los eventos de error son pasados a los padres del target y pueden cancelarse. Esto es importante, dado que los eventos de error cancelan cualquier transacción sobre la que estén corriendo a menos que sean cancelados.

    -
    • -
  • -

    IndexedDB es orientada a objetos. IndexedDB no es una base de datos relacional, con tablas, filas y columnas. Esta diferencia fundamental e importante afecta la manera como usted diseña e implementa sus aplicaciones.

    - -

    En un almacén de datos relacional, usted podría tener una tabla que almacena una colección de filas de datos y columnas de tipos de datos con un nombre. IndexedDB, por otro lado, necesita que usted cree un almacén de objetos para un tipo de datos y sencillamente almacena objetos JavaScript en ese almacén. Cada almacén de objetos puede tener una colección de índices que hacen que la iteración y la búsqueda de elementos sea más eficiente. Si usted no está familiarizado con los sistemas de manejo de datos orientados a objetos, lea el artículo de la Wikipedia sobre bases de datos orientadas a objetos.

    -
    • -
  • -

    IndexedDB no utiliza SQL (Structured Query Language). En cambio usa consultas sobre un índice que producen un cursor. Éste puede utilizarse para iterar sobre el conjunto de resultados. Si no está familiarizado con sistemas NoSQL, lea el artículo de Wikipedia sobre NoSQL.

    -
    • -
  • -

    IndexedDB se adhiere a una política de mismo origen. Un orígen es el dominio, protocolo de la capa de aplicación, y el puerto de la URL del documento donde se está ejecutando la aplicación. Cada orígen tiene su propio conjunto de bases de datos asociado. Cada base de datos tiene un nombre que la identifica dentro de un orígen.

    - -

    El límite de seguridad impuesto en IndexedDB prevé que las aplicaciones puedan acceder a datos de un orígen diferente. Por ejemplo, mientras una aplicación en http://www.example.com/app/ puede obtener datos desde http://www.example.com/dir/, debido a que comparten un mismo orígen, esta no puede leer datos desde http://www.example.com:8080/dir/ (puerto distinto) o desde https://www.example.com/dir/ (protocolo distinto), debido a que tienen distintos orígenes.

    -
    • -
- -

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

- -

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

-
-
- -

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:

- -
    -
  • Ordenamiento internacionalizado. No todos los idiomas ordenan las cadenas de la misma forma, por lo que el ordenamiento internacionalizado no está soportado. Aún cuando la base de datos no puede ordenar los datos respetando su idioma, usted puede ordenar los datos obtenidos de la base de datos por su cuenta.
    • -
  • Sincronización. La API no está diseñada para tomar en cuenta la sincronización con una base de datos del lado del servidor. Usted debe escribir el código de sincronización para estos casos.
    • -
  • Búsqueda de Texto Completo. La API no ofrece un equivalente al operador LIKE en SQL.
    • -
- -

Adicionalmente, tenga en cuenta que los navegadores podrían eliminar la base de datos, como en las siguientes condiciones:

- -
    -
  • El usuario pide borrar los datos del navegador.
    - Muchos navegadores tienen opciones que permiten al usuario eliminar todos los datos almacenados de un sitio, incluyendo cookies, marcadores, contraseñas, y datos de IndexedDB.
    • -
  • El navegador está en modo de navegación privada.
    - Algunos navegadores tienen modos de "navegación privada" (Firefox) o "incógnito" (Chrome). Al final de la sesión, el navegador elimina la base de datos.
    • -
  • Se alcanza el límite de espacio en disco.
    • -
  • Los datos se corrompen.
    • -
  • Se realiza un cambio incompatible a ésta característica.
    • -
- -

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/web/api/indexeddb_api/usando_indexeddb/index.html b/files/es/web/api/indexeddb_api/usando_indexeddb/index.html deleted file mode 100644 index ea9d2d879c..0000000000 --- a/files/es/web/api/indexeddb_api/usando_indexeddb/index.html +++ /dev/null @@ -1,1308 +0,0 @@ ---- -title: Usando IndexedDB -slug: Web/API/IndexedDB_API/Usando_IndexedDB -tags: - - API - - Almacenamiento - - Avanzado - - Base de datos - - Guía - - IndexedDB - - Tutorial - - jsstore -translation_of: Web/API/IndexedDB_API/Using_IndexedDB ---- -
-

IndexedDB es una manera de almacenar datos dentro del navegador del usuario. Debido a que permite la creación de aplicaciones con habilidades de consulta enriquecidas, con independencia de la disponibilidad de la red, sus aplicaciones pueden trabajar tanto en línea como fuera de línea.

-
- -

Acerca de este documento

- -

Este tutorial es una guía sobre el uso de la API asíncrona de IndexedDB. Si no está familiarizado con IndexedDB, por favor consulte primero Conceptos Básicos Acerca de IndexedDB.

- -

Para la documentación de referencia sobre la API de IndexedDB, vea el artículo IndexedDB y sus subpaginas, que documentan los tipos de objetos usados por IndexedDB, así como los métodos síncronos y asíncronos. 

- -

Patrones Básicos

- -

El patrón básico que indexedDB propone es:

- -
    -
  1. Abrir una base de datos.
    2. -
  2. Crear un objeto de almacenamiento en la base de datos.
    3. -
  3. Iniciar una transacción y hacer una petición para hacer alguna operación de la base de datos, tal como añadir o recuperar datos.
    4. -
  4. -
    Espere a que se complete la operación por la escucha de la clase correcta de eventos DOM .
    -
    5. -
  5. -
    Hacer algo con el resultado (El cual puede ser encontrado en el objeto de la petición).
    -
    6. -
- -

Con esos grandes rasgos en mente, seremos más concretos.

- -

Creando y estructurando el almacenamiento

- -

Como las especificaciones están todavía elaborandose, las implementaciones actuales de indexedDB dependen de los navegadores. Hasta que la especificación se haya consolidado, los proveedores de navegadores pueden tener diferentes implementaciones de los estandares de indexedDB. Una vez se alcance el consenso en el estandar, los proveedores implementarán la API sin prefijos. En algunas implementaciones ya fueron removidos los prefijos: Internet Explorer 10, Firefox 16, Chrome 24. Cuando utilizan un prefijo, los navegadores basados en gecko usan el prefijo moz , mientras que los navegadores basados en WebKit usan el prefijo webkit.

- -

Usando una versión experimental de IndexedDB

- -

En caso que usted quiera probar su código en navegadores que todavía usen un prefijo, puede usar el siguiente codigo:  

- -
// En la siguiente línea, puede incluir prefijos de implementación que quiera probar.
-window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
-// No use "var indexedDB = ..." Si no está en una función.
-// Por otra parte, puedes necesitar referencias a algun objeto window.IDB*:
-window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
-window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
-// (Mozilla nunca ha prefijado estos objetos, por lo tanto no necesitamos window.mozIDB*)
- -

Hay que tener cuidado con las implementaciones que usan un prefijo ya que puede ser inestables, incompletas, o usen una versión antigua de la especificación. En producción se recomienda usar el código sin prefijos. Es preferible no tener soporte para un navegador a decir que lo tiene y fallar en ello :

- -
if (!window.indexedDB) {
-    window.alert("Su navegador no soporta una versión estable de indexedDB. Tal y como las características no serán validas");
-}
-
- -

Abriendo una base de datos

- -

Iniciamos todo el proceso así:

- -
// dejamos abierta nuestra base de datos
-var request = window.indexedDB.open("MyTestDatabase", 3);
-
- -

¿Lo has visto? Abrir una base de datos es igual que cualquier otra operación — solo tienes que "solicitarla" (request).

- -

La solicitud de apertura no abre la base de datos o inicia la transacción de inmediato. La llamada a la función open() retornan unos objetos IDBOpenDBRequest, cuyo resultado, correcto o erróneo, se maneja en un evento.  Alguna otra función asincrónica en indexedDB hace lo mismo - Devolver un objeto IDBRequest que disparará un evento con el resultado o el error. El resultado para la función de abrir es una instancia de un IDBDatabase.

- -

El segundo parámetro para el método open es la versión de la base de datos. La versión de la base de datos determina el esquema - El almacen de objectos en la base de datos y su estructura. Si la base de datos no existe, es creada y se dispara un evento onupgradeneeded de inmediato, permitiéndote proveer una actualización de la estructura e índices en la función que capture dicho evento. Se verá más adelante en  Actualizando la versión de la base de datos. 

- -
-

Importante: El número de versión es un unsigned long. Por lo tanto significa que puede ser un entero muy grande. También significa que si usas un flotante será convertido en un entero más cercano y la transacción puede no ser iniciada, el evento upgradeneeded no se desencadenará. Por ejemplo no use 2.4 como un número de versión ya que será igual que la 2:

- -
var request = indexedDB.open("MyTestDatabase", 2.4); // Esto no se hace, la versión será redondeada a 2
-
- -

Generando manipuladores

- -

La primera cosa que usted querrá hacer con la totalidad de las peticiones que usted genera es agregar controladores de éxito y de error:

- -
request.onerror = function(event) {
-  // Hacer algo con request.errorCode!
-};
-request.onsuccess = function(event) {
-  // Hacer algo con request.result!
-};
- -

¿Cuál de las dos funciones, onSuccess () o onerror (), se vuelve a llamar? Si todo tiene éxito, un evento de éxito (es decir, un evento DOM cuya propiedad tipo se establece en el "éxito") se dispara con la solicitud como su objetivo. Una vez que se dispara, la función onSuccess () a petición se activa con el evento de éxito como argumento. De lo contrario, si había algún problema, un evento de error (es decir, un evento DOM cuyo tipo de propiedad se establece en "error") se dispara a petición. Esto desencadena la función onerror () con el evento de error como argumento.

- -

La API IndexedDB está diseñada para minimizar la necesidad de control de errores, por lo que no es probable que veamos muchos eventos de error (al menos, no una vez que estás acostumbrado a la API). En el caso de la apertura de una base de datos, sin embargo, hay algunas condiciones comunes que generan eventos de error. El problema más común se produce cuando el usuario ha decidido no dar, a su aplicación web, el permiso para crear una base de datos. Uno de los principales objetivos de diseño de IndexedDB es permitir que grandes cantidades de datos se almacenen para su uso sin conexión a internet. (Para obtener más información sobre la cantidad de almacenamiento que puede tener para cada navegador, consulte Límites de almacenamiento.)  

- -

Obviamente, los navegadores no permitirán que alguna red de publicidad o sitio web malicioso pueda contaminar su ordenador, por ello los navegadores utilizan un diálogo para indicar al usuario la primera vez que cualquier aplicación web determinada intente abrir una IndexedDB para el almacenamiento. El usuario puede optar por permitir o denegar el acceso. Además, el almacenamiento IndexedDB en los modos de privacidad navegadores sólo dura en memoria hasta que la sesión de incógnito haya sido cerrada (modo de navegación privada para el modo de Firefox e Incognito para Chrome, pero en Firefox no está implementado a partir de noviembre 2015 por lo que no puede utilizar IndexedDB en Firefox navegación privada en absoluto).

- -

Ahora, asumiendo que el usuario acepta su solicitud para crear una base de datos, y que ha recibido un evento de éxito para activar la devolución de llamada de éxito; ¿Que sigue? La solicitud aquí se generó con una llamada a indexedDB.open (), por lo request.result es una instancia de IDBDatabase, y que sin duda quieren ahorrar para más adelante. Su código podría ser algo como esto:

- -
var db;
-var request = indexedDB.open("MyTestDatabase");
-request.onerror = function(event) {
-  alert("Why didn't you allow my web app to use IndexedDB?!");
-};
-request.onsuccess = function(event) {
-  db = request.result;
-};
-
- -

Manejando errores

- -

Como se mencionó anteriormente, los eventos de error de burbujas. Eventos de error se dirigen a la solicitud que generó el error, entonces el evento se propaga a la operación, y finalmente con el objeto de base de datos. Si desea evitar la adición de controladores de errores a cada solicitud, en su lugar puede añadir un solo controlador de errores en el objeto de base de datos, así:

- -
db.onerror = function(event) {
-  // Generic error handler for all errors targeted at this database's
-  // requests!
-  alert("Database error: " + event.target.errorCode);
-};
-
- -

Uno de los errores más comunes posibles al abrir una base de datos es VER_ERR. Indica que la versión de la base de datos almacenada en el disco es mayor que la versión que está intentando abrir. Este es un caso de error que siempre debe ser manejado por el gestor de errores.

- -

Creación o actualización de la versión de la base de datos

- -

Cuando se crea una nueva base de datos o se aumenta el número de versión de una base de datos existente (mediante la especificación de un número de versión más alto de lo que hizo antes, en {{anch ("Cómo abrir una base de datos")}}), el evento onupgradeneeded se activará y un objeto IDBVersionChangeEvent será pasado a cualquier controlador de eventos onversionchange establecido en request.result (es decir, db en el ejemplo). En el controlador para el evento upgradeneeded, se debe crear los almacenes de objetos necesarios para esta versión de la base de datos:

- -
// Este evento solamente está implementado en navegadores recientes
-request.onupgradeneeded = function(event) {
-  var db = event.target.result;
-
-  // Crea un almacén de objetos (objectStore) para esta base de datos
-  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
-};
- -

En este caso, la base de datos ya tendrá los almacenes de objetos de la versión anterior de la base de datos, por lo que no tiene que crear estos almacenes de objetos de nuevo. Sólo es necesario crear nuevos almacenes de objetos, o eliminar las tiendas de objetos de la versión anterior que ya no son necesarios. Si necesita cambiar un almacén de objetos existentes (por ejemplo, para cambiar la ruta de acceso clave keyPath), entonces se debe eliminar el antiguo almacén de objetos y crear de nuevo con las nuevas opciones. (Tenga en cuenta que esto borrará la información en el almacén de objetos Si usted necesita guardar esa información, usted debe leerlo y guardarlo en otro lugar antes de actualizar la base de datos.)

- -

Tratar de crear un almacén de objetos con un nombre que ya existe (o tratando de eliminar un almacén de objetos con un nombre que no existe) lanzará un error.

- -

Si el evento onupgradeneeded retorna éxito, entonces se activará el manejador onsuccess de la solicitud de base de datos abierta.

- -

Blink / Webkit soportan la versión actual de la especificación, tal como fue liberado en Chrome 23+ y Opera 17+ ; IE10+ también lo soporta. Implementaciones mas viejas o distintas no implementan la versión actual de la especificación, y por lo tanto no son compatibles todavía con el indexedDB.open (nombre, versión).onupgradeneeded . Para obtener más información sobre cómo actualizar la versión de la base de datos en Webkit/Blink mas viejos, consulte el artículo de referencia IDBDatabase.

- -

Estructuración de la base de datos

- -

Ahora para estructurar la base de datos. IndexedDB usa almacenes de datos (object stores) en lugar de tablas, y una base de datos puede contener cualquier número de almacenes. Cuando un valor es almacenado, se le asocia con una clave. Existen diversas maneras en que una clave pude ser indicada dependiendo de si el almacén usa una ruta de clave o generador.

- -

La siguiente table muetra las distintas formas en que las claves pueden ser indicadas:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ruta de clave(keyPath)Generador de clave (autoIncrement)Descripción
NoNoEste almacén puede contener cualquier tipo de valor, incluso valores primitivos como números y cadenas. Se debe indicar un argumento de clave distinto cada vez que se agregue un nuevo valor.
SiNoEste almacén de objetos solo puede contener objetos de JavaScript. Los objetos deben tener una propiedad con el mismo nombre que la ruta de clave.
NoSiEste objeto puede contener cualquier tipo de valor. La clave es generada automáticamente, o se puede indicar un argumento de clave distinto si se quiere usar una clave específica.
SiSi -

Este almacén de objetos solo puede contener objetos de JavaScript. Usualmente una clave es generada y dicho valor es almacenado en el objeto en una propiedad con el mismo nombre que la ruta de clave. Sin embargo, si dicha propiedad ya existe en el objeto, el valor de esa propuiedad es usado como clave en lugar de generar una nueva.

-
- -

También se puede crear índices en cualquer almacén de objetos, siempre y cuando el almacén contenga objets, y no primitivos. Un índice permite buscar valores contenidos en el almacén usando el valor de una propiedad del objeto almacenado, en lugar de la clave del mismo.

- -

Adicionalmente, los índices tienen la habilidad para hacer cumplir restricciones simples en los datos almacendos. Al indicar la bandera unique al crear el índice, el índice asegurará que no se puedan almacenar dos objetos que tengan el mismo valor para la clave del índice. Así, por ejemplo si se tiene un almacén de objetos que contiene un set de personas, y se desea asegurar que no existan dos personas con el mismo email, se puede usar un índice con la bandera unique activada para forzar esto.

- -

Esto puede sonar confuso, pero un ejemplo simple debe ilustrar el concepto. Primero, definiremos alguna información de clientes para usar en nuestro ejemplo:

- -
// Así se ve nuestra información de clientes.
-const customerData = [
-  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
-  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
-];
-
- -

Ahora, creemos una IndexedDB para almacenar los datos:

- -
const dbName = "the_name";
-
-var request = indexedDB.open(dbName, 2);
-
-request.onerror = function(event) {
-  // Manejar errores.
-};
-request.onupgradeneeded = function(event) {
-  var db = event.target.result;
-
-  // Se crea un almacén para contener la información de nuestros cliente
-  // Se usará "ssn" como clave ya que es garantizado que es única
-  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
-
-  // Se crea un índice para buscar clientes por nombre. Se podrían tener duplicados
-  // por lo que no se puede usar un índice único.
-  objectStore.createIndex("name", "name", { unique: false });
-
-  // Se crea un índice para buscar clientespor email. Se quiere asegurar que
-  // no puedan haberdos clientes con el mismo email, asi que se usa un índice único.
-  objectStore.createIndex("email", "email", { unique: true });
-
-  // Se usa transaction.oncomplete para asegurarse que la creación del almacén
-  // haya finalizado antes de añadir los datos en el.
-  objectStore.transaction.oncomplete = function(event) {
-    // Guarda los datos en el almacén recién creado.
-    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
-    for (var i in customerData) {
-      customerObjectStore.add(customerData[i]);
-    }
-  }
-};
-
- -

Como se indicó previamente, onupgradeneeded es el único lugar donde se puede alterar la estructura de la base de datos. En el, se puede crear y borrar almacenes de objetos y construir y remover índices.

- -
Los almacenes de datos son creados con una llamada a  createObjectStore(). El método toma como parámetros el nombre del almacén y un objeto.  A pesar de que el segundo parámetro es opcional, es muy importante, porque permite definir propiedades opcionales importantes y refinar el tipo de almacén que se desea crear. En este caso, se pregunta por un almacén llamado "customers" y se define la clave, que es la propiedad que indica que un objeto en el almacén es único. La propiedad en este ejemplo es "ssn" (Social Security Number) ya que los números de seguridad social está garantizado que sea único. "ssn" debe estar presente en cada objeto que se guarda al almacén.
- -

También se solicitó crear un índice llamado "name" que se fija en la propiedad name de los objetos almacenados. Así como con createObjectStore(), createIndex() toma un objeto opcional options que refina el tipo de índice que se desea crear. Agregar objetos que no tengan una propiedad name funcionará, pero los objetos no aparecerán en el índice "name"

- -
Ahora se pueden obtener los clientes almacenados usando su ssn directamente del almacen, o usando su nombre a través del índice. Para aprender como hacer esto, vea la sección El uso de un índice
- -

El uso de un generador de claves

- -

Indicar la bandera autoIncrement  cuando se crea el almacén habilitará el generador de claves para dicho almacén. Por defecto esta bandera no está marcada.

- -

Con el generador de claves, la clave será generada automáticamente a medida que se agreguen valores al almacén. El número actual de un generador de claves siempre se establece en 1 cuando se creal el almacén por primera vez. Básicamente la nueva clave autogenerada es incrementada en 1 basada en la llave anterior. El numero actual para un generador de claves nunca disminuye, salvo como resultado de operaciones de base de datos  que sean revertidos, por ejemplo, cuando la transacción de base de datos es abortada. Por lo tanto borrar un registro o incluso borrar todos los registros de un almacén nunca afecta al generador de claves

- -

Se puede crear otro almacén de objetos con generador de claves como se muestra abajo:

- -
// Abrir la indexedDB.
-var request = indexedDB.open(dbName, 3);
-
-request.onupgradeneeded = function (event) {
-
-    var db = event.target.result;
-
-    // Create another object store called "names" with the autoIncrement flag set as true.
-    var objStore = db.createObjectStore("names", { autoIncrement : true });
-
-    // Because the "names" object store has the key generator, the key for the name value is generated automatically.
-    // The added records would be like:
-    // key : 1 => value : "Bill"
-    // key : 2 => value : "Donna"
-    for (var i in customerData) {
-        objStore.add(customerData[i].name);
-    }
-}
- -

Para más detalles acerca del generador de claves, por favor ver "W3C Key Generators".

- -

Añadir, recuperación y eliminación de datos

- -

Antes que haga algo con su nueva base de datos , necesita comenzar una transacción. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Once you are inside the transaction, you can access the object stores that hold your data and make your requests. Next, you need to decide if you're going to make changes to the database or if you just need to read from it. Transactions have three available modes: readonly, readwrite, and versionchange.

- -

To change the "schema" or structure of the database—which involves creating or deleting object stores or indexes—the transaction must be in versionchange mode. This transaction is opened by calling the {{domxref("IDBFactory.open")}} method with a version specified. (In WebKit browsers, which have not implemented the latest specifcation, the {{domxref("IDBFactory.open")}} method takes only one parameter, the name of the database; then you must call {{domxref("IDBVersionChangeRequest.setVersion")}} to establish the versionchange transaction.)

- -

To read the records of an existing object store, the transaction can either be in readonly or readwrite mode. To make changes to an existing object store, the transaction must be in readwrite mode. You open such transactions with {{domxref("IDBDatabase.transaction")}}. The method accepts two parameters: the storeNames (the scope, defined as an array of object stores that you want to access) and the mode (readonly or readwrite) for the transaction. The method returns a transaction object containing the {{domxref("IDBIndex.objectStore")}} method, which you can use to access your object store. By default, where no mode is specified, transactions open in readonly mode.

- -

You can speed up data access by using the right scope and mode in the transaction. Here are a couple of tips:

- -
    -
  • When defining the scope, specify only the object stores you need. This way, you can run multiple transactions with non-overlapping scopes concurrently.
    • -
  • Only specify a readwrite transaction mode when necessary. You can concurrently run multiple readonly transactions with overlapping scopes, but you can have only one readwrite transaction for an object store. To learn more, see the definition for transactions in the Basic Concepts article.
    • -
- -

Agregar datos a la base de datos

- -

If you've just created a database, then you probably want to write to it. Here's what that looks like:

- -
var transaction = db.transaction(["customers"], "readwrite");
-// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite".
-// In case you want to support such an implementation, you can write:
-// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);
- -

The transaction() function takes two arguments (though one is optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores, but don't do it because the spec says an empty array should generate an InvalidAccessError. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the "readwrite" flag.

- -

Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing TRANSACTION_INACTIVE_ERR error codes then you've messed something up.

- -

Transactions can receive DOM events of three different types: error, abort, and complete. We've talked about the way that error events bubble, so a transaction receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by first calling preventDefault() on the error event then doing something else, the entire transaction is rolled back. This design forces you to think about and handle errors, but you can always add a catchall error handler to the database if fine-grained error handling is too cumbersome. If you don't handle an error event or if you call abort() on the transaction, then the transaction is rolled back and an abort event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a complete event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aid your sanity.

- -

Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.

- -
// Do something when all the data is added to the database.
-transaction.oncomplete = function(event) {
-  alert("All done!");
-};
-
-transaction.onerror = function(event) {
-  // Don't forget to handle errors!
-};
-
-var objectStore = transaction.objectStore("customers");
-for (var i in customerData) {
-  var request = objectStore.add(customerData[i]);
-  request.onsuccess = function(event) {
-    // event.target.result == customerData[i].ssn;
-  };
-}
- -

The result of a request generated from a call to add() is the key of the value that was added. So in this case, it should equal the ssn property of the object that was added, since the object store uses the ssn property for the key path. Note that the add() function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, you can use the put() function, as shown below in the {{ anch("Updating an entry in the database") }} section.

- -

Extracción de datos de la base de datos

- -

Removing data is very similar:

- -
var request = db.transaction(["customers"], "readwrite")
-                .objectStore("customers")
-                .delete("444-44-4444");
-request.onsuccess = function(event) {
-  // It's gone!
-};
- -

Obtener datos de la base de datos

- -

Now that the database has some info in it, you can retrieve it in several ways. First, the simple get(). You need to provide the key to retrieve the value, like so:

- -
var transaction = db.transaction(["customers"]);
-var objectStore = transaction.objectStore("customers");
-var request = objectStore.get("444-44-4444");
-request.onerror = function(event) {
-  // Handle errors!
-};
-request.onsuccess = function(event) {
-  // Do something with the request.result!
-  alert("Name for SSN 444-44-4444 is " + request.result.name);
-};
- -

That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:

- -
db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
-  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
-};
- -

See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a "readwrite" transaction. Calling transaction() with no mode specified gives you a "readonly" transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the result property.

- -
-

Note: You can speed up data access by limiting the scope and mode in the transaction. Here are a couple of tips:

- -
    -
  • -

    When defining the scope, specify only the object stores you need. This way, you can run multiple transactions with non-overlapping scopes concurrently.

    -
    • -
  • -

    Only specify a readwrite transaction mode when necessary. You can concurrently run multiple readonly transactions with overlapping scopes, but you can have only one readwrite transaction for an object store. To learn more, see the definition for transactions in the Basic Concepts article.

    -
    • -
-
- -

Actualización de una entrada en la base de datos

- -

Now we've retrieved some data, updating it and inserting it back into the IndexedDB is pretty simple. Let's update the previous example somewhat:

- -
var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers");
-var request = objectStore.get("444-44-4444");
-request.onerror = function(event) {
-  // Handle errors!
-};
-request.onsuccess = function(event) {
-  // Get the old value that we want to update
-  var data = request.result;
-
-  // update the value(s) in the object that you want to change
-  data.age = 42;
-
-  // Put this updated object back into the database.
-  var requestUpdate = objectStore.put(data);
-   requestUpdate.onerror = function(event) {
-     // Do something with the error
-   };
-   requestUpdate.onsuccess = function(event) {
-     // Success - the data is updated!
-   };
-};
- -

So here we're creating an objectStore and requesting a customer record out of it, identified by its ssn value (444-44-4444). We then put the result of that request in a variable (data), update the age property of this object, then create a second request (requestUpdate) to put the customer record back into the objectStore, overwriting the previous value.

- -
-

Note that in this case we've had to specify a readwrite transaction because we want to write to the database, not just read out of it.

-
- -

El uso de un cursor

- -

Using get() requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:

- -
var objectStore = db.transaction("customers").objectStore("customers");
-
-objectStore.openCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
-    cursor.continue();
-  }
-  else {
-    alert("No more entries!");
-  }
-};
- -

The openCursor() function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the result of the request (above we're using the shorthand, so it's event.target.result). Then the actual key and value can be found on the key and value properties of the cursor object. If you want to keep going, then you have to call continue() on the cursor. When you've reached the end of the data (or if there were no entries that matched your openCursor() request) you still get a success callback, but the result property is undefined.

- -

One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:

- -
var customers = [];
-
-objectStore.openCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    customers.push(cursor.value);
-    cursor.continue();
-  }
-  else {
-    alert("Got all customers: " + customers);
-  }
-};
- -
-

Note: Mozilla has also implemented getAll() to handle this case (and getAllKeys(), which is currently hidden behind the dom.indexedDB.experimental preference in about:config). these aren't part of the IndexedDB standard, so may disappear in the future. We've included them because we think they're useful. The following code does precisely the same thing as above:

- -
objectStore.getAll().onsuccess = function(event) {
-  alert("Got all customers: " + event.target.result);
-};
- -

There is a performance cost associated with looking at the value property of a cursor, because the object is created lazily. When you use getAll() for example, Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use getAll(). If you're trying to get an array of all the objects in an object store, though, use getAll().

-
- -

El uso de un índice

- -

Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, and outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.

- -
var index = objectStore.index("name");
-index.get("Donna").onsuccess = function(event) {
-  alert("Donna's SSN is " + event.target.result.ssn);
-};
- -

The "name" cursor isn't unique, so there could be more than one entry with the name set to "Donna". In that case you always get the one with the lowest key value.

- -

If you need to access all the entries with a given name you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:

- -
// Using a normal cursor to grab whole customer record objects
-index.openCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
-    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
-    cursor.continue();
-  }
-};
-
-// Using a key cursor to grab customer record object keys
-index.openKeyCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
-    // No way to directly get the rest of the stored object.
-    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
-    cursor.continue();
-  }
-};
- -

Especificación de la gama y la dirección de los cursores

- -

If you would like to limit the range of values you see in a cursor, you can use an IDBKeyRange object and pass it as the first argument to openCursor() or openKeyCursor(). You can make a key range that only allows a single key, or one that has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value(s)) or "open" (i.e., the key range does not include the given value(s)). Here's how it works:

- -
// Only match "Donna"
-var singleKeyRange = IDBKeyRange.only("Donna");
-
-// Match anything past "Bill", including "Bill"
-var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
-
-// Match anything past "Bill", but don't include "Bill"
-var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
-
-// Match anything up to, but not including, "Donna"
-var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
-
-// Match anything between "Bill" and "Donna", but not including "Donna"
-var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
-
-// To use one of the key ranges, pass it in as the first argument of openCursor()/openKeyCursor()
-index.openCursor(boundKeyRange).onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Do something with the matches.
-    cursor.continue();
-  }
-};
- -

Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing prev to the openCursor() function as the second argument:

- -
objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Do something with the entries.
-    cursor.continue();
-  }
-};
- -

If you just want to specify a change of direction but not constrain the results shown, you can just pass in null as the first argument:

- -
objectStore.openCursor(null, "prev").onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Do something with the entries.
-    cursor.continue();
-  }
-};
- -

Since the "name" index isn't unique, there might be multiple entries where name is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass nextunique (or prevunique if you're going backwards) as the direction parameter. When nextunique or prevunique is used, the entry with the lowest key is always the one returned.

- -
index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Do something with the entries.
-    cursor.continue();
-  }
-};
- -

Please see "IDBCursor Constants" for the valid direction arguments.

- -

Cambios Versión mientras que una aplicación web está abierto en otra pestaña

- -

When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call open() with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database (an onblocked event is fired until tey are closed or reloaded). Here's how it works:

- -
var openReq = mozIndexedDB.open("MyTestDatabase", 2);
-
-openReq.onblocked = function(event) {
-  // If some other tab is loaded with the database, then it needs to be closed
-  // before we can proceed.
-  alert("Please close all other tabs with this site open!");
-};
-
-openReq.onupgradeneeded = function(event) {
-  // All other databases have been closed. Set everything up.
-  db.createObjectStore(/* ... */);
-  useDatabase(db);
-}
-
-openReq.onsuccess = function(event) {
-  var db = event.target.result;
-  useDatabase(db);
-  return;
-}
-
-function useDatabase(db) {
-  // Make sure to add a handler to be notified if another page requests a version
-  // change. We must close the database. This allows the other page to upgrade the database.
-  // If you don't do this then the upgrade won't happen until the user closes the tab.
-  db.onversionchange = function(event) {
-    db.close();
-    alert("A new version of this page is ready. Please reload!");
-  };
-
-  // Do stuff with the database.
-}
-
- -

Seguridad

- -

IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.

- -

It's important to note that IndexedDB doesn't work for content loaded into a frame from another site (either {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. This is a security and privacy measure and can be considered analogous the blocking of third-party cookies. For more details, see {{ bug(595307) }}.

- -

Warning About Browser Shutdown

- -

When the browser shuts down (e.g., when the user selects Exit or clicks the Close button), any pending IndexedDB transactions are (silently) aborted — they will not complete, and they will not trigger the error handler. Since the user can exit the browser at any time, this means that you cannot rely upon any particular transaction to complete or to know that it did not complete. There are several implications of this behavior.

- -

First, you should take care to always leave your database in a consistent state at the end of every transaction. For example, suppose that you are using IndexedDB to store a list of items that you allow the user to edit. You save the list after the edit by clearing the object store and then writing out the new list. If you clear the object store in one transaction and write the new list in another transaction, there is a danger that the browser will close after the clear but before the write, leaving you with an empty database. To avoid this, you should combine the clear and the write into a single transaction. 

- -

Second, you should never tie database transactions to unload events. If the unload event is triggered by the browser closing, any transactions created in the unload event handler will never complete. An intuitive approach to maintaining some information across browser sessions is to read it from the database when the browser (or a particular page) is opened, update it as the user interacts with the browser, and then save it to the database when the browser (or page) closes. However, this will not work. The database transactions will be created in the unload event handler, but because they are asynchronous they will be aborted before they can execute.

- -

In fact, there is no way to guarantee that IndexedDB transactions will complete, even with normal browser shutdown. See {{ bug(870645) }}.

- -

Full IndexedDB example

- -

HTML Content

- -
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
-
-    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
-    <div class="note">
-      <p>
-        Works and tested with:
-      </p>
-      <div id="compat">
-      </div>
-    </div>
-
-    <div id="msg">
-    </div>
-
-    <form id="register-form">
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-title" class="required">
-                Title:
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-title" name="pub-title" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-biblioid" class="required">
-                Bibliographic ID:<br/>
-                <span class="note">(ISBN, ISSN, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-year">
-                Year:
-              </label>
-            </td>
-            <td>
-              <input type="number" id="pub-year" name="pub-year" />
-            </td>
-          </tr>
-        </tbody>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-file">
-                File image:
-              </label>
-            </td>
-            <td>
-              <input type="file" id="pub-file"/>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-file-url">
-                Online-file image URL:<br/>
-                <span class="note">(same origin URL)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-file-url" name="pub-file-url"/>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <div class="button-pane">
-        <input type="button" id="add-button" value="Add Publication" />
-        <input type="reset" id="register-form-reset"/>
-      </div>
-    </form>
-
-    <form id="delete-form">
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-biblioid-to-delete">
-                Bibliographic ID:<br/>
-                <span class="note">(ISBN, ISSN, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-biblioid-to-delete"
-                     name="pub-biblioid-to-delete" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="key-to-delete">
-                Key:<br/>
-                <span class="note">(for example 1, 2, 3, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="key-to-delete"
-                     name="key-to-delete" />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="button-pane">
-        <input type="button" id="delete-button" value="Delete Publication" />
-        <input type="button" id="clear-store-button"
-               value="Clear the whole store" class="destructive" />
-      </div>
-    </form>
-
-    <form id="search-form">
-      <div class="button-pane">
-        <input type="button" id="search-list-button"
-               value="List database content" />
-      </div>
-    </form>
-
-    <div>
-      <div id="pub-msg">
-      </div>
-      <div id="pub-viewer">
-      </div>
-      <ul id="pub-list">
-      </ul>
-    </div>
-
- -

CSS Content

- -
body {
-  font-size: 0.8em;
-  font-family: Sans-Serif;
-}
-
-form {
-  background-color: #cccccc;
-  border-radius: 0.3em;
-  display: inline-block;
-  margin-bottom: 0.5em;
-  padding: 1em;
-}
-
-table {
-  border-collapse: collapse;
-}
-
-input {
-  padding: 0.3em;
-  border-color: #cccccc;
-  border-radius: 0.3em;
-}
-
-.required:after {
-  content: "*";
-  color: red;
-}
-
-.button-pane {
-  margin-top: 1em;
-}
-
-#pub-viewer {
-  float: right;
-  width: 48%;
-  height: 20em;
-  border: solid #d092ff 0.1em;
-}
-#pub-viewer iframe {
-  width: 100%;
-  height: 100%;
-}
-
-#pub-list {
-  width: 46%;
-  background-color: #eeeeee;
-  border-radius: 0.3em;
-}
-#pub-list li {
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-  padding-right: 0.5em;
-}
-
-#msg {
-  margin-bottom: 1em;
-}
-
-.action-success {
-  padding: 0.5em;
-  color: #00d21e;
-  background-color: #eeeeee;
-  border-radius: 0.2em;
-}
-
-.action-failure {
-  padding: 0.5em;
-  color: #ff1408;
-  background-color: #eeeeee;
-  border-radius: 0.2em;
-}
-
-.note {
-  font-size: smaller;
-}
-
-.destructive {
-  background-color: orange;
-}
-.destructive:hover {
-  background-color: #ff8000;
-}
-.destructive:active {
-  background-color: red;
-}
-
- -

 

- -

JavaScript Content

- -
(function () {
-  var COMPAT_ENVS = [
-    ['Firefox', ">= 16.0"],
-    ['Google Chrome',
-     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
-  ];
-  var compat = $('#compat');
-  compat.empty();
-  compat.append('<ul id="compat-list"></ul>');
-  COMPAT_ENVS.forEach(function(val, idx, array) {
-    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
-  });
-
-  const DB_NAME = 'mdn-demo-indexeddb-epublications';
-  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
-  const DB_STORE_NAME = 'publications';
-
-  var db;
-
-  // Used to keep track of which view is displayed to avoid uselessly reloading it
-  var current_view_pub_key;
-
-  function openDb() {
-    console.log("openDb ...");
-    var req = indexedDB.open(DB_NAME, DB_VERSION);
-    req.onsuccess = function (evt) {
-      // Better use "this" than "req" to get the result to avoid problems with
-      // garbage collection.
-      // db = req.result;
-      db = this.result;
-      console.log("openDb DONE");
-    };
-    req.onerror = function (evt) {
-      console.error("openDb:", evt.target.errorCode);
-    };
-
-    req.onupgradeneeded = function (evt) {
-      console.log("openDb.onupgradeneeded");
-      var store = evt.currentTarget.result.createObjectStore(
-        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
-
-      store.createIndex('biblioid', 'biblioid', { unique: true });
-      store.createIndex('title', 'title', { unique: false });
-      store.createIndex('year', 'year', { unique: false });
-    };
-  }
-
-  /**
-   * @param {string} store_name
-   * @param {string} mode either "readonly" or "readwrite"
-   */
-  function getObjectStore(store_name, mode) {
-    var tx = db.transaction(store_name, mode);
-    return tx.objectStore(store_name);
-  }
-
-  function clearObjectStore(store_name) {
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req = store.clear();
-    req.onsuccess = function(evt) {
-      displayActionSuccess("Store cleared");
-      displayPubList(store);
-    };
-    req.onerror = function (evt) {
-      console.error("clearObjectStore:", evt.target.errorCode);
-      displayActionFailure(this.error);
-    };
-  }
-
-  function getBlob(key, store, success_callback) {
-    var req = store.get(key);
-    req.onsuccess = function(evt) {
-      var value = evt.target.result;
-      if (value)
-        success_callback(value.blob);
-    };
-  }
-
-  /**
-   * @param {IDBObjectStore=} store
-   */
-  function displayPubList(store) {
-    console.log("displayPubList");
-
-    if (typeof store == 'undefined')
-      store = getObjectStore(DB_STORE_NAME, 'readonly');
-
-    var pub_msg = $('#pub-msg');
-    pub_msg.empty();
-    var pub_list = $('#pub-list');
-    pub_list.empty();
-    // Resetting the iframe so that it doesn't display previous content
-    newViewerFrame();
-
-    var req;
-    req = store.count();
-    // Requests are executed in the order in which they were made against the
-    // transaction, and their results are returned in the same order.
-    // Thus the count text below will be displayed before the actual pub list
-    // (not that it is algorithmically important in this case).
-    req.onsuccess = function(evt) {
-      pub_msg.append('<p>There are <strong>' + evt.target.result +
-                     '</strong> record(s) in the object store.</p>');
-    };
-    req.onerror = function(evt) {
-      console.error("add error", this.error);
-      displayActionFailure(this.error);
-    };
-
-    var i = 0;
-    req = store.openCursor();
-    req.onsuccess = function(evt) {
-      var cursor = evt.target.result;
-
-      // If the cursor is pointing at something, ask for the data
-      if (cursor) {
-        console.log("displayPubList cursor:", cursor);
-        req = store.get(cursor.key);
-        req.onsuccess = function (evt) {
-          var value = evt.target.result;
-          var list_item = $('<li>' +
-                            '[' + cursor.key + '] ' +
-                            '(biblioid: ' + value.biblioid + ') ' +
-                            value.title +
-                            '</li>');
-          if (value.year != null)
-            list_item.append(' - ' + value.year);
-
-          if (value.hasOwnProperty('blob') &&
-              typeof value.blob != 'undefined') {
-            var link = $('<a href="' + cursor.key + '">File</a>');
-            link.on('click', function() { return false; });
-            link.on('mouseenter', function(evt) {
-                      setInViewer(evt.target.getAttribute('href')); });
-            list_item.append(' / ');
-            list_item.append(link);
-          } else {
-            list_item.append(" / No attached file");
-          }
-          pub_list.append(list_item);
-        };
-
-        // Move on to the next object in store
-        cursor.continue();
-
-        // This counter serves only to create distinct ids
-        i++;
-      } else {
-        console.log("No more entries");
-      }
-    };
-  }
-
-  function newViewerFrame() {
-    var viewer = $('#pub-viewer');
-    viewer.empty();
-    var iframe = $('<iframe />');
-    viewer.append(iframe);
-    return iframe;
-  }
-
-  function setInViewer(key) {
-    console.log("setInViewer:", arguments);
-    key = Number(key);
-    if (key == current_view_pub_key)
-      return;
-
-    current_view_pub_key = key;
-
-    var store = getObjectStore(DB_STORE_NAME, 'readonly');
-    getBlob(key, store, function(blob) {
-      console.log("setInViewer blob:", blob);
-      var iframe = newViewerFrame();
-
-      // It is not possible to set a direct link to the
-      // blob to provide a mean to directly download it.
-      if (blob.type == 'text/html') {
-        var reader = new FileReader();
-        reader.onload = (function(evt) {
-          var html = evt.target.result;
-          iframe.load(function() {
-            $(this).contents().find('html').html(html);
-          });
-        });
-        reader.readAsText(blob);
-      } else if (blob.type.indexOf('image/') == 0) {
-        iframe.load(function() {
-          var img_id = 'image-' + key;
-          var img = $('<img id="' + img_id + '"/>');
-          $(this).contents().find('body').html(img);
-          var obj_url = window.URL.createObjectURL(blob);
-          $(this).contents().find('#' + img_id).attr('src', obj_url);
-          window.URL.revokeObjectURL(obj_url);
-        });
-      } else if (blob.type == 'application/pdf') {
-        $('*').css('cursor', 'wait');
-        var obj_url = window.URL.createObjectURL(blob);
-        iframe.load(function() {
-          $('*').css('cursor', 'auto');
-        });
-        iframe.attr('src', obj_url);
-        window.URL.revokeObjectURL(obj_url);
-      } else {
-        iframe.load(function() {
-          $(this).contents().find('body').html("No view available");
-        });
-      }
-
-    });
-  }
-
-  /**
-   * @param {string} biblioid
-   * @param {string} title
-   * @param {number} year
-   * @param {string} url the URL of the image to download and store in the local
-   *   IndexedDB database. The resource behind this URL is subjected to the
-   *   "Same origin policy", thus for this method to work, the URL must come from
-   *   the same origin as the web site/app this code is deployed on.
-   */
-  function addPublicationFromUrl(biblioid, title, year, url) {
-    console.log("addPublicationFromUrl:", arguments);
-
-    var xhr = new XMLHttpRequest();
-    xhr.open('GET', url, true);
-    // Setting the wanted responseType to "blob"
-    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
-    xhr.responseType = 'blob';
-    xhr.onload = function (evt) {
-                           if (xhr.status == 200) {
-                             console.log("Blob retrieved");
-                             var blob = xhr.response;
-                             console.log("Blob:", blob);
-                             addPublication(biblioid, title, year, blob);
-                           } else {
-                             console.error("addPublicationFromUrl error:",
-                                           xhr.responseText, xhr.status);
-                           }
-                         };
-    xhr.send();
-
-    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
-    // responseType is not handled.
-    // http://bugs.jquery.com/ticket/11461
-    // http://bugs.jquery.com/ticket/7248
-    // $.ajax({
-    //   url: url,
-    //   type: 'GET',
-    //   xhrFields: { responseType: 'blob' },
-    //   success: function(data, textStatus, jqXHR) {
-    //     console.log("Blob retrieved");
-    //     console.log("Blob:", data);
-    //     // addPublication(biblioid, title, year, data);
-    //   },
-    //   error: function(jqXHR, textStatus, errorThrown) {
-    //     console.error(errorThrown);
-    //     displayActionFailure("Error during blob retrieval");
-    //   }
-    // });
-  }
-
-  /**
-   * @param {string} biblioid
-   * @param {string} title
-   * @param {number} year
-   * @param {Blob=} blob
-   */
-  function addPublication(biblioid, title, year, blob) {
-    console.log("addPublication arguments:", arguments);
-    var obj = { biblioid: biblioid, title: title, year: year };
-    if (typeof blob != 'undefined')
-      obj.blob = blob;
-
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req;
-    try {
-      req = store.add(obj);
-    } catch (e) {
-      if (e.name == 'DataCloneError')
-        displayActionFailure("This engine doesn't know how to clone a Blob, " +
-                             "use Firefox");
-      throw e;
-    }
-    req.onsuccess = function (evt) {
-      console.log("Insertion in DB successful");
-      displayActionSuccess();
-      displayPubList(store);
-    };
-    req.onerror = function() {
-      console.error("addPublication error", this.error);
-      displayActionFailure(this.error);
-    };
-  }
-
-  /**
-   * @param {string} biblioid
-   */
-  function deletePublicationFromBib(biblioid) {
-    console.log("deletePublication:", arguments);
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req = store.index('biblioid');
-    req.get(biblioid).onsuccess = function(evt) {
-      if (typeof evt.target.result == 'undefined') {
-        displayActionFailure("No matching record found");
-        return;
-      }
-      deletePublication(evt.target.result.id, store);
-    };
-    req.onerror = function (evt) {
-      console.error("deletePublicationFromBib:", evt.target.errorCode);
-    };
-  }
-
-  /**
-   * @param {number} key
-   * @param {IDBObjectStore=} store
-   */
-  function deletePublication(key, store) {
-    console.log("deletePublication:", arguments);
-
-    if (typeof store == 'undefined')
-      store = getObjectStore(DB_STORE_NAME, 'readwrite');
-
-    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
-    // the result of the Object Store Deletion Operation algorithm is
-    // undefined, so it's not possible to know if some records were actually
-    // deleted by looking at the request result.
-    var req = store.get(key);
-    req.onsuccess = function(evt) {
-      var record = evt.target.result;
-      console.log("record:", record);
-      if (typeof record == 'undefined') {
-        displayActionFailure("No matching record found");
-        return;
-      }
-      // Warning: The exact same key used for creation needs to be passed for
-      // the deletion. If the key was a Number for creation, then it needs to
-      // be a Number for deletion.
-      req = store.delete(key);
-      req.onsuccess = function(evt) {
-        console.log("evt:", evt);
-        console.log("evt.target:", evt.target);
-        console.log("evt.target.result:", evt.target.result);
-        console.log("delete successful");
-        displayActionSuccess("Deletion successful");
-        displayPubList(store);
-      };
-      req.onerror = function (evt) {
-        console.error("deletePublication:", evt.target.errorCode);
-      };
-    };
-    req.onerror = function (evt) {
-      console.error("deletePublication:", evt.target.errorCode);
-      };
-  }
-
-  function displayActionSuccess(msg) {
-    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
-    $('#msg').html('<span class="action-success">' + msg + '</span>');
-  }
-  function displayActionFailure(msg) {
-    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
-    $('#msg').html('<span class="action-failure">' + msg + '</span>');
-  }
-  function resetActionStatus() {
-    console.log("resetActionStatus ...");
-    $('#msg').empty();
-    console.log("resetActionStatus DONE");
-  }
-
-  function addEventListeners() {
-    console.log("addEventListeners");
-
-    $('#register-form-reset').click(function(evt) {
-      resetActionStatus();
-    });
-
-    $('#add-button').click(function(evt) {
-      console.log("add ...");
-      var title = $('#pub-title').val();
-      var biblioid = $('#pub-biblioid').val();
-      if (!title || !biblioid) {
-        displayActionFailure("Required field(s) missing");
-        return;
-      }
-      var year = $('#pub-year').val();
-      if (year != '') {
-        // Better use Number.isInteger if the engine has EcmaScript 6
-        if (isNaN(year))  {
-          displayActionFailure("Invalid year");
-          return;
-        }
-        year = Number(year);
-      } else {
-        year = null;
-      }
-
-      var file_input = $('#pub-file');
-      var selected_file = file_input.get(0).files[0];
-      console.log("selected_file:", selected_file);
-      // Keeping a reference on how to reset the file input in the UI once we
-      // have its value, but instead of doing that we rather use a "reset" type
-      // input in the HTML form.
-      //file_input.val(null);
-      var file_url = $('#pub-file-url').val();
-      if (selected_file) {
-        addPublication(biblioid, title, year, selected_file);
-      } else if (file_url) {
-        addPublicationFromUrl(biblioid, title, year, file_url);
-      } else {
-        addPublication(biblioid, title, year);
-      }
-
-    });
-
-    $('#delete-button').click(function(evt) {
-      console.log("delete ...");
-      var biblioid = $('#pub-biblioid-to-delete').val();
-      var key = $('#key-to-delete').val();
-
-      if (biblioid != '') {
-        deletePublicationFromBib(biblioid);
-      } else if (key != '') {
-        // Better use Number.isInteger if the engine has EcmaScript 6
-        if (key == '' || isNaN(key))  {
-          displayActionFailure("Invalid key");
-          return;
-        }
-        key = Number(key);
-        deletePublication(key);
-      }
-    });
-
-    $('#clear-store-button').click(function(evt) {
-      clearObjectStore();
-    });
-
-    var search_button = $('#search-list-button');
-    search_button.click(function(evt) {
-      displayPubList();
-    });
-
-  }
-
-  openDb();
-  addEventListeners();
-
-})(); // Immediately-Invoked Function Expression (IIFE)
-
- -

{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}

- -

Next step

- -

If you want to start tinkering with the API, jump in to the reference documentation and check out the different methods.

- -

See also

- -

Reference

- - - -

Tutorials

- - - -

Related articles

- - - -

Firefox

- - diff --git a/files/es/web/api/indexeddb_api/using_indexeddb/index.html b/files/es/web/api/indexeddb_api/using_indexeddb/index.html new file mode 100644 index 0000000000..ea9d2d879c --- /dev/null +++ b/files/es/web/api/indexeddb_api/using_indexeddb/index.html @@ -0,0 +1,1308 @@ +--- +title: Usando IndexedDB +slug: Web/API/IndexedDB_API/Usando_IndexedDB +tags: + - API + - Almacenamiento + - Avanzado + - Base de datos + - Guía + - IndexedDB + - Tutorial + - jsstore +translation_of: Web/API/IndexedDB_API/Using_IndexedDB +--- +
+

IndexedDB es una manera de almacenar datos dentro del navegador del usuario. Debido a que permite la creación de aplicaciones con habilidades de consulta enriquecidas, con independencia de la disponibilidad de la red, sus aplicaciones pueden trabajar tanto en línea como fuera de línea.

+
+ +

Acerca de este documento

+ +

Este tutorial es una guía sobre el uso de la API asíncrona de IndexedDB. Si no está familiarizado con IndexedDB, por favor consulte primero Conceptos Básicos Acerca de IndexedDB.

+ +

Para la documentación de referencia sobre la API de IndexedDB, vea el artículo IndexedDB y sus subpaginas, que documentan los tipos de objetos usados por IndexedDB, así como los métodos síncronos y asíncronos. 

+ +

Patrones Básicos

+ +

El patrón básico que indexedDB propone es:

+ +
    +
  1. Abrir una base de datos.
    2. +
  2. Crear un objeto de almacenamiento en la base de datos.
    3. +
  3. Iniciar una transacción y hacer una petición para hacer alguna operación de la base de datos, tal como añadir o recuperar datos.
    4. +
  4. +
    Espere a que se complete la operación por la escucha de la clase correcta de eventos DOM .
    +
    5. +
  5. +
    Hacer algo con el resultado (El cual puede ser encontrado en el objeto de la petición).
    +
    6. +
+ +

Con esos grandes rasgos en mente, seremos más concretos.

+ +

Creando y estructurando el almacenamiento

+ +

Como las especificaciones están todavía elaborandose, las implementaciones actuales de indexedDB dependen de los navegadores. Hasta que la especificación se haya consolidado, los proveedores de navegadores pueden tener diferentes implementaciones de los estandares de indexedDB. Una vez se alcance el consenso en el estandar, los proveedores implementarán la API sin prefijos. En algunas implementaciones ya fueron removidos los prefijos: Internet Explorer 10, Firefox 16, Chrome 24. Cuando utilizan un prefijo, los navegadores basados en gecko usan el prefijo moz , mientras que los navegadores basados en WebKit usan el prefijo webkit.

+ +

Usando una versión experimental de IndexedDB

+ +

En caso que usted quiera probar su código en navegadores que todavía usen un prefijo, puede usar el siguiente codigo:  

+ +
// En la siguiente línea, puede incluir prefijos de implementación que quiera probar.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// No use "var indexedDB = ..." Si no está en una función.
+// Por otra parte, puedes necesitar referencias a algun objeto window.IDB*:
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla nunca ha prefijado estos objetos, por lo tanto no necesitamos window.mozIDB*)
+ +

Hay que tener cuidado con las implementaciones que usan un prefijo ya que puede ser inestables, incompletas, o usen una versión antigua de la especificación. En producción se recomienda usar el código sin prefijos. Es preferible no tener soporte para un navegador a decir que lo tiene y fallar en ello :

+ +
if (!window.indexedDB) {
+    window.alert("Su navegador no soporta una versión estable de indexedDB. Tal y como las características no serán validas");
+}
+
+ +

Abriendo una base de datos

+ +

Iniciamos todo el proceso así:

+ +
// dejamos abierta nuestra base de datos
+var request = window.indexedDB.open("MyTestDatabase", 3);
+
+ +

¿Lo has visto? Abrir una base de datos es igual que cualquier otra operación — solo tienes que "solicitarla" (request).

+ +

La solicitud de apertura no abre la base de datos o inicia la transacción de inmediato. La llamada a la función open() retornan unos objetos IDBOpenDBRequest, cuyo resultado, correcto o erróneo, se maneja en un evento.  Alguna otra función asincrónica en indexedDB hace lo mismo - Devolver un objeto IDBRequest que disparará un evento con el resultado o el error. El resultado para la función de abrir es una instancia de un IDBDatabase.

+ +

El segundo parámetro para el método open es la versión de la base de datos. La versión de la base de datos determina el esquema - El almacen de objectos en la base de datos y su estructura. Si la base de datos no existe, es creada y se dispara un evento onupgradeneeded de inmediato, permitiéndote proveer una actualización de la estructura e índices en la función que capture dicho evento. Se verá más adelante en  Actualizando la versión de la base de datos. 

+ +
+

Importante: El número de versión es un unsigned long. Por lo tanto significa que puede ser un entero muy grande. También significa que si usas un flotante será convertido en un entero más cercano y la transacción puede no ser iniciada, el evento upgradeneeded no se desencadenará. Por ejemplo no use 2.4 como un número de versión ya que será igual que la 2:

+ +
var request = indexedDB.open("MyTestDatabase", 2.4); // Esto no se hace, la versión será redondeada a 2
+
+ +

Generando manipuladores

+ +

La primera cosa que usted querrá hacer con la totalidad de las peticiones que usted genera es agregar controladores de éxito y de error:

+ +
request.onerror = function(event) {
+  // Hacer algo con request.errorCode!
+};
+request.onsuccess = function(event) {
+  // Hacer algo con request.result!
+};
+ +

¿Cuál de las dos funciones, onSuccess () o onerror (), se vuelve a llamar? Si todo tiene éxito, un evento de éxito (es decir, un evento DOM cuya propiedad tipo se establece en el "éxito") se dispara con la solicitud como su objetivo. Una vez que se dispara, la función onSuccess () a petición se activa con el evento de éxito como argumento. De lo contrario, si había algún problema, un evento de error (es decir, un evento DOM cuyo tipo de propiedad se establece en "error") se dispara a petición. Esto desencadena la función onerror () con el evento de error como argumento.

+ +

La API IndexedDB está diseñada para minimizar la necesidad de control de errores, por lo que no es probable que veamos muchos eventos de error (al menos, no una vez que estás acostumbrado a la API). En el caso de la apertura de una base de datos, sin embargo, hay algunas condiciones comunes que generan eventos de error. El problema más común se produce cuando el usuario ha decidido no dar, a su aplicación web, el permiso para crear una base de datos. Uno de los principales objetivos de diseño de IndexedDB es permitir que grandes cantidades de datos se almacenen para su uso sin conexión a internet. (Para obtener más información sobre la cantidad de almacenamiento que puede tener para cada navegador, consulte Límites de almacenamiento.)  

+ +

Obviamente, los navegadores no permitirán que alguna red de publicidad o sitio web malicioso pueda contaminar su ordenador, por ello los navegadores utilizan un diálogo para indicar al usuario la primera vez que cualquier aplicación web determinada intente abrir una IndexedDB para el almacenamiento. El usuario puede optar por permitir o denegar el acceso. Además, el almacenamiento IndexedDB en los modos de privacidad navegadores sólo dura en memoria hasta que la sesión de incógnito haya sido cerrada (modo de navegación privada para el modo de Firefox e Incognito para Chrome, pero en Firefox no está implementado a partir de noviembre 2015 por lo que no puede utilizar IndexedDB en Firefox navegación privada en absoluto).

+ +

Ahora, asumiendo que el usuario acepta su solicitud para crear una base de datos, y que ha recibido un evento de éxito para activar la devolución de llamada de éxito; ¿Que sigue? La solicitud aquí se generó con una llamada a indexedDB.open (), por lo request.result es una instancia de IDBDatabase, y que sin duda quieren ahorrar para más adelante. Su código podría ser algo como esto:

+ +
var db;
+var request = indexedDB.open("MyTestDatabase");
+request.onerror = function(event) {
+  alert("Why didn't you allow my web app to use IndexedDB?!");
+};
+request.onsuccess = function(event) {
+  db = request.result;
+};
+
+ +

Manejando errores

+ +

Como se mencionó anteriormente, los eventos de error de burbujas. Eventos de error se dirigen a la solicitud que generó el error, entonces el evento se propaga a la operación, y finalmente con el objeto de base de datos. Si desea evitar la adición de controladores de errores a cada solicitud, en su lugar puede añadir un solo controlador de errores en el objeto de base de datos, así:

+ +
db.onerror = function(event) {
+  // Generic error handler for all errors targeted at this database's
+  // requests!
+  alert("Database error: " + event.target.errorCode);
+};
+
+ +

Uno de los errores más comunes posibles al abrir una base de datos es VER_ERR. Indica que la versión de la base de datos almacenada en el disco es mayor que la versión que está intentando abrir. Este es un caso de error que siempre debe ser manejado por el gestor de errores.

+ +

Creación o actualización de la versión de la base de datos

+ +

Cuando se crea una nueva base de datos o se aumenta el número de versión de una base de datos existente (mediante la especificación de un número de versión más alto de lo que hizo antes, en {{anch ("Cómo abrir una base de datos")}}), el evento onupgradeneeded se activará y un objeto IDBVersionChangeEvent será pasado a cualquier controlador de eventos onversionchange establecido en request.result (es decir, db en el ejemplo). En el controlador para el evento upgradeneeded, se debe crear los almacenes de objetos necesarios para esta versión de la base de datos:

+ +
// Este evento solamente está implementado en navegadores recientes
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Crea un almacén de objetos (objectStore) para esta base de datos
+  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
+};
+ +

En este caso, la base de datos ya tendrá los almacenes de objetos de la versión anterior de la base de datos, por lo que no tiene que crear estos almacenes de objetos de nuevo. Sólo es necesario crear nuevos almacenes de objetos, o eliminar las tiendas de objetos de la versión anterior que ya no son necesarios. Si necesita cambiar un almacén de objetos existentes (por ejemplo, para cambiar la ruta de acceso clave keyPath), entonces se debe eliminar el antiguo almacén de objetos y crear de nuevo con las nuevas opciones. (Tenga en cuenta que esto borrará la información en el almacén de objetos Si usted necesita guardar esa información, usted debe leerlo y guardarlo en otro lugar antes de actualizar la base de datos.)

+ +

Tratar de crear un almacén de objetos con un nombre que ya existe (o tratando de eliminar un almacén de objetos con un nombre que no existe) lanzará un error.

+ +

Si el evento onupgradeneeded retorna éxito, entonces se activará el manejador onsuccess de la solicitud de base de datos abierta.

+ +

Blink / Webkit soportan la versión actual de la especificación, tal como fue liberado en Chrome 23+ y Opera 17+ ; IE10+ también lo soporta. Implementaciones mas viejas o distintas no implementan la versión actual de la especificación, y por lo tanto no son compatibles todavía con el indexedDB.open (nombre, versión).onupgradeneeded . Para obtener más información sobre cómo actualizar la versión de la base de datos en Webkit/Blink mas viejos, consulte el artículo de referencia IDBDatabase.

+ +

Estructuración de la base de datos

+ +

Ahora para estructurar la base de datos. IndexedDB usa almacenes de datos (object stores) en lugar de tablas, y una base de datos puede contener cualquier número de almacenes. Cuando un valor es almacenado, se le asocia con una clave. Existen diversas maneras en que una clave pude ser indicada dependiendo de si el almacén usa una ruta de clave o generador.

+ +

La siguiente table muetra las distintas formas en que las claves pueden ser indicadas:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ruta de clave(keyPath)Generador de clave (autoIncrement)Descripción
NoNoEste almacén puede contener cualquier tipo de valor, incluso valores primitivos como números y cadenas. Se debe indicar un argumento de clave distinto cada vez que se agregue un nuevo valor.
SiNoEste almacén de objetos solo puede contener objetos de JavaScript. Los objetos deben tener una propiedad con el mismo nombre que la ruta de clave.
NoSiEste objeto puede contener cualquier tipo de valor. La clave es generada automáticamente, o se puede indicar un argumento de clave distinto si se quiere usar una clave específica.
SiSi +

Este almacén de objetos solo puede contener objetos de JavaScript. Usualmente una clave es generada y dicho valor es almacenado en el objeto en una propiedad con el mismo nombre que la ruta de clave. Sin embargo, si dicha propiedad ya existe en el objeto, el valor de esa propuiedad es usado como clave en lugar de generar una nueva.

+
+ +

También se puede crear índices en cualquer almacén de objetos, siempre y cuando el almacén contenga objets, y no primitivos. Un índice permite buscar valores contenidos en el almacén usando el valor de una propiedad del objeto almacenado, en lugar de la clave del mismo.

+ +

Adicionalmente, los índices tienen la habilidad para hacer cumplir restricciones simples en los datos almacendos. Al indicar la bandera unique al crear el índice, el índice asegurará que no se puedan almacenar dos objetos que tengan el mismo valor para la clave del índice. Así, por ejemplo si se tiene un almacén de objetos que contiene un set de personas, y se desea asegurar que no existan dos personas con el mismo email, se puede usar un índice con la bandera unique activada para forzar esto.

+ +

Esto puede sonar confuso, pero un ejemplo simple debe ilustrar el concepto. Primero, definiremos alguna información de clientes para usar en nuestro ejemplo:

+ +
// Así se ve nuestra información de clientes.
+const customerData = [
+  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
+  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
+];
+
+ +

Ahora, creemos una IndexedDB para almacenar los datos:

+ +
const dbName = "the_name";
+
+var request = indexedDB.open(dbName, 2);
+
+request.onerror = function(event) {
+  // Manejar errores.
+};
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Se crea un almacén para contener la información de nuestros cliente
+  // Se usará "ssn" como clave ya que es garantizado que es única
+  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
+
+  // Se crea un índice para buscar clientes por nombre. Se podrían tener duplicados
+  // por lo que no se puede usar un índice único.
+  objectStore.createIndex("name", "name", { unique: false });
+
+  // Se crea un índice para buscar clientespor email. Se quiere asegurar que
+  // no puedan haberdos clientes con el mismo email, asi que se usa un índice único.
+  objectStore.createIndex("email", "email", { unique: true });
+
+  // Se usa transaction.oncomplete para asegurarse que la creación del almacén
+  // haya finalizado antes de añadir los datos en el.
+  objectStore.transaction.oncomplete = function(event) {
+    // Guarda los datos en el almacén recién creado.
+    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
+    for (var i in customerData) {
+      customerObjectStore.add(customerData[i]);
+    }
+  }
+};
+
+ +

Como se indicó previamente, onupgradeneeded es el único lugar donde se puede alterar la estructura de la base de datos. En el, se puede crear y borrar almacenes de objetos y construir y remover índices.

+ +
Los almacenes de datos son creados con una llamada a  createObjectStore(). El método toma como parámetros el nombre del almacén y un objeto.  A pesar de que el segundo parámetro es opcional, es muy importante, porque permite definir propiedades opcionales importantes y refinar el tipo de almacén que se desea crear. En este caso, se pregunta por un almacén llamado "customers" y se define la clave, que es la propiedad que indica que un objeto en el almacén es único. La propiedad en este ejemplo es "ssn" (Social Security Number) ya que los números de seguridad social está garantizado que sea único. "ssn" debe estar presente en cada objeto que se guarda al almacén.
+ +

También se solicitó crear un índice llamado "name" que se fija en la propiedad name de los objetos almacenados. Así como con createObjectStore(), createIndex() toma un objeto opcional options que refina el tipo de índice que se desea crear. Agregar objetos que no tengan una propiedad name funcionará, pero los objetos no aparecerán en el índice "name"

+ +
Ahora se pueden obtener los clientes almacenados usando su ssn directamente del almacen, o usando su nombre a través del índice. Para aprender como hacer esto, vea la sección El uso de un índice
+ +

El uso de un generador de claves

+ +

Indicar la bandera autoIncrement  cuando se crea el almacén habilitará el generador de claves para dicho almacén. Por defecto esta bandera no está marcada.

+ +

Con el generador de claves, la clave será generada automáticamente a medida que se agreguen valores al almacén. El número actual de un generador de claves siempre se establece en 1 cuando se creal el almacén por primera vez. Básicamente la nueva clave autogenerada es incrementada en 1 basada en la llave anterior. El numero actual para un generador de claves nunca disminuye, salvo como resultado de operaciones de base de datos  que sean revertidos, por ejemplo, cuando la transacción de base de datos es abortada. Por lo tanto borrar un registro o incluso borrar todos los registros de un almacén nunca afecta al generador de claves

+ +

Se puede crear otro almacén de objetos con generador de claves como se muestra abajo:

+ +
// Abrir la indexedDB.
+var request = indexedDB.open(dbName, 3);
+
+request.onupgradeneeded = function (event) {
+
+    var db = event.target.result;
+
+    // Create another object store called "names" with the autoIncrement flag set as true.
+    var objStore = db.createObjectStore("names", { autoIncrement : true });
+
+    // Because the "names" object store has the key generator, the key for the name value is generated automatically.
+    // The added records would be like:
+    // key : 1 => value : "Bill"
+    // key : 2 => value : "Donna"
+    for (var i in customerData) {
+        objStore.add(customerData[i].name);
+    }
+}
+ +

Para más detalles acerca del generador de claves, por favor ver "W3C Key Generators".

+ +

Añadir, recuperación y eliminación de datos

+ +

Antes que haga algo con su nueva base de datos , necesita comenzar una transacción. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Once you are inside the transaction, you can access the object stores that hold your data and make your requests. Next, you need to decide if you're going to make changes to the database or if you just need to read from it. Transactions have three available modes: readonly, readwrite, and versionchange.

+ +

To change the "schema" or structure of the database—which involves creating or deleting object stores or indexes—the transaction must be in versionchange mode. This transaction is opened by calling the {{domxref("IDBFactory.open")}} method with a version specified. (In WebKit browsers, which have not implemented the latest specifcation, the {{domxref("IDBFactory.open")}} method takes only one parameter, the name of the database; then you must call {{domxref("IDBVersionChangeRequest.setVersion")}} to establish the versionchange transaction.)

+ +

To read the records of an existing object store, the transaction can either be in readonly or readwrite mode. To make changes to an existing object store, the transaction must be in readwrite mode. You open such transactions with {{domxref("IDBDatabase.transaction")}}. The method accepts two parameters: the storeNames (the scope, defined as an array of object stores that you want to access) and the mode (readonly or readwrite) for the transaction. The method returns a transaction object containing the {{domxref("IDBIndex.objectStore")}} method, which you can use to access your object store. By default, where no mode is specified, transactions open in readonly mode.

+ +

You can speed up data access by using the right scope and mode in the transaction. Here are a couple of tips:

+ +
    +
  • When defining the scope, specify only the object stores you need. This way, you can run multiple transactions with non-overlapping scopes concurrently.
    • +
  • Only specify a readwrite transaction mode when necessary. You can concurrently run multiple readonly transactions with overlapping scopes, but you can have only one readwrite transaction for an object store. To learn more, see the definition for transactions in the Basic Concepts article.
    • +
+ +

Agregar datos a la base de datos

+ +

If you've just created a database, then you probably want to write to it. Here's what that looks like:

+ +
var transaction = db.transaction(["customers"], "readwrite");
+// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite".
+// In case you want to support such an implementation, you can write:
+// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);
+ +

The transaction() function takes two arguments (though one is optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores, but don't do it because the spec says an empty array should generate an InvalidAccessError. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the "readwrite" flag.

+ +

Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing TRANSACTION_INACTIVE_ERR error codes then you've messed something up.

+ +

Transactions can receive DOM events of three different types: error, abort, and complete. We've talked about the way that error events bubble, so a transaction receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by first calling preventDefault() on the error event then doing something else, the entire transaction is rolled back. This design forces you to think about and handle errors, but you can always add a catchall error handler to the database if fine-grained error handling is too cumbersome. If you don't handle an error event or if you call abort() on the transaction, then the transaction is rolled back and an abort event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a complete event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aid your sanity.

+ +

Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.

+ +
// Do something when all the data is added to the database.
+transaction.oncomplete = function(event) {
+  alert("All done!");
+};
+
+transaction.onerror = function(event) {
+  // Don't forget to handle errors!
+};
+
+var objectStore = transaction.objectStore("customers");
+for (var i in customerData) {
+  var request = objectStore.add(customerData[i]);
+  request.onsuccess = function(event) {
+    // event.target.result == customerData[i].ssn;
+  };
+}
+ +

The result of a request generated from a call to add() is the key of the value that was added. So in this case, it should equal the ssn property of the object that was added, since the object store uses the ssn property for the key path. Note that the add() function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, you can use the put() function, as shown below in the {{ anch("Updating an entry in the database") }} section.

+ +

Extracción de datos de la base de datos

+ +

Removing data is very similar:

+ +
var request = db.transaction(["customers"], "readwrite")
+                .objectStore("customers")
+                .delete("444-44-4444");
+request.onsuccess = function(event) {
+  // It's gone!
+};
+ +

Obtener datos de la base de datos

+ +

Now that the database has some info in it, you can retrieve it in several ways. First, the simple get(). You need to provide the key to retrieve the value, like so:

+ +
var transaction = db.transaction(["customers"]);
+var objectStore = transaction.objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Do something with the request.result!
+  alert("Name for SSN 444-44-4444 is " + request.result.name);
+};
+ +

That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:

+ +
db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
+  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
+};
+ +

See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a "readwrite" transaction. Calling transaction() with no mode specified gives you a "readonly" transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the result property.

+ +
+

Note: You can speed up data access by limiting the scope and mode in the transaction. Here are a couple of tips:

+ +
    +
  • +

    When defining the scope, specify only the object stores you need. This way, you can run multiple transactions with non-overlapping scopes concurrently.

    +
    • +
  • +

    Only specify a readwrite transaction mode when necessary. You can concurrently run multiple readonly transactions with overlapping scopes, but you can have only one readwrite transaction for an object store. To learn more, see the definition for transactions in the Basic Concepts article.

    +
    • +
+
+ +

Actualización de una entrada en la base de datos

+ +

Now we've retrieved some data, updating it and inserting it back into the IndexedDB is pretty simple. Let's update the previous example somewhat:

+ +
var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Get the old value that we want to update
+  var data = request.result;
+
+  // update the value(s) in the object that you want to change
+  data.age = 42;
+
+  // Put this updated object back into the database.
+  var requestUpdate = objectStore.put(data);
+   requestUpdate.onerror = function(event) {
+     // Do something with the error
+   };
+   requestUpdate.onsuccess = function(event) {
+     // Success - the data is updated!
+   };
+};
+ +

So here we're creating an objectStore and requesting a customer record out of it, identified by its ssn value (444-44-4444). We then put the result of that request in a variable (data), update the age property of this object, then create a second request (requestUpdate) to put the customer record back into the objectStore, overwriting the previous value.

+ +
+

Note that in this case we've had to specify a readwrite transaction because we want to write to the database, not just read out of it.

+
+ +

El uso de un cursor

+ +

Using get() requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:

+ +
var objectStore = db.transaction("customers").objectStore("customers");
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
+    cursor.continue();
+  }
+  else {
+    alert("No more entries!");
+  }
+};
+ +

The openCursor() function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the result of the request (above we're using the shorthand, so it's event.target.result). Then the actual key and value can be found on the key and value properties of the cursor object. If you want to keep going, then you have to call continue() on the cursor. When you've reached the end of the data (or if there were no entries that matched your openCursor() request) you still get a success callback, but the result property is undefined.

+ +

One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:

+ +
var customers = [];
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    customers.push(cursor.value);
+    cursor.continue();
+  }
+  else {
+    alert("Got all customers: " + customers);
+  }
+};
+ +
+

Note: Mozilla has also implemented getAll() to handle this case (and getAllKeys(), which is currently hidden behind the dom.indexedDB.experimental preference in about:config). these aren't part of the IndexedDB standard, so may disappear in the future. We've included them because we think they're useful. The following code does precisely the same thing as above:

+ +
objectStore.getAll().onsuccess = function(event) {
+  alert("Got all customers: " + event.target.result);
+};
+ +

There is a performance cost associated with looking at the value property of a cursor, because the object is created lazily. When you use getAll() for example, Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use getAll(). If you're trying to get an array of all the objects in an object store, though, use getAll().

+
+ +

El uso de un índice

+ +

Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, and outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.

+ +
var index = objectStore.index("name");
+index.get("Donna").onsuccess = function(event) {
+  alert("Donna's SSN is " + event.target.result.ssn);
+};
+ +

The "name" cursor isn't unique, so there could be more than one entry with the name set to "Donna". In that case you always get the one with the lowest key value.

+ +

If you need to access all the entries with a given name you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:

+ +
// Using a normal cursor to grab whole customer record objects
+index.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    cursor.continue();
+  }
+};
+
+// Using a key cursor to grab customer record object keys
+index.openKeyCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
+    // No way to directly get the rest of the stored object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
+    cursor.continue();
+  }
+};
+ +

Especificación de la gama y la dirección de los cursores

+ +

If you would like to limit the range of values you see in a cursor, you can use an IDBKeyRange object and pass it as the first argument to openCursor() or openKeyCursor(). You can make a key range that only allows a single key, or one that has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value(s)) or "open" (i.e., the key range does not include the given value(s)). Here's how it works:

+ +
// Only match "Donna"
+var singleKeyRange = IDBKeyRange.only("Donna");
+
+// Match anything past "Bill", including "Bill"
+var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
+
+// Match anything past "Bill", but don't include "Bill"
+var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
+
+// Match anything up to, but not including, "Donna"
+var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
+
+// Match anything between "Bill" and "Donna", but not including "Donna"
+var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
+
+// To use one of the key ranges, pass it in as the first argument of openCursor()/openKeyCursor()
+index.openCursor(boundKeyRange).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the matches.
+    cursor.continue();
+  }
+};
+ +

Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing prev to the openCursor() function as the second argument:

+ +
objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

If you just want to specify a change of direction but not constrain the results shown, you can just pass in null as the first argument:

+ +
objectStore.openCursor(null, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

Since the "name" index isn't unique, there might be multiple entries where name is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass nextunique (or prevunique if you're going backwards) as the direction parameter. When nextunique or prevunique is used, the entry with the lowest key is always the one returned.

+ +
index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

Please see "IDBCursor Constants" for the valid direction arguments.

+ +

Cambios Versión mientras que una aplicación web está abierto en otra pestaña

+ +

When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call open() with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database (an onblocked event is fired until tey are closed or reloaded). Here's how it works:

+ +
var openReq = mozIndexedDB.open("MyTestDatabase", 2);
+
+openReq.onblocked = function(event) {
+  // If some other tab is loaded with the database, then it needs to be closed
+  // before we can proceed.
+  alert("Please close all other tabs with this site open!");
+};
+
+openReq.onupgradeneeded = function(event) {
+  // All other databases have been closed. Set everything up.
+  db.createObjectStore(/* ... */);
+  useDatabase(db);
+}
+
+openReq.onsuccess = function(event) {
+  var db = event.target.result;
+  useDatabase(db);
+  return;
+}
+
+function useDatabase(db) {
+  // Make sure to add a handler to be notified if another page requests a version
+  // change. We must close the database. This allows the other page to upgrade the database.
+  // If you don't do this then the upgrade won't happen until the user closes the tab.
+  db.onversionchange = function(event) {
+    db.close();
+    alert("A new version of this page is ready. Please reload!");
+  };
+
+  // Do stuff with the database.
+}
+
+ +

Seguridad

+ +

IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.

+ +

It's important to note that IndexedDB doesn't work for content loaded into a frame from another site (either {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. This is a security and privacy measure and can be considered analogous the blocking of third-party cookies. For more details, see {{ bug(595307) }}.

+ +

Warning About Browser Shutdown

+ +

When the browser shuts down (e.g., when the user selects Exit or clicks the Close button), any pending IndexedDB transactions are (silently) aborted — they will not complete, and they will not trigger the error handler. Since the user can exit the browser at any time, this means that you cannot rely upon any particular transaction to complete or to know that it did not complete. There are several implications of this behavior.

+ +

First, you should take care to always leave your database in a consistent state at the end of every transaction. For example, suppose that you are using IndexedDB to store a list of items that you allow the user to edit. You save the list after the edit by clearing the object store and then writing out the new list. If you clear the object store in one transaction and write the new list in another transaction, there is a danger that the browser will close after the clear but before the write, leaving you with an empty database. To avoid this, you should combine the clear and the write into a single transaction. 

+ +

Second, you should never tie database transactions to unload events. If the unload event is triggered by the browser closing, any transactions created in the unload event handler will never complete. An intuitive approach to maintaining some information across browser sessions is to read it from the database when the browser (or a particular page) is opened, update it as the user interacts with the browser, and then save it to the database when the browser (or page) closes. However, this will not work. The database transactions will be created in the unload event handler, but because they are asynchronous they will be aborted before they can execute.

+ +

In fact, there is no way to guarantee that IndexedDB transactions will complete, even with normal browser shutdown. See {{ bug(870645) }}.

+ +

Full IndexedDB example

+ +

HTML Content

+ +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+
+    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
+    <div class="note">
+      <p>
+        Works and tested with:
+      </p>
+      <div id="compat">
+      </div>
+    </div>
+
+    <div id="msg">
+    </div>
+
+    <form id="register-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-title" class="required">
+                Title:
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-title" name="pub-title" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-biblioid" class="required">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-year">
+                Year:
+              </label>
+            </td>
+            <td>
+              <input type="number" id="pub-year" name="pub-year" />
+            </td>
+          </tr>
+        </tbody>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-file">
+                File image:
+              </label>
+            </td>
+            <td>
+              <input type="file" id="pub-file"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-file-url">
+                Online-file image URL:<br/>
+                <span class="note">(same origin URL)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-file-url" name="pub-file-url"/>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="button-pane">
+        <input type="button" id="add-button" value="Add Publication" />
+        <input type="reset" id="register-form-reset"/>
+      </div>
+    </form>
+
+    <form id="delete-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-biblioid-to-delete">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="key-to-delete">
+                Key:<br/>
+                <span class="note">(for example 1, 2, 3, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="key-to-delete"
+                     name="key-to-delete" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="button-pane">
+        <input type="button" id="delete-button" value="Delete Publication" />
+        <input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" />
+      </div>
+    </form>
+
+    <form id="search-form">
+      <div class="button-pane">
+        <input type="button" id="search-list-button"
+               value="List database content" />
+      </div>
+    </form>
+
+    <div>
+      <div id="pub-msg">
+      </div>
+      <div id="pub-viewer">
+      </div>
+      <ul id="pub-list">
+      </ul>
+    </div>
+
+ +

CSS Content

+ +
body {
+  font-size: 0.8em;
+  font-family: Sans-Serif;
+}
+
+form {
+  background-color: #cccccc;
+  border-radius: 0.3em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  padding: 1em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  padding: 0.3em;
+  border-color: #cccccc;
+  border-radius: 0.3em;
+}
+
+.required:after {
+  content: "*";
+  color: red;
+}
+
+.button-pane {
+  margin-top: 1em;
+}
+
+#pub-viewer {
+  float: right;
+  width: 48%;
+  height: 20em;
+  border: solid #d092ff 0.1em;
+}
+#pub-viewer iframe {
+  width: 100%;
+  height: 100%;
+}
+
+#pub-list {
+  width: 46%;
+  background-color: #eeeeee;
+  border-radius: 0.3em;
+}
+#pub-list li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
+}
+
+#msg {
+  margin-bottom: 1em;
+}
+
+.action-success {
+  padding: 0.5em;
+  color: #00d21e;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.action-failure {
+  padding: 0.5em;
+  color: #ff1408;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.note {
+  font-size: smaller;
+}
+
+.destructive {
+  background-color: orange;
+}
+.destructive:hover {
+  background-color: #ff8000;
+}
+.destructive:active {
+  background-color: red;
+}
+
+ +

 

+ +

JavaScript Content

+ +
(function () {
+  var COMPAT_ENVS = [
+    ['Firefox', ">= 16.0"],
+    ['Google Chrome',
+     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+  ];
+  var compat = $('#compat');
+  compat.empty();
+  compat.append('<ul id="compat-list"></ul>');
+  COMPAT_ENVS.forEach(function(val, idx, array) {
+    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
+  });
+
+  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
+  const DB_STORE_NAME = 'publications';
+
+  var db;
+
+  // Used to keep track of which view is displayed to avoid uselessly reloading it
+  var current_view_pub_key;
+
+  function openDb() {
+    console.log("openDb ...");
+    var req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onsuccess = function (evt) {
+      // Better use "this" than "req" to get the result to avoid problems with
+      // garbage collection.
+      // db = req.result;
+      db = this.result;
+      console.log("openDb DONE");
+    };
+    req.onerror = function (evt) {
+      console.error("openDb:", evt.target.errorCode);
+    };
+
+    req.onupgradeneeded = function (evt) {
+      console.log("openDb.onupgradeneeded");
+      var store = evt.currentTarget.result.createObjectStore(
+        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
+
+      store.createIndex('biblioid', 'biblioid', { unique: true });
+      store.createIndex('title', 'title', { unique: false });
+      store.createIndex('year', 'year', { unique: false });
+    };
+  }
+
+  /**
+   * @param {string} store_name
+   * @param {string} mode either "readonly" or "readwrite"
+   */
+  function getObjectStore(store_name, mode) {
+    var tx = db.transaction(store_name, mode);
+    return tx.objectStore(store_name);
+  }
+
+  function clearObjectStore(store_name) {
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.clear();
+    req.onsuccess = function(evt) {
+      displayActionSuccess("Store cleared");
+      displayPubList(store);
+    };
+    req.onerror = function (evt) {
+      console.error("clearObjectStore:", evt.target.errorCode);
+      displayActionFailure(this.error);
+    };
+  }
+
+  function getBlob(key, store, success_callback) {
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var value = evt.target.result;
+      if (value)
+        success_callback(value.blob);
+    };
+  }
+
+  /**
+   * @param {IDBObjectStore=} store
+   */
+  function displayPubList(store) {
+    console.log("displayPubList");
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readonly');
+
+    var pub_msg = $('#pub-msg');
+    pub_msg.empty();
+    var pub_list = $('#pub-list');
+    pub_list.empty();
+    // Resetting the iframe so that it doesn't display previous content
+    newViewerFrame();
+
+    var req;
+    req = store.count();
+    // Requests are executed in the order in which they were made against the
+    // transaction, and their results are returned in the same order.
+    // Thus the count text below will be displayed before the actual pub list
+    // (not that it is algorithmically important in this case).
+    req.onsuccess = function(evt) {
+      pub_msg.append('<p>There are <strong>' + evt.target.result +
+                     '</strong> record(s) in the object store.</p>');
+    };
+    req.onerror = function(evt) {
+      console.error("add error", this.error);
+      displayActionFailure(this.error);
+    };
+
+    var i = 0;
+    req = store.openCursor();
+    req.onsuccess = function(evt) {
+      var cursor = evt.target.result;
+
+      // If the cursor is pointing at something, ask for the data
+      if (cursor) {
+        console.log("displayPubList cursor:", cursor);
+        req = store.get(cursor.key);
+        req.onsuccess = function (evt) {
+          var value = evt.target.result;
+          var list_item = $('<li>' +
+                            '[' + cursor.key + '] ' +
+                            '(biblioid: ' + value.biblioid + ') ' +
+                            value.title +
+                            '</li>');
+          if (value.year != null)
+            list_item.append(' - ' + value.year);
+
+          if (value.hasOwnProperty('blob') &&
+              typeof value.blob != 'undefined') {
+            var link = $('<a href="' + cursor.key + '">File</a>');
+            link.on('click', function() { return false; });
+            link.on('mouseenter', function(evt) {
+                      setInViewer(evt.target.getAttribute('href')); });
+            list_item.append(' / ');
+            list_item.append(link);
+          } else {
+            list_item.append(" / No attached file");
+          }
+          pub_list.append(list_item);
+        };
+
+        // Move on to the next object in store
+        cursor.continue();
+
+        // This counter serves only to create distinct ids
+        i++;
+      } else {
+        console.log("No more entries");
+      }
+    };
+  }
+
+  function newViewerFrame() {
+    var viewer = $('#pub-viewer');
+    viewer.empty();
+    var iframe = $('<iframe />');
+    viewer.append(iframe);
+    return iframe;
+  }
+
+  function setInViewer(key) {
+    console.log("setInViewer:", arguments);
+    key = Number(key);
+    if (key == current_view_pub_key)
+      return;
+
+    current_view_pub_key = key;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readonly');
+    getBlob(key, store, function(blob) {
+      console.log("setInViewer blob:", blob);
+      var iframe = newViewerFrame();
+
+      // It is not possible to set a direct link to the
+      // blob to provide a mean to directly download it.
+      if (blob.type == 'text/html') {
+        var reader = new FileReader();
+        reader.onload = (function(evt) {
+          var html = evt.target.result;
+          iframe.load(function() {
+            $(this).contents().find('html').html(html);
+          });
+        });
+        reader.readAsText(blob);
+      } else if (blob.type.indexOf('image/') == 0) {
+        iframe.load(function() {
+          var img_id = 'image-' + key;
+          var img = $('<img id="' + img_id + '"/>');
+          $(this).contents().find('body').html(img);
+          var obj_url = window.URL.createObjectURL(blob);
+          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          window.URL.revokeObjectURL(obj_url);
+        });
+      } else if (blob.type == 'application/pdf') {
+        $('*').css('cursor', 'wait');
+        var obj_url = window.URL.createObjectURL(blob);
+        iframe.load(function() {
+          $('*').css('cursor', 'auto');
+        });
+        iframe.attr('src', obj_url);
+        window.URL.revokeObjectURL(obj_url);
+      } else {
+        iframe.load(function() {
+          $(this).contents().find('body').html("No view available");
+        });
+      }
+
+    });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {string} url the URL of the image to download and store in the local
+   *   IndexedDB database. The resource behind this URL is subjected to the
+   *   "Same origin policy", thus for this method to work, the URL must come from
+   *   the same origin as the web site/app this code is deployed on.
+   */
+  function addPublicationFromUrl(biblioid, title, year, url) {
+    console.log("addPublicationFromUrl:", arguments);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    // Setting the wanted responseType to "blob"
+    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+    xhr.responseType = 'blob';
+    xhr.onload = function (evt) {
+                           if (xhr.status == 200) {
+                             console.log("Blob retrieved");
+                             var blob = xhr.response;
+                             console.log("Blob:", blob);
+                             addPublication(biblioid, title, year, blob);
+                           } else {
+                             console.error("addPublicationFromUrl error:",
+                                           xhr.responseText, xhr.status);
+                           }
+                         };
+    xhr.send();
+
+    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
+    // responseType is not handled.
+    // http://bugs.jquery.com/ticket/11461
+    // http://bugs.jquery.com/ticket/7248
+    // $.ajax({
+    //   url: url,
+    //   type: 'GET',
+    //   xhrFields: { responseType: 'blob' },
+    //   success: function(data, textStatus, jqXHR) {
+    //     console.log("Blob retrieved");
+    //     console.log("Blob:", data);
+    //     // addPublication(biblioid, title, year, data);
+    //   },
+    //   error: function(jqXHR, textStatus, errorThrown) {
+    //     console.error(errorThrown);
+    //     displayActionFailure("Error during blob retrieval");
+    //   }
+    // });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {Blob=} blob
+   */
+  function addPublication(biblioid, title, year, blob) {
+    console.log("addPublication arguments:", arguments);
+    var obj = { biblioid: biblioid, title: title, year: year };
+    if (typeof blob != 'undefined')
+      obj.blob = blob;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req;
+    try {
+      req = store.add(obj);
+    } catch (e) {
+      if (e.name == 'DataCloneError')
+        displayActionFailure("This engine doesn't know how to clone a Blob, " +
+                             "use Firefox");
+      throw e;
+    }
+    req.onsuccess = function (evt) {
+      console.log("Insertion in DB successful");
+      displayActionSuccess();
+      displayPubList(store);
+    };
+    req.onerror = function() {
+      console.error("addPublication error", this.error);
+      displayActionFailure(this.error);
+    };
+  }
+
+  /**
+   * @param {string} biblioid
+   */
+  function deletePublicationFromBib(biblioid) {
+    console.log("deletePublication:", arguments);
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.index('biblioid');
+    req.get(biblioid).onsuccess = function(evt) {
+      if (typeof evt.target.result == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      deletePublication(evt.target.result.id, store);
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublicationFromBib:", evt.target.errorCode);
+    };
+  }
+
+  /**
+   * @param {number} key
+   * @param {IDBObjectStore=} store
+   */
+  function deletePublication(key, store) {
+    console.log("deletePublication:", arguments);
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+
+    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+    // the result of the Object Store Deletion Operation algorithm is
+    // undefined, so it's not possible to know if some records were actually
+    // deleted by looking at the request result.
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var record = evt.target.result;
+      console.log("record:", record);
+      if (typeof record == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      // Warning: The exact same key used for creation needs to be passed for
+      // the deletion. If the key was a Number for creation, then it needs to
+      // be a Number for deletion.
+      req = store.delete(key);
+      req.onsuccess = function(evt) {
+        console.log("evt:", evt);
+        console.log("evt.target:", evt.target);
+        console.log("evt.target.result:", evt.target.result);
+        console.log("delete successful");
+        displayActionSuccess("Deletion successful");
+        displayPubList(store);
+      };
+      req.onerror = function (evt) {
+        console.error("deletePublication:", evt.target.errorCode);
+      };
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublication:", evt.target.errorCode);
+      };
+  }
+
+  function displayActionSuccess(msg) {
+    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
+    $('#msg').html('<span class="action-success">' + msg + '</span>');
+  }
+  function displayActionFailure(msg) {
+    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
+    $('#msg').html('<span class="action-failure">' + msg + '</span>');
+  }
+  function resetActionStatus() {
+    console.log("resetActionStatus ...");
+    $('#msg').empty();
+    console.log("resetActionStatus DONE");
+  }
+
+  function addEventListeners() {
+    console.log("addEventListeners");
+
+    $('#register-form-reset').click(function(evt) {
+      resetActionStatus();
+    });
+
+    $('#add-button').click(function(evt) {
+      console.log("add ...");
+      var title = $('#pub-title').val();
+      var biblioid = $('#pub-biblioid').val();
+      if (!title || !biblioid) {
+        displayActionFailure("Required field(s) missing");
+        return;
+      }
+      var year = $('#pub-year').val();
+      if (year != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (isNaN(year))  {
+          displayActionFailure("Invalid year");
+          return;
+        }
+        year = Number(year);
+      } else {
+        year = null;
+      }
+
+      var file_input = $('#pub-file');
+      var selected_file = file_input.get(0).files[0];
+      console.log("selected_file:", selected_file);
+      // Keeping a reference on how to reset the file input in the UI once we
+      // have its value, but instead of doing that we rather use a "reset" type
+      // input in the HTML form.
+      //file_input.val(null);
+      var file_url = $('#pub-file-url').val();
+      if (selected_file) {
+        addPublication(biblioid, title, year, selected_file);
+      } else if (file_url) {
+        addPublicationFromUrl(biblioid, title, year, file_url);
+      } else {
+        addPublication(biblioid, title, year);
+      }
+
+    });
+
+    $('#delete-button').click(function(evt) {
+      console.log("delete ...");
+      var biblioid = $('#pub-biblioid-to-delete').val();
+      var key = $('#key-to-delete').val();
+
+      if (biblioid != '') {
+        deletePublicationFromBib(biblioid);
+      } else if (key != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (key == '' || isNaN(key))  {
+          displayActionFailure("Invalid key");
+          return;
+        }
+        key = Number(key);
+        deletePublication(key);
+      }
+    });
+
+    $('#clear-store-button').click(function(evt) {
+      clearObjectStore();
+    });
+
+    var search_button = $('#search-list-button');
+    search_button.click(function(evt) {
+      displayPubList();
+    });
+
+  }
+
+  openDb();
+  addEventListeners();
+
+})(); // Immediately-Invoked Function Expression (IIFE)
+
+ +

{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}

+ +

Next step

+ +

If you want to start tinkering with the API, jump in to the reference documentation and check out the different methods.

+ +

See also

+ +

Reference

+ + + +

Tutorials

+ + + +

Related articles

+ + + +

Firefox

+ + diff --git a/files/es/web/api/media_streams_api/index.html b/files/es/web/api/media_streams_api/index.html new file mode 100644 index 0000000000..f8ab5d5c05 --- /dev/null +++ b/files/es/web/api/media_streams_api/index.html @@ -0,0 +1,445 @@ +--- +title: API de MediaStream +slug: WebRTC/MediaStream_API +translation_of: Web/API/Media_Streams_API +--- +

{{SeeCompatTable}}

+

La API de proceso [i]MediaStream, a veces llamadaMedia Stream API o Stream API, es parte de la norma WebRTC [en] y describe un flujo de datos de audio o video, los métodos para trabajar con ellos, las limitaciones asociadas con este tipo de datos, las respuestas de error y éxito al usar los datos asincrónicamente y los eventos que se disparan durante el proceso.

+
+  
+

Conceptos Básicos

+

La API está basada sobre la manipulación de  un objeto {{domxref("MediaStream")}} que representa un flujo de datos de audio o video. Generalmente, un objeto MediaStream es una simple cadena URL que puede ser usada para referirse a datos almacenados en un {{domxref("Archivo")}} DOM  o un objeto {{domxref("Blob")}} creado con {{domxref("window.URL.createObjectURL()")}}, como se lo describe en Obtener el video.

+

Un MediaStream está compuesto por más objetos [i]{{domxref("MediaStreamTrack")}} que representan varias pistas de audio o video. Cada MediaStreamTrack puede tener uno o más canales. El canal representa la unidad menor de un flujo de medio, como una señal de audio asociada a un parlante específico, como el izquierdo o el derecho en una pista de audio estéreo.

+

Los objetos MediaStream poseen una sola entrada y salida[ii]. Un objeto MediaStream creado con getUserMedia() se denomina local y tiene como origen de entrada una de las cámaras o micrófonos del usuario. Un MediaStream no local puede estar representando un elemento de medio como {{HTMLElement("video")}} o {{HTMLElement("audio")}}, un flujo originado en la red y obtenido a través de la [iii]PeerConnection API o un flujo creado con la API de Audio Web [iv]{{domxref("MediaStreamAudioSourceNode")}}. La salida de un objeto MediaStream está enlazada a un consumidor. El mismo puede ser un elemento de medio  como <audio> o <video>, la PeerConnection API de WebRTC o una API de Audio Web [v]{{domxref("MediaStreamAudioDestinationNode")}}.

+
+  
+

Referencia

+
+
    +
  • {{event("addtrack")}} (event)
    • +
  • {{domxref("AudioStreamTrack")}}
    • +
  • {{domxref("BlobEvent")}}
    • +
  • {{domxref("BlobEventInit")}}
    • +
  • {{event("ended (MediaStream)")}} (event)
    • +
  • {{event("ended (MediaStreamTrack)")}} (event)
    • +
  • {{domxref("MediaStream")}}
    • +
  • {{domxref("MediaStreamConstraints")}}
    • +
  • {{domxref("MediaStreamTrack")}}
    • +
  • {{domxref("MediaStreamTrackEvent")}}
    • +
  • {{domxref("MediaStreamTrackList")}}
    • +
  • {{domxref("MediaTrackConstraints")}}
    • +
  • {{event("muted")}} (event)
    • +
  • {{domxref("NavigatorUserMedia")}}
    • +
  • {{domxref("NavigatorUserMediaError")}}
    • +
  • {{event("overconstrained")}} (event)
    • +
  • {{event("removetrack")}} (event)
    • +
  • {{event("started")}} (event)
    • +
  • {{event("unmuted")}} (event)
    • +
  • {{domxref("URL")}}
    • +
  • {{domxref("VideoStreamTrack")}}
    • +
+
+

Pista de MediaStream

+

Una MediaStreamTrack puede ser de dos tipos, de audio o video, y representa el origen del medio, como una cámara.

+

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipoDescripción
enabledBoolean True si la pista sigue asociada a su fuente.
idDOMString, read-onlyUn globally unique identifier (GUID) que describe la pista de medios.
kindDOMString, read-onlyEl audio o video para la pista de origen.
labelDOMString, read-onlyUna cadena de tipo usuario-asignada que identifica la pista de origen, como en "internal microphone." 
onendedEventHandlerManeja el evento finalizado cuando se lo activa en el objeto MediaStreamTrack.
onmute EventHandlerManeja el evento mudo del objeto MediaStreamTrack. 
onoverconstrainedEventHandlerManeja el evento superrestricto cuando se lo activa en el objeto MediaStreamTrack.
onstartedEventHandlerManeja el evento iniciado cuando se lo activa en el objeto MediaStreamTrack.
onunmute EventHandlerManjea el evento sin enmudecer cuando se lo activa en el objeto MediaStreamTrack.
readyStateunsigned short, read-only +

Valores para la pista lista:

+
    +
  • live - la pista está activa; la salida se puede activar on y off con el atributo habilitado.
    • +
  • muted - el origen del medio subyacente de la pista no puede proveer temporalmente datos en tiempo real.
    • +
+
sourceIdDOMString, read-onlyLa identidad de este origen que es único para esta aplicación y persistente. Se recomienda una GUID pero no es obligatoria.
sourceTypeSourceTypeEnum, read-onlyContiene el tipo de información del origen, si es que existe.
+

Eventos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EventoInterfazDescripción 
startedEventEl objeto MediaStreamTrack no es más "new" en el readyState.
mutedEventEl origen del objeto MediaStreamTrack no puede proveer datos temporalmente.
unmuted EventEl origen del objeto MediaStreamTrack a recomenzado a proveer datos
overconstrainedEventEl origen del objeto MediaStreamTrack no puede ser confugurado para que encaje en las restricciones impuestas por la pista. Esto podría ocurrir con la altura en el caso de un video, entre otras posibilidades.
endedEvent +

El origen del objeto MediaStreamTrack no proveerá datos; puede ocurrir por lo siguiente:

+
    +
  • el usuario a deshabilitado los permisos de la aplicación
    • +
  • el dispositivo de origen está desconectado
    • +
  • el peer remoto no transmite datos
    • +
  • se llamó el método stop()
    • +
+
+

appendConstraint()

+

Agrega la restricción al final de la lista. Esto sólo es un método para añadir restricciones optativas.

+
+
+ Parámetros
+
+ constraintName DOMString, required.
+
+ constraintValue Primitive (DOMString, float, etc.) or MinMaxConstraint, required.
+
+ Devuelve
+
+ void
+
+ Excepciones
+
+ None.
+
+

applyConstraints()

+

Aplica una lista de opciones optativas a la pista. Sobrescribe cualquier otra restricción optativa ya existente en la pista.

+
+
+ Parámetros
+
+ constraints MediaTrackConstraints, required.
+
+ Devuelve
+
+ void
+
+ Excepciones
+
+ None.
+
+

constraints()

+

Devuelte todas las [i]restricciones en la pista, obligatorias y optativas. Si tanto mandatory u optional no tienen restricciones, ese campo será undefined. Si ninguno tiene restricciones, entonces constraints() devolverá null.

+
+
+ Parámetros
+
+ None.
+
+ Devuelve
+
+ MediaTrackConstraints or null
+
+ Excepciones
+
+ None.
+
+

getConstraint()

+

Trae una restricción específica, por nombre, de la pista. Este método puede devolver una de varias posibilidades:

+
    +
  • Si su restricción no existe, devuelve null.
    • +
  • Si no provee true para parámetro optativomandatory y su búsqueda resulta en más de una restricción, este método devolverá una lista. Cada ítem de la lista será el nombre de la búsqueda así como su valor o un objeto MinMaxConstraint. La lista se agrupa con la entrada 0º como la más importante y cada entrada posterior es progresivamente menos importante.
    • +
  • Si proveeTrue al parámetro mandatory y su búsqueda es miembro del MediaTrackConstraintSet de la pista, este método devuelve su valor primitivo o su MinMaxConstraint, cualquiera que aplique al caso.
    • +
+
+
+ Parámetros
+
+ constraintName DOMString, required.
+
+ mandatory boolean, optional, default false.
+
+ Devuelve
+
+ Any of the possibilities mentioned above.
+
+ Excepciones
+
+ None.
+
+

--

+

stop()

+

Detiene permanentemente la creación de datos para las pistas y remueve las referencias a los orígines.

+
+
+ Parámetros
+
+ None.
+
+ Devuelve
+
+ Void.
+
+ Excepciones
+
+ None.
+
+

Lista de pistas de MediaStream

+

Un MediaStream tiene dos objetos MediaStreamTrackList, uno para la pista de video y otro para la de audio.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Atributo TipoDescripción
lengthunsigned long, read-only El número de pistas en la lista.
onaddtrack EventHandlerManeja el evento addtrack.
onremovetrack EventHandlerManeja el evento removetrack.
+

Eventos

+ + + + + + + + + + + + + + + + + + + + +
EventoInterfazDescripción 
addtrack MediaStreamTrackEvent Se agregó una MediaStreamTrack a la lista.
removetrack MediaStreamTrackEventSe removió una MediaStreamTrack de la lista.
+

add()

+

Agrega una MediaStreamTrack a la lista de pistas.

+
+
+ Parámetros
+
+ MediaStreamTrack track, required.
+
+ Devuelve
+
+ Void.
+
+ Excepciones
+
+ INVALID_STATE_ERR if the stream is finished (all tracks have ended).
+
+

item()

+

Devuelve la MediaStreamTrack al valor de índice (index) especificado.

+
+
+ Parámetros
+
+ unsigned long index, required.
+
+ Devuelve
+
+ MediaStreamTrack
+
+ Excepciones
+
+ None.
+
+

Remove()

+

Remueve una MediaStreamTrack de la lista de pistas.

+
+
+ Parámetros
+
+ MediaStreamTrack track, required.
+
+ Devuelve
+
+ Void.
+
+ Excepciones
+
+ INVALID_STATE_ERR if the stream is finished (all tracks have ended).
+
+

Compatibilidad con navegadores

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOpera Safari (WebKit)
Stream API 21{{ property_prefix("webkit") }} nightly 18{{ property_prefix("moz") }} {{ CompatUnknown() }} 12{{ CompatUnknown() }} 
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Stream API {{ CompatNo() }} {{ CompatUnknown() }}{{ CompatUnknown() }} {{ CompatNo() }} {{ CompatNo() }} 
+
+

Actualmente, el uso de WebRTC para acceder a la cámara está soportado en Chrome, Opera y Firefox Nightly 18. Habilitar WebRTC en Firefox Nightly requiere que usted establezca una advertencia (flag) en la configuración:

+
    +
  • Escriba "about:config" en la barra de direcciones y diga que sí quiere efectuar los cambios
    • +
  • Busque la entrada de "media.navigator.enabled" entry y establezca su valos a "true" [sin comillas]
    • +
+
+

 

+
+
+
+
+

[i] en castellano,Flujo o transmisión de [multi] Medios

+
+
+
+
+

[i] en castellano, Pista de Flujo de Media

+
+
+

[ii] del inglés, input youtput

+
+
+

[iii] en castellano, API de Conexión de Pares

+
+
+

[iv] en castellano, Nodo de origen del Audio MediaStream

+
+
+

[v] en castellano, Nodo de destino del Audio MediaStream

+
+
+
+
+

[i] del inglés,constraints

+
+
+
+
+

 

+

Ver también

+ diff --git a/files/es/web/api/navigator/geolocation/index.html b/files/es/web/api/navigator/geolocation/index.html new file mode 100644 index 0000000000..94c22ef6b0 --- /dev/null +++ b/files/es/web/api/navigator/geolocation/index.html @@ -0,0 +1,106 @@ +--- +title: window.navigator.geolocation +slug: Web/API/NavigatorGeolocation/geolocation +translation_of: Web/API/Navigator/geolocation +--- +

{{APIRef("Geolocation API")}}
+ La propiedad de sólo lectura Navigator.geolocation devuelve un objeto Geolocation que proporciona acceso web a la ubicación de un dispositivo. Esto permite ofrecer al sitio web o aplicación resultados personalizados basados en la ubicación del usuario.

+ +
+

Nota: Por motivos de seguridad, cuando una página web trata de acceder a la información de ubicación, se solicita permiso al usuario. Cada navegador tiene sus propias reglas sobre cómo y cuándo obtener dicho permiso.

+
+ +

Sintaxis

+ +
geo = navigator.geolocation
+
+ +

Métodos

+ +
+
{{domxref("geolocation.getCurrentPosition", "geolocation.getCurrentPosition()")}}
+
Utilizado para obtener la posición actual.
+
{{domxref("geolocation.watchPosition", "geolocation.watchPosition()")}}
+
Utilizado para asignar un manejador para dar seguimiento a cualquier cambio de ubicación.
+
{{domxref("geolocation.clearWatch", "geolocation.clearWatch()")}}
+
Utilizado para eliminar un manejador asignado a los cambios de ubicación.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Especificación inicial
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.60
+ {{CompatNo}} 15.0
+ 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico2.150{{CompatGeckoMobile("4")}}1010.603.2
+
+ +

Ver también

+ + diff --git a/files/es/web/api/navigatorgeolocation/geolocation/index.html b/files/es/web/api/navigatorgeolocation/geolocation/index.html deleted file mode 100644 index 94c22ef6b0..0000000000 --- a/files/es/web/api/navigatorgeolocation/geolocation/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: window.navigator.geolocation -slug: Web/API/NavigatorGeolocation/geolocation -translation_of: Web/API/Navigator/geolocation ---- -

{{APIRef("Geolocation API")}}
- La propiedad de sólo lectura Navigator.geolocation devuelve un objeto Geolocation que proporciona acceso web a la ubicación de un dispositivo. Esto permite ofrecer al sitio web o aplicación resultados personalizados basados en la ubicación del usuario.

- -
-

Nota: Por motivos de seguridad, cuando una página web trata de acceder a la información de ubicación, se solicita permiso al usuario. Cada navegador tiene sus propias reglas sobre cómo y cuándo obtener dicho permiso.

-
- -

Sintaxis

- -
geo = navigator.geolocation
-
- -

Métodos

- -
-
{{domxref("geolocation.getCurrentPosition", "geolocation.getCurrentPosition()")}}
-
Utilizado para obtener la posición actual.
-
{{domxref("geolocation.watchPosition", "geolocation.watchPosition()")}}
-
Utilizado para asignar un manejador para dar seguimiento a cualquier cambio de ubicación.
-
{{domxref("geolocation.clearWatch", "geolocation.clearWatch()")}}
-
Utilizado para eliminar un manejador asignado a los cambios de ubicación.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Especificación inicial
- -

Compatibilidad en navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.60
- {{CompatNo}} 15.0
- 16.0		5
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico2.150{{CompatGeckoMobile("4")}}1010.603.2
-
- -

Ver también

- - diff --git a/files/es/web/api/navigatorgeolocation/index.html b/files/es/web/api/navigatorgeolocation/index.html deleted file mode 100644 index 0f8895b7b8..0000000000 --- a/files/es/web/api/navigatorgeolocation/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: NavigatorGeolocation -slug: Web/API/NavigatorGeolocation -tags: - - API -translation_of: Web/API/Geolocation -translation_of_original: 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/web/api/navigatoronline/eventos_online_y_offline/index.html b/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html deleted file mode 100644 index d4f8a77824..0000000000 --- a/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Eventos online y offline -slug: Web/API/NavigatorOnLine/Eventos_online_y_offline -tags: - - AJAX - - DOM - - Desarrollo_Web - - Todas_las_Categorías -translation_of: Web/API/NavigatorOnLine/Online_and_offline_events ---- -

{{ Fx_minversion_header(3) }} -Firefox 3 implementa eventos Online/Offline de la especificacióbn WHATWG Web Applications 1.0. -

-

Descripción

-

Para poder construir una aplicación web offline-funcional, necesitas conocer cuándo está tu aplicación realmente offline. Además, también necesitas conocer cuándo vuelve la aplicación al estado 'online' nuevamente. A efectos prácticos, los requisitos son los siguientes: -

-
  1. Necesitas conocer cuándo el usuario vuelve a estar online, para que puedas re-sincronizar con el servidor. -
  2. Necesitas conocer cuándo el usuario está offline, para así estar seguro de poner en cola las peticiones al servidor para más tarde. -
-

Es este proceso el que los eventos online/offline ayudan a trivializar. -

Tu aplicación web quizás necesite establecer que ciertos documentos se mantengan en la caché de recursos offline. Para hacerlo, incluye elementos LINK en tu sección HEAD de la siguiente manera: -

-
<link rel="offline-resource" href="mi_recurso>
-
-

Cuando Firefox 3 o superiores procesan el HTML, esto causará que el recurso referenciado se mantenga en caché para su uso offline en un recurso especial de la caché. -

-

API

- -

navigator.onLine es una propiedad que mantiene un valor true/false (true para online, false para offline). Esta propiedad se actualiza siempre que el usuario cambia hacia "Modo sin conexión" seleccionando el menú correspondiente (Archivo -> Trabajar sin conexión en Firefox). -

Además, esta propiedad se debería actualizar siempre que el navegador no sea capaz de conectarse a la red. De acuerdo con la especificación: -

-
-El atributo navigator.onLine debe devolver false si el agente de usuario no contactará con la red cuando el usuario siga los enlaces o cuando un script solicite una página remota (o sepa que intentarlo fallaría)... -
-

Firefox 2 actualiza esta propiedad cuando cambia desde/hacia el modo offline del navegador, y cuando pierde/recupera la conectividad de la red en Windows y Linux. -

Esta propiedad existía en versiones más antiguas de Firefox e Internet Explorer (la especificación surgió a partir estas implementaciones previas), así que puedes comenzar a usarla inmediatamente. La detección automática del estado de la red se implementó en Firefox 2. -

-

eventos "online" y "offline"

-

Firefox 3 introduce dos nuevos eventos: "online" y "offline". Estos dos eventos son iniciados en el <body> de cada página cuando el usuario cambia de modo online a offline. Además, los eventos emergen desde document.body a document, terminando en window. Ambos eventos son no-cancelables (no se puede evitar que el usuario pase a modo online u offline). -

Puedes registrar listeners para estos eventos de varias maneras habituales: -

-
  • Usando addEventListener en window, document o document.body -
  • estableciendo las propiedades .ononline u .onoffline en document o document.body para que apunten a un objeto JavaScript Function (Nota: usar window.ononline o window.onoffline no funcionará por razones de compatibilidad). -
  • especificando los atributos ononline="..." u onoffline="..." en la etiqueta <body> en el código HTML. -
-

Ejemplo:

-

Hay una prueba sencilla que puedes ejecutar para verificar que los eventos están funcionando. -

-

-
 <!doctype html>
- <html>
- <head>
-   <script>
-     function updateOnlineStatus(msg) {
-       var status = document.getElementById("status");
-       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
-       status.setAttribute("class", condition);
-       var state = document.getElementById("state");
-       state.innerHTML = condition;
-       var log = document.getElementById("log");
-       log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
-     }
-     function loaded() {
-       updateOnlineStatus("load");
-       document.body.addEventListener("offline", function () {
-         updateOnlineStatus("offline")
-       }, false);
-       document.body.addEventListener("online", function () {
-         updateOnlineStatus("online")
-       }, false);
-     }
-   </script>
-   <style>...</style>
- </head>
- <body onload="loaded()">
-   <div id="status"><p id="state"></p></div>
-   <div id="log"></div>
- </body>
- </html>
-
-

Referencias

- -


-

-
-
-{{ languages( { "en": "en/Online_and_offline_events", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }} diff --git a/files/es/web/api/navigatoronline/online_and_offline_events/index.html b/files/es/web/api/navigatoronline/online_and_offline_events/index.html new file mode 100644 index 0000000000..d4f8a77824 --- /dev/null +++ b/files/es/web/api/navigatoronline/online_and_offline_events/index.html @@ -0,0 +1,91 @@ +--- +title: Eventos online y offline +slug: Web/API/NavigatorOnLine/Eventos_online_y_offline +tags: + - AJAX + - DOM + - Desarrollo_Web + - Todas_las_Categorías +translation_of: Web/API/NavigatorOnLine/Online_and_offline_events +--- +

{{ Fx_minversion_header(3) }} +Firefox 3 implementa eventos Online/Offline de la especificacióbn WHATWG Web Applications 1.0. +

+

Descripción

+

Para poder construir una aplicación web offline-funcional, necesitas conocer cuándo está tu aplicación realmente offline. Además, también necesitas conocer cuándo vuelve la aplicación al estado 'online' nuevamente. A efectos prácticos, los requisitos son los siguientes: +

+
  1. Necesitas conocer cuándo el usuario vuelve a estar online, para que puedas re-sincronizar con el servidor. +
  2. Necesitas conocer cuándo el usuario está offline, para así estar seguro de poner en cola las peticiones al servidor para más tarde. +
+

Es este proceso el que los eventos online/offline ayudan a trivializar. +

Tu aplicación web quizás necesite establecer que ciertos documentos se mantengan en la caché de recursos offline. Para hacerlo, incluye elementos LINK en tu sección HEAD de la siguiente manera: +

+
<link rel="offline-resource" href="mi_recurso>
+
+

Cuando Firefox 3 o superiores procesan el HTML, esto causará que el recurso referenciado se mantenga en caché para su uso offline en un recurso especial de la caché. +

+

API

+ +

navigator.onLine es una propiedad que mantiene un valor true/false (true para online, false para offline). Esta propiedad se actualiza siempre que el usuario cambia hacia "Modo sin conexión" seleccionando el menú correspondiente (Archivo -> Trabajar sin conexión en Firefox). +

Además, esta propiedad se debería actualizar siempre que el navegador no sea capaz de conectarse a la red. De acuerdo con la especificación: +

+
+El atributo navigator.onLine debe devolver false si el agente de usuario no contactará con la red cuando el usuario siga los enlaces o cuando un script solicite una página remota (o sepa que intentarlo fallaría)... +
+

Firefox 2 actualiza esta propiedad cuando cambia desde/hacia el modo offline del navegador, y cuando pierde/recupera la conectividad de la red en Windows y Linux. +

Esta propiedad existía en versiones más antiguas de Firefox e Internet Explorer (la especificación surgió a partir estas implementaciones previas), así que puedes comenzar a usarla inmediatamente. La detección automática del estado de la red se implementó en Firefox 2. +

+

eventos "online" y "offline"

+

Firefox 3 introduce dos nuevos eventos: "online" y "offline". Estos dos eventos son iniciados en el <body> de cada página cuando el usuario cambia de modo online a offline. Además, los eventos emergen desde document.body a document, terminando en window. Ambos eventos son no-cancelables (no se puede evitar que el usuario pase a modo online u offline). +

Puedes registrar listeners para estos eventos de varias maneras habituales: +

+
  • Usando addEventListener en window, document o document.body +
  • estableciendo las propiedades .ononline u .onoffline en document o document.body para que apunten a un objeto JavaScript Function (Nota: usar window.ononline o window.onoffline no funcionará por razones de compatibilidad). +
  • especificando los atributos ononline="..." u onoffline="..." en la etiqueta <body> en el código HTML. +
+

Ejemplo:

+

Hay una prueba sencilla que puedes ejecutar para verificar que los eventos están funcionando. +

+

+
 <!doctype html>
+ <html>
+ <head>
+   <script>
+     function updateOnlineStatus(msg) {
+       var status = document.getElementById("status");
+       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
+       status.setAttribute("class", condition);
+       var state = document.getElementById("state");
+       state.innerHTML = condition;
+       var log = document.getElementById("log");
+       log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
+     }
+     function loaded() {
+       updateOnlineStatus("load");
+       document.body.addEventListener("offline", function () {
+         updateOnlineStatus("offline")
+       }, false);
+       document.body.addEventListener("online", function () {
+         updateOnlineStatus("online")
+       }, false);
+     }
+   </script>
+   <style>...</style>
+ </head>
+ <body onload="loaded()">
+   <div id="status"><p id="state"></p></div>
+   <div id="log"></div>
+ </body>
+ </html>
+
+

Referencias

+ +


+

+
+
+{{ languages( { "en": "en/Online_and_offline_events", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }} diff --git a/files/es/web/api/node/elementopadre/index.html b/files/es/web/api/node/elementopadre/index.html deleted file mode 100644 index 2a2e947a8d..0000000000 --- a/files/es/web/api/node/elementopadre/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Node.parentElement -slug: Web/API/Node/elementoPadre -tags: - - API - - DOM - - NecesitaCompatiblidadNavegador - - Nodo - - Propiedad -translation_of: Web/API/Node/parentElement ---- -
-
{{APIRef("DOM")}}
-
- -

La propiedad de sólo lectura de Nodo.parentElement devuelve el nodo padre del DOM {{domxref("Element")}}, o null, si el nodo no tiene padre o si el padre no es un {{domxref("Element")}} DOM .

- -

Sintaxis

- -
elementoPadre = node.parentElement
- -

El elementoPadre es el padre del nodo actual. Esto es siempre un objecto {{domxref("Element")}} DOM, o null.

- -

Ejemplo

- -
if (node.parentElement) {
-    node.parentElement.style.color = "red";
-}
- -

Compatibilidad en navegadores

- -

En algunos navegadores, la propiedad elementoPadre es solo definida en nodos que ellos mismos son {{domxref("Element")}}. En particular, esto no está definido en nodos de texto.

- -

{{Compat("api.Node.parentElement")}}

- -

Especificación

- -
    -
  • {{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}
    • -
- -

Ver también

- -
    -
  • {{domxref("Node.parentNode")}}
    • -
diff --git a/files/es/web/api/node/insertarantes/index.html b/files/es/web/api/node/insertarantes/index.html deleted file mode 100644 index 102d4dfbdd..0000000000 --- a/files/es/web/api/node/insertarantes/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: Node.insertBefore() -slug: Web/API/Node/insertarAntes -tags: - - API - - DOM - - Nodo - - Referencia - - metodo -translation_of: Web/API/Node/insertBefore ---- -
{{APIRef("DOM")}}
- -

El método Node.insertBefore() inserta un nodo antes del nodo de referencia como hijo de un nodo padre indicado. Si el nodo hijo es una referencia a un nodo ya existente en el documento, insertBefore() lo mueve de la posición actual a la nueva posición (no hay necesidad de eliminar el nodo de su nodo padre antes de agregarlo al algún nodo nuevo).

- -

Esto significa que el nodo no puede estar en dos puntos del documento al simultáneamente. Por lo que si el nodo ya tiene un padre, primero se elimina el nodo, y luego se inserta en la nueva posición. {{domxref("Node.cloneNode()")}} puede utilizarse para hacer una copia de un nodo antes de insertarlo en un nuevo padre. Ten en cuenta que las copias hechas con cloneNode() no se mantendrán sincronizadas automáticamente.

- -

Si el nodo de referencia es null, el nodo indicado se añadirá al final de la lista de hijos del nodo padre especificado.

- -

Si el hijo proporcionado es un {{domxref("DocumentFragment")}}, el contenido completo del DocumentFragment se moverá a la lista de hijos del nodo padre indicado.

- -

Sintaxis

- -
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
-
- -
    -
  • insertedNode El nodo que esta siendo insertado, es decir, newNode
    • -
  • parentNode El padre del nodo recién insertado.
    • -
  • newNode El nodo a insertar.
    • -
  • referenceNode El nodo antes del cual se inserta newNode.
    • -
- -

Si referenceNode es null, el newNode se insertará al final de la lista de nodos hijos.

- -
-

referenceNode no es un parámetro opcional -- debes pasar explícitamente un Node o null. No proporcionándolo o pasando valores no válidos podría provocar un comportamiento distinto en diferentes versiones de navegadores.

-
- -

Valor devuelto

- -

El valor devuelto es el hijo añadido excepto cuando newNode es un {{domxref("DocumentFragment")}}, en cuyo caso se devuelve un {{domxref("DocumentFragment")}}.

- -

Ejemplo

- -

Ejemplo 1

- -
<div id="parentElement">
-   <span id="childElement">foo bar</span>
-</div>
-
-<script>
-// Crear el nodo a insertar
-var newNode = document.createElement("span");
-
-// Obtener una referencia al nodo padre
-var parentDiv = document.getElementById("childElement").parentNode;
-
-// Comienzo del test [ 1 ] : Existe un childElement --> Todo funciona correctamente
-var sp2 = document.getElementById("childElement");
-parentDiv.insertBefore(newNode, sp2);
-// Fin del test [ 1 ]
-
-// Comienzo del test [ 2 ] : childElement no es del tipo undefined
-var sp2 = undefined; // No existe un nodo con id "childElement"
-parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
-// Fin del test [ 2 ]
-
-// Comienzo del test [ 3 ] : childElement es de Tipo "undefined" ( string )
-var sp2 = "undefined"; // No existe un nodo con id "childElement"
-parentDiv.insertBefore(newNode, sp2); // Genera "Type Error: Invalid Argument"
-// Fin del test [ 3 ]
-</script>
-
- -

Ejemplo 2

- -
<div id="parentElement">
-  <span id="childElement">foo bar</span>
-</div>
-
-<script>
-// Crea un nuevo, elemento <span>
-var sp1 = document.createElement("span");
-
-// Obtener una referencia al elemento, antes de donde queremos insertar el elemento
-var sp2 = document.getElementById("childElement");
-// Obtener una referencia al nodo padre
-var parentDiv = sp2.parentNode;
-
-// Inserta un nuevo elemento en el DOM antes de sp2
-parentDiv.insertBefore(sp1, sp2);
-</script>
-
- -

No existe el método insertAfter().  Puede ser emulado mediante la combinación del método con {{domxref("Node.nextSibling()")}}.

- -

En el ejemplo anterior, sp1 podría insertarse después de sp2 usando:

- -
parentDiv.insertBefore(sp1, sp2.nextSibling);
- -

Si sp2 no tiene ningún hermano depués de él, entonces debe ser el último hijo — sp2.nextSibling devuelve null, y sp1 se inserta al final de la lista de nodos hijos (inmediatamente después de sp2).

- -

Ejemplo 3

- -

Inserta un elemento antes del primer elemento hijo, utilizando la propiedad firstChild.

- -
// Obtener una referencia al elemento en el que se quiere insertar un nuevo nodo
-var parentElement = document.getElementById('parentElement');
-// Obtener una referencia al primer hijo
-var theFirstChild = parentElement.firstChild;
-
-// Crear un nuevo elemento
-var newElement = document.createElement("div");
-
-// Insertar el nuevo elemento antes que el primer hijo
-parentElement.insertBefore(newElement, theFirstChild);
-
- -

Cuando el elemento no tiene ub primer hijo, entonces firstChild es null. Aun así, el elemento se añade al padre después del último hijo. Puesto que el elemento padre no tenía primer hijo, tampoco tiene último hijo. Por tanto, el nuevo elemento es el único elemento después de ser insertado.

- -

Compatibilidad en navegadores

- -

{{Compat("api.Node.insertBefore")}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM WHATWG')}}Corrige errores en el algoritmo de inserción
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM4')}}Describe el algoritmo con mayor detalle
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM3 Core')}}Sin cambios notables
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM2 Core')}}Sin cambios notables
{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}{{Spec2('DOM1')}}Introducido
- -

Ver también

- -
    -
  • {{domxref("Node.removeChild()")}}
    • -
  • {{domxref("Node.replaceChild()")}}
    • -
  • {{domxref("Node.appendChild()")}}
    • -
  • {{domxref("Node.hasChildNodes()")}}
    • -
  • {{domxref("Element.insertAdjacentElement()")}}
    • -
  • {{domxref("ParentNode.prepend()")}}
    • -
diff --git a/files/es/web/api/node/insertbefore/index.html b/files/es/web/api/node/insertbefore/index.html new file mode 100644 index 0000000000..102d4dfbdd --- /dev/null +++ b/files/es/web/api/node/insertbefore/index.html @@ -0,0 +1,172 @@ +--- +title: Node.insertBefore() +slug: Web/API/Node/insertarAntes +tags: + - API + - DOM + - Nodo + - Referencia + - metodo +translation_of: Web/API/Node/insertBefore +--- +
{{APIRef("DOM")}}
+ +

El método Node.insertBefore() inserta un nodo antes del nodo de referencia como hijo de un nodo padre indicado. Si el nodo hijo es una referencia a un nodo ya existente en el documento, insertBefore() lo mueve de la posición actual a la nueva posición (no hay necesidad de eliminar el nodo de su nodo padre antes de agregarlo al algún nodo nuevo).

+ +

Esto significa que el nodo no puede estar en dos puntos del documento al simultáneamente. Por lo que si el nodo ya tiene un padre, primero se elimina el nodo, y luego se inserta en la nueva posición. {{domxref("Node.cloneNode()")}} puede utilizarse para hacer una copia de un nodo antes de insertarlo en un nuevo padre. Ten en cuenta que las copias hechas con cloneNode() no se mantendrán sincronizadas automáticamente.

+ +

Si el nodo de referencia es null, el nodo indicado se añadirá al final de la lista de hijos del nodo padre especificado.

+ +

Si el hijo proporcionado es un {{domxref("DocumentFragment")}}, el contenido completo del DocumentFragment se moverá a la lista de hijos del nodo padre indicado.

+ +

Sintaxis

+ +
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
+
+ +
    +
  • insertedNode El nodo que esta siendo insertado, es decir, newNode
    • +
  • parentNode El padre del nodo recién insertado.
    • +
  • newNode El nodo a insertar.
    • +
  • referenceNode El nodo antes del cual se inserta newNode.
    • +
+ +

Si referenceNode es null, el newNode se insertará al final de la lista de nodos hijos.

+ +
+

referenceNode no es un parámetro opcional -- debes pasar explícitamente un Node o null. No proporcionándolo o pasando valores no válidos podría provocar un comportamiento distinto en diferentes versiones de navegadores.

+
+ +

Valor devuelto

+ +

El valor devuelto es el hijo añadido excepto cuando newNode es un {{domxref("DocumentFragment")}}, en cuyo caso se devuelve un {{domxref("DocumentFragment")}}.

+ +

Ejemplo

+ +

Ejemplo 1

+ +
<div id="parentElement">
+   <span id="childElement">foo bar</span>
+</div>
+
+<script>
+// Crear el nodo a insertar
+var newNode = document.createElement("span");
+
+// Obtener una referencia al nodo padre
+var parentDiv = document.getElementById("childElement").parentNode;
+
+// Comienzo del test [ 1 ] : Existe un childElement --> Todo funciona correctamente
+var sp2 = document.getElementById("childElement");
+parentDiv.insertBefore(newNode, sp2);
+// Fin del test [ 1 ]
+
+// Comienzo del test [ 2 ] : childElement no es del tipo undefined
+var sp2 = undefined; // No existe un nodo con id "childElement"
+parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
+// Fin del test [ 2 ]
+
+// Comienzo del test [ 3 ] : childElement es de Tipo "undefined" ( string )
+var sp2 = "undefined"; // No existe un nodo con id "childElement"
+parentDiv.insertBefore(newNode, sp2); // Genera "Type Error: Invalid Argument"
+// Fin del test [ 3 ]
+</script>
+
+ +

Ejemplo 2

+ +
<div id="parentElement">
+  <span id="childElement">foo bar</span>
+</div>
+
+<script>
+// Crea un nuevo, elemento <span>
+var sp1 = document.createElement("span");
+
+// Obtener una referencia al elemento, antes de donde queremos insertar el elemento
+var sp2 = document.getElementById("childElement");
+// Obtener una referencia al nodo padre
+var parentDiv = sp2.parentNode;
+
+// Inserta un nuevo elemento en el DOM antes de sp2
+parentDiv.insertBefore(sp1, sp2);
+</script>
+
+ +

No existe el método insertAfter().  Puede ser emulado mediante la combinación del método con {{domxref("Node.nextSibling()")}}.

+ +

En el ejemplo anterior, sp1 podría insertarse después de sp2 usando:

+ +
parentDiv.insertBefore(sp1, sp2.nextSibling);
+ +

Si sp2 no tiene ningún hermano depués de él, entonces debe ser el último hijo — sp2.nextSibling devuelve null, y sp1 se inserta al final de la lista de nodos hijos (inmediatamente después de sp2).

+ +

Ejemplo 3

+ +

Inserta un elemento antes del primer elemento hijo, utilizando la propiedad firstChild.

+ +
// Obtener una referencia al elemento en el que se quiere insertar un nuevo nodo
+var parentElement = document.getElementById('parentElement');
+// Obtener una referencia al primer hijo
+var theFirstChild = parentElement.firstChild;
+
+// Crear un nuevo elemento
+var newElement = document.createElement("div");
+
+// Insertar el nuevo elemento antes que el primer hijo
+parentElement.insertBefore(newElement, theFirstChild);
+
+ +

Cuando el elemento no tiene ub primer hijo, entonces firstChild es null. Aun así, el elemento se añade al padre después del último hijo. Puesto que el elemento padre no tenía primer hijo, tampoco tiene último hijo. Por tanto, el nuevo elemento es el único elemento después de ser insertado.

+ +

Compatibilidad en navegadores

+ +

{{Compat("api.Node.insertBefore")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM WHATWG')}}Corrige errores en el algoritmo de inserción
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM4')}}Describe el algoritmo con mayor detalle
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM3 Core')}}Sin cambios notables
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM2 Core')}}Sin cambios notables
{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}{{Spec2('DOM1')}}Introducido
+ +

Ver también

+ +
    +
  • {{domxref("Node.removeChild()")}}
    • +
  • {{domxref("Node.replaceChild()")}}
    • +
  • {{domxref("Node.appendChild()")}}
    • +
  • {{domxref("Node.hasChildNodes()")}}
    • +
  • {{domxref("Element.insertAdjacentElement()")}}
    • +
  • {{domxref("ParentNode.prepend()")}}
    • +
diff --git a/files/es/web/api/node/nodoprincipal/index.html b/files/es/web/api/node/nodoprincipal/index.html deleted file mode 100644 index f6faf58631..0000000000 --- a/files/es/web/api/node/nodoprincipal/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Nodo.nodoPrincipal -slug: Web/API/Node/nodoPrincipal -tags: - - API - - DOM - - Gecko - - Propiedad -translation_of: Web/API/Node -translation_of_original: Web/API/Node/nodePrincipal ---- -
-
{{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/web/api/node/parentelement/index.html b/files/es/web/api/node/parentelement/index.html new file mode 100644 index 0000000000..2a2e947a8d --- /dev/null +++ b/files/es/web/api/node/parentelement/index.html @@ -0,0 +1,46 @@ +--- +title: Node.parentElement +slug: Web/API/Node/elementoPadre +tags: + - API + - DOM + - NecesitaCompatiblidadNavegador + - Nodo + - Propiedad +translation_of: Web/API/Node/parentElement +--- +
+
{{APIRef("DOM")}}
+
+ +

La propiedad de sólo lectura de Nodo.parentElement devuelve el nodo padre del DOM {{domxref("Element")}}, o null, si el nodo no tiene padre o si el padre no es un {{domxref("Element")}} DOM .

+ +

Sintaxis

+ +
elementoPadre = node.parentElement
+ +

El elementoPadre es el padre del nodo actual. Esto es siempre un objecto {{domxref("Element")}} DOM, o null.

+ +

Ejemplo

+ +
if (node.parentElement) {
+    node.parentElement.style.color = "red";
+}
+ +

Compatibilidad en navegadores

+ +

En algunos navegadores, la propiedad elementoPadre es solo definida en nodos que ellos mismos son {{domxref("Element")}}. En particular, esto no está definido en nodos de texto.

+ +

{{Compat("api.Node.parentElement")}}

+ +

Especificación

+ +
    +
  • {{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}
    • +
+ +

Ver también

+ +
    +
  • {{domxref("Node.parentNode")}}
    • +
diff --git a/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html b/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html deleted file mode 100644 index 8220534f63..0000000000 --- a/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html +++ /dev/null @@ -1,294 +0,0 @@ ---- -title: Usando la API de Notificaciones -slug: Web/API/Notifications_API/Usando_la_API_de_Notificaciones -tags: - - API - - Notificaciones - - Tutorial -translation_of: Web/API/Notifications_API/Using_the_Notifications_API ---- -

{{APIRef("Web Notifications")}}

- -

La API de Notificaciones permite a una página web enviar notificaciones que se mostrarán fuera de la web al nivel del sistema. Esto permite a las aplicaciones web enviar información al usuario aunque estas estén de fondo.

- -

{{AvailableInWorkers}}

- -

Para comenzar, tenemos que saber qué son las notificaciones y cómo se muestran. En la imagen de abajo se puede ver un ejemplo de notificaciones en android.

- -

- -

El sistema de notificaciones variará según el navegador y la plataforma en la que estemos, pero esto no va a suponer ningún problema. La API de notificaciones está escrita de manera que sea compatible con la gran mayoría de sistemas.

- -

Ejemplos

- -
-
-

Un ejemplo claro de uso de notificaciones web puede ser un mail basado en web o una aplicación IRC que nos notificará cada vez que nos llegue un nuevo mensaje, aunque estemos fuera de la aplicación. Un ejemplo de esto lo podemos ver en Slack.

- -

Hemos escrito un par de ejemplos del mundo real para dar una idea más clara de cómo podemos usar las notificaciones web:

- -
    -
  • Lista de pendientes: Esto es una app sencilla que almacena las tareas pendientes localmente usando IndexedDB y avisa al usuario cuándo hay que realizar las tareas mediante notificaciones. Descarga el código, o echa un vistazo al ejemplo en tiempo real.
    • -
  • Emogotchi: Una parodia absurda de Tamagotchi, en la que tienes que mantener a tu Emo miserable o perderás el juego. Esto usa las notificaciones del sistema para indicarte cómo lo estás haciendo y para quejarse de ti, TODO EL RATO. Descarga el código de Emogotchi, o echa un vistazo a la versión en tiempo real.
    • -
-
- -
-

.

-
-
- -

Pidiendo permiso

- -

Antes de que una app pueda lanzar una notificación, el usuario tiene que darle permiso para ello. Esto es un requisito común cuando una API intenta interactuar con algo fuera de una página web — al menos una vez, el usuario tendrá que permitir a la aplicación mostrar notificaciones, de esta forma, el usuario decide qué aplicaciones le pueden mostrar notificaciones y cuáles no.

- -

Comprobando el permiso actual

- -

Puedes comprobar si ya tienes permiso comprobando la propiedad {{domxref("Notification.permission")}} de solo lectura. Esta puede tener uno de los siguientes valores:

- -
-
default
-
No se le ha pedido permiso al usuario aún, por lo que la app no tiene permisos.
-
granted
-
El usuario ha permitido las notificaciones de la app.
-
denied
-
El usuario ha denegado las notificaciones de la app.
-
- -

Obteniendo permiso

- -

Si la aplicación aún no tiene permiso para mostrar notificaciones, tendremos que hacer uso de {{domxref("Notification.requestPermission()")}} para pedir permiso al usuario. En su manera más simple, tal y como se usa en la Demo de Emogotchi (código fuente), solo tenemos que incluir lo siguiente:

- -
Notification.requestPermission().then(function(result) {
-  console.log(result);
-});
- -

Esto usa la versión promise del método, que está soportada en las versiones recientes (p.ej. Firefox 47). Si quieres soportar versiones más antiguas tendrás que usar la versión de callback, que es la siguiente:

- -
Notification.requestPermission();
- -

La versión de callback acepta de forma opcional una función callback que será ejecutada cuando el usuario responda a si quiere notificaciones o no (tal y como se ve en el segundo else ... if abajo). Por lo general, pedirás permiso para mostrar notificaciones una vez que hayas inicializado la app, y antes de lanzar una notificación. Si quieres ser muy cuidadoso puedes usar lo siguiente (ver To-do List Notifications):

- -
function notifyMe() {
-  // Comprobamos si el navegador soporta las notificaciones
-  if (!("Notification" in window)) {
-    alert("Este navegador no soporta las notificaciones del sistema");
-  }
-
-  // Comprobamos si ya nos habían dado permiso
-  else if (Notification.permission === "granted") {
-    // Si esta correcto lanzamos la notificación
-    var notification = new Notification("Holiwis :D");
-  }
-
-  // Si no, tendremos que pedir permiso al usuario
-  else if (Notification.permission !== 'denied') {
-    Notification.requestPermission(function (permission) {
-      // Si el usuario acepta, lanzamos la notificación
-      if (permission === "granted") {
-        var notification = new Notification("Gracias majo!");
-      }
-    });
-  }
-
-  // Finalmente, si el usuario te ha denegado el permiso y
-  // quieres ser respetuoso no hay necesidad molestar más.
-}
- -
-

Nota: Antes de la versión 37, Chrome no te deja llamar a {{domxref("Notification.requestPermission()")}} en manejador de eventos load (ver problema 274284).

-
- -

Permisos en Firefox OS manifest

- -

Ten en cuenta que mientras la API de Notificaciones no esté {{Glossary("privileged")}} o {{Glossary("certified")}}, deberías seguir inculyendo una entrada en tu archivo manifest.webapp cuando vayas a usarlo en una app en Firefox OS:

- -
"permissions": {
-  "desktop-notification": {
-    "description": "Needed for creating system notifications."
-  }
-},
-"messages": [{"notification": "path/to/your/index.html"}]
-
-
- -
-

Nota: Cuándo una aplicación es instalada, no deberías de necesitar {{anch("Getting permission","explicitly request permission")}}, pero vas a seguir necesitando los permisos y las entradas de texto de arriba para poder lanzar las notificaciones.

-
- -

Creando una notificación

- -

Crear una notificación es fácil, simplemente usa el constructor {{domxref("Notification")}}. Este constructor espera un título que mostrar en la notificación y otras opciones para mejorar la notificación, como un {{domxref("Notification.icon","icon")}} o un texto {{domxref("Notification.body","body")}}.

- -

Por ejemplo, en el Ejemplo de Emogotchi tenemos dos funciones que pueden ser llamadas cuando hay que lanzar una notificación; el uso de una u otra depende de si queremos establecer el contenido de la notificación, o si queremos una notificación con contenido aleatorio:

- -
function spawnNotification(theBody,theIcon,theTitle) {
-  var options = {
-      body: theBody,
-      icon: theIcon
-  }
-  var n = new Notification(theTitle,options);
-  setTimeout(n.close.bind(n), 5000);
-}
-
-function randomNotification() {
-  var randomQuote = quoteChooser();
-  var options = {
-      body: randomQuote,
-      icon: 'img/sad_head.png',
-  }
-
-  var n = new Notification('Emogotchi says',options);
-  setTimeout(n.close.bind(n), 5000);
-}
- -

Cerrando las notificaciones

- -

Firefox y Safari cierran las notificaciones automáticamente tras cierto tiempo (unos 4 segundos). Esto también puede suceder a nivel de sistema operativo (en Windows duran 7 segundos por defecto). En cambio, en algunos navegadores no se cierran automáticamente, como en Chrome, por ejemplo. Para asegurarnos de que las notificaciones se cierran en todos los navegadores, al final de las funciones de arriba, llamamos a la función {domxref("Notification.close")}}  dentro de {{domxref("WindowTimers.setTimeout","setTimeout()")}} para cerrar la notificación tras 5 segundos. Date cuenta también del uso que hacemos de bind() para asegurarnos de que la función close() está asociada a la notificación.

- -
setTimeout(n.close.bind(n), 5000);
-
- -
-

Nota: Cuándo recibes un evento "close", no hay ninguna garantía de que haya sido el usuario quién ha cerrado la notificación. Esto coincide con la especificación que dice: "Cuando una notificación es cerrada, sea por la misma plataforma o por el usuario, se deben lanzar los pasos de cierre para la misma".

-
- -

Eventos de Notificación

- -

Las especificaciones de la API de notificaciones listan cuatro eventos que pueden ser lanzados en la instancia {{domxref("Notification")}}:

- -
-
{{event("click")}}
-
Lanzado cuando el usuario hace click en la notificación.
-
{{event("error")}}
-
Lanzado cuando algo falla en la notificación; habitualmente es porque la notificación no se ha podido mostrar por algún motivo.
-
- -

Estos eventos se pueden monitorizar usando los manejadores {{domxref("Notification.onclick","onclick")}} y {{domxref("Notification.onerror","onerror")}}. Como {{domxref("Notification")}} también hereda de {{domxref("EventTarget")}}, es posible usar el método {{domxref("EventTarget.addEventListener","addEventListener()")}} en ella.

- -

También hay otros dos eventos que estaban listados en la especificación, pero que han sido eliminados recientemente. Estos puede que sigan funcionando en los navegadores por ahora, pero deberían tratarse como obsoletos y evitar su uso:

- -
-
{{event("close")}}
-
Lanzado cuándo la notificación se cierra.
-
{{event("show")}}
-
Lanzado cuándo la notificación se muestra al usuario.
-
- -

Reemplazando notificaciones existentes

- -

Normalmente los usuario no quieren recibir muchas notificaciones en poco tiempo — por ejemplo, una aplicación de mensajería que te notifica cada mensaje que te llegue, y te llegan un montón. Para evitar el spam de notificaciones, se puede modificar la cola de notificaciones, reemplazando una o varias notificaciones pendientes, por una nueva notificación.

- -

Para hacer esto, se puede añadir una etiqueta a cualquier nueva notificación. Si ya hay una notificación con la misma etiqueta y aún no se ha mostrado, la nueva reemplazará a la anterior. Si la notificación con la misma etiqueta ya ha sido mostrada, se cerrará la anterior y se mostrará la nueva.

- -

Ejemplo de etiquta

- -

Teniendo el siguiente código HTML:

- -
<button>Notifícame!</button>
- -

Es posible controlar múltiples notificaciones de la siguiente forma:

- -
window.addEventListener('load', function () {
-  // Primero, comprobamos si tenemos permiso para lanzar notificaciones
-  // Si no lo tenemos, lo pedimos
-  if (window.Notification && Notification.permission !== "granted") {
-    Notification.requestPermission(function (status) {
-      if (Notification.permission !== status) {
-        Notification.permission = status;
-      }
-    });
-  }
-
-  var button = document.getElementsByTagName('button')[0];
-
-  button.addEventListener('click', function () {
-    // Si el usuario ha dado permiso
-    // le intentamos enviar 10 notificaciones
-    if (window.Notification && Notification.permission === "granted") {
-      var i = 0;
-      // Usamos un inteval porque algunos navegadores (Firefox incluído) bloquean las notificaciones si se envían demasiadas en cierto tiempo.
-      var interval = window.setInterval(function () {
-        // Gracias a la etiqueta, deberíamos de ver sólo la notificación "Holiws! 9"
-        var n = new Notification("Holiwis! " + i, {tag: 'soManyNotification'});
-        if (i++ == 9) {
-          window.clearInterval(interval);
-        }
-      }, 200);
-    }
-
-    // Si el usuario no ha dicho si quiere notificaciones
-    // Nota: en Chrome no estamos seguros de si la propiedad permission
-    // esta asignada, por lo que es inseguro comprobar el valor "default".
-    else if (window.Notification && Notification.permission !== "denied") {
-      Notification.requestPermission(function (status) {
-        // Si el usuario acepta
-        if (status === "granted") {
-          var i = 0;
-          // Usamos un inteval porque algunos navegadores (Firefox incluído) bloquean las notificaciones si se envían demasiadas en cierto tiempo.
-          var interval = window.setInterval(function () {
-          // Gracias a la etiqueta, deberíamos de ver sólo la notificación "Holiws! 9" var n = new Notification("Holiwis! " + i, {tag: 'soManyNotification'});
-            if (i++ == 9) {
-              window.clearInterval(interval);
-            }
-          }, 200);
-        }
-
-        // Otherwise, we can fallback to a regular modal alert
-        else {
-          alert("Hi!");
-        }
-      });
-    }
-
-    // If the user refuses to get notified
-    else {
-      // We can fallback to a regular modal alert
-      alert("Hi!");
-    }
-  });
-});
- -

Comprueba el ejemplo en directo abajo:

- -

{{ EmbedLiveSample('Tag_example', '100%', 30) }}

- -

Receiving notification of clicks on app notifications

- -

When a user clicks on a notification generated by an app, you will be notified of this event in two different ways, depending on the circumstance:

- -
    -
  1. A click event if your app has not closed or been put in the background between the time you create the notification and the time the user clicks on it.
    2. -
  2. A system message otherwise.
    3. -
- -

See this code snippet for an example of how to deal with this.

- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilidad de navegadores

- -

{{page("/en-US/Web/API/Notification","Browser compatibility")}}

- -

Ver también

- - diff --git a/files/es/web/api/notifications_api/using_the_notifications_api/index.html b/files/es/web/api/notifications_api/using_the_notifications_api/index.html new file mode 100644 index 0000000000..8220534f63 --- /dev/null +++ b/files/es/web/api/notifications_api/using_the_notifications_api/index.html @@ -0,0 +1,294 @@ +--- +title: Usando la API de Notificaciones +slug: Web/API/Notifications_API/Usando_la_API_de_Notificaciones +tags: + - API + - Notificaciones + - Tutorial +translation_of: Web/API/Notifications_API/Using_the_Notifications_API +--- +

{{APIRef("Web Notifications")}}

+ +

La API de Notificaciones permite a una página web enviar notificaciones que se mostrarán fuera de la web al nivel del sistema. Esto permite a las aplicaciones web enviar información al usuario aunque estas estén de fondo.

+ +

{{AvailableInWorkers}}

+ +

Para comenzar, tenemos que saber qué son las notificaciones y cómo se muestran. En la imagen de abajo se puede ver un ejemplo de notificaciones en android.

+ +

+ +

El sistema de notificaciones variará según el navegador y la plataforma en la que estemos, pero esto no va a suponer ningún problema. La API de notificaciones está escrita de manera que sea compatible con la gran mayoría de sistemas.

+ +

Ejemplos

+ +
+
+

Un ejemplo claro de uso de notificaciones web puede ser un mail basado en web o una aplicación IRC que nos notificará cada vez que nos llegue un nuevo mensaje, aunque estemos fuera de la aplicación. Un ejemplo de esto lo podemos ver en Slack.

+ +

Hemos escrito un par de ejemplos del mundo real para dar una idea más clara de cómo podemos usar las notificaciones web:

+ +
    +
  • Lista de pendientes: Esto es una app sencilla que almacena las tareas pendientes localmente usando IndexedDB y avisa al usuario cuándo hay que realizar las tareas mediante notificaciones. Descarga el código, o echa un vistazo al ejemplo en tiempo real.
    • +
  • Emogotchi: Una parodia absurda de Tamagotchi, en la que tienes que mantener a tu Emo miserable o perderás el juego. Esto usa las notificaciones del sistema para indicarte cómo lo estás haciendo y para quejarse de ti, TODO EL RATO. Descarga el código de Emogotchi, o echa un vistazo a la versión en tiempo real.
    • +
+
+ +
+

.

+
+
+ +

Pidiendo permiso

+ +

Antes de que una app pueda lanzar una notificación, el usuario tiene que darle permiso para ello. Esto es un requisito común cuando una API intenta interactuar con algo fuera de una página web — al menos una vez, el usuario tendrá que permitir a la aplicación mostrar notificaciones, de esta forma, el usuario decide qué aplicaciones le pueden mostrar notificaciones y cuáles no.

+ +

Comprobando el permiso actual

+ +

Puedes comprobar si ya tienes permiso comprobando la propiedad {{domxref("Notification.permission")}} de solo lectura. Esta puede tener uno de los siguientes valores:

+ +
+
default
+
No se le ha pedido permiso al usuario aún, por lo que la app no tiene permisos.
+
granted
+
El usuario ha permitido las notificaciones de la app.
+
denied
+
El usuario ha denegado las notificaciones de la app.
+
+ +

Obteniendo permiso

+ +

Si la aplicación aún no tiene permiso para mostrar notificaciones, tendremos que hacer uso de {{domxref("Notification.requestPermission()")}} para pedir permiso al usuario. En su manera más simple, tal y como se usa en la Demo de Emogotchi (código fuente), solo tenemos que incluir lo siguiente:

+ +
Notification.requestPermission().then(function(result) {
+  console.log(result);
+});
+ +

Esto usa la versión promise del método, que está soportada en las versiones recientes (p.ej. Firefox 47). Si quieres soportar versiones más antiguas tendrás que usar la versión de callback, que es la siguiente:

+ +
Notification.requestPermission();
+ +

La versión de callback acepta de forma opcional una función callback que será ejecutada cuando el usuario responda a si quiere notificaciones o no (tal y como se ve en el segundo else ... if abajo). Por lo general, pedirás permiso para mostrar notificaciones una vez que hayas inicializado la app, y antes de lanzar una notificación. Si quieres ser muy cuidadoso puedes usar lo siguiente (ver To-do List Notifications):

+ +
function notifyMe() {
+  // Comprobamos si el navegador soporta las notificaciones
+  if (!("Notification" in window)) {
+    alert("Este navegador no soporta las notificaciones del sistema");
+  }
+
+  // Comprobamos si ya nos habían dado permiso
+  else if (Notification.permission === "granted") {
+    // Si esta correcto lanzamos la notificación
+    var notification = new Notification("Holiwis :D");
+  }
+
+  // Si no, tendremos que pedir permiso al usuario
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // Si el usuario acepta, lanzamos la notificación
+      if (permission === "granted") {
+        var notification = new Notification("Gracias majo!");
+      }
+    });
+  }
+
+  // Finalmente, si el usuario te ha denegado el permiso y
+  // quieres ser respetuoso no hay necesidad molestar más.
+}
+ +
+

Nota: Antes de la versión 37, Chrome no te deja llamar a {{domxref("Notification.requestPermission()")}} en manejador de eventos load (ver problema 274284).

+
+ +

Permisos en Firefox OS manifest

+ +

Ten en cuenta que mientras la API de Notificaciones no esté {{Glossary("privileged")}} o {{Glossary("certified")}}, deberías seguir inculyendo una entrada en tu archivo manifest.webapp cuando vayas a usarlo en una app en Firefox OS:

+ +
"permissions": {
+  "desktop-notification": {
+    "description": "Needed for creating system notifications."
+  }
+},
+"messages": [{"notification": "path/to/your/index.html"}]
+
+
+ +
+

Nota: Cuándo una aplicación es instalada, no deberías de necesitar {{anch("Getting permission","explicitly request permission")}}, pero vas a seguir necesitando los permisos y las entradas de texto de arriba para poder lanzar las notificaciones.

+
+ +

Creando una notificación

+ +

Crear una notificación es fácil, simplemente usa el constructor {{domxref("Notification")}}. Este constructor espera un título que mostrar en la notificación y otras opciones para mejorar la notificación, como un {{domxref("Notification.icon","icon")}} o un texto {{domxref("Notification.body","body")}}.

+ +

Por ejemplo, en el Ejemplo de Emogotchi tenemos dos funciones que pueden ser llamadas cuando hay que lanzar una notificación; el uso de una u otra depende de si queremos establecer el contenido de la notificación, o si queremos una notificación con contenido aleatorio:

+ +
function spawnNotification(theBody,theIcon,theTitle) {
+  var options = {
+      body: theBody,
+      icon: theIcon
+  }
+  var n = new Notification(theTitle,options);
+  setTimeout(n.close.bind(n), 5000);
+}
+
+function randomNotification() {
+  var randomQuote = quoteChooser();
+  var options = {
+      body: randomQuote,
+      icon: 'img/sad_head.png',
+  }
+
+  var n = new Notification('Emogotchi says',options);
+  setTimeout(n.close.bind(n), 5000);
+}
+ +

Cerrando las notificaciones

+ +

Firefox y Safari cierran las notificaciones automáticamente tras cierto tiempo (unos 4 segundos). Esto también puede suceder a nivel de sistema operativo (en Windows duran 7 segundos por defecto). En cambio, en algunos navegadores no se cierran automáticamente, como en Chrome, por ejemplo. Para asegurarnos de que las notificaciones se cierran en todos los navegadores, al final de las funciones de arriba, llamamos a la función {domxref("Notification.close")}}  dentro de {{domxref("WindowTimers.setTimeout","setTimeout()")}} para cerrar la notificación tras 5 segundos. Date cuenta también del uso que hacemos de bind() para asegurarnos de que la función close() está asociada a la notificación.

+ +
setTimeout(n.close.bind(n), 5000);
+
+ +
+

Nota: Cuándo recibes un evento "close", no hay ninguna garantía de que haya sido el usuario quién ha cerrado la notificación. Esto coincide con la especificación que dice: "Cuando una notificación es cerrada, sea por la misma plataforma o por el usuario, se deben lanzar los pasos de cierre para la misma".

+
+ +

Eventos de Notificación

+ +

Las especificaciones de la API de notificaciones listan cuatro eventos que pueden ser lanzados en la instancia {{domxref("Notification")}}:

+ +
+
{{event("click")}}
+
Lanzado cuando el usuario hace click en la notificación.
+
{{event("error")}}
+
Lanzado cuando algo falla en la notificación; habitualmente es porque la notificación no se ha podido mostrar por algún motivo.
+
+ +

Estos eventos se pueden monitorizar usando los manejadores {{domxref("Notification.onclick","onclick")}} y {{domxref("Notification.onerror","onerror")}}. Como {{domxref("Notification")}} también hereda de {{domxref("EventTarget")}}, es posible usar el método {{domxref("EventTarget.addEventListener","addEventListener()")}} en ella.

+ +

También hay otros dos eventos que estaban listados en la especificación, pero que han sido eliminados recientemente. Estos puede que sigan funcionando en los navegadores por ahora, pero deberían tratarse como obsoletos y evitar su uso:

+ +
+
{{event("close")}}
+
Lanzado cuándo la notificación se cierra.
+
{{event("show")}}
+
Lanzado cuándo la notificación se muestra al usuario.
+
+ +

Reemplazando notificaciones existentes

+ +

Normalmente los usuario no quieren recibir muchas notificaciones en poco tiempo — por ejemplo, una aplicación de mensajería que te notifica cada mensaje que te llegue, y te llegan un montón. Para evitar el spam de notificaciones, se puede modificar la cola de notificaciones, reemplazando una o varias notificaciones pendientes, por una nueva notificación.

+ +

Para hacer esto, se puede añadir una etiqueta a cualquier nueva notificación. Si ya hay una notificación con la misma etiqueta y aún no se ha mostrado, la nueva reemplazará a la anterior. Si la notificación con la misma etiqueta ya ha sido mostrada, se cerrará la anterior y se mostrará la nueva.

+ +

Ejemplo de etiquta

+ +

Teniendo el siguiente código HTML:

+ +
<button>Notifícame!</button>
+ +

Es posible controlar múltiples notificaciones de la siguiente forma:

+ +
window.addEventListener('load', function () {
+  // Primero, comprobamos si tenemos permiso para lanzar notificaciones
+  // Si no lo tenemos, lo pedimos
+  if (window.Notification && Notification.permission !== "granted") {
+    Notification.requestPermission(function (status) {
+      if (Notification.permission !== status) {
+        Notification.permission = status;
+      }
+    });
+  }
+
+  var button = document.getElementsByTagName('button')[0];
+
+  button.addEventListener('click', function () {
+    // Si el usuario ha dado permiso
+    // le intentamos enviar 10 notificaciones
+    if (window.Notification && Notification.permission === "granted") {
+      var i = 0;
+      // Usamos un inteval porque algunos navegadores (Firefox incluído) bloquean las notificaciones si se envían demasiadas en cierto tiempo.
+      var interval = window.setInterval(function () {
+        // Gracias a la etiqueta, deberíamos de ver sólo la notificación "Holiws! 9"
+        var n = new Notification("Holiwis! " + i, {tag: 'soManyNotification'});
+        if (i++ == 9) {
+          window.clearInterval(interval);
+        }
+      }, 200);
+    }
+
+    // Si el usuario no ha dicho si quiere notificaciones
+    // Nota: en Chrome no estamos seguros de si la propiedad permission
+    // esta asignada, por lo que es inseguro comprobar el valor "default".
+    else if (window.Notification && Notification.permission !== "denied") {
+      Notification.requestPermission(function (status) {
+        // Si el usuario acepta
+        if (status === "granted") {
+          var i = 0;
+          // Usamos un inteval porque algunos navegadores (Firefox incluído) bloquean las notificaciones si se envían demasiadas en cierto tiempo.
+          var interval = window.setInterval(function () {
+          // Gracias a la etiqueta, deberíamos de ver sólo la notificación "Holiws! 9" var n = new Notification("Holiwis! " + i, {tag: 'soManyNotification'});
+            if (i++ == 9) {
+              window.clearInterval(interval);
+            }
+          }, 200);
+        }
+
+        // Otherwise, we can fallback to a regular modal alert
+        else {
+          alert("Hi!");
+        }
+      });
+    }
+
+    // If the user refuses to get notified
+    else {
+      // We can fallback to a regular modal alert
+      alert("Hi!");
+    }
+  });
+});
+ +

Comprueba el ejemplo en directo abajo:

+ +

{{ EmbedLiveSample('Tag_example', '100%', 30) }}

+ +

Receiving notification of clicks on app notifications

+ +

When a user clicks on a notification generated by an app, you will be notified of this event in two different ways, depending on the circumstance:

+ +
    +
  1. A click event if your app has not closed or been put in the background between the time you create the notification and the time the user clicks on it.
    2. +
  2. A system message otherwise.
    3. +
+ +

See this code snippet for an example of how to deal with this.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilidad de navegadores

+ +

{{page("/en-US/Web/API/Notification","Browser compatibility")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/pointer_lock_api/index.html b/files/es/web/api/pointer_lock_api/index.html new file mode 100644 index 0000000000..13a27d6d48 --- /dev/null +++ b/files/es/web/api/pointer_lock_api/index.html @@ -0,0 +1,284 @@ +--- +title: API Pointer Lock +slug: WebAPI/Pointer_Lock +translation_of: Web/API/Pointer_Lock_API +--- +

 

+ +

Pointer Lock (antes llamado Bloqueo del Mouse)  proporciona métodos de entrada basados ​​en el movimiento del ratón a traves del tiempo (es decir, deltas), no sólo la posición absoluta del cursor del mouse. Te da acceso al movimiento puro del mouse, bloquea el objetivo de los eventos del mouse a un solo elemento, elimina límites en cuanto a  que tan lejos puedes mover el mouse en una sola dirección, y quita el cursor de la vista.

+ +

Esta API es útil para aplicaciones que requieren bastantes acciones para controlar los movimientos del mouse, rotar objetos y cambiar las entradas. Es especialmente importante para aplicaciones altamente visuales, tales como los que utilizan la perspectiva en primera persona, así como vistas en 3D y modelado.

+ +

Por ejemplo, puedes crear aplicaciones que permiten a los usuarios controlar el ángulo de visión con sólo mover el mouse sin ningún clic, permitiendo liberar los clics para otras acciones. Este tipo de entrada del mouse es muy útil para ver mapas, imágenes de satélite, o escenas en primera persona (como en un juego o un vídeo embebido).

+ +

Pointer Lock te permite acceder a los eventos del mouse incluso cuando el cursor pasa por el límite de la pantalla del navegador. Por ejemplo, los usuarios pueden seguir girando o manipular un modelo 3D moviendo el mouse sin fin. Sin Pointer Lock, la rotación o la manipulación se detiene en el momento en que el cursor alcanza el borde de la pantalla del navegador. Los jugadores se verán particularmente encantados con esta característica, ya que anciosamente pueden hacer clic en los botones y arrastrar el cursor del mouse de un lado a otro sin tener que preocuparse por salir de la zona de juego ni de cliquear accidentalmente otra aplicación que podría llevar al mouse fuera del juego. Una tragedia!

+ +

Conceptos Básicos

+ +

Pointer Lock está relacionado con la mouse capture. mouse capture proporciona la entrega continua de eventos a un elemento de destino, mientras que el mouse se arrastra, pero se detiene cuando se suelta el clic. Pointer Lock es diferente de mouse capture en las siguientes maneras:

+ +
    +
  • Es persistente. Pointer Lock no libera el mouse hasta que se haga una llamada explícita a la API  o el usuario utilize un gesto concreto de lanzamiento.
    • +
  • No está limitado por los limites del navegador o la pantalla.
    • +
  • Envia continuamente eventos independientemente del estado del clic del mouse.
    • +
  • Oculta el cursor.
    • +
+ +

Ejemplo

+ +

El siguiente es un ejemplo de cómo se puede configurar Pointer Lock en su página web.

+ +
<button onclick="lockPointer();">Lock it!</button>
+<div id="pointer-lock-element"></div>
+<script>
+// Nota: Al momento de escribir esto, sólo Mozilla y WebKit apoyan Pointer Lock.
+
+// El elemento que servirá para pantalla completa y pointer lock.
+var elem;
+
+document.addEventListener("mousemove", function(e) {
+  var movementX = e.movementX       ||
+                  e.mozMovementX    ||
+                  e.webkitMovementX ||
+                  0,
+      movementY = e.movementY       ||
+                  e.mozMovementY    ||
+                  e.webkitMovementY ||
+                  0;
+
+  // Imprime los valores delta del movimiento del mouse
+  console.log("movementX=" + movementX, "movementY=" + movementY);
+}, false);
+
+function fullscreenChange() {
+  if (document.webkitFullscreenElement === elem ||
+      document.mozFullscreenElement === elem ||
+      document.mozFullScreenElement === elem) { // Older API upper case 'S'.
+    // El elemento esta en pantalla completa, ahora podemos hacer el request de pointer lock
+    elem.requestPointerLock = elem.requestPointerLock    ||
+                              elem.mozRequestPointerLock ||
+                              elem.webkitRequestPointerLock;
+    elem.requestPointerLock();
+  }
+}
+
+document.addEventListener('fullscreenchange', fullscreenChange, false);
+document.addEventListener('mozfullscreenchange', fullscreenChange, false);
+document.addEventListener('webkitfullscreenchange', fullscreenChange, false);
+
+function pointerLockChange() {
+  if (document.mozPointerLockElement === elem ||
+      document.webkitPointerLockElement === elem) {
+    console.log("Pointer Lock was successful.");
+  } else {
+    console.log("Pointer Lock was lost.");
+  }
+}
+
+document.addEventListener('pointerlockchange', pointerLockChange, false);
+document.addEventListener('mozpointerlockchange', pointerLockChange, false);
+document.addEventListener('webkitpointerlockchange', pointerLockChange, false);
+
+function pointerLockError() {
+  console.log("Error while locking pointer.");
+}
+
+document.addEventListener('pointerlockerror', pointerLockError, false);
+document.addEventListener('mozpointerlockerror', pointerLockError, false);
+document.addEventListener('webkitpointerlockerror', pointerLockError, false);
+
+function lockPointer() {
+  elem = document.getElementById("pointer-lock-element");
+  // Start by going fullscreen with the element.  Current implementations
+  // require the element to be in fullscreen before requesting pointer
+  // lock--something that will likely change in the future.
+  elem.requestFullscreen = elem.requestFullscreen    ||
+                           elem.mozRequestFullscreen ||
+                           elem.mozRequestFullScreen || // Older API upper case 'S'.
+                           elem.webkitRequestFullscreen;
+  elem.requestFullscreen();
+}
+</script>
+
+ +

Propiedades/Métodos

+ +

La API de bloque de puntero ,similar a la API de Fullscreen,extiende del elemento DOM agregando un nuevo método, requestPointerLock, la cual es dependiente del vendedor(del navegador). Puede escribirse como:

+ +
element.webkitRequestPointerLock(); // para Chrome
+
+element.mozRequestPointerLock(); // para Firefox
+
+ +

Current implementations of requestPointerLock are tightly bound to requestFullScreen and the Fullscreen API. Before an element can be pointer locked, it must first enter the fullscreen state. As demonstrated above, the process of locking the pointer is asynchronous, with events (pointerlockchange, pointerlockerror) indicating the success or failure of the request. This matches how the Fullscreen API works, with its requestFullScreen method and fullscreenchange and fullscreenerror events.

+ +

The Pointer lock API also extends the document interface, adding both a new property and a new method. The new property is used for accessing the currently locked element (if any), and is named pointerLockElement, which is vendor-prefixed for now. The new method on document is exitPointerLock and, as the name implies, it is used to exit Pointer lock.

+ +

The pointerLockElement property is useful for determining if any element is currently pointer locked (e.g., for doing a boolean check) and also for obtaining a reference to the locked element, if any. Here is an example of both uses:

+ +
document.pointerLockElement = document.pointerLockElement    ||
+                              document.mozPointerLockElement ||
+                              document.webkitPointerLockElement;
+
+// 1) Used as a boolean check--are we pointer locked?
+if (!!document.pointerLockElement) {
+  // pointer is locked
+} else {
+  // pointer is not locked
+}
+
+// 2) Used to access the pointer locked element
+if (document.pointerLockElement === someElement) {
+  // someElement is currently pointer locked
+}
+
+ +

The document's exitPointerLock method is used to exit pointer lock, and like requestPointerLock, works asynchrounously using the pointerlockchange and pointerlockerror events:

+ +
document.exitPointerLock = document.exitPointerLock    ||
+                           document.mozExitPointerLock ||
+                           document.webkitExitPointerLock;
+
+function pointerLockChange() {
+  document.pointerLockElement = document.pointerLockElement    ||
+                                document.mozPointerLockElement ||
+                                document.webkitPointerLockElement;
+
+  if (!!document.pointerLockElement) {
+    console.log("Still locked.");
+  } else {
+    console.log("Exited lock.");
+  }
+}
+
+document.addEventListener('pointerlockchange', pointerLockChange, false);
+document.addEventListener('mozpointerlockchange', pointerLockChange, false);
+document.addEventListener('webkitpointerlockchange', pointerLockChange, false);
+
+// Attempt to unlock
+document.exitPointerLock();
+
+ +

pointerlockchange event

+ +

When the Pointer lock state changes—for example, when calling requestPointerLock, exitPointerLock, the user pressing the ESC key, etc.—the pointerlockchange event is dispatched to the document. This is a simple event and contains no extra data.

+ +
This event is currently prefixed as mozpointerlockchange in Firefox and webkitpointerlockchange in Chrome. 
+ +

pointerlockerror event

+ +

When there is an error caused by calling requestPointerLock or exitPointerLock, the pointerlockerror event is dispatched to the document. This is a simple event and contains no extra data.

+ +
This event is currently prefixed as mozpointerlockerror in Firefox and webkitpointerlockerror in Chrome. 
+ +

Extensions to mouse events

+ +

The Pointer lock API extends the normal MouseEvent with movement attributes.

+ +
partial interface MouseEvent {
+    readonly attribute long movementX;
+    readonly attribute long movementY;
+};
+ +
The movement attributes are currently prefixed as .mozMovementX and .mozMovementY in Firefox, and.webkitMovementX and .webkitMovementY in Chrome.
+ +

Two new parameters to mouse events—movementX and movementY—provide the change in mouse positions. The values of the parameters are the same as the difference between the values of MouseEvent properties, screenX and screenY, which are stored in two subsequent mousemove events, eNow and ePrevious. In other words, the Pointer lock parameter movementX = eNow.screenX - ePrevious.screenX.

+ +

Locked state

+ +

When Pointer lock is enabled, the standard MouseEvent properties clientX, clientY, screenX, and screenY are held constant, as if the mouse is not moving. The movementX and movementY properties continue to provide the mouse's change in position. There is no limit to movementX and movementY values if the mouse is continuously moving in a single direction. The concept of the mouse cursor does not exist and the cursor cannot move off the window or be clamped by a screen edge.

+ +

Unlocked state

+ +

The parameters movementX and movementY are valid regardless of the mouse lock state, and are available even when unlocked for convenience.

+ +

When the mouse is unlocked, the system cursor can exit and re-enter the browser window. If that happens, movementX and movementY could be set to zero.

+ +

iframe limitations

+ +

Pointer lock can only lock one iframe at a time. If you lock one iframe, you cannot try to lock another iframe and transfer the target to it; Pointer lock will error out. To avoid this limitation, first unlock the locked iframe, and then lock the other.

+ +

While iframes work by default, "sandboxed" iframes block Pointer lock. The ability to avoid this limitation, in the form of the attribute/value combination <iframe sandbox="allow-pointer-lock">, is expected to appear in Chrome soon.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Pointer Lock')}}{{Spec2('Pointer Lock')}}Initial specification.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support +

Targeting 23{{ property_prefix("webkit") }}*

+ +

See CR/72574

+ 		+

{{ CompatGeckoDesktop("14.0") }}

+ +

{{bug("633602") }}

+ 		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

* Requires the feature be enabled in about:flags or Chrome started with the --enable-pointer-lock flag.

+ +

See also

+ +

MouseEvent

diff --git a/files/es/web/api/push_api/using_the_push_api/index.html b/files/es/web/api/push_api/using_the_push_api/index.html deleted file mode 100644 index 05d101e5fa..0000000000 --- a/files/es/web/api/push_api/using_the_push_api/index.html +++ /dev/null @@ -1,433 +0,0 @@ ---- -title: Usando la API Push -slug: Web/API/Push_API/Using_the_Push_API -translation_of: Web/API/Push_API -translation_of_original: 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:

- -
    -
  • Enviar una notificación web emergente para alertar al usuario. Esto requiere que sean concedidos los permisos para enviar el mensaje push.
    • -
  • Envía un mensaje a la página principal a través de un  {{domxref("MessageChannel")}}.
    • -
- -

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.

- -
    -
  • -

    HTML y CSS

    -
    • -
- -

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 archivo JavaScript principal

    -
    • -
- -

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:

- -
    -
  • subscribe: The button and text input for sending chat messages are created and inserted into the UI, and an object is sent to the server via XHR containing the status type (subscribe), username of the subscriber, subscription endpoint, and client public key.
    • -
  • unsubscribe: This basically works in the opposite way to subscribe — the chat UI elements are removed, and an object is sent to the server to tell it that the user has unsubscribed.
    • -
  • init: This is run when the app is first loaded/initialised — it creates the chat UI elements, and sends an object to the server to tell it that which user has reinitialised (reloaded.)
    • -
- -

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:

- -
    -
  • subscribe or init (at both startup and restart, we need to do the same thing in this sample): An {{htmlelement("li")}} element is created, its text content is set to data.name (the name of the subscriber), and it is appended to the subscribers list (a simple {{htmlelement("ul")}} element) so there is visual feedback that a subscriber has (re)joined the chat.
    • -
  • unsubscribe: We loop through the children of the subscribers list, find the one whose text content is equal to data.name (the name of the unsubscriber), and delete that node to provide visual feedback that someone has unsubscribed.
    • -
  • chatMsg: In a similar manner to the first case, an {{htmlelement("li")}} element is created, its text content is set to data.name + ": " + data.msg (so for example "Chris: This is my message"), and it is appended to the chat messages list; this is how the chat messages appear on the UI for each user.
    • -
- -
-

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:

- -
    -
  • subscribe: The server adds the new subscriber's details into the subscription data store (endpoint.txt), including the endpoint, and then sends a push message to all the endpoints it has stored to tell each subscriber that someone new has joined the chat.
    • -
  • unsubscribe: The server finds the sending subscriber's details in the subscription store and removes it, then sends a push message to all remaining subscribers telling them the user has unsubscribed.
    • -
  • init: The server reads all the current subscribers from the text file, and sends each one a push message to tell them a user has initialized (rejoined) the chat.
    • -
  • chatMsg: Sent by a subscriber that wishes to deliver a message to all users; the server reads the list of all current subscribers from the subscription store file, then sends each one a push message containing the new chat message they should display.
    • -
- -

A couple more things to note:

- -
    -
  • We are using the Node.js https module to create the server, because for security purposes, service workers only work on a secure connection. This is why we need to include the .pfx security cert in the app, and reference it when creating the server in the Node code.
    • -
  • When you send a push message without data, you simply send it to the endpoint URL using an HTTP POST request. However, when the push message contains data, you need to encrypt it, which is quite a complex process. As time goes on, libraries will appear to do this kind of thing for you; for this demo we used Marco Castelluccio's NodeJS web-push library. Have a look at the source code to get more of an idea of how the encryption is done (and read Message Encryption for Web Push for more details.) The library makes sending a push message simple.
    • -
  • If you wish to have messages that collapse (newer updates will replace older updates), you can use the Topic feature. A topic is a special class of subscription update that has a Topic header. A topic name can be any URL safe, base64 string. For example, a header like "Topic: MyFavoriteTopic-For2016" is fine, but "Topic: OMG! Kitties :)" is not. Topic messages are collapsed when the subscriber is offline or unavailable. When they come back, they will receive only the lastest message per topic, along with whatever other messages are pending. "Mozilla Push Server now supports Topics" on the Mozilla Hacks blog gives more details and examples.
    • -
- -

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:

- -
    -
  • subscribe or unsubscribe: We send a system notification via the fireNotification() function, but also send a message back to the main context on our {{domxref("MessageChannel")}} so we can update the subscriber list accordingly (see {{anch("Handling channel messages sent from the service worker")}} for more details).
    • -
  • init or chatMsg: We just send a channel message back to the main context to handle the init and chatMsg cases (these don't need a system notification).
    • -
- -
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/web/api/randomsource/index.html b/files/es/web/api/randomsource/index.html deleted file mode 100644 index 76e8d7fdc2..0000000000 --- a/files/es/web/api/randomsource/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: RandomSource -slug: Web/API/RandomSource -tags: - - API - - Interface - - NeedsTranslation - - RandomSource - - Reference - - TopicStub - - Web Crypto API -translation_of: Web/API/Crypto/getRandomValues -translation_of_original: 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

- -
    -
  • {{ domxref("Window.crypto") }} to get a {{domxref("Crypto")}} object.
    • -
  • {{jsxref("Math.random")}}, a non-cryptographic source of random numbers.
    • -
diff --git a/files/es/web/api/randomsource/obtenervaloresaleatorios/index.html b/files/es/web/api/randomsource/obtenervaloresaleatorios/index.html deleted file mode 100644 index b6e09439a9..0000000000 --- a/files/es/web/api/randomsource/obtenervaloresaleatorios/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Crypto.getRandomValues() -slug: Web/API/RandomSource/Obtenervaloresaleatorios -tags: - - API - - Criptografía - - Referencia - - metodo -translation_of: Web/API/Crypto/getRandomValues ---- -

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

- -

El método Crypto.getRandomValues() permite obtener valores aleatorios criptográficamente fuertes. El array que se pasa como parámetro se rellena con números aleatorios (entiéndase aleatorios en el sentido criptográfico).

- -

Con el fin de garantizar un rendimiento razonable, las distintas implementaciones no utilizan un generador de numeros aleatorios puro, sino que utilizan un generador numérico pseudo-aleatorio, sembrado con un valor con suficiente entropía. Los generadores numéricos pseudo-aleatorios utilizados difieren entre {{Glossary("user agent", "user agents")}}, pero son adecuados para usos criptográficos. Se require también que las distintas implementaciones usen una semilla con suficiente entropía, como una fuente de entropía a nivel de sistema.

- -

Sintaxis

- -
cryptoObj.getRandomValues(typedArray);
- -

Parámetros

- -
-
typedArray
-
Es un entero {{jsxref("TypedArray")}}, que puede ser un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Int16Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, o un {{jsxref("Uint32Array")}}. Todos los elementos dentro del array seran sobreescritos con números aleatorios.
-
- -

Excepciones

- -
    -
  • Una {{exception("QuotaExceededError")}} {{domxref("DOMException")}} es lanzada si la longitud solicitada es mayor a 65536 bytes.
    • -
- -

Ejemplo

- -
/* Asumiendo que window.crypto.getRandomValues está disponible */
-
-var array = new Uint32Array(10);
-window.crypto.getRandomValues(array);
-
-console.log("Tus numeros de la suerte:");
-for (var i = 0; i < array.length; i++) {
-    console.log(array[i]);
-}
-
- -

Especificación

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}{{Spec2('Web Crypto API')}}Definición Inicial
- -

Compatibilidad del navegador

- -

La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, por favor, compruebe https://github.com/mdn/browser-compat-data y envianos un pull request.

- -

{{Compat("api.Crypto.getRandomValues")}}

- -

Ver también

- -
    -
  • {{ domxref("Window.crypto") }} para obtener un objeto tipo {{domxref("Crypto")}}.
    • -
  • {{jsxref("Math.random")}}, una fuente no criptográfica de números aleatorios.
    • -
diff --git a/files/es/web/api/server-sent_events/index.html b/files/es/web/api/server-sent_events/index.html new file mode 100644 index 0000000000..9b22801732 --- /dev/null +++ b/files/es/web/api/server-sent_events/index.html @@ -0,0 +1,99 @@ +--- +title: Server-sent events +slug: Server-sent_events +tags: + - NeedsTranslation + - Server-sent events + - TopicStub +translation_of: Web/API/Server-sent_events +--- +

Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as Events + data inside the web page.

+ + + + + + + +
+

Documentation

+
+
+ Using server-sent events
+
+ A tutorial guide to writing both server and client side part of a server-sent events app.
+
+ EventSource reference
+
+ A reference to the client-side EventSource API.
+
+

View All...

+ 		+

Tools

+ + + +
+

See also

+ +

Specification

+ +

Browser compatibility

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
EventSource support9{{CompatGeckoDesktop("6.0")}}{{CompatUnknown}}115
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
EventSource support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/server-sent_events/using_server-sent_events/index.html b/files/es/web/api/server-sent_events/using_server-sent_events/index.html new file mode 100644 index 0000000000..81a2f5dacc --- /dev/null +++ b/files/es/web/api/server-sent_events/using_server-sent_events/index.html @@ -0,0 +1,231 @@ +--- +title: Utilizando eventos enviados por el servidor (server-sent event) +slug: Server-sent_events/utilizando_server_sent_events_sse +translation_of: Web/API/Server-sent_events/Using_server-sent_events +--- +

Desarrollar una aplicación web que utilice server-sent events es muy fácil. Solo necesitas un pequeño código del lado del servidor para transmitir los eventos a la aplicación web, pero del lado de la aplicacion web se trabaja prácticamente igual que con cualquier otro tipo de eventos.

+ +

Puedes ver un ejemplo aqui (actualmente no funciona).

+ +

ejemplo2

+ +

Recibiendo eventos desde el servidor

+ +

El server-sent event API está contenido en la interfaz EventSource; para abrir una conexión al servidor para recibir eventos de él. Se crea un nuevo objeto new EventSource, especificando el URI de un script que genera los eventos, Por ejemplo:

+ +
var evtSource = new EventSource("ssedemo.php");
+
+ +
Nota: Aunque todavía no es parte de la norma, EventSource es soportado por Firefox 11 y posteriores. Se espera que pronto forme parte del estándar.
+ +

Una vez que ha instanciado el origen del evento, puede comenzar a escuchar los mensajes:

+ +
evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.innerHTML = "message: " + e.data;
+  eventList.appendChild(newElement);
+}
+
+ +

Este codigo escucha todos los mensajes entrantes (Es decir, todos los avisos del servidor, que no tienen un campo de eventos en ellos) y anexa texto del mensaje a la lista en el documento HTML.

+ +

También puedes escuchar eventos, usando addEventListener():

+ +
evtSource.addEventListener("ping", function(e) {
+  var newElement = document.createElement("li");
+
+  var obj = JSON.parse(e.data);
+  newElement.innerHTML = "ping at " + obj.time;
+  eventList.appendChild(newElement);
+}, false);
+
+ +

Este código es similar,  excepto que este se activa cada vez que el servidor envia un mensaje con el campo de evento "ping"; entonces se analiza el JSON en el campo de datos y retorna esa informacion.

+ +

Enviando eventos desde el servidor

+ +

El script del servidor que envia los datos tiene que responder con el tipo MIME text/event-stream. Cada notificación se envia con un bloque de texto terminado en un par de saltos de línea, para mas detalles sobre el formato sobre la secuencia de evetos, ver {{ anch("Event stream format") }},

+ +

El codigo PHP para este ejemplo que estamos utilizando:

+ +
date_default_timezone_set("America/New_York");
+header("Content-Type: text/event-stream\n\n");
+
+$counter = rand(1, 10);
+while (1) {
+  // Every second, sent a "ping" event.
+
+  echo "event: ping\n";
+  $curDate = date(DATE_ISO8601);
+  echo 'data: {"time": "' . $curDate . '"}';
+  echo "\n\n";
+
+  // Send a simple message at random intervals.
+
+  $counter--;
+
+  if (!$counter) {
+    echo 'data: This is a message at time ' . $curDate . "\n\n";
+    $counter = rand(1, 10);
+  }
+
+  ob_flush();
+  flush();
+  sleep(1);
+}
+
+ +

Se genera un evento cada segundo, con el evento "ping". Los datos de cada evento es un objeto JSON que contiene, en este caso, solo la fecha en formato ISO 8601 correspondiente a la hora en que se generó el evento. A intervalos aleatorios, se envia un mensaje simple (sin ningún tipo de evento)

+ +

Gestion de errores

+ +

Cuando se producen problemas (como un tiempo de espera o problemas relacionados con el control de acceso), se genera un evento de error. Puedes tomar acción sobre esto al implementar una devolución de llamada al objeto EventSource:

+ +
evtSource.onerror = function(e) {
+  alert("EventSource failed.");
+};
+
+ +

En Firefox 22, no parece que haya manera de distinguir entre los diferentes de eventos de error.

+ +

Cerrando flujo de eventos

+ +

Por defecto, si la conexión entre el cliente y el servidor se cierra, la conexión es reiniciada. Podemos terminar la conexión con el método .close()

+ +
evtSource.close();
+ +
 
+ +

Formato de flujo de eventos (formato stream)

+ +

El flujo de eventos es una corriente sencilla de datos de texto, que deben ser codificados usando UTF-8. Los mensajes en el flujo de eventos están separados por un par de caracteres de salto de línea. Si hay un símbolo de dos puntos como primer caracter de una línea, se entiende que es un comentario y es ignorado. 

+ +
Nota: La línea de comentario se puede usar para prevenir que la conexión se agote por tiempo (timeout); un sevidor puede enviar periódicamente un comentario para mantener viva la conexión.
+ +

Cada mensaje consiste en una o más líneas de texto que enumeran los campos para ese mensaje. Cada campo está representado por el nombre del campo, seguido por los datos de texto para el valor de ese campo.

+ +

Campos

+ +

Los siguientes nombres de campo son definidos por la especificación:

+ +

event

+ +

El tipo de evento. Si se especifica, un evento se enviará al navegador a la escucha para el nombre del evento especificado, el sitio web usaria addEventLister() para escuchar eventos nombrados. El controlador onmessage se llama si no se especifica el nombre del evento para un mensaje.

+ +

data

+ +

El campo de datos  para el mensaje. Cuando el EventSource recibe múltiples lineas con "data:", se concatenara, insertando un caracter de nueva de linea entre cada uno. Se eliminan los saltos de línea al final [VERIFICAR].

+ +

id

+ +

  El ID del evento que establecerá el último ID del objeto EventSource.

+ +

Retry

+ +

El tiempo de reconexión para usar al intentar enviar el evento. [Qué código maneja esto?] Este debe ser un número entero, que especifica el tiempo de reconexion en milisegundos. Si se especifica un valor no entero, el campo se ignora.  

+ +

Se omiten todos los demas nombres de campo.

+ +
Nota: Si una línea no contiene dos puntos, la línea entera se tratara como un nombre de campo, con una cadena de valor vacio.
+ +

Ejemplos

+ +

Mensajes con datos únicamente

+ +

En el siguiente ejemplo, hay tres mensajes enviados. El primero es solo un comentario, debido a que empieza con dos puntos. Como se mencionó anteriormente, esto puede ser útil para mantener la conexión viva si los mensajes no son enviados regularmente.

+ +

The second message contains a data field with the value "some text". The third message contains a data field with the value "another message\nwith two lines". Note the newline in the value.

+ +

El segundo mensaje contiene un campo de datos con el valor "some text". El tercer mensaje contiene un campo de datos con el valor "another message\nwith two lines". Nota la nueva línea en el valor.

+ +
: this is a test stream
+
+data: some text
+
+data: another message
+data: with two lines
+
+ +

Eventos nombrados

+ +

Este ejemplo envia algunos eventos nombrados. Cada uno tiene un nombre de evento especificado por el campo event, y un campo data cuyo valor es una cadena JSON apropiada con los datos necesarios para que el cliente actue sobre el evento. El campo data, podria, por supuesto, tener cualquier cadena; no tiene que ser un JSON.

+ +
event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+
+event: userdisconnect
+data: {"username": "bobby", "time": "02:34:23"}
+
+event: usermessage
+data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
+
+ +

Mezclando y emparejando

+ +

No tienes que usar solamente mensajes sin nombrar o eventos tipados; puedes mezclarlo juntos en un solo flujo de evento.

+ +
event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+data: Here's a system message of some kind that will get used
+data: to accomplish some task.
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
EventSource support9{{ CompatGeckoDesktop("6.0") }}{{ CompatNo() }}115
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroid-and-MeegoFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
EventSource support6 a 24 b1.0{{ CompatUnknown() }}11.14
+
+ +

 

diff --git a/files/es/web/api/storage/localstorage/index.html b/files/es/web/api/storage/localstorage/index.html deleted file mode 100644 index 5c46cb9559..0000000000 --- a/files/es/web/api/storage/localstorage/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: LocalStorage -slug: Web/API/Storage/LocalStorage -tags: - - Almacenamiento en Navegador - - Almacenamiento local -translation_of: Web/API/Window/localStorage -translation_of_original: Web/API/Web_Storage_API/Local_storage ---- -

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/web/api/subtlecrypto/encrypt/index.html b/files/es/web/api/subtlecrypto/encrypt/index.html deleted file mode 100644 index 8f35030d35..0000000000 --- a/files/es/web/api/subtlecrypto/encrypt/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: SubtleCrypto.digest() -slug: Web/API/SubtleCrypto/encrypt -tags: - - API - - Encriptación - - Referencia - - SubtleCrypto - - Web Crypto API - - encrypt -translation_of: Web/HTTP/Headers/Digest ---- -
{{APIRef("Web Crypto API")}}
- -

El método digest() de la interfaz {{domxref("SubtleCrypto")}} genera un digest de los datos proveidos. Un {{domxref("digest")}} es un valor corto de longitud fija derivado de alguna entrada de longitud variable. Los digest criptográficos deben mostrar resistencia a colisiones, lo que significa que es difícil encontrar dos entradas diferentes que tengan el mismo valor de digest.

- -

Toma como argumento un identificador para el algoritmo digest a utilizar y los datos a codificar. Devuelve un Promise que se completará con el digest.

- -

Sintaxis

- -
const digest = crypto.subtle.digest(algorithm, data);
-
- -

Parámetros

- -
    -
  • algorithm es un {{domxref("DOMString")}} definiendo la función hash a utilizar. Los valores admitidos son: - -
      -
    • SHA-1 (pero no debe utilizarse en aplicaciones criptográficas)
      • -
    • SHA-256
      • -
    • SHA-384
      • -
    • SHA-512
      • -
    -
    • -
  • data es un {{jsxref("ArrayBuffer")}} o {{domxref("ArrayBufferView")}} que contiene los datos a ser digitalizados.
    • -
- -

Valor de retorno

- - - -

Algoritmos soportados

- -

Los argoritmos digest, también conocidos como funciones criptográficas hash, transforman un bloque de datos arbitrariamente grande en una salida de tamaño fijo, normalmente mucho más corta que la entrada. Tienen una variedad de aplicaciones en criptografía.

- -

SHA-1

- -

Este algoritmo se especifica en FIPS 180-4, sección 6.1, y produce una salida de 160 bits de largo.

- -
-

Advertencia: Este algoritmo se considera ahora vulnerable y no debe utilizarse para aplicaciones criptográficas.

-
- -

SHA-256

- -

Este algoritmo se especifica en FIPS 180-4, sección 6.2, y produce una salida de 256 bits de largo.

- -

SHA-384

- -

Este algoritmo se especifica en FIPS 180-4, sección 6.5, y produce una salida de 384 bits de largo.

- -

SHA-512

- -

Este algoritmo se especifica en FIPS 180-4, sección 6.4, y produce una salida de 512 bits de largo.

- -
-

Sugerencia: Si estás buscando aquí cómo crear un código de autenticación de mensajes "keyed-hash" (HMAC), necesitas usar SubtleCrypto.sign() en su lugar.

-
- -

Ejemplos

- -

Ejemplo básico

- -

Este ejemplo codifica un mensaje, luego calcula su digest SHA-256 y muestra la longitud del mismo:

- -
const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
-
-async function digestMessage(message) {
-  const encoder = new TextEncoder();
-  const data = encoder.encode(message);
-  const hash = await crypto.subtle.digest('SHA-256', data);
-  return hash;
-}
-
-const digestBuffer = await digestMessage(text);
-console.log(digestBuffer.byteLength);
-
- -

Convirtiendo un digest a una cadena hexadecimal

- -

El resumen se devuelve como un ArrayBuffer, pero para la comparación y visualización los digests se representan a menudo como cadenas hexadecimales. Este ejemplo calcula un digest, y luego convierte el ArrayBuffer a un string hexadecimal:

- -
const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
-
-async function digestMessage(message) {
-  const msgUint8 = new TextEncoder().encode(message);                           // encode as (utf-8) Uint8Array
-  const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);           // hash the message
-  const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convert buffer to byte array
-  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
-  return hashHex;
-}
-
-const digestHex = await digestMessage(text);
-console.log(digestHex);
-
- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-digest', 'SubtleCrypto.digest()')}}{{Spec2('Web Crypto API')}}Definición inicial.
- -

Compatibilidad del navegador

- - - -

{{Compat("api.SubtleCrypto.digest")}}

- -
-

En Chrome 60, se añadió una característica que deshabilita crypto.subtle para conexiones no TLS.

-
- -

Ver también

- - diff --git a/files/es/web/api/touch_events/index.html b/files/es/web/api/touch_events/index.html new file mode 100644 index 0000000000..02a4a4eacb --- /dev/null +++ b/files/es/web/api/touch_events/index.html @@ -0,0 +1,292 @@ +--- +title: Eventos de toque +slug: DOM/Touch_events +tags: + - DOM + - Event + - Mobile + - NeedsMobileBrowserCompatTable + - eventos +translation_of: Web/API/Touch_events +--- +

Con el fin de proporcionar soporte de calidad para usuarios de interfaces táctiles, los eventos táctiles dan la posibilidad de interpretar la actividad de los dedos en pantallas táctiles o trackpads.

+ +

Definiciones

+ +
+
Superficie
+
La superficie sensible al tacto. Esta puede ser una pantalla o un trackpad.
+
+ +
+
Punto de toque
+
Un punto de contacto con la superficie. Esto podría ser un dedo (o un codo, oreja, nariz, o lo que sea, pero probablemente un dedo) o un stylus.
+
+ +

Interfaces

+ +
+
{{ domxref("TouchEvent") }}
+
Representa un evento que ocurre cuando el estado de los toques en la superficie cambian.
+
{{ domxref("Touch") }}
+
Represeta un único punto de contacto entre el usuario y la superficie táctil.
+
{{ domxref("TouchList") }}
+
Representa varios puntos de toque: esto se utiliza cuando el usuario tiene, por ejemplo, varios dedos en la superficie al mismo tiempo.
+
{{ domxref("DocumentTouch") }}
+
Contiene varios métodos para crear objetos de {{domxref("Touch")}} y {{domxref("TouchList")}}.
+
+ +

Ejemplo

+ +

Este ejemplo muestra múltiples puntos de toques al mismo tiempo, permitiendo al usuario dibujar en un {{ HTMLElement("canvas") }} con más de un dedo a la vez. Esto funciona solamente en un navegador que soporte eventos táctiles.

+ +
Nota: El texto de abajo usa el término "dedo" cuando describe el contacto con la superficie, pero esto podría ser, por supuesto, también un stylus u otro método de contacto.
+ +

Configurando los eventos de manipulación

+ +

Cuando la página carga, la función startup() mostrada a continuación es llamada por nuestro atributo onload del elemento {{ HTMLElement("body") }}.

+ +
function startup() {
+  var el = document.getElementsByTagName("canvas")[0];
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchleave", handleLeave, false);
+  el.addEventListener("touchmove", handleMove, false);
+}
+
+ +

Esto simplemente configura todos los detectores de eventos para nuestro elemento {{ HTMLElement("canvas") }}, por lo que podremos manejar todos los eventos de toque cuando se produzcan.

+ +

Seguimiento de nuevos toques

+ +

Cuando un evento touchstart ocurre, indicando que un nuevo toque sobre la superficie se ha producido, la función handleStart() de a continuación es llamada.

+ +
function handleStart(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i<touches.length; i++) {
+    ongoingTouches.push(touches[i]);
+    var color = colorForTouch(touches[i]);
+    ctx.fillStyle = color;
+    ctx.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4);
+  }
+}
+
+ +

Esto llama a {{ domxref("event.preventDefault()") }} para mantener al navegador procesando el evento de toque (esto también previene que un evento del ratón o mouse sea entregado). Entonces obtenemos el contexto y lanzamos la lista de puntos de contacto cambiados de la propiedad {{ domxref("TouchEvent.changedTouches") }} del evento.

+ +

Después de ello, iteramos sobre todos los objetos {{ domxref("Touch") }} de la lista, insertándolo en una matriz de puntos de toque activos y dibujando el punto de inicio como un pequeño rectángulo; estamos usando una línea de 4 pixeles de ancho, por tanto estamos dibujando un cuadrado de 4 por 4 píxeles como punto de consistencia.

+ +

Dibujando mientras los eventos de toque se mueven

+ +

Cada vez que uno o más dedos se mueven, un evento touchmove es entregado, resultando en una llamada a nuestra función handleMove(). Su responsabilidad en este ejemplo es actualizar la información de toque cacheada y dibujar una línea desde la posición previa a la posición actual en cada toque.

+ +
function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  ctx.lineWidth = 4;
+
+  for (var i=0; i<touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+    ctx.lineTo(touches[i].pageX, touches[i].pageY);
+    ctx.closePath();
+    ctx.stroke();
+    ongoingTouches.splice(idx, 1, touches[i]);  // swap in the new touch record
+  }
+}
+
+ +

Esto se repite también en los toques cambiados, pero mira en nuestra matriz de información de toques cacheados la información previa de cada toque con el fin de determinar los puntos de inicio para cada nuevo segmento de línea de toques que será dibujada. Esto se hace mirando cada propiedad de los toques de {{ domxref("Touch.identifier") }} . Esta propiedad es un único entero para cada toque, y sigue siendo consistente para cada evento durante la duración del contacto de cada dedo con la superficie.

+ +

Esto nos permite conseguir las coordenadas de la posición previa de cada toque y usar el método apropiado de contexto para dibujar un segmento de línea uniendo dos posiciones a la vez.

+ +

Después de dibujar la línea, llamamos a  Array.splice() para reemplazar la información previa sobre el punto de toque con la información actual de la matriz ongoingTouches.

+ +

Manejando el final de un toque

+ +

Cuando el usuario levanta un dedo de la superficie, un evento touchend es enviado.  De igual manera, si el dedo se desliza fuera de nuestro lienzo, obtenemos un evento touchleave. Manejamos ambos casos de la misma manera: llamando a la función handleEnd() de abajo. Su trabajo es dibujar el último segmento de línea para cada toque que ha finalizado y remueve el punto de toque de la lista de toques en marcha.

+ +
function handleEnd(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  ctx.lineWidth = 4;
+
+  for (var i=0; i<touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ongoingTouches[i].pageX, ongoingTouches[i].pageY);
+    ctx.lineTo(touches[i].pageX, touches[i].pageY);
+    ongoingTouches.splice(i, 1);  // remove it; we're done
+  }
+}
+
+ +

Esto es muy similar a la función previa; la única diferencia real es que cuando llamamos a  Array.splice(), simplemente remueve la antigua entrada de la lista de toques en marcha, sin añadir la información actualizada. El resultado es que detenemos el seguimiento del punto de toque.

+ +

Manejando los toques cancelados

+ +

Si el dedo del usuario se equivoca en la Interfaz del navegador, o el toque necesita ser cancelado, el evento touchcancel es enviado, y llamamos a la función handleCancel() abajo.

+ +
function handleCancel(evt) {
+  evt.preventDefault();
+  var touches = evt.changedTouches;
+
+  for (var i=0; i<touches.length; i++) {
+    ongoingTouches.splice(i, 1);  // remove it; we're done
+  }
+}
+
+ +

Dado que la idea es cancelar el toque inmediatamente, simplemente lo removemos de la lista de toques en marcha sin dibujar un segmento de línea final.

+ +

Funciones de conveniencia

+ +

Este ejemplo usa dos funciones de convenience que deben mirarse brevemente para ayudar a que el resto del código sea más claro.

+ +

Seleccionando un color para cada toque

+ +

Con el fin de hacer que cada dibujo de toque se vea diferente, la función  colorForTouch() es usada para elegir un color basado en el identificador único de toque. Este identificador estará siempre entre 0 y un valor menos que el número de toques activos. Puesto que es muy improbable que alguna persona con más de 16 dedos use este demo, convertimos estos directamente en colores de escalas grises.

+ +
function colorForTouch(touch) {
+  var id = touch.identifier;
+  id = id.toString(16); // make it a hex digit
+  return "#" + id + id + id;
+}
+
+ +

El resultado de esta función es un string o cadena que puede ser usada cuando se llame a funciones {{ HTMLElement("canvas") }} para configurar los colores de dibujos. Por ejemplo, para un valor {{ domxref("Touch.identifier") }}  de 10, el resultado string o cadena es "#aaa".

+ +

Encontrando un toque continuo

+ +

La función ongoingTouchIndexById() abajo explora mediante la matriz ongoingTouches para encontrar el toque que coincida con el identificador dado, luego devuelve los índices de toques a la matriz.

+ +
function ongoingTouchIndexById(idToFind) {
+  for (var i=0; i<ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // not found
+}
+
+ +

Ver ejemplo en vivo

+ +

Consejos adicionales

+ +

Esta sección provee consejos adicionales sobre como manejar los eventos de toques en tu aplicación web.

+ +

Manejando los clics

+ +

Ya que la llamada preventDefault() en un touchstart o el primer evento touchmove de una serie impide que los eventos correspondientes eventos del mouse o ratón se disparen, es común llamar a preventDefault() en touchmove en lugar de touchstart. De esta manera, los eventos del ratón pueden todavía ser disparados y cosas como enlaces siguen funcionando. Alternativamente, algunos frameworks tienen que referirse a eventos de toque como eventos de ratón para este mismo propósito. (Este ejemplo es muy simplificado y podria resultar en un extraño comportamiento. Solo se diseñó como guía).

+ +
function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
+    return;
+
+  var newEvt = document.createEvent("MouseEvents");
+  var type = null;
+  var touch = null;
+  switch (event.type) {
+    case "touchstart": type = "mousedown"; touch = event.changedTouches[[0];
+    case "touchmove":  type = "mousemove"; touch = event.changedTouches[[0];
+    case "touchend":   type = "mouseup"; touch = event.changedTouches[0];
+  }
+  newEvt.initMouseEvent(type, true, true, event.originalTarget.ownerDocument.defaultView, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
+  event.originalTarget.dispatchEvent(newEvt);
+}
+
+ +

Llamando a preventDefault() solo en un segundo toque

+ +

Una cosa para prevenir cosas como pinchZoom en una página es llamar a preventDefault() en el segundo toque de una serie. Este comportamiento no está bien definido en los eventos de toque, y resulta en diferentes comportamientos en diferentes navegadores (osea iOS evitará el zoom o acercamiento pero permitirá vista panorámica con ambos dedos. Android permitirá zoom o acercamiento pero no una panorámica. Opera and Firefox actualmente evita panorámica y zoom o acercamiento). Actualmente, no se recomienda depender de ningún comportamiento en particular en este caso, si no mas bien depender de una meta vista para evitar el zoom.

+ +
+
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatChrome("22.0") }}{{ CompatGeckoDesktop("18.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile("6.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Notas de Gecko

+ +

La preferencia dom.w3c_touch_events.enabled puede ser utilizada para activar o desactivar el soporte de eventos de toque estándares; por defecto, están activados.

+ +
+

{{ gecko_callout_heading("12.0") }}

+ +

Antes de Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko no soportaba multi-toques; solo un toque cada vez era reportado.

+
+ +
Note: Antes de Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko ofrecía una API de eventos de toque propietaria. Está API está obsoleta actualmente; deberías cambiar a esta."
diff --git a/files/es/web/api/vibration_api/index.html b/files/es/web/api/vibration_api/index.html new file mode 100644 index 0000000000..8c9c7b5f06 --- /dev/null +++ b/files/es/web/api/vibration_api/index.html @@ -0,0 +1,155 @@ +--- +title: Vibración API +slug: Web/Guide/API/Vibration +tags: + - API + - Firefox OS + - Mobile + - Principiante + - Vibración + - Vibrado + - Vibrar + - WebAPI +translation_of: Web/API/Vibration_API +--- +

La mayoría de los dispositivos modernos pueden vibrar a través del hardware, esto permite que a través del código de software se pueda emitir estas vibraciones. La Vibration API  ofrece a las aplicaciones web la capacidad de acceder a este hardware en caso este lo soporte, caso contrario el dispositivo no hace nada.

+ +

Describiendo vibraciones

+ +

Vibración se puede describir como un patrón de prender y apagar pulsos, los cuales pueden variar en longitud. El patrón puede consistir de un sólo número que indica cuantos milisegundos vibrará, o un arreglo de enteros describiendo un patrón de vibraciones y pausas. La vibración es controlada por un solo método:

+ +

{{domxref("window.navigator.vibrate()")}}.

+ +

Vibración simple

+ +

Puedes iniciar una sola vibración del hardware pasando como argumento un sólo número, o un arreglo de un sólo número:

+ +
window.navigator.vibrate(200);
+window.navigator.vibrate([200]);
+
+ +

Ambos ejemplos hacen vibrar el dispositivo por 200 ms.

+ +

Patrones de vibración

+ +

Un arreglo de valores describen que las vibraciones serán por períodos alternados, es decir, el dispositivo vibrará luego no lo hará, así según la secuencia definida. Cada valor en el arreglo es convertido a entero para luego ser interpretado alternadamente como el tiempo que el dispositivo debe vibrar y el tiempo que no debe vibrar. Ejemplo:

+ +
window.navigator.vibrate([200, 100, 200]);
+
+ +

Según este ejemplo el dispositivo vibrará por 200ms, luego se detiene por 100ms y luego vibra 200ms.

+ +

Puedes especificar cuantas vibraciones/pausas desees, y el arreglo puede tener un tamaño par o impar. No importa que agregues una pausa como el último valor del arreglo, ya que el celular dejará de vibrar de todas formas al final de cada vibración.

+ +

Cancelar vibraciones existentes

+ +

Llamar {{domxref("window.navigator.vibrate()")}} con un valor de 0, arreglo vació, o arreglo que contenga 0's detendrá cualquier vibración en curso.

+ +

Vibraciones continuas

+ +

Algunas básicas acciones son setInterval y clearInterval que nos permitirán crear vibraciones persistentes:

+ +
var intervaloDeVibrado;
+
+// Iniciar la vibración
+function iniciarVibrado(duracion) {
+	navigator.vibrate(duracion);
+}
+
+// Detiene la vibración
+function detenerVibrado() {
+	// Limpiar el intervalo y detener las vibraciones existentes
+	if(intervaloDeVibrado) clearInterval(intervaloDeVibrado);
+	navigator.vibrate(0);
+}
+
+// Iniciar las vibraciones con una determinado tiempo e intervalo
+// Asumir que el valor recibido es un entero
+function iniciarVibradoPersistente(duracion, intervalo) {
+	intervaloDeVibrado = setInterval(function() {
+		iniciarVibrado(duracion);
+	}, intervalo);
+}
+ +

Claro que el código de arriba no toma en cuenta el método de utilizar un arreglo de vibración, utilizar un arreglo para vibración persistente necesitaría recalcular la suma de los elementos del arregloo y crear un intervalo basado en esos números (agregando adicionalmente las pausas)

+ +

¿Por qué utilizar Vibration API?

+ +

Esta API es claramente accesible a través de dispositivos móbiles. Vibration API puede servir para alertas en las aplicaciones web del celular, y sería es asombrosa cuando se utiliza en juegos o en aplicaciones pesadas. Imagínate mirando un video en tu celular y durante la escena de explosión,tu teléfono vibra un poco. O la sensación que tendría tu usuario al sentir el estallido de una bomba en el juego Bomberman.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Vibration API')}}{{Spec2('Vibration API')}}Especificación inicial.
+ +

Compatibilidad entre navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteŕisticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}} {{property_prefix("webkit")}}11.0 {{property_prefix("moz")}}
+ 16 (no prefix)		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}} {{property_prefix("webkit")}}11.0 {{property_prefix("moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver También

+ + diff --git a/files/es/web/api/web_audio_api/index.html b/files/es/web/api/web_audio_api/index.html new file mode 100644 index 0000000000..e7cb54d803 --- /dev/null +++ b/files/es/web/api/web_audio_api/index.html @@ -0,0 +1,510 @@ +--- +title: Web Audio API +slug: Web_Audio_API +translation_of: Web/API/Web_Audio_API +--- +
{{apiref("Web Audio API")}}
+ +

La API de Audio Web provee un sistema poderoso y versatil para controlar audio en la Web, permitiendo a los desarrolladores escoger fuentes de audio, agregar efectos al audio, crear visualizaciones de audios, aplicar efectos espaciales (como paneo) y mucho más.

+ +

Conceptos y uso de audio Web

+ +

La API de Audio Web involucra manejar operaciones de audio dentro de un contexto de audio, y ha sido diseñada para permitir enrutamiento modular. Las operaciones de audio básicas son realizadas con nodos de audio, que están enlazados juntos para formar un gráfico de enrutamiento de audio. Muchas fuentes — con diferentes tipos de diseño de canales — están soportadas incluso dentro de un único contexto. Este diseño modular provee flexibilidad para crear funciones de audio complejas con efectos dinámicos.

+ +

Los nodos de audio están enlazados en cadenas y redes simples por sus entradas y salidas. Éstos típicamente empiezan con una o más fuentes. Las fuentes provee matrices de intensidades de sonidos (muestras) en segmentos de tiempo muy pequeños, a menudo decenas de miles de éstos por segundo.  Éstos podrían ser calculados matemáticamente (como  {{domxref("OscillatorNode")}}), o pueden ser grabaciones de archivos de audio o video (como {{domxref("AudioBufferSourceNode")}} y {{domxref("MediaElementAudioSourceNode")}}) y transmisiones de audio ({{domxref("MediaStreamAudioSourceNode")}}). De hecho, los archivos de sonido son sólo grabaciones de intensidades de sonido, que vienen desde micrófonos o instrumentos eléctricos, y mezclados en una onda única y complicada.

+ +

Los resultados de éstos nodos podrían ser enlazados a las entradas de otros, que mezclan o modifican estas transmisiones de muestras de audio en diferentes transmisiones. Una modificación común es multiplicar las muestras por un valor para hacerlas más fuertes o silenciosas (como es el caso con {{domxref("GainNode")}}). Una vez que el sonido ha sido lo suficientemente procesado por el efecto necesario, puede ser enlazados a la entrada de un destino({{domxref("AudioContext.destination")}}), que enviá el sonido a los altavoces o auriculares. Esta última conexión sólo es necesaria si el usuario debe escuchar el audio.

+ +

Un diagrama de flujo simple y típico para el audio web se vería algo como esto:

+ +
    +
  1. Crear contexto de audio
    2. +
  2. Dentro del contexto, crear fuentes — como <audio>, oscillator, stream
    3. +
  3. Crear nodos de efectos, tales como reverberación, filtro biquad, panner, compresor
    4. +
  4. Ecoge el destino final del audio, por ejemplo tu sistema de altavoces
    5. +
  5. Conecta las fuentes a los efectos, y los efectos al destino.
    6. +
+ +

A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information.

+ +

El tiempo es controlado con alta precisión baja latencia, permitiendo a los desarrolladores escribir código que responda con precisión a los eventos y sea capaz de apuntar a muestras específicas, incluso en una alta frecuencia de muestreo. Por lo tanto, las aplicaciones como las cajas de ritmos y los secuenciadores están a su alcance.

+ +

El API de Audio Web también nos permite controlar cómo el audio es espacializado. Usando un sistema basado en un modelo fuente-oyente, esto permite controlar el modeo de paneo y que se ocupa de la atenuación inducida por distancia o desplazamiento doppler inducido por una fuente en movimiento (o un oyente en movimiento).

+ +
+

Puedes leear sobre la teoría del API de Audio Web con más detalle en nuestro artículo Conceptos Básicos detrás del API de Audio Web.

+
+ +

Interfaces del API de Audio Web

+ +

La API de Audio Web tiene un número de interfaces y eventos asociados, que han sido divididos en nueve categorias de funcionalidad.

+ +

Definición general del gráfico de audio

+ +

Contenedores y definiciones generales que dan forma a los gráficos de audio en el uso de Web Audio API.

+ +
+
{{domxref("AudioContext")}}
+
La interfaz AudioContext representa un gráfico de procesamiento de audio construido de módulos de audio enlazados juntos, cada uno representado por un {{domxref("AudioNode")}}. Un contexto de audio controla la creación de los nodos que contiene y la ejecución del procesamiento del audio, or decoding. Necesitas crear un AudioContext antes de hacer cualquier cosa,  ya que todo pasa dentro de un contexto de audio.
+
{{domxref("AudioNode")}}
+
La interfaz AudioNode representa un módulo de procesamiento de audio como una fuente de audio (por ejemplo un ejemplo HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}}), destino de audio, módulo de procesamiento intermedio (por ejemplo un filtro como {{domxref("BiquadFilterNode")}}, o control de volumen como {{domxref("GainNode")}}).
+
{{domxref("AudioParam")}}
+
La interfaz AudioParam representa un parámetro relacionado al audio, como uno de un {{domxref("AudioNode")}}. Esto puede ser establecido a un valor específico o un cambio de valor, y puede ser agendado para que ocurra en un momento específico y siguiendo un patrón específico.
+
{{domxref("AudioParamMap")}}
+
Provee una interfaz como para mapear a un grupo de interfaces {{domxref("AudioParam")}}, lo que significa que proporciona los métodos forEach(), get(), has(), keys(), y values(), como también una propiedad size.
+
{{domxref("BaseAudioContext")}}
+
La interfaz BaseAudioContext actúa como una definición base para procesamiento de gráficos de audio en y fuera de línea, como lo representa {{domxref("AudioContext")}} y {{domxref("OfflineAudioContext")}} resepectivamente. No tendrás que usar BaseAudioContext directamente — tendrás que usar sus características a través de una de éstas dos interfaces heredadas.
+
El evento {{event("ended")}}
+
El evento ended es lanzado cuando la reproducción se detiene porque se alcanzó el fin del archivo de medio.
+
+ +

Definiendo fuentes de audio

+ +

Las interfaces que definen fuentes de audio para usar en la API de Web.

+ +
+
{{domxref("AudioScheduledSourceNode")}}
+
La interfaz AudioScheduledSourceNode es una interfaz padre para muchos tipos de interfaces de nodos de fuentes de audio. Es un {{domxref("AudioNode")}}.
+
+ +
+
{{domxref("OscillatorNode")}}
+
La interfaz OscillatorNode representa una forma de onda periódica, como una onda sinusoidal o triangular. Es un módulo de procesamiento de audio {{domxref("AudioNode")}} que causa que se cree una frecuencia de onda determinada.
+
{{domxref("AudioBuffer")}}
+
La interfaz AudioBuffer representa un recurso de audio corto que reside en la memoria, creado desde un archivo de audio usando el método {{ domxref("AudioContext.decodeAudioData()") }}, o creado con datos sin procesar usando {{ domxref("AudioContext.createBuffer()") }}. Una vez decodificado en esta forma, el audio puede ser colocado en un {{ domxref("AudioBufferSourceNode") }}.
+
{{domxref("AudioBufferSourceNode")}}
+
La interfaz AudioBufferSourceNode representa una fuente de audio que consiste en una datos de audio en la memoria, almacenada en un {{domxref("AudioBuffer")}}. Es un {{domxref("AudioNode")}} que actúa como una fuente de audio.
+
{{domxref("MediaElementAudioSourceNode")}}
+
La interfaz MediaElementAudioSourceNode representa una fuente de audio que consiste en un elemento {{ htmlelement("audio") }} o {{ htmlelement("video") }} de HTML5. Es un {{domxref("AudioNode")}} que actúa como una fuente de audio.
+
{{domxref("MediaStreamAudioSourceNode")}}
+
La interfaz MediaStreamAudioSourceNode representa una fuente de audio que consiste en un {{domxref("MediaStream")}} de WebRTC (como una cámara web, micrófono, o una transmisión siendo enviada a una computadora remota). Es un {{domxref("AudioNode")}} que actúa como una fuente de audio.
+
+ +

Definiendo filtros de efectos de audio

+ +

Interfaces para definir efectos que quieras aplicar a tus fuentes de audio.

+ +
+
{{domxref("BiquadFilterNode")}}
+
La interfaz BiquadFilterNode representa una filtro de bajo orden sencillo. Es un {{domxref("AudioNode")}} que puede representar diferentes tipos de filtros, dispositivos de control de tono, o ecualizadores gráficos. Un BiquadFilterNode siempre tiene exactamente una entrada y una salida.
+
{{domxref("ConvolverNode")}}
+
La interfaz ConvolverNode es un {{domxref("AudioNode")}} que realiza una Convolución Lineal en un {{domxref("AudioBuffer")}} determinado, y es usado a menudo para lograr un efecto de reverberación.
+
{{domxref("DelayNode")}}
+
La interfaz DelayNode representa una línea de detardo; un módulo de procesamiento de audio de {{domxref("AudioNode")}} que causa un retardo entre la llegada de una entrada de datos y su propagación a la salida.
+
{{domxref("DynamicsCompressorNode")}}
+
La intefaz DynamicsCompressorNode proporciona un efecto de compresión, que reduce el volumen de las partes más ruidosas de la señal para ayudar a evitar el recorte y la distorsión que pueden ocurrir cuando se reproducen y multiplexan múltiples sonidos a la vez.
+
{{domxref("GainNode")}}
+
La intefaz GainNode representa un cambio de volumen. Es un módulo de procesamiento de audio de {{domxref("AudioNode")}} que causa que una ganancia determinada para ser aplicada a la entrada de datos antes de su propacación a la salida.
+
{{domxref("WaveShaperNode")}}
+
La interfaz WaveShaperNode representa un la interfaz representa un distorsionador no lineal. Es un {{domxref("AudioNode")}} que usa una curva para aplicar una distorsión en forma de onda a la señal. Además de los obvios efectos de distorsión, a menudo se usa para agregar una sensación cálida a la señal.
+
{{domxref("PeriodicWave")}}
+
Describe una forma de onda periódica que puede ser usada para dar forma a la salida de un {{ domxref("OscillatorNode") }}.
+
{{domxref("IIRFilterNode")}}
+
Implementa un filtro de respuesta de pulso infinito (IIR) general; este tipo de filtro se puede usar para implementar dispositivos de control de tono y ecualizadores gráficos también.
+
+ +

Definición de destinos de audio

+ +

Una vez que haya terminado de procesar su audio, estas interfaces definen dónde emitirlo.

+ +
+
{{domxref("AudioDestinationNode")}}
+
La interfaz AudioDestinationNode representa el destino final de una fuente de audio en contexto determinado — usualmente los altavoces de tu dispositivo.
+
{{domxref("MediaStreamAudioDestinationNode")}}
+
La interfaz MediaStreamAudioDestinationNode representa un destino de audio que consiste en un {{domxref("MediaStream")}} de WebRTC con un AudioMediaStreamTrack sencillo, que puede ser usado de una manera similiar a un {{domxref("MediaStream")}} obtenido desde {{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}. Es un {{domxref("AudioNode")}} que actúa como un destino de audio.
+
+ +

Análisis y visualización de datos

+ +

Si quieres extraer el tiempo, frecuencia, y otros datos de tu audio, AnalyserNode es lo que necesitas.

+ +
+
{{domxref("AnalyserNode")}}
+
La interfaz AnalyserNode representa un nodo capáz de proveer la frecuencia en tiempo real y la información del análisis del dominio de tiempo, para propósitos de análisis y visualización de datos.
+
+ +

División y fusión de canales de audio

+ +

Para dividir y fusionar canales de audio, deberás usar estas interfaces.

+ +
+
{{domxref("ChannelSplitterNode")}}
+
La interfaz ChannelSplitterNode separa los diferentes canales de una fuente de audio enn un conjunto de salidas mono.
+
{{domxref("ChannelMergerNode")}}
+
La interfaz ChannelMergerNode reune las diferentes salidas mono en una sola salida. Cada entrada deberá ser usada para llenar un canal de la salida.
+
+ +

Espacialización de audio

+ +

Estas interfaces te permiten agregar efectos de paneo de especialización de audio a tus fuentes de audio.

+ +
+
{{domxref("AudioListener")}}
+
La interfaz AudioListener representa la posición y orientación de la única persona escuchando la escena de audio usada en la espacialización de audio.
+
{{domxref("PannerNode")}}
+
La interfaz PannerNode representa la posición y comportamiento de una señal de fuente de audio en un espacio 3D, permitiéndote crear efectos de paneo complejos.
+
{{domxref("StereoPannerNode")}}
+
La interfaz StereoPannerNode representa un nodo de panner estéreo simple que se puede usar para panoramizar un flujo de audio hacia la izquierda o hacia la derecha.
+
+ +

Proccesamiento de audio en JavaScript

+ +

Usando worklets de audio (pequeñas tareas), puedes definir nodos personalizados de audio escritos en JavaScript o WebAssembly. Los worklets de audios implementan la interfaz {{domxref("Worklet")}}, una versión ligera de la interfaz {{domxref("Worker")}}. A partir del enero de 2018, los worklets de audio están disponibles en Chrome 64 detrás de un identificador.

+ +
+
{{domxref("AudioWorklet")}} {{experimental_inline}}
+
La interfaz AudioWorklet está disponible a través de {{domxref("BaseAudioContext.audioWorklet")}} y te permite agregar nuevos móduloss al worklet de audio.
+
{{domxref("AudioWorkletNode")}} {{experimental_inline}}
+
La intefaz AudioWorkletNode representa un {{domxref("AudioNode")}} que está insertada en un gráfico de audio y puede pasar mensajes a la AudioWorkletProcessor.
+
{{domxref("AudioWorkletProcessor")}} {{experimental_inline}}
+
La interfaz AudioWorkletProcessor representa código de procesamiento de audio que se ejecuta en un AudioWorkletGlobalScope que genera, procesa, o analiza audio directamente, y puede pasar mensajes al AudioWorkletNode.
+
{{domxref("AudioWorkletGlobalScope")}} {{experimental_inline}}
+
La interfaz AudioWorkletGlobalScope es un objeto derivado de WorkletGlobalScope que representa un contexto del worker en el que se ejecuta un script de procesamiento de audio; está diseñado para permitir la generación, procesamiento, y análisis de datos de audio directamente usando JavaScript en un hilo worklet.
+
+ +

Antes de que se definieran los worklets de audio, la API de Web Audio usó  ScriptProcessorNode {{deprecated_inline}} para procesamiento de audio basado en JavaScript. Como el código se ejecuta en el hilo principal, tuvo un mal rendimiento. ScriptProcessorNode se mantiene por razones históricas pero está marcada como obsoleta y será removida en una versión futura de la especificación.

+ +
+
{{domxref("ScriptProcessorNode")}} {{deprecated_inline}}
+
La interfaz ScriptProcessorNode permite la generación, procesamiento, o análisis de audio usando JavaScript. Es un módulo de procesamiento de audio {{domxref("AudioNode")}} que está enlazado a dos buffers, uno conteniendo la actual entrada, uno conteniendo la salida. Un evento, implementando la interfaz {{domxref("AudioProcessingEvent")}}, es enviado al objeto cada vez que el buffer de entrada contiene nuevos datos, y el manejador del evento termina cuando ha llenado el buffer de salida con datos.
+
{{event("audioprocess")}} (event) {{deprecated_inline}}
+
El evento audioprocess es lanzado cuando un buffer de entrada de un {{domxref("ScriptProcessorNode")}} del API del Audio Web está listo para ser procesado.
+
{{domxref("AudioProcessingEvent")}} {{deprecated_inline}}
+
El evento AudioProcessingEvent del API de Audio Web representa los eventos que ocurren cuando un buffer de entrada {{domxref("ScriptProcessorNode")}} está listo para ser procesado.
+
+ +

Procesamiento de audio offline/en segundo plano

+ +

Es posible procesar/renderizar un gráfico de muy rápidamente en segundo plano — renderizándolo en un {{domxref("AudioBuffer")}} en lugar de hacerlo a los altavoces del equipo — con lo siguiente.

+ +
+
{{domxref("OfflineAudioContext")}}
+
La interfaz OfflineAudioContext es una interfaz {{domxref("AudioContext")}} representando un gráfico de procesamiento de audio construido a partir de varios {{domxref("AudioNode")}} enlazados juntos. En contraste con un AudioContext estándar, un OfflineAudioContext realmente no procesa el audio sino que lo genera, lo más rápido que puede, en un buffer.
+
{{event("complete")}} (event)
+
El evento complete es lanzado cuando el renderizado de un {{domxref("OfflineAudioContext")}} está terminado.
+
{{domxref("OfflineAudioCompletionEvent")}}
+
La interfaz OfflineAudioCompletionEvent representa los eventos que ocurren cuando procesamiento de un {{domxref("OfflineAudioContext")}} is terminado. El evento {{event("complete")}} implementa esta interfaz.
+
+ +

Interfaces obsoletas

+ +

Las siguientes interfaces fueron definidas en versiones antiguas de la especificación del API de Audio Web, pero ahora están obsoletas y han sido reemplazadas por otras interfaces.

+ +
+
{{domxref("JavaScriptNode")}}
+
Usada para dirigir procesamiento de audio a través de JavaScript. Esta interfaz está obsoleta, y ha sido reemplazada por {{domxref("ScriptProcessorNode")}}.
+
{{domxref("WaveTableNode")}}
+
Usada para definir una forma de onda periórica. Esta interfaz está obsoleta, y ha sido reemplazada por {{domxref("PeriodicWave")}}.
+
+ +

Ejemplo

+ +

Este ejemplo muestra una amplia variedad de funciones del API de Audio Web siendo usadas. Puedes ver este código en acción en la demostración de Voice-change-o-matic (también revisa el código completo en Github) — este es un demo experimental de juguete cambiador de voz; manten tus parlantes en bajo volumen cuando lo uses ¡Al menos al comenzar!

+ +

Las líneas del API de Audio Web están resaltadas; si quieres saber más sobre lo que hacen los diferentes métodos, etc., busca en las páginas de referencia.

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // definir contexto de audio
+// los navegadores Webkit/blink necesitan prefijo, Safari no funcionará sin window.
+
+var voiceSelect = document.getElementById("voice"); // caja de selección para la selección de opciones de efectos de voz
+var visualSelect = document.getElementById("visual"); // caja de selección para la selección de opciones de visualización de audio
+var mute = document.querySelector('.mute'); // botón de silencio
+var drawVisual; // requestAnimationFrame
+
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+
+function makeDistortionCurve(amount) { // función para hacer que la forma de curva para distorsión / nodo modificador de onda para usar
+  var k = typeof amount === 'number' ? amount : 50,
+    n_samples = 44100,
+    curve = new Float32Array(n_samples),
+    deg = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i < n_samples; ++i ) {
+    x = i * 2 / n_samples - 1;
+    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
+  }
+  return curve;
+};
+
+navigator.getUserMedia (
+  // restricciones - solo el audio es necesario para esta aplicación
+  {
+    audio: true
+  },
+
+  // Retrollamada de éxito
+  function(stream) {
+    source = audioCtx.createMediaStreamSource(stream);
+    source.connect(analyser);
+    analyser.connect(distortion);
+    distortion.connect(biquadFilter);
+    biquadFilter.connect(gainNode);
+    gainNode.connect(audioCtx.destination); // conectando los diferentes nodos de grafo de audio juntos
+
+    visualize(stream);
+    voiceChange();
+
+  },
+
+  // Retrollamada de error
+  function(err) {
+    console.log('Se produjo el siguiente error gUM: ' + err);
+  }
+);
+
+function visualize(stream) {
+  WIDTH = canvas.width;
+  HEIGHT = canvas.height;
+
+  var visualSetting = visualSelect.value;
+  console.log(visualSetting);
+
+  if(visualSetting == "sinewave") {
+    analyser.fftSize = 2048;
+    var bufferLength = analyser.frequencyBinCount; // la mitad del valor de FFT
+    var dataArray = new Uint8Array(bufferLength); // crear una matriz para almacenar los datos
+
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+    function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray); // obtener datos de forma de onda y ponerlo en la matriz creada arriba
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // dibujar onda con canvas
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i < bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();
+
+  } else if(visualSetting == "off") {
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+    canvasCtx.fillStyle = "red";
+    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+  }
+
+}
+
+function voiceChange() {
+  distortion.curve = new Float32Array;
+  biquadFilter.gain.value = 0; // restablecer los efectos cada vez que se ejecuta la función VoiceChange
+
+  var voiceSetting = voiceSelect.value;
+  console.log(voiceSetting);
+
+  if(voiceSetting == "distortion") {
+    distortion.curve = makeDistortionCurve(400); // aplicar distorsión al sonido usando el nodo waveshaper
+  } else if(voiceSetting == "biquad") {
+    biquadFilter.type = "lowshelf";
+    biquadFilter.frequency.value = 1000;
+    biquadFilter.gain.value = 25; // aplicar el filtro lowshelf a los sonidos usando biquad
+  } else if(voiceSetting == "off") {
+    console.log("Voice settings turned off"); // no hacer nada, ya que se eligió la opción de apagado
+  }
+
+}
+
+// oyentes de eventos para cambiar la visualización y la configuración de voz
+
+visualSelect.onchange = function() {
+  window.cancelAnimationFrame(drawVisual);
+  visualize(stream);
+}
+
+voiceSelect.onchange = function() {
+  voiceChange();
+}
+
+mute.onclick = voiceMute;
+
+function voiceMute() { // alternar para silenciar y activar el sonido
+  if(mute.id == "") {
+    gainNode.gain.value = 0; // ganancia establecida en 0 para silenciar el sonido
+    mute.id = "activated";
+    mute.innerHTML = "Unmute";
+  } else {
+    gainNode.gain.value = 1; // ganancia establecida en 1 para activar el sonido
+    mute.id = "";
+    mute.innerHTML = "Mute";
+  }
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Audio API')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilidad en navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico14 {{property_prefix("webkit")}}{{CompatVersionUnknown}}23{{CompatNo}}15 {{property_prefix("webkit")}}
+ 22 (unprefixed)		6 {{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeEdgeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}28 {{property_prefix("webkit")}}{{CompatVersionUnknown}}251.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
+
+ +

También ver

+ + + +

Enlaces rápidos

+ +
    +
  1. Guíass + +
      +
    1. Conceptos básicos detrás del API de Audio Web
      2. +
    2. Usando el API de Audio Web
      3. +
    3. Visualizaciones con el API de Audio Web
      4. +
    4. Bases de la espacialización de audio Web
      5. +
    5. Portando código de webkitAudioContext a estándares basados en AudioContext
      6. +
    +
    2. +
  2. Ejemplos +
      +
    1. Teclado sintetizador sencillo
      2. +
    2. Voice-change-O-matic
      3. +
    3. Violent Theremin
      4. +
    +
    3. +
  3. Interfaces +
      +
    1. {{domxref("AnalyserNode")}}
      2. +
    2. {{domxref("AudioBuffer")}}
      3. +
    3. {{domxref("AudioScheduledSourceNode")}}
      4. +
    4. {{domxref("AudioBufferSourceNode")}}
      5. +
    5. {{domxref("AudioContext")}}
      6. +
    6. {{domxref("AudioDestinationNode")}}
      7. +
    7. {{domxref("AudioListener")}}
      8. +
    8. {{domxref("AudioNode")}}
      9. +
    9. {{domxref("AudioParam")}}
      10. +
    10. {{event("audioprocess")}} (event)
      11. +
    11. {{domxref("AudioProcessingEvent")}}
      12. +
    12. {{domxref("BiquadFilterNode")}}
      13. +
    13. {{domxref("ChannelMergerNode")}}
      14. +
    14. {{domxref("ChannelSplitterNode")}}
      15. +
    15. {{event("complete")}} (event)
      16. +
    16. {{domxref("ConvolverNode")}}
      17. +
    17. {{domxref("DelayNode")}}
      18. +
    18. {{domxref("DynamicsCompressorNode")}}
      19. +
    19. {{event("ended_(Web_Audio)", "ended")}} (event)
      20. +
    20. {{domxref("GainNode")}}
      21. +
    21. {{domxref("MediaElementAudioSourceNode")}}
      22. +
    22. {{domxref("MediaStreamAudioDestinationNode")}}
      23. +
    23. {{domxref("MediaStreamAudioSourceNode")}}
      24. +
    24. {{domxref("OfflineAudioCompletionEvent")}}
      25. +
    25. {{domxref("OfflineAudioContext")}}
      26. +
    26. {{domxref("OscillatorNode")}}
      27. +
    27. {{domxref("PannerNode")}}
      28. +
    28. {{domxref("PeriodicWave")}}
      29. +
    29. {{domxref("ScriptProcessorNode")}}
      30. +
    30. {{domxref("WaveShaperNode")}}
      31. +
    +
    4. +
diff --git a/files/es/web/api/web_crypto_api/checking_authenticity_with_password/index.html b/files/es/web/api/web_crypto_api/checking_authenticity_with_password/index.html deleted file mode 100644 index f2e2ef65fd..0000000000 --- a/files/es/web/api/web_crypto_api/checking_authenticity_with_password/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Verificando la autenticidad usando contraseña -slug: Web/API/Web_Crypto_API/Checking_authenticity_with_password -translation_of: 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/web/api/web_speech_api/using_the_web_speech_api/index.html b/files/es/web/api/web_speech_api/using_the_web_speech_api/index.html new file mode 100644 index 0000000000..407de0e10d --- /dev/null +++ b/files/es/web/api/web_speech_api/using_the_web_speech_api/index.html @@ -0,0 +1,301 @@ +--- +title: Uso de la Web Speech API +slug: Web/API/Web_Speech_API/Uso_de_la_Web_Speech_API +translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API +--- +

La API Web Speech API proporciona dos funcionalidades distintas — reconocimiento de voz, y síntesis de voz (también conocido como texto a voz o tts) — lo que nos ofrece nuevas e interesantes posibilidades para accesibilidad y otros mecanismos. Este artículo ofrece una breve introducción en las dos áreas, así como unas demos.

+ +

Reconocimiento de voz

+ +

El reconocimiento de voz implica recibir voz a través del micrófono de un dispositivo, luego es verificado por un servicio de reconocimiento de voz contra una lista de palabras o frases 'grammar' (esta lista básicamente es el vocabulario a reconocer en una app particular). Cuando se reconoce con éxito una palabra o frase, esta se devuelve como una cadena de texto y así poder iniciar otras acciones.

+ +

La API Web Speech tiene una interfaz principal de control para el - {{domxref ("SpeechRecognition")}} -, además de una serie de interfaces estrechamente relacionadas para representar la gramática, los resultados, etc. Normalmente, el sistema de reconocimiento de voz predeterminado que dispone el dispositivo se utilizará para el reconocimiento de voz: la mayoría de los sistemas operativos modernos tienen un sistema de reconocimiento de voz para emitir comandos de voz. Piense en Dictado en macOS, Siri en iOS, Cortana en Windows 10, Android Speech, etc.

+ +
+

Note: En algunos navegadores como Chrome, el uso del reconocimiento de voz implica el uso de un motor de reconocimiento basado en un servidor. Tu audio se envía a un servicio de reconocimiento web para ser procesado, por lo que no funcionará offline.

+
+ +

Demo

+ +

Para mostrar un uso sencillo del reconocimiento de voz Web, hemos escrito una demo llamada Speech color changer. Cuando se toca o hace click en la pantalla, se puede decir un color HTML, y el color de fondo de la aplicación cambiará a ese color.

+ +

The UI of an app titled Speech Color changer. It invites the user to tap the screen and say a color, and then it turns the background of the app that colour. In this case it has turned the background red.

+ +

Para ejecutar la demo, se puede clonar (o directamente descargar) el repositorio Github donde se encuentra, abrir el fichero index HTML en un navegador de escritorio compatible, o navegar a través del enlace live demo URL en un navegador de móvil compatible como Chrome.

+ +

Compatibilidad de navegadores

+ +

Actualmente, la compatibilidad de la Web Speech API para el reconocimiento de voz se limita a Chrome para escritorio y Android — Chrome tiene soporte desde la versión 33 pero con interfaces 'prefixed', por lo que se deben incluir ese tipo de interfaces 'prefixed', por ejemplo webkitSpeechRecognition.

+ +

HTML y CSS

+ +

El HTML y el CSS para esta app no son importantes. Solo tenemos un título, instrucciones en un párrafo, y un div dentro del cual visualizaremos los mensajes de diagnósticos.

+ +
<h1>Speech color changer</h1>
+<p>Tap/click then say a color to change the background color of the app.</p>
+<div>
+  <p class="output"><em>...diagnostic messages</em></p>
+</div>
+ +

El CSS proporciona un estilo responsive muy simple para que se visualice bien en todos los dispositivos.

+ +

JavaScript

+ +

Miremos el JavaScript con un poco más de detalle.

+ +

Compatibilidad con Chrome 

+ +

Como se ha mencionado anteriormente, Chrome actualmente admite el reconocimiento de voz con propiedades 'prefixed', por lo tanto, al principio de nuestro código incluiremos las siguientes líneas para usar los objetos que correspondan a Chrome, y así cualquier implementación en el futuro pueda admitir estas características sin ningún 'prefixed':

+ +
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
+var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
+var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
+ +

La gramática -grammar-

+ +

Las siguientes líneas de código definen la gramática que queremos que reconozca nuestra app. Se define una variable para contener nuestra gramática:

+ +
var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ... ];
+var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;'
+ +

El formato usado para 'grammar' es JSpeech Grammar Format (JSGF) — Se puede encontrar más sobre las especificaciones de este formato en el anterior enlace. Sin embargo y por ahora vamos a echarle un vistazo rápidamente:

+ +
    +
  • Las líneas se separan con punto y coma como en JavaScript.
    • +
  • La primera línea — #JSGF V1.0; — establece el formato y versión utilizados. Esto siempre se debe incluir primero.
    • +
  • La segunda línea indica el tipo de términos que queremos que se reconozcan. public declara que es una regla pública, la cadena entre los paréntesis angulares definen el nombre reconocido para éste término (color), y la lista de elementos que siguen al signo igual son los valores alternativos que se reconocerán y aceptaran como valores apropiados al término. Observar como cada elemento se separa con el carácter pipe ' | ' .
    • +
  • Se pueden definir tantos términos como se desee en líneas separadas siguiendo la estructura anterior, e incluir definiciones gramaticales complejas. Esta demostración básica la mantenemos lo más simple posible.
    • +
+ +

Conectando la gramática a nuestro reconocimiento de voz

+ +

Lo siguiente que tenemos que hacer es definir una instancia de reconocimiento de voz para el control en nuestra aplicación. Esto se hace usando el constructor {{domxref("SpeechRecognition.SpeechRecognition()", "SpeechRecognition()")}}. También creamos una lista de gramática de voz para contener nuestra gramática usando el constructor {{domxref("SpeechGrammarList.SpeechGrammarList()","SpeechGrammarList()")}}.

+ +
var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+ +

Añadimos nuestra  grammar  a la lista anterior usando el método {{domxref("SpeechGrammarList.addFromString()")}}. Este método acepta como parámetro la cadena que queremos añadir, así como opcionalmente, un valor que especifique la importancia de esta gramática en relación a otras gramáticas disponibles en la lista (el rango del valor va desde 0 hasta 1 inclusive). La gramática agregada está disponible en la lista como una instancia del objeto {{domxref("SpeechGrammar")}}.

+ +
speechRecognitionList.addFromString(grammar, 1);
+ +

Después añadimos la lista {{domxref("SpeechGrammarList")}} a la instancia del reconocimiento de voz estableciéndola en la propiedad {{domxref("SpeechRecognition.grammars")}}. También establecemos algunas otras propiedades a la instancia de reconocimiento antes de continuar:

+ +
    +
  • {{domxref("SpeechRecognition.continuous")}}: Controla si se capturan los resultados de forma continua (true), o solo un resultado cada vez que se inicia el reconocimiento (false).
    • +
  • {{domxref("SpeechRecognition.lang")}}: Establece el idioma del reconocimiento. Esto es una buena práctica y, por lo tanto, recomendable.
    • +
  • {{domxref("SpeechRecognition.interimResults")}}: Define si el sistema de reconocimiento de voz debe devolver resultados provisionales o solo resultados finales. Para nuestra demo es suficiente con los resultados finales.
    • +
  • {{domxref("SpeechRecognition.maxAlternatives")}}:  Establece el número de posibles coincidencias alternativas que se deben devolver por resultado. Esto a veces puede ser útil, por ejemplo, si un resultado no está completamente claro y desea mostrar una lista de alternativas para que el usuario elija la correcta. Esta opción no es necesaria para la demo, por lo que solo especificamos una (la cual es la predeterminada).
    • +
+ +
recognition.grammars = speechRecognitionList;
+recognition.continuous = false;
+recognition.lang = 'en-US';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;
+ +

Comenzando el reconocimiento de voz

+ +

Tomamos las referencias de la salida {{htmlelement("div")}} y del elemento HTML (para que podamos enviar mensajes de diagnostico y actualizar el color de fondo de la aplicación más adelante), e implementamos un manejador onclick para que cuando se haga click o se toque la pantalla, se inicie el reconocimiento de voz. Esto se logra llamando al método {{domxref("SpeechRecognition.start()")}}. El método forEach() se usa para visualizar indicadores de colores que muestran qué colores intenta decir.

+ +
var diagnostic = document.querySelector('.output');
+var bg = document.querySelector('html');
+var hints = document.querySelector('.hints');
+
+var colorHTML= '';
+colors.forEach(function(v, i, a){
+  console.log(v, i);
+  colorHTML += '<span style="background-color:' + v + ';"> ' + v + ' </span>';
+});
+hints.innerHTML = 'Tap/click then say a color to change the background color of the app. Try ' + colorHTML + '.';
+
+document.body.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+}
+ +

Recepción y manejo de resultados

+ +

Una vez que comienza el reconocimiento de voz, hay muchos manejadores de eventos que se pueden usar para recuperar los resultados, así como otros elementos de información adicional (ver SpeechRecognition event handlers list.) El más común que probablemente usarás es {{domxref("SpeechRecognition.onresult")}}, el cual es lanzado cuando se recibe el resultado con éxito:

+ +
recognition.onresult = function(event) {
+  var color = event.results[0][0].transcript;
+  diagnostic.textContent = 'Result received: ' + color + '.';
+  bg.style.backgroundColor = color;
+  console.log('Confidence: ' + event.results[0][0].confidence);
+}
+ +

La tercera línea es un poco más compleja, así que vamos a explicarla paso a paso. La propiedad {{domxref("SpeechRecognitionEvent.results")}} devuelve un objeto {{domxref("SpeechRecognitionResultList")}} que contiene los objetos {{domxref("SpeechRecognitionResult")}}. Tiene un getter para que pueda ser accesible como si fuera un array — así el primer [0] devuelve el SpeechRecognitionResult en la posición 0. Cada objeto SpeechRecognitionResult contiene objetos {{domxref("SpeechRecognitionAlternative")}} que contienen palabras individuales reconocidas. Estos también tienen getters para que se puedan acceder a ellos como arrays — por lo tanto el segundo [0] devuelve SpeechRecognitionAlternative en la posición 0. Luego devolvemos su propiedad transcript para obtener una cadena que contenga  el resultado individual reconocido como un string, estableciendo el color de fondo a ese color, e informando del color reconocido como un mensaje de diagnóstico en el IU.

+ +

También usamos el manejador {{domxref("SpeechRecognition.onspeechend")}} para parar el servicio de reconocimiento de voz (usando {{domxref("SpeechRecognition.stop()")}}) cuando se ha reconocido una sola palabra y se ha finalizado de hablar:

+ +
recognition.onspeechend = function() {
+  recognition.stop();
+}
+ +

Manejo de errores y voz no reconocida

+ +

Los dos últimos manejadores son para controlar los casos donde no se reconoce ninguna de las palabras definidas en la gramática, o cuando ocurre un error. {{domxref("SpeechRecognition.onnomatch")}} maneja el primer caso mencionado, pero tenga en cuenta que de momento no parece que se dispare correctamente; solo devuelve lo que ha reconocido:

+ +
recognition.onnomatch = function(event) {
+  diagnostic.textContent = 'I didnt recognise that color.';
+}
+ +

{{domxref("SpeechRecognition.onerror")}} maneja los casos donde se ha producido en error en el reconocimiento  — la propiedad {{domxref("SpeechRecognitionError.error")}} contiene el error devuelto:

+ +
recognition.onerror = function(event) {
+  diagnostic.textContent = 'Error occurred in recognition: ' + event.error;
+}
+ +

Síntesis de voz

+ +

La síntesis de voz (también  conocida como texto a voz o tts) implica recibir  contenido en forma de texto dentro de una aplicación y convertirla en voz a través del altavoz del dispositivo o de la conexión de salida del audio.

+ +

La Web Speech API tiene una interface principal controladora — {{domxref("SpeechSynthesis")}} — además de una serie de interfaces estrechamente relacionadas para representar  el texto que se va a sintetizar (conocido como dictados 'utterances'), voces que se usarán para los dictados, etc. De nuevo, la mayoría de sistemas operativos disponen de algún sistema de síntesis de voz que pueden serán usados por la API si están disponibles.

+ +

Demo

+ +

Para mostrar un uso sencillo de la síntesis de voz Web, tenemos la demo llamada Speak easy synthesis. Esta incluye un juego de controles de formulario para introducir texto a sintetizar, configurar el tono, velocidad de reproducción y la voz a usar cuando el texto sea pronunciado.  Después de introducir el texto se puede presionar Enter/Return para escucharlo.

+ +

UI of an app called speak easy synthesis. It has an input field in which to input text to be synthesised, slider controls to change the rate and pitch of the speech, and a drop down menu to choose between different voices.

+ +

Para ejecutar la demo, se puede clonar (o directamente descargar) el repositorio Github donde se encuentra, abrir el fichero index HTML en un navegador de escritorio compatible, o navegar a través del enlace live demo URL en un navegador de móvil compatible como Chrome.

+ +

Compatibilidad de navegadores

+ +

El soporte para la síntesis de voz Web Speech API solo ha llegado a los navegadores más importantes  y actualmente se limita a los siguientes:

+ +
    +
  • +

    Firefox para escritorio y dispositivos móviles en Gecko 42+ (Windows)/44+, sin prefijos, y se puede activar configurando el flag media.webspeech.synth.enabled a true en about:config.

    +
    • +
  • +

    Firefox OS 2.5+ lo soporta por defecto y sin ser necesario ningún permiso.

    +
    • +
  • +

    Chrome para escritorio y  Android tienen soporte desde la versión 33, sin prefijos.

    +
    • +
+ +

HTML y CSS

+ +

El HTML y CSS de nuevo no son fundamentales, simplemente contiene un titulo, algunas instrucciones de uso y un formulario con algunos controles sencillos. El elemento {{htmlelement("select")}} inicialmente está vacío pero se rellena con {{htmlelement("option")}} mediante JavaScript (ver más adelante.)

+ +
<h1>Speech synthesiser</h1>
+
+<p>Enter some text in the input below and press return to hear it. change voices using the dropdown menu.</p>
+
+<form>
+  <input type="text" class="txt">
+  <div>
+    <label for="rate">Rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
+    <div class="rate-value">1</div>
+    <div class="clearfix"></div>
+  </div>
+  <div>
+    <label for="pitch">Pitch</label><input type="range" min="0" max="2" value="1" step="0.1" id="pitch">
+    <div class="pitch-value">1</div>
+    <div class="clearfix"></div>
+  </div>
+  <select>
+
+  </select>
+</form>
+ +

JavaScript

+ +

Analicemos el JavaScript usado en esta app.

+ +

Configurar variables

+ +

En primer lugar, capturamos las referencias de todos los elementos DOM involucrados en la IU, pero lo más importante es capturar una referencia a  {{domxref("Window.speechSynthesis")}}. Este es el punto de entrada a la API — devuelve una instancia a {{domxref("SpeechSynthesis")}}, la interface controladora para la síntesis de voz en la web.

+ +
var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('.txt');
+var voiceSelect = document.querySelector('select');
+
+var pitch = document.querySelector('#pitch');
+var pitchValue = document.querySelector('.pitch-value');
+var rate = document.querySelector('#rate');
+var rateValue = document.querySelector('.rate-value');
+
+var voices = [];
+
+ +

Rellenar el elemento select 

+ +

Para rellenar el elemento {{htmlelement("select")}} con las diferentes opciones de voz del que dispone el dispositivo, hemos escrito la función populateVoiceList(). Primero invocamos {{domxref("SpeechSynthesis.getVoices()")}}, que devuelve una lista de todas las voces disponibles representadas por objetos {{domxref("SpeechSynthesisVoice")}}. Después recorremos esa lista — para cada voz creamos un elemento {{htmlelement("option")}}, establecemos su contenido con el nombre de la voz (desde {{domxref("SpeechSynthesisVoice.name")}}), y el lenguaje de la misma (desde {{domxref("SpeechSynthesisVoice.lang")}}), y -- DEFAULT si la voz es la predeterminada para el motor de síntesis (verificando si {{domxref("SpeechSynthesisVoice.default")}} devuelve true.)

+ +

Para cada opción también creamos atributos data-, conteniendo el nombre y lenguaje de la voz asociada, para que más tarde podamos usarlos fácilmente, y después añadimos las opciones 'option' como hijos del select.

+ +
function populateVoiceList() {
+  voices = synth.getVoices();
+
+  for(i = 0; i < voices.length ; i++) {
+    var option = document.createElement('option');
+    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+    if(voices[i].default) {
+      option.textContent += ' -- DEFAULT';
+    }
+
+    option.setAttribute('data-lang', voices[i].lang);
+    option.setAttribute('data-name', voices[i].name);
+    voiceSelect.appendChild(option);
+  }
+}
+ +

Cuando vamos a ejecutar la función hacemos lo siguiente debido a que Firefox no soporta {{domxref("SpeechSynthesis.onvoiceschanged")}}, y sólo devolverá una lista de voces cuando se ejecute {{domxref("SpeechSynthesis.getVoices()")}}. Sin embargo con Chrome solo hay que esperar a que se active el evento antes de rellenar la lista, de ahí la siguiente parte de código.

+ +
populateVoiceList();
+if (speechSynthesis.onvoiceschanged !== undefined) {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
+}
+ +

Reproduciendo el texto introducido

+ +

A continuación, creamos un manejador de eventos para comenzar a reproducir el texto introducido en el campo de texto. Usamos un manejador onsubmit en el formulario para que la acción ocurra cuando se presione Enter/Return. Primero creamos una nueva instancia de  {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "SpeechSynthesisUtterance()")}} usando su constructor — a este se le pasa el valor de la entrada de texto como parámetro.

+ +

A continuación, debemos obtener la voz que queremos utilizar. Usamos la propiedad {{domxref("HTMLSelectElement")}} selectedOptions para devolver el elemento seleccionado {{htmlelement("option")}}. Entonces usamos el atributo de este elemento data-name, encontrando el objeto {{domxref("SpeechSynthesisVoice")}} cuyo nombre coincida con el valor del atributo. Y configuramos la propiedad de {{domxref("SpeechSynthesisUtterance.voice")}} con el valor que coincida con la opción seleccionada.

+ +

Por último, configuramos {{domxref("SpeechSynthesisUtterance.pitch")}} y {{domxref("SpeechSynthesisUtterance.rate")}} con los valores de los elementos del formulario correspondientes. Entonces y ya configurado todo lo necesario, comenzamos la reproducción invocando  {{domxref("SpeechSynthesis.speak()")}}, y pasándolo a la instancia {{domxref("SpeechSynthesisUtterance")}} como parámetro.

+ +
inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i < voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  utterThis.pitch = pitch.value;
+  utterThis.rate = rate.value;
+  synth.speak(utterThis);
+ +

Al final del manejador incluimos un manejador {{domxref("SpeechSynthesisUtterance.onpause")}} para mostrar cómo usar {{domxref("SpeechSynthesisEvent")}}. Cuando se invoca a  {{domxref("SpeechSynthesis.pause()")}},este devuelve un mensaje informando del número y nombre del carácter en el que se detuvo la reproducción.

+ +
   utterThis.onpause = function(event) {
+    var char = event.utterance.text.charAt(event.charIndex);
+    console.log('Speech paused at character ' + event.charIndex + ' of "' +
+    event.utterance.text + '", which is "' + char + '".');
+  }
+ +

Por último, llamamos a blur() en la entrada de texto. Esto permite ocultar la entrada de texto en Firefox OS.

+ +
  inputTxt.blur();
+}
+ +

Actualizando los valores de tono y velocidad mostrados

+ +

La última parte del código simplemente actualiza los valores pitch/rate mostrados en la IU, cada vez que el slider cambia de posición.

+ +
pitch.onchange = function() {
+  pitchValue.textContent = pitch.value;
+}
+
+rate.onchange = function() {
+  rateValue.textContent = rate.value;
+}
diff --git a/files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html b/files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html deleted file mode 100644 index 407de0e10d..0000000000 --- a/files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html +++ /dev/null @@ -1,301 +0,0 @@ ---- -title: Uso de la Web Speech API -slug: Web/API/Web_Speech_API/Uso_de_la_Web_Speech_API -translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API ---- -

La API Web Speech API proporciona dos funcionalidades distintas — reconocimiento de voz, y síntesis de voz (también conocido como texto a voz o tts) — lo que nos ofrece nuevas e interesantes posibilidades para accesibilidad y otros mecanismos. Este artículo ofrece una breve introducción en las dos áreas, así como unas demos.

- -

Reconocimiento de voz

- -

El reconocimiento de voz implica recibir voz a través del micrófono de un dispositivo, luego es verificado por un servicio de reconocimiento de voz contra una lista de palabras o frases 'grammar' (esta lista básicamente es el vocabulario a reconocer en una app particular). Cuando se reconoce con éxito una palabra o frase, esta se devuelve como una cadena de texto y así poder iniciar otras acciones.

- -

La API Web Speech tiene una interfaz principal de control para el - {{domxref ("SpeechRecognition")}} -, además de una serie de interfaces estrechamente relacionadas para representar la gramática, los resultados, etc. Normalmente, el sistema de reconocimiento de voz predeterminado que dispone el dispositivo se utilizará para el reconocimiento de voz: la mayoría de los sistemas operativos modernos tienen un sistema de reconocimiento de voz para emitir comandos de voz. Piense en Dictado en macOS, Siri en iOS, Cortana en Windows 10, Android Speech, etc.

- -
-

Note: En algunos navegadores como Chrome, el uso del reconocimiento de voz implica el uso de un motor de reconocimiento basado en un servidor. Tu audio se envía a un servicio de reconocimiento web para ser procesado, por lo que no funcionará offline.

-
- -

Demo

- -

Para mostrar un uso sencillo del reconocimiento de voz Web, hemos escrito una demo llamada Speech color changer. Cuando se toca o hace click en la pantalla, se puede decir un color HTML, y el color de fondo de la aplicación cambiará a ese color.

- -

The UI of an app titled Speech Color changer. It invites the user to tap the screen and say a color, and then it turns the background of the app that colour. In this case it has turned the background red.

- -

Para ejecutar la demo, se puede clonar (o directamente descargar) el repositorio Github donde se encuentra, abrir el fichero index HTML en un navegador de escritorio compatible, o navegar a través del enlace live demo URL en un navegador de móvil compatible como Chrome.

- -

Compatibilidad de navegadores

- -

Actualmente, la compatibilidad de la Web Speech API para el reconocimiento de voz se limita a Chrome para escritorio y Android — Chrome tiene soporte desde la versión 33 pero con interfaces 'prefixed', por lo que se deben incluir ese tipo de interfaces 'prefixed', por ejemplo webkitSpeechRecognition.

- -

HTML y CSS

- -

El HTML y el CSS para esta app no son importantes. Solo tenemos un título, instrucciones en un párrafo, y un div dentro del cual visualizaremos los mensajes de diagnósticos.

- -
<h1>Speech color changer</h1>
-<p>Tap/click then say a color to change the background color of the app.</p>
-<div>
-  <p class="output"><em>...diagnostic messages</em></p>
-</div>
- -

El CSS proporciona un estilo responsive muy simple para que se visualice bien en todos los dispositivos.

- -

JavaScript

- -

Miremos el JavaScript con un poco más de detalle.

- -

Compatibilidad con Chrome 

- -

Como se ha mencionado anteriormente, Chrome actualmente admite el reconocimiento de voz con propiedades 'prefixed', por lo tanto, al principio de nuestro código incluiremos las siguientes líneas para usar los objetos que correspondan a Chrome, y así cualquier implementación en el futuro pueda admitir estas características sin ningún 'prefixed':

- -
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
-var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
-var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
- -

La gramática -grammar-

- -

Las siguientes líneas de código definen la gramática que queremos que reconozca nuestra app. Se define una variable para contener nuestra gramática:

- -
var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ... ];
-var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;'
- -

El formato usado para 'grammar' es JSpeech Grammar Format (JSGF) — Se puede encontrar más sobre las especificaciones de este formato en el anterior enlace. Sin embargo y por ahora vamos a echarle un vistazo rápidamente:

- -
    -
  • Las líneas se separan con punto y coma como en JavaScript.
    • -
  • La primera línea — #JSGF V1.0; — establece el formato y versión utilizados. Esto siempre se debe incluir primero.
    • -
  • La segunda línea indica el tipo de términos que queremos que se reconozcan. public declara que es una regla pública, la cadena entre los paréntesis angulares definen el nombre reconocido para éste término (color), y la lista de elementos que siguen al signo igual son los valores alternativos que se reconocerán y aceptaran como valores apropiados al término. Observar como cada elemento se separa con el carácter pipe ' | ' .
    • -
  • Se pueden definir tantos términos como se desee en líneas separadas siguiendo la estructura anterior, e incluir definiciones gramaticales complejas. Esta demostración básica la mantenemos lo más simple posible.
    • -
- -

Conectando la gramática a nuestro reconocimiento de voz

- -

Lo siguiente que tenemos que hacer es definir una instancia de reconocimiento de voz para el control en nuestra aplicación. Esto se hace usando el constructor {{domxref("SpeechRecognition.SpeechRecognition()", "SpeechRecognition()")}}. También creamos una lista de gramática de voz para contener nuestra gramática usando el constructor {{domxref("SpeechGrammarList.SpeechGrammarList()","SpeechGrammarList()")}}.

- -
var recognition = new SpeechRecognition();
-var speechRecognitionList = new SpeechGrammarList();
- -

Añadimos nuestra  grammar  a la lista anterior usando el método {{domxref("SpeechGrammarList.addFromString()")}}. Este método acepta como parámetro la cadena que queremos añadir, así como opcionalmente, un valor que especifique la importancia de esta gramática en relación a otras gramáticas disponibles en la lista (el rango del valor va desde 0 hasta 1 inclusive). La gramática agregada está disponible en la lista como una instancia del objeto {{domxref("SpeechGrammar")}}.

- -
speechRecognitionList.addFromString(grammar, 1);
- -

Después añadimos la lista {{domxref("SpeechGrammarList")}} a la instancia del reconocimiento de voz estableciéndola en la propiedad {{domxref("SpeechRecognition.grammars")}}. También establecemos algunas otras propiedades a la instancia de reconocimiento antes de continuar:

- -
    -
  • {{domxref("SpeechRecognition.continuous")}}: Controla si se capturan los resultados de forma continua (true), o solo un resultado cada vez que se inicia el reconocimiento (false).
    • -
  • {{domxref("SpeechRecognition.lang")}}: Establece el idioma del reconocimiento. Esto es una buena práctica y, por lo tanto, recomendable.
    • -
  • {{domxref("SpeechRecognition.interimResults")}}: Define si el sistema de reconocimiento de voz debe devolver resultados provisionales o solo resultados finales. Para nuestra demo es suficiente con los resultados finales.
    • -
  • {{domxref("SpeechRecognition.maxAlternatives")}}:  Establece el número de posibles coincidencias alternativas que se deben devolver por resultado. Esto a veces puede ser útil, por ejemplo, si un resultado no está completamente claro y desea mostrar una lista de alternativas para que el usuario elija la correcta. Esta opción no es necesaria para la demo, por lo que solo especificamos una (la cual es la predeterminada).
    • -
- -
recognition.grammars = speechRecognitionList;
-recognition.continuous = false;
-recognition.lang = 'en-US';
-recognition.interimResults = false;
-recognition.maxAlternatives = 1;
- -

Comenzando el reconocimiento de voz

- -

Tomamos las referencias de la salida {{htmlelement("div")}} y del elemento HTML (para que podamos enviar mensajes de diagnostico y actualizar el color de fondo de la aplicación más adelante), e implementamos un manejador onclick para que cuando se haga click o se toque la pantalla, se inicie el reconocimiento de voz. Esto se logra llamando al método {{domxref("SpeechRecognition.start()")}}. El método forEach() se usa para visualizar indicadores de colores que muestran qué colores intenta decir.

- -
var diagnostic = document.querySelector('.output');
-var bg = document.querySelector('html');
-var hints = document.querySelector('.hints');
-
-var colorHTML= '';
-colors.forEach(function(v, i, a){
-  console.log(v, i);
-  colorHTML += '<span style="background-color:' + v + ';"> ' + v + ' </span>';
-});
-hints.innerHTML = 'Tap/click then say a color to change the background color of the app. Try ' + colorHTML + '.';
-
-document.body.onclick = function() {
-  recognition.start();
-  console.log('Ready to receive a color command.');
-}
- -

Recepción y manejo de resultados

- -

Una vez que comienza el reconocimiento de voz, hay muchos manejadores de eventos que se pueden usar para recuperar los resultados, así como otros elementos de información adicional (ver SpeechRecognition event handlers list.) El más común que probablemente usarás es {{domxref("SpeechRecognition.onresult")}}, el cual es lanzado cuando se recibe el resultado con éxito:

- -
recognition.onresult = function(event) {
-  var color = event.results[0][0].transcript;
-  diagnostic.textContent = 'Result received: ' + color + '.';
-  bg.style.backgroundColor = color;
-  console.log('Confidence: ' + event.results[0][0].confidence);
-}
- -

La tercera línea es un poco más compleja, así que vamos a explicarla paso a paso. La propiedad {{domxref("SpeechRecognitionEvent.results")}} devuelve un objeto {{domxref("SpeechRecognitionResultList")}} que contiene los objetos {{domxref("SpeechRecognitionResult")}}. Tiene un getter para que pueda ser accesible como si fuera un array — así el primer [0] devuelve el SpeechRecognitionResult en la posición 0. Cada objeto SpeechRecognitionResult contiene objetos {{domxref("SpeechRecognitionAlternative")}} que contienen palabras individuales reconocidas. Estos también tienen getters para que se puedan acceder a ellos como arrays — por lo tanto el segundo [0] devuelve SpeechRecognitionAlternative en la posición 0. Luego devolvemos su propiedad transcript para obtener una cadena que contenga  el resultado individual reconocido como un string, estableciendo el color de fondo a ese color, e informando del color reconocido como un mensaje de diagnóstico en el IU.

- -

También usamos el manejador {{domxref("SpeechRecognition.onspeechend")}} para parar el servicio de reconocimiento de voz (usando {{domxref("SpeechRecognition.stop()")}}) cuando se ha reconocido una sola palabra y se ha finalizado de hablar:

- -
recognition.onspeechend = function() {
-  recognition.stop();
-}
- -

Manejo de errores y voz no reconocida

- -

Los dos últimos manejadores son para controlar los casos donde no se reconoce ninguna de las palabras definidas en la gramática, o cuando ocurre un error. {{domxref("SpeechRecognition.onnomatch")}} maneja el primer caso mencionado, pero tenga en cuenta que de momento no parece que se dispare correctamente; solo devuelve lo que ha reconocido:

- -
recognition.onnomatch = function(event) {
-  diagnostic.textContent = 'I didnt recognise that color.';
-}
- -

{{domxref("SpeechRecognition.onerror")}} maneja los casos donde se ha producido en error en el reconocimiento  — la propiedad {{domxref("SpeechRecognitionError.error")}} contiene el error devuelto:

- -
recognition.onerror = function(event) {
-  diagnostic.textContent = 'Error occurred in recognition: ' + event.error;
-}
- -

Síntesis de voz

- -

La síntesis de voz (también  conocida como texto a voz o tts) implica recibir  contenido en forma de texto dentro de una aplicación y convertirla en voz a través del altavoz del dispositivo o de la conexión de salida del audio.

- -

La Web Speech API tiene una interface principal controladora — {{domxref("SpeechSynthesis")}} — además de una serie de interfaces estrechamente relacionadas para representar  el texto que se va a sintetizar (conocido como dictados 'utterances'), voces que se usarán para los dictados, etc. De nuevo, la mayoría de sistemas operativos disponen de algún sistema de síntesis de voz que pueden serán usados por la API si están disponibles.

- -

Demo

- -

Para mostrar un uso sencillo de la síntesis de voz Web, tenemos la demo llamada Speak easy synthesis. Esta incluye un juego de controles de formulario para introducir texto a sintetizar, configurar el tono, velocidad de reproducción y la voz a usar cuando el texto sea pronunciado.  Después de introducir el texto se puede presionar Enter/Return para escucharlo.

- -

UI of an app called speak easy synthesis. It has an input field in which to input text to be synthesised, slider controls to change the rate and pitch of the speech, and a drop down menu to choose between different voices.

- -

Para ejecutar la demo, se puede clonar (o directamente descargar) el repositorio Github donde se encuentra, abrir el fichero index HTML en un navegador de escritorio compatible, o navegar a través del enlace live demo URL en un navegador de móvil compatible como Chrome.

- -

Compatibilidad de navegadores

- -

El soporte para la síntesis de voz Web Speech API solo ha llegado a los navegadores más importantes  y actualmente se limita a los siguientes:

- -
    -
  • -

    Firefox para escritorio y dispositivos móviles en Gecko 42+ (Windows)/44+, sin prefijos, y se puede activar configurando el flag media.webspeech.synth.enabled a true en about:config.

    -
    • -
  • -

    Firefox OS 2.5+ lo soporta por defecto y sin ser necesario ningún permiso.

    -
    • -
  • -

    Chrome para escritorio y  Android tienen soporte desde la versión 33, sin prefijos.

    -
    • -
- -

HTML y CSS

- -

El HTML y CSS de nuevo no son fundamentales, simplemente contiene un titulo, algunas instrucciones de uso y un formulario con algunos controles sencillos. El elemento {{htmlelement("select")}} inicialmente está vacío pero se rellena con {{htmlelement("option")}} mediante JavaScript (ver más adelante.)

- -
<h1>Speech synthesiser</h1>
-
-<p>Enter some text in the input below and press return to hear it. change voices using the dropdown menu.</p>
-
-<form>
-  <input type="text" class="txt">
-  <div>
-    <label for="rate">Rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
-    <div class="rate-value">1</div>
-    <div class="clearfix"></div>
-  </div>
-  <div>
-    <label for="pitch">Pitch</label><input type="range" min="0" max="2" value="1" step="0.1" id="pitch">
-    <div class="pitch-value">1</div>
-    <div class="clearfix"></div>
-  </div>
-  <select>
-
-  </select>
-</form>
- -

JavaScript

- -

Analicemos el JavaScript usado en esta app.

- -

Configurar variables

- -

En primer lugar, capturamos las referencias de todos los elementos DOM involucrados en la IU, pero lo más importante es capturar una referencia a  {{domxref("Window.speechSynthesis")}}. Este es el punto de entrada a la API — devuelve una instancia a {{domxref("SpeechSynthesis")}}, la interface controladora para la síntesis de voz en la web.

- -
var synth = window.speechSynthesis;
-
-var inputForm = document.querySelector('form');
-var inputTxt = document.querySelector('.txt');
-var voiceSelect = document.querySelector('select');
-
-var pitch = document.querySelector('#pitch');
-var pitchValue = document.querySelector('.pitch-value');
-var rate = document.querySelector('#rate');
-var rateValue = document.querySelector('.rate-value');
-
-var voices = [];
-
- -

Rellenar el elemento select 

- -

Para rellenar el elemento {{htmlelement("select")}} con las diferentes opciones de voz del que dispone el dispositivo, hemos escrito la función populateVoiceList(). Primero invocamos {{domxref("SpeechSynthesis.getVoices()")}}, que devuelve una lista de todas las voces disponibles representadas por objetos {{domxref("SpeechSynthesisVoice")}}. Después recorremos esa lista — para cada voz creamos un elemento {{htmlelement("option")}}, establecemos su contenido con el nombre de la voz (desde {{domxref("SpeechSynthesisVoice.name")}}), y el lenguaje de la misma (desde {{domxref("SpeechSynthesisVoice.lang")}}), y -- DEFAULT si la voz es la predeterminada para el motor de síntesis (verificando si {{domxref("SpeechSynthesisVoice.default")}} devuelve true.)

- -

Para cada opción también creamos atributos data-, conteniendo el nombre y lenguaje de la voz asociada, para que más tarde podamos usarlos fácilmente, y después añadimos las opciones 'option' como hijos del select.

- -
function populateVoiceList() {
-  voices = synth.getVoices();
-
-  for(i = 0; i < voices.length ; i++) {
-    var option = document.createElement('option');
-    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
-
-    if(voices[i].default) {
-      option.textContent += ' -- DEFAULT';
-    }
-
-    option.setAttribute('data-lang', voices[i].lang);
-    option.setAttribute('data-name', voices[i].name);
-    voiceSelect.appendChild(option);
-  }
-}
- -

Cuando vamos a ejecutar la función hacemos lo siguiente debido a que Firefox no soporta {{domxref("SpeechSynthesis.onvoiceschanged")}}, y sólo devolverá una lista de voces cuando se ejecute {{domxref("SpeechSynthesis.getVoices()")}}. Sin embargo con Chrome solo hay que esperar a que se active el evento antes de rellenar la lista, de ahí la siguiente parte de código.

- -
populateVoiceList();
-if (speechSynthesis.onvoiceschanged !== undefined) {
-  speechSynthesis.onvoiceschanged = populateVoiceList;
-}
- -

Reproduciendo el texto introducido

- -

A continuación, creamos un manejador de eventos para comenzar a reproducir el texto introducido en el campo de texto. Usamos un manejador onsubmit en el formulario para que la acción ocurra cuando se presione Enter/Return. Primero creamos una nueva instancia de  {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "SpeechSynthesisUtterance()")}} usando su constructor — a este se le pasa el valor de la entrada de texto como parámetro.

- -

A continuación, debemos obtener la voz que queremos utilizar. Usamos la propiedad {{domxref("HTMLSelectElement")}} selectedOptions para devolver el elemento seleccionado {{htmlelement("option")}}. Entonces usamos el atributo de este elemento data-name, encontrando el objeto {{domxref("SpeechSynthesisVoice")}} cuyo nombre coincida con el valor del atributo. Y configuramos la propiedad de {{domxref("SpeechSynthesisUtterance.voice")}} con el valor que coincida con la opción seleccionada.

- -

Por último, configuramos {{domxref("SpeechSynthesisUtterance.pitch")}} y {{domxref("SpeechSynthesisUtterance.rate")}} con los valores de los elementos del formulario correspondientes. Entonces y ya configurado todo lo necesario, comenzamos la reproducción invocando  {{domxref("SpeechSynthesis.speak()")}}, y pasándolo a la instancia {{domxref("SpeechSynthesisUtterance")}} como parámetro.

- -
inputForm.onsubmit = function(event) {
-  event.preventDefault();
-
-  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
-  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
-  for(i = 0; i < voices.length ; i++) {
-    if(voices[i].name === selectedOption) {
-      utterThis.voice = voices[i];
-    }
-  }
-  utterThis.pitch = pitch.value;
-  utterThis.rate = rate.value;
-  synth.speak(utterThis);
- -

Al final del manejador incluimos un manejador {{domxref("SpeechSynthesisUtterance.onpause")}} para mostrar cómo usar {{domxref("SpeechSynthesisEvent")}}. Cuando se invoca a  {{domxref("SpeechSynthesis.pause()")}},este devuelve un mensaje informando del número y nombre del carácter en el que se detuvo la reproducción.

- -
   utterThis.onpause = function(event) {
-    var char = event.utterance.text.charAt(event.charIndex);
-    console.log('Speech paused at character ' + event.charIndex + ' of "' +
-    event.utterance.text + '", which is "' + char + '".');
-  }
- -

Por último, llamamos a blur() en la entrada de texto. Esto permite ocultar la entrada de texto en Firefox OS.

- -
  inputTxt.blur();
-}
- -

Actualizando los valores de tono y velocidad mostrados

- -

La última parte del código simplemente actualiza los valores pitch/rate mostrados en la IU, cada vez que el slider cambia de posición.

- -
pitch.onchange = function() {
-  pitchValue.textContent = pitch.value;
-}
-
-rate.onchange = function() {
-  rateValue.textContent = rate.value;
-}
diff --git a/files/es/web/api/web_storage_api/index.html b/files/es/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..26a858d254 --- /dev/null +++ b/files/es/web/api/web_storage_api/index.html @@ -0,0 +1,146 @@ +--- +title: API de almacenamiento web +slug: Web/API/API_de_almacenamiento_web +tags: + - API + - API de almacenamiento web + - Almacenamiento web + - Storage + - localStorage + - sessionStorage +translation_of: Web/API/Web_Storage_API +--- +

{{DefaultAPISidebar("Web Storage API")}}

+ +

La API de almacenamiento web proporciona los mecanismos mediante los cuales el navegador puede almacenar información de tipo clave/valor, de una forma mucho más intuitiva que utilizando cookies.

+ +

Almacenamiento web, conceptos y uso

+ +

Los dos mecanismos en el almacenamiento web son los siguientes:

+ +
    +
  • sessionStorage mantiene un área de almacenamiento separada para cada origen que está disponible mientras dure la sesión de la página (mientras el navegador esté abierto, incluyendo recargas de página y restablecimientos).
    • +
  • localStorage hace lo mismo, pero persiste incluso cuando el navegador se cierre y se reabra.
    • +
+ +

Estos mecanismos están disponibles mediante las propiedades Window.sessionStorage y  Window.localStorage (dicho con más precisión, en navegadores con soporte, el objeto Window implementa los objetos  WindowLocalStorage y WindowSessionStorage, en los cuales se basan las propiedades localStorage y sessionStorage). Al invocar uno de éstos, se creará una instancia del objeto Storage, a través del cual los datos pueden ser creados, recuperados y eliminados. sessionStorage y localStorage utilizan un objeto de almacenamiento diferente según su origen — funcionan y son controlados por separado.

+ +
+

Nota: Acceder al Almacenamiento web desde IFrames de terceros está prohibido si el usuario tiene deshabilitadas las cookies de terceros (Firefox implementa este comportamiento a partir de la versión 43).

+
+ +
+

Nota: El almacenamiento web no es lo mismo que mozStorage (interfaces Mozilla's XPCOM para SQLite) o la Session store API (una utilidad de almacenamiento XPCOM usada por extensiones).

+
+ +

Interfaces de almacenamiento web

+ +
+
{{domxref("Storage")}}
+
Permite crear, recuperar y eliminar datos de un dominio y tipo de almacenamiento (sesión o local) específicos.
+
{{domxref("Window")}}
+
La API de almacenamiento web extiende el objeto {{domxref("Window")}} con dos nuevas propiedades — {{domxref("Window.sessionStorage")}} y {{domxref("Window.localStorage")}} — que proveen acceso a la sesión actual del dominio y a objetos {{domxref("Storage")}} locales, respectivamente. También ofrece un manejador de evento {{domxref("Window.onstorage")}} que se dispara cuando un área de la memoria cambia (por ejemplo, cuando se almacena un nuevo elemento).
+
{{domxref("StorageEvent")}}
+
El evento storage se dispara en el objeto Window de un documento cuando un área de la memoria cambia.
+
+ +

Ejemplos

+ +

Para ilustrar algunos usos típicos del almacenamiento web, hemos creado un ejemplo simple, llamado Demo de almacenamiento web. La página de inicio proporciona controles que puedes utilizar para personalizar el color, la tipografía y la imagen decorativa. Cuando seleccionas una opción diferente, la página se actualiza instantáneamente; además, tus opciones se almacenan en localStorage, de forma que si abandonas la página y la vuelves a cargar, tus opciones son recordadas.

+ +

También creamos una página de salida del evento — si cargas esta página en otra pestaña y luego haces cambios a tus opciones en la página de inicio, verás que se muestra la información almacenada actualizada puesto que se dispara un evento {{event("StorageEvent")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Storage')}}{{Spec2('Web Storage')}} 
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Todos los navegadores tienen distintos niveles de capacidad tanto para localStorage como para sessionStorage. Aquí está una análisis detallado de todas las capacidades de almacenamiento de diferentes navegadores.

+ +
+

Nota: Desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de caché, la cual está sujeta a limpiezas ocasionales, a petición del sistema operativo, típicamente cuando el espacio es reducido.

+
+ + + +

La mayoría de los navegadores de hoy en día soportan una opción de privacidad llamada  'Modo incógnito', 'Navegación privada', o algo similar, que básicamente se asegura de que la sesión de navegación no deje rastros después de que el navegador se cierra. Esto es fundamentalmente incompatible con el almacenamiento web por obvias razones. Por ello, muchos navegadores están experimentando con diferentes escenarios para lidiar con esta incompatibilidad.

+ +

La mayoría de los navegadores han optado por una estrategia donde las API de almacenamiento siguen disponibles y aparentemente completamente funcionales, con la única gran diferencia de que todos los datos almacenados son eliminados después de cerrar el navegador. Para estos navegadores aún hay diferentes interpretaciones sobre qué debería hacerse con los datos almacenados existentes (de una sesión de navegación normal). ¿Deberían de estar disponibles para lectura cuando esté en modo privado? Entonces, hay algunos navegadores, sobre todo Safari, que han optado por una solución donde el almacenamiento está disponible, pero vacío, y tiene un cupo de 0 bytes asignado, por lo que se vuelve imposible usar esta memoria para escribir datos.

+ +

Los desarrolladores deberían de estar conscientes de estas diferentes implementaciones y tenerlas en cuenta a la hora de desarrollar aplicaciones web que depende de la API de almacenamiento web. Para más información, échale un vistazo a esta entrada de blog WHATWG que trata específicamente con este tema.

+ +

Ver también

+ + diff --git a/files/es/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/es/web/api/web_storage_api/using_the_web_storage_api/index.html new file mode 100644 index 0000000000..086af18610 --- /dev/null +++ b/files/es/web/api/web_storage_api/using_the_web_storage_api/index.html @@ -0,0 +1,272 @@ +--- +title: Usando la API de almacenamiento web +slug: Web/API/API_de_almacenamiento_web/Usando_la_API_de_almacenamiento_web +tags: + - API + - API de almacenamiento web + - Guía + - localStorage + - sessionStorage +translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API +--- +
{{DefaultAPISidebar("Web Storage API")}}
+ +
+

La API de almacenamiento web proporciona los mecanismos mediante los cuales el navegador puede almacenar información de tipo clave/valor, de una forma mucho más intuitiva que utilizando cookies.

+ +

Este artículo proporciona una guía general de cómo usar esta tecnología.

+
+ +

Conceptos básicos

+ +

Los objetos de almacenamiento son simples almacenes de clave/valor, similares a objetos, pero que permanecen intactos cuando la página se recarga. Las claves y los valores siempre son cadenas de texto (fíjate que las claves con enteros se convierten automáticamente a cadenas, tal y como lo hacen los objetos). Puedes acceder a estos valores como un objeto, o con los métodos {{domxref("Storage.getItem()")}} y {{domxref("Storage.setItem()")}}. Estas tres líneas modifican el valor de colorSetting de la misma manera:

+ +
localStorage.colorSetting = '#a4509b';
+localStorage['colorSetting'] = '#a4509b';
+localStorage.setItem('colorSetting', '#a4509b');
+ +
+

Nota: Se recomiendo usar la API de almacenamiento web (setItem, getItem, removeItem, key, length) para prevenir las dificultades asociadas al uso de simples objetos como almacenes de valores llave/valor.

+
+ +

Los dos mecanismos en el almacenamiento web son los siguientes:

+ +
    +
  • sessionStorage mantiene un área de almacenamiento separada para cada origen que está disponible mientras dure la sesión de la página (mientras el navegador esté abierto, incluyendo recargas de página y restablecimientos).
    • +
  • localStorage hace lo mismo, pero persiste incluso cuando el navegador se cierre y se reabra.
    • +
+ +

Estos mecanismos están disponibles mediante las propiedades Window.sessionStorage y  Window.localStorage (dicho con más precisión, en navegadores con soporte, el objeto Window implementa los objetos  WindowLocalStorage y WindowSessionStorage, en los cuales se basan las propiedades localStorage y sessionStorage). Al invocar uno de éstos, se creará una instancia del objeto Storage, a través del cual los datos pueden ser creados, recuperados y eliminados. sessionStorage y localStorage utilizan un objeto de almacenamiento diferente según su origen — funcionan y son controlados por separado.

+ +

Así que, por ejemplo, si en un inicio se llama a localStorage en un documento, esto devolverá un objeto {{domxref("Storage")}}; llamar a sessionStorage en un documento devolverá un objeto {{domxref("Storage")}} diferente. Ambos objetos se pueden manipular de la misma forma, pero separados.

+ +

Detectar la característica localStorage

+ +

Para poder usar localStorage, debemos de verificar que tiene soporte y que está disponible en la sesión del buscador actual.

+ +

Probar la disponibilidad

+ +
+

Nota: esta API está disponible en las versiones actuales de todos los navegadores principales. La prueba de disponibilidad es necesaria sólo si debes soportar navegadores muy antiguos, como Internet Explorer 6 o 7, o en las circunstancias limitadas descritas más abajo.

+
+ +

Los buscadores que soportan localStorage tienen una propiedad en el objeto window que se llama localStorage. Sin embargo, por varias razones, el sólo asegurarse de que la propiedad existe puede arrojar excepciones. El que localStorage exista no es garantía suficiente de que en verdad esté disponible, puesto que varios buscadores ofrecen configuraciones que lo inhabilitan. Así que un buscador puede soportar localStorage, pero puede no hacerlo disponible para los scripts en la página. Un ejemplo de esto es Safari, que en el modo de búsqueda privada ofrece un objeto localStorage vacío con un cupo de 0, por lo que es inutilizable. Sin embargo, es posible que aún así obtengamos un QuotaExceededError legítimo, lo que significa que ya usamos todo el espacio de almacenamiento disponible, aunque el almacenamiento esté, de hecho, disponible. Nuestra detección de la característica debe de tomar en cuenta estos escenarios.

+ +

Esta función detecta si localStorage tiene soporte y está disponible:

+ +
function storageAvailable(type) {
+    try {
+        var storage = window[type],
+            x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    }
+    catch(e) {
+        return e instanceof DOMException && (
+            // everything except Firefox
+            e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||
+            // test name field too, because code might not be present
+            // everything except Firefox
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+            // acknowledge QuotaExceededError only if there's something already stored
+            storage.length !== 0;
+    }
+}
+ +

Y aquí se muestra cómo usarla:

+ +
if (storageAvailable('localStorage')) {
+  // Yippee! We can use localStorage awesomeness
+}
+else {
+  // Too bad, no localStorage for us
+}
+ +

También puedes probar sessionStorage invocando storageAvailable('sessionStorage').

+ +

Aquí puedes ver una breve historia de la detección de la característica localStorage.

+ +

Ejemplo

+ +

Para ilustrar un uso típico de almacenamiento web, creamos un ejemplo simple que llamamos Demo de almacenamiento web. La página de inicio proporciona unos controles que se pueden usar para personalizar el color, la tipografía y la imagen decorativa:

+ +

Cuando seleccionas una opción diferente, la página se actualiza instantáneamente; además, tus opciones se almacenan en localStorage, de forma que si abandonas la página y la vuelves a cargar, tus opciones son recordadas.

+ +

También creamos una página de salida del evento — si cargas esta página en otra pestaña y luego haces cambios a tus opciones en la página de inicio, verás que se muestra la información almacenada actualizada puesto que se dispara un {{domxref("StorageEvent")}}.

+ +

+ +
+

Nota: Puedes ver las páginas de ejemplo usando los links de arriba y también puedes ver el código fuente.

+
+ +

Probar si la memoria tiene valores

+ +

En el inicio de main.js, probamos si el objeto ya tiene valores (es decir, si la página ya fue visitada):

+ +
if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+ +

El método {{domxref("Storage.getItem()")}} se usa para obtener un dato de la memoria; en este caso, estamos probando si el dato bgcolor existe; si no, corremos populateStorage() para añadir los valores personalizados actuales a la memoria. Si ya hay valores guardados, corremos setStyles() para actualizar el estilo de la página con los valores almacenados.

+ +

Nota: También puedes usar {{domxref("Storage.length")}} para probar si el objeto de almacenamiento está vació o no.

+ +

Obtener valores de la memoria

+ +

Como dijimos arriba, los valores se pueden recuperar de la memoria usando {{domxref("Storage.getItem()")}}. Este método usa la llave del dato como argumento y devuelve el valor. Por ejemplo:

+ +
function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +

Aquí, en las primeras tres líneas tomamos los valores del almacenamiento local. Después, fijamos los valores mostrados en los elementos del formulario a esos valores, de forma que se mantengan sincronizados cuando recargues la página. Finalmente, actualizamos los estilos y la imagen decorativa en la página para que tus opciones personalizadas vuelvan a aparecer al recargar.

+ +

Guardar valores en la memoria

+ +

{{domxref("Storage.setItem()")}} se usa tanto para crear nuevos datos como para actualizar valores existentes (si el dato ya existía). Este método recibe dos argumentos: la llave del dato que se va a crear/modificar y el valor que se va a guardar.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+ +

La función populateStorage() define tres elementos en el almacenamiento local — el color de fondo, la tipografía y la ruta de almacenamiento de la imagen. Luego corre la función setStyles() para actualizar el estilo de la página, etc.

+ +

También incluimos un manejador onchange para cada elemento del formulario, de manera que los datos y los estilos son actualizados cada vez que un valor del formulario cambia:

+ +
bgcolorForm.onchange = populateStorage;
+fontForm.onchange = populateStorage;
+imageForm.onchange = populateStorage;
+ +

Responder a cambios en la memoria con el evento StorageEvent

+ +

El evento {{domxref("StorageEvent")}} se dispara siempre que se hace un cambio al objeto {{domxref("Storage")}} (nota que este evento no se dispara para cambios en sessionStorage). Este evento no va a trabajar en la misma página en la que se están haciendo los cambios, sino que es una manera para que las otras páginas del dominio que usan la memoria sincronicen los cambios que se están haciendo. Las páginas en otros dominios no pueden acceder a los mismos objetos de almacenamiento.

+ +

En la página de eventos (ver events.js) el único JavaScript es el siguiente:

+ +
window.addEventListener('storage', function(e) {
+  document.querySelector('.my-key').textContent = e.key;
+  document.querySelector('.my-old').textContent = e.oldValue;
+  document.querySelector('.my-new').textContent = e.newValue;
+  document.querySelector('.my-url').textContent = e.url;
+  document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
+});
+ +

Aquí añadimos un detector de evento al objeto window que se dispara cuando el objeto {{domxref("Storage")}} asociado con el origen actual cambia. Como puedes ver arriba, el objeto asociado a este evento tiene varias propiedades que contienen información útil — la llave del dato que cambió, el valor anterior al cambio, el nuevo valor tras el cambio, la URL del documento que cambió la memoria y el objeto de almacenamiento mismo (que volvimos una cadena para que pudieras ver su contenido).

+ +

Borrar registros

+ +

El almacenamiento web también provee un par de métodos simples para remover datos. No los usamos en nuestro demo, pero se pueden añadir de manera muy simple a tu proyecto:

+ +
    +
  • {{domxref("Storage.removeItem()")}} recibe un solo argumento — la llave del dato que quieres eliminar — y lo remueve del objeto de almacenamiento de ese dominio.
    • +
  • {{domxref("Storage.clear()")}} no recibe argumentos; vacía todo el objeto de almacenamiento de ese dominio.
    • +
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Todos los navegadores tienen distintos niveles de capacidad tanto para localStorage como para sessionStorage. Aquí está una análisis detallado de todas las capacidades de almacenamiento de diferentes navegadores.

+ +
+

Nota: Desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de caché, la cual está sujeta a limpiezas ocasionales, a petición del sistema operativo, típicamente cuando el espacio es reducido.

+
+ +

Ver también

+ + diff --git a/files/es/web/api/web_workers_api/using_web_workers/index.html b/files/es/web/api/web_workers_api/using_web_workers/index.html new file mode 100644 index 0000000000..db4dbc07e3 --- /dev/null +++ b/files/es/web/api/web_workers_api/using_web_workers/index.html @@ -0,0 +1,633 @@ +--- +title: Usando Web Workers +slug: Web/Guide/Performance/Usando_web_workers +translation_of: Web/API/Web_Workers_API/Using_web_workers +--- +

Los Web Workers dedicados proveen un medio sencillo para que el contenido web ejecute scripts en hilos en segundo plano. Una vez creado, un worker puede enviar mensajes a la tarea creada mediante envio de mensajes al manejador de eventos especificado por el creador. Sin embargo, los workers trabajan dentro de un contexto global diferente de la ventana actual (usar el atajo  {{ domxref("window") }} en lugar de {{ domxref("window.self","self") }} con el fin de obtener el scope actual dentro de un {{ domxref("Worker") }} retornaría, de hecho, un error).

+ +

El hilo worker puede realizar tareas sin interferir con la interfaz de usuario. Ademas, pueden realizar I/O usando XMLHttpRequest (aunque el responseXML y los atributos channel son siempre null).

+ +

Para documentacion de referencia acerca de workers busca {{ domxref("Worker") }} ; este articulo complementa ese ofreciendo ejemplos y detalles adicionales. Para una lista de las funciones disponibles sobre workers, visita  Functions and interfaces available to workers.

+ +

Acerca de seguridad de hilos

+ +

La interfaz  {{ domxref("Worker") }} crea hilos a nivel de SO reales, y la concurrencia puede causar effectos interesantes en tu código si no eres cuidadoso. Sin embargo, en el caso de los web workers, el control cuidadoso de los puntos de comunicacion con otros hilos indica que es realmente muy dificil causar problemas de concurrencia. No existe acceso a componentes no-hilo seguros o al DOM y debes pasar la informacion entrante o saliente del hilo a traves de objetos serializados. Así que debes poner esfuerzo para causar problemas en tu código.

+ +

Creando un web worker

+ +

Crear un nuevo worker es simple.  Sólo tienes que llamar el constructor {{ domxref("Worker.Worker", "Worker()") }}, especificando la URI de un script a ejecutar en el hilo del worker (worker thread), y, si deseas poder recibir notificaciones del worker, establece la propiedad  {{domxref("Worker.onmessage")}} del worker a una función de manejo de eventos apropiada.

+ +
+
var myWorker = new Worker("my_task.js");
+
+myWorker.onmessage = function (oEvent) {
+  console.log("Called back by the worker!\n");
+};
+
+ +

Alternativamente, puedes usar addEventListener() :

+ +
+
var myWorker = new Worker("my_task.js");
+
+myWorker.addEventListener("message", function (oEvent) {
+  console.log("Called back by the worker!\n");
+}, false);
+
+myWorker.postMessage(""); // start the worker.
+
+ +

La Línea 1 en  este ejemplo crea un nuevo worker (worker thread). La Línea 3 configura un manejador de eventos (listener) para encargarse de los eventos message del worker. Este manejador de eventos se llamará cuando el worker llame a su propia función {{domxref("Worker.postMessage()")}}. Finalmente, la Linea 7 inicia el worker (worker thread).

+ +
Nota : La URI pasada como parámetro del constructor de Worker debe obedecer la política same-origin policy . Actualmente hay desacuerdo entre los desarolladores de navegadores sobre qué URIs son del mismo origen; Gecko 10.0 {{ geckoRelease("10.0") }} y posteriores sí permiten data URIs e Internet Explorer 10 no permite Blob URIs como un script válido para los workers.
+ +

Pasando datos

+ +

Los datos pasan entre la página principal y los workers son copiados, no compartidos. Los objetos se serializan a medida que se entregan al worker, y posteriormente, se deserializan en el otro extremo. La página y el worker no comparten la misma instancia, por lo que el resultado final es que un duplicado es creado en cada extremo. La mayoría de los navegadores implementan esta característica como structured cloning.

+ +

Antes de continuar, vamos a crear con fines didácticos una función llamada emulateMessage() que simulará el comportamiento de un valor el cual es clonado y no compartido durante el paso desde un worker a la página principal o viceversa:

+ +
function emulateMessage (vVal) {
+    return eval("(" + JSON.stringify(vVal) + ")");
+}
+
+// Tests
+
+// test #1
+var example1 = new Number(3);
+alert(typeof example1); // object
+alert(typeof emulateMessage(example1)); // number
+
+// test #2
+var example2 = true;
+alert(typeof example2); // boolean
+alert(typeof emulateMessage(example2)); // boolean
+
+// test #3
+var example3 = new String("Hello World");
+alert(typeof example3); // object
+alert(typeof emulateMessage(example3)); // string
+
+// test #4
+var example4 = {
+    "name": "John Smith",
+    "age": 43
+};
+alert(typeof example4); // object
+alert(typeof emulateMessage(example4)); // object
+
+// test #5
+function Animal (sType, nAge) {
+    this.type = sType;
+    this.age = nAge;
+}
+var example5 = new Animal("Cat", 3);
+alert(example5.constructor); // Animal
+alert(emulateMessage(example5).constructor); // Object
+ +

A Un valor que es clonado y no compartido se denomina mensaje. De vuelta con los workers, los mensajes pueden ser enviados hacia y desde el hilo principal empleando postMessage(). Los eventos de mensaje {{domxref("MessageEvent.data", "data")}} atributo contienen datos devueltos desde el worker.

+ +

example.html: (la página principal):

+ +
var myWorker = new Worker("my_task.js");
+
+myWorker.onmessage = function (oEvent) {
+  console.log("Worker said : " + oEvent.data);
+};
+
+myWorker.postMessage("ali");
+ +

my_task.js (el worker):

+ +
postMessage("I\'m working before postMessage(\'ali\').");
+
+onmessage = function (oEvent) {
+  postMessage("Hi " + oEvent.data);
+};
+ +
Note: Como siempre, los hilos en segundo plano -incluyendo workers- no pueden manipular el DOM. Si acciones tomadas por el hilo en segundo planos resultarían en cambios en el DOM, deberian enviar mensajes a sus creadores para llevarlos a cabo.
+ +

The structured cloning algorithm can accept JSON and a few things that JSON can't like circular references.

+ +

Ejemplos pasando datos

+ +

Example #1: Crear un "eval() asíncrono" genérico

+ +

El siguiente ejemplo muestra como usar un worker para ejecutar asíncronamente cualquier tipo de código en Javascript a traves de eval dentro del worker:

+ +
// Syntax: asyncEval(code[, listener])
+
+var asyncEval = (function () {
+
+  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
+
+  oParser.onmessage = function (oEvent) {
+    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
+    delete aListeners[oEvent.data.id];
+  };
+
+
+  return function (sCode, fListener) {
+    aListeners.push(fListener || null);
+    oParser.postMessage({
+      "id": aListeners.length - 1,
+      "code": sCode
+    });
+  };
+
+})();
+ +

Ejemplo de uso:

+ +
// asynchronous alert message...
+asyncEval("3 + 2", function (sMessage) {
+    alert("3 + 2 = " + sMessage);
+});
+
+// asynchronous print message...
+asyncEval("\"Hello World!!!\"", function (sHTML) {
+    document.body.appendChild(document.createTextNode(sHTML));
+});
+
+// asynchronous void...
+asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");
+ +

Ejemplo #2: Paso avanzado de JSON Data y creación de un sistema de conmutación

+ +

Si tiene que pasar datos complejos y tienes que llamar a muchas funciones diferentes tanto en la página principal como en el Worker, puede crear un sistema como el siguiente.

+ +

example.html (the main page):

+ +
<!doctype html>
+<html>
+<head>
+<meta charset="UTF-8"  />
+<title>MDN Example - Queryable worker</title>
+<script type="text/javascript">
+  /*
+    QueryableWorker instances methods:
+     * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
+     * postMessage(string or JSON Data): see Worker.prototype.postMessage()
+     * terminate(): terminates the Worker
+     * addListener(name, function): adds a listener
+     * removeListener(name): removes a listener
+    QueryableWorker instances properties:
+     * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
+  */
+  function QueryableWorker (sURL, fDefListener, fOnError) {
+    var oInstance = this, oWorker = new Worker(sURL), oListeners = {};
+    this.defaultListener = fDefListener || function () {};
+    oWorker.onmessage = function (oEvent) {
+      if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("vo42t30") && oEvent.data.hasOwnProperty("rnb93qh")) {
+        oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh);
+      } else {
+        this.defaultListener.call(oInstance, oEvent.data);
+      }
+    };
+    if (fOnError) { oWorker.onerror = fOnError; }
+    this.sendQuery = function (/* queryable function name, argument to pass 1, argument to pass 2, etc. etc */) {
+      if (arguments.length < 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; }
+      oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) });
+    };
+    this.postMessage = function (vMsg) {
+      //I just think there is no need to use call() method
+      //how about just oWorker.postMessage(vMsg);
+      //the same situation with terminate
+      //well,just a little faster,no search up the prototye chain
+      Worker.prototype.postMessage.call(oWorker, vMsg);
+    };
+    this.terminate = function () {
+      Worker.prototype.terminate.call(oWorker);
+    };
+    this.addListener = function (sName, fListener) {
+      oListeners[sName] = fListener;
+    };
+    this.removeListener = function (sName) {
+      delete oListeners[sName];
+    };
+  };
+
+  // your custom "queryable" worker
+  var oMyTask = new QueryableWorker("my_task.js" /* , yourDefaultMessageListenerHere [optional], yourErrorListenerHere [optional] */);
+
+  // your custom "listeners"
+
+  oMyTask.addListener("printSomething", function (nResult) {
+    document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!"));
+  });
+
+  oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) {
+    alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)");
+  });
+</script>
+</head>
+<body>
+  <ul>
+    <li><a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li>
+    <li><a href="javascript:oMyTask.sendQuery('waitSomething');">Wait 3 seconds</a></li>
+    <li><a href="javascript:oMyTask.terminate();">terminate() the Worker</a></li>
+  </ul>
+</body>
+</html>
+ +

my_task.js (el worker):

+ +
// your custom PRIVATE functions
+
+function myPrivateFunc1 () {
+  // do something
+}
+
+function myPrivateFunc2 () {
+  // do something
+}
+
+// etc. etc.
+
+// your custom PUBLIC functions (i.e. queryable from the main page)
+
+var queryableFunctions = {
+  // example #1: get the difference between two numbers:
+  getDifference: function (nMinuend, nSubtrahend) {
+      reply("printSomething", nMinuend - nSubtrahend);
+  },
+  // example #2: wait three seconds
+  waitSomething: function () {
+      setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000);
+  }
+};
+
+// system functions
+
+function defaultQuery (vMsg) {
+  // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly
+  // do something
+}
+
+function reply (/* listener name, argument to pass 1, argument to pass 2, etc. etc */) {
+  if (arguments.length < 1) { throw new TypeError("reply - not enough arguments"); return; }
+  postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) });
+}
+
+onmessage = function (oEvent) {
+  if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("bk4e1h0") && oEvent.data.hasOwnProperty("ktp3fm1")) {
+    queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1);
+  } else {
+    defaultQuery(oEvent.data);
+  }
+};
+ +

Es un método posible para conmutar el contenido de cada mensaje de cada mainpage-worker y viceversa.

+ +

Pasando datos mediante transferencia de propiedades (objetos transferibles)

+ +

Google Chrome 17 y Firefox 18 implementan un método adicional para enviar ciertos tipos de objetos desde o hacia el worker con un mejor rendimiento. Estos objetos se denominan objetos transferibles (transferable objects), es decir, objetos que implementan la interfaz {{domxref("Transferable")}}. Los objetos transferibles se transfieren de un contexto a otro con una operación "zero-copy". Esto supone una gran mejora de rendimiento al enviar grandes cantidades de datos. Piensa en ello como un paso por referencia si vienes del mundo de C/C++.  Sin embargo, a diferecia del paso por referencia, la "versión" original no queda disponible una vez transferida. Su contenido es transferido al nuevo contexto. Por ejemplo, cuando se transfiere un {{domxref("ArrayBuffer")}} de tu aplicacion al Worker, el contenido del {{domxref("ArrayBuffer")}} original se vacía y no se puede utilizar posteriormente. Su contenido es (literalmente) transferido al contexto del Worker.

+ +
// Create a 32MB "file" and fill it.
+var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
+for (var i = 0; i < uInt8Array.length; ++i) {
+  uInt8Array[i] = i;
+}
+
+worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
+
+ +

Para más información sobre los objetos transferibles, visita HTML5Rocks .

+ +

Spawning subworkers

+ +

Workers may spawn more workers if they wish.  So-called subworkers must be hosted within the same origin as the parent page.  Also, the URIs for subworkers are resolved relative to the parent worker's location rather than that of the owning page.  This makes it easier for workers to keep track of where their dependencies are.

+ +

Subworkers are currently not supported in Chrome. See crbug.com/31666 .

+ +

Embedded workers

+ +

There is not an "official" way to embed the code of a worker within a web page as for the {{ HTMLElement("script") }} elements. But a {{ HTMLElement("script") }} element which does not have a src attribute and has a type attribute that does not identify an executable mime-type will be considered a data block element, that JavaScript could use.  "Data blocks" is a more general feature of HTML5 that can carry almost any textual data. So, a worker could be embedded in this way:

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>MDN Example - Embedded worker</title>
+<script type="text/js-worker">
+  // This script WON'T be parsed by JS engines because its mime-type is text/js-worker.
+  var myVar = "Hello World!";
+  // Rest of your worker code goes here.
+</script>
+<script type="text/javascript">
+  // This script WILL be parsed by JS engines because its mime-type is text/javascript.
+  function pageLog (sMsg) {
+    // Use a fragment: browser will only render/reflow once.
+    var oFragm = document.createDocumentFragment();
+    oFragm.appendChild(document.createTextNode(sMsg));
+    oFragm.appendChild(document.createElement("br"));
+    document.querySelector("#logDisplay").appendChild(oFragm);
+  }
+</script>
+<script type="text/js-worker">
+  // This script WON'T be parsed by JS engines because its mime-type is text/js-worker.
+  onmessage = function (oEvent) {
+    postMessage(myVar);
+  };
+  // Rest of your worker code goes here.
+</script>
+<script type="text/javascript">
+  // This script WILL be parsed by JS engines because its mime-type is text/javascript.
+
+  // In the past...:
+  // blob builder existed
+  // ...but now we use Blob...:
+  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
+
+  // Creating a new document.worker property containing all our "text/js-worker" scripts.
+  document.worker = new Worker(window.URL.createObjectURL(blob));
+
+  document.worker.onmessage = function (oEvent) {
+    pageLog("Received: " + oEvent.data);
+  };
+
+  // Start the worker.
+  window.onload = function() { document.worker.postMessage(""); };
+</script>
+</head>
+<body><div id="logDisplay"></div></body>
+</html>
+ +

The embedded worker is now nested into a new custom document.worker property.

+ +

Tiempos fuera e intervalos

+ +

Los trabajadores pueden usar tiempos fuera e intervalos de la misma forma que el "hilo principal".  Esto puede ser útil, por ejemplo, si quieres tener a tu hilo trabajador corriendo codigo periodicamente en lugar de sin parar.

+ +

Ver setTimeout() , clearTimeout() , setInterval() , y clearInterval() para más detalles. Ver también: JavaScript Timers.

+ +

Terminating a worker

+ +

If you need to immediately terminate a running worker, you can do so by calling the worker's terminate() method:

+ +
myWorker.terminate();
+ +

The worker thread is killed immediately without an opportunity to complete its operations or clean up after itself.

+ +

Workers may close themselves by calling their own {{ ifmethod("nsIWorkerScope", "close") }} method:

+ +
self.close();
+ +

Manejo de errores

+ +

When a runtime error occurs in worker, its onerror event handler is called.  It receives an event named error which implements the ErrorEvent interface.  The event doesn't bubble and is cancelable; to prevent the default action from taking place, the worker can call the error event's preventDefault() method.

+ +

The error event has the following three fields that are of interest:

+ +
+
message
+
A human-readable error message.
+
filename
+
The name of the script file in which the error occurred.
+
lineno
+
The line number of the script file on which the error occurred.
+
+ +

Accediendo al objeto navigator

+ +

Los workers pueden acceder al objeto navigator, el cuál está disponible dentro de su scope actual. Este contiene los siguientes strings que pueden ser usados para identificar el navegador, al igual que puede realizarse usando scripts normales:

+ +
    +
  • appName
    • +
  • appVersion
    • +
  • platform
    • +
  • userAgent
    • +
+ +

Importing scripts and libraries

+ +

Worker threads have access to a global function, importScripts() , which lets them import scripts or libraries into their scope.  It accepts as parameters zero or more URIs to resources to import; all of the following examples are valid:

+ +
importScripts();                        /* imports nothing */
+importScripts('foo.js');                /* imports just "foo.js" */
+importScripts('foo.js', 'bar.js');      /* imports two scripts */
+
+ +

The browser loads each listed script and executes it. Any global objects from each script may then be used by the worker. If the script can't be loaded, NETWORK_ERROR is thrown, and subsequent code will not be executed. Previously executed code (including code deferred using {{ domxref("window.setTimeout()") }}) will still be functional though. Function declarations after the importScripts() method are also kept, since these are always evaluated before the rest of the code.

+ +
Note: Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into importScripts() .  This is done synchronously; importScripts() does not return until all the scripts have been loaded and executed.
+ +

Examples

+ +

This section provides several examples of how to use DOM workers.

+ +

Performing computations in the background

+ +

One way workers are useful is to allow your code to perform processor-intensive calculations without blocking the user interface thread.  In this example, a worker is used to calculate Fibonacci numbers.

+ +

The JavaScript code

+ +

The following JavaScript code is stored in the "fibonacci.js" file referenced by the HTML in the next section.

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

The worker sets the property onmessage  to a function which will receive messages sent when the worker object's  postMessage() is called.  (Note that this differs from defining a global variable of that name, or defining a function with that name.   var onmessage and function onmessage will define global properties with those names, but they will not register the function to receive messages sent by the  web page that created the worker.)  This starts the recursion, spawning new copies of itself to handle each iteration of the calculation.

+ +

The HTML code

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8"  />
+    <title>Test threads fibonacci</title>
+  </head>
+  <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>
+
+ +

The web page creates a div element with the ID  result , which gets used to display the result, then spawns the worker.  After spawning the worker, the onmessage handler is configured to display the results by setting the contents of the div element, and the onerror handler is set to dump the error message.

+ +

Finally, a message is sent to the worker to start it.

+ +

Try this example .

+ +

Performing web I/O in the background

+ +

You can find an example of this in the article Using workers in extensions .

+ +

Dividing tasks among multiple workers

+ +

As multi-core computers become increasingly common, it's often useful to divide computationally complex tasks among multiple workers, which may then perform those tasks on multiple-processor cores.

+ +

example coming soon

+ +

Creating workers from within workers

+ +

The Fibonacci example shown previously demonstrates that workers can in fact spawn additional workers.  This makes it easy to create recursive routines.

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Dedicated workers{{CompatChrome(3)}}{{CompatGeckoDesktop(1.9.1)}}{{CompatIE(10)}}{{CompatOpera(10.60)}}{{CompatSafari(4)}}
Shared workers{{CompatChrome(3)}}{{CompatNo}}{{CompatNo}}{{CompatOpera(10.60)}}{{CompatSafari(5)}}
Passing data using structured cloning . {{CompatChrome(13)}}{{CompatGeckoDesktop(8)}}{{CompatIE(10)}}{{CompatOpera(11.50)}}{{CompatSafari(5.1)}}
Passing data using  transferable objects17 {{ property_prefix("webkit") }}
+ {{CompatChrome(21)}}		{{CompatGeckoDesktop(18)}}{{CompatNo}}{{CompatOpera(15)}}{{CompatSafari(6)}}
Global {{ domxref("window.URL", "URL") }}10 as webkitURL
+ {{CompatChrome(23)}}		{{CompatGeckoDesktop(21)}}{{CompatIE(11)}}{{CompatOpera(15)}}6 as webkitURL
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Dedicated workers---0.163.5 (1.9.1)---115
Shared workers---{{ CompatNo() }}------------
Passing data using structured cloning . ---0.168---------
Passing data using  transferable objects---18---------
+
+ +

See also

+ + diff --git a/files/es/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html b/files/es/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html new file mode 100644 index 0000000000..91e6bf3d37 --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html @@ -0,0 +1,133 @@ +--- +title: Creación de objetos 3D utilizando WebGL +slug: Web/API/WebGL_API/Tutorial/Objetos_3D_utilizando_WebGL +tags: + - Cubo 3D + - Objetos 3D + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

+ +

Vamos a llevar nuestro cuadrado hacia la tercera dimensión agregando cinco caras más para crear el cubo. Para hacer esto de manera eficiente, vamos a cambiar el dibujado por medio de vertices utilizando el método {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} por el uso de un arreglo de vértices como tabla, esto por medio del llamado hacia   {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.

+ +

Considerar: cada cara cuatro vértices para su definición, pero cada vértice es compartido por 3 caras. Realizando una lista con los 24 vértices es como nosotros haremos un menor intercambio de datos, después haremos referencia hacia cada vértic por medio se su índice en la lista en lugar de pasar el juego entero de coordenadas. Si te preguntas por qué necesitamos 24 vértices, y no solo 8, es porque cada esquina pertenece a tres caras de diferente color, y un solo vértice necesita tener un solo color específico, por lo tanto crearemos 3 copias de cada vértice en tres colores diferentes, uno por cada cara.

+ +

Definir la posición de los vértices del cubo

+ +

Primero, construiremos el buffer para la posición de los vértices actualizando el código en initBuffers(). Esto es muy parecido a lo como si fuera para el cuadraro, pero más lardo debido a que ahora son 24 vértices (4 por lado):

+ +
var vertices = [
+  // Cara delantera
+  -1.0, -1.0,  1.0,
+   1.0, -1.0,  1.0,
+   1.0,  1.0,  1.0,
+  -1.0,  1.0,  1.0,
+
+  // Cara trasera
+  -1.0, -1.0, -1.0,
+  -1.0,  1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0, -1.0, -1.0,
+
+  // Top face
+  -1.0,  1.0, -1.0,
+  -1.0,  1.0,  1.0,
+   1.0,  1.0,  1.0,
+   1.0,  1.0, -1.0,
+
+  // Bottom face
+  -1.0, -1.0, -1.0,
+   1.0, -1.0, -1.0,
+   1.0, -1.0,  1.0,
+  -1.0, -1.0,  1.0,
+
+  // Right face
+   1.0, -1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0,  1.0,  1.0,
+   1.0, -1.0,  1.0,
+
+  // Left face
+  -1.0, -1.0, -1.0,
+  -1.0, -1.0,  1.0,
+  -1.0,  1.0,  1.0,
+  -1.0,  1.0, -1.0
+];
+
+ +

Definir los colores de los vértices

+ +

Necesitamos construir un arreglo de colores por cada uno de los 24 vertices. Este código comienza por definir un color para cada cara, después utiliza un ciclo para ensamblar el arreglo de colores por cada uno de los vértices.

+ +
var colors = [
+  [1.0,  1.0,  1.0,  1.0],    // Cara delantera: blanco
+  [1.0,  0.0,  0.0,  1.0],    // Cara trasera: rojo
+  [0.0,  1.0,  0.0,  1.0],    // Cara superior: verde
+  [0.0,  0.0,  1.0,  1.0],    // Cara inferior: azul
+  [1.0,  1.0,  0.0,  1.0],    // Cara derecha: amarillo
+  [1.0,  0.0,  1.0,  1.0]     // Cara izquierda: morado
+];
+
+var generatedColors = [];
+
+for (j=0; j<6; j++) {
+  var c = colors[j];
+
+  for (var i=0; i<4; i++) {
+    generatedColors = generatedColors.concat(c);
+  }
+}
+
+var cubeVerticesColorBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(generatedColors), gl.STATIC_DRAW);
+
+ +

Definir el elemento arreglo

+ +

Una ves que el vértice es generado, nosotros necesitamos contruir el elemento arreglo.

+ +
var cubeVerticesIndexBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+
+// Este arrelgo define cada cara como 2 triángulos utilizando
+// los índices dentro de cada arreglo de vértices
+// para especificar cada posición en los tríangulos.
+
+var cubeVertexIndices = [
+  0,  1,  2,      0,  2,  3,    // enfrente
+  4,  5,  6,      4,  6,  7,    // atrás
+  8,  9,  10,     8,  10, 11,   // arriba
+  12, 13, 14,     12, 14, 15,   // fondo
+  16, 17, 18,     16, 18, 19,   // derecha
+  20, 21, 22,     20, 22, 23    // izquierda
+];
+
+// Ahora enviamos el elemento arreglo a  GL
+
+gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+    new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
+
+ +

El arreglo cubeVertexIndices define cada cara como un par de triángulos, especificando cada vértice del triángulo como un índice dentro del arreglo de vértices en el cubo. Así el cubo es descrito como una colección de 12 triángulos. 

+ +

Dibujando el cubo

+ +

Para continuar necesitaremos agregar el código a nuestra función drawScene() esto para poder dibujar utilizando el buffer índice del cubo, agregaremos un nuevo llamado a  {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}}  y {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}como se muestra a continuación:

+ +
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+setMatrixUniforms();
+gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+
+ +

Desde que cada cara de nuestro cubo está compuesto de dos triángulos, tenemos 6 vértices en el cubo, se podría pensar que algunos de ellos son duplicados. Sin embargo, desde que nuestro arreglo índice se encuentra compuesto de enteros simples, esto no es una cantidad excesiva de intercambio de datos para pasar por cada cuadro de la animación.

+ +

En este punto ahora tenemos un cubo animado rebotando y rotando, cuenta con seis caras coloreadas vívidamente.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }}

+ +

Ver el Código completo | Abrir esta demostración en una página nueva

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

diff --git a/files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html b/files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html deleted file mode 100644 index 91e6bf3d37..0000000000 --- a/files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Creación de objetos 3D utilizando WebGL -slug: Web/API/WebGL_API/Tutorial/Objetos_3D_utilizando_WebGL -tags: - - Cubo 3D - - Objetos 3D - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL ---- -

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

- -

Vamos a llevar nuestro cuadrado hacia la tercera dimensión agregando cinco caras más para crear el cubo. Para hacer esto de manera eficiente, vamos a cambiar el dibujado por medio de vertices utilizando el método {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} por el uso de un arreglo de vértices como tabla, esto por medio del llamado hacia   {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.

- -

Considerar: cada cara cuatro vértices para su definición, pero cada vértice es compartido por 3 caras. Realizando una lista con los 24 vértices es como nosotros haremos un menor intercambio de datos, después haremos referencia hacia cada vértic por medio se su índice en la lista en lugar de pasar el juego entero de coordenadas. Si te preguntas por qué necesitamos 24 vértices, y no solo 8, es porque cada esquina pertenece a tres caras de diferente color, y un solo vértice necesita tener un solo color específico, por lo tanto crearemos 3 copias de cada vértice en tres colores diferentes, uno por cada cara.

- -

Definir la posición de los vértices del cubo

- -

Primero, construiremos el buffer para la posición de los vértices actualizando el código en initBuffers(). Esto es muy parecido a lo como si fuera para el cuadraro, pero más lardo debido a que ahora son 24 vértices (4 por lado):

- -
var vertices = [
-  // Cara delantera
-  -1.0, -1.0,  1.0,
-   1.0, -1.0,  1.0,
-   1.0,  1.0,  1.0,
-  -1.0,  1.0,  1.0,
-
-  // Cara trasera
-  -1.0, -1.0, -1.0,
-  -1.0,  1.0, -1.0,
-   1.0,  1.0, -1.0,
-   1.0, -1.0, -1.0,
-
-  // Top face
-  -1.0,  1.0, -1.0,
-  -1.0,  1.0,  1.0,
-   1.0,  1.0,  1.0,
-   1.0,  1.0, -1.0,
-
-  // Bottom face
-  -1.0, -1.0, -1.0,
-   1.0, -1.0, -1.0,
-   1.0, -1.0,  1.0,
-  -1.0, -1.0,  1.0,
-
-  // Right face
-   1.0, -1.0, -1.0,
-   1.0,  1.0, -1.0,
-   1.0,  1.0,  1.0,
-   1.0, -1.0,  1.0,
-
-  // Left face
-  -1.0, -1.0, -1.0,
-  -1.0, -1.0,  1.0,
-  -1.0,  1.0,  1.0,
-  -1.0,  1.0, -1.0
-];
-
- -

Definir los colores de los vértices

- -

Necesitamos construir un arreglo de colores por cada uno de los 24 vertices. Este código comienza por definir un color para cada cara, después utiliza un ciclo para ensamblar el arreglo de colores por cada uno de los vértices.

- -
var colors = [
-  [1.0,  1.0,  1.0,  1.0],    // Cara delantera: blanco
-  [1.0,  0.0,  0.0,  1.0],    // Cara trasera: rojo
-  [0.0,  1.0,  0.0,  1.0],    // Cara superior: verde
-  [0.0,  0.0,  1.0,  1.0],    // Cara inferior: azul
-  [1.0,  1.0,  0.0,  1.0],    // Cara derecha: amarillo
-  [1.0,  0.0,  1.0,  1.0]     // Cara izquierda: morado
-];
-
-var generatedColors = [];
-
-for (j=0; j<6; j++) {
-  var c = colors[j];
-
-  for (var i=0; i<4; i++) {
-    generatedColors = generatedColors.concat(c);
-  }
-}
-
-var cubeVerticesColorBuffer = gl.createBuffer();
-gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
-gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(generatedColors), gl.STATIC_DRAW);
-
- -

Definir el elemento arreglo

- -

Una ves que el vértice es generado, nosotros necesitamos contruir el elemento arreglo.

- -
var cubeVerticesIndexBuffer = gl.createBuffer();
-gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
-
-// Este arrelgo define cada cara como 2 triángulos utilizando
-// los índices dentro de cada arreglo de vértices
-// para especificar cada posición en los tríangulos.
-
-var cubeVertexIndices = [
-  0,  1,  2,      0,  2,  3,    // enfrente
-  4,  5,  6,      4,  6,  7,    // atrás
-  8,  9,  10,     8,  10, 11,   // arriba
-  12, 13, 14,     12, 14, 15,   // fondo
-  16, 17, 18,     16, 18, 19,   // derecha
-  20, 21, 22,     20, 22, 23    // izquierda
-];
-
-// Ahora enviamos el elemento arreglo a  GL
-
-gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
-    new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
-
- -

El arreglo cubeVertexIndices define cada cara como un par de triángulos, especificando cada vértice del triángulo como un índice dentro del arreglo de vértices en el cubo. Así el cubo es descrito como una colección de 12 triángulos. 

- -

Dibujando el cubo

- -

Para continuar necesitaremos agregar el código a nuestra función drawScene() esto para poder dibujar utilizando el buffer índice del cubo, agregaremos un nuevo llamado a  {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}}  y {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}como se muestra a continuación:

- -
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
-setMatrixUniforms();
-gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
-
- -

Desde que cada cara de nuestro cubo está compuesto de dos triángulos, tenemos 6 vértices en el cubo, se podría pensar que algunos de ellos son duplicados. Sin embargo, desde que nuestro arreglo índice se encuentra compuesto de enteros simples, esto no es una cantidad excesiva de intercambio de datos para pasar por cada cuadro de la animación.

- -

En este punto ahora tenemos un cubo animado rebotando y rotando, cuenta con seis caras coloreadas vívidamente.

- -

{{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }}

- -

Ver el Código completo | Abrir esta demostración en una página nueva

- -

{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

diff --git a/files/es/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/es/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html new file mode 100644 index 0000000000..9d2be2d61b --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html @@ -0,0 +1,209 @@ +--- +title: Utilizando texturas en WebGL +slug: Web/API/WebGL_API/Tutorial/Wtilizando_texturas_en_WebGL +tags: + - Texturas + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

+ +

Ahora que nuestro programa de prueba tiene un cubo, asignemos una textura en lugar de tener sus caras de un color solido.

+ +

Cargando texturas

+ +

La primera cosa que debemos hacer es añadir el codigo para cargar nuestra textura. en nuestro caso, estaremos usando una unica textura, asignada en las seis caras de nuestro cubo rotador, pero la misma tecnica puede ser utilizada para cualquier cantidad de texturas.

+ +
Note: Es importante señalar que la carga de texturas sigue reglas de dominio-cruzado; Es decir, sólo puede cargar texturas de sitios para los que su contenido tiene aprobación de CORS. Vea las texturas entre dominios a continuación para más detalles.
+ +

El codigo que carga la textura se ve como esto:

+ +
function initTextures() {
+  cubeTexture = gl.createTexture();
+  cubeImage = new Image();
+  cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
+  cubeImage.src = 'cubetexture.png';
+}
+
+function handleTextureLoaded(image, texture) {
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+  gl.generateMipmap(gl.TEXTURE_2D);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+}
+
+ +

La rutina initTextures() comienza por crear el GL texture cubeTexture llamando la rutina GL {{domxref("WebGLRenderingContext.createTexture()", "createTexture()")}}. Para cargar la textura desde un archivo de imagen, este luego crea un Objeto Imagen y carga en él el archivo de imagen que deseamos utilizar como nuestra textura. La rutina handleTextureLoaded() corre cuando la textura ha terminado de cargar.

+ +

Para realmente crear la textura, especificamos que la nueva textura es la textura actual en la que queremos operar vinculándola a gl.TEXTURE_2D. Despues de esto, la imagen cargada es pasada a  {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}} para escribir la informacion de la imagen en la textura.

+ +
Nota: El alto y hancho de las texturas deben, en la mayoría de las circunstancias, ser una potencia de dos píxeles (es decir, 1, 2, 4, 8, 16, etc.) en cada dimensión. Para la excepción, vea la sección: "Texturas no potencia de dos", a continuación.
+ +

Las siguientes dos líneas setean el filtrado para la textura; Esto controla cómo se filtra la imagen mientras se escala. En este caso estamos usando linear filtering cuando escala la imagen, y mipmap cuando se hace mas pequeña. Entonces el mipmap es generado llamando {{domxref("WebGLRenderingContext.generateMipMap()", "generateMipMap()")}}, Y terminamos diciéndole a WebGL que hemos terminado de manipular la textura vinculando null a gl.TEXTURE_2D.

+ +

Texturas no potencia-de-dos

+ +

Generalmente hablando, Utilizar texturas cuyos lados son una potencia de dos es ideal. Están almacenadas eficientemente en la memoria de video y no están restringidas en cómo podrían ser utilizadas. Las texturas creadas por el artista deben ser escaladas hacia arriba o hacia abajo a una potencia cercana a dos y, realmente, debería haber sido creada en potencia-de-dos para empezar. Cada lado debe ser: 1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024 ó 2048 píxeles. Muchos dispositivos, pero no todos, pueden soportar 4096 píxeles; Algunos pueden soportar 8192 e incluso más.

+ +

Ocasionalmente, es difícil utilizar texturas en potencia-de-dos dada una circunstancia especifica. Si la fuente es alguna tercera parte, A menudo los mejores resultados vienen de modificar las imágenes usando canvas HTML5 en tamaños de potencia-de-dos antes de que se pasen a WebGL; Las coordenadas UV también pueden requerir ajuste si el estiramiento es notorio.

+ +

Pero, Si tiene que tener una textura no-potencia-de-dos (NPOT = no-power-of-two), WebGL incluye un limitado soporte nativo. Las texturas NPOT son en su mayoría útiles si las dimensiones de la textura debe ser la misma resolución que otra cosa, como la resolución de tu monitor, o si no vale la pena molestarse por las sugerencias anteriores. Resumiendo: estas texturas no se pueden usar con mipmapping y no deben repetirse (tile o wrap).

+ +

Un ejemplo de una textura es tilear una imagen de unos ladrillos para cubrir una pared de ladrillos.

+ +

Mipmapping y "UV tiling" pueden ser desactivados utilizando {{domxref("WebGLRenderingContext.texParameter()", "texParameteri()")}} y cuando creas tu textura utilizando {{domxref("WebGLRenderingContext.bindTexture()", "bindTexture()")}}. Ésto permitirá las texturas NPOT a expensas de mipmapping, UV wrapping, UV tiling, y tu control sobre cómo el dispositivo procederá a manejar tu textura.

+ +
// gl.NEAREST is also allowed, instead of gl.LINEAR, as neither mipmap.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+// Prevents s-coordinate wrapping (repeating).
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+// Prevents t-coordinate wrapping (repeating).
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+ +

Una vez más, con estos parámetros, los dispositivos compatibles con WebGL aceptarán automáticamente cualquier resolución para esa textura (hasta sus dimensiones máximas). Sin realizar la configuración anterior, WebGL requiere que todas las muestras de texturas NPOT fallen al devolver el color "negro sólido": rgba (0,0,0,1).

+ +

Mapeando la textura en las caras

+ +

A este punto, la textura esta cargada y lista para usar. pero antes de utilizarla, Necesitamos asignar el mapeo de las coordenadas de textura a los vértices de las caras de nuestro cubo. Esto reemplaza todo el código previamente existente para configurar colores para cada una de las caras del cubo en initBuffers().

+ +
cubeVerticesTextureCoordBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+
+var textureCoordinates = [
+  // Front
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Back
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Top
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Bottom
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Right
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Left
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0
+];
+
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
+              gl.STATIC_DRAW);
+
+ +

Primeramente, este codigo crea un GL buffer en el cual almacenaremos las coordenadas de la textura para cada cara, luego enlazamos ese buffer como el array en el cual escribiremos.

+ +

El array textureCoordinates define las coordenadas de textura correspondientes a cada vértice de cada cara. Tenga en cuenta que las coordenadas de textura van de 0,0 a 1,0; Las dimensiones de las texturas se normalizan a un rango de 0,0 a 1,0 independientemente de su tamaño real, con el propósito de mapeo de textura.

+ +

Una vez que hemos seteado la matriz de mapeo de textura, pasamos la matriz al búfer, de modo que GL tiene esos datos listos para su uso.

+ +

Actualizando los shaders

+ +

El shader -- y el código que inicializa los shaders -- también necesita ser actualizado para utilizar la textura en vez de un color solido.

+ +

Primero, echemos un vistazo a un cambio muy sencillo que se necesita en initShaders():

+ +
textureCoordAttribute = gl.getAttribLocation(shaderProgram, 'aTextureCoord');
+gl.enableVertexAttribArray(textureCoordAttribute);
+gl.vertexAttribPointer(texCoordAttribute, 2, gl.FLOAT, false, 0, 0);
+
+ +

Esto reemplaza el código que setea el atributo "vertex color" (color del vertice) con uno que contiene la coordenada de textura para cada vértice.

+ +

El vertex shader

+ +

A continuación, necesitamos reemplazar el "vertex shader" de modo que en lugar de buscar datos de color, busque los datos de coordenadas de textura.

+ +
<script id="shader-vs" type="x-shader/x-vertex">
+  attribute vec3 aVertexPosition;
+  attribute vec2 aTextureCoord;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+  varying highp vec2 vTextureCoord;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+    vTextureCoord = aTextureCoord;
+  }
+</script>
+
+ +

El cambio clave aquí es que en lugar de buscar el color del vértice (vertex color), estamos estableciendo las coordenadas de textura; Esto indicará la ubicación dentro de la textura correspondiente al vértice.

+ +

El fragment shader

+ +

El fragment shader también debe actualizarse:

+ +
<script id="shader-fs" type="x-shader/x-fragment">
+  varying highp vec2 vTextureCoord;
+
+  uniform sampler2D uSampler;
+
+  void main(void) {
+    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+  }
+</script>
+
+ +

En lugar de asignar un valor de color al fragment color, el fragment color se calcula recolectando el texel (es decir, el píxel dentro de la textura) que el muestreador dice que se corresponde mejor con la posición del fragment.

+ +

Dibujando el cubo texturado

+ +

El cambio a la función drawScene() es simple (excepto que por razones de claridad, he eliminado el código que hace que el cubo se traslade a través del espacio mientras se anima, en vez de eso, solo gira).

+ +

El código para mapear colores a la textura se ha ido, sustituido por esto:

+ +
gl.activeTexture(gl.TEXTURE0);
+gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+gl.uniform1i(gl.getUniformLocation(shaderProgram, 'uSampler'), 0);
+
+ +

GL proporciona 32 registros de textura; La primera de ellas es gl.TEXTURE0. Vincularemos nuestra textura previamente cargada a ese registro, a continuación, establecremos el shader sampler uSampler (especificado en el shader) para utilizar esa textura.

+ +

En este punto, el cubo giratorio debe estar listo.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}

+ +

Ver el código completo | Abrir esta demo en una nueva pestaña

+ +

Texturas entre dominios

+ +

La carga de texturas WebGL esta sujeta a controles de acceso entre dominios. Para que su contenido cargue una textura de otro dominio, La aprobacion CORS debe ser obtenida. Ver control de acceso HTTP para mas detalles sobre CORS.

+ +

Ver este articulo hacks.mozilla.org para una explicacion de como usar imágenes CORS-approved como texturas WebGL , con un ejemplo auto-contenido.

+ +
+

Nota: El soporte CORS para texturas WebGL y el atributo crossOrigin para elementos de imagen se implementan en {{Gecko ("8.0")}}.

+
+ +

Canvas 2D contaminados (Solo lectura) no pueden ser utilizados como texturas WebGL. una 2D {{ HTMLElement("canvas") }} se convierte en contaminada, por ejemplo, cuando una imagen de dominio cruzado (cross-domain) es dibujada en el.

+ +
+

Nota: El soporte de CORS para Canvas 2D drawImage se implementa en {{Gecko ("9.0")}}. Esto significa que el uso de una imagen de dominio cruzado con aprobación de CORS ya no pinta el lienzo 2D, por lo que el lienzo 2D sigue siendo utilizable como fuente de una textura WebGL. 

+
+ +
+

Nota: El soporte de CORS para videos de dominio cruzado y el atributo de crossorigin para elementos {{HTMLElement("video")}} se implementa en {{Gecko ("12.0")}}.

+
+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

diff --git a/files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html b/files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html deleted file mode 100644 index 9d2be2d61b..0000000000 --- a/files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html +++ /dev/null @@ -1,209 +0,0 @@ ---- -title: Utilizando texturas en WebGL -slug: Web/API/WebGL_API/Tutorial/Wtilizando_texturas_en_WebGL -tags: - - Texturas - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL ---- -

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

- -

Ahora que nuestro programa de prueba tiene un cubo, asignemos una textura en lugar de tener sus caras de un color solido.

- -

Cargando texturas

- -

La primera cosa que debemos hacer es añadir el codigo para cargar nuestra textura. en nuestro caso, estaremos usando una unica textura, asignada en las seis caras de nuestro cubo rotador, pero la misma tecnica puede ser utilizada para cualquier cantidad de texturas.

- -
Note: Es importante señalar que la carga de texturas sigue reglas de dominio-cruzado; Es decir, sólo puede cargar texturas de sitios para los que su contenido tiene aprobación de CORS. Vea las texturas entre dominios a continuación para más detalles.
- -

El codigo que carga la textura se ve como esto:

- -
function initTextures() {
-  cubeTexture = gl.createTexture();
-  cubeImage = new Image();
-  cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
-  cubeImage.src = 'cubetexture.png';
-}
-
-function handleTextureLoaded(image, texture) {
-  gl.bindTexture(gl.TEXTURE_2D, texture);
-  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
-  gl.generateMipmap(gl.TEXTURE_2D);
-  gl.bindTexture(gl.TEXTURE_2D, null);
-}
-
- -

La rutina initTextures() comienza por crear el GL texture cubeTexture llamando la rutina GL {{domxref("WebGLRenderingContext.createTexture()", "createTexture()")}}. Para cargar la textura desde un archivo de imagen, este luego crea un Objeto Imagen y carga en él el archivo de imagen que deseamos utilizar como nuestra textura. La rutina handleTextureLoaded() corre cuando la textura ha terminado de cargar.

- -

Para realmente crear la textura, especificamos que la nueva textura es la textura actual en la que queremos operar vinculándola a gl.TEXTURE_2D. Despues de esto, la imagen cargada es pasada a  {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}} para escribir la informacion de la imagen en la textura.

- -
Nota: El alto y hancho de las texturas deben, en la mayoría de las circunstancias, ser una potencia de dos píxeles (es decir, 1, 2, 4, 8, 16, etc.) en cada dimensión. Para la excepción, vea la sección: "Texturas no potencia de dos", a continuación.
- -

Las siguientes dos líneas setean el filtrado para la textura; Esto controla cómo se filtra la imagen mientras se escala. En este caso estamos usando linear filtering cuando escala la imagen, y mipmap cuando se hace mas pequeña. Entonces el mipmap es generado llamando {{domxref("WebGLRenderingContext.generateMipMap()", "generateMipMap()")}}, Y terminamos diciéndole a WebGL que hemos terminado de manipular la textura vinculando null a gl.TEXTURE_2D.

- -

Texturas no potencia-de-dos

- -

Generalmente hablando, Utilizar texturas cuyos lados son una potencia de dos es ideal. Están almacenadas eficientemente en la memoria de video y no están restringidas en cómo podrían ser utilizadas. Las texturas creadas por el artista deben ser escaladas hacia arriba o hacia abajo a una potencia cercana a dos y, realmente, debería haber sido creada en potencia-de-dos para empezar. Cada lado debe ser: 1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024 ó 2048 píxeles. Muchos dispositivos, pero no todos, pueden soportar 4096 píxeles; Algunos pueden soportar 8192 e incluso más.

- -

Ocasionalmente, es difícil utilizar texturas en potencia-de-dos dada una circunstancia especifica. Si la fuente es alguna tercera parte, A menudo los mejores resultados vienen de modificar las imágenes usando canvas HTML5 en tamaños de potencia-de-dos antes de que se pasen a WebGL; Las coordenadas UV también pueden requerir ajuste si el estiramiento es notorio.

- -

Pero, Si tiene que tener una textura no-potencia-de-dos (NPOT = no-power-of-two), WebGL incluye un limitado soporte nativo. Las texturas NPOT son en su mayoría útiles si las dimensiones de la textura debe ser la misma resolución que otra cosa, como la resolución de tu monitor, o si no vale la pena molestarse por las sugerencias anteriores. Resumiendo: estas texturas no se pueden usar con mipmapping y no deben repetirse (tile o wrap).

- -

Un ejemplo de una textura es tilear una imagen de unos ladrillos para cubrir una pared de ladrillos.

- -

Mipmapping y "UV tiling" pueden ser desactivados utilizando {{domxref("WebGLRenderingContext.texParameter()", "texParameteri()")}} y cuando creas tu textura utilizando {{domxref("WebGLRenderingContext.bindTexture()", "bindTexture()")}}. Ésto permitirá las texturas NPOT a expensas de mipmapping, UV wrapping, UV tiling, y tu control sobre cómo el dispositivo procederá a manejar tu textura.

- -
// gl.NEAREST is also allowed, instead of gl.LINEAR, as neither mipmap.
-gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-// Prevents s-coordinate wrapping (repeating).
-gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-// Prevents t-coordinate wrapping (repeating).
-gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
- -

Una vez más, con estos parámetros, los dispositivos compatibles con WebGL aceptarán automáticamente cualquier resolución para esa textura (hasta sus dimensiones máximas). Sin realizar la configuración anterior, WebGL requiere que todas las muestras de texturas NPOT fallen al devolver el color "negro sólido": rgba (0,0,0,1).

- -

Mapeando la textura en las caras

- -

A este punto, la textura esta cargada y lista para usar. pero antes de utilizarla, Necesitamos asignar el mapeo de las coordenadas de textura a los vértices de las caras de nuestro cubo. Esto reemplaza todo el código previamente existente para configurar colores para cada una de las caras del cubo en initBuffers().

- -
cubeVerticesTextureCoordBuffer = gl.createBuffer();
-gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
-
-var textureCoordinates = [
-  // Front
-  0.0,  0.0,
-  1.0,  0.0,
-  1.0,  1.0,
-  0.0,  1.0,
-  // Back
-  0.0,  0.0,
-  1.0,  0.0,
-  1.0,  1.0,
-  0.0,  1.0,
-  // Top
-  0.0,  0.0,
-  1.0,  0.0,
-  1.0,  1.0,
-  0.0,  1.0,
-  // Bottom
-  0.0,  0.0,
-  1.0,  0.0,
-  1.0,  1.0,
-  0.0,  1.0,
-  // Right
-  0.0,  0.0,
-  1.0,  0.0,
-  1.0,  1.0,
-  0.0,  1.0,
-  // Left
-  0.0,  0.0,
-  1.0,  0.0,
-  1.0,  1.0,
-  0.0,  1.0
-];
-
-gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
-              gl.STATIC_DRAW);
-
- -

Primeramente, este codigo crea un GL buffer en el cual almacenaremos las coordenadas de la textura para cada cara, luego enlazamos ese buffer como el array en el cual escribiremos.

- -

El array textureCoordinates define las coordenadas de textura correspondientes a cada vértice de cada cara. Tenga en cuenta que las coordenadas de textura van de 0,0 a 1,0; Las dimensiones de las texturas se normalizan a un rango de 0,0 a 1,0 independientemente de su tamaño real, con el propósito de mapeo de textura.

- -

Una vez que hemos seteado la matriz de mapeo de textura, pasamos la matriz al búfer, de modo que GL tiene esos datos listos para su uso.

- -

Actualizando los shaders

- -

El shader -- y el código que inicializa los shaders -- también necesita ser actualizado para utilizar la textura en vez de un color solido.

- -

Primero, echemos un vistazo a un cambio muy sencillo que se necesita en initShaders():

- -
textureCoordAttribute = gl.getAttribLocation(shaderProgram, 'aTextureCoord');
-gl.enableVertexAttribArray(textureCoordAttribute);
-gl.vertexAttribPointer(texCoordAttribute, 2, gl.FLOAT, false, 0, 0);
-
- -

Esto reemplaza el código que setea el atributo "vertex color" (color del vertice) con uno que contiene la coordenada de textura para cada vértice.

- -

El vertex shader

- -

A continuación, necesitamos reemplazar el "vertex shader" de modo que en lugar de buscar datos de color, busque los datos de coordenadas de textura.

- -
<script id="shader-vs" type="x-shader/x-vertex">
-  attribute vec3 aVertexPosition;
-  attribute vec2 aTextureCoord;
-
-  uniform mat4 uMVMatrix;
-  uniform mat4 uPMatrix;
-
-  varying highp vec2 vTextureCoord;
-
-  void main(void) {
-    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
-    vTextureCoord = aTextureCoord;
-  }
-</script>
-
- -

El cambio clave aquí es que en lugar de buscar el color del vértice (vertex color), estamos estableciendo las coordenadas de textura; Esto indicará la ubicación dentro de la textura correspondiente al vértice.

- -

El fragment shader

- -

El fragment shader también debe actualizarse:

- -
<script id="shader-fs" type="x-shader/x-fragment">
-  varying highp vec2 vTextureCoord;
-
-  uniform sampler2D uSampler;
-
-  void main(void) {
-    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
-  }
-</script>
-
- -

En lugar de asignar un valor de color al fragment color, el fragment color se calcula recolectando el texel (es decir, el píxel dentro de la textura) que el muestreador dice que se corresponde mejor con la posición del fragment.

- -

Dibujando el cubo texturado

- -

El cambio a la función drawScene() es simple (excepto que por razones de claridad, he eliminado el código que hace que el cubo se traslade a través del espacio mientras se anima, en vez de eso, solo gira).

- -

El código para mapear colores a la textura se ha ido, sustituido por esto:

- -
gl.activeTexture(gl.TEXTURE0);
-gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
-gl.uniform1i(gl.getUniformLocation(shaderProgram, 'uSampler'), 0);
-
- -

GL proporciona 32 registros de textura; La primera de ellas es gl.TEXTURE0. Vincularemos nuestra textura previamente cargada a ese registro, a continuación, establecremos el shader sampler uSampler (especificado en el shader) para utilizar esa textura.

- -

En este punto, el cubo giratorio debe estar listo.

- -

{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}

- -

Ver el código completo | Abrir esta demo en una nueva pestaña

- -

Texturas entre dominios

- -

La carga de texturas WebGL esta sujeta a controles de acceso entre dominios. Para que su contenido cargue una textura de otro dominio, La aprobacion CORS debe ser obtenida. Ver control de acceso HTTP para mas detalles sobre CORS.

- -

Ver este articulo hacks.mozilla.org para una explicacion de como usar imágenes CORS-approved como texturas WebGL , con un ejemplo auto-contenido.

- -
-

Nota: El soporte CORS para texturas WebGL y el atributo crossOrigin para elementos de imagen se implementan en {{Gecko ("8.0")}}.

-
- -

Canvas 2D contaminados (Solo lectura) no pueden ser utilizados como texturas WebGL. una 2D {{ HTMLElement("canvas") }} se convierte en contaminada, por ejemplo, cuando una imagen de dominio cruzado (cross-domain) es dibujada en el.

- -
-

Nota: El soporte de CORS para Canvas 2D drawImage se implementa en {{Gecko ("9.0")}}. Esto significa que el uso de una imagen de dominio cruzado con aprobación de CORS ya no pinta el lienzo 2D, por lo que el lienzo 2D sigue siendo utilizable como fuente de una textura WebGL. 

-
- -
-

Nota: El soporte de CORS para videos de dominio cruzado y el atributo de crossorigin para elementos {{HTMLElement("video")}} se implementa en {{Gecko ("12.0")}}.

-
- -

{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

diff --git a/files/es/web/api/webrtc_api/session_lifetime/index.html b/files/es/web/api/webrtc_api/session_lifetime/index.html new file mode 100644 index 0000000000..2529f32085 --- /dev/null +++ b/files/es/web/api/webrtc_api/session_lifetime/index.html @@ -0,0 +1,21 @@ +--- +title: WebRTC Introduction +slug: WebRTC/Introduction +translation_of: Web/API/WebRTC_API/Session_lifetime +--- +
+

WebRTC te permite establecer una comunicación par-a-par en una aplicación del navegador.

+
+

Estableciendo la conexión

+

La conexión inicial entre pares debe ser establecida a través de un servidor de aplicaciones que proporcione descubrimiento de usuarios, comunicación y traducción de direcciones de red (NAT) con transmisión de datos.

+

Señalización

+

Señalización es el mecanismo por el cual los pares se envían mensajes de control entre sí con el propósito de establecer el protocolo, canal, y método de comunicación. Estos no están especifiados en el standar WebRTC. En su lugar, el desarrollador puede elegir cualquier protocolo de mensajería (como SIP o XMPP), y cualquier canal de comunicación bidirecional (como WebSocket o XMLHttpRequest) en conjunción con un servidor con un API de  conexión permanente (como  el Google Channel API) para AppEngine.

+

Transmisión

+

getUserMedia

+

LocalMediaStream object

+

Recepción

+

El soporte para WebRTC en Firefox está escondido detrás de un selector de preferencias. Ve a about:config y establce 'media.navigator.enabled' a 'true'.

+
+

Hay algunos archivos de prueba en el repositorio de código para darte una idea de cómo funciona. Ve: dom/media/tests/local_video_test.html. Por favor, prueba también lademo de servicio de llamadas, la página de su código, y el código de su servidor.

+
+

 

diff --git a/files/es/web/api/webrtc_api/taking_still_photos/index.html b/files/es/web/api/webrtc_api/taking_still_photos/index.html new file mode 100644 index 0000000000..143b2ee72f --- /dev/null +++ b/files/es/web/api/webrtc_api/taking_still_photos/index.html @@ -0,0 +1,159 @@ +--- +title: Capturar fotografías con la cámara web +slug: WebRTC/Taking_webcam_photos +tags: + - Canvas + - WebRTC + - cámara web + - getusermedia +translation_of: Web/API/WebRTC_API/Taking_still_photos +--- +

Introducción y demostración

+

Este es un tutorial rápido de cómo acceder a la cámara de tu laptop y capturar una foto con ella. Puedes observar el código final en acción en este JSFiddle. También existe una versión más avanzada en JavaScript para cargar fotos a imgur disponible como código en GitHub o como demo.

+

El formato HTML

+

Lo primero que necesitas para acceder a la cámara web utilizando WebRTC es un elemento {{HTMLElement("video")}} y un elemento {{HTMLElement("canvas")}} en la página. El elemento de video recibe la secuencia desde WebRTC y el elemento canvas es utilizado para agarrar la imagen desde el video. También añadimos una imagen de relleno que luego será reemplazada con la toma capturada por la cámara web.

+
<video id="video"></video>
+<button id="startbutton">Take photo</button>
+<canvas id="canvas"></canvas>
+<img src="http://placekitten.com/g/320/261" id="photo" alt="photo">
+
+

El script completo

+

Aquí se muestra completamente el código JavaScript. Más abajo, explicaremos gradualmente cada sección con más detalle.

+
(function() {
+
+  var streaming = false,
+      video        = document.querySelector('#video'),
+      canvas       = document.querySelector('#canvas'),
+      photo        = document.querySelector('#photo'),
+      startbutton  = document.querySelector('#startbutton'),
+      width = 320,
+      height = 0;
+
+  navigator.getMedia = ( navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia ||
+                         navigator.msGetUserMedia);
+
+  navigator.getMedia(
+    {
+      video: true,
+      audio: false
+    },
+    function(stream) {
+      if (navigator.mozGetUserMedia) {
+        video.mozSrcObject = stream;
+      } else {
+        var vendorURL = window.URL || window.webkitURL;
+        video.src = vendorURL.createObjectURL(stream);
+      }
+      video.play();
+    },
+    function(err) {
+      console.log("An error occured! " + err);
+    }
+  );
+
+  video.addEventListener('canplay', function(ev){
+    if (!streaming) {
+      height = video.videoHeight / (video.videoWidth/width);
+      video.setAttribute('width', width);
+      video.setAttribute('height', height);
+      canvas.setAttribute('width', width);
+      canvas.setAttribute('height', height);
+      streaming = true;
+    }
+  }, false);
+
+  function takepicture() {
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
+    var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
+  }
+
+  startbutton.addEventListener('click', function(ev){
+      takepicture();
+    ev.preventDefault();
+  }, false);
+
+})();
+

Explicando paso a paso

+

Entonces, ¿Qué es lo que sucede aquí? Lo analizaremos paso por paso.

+

Función Anónima

+
(function() {
+
+  var streaming = false,
+      video        = document.querySelector('#video'),
+      canvas       = document.querySelector('#canvas'),
+      photo        = document.querySelector('#photo'),
+      startbutton  = document.querySelector('#startbutton'),
+      width = 320,
+      height = 0;
+

Empezamos por encerrar el script entero en una función anónima para evitar las variables globales. Tomamos los elementos HTML que necesitamos y definimos el ancho (width) del video a 320 y la altura (height) a 0, ya que calcularemos la altura apropiada posteriormente.

+
+

En estos momentos existe una diferencia entre los tamaños de video proporcionados por getUserMedia. Firefox Nightly utiliza una resolución de 352x288 y Opera y Chrome utiliza una resolución de 640x400. Esto cambiará en el futuro, pero cambiando el tamaño con la proporción que usaremos más abajo, nos aseguraremos de no obtener sorpresas desagradables.

+
+

Obtener el video

+

Ahora necesitamos obtener el video desde la cámara web. Actualmente esto está predeterminado para los diferentes navegadores, así que necesitamos comprobar cuál es compatible:

+
  navigator.getMedia = ( navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia ||
+                         navigator.msGetUserMedia);
+

Le solicitamos al navegador que nos dé un video sin audio y obtenemos una secuencia (stream) en la función de retrollamada:

+
  navigator.getMedia(
+    {
+      video: true,
+      audio: false
+    },
+    function(stream) {
+      if (navigator.mozGetUserMedia) {
+        video.mozSrcObject = stream;
+      } else {
+        var vendorURL = window.URL || window.webkitURL;
+        video.src = vendorURL.createObjectURL(stream);
+      }
+      video.play();
+    },
+    function(err) {
+      console.log("An error occured! " + err);
+    }
+  );
+

En estos momentos Firefox Nightly necesita que tu configures la propiedad de mozSrcObject del elemento del video con el fin de reproducirlo; para otros navegadores, configura el atributo src. Mientras que Firefox puede utilizar la secuencia de video directamente, Webkit y Opera necesitan crear un objeto URL desde ella. Todo esto será estandarizado en un futuro cercano.

+

Redefinir el tamaño del video

+

Luego necesitamos configurar el tamaño del video a las dimensiones deseadas.

+
  video.addEventListener('canplay', function(ev){
+    if (!streaming) {
+      height = video.videoHeight / (video.videoWidth/width);
+      video.setAttribute('width', width);
+      video.setAttribute('height', height);
+      canvas.setAttribute('width', width);
+      canvas.setAttribute('height', height);
+      streaming = true;
+    }
+  }, false);
+

Nos subscribimos al evento canplay del video y leemos sus dimensiones utilizando videoHeight y videoWidth. Estas no están disponible realmente hasta que el evento sea iniciado. Establecemos streaming a verdadero (true) para que compruebe esto solo una vez, mientras que el evento canplay  siga en actividad.

+

Esto es todo lo que se necesita para que inicie el video.

+

Capturar una imagen

+

Ahora necesitamos capturar una imagen utilizando un lienzo (canvas). Asignamos un manejador de eventos al botón de inicio para llamar a la función de takepicture.

+
  startbutton.addEventListener('click', function(ev){
+      takepicture();
+    ev.preventDefault();
+  }, false);
+

En esta función, reestablecemos el tamaño del lienzo (canvas) a las dimensiones del video, el cual lo sustituye y tenemos un marco del video, el cual se copia al canvas. Luego necesitamos convertir los datos del canvas en datos tipo URL con un encabezado PNG, y establecer el src de la fotografía a este mismo url.

+
  function takepicture() {
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
+    var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
+  }
+
+})();
+

Eso es todo lo que se necesita para mostrar la secuencia de la cámara web y capturar una imagen fija de ella, a través de Chrome, Opera y Firefox.

+

Compatibilidad

+

Actualmente utilizar WebRTC para acceder a la cámara es compatible en Chrome, Opera y Firefox Nightly 18. Para habilitar WebRTC en Firefox Nightly requiere que establezcas un indicador en la configuración:

+
    +
  • Teclea "about:config" en la barra de direcciones y afirma que quieres realizar algunos cambios.
    • +
  • Encuentra la entrada "media.navigator.enabled" y establécelo a verdadero (true).
    • +
diff --git a/files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html b/files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html deleted file mode 100644 index 333e8e8830..0000000000 --- a/files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: Escribiendo un servidor WebSocket en C# -slug: Web/API/WebSockets_API/Escribiendo_servidor_WebSocket -tags: - - HTML5 - - Tutorial - - WebSockets -translation_of: Web/API/WebSockets_API/Writing_WebSocket_server ---- -

Introducción

- -

Si deseas utilizar la API WebSocket, es conveniente si tienes un servidor. En este artículo te mostraré como puedes escribir uno en C#. Tú puedes hacer esto en cualquier lenguaje del lado del servidor, pero para mantener las cosas simples y más comprensibles, elegí el lenguaje de Microsoft.

- -

Este servidor se ajusta a RFC 6455 por lo que solo manejará las conexiones de Chrome version 16, Firefox 11, IE 10 and superiores.

- -

Primeros pasos

- -

WebSocket se comunica a través de conexiones TCP (Transmission Control Protocol), afortunadamente C# tiene una clase TcpListener la cual hace lo que su nombre sugiere. Esta se encuentra en el namespace System.Net.Sockets.

- -
-

Es una buena idea usar la instrucción using para escribir menos. Eso significa que no tendrás que re escribir el namespace de nuevo en cada ocasión.

-
- -

TcpListener

- -

Constructor:

- -
TcpListener(System.Net.IPAddress localaddr, int port)
- -

localaddr especifica la IP a escuchar y port especifica el puerto.

- -
-

Para crear un objeto IPAddress desde un string, usa el método estático Parse de IPAddres.

-
- -

Métodos:

- -
    -
  • Start()
    • -
  • System.Net.Sockets.TcpClient AcceptTcpClient()
    - Espera por una conexión TCP, la acepta y la devuelve como un objeto TcpClient.
    • -
- -

Aquí está como utilizar lo que hemos aprendido:

- -
​using System.Net.Sockets;
-using System.Net;
-using System;
-
-class Server {
-    public static void Main() {
-        TcpListener server = new TcpListener(IPAddress.Parse("127.0.0.1"), 80);
-
-        server.Start();
-        Console.WriteLine("El server se ha iniciado en 127.0.0.1:80.{0}Esperando una conexión...", Environment.NewLine);
-
-        TcpClient client = server.AcceptTcpClient();
-
-        Console.WriteLine("Un cliente conectado.");
-    }
-}
-
- -

TcpClient

- -

Métodos:

- -
    -
  • System.Net.Sockets.NetworkStream GetStream()
    - Obtiene el stream del canal de comunicación. Ambos lados del canal tienen capacidad de lectura y escritura.
    • -
- -

Propiedades:

- -
    -
  • int Available
    - Este es el número de bytes de datos que han sido enviados. El valor es cero hasta que NetworkStream.DataAvailable es true.
    • -
- -

NetworkStream

- -

Métodos:

- -
Write(Byte[] buffer, int offset, int size)
- -

Escribe bytes desde el buffer; el offset y el size determinan la longitud del mensaje.

- -
Read(Byte[] buffer, int offset, int size)
- -

Lee bytes al buffer; el offset y el size determinan la longitud del mensaje.

- -

Ampliemos nuestro ejemplo anterior.

- -
TcpClient client = server.AcceptTcpClient();
-
-Console.WriteLine("Un cliente conectado.");
-
-NetworkStream stream = client.GetStream();
-
-//enter to an infinite cycle to be able to handle every change in stream
-while (true) {
-    while (!stream.DataAvailable);
-
-    Byte[] bytes = new Byte[client.Available];
-
-    stream.Read(bytes, 0, bytes.Length);
-}
- -

Handshaking

- -

Cuando un cliente se conecta al servidor, envía una solicitud GET para actualizar la conexión al WebSocket desde una simple petición HTTP. Esto es conocido como handshaking.

- -

Este código de ejemplo detecta el GET desde el cliente. Nota que esto bloqueará hasta los 3 primeros bytes del mensaje disponible. Soluciones alternativas deben ser investigadas para ambientes de producción.

- -
using System.Text;
-using System.Text.RegularExpressions;
-
-while(client.Available < 3)
-{
-   // wait for enough bytes to be available
-}
-
-Byte[] bytes = new Byte[client.Available];
-
-stream.Read(bytes, 0, bytes.Length);
-
-//translate bytes of request to string
-String data = Encoding.UTF8.GetString(bytes);
-
-if (Regex.IsMatch(data, "^GET")) {
-
-} else {
-
-}
- -

Esta respuesta es fácil de construir, pero puede ser un poco díficil de entender. La explicación completa del handshake al servidor puede encontrarse en  RFC 6455, section 4.2.2. Para nuestros propósitos, solo construiremos una respuesta simple.

- -

Debes:

- -
    -
  1. Obtener el valor de "Sec-WebSocket-Key" sin espacios iniciales ni finales de el encabezado de la solicitud
    2. -
  2. Concatenarlo con "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
    3. -
  3. Calcular el código SHA-1 y Base64
    4. -
  4. Escribe el valor Sec-WebSocket-Accept en el encabezado como parte de la respuesta HTTP.
    5. -
- -
if (new Regex("^GET").IsMatch(data)) {
-    Byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + Environment.NewLine
-        + "Connection: Upgrade" + Environment.NewLine
-        + "Upgrade: websocket" + Environment.NewLine
-        + "Sec-WebSocket-Accept: " + Convert.ToBase64String (
-            SHA1.Create().ComputeHash (
-                Encoding.UTF8.GetBytes (
-                    new Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups[1].Value.Trim() + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
-                )
-            )
-        ) + Environment.NewLine
-        + Environment.NewLine);
-
-    stream.Write(response, 0, response.Length);
-}
-
- -

Decoding messages

- -

Luego de un handshake exitoso el cliente puede enviar mensajes al servidor, pero estos serán codificados.

- -

Si nosotros enviamos "MDN", obtendremos estos bytes:

- - - - - - - - - - - - - - - -
129131618435611216109
- -

- 129:

- - - - - - - - - - - - - - - - - - - - -
FIN (¿Es el mensaje completo?)RSV1RSV2RSV3Opcode
10000x1=0001
- -

FIN: Puedes enviar tu mensaje en marcos, pero ahora debe mantener las cosas simples.
- Opcode 0x1 significa que es un texto. Lista completa de Opcodes

- -

- 131:

- -

Si el segundo byte menos 128 se encuentra entre 0 y 125, esta es la longitud del mensaje. Si es 126, los siguientes 2 bytes (entero sin signo de 16 bits), si es 127, los siguientes 8 bytes (entero sin signo de 64 bits) son la longitud.

- -
-

Puedo tomar 128, porque el primer bit siempre es 1.

-
- -

- 61, 84, 35 y 6 son los bytes de la clave a decodificar. Cambian en cada oportunidad.

- -

- Los bytes codificados restantes son el mensaje.

- -

Algoritmo de decodificación

- -

byte decodificado = byte codificado XOR (posición del byte codificado Mod 4) byte de la clave

- -

Ejemplo en C#:

- -
Byte[] decoded = new Byte[3];
-Byte[] encoded = new Byte[3] {112, 16, 109};
-Byte[] key = Byte[4] {61, 84, 35, 6};
-
-for (int i = 0; i < encoded.Length; i++) {
-    decoded[i] = (Byte)(encoded[i] ^ key[i % 4]);
-}
- -

Relacionado

- - - -
 
diff --git a/files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html b/files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html deleted file mode 100644 index 1261f75bec..0000000000 --- a/files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: Escribir servidores WebSocket -slug: Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket -translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers ---- -

{{gecko_minversion_header("2")}}

- -

Introducción

- -

Un servidor WebSocket es simplemente una aplicación TCP que escucha en cualquier puerto de un servidor que sigue un protocolo específico. La tarea de crear un servidor propio personalizado suele asustar a los desarrolladores, sin embargo puede resultar muy fácil implementar un servidor WebSocket en la plataforma que elijas.

- -

Un servidor WebSocket puede ser escrito en cualquier lenguaje de programación Server-Side que sea soporte Berkeley Sockets, como por ejemplo C++ o Python o inclusive PHP y JavaScript para servidores. Este no va a ser un tutorial para ningún lenguaje espefícamente sino que te ayudará a escribir tu propio servidor.
-
- Necesitarás conocer como trabaja el protocolo HTTP y una experiencia intermedia en programación. Dependiendo de las capacidades de tu lenguaje puede ser necesario tener conocimientos en sockets TCP. Esta guía te dará el conocimiento necesario para escribir un servidor con WebSocket.

- -
-

Lea las últimas especificaciones oficiales de WebSocket RFC 6455. Las secciones 1 y 4-7 son especialmente interesantes para personas que deseen implementar servidores. La sección 10 abarca temas de seguridad y definitivamente deberías leerla antes de exponer tu servidor a la red.

-
- -

Un servidor WebSocket es explicado a un muy bajo nivel aquí. Los servidores WebSocket usualmente estan separados y especializados (por una cuestión de balance de cargas y otra razones prácticas), por lo tanto deberías usar un Reverse Proxy (semejante a un servidor HTTP común) casi siempre para detectar los Handshakes de WebSocket, preprocesarlos, y reenviar los datos de los clientes al servidor WebSocket real.
-  

- -

Paso 1: El Handshake del WebSocket

- -

Antes que nada, el servidor debe escuchar las conexiones entrantes usando un socket TCP estandar. Dependiendo de tu plataforma, esto puede ser manejado por tí. Por ejemplo asumamos que tu servidor esta escuchando la dirección example.com en el puerto 8000, y tu socket en el servidor responde a la petición GET con /chat.

- -
-

Advertencia: El servidor puede escuchar cualquier puerto que elijas, pero si elijes un puerto diferente al 80 o 443 podría haber problemas con los firewalls y proxies. Suele suceder con el puerto 443 tambien pero para eso se necesita un conexión segura (TLS/SSL). También se debe aclarar que la mayoría de los navegadores (como Firefox 8 o superiores) no permiten conexiones a servidores WebSocket sin seguridad que se realicen desde páginas web con seguridad (HTTPS). 

-
- -

El Handshake es el puente desde HTTP a WS. En el Handshake se negocian los detalles de la conexión y cualquier de las partes pueden abandonar el proceso antes de completar dicha conexión si los términos no son favorables. El servidor debe ser cuidadoso al analizar lo que el cliente pide, de lo contrario podrían introducirse problemas de seguridad.

- -

Petición de Handshake en el cliente

- -

A pesar de que estamos creando un servidor, un cliente es quien tiene que comenzar el proceso de Handshake de WebSocket. Entonces tú tienes que saber cómo interpretar la petición del cliente. El cliente enviará una linda petición HTTP estandar que lucirá algo asi (la versión del HTTP debe ser 1.1 o mayor y el método debe ser GET):

- -
GET /chat HTTP/1.1
-Host: example.com:8000
-Upgrade: websocket
-Connection: Upgrade
-Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
-Sec-WebSocket-Version: 13
-
-
- -

El cliente puede solicitar aquí extensiones y/o sub protocolos; vea Misceláneos para más detalles. También, cabeceras comunes como User-Agent, Referer, Cookie, or cabeceras de autenticación podrían ser incluidos. Haz lo que quieras con ellos; no pertencen a WebSocket. También puedes ignorarlos. En muchas configuraciones comunes, un proxy inverso ya ha tratado con ellos.

- -

Si alguna cabecera no se entiende o posee un valor incorrecto, el servidor debe responder "400 Bad Request" e inmediatamente cerrar la conexión. Normalmente, también puede dar la razón porque falló el handshake en el cuerpo de la respuesta HTTP, pero el mensaje podría no ser mostrado (el browser no lo muestra). Si el servidor no comprende que la versión del WebSockets, debería enviar una cabecera Sec-WebSocket-Version que contenga la(s) versión(es) no entendidas. (Esta guía explica v13, la más nueva). Ahora, vamos a ver la cabecera más curiosa, Sec-WebSocket-Key.

- -
-

Tip: Todos los navegadores deben enviar una cabecera Origin. Tu puedes usar esta cabecera por seguridad (revisando por el mismo origen, listas blancas/ listas negras, etc.) y enviar un 403 Forbidden si no te gusta lo que ves. Sin embargo, se advierte que los agentes no navegadores pueden enviar un falso Origin.  La mayoría de las aplicaciones rechazaran las solicitudes sin esta cabecera.

-
- -
-

Tip: The request-uri (/chat here) has no defined meaning in the spec. So many people cleverly use it to let one server handle multiple WebSocket applications. For example, example.com/chat could invoke a multiuser chat app, while /game on the same server might invoke a multiplayer game.

-
- -
-

Note: Regular HTTP status codes can only be used before the handshake. After the handshake succeeds, you have to use a different set of codes (defined in section 7.4 of the spec).

-
- -

Respuesta de Handshake del servidor

- -

Después de la petición, el servidor debería enviar una linda respuesta (aunque todavía en formato HTTP) que se verá asi (hay que recordar que la cabecera termina con \r \n y agrega un \r \n extra después del último):

- -
HTTP/1.1 101 Switching Protocols
-Upgrade: websocket
-Connection: Upgrade
-Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
-
-
- -

Adicionalmente, el servidor puede decidir respecto de las solicitudes "extension/subprotocol" en este punto (ver Miscelláneos para más detalles). La cabecera Sec-WebSocket-Accept es interesante. El servidor debe derivarla a partir de la cabecera Sec-WebSocket-Key enviada anteriormente por el cliente. Para lograr esto se deben concatenar la cabecera del cliente Sec-WebSocket-Key y el string "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (es un "magic string"), calcular el hash SHA-1 del resultado y devolver el string codificado en base64 de este hash.

- -
-

FYI: Este aparentemente complicado e innecesario proceso se realiza de manera que sea obvio para el cliente si el servidor soporta o noWebSockets. Esto es importante de realizar, ya que podrían crearse problemas de seguridad si el servidor acepta conexiones WebSockets pero interpreta los datos como solicitudes HTTP.

-
- -

Así, si la cabecera Sec-WebSocket-Key era "dGhlIHNhbXBsZSBub25jZQ==", la correspondiente respuesta Sec-WebSocket-Accept será "s3pPLMBiTxaQ9kYGzzhZRbK+xOo=". Una vez que el servidor envía estas cabeceras, el "handshake" se considera completo y puedes comenzar a intercambiar datos.

- -
-

El servidor puede enviar otras cabeceras como Set-Cookie, o solicitar autenticación o redirigir mediante otros status codes antes de responder al handshake.

-
- -

Llevando registro de los clientes

- -

Esto no está directamente relacionado con el protocolo WebSocket, pero no está de más mencionarlo: tu servidor debe llevar el registro de los sockets de los clientes, de manera de no realizar handshakes constantemente con los clientes que ya han completado este proceso. La misma dirección IP cliente puede intentar conectarse múltiples veces (pero el servidor puede denegar la conexión si se intentan demasiadas conexiones con el objetivo de evitar ataques ataques DoS).

- -

Paso 2: Intercambiando Data Frames

- -

Tanto el cliente como el servidor puede decidir enviar un mensaje en cualquier momento — ese es el encanto de los WebSockets. Sin embargo, extraer información de esos denominados "frames" o tramas de datos no es una experiencia muy mágica. Aunque todos los frames siguen el mismo formato específico, los datos que van del cliente al servidor se enmascaran utilizando el cifrado XOR (con una clave de 32 bits). La sección 5 de la especificación describe esto en detalle.

- -

Formato

- -

Cada trama de datos (desde el cliente al servidor o viceversa) sigue este mismo formato:

- -
 0                   1                   2                   3
- 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
-+-+-+-+-+-------+-+-------------+-------------------------------+
-|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
-|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
-|N|V|V|V|       |S|             |   (if payload len==126/127)   |
-| |1|2|3|       |K|             |                               |
-+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
-|     Extended payload length continued, if payload len == 127  |
-+ - - - - - - - - - - - - - - - +-------------------------------+
-|                               |Masking-key, if MASK set to 1  |
-+-------------------------------+-------------------------------+
-| Masking-key (continued)       |          Payload Data         |
-+-------------------------------- - - - - - - - - - - - - - - - +
-:                     Payload Data continued ...                :
-+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
-|                     Payload Data continued ...                |
-+---------------------------------------------------------------+
- -

Los RSV1-3 se pueden ignorar, son para las extensiones.

- -

El bit MASK simplemente indica si el mensaje está codificado. Los mensajes del cliente deben estar enmascarados, por lo que tu servidor debe esperar que valga 1. (De hecho, la sección 5.1 de las espeficicaciones  dice que tu servidor debe desconectarse de un cliente si ese cliente envía un mensaje sin enmascarar). Cuando se envía una trama al cliente, no lo ocultes y no pongas el bit de la máscara. Te explicaremos el enmascaramiento más tarde. Nota: Tienes que enmascarar los mensajes incluso cuando uses un socket seguro.

- -

El campo opcode define cómo interpretar los datos de la carga útil:0x0 para continuar, 0x1 para texto (que siempre se codifica con UTF-8), 0x2 para datos binarios, otros llamados "códigos de control" se explican más tarde. En esta versión de WebSockets, de 0x3 a 0x7 y de 0xB a 0xF no tienen significado.

- -

El bit FIN indica si este es el último mensaje de una serie. Si es 0, el servidor seguirá escuchando más partes del mensaje; de lo contrario, el servidor debería considerar el mensaje entregado. Más sobre esto después.

- -

Decoding Payload Length

- -

To read the payload data, you must know when to stop reading. That's why the payload length is important to know. Unfortunately, this is somewhat complicated. To read it, follow these steps:

- -
    -
  1. Read bits 9-15 (inclusive) and interpret that as an unsigned integer. If it's 125 or less, then that's the length; you're done. If it's 126, go to step 2. If it's 127, go to step 3.
    2. -
  2. Read the next 16 bits and interpret those as an unsigned integer. You're done.
    3. -
  3. Read the next 64 bits and interpret those as an unsigned integer. You're done.
    4. -
- -

Reading and Unmasking the Data

- -

If the MASK bit was set (and it should be, for client-to-server messages), read the next 4 octets (32 bits); this is the masking key. Once the payload length and masking key is decoded, you can go ahead and read that number of bytes from the socket. Let's call the data ENCODED, and the key MASK. To get DECODED, loop through the octets (bytes a.k.a. characters for text data) of ENCODED and XOR the octet with the (i modulo 4)th octet of MASK. In pseudo-code (that happens to be valid JavaScript):

- -
var DECODED = "";
-for (var i = 0; i < ENCODED.length; i++) {
-    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
-}
- -

Now you can figure out what DECODED means depending on your application.

- -

Message Fragmentation

- -

The FIN and opcode fields work together to send a message split up into separate frames.  This is called message fragmentation. Fragmentation is only available on opcodes 0x0 to 0x2.

- -

Recall that the opcode tells what a frame is meant to do. If it's 0x1, the payload is text. If it's 0x2, the payload is binary data. However, if it's 0x0, the frame is a continuation frame. This means the server should concatenate the frame's payload to the last frame it received from that client. Here is a rough sketch, in which a server reacts to a client sending text messages. The first message is sent in a single frame, while the second message is sent across three frames. FIN and opcode details are shown only for the client:

- -
Client: FIN=1, opcode=0x1, msg="hello"
-Server: (process complete message immediately) Hi.
-Client: FIN=0, opcode=0x1, msg="and a"
-Server: (listening, new message containing text started)
-Client: FIN=0, opcode=0x0, msg="happy new"
-Server: (listening, payload concatenated to previous message)
-Client: FIN=1, opcode=0x0, msg="year!"
-Server: (process complete message) Happy new year to you too!
- -

Notice the first frame contains an entire message (has FIN=1 and opcode!=0x0), so the server can process or respond as it sees fit. The second frame sent by the client has a text payload (opcode=0x1), but the entire message has not arrived yet (FIN=0). All remaining parts of that message are sent with continuation frames (opcode=0x0), and the final frame of the message is marked by FIN=1. Section 5.4 of the spec describes message fragmentation.

- -

Pings and Pongs: The Heartbeat of WebSockets

- -

At any point after the handshake, either the client or the server can choose to send a ping to the other party. When the ping is received, the recipient must send back a pong as soon as possible. You can use this to make sure that the client is still connected, for example.

- -

A ping or pong is just a regular frame, but it's a control frame. Pings have an opcode of 0x9, and pongs have an opcode of 0xA. When you get a ping, send back a pong with the exact same Payload Data as the ping (for pings and pongs, the max payload length is 125). You might also get a pong without ever sending a ping; ignore this if it happens.

- -
-

If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.

-
- -

Step 4: Closing the connection

- -

To close a connection either the client or server can send a control frame with data containing a specified control sequence to begin the closing handshake (detailed in Section 5.5.1). Upon receiving such a frame, the other peer sends a Close frame in response. The first peer then closes the connection. Any further data received after closing of connection is then discarded. 

- -

Miscellaneous

- -
-

WebSocket codes, extensions, subprotocols, etc. are registered at the IANA WebSocket Protocol Registry.

-
- -

WebSocket extensions and subprotocols are negotiated via headers during the handshake. Sometimes extensions and subprotocols seem too similar to be different things, but there is a clear distinction. Extensions control the WebSocket frame and modify the payload, while subprotocols structure the WebSocket payload and never modify anything. Extensions are optional and generalized (like compression); subprotocols are mandatory and localized (like ones for chat and for MMORPG games).

- -

Extensions

- -
-

This section needs expansion. Please edit if you are equipped to do so.

-
- -

Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the same data in different forms. The recipient will eventually be able to get the same data as your local copy, but it is sent differently. That's what an extension does. WebSockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format.

- -
-

Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.

-
- -

TODO

- -

Subprotocols

- -

Think of a subprotocol as a custom XML schema or doctype declaration. You're still using XML and its syntax, but you're additionally restricted by a structure you agreed on. WebSocket subprotocols are just like that. They do not introduce anything fancy, they just establish structure. Like a doctype or schema, both parties must agree on the subprotocol; unlike a doctype or schema, the subprotocol is implemented on the server and cannot be externally refered to by the client.

- -
-

Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.

-
- -

A client has to ask for a specific subprotocol. To do so, it will send something like this as part of the original handshake:

- -
GET /chat HTTP/1.1
-...
-Sec-WebSocket-Protocol: soap, wamp
-
-
- -

or, equivalently:

- -
...
-Sec-WebSocket-Protocol: soap
-Sec-WebSocket-Protocol: wamp
-
-
- -

Now the server must pick one of the protocols that the client suggested and it supports. If there are more than one, send the first one the client sent. Imagine our server can use both soap and wamp. Then, in the response handshake, it'll send:

- -
Sec-WebSocket-Protocol: soap
-
-
- -
-

The server can't send more than one Sec-Websocket-Protocol header.
- If the server doesn't want to use any subprotocol, it shouldn't send any Sec-WebSocket-Protocol header. Sending a blank header is incorrect.
- The client may close the connection if it doesn't get the subprotocol it wants.

-
- -

If you want your server to obey certain subprotocols, then naturally you'll need extra code on the server. Let's imagine we're using a subprotocol json. In this subprotocol, all data is passed as JSON. If the client solicits this protocol and the server wants to use it, the server will need to have a JSON parser. Practically speaking, this will be part of a library, but the server will need to pass the data around.

- -
-

Tip: To avoid name conflict, it's recommended to make your subprotocol name part of a domain string. If you are building a custom chat app that uses a proprietary format exclusive to Example Inc., then you might use this: Sec-WebSocket-Protocol: chat.example.com. For different versions, a widely-used method is to add a / followed by the version number, like chat.example.com/2.0. Note that this isn't required, it's just an optional convention, and you can use any string you wish.

-
- - - - diff --git a/files/es/web/api/websockets_api/writing_websocket_server/index.html b/files/es/web/api/websockets_api/writing_websocket_server/index.html new file mode 100644 index 0000000000..333e8e8830 --- /dev/null +++ b/files/es/web/api/websockets_api/writing_websocket_server/index.html @@ -0,0 +1,244 @@ +--- +title: Escribiendo un servidor WebSocket en C# +slug: Web/API/WebSockets_API/Escribiendo_servidor_WebSocket +tags: + - HTML5 + - Tutorial + - WebSockets +translation_of: Web/API/WebSockets_API/Writing_WebSocket_server +--- +

Introducción

+ +

Si deseas utilizar la API WebSocket, es conveniente si tienes un servidor. En este artículo te mostraré como puedes escribir uno en C#. Tú puedes hacer esto en cualquier lenguaje del lado del servidor, pero para mantener las cosas simples y más comprensibles, elegí el lenguaje de Microsoft.

+ +

Este servidor se ajusta a RFC 6455 por lo que solo manejará las conexiones de Chrome version 16, Firefox 11, IE 10 and superiores.

+ +

Primeros pasos

+ +

WebSocket se comunica a través de conexiones TCP (Transmission Control Protocol), afortunadamente C# tiene una clase TcpListener la cual hace lo que su nombre sugiere. Esta se encuentra en el namespace System.Net.Sockets.

+ +
+

Es una buena idea usar la instrucción using para escribir menos. Eso significa que no tendrás que re escribir el namespace de nuevo en cada ocasión.

+
+ +

TcpListener

+ +

Constructor:

+ +
TcpListener(System.Net.IPAddress localaddr, int port)
+ +

localaddr especifica la IP a escuchar y port especifica el puerto.

+ +
+

Para crear un objeto IPAddress desde un string, usa el método estático Parse de IPAddres.

+
+ +

Métodos:

+ +
    +
  • Start()
    • +
  • System.Net.Sockets.TcpClient AcceptTcpClient()
    + Espera por una conexión TCP, la acepta y la devuelve como un objeto TcpClient.
    • +
+ +

Aquí está como utilizar lo que hemos aprendido:

+ +
​using System.Net.Sockets;
+using System.Net;
+using System;
+
+class Server {
+    public static void Main() {
+        TcpListener server = new TcpListener(IPAddress.Parse("127.0.0.1"), 80);
+
+        server.Start();
+        Console.WriteLine("El server se ha iniciado en 127.0.0.1:80.{0}Esperando una conexión...", Environment.NewLine);
+
+        TcpClient client = server.AcceptTcpClient();
+
+        Console.WriteLine("Un cliente conectado.");
+    }
+}
+
+ +

TcpClient

+ +

Métodos:

+ +
    +
  • System.Net.Sockets.NetworkStream GetStream()
    + Obtiene el stream del canal de comunicación. Ambos lados del canal tienen capacidad de lectura y escritura.
    • +
+ +

Propiedades:

+ +
    +
  • int Available
    + Este es el número de bytes de datos que han sido enviados. El valor es cero hasta que NetworkStream.DataAvailable es true.
    • +
+ +

NetworkStream

+ +

Métodos:

+ +
Write(Byte[] buffer, int offset, int size)
+ +

Escribe bytes desde el buffer; el offset y el size determinan la longitud del mensaje.

+ +
Read(Byte[] buffer, int offset, int size)
+ +

Lee bytes al buffer; el offset y el size determinan la longitud del mensaje.

+ +

Ampliemos nuestro ejemplo anterior.

+ +
TcpClient client = server.AcceptTcpClient();
+
+Console.WriteLine("Un cliente conectado.");
+
+NetworkStream stream = client.GetStream();
+
+//enter to an infinite cycle to be able to handle every change in stream
+while (true) {
+    while (!stream.DataAvailable);
+
+    Byte[] bytes = new Byte[client.Available];
+
+    stream.Read(bytes, 0, bytes.Length);
+}
+ +

Handshaking

+ +

Cuando un cliente se conecta al servidor, envía una solicitud GET para actualizar la conexión al WebSocket desde una simple petición HTTP. Esto es conocido como handshaking.

+ +

Este código de ejemplo detecta el GET desde el cliente. Nota que esto bloqueará hasta los 3 primeros bytes del mensaje disponible. Soluciones alternativas deben ser investigadas para ambientes de producción.

+ +
using System.Text;
+using System.Text.RegularExpressions;
+
+while(client.Available < 3)
+{
+   // wait for enough bytes to be available
+}
+
+Byte[] bytes = new Byte[client.Available];
+
+stream.Read(bytes, 0, bytes.Length);
+
+//translate bytes of request to string
+String data = Encoding.UTF8.GetString(bytes);
+
+if (Regex.IsMatch(data, "^GET")) {
+
+} else {
+
+}
+ +

Esta respuesta es fácil de construir, pero puede ser un poco díficil de entender. La explicación completa del handshake al servidor puede encontrarse en  RFC 6455, section 4.2.2. Para nuestros propósitos, solo construiremos una respuesta simple.

+ +

Debes:

+ +
    +
  1. Obtener el valor de "Sec-WebSocket-Key" sin espacios iniciales ni finales de el encabezado de la solicitud
    2. +
  2. Concatenarlo con "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
    3. +
  3. Calcular el código SHA-1 y Base64
    4. +
  4. Escribe el valor Sec-WebSocket-Accept en el encabezado como parte de la respuesta HTTP.
    5. +
+ +
if (new Regex("^GET").IsMatch(data)) {
+    Byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + Environment.NewLine
+        + "Connection: Upgrade" + Environment.NewLine
+        + "Upgrade: websocket" + Environment.NewLine
+        + "Sec-WebSocket-Accept: " + Convert.ToBase64String (
+            SHA1.Create().ComputeHash (
+                Encoding.UTF8.GetBytes (
+                    new Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups[1].Value.Trim() + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
+                )
+            )
+        ) + Environment.NewLine
+        + Environment.NewLine);
+
+    stream.Write(response, 0, response.Length);
+}
+
+ +

Decoding messages

+ +

Luego de un handshake exitoso el cliente puede enviar mensajes al servidor, pero estos serán codificados.

+ +

Si nosotros enviamos "MDN", obtendremos estos bytes:

+ + + + + + + + + + + + + + + +
129131618435611216109
+ +

- 129:

+ + + + + + + + + + + + + + + + + + + + +
FIN (¿Es el mensaje completo?)RSV1RSV2RSV3Opcode
10000x1=0001
+ +

FIN: Puedes enviar tu mensaje en marcos, pero ahora debe mantener las cosas simples.
+ Opcode 0x1 significa que es un texto. Lista completa de Opcodes

+ +

- 131:

+ +

Si el segundo byte menos 128 se encuentra entre 0 y 125, esta es la longitud del mensaje. Si es 126, los siguientes 2 bytes (entero sin signo de 16 bits), si es 127, los siguientes 8 bytes (entero sin signo de 64 bits) son la longitud.

+ +
+

Puedo tomar 128, porque el primer bit siempre es 1.

+
+ +

- 61, 84, 35 y 6 son los bytes de la clave a decodificar. Cambian en cada oportunidad.

+ +

- Los bytes codificados restantes son el mensaje.

+ +

Algoritmo de decodificación

+ +

byte decodificado = byte codificado XOR (posición del byte codificado Mod 4) byte de la clave

+ +

Ejemplo en C#:

+ +
Byte[] decoded = new Byte[3];
+Byte[] encoded = new Byte[3] {112, 16, 109};
+Byte[] key = Byte[4] {61, 84, 35, 6};
+
+for (int i = 0; i < encoded.Length; i++) {
+    decoded[i] = (Byte)(encoded[i] ^ key[i % 4]);
+}
+ +

Relacionado

+ + + +
 
diff --git a/files/es/web/api/websockets_api/writing_websocket_servers/index.html b/files/es/web/api/websockets_api/writing_websocket_servers/index.html new file mode 100644 index 0000000000..1261f75bec --- /dev/null +++ b/files/es/web/api/websockets_api/writing_websocket_servers/index.html @@ -0,0 +1,246 @@ +--- +title: Escribir servidores WebSocket +slug: Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket +translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers +--- +

{{gecko_minversion_header("2")}}

+ +

Introducción

+ +

Un servidor WebSocket es simplemente una aplicación TCP que escucha en cualquier puerto de un servidor que sigue un protocolo específico. La tarea de crear un servidor propio personalizado suele asustar a los desarrolladores, sin embargo puede resultar muy fácil implementar un servidor WebSocket en la plataforma que elijas.

+ +

Un servidor WebSocket puede ser escrito en cualquier lenguaje de programación Server-Side que sea soporte Berkeley Sockets, como por ejemplo C++ o Python o inclusive PHP y JavaScript para servidores. Este no va a ser un tutorial para ningún lenguaje espefícamente sino que te ayudará a escribir tu propio servidor.
+
+ Necesitarás conocer como trabaja el protocolo HTTP y una experiencia intermedia en programación. Dependiendo de las capacidades de tu lenguaje puede ser necesario tener conocimientos en sockets TCP. Esta guía te dará el conocimiento necesario para escribir un servidor con WebSocket.

+ +
+

Lea las últimas especificaciones oficiales de WebSocket RFC 6455. Las secciones 1 y 4-7 son especialmente interesantes para personas que deseen implementar servidores. La sección 10 abarca temas de seguridad y definitivamente deberías leerla antes de exponer tu servidor a la red.

+
+ +

Un servidor WebSocket es explicado a un muy bajo nivel aquí. Los servidores WebSocket usualmente estan separados y especializados (por una cuestión de balance de cargas y otra razones prácticas), por lo tanto deberías usar un Reverse Proxy (semejante a un servidor HTTP común) casi siempre para detectar los Handshakes de WebSocket, preprocesarlos, y reenviar los datos de los clientes al servidor WebSocket real.
+  

+ +

Paso 1: El Handshake del WebSocket

+ +

Antes que nada, el servidor debe escuchar las conexiones entrantes usando un socket TCP estandar. Dependiendo de tu plataforma, esto puede ser manejado por tí. Por ejemplo asumamos que tu servidor esta escuchando la dirección example.com en el puerto 8000, y tu socket en el servidor responde a la petición GET con /chat.

+ +
+

Advertencia: El servidor puede escuchar cualquier puerto que elijas, pero si elijes un puerto diferente al 80 o 443 podría haber problemas con los firewalls y proxies. Suele suceder con el puerto 443 tambien pero para eso se necesita un conexión segura (TLS/SSL). También se debe aclarar que la mayoría de los navegadores (como Firefox 8 o superiores) no permiten conexiones a servidores WebSocket sin seguridad que se realicen desde páginas web con seguridad (HTTPS). 

+
+ +

El Handshake es el puente desde HTTP a WS. En el Handshake se negocian los detalles de la conexión y cualquier de las partes pueden abandonar el proceso antes de completar dicha conexión si los términos no son favorables. El servidor debe ser cuidadoso al analizar lo que el cliente pide, de lo contrario podrían introducirse problemas de seguridad.

+ +

Petición de Handshake en el cliente

+ +

A pesar de que estamos creando un servidor, un cliente es quien tiene que comenzar el proceso de Handshake de WebSocket. Entonces tú tienes que saber cómo interpretar la petición del cliente. El cliente enviará una linda petición HTTP estandar que lucirá algo asi (la versión del HTTP debe ser 1.1 o mayor y el método debe ser GET):

+ +
GET /chat HTTP/1.1
+Host: example.com:8000
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
+Sec-WebSocket-Version: 13
+
+
+ +

El cliente puede solicitar aquí extensiones y/o sub protocolos; vea Misceláneos para más detalles. También, cabeceras comunes como User-Agent, Referer, Cookie, or cabeceras de autenticación podrían ser incluidos. Haz lo que quieras con ellos; no pertencen a WebSocket. También puedes ignorarlos. En muchas configuraciones comunes, un proxy inverso ya ha tratado con ellos.

+ +

Si alguna cabecera no se entiende o posee un valor incorrecto, el servidor debe responder "400 Bad Request" e inmediatamente cerrar la conexión. Normalmente, también puede dar la razón porque falló el handshake en el cuerpo de la respuesta HTTP, pero el mensaje podría no ser mostrado (el browser no lo muestra). Si el servidor no comprende que la versión del WebSockets, debería enviar una cabecera Sec-WebSocket-Version que contenga la(s) versión(es) no entendidas. (Esta guía explica v13, la más nueva). Ahora, vamos a ver la cabecera más curiosa, Sec-WebSocket-Key.

+ +
+

Tip: Todos los navegadores deben enviar una cabecera Origin. Tu puedes usar esta cabecera por seguridad (revisando por el mismo origen, listas blancas/ listas negras, etc.) y enviar un 403 Forbidden si no te gusta lo que ves. Sin embargo, se advierte que los agentes no navegadores pueden enviar un falso Origin.  La mayoría de las aplicaciones rechazaran las solicitudes sin esta cabecera.

+
+ +
+

Tip: The request-uri (/chat here) has no defined meaning in the spec. So many people cleverly use it to let one server handle multiple WebSocket applications. For example, example.com/chat could invoke a multiuser chat app, while /game on the same server might invoke a multiplayer game.

+
+ +
+

Note: Regular HTTP status codes can only be used before the handshake. After the handshake succeeds, you have to use a different set of codes (defined in section 7.4 of the spec).

+
+ +

Respuesta de Handshake del servidor

+ +

Después de la petición, el servidor debería enviar una linda respuesta (aunque todavía en formato HTTP) que se verá asi (hay que recordar que la cabecera termina con \r \n y agrega un \r \n extra después del último):

+ +
HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+
+
+ +

Adicionalmente, el servidor puede decidir respecto de las solicitudes "extension/subprotocol" en este punto (ver Miscelláneos para más detalles). La cabecera Sec-WebSocket-Accept es interesante. El servidor debe derivarla a partir de la cabecera Sec-WebSocket-Key enviada anteriormente por el cliente. Para lograr esto se deben concatenar la cabecera del cliente Sec-WebSocket-Key y el string "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (es un "magic string"), calcular el hash SHA-1 del resultado y devolver el string codificado en base64 de este hash.

+ +
+

FYI: Este aparentemente complicado e innecesario proceso se realiza de manera que sea obvio para el cliente si el servidor soporta o noWebSockets. Esto es importante de realizar, ya que podrían crearse problemas de seguridad si el servidor acepta conexiones WebSockets pero interpreta los datos como solicitudes HTTP.

+
+ +

Así, si la cabecera Sec-WebSocket-Key era "dGhlIHNhbXBsZSBub25jZQ==", la correspondiente respuesta Sec-WebSocket-Accept será "s3pPLMBiTxaQ9kYGzzhZRbK+xOo=". Una vez que el servidor envía estas cabeceras, el "handshake" se considera completo y puedes comenzar a intercambiar datos.

+ +
+

El servidor puede enviar otras cabeceras como Set-Cookie, o solicitar autenticación o redirigir mediante otros status codes antes de responder al handshake.

+
+ +

Llevando registro de los clientes

+ +

Esto no está directamente relacionado con el protocolo WebSocket, pero no está de más mencionarlo: tu servidor debe llevar el registro de los sockets de los clientes, de manera de no realizar handshakes constantemente con los clientes que ya han completado este proceso. La misma dirección IP cliente puede intentar conectarse múltiples veces (pero el servidor puede denegar la conexión si se intentan demasiadas conexiones con el objetivo de evitar ataques ataques DoS).

+ +

Paso 2: Intercambiando Data Frames

+ +

Tanto el cliente como el servidor puede decidir enviar un mensaje en cualquier momento — ese es el encanto de los WebSockets. Sin embargo, extraer información de esos denominados "frames" o tramas de datos no es una experiencia muy mágica. Aunque todos los frames siguen el mismo formato específico, los datos que van del cliente al servidor se enmascaran utilizando el cifrado XOR (con una clave de 32 bits). La sección 5 de la especificación describe esto en detalle.

+ +

Formato

+ +

Cada trama de datos (desde el cliente al servidor o viceversa) sigue este mismo formato:

+ +
 0                   1                   2                   3
+ 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
++-+-+-+-+-------+-+-------------+-------------------------------+
+|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
+|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
+|N|V|V|V|       |S|             |   (if payload len==126/127)   |
+| |1|2|3|       |K|             |                               |
++-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+|     Extended payload length continued, if payload len == 127  |
++ - - - - - - - - - - - - - - - +-------------------------------+
+|                               |Masking-key, if MASK set to 1  |
++-------------------------------+-------------------------------+
+| Masking-key (continued)       |          Payload Data         |
++-------------------------------- - - - - - - - - - - - - - - - +
+:                     Payload Data continued ...                :
++ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+|                     Payload Data continued ...                |
++---------------------------------------------------------------+
+ +

Los RSV1-3 se pueden ignorar, son para las extensiones.

+ +

El bit MASK simplemente indica si el mensaje está codificado. Los mensajes del cliente deben estar enmascarados, por lo que tu servidor debe esperar que valga 1. (De hecho, la sección 5.1 de las espeficicaciones  dice que tu servidor debe desconectarse de un cliente si ese cliente envía un mensaje sin enmascarar). Cuando se envía una trama al cliente, no lo ocultes y no pongas el bit de la máscara. Te explicaremos el enmascaramiento más tarde. Nota: Tienes que enmascarar los mensajes incluso cuando uses un socket seguro.

+ +

El campo opcode define cómo interpretar los datos de la carga útil:0x0 para continuar, 0x1 para texto (que siempre se codifica con UTF-8), 0x2 para datos binarios, otros llamados "códigos de control" se explican más tarde. En esta versión de WebSockets, de 0x3 a 0x7 y de 0xB a 0xF no tienen significado.

+ +

El bit FIN indica si este es el último mensaje de una serie. Si es 0, el servidor seguirá escuchando más partes del mensaje; de lo contrario, el servidor debería considerar el mensaje entregado. Más sobre esto después.

+ +

Decoding Payload Length

+ +

To read the payload data, you must know when to stop reading. That's why the payload length is important to know. Unfortunately, this is somewhat complicated. To read it, follow these steps:

+ +
    +
  1. Read bits 9-15 (inclusive) and interpret that as an unsigned integer. If it's 125 or less, then that's the length; you're done. If it's 126, go to step 2. If it's 127, go to step 3.
    2. +
  2. Read the next 16 bits and interpret those as an unsigned integer. You're done.
    3. +
  3. Read the next 64 bits and interpret those as an unsigned integer. You're done.
    4. +
+ +

Reading and Unmasking the Data

+ +

If the MASK bit was set (and it should be, for client-to-server messages), read the next 4 octets (32 bits); this is the masking key. Once the payload length and masking key is decoded, you can go ahead and read that number of bytes from the socket. Let's call the data ENCODED, and the key MASK. To get DECODED, loop through the octets (bytes a.k.a. characters for text data) of ENCODED and XOR the octet with the (i modulo 4)th octet of MASK. In pseudo-code (that happens to be valid JavaScript):

+ +
var DECODED = "";
+for (var i = 0; i < ENCODED.length; i++) {
+    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+}
+ +

Now you can figure out what DECODED means depending on your application.

+ +

Message Fragmentation

+ +

The FIN and opcode fields work together to send a message split up into separate frames.  This is called message fragmentation. Fragmentation is only available on opcodes 0x0 to 0x2.

+ +

Recall that the opcode tells what a frame is meant to do. If it's 0x1, the payload is text. If it's 0x2, the payload is binary data. However, if it's 0x0, the frame is a continuation frame. This means the server should concatenate the frame's payload to the last frame it received from that client. Here is a rough sketch, in which a server reacts to a client sending text messages. The first message is sent in a single frame, while the second message is sent across three frames. FIN and opcode details are shown only for the client:

+ +
Client: FIN=1, opcode=0x1, msg="hello"
+Server: (process complete message immediately) Hi.
+Client: FIN=0, opcode=0x1, msg="and a"
+Server: (listening, new message containing text started)
+Client: FIN=0, opcode=0x0, msg="happy new"
+Server: (listening, payload concatenated to previous message)
+Client: FIN=1, opcode=0x0, msg="year!"
+Server: (process complete message) Happy new year to you too!
+ +

Notice the first frame contains an entire message (has FIN=1 and opcode!=0x0), so the server can process or respond as it sees fit. The second frame sent by the client has a text payload (opcode=0x1), but the entire message has not arrived yet (FIN=0). All remaining parts of that message are sent with continuation frames (opcode=0x0), and the final frame of the message is marked by FIN=1. Section 5.4 of the spec describes message fragmentation.

+ +

Pings and Pongs: The Heartbeat of WebSockets

+ +

At any point after the handshake, either the client or the server can choose to send a ping to the other party. When the ping is received, the recipient must send back a pong as soon as possible. You can use this to make sure that the client is still connected, for example.

+ +

A ping or pong is just a regular frame, but it's a control frame. Pings have an opcode of 0x9, and pongs have an opcode of 0xA. When you get a ping, send back a pong with the exact same Payload Data as the ping (for pings and pongs, the max payload length is 125). You might also get a pong without ever sending a ping; ignore this if it happens.

+ +
+

If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.

+
+ +

Step 4: Closing the connection

+ +

To close a connection either the client or server can send a control frame with data containing a specified control sequence to begin the closing handshake (detailed in Section 5.5.1). Upon receiving such a frame, the other peer sends a Close frame in response. The first peer then closes the connection. Any further data received after closing of connection is then discarded. 

+ +

Miscellaneous

+ +
+

WebSocket codes, extensions, subprotocols, etc. are registered at the IANA WebSocket Protocol Registry.

+
+ +

WebSocket extensions and subprotocols are negotiated via headers during the handshake. Sometimes extensions and subprotocols seem too similar to be different things, but there is a clear distinction. Extensions control the WebSocket frame and modify the payload, while subprotocols structure the WebSocket payload and never modify anything. Extensions are optional and generalized (like compression); subprotocols are mandatory and localized (like ones for chat and for MMORPG games).

+ +

Extensions

+ +
+

This section needs expansion. Please edit if you are equipped to do so.

+
+ +

Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the same data in different forms. The recipient will eventually be able to get the same data as your local copy, but it is sent differently. That's what an extension does. WebSockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format.

+ +
+

Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.

+
+ +

TODO

+ +

Subprotocols

+ +

Think of a subprotocol as a custom XML schema or doctype declaration. You're still using XML and its syntax, but you're additionally restricted by a structure you agreed on. WebSocket subprotocols are just like that. They do not introduce anything fancy, they just establish structure. Like a doctype or schema, both parties must agree on the subprotocol; unlike a doctype or schema, the subprotocol is implemented on the server and cannot be externally refered to by the client.

+ +
+

Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.

+
+ +

A client has to ask for a specific subprotocol. To do so, it will send something like this as part of the original handshake:

+ +
GET /chat HTTP/1.1
+...
+Sec-WebSocket-Protocol: soap, wamp
+
+
+ +

or, equivalently:

+ +
...
+Sec-WebSocket-Protocol: soap
+Sec-WebSocket-Protocol: wamp
+
+
+ +

Now the server must pick one of the protocols that the client suggested and it supports. If there are more than one, send the first one the client sent. Imagine our server can use both soap and wamp. Then, in the response handshake, it'll send:

+ +
Sec-WebSocket-Protocol: soap
+
+
+ +
+

The server can't send more than one Sec-Websocket-Protocol header.
+ If the server doesn't want to use any subprotocol, it shouldn't send any Sec-WebSocket-Protocol header. Sending a blank header is incorrect.
+ The client may close the connection if it doesn't get the subprotocol it wants.

+
+ +

If you want your server to obey certain subprotocols, then naturally you'll need extra code on the server. Let's imagine we're using a subprotocol json. In this subprotocol, all data is passed as JSON. If the client solicits this protocol and the server wants to use it, the server will need to have a JSON parser. Practically speaking, this will be part of a library, but the server will need to pass the data around.

+ +
+

Tip: To avoid name conflict, it's recommended to make your subprotocol name part of a domain string. If you are building a custom chat app that uses a proprietary format exclusive to Example Inc., then you might use this: Sec-WebSocket-Protocol: chat.example.com. For different versions, a widely-used method is to add a / followed by the version number, like chat.example.com/2.0. Note that this isn't required, it's just an optional convention, and you can use any string you wish.

+
+ + + + diff --git a/files/es/web/api/window/beforeunload_event/index.html b/files/es/web/api/window/beforeunload_event/index.html new file mode 100644 index 0000000000..98fb747ae9 --- /dev/null +++ b/files/es/web/api/window/beforeunload_event/index.html @@ -0,0 +1,215 @@ +--- +title: beforeunload +slug: Web/Events/beforeunload +translation_of: Web/API/Window/beforeunload_event +--- +
El evento beforeunload es disparado cuando la ventana, el documento y sus recursos estan a punto de ser descargados. El documento todavia es visible y el evento todavia es cancelable en este punto.
+ +
 
+ +

Si es asignado un string a la propiedad del objeto Evento returnValue, una caja de dialogo aparece, preguntando al usuario que confirme que dejara la pagina(mirar el ejemplo de abajo).  Algunos navegadores muestran el string devuelto en una caja de dialogos, otros muestran un mensaje fijo. Si no se provee ningun valor, el evento procede silenciosamente.

+ +
+

Nota:Para combatir pop-ups indeseados, los navegadores pueden no mostrar mensajes creados en manejadores del evento beforeunload a menos que se haya interactuado con la pagina, o incluso sin que se haya interactuado en nada con esta.

+
+ + + + + + + + + + + + + + + + + + + + +
BurbujasNo
CancelableSi
Objetos de destinodefaultView
Interfaz{{domxref("Event")}}
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipoDescripcion
target {{readOnlyInline}}{{domxref("EventTarget")}}El evento objetivo(el objetivo superior en el arbol del DOM).
type {{readOnlyInline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readOnlyInline}}{{jsxref("Boolean")}}El evento normalmente burbujea?
cancelable {{readOnlyInline}}{{jsxref("Boolean")}}Es posible cancelar el evento?
returnValue{{domxref("DOMString")}}El valor actual devuelto por el evento (el mensaje que se le mostrara al usuario).
+ +

Ejemplos

+ +
window.addEventListener("beforeunload", function (event) {
+  event.returnValue = "\o/";
+});
+
+// es equivalente a
+window.addEventListener("beforeunload", function (event) {
+  event.preventDefault();
+});
+ +

Navegadores basados en WebKit no siguen las especificaciones para la caja de dialogos. Un ejemplo que funcione con distintos navegadores seria similar al siguiente:

+ +
window.addEventListener("beforeunload", function (e) {
+  var confirmationMessage = "\o/";
+
+  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
+  return confirmationMessage;              // Gecko, WebKit, Chrome <34
+});
+ +

Notas

+ +

A partir del 25 de Mayo del 2011, la especificion HTML5 establece que llamadas a los metodos {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, y {{domxref("window.prompt()")}}pueden ser ignoradas durante este evento.Mire las especificaciones de HTML5 para mas detalles.

+ +

Varios navegadores ignoran el resultado del evento y no le preguntan al usuario por confirmacion en absoluto. El documento siempre se descargara automaticamente. Firefox tiene un switch llamado dom.disable_beforeunload en about:config  para habilitar este comportamiento.

+ +

Usando este manejador de evento tu pagina previene que Firefox cambie el cache de la pagina a uno en memoria bfcache. Mire Usando el almacenamiento en cache Firefox 1.5 para detalles.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}{{Spec2("HTML5 W3C")}}Definicion inicial
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte basico{{CompatChrome(1.0)}}{{CompatVersionUnknown}}14123
Texto personalizado soporte removido{{CompatChrome(51.0)}}{{CompatNo}}{{CompatGeckoMobile("44.0")}} 389.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Soporte basico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}(no) defect{{CompatVersionUnknown}}
Texto personalizado soporte removido{{CompatUnknown}}{{CompatChrome(51.0)}}{{CompatNo}}{{CompatGeckoMobile("44.0")}}   {{CompatChrome(51.0)}}
+
+ +

Mire tambien

+ + diff --git a/files/es/web/api/window/domcontentloaded_event/index.html b/files/es/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..ffbf3accbc --- /dev/null +++ b/files/es/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,148 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +translation_of: Web/API/Window/DOMContentLoaded_event +--- +

El evento DOMContentLoaded es disparado cuando el documento HTML ha sido completamente cargado y parseado, sin esperar hojas de estilo, images y subframes para  finalizar la carga. Un evento muy diferente - load - debería ser usado solo para detectar una carga completa de la página. Es un error increíblemente popular usar load cuando DOMContentLoaded sería mucho más apropiado, así que úsalo con cuidado.

+ +

JavaScript síncrono pausa el parseo del DOM.

+ +

También hay mucho propósito general y bibliotecas autónomas que ofrecen métodos de navegador cruzado para detectar que el DOM está preparado.

+ +

Speeding up

+ +

If you want DOM to get parsed as fast as possible after the user had requested the page, some things you could do is turn your JavaScript asynchronous and to optimize loading of stylesheets which if used as usual, slow down page load due to being loaded in parallel, "stealing" traffic from the main html document.

+ +

General info

+ +
+
Specification
+
HTML5
+
Interface
+
Event
+
Bubbles
+
Yes
+
Cancelable
+
Yes (although specified as a simple event that isn't cancelable)
+
Target
+
Document
+
Default Action
+
None.
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Example

+ +
<script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+</script>
+
+ +
<script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+
+for(var i=0; i<1000000000; i++)
+{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
+</script>
+
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0[1]{{CompatGeckoDesktop("1")}}[1]9.0[2]9.03.1[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}[1]{{CompatGeckoMobile("1")}}[1]{{CompatUnknown}}[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
+
+ +

[1] Bubbling for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4.

+ +

[2] Internet Explorer 8 supports the readystatechange event, which can be used to detect when the DOM is ready. In earlier versions of Internet Explorer, this state can be detected by repeatedly trying to execute document.documentElement.doScroll("left");, as this snippet will throw an error until the DOM is ready.

+ + + +
    +
  • {{event("DOMContentLoaded")}}
    • +
  • {{event("readystatechange")}}
    • +
  • {{event("load")}}
    • +
  • {{event("beforeunload")}}
    • +
  • {{event("unload")}}
    • +
diff --git a/files/es/web/api/window/load_event/index.html b/files/es/web/api/window/load_event/index.html new file mode 100644 index 0000000000..f38e214839 --- /dev/null +++ b/files/es/web/api/window/load_event/index.html @@ -0,0 +1,125 @@ +--- +title: load +slug: Web/Events/load +tags: + - Evento +translation_of: Web/API/Window/load_event +--- +

El evento load se dispara cuando un recurso y sus recursos dependientes han terminado de cargar.

+ +

 

+ +

Ejemplos

+ +

Window

+ +
<script>
+  window.addEventListener("load", function(event) {
+    console.log("'Todos los recursos terminaron de cargar!");
+  });
+</script>
+ +

Elemento script

+ +
<script>
+  var script = document.createElement("script");
+  script.addEventListener("load", function(event) {
+    console.log("Script terminó de cargarse y ejecutarse");
+  });
+  script.src = "http://example.com/example.js";
+  script.async = true;
+  document.getElementsByTagName("script")[0].parentNode.appendChild(script);
+</script>
+ +

Información general

+ +
+
Especificación
+
DOM L3
+
Interfaz
+
UIEvent
+
Propagación
+
No
+
Cancelable
+
No
+
Objetivo
+
Window,Document,Element
+
Por defecto Acción
+
None.
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipoDescripción
target {{readonlyInline}}{{domxref("EventTarget")}}El objetivo del evento (el objetivo superior en el árbol DOM).
type {{readonlyInline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readonlyInline}}{{domxref("Boolean")}}Si el elemento normalmente se propaga (bubbles) o no.
cancelable {{readonlyInline}}{{domxref("Boolean")}}Si el evento es cancelable o no.
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView", "document.defaultView")}} (window del documento)
detail {{readonlyInline}}long (float)0.
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('UI Events', '#event-type-load', 'load')}}{{Spec2('UI Events')}} 
{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}{{Spec2('HTML WHATWG')}}Esto enlaza con la sección en los pasos que se llevan a cabo al final de cargar un documento. Los eventos 'load' también se disparan a muchos elementos. Y tenga en cuenta que hay muchos lugares en la especificación que hacen referencia a cosas que pueden "retrasar el evento de carga".
+ +

Eventos relacionados

+ +
    +
  • {{event("DOMContentLoaded")}}
    • +
  • {{event("readystatechange")}}
    • +
  • {{event("load")}}
    • +
  • {{event("beforeunload")}}
    • +
  • {{event("unload")}}
    • +
diff --git a/files/es/web/api/window/url/index.html b/files/es/web/api/window/url/index.html deleted file mode 100644 index 6ca15914a4..0000000000 --- a/files/es/web/api/window/url/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Window.URL -slug: Web/API/Window/URL -tags: - - API - - DOM - - Propiedad - - Referencia - - Referência DOM - - WebAPI -translation_of: Web/API/URL -translation_of_original: 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/web/api/windowbase64/atob/index.html b/files/es/web/api/windowbase64/atob/index.html deleted file mode 100644 index aa9eeead07..0000000000 --- a/files/es/web/api/windowbase64/atob/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: WindowBase64.atob() -slug: Web/API/WindowBase64/atob -translation_of: Web/API/WindowOrWorkerGlobalScope/atob ---- -

{{APIRef}}

- -

La función WindowBase64.atob() descodifica una cadena de datos que ha sido codificada utilizando la codificación en base-64. Puedes utilizar el método {{domxref("window.btoa()")}} para codificar y transmitir datos que, de otro modo podrían generar problemas de comunicación. Luego de ser transmitidos se puede usar el método window.atob() para decodificar los datos de nuevo. Por ejemplo, puedes codificar, transmitir y decodificar los caracteres de control como valores ASCII 0 a 31.

- -

For use with Unicode or UTF-8 strings, see this note at Base64 encoding and decoding and this note at window.btoa().

- -

Syntax

- -
var decodedData = window.atob(encodedData);
- -

Example

- -
var encodedData = window.btoa("Hello, world"); // encode a string
-var decodedData = window.atob(encodedData); // decode the string
- -

Specifications

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

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1][2]10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though window is not the global object in components.

- -

[2] Starting with Firefox 27, this atob() method ignores all space characters in the argument to comply with the latest HTML5 spec. ({{ bug(711180) }})

- -

See also

- - diff --git a/files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html b/files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html deleted file mode 100644 index c8747777cd..0000000000 --- a/files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: Base64 codificando y decodificando -slug: Web/API/WindowBase64/Base64_codificando_y_decodificando -translation_of: Glossary/Base64 ---- -

Base64 es un grupo de esquemas de codificación de binario a texto que representa los datos binarios mediante una cadena ASCII, traduciéndolos en una representación radix-64. El término Base64 se origina de un sistema de codificación de transmisión de contenido MIME específico.

- -

Los esquemas de codificación Base64 son comúnmente usados cuando se necesita codificar datos binarios para que sean almacenados y transferidos sobre un medio diseñado para tratar con datos textuales. Esto es para asegurar que los datos se mantienen intactos y sin modificaciones durante la transmisión. Base64 es comúnmente usado en muchas aplicaciones, incluyendo la escritura de emails vía MIME y el almacenamiento de datos complejos en XML.

- -

En JavaScript hay dos funciones para decodificar y codificar cadenas base64, respectivamente:

- -
    -
  • {{domxref("WindowBase64.atob","atob()")}}
    • -
  • {{domxref("WindowBase64.btoa","btoa()")}}
    • -
- -

La función atob() decodifica una cadena de datos que ha sido codificada usando la codificación en base 64. Por el contrario, la función btoa() crea una cadena ASCII codificada en base 64 a partir de una "cadena" de datos binarios.

- -

Ambas funciones trabajan sobre cadenas de texto. Si desea trabajar con ArrayBuffers, lea este párrafo.

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

Documentación

- -
-
data URIs
-
Los URIs de datos, definidos por RFC 2397, permiten a los creadores de contenido introducir pequeños ficheros en línea en documentos.
-
Base64
-
Artículo en Wikipedia sobre el sistema de codificación Base64.
-
{{domxref("WindowBase64.atob","atob()")}}
-
Decodifica una cadena de datos que ha sido codificada utilizando base-64.
-
{{domxref("WindowBase64.btoa","btoa()")}}
-
Crea una cadena ASCII codificada en base 64 a partir de una "cadena" de datos binarios.
-
The "Unicode Problem"
-
En la mayoría de navegadores, llamar a btoa() con una cadena Unicode causará una excepción Character Out Of Range. Este párrafo muestra algunas soluciones.
-
URIScheme
-
Lista de esquemas URI soportados por Mozilla.
-
StringView
-
En este artículo está publicada una librería hecha por nosotros con los siguientes objetivos:
-
-
    -
  • crear una interfaz al estilo de C para cadenas (es decir, arrays de códigos de caracteres — ArrayBufferView en JavaScript) basada en la interfaz  ArrayBuffer de JavaScript.
    • -
  • crear una colección de métodos para los que los objetos parecidos a cadenas (de ahora en adelante, stringViews) funcionen estrictamente en arrays de números más que en cadenas JavaScript inmutables.
    • -
  • trabajar con otras codificaciones Unicode diferentes de las DOMStrings UTF-16 por defecto de JavaScript.
    • -
-
-
- -

Ver todo...

- 		-

Herramientas

- - - - - - -
- - - -

El "Problema Unicode"

- -

Como las DOMStrings son cadenas codificadas en 16 bits, en la mayoría de navegadores llamar a window.btoa sobre una cadena Unicode resultará en una excepción Character Out Of Range si un carácter excede el rango de los caracteres ASCII de 8 bits. Hay dos posibles métodos para resolver este problema:

- -
    -
  • el primero es escapar la cadena completa y, entonces, codificarla;
    • -
  • el segundo es convertir la DOMString UTF-16 en un array de caracteres UTF-8 y codificarla.
    • -
- -

Aquí están los dos posibles métodos:

- -

Solución #1 – escapar la cadena antes de codificarla

- -
function utf8_to_b64( str ) {
-  return window.btoa(unescape(encodeURIComponent( str )));
-}
-
-function b64_to_utf8( str ) {
-  return decodeURIComponent(escape(window.atob( str )));
-}
-
-// Uso:
-utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
-b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
- -

Esta solución ha sido propuesta por Johan Sundström.

- -

Otra posible solución sin utilizar las funciones 'unscape' y 'escape', ya obsoletas.

- -
function b64EncodeUnicode(str) {
-    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
-        return String.fromCharCode('0x' + p1);
-    }));
-}
- b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
-
- -

Solución #2 – reescribir atob() y btoa() usando TypedArrays y UTF-8

- -
Nota: El siguiente código también es útil para obtener un ArrayBuffer a partir de una cadena Base64 y/o viceversa (véase abajo). Para una librería completa de arrays tipados, vea este artículo.
- -
"use strict";
-
-/*\
-|*|
-|*|  Base64 / binary data / UTF-8 strings utilities
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding
-|*|
-\*/
-
-/* Decodificación de cadena base64 en array de bytes */
-
-function b64ToUint6 (nChr) {
-
-  return nChr > 64 && nChr < 91 ?
-      nChr - 65
-    : nChr > 96 && nChr < 123 ?
-      nChr - 71
-    : nChr > 47 && nChr < 58 ?
-      nChr + 4
-    : nChr === 43 ?
-      62
-    : nChr === 47 ?
-      63
-    :
-      0;
-
-}
-
-function base64DecToArr (sBase64, nBlocksSize) {
-
-  var
-    sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
-    nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, taBytes = new Uint8Array(nOutLen);
-
-  for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
-    nMod4 = nInIdx & 3;
-    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
-    if (nMod4 === 3 || nInLen - nInIdx === 1) {
-      for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
-        taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
-      }
-      nUint24 = 0;
-
-    }
-  }
-
-  return taBytes;
-}
-
-/* Codificación de array en una cadena Base64 */
-
-function uint6ToB64 (nUint6) {
-
-  return nUint6 < 26 ?
-      nUint6 + 65
-    : nUint6 < 52 ?
-      nUint6 + 71
-    : nUint6 < 62 ?
-      nUint6 - 4
-    : nUint6 === 62 ?
-      43
-    : nUint6 === 63 ?
-      47
-    :
-      65;
-
-}
-
-function base64EncArr (aBytes) {
-
-  var nMod3 = 2, sB64Enc = "";
-
-  for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) {
-    nMod3 = nIdx % 3;
-    if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; }
-    nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24);
-    if (nMod3 === 2 || aBytes.length - nIdx === 1) {
-      sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63));
-      nUint24 = 0;
-    }
-  }
-
-  return sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + (nMod3 === 2 ? '' : nMod3 === 1 ? '=' : '==');
-
-}
-
-/* De array UTF-8 a DOMString y viceversa */
-
-function UTF8ArrToStr (aBytes) {
-
-  var sView = "";
-
-  for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) {
-    nPart = aBytes[nIdx];
-    sView += String.fromCharCode(
-      nPart > 251 && nPart < 254 && nIdx + 5 < nLen ? /* six bytes */
-        /* (nPart - 252 << 30) may be not so safe in ECMAScript! So...: */
-        (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
-      : nPart > 247 && nPart < 252 && nIdx + 4 < nLen ? /* five bytes */
-        (nPart - 248 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
-      : nPart > 239 && nPart < 248 && nIdx + 3 < nLen ? /* four bytes */
-        (nPart - 240 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
-      : nPart > 223 && nPart < 240 && nIdx + 2 < nLen ? /* three bytes */
-        (nPart - 224 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
-      : nPart > 191 && nPart < 224 && nIdx + 1 < nLen ? /* two bytes */
-        (nPart - 192 << 6) + aBytes[++nIdx] - 128
-      : /* nPart < 127 ? */ /* one byte */
-        nPart
-    );
-  }
-
-  return sView;
-
-}
-
-function strToUTF8Arr (sDOMStr) {
-
-  var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0;
-
-  /* mapeando... */
-
-  for (var nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) {
-    nChr = sDOMStr.charCodeAt(nMapIdx);
-    nArrLen += nChr < 0x80 ? 1 : nChr < 0x800 ? 2 : nChr < 0x10000 ? 3 : nChr < 0x200000 ? 4 : nChr < 0x4000000 ? 5 : 6;
-  }
-
-  aBytes = new Uint8Array(nArrLen);
-
-  /* transcripción... */
-
-  for (var nIdx = 0, nChrIdx = 0; nIdx < nArrLen; nChrIdx++) {
-    nChr = sDOMStr.charCodeAt(nChrIdx);
-    if (nChr < 128) {
-      /* un byte */
-      aBytes[nIdx++] = nChr;
-    } else if (nChr < 0x800) {
-      /* dos bytes */
-      aBytes[nIdx++] = 192 + (nChr >>> 6);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    } else if (nChr < 0x10000) {
-      /* tres bytes */
-      aBytes[nIdx++] = 224 + (nChr >>> 12);
-      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    } else if (nChr < 0x200000) {
-      /* cuatro bytes */
-      aBytes[nIdx++] = 240 + (nChr >>> 18);
-      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    } else if (nChr < 0x4000000) {
-      /* cinco bytes */
-      aBytes[nIdx++] = 248 + (nChr >>> 24);
-      aBytes[nIdx++] = 128 + (nChr >>> 18 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    } else /* if (nChr <= 0x7fffffff) */ {
-      /* seis bytes */
-      aBytes[nIdx++] = 252 + (nChr >>> 30);
-      aBytes[nIdx++] = 128 + (nChr >>> 24 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 18 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    }
-  }
-
-  return aBytes;
-
-}
-
- -

Tests

- -
/* Tests */
-
-var sMyInput = "Base 64 \u2014 Mozilla Developer Network";
-
-var aMyUTF8Input = strToUTF8Arr(sMyInput);
-
-var sMyBase64 = base64EncArr(aMyUTF8Input);
-
-alert(sMyBase64);
-
-var aMyUTF8Output = base64DecToArr(sMyBase64);
-
-var sMyOutput = UTF8ArrToStr(aMyUTF8Output);
-
-alert(sMyOutput);
- -

Apéndice: Decodificar una cadena Base64 en Uint8Array o ArrayBuffer

- -

Estas funciones nos permiten crear también uint8Arrays o arrayBuffers a partir de cadenas codificadas en base 64:

- -
var myArray = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network"
-
-var myBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network"
-
-alert(myBuffer.byteLength);
- -
Nota: La función base64DecToArr(sBase64[, nBlocksSize]) devuelve un uint8Array de bytes. Si tu objetivo es construir un búfer de datos crudos de 16, 32 o 64 bits, usa el argumento nBlocksSize, que es el número de bytes de los que la propiedad uint8Array.buffer.bytesLength debe devolver un múltiplo (1 u omitido para ASCII, cadenas binarias o cadenas UTF-8 codificacas, 2 para cadenas UTF-16, 4 para cadenas UTF-32).
- -

Para una librería más completa, véase StringView, una representación parecida a C de cadenas basadas en arrays tipados.

- -

Véase también

- - diff --git a/files/es/web/api/windowbase64/index.html b/files/es/web/api/windowbase64/index.html deleted file mode 100644 index 2607e635fa..0000000000 --- a/files/es/web/api/windowbase64/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: WindowBase64 -slug: Web/API/WindowBase64 -tags: - - API - - HTML-DOM - - Helper - - NeedsTranslation - - TopicStub - - WindowBase64 -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: 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

-
    -
  • Base64 encoding and decoding
    • -
  • {{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}
    • -
diff --git a/files/es/web/api/windoweventhandlers/onunload/index.html b/files/es/web/api/windoweventhandlers/onunload/index.html new file mode 100644 index 0000000000..a665fc2027 --- /dev/null +++ b/files/es/web/api/windoweventhandlers/onunload/index.html @@ -0,0 +1,45 @@ +--- +title: window.onunload +slug: Web/API/GlobalEventHandlers/onunload +translation_of: Web/API/WindowEventHandlers/onunload +--- +

{{ ApiRef() }}

+

Test Summary

+

The unload event is raised when the document is unloaded.

+

Syntax

+
window.onunload = funcRef;
+
+
    +
  • funcRef is a reference to a function.
    • +
+

Example

+
<html>
+<head>
+
+<title>onunload test</title>
+
+<script type="text/javascript">
+
+window.onunload = unloadPage;
+
+function unloadPage()
+{
+ alert("unload event detected!");
+}
+</script>
+</head>
+
+<body>
+<p>Reload a new page into the browser<br />
+ to fire the unload event for this page.</p>
+<p>You can also use the back or forward buttons<br />
+ to load a new page and fire this event.</p>
+</body>
+</html>
+
+

Notes

+

Note that using this event handler in your page prevents Firefox 1.5 from caching the page in the in-memory bfcache. See Using Firefox 1.5 caching for details.

+

Browsers equipped with pop-up window blockers will ignore all window.open() method calls in onunload event handler functions.

+

Specification

+

{{ DOM0() }}

+

{{ languages( {"zh-cn": "zh-cn/DOM/window.onunload" } ) }}

diff --git a/files/es/web/api/windoworworkerglobalscope/atob/index.html b/files/es/web/api/windoworworkerglobalscope/atob/index.html new file mode 100644 index 0000000000..aa9eeead07 --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/atob/index.html @@ -0,0 +1,111 @@ +--- +title: WindowBase64.atob() +slug: Web/API/WindowBase64/atob +translation_of: Web/API/WindowOrWorkerGlobalScope/atob +--- +

{{APIRef}}

+ +

La función WindowBase64.atob() descodifica una cadena de datos que ha sido codificada utilizando la codificación en base-64. Puedes utilizar el método {{domxref("window.btoa()")}} para codificar y transmitir datos que, de otro modo podrían generar problemas de comunicación. Luego de ser transmitidos se puede usar el método window.atob() para decodificar los datos de nuevo. Por ejemplo, puedes codificar, transmitir y decodificar los caracteres de control como valores ASCII 0 a 31.

+ +

For use with Unicode or UTF-8 strings, see this note at Base64 encoding and decoding and this note at window.btoa().

+ +

Syntax

+ +
var decodedData = window.atob(encodedData);
+ +

Example

+ +
var encodedData = window.btoa("Hello, world"); // encode a string
+var decodedData = window.atob(encodedData); // decode the string
+ +

Specifications

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

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1][2]10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though window is not the global object in components.

+ +

[2] Starting with Firefox 27, this atob() method ignores all space characters in the argument to comply with the latest HTML5 spec. ({{ bug(711180) }})

+ +

See also

+ + diff --git a/files/es/web/api/windoworworkerglobalscope/clearinterval/index.html b/files/es/web/api/windoworworkerglobalscope/clearinterval/index.html new file mode 100644 index 0000000000..14a1b0d1b8 --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/clearinterval/index.html @@ -0,0 +1,43 @@ +--- +title: WindowTimers.clearInterval() +slug: Web/API/WindowTimers/clearInterval +translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

Cancela una acción reiterativa que se inició mediante una llamada a {{domxref("window.setInterval", "setInterval")}}.

+ +

Sintaxis

+ +
window.clearInterval(intervalID)
+
+ +

intervalID es el identificador de la acción reiterativa que se desea cancelar. Este ID se obtiene a partir de setInterval().

+ +

Ejemplo

+ +

Vea el ejemplo de setInterval().

+ +

Especificación

+ + + + + + + + +
{{SpecName('HTML WHATWG', 'timers.html#timers', 'clearInterval')}}{{Spec2('HTML WHATWG')}}
+ +

Vea también

+ +
    +
  • JavaScript timers
    • +
  • {{domxref("WindowTimers.setTimeout")}}
    • +
  • {{domxref("WindowTimers.setInterval")}}
    • +
  • {{domxref("WindowTimers.clearTimeout")}}
    • +
  • {{domxref("window.requestAnimationFrame")}}
    • +
  • Daemons management
    • +
diff --git a/files/es/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/es/web/api/windoworworkerglobalscope/cleartimeout/index.html new file mode 100644 index 0000000000..0df5242672 --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/cleartimeout/index.html @@ -0,0 +1,63 @@ +--- +title: window.clearTimeout +slug: Web/API/WindowTimers/clearTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout +--- +
{{ApiRef}}
+ +

Resumen

+ +

Borra el retraso asignado por {{domxref("window.setTimeout","window.setTimeout()")}}.

+ +

Sintaxis

+ +
window.clearTimeout(timeoutID)
+
+ +
    +
  • timeoutID es el ID del timeout que desee borrar, retornado por {{domxref("window.setTimeout","window.setTimeout()")}}.
    • +
+ +

Ejemplo

+ +

Ejecute el script de abajo en el contexto de una página web y haga clic en la página una vez. Verá un mensaje emergente en un segundo. Si permanece haciendo clic en la página cada segundo, la alerta nunca aparece.

+ +
var alarm = {
+  remind: function(aMessage) {
+    alert(aMessage);
+    delete this.timeoutID;
+  },
+
+  setup: function() {
+    this.cancel();
+    var self = this;
+    this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!");
+  },
+
+  cancel: function() {
+    if(typeof this.timeoutID == "number") {
+      window.clearTimeout(this.timeoutID);
+      delete this.timeoutID;
+    }
+  }
+};
+window.onclick = function() { alarm.setup() };
+ +

Notas

+ +

Pasar un ID inválido a clearTimeout no tiene ningún efecto (y no lanza una excepción).

+ +

Especificación

+ +

DOM Nivel 0. Especificado en HTML5.

+ +

Vea también

+ +
    +
  • JavaScript timers
    • +
  • {{domxref("window.setTimeout")}}
    • +
  • {{domxref("window.setInterval")}}
    • +
  • {{domxref("window.clearInterval")}}
    • +
  • {{domxref("window.requestAnimationFrame")}}
    • +
  • Daemons management
    • +
diff --git a/files/es/web/api/windoworworkerglobalscope/setinterval/index.html b/files/es/web/api/windoworworkerglobalscope/setinterval/index.html new file mode 100644 index 0000000000..fe41612dd6 --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/setinterval/index.html @@ -0,0 +1,692 @@ +--- +title: WindowTimers.setInterval() +slug: Web/API/WindowTimers/setInterval +tags: + - API + - DOM + - Gecko + - Intervalos + - Method + - Temporizadores + - Temporizadores de JavaScript + - WindowTimers + - setInterval +translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval +--- +
{{APIRef("HTML DOM")}}
+ +
Ejecuta una función o un fragmento de código de forma repetitiva cada vez que termina el periodo de tiempo determinado. Devuelve un ID de proceso.
+ +
+ +

Sintaxis

+ +
var procesoID = window.setInterval(función, intervaloDeTiempo[, parámetro1, parámetro2, ... , parámetroN]);
+var procesoID = window.setInterval(código, intervaloDeTiempo);
+
+ +

Parámetros

+ +
+
función
+
La {{jsxref("function")}} que será ejecutada cada intervaloDeTiempo milisegundos.
+
código
+
Una sintaxis opcional permite introducir una cadena en lugar de una función, la cual es evaluada y ejecutada cada intervaloDeTiempo milisegundos. Se recomienda evitar esta sintaxis por la misma razón por la que el comando {{jsxref("eval", "eval()")}} conlleva problemas de seguridad.
+
intervaloDeTiempo
+
El tiempo en milisegundos (1/1000 de segundo, ms) que se debe esperar entre cada ejecución de la función o del código. Si el valor es menor que 10, se usará 10 en su lugar. El tiempo entre cada ejecución puede ser mayor al que indicamos, para mayor información puedes revisar el siguiente artículo: {{SectionOnPage("/en-US/docs/Web/API/WindowTimers/setTimeout", "Reasons for delays longer than specified")}}.
+
+
El parámetro intervaloDeTiempo es convertido en un entero de 32 bits con signo en el IDL, por lo que el valor más grande que puede tener es 2,147,483,647 milisegundos, aproximadamente 24.8 días.
+
+
parámetro1, ..., parámetroN {{optional_inline}}
+
Parámetros adicionales que se pasan a la función a ejecutar.
+
+ +
+

En Internet Explorer 9 y anteriores no es posible pasar más parámetros mediante esta sintaxis. Si quieres activar esta funcionalidad en dichos navegadores deberás usar un polyfill (entra en la sección Callback arguments).

+
+ +

Valor de Retorno

+ +

El valor de retorno procesoID es un valor numérico distinto de cero que identifica al temporizador que fue creado al llamar setInterval(); este valor puede ser usado como parámetro en la función {{domxref("Window.clearInterval()")}} para detener el temporizador. Las funciones setInterval() y {{domxref("WindowTimers.setTimeout", "setTimeout()")}} comparten la misma pila de IDs, por lo que, técnicamente, los comandos clearInterval() y {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}} pueden usarse indiscriminadamente. Sin embargo, por motivos de claridad y mantenimiento, es importante usarlos como corresponde.

+ +
+

Nota: El argumento intervaloDeTiempo se convierte aun entero con signo de 32 bits. Esto limita efectivamente al intervaloDeTiempo a valores de 2147483647 ms, ya que se especifica como entero con signo en el IDL.

+
+ +

Ejemplos

+ +

Ejemplo 1: Sintaxis básica

+ +

El siguiente ejemplo muestra la sintaxis básica.

+ +
var intervalID = window.setInterval(miFuncion, 500, 'Parametro 1', 'Parametro 2');
+
+function miFuncion(a,b) {
+  // Aquí va tu código
+  // Los parámetros son opcionales completamente
+  console.log(a);
+  console.log(b);
+}
+
+ +

Ejemplo 2: Alternando dos colores

+ +

El siguiente ejemplo se llama a la función flashtext() una vez por segundo hasta que se presiona el botón Detener.

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>Ejemplo de setInterval/clearInterval</title>
+  <script>
+     var nIntervId;
+
+     function cambiaDeColor() {
+        nIntervId = setInterval(flasheaTexto, 1000);
+     }
+
+     function flasheaTexto() {
+        var oElem = document.getElementById('mi_mensaje');
+        oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
+        //oElem.style.color ... es un operador ternario o condicional
+     }
+
+     function detenerCambioDeColor() {
+        clearInterval(nIntervId);
+     }
+  </script>
+</head>
+<body onload="cambiaDeColor();">
+  <div id="mi_mensaje">
+    <p>¡Hola mundo!</p>
+  </div>
+  <button onclick="detenerCambioDeColor();">Detener</button>
+</body>
+</html>
+
+ +

Ejemplo 3: Simulando una máquina de escribir

+ +

El siguiente ejemplo simula una máquina de escribir, primero borra el contenido de una lista de nodos (NodeList) que coinciden con un grupo de selectores y después lo escribe lentamente.

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>Máquina de Escribir con JavaScript</title>
+<script>
+  function maquinaEscribir (sSelector, nRate) {
+
+      function limpiar () {
+        clearInterval(nIntervId);
+        bTyping = false;
+        bStart = true;
+        oCurrent = null;
+        aSheets.length = nIdx = 0;
+      }
+
+      function desplazarse (oSheet, nPos, bEraseAndStop) {
+        if (!oSheet.hasOwnProperty("parts") || aMap.length < nPos) { return true; }
+
+        var oRel, bExit = false;
+
+        if (aMap.length === nPos) { aMap.push(0); }
+
+        while (aMap[nPos] < oSheet.parts.length) {
+          oRel = oSheet.parts[aMap[nPos]];
+
+          desplazarse(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
+
+          if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) {
+            bExit = true;
+            oCurrent = oRel.ref;
+            sPart = oCurrent.nodeValue;
+            oCurrent.nodeValue = "";
+          }
+
+          oSheet.ref.appendChild(oRel.ref);
+          if (bExit) { return false; }
+        }
+
+        aMap.length--;
+        return true;
+      }
+
+      function mecanografear () {
+        if (sPart.length === 0 && desplazarse(aSheets[nIdx], 0, true) && nIdx++ === aSheets.length - 1) { limpiar(); return; }
+
+        oCurrent.nodeValue += sPart.charAt(0);
+        sPart = sPart.slice(1);
+      }
+
+      function Hoja (oNode) {
+        this.ref = oNode;
+        if (!oNode.hasChildNodes()) { return; }
+        this.parts = Array.prototype.slice.call(oNode.childNodes);
+
+        for (var nChild = 0; nChild < this.parts.length; nChild++) {
+          oNode.removeChild(this.parts[nChild]);
+          this.parts[nChild] = new Hoja(this.parts[nChild]);
+        }
+      }
+
+      var
+        nIntervId, oCurrent = null, bTyping = false, bStart = true,
+        nIdx = 0, sPart = "", aSheets = [], aMap = [];
+
+      this.rate = nRate || 100;
+
+      this.ejecuta = function () {
+        if (bTyping) { return; }
+        if (bStart) {
+          var aItems = document.querySelectorAll(sSelector);
+
+          if (aItems.length === 0) { return; }
+          for (var nItem = 0; nItem < aItems.length; nItem++) {
+            aSheets.push(new Hoja(aItems[nItem]));
+            /* Uncomment the following line if you have previously hidden your elements via CSS: */
+            // aItems[nItem].style.visibility = "visible";
+          }
+
+          bStart = false;
+        }
+
+        nIntervId = setInterval(mecanografear, this.rate);
+        bTyping = true;
+      };
+
+      this.pausa = function () {
+        clearInterval(nIntervId);
+        bTyping = false;
+      };
+
+      this.finaliza = function () {
+        oCurrent.nodeValue += sPart;
+        sPart = "";
+        for (nIdx; nIdx < aSheets.length; desplazarse(aSheets[nIdx++], 0, false));
+        limpiar();
+      };
+  }
+
+    /* usage: */
+    var oTWExample1 = new maquinaEscribir(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15);
+
+    /* default frame rate is 100: */
+    var oTWExample2 = new maquinaEscribir("#controls");
+
+    /* you can also change the frame rate value modifying the "rate" property; for example: */
+    // oTWExample2.rate = 150;
+
+    onload = function () {
+      oTWExample1.ejecuta();
+      oTWExample2.ejecuta();
+    };
+</script>
+<style type="text/css">
+span.intLink, a, a:visited {
+  cursor: pointer;
+  color: #000000;
+  text-decoration: underline;
+}
+
+#info {
+  width: 180px;
+  height: 150px;
+  float: right;
+  background-color: #eeeeff;
+  padding: 4px;
+  overflow: auto;
+  font-size: 12px;
+  margin: 4px;
+  border-radius: 5px;
+  /* visibility: hidden; */
+}
+</style>
+</head>
+
+<body>
+
+<p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">CopyLeft 2012 by <a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a></p>
+<p id="controls" style="text-align: center;">[&nbsp;<span class="intLink" onclick="oTWExample1.ejecuta();">Ejecutar</span> | <span class="intLink" onclick="oTWExample1.pausa();">Pausar</span> | <span class="intLink" onclick="oTWExample1.finaliza();">Terminar</span>&nbsp;]</p>
+<div id="info">
+Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
+</div>
+<h1>Maquina de Escribir en JavaScript </h1>
+
+<div id="article">
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p>
+<form>
+<p>Phasellus ac nisl lorem: <input type="text" /><br />
+<textarea style="width: 400px; height: 200px;">Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</textarea></p>
+<p><input type="submit" value="Send" />
+</form>
+<p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.</p>
+<p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p>
+</div>
+</body>
+</html>
+
+ +

Observa este ejemplo en acción. Ver más: clearInterval().

+ +

Argumentos de Callback

+ +

Como se mencionó previamente Internet Explorer version 9 y anteriores no soportan el pasar argumentos a la función Callback en setTimeout() ni en setInterval(). El siguiente código específico de Internet Explorer muestra un método de superar esta limitante. Para usarlo basta añadir el código marcado al inicio de tu script.

+ +
/*\
+|*|
+|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
+|*|  callback functions of javascript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all && !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all && !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+
+ +

Otra posible solución es el usar funciones anónimas para llamar al Callback, aunque esta solución es un poco más cara. Ejemplo:

+ +
var intervalID = setInterval(function() { myFunc("one", "two", "three"); }, 1000);
+ +

También puedes hacer uso de function's bind. Ejemplo:

+ +
var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);
+ +

{{h3_gecko_minversion("Inactive tabs", "5.0")}}

+ +

A partir de Gecko 5.0 {{geckoRelease("5.0")}}, los intervalos no se disparan más de una vez por segundo en las pestañas inactivas.

+ +

Problemas usando "this"

+ +

Cuando pasas el método de un objeto a la función setInterval() éste es invocado fuera de su contexto. Esto puede crear un valor de this que puede no ser el esperado. Este problema es abordado en detalle en JavaScript reference.

+ +

Explicación

+ +

Cuando setInterval() o setTimeOut() ejecuta un determinado código o función, ésta corre en un contexto de ejecución separado al de la función en la que se creó dicho temporizador. Por esta razón a la palabra clave this se le asigna el valor del objeto window (o el objeto global), no es igual que usar this dentro de una fuinción que invoque a setTimeOut(). Observa el siguiente ejemplo (que utiliza setTimeOut() en lugar de setInterval() – el problema, de hecho, es el mismo para ambos temporizadores):

+ +
miArreglo = ["cero", "uno", "dos"];
+
+miArreglo.miMetodo = function (sPropiedad) {
+    alert(arguments.length > 0 ? this[sPropiedad] : this);
+};
+
+miArreglo.miMetodo(); // imprime "cero,uno,dos"
+miArreglo.miMetodo(1); // imprime "uno"
+setTimeout(miArreglo.miMetodo, 1000); // imprime "[object Window]" despues de 1 segundo
+setTimeout(miArreglo.miMetodo, 1500, "1"); // imprime "undefined" despues de 1,5 segundos
+// tratemos de pasar el objeto 'this'
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2500, 2); // same error
+ +

Como puedes ver no hay forma de pasar el objeto this a la función de Callback en la versión anterior de JavaScript.

+ +

Una posible solución

+ +

Una posible alternativa para resolver ésto es reemplazar las dos funciones globales nativas setTimeout() y setInterval() con las siguientes funciones no nativas que permiten su ejecución a través del método Function.prototype.call. El siguiente ejemplo muestra una posible sustitución:

+ +
// Permite el pase del objeto 'this' a través de temporizadores JavaScript
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentoAPasar1, argumentuAPasar2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentoAPasar1, argumentoAPasar2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+ +
Estos dos reemplazos también permiten el camino estándar en HTML5 de pasar argumentos arbitrarios a las funciones de Callback de los temporizadores dentro de IE. Por lo tanto, pueden utilizarse como rellenos (polyfills) no estándar. Para más información vea callback arguments paragraph.
+ +

Prueba de nueva funcionalidad:

+ +
miArreglo = ["cero", "uno", "dos"];
+
+miArreglo.miMetodo = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hola Mundo!"); // la utilizacion estandar de setTimeout y de setInterval se mantiene, pero...
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2000); // imprime "cero,uno,dos" despues de 2 segundos
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2500, 2); // imprime "dos" despues de 2,5 segundos
+
+ +

Otra solución más compleja está en la siguiente liga de framework.

+ +
JavaScript 1.8.5 introduce el método Function.prototype.bind(), el cual permite especificar el valor de this para todas sus llamadas en una determinada función. Esto permite sobrellevar facilmente diferentes problemas de contexto con el uso de la palabra this. También, ES2015 soporta arrow functions, dentro del lenguaje nos permite escribir cosas como setInterval( () => this.myMethod) si estamos dentro del método de miArreglo .
+ +

MiniDaemon - Un framework para administrar temporizadores

+ +

En proyectos que requieren muchos temporizadores puede volverse complicado el seguimiento de todos los eventos generados. Una forma de facilitar la administración de timers es guardando sus estados en un objeto. El siguiente ejemplo muestra este tipo de abstracción, la arquitectura del constructor evita explicitamente el uso de cerraduras. También ofrece un camino alternativo para pasar el objeto this a la función de Callback (observa la sección Problemas usando "this" para más detalles). Puedes consultar también el siguiente código en GitHub.

+ +
Para una versión más modular de este (Daemon)puedes verlo en JavaScript Daemons Management. Aquí encontrarás una versión mas complicada que se reduce a una colección escalable de métodos para el constructor Daemon. Éste constructor no es más que un clon del  MiniDaemon con soporte para las funciones init y onstart declarables durante la instanciación del mismo. Por esto el MiniDaemon framework se mantiene como el camino recomendado para realizar animaciones simples.
+ +

minidaemon.js

+ +
/*\
+|*|
+|*|  :: MiniDaemon ::
+|*|
+|*|  Revision #2 - September 26, 2014
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|  https://github.com/madmurphy/minidaemon.js
+|*|
+|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/lgpl-3.0.html
+|*|
+\*/
+
+function MiniDaemon (oOwner, fTask, nRate, nLen) {
+  if (!(this && this instanceof MiniDaemon)) { return; }
+  if (arguments.length < 2) { throw new TypeError("MiniDaemon - not enough arguments"); }
+  if (oOwner) { this.owner = oOwner; }
+  this.task = fTask;
+  if (isFinite(nRate) && nRate > 0) { this.rate = Math.floor(nRate); }
+  if (nLen > 0) { this.length = Math.floor(nLen); }
+}
+
+MiniDaemon.prototype.owner = null;
+MiniDaemon.prototype.task = null;
+MiniDaemon.prototype.rate = 100;
+MiniDaemon.prototype.length = Infinity;
+
+  /* These properties should be read-only */
+
+MiniDaemon.prototype.SESSION = -1;
+MiniDaemon.prototype.INDEX = 0;
+MiniDaemon.prototype.PAUSED = true;
+MiniDaemon.prototype.BACKW = true;
+
+  /* Global methods */
+
+MiniDaemon.forceCall = function (oDmn) {
+  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
+  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
+  return true;
+};
+
+  /* Instances methods */
+
+MiniDaemon.prototype.isAtEnd = function () {
+  return this.BACKW ? isFinite(this.length) && this.INDEX < 1 : this.INDEX + 1 > this.length;
+};
+
+MiniDaemon.prototype.synchronize = function () {
+  if (this.PAUSED) { return; }
+  clearInterval(this.SESSION);
+  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
+};
+
+MiniDaemon.prototype.pause = function () {
+  clearInterval(this.SESSION);
+  this.PAUSED = true;
+};
+
+MiniDaemon.prototype.start = function (bReverse) {
+  var bBackw = Boolean(bReverse);
+  if (this.BACKW === bBackw && (this.isAtEnd() || !this.PAUSED)) { return; }
+  this.BACKW = bBackw;
+  this.PAUSED = false;
+  this.synchronize();
+};
+
+ +
MiniDaemon pasa argumentos a la función callback. Si quieres trabajar con ellos en navegadores que no soportan nativamente esta característica, usa uno de los métodos propuestos arriba.
+ +

Sintaxis

+ +

var myDaemon = new MiniDaemon(thisObject, callback[, rate[, length]]);

+ +

Descripción

+ +

Regresa un Objecto que contiene la información necesaria para una animación (como el objeto this, la función de Callback, la duración y el frame-rate).

+ +

Parámetros

+ +
+
thisObject
+
El valor de la palabra this sobre el cual funcionará la función de Callback. Puede ser un objecto o null.
+
callback
+
La función que se invocará repetidas veces. Dicha función se invocará con tres parámetros: index que corresponde al valor iterativo de cada invocación, length que es el número total de invocaciones asignadas al daemon (puede ser un valor finito o Infinity) y backwards (valor booleano que expresa cuando el valor de index es creciente o decreciente). Es similar a callback.call(thisObject, index, length, backwards). Si la función de Callback regresa un valor false el deamon se detiene.
+
rate (optional)
+
El tiempo minimo en milisegundos que transcurre entre cada invocación. El valor por omisión es 100.
+
length (optional)
+
El número total de invocaciones. Puede ser un valor entero positivo o Infinity. El valor por omisión es Infinity.
+
+ +

Propiedades de la intancia MiniDaemon 

+ +
+
myDaemon.owner
+
El objeto this sobre el cual se ejecuta el daemon (lectura/escritura). Puede ser un objecto o null.
+
myDaemon.task
+
La función que se invocará repetidas veces. Dicha función se invocará con tres parámetros: index que corresponde al valor iterativo de cada invocación, length que es el número total de invocaciones asignadas al daemon (puede ser un valor finito o Infinity) y backwards (valor booleano que expresa cuando el valor de index es creciente o decreciente). Es similar a callback.call(thisObject, index, length, backwards). Si la función de Callback regresa un valor false el deamon se detiene.
+
myDaemon.rate
+
El tiempo minimo en milisegundos que transcurre entre cada invocación. El valor por omición es 100 (lectura/escritura).
+
myDaemon.length
+
El número total de invocaciones. Puede ser un valor entero positivo o Infinity. El valor por omición es Infinity (lectura/escritura).
+
+ +

MiniDaemon instances methods

+ +
+
myDaemon.isAtEnd()
+
Regresa un valor boleano que expresa cuando el daemon está en posición de inicio/fin o no.
+
myDaemon.synchronize()
+
Sincroniza el tiempo de un deamon iniciado con el tiempo de su invocación.
+
myDaemon.pause()
+
Pausa el deamon.
+
myDaemon.start([reverse])
+
Inicia el daemon hacia adelante "forward" (el indice de cada invocación se incrementa) o hacia atrás "backwards" (el índice de cada invocación se decrementa).
+
+ +

Métodos del objeto global del MiniDaemon

+ +
+
MiniDaemon.forceCall(minidaemon)
+
Fuerza una sola función callback a la función minidaemon.task  en lugar del hecho de que se ha alcanzado el final o no. En cualquier caso la propiedad INDEX interna crece o decrece según la dirección del proceso.
+
+ +

Ejemplo de uso

+ +

Tu página HTML:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>MiniDaemin Example - MDN</title>
+  <script type="text/javascript" src="minidaemon.js"></script>
+  <style type="text/css">
+    #sample_div {
+      visibility: hidden;
+    }
+  </style>
+</head>
+
+<body>
+  <p>
+    <input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" />
+    <input type="button" onclick="fadeInOut.start(true);" value="fade out">
+    <input type="button" onclick="fadeInOut.pause();" value="pause" />
+  </p>
+
+  <div id="sample_div">Some text here</div>
+
+  <script type="text/javascript">
+    function opacity (nIndex, nLength, bBackwards) {
+      this.style.opacity = nIndex / nLength;
+      if (bBackwards ? nIndex === 0 : nIndex === 1) {
+        this.style.visibility = bBackwards ? "hidden" : "visible";
+      }
+    }
+
+    var fadeInOut = new MiniDaemon(document.getElementById("sample_div"), opacity, 300, 8);
+  </script>
+</body>
+</html>
+ +

Prueba este ejemplo

+ +

Notas

+ +

La función setInterval() es usada frecuentemente para asignar una pausa para ejecutar funciones recurrentes, como por ejemplo pintar el siguiente cuadro de una animación.

+ +

Puedes cancelar el ciclo iniciado por un setInterval() usando el comando window.clearInterval().

+ +

Si solo deseas ejecutar el ciclo una sola vez despues de una pausa usa en su lugar la función window.setTimeout().

+ +

Asegúrate que el tiempo de ejecución sea menor que la frecuencia

+ +

Si existe la posibilidad de que tu función o el código a ejecutarse una y otra vez exeda el tiempo marcado en cada intervalo es recomendado que uses recursivamente el nombre de tu función usando window.setTimeout. Por ejemplo, si usas setInterval para hacer llamadas a un servidor remoto cada 5 segundos, la latencia en la red, un servidor que no responde, o cualquier otro tipo de contratiempo puede generar una pausa mayor a la que indicaste. De esta forma terminarás con solicitudes XHR apiladas que no se resolverán necesariamente en orden.

+ +

En estos casos llamadas con un patrón de setTimeout() recursivo es preferible:

+ +
(function loop(){
+   setTimeout(function() {
+      // Your logic here
+
+      loop();
+  }, delay);
+})();
+
+ +

En este fragmento de código, la función loop() es declarada y es ejecutada inmediatamente. La función loop() es invocada de forma recursiva dentro de setTimeout() despues de cada ejecución. Si bien este patrón no garantiza una ejecución a intervalos fijos, si garantiza que nunca se ejecutará un paso sin que se haya finalizado el anterior. 

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionesEstatusComentarios
{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}{{Spec2("HTML WHATWG")}}Definición inicial (DOM Level 0)
+ +

Compatibilidad

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)[2]Internet ExplorerOperaSafari
Soporte básico1.0{{CompatGeckoDesktop("1")}}4.04.01.0
Soporta parámetros para callback[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico1.01.0{{CompatGeckoMobile("1")}}6.06.01.0
Soporta parámetros para callback[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Whether it supports the optional parameters when in its first form or not.

+ +

[2] Anterior a Firefox 13, Firefox pasaba un parametro adicional al callback, indicando el "actual lateness" del timeout en milisegundos. Este parámetro no estandar dejó de usarse en versiones posteriores a Firefox 13. No es recomendable que extensiones basadas en XPCOM para Firefox usen setInterval(), ya que las actualizaciones pueden causar el que el objeto {{domxref("Window")}} se actualice perdiendo los temporizadores. Deberás usar en su lugar {{interface("nsITimer")}}.

+ +

Ver más

+ +
    +
  • JavaScript timers
    • +
  • {{domxref("WindowTimers.setTimeout")}}
    • +
  • {{domxref("WindowTimers.clearTimeout")}}
    • +
  • {{domxref("WindowTimers.clearInterval")}}
    • +
  • {{domxref("window.requestAnimationFrame")}}
    • +
  • Daemons management
    • +
diff --git a/files/es/web/api/windoworworkerglobalscope/settimeout/index.html b/files/es/web/api/windoworworkerglobalscope/settimeout/index.html new file mode 100644 index 0000000000..1180d9f8af --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/settimeout/index.html @@ -0,0 +1,340 @@ +--- +title: WindowOrWorkerGlobalScope.setTimeout +slug: Web/API/WindowTimers/setTimeout +tags: + - API + - HTML DOM + - WindowOrWorkerGlobalScope + - setTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +
{{APIRef("HTML DOM")}}
+ +

El método setTimeout() del mixin {{domxref("WindowOrWorkerGlobalScope")}} establece un temporizador que ejecuta una función o una porción de código después de que transcurre un tiempo establecido.

+ + +

Sintaxis

+ +
var idTemporizador = scope.setTimeout(funcion[, retraso, parametro1, parametro2, ...]);
+var idTimeout = scope.setTimeout(funcion[, retraso]);
+var idTimeout = scope.setTimeout(codigo[, retraso]);
+
+ +

Parámetros

+ +
+
funcion
+
Una {{jsxref("function")}} para ejecutar después de que expire el temporizador.
+
codigo
+
Una sintaxis opcional que le permite incluir una cadena en lugar de una función, la cual es compilada y ejecutada cuando el temporizador expira. Esta sintaxis no se recomienda por las mismas razones que hacen del uso de {{jsxref("Global_Objects/eval", "eval()")}} un riesgo de seguridad.
+
retraso {{optional_inline}}
+
Tiempo, en milisegundos  (milésimas de segundo), que el temporizador debe esperar antes de ejecutar la función o el código. Si se omite este parámetro se usa el valor 0. Tenga en cuenta que el retraso real puede ser más prolongado; ver más abajo {{anch("Reasons for delays longer than specified")}}.
+
param1, ..., paramN {{optional_inline}}
+
Parámetros adicionales que se pasan a la función especificada por  func una vez el temporizador expira.
+
+ +
Nota: Pasar parámetros adicionales a la función en la primera sintaxis no funciona en Internet Explorer 9 o inferior. Si quiere habilitar esta funcionalidad en ese navegador,  debe usar un código de compatibilidad (vea la sección Callback arguments).
+ +

Valor retornado

+ +

El valor retornado IDtemporizador es númerico y no es cero; identifica el temporizador creado con la llamada a setTimeout(); este valor puede pasarse a {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}} para cancelar el temporizador.

+ +

Puede ser útil advertir que  setTimeout() y {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} comparten la misma piscina de IDs, y que tanto clearTimeout() como {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} pueden intercambiarse.  Por claridad, sin embargo,  debe hacerlos coincidir para evitar confusiones cuando mantenga su código.

+ +

Ejemplo

+ +

El siguiente ejemplo establece dos botenes simples en una página web y los engancha a las rutinas setTimeout() y clearTimeout(). Presionando el primer botón establecerá un temporizador que llama un diálogo de alerta después de dos segundos y guarda el id del temporizador para usarlo con clearTimeout(). Opcionalmente puede cancelar este temporizador presionando el segundo botón.

+ +

Contenido HTML

+ +
<p>Ejemplo funcional</p>
+<button onclick="delayedAlert();">Muestra una caja de alerta después de dos segundos</button>
+<p></p>
+<button onclick="clearAlert();">Cancela la alerta antes de que ocurra</button>
+
+ +

Contenido JavaScript

+ +
var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("That was really slow!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+
+ +

{{ EmbedLiveSample('Example') }}

+ +

Vea también clearTimeout() example.

+ +

Callback arguments

+ +

Si necesita pasar un argumento a su función callback, pero necesita que funcione en Internet Explorer, que no soporta el envío de parámetros adicionales (ni con setTimeout() o setInterval()) usted puede incluir este código de compatibilidad IE-specific que habilitará la funcionalidad estándar de HTML5 para pasar los parámetros adicionales en ese navegador para ambos temporizadores solamente insertandolo al inicio de sus scripts.

+ +
/*\
+|*|
+|*|  IE-specific polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all && !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all && !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+
+ +

Arreglo solo para IE

+ +

Si quiere una solución completamente no intrusiva con otros navegadores móviles o de escritorio, incluyendo IE 9 y superior, puede usar los comentarios condicionales de JavaScript:

+ +
/*@cc_on
+  // conditional IE < 9 only fix
+  @if (@_jscript_version <= 6)
+  (function(f){
+     window.setTimeout =f(window.setTimeout);
+     window.setInterval =f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}});
+  @end
+@*/
+
+ +

O usar un enfoque más limpio basado en el condicional para IE de HTML:

+ +
<!--[if lt IE 9]><script>
+(function(f){
+window.setTimeout =f(window.setTimeout);
+window.setInterval =f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
+});
+</script><![endif]-->
+
+ +

Otra posibilidad es usar una función anónima para llamar el callback, pero esta solución es un poco más costosa. Ejemplo:

+ +
var intervalID = setTimeout(function() { myFunc("uno", "dos", "tres"); }, 1000);
+
+ +

Sin embargo, otra posibilidad es usar function's bind. Ejemplo:

+ +
setTimeout(function(arg1){}.bind(undefined, 10));
+
+ +

El problema "this"

+ +

Cuando pasa un método a setTimeout() (o cualquier otra función , por el estilo), podría ser invocada con el valor de this equivocado. Este problema es explicado en detalle en la referencia de JavaScript.

+ +

Explicación

+ +

El código ejecutado por setTimeout() corre en un contexto de ejecución diferente al de la función por la que fue llamado. Como consecuencia, la palabra clave this para la función llamada será asignado al objeto window (o global); no tendrá el mismo valor del this de la función que llamó al setTimeout. Vea el siguiente ejemplo:

+ +
myArray = ["cero", "uno", "dos"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // imprime "cero,uno,dos"
+myArray.myMethod(1); // imprime "uno"
+setTimeout(myArray.myMethod, 1000); // imprime "[object Window]" después de 1 segundo
+setTimeout(myArray.myMethod, 1500, "1"); // imprime "undefined" después de 1.5 segundos
+// intentemos pasar el objeto 'this'
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // mismo error
+ +

Como puedes ver no hay forma de pasar el objeto this a la función callback.

+ +

Una posible solución

+ +

Una posible forma de resolver el problema del "this" es reemplazar las dos funciones globales nativas setTimeout() or setInterval()por dos no-nativas  que permitan su invocación a través del método Function.prototype.call. El siguiente ejemplo muestra un posible reemplazo:

+ +
// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+ +
Nota: Estos dos reemplazos habilitarán el estándar HTML5 para el paso de argumentos arbitrarios a las funciones callback de los temporizadores en IE. Pueden usarse como polyfills también. Vea el párrafo Callback arguments.
+ +

Prueba de la nueva característica:

+ +
myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
+
+ +

No hay soluciones nativas ad hoc a este problema.

+ +
Nota: JavaScript 1.8.5 introduce el método Function.prototype.bind(, que permite especificar el valor que debería usarse como this para todas las llamadas a una función dada. Esto permite evitar fácilmente los problemas en los que no es claro que será, dependiendo del contexto desde el cual la función sea llamada.
+ +

Notas

+ +

Puede cancelar el temporizador usando window.clearTimeout(). Si desea tener una función llamada repetidamente (p.e., cada N milisegundos), considere usar window.setInterval().

+ +

Es importante notar que la función o fragmento de código no puede ser ejecutado hasta que el hilo que llamó setTimeout()haya terminado.

+ +

Pasando cadenas literales

+ +

Pasando una cadena en vez de una función a setTimeout()pasa lo mismo que al usar eval.

+ +
// Correcto
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Incorrecto
+window.setTimeout("alert(\"Hello World!\");", 500);
+
+
+ +

Las cadenas literales son evaluadas en el contexto global, así que los símbolos locales en el contexto donde setTimeout() fue llamado no estarán disponibles cuando la cadena es evaluada como código.

+ +

Minimum/ maximum delay and timeout nesting

+ +

Historically browsers implement setTimeout() "clamping": successive setTimeout() calls with delay smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, DOM_MIN_TIMEOUT_VALUE, is 4 ms (stored in a preference in Firefox: dom.min_timeout_value), with a DOM_CLAMP_TIMEOUT_NESTING_LEVEL of 5ms.

+ +

In fact, 4ms is specified by the HTML5 spec and is consistent across browsers released in 2010 and onward. Prior to {{ geckoRelease("5.0") }}, the minimum timeout value for nested timeouts was 10 ms.

+ +

In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks.

+ +

To implement a 0 ms timeout in a modern browser, you can use {{ domxref("window.postMessage()") }} as described here.

+ +

Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed Integer internally. This causes an Integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.

+ +

Inactive tabs

+ +

In {{ geckoRelease("5.0") }} and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see {{ bug(633421) }} for more information about this in Mozilla or crbug.com/66078 for details about this in Chrome.

+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{ CompatGeckoDesktop("1") }}4.04.01.0
Soporta parámetros para callback*1{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}10.0{{ CompatVersionUnknown }}{{ CompatUnknown }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico1.01.0{{ CompatGeckoMobile("1") }}6.06.01.0
Soporta parámetros para callback*1{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}
+
+ +

*1 Whether it supports the optional parameters when in its first form or not.

+ +

Especificación

+ +

Parte del DOM nivel 0, como se especifica en HTML5.

+ +

Vea también

+ + diff --git a/files/es/web/api/windowtimers/clearinterval/index.html b/files/es/web/api/windowtimers/clearinterval/index.html deleted file mode 100644 index 14a1b0d1b8..0000000000 --- a/files/es/web/api/windowtimers/clearinterval/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: WindowTimers.clearInterval() -slug: Web/API/WindowTimers/clearInterval -translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval ---- -
-
{{APIRef("HTML DOM")}}
-
- -

Cancela una acción reiterativa que se inició mediante una llamada a {{domxref("window.setInterval", "setInterval")}}.

- -

Sintaxis

- -
window.clearInterval(intervalID)
-
- -

intervalID es el identificador de la acción reiterativa que se desea cancelar. Este ID se obtiene a partir de setInterval().

- -

Ejemplo

- -

Vea el ejemplo de setInterval().

- -

Especificación

- - - - - - - - -
{{SpecName('HTML WHATWG', 'timers.html#timers', 'clearInterval')}}{{Spec2('HTML WHATWG')}}
- -

Vea también

- -
    -
  • JavaScript timers
    • -
  • {{domxref("WindowTimers.setTimeout")}}
    • -
  • {{domxref("WindowTimers.setInterval")}}
    • -
  • {{domxref("WindowTimers.clearTimeout")}}
    • -
  • {{domxref("window.requestAnimationFrame")}}
    • -
  • Daemons management
    • -
diff --git a/files/es/web/api/windowtimers/cleartimeout/index.html b/files/es/web/api/windowtimers/cleartimeout/index.html deleted file mode 100644 index 0df5242672..0000000000 --- a/files/es/web/api/windowtimers/cleartimeout/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: window.clearTimeout -slug: Web/API/WindowTimers/clearTimeout -translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout ---- -
{{ApiRef}}
- -

Resumen

- -

Borra el retraso asignado por {{domxref("window.setTimeout","window.setTimeout()")}}.

- -

Sintaxis

- -
window.clearTimeout(timeoutID)
-
- -
    -
  • timeoutID es el ID del timeout que desee borrar, retornado por {{domxref("window.setTimeout","window.setTimeout()")}}.
    • -
- -

Ejemplo

- -

Ejecute el script de abajo en el contexto de una página web y haga clic en la página una vez. Verá un mensaje emergente en un segundo. Si permanece haciendo clic en la página cada segundo, la alerta nunca aparece.

- -
var alarm = {
-  remind: function(aMessage) {
-    alert(aMessage);
-    delete this.timeoutID;
-  },
-
-  setup: function() {
-    this.cancel();
-    var self = this;
-    this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!");
-  },
-
-  cancel: function() {
-    if(typeof this.timeoutID == "number") {
-      window.clearTimeout(this.timeoutID);
-      delete this.timeoutID;
-    }
-  }
-};
-window.onclick = function() { alarm.setup() };
- -

Notas

- -

Pasar un ID inválido a clearTimeout no tiene ningún efecto (y no lanza una excepción).

- -

Especificación

- -

DOM Nivel 0. Especificado en HTML5.

- -

Vea también

- -
    -
  • JavaScript timers
    • -
  • {{domxref("window.setTimeout")}}
    • -
  • {{domxref("window.setInterval")}}
    • -
  • {{domxref("window.clearInterval")}}
    • -
  • {{domxref("window.requestAnimationFrame")}}
    • -
  • Daemons management
    • -
diff --git a/files/es/web/api/windowtimers/index.html b/files/es/web/api/windowtimers/index.html deleted file mode 100644 index 549969232f..0000000000 --- a/files/es/web/api/windowtimers/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: WindowTimers -slug: Web/API/WindowTimers -tags: - - API -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: 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

- -
    -
  • {{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}
    • -
diff --git a/files/es/web/api/windowtimers/setinterval/index.html b/files/es/web/api/windowtimers/setinterval/index.html deleted file mode 100644 index fe41612dd6..0000000000 --- a/files/es/web/api/windowtimers/setinterval/index.html +++ /dev/null @@ -1,692 +0,0 @@ ---- -title: WindowTimers.setInterval() -slug: Web/API/WindowTimers/setInterval -tags: - - API - - DOM - - Gecko - - Intervalos - - Method - - Temporizadores - - Temporizadores de JavaScript - - WindowTimers - - setInterval -translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval ---- -
{{APIRef("HTML DOM")}}
- -
Ejecuta una función o un fragmento de código de forma repetitiva cada vez que termina el periodo de tiempo determinado. Devuelve un ID de proceso.
- -
- -

Sintaxis

- -
var procesoID = window.setInterval(función, intervaloDeTiempo[, parámetro1, parámetro2, ... , parámetroN]);
-var procesoID = window.setInterval(código, intervaloDeTiempo);
-
- -

Parámetros

- -
-
función
-
La {{jsxref("function")}} que será ejecutada cada intervaloDeTiempo milisegundos.
-
código
-
Una sintaxis opcional permite introducir una cadena en lugar de una función, la cual es evaluada y ejecutada cada intervaloDeTiempo milisegundos. Se recomienda evitar esta sintaxis por la misma razón por la que el comando {{jsxref("eval", "eval()")}} conlleva problemas de seguridad.
-
intervaloDeTiempo
-
El tiempo en milisegundos (1/1000 de segundo, ms) que se debe esperar entre cada ejecución de la función o del código. Si el valor es menor que 10, se usará 10 en su lugar. El tiempo entre cada ejecución puede ser mayor al que indicamos, para mayor información puedes revisar el siguiente artículo: {{SectionOnPage("/en-US/docs/Web/API/WindowTimers/setTimeout", "Reasons for delays longer than specified")}}.
-
-
El parámetro intervaloDeTiempo es convertido en un entero de 32 bits con signo en el IDL, por lo que el valor más grande que puede tener es 2,147,483,647 milisegundos, aproximadamente 24.8 días.
-
-
parámetro1, ..., parámetroN {{optional_inline}}
-
Parámetros adicionales que se pasan a la función a ejecutar.
-
- -
-

En Internet Explorer 9 y anteriores no es posible pasar más parámetros mediante esta sintaxis. Si quieres activar esta funcionalidad en dichos navegadores deberás usar un polyfill (entra en la sección Callback arguments).

-
- -

Valor de Retorno

- -

El valor de retorno procesoID es un valor numérico distinto de cero que identifica al temporizador que fue creado al llamar setInterval(); este valor puede ser usado como parámetro en la función {{domxref("Window.clearInterval()")}} para detener el temporizador. Las funciones setInterval() y {{domxref("WindowTimers.setTimeout", "setTimeout()")}} comparten la misma pila de IDs, por lo que, técnicamente, los comandos clearInterval() y {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}} pueden usarse indiscriminadamente. Sin embargo, por motivos de claridad y mantenimiento, es importante usarlos como corresponde.

- -
-

Nota: El argumento intervaloDeTiempo se convierte aun entero con signo de 32 bits. Esto limita efectivamente al intervaloDeTiempo a valores de 2147483647 ms, ya que se especifica como entero con signo en el IDL.

-
- -

Ejemplos

- -

Ejemplo 1: Sintaxis básica

- -

El siguiente ejemplo muestra la sintaxis básica.

- -
var intervalID = window.setInterval(miFuncion, 500, 'Parametro 1', 'Parametro 2');
-
-function miFuncion(a,b) {
-  // Aquí va tu código
-  // Los parámetros son opcionales completamente
-  console.log(a);
-  console.log(b);
-}
-
- -

Ejemplo 2: Alternando dos colores

- -

El siguiente ejemplo se llama a la función flashtext() una vez por segundo hasta que se presiona el botón Detener.

- -
<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8" />
-  <title>Ejemplo de setInterval/clearInterval</title>
-  <script>
-     var nIntervId;
-
-     function cambiaDeColor() {
-        nIntervId = setInterval(flasheaTexto, 1000);
-     }
-
-     function flasheaTexto() {
-        var oElem = document.getElementById('mi_mensaje');
-        oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
-        //oElem.style.color ... es un operador ternario o condicional
-     }
-
-     function detenerCambioDeColor() {
-        clearInterval(nIntervId);
-     }
-  </script>
-</head>
-<body onload="cambiaDeColor();">
-  <div id="mi_mensaje">
-    <p>¡Hola mundo!</p>
-  </div>
-  <button onclick="detenerCambioDeColor();">Detener</button>
-</body>
-</html>
-
- -

Ejemplo 3: Simulando una máquina de escribir

- -

El siguiente ejemplo simula una máquina de escribir, primero borra el contenido de una lista de nodos (NodeList) que coinciden con un grupo de selectores y después lo escribe lentamente.

- -
<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8" />
-<title>Máquina de Escribir con JavaScript</title>
-<script>
-  function maquinaEscribir (sSelector, nRate) {
-
-      function limpiar () {
-        clearInterval(nIntervId);
-        bTyping = false;
-        bStart = true;
-        oCurrent = null;
-        aSheets.length = nIdx = 0;
-      }
-
-      function desplazarse (oSheet, nPos, bEraseAndStop) {
-        if (!oSheet.hasOwnProperty("parts") || aMap.length < nPos) { return true; }
-
-        var oRel, bExit = false;
-
-        if (aMap.length === nPos) { aMap.push(0); }
-
-        while (aMap[nPos] < oSheet.parts.length) {
-          oRel = oSheet.parts[aMap[nPos]];
-
-          desplazarse(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
-
-          if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) {
-            bExit = true;
-            oCurrent = oRel.ref;
-            sPart = oCurrent.nodeValue;
-            oCurrent.nodeValue = "";
-          }
-
-          oSheet.ref.appendChild(oRel.ref);
-          if (bExit) { return false; }
-        }
-
-        aMap.length--;
-        return true;
-      }
-
-      function mecanografear () {
-        if (sPart.length === 0 && desplazarse(aSheets[nIdx], 0, true) && nIdx++ === aSheets.length - 1) { limpiar(); return; }
-
-        oCurrent.nodeValue += sPart.charAt(0);
-        sPart = sPart.slice(1);
-      }
-
-      function Hoja (oNode) {
-        this.ref = oNode;
-        if (!oNode.hasChildNodes()) { return; }
-        this.parts = Array.prototype.slice.call(oNode.childNodes);
-
-        for (var nChild = 0; nChild < this.parts.length; nChild++) {
-          oNode.removeChild(this.parts[nChild]);
-          this.parts[nChild] = new Hoja(this.parts[nChild]);
-        }
-      }
-
-      var
-        nIntervId, oCurrent = null, bTyping = false, bStart = true,
-        nIdx = 0, sPart = "", aSheets = [], aMap = [];
-
-      this.rate = nRate || 100;
-
-      this.ejecuta = function () {
-        if (bTyping) { return; }
-        if (bStart) {
-          var aItems = document.querySelectorAll(sSelector);
-
-          if (aItems.length === 0) { return; }
-          for (var nItem = 0; nItem < aItems.length; nItem++) {
-            aSheets.push(new Hoja(aItems[nItem]));
-            /* Uncomment the following line if you have previously hidden your elements via CSS: */
-            // aItems[nItem].style.visibility = "visible";
-          }
-
-          bStart = false;
-        }
-
-        nIntervId = setInterval(mecanografear, this.rate);
-        bTyping = true;
-      };
-
-      this.pausa = function () {
-        clearInterval(nIntervId);
-        bTyping = false;
-      };
-
-      this.finaliza = function () {
-        oCurrent.nodeValue += sPart;
-        sPart = "";
-        for (nIdx; nIdx < aSheets.length; desplazarse(aSheets[nIdx++], 0, false));
-        limpiar();
-      };
-  }
-
-    /* usage: */
-    var oTWExample1 = new maquinaEscribir(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15);
-
-    /* default frame rate is 100: */
-    var oTWExample2 = new maquinaEscribir("#controls");
-
-    /* you can also change the frame rate value modifying the "rate" property; for example: */
-    // oTWExample2.rate = 150;
-
-    onload = function () {
-      oTWExample1.ejecuta();
-      oTWExample2.ejecuta();
-    };
-</script>
-<style type="text/css">
-span.intLink, a, a:visited {
-  cursor: pointer;
-  color: #000000;
-  text-decoration: underline;
-}
-
-#info {
-  width: 180px;
-  height: 150px;
-  float: right;
-  background-color: #eeeeff;
-  padding: 4px;
-  overflow: auto;
-  font-size: 12px;
-  margin: 4px;
-  border-radius: 5px;
-  /* visibility: hidden; */
-}
-</style>
-</head>
-
-<body>
-
-<p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">CopyLeft 2012 by <a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a></p>
-<p id="controls" style="text-align: center;">[&nbsp;<span class="intLink" onclick="oTWExample1.ejecuta();">Ejecutar</span> | <span class="intLink" onclick="oTWExample1.pausa();">Pausar</span> | <span class="intLink" onclick="oTWExample1.finaliza();">Terminar</span>&nbsp;]</p>
-<div id="info">
-Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
-</div>
-<h1>Maquina de Escribir en JavaScript </h1>
-
-<div id="article">
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p>
-<form>
-<p>Phasellus ac nisl lorem: <input type="text" /><br />
-<textarea style="width: 400px; height: 200px;">Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</textarea></p>
-<p><input type="submit" value="Send" />
-</form>
-<p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.</p>
-<p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p>
-</div>
-</body>
-</html>
-
- -

Observa este ejemplo en acción. Ver más: clearInterval().

- -

Argumentos de Callback

- -

Como se mencionó previamente Internet Explorer version 9 y anteriores no soportan el pasar argumentos a la función Callback en setTimeout() ni en setInterval(). El siguiente código específico de Internet Explorer muestra un método de superar esta limitante. Para usarlo basta añadir el código marcado al inicio de tu script.

- -
/*\
-|*|
-|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
-|*|  callback functions of javascript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
-|*|  https://developer.mozilla.org/User:fusionchess
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-if (document.all && !window.setTimeout.isPolyfill) {
-  var __nativeST__ = window.setTimeout;
-  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeST__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setTimeout.isPolyfill = true;
-}
-
-if (document.all && !window.setInterval.isPolyfill) {
-  var __nativeSI__ = window.setInterval;
-  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeSI__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setInterval.isPolyfill = true;
-}
-
- -

Otra posible solución es el usar funciones anónimas para llamar al Callback, aunque esta solución es un poco más cara. Ejemplo:

- -
var intervalID = setInterval(function() { myFunc("one", "two", "three"); }, 1000);
- -

También puedes hacer uso de function's bind. Ejemplo:

- -
var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);
- -

{{h3_gecko_minversion("Inactive tabs", "5.0")}}

- -

A partir de Gecko 5.0 {{geckoRelease("5.0")}}, los intervalos no se disparan más de una vez por segundo en las pestañas inactivas.

- -

Problemas usando "this"

- -

Cuando pasas el método de un objeto a la función setInterval() éste es invocado fuera de su contexto. Esto puede crear un valor de this que puede no ser el esperado. Este problema es abordado en detalle en JavaScript reference.

- -

Explicación

- -

Cuando setInterval() o setTimeOut() ejecuta un determinado código o función, ésta corre en un contexto de ejecución separado al de la función en la que se creó dicho temporizador. Por esta razón a la palabra clave this se le asigna el valor del objeto window (o el objeto global), no es igual que usar this dentro de una fuinción que invoque a setTimeOut(). Observa el siguiente ejemplo (que utiliza setTimeOut() en lugar de setInterval() – el problema, de hecho, es el mismo para ambos temporizadores):

- -
miArreglo = ["cero", "uno", "dos"];
-
-miArreglo.miMetodo = function (sPropiedad) {
-    alert(arguments.length > 0 ? this[sPropiedad] : this);
-};
-
-miArreglo.miMetodo(); // imprime "cero,uno,dos"
-miArreglo.miMetodo(1); // imprime "uno"
-setTimeout(miArreglo.miMetodo, 1000); // imprime "[object Window]" despues de 1 segundo
-setTimeout(miArreglo.miMetodo, 1500, "1"); // imprime "undefined" despues de 1,5 segundos
-// tratemos de pasar el objeto 'this'
-setTimeout.call(miArreglo, miArreglo.miMetodo, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(miArreglo, miArreglo.miMetodo, 2500, 2); // same error
- -

Como puedes ver no hay forma de pasar el objeto this a la función de Callback en la versión anterior de JavaScript.

- -

Una posible solución

- -

Una posible alternativa para resolver ésto es reemplazar las dos funciones globales nativas setTimeout() y setInterval() con las siguientes funciones no nativas que permiten su ejecución a través del método Function.prototype.call. El siguiente ejemplo muestra una posible sustitución:

- -
// Permite el pase del objeto 'this' a través de temporizadores JavaScript
-
-var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentoAPasar1, argumentuAPasar2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentoAPasar1, argumentoAPasar2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
- -
Estos dos reemplazos también permiten el camino estándar en HTML5 de pasar argumentos arbitrarios a las funciones de Callback de los temporizadores dentro de IE. Por lo tanto, pueden utilizarse como rellenos (polyfills) no estándar. Para más información vea callback arguments paragraph.
- -

Prueba de nueva funcionalidad:

- -
miArreglo = ["cero", "uno", "dos"];
-
-miArreglo.miMetodo = function (sProperty) {
-    alert(arguments.length > 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, "Hola Mundo!"); // la utilizacion estandar de setTimeout y de setInterval se mantiene, pero...
-setTimeout.call(miArreglo, miArreglo.miMetodo, 2000); // imprime "cero,uno,dos" despues de 2 segundos
-setTimeout.call(miArreglo, miArreglo.miMetodo, 2500, 2); // imprime "dos" despues de 2,5 segundos
-
- -

Otra solución más compleja está en la siguiente liga de framework.

- -
JavaScript 1.8.5 introduce el método Function.prototype.bind(), el cual permite especificar el valor de this para todas sus llamadas en una determinada función. Esto permite sobrellevar facilmente diferentes problemas de contexto con el uso de la palabra this. También, ES2015 soporta arrow functions, dentro del lenguaje nos permite escribir cosas como setInterval( () => this.myMethod) si estamos dentro del método de miArreglo .
- -

MiniDaemon - Un framework para administrar temporizadores

- -

En proyectos que requieren muchos temporizadores puede volverse complicado el seguimiento de todos los eventos generados. Una forma de facilitar la administración de timers es guardando sus estados en un objeto. El siguiente ejemplo muestra este tipo de abstracción, la arquitectura del constructor evita explicitamente el uso de cerraduras. También ofrece un camino alternativo para pasar el objeto this a la función de Callback (observa la sección Problemas usando "this" para más detalles). Puedes consultar también el siguiente código en GitHub.

- -
Para una versión más modular de este (Daemon)puedes verlo en JavaScript Daemons Management. Aquí encontrarás una versión mas complicada que se reduce a una colección escalable de métodos para el constructor Daemon. Éste constructor no es más que un clon del  MiniDaemon con soporte para las funciones init y onstart declarables durante la instanciación del mismo. Por esto el MiniDaemon framework se mantiene como el camino recomendado para realizar animaciones simples.
- -

minidaemon.js

- -
/*\
-|*|
-|*|  :: MiniDaemon ::
-|*|
-|*|  Revision #2 - September 26, 2014
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
-|*|  https://developer.mozilla.org/User:fusionchess
-|*|  https://github.com/madmurphy/minidaemon.js
-|*|
-|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
-|*|  http://www.gnu.org/licenses/lgpl-3.0.html
-|*|
-\*/
-
-function MiniDaemon (oOwner, fTask, nRate, nLen) {
-  if (!(this && this instanceof MiniDaemon)) { return; }
-  if (arguments.length < 2) { throw new TypeError("MiniDaemon - not enough arguments"); }
-  if (oOwner) { this.owner = oOwner; }
-  this.task = fTask;
-  if (isFinite(nRate) && nRate > 0) { this.rate = Math.floor(nRate); }
-  if (nLen > 0) { this.length = Math.floor(nLen); }
-}
-
-MiniDaemon.prototype.owner = null;
-MiniDaemon.prototype.task = null;
-MiniDaemon.prototype.rate = 100;
-MiniDaemon.prototype.length = Infinity;
-
-  /* These properties should be read-only */
-
-MiniDaemon.prototype.SESSION = -1;
-MiniDaemon.prototype.INDEX = 0;
-MiniDaemon.prototype.PAUSED = true;
-MiniDaemon.prototype.BACKW = true;
-
-  /* Global methods */
-
-MiniDaemon.forceCall = function (oDmn) {
-  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
-  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
-  return true;
-};
-
-  /* Instances methods */
-
-MiniDaemon.prototype.isAtEnd = function () {
-  return this.BACKW ? isFinite(this.length) && this.INDEX < 1 : this.INDEX + 1 > this.length;
-};
-
-MiniDaemon.prototype.synchronize = function () {
-  if (this.PAUSED) { return; }
-  clearInterval(this.SESSION);
-  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
-};
-
-MiniDaemon.prototype.pause = function () {
-  clearInterval(this.SESSION);
-  this.PAUSED = true;
-};
-
-MiniDaemon.prototype.start = function (bReverse) {
-  var bBackw = Boolean(bReverse);
-  if (this.BACKW === bBackw && (this.isAtEnd() || !this.PAUSED)) { return; }
-  this.BACKW = bBackw;
-  this.PAUSED = false;
-  this.synchronize();
-};
-
- -
MiniDaemon pasa argumentos a la función callback. Si quieres trabajar con ellos en navegadores que no soportan nativamente esta característica, usa uno de los métodos propuestos arriba.
- -

Sintaxis

- -

var myDaemon = new MiniDaemon(thisObject, callback[, rate[, length]]);

- -

Descripción

- -

Regresa un Objecto que contiene la información necesaria para una animación (como el objeto this, la función de Callback, la duración y el frame-rate).

- -

Parámetros

- -
-
thisObject
-
El valor de la palabra this sobre el cual funcionará la función de Callback. Puede ser un objecto o null.
-
callback
-
La función que se invocará repetidas veces. Dicha función se invocará con tres parámetros: index que corresponde al valor iterativo de cada invocación, length que es el número total de invocaciones asignadas al daemon (puede ser un valor finito o Infinity) y backwards (valor booleano que expresa cuando el valor de index es creciente o decreciente). Es similar a callback.call(thisObject, index, length, backwards). Si la función de Callback regresa un valor false el deamon se detiene.
-
rate (optional)
-
El tiempo minimo en milisegundos que transcurre entre cada invocación. El valor por omisión es 100.
-
length (optional)
-
El número total de invocaciones. Puede ser un valor entero positivo o Infinity. El valor por omisión es Infinity.
-
- -

Propiedades de la intancia MiniDaemon 

- -
-
myDaemon.owner
-
El objeto this sobre el cual se ejecuta el daemon (lectura/escritura). Puede ser un objecto o null.
-
myDaemon.task
-
La función que se invocará repetidas veces. Dicha función se invocará con tres parámetros: index que corresponde al valor iterativo de cada invocación, length que es el número total de invocaciones asignadas al daemon (puede ser un valor finito o Infinity) y backwards (valor booleano que expresa cuando el valor de index es creciente o decreciente). Es similar a callback.call(thisObject, index, length, backwards). Si la función de Callback regresa un valor false el deamon se detiene.
-
myDaemon.rate
-
El tiempo minimo en milisegundos que transcurre entre cada invocación. El valor por omición es 100 (lectura/escritura).
-
myDaemon.length
-
El número total de invocaciones. Puede ser un valor entero positivo o Infinity. El valor por omición es Infinity (lectura/escritura).
-
- -

MiniDaemon instances methods

- -
-
myDaemon.isAtEnd()
-
Regresa un valor boleano que expresa cuando el daemon está en posición de inicio/fin o no.
-
myDaemon.synchronize()
-
Sincroniza el tiempo de un deamon iniciado con el tiempo de su invocación.
-
myDaemon.pause()
-
Pausa el deamon.
-
myDaemon.start([reverse])
-
Inicia el daemon hacia adelante "forward" (el indice de cada invocación se incrementa) o hacia atrás "backwards" (el índice de cada invocación se decrementa).
-
- -

Métodos del objeto global del MiniDaemon

- -
-
MiniDaemon.forceCall(minidaemon)
-
Fuerza una sola función callback a la función minidaemon.task  en lugar del hecho de que se ha alcanzado el final o no. En cualquier caso la propiedad INDEX interna crece o decrece según la dirección del proceso.
-
- -

Ejemplo de uso

- -

Tu página HTML:

- -
<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8" />
-  <title>MiniDaemin Example - MDN</title>
-  <script type="text/javascript" src="minidaemon.js"></script>
-  <style type="text/css">
-    #sample_div {
-      visibility: hidden;
-    }
-  </style>
-</head>
-
-<body>
-  <p>
-    <input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" />
-    <input type="button" onclick="fadeInOut.start(true);" value="fade out">
-    <input type="button" onclick="fadeInOut.pause();" value="pause" />
-  </p>
-
-  <div id="sample_div">Some text here</div>
-
-  <script type="text/javascript">
-    function opacity (nIndex, nLength, bBackwards) {
-      this.style.opacity = nIndex / nLength;
-      if (bBackwards ? nIndex === 0 : nIndex === 1) {
-        this.style.visibility = bBackwards ? "hidden" : "visible";
-      }
-    }
-
-    var fadeInOut = new MiniDaemon(document.getElementById("sample_div"), opacity, 300, 8);
-  </script>
-</body>
-</html>
- -

Prueba este ejemplo

- -

Notas

- -

La función setInterval() es usada frecuentemente para asignar una pausa para ejecutar funciones recurrentes, como por ejemplo pintar el siguiente cuadro de una animación.

- -

Puedes cancelar el ciclo iniciado por un setInterval() usando el comando window.clearInterval().

- -

Si solo deseas ejecutar el ciclo una sola vez despues de una pausa usa en su lugar la función window.setTimeout().

- -

Asegúrate que el tiempo de ejecución sea menor que la frecuencia

- -

Si existe la posibilidad de que tu función o el código a ejecutarse una y otra vez exeda el tiempo marcado en cada intervalo es recomendado que uses recursivamente el nombre de tu función usando window.setTimeout. Por ejemplo, si usas setInterval para hacer llamadas a un servidor remoto cada 5 segundos, la latencia en la red, un servidor que no responde, o cualquier otro tipo de contratiempo puede generar una pausa mayor a la que indicaste. De esta forma terminarás con solicitudes XHR apiladas que no se resolverán necesariamente en orden.

- -

En estos casos llamadas con un patrón de setTimeout() recursivo es preferible:

- -
(function loop(){
-   setTimeout(function() {
-      // Your logic here
-
-      loop();
-  }, delay);
-})();
-
- -

En este fragmento de código, la función loop() es declarada y es ejecutada inmediatamente. La función loop() es invocada de forma recursiva dentro de setTimeout() despues de cada ejecución. Si bien este patrón no garantiza una ejecución a intervalos fijos, si garantiza que nunca se ejecutará un paso sin que se haya finalizado el anterior. 

- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificacionesEstatusComentarios
{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}{{Spec2("HTML WHATWG")}}Definición inicial (DOM Level 0)
- -

Compatibilidad

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)[2]Internet ExplorerOperaSafari
Soporte básico1.0{{CompatGeckoDesktop("1")}}4.04.01.0
Soporta parámetros para callback[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico1.01.0{{CompatGeckoMobile("1")}}6.06.01.0
Soporta parámetros para callback[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Whether it supports the optional parameters when in its first form or not.

- -

[2] Anterior a Firefox 13, Firefox pasaba un parametro adicional al callback, indicando el "actual lateness" del timeout en milisegundos. Este parámetro no estandar dejó de usarse en versiones posteriores a Firefox 13. No es recomendable que extensiones basadas en XPCOM para Firefox usen setInterval(), ya que las actualizaciones pueden causar el que el objeto {{domxref("Window")}} se actualice perdiendo los temporizadores. Deberás usar en su lugar {{interface("nsITimer")}}.

- -

Ver más

- -
    -
  • JavaScript timers
    • -
  • {{domxref("WindowTimers.setTimeout")}}
    • -
  • {{domxref("WindowTimers.clearTimeout")}}
    • -
  • {{domxref("WindowTimers.clearInterval")}}
    • -
  • {{domxref("window.requestAnimationFrame")}}
    • -
  • Daemons management
    • -
diff --git a/files/es/web/api/windowtimers/settimeout/index.html b/files/es/web/api/windowtimers/settimeout/index.html deleted file mode 100644 index 1180d9f8af..0000000000 --- a/files/es/web/api/windowtimers/settimeout/index.html +++ /dev/null @@ -1,340 +0,0 @@ ---- -title: WindowOrWorkerGlobalScope.setTimeout -slug: Web/API/WindowTimers/setTimeout -tags: - - API - - HTML DOM - - WindowOrWorkerGlobalScope - - setTimeout -translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout ---- -
{{APIRef("HTML DOM")}}
- -

El método setTimeout() del mixin {{domxref("WindowOrWorkerGlobalScope")}} establece un temporizador que ejecuta una función o una porción de código después de que transcurre un tiempo establecido.

- - -

Sintaxis

- -
var idTemporizador = scope.setTimeout(funcion[, retraso, parametro1, parametro2, ...]);
-var idTimeout = scope.setTimeout(funcion[, retraso]);
-var idTimeout = scope.setTimeout(codigo[, retraso]);
-
- -

Parámetros

- -
-
funcion
-
Una {{jsxref("function")}} para ejecutar después de que expire el temporizador.
-
codigo
-
Una sintaxis opcional que le permite incluir una cadena en lugar de una función, la cual es compilada y ejecutada cuando el temporizador expira. Esta sintaxis no se recomienda por las mismas razones que hacen del uso de {{jsxref("Global_Objects/eval", "eval()")}} un riesgo de seguridad.
-
retraso {{optional_inline}}
-
Tiempo, en milisegundos  (milésimas de segundo), que el temporizador debe esperar antes de ejecutar la función o el código. Si se omite este parámetro se usa el valor 0. Tenga en cuenta que el retraso real puede ser más prolongado; ver más abajo {{anch("Reasons for delays longer than specified")}}.
-
param1, ..., paramN {{optional_inline}}
-
Parámetros adicionales que se pasan a la función especificada por  func una vez el temporizador expira.
-
- -
Nota: Pasar parámetros adicionales a la función en la primera sintaxis no funciona en Internet Explorer 9 o inferior. Si quiere habilitar esta funcionalidad en ese navegador,  debe usar un código de compatibilidad (vea la sección Callback arguments).
- -

Valor retornado

- -

El valor retornado IDtemporizador es númerico y no es cero; identifica el temporizador creado con la llamada a setTimeout(); este valor puede pasarse a {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}} para cancelar el temporizador.

- -

Puede ser útil advertir que  setTimeout() y {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} comparten la misma piscina de IDs, y que tanto clearTimeout() como {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} pueden intercambiarse.  Por claridad, sin embargo,  debe hacerlos coincidir para evitar confusiones cuando mantenga su código.

- -

Ejemplo

- -

El siguiente ejemplo establece dos botenes simples en una página web y los engancha a las rutinas setTimeout() y clearTimeout(). Presionando el primer botón establecerá un temporizador que llama un diálogo de alerta después de dos segundos y guarda el id del temporizador para usarlo con clearTimeout(). Opcionalmente puede cancelar este temporizador presionando el segundo botón.

- -

Contenido HTML

- -
<p>Ejemplo funcional</p>
-<button onclick="delayedAlert();">Muestra una caja de alerta después de dos segundos</button>
-<p></p>
-<button onclick="clearAlert();">Cancela la alerta antes de que ocurra</button>
-
- -

Contenido JavaScript

- -
var timeoutID;
-
-function delayedAlert() {
-  timeoutID = window.setTimeout(slowAlert, 2000);
-}
-
-function slowAlert() {
-  alert("That was really slow!");
-}
-
-function clearAlert() {
-  window.clearTimeout(timeoutID);
-}
-
- -

{{ EmbedLiveSample('Example') }}

- -

Vea también clearTimeout() example.

- -

Callback arguments

- -

Si necesita pasar un argumento a su función callback, pero necesita que funcione en Internet Explorer, que no soporta el envío de parámetros adicionales (ni con setTimeout() o setInterval()) usted puede incluir este código de compatibilidad IE-specific que habilitará la funcionalidad estándar de HTML5 para pasar los parámetros adicionales en ese navegador para ambos temporizadores solamente insertandolo al inicio de sus scripts.

- -
/*\
-|*|
-|*|  IE-specific polyfill which enables the passage of arbitrary arguments to the
-|*|  callback functions of JavaScript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-if (document.all && !window.setTimeout.isPolyfill) {
-  var __nativeST__ = window.setTimeout;
-  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeST__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setTimeout.isPolyfill = true;
-}
-
-if (document.all && !window.setInterval.isPolyfill) {
-  var __nativeSI__ = window.setInterval;
-  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeSI__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setInterval.isPolyfill = true;
-}
-
- -

Arreglo solo para IE

- -

Si quiere una solución completamente no intrusiva con otros navegadores móviles o de escritorio, incluyendo IE 9 y superior, puede usar los comentarios condicionales de JavaScript:

- -
/*@cc_on
-  // conditional IE < 9 only fix
-  @if (@_jscript_version <= 6)
-  (function(f){
-     window.setTimeout =f(window.setTimeout);
-     window.setInterval =f(window.setInterval);
-  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}});
-  @end
-@*/
-
- -

O usar un enfoque más limpio basado en el condicional para IE de HTML:

- -
<!--[if lt IE 9]><script>
-(function(f){
-window.setTimeout =f(window.setTimeout);
-window.setInterval =f(window.setInterval);
-})(function(f){return function(c,t){
-var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
-});
-</script><![endif]-->
-
- -

Otra posibilidad es usar una función anónima para llamar el callback, pero esta solución es un poco más costosa. Ejemplo:

- -
var intervalID = setTimeout(function() { myFunc("uno", "dos", "tres"); }, 1000);
-
- -

Sin embargo, otra posibilidad es usar function's bind. Ejemplo:

- -
setTimeout(function(arg1){}.bind(undefined, 10));
-
- -

El problema "this"

- -

Cuando pasa un método a setTimeout() (o cualquier otra función , por el estilo), podría ser invocada con el valor de this equivocado. Este problema es explicado en detalle en la referencia de JavaScript.

- -

Explicación

- -

El código ejecutado por setTimeout() corre en un contexto de ejecución diferente al de la función por la que fue llamado. Como consecuencia, la palabra clave this para la función llamada será asignado al objeto window (o global); no tendrá el mismo valor del this de la función que llamó al setTimeout. Vea el siguiente ejemplo:

- -
myArray = ["cero", "uno", "dos"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length > 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // imprime "cero,uno,dos"
-myArray.myMethod(1); // imprime "uno"
-setTimeout(myArray.myMethod, 1000); // imprime "[object Window]" después de 1 segundo
-setTimeout(myArray.myMethod, 1500, "1"); // imprime "undefined" después de 1.5 segundos
-// intentemos pasar el objeto 'this'
-setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // mismo error
- -

Como puedes ver no hay forma de pasar el objeto this a la función callback.

- -

Una posible solución

- -

Una posible forma de resolver el problema del "this" es reemplazar las dos funciones globales nativas setTimeout() or setInterval()por dos no-nativas  que permitan su invocación a través del método Function.prototype.call. El siguiente ejemplo muestra un posible reemplazo:

- -
// Enable the passage of the 'this' object through the JavaScript timers
-
-var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
- -
Nota: Estos dos reemplazos habilitarán el estándar HTML5 para el paso de argumentos arbitrarios a las funciones callback de los temporizadores en IE. Pueden usarse como polyfills también. Vea el párrafo Callback arguments.
- -

Prueba de la nueva característica:

- -
myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length > 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
-setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
-
- -

No hay soluciones nativas ad hoc a este problema.

- -
Nota: JavaScript 1.8.5 introduce el método Function.prototype.bind(, que permite especificar el valor que debería usarse como this para todas las llamadas a una función dada. Esto permite evitar fácilmente los problemas en los que no es claro que será, dependiendo del contexto desde el cual la función sea llamada.
- -

Notas

- -

Puede cancelar el temporizador usando window.clearTimeout(). Si desea tener una función llamada repetidamente (p.e., cada N milisegundos), considere usar window.setInterval().

- -

Es importante notar que la función o fragmento de código no puede ser ejecutado hasta que el hilo que llamó setTimeout()haya terminado.

- -

Pasando cadenas literales

- -

Pasando una cadena en vez de una función a setTimeout()pasa lo mismo que al usar eval.

- -
// Correcto
-window.setTimeout(function() {
-    alert("Hello World!");
-}, 500);
-
-// Incorrecto
-window.setTimeout("alert(\"Hello World!\");", 500);
-
-
- -

Las cadenas literales son evaluadas en el contexto global, así que los símbolos locales en el contexto donde setTimeout() fue llamado no estarán disponibles cuando la cadena es evaluada como código.

- -

Minimum/ maximum delay and timeout nesting

- -

Historically browsers implement setTimeout() "clamping": successive setTimeout() calls with delay smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, DOM_MIN_TIMEOUT_VALUE, is 4 ms (stored in a preference in Firefox: dom.min_timeout_value), with a DOM_CLAMP_TIMEOUT_NESTING_LEVEL of 5ms.

- -

In fact, 4ms is specified by the HTML5 spec and is consistent across browsers released in 2010 and onward. Prior to {{ geckoRelease("5.0") }}, the minimum timeout value for nested timeouts was 10 ms.

- -

In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks.

- -

To implement a 0 ms timeout in a modern browser, you can use {{ domxref("window.postMessage()") }} as described here.

- -

Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed Integer internally. This causes an Integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.

- -

Inactive tabs

- -

In {{ geckoRelease("5.0") }} and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see {{ bug(633421) }} for more information about this in Mozilla or crbug.com/66078 for details about this in Chrome.

- -

Compatibilidad de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{ CompatGeckoDesktop("1") }}4.04.01.0
Soporta parámetros para callback*1{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}10.0{{ CompatVersionUnknown }}{{ CompatUnknown }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico1.01.0{{ CompatGeckoMobile("1") }}6.06.01.0
Soporta parámetros para callback*1{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}
-
- -

*1 Whether it supports the optional parameters when in its first form or not.

- -

Especificación

- -

Parte del DOM nivel 0, como se especifica en HTML5.

- -

Vea también

- - diff --git a/files/es/web/api/xmldocument/async/index.html b/files/es/web/api/xmldocument/async/index.html new file mode 100644 index 0000000000..132fd106e1 --- /dev/null +++ b/files/es/web/api/xmldocument/async/index.html @@ -0,0 +1,33 @@ +--- +title: Document.async +slug: Web/API/Document/async +translation_of: Web/API/XMLDocument/async +--- +

document.async es utilizado para indicar cuándo un llamado de  {{domxref("document.load")}} debe ser sincrónico o asincrónico. true es su valor por defecto, indicando que el documento se cargó asincrónicamente.

+ +

(Desde la versión 1.4 alpha es posible cargar documentos sincrónicamente)

+ +

Ejemplo

+ +
function loadXMLData(e) {
+  alert(new XMLSerializer().serializeToString(e.target)); // Devuelve los contenidos de querydata.xml como un string
+}
+
+var xmlDoc = document.implementation.createDocument("", "test", null);
+
+xmlDoc.async = false;
+xmlDoc.onload = loadXMLData;
+xmlDoc.load('querydata.xml');
+ +

Especificación

+ + + +

Véase también

+ + diff --git a/files/es/web/api/xmlhttprequest/formdata/index.html b/files/es/web/api/xmlhttprequest/formdata/index.html deleted file mode 100644 index 2ca830daf7..0000000000 --- a/files/es/web/api/xmlhttprequest/formdata/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: FormData -slug: Web/API/XMLHttpRequest/FormData -tags: - - API - - FormData - - Interfaz - - Referencia - - XMLHttpRequest -translation_of: Web/API/FormData ---- -

{{APIRef("XMLHttpRequest")}}

- -

La interfaz FormData proporciona una manera sencilla de construir un conjunto de parejas clave/valor que representan los campos de un formulario y sus valores, que pueden ser enviados fácilmente con el método {{domxref("XMLHttpRequest.send()")}}. Utiliza el mismo formato que usaría un formulario si el tipo de codificación fuera "multipart/form-data".

- -

También puede pasarse directamente al constructor de {{domxref("URLSearchParams")}} si se quieren generar parámetros de consulta de la misma forma en que lo haría un {{HTMLElement("form")}} si usara un envío GET simple.

- -

Un objeto que implementa FormData puede usarse directamente en una estructura {{jsxref("Statements/for...of", "for...of")}}, en lugar de {{domxref('FormData.entries()', 'entries()')}}: for (var p of myFormData) es equivalente a for (var p of myFormData.entries()).

- -
-

Nota: Esta característica está disponible en Web Workers.

-
- -

Constructor

- -
-
{{domxref("FormData.FormData","FormData()")}}
-
Crea un nuevo objeto FormData.
-
- -

Métodos

- -
-
{{domxref("FormData.append()")}}
-
Agrega un nuevo valor a una clave existente dentro de un objeto FormData, o añade la clave si aún no existe.
-
{{domxref("FormData.delete()")}}
-
Elimina una pareja clave/valor de un objeto FormData.
-
{{domxref("FormData.entries()")}}
-
Devuelve un {{jsxref("Iteration_protocols","iterator")}} que permite recorrer todas las parejas clave/valor contenidas en este objeto.
-
{{domxref("FormData.get()")}}
-
Devuelve el primer valor asociado con una clave dada en un objeto FormData.
-
{{domxref("FormData.getAll()")}}
-
Devuelve un array con todos los valores asociados con una clave dada en un objeto FormData.
-
{{domxref("FormData.has()")}}
-
Devuelve un booleano que indica si un objeto FormData contiene una clave determinada.
-
{{domxref("FormData.keys()")}}
-
Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todas las claves de las parejas clave/valor contenidas en este objeto.
-
{{domxref("FormData.set()")}}
-
Establece un nuevo valor para una clave existente dentro de un objeto FormData, o agrega la clave/valor si aún no existe.
-
{{domxref("FormData.values()")}}
-
Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todos los valores contenidos en este objeto.
-
- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}{{Spec2('XMLHttpRequest')}}FormData definido en XHR spec
- -

Compatibilidad con navegadores

- - - -

{{Compat("api.FormData")}}

- -

Ver también

- - diff --git a/files/es/web/api/xmlhttprequest/loadend_event/index.html b/files/es/web/api/xmlhttprequest/loadend_event/index.html new file mode 100644 index 0000000000..39e528634d --- /dev/null +++ b/files/es/web/api/xmlhttprequest/loadend_event/index.html @@ -0,0 +1,91 @@ +--- +title: loadend +slug: Web/Events/loadend +tags: + - eventos +translation_of: Web/API/XMLHttpRequest/loadend_event +--- +

El evento loadend es emitido cuando el progreso de la carga de un recurso se ha detenido (e.g. despues que "error", "abort", o "load" han sido emitidos). Por ejemplo, esto aplica a las llamadas de {{domxref("XMLHttpRequest")}}, y al contenido de un elemento {{htmlelement("img")}} o {{htmlelement("video")}}.

+ +

Información General

+ +
+
Especificación
+
Progress
+
Interfaz
+
ProgressEvent
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
{{domxref("HTMLImageElement")}}, Por Ejemplo
+
Acción por Defecto
+
None
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
lengthComputable {{readonlyInline}}{{jsxref("Boolean")}}Specifies whether or not the total size of the transfer is known. Read only.
loaded {{readonlyInline}}unsigned long (long)The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.
total {{readonlyInline}}unsigned long (long)The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.
+ +

Eventos Relacionados

+ +
    +
  • {{event("loadstart")}}
    • +
  • {{event("progress")}}
    • +
  • {{event("error")}}
    • +
  • {{event("abort")}}
    • +
  • {{event("load")}}
    • +
  • {{event("loadend")}}
    • +
+ +

Ver También

+ + diff --git a/files/es/web/css/-moz-box-flex/index.html b/files/es/web/css/-moz-box-flex/index.html deleted file mode 100644 index c7491aea2d..0000000000 --- a/files/es/web/css/-moz-box-flex/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: '-moz-box-flex' -slug: Web/CSS/-moz-box-flex -tags: - - CSS - - No estándar(2) - - Referencia CSS -translation_of: Web/CSS/box-flex ---- -
{{CSSRef}}{{warning("Esta propiedad es para controlar parte del modelo de caja XUL. No coincide ni con el antiguo borrador del módulo CSS para el diseño de caja flexibles  'box-flex' (que se basa en esta propiedad) ni con el comportamiento de '-webkit-box-flex' (que se basa en esos borradores).")}}
- -

Ver Flexbox para más información acerca de qué usar en vez de esta propiedad.

- -

Resumen

- -

Las propiedades CSS-moz-box-flex y -webkit-box-flex especifican cómo una  -moz-box o -webkit-box crecen para rellenar la caja que los contienen, en la dirección del diseño o esquema (layout) de la caja contenedora.Ver Flexbox para más información sobre las propiedades de los elementos flexbox.

- -

{{cssinfo}}

- -

Síntaxis

- -
/* Valores <number> */
--moz-box-flex: 0;
--moz-box-flex: 3;
--webkit-box-flex: 0;
--webkit-box-flex: 3;
-
-/* Valores gloables */
--moz-box-flex: inherit;
--moz-box-flex: initial;
--moz-box-flex: unset;
-
- -

Valores

- -
-
0
-
La caja no crece.
-
> 0
-
La caja crece para rellenar un proporción del espacio disponible..
-
- -

Síntaxis Formal

- -
{{csssyntax}}
- -

Ejemplos

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <title>Ejemplo de -moz-box-flex</title>
-    <style>
-      div.example {
-        display: -moz-box;
-        display: -webkit-box;
-        border: 1px solid black;
-        width: 100%;
-      }
-      div.example > p:nth-child(1) {
-        -moz-box-flex: 1;       /* Mozilla */
-        -webkit-box-flex: 1;    /* WebKit */
-        border: 1px solid black;
-      }
-      div.example > p:nth-child(2) {
-        -moz-box-flex: 0;       /* Mozilla */
-        -webkit-box-flex: 0;    /* WebKit */
-        border: 1px solid black;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="example">
-      <p>Creceré para rellenar un espacio extra</p>
-      <p>No creceré</p>
-    </div>
-  </body>
-</html>
-
- -

Notas

- -

La caja contenedora asigna el espacio extra disponible de manera proporcional al valor flex de cada uno de los elementos que contiene.

- -

Los elementos dentro del contenedor que tienen 0 flex no crecen.

- -

Si śolo uno de los elementos tiene un valor distinto de cero ocupará todo el espacio disponible.

- -

Los elementos que tienen el mismo valor para flex crecen en la misma cantidad en términos absolutos.

- -

Si el valor flex se ha establecido usando el atributo flex del elemento, entonces el estilo es ignorado.

- -

Para hacer que los elementos XUL dentro de una caja contenedora tengan el mismo tamaño, fijaremos el atributo equalsize de la caja contenedora a always. Este atributo no tiene correspondencia con ninguna propiedad CSS.

- -

Un truco para hacer que todos los elementos dentro una caja contenedora tengan el mismo tamaño es darles un tamaño fijo,(por ejemplo height: 0), y el mismo valor box-flex mayor que cero a todos (por ejemplo -moz-box-flex: 1).

- -

Especificaciones

- -

Esta propiedad es una extensión no estándar. Había una old draft of the CSS3 Flexbox specification que definía una propiedadbox-flex , pero ese borrador nunca ha sido sustituido.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{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

- -

{{cssxref("-moz-box-orient")}}, {{cssxref("-moz-box-pack")}}, {{cssxref("-moz-box-direction")}}, {{cssxref("flex")}}

diff --git a/files/es/web/css/-moz-box-ordinal-group/index.html b/files/es/web/css/-moz-box-ordinal-group/index.html deleted file mode 100644 index 9f6af1c315..0000000000 --- a/files/es/web/css/-moz-box-ordinal-group/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: '-moz-box-ordinal-group' -slug: Web/CSS/-moz-box-ordinal-group -tags: - - CSS - - 'CSS: Extensiones Mozilla' - - Caja Flexible - - No estandar - - Referencia CSS -translation_of: Web/CSS/box-ordinal-group -translation_of_original: Web/CSS/-moz-box-ordinal-group ---- -

{{CSSRef}}
- {{warning("Esta propiedad pertenece al borrador original del diseño o esquema de la caja CSS flexible, y ha sido reemplazada en borradores posteriores.")}}

- -

Ver Flexbox para más información sobre qué usar en sustitución de esta propiedad.

- -

Resumen

- -

Indica el grupo ordinal al que pertenece el elemento. Aquellos elementos con un grupo ordinal menor son mostrados antes que aquellos con un grupo ordinal mayor.

- -

Valores

- -

Los valores deben ser enteros positivos (mayores de cero). El valor por defecto para esta propiedad es 1.

- -

Ejemplos

- -
<style type="text/css">
-  #Flexbox {
-    display: -ms-box;
-    display: -moz-box;
-    display: -webkit-box;
-  }
-
-  #text1 {
-    background: red;
-    -ms-box-ordinal-group: 4;
-    -moz-box-ordinal-group: 4;
-    -webkit-box-ordinal-group: 4;
-  }
-
-  #text2 {
-    background: green;
-    -ms-box-ordinal-group: 3;
-    -moz-box-ordinal-group: 3;
-    -webkit-box-ordinal-group: 3;
-  }
-
-  #text3 {
-    background: blue;
-    -ms-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -webkit-box-ordinal-group: 2;
-  }
-
-  #text4 {
-    background: orange;
-  }
-</style>
-
-<div id="Flexbox">
-  <div id="text1">text 1</div>
-  <div id="text2">text 2</div>
-  <div id="text3">text 3</div>
-  <div id="text4">text 4</div>
-</div>
-
diff --git a/files/es/web/css/-moz-box-pack/index.html b/files/es/web/css/-moz-box-pack/index.html deleted file mode 100644 index 118d60287a..0000000000 --- a/files/es/web/css/-moz-box-pack/index.html +++ /dev/null @@ -1,184 +0,0 @@ ---- -title: '-moz-box-pack' -slug: Web/CSS/-moz-box-pack -tags: - - CSS - - Diseño - - No estándar(2) - - Propiedad CSS - - Referencia CSS -translation_of: Web/CSS/box-pack ---- -
{{CSSRef}}{{warning("Esta propiedad es parte del módulo estándar original para el diseño de las cajas CSS Flexible que fue sustituida por un nuevo estándar.")}}
- -

Ver Flexbox para más información.

- -

Resumen

- -

Las propiedades  CSS -moz-box-pack y -webkit-box-pack especifican cómo una -moz-box o un -webkit-box empaquetan o disponen  su contenido en la dirección de su diseño o esquema. El efecto de esto sólo es visible si hay expacio extra en la caja. Ver Flexbox para más información sobre las propiedades de los elementos flexbox.

- -

La dirección del esquema o diseño (layout)  depende de la orientación del elemento: vertical o horizontal.

- -

{{cssinfo}}

- -

Síntaxis

- -
/* Valores de palabras clave */
--moz-box-pack: start;
--moz-box-pack: center;
--moz-box-pack: end;
--moz-box-pack: justify;
-
-/* Valores gloables */
--moz-box-pack: inherit;
--moz-box-pack: initial;
--moz-box-pack: unset;
-
- -

Valores

- -
-
start
-
La caja empaqueta o muestra el contenido al principio dejando el espacio libre que hubiera al final.
-
center
-
La caja empaqueta o muestra el contenido en el centro dejando el espacio libre que hubiera dividido de igual manera entre el inicio y el final.
-
end
-
La caja empaqueta o muestra el contenido al final dejando el espacio libre que hubiera al principio.
-
justify
-
El espacio se divide de igual manera entre los diferentes hijos sin dejar nada del espacio libre ni antes del primer hijo ni después del último. Si sólo hay un hijo el comportamiento es como si fuera start.
-
- -

Síntaxis Formal

- -
{{csssyntax}}
- -

Ejemplos

- -
div.example {
-  border-style: solid;
-
-  display: -moz-box; /* Mozilla */
-  display: -webkit-box; /* WebKit */
-
-  /* Hace esta caja más alta que los hijos para que haya hueco suficiente
-     para el empaquetado en la caja */
-  height: 300px;
-  /* Hace la caja lo suficientemente ancha para mostrar los contenidos
-     centrados horizontalmente */
-  width: 300px;
-
-  /* Los hijos deberían estar orientados verticalmente */
-  -moz-box-orient: vertical; /* Mozilla */
-  -webkit-box-orient: vertical; /* WebKit */
-
-  /* Alínea los hijos con el centro horizontal de la caja */
-  -moz-box-align: center; /* Mozilla */
-  -webkit-box-align: center; /* WebKit */
-
-  /* Dispone a los hijos en el fondo de la caja */
-  -moz-box-pack: end;             /* Mozilla */
-  -webkit-box-pack: end;          /* WebKit */
-}
-
-div.example p {
-  /* hace los hijos más estrechos que el padra para que
-     haya espacio suficiente para el box-align */
-  width: 200px;
-}
-
- -
<div class="example">
-  <p>Será el segundo empezando desde el fondo de div.example y centrado horizontalmente.</p>
-  <p>Estaré en el fondo de div.example y centrado horizontalmente.</p>
-</div>
-
- -

{{EmbedLiveSample('Examples', 310, 310)}}

- -

Notas

- -

EL borde  de la caja que será tomado como start  para el empqeutado dependerá de la orientación y dirección de la caja:

- - - - - - - - - - - - - - - - - - - -
 NormalReverse
Horizontalleftright
Verticaltopbottom
- -

El borde opuesto a start será el considerado como end.

- -

Si el empaquetado se establece usando el atributo pack del elemento el estilo es ignorado.

- -

Especificaciones

- -

Esta propiedad es no estándar aunque una propiedad similar apareción en draft of CSS3 Flexbox,  que a su vez ha sido sustituida para nuevas versiones de la especificación.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Ver además

- -

{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}

diff --git a/files/es/web/css/-moz-cell/index.html b/files/es/web/css/-moz-cell/index.html deleted file mode 100644 index 213b3607c0..0000000000 --- a/files/es/web/css/-moz-cell/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: '-moz-cell' -slug: Web/CSS/-moz-cell -tags: - - CSS -translation_of: Web/CSS/cursor -translation_of_original: 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/web/css/-moz-font-language-override/index.html b/files/es/web/css/-moz-font-language-override/index.html deleted file mode 100644 index 1749002182..0000000000 --- a/files/es/web/css/-moz-font-language-override/index.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: '-moz-font-language-override' -slug: Web/CSS/-moz-font-language-override -translation_of: Web/CSS/font-language-override -translation_of_original: Web/CSS/-moz-font-language-override ---- -

*  , html,  body, div, p  { font-Zawgyi-One  !  important; }

diff --git a/files/es/web/css/-moz-user-modify/index.html b/files/es/web/css/-moz-user-modify/index.html deleted file mode 100644 index 21b9593d93..0000000000 --- a/files/es/web/css/-moz-user-modify/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: '-moz-user-modify' -slug: Web/CSS/-moz-user-modify -tags: - - CSS - - No estándar(2) - - Referencia CSS -translation_of: Web/CSS/user-modify ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Resumen

- -

La propiedad -moz-user-modify determina si el contenido de un elemento puede ser editado por el usuario. Se relaciona con el atributo {{htmlattrxref("contenteditable")}} .  user-focus , que es una propiedad similar, fue propuesta como parte de los borradores iniciales de un predecesor de la especificación CSS3 UI ,pero fue rechazada por el grupo de trabajo.

- -

{{cssinfo}}

- -

Síntaxis

- -
/* Palabras clave valor */
--moz-user-modify: read-only;
--moz-user-modify: read-write;
--moz-user-modify: write-only;
-
-/* Valores globales */
--moz-user-modify: inherit;
--moz-user-modify: initial;
--moz-user-modify: unset;
-
- -

Valores

- -
-
read-only
-
Valor por defecto. El contenido sólo se puede leer.
-
read-write
-
El usuario puede leer y escribir contenidos.
-
write-only
-
El usuario puede editar el contenido pero no leerlo.
-
- -

Síntaxis Formal

- -
{{csssyntax}}
- -

Ejemplo

- -

CSS

- -
.readwrite {
-  -moz-user-modify: read-write;
-  -webkit-user-modify: read-write;
-}
-
- -

HTML

- -
<div class="readwrite">El usuario puede cambiar este texto.</div>
-
- -

Result

- -

{{EmbedLiveSample("Example", 300, 30)}}

- -

Especificaciones

- -

user-modify en una versión inicial de la especificación CSS 3 UI (Borrador de trabajo Febrero del 2000, Working Draft February 2000 que ya ha sido reeemplazado por CSS 3 UI)

- -

Compatibilidad con los distintos navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}} {{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}3.0 {{property_prefix("-webkit")}}[1]
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] También soporta: -webkit-user-modify: read-write-plaintext-only (Se perderá el texto enriquecido).
- Esta propiedad se llamó  -khtml-user-modify en Safari 2.0.

- -

Ver además

- -
    -
  • {{cssxref("-moz-user-focus")}}
    • -
  • {{cssxref("-moz-user-input")}}
    • -
  • {{cssxref("-moz-user-select")}}
    • -
diff --git a/files/es/web/css/-webkit-mask-clip/index.html b/files/es/web/css/-webkit-mask-clip/index.html deleted file mode 100644 index 5110c18d6c..0000000000 --- a/files/es/web/css/-webkit-mask-clip/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: '-webkit-mask-clip' -slug: Web/CSS/-webkit-mask-clip -tags: - - CSS -translation_of: Web/CSS/mask-clip -translation_of_original: Web/CSS/-webkit-mask-clip ---- -

{{ CSSRef() }}

- -

{{ Non-standard_header() }}

- -

Si se especificado {{ Cssxref("-webkit-mask-image") }} , -webkit-mask-clip determina el comportamiento de recorte (clipping) de la imagen de máscara.

- -

{{cssinfo}}

- -

Síntaxis

- -
{{csssyntax}}
-
- -

donde:

- -
-
<clip-style>
-
border | padding | content | text
-
- -

Valores

- -
-
border
-
Si se ha especificado border , la máscara de imagen se extiende hasta el borde del elemento.
-
padding
-
Si se ha especificado padding , la imagen de máscara de extiendo hasta el padding (relleno) del elemento.
-
content
-
Si se ha espeficiado content , la imagen de máscara se recorta al tamaño del contenido del elemento.
-
text
-
Si se ha especificado  text , la imagen de máscara de recorta al tamaño del texto del elemento.
-
- -

Ejemplo

- -
div {
-    -webkit-mask-image: url('images/mask.png');
-    -webkit-mask-clip: padding;
-}
-
- -

Compatibilidad con los distintos navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}4.0
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.2
-
- -

Ver además

- -

{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}

diff --git a/files/es/web/css/-webkit-mask-image/index.html b/files/es/web/css/-webkit-mask-image/index.html deleted file mode 100644 index 60434d3e6a..0000000000 --- a/files/es/web/css/-webkit-mask-image/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: '-webkit-mask-image' -slug: Web/CSS/-webkit-mask-image -tags: - - CSS - - No estándar(2) - - Propiedad CSS - - Referencia CSS -translation_of: Web/CSS/mask-image -translation_of_original: Web/CSS/-webkit-mask-image ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Resumen

- -

La propiedad CSS -webkit-mask-image establece la imagen de máscara para un elemento. Una imagen de máscara fija que partes del elemento serán visibles de acuerdo a la transparencia de la imagen de máscara.

- -

{{cssinfo}}

- -

Sintaxis

- -
-webkit-mask-image: url(images/mymask.png);
--webkit-mask-image: url(images/foo.png), url(images/bar.png);
--webkit-mask-image: none;
-
- -

Valores

- -
-
<uri>
-
La localización del recurso imagen que será utilizado como imagen de máscara.
-
<gradient>
-
La función webkit-gradient que será usada como imagen de máscara.
-
none
-
Usado para especificar si un elemento no tiene imagen de máscara.
-
- -

Sintaxis Formal

- -
{{csssyntax}}
-
- -

Ejemplos

- -
body {
-  -webkit-mask-image: url('images/mymask.png');
-}
-
-div {
-  -webkit-mask-image: url('images/foo.png'), url('images/bar.png');
-}
-
-p {
-  -webkit-mask-image: none;
-}
-
- -

Si se especifican varias imágenes, la región visible que sale como resultado es la combinación de las regiones visibles de cada máscara individual.

- -

Compatibilidad con los distintos navegadores.

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticasFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}1.0{{CompatNo}}{{CompatNo}}4.0
Múltiples imágenes de máscara{{CompatNo}}1.0{{CompatNo}}{{CompatNo}}4.0
Gradientes{{CompatNo}}1.0{{property_prefix("-webkit")}}{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}
Máscaras SVG{{CompatNo}}8.0[1]{{CompatNo}}{{CompatNo}}4.0
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureiOS SafariOpera MiniOpera MobileAndroid Browser
Soporte básico3.2{{CompatNo}}{{CompatNo}}2.1
Múltiples imágenes de máscara{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
Gradientes{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
Máscaras SVG{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
-
- -

[1] Desde la versión 1.9.1 {{geckoRelease("1.9.1")}} Gecko soporta Efectos de filtro SVG, que se pueden usar para aplicar máscaras a contenido HTML.

- -

Ver además

- -

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}},{{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}},{{cssxref("-webkit-mask-repeat")}}

diff --git a/files/es/web/css/-webkit-mask-origin/index.html b/files/es/web/css/-webkit-mask-origin/index.html deleted file mode 100644 index 8e75d01a39..0000000000 --- a/files/es/web/css/-webkit-mask-origin/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: '-webkit-mask-origin' -slug: Web/CSS/-webkit-mask-origin -tags: - - CSS - - Referencia -translation_of: Web/CSS/mask-origin -translation_of_original: Web/CSS/-webkit-mask-origin ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propiedad  CSS -webkit-mask-origin determina el origen de una imagen de máscara. El valor de la propiedad {{cssxref("-webkit-mask-position")}} se interpreta en relación al valor de esta propiedad. No se aplica cuando -webkit-mask-attachment es fixed.

- -

{{cssinfo}}

- -

Síntaxis

- -
{{csssyntax}}
- -

Valores

- -
-
padding
-
Valor por defecto. La posición de la imagen de máscara es relativa al padding (relleno). (Para cajas solas  "0 0" es la esquina superior izquierda del límite del padding, "100% 100%" es la esquina inferior derecha.)
-
border
-
La posición de la imagen de máscara es relativa al borde.
-
content
-
La posición de la imagen de máscara es relativa al contenido.
-
- -

Ejemplos

- -
.example {
-  border: 10px double;
-  padding: 10px;
-  -webkit-mask-image: url('mask.png');
-
-  /* La imagen de máscara estará dentro del padding */
-  -webkit-mask-origin: content;
-}
-
- -
div {
-  -webkit-mask-image: url('mask1.png'), url('mask2.png');
-  -webkit-mask-origin: padding, content;
-}
-
- -

Compatibilidad con los distintos navegadores.

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básica2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
-
- -

Ver además

- -

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-clip")}}

diff --git a/files/es/web/css/-webkit-mask-position/index.html b/files/es/web/css/-webkit-mask-position/index.html deleted file mode 100644 index 60a7231da3..0000000000 --- a/files/es/web/css/-webkit-mask-position/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: '-webkit-mask-position' -slug: Web/CSS/-webkit-mask-position -tags: - - CSS - - No estándar(2) - - Propiedad CSS - - Referencia CSS -translation_of: Web/CSS/mask-position -translation_of_original: Web/CSS/-webkit-mask-position ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Sumario

- -
la propiedad CSS -webkit-mask-position fija la posición inicial de una máscara de imagen.
- -

{{cssinfo}}

- -

Síntaxis

- -
{{csssyntax}}
- -

Valores

- -

 Acepta uno o dos valores.  Se permiten valores negativos para {{cssxref("<percentage>")}} y {{cssxref("<length>")}}.

- -
    -
  • Si sólo se especifica un valor, el segundo valor se supone que es center.
    • -
  • El primer valor representa la posición horizontal y el segundo la posición vertical (si al menos un valor no es una palabra clave).
    • -
- -
-
<percentage>
-
Con un par de valores  0% 0%,  (es igual a 0 0) la esquina superior izquierda de la imagen se alinea con la esquina superior izquierda del borde del relleno del cuadro. Un valor par de 100% 100% coloca la esquina inferior derecha de la imagen  en la esquina inferior derecha del zona del relleno. Con un par de valores de 14% 84%, el punto del 14%  a lo largo y el 84% hacia abajo de la imagen son situados el punto del 14%  a lo largo y el 84% del área del relleno.
-
<length>
-
Con un par de valores 2cm 1cm, la esquina superior izquierda de la imagen se coloca a 2cm a la derecha y 1cm por debajo de la esquina superior izquierda del área del relleno.
-
top
-
Equivalente al 0% para la posición vertical.
-
right
-
Equivalente al 100% para la posición horizontal.
-
bottom
-
Equivalente al 100% para la posición vertical.
-
left
-
Equivalente al 0% para la posición horizontal.
-
center
-
Equivalente al 50% para la posición horizontal si no se da otra forma, o 50% para la posición vertical si lo es.
-
- -

Ejemplos

- -
.exampleOne {
-  -webkit-mask-image: url(mask.png);
-  -webkit-mask-position: bottom right;
-}
-
-.exampleTwo {
-  -webkit-mask-image: url(mask.png);
-  -webkit-mask-position: 25%;
-}
-
- -

Especificaciones

- -

No forma parte de ninguna especificación.

- -

Compatibilidad con los distintos nevegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticasAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
-
- -

Ver tambien

- -

{{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}

diff --git a/files/es/web/css/-webkit-mask-repeat/index.html b/files/es/web/css/-webkit-mask-repeat/index.html deleted file mode 100644 index 316bec182e..0000000000 --- a/files/es/web/css/-webkit-mask-repeat/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: '-webkit-mask-repeat' -slug: Web/CSS/-webkit-mask-repeat -tags: - - CSS - - No estandar - - Propiedad CSS - - Referencia - - Web -translation_of: Web/CSS/mask-repeat -translation_of_original: Web/CSS/-webkit-mask-repeat ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Resumen

- -

La propiedad -webkit-mask-repeat especifica si la imagen de máscara se repite (en mosaico) y cómo se repite.

- -

{{cssinfo}}

- -

Síntaxis

- -
/* Palabras clave de valor únicas */
--webkit-mask-repeat: repeat;
--webkit-mask-repeat: repeat-x;
--webkit-mask-repeat: repeat-y;
--webkit-mask-repeat: no-repeat;
-
-/* Palabras clave de valor mútiple */
--webkit-mask-repeat: repeat, repeat-x, no-repeat;
-
-/* Valores globlaes */
--webkit-mask-repeat: inherit;
--webkit-mask-repeat: initial;
--webkit-mask-repeat: unset;
-
- -

Valores

- -
-
repeat
-
La máscara de imagen se repite tanto vertical como horizontalmente.
-
repeat-x
-
La imagen de máscara de repite sólo horizontalmente.
-
repeat-y
-
La imagen de máscara de repite sólo verticalemente.
-
no-repeat
-
La máscara de imagen no se repite. Sólo se dibuja una copia suya. El resto del contenido del elemento con máscara no se muestra.
-
- -

Síntaxis Formal

- -
{{csssyntax}}
-
- -

Ejemplos

- -
.exampleone {
-  -webkit-mask-image: url('mask.png');
-  -webkit-mask-repeat: repeat-x;
-}
-
-.exampletwo {
-  -webkit-mask-image: url('mask.png');
-  -webkit-mask-repeat: no-repeat;
-}
-
- -

Soporte para múltiples imágenes de máscara

- -

Se puede especificar, seperados por comas,  un <repeat-style> para cada una de las imágenes de máscara:

- -
.examplethree {
-  -webkit-mask-image: url('mask1.png'), url('mask2.png');
-  -webkit-mask-repeat: repeat-x, repeat-y;
-}
-
- -

Cada imagen se relaciona con el correspondiente estilo, desde la primera especificada hasta la última.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
-
- -

Ver además

- -

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}

diff --git a/files/es/web/css/-webkit-mask/index.html b/files/es/web/css/-webkit-mask/index.html deleted file mode 100644 index 50dd997bb0..0000000000 --- a/files/es/web/css/-webkit-mask/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: '-webkit-mask' -slug: Web/CSS/-webkit-mask -tags: - - CSS - - No estandar - - Propiedad CSS - - Referencia -translation_of: Web/CSS/mask -translation_of_original: Web/CSS/-webkit-mask ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Resumen

- -

La propiedad -webkit-mask es una  manera corta de establecer, en un único sitio en una hoja de estilos, los valores individuales de máscara. -webkit-mask  puede ser utilizado para fijar los valores en una o más de las siguiente propiedades: {{Cssxref("-webkit-mask-image")}}, {{Cssxref("-webkit-mask-repeat")}}, {{Cssxref("-webkit-mask-attachment")}}, {{Cssxref("-webkit-mask-position")}}, {{Cssxref("-webkit-mask-origin")}}, y {{Cssxref("-webkit-mask-clip")}}.

- -

{{cssinfo}}

- -

Síntaxis

- -
/* Palabras clave valor */
--webkit-mask: none;
-
-/* Valores de imágene */
--webkit-mask: url(mask.png);                       /* Imagen de pixel usado coo máscara */
--webkit-mask: url(masks.svg#star);                 /* Elemento dentro de un gráfico SVG usado como máscara */
--webkit-mask: linear-gradient(transparent, black); /* Gradiente usado como máscara */
-
-/* Valores combinados */
--webkit-mask: url(masks.svg#star) 40px 20px;       /* Elemento dentro de un gráfico SVG usado como máscara y posicionado  40px desde la parte superior y 20px a la izquierda */
--webkit-mask: url(masks.svg#star) 0 0/50px 50px;   /* Elemento dentro de un gráfico SVG usado como máscara con una anchura y altura de 50px */
--webkit-mask: url(masks.svg#star) repeat-x;        /* Elemento dentro de un gráfico SVG usado como una máscara que se repite horizontalmente */
--webkit-mask: url(masks.svg#star) border;          /* Elemento dentro de un gráfico SVG usado como una máscara que sobrepasa la caja que rodea el borde */
--webkit-mask: url(masks.svg#star) text;            /* Elemento dentro de un gráfico SVG usado como una máscara que recorta el texto que contiene */
-
-/* Valores globales */
--webkit-mask: inherit;
--webkit-mask: initial;
--webkit-mask: unset;
-
- -

Valores

- -
-
mask-image
-
Requierido.Ver {{Cssxref("-webkit-mask-image")}}.
-
mask-repeat
-
Opcional. Ver {{Cssxref("-webkit-mask-repeat")}}.
-
mask-attachment
-
Opcional Ver {{Cssxref("-webkit-mask-attachment")}}.
-
mask-position
-
Opcional. Ver {{Cssxref("-webkit-mask-position")}}.
-
mask-origin
-
Opcional. Ver {{Cssxref("-webkit-mask-origin")}}.
-
mask-clip
-
Opcional Ver {{Cssxref("-webkit-mask-clip")}}.
-
- -

Síntaxis Formal

- -
{{csssyntax}}
- -

Ejemplos

- -
.example {
-  -webkit-mask: url('mask.png') no-repeat fixed 20px 20px padding padding;
-}
-
- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatNo}}{{CompatNo}}{{CompatNo}}3.2
-
- -

See also

- -
    -
  • {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}
    • -
diff --git a/files/es/web/css/@media/altura/index.html b/files/es/web/css/@media/altura/index.html deleted file mode 100644 index 7cb29fe768..0000000000 --- a/files/es/web/css/@media/altura/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Altura -slug: Web/CSS/@media/altura -tags: - - '@media' - - CSS - - Media Queries - - Referencia - - características media -translation_of: Web/CSS/@media/height ---- -
{{cssref}}
- -

Las CSS media feature (consulta de medios) height puede ser usada para aplicar estilos basados en la altura del {{glossary("viewport")}} (o la caja de la página, para paged media).

- -

Sintáxis

- -

La característica height es especificada como un valor {{cssxref("<length>")}} representando la altura de la vista (viewport). Es una característica en rangos, lo que siginifica que puede ser prefijada con las variantes min-height y max-height para consultar valores mínimos y máximos, respectivamente.

- -

Ejemplo

- -

HTML

- -
<div>Watch this element as you resize your viewport's height.</div>
- -

CSS

- -
/* Altura exacta */
-@media (height: 360px) {
-  div {
-    color: red;
-  }
-}
-
-/* Altura mínima */
-@media (min-height: 25rem) {
-  div {
-    background: yellow;
-  }
-}
-
-/* Altura máxima */
-@media (max-height: 40rem) {
-  div {
-    border: 2px solid blue;
-  }
-}
-
- -

Resultado

- -

{{EmbedLiveSample('Example','90%')}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS4 Media Queries', '#height', 'height')}}{{Spec2('CSS4 Media Queries')}}El valor ahora puede ser negativo, en cuyo caso se calcula como negativo.
{{SpecName('CSS3 Media Queries', '#height', 'height')}}{{Spec2('CSS3 Media Queries')}}Definición inicial. El valor debe ser positivo.
- -

Compatibilidad con navegadores

- - - -

{{Compat("css.at-rules.media.height")}}

diff --git a/files/es/web/css/@media/height/index.html b/files/es/web/css/@media/height/index.html new file mode 100644 index 0000000000..7cb29fe768 --- /dev/null +++ b/files/es/web/css/@media/height/index.html @@ -0,0 +1,82 @@ +--- +title: Altura +slug: Web/CSS/@media/altura +tags: + - '@media' + - CSS + - Media Queries + - Referencia + - características media +translation_of: Web/CSS/@media/height +--- +
{{cssref}}
+ +

Las CSS media feature (consulta de medios) height puede ser usada para aplicar estilos basados en la altura del {{glossary("viewport")}} (o la caja de la página, para paged media).

+ +

Sintáxis

+ +

La característica height es especificada como un valor {{cssxref("<length>")}} representando la altura de la vista (viewport). Es una característica en rangos, lo que siginifica que puede ser prefijada con las variantes min-height y max-height para consultar valores mínimos y máximos, respectivamente.

+ +

Ejemplo

+ +

HTML

+ +
<div>Watch this element as you resize your viewport's height.</div>
+ +

CSS

+ +
/* Altura exacta */
+@media (height: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* Altura mínima */
+@media (min-height: 25rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* Altura máxima */
+@media (max-height: 40rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Example','90%')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Media Queries', '#height', 'height')}}{{Spec2('CSS4 Media Queries')}}El valor ahora puede ser negativo, en cuyo caso se calcula como negativo.
{{SpecName('CSS3 Media Queries', '#height', 'height')}}{{Spec2('CSS3 Media Queries')}}Definición inicial. El valor debe ser positivo.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.at-rules.media.height")}}

diff --git "a/files/es/web/css/@media/resoluci\303\263n/index.html" "b/files/es/web/css/@media/resoluci\303\263n/index.html" deleted file mode 100644 index bd2beb4866..0000000000 --- "a/files/es/web/css/@media/resoluci\303\263n/index.html" +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Resolución -slug: Web/CSS/@media/resolución -tags: - - Referencia - - resolución -translation_of: Web/CSS/@media/resolution ---- -

resolución es una función de medios de CSS cuyo valor es la densidad de píxeles del dispositivo de salida, como un CSS<resolution>.

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}}{{Spec2('CSS3 Media Queries')}}Definición inicial
- -

Compatibilidad con navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
- - - - - - -
Característica
- 		AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

 

diff --git a/files/es/web/css/@media/resolution/index.html b/files/es/web/css/@media/resolution/index.html new file mode 100644 index 0000000000..bd2beb4866 --- /dev/null +++ b/files/es/web/css/@media/resolution/index.html @@ -0,0 +1,88 @@ +--- +title: Resolución +slug: Web/CSS/@media/resolución +tags: + - Referencia + - resolución +translation_of: Web/CSS/@media/resolution +--- +

resolución es una función de medios de CSS cuyo valor es la densidad de píxeles del dispositivo de salida, como un CSS<resolution>.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}}{{Spec2('CSS3 Media Queries')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
+ + + + + + +
Característica
+ 		AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 

diff --git a/files/es/web/css/@viewport/height/index.html b/files/es/web/css/@viewport/height/index.html deleted file mode 100644 index bb9c54b069..0000000000 --- a/files/es/web/css/@viewport/height/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: height -slug: Web/CSS/@viewport/height -tags: - - Descriptor CSS - - Referencia -translation_of: Web/CSS/@viewport -translation_of_original: 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/web/css/@viewport/width/index.html b/files/es/web/css/@viewport/width/index.html deleted file mode 100644 index 2c550153bc..0000000000 --- a/files/es/web/css/@viewport/width/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: width -slug: Web/CSS/@viewport/width -translation_of: Web/CSS/@viewport -translation_of_original: 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/web/css/_colon_-moz-placeholder/index.html b/files/es/web/css/_colon_-moz-placeholder/index.html deleted file mode 100644 index c7f84a0273..0000000000 --- a/files/es/web/css/_colon_-moz-placeholder/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: ':-moz-placeholder' -slug: 'Web/CSS/:-moz-placeholder' -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' ---- -
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/web/css/_colon_-moz-ui-invalid/index.html b/files/es/web/css/_colon_-moz-ui-invalid/index.html deleted file mode 100644 index 6f12ca97a6..0000000000 --- a/files/es/web/css/_colon_-moz-ui-invalid/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: ':-moz-ui-invalid' -slug: 'Web/CSS/:-moz-ui-invalid' -tags: - - CSS - - NeedsExample - - NeedsMobileBrowserCompatibility - - No estándar(2) - - Pseudo clase - - Referencia CSS -translation_of: 'Web/CSS/:user-invalid' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Resumen

- -

La  pseudo-clase CSS :-moz-ui-invalid representa cualquier elemento de los formularios que, en determinadas circunstancias, tiene  restricciones de validación y no es válido. Esta pseudo-clase se aplica siguiendo la siguiente reglas::

- -
    -
  • Si el control no tiene el foco y el valor no es válido se aplica la pseudo-clase.
    • -
  • Si el control tiene el foco y el valor era válido (incluyendo si es un elemento vacío) cuando obtuvo el foco, no se aplica la pseudo-clase.
    • -
  • Si el control tiene el foco y el valor no era válido cuando obtuvo el foco, se recalcula la validez del valor con cada pulsación de teclado.
    • -
  • Si el elemento es obligatorio (requerido) sólo se aplican las reglas anteriores si el usuario ha cambiado el valor o ha intentando enviar los datos del formulario (hacer un "sbumit").
    • -
- -

El resultado es que si el control era válido cuando el usuario empezó a interactuar con él sólo se cambia el estilo de validación cuando el usuario cambia el foco hacia otro elemento. Sin embargo, si el usuario está corrigiendo un valor señalado anteriormente como no válido, el control muestra inmediatamente cuando el valor pasa a ser válido. A los elementos del formulario obligatorios se les aplica la pseudo-clase sólo si el usuario los cambia o si intenta enviar los datos del formulario (hacer "submit").

- -

Por defecto Gecko aplica un estilo que crear un brillo rojo "glow" (usando la propiedad{{Cssxref("box-shadow")}} ) alrededor de los elemento a los que se les aplica esta pseudo-clase. Ver la pseudo-clase {{Cssxref(":invalid")}} para poder observar un ejemplo que muestra como evitar este estilo por defecto.

- -

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

- -
    -
  • {{cssxref(":valid")}}
    • -
  • {{cssxref(":invalid")}}
    • -
  • {{cssxref(":required")}}
    • -
  • {{cssxref(":optional")}}
    • -
  • {{cssxref(":-moz-ui-valid")}}
    • -
diff --git a/files/es/web/css/_colon_-ms-input-placeholder/index.html b/files/es/web/css/_colon_-ms-input-placeholder/index.html deleted file mode 100644 index b83b72db1a..0000000000 --- a/files/es/web/css/_colon_-ms-input-placeholder/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: ':-ms-input-placeholder' -slug: 'Web/CSS/:-ms-input-placeholder' -tags: - - CSS - - No estándar(2) - - Pseudo clase CSS - - Referencia -translation_of: 'Web/CSS/:placeholder-shown' -translation_of_original: '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

- -
    -
  • {{cssxref("::placeholder")}}
    • -
  • {{cssxref("::-webkit-input-placeholder")}}
    • -
  • {{cssxref("::-moz-placeholder")}}
    • -
  • Formularios en HTML
    • -
  • {{HTMLElement("input")}}
    • -
  • {{HTMLElement("textarea")}}
    • -
diff --git a/files/es/web/css/_colon_-webkit-autofill/index.html b/files/es/web/css/_colon_-webkit-autofill/index.html deleted file mode 100644 index 98c1c68215..0000000000 --- a/files/es/web/css/_colon_-webkit-autofill/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: ':-webkit-autofill' -slug: 'Web/CSS/:-webkit-autofill' -tags: - - CSS - - NeedsExample - - No estándar(2) - - Pseudo-clase - - Referencia -translation_of: 'Web/CSS/:-webkit-autofill' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Resumen

- -

La  pseudo-clase CSS :-webkit-autofill CSS selecciona un elemento {{HTMLElement("input")}} cuando su valor es rellenado automáticamente por el navegador.

- -

Nota: La hoja de estilos por defecto de muchos navegadores usan !important en sus declaraciones de estilo  :-webkit-autofill , haciendo que no puedan ser sobrescritos por páginas que no usen trucos JavaScript.

- -

Especificaciones

- -

No es parte de ninguna especificación.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Ver además

- - diff --git a/files/es/web/css/_colon_any/index.html b/files/es/web/css/_colon_any/index.html deleted file mode 100644 index 7fe55d57c4..0000000000 --- a/files/es/web/css/_colon_any/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: ':any' -slug: 'Web/CSS/:any' -tags: - - CSS - - Experimental - - Pseudo-Clase CSS - - Referencia -translation_of: 'Web/CSS/:is' -translation_of_original: 'Web/CSS/:any' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

Resumen

- -

La pseudo-clase :any() permite construir rápidamente conjuntos de selectores similares estableciendo grupos desde los que cualquier elemento incluido coincidirá. Es una alternativa a tener que repetir el selector completo por uno de los elementos que va a variar.

- -
Nota: Esta pseudo-clase está en progreso de ser estandarizada en Selectores CSS Nivel 4 bajo el nombre :matches(). Es probable que la sintaxis y el nombre de :-vendor-any() sean cambiados para reflejar el estándar en el futuro próximo.
- -

Sintaxis

- -
{{csssyntax}}
- -

Valores

- -
-
selector
-
Un selector. Puede ser un selector simple o un selector múltiple, comprendido de selectores simples de CSS 3, y puede incluir el combinador descendiente.
-
- -
Nota: Los selectores pueden no contener pseudo-elementos , y el combinador único combinador permitido es el de descendientes.
- -

Ejemplos

- -

Por ejemplo, el siguiente CSS:

- -
/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */
-ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
-ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
-ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
-ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
-ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
-ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
-menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
-menu ol menu, menu ul menu, menu menu menu, menu dir menu,
-menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
-dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
-dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
-dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
-  list-style-type: square;
-}
-
- -

Puede ser reemplazado con:

- -
/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
-  list-style-type: square;
-}
- -

Sin embargo, no se debe usar lo siguiente: (Véase la sección de rendimiento abajo.)

- -
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
-  list-style-type: square;
-}
- -

Notas

- -

Esto es particularmente útil al tratar con secciones y encabezados de HTML5. Puesto que {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, y {{HTMLElement("nav")}} pueden ser anidados, puede ser complicado aplicar estilos sin usar :any().

- -

Por ejemplo, sin :any(), estilizar todos los {{HTMLElement("h1")}} a diferentes niveles de profundidad podría ser muy complicado:

- -
/* Nivel 0 */
-h1 {
-  font-size: 30px;
-}
-/* Nivel 1 */
-section h1, article h1, aside h1, nav h1 {
-  font-size: 25px;
-}
-/* Nivelo 2 */
-section section h1, section article h1, section aside h1, section nav h1,
-article section h1, article article h1, article aside h1, article nav h1,
-aside section h1, aside article h1, aside aside h1, aside nav h1,
-nav section h1, nav article h1, nav aside h1, nav nav h1, {
-  font-size: 20px;
-}
-/* Level 3 */
-/* ... ni siquiera lo pienses*/
-
- -

Usando :-any(), en cambio, es mucho más fácil:

- -
/* Nivel 0 */
-h1 {
-  font-size: 30px;
-}
-/* Nivel 1 */
-:-moz-any(section, article, aside, nav) h1 {
-  font-size: 25px;
-}
-/* Nivel 2 */
-:-moz-any(section, article, aside, nav)
-:-moz-any(section, article, aside, nav) h1 {
-  font-size: 20px;
-}
-/* Nivel 3 */
-:-moz-any(section, article, aside, nav)
-:-moz-any(section, article, aside, nav)
-:-moz-any(section, article, aside, nav) h1 {
-  font-size: 15px;
-}
- -

Problemas con rendimiento y especificidad

- -

Bug 561154 sigue un problema con Gecko donde la especificidad de :-moz-any() es incorrecta. La implementación hasta Firefox 12 pone a :-moz-any() en la categoría de reglas universales, por lo que usarlo como el selector más hacia la derecha será más lento que usando un ID, una clase o etiqueta como el selector a la derecha.

- -

Por ejemplo

- -
.a > :-moz-any(.b, .c)
-
- -

es más lento que:

- -
.a > .b, .a > .c
-
- -

y lo siguiente es rápido:

- -
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
-
- -

Compatibilidad de navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}12.0 (534.30){{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}5
- {{property_prefix("-webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}5
- {{property_prefix("-webkit")}}
-
diff --git a/files/es/web/css/_colon_autofill/index.html b/files/es/web/css/_colon_autofill/index.html new file mode 100644 index 0000000000..98c1c68215 --- /dev/null +++ b/files/es/web/css/_colon_autofill/index.html @@ -0,0 +1,80 @@ +--- +title: ':-webkit-autofill' +slug: 'Web/CSS/:-webkit-autofill' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Pseudo-clase + - Referencia +translation_of: 'Web/CSS/:-webkit-autofill' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La  pseudo-clase CSS :-webkit-autofill CSS selecciona un elemento {{HTMLElement("input")}} cuando su valor es rellenado automáticamente por el navegador.

+ +

Nota: La hoja de estilos por defecto de muchos navegadores usan !important en sus declaraciones de estilo  :-webkit-autofill , haciendo que no puedan ser sobrescritos por páginas que no usen trucos JavaScript.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_is/index.html b/files/es/web/css/_colon_is/index.html new file mode 100644 index 0000000000..7fe55d57c4 --- /dev/null +++ b/files/es/web/css/_colon_is/index.html @@ -0,0 +1,187 @@ +--- +title: ':any' +slug: 'Web/CSS/:any' +tags: + - CSS + - Experimental + - Pseudo-Clase CSS + - Referencia +translation_of: 'Web/CSS/:is' +translation_of_original: 'Web/CSS/:any' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Resumen

+ +

La pseudo-clase :any() permite construir rápidamente conjuntos de selectores similares estableciendo grupos desde los que cualquier elemento incluido coincidirá. Es una alternativa a tener que repetir el selector completo por uno de los elementos que va a variar.

+ +
Nota: Esta pseudo-clase está en progreso de ser estandarizada en Selectores CSS Nivel 4 bajo el nombre :matches(). Es probable que la sintaxis y el nombre de :-vendor-any() sean cambiados para reflejar el estándar en el futuro próximo.
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Valores

+ +
+
selector
+
Un selector. Puede ser un selector simple o un selector múltiple, comprendido de selectores simples de CSS 3, y puede incluir el combinador descendiente.
+
+ +
Nota: Los selectores pueden no contener pseudo-elementos , y el combinador único combinador permitido es el de descendientes.
+ +

Ejemplos

+ +

Por ejemplo, el siguiente CSS:

+ +
/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+
+ +

Puede ser reemplazado con:

+ +
/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}
+ +

Sin embargo, no se debe usar lo siguiente: (Véase la sección de rendimiento abajo.)

+ +
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+  list-style-type: square;
+}
+ +

Notas

+ +

Esto es particularmente útil al tratar con secciones y encabezados de HTML5. Puesto que {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, y {{HTMLElement("nav")}} pueden ser anidados, puede ser complicado aplicar estilos sin usar :any().

+ +

Por ejemplo, sin :any(), estilizar todos los {{HTMLElement("h1")}} a diferentes niveles de profundidad podría ser muy complicado:

+ +
/* Nivel 0 */
+h1 {
+  font-size: 30px;
+}
+/* Nivel 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Nivelo 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1, {
+  font-size: 20px;
+}
+/* Level 3 */
+/* ... ni siquiera lo pienses*/
+
+ +

Usando :-any(), en cambio, es mucho más fácil:

+ +
/* Nivel 0 */
+h1 {
+  font-size: 30px;
+}
+/* Nivel 1 */
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Nivel 2 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Nivel 3 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+ +

Problemas con rendimiento y especificidad

+ +

Bug 561154 sigue un problema con Gecko donde la especificidad de :-moz-any() es incorrecta. La implementación hasta Firefox 12 pone a :-moz-any() en la categoría de reglas universales, por lo que usarlo como el selector más hacia la derecha será más lento que usando un ID, una clase o etiqueta como el selector a la derecha.

+ +

Por ejemplo

+ +
.a > :-moz-any(.b, .c)
+
+ +

es más lento que:

+ +
.a > .b, .a > .c
+
+ +

y lo siguiente es rápido:

+ +
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
+
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}12.0 (534.30){{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
diff --git a/files/es/web/css/_colon_not()/index.html b/files/es/web/css/_colon_not()/index.html deleted file mode 100644 index 5182d83d77..0000000000 --- a/files/es/web/css/_colon_not()/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: ':not()' -slug: 'Web/CSS/:not()' -tags: - - CSS - - Diseño - - Referencia - - Web - - pseudoclase -translation_of: 'Web/CSS/:not' ---- -
{{CSSRef}}
- -

La pseudoclase :not() de CSS representa elementos que no coinciden con una lista de selectores. Como evita que se seleccionen elementos específicos, se lo conoce como la pseudoclase de negación.

- -
/* Selecciona cualquier elemento que NO sea un párrafo */
-:not(p) {
-  color: blue;
-}
- -
-

Notas:

- -
    -
  • Se pueden escribir selectores inútiles usando esta pseudoclase. Por ejemplo, :not(*) coincide con cualquier elemento que no sea un elemento, por lo que la regla nunca se aplicará.
    • -
  • Esta pseudoclase puede aumentar la especificidad de una regla. Por ejemplo, #foo:not(#bar) coincidirá con el mismo elemento que el #foo más simple, pero tiene una especificidad más alta.
    • -
  • :not(.foo) coincidirá con cualquier cosa que no sea .foo, incluidos {{HTMLElement("html")}} y {{HTMLElement("body")}}.
    • -
  • Este selector solo se aplica a un elemento; no puedes usarlo para excluir a todos los antepasados. Por ejemplo, body :not(table) a se aplicará a los enlaces dentro de una tabla, ya que {{HTMLElement("tr")}} coincidirá con la parte :not() del selector.
    • -
-
- -

Sintaxis

- -

La pseudoclase :not() requiere una lista separada por comas de uno o más selectores como argumento. La lista no debe contener otro selector de negación o un pseudoelemento.

- -
-

La capacidad de enumerar más de un selector es experimental y aún no es ampliamente compatible.

-
- -
{{csssyntax}}
- -

Ejemplo

- -

HTML

- -
<p>Soy un párrafo.</p>
-<p class="fancy">¡Soy muy elegante!</p>
-<div>NO soy un párrafo.</div>
-
- -

CSS

- -
.fancy {
-  text-shadow: 2px 2px 3px gold;
-}
-
-/* elementos <p> que no están en la clase `.fancy` */
-p:not(.fancy) {
-  color: green;
-}
-
-/* Elementos que no son elementos <p> */
-body :not(p) {
-  text-decoration: underline;
-}
-
-/* Elementos que no son elementos <div> o <span> */
-body :not(div):not(span) {
-  font-weight: bold;
-}
-
-/* Elementos que no son `.crazy` o `.fancy` */
-/* Tenga en cuenta que esta sintaxis aún no está bien soportada. */
-body :not(.crazy, .fancy) {
-  font-family: sans-serif;
-}
- -

Resultado

- -

{{EmbedLiveSample('Ejemplo')}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}Extiende su argumento para permitir algunos selectores no simples.
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
- -

Compatibilidad con navegadores

- -
- - -

{{Compat("css.selectors.not")}}

-
diff --git a/files/es/web/css/_colon_not/index.html b/files/es/web/css/_colon_not/index.html new file mode 100644 index 0000000000..5182d83d77 --- /dev/null +++ b/files/es/web/css/_colon_not/index.html @@ -0,0 +1,112 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not()' +tags: + - CSS + - Diseño + - Referencia + - Web + - pseudoclase +translation_of: 'Web/CSS/:not' +--- +
{{CSSRef}}
+ +

La pseudoclase :not() de CSS representa elementos que no coinciden con una lista de selectores. Como evita que se seleccionen elementos específicos, se lo conoce como la pseudoclase de negación.

+ +
/* Selecciona cualquier elemento que NO sea un párrafo */
+:not(p) {
+  color: blue;
+}
+ +
+

Notas:

+ +
    +
  • Se pueden escribir selectores inútiles usando esta pseudoclase. Por ejemplo, :not(*) coincide con cualquier elemento que no sea un elemento, por lo que la regla nunca se aplicará.
    • +
  • Esta pseudoclase puede aumentar la especificidad de una regla. Por ejemplo, #foo:not(#bar) coincidirá con el mismo elemento que el #foo más simple, pero tiene una especificidad más alta.
    • +
  • :not(.foo) coincidirá con cualquier cosa que no sea .foo, incluidos {{HTMLElement("html")}} y {{HTMLElement("body")}}.
    • +
  • Este selector solo se aplica a un elemento; no puedes usarlo para excluir a todos los antepasados. Por ejemplo, body :not(table) a se aplicará a los enlaces dentro de una tabla, ya que {{HTMLElement("tr")}} coincidirá con la parte :not() del selector.
    • +
+
+ +

Sintaxis

+ +

La pseudoclase :not() requiere una lista separada por comas de uno o más selectores como argumento. La lista no debe contener otro selector de negación o un pseudoelemento.

+ +
+

La capacidad de enumerar más de un selector es experimental y aún no es ampliamente compatible.

+
+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<p>Soy un párrafo.</p>
+<p class="fancy">¡Soy muy elegante!</p>
+<div>NO soy un párrafo.</div>
+
+ +

CSS

+ +
.fancy {
+  text-shadow: 2px 2px 3px gold;
+}
+
+/* elementos <p> que no están en la clase `.fancy` */
+p:not(.fancy) {
+  color: green;
+}
+
+/* Elementos que no son elementos <p> */
+body :not(p) {
+  text-decoration: underline;
+}
+
+/* Elementos que no son elementos <div> o <span> */
+body :not(div):not(span) {
+  font-weight: bold;
+}
+
+/* Elementos que no son `.crazy` o `.fancy` */
+/* Tenga en cuenta que esta sintaxis aún no está bien soportada. */
+body :not(.crazy, .fancy) {
+  font-family: sans-serif;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}Extiende su argumento para permitir algunos selectores no simples.
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.not")}}

+
diff --git a/files/es/web/css/_colon_user-invalid/index.html b/files/es/web/css/_colon_user-invalid/index.html new file mode 100644 index 0000000000..6f12ca97a6 --- /dev/null +++ b/files/es/web/css/_colon_user-invalid/index.html @@ -0,0 +1,94 @@ +--- +title: ':-moz-ui-invalid' +slug: 'Web/CSS/:-moz-ui-invalid' +tags: + - CSS + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Pseudo clase + - Referencia CSS +translation_of: 'Web/CSS/:user-invalid' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-clase CSS :-moz-ui-invalid representa cualquier elemento de los formularios que, en determinadas circunstancias, tiene  restricciones de validación y no es válido. Esta pseudo-clase se aplica siguiendo la siguiente reglas::

+ +
    +
  • Si el control no tiene el foco y el valor no es válido se aplica la pseudo-clase.
    • +
  • Si el control tiene el foco y el valor era válido (incluyendo si es un elemento vacío) cuando obtuvo el foco, no se aplica la pseudo-clase.
    • +
  • Si el control tiene el foco y el valor no era válido cuando obtuvo el foco, se recalcula la validez del valor con cada pulsación de teclado.
    • +
  • Si el elemento es obligatorio (requerido) sólo se aplican las reglas anteriores si el usuario ha cambiado el valor o ha intentando enviar los datos del formulario (hacer un "sbumit").
    • +
+ +

El resultado es que si el control era válido cuando el usuario empezó a interactuar con él sólo se cambia el estilo de validación cuando el usuario cambia el foco hacia otro elemento. Sin embargo, si el usuario está corrigiendo un valor señalado anteriormente como no válido, el control muestra inmediatamente cuando el valor pasa a ser válido. A los elementos del formulario obligatorios se les aplica la pseudo-clase sólo si el usuario los cambia o si intenta enviar los datos del formulario (hacer "submit").

+ +

Por defecto Gecko aplica un estilo que crear un brillo rojo "glow" (usando la propiedad{{Cssxref("box-shadow")}} ) alrededor de los elemento a los que se les aplica esta pseudo-clase. Ver la pseudo-clase {{Cssxref(":invalid")}} para poder observar un ejemplo que muestra como evitar este estilo por defecto.

+ +

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

+ +
    +
  • {{cssxref(":valid")}}
    • +
  • {{cssxref(":invalid")}}
    • +
  • {{cssxref(":required")}}
    • +
  • {{cssxref(":optional")}}
    • +
  • {{cssxref(":-moz-ui-valid")}}
    • +
diff --git a/files/es/web/css/_doublecolon_-moz-placeholder/index.html b/files/es/web/css/_doublecolon_-moz-placeholder/index.html deleted file mode 100644 index 3c8fbb8c3a..0000000000 --- a/files/es/web/css/_doublecolon_-moz-placeholder/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: '::-moz-placeholder' -slug: 'Web/CSS/::-moz-placeholder' -tags: - - CSS - - No estándar(2) - - Pseudo-elemento CSS - - Referencia CSS -translation_of: 'Web/CSS/::placeholder' -translation_of_original: '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

- -
    -
  • {{cssxref("::placeholder")}}
    • -
  • {{cssxref("::-webkit-input-placeholder")}}
    • -
  • {{cssxref(":-ms-input-placeholder")}}
    • -
  • Formularios en HTML
    • -
  • {{HTMLElement("input")}}
    • -
  • {{HTMLElement("textarea")}}
    • -
diff --git a/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html b/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html deleted file mode 100644 index 5d14e35e58..0000000000 --- a/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: '::-webkit-file-upload-button' -slug: 'Web/CSS/::-webkit-file-upload-button' -tags: - - CSS - - No estándar(2) - - Pseudo-elemento - - Referencia -translation_of: 'Web/CSS/::file-selector-button' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Resumen

- -

El pseudo-elemento  CSS ::-webkit-file-upload-button  representa el botón de los elementos {{HTMLElement("input") }} con  type="file".

- -

No es estándar y es sólo soportado por los navegadores compatibles con WebKit/Blink como Chrome, Opera and Safari (esto queda indicado por el prefijo -webkit ).

- -

Síntaxis

- -
selector::-webkit-file-upload-button
-
- -

Ejemplo

- -

Contenido HTML

- -
<form>
-    <label for="fileUpload">Upload file</label><br>
-    <input type="file" id="fileUpload">
-</form>
- -

Contenido CSS

- -
input, label {
-    display: block;
-}
-
-input[type=file]::-webkit-file-upload-button {
-    border: 1px solid grey;
-    background: #FFFAAA;
-}
- -

Más abajo tienes un ejemplo para probar. El pantallazo a la izquierda muestra como quedaría el botón en caso de que no puedas acceder a Chrome, Opera o Safari. 

- -

{{ EmbedLiveSample('Example', '', '', 'https://mdn.mozillademos.org/files/13400/webkit_file_upload_button_screen.png', 'Web/CSS/::-webkit-file-upload-button') }}

- -

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ísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
diff --git a/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html b/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html deleted file mode 100644 index 181f0a966c..0000000000 --- a/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: '::-webkit-input-placeholder' -slug: 'Web/CSS/::-webkit-input-placeholder' -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' ---- -
{{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

- -
    -
  • {{cssxref("::placeholder")}}
    • -
  • {{cssxref("::-moz-placeholder")}}
    • -
  • {{cssxref(":-ms-input-placeholder")}}
    • -
  • Formularios en HTML
    • -
  • {{HTMLElement("input")}}
    • -
  • {{HTMLElement("textarea")}}
    • -
diff --git a/files/es/web/css/_doublecolon_file-selector-button/index.html b/files/es/web/css/_doublecolon_file-selector-button/index.html new file mode 100644 index 0000000000..5d14e35e58 --- /dev/null +++ b/files/es/web/css/_doublecolon_file-selector-button/index.html @@ -0,0 +1,100 @@ +--- +title: '::-webkit-file-upload-button' +slug: 'Web/CSS/::-webkit-file-upload-button' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::file-selector-button' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento  CSS ::-webkit-file-upload-button  representa el botón de los elementos {{HTMLElement("input") }} con  type="file".

+ +

No es estándar y es sólo soportado por los navegadores compatibles con WebKit/Blink como Chrome, Opera and Safari (esto queda indicado por el prefijo -webkit ).

+ +

Síntaxis

+ +
selector::-webkit-file-upload-button
+
+ +

Ejemplo

+ +

Contenido HTML

+ +
<form>
+    <label for="fileUpload">Upload file</label><br>
+    <input type="file" id="fileUpload">
+</form>
+ +

Contenido CSS

+ +
input, label {
+    display: block;
+}
+
+input[type=file]::-webkit-file-upload-button {
+    border: 1px solid grey;
+    background: #FFFAAA;
+}
+ +

Más abajo tienes un ejemplo para probar. El pantallazo a la izquierda muestra como quedaría el botón en caso de que no puedas acceder a Chrome, Opera o Safari. 

+ +

{{ EmbedLiveSample('Example', '', '', 'https://mdn.mozillademos.org/files/13400/webkit_file_upload_button_screen.png', 'Web/CSS/::-webkit-file-upload-button') }}

+ +

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ísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/css/adjacent_sibling_combinator/index.html b/files/es/web/css/adjacent_sibling_combinator/index.html new file mode 100644 index 0000000000..1200c4bd61 --- /dev/null +++ b/files/es/web/css/adjacent_sibling_combinator/index.html @@ -0,0 +1,135 @@ +--- +title: Selectores de hermanos adyacentes +slug: Web/CSS/Selectores_hermanos_adyacentes +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Referencia CSS + - Selectores +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +

{{CSSRef("Selectors")}}

+ +

Se hace referencia a este selector como selector adyacente o selector del próximo hermano. Sólo seleccionará un elemento especificado que esté inmediatamente después de otro elemento especificado.

+ +

Sintaxis

+ +
elemento_anterior + elemento_afectado { estilos }
+
+ +

Ejemplo

+ +
+
li:first-of-type + li {
+  color: red;
+}
+
+ +
<ul>
+  <li>Uno</li>
+  <li>Dos</li>
+  <li>Tres</li>
+</ul>
+
+ +

{{EmbedLiveSample('Example_1', 200, 100)}}

+ +

Otro caso podría ser dar estilos a un span que se use de pie de foto de los siguientes elementos {{HTMLElement("img")}} :

+ +
img + span.caption {
+  font-style: italic;
+}
+
+ +

que coincidiría con los siguientes elementos {{HTMLElement("span")}} :

+ +
<img src="photo1.jpg"><span class="caption">The first photo</span>
+<img src="photo2.jpg"><span class="caption">The second photo</span>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentarios
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Internet Explorer 7 no actualiza correctamente el estilo cuando un elemento es insertado dinámicamente antes de otro elemento que coincidía con el selector. En Internet Explorer 8, si un elemento es insertado dinámicamente haciendo click en un enlace, el estilo del first-child no se aplica hasta que el enlace pierde el foco.

+ +

Ver también

+ + diff --git a/files/es/web/css/attribute_selectors/index.html b/files/es/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..a7b59d03c6 --- /dev/null +++ b/files/es/web/css/attribute_selectors/index.html @@ -0,0 +1,241 @@ +--- +title: Selectores de atributo +slug: Web/CSS/Selectores_atributo +tags: + - Atributos + - CSS + - Selectores + - Selectores de Atributo +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

El selector de atributos CSS coincide con los elementos en función de la presencia o el valor de un atributo determinado.

+ +
/* Elementos <a> con un atributo title */
+a[title] {
+  color: purple;
+}
+
+/* Elementos <a> con un href que coincida con "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* Elementos <a> con un href que contenga "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* Elementos <a> con un href que comience con "#" */
+a[href^="#"] {
+  color: #001978;
+}
+
+/* Elementos <a> con un href que termine en ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* Elementos <a> cuyo atributo class contenga la palabra "logo" */
+a[class~="logo"] {
+  padding: 2px;
+}
+
+ +
+
[attr]
+
Selecciona los elementos que tienen el atributo attr.
+
[attr=value]
+
Selecciona los elementos cuyo atributo attr tenga exactamente el valor value.
+
[attr~=value]
+
+

Selecciona los elementos cuyo atributo attr tenga por valor una lista de palabras separadas por espacios, una de las cuales sea value.

+
+
[attr|=value]
+
Selecciona los elementos cuyo atributo attr tenga exactamente el valor value o empiece por value seguido de un guión - (U+002D). Se puede usar para coincidencias de subcódigos en otros idiomas.
+
[attr^=value]
+
Selecciona los elementos cuyo atributo attr tenga un valor prefijado  por value.
+
[attr$=value]
+
Selecciona los elementos cuyo atributo attr cuyo valor tiene el sufijo (seguido) de value.
+
[attr*=value]
+
Selecciona los elementos cuyo atributo attr tenga un valor que contenga value.
+
[attr operator value i]
+
Agregar una i (o I) antes del corchete de cierre hace que el valor sea comparado sin distinguir entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).
+
[attr operator value s] {{Experimental_Inline}}
+
Agregar una s (o S) antes del corchete de cierre hace que el valor sea comparado distinguiendo entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).
+
+ +

Ejemplos

+ +

Enlaces

+ +

CSS

+ +
a {
+  color: blue;
+}
+
+/* Enlaces internos, comenzando con "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Enlaces con "example" en cualquier parte de la URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Enlaces con "insensitive" en cualquier parte de la URL,
+   independientemente de las mayúsculas */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Enlaces que terminan en ".org" */
+a[href$=".org"] {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Enlace interno</a></li>
+  <li><a href="http://example.com">Enlace de ejemplo</a></li>
+  <li><a href="#InSensitive">Enlace interno insensible Insensitive</a></li>
+  <li><a href="http://example.org">Ejemplo de enlace .org</a></li>
+</ul>
+ +

Resultado

+ +

{{EmbedLiveSample('Enlaces')}}

+ +

Idiomas

+ +

CSS

+ +
/* Todos los divs con un atributo `lang` están en negrita. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* Todos los divs en inglés de EE. UU. son azules. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* Todos los divs en portugués son verdes. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* Todos los divs en chino son rojos, ya sean
+   simplificados (zh-CN) o tradicionales (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* Todos los divs con `data-lang` Traditional Chinese
+   son de color púrpura. */
+/* Nota: también puede usar atributos con guiones
+   sin comillas dobles */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+
+ +

HTML

+ +
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">?世界您好！</div>
+
+ +

Resultado

+ +

{{EmbedLiveSample('Idiomas')}}

+ +

Listas Ordenadas

+ +

{{SeeCompatTable}}

+ +

La especificación HTML requiere que el atributo {{htmlattrxref("type", "input")}} distinga entre mayúsculas y minúsculas debido a que se usa principalmente en el elemento {{HTMLElement("input")}}, tratando de usar selectores de atributos con el atributo {{htmlattrxref("type", "ol")}} de una {{HTMLElement("ol", "lista ordenada")}} no funciona sin el modificador de mayúsculas y minúsculas.

+ +

CSS

+ +
/*
+Los tipos de lista requieren poder distinguir entre mayúsculas
+y minúsculas debido al peculiar comportamiento que tiene HTML
+con el atributo "type"
+*/
+
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}
+ +

HTML

+ +
<ol type="A">
+  <li>Example list</li>
+</ol>
+ +

Result

+ +

{{EmbedLiveSample("HTML_ordered_lists")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Agrega un modificador para la selección de valores de atributos insensibles a mayúsculas / minúsculas ASCII.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.attribute")}}

+ +

Ver también

+ +
    +
  • Seleccionando un solo elemento:{{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}}, o {{domxref("Element.querySelector()")}}
    • +
  • Seleccionar todos los elementos coincidentes:{{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}}, o {{domxref("Element.querySelectorAll()")}}
    • +
  • Todos los métodos anteriores se implementan en base a {{domxref("ParentNode")}} mixin; vea  {{domxref("ParentNode.querySelector()")}} y {{domxref("ParentNode.querySelectorAll()")}}
    • +
diff --git a/files/es/web/css/auto/index.html b/files/es/web/css/auto/index.html deleted file mode 100644 index c380b1b891..0000000000 --- a/files/es/web/css/auto/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: auto -slug: Web/CSS/auto -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/width -translation_of_original: 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

-
  • {{ Cssxref("overflow") }} -
  • {{ Cssxref("cursor") }} -
  • {{ Cssxref("width") }} -
  • {{ Cssxref("marker-offset") }} -
  • {{ Cssxref("margin") }} -
  • margin-* (left|bottom|top|right|start|end) -
  • {{ Cssxref("bottom") }} -
  • {{ Cssxref("left") }} -
  • {{ Cssxref("table-layout") }} -
  • {{ Cssxref("z-index") }} -
  • {{ Cssxref("-moz-column-width") }} -
-


-

-
-

Categorías -Interwiki Languages -

-
-{{ languages( { "en": "en/CSS/auto" } ) }} diff --git a/files/es/web/css/box-flex/index.html b/files/es/web/css/box-flex/index.html new file mode 100644 index 0000000000..c7491aea2d --- /dev/null +++ b/files/es/web/css/box-flex/index.html @@ -0,0 +1,155 @@ +--- +title: '-moz-box-flex' +slug: Web/CSS/-moz-box-flex +tags: + - CSS + - No estándar(2) + - Referencia CSS +translation_of: Web/CSS/box-flex +--- +
{{CSSRef}}{{warning("Esta propiedad es para controlar parte del modelo de caja XUL. No coincide ni con el antiguo borrador del módulo CSS para el diseño de caja flexibles  'box-flex' (que se basa en esta propiedad) ni con el comportamiento de '-webkit-box-flex' (que se basa en esos borradores).")}}
+ +

Ver Flexbox para más información acerca de qué usar en vez de esta propiedad.

+ +

Resumen

+ +

Las propiedades CSS-moz-box-flex y -webkit-box-flex especifican cómo una  -moz-box o -webkit-box crecen para rellenar la caja que los contienen, en la dirección del diseño o esquema (layout) de la caja contenedora.Ver Flexbox para más información sobre las propiedades de los elementos flexbox.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Valores <number> */
+-moz-box-flex: 0;
+-moz-box-flex: 3;
+-webkit-box-flex: 0;
+-webkit-box-flex: 3;
+
+/* Valores gloables */
+-moz-box-flex: inherit;
+-moz-box-flex: initial;
+-moz-box-flex: unset;
+
+ +

Valores

+ +
+
0
+
La caja no crece.
+
> 0
+
La caja crece para rellenar un proporción del espacio disponible..
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ejemplo de -moz-box-flex</title>
+    <style>
+      div.example {
+        display: -moz-box;
+        display: -webkit-box;
+        border: 1px solid black;
+        width: 100%;
+      }
+      div.example > p:nth-child(1) {
+        -moz-box-flex: 1;       /* Mozilla */
+        -webkit-box-flex: 1;    /* WebKit */
+        border: 1px solid black;
+      }
+      div.example > p:nth-child(2) {
+        -moz-box-flex: 0;       /* Mozilla */
+        -webkit-box-flex: 0;    /* WebKit */
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="example">
+      <p>Creceré para rellenar un espacio extra</p>
+      <p>No creceré</p>
+    </div>
+  </body>
+</html>
+
+ +

Notas

+ +

La caja contenedora asigna el espacio extra disponible de manera proporcional al valor flex de cada uno de los elementos que contiene.

+ +

Los elementos dentro del contenedor que tienen 0 flex no crecen.

+ +

Si śolo uno de los elementos tiene un valor distinto de cero ocupará todo el espacio disponible.

+ +

Los elementos que tienen el mismo valor para flex crecen en la misma cantidad en términos absolutos.

+ +

Si el valor flex se ha establecido usando el atributo flex del elemento, entonces el estilo es ignorado.

+ +

Para hacer que los elementos XUL dentro de una caja contenedora tengan el mismo tamaño, fijaremos el atributo equalsize de la caja contenedora a always. Este atributo no tiene correspondencia con ninguna propiedad CSS.

+ +

Un truco para hacer que todos los elementos dentro una caja contenedora tengan el mismo tamaño es darles un tamaño fijo,(por ejemplo height: 0), y el mismo valor box-flex mayor que cero a todos (por ejemplo -moz-box-flex: 1).

+ +

Especificaciones

+ +

Esta propiedad es una extensión no estándar. Había una old draft of the CSS3 Flexbox specification que definía una propiedadbox-flex , pero ese borrador nunca ha sido sustituido.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{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

+ +

{{cssxref("-moz-box-orient")}}, {{cssxref("-moz-box-pack")}}, {{cssxref("-moz-box-direction")}}, {{cssxref("flex")}}

diff --git a/files/es/web/css/box-ordinal-group/index.html b/files/es/web/css/box-ordinal-group/index.html new file mode 100644 index 0000000000..9f6af1c315 --- /dev/null +++ b/files/es/web/css/box-ordinal-group/index.html @@ -0,0 +1,67 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +tags: + - CSS + - 'CSS: Extensiones Mozilla' + - Caja Flexible + - No estandar + - Referencia CSS +translation_of: Web/CSS/box-ordinal-group +translation_of_original: Web/CSS/-moz-box-ordinal-group +--- +

{{CSSRef}}
+ {{warning("Esta propiedad pertenece al borrador original del diseño o esquema de la caja CSS flexible, y ha sido reemplazada en borradores posteriores.")}}

+ +

Ver Flexbox para más información sobre qué usar en sustitución de esta propiedad.

+ +

Resumen

+ +

Indica el grupo ordinal al que pertenece el elemento. Aquellos elementos con un grupo ordinal menor son mostrados antes que aquellos con un grupo ordinal mayor.

+ +

Valores

+ +

Los valores deben ser enteros positivos (mayores de cero). El valor por defecto para esta propiedad es 1.

+ +

Ejemplos

+ +
<style type="text/css">
+  #Flexbox {
+    display: -ms-box;
+    display: -moz-box;
+    display: -webkit-box;
+  }
+
+  #text1 {
+    background: red;
+    -ms-box-ordinal-group: 4;
+    -moz-box-ordinal-group: 4;
+    -webkit-box-ordinal-group: 4;
+  }
+
+  #text2 {
+    background: green;
+    -ms-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -webkit-box-ordinal-group: 3;
+  }
+
+  #text3 {
+    background: blue;
+    -ms-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -webkit-box-ordinal-group: 2;
+  }
+
+  #text4 {
+    background: orange;
+  }
+</style>
+
+<div id="Flexbox">
+  <div id="text1">text 1</div>
+  <div id="text2">text 2</div>
+  <div id="text3">text 3</div>
+  <div id="text4">text 4</div>
+</div>
+
diff --git a/files/es/web/css/box-pack/index.html b/files/es/web/css/box-pack/index.html new file mode 100644 index 0000000000..118d60287a --- /dev/null +++ b/files/es/web/css/box-pack/index.html @@ -0,0 +1,184 @@ +--- +title: '-moz-box-pack' +slug: Web/CSS/-moz-box-pack +tags: + - CSS + - Diseño + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/box-pack +--- +
{{CSSRef}}{{warning("Esta propiedad es parte del módulo estándar original para el diseño de las cajas CSS Flexible que fue sustituida por un nuevo estándar.")}}
+ +

Ver Flexbox para más información.

+ +

Resumen

+ +

Las propiedades  CSS -moz-box-pack y -webkit-box-pack especifican cómo una -moz-box o un -webkit-box empaquetan o disponen  su contenido en la dirección de su diseño o esquema. El efecto de esto sólo es visible si hay expacio extra en la caja. Ver Flexbox para más información sobre las propiedades de los elementos flexbox.

+ +

La dirección del esquema o diseño (layout)  depende de la orientación del elemento: vertical o horizontal.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Valores de palabras clave */
+-moz-box-pack: start;
+-moz-box-pack: center;
+-moz-box-pack: end;
+-moz-box-pack: justify;
+
+/* Valores gloables */
+-moz-box-pack: inherit;
+-moz-box-pack: initial;
+-moz-box-pack: unset;
+
+ +

Valores

+ +
+
start
+
La caja empaqueta o muestra el contenido al principio dejando el espacio libre que hubiera al final.
+
center
+
La caja empaqueta o muestra el contenido en el centro dejando el espacio libre que hubiera dividido de igual manera entre el inicio y el final.
+
end
+
La caja empaqueta o muestra el contenido al final dejando el espacio libre que hubiera al principio.
+
justify
+
El espacio se divide de igual manera entre los diferentes hijos sin dejar nada del espacio libre ni antes del primer hijo ni después del último. Si sólo hay un hijo el comportamiento es como si fuera start.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
div.example {
+  border-style: solid;
+
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* Hace esta caja más alta que los hijos para que haya hueco suficiente
+     para el empaquetado en la caja */
+  height: 300px;
+  /* Hace la caja lo suficientemente ancha para mostrar los contenidos
+     centrados horizontalmente */
+  width: 300px;
+
+  /* Los hijos deberían estar orientados verticalmente */
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* Alínea los hijos con el centro horizontal de la caja */
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* Dispone a los hijos en el fondo de la caja */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.example p {
+  /* hace los hijos más estrechos que el padra para que
+     haya espacio suficiente para el box-align */
+  width: 200px;
+}
+
+ +
<div class="example">
+  <p>Será el segundo empezando desde el fondo de div.example y centrado horizontalmente.</p>
+  <p>Estaré en el fondo de div.example y centrado horizontalmente.</p>
+</div>
+
+ +

{{EmbedLiveSample('Examples', 310, 310)}}

+ +

Notas

+ +

EL borde  de la caja que será tomado como start  para el empqeutado dependerá de la orientación y dirección de la caja:

+ + + + + + + + + + + + + + + + + + + +
 NormalReverse
Horizontalleftright
Verticaltopbottom
+ +

El borde opuesto a start será el considerado como end.

+ +

Si el empaquetado se establece usando el atributo pack del elemento el estilo es ignorado.

+ +

Especificaciones

+ +

Esta propiedad es no estándar aunque una propiedad similar apareción en draft of CSS3 Flexbox,  que a su vez ha sido sustituida para nuevas versiones de la especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ +

{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}

diff --git a/files/es/web/css/column-gap/index.html b/files/es/web/css/column-gap/index.html new file mode 100644 index 0000000000..e7a607a5bc --- /dev/null +++ b/files/es/web/css/column-gap/index.html @@ -0,0 +1,158 @@ +--- +title: grid-column-gap +slug: Web/CSS/grid-column-gap +translation_of: Web/CSS/column-gap +translation_of_original: Web/CSS/grid-column-gap +--- +

La propiedad CSS grid-column-gap especifica el {{glossary("gutters","gutter")}} entre {{glossary("grid columns")}}.

+ +
/* <length> values */
+grid-column-gap: 20px;
+grid-column-gap: 1em;
+grid-column-gap: 3vmin;
+grid-column-gap: 0.5cm;
+
+/* <percentage> value */
+grid-column-gap: 10%;
+
+/* Global values */
+grid-column-gap: inherit;
+grid-column-gap: initial;
+grid-column-gap: unset;
+
+ +

El efecto es como si las {{glossary("grid lines")}} afectadas adquieren una anchura específica: Los {{glossary("grid tracks", "grid track")}} entre dos líneas de la cuadrícula es el espacio entre los canales que las representa. Para el tamaño de la pista, cada canal se trata esencialmente como una pista adicional del tamaño especificado. Los valores negativos no son válidos.

+ +

{{cssinfo}}

+ +

Syntax

+ +

Valores

+ +
+
<length-percentage>
+
Es el ancho del canal que separa las columnas de la grilla. {{cssxref("<percentage>")}} valores son relativos a la dimensión del elemento.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px;
+  grid-column-gap: 20px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", "100px")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid-column-gap", "grid-column-gap")}}{{Spec2("CSS3 Grid")}}Definición incial
+ +

Compatibilidad en navegadores

+ +

 

+ + + +

{{Compat("css.properties.grid-column-gap")}}

+ +

 

+ +

Ver también

+ + + + diff --git a/files/es/web/css/columnas_css/index.html b/files/es/web/css/columnas_css/index.html deleted file mode 100644 index 949f2eca71..0000000000 --- a/files/es/web/css/columnas_css/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Columnas CSS -slug: Web/CSS/Columnas_CSS -tags: - - CSS - - Referencia CSS - - Visión general -translation_of: Web/CSS/CSS_Columns ---- -
{{CSSRef}}
- -

Columnas CSS es un módulo de CSS que define un diseño multicolumna, permitiendo indicar cómo debe fluir el contenido a través de las columnas y cómo manejar reglas y separaciones.

- -

Referencia

- -

Propiedades CSS

- -
-
    -
  • {{cssxref("break-after")}}
    • -
  • {{cssxref("break-before")}}
    • -
  • {{cssxref("break-inside")}}
    • -
  • {{cssxref("column-count")}}
    • -
  • {{cssxref("column-fill")}}
    • -
  • {{cssxref("column-gap")}}
    • -
  • {{cssxref("column-rule")}}
    • -
  • {{cssxref("column-rule-color")}}
    • -
  • {{cssxref("column-rule-style")}}
    • -
  • {{cssxref("column-rule-width")}}
    • -
  • {{cssxref("column-span")}}
    • -
  • {{cssxref("column-width")}}
    • -
  • {{cssxref("columns")}}
    • -
-
- -

Guías

- -
-
Diseños multicolumna con CSS
-
Tutorial paso a paso sobre cómo desarrollar diseños de varias columnas.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Multicol')}}{{Spec2('CSS3 Multicol')}}Definición inicial
- -

Compatibilidad en navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}} {{property_prefix('-webkit')}}{{CompatGeckoDesktop(9)}}{{property_prefix('-moz')}}1011.10
- 15{{property_prefix('-webkit')}}		3.0 (522){{property_prefix('-webkit')}}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{property_prefix('-webkit')}}{{compatGeckoMobile(22)}}{{property_prefix('-moz')}}1011.5
- 32{{property_prefix('-webkit')}}		3.2{{property_prefix('-webkit')}}
-
diff --git a/files/es/web/css/comentarios/index.html b/files/es/web/css/comentarios/index.html deleted file mode 100644 index f09cac662a..0000000000 --- a/files/es/web/css/comentarios/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Comentarios -slug: Web/CSS/Comentarios -tags: - - CSS - - Principiante - - Referencia CSS -translation_of: Web/CSS/Comments ---- -
{{CSSRef}}
- -

Resumen

- -

Los comentarios son usados para añadir notas explicatorias o prevenir que el navegador interprete partes de la hoja de estilos.

- -

Los comentarios se pueden colocar en cualquier espacio en blanco que se permita en la hoja de estilos.

- -

Sintaxis

- -
/* Comentario */
- -

Examples

- -
/* Comentario de una sola línea */
-
-/*
-Un comentario
-que se extiende
-en varias
-líneas
-*/
-
- -

Notas

- -

La sintaxis de comentarios /* */ es usada para comentarios de una o múltiples líneas. No hay otra forma de especificar comentarios en hojas de estilos externas. Sin embargo, cuando se usa el elemento <style>, se puede usar <!-- --> para ocultar CSS para navegadores antiguos, aunque no es recomendable. Como en la mayoría de los lenguajes de programación que usan la sintaxis de comentarios /* */ estos no pueden ser anidados. En otras palabras, la primera instancia de */ que siga a una instancia de /* cerrará el comentario.

- -

Especificaciones

- - - -

Véase también

- - diff --git a/files/es/web/css/comenzando_(tutorial_css)/index.html b/files/es/web/css/comenzando_(tutorial_css)/index.html deleted file mode 100644 index 54997a5f6e..0000000000 --- a/files/es/web/css/comenzando_(tutorial_css)/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Comenzando (tutorial CSS) -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.

-
  • La Parte I ilustra las características estándares de CSS que funcionan con los navegadores de Mozilla así como también con la mayoría de navegadores modernos.
    • -
-
  • La Parte II contiene algunos ejemplos de características básicas que funcionan en Mozilla pero no necesariamente funciona en otros entornos.
    • -
-

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/web/css/comments/index.html b/files/es/web/css/comments/index.html new file mode 100644 index 0000000000..f09cac662a --- /dev/null +++ b/files/es/web/css/comments/index.html @@ -0,0 +1,49 @@ +--- +title: Comentarios +slug: Web/CSS/Comentarios +tags: + - CSS + - Principiante + - Referencia CSS +translation_of: Web/CSS/Comments +--- +
{{CSSRef}}
+ +

Resumen

+ +

Los comentarios son usados para añadir notas explicatorias o prevenir que el navegador interprete partes de la hoja de estilos.

+ +

Los comentarios se pueden colocar en cualquier espacio en blanco que se permita en la hoja de estilos.

+ +

Sintaxis

+ +
/* Comentario */
+ +

Examples

+ +
/* Comentario de una sola línea */
+
+/*
+Un comentario
+que se extiende
+en varias
+líneas
+*/
+
+ +

Notas

+ +

La sintaxis de comentarios /* */ es usada para comentarios de una o múltiples líneas. No hay otra forma de especificar comentarios en hojas de estilos externas. Sin embargo, cuando se usa el elemento <style>, se puede usar <!-- --> para ocultar CSS para navegadores antiguos, aunque no es recomendable. Como en la mayoría de los lenguajes de programación que usan la sintaxis de comentarios /* */ estos no pueden ser anidados. En otras palabras, la primera instancia de */ que siga a una instancia de /* cerrará el comentario.

+ +

Especificaciones

+ + + +

Véase también

+ + diff --git a/files/es/web/css/como_iniciar/index.html b/files/es/web/css/como_iniciar/index.html deleted file mode 100644 index facb250cb3..0000000000 --- a/files/es/web/css/como_iniciar/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Como iniciar -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/web/css/como_iniciar/por_que_usar_css/index.html b/files/es/web/css/como_iniciar/por_que_usar_css/index.html deleted file mode 100644 index 941f96a0e5..0000000000 --- a/files/es/web/css/como_iniciar/por_que_usar_css/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Por que usar CSS -slug: Web/CSS/Como_iniciar/Por_que_usar_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_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:

-
    -
  • Evitar duplicación
    • -
  • Hacer el mantenimiento más simple
    • -
  • Usar el mismo contenido con diferentes estilos para diferentes propositos.
    • -
- - - - - - - -
- 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/web/css/como_iniciar/que_es_css/index.html b/files/es/web/css/como_iniciar/que_es_css/index.html deleted file mode 100644 index 18852f2439..0000000000 --- a/files/es/web/css/como_iniciar/que_es_css/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Que es CSS -slug: Web/CSS/Como_iniciar/Que_es_CSS -tags: - - para_revisar -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_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/web/css/computed_value/index.html b/files/es/web/css/computed_value/index.html new file mode 100644 index 0000000000..9112bf97b5 --- /dev/null +++ b/files/es/web/css/computed_value/index.html @@ -0,0 +1,30 @@ +--- +title: Valor calculado +slug: Web/CSS/Valor_calculado +tags: + - Referencia_CSS +translation_of: Web/CSS/computed_value +--- +


+ {{ CSSRef() }}

+

Sumario

+

El valor computed value de una propiedad CSS es computado a partir de specified value de la siguiente forma:

+
    +
  • Mediante los valores especiales inherit y initial, y
    • +
  • Realizando el cómputo necesario para alcanzar el valor descrito en la línea de "Computed value" del sumario de la propiedad.
    • +
+

El cálculo necesario para el "Computed value" de una propiedad, normalmente implica convertir valores relativos (como los expresados en unidades 'em' o en porcentajes) a valores absolutos.

+

Por ejemplo: si un elemento tiene un valor especificado de font-size: 16px y padding-top: 2em, el valor computado de padding-top es 32px (el doble del tamaño de la fuente).

+

Sin embargo, para algunas propiedades (aquellas con porcentajes relativos a algo que necesita un formato para ser determinados, tales como width, margin-right, text-indent, y top) los valores especificados en porcentajes se tornan valores computados. Ademas,los números especificados sin unidades en la propiedad line-height se convierten en valores computados, según se especifica. Estos valores relativos que quedan tras realizar el cómputo, se hacen absolutos cuando se determina el used value.

+

El uso principal de computed value (ademas de ser un paso de transición entre specified value y used value) es inheritance, incluyendo la palabra clave inherit.

+

Notas

+

La API DOM getComputedStyle devuelve used value, en lugar de computed value.

+

Ver también

+

specified value, used value, actual value

+

 

+

 

+

 

+

 

+
+  
+

{{ languages( { "en": "en/CSS/computed_value", "fr": "fr/CSS/Valeur_calcul\u00e9e", "ja": "ja/CSS/computed_value", "pl": "pl/CSS/warto\u015b\u0107_wyliczona" } ) }}

diff --git "a/files/es/web/css/css_animations/detectar_soporte_de_animaci\303\263n_css/index.html" "b/files/es/web/css/css_animations/detectar_soporte_de_animaci\303\263n_css/index.html" deleted file mode 100644 index 11bb0c0076..0000000000 --- "a/files/es/web/css/css_animations/detectar_soporte_de_animaci\303\263n_css/index.html" +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Detectar soporte de animación CSS -slug: Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS -translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support ---- -

{{CSSRef}}

- -

Las animaciones de CSS permiten realizar animaciones creativas de contenido usando nada más que CSS. Sin embargo, es posible que hayan momentos en que estas funciones no sean compatibles, y puede que desees manejar ese problema usando código JavaScript. Este artículo, basado en la publicación de Chris Heilmann, demuestra una técnica de como hacer esto.

- -

Prueba de la compatibilidad de animaciones CSS

- -

Este código comprueba si el soporte de animaciones CSS esta disponible:

- -
var animation = false,
-    animationstring = 'animation',
-    keyframeprefix = '',
-    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
-    pfx  = '',
-    elm = document.createElement('div');
-
-if( elm.style.animationName !== undefined ) { animation = true; }
-
-if( animation === false ) {
-  for( var i = 0; i < domPrefixes.length; i++ ) {
-    if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
-      pfx = domPrefixes[ i ];
-      animationstring = pfx + 'Animation';
-      keyframeprefix = '-' + pfx.toLowerCase() + '-';
-      animation = true;
-      break;
-    }
-  }
-}
-
- -

Para empezar, hemos definido algunas variables. Asumimos que las animaciones no son compatibles al establecer la variable animation a false. Establecemos la variable animationstring a animation la cual es la propiedad que queremos establecer mas tarde. Creamos un arreglo (array) sobre los prefijos de navegadores para realizar un bucle, y establecemos la variable pfx a una cadena vacía.

- -

Luego verificamos si la propiedad de CSS {{ cssxref("animation-name") }} esta establecida en la colección de estilo para el elemento especificado por la variable elm. Esto quiere decir que el navegador soporta animaciones CSS sin ningun prefijo, lo cual, hasta la fecha, ninguno de ellos lo hace.

- -

Si el navegador no soporta animaciones sin prefijos, y animation sigue siendo false, iteramos todos los posibles prefijos,  ya que todos los principales navegadores estan anteponiendo esta propiedad y cambiando su nombre a AnimationName en su lugar.

- -

Una vez que el código ha terminado de ejecutarse, el valor de animation será false si el soporte de animacion CSS no esta disponible, de otro modo será true. Si es true tanto el nombre de las propiedad de animation y el el prefijo keyframe serán los correctos. Así que si utilizas un nuevo Firefox, la propiedad será MozAnimation y el prefijo keyframe será -moz-, mientras en Chrome será WebkitAnimation y -webkit-. Tenga en cuenta que los navegadores no facilitan el cambio entre camelCase (Capitalizacion medial) y la hyphen-ation (separación).

- -

Animaciones utilizando la sintaxis correcta para diferentes navegadores

- -

Ahora que sabes si las animaciones CSS son compatibles o no, podemos animar.

- -
if( animation === false ) {
-
-  // animate in JavaScript fallback
-
-} else {
-  elm.style[ animationstring ] = 'rotate 1s linear infinite';
-
-  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
-                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
-                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
-                  '}';
-
-  if( document.styleSheets && document.styleSheets.length ) {
-
-      document.styleSheets[0].insertRule( keyframes, 0 );
-
-  } else {
-
-    var s = document.createElement( 'style' );
-    s.innerHTML = keyframes;
-    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
-
-  }
-
-}
-
- -

Este código examina el valor de animation; si es false, sabemos que tendremos que recurrir a la alternativa de JavaScript para realizar nuestra animacion. De otra manera, podemos usar JavaScript para crear los efectos de animación CSS deseados.

- -

Establecer las propiedades de animación es fácil; simplemente actualiza su valor en la colección de estilos. Aunque, añadir keyframes es más complicado, ya que no están definidas usando la sintaxis tradicional de CSS (lo que los hace mas flexible, pero mas difícil desde script).

- -

Para definir nuestros keyframes usando JavaScript, necesitamos transcribirlos como una cadena CSS. Todo lo que hacemos es crear una variable keyframes, anteponiendo cada atributo tal como se construye. Esta variable, una vez construida, contiene la descripción completa de todos los keyframes necesarios por nuestra secuencia de animación.

- -

La siguiente tarea es realmente añadir los keyframes al CSS de la página. Lo primeron que hay que hacer es mirar a ver si existe una hoja de estilo en el documento; si es así, sensillamente insertamos el keyframe descrito dentro de la hoja de estilos; esto se hace en las lineas 13-15.

- -

Si aún no existe una hoja de estilos, se crea un nuevo elemento {{ HTMLElement("style") }} , y su contenido se incorpora al valor de los keyframes. Luego se sinerta el valor {{ HTMLElement("style") }} dentro del{{ HTMLElement("head") }} del documento, añadiendo así la nueva hoja de estilo del document.

- -

Ver en el JSFiddle

- -

Ver tambien

- - diff --git a/files/es/web/css/css_animations/detecting_css_animation_support/index.html b/files/es/web/css/css_animations/detecting_css_animation_support/index.html new file mode 100644 index 0000000000..11bb0c0076 --- /dev/null +++ b/files/es/web/css/css_animations/detecting_css_animation_support/index.html @@ -0,0 +1,91 @@ +--- +title: Detectar soporte de animación CSS +slug: Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS +translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +--- +

{{CSSRef}}

+ +

Las animaciones de CSS permiten realizar animaciones creativas de contenido usando nada más que CSS. Sin embargo, es posible que hayan momentos en que estas funciones no sean compatibles, y puede que desees manejar ese problema usando código JavaScript. Este artículo, basado en la publicación de Chris Heilmann, demuestra una técnica de como hacer esto.

+ +

Prueba de la compatibilidad de animaciones CSS

+ +

Este código comprueba si el soporte de animaciones CSS esta disponible:

+ +
var animation = false,
+    animationstring = 'animation',
+    keyframeprefix = '',
+    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+    pfx  = '',
+    elm = document.createElement('div');
+
+if( elm.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i < domPrefixes.length; i++ ) {
+    if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+
+ +

Para empezar, hemos definido algunas variables. Asumimos que las animaciones no son compatibles al establecer la variable animation a false. Establecemos la variable animationstring a animation la cual es la propiedad que queremos establecer mas tarde. Creamos un arreglo (array) sobre los prefijos de navegadores para realizar un bucle, y establecemos la variable pfx a una cadena vacía.

+ +

Luego verificamos si la propiedad de CSS {{ cssxref("animation-name") }} esta establecida en la colección de estilo para el elemento especificado por la variable elm. Esto quiere decir que el navegador soporta animaciones CSS sin ningun prefijo, lo cual, hasta la fecha, ninguno de ellos lo hace.

+ +

Si el navegador no soporta animaciones sin prefijos, y animation sigue siendo false, iteramos todos los posibles prefijos,  ya que todos los principales navegadores estan anteponiendo esta propiedad y cambiando su nombre a AnimationName en su lugar.

+ +

Una vez que el código ha terminado de ejecutarse, el valor de animation será false si el soporte de animacion CSS no esta disponible, de otro modo será true. Si es true tanto el nombre de las propiedad de animation y el el prefijo keyframe serán los correctos. Así que si utilizas un nuevo Firefox, la propiedad será MozAnimation y el prefijo keyframe será -moz-, mientras en Chrome será WebkitAnimation y -webkit-. Tenga en cuenta que los navegadores no facilitan el cambio entre camelCase (Capitalizacion medial) y la hyphen-ation (separación).

+ +

Animaciones utilizando la sintaxis correcta para diferentes navegadores

+ +

Ahora que sabes si las animaciones CSS son compatibles o no, podemos animar.

+ +
if( animation === false ) {
+
+  // animate in JavaScript fallback
+
+} else {
+  elm.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets && document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+
+ +

Este código examina el valor de animation; si es false, sabemos que tendremos que recurrir a la alternativa de JavaScript para realizar nuestra animacion. De otra manera, podemos usar JavaScript para crear los efectos de animación CSS deseados.

+ +

Establecer las propiedades de animación es fácil; simplemente actualiza su valor en la colección de estilos. Aunque, añadir keyframes es más complicado, ya que no están definidas usando la sintaxis tradicional de CSS (lo que los hace mas flexible, pero mas difícil desde script).

+ +

Para definir nuestros keyframes usando JavaScript, necesitamos transcribirlos como una cadena CSS. Todo lo que hacemos es crear una variable keyframes, anteponiendo cada atributo tal como se construye. Esta variable, una vez construida, contiene la descripción completa de todos los keyframes necesarios por nuestra secuencia de animación.

+ +

La siguiente tarea es realmente añadir los keyframes al CSS de la página. Lo primeron que hay que hacer es mirar a ver si existe una hoja de estilo en el documento; si es así, sensillamente insertamos el keyframe descrito dentro de la hoja de estilos; esto se hace en las lineas 13-15.

+ +

Si aún no existe una hoja de estilos, se crea un nuevo elemento {{ HTMLElement("style") }} , y su contenido se incorpora al valor de los keyframes. Luego se sinerta el valor {{ HTMLElement("style") }} dentro del{{ HTMLElement("head") }} del documento, añadiendo así la nueva hoja de estilo del document.

+ +

Ver en el JSFiddle

+ +

Ver tambien

+ + diff --git a/files/es/web/css/css_animations/usando_animaciones_css/index.html b/files/es/web/css/css_animations/usando_animaciones_css/index.html deleted file mode 100644 index b9b08bbc0b..0000000000 --- a/files/es/web/css/css_animations/usando_animaciones_css/index.html +++ /dev/null @@ -1,351 +0,0 @@ ---- -title: Usando animaciones CSS -slug: Web/CSS/CSS_Animations/Usando_animaciones_CSS -tags: - - Advanced - - CSS - - CSS Animations - - Example - - Experimental - - Guide -translation_of: Web/CSS/CSS_Animations/Using_CSS_animations ---- -

{{SeeCompatTable}}{{CSSRef}}

- -

Las animaciones CSS3 permiten animar la transición entre un estilo CSS y otro. Las animaciones constan de dos componentes: un estilo que describe la animación CSS y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma.

- -

Las animaciones CSS tienen tres ventajas principales sobre las técnicas tradicionales de animación basada en scripts:

- -
    -
  1. Son muy fáciles de usar para animaciones sencillas, puedes hacerlo incluso sin tener conocimientos de Javascript.
    2. -
  2. La animación se muestra correctamente, incluso en equipos poco potentes. Animaciones simples realizadas en Javascript pueden verse mal (a menos que estén muy bien hechas). El motor de renderizado puede usar técnicas de optimización como el "frame-skipping" u otras técnicas para que la ejecución de la animación se vea tan suave como sea posible.
    3. -
  3. Al ser el navegador quien controle la secuencia de la animación, permitimos que optimice el rendimiento y eficiencia de la misma, por ejemplo, reduciendo la frecuencia de actualización de la animación ejecutándola en pestañas que no estén visibles.
    4. -
- -

Configurando la animación

- -

Para crear una secuencia de animación CSS, tú estilizarás el elemento que quieras animar con la propiedad {{ cssxref("animation") }} y sus sub-propiedades. Con ellas podemos no solo configurar el ritmo y la duración de la animación sino otros detalles sobre la secuencia de la animación. Con ellas no configuramos la apariencia actual de la animación, para ello disponemos de {{ cssxref("@keyframes") }} como describiremos más adelante .

- -

Las subpropiedades de {{ cssxref("animation") }} son:

- -
-
{{ cssxref("animation-delay") }}
-
Tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.
-
{{ cssxref("animation-direction") }}
-
Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.
-
{{ cssxref("animation-duration") }}
-
Indica la cantidad de tiempo que la animación consume en completar su ciclo (duración).
-
{{ cssxref("animation-iteration-count") }}
-
El número de veces que se repite. Podemos indicar infinite para repetir la animación indefinidamente.
-
{{ cssxref("animation-name") }}
-
Especifica el nombre de la regla {{ cssxref("@keyframes") }} que describe los fotogramas de la animación.
-
{{ cssxref("animation-play-state") }}
-
Permite pausar y reanudar la secuencia de la animación
-
{{ cssxref("animation-timing-function") }}
-
Indica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración.
-
{{ cssxref("animation-fill-mode") }}
-
Especifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).
-
- -

Definiendo la secuencia de la animación con fotogramas

- -

Una vez configurado el tiempo de la animación, necesitamos definir su apariencia. Esto lo haremos estableciendo dos fotogramas más usando la regla {{ cssxref("@keyframes") }}. Cada fotograma describe cómo se muestra cada elemento animado en un momento dado durante la secuencia de la animación.

- -

Desde que se define el tiempo y el ritmo de la animación, el fotograma usa {{ cssxref("percentage") }} para indicar en qué momento de la secuencia de la animación tiene lugar. 0% es el principio, 100% es el estado final de la animación. Debemos especificar estos dos momentos para que el navegador sepa dónde debe comenzar y finalizar; debido a su importancias, estos dos momentos tienen alias especiales: from y to.

- -

Además puedes, opcionalmente, incluir fotogramas que describan pasos intermedios entre el punto inicial y final de la animación.

- -

Ejemplos

- -
Nota: Los siguientes ejemplos no usan ningún prefijo en las propiedades CSS de animación. Los navegadores antiguos pueden necesitarlos. Al hacer click en "Ver el ejemplo vivo" se incluye el prefijo -webkit.
- -

Haciendo que un texto se delice por la ventana del navegador

- -

Este sencillo ejemplo da estilos al elemento {{ HTMLElement("p") }} para que el texto se deslice por la pantalla entrando desde el borde derecho de la ventana del navegador.

- -

Animaciones como esta pueden hacer que la página se vuelva más ancha que la ventana del navegador. Para evitar este problema, pon el elemento que será animado en un contenedor y agrega {{cssxref("overflow")}}:hidden en el contenedor.

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-}
-
-@keyframes slidein {
-  from {
-    margin-left: 100%;
-    width: 300%
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
-
- -

El estilo del elemento {{ HTMLElement("p") }} especifica, a través de la propiedad {{ cssxref("animation-duration") }}, que la animación debe durar 3 segundos desde el inicio al fin y que el nombre de los {{ cssxref("@keyframes") }} que definen los fotogramas de la secuencia de la animación es "slidein".

- -

Si queremos añadir algún estilo personalizado sobre el elemento {{ HTMLElement("p") }} para usarlo en navegadores que no soporten animaciones CSS, también podemos incluirlos. En nuestro ejemplo, no queremos ningún otro estilo personalizado diferente al efecto de la animación.

- -

Los fotogramas se definen usando la regla {{ cssxref("@keyframes") }}. En nuestro ejemplo, tenemos solo dos fotogramas. El primero de ellos sucede en elt 0% (hemos usado su alias from). Aqui, configuramos el margen izquierdo del elemento, poniendolo al 100%  (es decir, en el borde derecho del elemento contenedor), y su ancho al 300% (o tres veces el ancho del elemento contenedor). Esto hace que en el primer fotograma de la animación tengamos el encabezado fuera del borde derecho de la ventana del navegador.

- -

El segundo (y último) fotograma sucede en el 100% (hemos usado su alias to). Hemos puesto el margen derecho al 0% y el ancho del elemento al 100%. Esto produce que el encabezado, al finalizar la animación, esté en el borde derecho del área de contenido.

- -
<p>The Caterpillar and Alice looked at each other for some time in silence:
-at last the Caterpillar took the hookah out of its mouth, and addressed
-her in a languid, sleepy voice.</p>
- -

(Recarga la página para ver la animación, o haz click en el botón CodePen para ver la animación en CodePen)

- -

{{EmbedLiveSample("Haciendo_que_un_texto_se_delice_por_la_ventana_del_navegador","100%","250")}}

- -

Añadiendo otro fotograma

- -

Vamos a añadir otro fotograma a la animación de nuestro ejemplo anterior. Pongamos que queremos que el tamaño de fuente del encabezado aumente a medida que se mueve durante un tiempo y que después disminuye hasta su tamaño original. Esto es tan sencillo como añadir este fotograma:

- -
75% {
-  font-size: 300%;
-  margin-left: 25%;
-  width: 150%;
-}
-
- - - - - -

Esto le dice al navegador que en el 75% de la secuencia de la animación, el encabezado tiene un margen izquierdo del 25%, un tamaño de letra del 200% y un ancho del 150%.

- -

(Recarga la página para ver la animación, o haz click al botón de CodePen para la animación en CodePen)

- -

{{EmbedLiveSample("Añadiendo_otro_fotograma","100%","250")}}

- -

Haciendo que se repita

- -

Para hacer que la animación se repita, solo hay que usar la propiedad {{ cssxref("animation-iteration-count") }} e indicarle cuántas veces debe repetirse. En nuestro caso, usamos  infinite para que la animación se repita indefinidamente:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-}
-
- - - - - -

{{EmbedLiveSample("Haciendo_que_se_repita","100%","250")}}

- -

Moviendolo hacia adelante y hacia atrás

- -

Hemos hecho que se repita, pero queda un poco raro que salte al inicio de la animación cada vez que ésta comienza. Queremos que se mueva hacia adelante y hacia atrás en la pantalla. Esto lo conseguimos fácilmente indicando que {{ cssxref("animation-direction") }} es alternate:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
- - - - - -

{{EmbedLiveSample("Moviendolo_hacia_adelante_y_hacia_atrás","100%","250")}}

- -

Usando la versión abreviada animation

- -

La versión abreviada {{cssxref("animation")}} es usado para ahorrar espacio. Por ejemplo, la regla que hemos usado en este artículo:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
- -

Se puede reemplazar por

- -
p {
-  animation: 3s infinite alternate slidein;
-}
- -
-

Nota: Puedes encontrar más detalles en la página de referencia {{cssxref("animation")}} 

-
- -

Estableciendo multiples valores de propiedades animation

- -

Las propiedades de la versión larga de {{cssxref("animation")}} pueden aceptar múltiples valores, separados por comas - esta característica puede ser usada cuando quieres aplicar múltiples animaciones en una solo regla, y establecer por separado duration, iteration-count, etc. para diferentes animaciones. Vamos a ver algunos ejemplos rápidos para explicar las diferentes combinaciones:

- -

En el primer ejemplo, tenemos tres nombres de animación establecidos, pero solo una duración (duration) y número de iteraciones (iteration-count). En este caso, a las tres animaciones se les da la misma duración y número de iteraciones:

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 3s;
-animation-iteration-count: 1;
-
- -

En el segundo ejemplo, tenemos tres valores establecidos en las tres propiedades. En este caso, cada animación se ejecuta con los valores correspondientes en la misma posición en cada propiedad, así por ejemplo fadeInOut tiene una duración de 2.5s y 2 iteraciones, etc.

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 2.5s, 5s, 1s;
-animation-iteration-count: 2, 1, 5;
- -

En el tercer caso, hay tres animaciones especificadas, pero solo dos duraciones y número de iteraciones. En los casos en donde no hay valores suficientes para dar un valor separado a cada animación, los valores se repiten de inicio a fin. Así por ejemplo, fadeInOut obtiene una duración de 2.5s y moveLeft300px obtiene una duración de 5s. Ahora tenemos asignados todos los valores de duracion disponibles, así que empezamos desde el inicio de nuevo - por lo tanto bounce  tiene una duración de 2.5s. El número de iteraciones (y cualquier otra propiedad que especifiques) será asignados de la misma forma.

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 2.5s, 5s;
-animation-iteration-count: 2, 1;
- -

Usando eventos de animación

- -

Podemos tener un control mayor sobre las animaciones (así como información útil sobre ellas) haciendo uso de eventos de animación. Dichos eventos, representados por el objeto {{ domxref("event/AnimationEvent", "AnimationEvent") }} , se pueden usar para detectar cuándo comienza la animación, cuándo termina y cuándo comienza una iteración. Cada evento incluye el momento en el que ocurrió, así como el nombre de la animación que lo desencadenó.

- -

Vamos a modificar el ejemplo del texto deslizante para recoger información sobre cada evento cuando suceda y asi podremos echar un vistazo a cómo funcionan.

- -

Agregando CSS

- -

Empezamos creando el CSS para la animación. Esta animación durará 3 segundos, se llama slidein, se repite 3 veces, y alterna de dirección cada vez. En {{cssxref("@keyframes")}}, width y margin-left son manipulados para hacer que el elemento se deslice por la pantalla.

- -
.slidein {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: 3;
-  animation-direction: alternate;
-}
-
-@keyframes slidein {
-  from {
-    margin-left:100%;
-    width:300%
-  }
-
-  to {
-   margin-left:0%;
-   width:100%;
- }
-}
- -

Añadiendo detectores de eventos a la animación

- -

Usaremos un poco de Javascript para escuchar los tres posibles eventos de animación. Este código configura nuestros detectores de eventos (event listeners); los llamamos cuando el documento carga por primera vez para configurar todo.

- -
var e = document.getElementById("watchme");
-e.addEventListener("animationstart", listener, false);
-e.addEventListener("animationend", listener, false);
-e.addEventListener("animationiteration", listener, false);
-
-e.className = "slidein";
- -

Es la forma estándar de detectar eventos en Javascript, si quieres conocer más detalles sobre cómo funciona la detección de eventos, consulta la documentación de {{ domxref("element.addEventListener()") }}.

- -

La última línea pone la clase slidein al elemento para comenzar la animación. ¿Por qué?. Porque que el evento animationstart se dispara cuando comienza la animación y, en nuestro caso, esto sucedería antes de que nuestro código se hubiera ejecutado y no podríamos crear los detectores de eventos. Para evitarlo, creamos los detectores de eventos antes y añadimos la clase al elemento para iniciar la animación.

- -

Recibiendo los eventos

- -

Los eventos, al irse disparando, llamarán a la función listener().

- -
function listener(e) {
-  var l = document.createElement("li");
-  switch(e.type) {
-    case "animationstart":
-      l.innerHTML = "Iniciado: tiempo transcurrido " + e.elapsedTime;
-      break;
-    case "animationend":
-      l.innerHTML = "Finalizado: tiempo transcurrido " + e.elapsedTime;
-      break;
-    case "animationiteration":
-      l.innerHTML = "Nueva iteración comenzó a los " + e.elapsedTime;
-      break;
-  }
-  document.getElementById("output").appendChild(l);
-}
-
- -

Este código también es muy sencillo. Miramos en {{ domxref("event.type") }} para saber qué tipo de evento se ha disparado y, en función del tipo de evento, añadimos su correspodiente texto al elemento {{ HTMLElement("ul") }} que usaremos para registrar la actividad de nuestros eventos.

- -

El resultado, si todo ha ido bien, será algo parecido a esto:

- -
    -
  • Iniciado: tiempo transcurrido 0
    • -
  • Nueva iteración comenzó a los 3.01200008392334
    • -
  • Nueva iteración comenzó a los 6.00600004196167
    • -
  • Finalizado: tiempo transcurrido 9.234000205993652
    • -
- -

Fijémonos en que despues de la iteración final de la animación, el evento animationiteration no se envía, en su lugar se lanza animationend.

- -

El HTML

- -

Solo nos falta mostrar el código HTML necesario para mostrar el ejemplo en la página, incluyendo la lista en la que el script irá insertando la información de los eventos que se vayan disparando.

- -
<h1 id="watchme">Watch me move</h1>
-<p>
-  This example shows how to use CSS animations to make <code>H1</code>
-  elements move across the page.</p>
-<p>
-  In addition, we output some text each time an animation event fires,
-  so you can see them in action.
-</p>
-<ul id="output">
-</ul>
-
- -

{{EmbedLiveSample('Usando_eventos_de_animación', '600', '300')}}

- -

Te puede interesar también

- - diff --git a/files/es/web/css/css_animations/using_css_animations/index.html b/files/es/web/css/css_animations/using_css_animations/index.html new file mode 100644 index 0000000000..b9b08bbc0b --- /dev/null +++ b/files/es/web/css/css_animations/using_css_animations/index.html @@ -0,0 +1,351 @@ +--- +title: Usando animaciones CSS +slug: Web/CSS/CSS_Animations/Usando_animaciones_CSS +tags: + - Advanced + - CSS + - CSS Animations + - Example + - Experimental + - Guide +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +

{{SeeCompatTable}}{{CSSRef}}

+ +

Las animaciones CSS3 permiten animar la transición entre un estilo CSS y otro. Las animaciones constan de dos componentes: un estilo que describe la animación CSS y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma.

+ +

Las animaciones CSS tienen tres ventajas principales sobre las técnicas tradicionales de animación basada en scripts:

+ +
    +
  1. Son muy fáciles de usar para animaciones sencillas, puedes hacerlo incluso sin tener conocimientos de Javascript.
    2. +
  2. La animación se muestra correctamente, incluso en equipos poco potentes. Animaciones simples realizadas en Javascript pueden verse mal (a menos que estén muy bien hechas). El motor de renderizado puede usar técnicas de optimización como el "frame-skipping" u otras técnicas para que la ejecución de la animación se vea tan suave como sea posible.
    3. +
  3. Al ser el navegador quien controle la secuencia de la animación, permitimos que optimice el rendimiento y eficiencia de la misma, por ejemplo, reduciendo la frecuencia de actualización de la animación ejecutándola en pestañas que no estén visibles.
    4. +
+ +

Configurando la animación

+ +

Para crear una secuencia de animación CSS, tú estilizarás el elemento que quieras animar con la propiedad {{ cssxref("animation") }} y sus sub-propiedades. Con ellas podemos no solo configurar el ritmo y la duración de la animación sino otros detalles sobre la secuencia de la animación. Con ellas no configuramos la apariencia actual de la animación, para ello disponemos de {{ cssxref("@keyframes") }} como describiremos más adelante .

+ +

Las subpropiedades de {{ cssxref("animation") }} son:

+ +
+
{{ cssxref("animation-delay") }}
+
Tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.
+
{{ cssxref("animation-direction") }}
+
Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.
+
{{ cssxref("animation-duration") }}
+
Indica la cantidad de tiempo que la animación consume en completar su ciclo (duración).
+
{{ cssxref("animation-iteration-count") }}
+
El número de veces que se repite. Podemos indicar infinite para repetir la animación indefinidamente.
+
{{ cssxref("animation-name") }}
+
Especifica el nombre de la regla {{ cssxref("@keyframes") }} que describe los fotogramas de la animación.
+
{{ cssxref("animation-play-state") }}
+
Permite pausar y reanudar la secuencia de la animación
+
{{ cssxref("animation-timing-function") }}
+
Indica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración.
+
{{ cssxref("animation-fill-mode") }}
+
Especifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).
+
+ +

Definiendo la secuencia de la animación con fotogramas

+ +

Una vez configurado el tiempo de la animación, necesitamos definir su apariencia. Esto lo haremos estableciendo dos fotogramas más usando la regla {{ cssxref("@keyframes") }}. Cada fotograma describe cómo se muestra cada elemento animado en un momento dado durante la secuencia de la animación.

+ +

Desde que se define el tiempo y el ritmo de la animación, el fotograma usa {{ cssxref("percentage") }} para indicar en qué momento de la secuencia de la animación tiene lugar. 0% es el principio, 100% es el estado final de la animación. Debemos especificar estos dos momentos para que el navegador sepa dónde debe comenzar y finalizar; debido a su importancias, estos dos momentos tienen alias especiales: from y to.

+ +

Además puedes, opcionalmente, incluir fotogramas que describan pasos intermedios entre el punto inicial y final de la animación.

+ +

Ejemplos

+ +
Nota: Los siguientes ejemplos no usan ningún prefijo en las propiedades CSS de animación. Los navegadores antiguos pueden necesitarlos. Al hacer click en "Ver el ejemplo vivo" se incluye el prefijo -webkit.
+ +

Haciendo que un texto se delice por la ventana del navegador

+ +

Este sencillo ejemplo da estilos al elemento {{ HTMLElement("p") }} para que el texto se deslice por la pantalla entrando desde el borde derecho de la ventana del navegador.

+ +

Animaciones como esta pueden hacer que la página se vuelva más ancha que la ventana del navegador. Para evitar este problema, pon el elemento que será animado en un contenedor y agrega {{cssxref("overflow")}}:hidden en el contenedor.

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

El estilo del elemento {{ HTMLElement("p") }} especifica, a través de la propiedad {{ cssxref("animation-duration") }}, que la animación debe durar 3 segundos desde el inicio al fin y que el nombre de los {{ cssxref("@keyframes") }} que definen los fotogramas de la secuencia de la animación es "slidein".

+ +

Si queremos añadir algún estilo personalizado sobre el elemento {{ HTMLElement("p") }} para usarlo en navegadores que no soporten animaciones CSS, también podemos incluirlos. En nuestro ejemplo, no queremos ningún otro estilo personalizado diferente al efecto de la animación.

+ +

Los fotogramas se definen usando la regla {{ cssxref("@keyframes") }}. En nuestro ejemplo, tenemos solo dos fotogramas. El primero de ellos sucede en elt 0% (hemos usado su alias from). Aqui, configuramos el margen izquierdo del elemento, poniendolo al 100%  (es decir, en el borde derecho del elemento contenedor), y su ancho al 300% (o tres veces el ancho del elemento contenedor). Esto hace que en el primer fotograma de la animación tengamos el encabezado fuera del borde derecho de la ventana del navegador.

+ +

El segundo (y último) fotograma sucede en el 100% (hemos usado su alias to). Hemos puesto el margen derecho al 0% y el ancho del elemento al 100%. Esto produce que el encabezado, al finalizar la animación, esté en el borde derecho del área de contenido.

+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+ +

(Recarga la página para ver la animación, o haz click en el botón CodePen para ver la animación en CodePen)

+ +

{{EmbedLiveSample("Haciendo_que_un_texto_se_delice_por_la_ventana_del_navegador","100%","250")}}

+ +

Añadiendo otro fotograma

+ +

Vamos a añadir otro fotograma a la animación de nuestro ejemplo anterior. Pongamos que queremos que el tamaño de fuente del encabezado aumente a medida que se mueve durante un tiempo y que después disminuye hasta su tamaño original. Esto es tan sencillo como añadir este fotograma:

+ +
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+
+ + + + + +

Esto le dice al navegador que en el 75% de la secuencia de la animación, el encabezado tiene un margen izquierdo del 25%, un tamaño de letra del 200% y un ancho del 150%.

+ +

(Recarga la página para ver la animación, o haz click al botón de CodePen para la animación en CodePen)

+ +

{{EmbedLiveSample("Añadiendo_otro_fotograma","100%","250")}}

+ +

Haciendo que se repita

+ +

Para hacer que la animación se repita, solo hay que usar la propiedad {{ cssxref("animation-iteration-count") }} e indicarle cuántas veces debe repetirse. En nuestro caso, usamos  infinite para que la animación se repita indefinidamente:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+ + + + + +

{{EmbedLiveSample("Haciendo_que_se_repita","100%","250")}}

+ +

Moviendolo hacia adelante y hacia atrás

+ +

Hemos hecho que se repita, pero queda un poco raro que salte al inicio de la animación cada vez que ésta comienza. Queremos que se mueva hacia adelante y hacia atrás en la pantalla. Esto lo conseguimos fácilmente indicando que {{ cssxref("animation-direction") }} es alternate:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ + + + + +

{{EmbedLiveSample("Moviendolo_hacia_adelante_y_hacia_atrás","100%","250")}}

+ +

Usando la versión abreviada animation

+ +

La versión abreviada {{cssxref("animation")}} es usado para ahorrar espacio. Por ejemplo, la regla que hemos usado en este artículo:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+ +

Se puede reemplazar por

+ +
p {
+  animation: 3s infinite alternate slidein;
+}
+ +
+

Nota: Puedes encontrar más detalles en la página de referencia {{cssxref("animation")}} 

+
+ +

Estableciendo multiples valores de propiedades animation

+ +

Las propiedades de la versión larga de {{cssxref("animation")}} pueden aceptar múltiples valores, separados por comas - esta característica puede ser usada cuando quieres aplicar múltiples animaciones en una solo regla, y establecer por separado duration, iteration-count, etc. para diferentes animaciones. Vamos a ver algunos ejemplos rápidos para explicar las diferentes combinaciones:

+ +

En el primer ejemplo, tenemos tres nombres de animación establecidos, pero solo una duración (duration) y número de iteraciones (iteration-count). En este caso, a las tres animaciones se les da la misma duración y número de iteraciones:

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;
+
+ +

En el segundo ejemplo, tenemos tres valores establecidos en las tres propiedades. En este caso, cada animación se ejecuta con los valores correspondientes en la misma posición en cada propiedad, así por ejemplo fadeInOut tiene una duración de 2.5s y 2 iteraciones, etc.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;
+ +

En el tercer caso, hay tres animaciones especificadas, pero solo dos duraciones y número de iteraciones. En los casos en donde no hay valores suficientes para dar un valor separado a cada animación, los valores se repiten de inicio a fin. Así por ejemplo, fadeInOut obtiene una duración de 2.5s y moveLeft300px obtiene una duración de 5s. Ahora tenemos asignados todos los valores de duracion disponibles, así que empezamos desde el inicio de nuevo - por lo tanto bounce  tiene una duración de 2.5s. El número de iteraciones (y cualquier otra propiedad que especifiques) será asignados de la misma forma.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;
+ +

Usando eventos de animación

+ +

Podemos tener un control mayor sobre las animaciones (así como información útil sobre ellas) haciendo uso de eventos de animación. Dichos eventos, representados por el objeto {{ domxref("event/AnimationEvent", "AnimationEvent") }} , se pueden usar para detectar cuándo comienza la animación, cuándo termina y cuándo comienza una iteración. Cada evento incluye el momento en el que ocurrió, así como el nombre de la animación que lo desencadenó.

+ +

Vamos a modificar el ejemplo del texto deslizante para recoger información sobre cada evento cuando suceda y asi podremos echar un vistazo a cómo funcionan.

+ +

Agregando CSS

+ +

Empezamos creando el CSS para la animación. Esta animación durará 3 segundos, se llama slidein, se repite 3 veces, y alterna de dirección cada vez. En {{cssxref("@keyframes")}}, width y margin-left son manipulados para hacer que el elemento se deslice por la pantalla.

+ +
.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+ +

Añadiendo detectores de eventos a la animación

+ +

Usaremos un poco de Javascript para escuchar los tres posibles eventos de animación. Este código configura nuestros detectores de eventos (event listeners); los llamamos cuando el documento carga por primera vez para configurar todo.

+ +
var e = document.getElementById("watchme");
+e.addEventListener("animationstart", listener, false);
+e.addEventListener("animationend", listener, false);
+e.addEventListener("animationiteration", listener, false);
+
+e.className = "slidein";
+ +

Es la forma estándar de detectar eventos en Javascript, si quieres conocer más detalles sobre cómo funciona la detección de eventos, consulta la documentación de {{ domxref("element.addEventListener()") }}.

+ +

La última línea pone la clase slidein al elemento para comenzar la animación. ¿Por qué?. Porque que el evento animationstart se dispara cuando comienza la animación y, en nuestro caso, esto sucedería antes de que nuestro código se hubiera ejecutado y no podríamos crear los detectores de eventos. Para evitarlo, creamos los detectores de eventos antes y añadimos la clase al elemento para iniciar la animación.

+ +

Recibiendo los eventos

+ +

Los eventos, al irse disparando, llamarán a la función listener().

+ +
function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Iniciado: tiempo transcurrido " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Finalizado: tiempo transcurrido " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "Nueva iteración comenzó a los " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+
+ +

Este código también es muy sencillo. Miramos en {{ domxref("event.type") }} para saber qué tipo de evento se ha disparado y, en función del tipo de evento, añadimos su correspodiente texto al elemento {{ HTMLElement("ul") }} que usaremos para registrar la actividad de nuestros eventos.

+ +

El resultado, si todo ha ido bien, será algo parecido a esto:

+ +
    +
  • Iniciado: tiempo transcurrido 0
    • +
  • Nueva iteración comenzó a los 3.01200008392334
    • +
  • Nueva iteración comenzó a los 6.00600004196167
    • +
  • Finalizado: tiempo transcurrido 9.234000205993652
    • +
+ +

Fijémonos en que despues de la iteración final de la animación, el evento animationiteration no se envía, en su lugar se lanza animationend.

+ +

El HTML

+ +

Solo nos falta mostrar el código HTML necesario para mostrar el ejemplo en la página, incluyendo la lista en la que el script irá insertando la información de los eventos que se vayan disparando.

+ +
<h1 id="watchme">Watch me move</h1>
+<p>
+  This example shows how to use CSS animations to make <code>H1</code>
+  elements move across the page.</p>
+<p>
+  In addition, we output some text each time an animation event fires,
+  so you can see them in action.
+</p>
+<ul id="output">
+</ul>
+
+ +

{{EmbedLiveSample('Usando_eventos_de_animación', '600', '300')}}

+ +

Te puede interesar también

+ + diff --git a/files/es/web/css/css_background_and_borders/border-image_generador/index.html b/files/es/web/css/css_background_and_borders/border-image_generador/index.html deleted file mode 100644 index 3f189b87ea..0000000000 --- a/files/es/web/css/css_background_and_borders/border-image_generador/index.html +++ /dev/null @@ -1,2615 +0,0 @@ ---- -title: Generador Border-image -slug: Web/CSS/CSS_Background_and_Borders/Border-image_generador -tags: - - CSS - - Herramientas -translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator ---- -

Esta herramienta permite generar valores para CSS3 {{cssxref("border-image")}}

-
-

Border Image Generator

-

HTML Content

- 
    

-
-        
-
-        

-            
-            
 Upload image 

-            
-            
 

-        

-
-        

-            
 Control Box 

-            

-            

-                
scale

-                

-                

-            

-            

-            

-                
draggable

-                

-            

-            

-                
section height

-                

-                

-            

-        

-
-        

-            

-                

-                

-                

-                

-            

-            
 

-        

-
-
-        

-
-
-            

-                
 border-image-slice 

-                

-                    
fill

-                    

-                

-            

-
-
-            

-                
 border-image-width 

-            

-
-
-            

-                
 border-image-outset 

-            

-
-
-            

-                
 aditional-properties 

-                

-                    
 repeat-x 

-                    

-                        
repeat

-                        
stretch

-                        
round

-                    

-                

-                

-                    
 repeat-y 

-                    

-                        
repeat

-                        
stretch

-                        
round

-                    

-                

-                

-                    

-                    

-                

-
-                

-                    

-                

-                

-                    

-                    

-                

-            

-
-
-            

-                
 CSS Code 

-                

-                     border-image-slice: 
-                     
-                

-                

-                     border-image-width: 
-                     
-                

-                

-                     border-image-outset: 
-                     
-                

-                

-                     border-image-repeat: 
-                     
-                

-                

-                     border-image-source: 
-                      
-                

-            

-
-        

-
-

CSS Content

- 
/*  GRID OF TWELVE
- * ========================================================================== */
-
-.span_12 {
-	width: 100%;
-}
-
-.span_11 {
-	width: 91.46%;
-}
-
-.span_10 {
-	width: 83%;
-}
-
-.span_9 {
-	width: 74.54%;
-}
-
-.span_8 {
-	width: 66.08%;
-}
-
-.span_7 {
-	width: 57.62%;
-}
-
-.span_6 {
-	width: 49.16%;
-}
-
-.span_5 {
-	width: 40.7%;
-}
-
-.span_4 {
-	width: 32.24%;
-}
-
-.span_3 {
-	width: 23.78%;
-}
-
-.span_2 {
-	width: 15.32%;
-}
-
-.span_1 {
-	width: 6.86%;
-}
-
-
-/*  SECTIONS
- * ========================================================================== */
-
-.section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
-}
-
-/*  GROUPING
- * ========================================================================== */
-
-
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear:both;
-}
-
-.group {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-}
-
-/*  GRID COLUMN SETUP
- * ========================================================================== */
-
-.col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
-}
-
-.col:first-child {
-	margin-left: 0;
-} /* all browsers except IE6 and lower */
-
-
-
-/*
- * UI Component
- */
-
-.ui-input-slider {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI DropDown
- */
-
-/* Dropdown */
-
-.ui-dropdown {
-	height: 2em;
-	width: 120px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 12px;
-
-	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
-	background-position: right center;
-	background-repeat: no-repeat;
-	background-color: #359740;
-
-	position: relative;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-dropdown:hover {
-	cursor: pointer;
-	background-color: #208B20;
-}
-
-/* Dropdown Select Button */
-
-.ui-dropdown-select {
-	height: inherit;
-	padding: 0 0.75em;
-	color: #FFF;
-	line-height: 2em;
-}
-
-/* Dropdown List */
-
-.ui-dropdown-list {
-	width: 100%;
-	height: 150px;
-	max-height: 150px;
-	margin: 0;
-	padding: 0 0.3em;
-
-	border: 3px solid #3490D2;
-	border-color: #208B20;
-	background: #666;
-	background-color: #EEF1F5;
-	color: #000;
-
-	position: absolute;
-	top: 2em;
-	left: 0;
-	z-index: 100;
-
-	overflow: hidden;
-	transition: all 0.3s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list:hover {
-	overflow: auto;
-}
-
-.ui-dropdown-list[data-hidden='true'] {
-	height: 0 !important;
-	opacity: 0;
-	visibility: hidden;
-}
-
-.ui-dropdown[data-position='left'] .ui-dropdown-list {
-	left: -100%;
-	top: 0;
-}
-
-.ui-dropdown[data-position='right'] .ui-dropdown-list {
-	left: 100%;
-	top: 0;
-}
-
-.ui-dropdown-list > div {
-	width: 100%;
-	height: 1.6em;
-	margin: 0.3em 0;
-	padding: 0.3em;
-	line-height: 1em;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list > div:hover {
-	background: #3490D2;
-	color:#FFF;
-	border-radius: 2px;
-	cursor: pointer;
-}
-
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI Button
- */
-
-/* Checkbox */
-
-.ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-checkbox > input {
- 	display: none;
-}
-
-.ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
-
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	color: #FFF;
-	border-radius: 2px;
-	font-weight: bold;
-	float: left;
-}
-
-.ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
-}
-
-.ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
-}
-
-.ui-checkbox > label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * BORDER IMAGE GENERATOR TOOL
- */
-
-body {
-	width: 100%;
-	margin: 0 auto;
-	padding: 0 0 20px 0;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
-	border: 1px solid #EEE;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-body[data-move='X'] {
-	cursor: w-resize !important;
-}
-
-body[data-move='Y'] {
-	cursor: s-resize !important;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-[data-draggable='true']:hover {
-	cursor: move;
-}
-
-[data-draggable='true']:hover > * {
-	cursor: default;
-}
-
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/*
- * Border Image Picker
- */
-
-#gallery {
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#image-gallery {
-	width: 600px;
-	height: 100px;
-	margin: 0 auto;
-	transition: margin 0.4s;
-}
-
-#image-gallery .image {
-	height: 80px;
-	float: left;
-	margin: 10px;
-	opacity: 0.5;
-	background-color: #FFF;
-	box-shadow: 0px 0px 3px 1px #BABABA;
-}
-
-#image-gallery .image[selected="true"] {
-	box-shadow: 0px 0px 3px 1px #3BBA52;
-	opacity: 1;
-}
-
-#image-gallery .image:hover {
-	cursor: pointer;
-	box-shadow: 0px 0px 3px 1px #30ACE5;
-	opacity: 1;
-}
-
-#image-gallery[data-collapsed='true'] {
-	margin-top: -100px;
-}
-
-/* Load Menu */
-
-#load-actions {
-	margin: 10px 0;
-}
-
-#toggle-gallery {
-	width: 30px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-	background-repeat: no-repeat;
-	background-position: top 4px center;
-	background-color: #888888 !important;
-
-	border-radius: 2px;
-	float: left;
-}
-
-#toggle-gallery:hover {
-	cursor: pointer;
-}
-
-#toggle-gallery[data-action='show'] {
-	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
-	background-color: #888888 !important;
-}
-
-#toggle-gallery[data-action='hide'] {
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-}
-
-.button {
-	width: 100px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-	text-align: center;
-	font-size: 12px;
-	line-height: 25px;
-	background-color: #379B4A;
-	border-radius: 2px;
-	float: left;
-}
-
-.button:hover {
-	cursor: pointer;
-	background-color: #3380C4;
-}
-
-#load-image {
-	float: left;
-}
-
-#load-remote {
-	width: 30px;
-	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
-#remote-url {
-	width: 200px;
-	height: 23px;
-	margin: 10px;
-	padding: 0 5px;
-	border: 1px solid #379B4A;
-	border-radius: 2px;
-	float: left;
-
-	transition: width 0.5s;
-}
-
-#remote-url:focus {
-	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
-	border-color: rgba(55, 155, 74, 0.5);
-	width: 450px;
-}
-
-/*
- * Visible Area
- */
-
-#preview_section {
-	position: relative;
-	min-height: 400px;
-}
-
-/* Image Control */
-
-#subject {
-	width: 300px;
-	height: 300px;
-	background-repeat: no-repeat;
-	background-size: 100%;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-
-	position: absolute;
-	z-index: 10;
-	top: 15%;
-	left: 10%;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition-property: width, height;
-	transition-duration: 0.1s;
-}
-
-#subject .guideline {
-	background-color: rgba(255, 255, 255, 0.7);
-	border: 1px solid rgba(0, 0, 0, 0.3);
-	position: absolute;
-}
-
-#subject .guideline:hover {
-	background-color: #F00;
-}
-
-#subject .guideline[data-active] {
-	background-color: #F00;
-	z-index: 10;
-}
-
-#subject .guideline[data-axis='X'] {
-	width: 1px;
-	height: 100%;
-	top: -1px;
-}
-
-#subject .guideline[data-axis='Y'] {
-	width: 100%;
-	height: 1px;
-	left: -1px;
-}
-
-#subject .guideline[data-axis='X']:hover {
-	cursor: w-resize;
-}
-
-#subject .guideline[data-axis='Y']:hover {
-	cursor: s-resize;
-}
-
-
-#subject .relative {
-	position: relative;
-	font-size: 12px;
-}
-
-#subject .tooltip, #subject .tooltip2 {
-	width: 40px;
-	height: 20px;
-	line-height: 20px;
-	font-size: 12px;
-	text-align: center;
-
-	position: absolute;
-	opacity: 0.5;
-	transition: opacity 0.25s;
-}
-
-#subject .tooltip {
-	background: #EEE;
-	border-radius: 2px;
-	border: 1px solid #CCC;
-}
-
-#subject .tooltip2{
-	color: #555;
-}
-
-#subject [data-active] > * {
-	opacity: 1;
-}
-
-#subject .tooltip[data-info='top'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip[data-info='right'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-#subject .tooltip[data-info='bottom'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip[data-info='left'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='top'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip2[data-info='right'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='bottom'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip2[data-info='left'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-/* Preview */
-
-#preview {
-	width: 30%;
-	height: 50%;
-	background-color: #FFF;
-	text-align: center;
-	overflow: hidden;
-	position: absolute;
-	z-index: 10;
-
-	left: 60%;
-	top: 15%;
-
-	border-radius: 2px;
-	border-image-width: 20px;
-	border-image-repeat: round;
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#preview .resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-#preview .resize-handle:hover {
-	cursor: nw-resize;
-}
-
-
-/*
- * General controls MENU
- */
-
-#general-controls {
-	padding: 10px 30px;
-	background-color: #FFF;
-	opacity: 0.95;
-	color: #888;
-	/*border-radius: 2px;*/
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#general-controls .property {
-	width: 130px;
-	float: left;
-}
-
-#general-controls .name {
-	height: 20px;
-	margin: 0 10px 0 0;
-	line-height: 100%;
-	text-align: right;
-	float: left;
-}
-
-#general-controls .right {
-	width: 200px;
-	float: right;
-}
-
-#general-controls .ui-checkbox label {
-	height: 10px;
-}
-
-#general-controls .separator {
-	height: 40px;
-	width: 1px;
-	margin: -10px 15px;
-	background-color: #EEE;
-	float: left;
-}
-
-/*
- * Controls
- */
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-#controls .category {
-	height: 190px;
-	min-width: 260px;
-	margin: 10px;
-	padding: 10px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	float: left;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-@media (min-width: 880px) {
-	#controls .category {
-		width: 30%;
-		margin-left: 1.66%;
-		margin-right: 1.66%;
-	}
-}
-
-@media (max-width: 879px) {
-	#controls .category {
-		width: 37%;
-		margin-left: 6.5%;
-		margin-right: 6.5%;
-	}
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#controls .category:hover .title {
-	color: #777;
-}
-
-#controls .category > .group {
-	border: 1px solid #CCC;
-	border-radius: 2px;
-}
-
-
-/* property */
-
-#controls .property {
-	width: 250px;
-	height: 20px;
-	margin: 5px auto;
-}
-
-#controls .property .ui-input-slider {
-	margin: 0;
-	float: left;
-}
-
-#controls .property .ui-input-slider-info {
-	width: 60px;
-}
-
-#controls .property .ui-input-slider-left {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .ui-input-slider-right {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .name {
-	width: 60px;
-	height: 20px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	line-height: 100%;
-	float: left;
-}
-
-#controls .property .config {
-	width: 20px;
-	height: 20px;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
-	opacity: 0.5;
-}
-
-#controls .property .config:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-right {
-    opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-left {
-    opacity: 1;
-}
-
-#controls .property .ui-dropdown {
-	margin: 0 10px;
-	float: left;
-}
-
-
-#controls .property .ui-checkbox {
-	margin: 0 0 0 16px;
-	float: left;
-}
-
-#controls .property .ui-checkbox label {
-	height: 0.85em;
-	width: 10px;
-}
-
-/* dropdowns */
-#controls .ui-dropdown {
-	width: 50px;
-	height: 1.7em;
-	border-radius: 2px;
-}
-
-#controls .ui-dropdown-select {
-	line-height: 1.6em;
-}
-
-#controls .ui-dropdown-list {
-	top: 20px;
-}
-
-#controls .ui-dropdown-list {
-	border-width: 1px;
-	text-align: center;
-}
-
-#controls .ui-dropdown-list:hover {
-	overflow: hidden;
-}
-
-#controls .border-repeat {
-	margin: 0 0 0 16px !important;
-	width: 80px;
-}
-
-#controls .border-repeat .ui-dropdown-list {
-	height: 6.2em;
-	border-width: 1px;
-	text-align: center;
-}
-
-/* border-image-slice */
-
-
-#border-slice-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-/* border-image-width */
-
-#border-width-control .ui-dropdown-list {
-	height: 6.2em;
-}
-
-/* border-image-outset */
-
-#border-outset-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-#aditional-properties .property {
-	width: 200px;
-}
-
-#aditional-properties .ui-input-slider > input {
-	width: 80px !important;
-}
-
-/* unit settings panel */
-
-#unit-settings {
-	padding: 10px;
-	position: absolute;
-
-	background: #FFF;
-
-	font-size: 12px;
-	border-radius: 3px;
-	border: 1px solid #CCC;
-	text-align: center;
-	color: #555;
-
-	position: absolute;
-	z-index: 1000;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-}
-
-#unit-settings .title {
-	width: 100%;
-	margin: -5px auto 0;
-
-	color: #666;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 25px;
-	border-bottom: 1px solid #E5E5E5;
-}
-
-#unit-settings .ui-input-slider {
-	margin: 10px 0 0 0;
-}
-
-#unit-settings .ui-input-slider-info {
-	width: 50px;
-	line-height: 1.5em;
-}
-
-#unit-settings input {
-	font-size: 12px;
-	width: 40px !important;
-}
-
-#unit-settings .close {
-	width: 16px;
-	height: 16px;
-	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
-	background-size: 75%;
-
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	opacity: 0.5;
-}
-
-#unit-settings .close:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#unit-settings[data-active='true'] {
-	opacity: 1;
-}
-
-#unit-settings[data-active='false'] {
-	opacity: 0;
-	top: -100px !important;
-}
-
-/*
- * CSS Output Code
- */
-
-#output {
-	padding: 10px;
-	border: 2px dashed #888 !important;
-	box-shadow: none !important;
-	border-radius: 3px;
-	overflow: hidden;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-}
-
-
-@media (min-width: 880px) {
-	#output {
-		width: 63.33% !important;
-	}
-}
-
-@media (max-width: 879px) {
-	#output {
-		width: 87% !important;
-	}
-}
-
-
-#output .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#output .css-property {
-	width: 100%;
-	margin: 0;
-	color: #555;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-#output .css-property .name {
-	width: 30%;
-	font-weight: bold;
-	text-align: right;
-	float: left;
-}
-
-#output .css-property .value {
-	width: 65%;
-	padding: 0 2.5%;
-	word-break: break-all;
-	float: left;
-}
-
-
-

JavaScript Content

- 
'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		return input;
-	};
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-
-			document.addEventListener("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		};
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		};
-
-		return slider;
-	};
-
-	var InputSlider = function(node) {
-		var min		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision >= 0 ? precision : 0;
-		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			return;
-
-		notify.call(slider);
-	};
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	};
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	};
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	};
-
-	var setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value > 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-/**
- * UI-DropDown Select
- */
-
-var DropDownManager = (function DropdownManager() {
-
-	var subscribers = {};
-	var dropdowns = [];
-	var active = null;
-
-	var visbility = ["hidden", "visible"];
-
-
-	var DropDown = function DropDown(node) {
-		var topic = node.getAttribute('data-topic');
-		var label = node.getAttribute('data-label');
-		var selected = node.getAttribute('data-selected') | 0;
-
-		var select = document.createElement('div');
-		var list = document.createElement('div');
-		var uval = 0;
-		var option = null;
-		var option_value = null;
-
-		list.className = 'ui-dropdown-list';
-		select.className = 'ui-dropdown-select';
-
-		while (node.firstElementChild !== null) {
-			option = node.firstElementChild;
-			option_value = option.getAttribute('data-value');
-
-			if (option_value === null)
-				option.setAttribute('data-value', uval);
-
-			list.appendChild(node.firstElementChild);
-			uval++;
-		}
-
-		node.appendChild(select);
-		node.appendChild(list);
-
-		select.onclick = this.toggle.bind(this);
-		list.onclick = this.updateValue.bind(this);
-		document.addEventListener('click', clickOut);
-
-		this.state = 0;
-		this.time = 0;
-		this.dropmenu = list;
-		this.select = select;
-		this.toggle(false);
-		this.value = {};
-		this.topic = topic;
-
-		if (label)
-			select.textContent = label;
-		else
-			this.setNodeValue(list.children[selected]);
-
-		dropdowns[topic] = this;
-
-	};
-
-	DropDown.prototype.toggle = function toggle(state) {
-		if (typeof(state) === 'boolean')
-			this.state = state === false ? 0 : 1;
-		else
-			this.state = 1 ^ this.state;
-
-		if (active !== this) {
-			if (active)
-				active.toggle(false);
-			active = this;
-		}
-
-		if (this.state === 0)
-			this.dropmenu.setAttribute('data-hidden', 'true');
-		else
-			this.dropmenu.removeAttribute('data-hidden');
-
-	};
-
-	var clickOut = function clickOut(e) {
-		if (active.state === 0 ||
-			e.target === active.dropmenu ||
-			e.target === active.select)
-			return;
-
-		active.toggle(false);
-	};
-
-	DropDown.prototype.updateValue = function updateValue(e) {
-
-		if (Date.now() - this.time < 500)
-			return;
-
-		if (e.target.className !== "ui-dropdown-list") {
-			this.setNodeValue(e.target);
-			this.toggle(false);
-		}
-
-		this.time = Date.now();
-	};
-
-	DropDown.prototype.setNodeValue = function setNodeValue(node) {
-		this.value['name'] = node.textContent;
-		this.value['value'] = node.getAttribute('data-value');
-
-		this.select.textContent = node.textContent;
-		this.select.setAttribute('data-value', this.value['value']);
-
-		notify.call(this);
-	};
-
-	var createDropDown = function createDropDown(topic, options) {
-
-		var dropdown = document.createElement('div');
-		dropdown.setAttribute('data-topic', topic);
-		dropdown.className = 'ui-dropdown';
-
-		for (var i in options) {
-			var x = document.createElement('div');
-			x.setAttribute('data-value', i);
-			x.textContent = options[i];
-			dropdown.appendChild(x);
-		}
-
-		new DropDown(dropdown);
-
-		return dropdown;
-	};
-
-	var setValue = function setValue(topic, index) {
-		if (dropdowns[topic] === undefined ||
-			index >= dropdowns[topic].dropmenu.children.length)
-			return;
-
-		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		var index = subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	};
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-dropdown');
-		size = elem.length;
-		for (var i = 0; i < size; i++)
-			new DropDown(elem[i]);
-
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		createDropDown : createDropDown
-	};
-
-})();
-
-
-/**
- * UI-ButtonManager
- */
-
-var ButtonManager = (function CheckBoxManager() {
-
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	};
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	};
-
-	var setValue = function setValue(topic, value) {
-		var obj = buttons[topic];
-		if (obj === undefined)
-			return;
-
-		obj.checkbox.checked = value;
-		notify.call(obj);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.checkbox.checked);
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	};
-
-})();
-
-window.addEventListener("load", function() {
-	BorderImage.init();
-});
-
-var BorderImage = (function BorderImage() {
-
-	var getElemById = document.getElementById.bind(document);
-
-	var subject;
-	var preview;
-	var guidelines = [];
-	var positions = ['top', 'right', 'bottom', 'left'];
-
-	var makeDraggable = function makeDraggable(elem) {
-
-		var offsetTop;
-		var offsetLeft;
-
-		elem.setAttribute('data-draggable', 'true');
-
-		var dragStart = function dragStart(e) {
-			if (e.target.getAttribute('data-draggable') !== 'true' ||
-				e.target !== elem || e.button !== 0)
-				return;
-
-			offsetLeft = e.clientX - elem.offsetLeft;
-			offsetTop = e.clientY - elem.offsetTop;
-
-			document.addEventListener('mousemove', mouseDrag);
-			document.addEventListener('mouseup', dragEnd);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			document.removeEventListener('mouseup', dragEnd);
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-
-			elem.style.left = e.clientX - offsetLeft + 'px';
-			elem.style.top = e.clientY - offsetTop + 'px';
-		};
-
-		elem.addEventListener('mousedown', dragStart, false);
-	};
-
-	var PreviewControl = function PreviewControl() {
-
-		var dragging = false;
-		var valueX = null;
-		var valueY = null;
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			valueX = e.clientX - preview.clientWidth;
-			valueY = e.clientY - preview.clientHeight;
-			dragging = true;
-
-			document.addEventListener('mousemove', mouseDrag);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0 || dragging === false)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			dragging = false;
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-			InputSliderManager.setValue('preview-width', e.clientX - valueX);
-			InputSliderManager.setValue('preview-height', e.clientY - valueY);
-		};
-
-		var init = function init() {
-
-			makeDraggable(preview);
-			makeDraggable(subject);
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			handle.addEventListener('mousedown', dragStart);
-			document.addEventListener('mouseup', dragEnd);
-
-			preview.appendChild(handle);
-
-		};
-
-		return {
-			init: init
-		};
-
-	}();
-
-	var ImageReader = (function ImageReader() {
-
-		var fReader = new FileReader();
-		var browse = document.createElement('input');
-
-		var loadImage = function loadImage(e) {
-			if (browse.files.length === 0)
-				return;
-
-			var file = browse.files[0];
-
-			if (file.type.slice(0, 5) !== 'image')
-				return;
-
-			fReader.readAsDataURL(file);
-
-			return false;
-		};
-
-		fReader.onload = function(e) {
-			ImageControl.loadRemoteImage(e.target.result);
-		};
-
-		var load = function load() {
-			browse.click();
-		};
-
-		browse.setAttribute('type', 'file');
-		browse.style.display = 'none';
-		browse.onchange = loadImage;
-
-		return {
-			load: load
-		};
-
-	})();
-
-	var ImageControl = (function ImageControl() {
-
-		var scale = 0.5;
-		var imgSource = new Image();
-		var imgState = null;
-		var selected = null;
-
-
-		var topics = ['slice', 'width', 'outset'];
-		var properties = {};
-		properties['border1'] = {
-			fill			: false,
-
-			slice_values	: [27, 27, 27, 27],
-			width_values	: [20, 20, 20, 20],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [1, 1],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border2'] = {
-			fill			: false,
-
-			slice_values	: [33, 33, 33, 33],
-			width_values	: [1.5, 1.5, 1.5, 1.5],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [1, 1, 1, 1],
-			width_units		: [2, 2, 2, 2],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border3'] = {
-			fill			: true,
-
-			slice_values	: [15, 15, 15, 15],
-			width_values	: [10, 10, 10, 10],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border4'] = {
-			fill			: false,
-
-			slice_values	: [13, 13, 13, 13],
-			width_values	: [13, 13, 13, 13],
-			outset_values	: [13, 13, 13, 13],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border5'] = {
-			fill			: false,
-
-			slice_values	: [0, 12, 0, 12],
-			width_values	: [0, 12, 0, 12],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400,
-		};
-
-		properties['border6'] = {
-			fill			: false,
-
-			slice_values	: [42, 42, 42, 42],
-			width_values	: [42, 42, 42, 42],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [350, 350],
-			preview_area	: 500,
-		};
-
-
-		var loadLocalImage = function loadLocalImage(source) {
-			var location = "images/" + source;
-			imgSource.src = location;
-		};
-
-		var loadRemoteImage = function loadRemoteImage(source) {
-			imgSource.src = source;
-			if (selected)
-				selected.removeAttribute('selected');
-			Tool.setOutputCSS('source', 'url("' + source + '")');
-		};
-
-		var pickImage = function pickImage(e) {
-			if (e.target.className === 'image') {
-				selected = e.target;
-				selected.setAttribute('selected', 'true');
-				loadRemoteImage(e.target.src);
-				imgState = e.target.getAttribute('data-stateID');
-			}
-		};
-
-		var loadImageState = function loadImageState(stateID) {
-			if (properties[stateID] === undefined)
-				return;
-
-			var prop = properties[stateID];
-			var topic;
-			var unit_array;
-			var value_array;
-
-			for (var i in topics) {
-				for (var j=0; j<4; j++) {
-					topic = topics[i] + '-' + positions[j];
-					unit_array = topics[i] + '_units';
-					value_array = topics[i] + '_values';
-					InputSliderManager.setValue(topic, prop[value_array][j]);
-					DropDownManager.setValue(topic, prop[unit_array][j]);
-				}
-			}
-
-			ButtonManager.setValue('slice-fill', prop['fill']);
-			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
-			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
-			InputSliderManager.setValue('preview-width', prop['size'][0]);
-			InputSliderManager.setValue('preview-height', prop['size'][1]);
-			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
-		};
-
-		var update = function update() {
-			scale =  Math.min(300, (30000 / this.width) | 0);
-			setScale(scale);
-			InputSliderManager.setValue('scale', scale, false);
-
-			subject.style.backgroundImage = 'url("' + this.src + '")';
-			preview.style.borderImageSource = 'url("' + this.src + '")';
-
-			guidelines['slice-top'].setMax(this.height);
-			guidelines['slice-right'].setMax(this.width);
-			guidelines['slice-bottom'].setMax(this.height);
-			guidelines['slice-left'].setMax(this.width);
-
-			if (imgState)
-				loadImageState(imgState);
-		};
-
-		var setScale = function setScale(value) {
-			scale = value;
-			var w = imgSource.width * scale / 100 | 0;
-			var h = imgSource.height * scale / 100 | 0;
-			subject.style.width = w + 'px';
-			subject.style.height = h + 'px';
-
-			for (var i = 0; i < positions.length; i++)
-				guidelines['slice-' + positions[i]].updateGuidelinePos();
-		};
-
-		var getScale = function getScale() {
-			return scale/100;
-		};
-
-		var toggleGallery = function toggleGallery() {
-			var gallery = getElemById('image-gallery');
-			var button  = getElemById('toggle-gallery');
-			var state = 1;
-			button.addEventListener('click', function() {
-				state = 1 ^ state;
-				if (state === 0) {
-					gallery.setAttribute('data-collapsed', 'true');
-					button.setAttribute('data-action', 'show');
-				}
-				else {
-					gallery.removeAttribute('data-collapsed');
-					button.setAttribute('data-action', 'hide');
-				}
-			});
-		};
-
-		var init = function init() {
-			var gallery = getElemById('image-gallery');
-			var browse = getElemById('load-image');
-			var remote = getElemById('remote-url');
-			var load_remote = getElemById('load-remote');
-
-			remote.addEventListener('change', function(){
-				loadRemoteImage(this.value);
-			});
-
-			load_remote.addEventListener('click', function(){
-				loadRemoteImage(remote.value);
-			});
-
-			browse.addEventListener('click', ImageReader.load);
-			gallery.addEventListener('click', pickImage);
-			imgSource.addEventListener('load', update);
-
-			InputSliderManager.subscribe('scale', setScale);
-			InputSliderManager.setValue('scale', scale);
-			imgState = 'border1';
-			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
-			toggleGallery();
-		};
-
-		return {
-			init: init,
-			getScale : getScale,
-			loadRemoteImage: loadRemoteImage
-		};
-
-	})();
-
-	var GuideLine = function GuideLine(node) {
-		var topic = node.getAttribute('data-topic');
-		var axis = node.getAttribute('data-axis');
-
-		this.node = node;
-		this.topic = topic;
-		this.axis = axis;
-		this.info = topic.split('-')[1];
-
-		this.position = 0;
-		this.value = 0;
-		this.unit = 0;
-		this.max = 0;
-		this.pos = positions.indexOf(this.info);
-
-		guidelines[topic] = this;
-
-		var relative_container = document.createElement('div');
-		var tooltip = document.createElement('div');
-		var tooltip2 = document.createElement('div');
-
-		tooltip.className = 'tooltip';
-		tooltip.setAttribute('data-info', this.info);
-
-		tooltip2.className = 'tooltip2';
-		tooltip2.textContent = this.info;
-		tooltip2.setAttribute('data-info', this.info);
-
-		this.tooltip = tooltip;
-
-		relative_container.appendChild(tooltip);
-		relative_container.appendChild(tooltip2);
-		node.appendChild(relative_container);
-
-		var startX = 0;
-		var startY = 0;
-		var start = 0;
-
-		var startDrag = function startDrag(e) {
-			startX = e.clientX;
-			startY = e.clientY;
-			start = guidelines[topic].position;
-			document.body.setAttribute('data-move', axis);
-			relative_container.setAttribute('data-active', '');
-			node.setAttribute('data-active', '');
-
-			document.addEventListener('mousemove', updateGuideline);
-			document.addEventListener('mouseup', endDrag);
-		};
-
-		var endDrag = function endDrag() {
-			document.body.removeAttribute('data-move');
-			relative_container.removeAttribute('data-active');
-			node.removeAttribute('data-active');
-
-			document.removeEventListener('mousemove', updateGuideline);
-		};
-
-		var updateGuideline = function updateGuideline(e) {
-			var value;
-			if (topic === 'slice-top')
-				value = e.clientY - startY + start;
-
-			if (topic === 'slice-right')
-				value = startX - e.clientX + start;
-
-			if (topic === 'slice-bottom')
-				value = startY - e.clientY + start;
-
-			if (topic === 'slice-left')
-				value = e.clientX - startX + start;
-
-			if (this.unit === 0)
-				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
-			else {
-				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
-			}
-
-		}.bind(this);
-
-		node.addEventListener("mousedown", startDrag);
-
-		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
-		InputSliderManager.setValue(topic, this.position);
-	};
-
-
-	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
-		if (this.unit === 0)
-			this.position = this.value * ImageControl.getScale() | 0;
-		else
-			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
-
-		this.node.style[this.info] = this.position + 'px';
-	};
-
-	GuideLine.prototype.setPosition = function setPosition(value) {
-		this.value = value;
-		this.tooltip.textContent = value;
-		this.updateGuidelinePos();
-		Tool.setBorderSlice(this.pos, value);
-	};
-
-	GuideLine.prototype.setMax = function setMax(max) {
-		this.max = max;
-		this.updateLimit();
-	};
-
-	GuideLine.prototype.updateLimit = function updateLimit() {
-		if (this.unit === 1)
-			InputSliderManager.setMax(this.topic, 100);
-		else
-			InputSliderManager.setMax(this.topic, this.max);
-	};
-
-	GuideLine.prototype.setUnit = function setUnit(type) {
-		if (type === '%')	this.unit = 1;
-		if (type === '')	this.unit = 0;
-		this.updateLimit();
-	};
-
-	/*
-	 * Unit panel
-	 */
-	var UnitPanel = (function UnitPanel () {
-
-		var panel;
-		var title;
-		var precision;
-		var step;
-		var unit_topic = null; // settings are made for this topic
-		var step_option = [1, 0.1, 0.01];
-
-		var updatePrecision = function updatePrecision(value) {
-			InputSliderManager.setPrecision('unit-step', value);
-			InputSliderManager.setStep('unit-step', step_option[value]);
-			InputSliderManager.setMin('unit-step', step_option[value]);
-
-			if (unit_topic)
-				InputSliderManager.setPrecision(unit_topic, value);
-		};
-
-		var updateUnitSettings = function updateUnitSettings(value) {
-			if (unit_topic)
-				InputSliderManager.setStep(unit_topic, value);
-		};
-
-		var show = function show(e) {
-			var topic = e.target.getAttribute('data-topic');
-			var precision = InputSliderManager.getPrecision(topic);
-			var step = InputSliderManager.getStep(topic);
-
-			unit_topic = topic;
-			title.textContent = topic;
-
-			panel.setAttribute('data-active', 'true');
-			panel.style.top = e.target.offsetTop - 40 + 'px';
-			panel.style.left = e.target.offsetLeft + 30 + 'px';
-
-			InputSliderManager.setValue('unit-precision', precision);
-			InputSliderManager.setValue('unit-step', step);
-		};
-
-		var init = function init() {
-			panel = document.createElement('div');
-			title = document.createElement('div');
-			var close = document.createElement('div');
-
-			step = InputSliderManager.createSlider('unit-step', 'step');
-			precision = InputSliderManager.createSlider('unit-precision', 'precision');
-
-			InputSliderManager.setStep('unit-precision', 1);
-			InputSliderManager.setMax('unit-precision', 2);
-			InputSliderManager.setValue('unit-precision', 2);
-			InputSliderManager.setSensivity('unit-precision', 20);
-
-			InputSliderManager.setValue('unit-step', 1);
-			InputSliderManager.setStep('unit-step', 0.01);
-			InputSliderManager.setPrecision('unit-step', 2);
-
-			InputSliderManager.subscribe('unit-precision', updatePrecision);
-			InputSliderManager.subscribe('unit-step', updateUnitSettings);
-
-			close.addEventListener('click', function () {
-				panel.setAttribute('data-active', 'false');
-			});
-
-			title.textContent = 'Properties';
-			title.className = 'title';
-			close.className = 'close';
-			panel.id = 'unit-settings';
-			panel.setAttribute('data-active', 'false');
-			panel.appendChild(title);
-			panel.appendChild(precision);
-			panel.appendChild(step);
-			panel.appendChild(close);
-			document.body.appendChild(panel);
-		};
-
-		return {
-			init : init,
-			show : show
-		};
-
-	})();
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview_area;
-		var dropdown_unit_options = [
-			{ '' : '--', '%' : '%'},
-			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
-			{ 'px' : 'px', 'em' : 'em'},
-		];
-
-		var border_slice = [];
-		var border_width = [];
-		var border_outset = [];
-
-		var border_slice_values = [];
-		var border_width_values = [];
-		var border_outset_values = [];
-
-		var border_slice_units = ['', '', '', ''];
-		var border_width_units = ['px', 'px', 'px', 'px'];
-		var border_outset_units = ['px', 'px', 'px', 'px'];
-
-		var border_fill = false;
-		var border_repeat = ['round', 'round'];
-		var CSS_code = {
-			'source' : null,
-			'slice' : null,
-			'width' : null,
-			'outset' : null,
-			'repeat' : null
-		};
-
-		var setBorderSlice = function setBorderSlice(positionID, value) {
-			border_slice[positionID] = value + border_slice_units[positionID];
-			updateBorderSlice();
-		};
-
-		var updateBorderSlice = function updateBorderSlice() {
-			var value = border_slice.join(' ');
-			if (border_fill === true)
-				value += ' fill';
-
-			preview.style.borderImageSlice = value;
-			setOutputCSS('slice', value);
-		};
-
-		var setBorderFill = function setBorderFill(value) {
-			border_fill = value;
-			var bimgslice = border_slice.join(' ');;
-			if (value === true)
-				bimgslice += ' fill';
-
-			preview.style.borderImageSlice = bimgslice;
-		};
-
-		var updateBorderWidth = function updateBorderWidth() {
-			var value = border_width.join(' ');
-			preview.style.borderImageWidth = value;
-			setOutputCSS('width', value);
-		};
-
-		var updateBorderOutset = function updateBorderOutset() {
-			var value = border_outset.join(' ');
-			preview.style.borderImageOutset = border_outset.join(' ');
-			setOutputCSS('outset', value);
-		};
-
-		var setBorderRepeat = function setBorderRepeat(obj) {
-			border_repeat[obj.value] = obj.name;
-			var value = border_repeat.join(' ');
-			preview.style.borderImageRepeat = value;
-			setOutputCSS('repeat', value);
-		};
-
-		var setOutputCSS = function setOutputCSS(topic, value) {
-			CSS_code[topic].textContent = value + ';';
-		};
-
-		var setPreviewFontSize = function setPreviewFontSize(value) {
-			preview.style.fontSize = value + 'px';
-		};
-
-		var setPreviewWidth = function setPreviewWidth(value) {
-			preview.style.width = value + 'px';
-		};
-
-		var setPreviewHeight = function setPreviewHeight(value) {
-			preview.style.height = value + 'px';
-		};
-
-		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
-			preview_area.style.height = value + 'px';
-		};
-
-		var updateDragOption = function updateDragOption(value) {
-			if (value === true)
-				subject.setAttribute('data-draggable', 'true');
-			else
-				subject.removeAttribute('data-draggable');
-		};
-
-		var createProperty = function createProperty(topic, labelID, optionsID) {
-
-			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
-			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
-
-			InputSliderManager.setSensivity(topic, 3);
-			InputSliderManager.setPrecision(topic, 1);
-
-			var property = document.createElement('div');
-			var config = document.createElement('div');
-
-			property.className = 'property';
-			config.className = 'config';
-			config.setAttribute('data-topic', topic);
-			config.addEventListener('click', UnitPanel.show);
-
-			property.appendChild(slider);
-			property.appendChild(dropdown);
-			property.appendChild(config);
-
-			return property;
-		};
-
-		var initBorderSliceControls = function initBorderSliceControls() {
-			var container = getElemById('border-slice-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_slice_values[id] = value;
-					border_slice[id] = value + border_slice_units[id];
-					updateBorderSlice();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					guidelines[topic].setUnit(obj.value);
-					border_slice_units[id] = obj.value;
-					border_slice[id] = border_slice_values[id] + obj.value;
-					updateBorderSlice();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'slice-' + positions[i];
-				var property = createProperty(topic, i, 0);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-
-			container.appendChild(container.children[1]);
-
-		};
-
-		var initBorderWidthControls = function initBorderWidthControls() {
-			var container = getElemById('border-width-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_width_values[id] = value;
-					border_width[id] = value + border_width_units[id];
-					updateBorderWidth();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					if (obj.value === '%')
-						InputSliderManager.setMax(topic, 100);
-					else
-						InputSliderManager.setMax(topic, 1000);
-
-					border_width_units[id] = obj.value;
-					border_width[id] = border_width_values[id] + obj.value;
-					updateBorderWidth();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'width-' + positions[i];
-				var property = createProperty(topic, i, 1);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var initBorderOutsetControls = function initBorderOutsetControls() {
-
-			var container = getElemById('border-outset-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_outset_values[id] = value;
-					border_outset[id] = value + border_outset_units[id];
-					updateBorderOutset();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					border_outset_units[id] = obj.value;
-					border_outset[id] = border_outset_values[id] + obj.value;
-					updateBorderOutset();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'outset-' + positions[i];
-				var property = createProperty(topic, i, 2);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var init = function init() {
-
-			var gallery =
-			subject = getElemById('subject');
-			preview = getElemById("preview");
-			preview_area = getElemById("preview_section");
-
-
-			CSS_code['source'] = getElemById("out-border-source");
-			CSS_code['slice'] = getElemById("out-border-slice");
-			CSS_code['width'] = getElemById("out-border-width");
-			CSS_code['outset'] = getElemById("out-border-outset");
-			CSS_code['repeat'] = getElemById("out-border-repeat");
-
-			initBorderSliceControls();
-			initBorderWidthControls();
-			initBorderOutsetControls();
-
-			var elem = document.querySelectorAll('.guideline');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				new GuideLine(elem[i]);
-
-			PreviewControl.init();
-
-			ButtonManager.subscribe('slice-fill',setBorderFill);
-			ButtonManager.subscribe('drag-subject', updateDragOption);
-			ButtonManager.setValue('drag-subject', false);
-
-			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
-			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
-
-			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
-			InputSliderManager.subscribe('preview-width', setPreviewWidth);
-			InputSliderManager.subscribe('preview-height', setPreviewHeight);
-			InputSliderManager.subscribe('font-size', setPreviewFontSize);
-			InputSliderManager.setValue('preview-width', 300);
-			InputSliderManager.setValue('preview-height', 200);
-		};
-
-		return {
-			init: init,
-			setOutputCSS: setOutputCSS,
-			setBorderSlice: setBorderSlice
-		};
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		InputSliderManager.init();
-		DropDownManager.init();
-		ButtonManager.init();
-		UnitPanel.init();
-		Tool.init();
-		ImageControl.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-
-
-

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

- -

 

diff --git a/files/es/web/css/css_background_and_borders/border-image_generator/index.html b/files/es/web/css/css_background_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..3f189b87ea --- /dev/null +++ b/files/es/web/css/css_background_and_borders/border-image_generator/index.html @@ -0,0 +1,2615 @@ +--- +title: Generador Border-image +slug: Web/CSS/CSS_Background_and_Borders/Border-image_generador +tags: + - CSS + - Herramientas +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

Esta herramienta permite generar valores para CSS3 {{cssxref("border-image")}}

+
+

Border Image Generator

+

HTML Content

+ 
    

+
+        
+
+        

+            
+            
 Upload image 

+            
+            
 

+        

+
+        

+            
 Control Box 

+            

+            

+                
scale

+                

+                

+            

+            

+            

+                
draggable

+                

+            

+            

+                
section height

+                

+                

+            

+        

+
+        

+            

+                

+                

+                

+                

+            

+            
 

+        

+
+
+        

+
+
+            

+                
 border-image-slice 

+                

+                    
fill

+                    

+                

+            

+
+
+            

+                
 border-image-width 

+            

+
+
+            

+                
 border-image-outset 

+            

+
+
+            

+                
 aditional-properties 

+                

+                    
 repeat-x 

+                    

+                        
repeat

+                        
stretch

+                        
round

+                    

+                

+                

+                    
 repeat-y 

+                    

+                        
repeat

+                        
stretch

+                        
round

+                    

+                

+                

+                    

+                    

+                

+
+                

+                    

+                

+                

+                    

+                    

+                

+            

+
+
+            

+                
 CSS Code 

+                

+                     border-image-slice: 
+                     
+                

+                

+                     border-image-width: 
+                     
+                

+                

+                     border-image-outset: 
+                     
+                

+                

+                     border-image-repeat: 
+                     
+                

+                

+                     border-image-source: 
+                      
+                

+            

+
+        

+
+

CSS Content

+ 
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list > div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list > div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover > * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] > * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider > input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+
+

JavaScript Content

+ 
'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time < 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index >= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j<4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i < positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

+ +

 

diff --git a/files/es/web/css/css_background_and_borders/index.html b/files/es/web/css/css_background_and_borders/index.html deleted file mode 100644 index 59c2117194..0000000000 --- a/files/es/web/css/css_background_and_borders/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: CSS Background and Borders -slug: Web/CSS/CSS_Background_and_Borders -tags: - - CSS - - CSS Backgrounds and Borders - - CSS Reference - - NeedsTranslation - - Overview - - TopicStub -translation_of: Web/CSS/CSS_Backgrounds_and_Borders -translation_of_original: Web/CSS/CSS_Background_and_Borders ---- -

{{CSSRef}}

- -

CSS Background and Borders is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.

- -

Reference

- -

CSS Properties

- -
-
    -
  • {{cssxref("background")}}
    • -
  • {{cssxref("background-attachment")}}
    • -
  • {{cssxref("background-clip")}}
    • -
  • {{cssxref("background-color")}}
    • -
  • {{cssxref("background-image")}}
    • -
  • {{cssxref("background-origin")}}
    • -
  • {{cssxref("background-position")}}
    • -
  • {{cssxref("background-repeat")}}
    • -
  • {{cssxref("background-size")}}
    • -
  • {{cssxref("box-shadow")}}
    • -
  • {{cssxref("border")}}
    • -
  • {{cssxref("border-bottom")}}
    • -
  • {{cssxref("border-bottom-color")}}
    • -
  • {{cssxref("border-bottom-left-radius")}}
    • -
  • {{cssxref("border-bottom-right-radius")}}
    • -
  • {{cssxref("border-bottom-style")}}
    • -
  • {{cssxref("border-bottom-width")}}
    • -
  • {{cssxref("border-collapse")}}
    • -
  • {{cssxref("border-color")}}
    • -
  • {{cssxref("border-image")}}
    • -
  • {{cssxref("border-image-outset")}}
    • -
  • {{cssxref("border-image-repeat")}}
    • -
  • {{cssxref("border-image-slice")}}
    • -
  • {{cssxref("border-image-source")}}
    • -
  • {{cssxref("border-image-width")}}
    • -
  • {{cssxref("border-left")}}
    • -
  • {{cssxref("border-left-color")}}
    • -
  • {{cssxref("border-left-style")}}
    • -
  • {{cssxref("border-left-width")}}
    • -
  • {{cssxref("border-radius")}}
    • -
  • {{cssxref("border-right")}}
    • -
  • {{cssxref("border-right-color")}}
    • -
  • {{cssxref("border-right-style")}}
    • -
  • {{cssxref("border-right-width")}}
    • -
  • {{cssxref("border-style")}}
    • -
  • {{cssxref("border-top")}}
    • -
  • {{cssxref("border-top-color")}}
    • -
  • {{cssxref("border-top-left-radius")}}
    • -
  • {{cssxref("border-top-right-radius")}}
    • -
  • {{cssxref("border-top-style")}}
    • -
  • {{cssxref("border-top-width")}}
    • -
  • {{cssxref("border-width")}}
    • -
-
- -

Guides

- -
-
Using CSS multiple backgrounds
-
Explains how to set backgrounds on elements and how they will interact with it.
-
Scaling background images
-
Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
- -

Browser compatibility

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
-
diff --git a/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html deleted file mode 100644 index a80b81bf1a..0000000000 --- a/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Usando múltiples fondos con CSS -slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds -tags: - - CSS - - Ejemplo - - Fondos CSS - - Guía - - Intermedio -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---- -

{{CSSRef}}

- -

Con CSS3, puedes aplicar múltiple fondos a los elementos. Estos se presentan uno encima del otro, poniendo el primer fondo definido hasta arriba, y el último, hasta abajo. Sólo el último fondo puede incluir color de fondo.

- -

Especificar fondos múltiples es fácil:

- -
.myclass {
-  background: background1, background 2, ..., backgroundN;
-}
-
- -

Puedes hacerlo con la propiedad atajo {{ cssxref("background") }} y con las propiedades individuales, excepto {{ cssxref("background-color") }}. Es decir, las siguientes propiedades pueden ser especificadas como lista, una por cada fondo: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

- -

Ejemplo

- -

En este ejemplo, tres fondos son apilados: el logo de Firefox, un gradiente lineal, y una imagen de burbujas:

- -

HTML

- -
<div class="multi_bg_example"></div>
- -

CSS

- -
.multi_bg_example {
-  width: 100%;
-  height: 400px;
-  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
-  background-repeat: no-repeat, no-repeat, no-repeat;
-  background-position: bottom right, left, right;
-  background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
-}
- -

Resultado

- -

(Si la imagen no aparece en CodePen, intenta con el botón TIdy en la sección de CSS)

- -

{{EmbedLiveSample('Example','100%','400')}}

- -

Como puedes ver aquí, el logo de Firefox (primero enlistado) está hasta arriba, seguido por el gradiente, que está presentado encima del fondo de burbujas. Cada subpropiedad subsecuente ({{ cssxref("background-repeat") }} y {{ cssxref("background-position") }}) aplican a los fondos correspondientes. Así, el primer valor en la lista para {{ cssxref("background-repeat") }} aplica al primer fondo (el de hasta arriba), etc.

- -

Véase también

- - diff --git a/files/es/web/css/css_backgrounds_and_borders/index.html b/files/es/web/css/css_backgrounds_and_borders/index.html new file mode 100644 index 0000000000..59c2117194 --- /dev/null +++ b/files/es/web/css/css_backgrounds_and_borders/index.html @@ -0,0 +1,155 @@ +--- +title: CSS Background and Borders +slug: Web/CSS/CSS_Background_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +translation_of_original: Web/CSS/CSS_Background_and_Borders +--- +

{{CSSRef}}

+ +

CSS Background and Borders is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.

+ +

Reference

+ +

CSS Properties

+ +
+
    +
  • {{cssxref("background")}}
    • +
  • {{cssxref("background-attachment")}}
    • +
  • {{cssxref("background-clip")}}
    • +
  • {{cssxref("background-color")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("background-origin")}}
    • +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-repeat")}}
    • +
  • {{cssxref("background-size")}}
    • +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("border")}}
    • +
  • {{cssxref("border-bottom")}}
    • +
  • {{cssxref("border-bottom-color")}}
    • +
  • {{cssxref("border-bottom-left-radius")}}
    • +
  • {{cssxref("border-bottom-right-radius")}}
    • +
  • {{cssxref("border-bottom-style")}}
    • +
  • {{cssxref("border-bottom-width")}}
    • +
  • {{cssxref("border-collapse")}}
    • +
  • {{cssxref("border-color")}}
    • +
  • {{cssxref("border-image")}}
    • +
  • {{cssxref("border-image-outset")}}
    • +
  • {{cssxref("border-image-repeat")}}
    • +
  • {{cssxref("border-image-slice")}}
    • +
  • {{cssxref("border-image-source")}}
    • +
  • {{cssxref("border-image-width")}}
    • +
  • {{cssxref("border-left")}}
    • +
  • {{cssxref("border-left-color")}}
    • +
  • {{cssxref("border-left-style")}}
    • +
  • {{cssxref("border-left-width")}}
    • +
  • {{cssxref("border-radius")}}
    • +
  • {{cssxref("border-right")}}
    • +
  • {{cssxref("border-right-color")}}
    • +
  • {{cssxref("border-right-style")}}
    • +
  • {{cssxref("border-right-width")}}
    • +
  • {{cssxref("border-style")}}
    • +
  • {{cssxref("border-top")}}
    • +
  • {{cssxref("border-top-color")}}
    • +
  • {{cssxref("border-top-left-radius")}}
    • +
  • {{cssxref("border-top-right-radius")}}
    • +
  • {{cssxref("border-top-style")}}
    • +
  • {{cssxref("border-top-width")}}
    • +
  • {{cssxref("border-width")}}
    • +
+
+ +

Guides

+ +
+
Using CSS multiple backgrounds
+
Explains how to set backgrounds on elements and how they will interact with it.
+
Scaling background images
+
Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
+
diff --git a/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..a80b81bf1a --- /dev/null +++ b/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,57 @@ +--- +title: Usando múltiples fondos con CSS +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - Ejemplo + - Fondos CSS + - Guía + - Intermedio +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +--- +

{{CSSRef}}

+ +

Con CSS3, puedes aplicar múltiple fondos a los elementos. Estos se presentan uno encima del otro, poniendo el primer fondo definido hasta arriba, y el último, hasta abajo. Sólo el último fondo puede incluir color de fondo.

+ +

Especificar fondos múltiples es fácil:

+ +
.myclass {
+  background: background1, background 2, ..., backgroundN;
+}
+
+ +

Puedes hacerlo con la propiedad atajo {{ cssxref("background") }} y con las propiedades individuales, excepto {{ cssxref("background-color") }}. Es decir, las siguientes propiedades pueden ser especificadas como lista, una por cada fondo: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

+ +

Ejemplo

+ +

En este ejemplo, tres fondos son apilados: el logo de Firefox, un gradiente lineal, y una imagen de burbujas:

+ +

HTML

+ +
<div class="multi_bg_example"></div>
+ +

CSS

+ +
.multi_bg_example {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-position: bottom right, left, right;
+  background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+}
+ +

Resultado

+ +

(Si la imagen no aparece en CodePen, intenta con el botón TIdy en la sección de CSS)

+ +

{{EmbedLiveSample('Example','100%','400')}}

+ +

Como puedes ver aquí, el logo de Firefox (primero enlistado) está hasta arriba, seguido por el gradiente, que está presentado encima del fondo de burbujas. Cada subpropiedad subsecuente ({{ cssxref("background-repeat") }} y {{ cssxref("background-position") }}) aplican a los fondos correspondientes. Así, el primer valor en la lista para {{ cssxref("background-repeat") }} aplica al primer fondo (el de hasta arriba), etc.

+ +

Véase también

+ + diff --git a/files/es/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/es/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html new file mode 100644 index 0000000000..b59b5f677d --- /dev/null +++ b/files/es/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -0,0 +1,39 @@ +--- +title: Uso de URL como valor de la propiedad cursor +slug: Web/CSS/cursor/Uso_de_URL_como_valor_de_la_propiedad_cursor +tags: + - CSS + - Todas_las_Categorías +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) soporta el uso de URLs como valores para la propiedad cursor (CSS2). Esto nos permite definir la imagen que queremos como puntero del ratón, además podemos usar cualquiera de los formatos gráficos soportados por Gecko.

+

Sintaxis

+

La sintaxis de esta propiedad es:

+
cursor: [<url>,]* cursor-genérico;
+
+

Esto es, se pueden indicar cero o más direcciones URL (separadas por comas), que deben ser seguidas de uno de los cursores genéricos definidos en la especificación, por ej. help o pointer.

+

Los siguientes valores están permitidos:

+
cursor: url(foo.cur), url(http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg), help;
+
+

Primero se intentará cargar foo.cur. Si este archivo no existe o no es válido por alguna otra razón, se probará con firefox.jpg, y si este tampoco puede ser cargado, se usará help.

+

El soporte a la sintaxis de CSS3 para los valores de cursor fue añadido en Gecko 1.8beta3; por lo tanto en Firefox 1.5 funciona. Esto permite especificar las coordenadas del punto en el que la imagen del cursor es fijada al área activa. Si no se especifican, las coordenadas del punto de contacto son tomadas del propio archivo (para archivos CUR y XBM) o se fijan en la esquina superior izquierda de la imagen.

+

Un ejemplo de la sintaxis CSS3:

+
cursor: url(http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg), auto;
+
+cursor: url(http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg) 90 90, auto;
+
+


+ El primer número es la coordenada X, y el segundo la coordenada Y. El ejemplo anterior pone el punto de contacto del área activa a (90,90) píxeles de la esquina superior izquierda (0,0).

+

Limitaciones

+

Pueden usarse todos los formatos gráficos soportados por Gecko. Por lo tanto puede usar imágenes PNG, JPG, CUR, GIF, etc. Sin embargo, ANI no está soportado. Además, si especifica un GIF animado, el cursor usará el GIF, pero sin animación. Esta limitación podría ser superada en futuras versiones.

+

Gecko no limita el tamaño de los cursores. Sin embargo, quien busque la máxima compatibilidad multiplataforma debería limitarlos a un tamaño de 32x32, los cursores más grandes no funcionarán en Windows 9x (95, 98, MÍ).

+

Los cursores translúcidos no estan soportados en las versiones de Windows anteriores a XP. Esto es una limitación del sistema operativo. La transparencia funciona en todas las plataformas.

+

Solo las versiones de Mozilla para Windows, OS/2 y GNU/Linux (usando GTK+ 2.4 o superior) soportan valores URL para los cursores. El soporte en otras plataformas podría ser añadido en futuras versiones: (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})

+

Compatibilidad con otros navegadores

+

Microsoft Internet Explorer también soporta URI como valor para la propiedad cursor. Sin embargo, solo soporta los formatos gráficos CUR y ANI. Además, es menos estricto con la sintaxis de la propiedad cursor. Esto significa que declaraciones como:

+
cursor: url(foo.cur);
+
+

O:

+
cursor: url(foo.cur), pointer, url(bar.cur), auto;
+
+

funcionarán en MSIE, pero no lo harán en los navegadores basados en Gecko. Para ser compatible con Gecko y actuar conforme a la especificación de CSS2.1, ponga la lista de URIs primero, y ponga siempre un cursor genérico al final. : ''To-do: document what MSIE does with CSS 3 hotspot locations''

diff --git a/files/es/web/css/css_box_model/index.html b/files/es/web/css/css_box_model/index.html new file mode 100644 index 0000000000..320800f82e --- /dev/null +++ b/files/es/web/css/css_box_model/index.html @@ -0,0 +1,165 @@ +--- +title: Modelo de Caja de CSS +slug: Web/CSS/CSS_Modelo_Caja +tags: + - CSS + - Modelo de Caja CSS + - Referencia CSS + - Visión general +translation_of: Web/CSS/CSS_Box_Model +--- +
{{CSSRef}}
+ +

El modelo de caja CSS  es un módulo  CSS que define cajas rectangulares, incluyendo sus rellenos y márgenes, que son generadas para los elementos y que se disponen de acuerdo al modelo de formato visual.

+ +

Referencia

+ +

Propiedades

+ +

Propiedades que controlan el flujo del contenido en una caja.

+ +
+
    +
  • {{cssxref("box-decoration-break")}}
    • +
  • {{cssxref("box-sizing")}}
    • +
  • {{cssxref("overflow")}}
    • +
  • {{cssxref("overflow-x")}}
    • +
  • {{cssxref("overflow-y")}}
    • +
+
+ +

Propiedades que controlan el tamaño de una caja.

+ +
+
    +
  • {{cssxref("height")}}
    • +
  • {{cssxref("width")}}
    • +
  • {{cssxref("max-height")}}
    • +
  • {{cssxref("max-width")}}
    • +
  • {{cssxref("min-height")}}
    • +
  • {{cssxref("min-width")}}
    • +
+
+ +

Propiedades que controlan los márgenes de una caja.

+ +
+
    +
  • {{cssxref("margin")}}
    • +
  • {{cssxref("margin-bottom")}}
    • +
  • {{cssxref("margin-left")}}
    • +
  • {{cssxref("margin-right")}}
    • +
  • {{cssxref("margin-top")}}
    • +
+
+ +

Propiedades que controlan los rellenos de una caja

+ +
+
    +
  • {{cssxref("padding")}}
    • +
  • {{cssxref("padding-bottom")}}
    • +
  • {{cssxref("padding-left")}}
    • +
  • {{cssxref("padding-right")}}
    • +
  • {{cssxref("padding-top")}}
    • +
+
+ +

Otras propiedades

+ +
+
    +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("visibility")}}
    • +
+
+ +

Guías y Herramientas

+ +
+
Introduction to the CSS box model
+
Explica uno de los conceptos fundamentales de CSS, el modelo de caja: describe el significado del margen, del relleno, así como de las diferentes zonas de una caja.
+
Mastering margin collapsing
+
En determinados casos dos márgenes adyacentes se convierten en uno. Este artículo explica cuando sucede esto y cómo controlarlo.
+
Box-shadow generator
+
Una herramienta interactiva que permite crear sombras y proporciona la síntaxis necesaria para generar dichas sombras usando la propiedad {{cssxref("box-shadow")}}.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Definición Inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..45571faf77 --- /dev/null +++ b/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,66 @@ +--- +title: Introducción al Modelo de Caja de CSS +slug: Web/CSS/CSS_Modelo_Caja/Introducción_al_modelo_de_caja_de_CSS +tags: + - CSS + - Guía + - Modelo de Caja + - Referencia +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +
{{CSSRef}}
+ +

Al diseñar un documento, el motor de representación del navegador representa cada elemento como un cuadro rectangular según el estándar modelo de caja de CSS. CSS determina el tamaño, la posición y las propiedades (color, fondo, tamaño del borde, etc.) de estos cuadros.

+ +

Cada caja se compone de cuatro partes (o áreas), definidas por sus respectivos límites: el límite del contenido, el límite del relleno (padding), el límite del borde y el límite del margen.

+ +

CSS Box model

+ +

El área de contenido, delimitada por el límite del contenido, contiene el contenido "real" del elemento, como lo puede ser texto, imagen o un reproductor de video. Sus dimensiones son el ancho del contenido (o el ancho de la caja de contenido) y la altura del contenido (o la altura de la caja de contenido). A menudo tiene un color de fondo o una imagen de fondo.

+ +

Si la propiedad {{cssxref("box-sizing")}} está configurada en content-box (default), el tamaño del área de contenido se puede definir explícitamente con las propiedades de {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height")}}, {{cssxref("min-height")}} y {{cssxref("max-height")}}.

+ +

El área de relleno (padding), delimitada por el límite del relleno, extiende el área de contenido para incluir el relleno del elemento. Sus dimensiones son el ancho de la caja de relleno y la altura de la caja de relleno. Cuando el área de contenido tiene un fondo, se extiende dentro del relleno.

+ +

El espesor del relleno está determinado por las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, y la propiedad abreviada {{cssxref("padding")}}.

+ +

El área del borde, delimitada por el límite del borde, extiende el área de relleno para incluir los bordes del elemento. Sus dimensiones son el ancho de la caja del borde y la altura de la caja del borde.

+ +

El espesor de los bordes está determinado por las propiedades {{cssxref("border-width")}} y la propiedad abreviada {{cssxref("border")}}. Si la propiedad {{cssxref("box-sizing")}} se establece en border-box, el tamaño del área del borde se puede definir explícitamente con las propiedades {{cssxref("width")}}, {{cssxref("min- width")}}, {{cssxref("max-width")}}, {{cssxref("height")}}, {{cssxref("min-height")}}, y {{cssxref("max-height")}}.

+ +

El área del margen, delimitada por el límite del margen, extiende el área del borde para incluir un área vacía utilizada para separar el elemento de sus vecinos. Sus dimensiones son el ancho de la caja del margen y la altura de la caja del margen.

+ +

El tamaño del área del margen está determinado por las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref ("margin-bottom")}}, { {cssxref("margin-left")}}, y la propiedad abreviada {{cssxref ("margin")}}. Cuando se produce el colapso del margen, el área del margen no está claramente definida ya que los márgenes se comparten entre las cajas.

+ +

Finalmente, ten en cuenta que para elementos en línea no reemplazados, la cantidad de espacio ocupado (la contribución a la altura de la línea) está determinada por la propiedad {{cssxref ('line-height')}}, aunque los bordes y el relleno todavía se muestran alrededor del contenido.

+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Aunque está redactado con más precisión, no hay cambio práctico.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Definición inicial
+ +

Vea también

+ +
    +
  • {{css_key_concepts}}
    • +
  • Propiedades CSS relacionadas: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}
    • +
diff --git a/files/es/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/es/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..dafdf71855 --- /dev/null +++ b/files/es/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,96 @@ +--- +title: Entendiendo el colapso de margen +slug: Web/CSS/CSS_Modelo_Caja/Mastering_margin_collapsing +tags: + - CSS + - CSS Box Model + - Guía + - Referencia +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +

Los márgenes Top y bottom de los bloques a veces están combinados (colapsados) en un solo margen cuyo tamaño es el mayor de los márgenes combinados, un comportamiento conocido como colapso de margen. Ten en cuenta que los márgenes de flotantes y elementos con posición absoluta nunca colapsan.

+ +

El colapso de margen ocurre en tres casos básicos:

+ +
+
Hermanos adjacentes
+
Los márgenes de los hermanos adjacentes son colapsados (excepto cuando el último hermano necesita ser limpiado después de usar los flotantes).
+
Padre y primer/último hijo
+
Si no hay un borde, padding, contenido en línea, block formatting context creado, o un limpiado para separar el {{cssxref("margin-top")}} de un bloque del {{cssxref("margin-top")}} de su primer bloque hijo; o no hay borde, padding, contenido en línea, {{cssxref("height")}}, {{cssxref("min-height")}}, o {{cssxref("max-height")}} para separar el {{cssxref("margin-bottom")}} de un bloque del {{cssxref("margin-bottom")}} de su último hijo, entonces esos márgenes colapsan. El margen colapsado termina fuera del padre.
+
Bloques vacíos
+
Si no hay borde, padding, contenido en línea, {{cssxref("height")}}, o {{cssxref("min-height")}} para separar el {{cssxref("margin-top")}} de un bloque de su {{cssxref("margin-bottom")}}, entonces sus márgenes superiores e inferiores colapsan.
+
+

Cosas a tener en cuenta:

+ + +
    +
  • Cuando estos casos están combinados ocurrirá un colapso de márgenes más complejo (de más de dos márgenes).
    • +
  • Estas reglas se aplican incluso a márgenes con valor cero, así que el margen del primer/último hijo siempre termina fuera de su padre (de acuerdo a las reglas de arriba) independientemente de que el margen del padre sea o no sea cero.
    • +
  • Cuando se trata de márgenes negativos, el tamaño del margen colapsado es la suma del margen positivo más grande y el margen negativo más pequeño (el más negativo).
    • +
  • Cuando todos los márgenes son negativos, el tamaño del margen colapsado es el margen más pequeño (el más negativo). Esto se aplica tanto a los elementos adyacentes como a los elementos anidados.
    • +
+ +

Ejemplos

+ +

HTML

+ +
<p>El margen inferior de este párrafo está colapsado ....</p>
+<p>... con el margen superior de este párrafo, lo que deja un margen de<code>1.2rem</code> entre ellos.</p>
+
+<div>Este elemento padre contiene dos párrafos!
+  <p>Este párrafo tiene un margen de <code>.4rem</code>  entre él y el texto anterior.</p>
+  <p>Mi margen inferior se colapsa con mi padre, produciendo un margen inferior de <code>2rem</code>.</p>
+</div>
+
+<p>Estoy <code>2rem</code> por debajo del elemento de arriba.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

Result

+ +

{{EmbedLiveSample('Ejemplos', 'auto', 350)}}

+ + + +

 

+ + +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Initial definition
+ +

También puedes ver

+ + +
    +
  • {{css_key_concepts}}
    • +
diff --git a/files/es/web/css/css_color/index.html b/files/es/web/css/css_color/index.html new file mode 100644 index 0000000000..ef36d7954b --- /dev/null +++ b/files/es/web/css/css_color/index.html @@ -0,0 +1,120 @@ +--- +title: CSS Colors +slug: Web/CSS/CSS_Colors +tags: + - CSS + - CSS Colors + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Color +translation_of_original: Web/CSS/CSS_Colors +--- +
{{CSSRef}}
+ +

Los colores CSS son un módulo de CSS que trabaja con colores, tipos de colores y transparencias.

+ +

Referencia

+ +

Propiedades

+ +
+
    +
  • {{cssxref("color")}}
    • +
  • {{cssxref("opacity")}}
    • +
+
+ +

Tipos de datos CSS

+ +

{{cssxref("<color>")}}

+ +

Guías

+ +

Ninguna.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
+ +

Ver también

+ +
    +
  • En CSS, las gradientes no son colores sino imágenes.
    • +
diff --git a/files/es/web/css/css_colors/color_picker_tool/index.html b/files/es/web/css/css_colors/color_picker_tool/index.html new file mode 100644 index 0000000000..7e7819542d --- /dev/null +++ b/files/es/web/css/css_colors/color_picker_tool/index.html @@ -0,0 +1,3220 @@ +--- +title: Herramienta para seleccionar color +slug: Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color +tags: + - CSS + - Herramientas +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +
+

ColorPicker tool

+ +

HTML Content

+ +
    <div id="container">
+        <div id="palette" class="block">
+            <div id="color-palette"></div>
+            <div id="color-info">
+                <div class="title"> CSS Color </div>
+            </div>
+        </div>
+
+        <div id="picker" class="block">
+            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+            <div id="picker-samples" sample-id="master"></div>
+            <div id="controls">
+                <div id="delete">
+                    <div id="trash-can"></div>
+                </div>
+                <div id="void-sample" class="icon"></div>
+            </div>
+        </div>
+
+        <div id="canvas" data-tutorial="drop">
+            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"></div>
+        </div>
+    </div>
+
+
+ +

CSS Content

+ +
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch > * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property > * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container > * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+	float: left;
+}
+
+#color-palette .controls > *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover > * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x > size) x = size;
+		if (y > size) y = size;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		// TODO 360 => 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' && mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action >= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action <= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue < 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i < size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i < nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i<16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ +

{{CSSRef}}

+ +

Esta herramienta facilita crear, ajustar, y experimentar con colores personalizados para uso web. Además permite facilmente convertir entre varios formatos de color soportados por CSS, incluyendo: HEXA, RGB y HSL.  También soporta el control de alpha en los formatos RGB (rgba) y HSL (hsla).

+ +

Cada color se presenta en los 3 formatos estándar de CSS mientras se ajusta; además,  basada en el color actual, se genera una paleta para HSL y HSV, así como para alpha. El recuadro "eyedropper" se puede cambiar entre los formatos HSL y HSC.

+ +

{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

+ +

 

diff --git a/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html b/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html deleted file mode 100644 index 7e7819542d..0000000000 --- a/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html +++ /dev/null @@ -1,3220 +0,0 @@ ---- -title: Herramienta para seleccionar color -slug: Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color -tags: - - CSS - - Herramientas -translation_of: Web/CSS/CSS_Colors/Color_picker_tool ---- -
-

ColorPicker tool

- -

HTML Content

- -
    <div id="container">
-        <div id="palette" class="block">
-            <div id="color-palette"></div>
-            <div id="color-info">
-                <div class="title"> CSS Color </div>
-            </div>
-        </div>
-
-        <div id="picker" class="block">
-            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
-            <div id="picker-samples" sample-id="master"></div>
-            <div id="controls">
-                <div id="delete">
-                    <div id="trash-can"></div>
-                </div>
-                <div id="void-sample" class="icon"></div>
-            </div>
-        </div>
-
-        <div id="canvas" data-tutorial="drop">
-            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
-                data-max="20" data-sensivity="10"></div>
-        </div>
-    </div>
-
-
- -

CSS Content

- -
/*
- * COLOR PICKER TOOL
- */
-
-.ui-color-picker {
-	width: 420px;
-	margin: 0;
-	border: 1px solid #DDD;
-	background-color: #FFF;
-	display: table;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-color-picker .picking-area {
-	width: 198px;
-	height: 198px;
-	margin: 5px;
-	border: 1px solid #DDD;
-	position: relative;
-	float: left;
-	display: table;
-}
-
-.ui-color-picker .picking-area:hover {
-	cursor: default;
-}
-
-/* HSV format - Hue-Saturation-Value(Brightness) */
-.ui-color-picker .picking-area {
-	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
-
-	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-
-	background-color: #F00;
-}
-
-/* HSL format - Hue-Saturation-Lightness */
-.ui-color-picker[data-mode='HSL'] .picking-area {
-	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background-color: #F00;
-}
-
-.ui-color-picker .picker {
-	width: 10px;
-	height: 10px;
-	border-radius: 50%;
-	border: 1px solid #FFF;
-	position: absolute;
-	top: 45%;
-	left: 45%;
-}
-
-.ui-color-picker .picker:before {
-	width: 8px;
-	height: 8px;
-	content: "";
-	position: absolute;
-	border: 1px solid #999;
-	border-radius: 50%;
-}
-
-.ui-color-picker .hue,
-.ui-color-picker .alpha {
-	width: 198px;
-	height: 28px;
-	margin: 5px;
-	border: 1px solid #FFF;
-	float: left;
-}
-
-.ui-color-picker .hue {
-	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
-	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-}
-
-.ui-color-picker .alpha {
-	border: 1px solid #CCC;
-	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-}
-
-.ui-color-picker .alpha-mask {
-	width: 100%;
-	height: 100%;
-	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
-}
-
-.ui-color-picker .slider-picker {
-	width: 2px;
-	height: 100%;
-	border: 1px solid #777;
-	background-color: #FFF;
-	position: relative;
-	top: -1px;
-}
-
-/* input HSV and RGB */
-
-.ui-color-picker .info {
-	width: 200px;
-	margin: 5px;
-	float: left;
-}
-
-.ui-color-picker .info * {
-	float: left;
-}
-
-.ui-color-picker .input {
-	width: 64px;
-	margin: 5px 2px;
-	float: left;
-}
-
-.ui-color-picker .input .name {
-	height: 20px;
-	width: 30px;
-	text-align: center;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-.ui-color-picker .input input {
-	width: 30px;
-	height: 18px;
-	margin: 0;
-	padding: 0;
-	border: 1px solid #DDD;
-	text-align: center;
-	float: right;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-.ui-color-picker .input[data-topic="lightness"] {
-	display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
-	display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
-	display: block;
-}
-
-.ui-color-picker .input[data-topic="alpha"] {
-	margin-top: 10px;
-	width: 93px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] > .name {
-	width: 60px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] > input {
-	float: right;
-}
-
-.ui-color-picker .input[data-topic="hexa"] {
-	width: auto;
-	float: right;
-	margin: 6px 8px 0 0;
-}
-
-.ui-color-picker .input[data-topic="hexa"] > .name {
-	display: none;
-}
-
-.ui-color-picker .input[data-topic="hexa"] > input {
-	width: 90px;
-	height: 24px;
-	padding: 2px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/* Preview color */
-.ui-color-picker .preview {
-	width: 95px;
-	height: 53px;
-	margin: 5px;
-	margin-top: 10px;
-	border: 1px solid #DDD;
-	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-	float: left;
-	position: relative;
-}
-
-.ui-color-picker .preview:before {
-	height: 100%;
-	width: 50%;
-	left: 50%;
-	top: 0;
-	content: "";
-	background: #FFF;
-	position: absolute;
-	z-index: 1;
-}
-
-.ui-color-picker .preview-color {
-	width: 100%;
-	height: 100%;
-	background-color: rgba(255, 0, 0, 0.5);
-	position: absolute;
-	z-index: 1;
-}
-
-.ui-color-picker .switch_mode {
-	width: 10px;
-	height: 20px;
-	position: relative;
-	border-radius: 5px 0 0 5px;
-	border: 1px solid #DDD;
-	background-color: #EEE;
-	left: -12px;
-	top: -1px;
-	z-index: 1;
-	transition: all 0.5s;
-}
-
-.ui-color-picker .switch_mode:hover {
-	background-color: #CCC;
-	cursor: pointer;
-}
-
-/*
- * UI Component
- */
-
-.ui-input-slider {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*
- * COLOR PICKER TOOL
- */
-
-body {
-	max-width: 1000px;
-	margin: 0 auto;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	box-shadow: 0 0 5px 0 #999;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-
-}
-
-/**
- * Resize Handle
- */
-.resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-[data-resize='both']:hover {
-	cursor: nw-resize !important;
-}
-
-[data-resize='width']:hover {
-	cursor: w-resize !important;
-}
-
-[data-resize='height']:hover {
-	cursor: n-resize !important;
-}
-
-[data-hidden='true'] {
-	display: none;
-}
-
-[data-collapsed='true'] {
-	height: 0 !important;
-}
-
-.block {
-	display: table;
-}
-
-
-/**
- * 	Container
- */
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	display: table;
-}
-
-/**
- * 	Picker Zone
- */
-
-#picker {
-	padding: 10px;
-	width: 980px;
-}
-
-.ui-color-picker {
-	padding: 3px 5px;
-	float: left;
-	border-color: #FFF;
-}
-
-.ui-color-picker .switch_mode {
-	display: none;
-}
-
-.ui-color-picker .preview-color:hover {
-	cursor: move;
-}
-
-/**
- * Picker Container
- */
-
-#picker-samples {
-	width: 375px;
-	height: 114px;
-	max-height: 218px;
-	margin: 0 10px 0 30px;
-	overflow: hidden;
-	position: relative;
-	float: left;
-
-	transition: all 0.2s;
-}
-
-#picker-samples .sample {
-	width: 40px;
-	height: 40px;
-	margin: 5px;
-	border: 1px solid #DDD;
-	position: absolute;
-	float: left;
-	transition: all 0.2s;
-}
-
-#picker-samples .sample:hover {
-	cursor: pointer;
-	border-color: #BBB;
-	transform: scale(1.15);
-	border-radius: 3px;
-}
-
-#picker-samples .sample[data-active='true'] {
-	border-color: #999;
-}
-
-#picker-samples .sample[data-active='true']:after {
-	content: "";
-	position: absolute;
-	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-	width: 100%;
-	height: 12px;
-	top: -12px;
-	z-index: 2;
-}
-
-#picker-samples #add-icon {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	box-shadow: inset 0px 0px 2px 0px #DDD;
-}
-
-#picker-samples #add-icon:hover {
-	cursor: pointer;
-	border-color: #DDD;
-	box-shadow: inset 0px 0px 5px 0px #CCC;
-}
-
-#picker-samples #add-icon:before,
-#picker-samples #add-icon:after {
-	content: "";
-	position: absolute;
-	background-color: #EEE;
-	box-shadow: 0 0 1px 0 #EEE;
-}
-
-#picker-samples #add-icon:before {
-	width: 70%;
-	height: 16%;
-	top: 42%;
-	left: 15%;
-}
-
-#picker-samples #add-icon:after {
-	width: 16%;
-	height: 70%;
-	top: 15%;
-	left: 42%;
-}
-
-#picker-samples #add-icon:hover:before,
-#picker-samples #add-icon:hover:after {
-	background-color: #DDD;
-	box-shadow: 0 0 1px 0 #DDD;
-}
-
-/**
- * 	Controls
- */
-
-#controls {
-	width: 110px;
-	padding: 10px;
-	float: right;
-}
-
-#controls #picker-switch {
-	text-align: center;
-	float: left;
-}
-
-#controls .icon {
-	width: 48px;
-	height: 48px;
-	margin: 10px 0;
-	background-repeat: no-repeat;
-	background-position: center;
-	border: 1px solid #DDD;
-	display: table;
-	float: left;
-}
-
-#controls .icon:hover {
-	cursor: pointer;
-}
-
-#controls .picker-icon {
-	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
-}
-
-#controls #void-sample {
-	margin-right: 10px;
-	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
-	background-position: center left;
-}
-
-#controls #void-sample[data-active='true'] {
-	border-color: #CCC;
-	background-position: center right;
-}
-
-#controls .switch {
-	width: 106px;
-	padding: 1px;
-	border: 1px solid #CCC;
-	font-size: 14px;
-	text-align: center;
-	line-height: 24px;
-	overflow: hidden;
-	float: left;
-}
-
-#controls .switch:hover {
-	cursor: pointer;
-}
-
-#controls .switch > * {
-	width: 50%;
-	padding: 2px 0;
-	background-color: #EEE;
-	float: left;
-}
-
-#controls .switch [data-active='true'] {
-	color: #FFF;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-color: #777;
-}
-
-/**
- * 	Trash Can
- */
-
-#delete {
-	width: 100%;
-	height: 94px;
-	background-color: #DDD;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-
-	text-align: center;
-	color: #777;
-
-	position: relative;
-	float: right;
-}
-
-#delete #trash-can {
-	width: 80%;
-	height: 80%;
-	border: 2px dashed #FFF;
-	border-radius: 5px;
-	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
-
-	position: absolute;
-	top: 10%;
-	left: 10%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	transition: all 0.2s;
-}
-
-#delete[drag-state='enter'] {
-	background-color: #999;
-}
-
-/**
- * 	Color Theme
- */
-
-#color-theme {
-	margin: 0 8px 0 0;
-	border: 1px solid #EEE;
-	display: inline-block;
-	float: right;
-}
-
-#color-theme .box {
-	width: 80px;
-	height: 92px;
-	float: left;
-}
-
-/**
- * Color info box
- */
-#color-info {
-	width: 360px;
-	float: left;
-}
-
-#color-info .title {
-	width: 100%;
-	padding: 15px;
-	font-size: 18px;
-	text-align: center;
-	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
-	background-repeat:no-repeat;
-	background-position: center left 30%;
-}
-
-#color-info .copy-container {
-	position: absolute;
-	top: -100%;
-}
-
-#color-info .property {
-	min-width: 280px;
-	height: 30px;
-	margin: 10px 0;
-	text-align: center;
-	line-height: 30px;
-}
-
-#color-info .property > * {
-	float: left;
-}
-
-#color-info .property .type {
-	width: 60px;
-	height: 100%;
-	padding: 0 16px 0 0;
-	text-align: right;
-}
-
-#color-info .property .value {
-	width: 200px;
-	height: 100%;
-	padding: 0 10px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 16px;
-	color: #777;
-	text-align: center;
-	background-color: #FFF;
-	border: none;
-}
-
-#color-info .property .value:hover {
-	color: #37994A;
-}
-
-#color-info .property .value:hover + .copy {
-	background-position: center right;
-}
-
-#color-info .property .copy {
-	width: 24px;
-	height: 100%;
-	padding: 0 5px;
-	background-color: #FFF;
-	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
-	background-repeat: no-repeat;
-	background-position: center left;
-	border-left: 1px solid #EEE;
-	text-align: right;
-	float: left;
-}
-
-#color-info .property .copy:hover {
-	background-position: center right;
-}
-
-
-/**
- * 	Color Palette
- */
-
-#palette {
-	width: 1000px;
-	padding: 10px 0;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-	background-color: #EEE;
-	color: #777;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#color-palette {
-	width: 640px;
-	font-family: Arial, Helvetica, sans-serif;
-	color: #777;
-	float: left;
-}
-
-#color-palette .container {
-	width: 100%;
-	height: 50px;
-	line-height: 50px;
-	overflow: hidden;
-	float: left;
-	transition: all 0.5s;
-}
-
-#color-palette .container > * {
-	float: left;
-}
-
-#color-palette .title {
-	width: 100px;
-	padding: 0 10px;
-	text-align: right;
-	line-height: inherit;
-}
-
-#color-palette .palette {
-	width: 456px;
-	height: 38px;
-	margin: 3px;
-	padding: 3px;
-	display: table;
-	background-color: #FFF;
-}
-
-#color-palette .palette .sample {
-	width: 30px;
-	height: 30px;
-	margin: 3px;
-	position: relative;
-	border: 1px solid #DDD;
-	float: left;
-	transition: all 0.2s;
-}
-
-#color-palette .palette .sample:hover {
-	cursor: pointer;
-	border-color: #BBB;
-	transform: scale(1.15);
-	border-radius: 3px;
-}
-
-#color-palette .controls {
-}
-
-#color-palette .controls > * {
-	float: left;
-}
-
-#color-palette .controls > *:hover {
-	cursor: pointer;
-}
-
-#color-palette .controls .lock {
-	width: 24px;
-	height: 24px;
-	margin: 10px;
-	padding: 3px;
-	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
-	background-repeat: no-repeat;
-	background-position: bottom right;
-}
-
-#color-palette .controls .lock:hover {
-	/*background-image: url('images/unlocked-hover.png');*/
-	background-position: bottom left;
-}
-
-#color-palette .controls .lock[locked-state='true'] {
-	/*background-image: url('images/locked.png');*/
-	background-position: top left ;
-}
-
-#color-palette .controls .lock[locked-state='true']:hover {
-	/*background-image: url('images/lock-hover.png');*/
-	background-position: top right;
-}
-
-/**
- * Canvas
- */
-
-#canvas {
-	width: 100%;
-	height: 300px;
-	min-height: 250px;
-	border-top: 1px solid #DDD;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-	position: relative;
-	float: left;
-}
-
-#canvas[data-tutorial='drop'] {
-	text-align: center;
-	font-size: 30px;
-	color: #777;
-}
-
-#canvas[data-tutorial='drop']:before {
-	content: "Drop colors here to compare";
-	width: 40%;
-	padding: 30px 9% 70px 11%;
-
-	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
-	background-repeat: no-repeat;
-	background-position: left 35px top 60%;
-
-	text-align: right;
-
-	border: 3px dashed rgb(221, 221, 221);
-	border-radius: 15px;
-
-	position: absolute;
-	top: 50px;
-	left: 20%;
-}
-
-#canvas[data-tutorial='drop']:after {
-	content: "adjust, change or modify";
-	width: 40%;
-	font-size: 24px;
-	position: absolute;
-	top: 130px;
-	left: 32%;
-	z-index: 2;
-}
-
-#canvas [data-tutorial='dblclick'] {
-	background-color: #999 !important;
-}
-
-#canvas [data-tutorial='dblclick']:before {
-	content: "double click to activate";
-	width: 80px;
-	color: #FFF;
-	position: absolute;
-	top: 10%;
-	left: 20%;
-	z-index: 2;
-}
-
-#canvas .sample {
-	width: 100px;
-	height: 100px;
-	min-width: 20px;
-	min-height: 20px;
-	position: absolute;
-	border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-#canvas .sample:hover {
-	cursor: move;
-}
-
-#canvas .sample[data-active='true']:after {
-	content: "";
-	position: absolute;
-	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-	width: 100%;
-	height: 12px;
-	top: -12px;
-	z-index: 2;
-}
-
-#canvas .sample:hover > * {
-	cursor: pointer;
-	display: block !important;
-}
-
-#canvas .sample .resize-handle {
-	display: none;
-}
-
-#canvas .sample .pick {
-	width: 10px;
-	height: 10px;
-	margin: 5px;
-	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
-	position: absolute;
-	top: 0;
-	left: 0;
-	display: none;
-}
-
-#canvas .sample .delete {
-	width: 10px;
-	height: 10px;
-	margin: 5px;
-	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
-	position: absolute;
-	top: 0;
-	right: 0;
-	display: none;
-}
-
-
-/**
- * Canvas controls
- */
-
-#canvas .toggle-bg {
-	width: 16px;
-	height: 16px;
-	margin: 5px;
-	background: url("images/canvas-controls.png") center left no-repeat;
-	position: absolute;
-	top: 0;
-	right: 0;
-}
-
-#canvas .toggle-bg:hover {
-	cursor: pointer;
-}
-
-#canvas[data-bg='true'] {
-	background: none;
-}
-
-#canvas[data-bg='true'] .toggle-bg {
-	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
-}
-
-#zindex {
-	height: 20px;
-	margin: 5px;
-	font-size: 16px;
-	position: absolute;
-	opacity: 0;
-	top: -10000px;
-	left: 0;
-	color: #777;
-	float: left;
-	transition: opacity 1s;
-}
-
-#zindex input {
-	border: 1px solid #DDD;
-	font-size: 16px;
-	color: #777;
-}
-
-#zindex .ui-input-slider-info {
-	width: 60px;
-}
-
-#zindex[data-active='true'] {
-	top: 0;
-	opacity: 1;
-}
-
-
- -

JavaScript Content

- -
'use strict';
-
-var UIColorPicker = (function UIColorPicker() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	var subscribers = [];
-	var pickers = [];
-
-	/**
-	 * RGBA Color class
-	 *
-	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
-	 * @param hue			0-360
-	 * @param saturation	0-100
-	 * @param value 		0-100
-	 * @param lightness		0-100
-	 */
-
-	function Color(color) {
-
-		if(color instanceof Color === true) {
-			this.copy(color);
-			return;
-		}
-
-		this.r = 0;
-		this.g = 0;
-		this.b = 0;
-		this.a = 1;
-		this.hue = 0;
-		this.saturation = 0;
-		this.value = 0;
-		this.lightness = 0;
-		this.format = 'HSV';
-	}
-
-	function RGBColor(r, g, b) {
-		var color = new Color();
-		color.setRGBA(r, g, b, 1);
-		return color;
-	}
-
-	function RGBAColor(r, g, b, a) {
-		var color = new Color();
-		color.setRGBA(r, g, b, a);
-		return color;
-	}
-
-	function HSVColor(h, s, v) {
-		var color = new Color();
-		color.setHSV(h, s, v);
-		return color;
-	}
-
-	function HSVAColor(h, s, v, a) {
-		var color = new Color();
-		color.setHSV(h, s, v);
-		color.a = a;
-		return color;
-	}
-
-	function HSLColor(h, s, l) {
-		var color = new Color();
-		color.setHSL(h, s, l);
-		return color;
-	}
-
-	function HSLAColor(h, s, l, a) {
-		var color = new Color();
-		color.setHSL(h, s, l);
-		color.a = a;
-		return color;
-	}
-
-	Color.prototype.copy = function copy(obj) {
-		if(obj instanceof Color !== true) {
-			console.log('Typeof parameter not Color');
-			return;
-		}
-
-		this.r = obj.r;
-		this.g = obj.g;
-		this.b = obj.b;
-		this.a = obj.a;
-		this.hue = obj.hue;
-		this.saturation = obj.saturation;
-		this.value = obj.value;
-		this.format = '' + obj.format;
-		this.lightness = obj.lightness;
-	};
-
-	Color.prototype.setFormat = function setFormat(format) {
-		if (format === 'HSV')
-			this.format = 'HSV';
-		if (format === 'HSL')
-			this.format = 'HSL';
-	};
-
-	/*========== Methods to set Color Properties ==========*/
-
-	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
-		return (typeof(value) === 'number' && isNaN(value) === false &&
-			value >= 0 && value <= 255);
-	};
-
-	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
-		if (this.isValidRGBValue(red) === false ||
-			this.isValidRGBValue(green) === false ||
-			this.isValidRGBValue(blue) === false)
-			return;
-
-			this.r = red | 0;
-			this.g = green | 0;
-			this.b = blue | 0;
-
-		if (this.isValidRGBValue(alpha) === true)
-			this.a = alpha | 0;
-	};
-
-	Color.prototype.setByName = function setByName(name, value) {
-		if (name === 'r' || name === 'g' || name === 'b') {
-			if(this.isValidRGBValue(value) === false)
-				return;
-
-			this[name] = value;
-			this.updateHSX();
-		}
-	};
-
-	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.value = value;
-		this.HSVtoRGB();
-	};
-
-	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.lightness = lightness;
-		this.HSLtoRGB();
-	};
-
-	Color.prototype.setHue = function setHue(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 359)
-			return;
-		this.hue = value;
-		this.updateRGB();
-	};
-
-	Color.prototype.setSaturation = function setSaturation(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.saturation = value;
-		this.updateRGB();
-	};
-
-	Color.prototype.setValue = function setValue(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.value = value;
-		this.HSVtoRGB();
-	};
-
-	Color.prototype.setLightness = function setLightness(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.lightness = value;
-		this.HSLtoRGB();
-	};
-
-	Color.prototype.setHexa = function setHexa(value) {
-		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
-
-		if (valid !== true)
-			return;
-
-		if (value[0] === '#')
-			value = value.slice(1, value.length);
-
-		if (value.length === 3)
-			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
-
-		this.r = parseInt(value.substr(0, 2), 16);
-		this.g = parseInt(value.substr(2, 2), 16);
-		this.b = parseInt(value.substr(4, 2), 16);
-
-		this.alpha	= 1;
-		this.RGBtoHSV();
-	};
-
-	/*========== Conversion Methods ==========*/
-
-	Color.prototype.convertToHSL = function convertToHSL() {
-		if (this.format === 'HSL')
-			return;
-
-		this.setFormat('HSL');
-		this.RGBtoHSL();
-	};
-
-	Color.prototype.convertToHSV = function convertToHSV() {
-		if (this.format === 'HSV')
-			return;
-
-		this.setFormat('HSV');
-		this.RGBtoHSV();
-	};
-
-	/*========== Update Methods ==========*/
-
-	Color.prototype.updateRGB = function updateRGB() {
-		if (this.format === 'HSV') {
-			this.HSVtoRGB();
-			return;
-		}
-
-		if (this.format === 'HSL') {
-			this.HSLtoRGB();
-			return;
-		}
-	};
-
-	Color.prototype.updateHSX = function updateHSX() {
-		if (this.format === 'HSV') {
-			this.RGBtoHSV();
-			return;
-		}
-
-		if (this.format === 'HSL') {
-			this.RGBtoHSL();
-			return;
-		}
-	};
-
-	Color.prototype.HSVtoRGB = function HSVtoRGB() {
-		var sat = this.saturation / 100;
-		var value = this.value / 100;
-		var C = sat * value;
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = value - C;
-		var precision = 255;
-
-		C = (C + m) * precision | 0;
-		X = (X + m) * precision | 0;
-		m = m * precision | 0;
-
-		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
-		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
-		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
-		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
-		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
-		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
-	};
-
-	Color.prototype.HSLtoRGB = function HSLtoRGB() {
-		var sat = this.saturation / 100;
-		var light = this.lightness / 100;
-		var C = sat * (1 - Math.abs(2 * light - 1));
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = light - C/2;
-		var precision = 255;
-
-		C = (C + m) * precision | 0;
-		X = (X + m) * precision | 0;
-		m = m * precision | 0;
-
-		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
-		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
-		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
-		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
-		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
-		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
-	};
-
-	Color.prototype.RGBtoHSV = function RGBtoHSV() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / cmax;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue < 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.value = (cmax * 100) | 0;
-	};
-
-	Color.prototype.RGBtoHSL = function RGBtoHSL() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-		var lightness = (cmax + cmin) / 2;
-		var X = (1 - Math.abs(2 * lightness - 1));
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / X;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue < 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.lightness = (lightness * 100) | 0;
-	};
-
-	/*========== Get Methods ==========*/
-
-	Color.prototype.getHexa = function getHexa() {
-		var r = this.r.toString(16);
-		var g = this.g.toString(16);
-		var b = this.b.toString(16);
-		if (this.r < 16) r = '0' + r;
-		if (this.g < 16) g = '0' + g;
-		if (this.b < 16) b = '0' + b;
-		var value = '#' + r + g + b;
-		return value.toUpperCase();
-	};
-
-	Color.prototype.getRGBA = function getRGBA() {
-
-		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
-		var a = '';
-		var v = '';
-		var x = parseFloat(this.a);
-		if (x !== 1) {
-			a = 'a';
-			v = ', ' + x;
-		}
-
-		var value = 'rgb' + a + rgb + v + ')';
-		return value;
-	};
-
-	Color.prototype.getHSLA = function getHSLA() {
-		if (this.format === 'HSV') {
-			var color = new Color(this);
-			color.setFormat('HSL');
-			color.updateHSX();
-			return color.getHSLA();
-		}
-
-		var a = '';
-		var v = '';
-		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
-		var x = parseFloat(this.a);
-		if (x !== 1) {
-			a = 'a';
-			v = ', ' + x;
-		}
-
-		var value = 'hsl' + a + hsl + v + ')';
-		return value;
-	};
-
-	Color.prototype.getColor = function getColor() {
-		if (this.a | 0 === 1)
-			return this.getHexa();
-		return this.getRGBA();
-	};
-
-	/*=======================================================================*/
-	/*=======================================================================*/
-
-	/*========== Capture Mouse Movement ==========*/
-
-	var setMouseTracking = function setMouseTracking(elem, callback) {
-		elem.addEventListener('mousedown', function(e) {
-			callback(e);
-			document.addEventListener('mousemove', callback);
-		});
-
-		document.addEventListener('mouseup', function(e) {
-			document.removeEventListener('mousemove', callback);
-		});
-	};
-
-	/*====================*/
-	// Color Picker Class
-	/*====================*/
-
-	function ColorPicker(node) {
-		this.color = new Color();
-		this.node = node;
-		this.subscribers = [];
-
-		var type = this.node.getAttribute('data-mode');
-		var topic = this.node.getAttribute('data-topic');
-
-		this.topic = topic;
-		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
-		this.color.setFormat(this.picker_mode);
-
-		this.createPickingArea();
-		this.createHueArea();
-
-		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
-		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
-		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
-		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
-
-		this.createAlphaArea();
-
-		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
-		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
-		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
-
-		this.createPreviewBox();
-		this.createChangeModeButton();
-
-		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
-		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
-
-		this.setColor(this.color);
-		pickers[topic] = this;
-	}
-
-	/*************************************************************************/
-	//				Function for generating the color-picker
-	/*************************************************************************/
-
-	ColorPicker.prototype.createPickingArea = function createPickingArea() {
-		var area = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'picking-area';
-		picker.className = 'picker';
-
-		this.picking_area = area;
-		this.color_picker = picker;
-		setMouseTracking(area, this.updateColor.bind(this));
-
-		area.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createHueArea = function createHueArea() {
-		var area = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'hue';
-		picker.className ='slider-picker';
-
-		this.hue_area = area;
-		this.hue_picker = picker;
-		setMouseTracking(area, this.updateHueSlider.bind(this));
-
-		area.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
-		var area = document.createElement('div');
-		var mask = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'alpha';
-		mask.className = 'alpha-mask';
-		picker.className = 'slider-picker';
-
-		this.alpha_area = area;
-		this.alpha_mask = mask;
-		this.alpha_picker = picker;
-		setMouseTracking(area, this.updateAlphaSlider.bind(this));
-
-		area.appendChild(mask);
-		mask.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
-		var preview_box = document.createElement('div');
-		var preview_color = document.createElement('div');
-
-		preview_box.className = 'preview';
-		preview_color.className = 'preview-color';
-
-		this.preview_color = preview_color;
-
-		preview_box.appendChild(preview_color);
-		this.node.appendChild(preview_box);
-	};
-
-	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
-		var wrapper = document.createElement('div');
-		var input = document.createElement('input');
-		var info = document.createElement('span');
-
-		wrapper.className = 'input';
-		wrapper.setAttribute('data-topic', topic);
-		info.textContent = title;
-		info.className = 'name';
-		input.setAttribute('type', 'text');
-
-		wrapper.appendChild(info);
-		wrapper.appendChild(input);
-		this.node.appendChild(wrapper);
-
-		input.addEventListener('change', onChangeFunc);
-		input.addEventListener('click', function() {
-			this.select();
-		});
-
-		this.subscribe(topic, function(value) {
-			input.value = value;
-		});
-	};
-
-	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
-
-		var button = document.createElement('div');
-		button.className = 'switch_mode';
-		button.addEventListener('click', function() {
-			if (this.picker_mode === 'HSV')
-				this.setPickerMode('HSL');
-			else
-				this.setPickerMode('HSV');
-
-		}.bind(this));
-
-		this.node.appendChild(button);
-	};
-
-	/*************************************************************************/
-	//					Updates properties of UI elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.updateColor = function updateColor(e) {
-		var x = e.pageX - this.picking_area.offsetLeft;
-		var y = e.pageY - this.picking_area.offsetTop;
-		var picker_offset = 5;
-
-		// width and height should be the same
-		var size = this.picking_area.clientWidth;
-
-		if (x > size) x = size;
-		if (y > size) y = size;
-		if (x < 0) x = 0;
-		if (y < 0) y = 0;
-
-		var value = 100 - (y * 100 / size) | 0;
-		var saturation = x * 100 / size | 0;
-
-		if (this.picker_mode === 'HSV')
-			this.color.setHSV(this.color.hue, saturation, value);
-		if (this.picker_mode === 'HSL')
-			this.color.setHSL(this.color.hue, saturation, value);
-
-		this.color_picker.style.left = x - picker_offset + 'px';
-		this.color_picker.style.top = y - picker_offset + 'px';
-
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('value', value);
-		this.notify('lightness', value);
-		this.notify('saturation', saturation);
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
-		var x = e.pageX - this.hue_area.offsetLeft;
-		var width = this.hue_area.clientWidth;
-
-		if (x < 0) x = 0;
-		if (x > width) x = width;
-
-		// TODO 360 => 359
-		var hue = ((359 * x) / width) | 0;
-		// if (hue === 360) hue = 359;
-
-		this.updateSliderPosition(this.hue_picker, x);
-		this.setHue(hue);
-	};
-
-	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
-		var x = e.pageX - this.alpha_area.offsetLeft;
-		var width = this.alpha_area.clientWidth;
-
-		if (x < 0) x = 0;
-		if (x > width) x = width;
-
-		this.color.a = (x / width).toFixed(2);
-
-		this.updateSliderPosition(this.alpha_picker, x);
-		this.updatePreviewColor();
-
-		this.notify('alpha', this.color.a);
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.setHue = function setHue(value) {
-		this.color.setHue(value);
-
-		this.updatePickerBackground();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-		this.notify('hue', this.color.hue);
-
-		notify(this.topic, this.color);
-	};
-
-	// Updates when one of Saturation/Value/Lightness changes
-	ColorPicker.prototype.updateSLV = function updateSLV() {
-		this.updatePickerPosition();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-
-		notify(this.topic, this.color);
-	};
-
-	/*************************************************************************/
-	//				Update positions of various UI elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
-		var size = this.picking_area.clientWidth;
-		var value = 0;
-		var offset = 5;
-
-		if (this.picker_mode === 'HSV')
-			value = this.color.value;
-		if (this.picker_mode === 'HSL')
-			value = this.color.lightness;
-
-		var x = (this.color.saturation * size / 100) | 0;
-		var y = size - (value * size / 100) | 0;
-
-		this.color_picker.style.left = x - offset + 'px';
-		this.color_picker.style.top = y - offset + 'px';
-	};
-
-	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
-		elem.style.left = Math.max(pos - 3, -2) + 'px';
-	};
-
-	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
-		var size = this.hue_area.clientWidth;
-		var offset = 1;
-		var pos = (this.color.hue * size / 360 ) | 0;
-		this.hue_picker.style.left = pos - offset + 'px';
-	};
-
-	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
-		var size = this.alpha_area.clientWidth;
-		var offset = 1;
-		var pos = (this.color.a * size) | 0;
-		this.alpha_picker.style.left = pos - offset + 'px';
-	};
-
-	/*************************************************************************/
-	//						Update background colors
-	/*************************************************************************/
-
-	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
-		var nc = new Color(this.color);
-		nc.setHSV(nc.hue, 100, 100);
-		this.picking_area.style.backgroundColor = nc.getHexa();
-	};
-
-	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
-		this.alpha_mask.style.backgroundColor = this.color.getHexa();
-	};
-
-	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
-		this.preview_color.style.backgroundColor = this.color.getColor();
-	};
-
-	/*************************************************************************/
-	//						Update input elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
-		var value = parseInt(e.target.value);
-		this.setHue(value);
-		this.updateHuePicker();
-	};
-
-	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
-		var value = parseInt(e.target.value);
-		this.color.setSaturation(value);
-		e.target.value = this.color.saturation;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
-		var value = parseInt(e.target.value);
-		this.color.setValue(value);
-		e.target.value = this.color.value;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
-		var value = parseInt(e.target.value);
-		this.color.setLightness(value);
-		e.target.value = this.color.lightness;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('r', value);
-		e.target.value = this.color.r;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('g', value);
-		e.target.value = this.color.g;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('b', value);
-		e.target.value = this.color.b;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
-		var value = parseFloat(e.target.value);
-
-		if (typeof value === 'number' && isNaN(value) === false &&
-			value >= 0 && value <= 1)
-			this.color.a = value.toFixed(2);
-
-		e.target.value = this.color.a;
-		this.updateAlphaPicker();
-	};
-
-	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
-		var value = e.target.value;
-		this.color.setHexa(value);
-		this.setColor(this.color);
-	};
-
-	/*************************************************************************/
-	//							Internal Pub/Sub
-	/*************************************************************************/
-
-	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
-		this.subscribers[topic] = callback;
-	};
-
-	ColorPicker.prototype.notify = function notify(topic, value) {
-		if (this.subscribers[topic])
-			this.subscribers[topic](value);
-	};
-
-	/*************************************************************************/
-	//							Set Picker Properties
-	/*************************************************************************/
-
-	ColorPicker.prototype.setColor = function setColor(color) {
-		if(color instanceof Color !== true) {
-			console.log('Typeof parameter not Color');
-			return;
-		}
-
-		if (color.format !== this.picker_mode) {
-			color.setFormat(this.picker_mode);
-			color.updateHSX();
-		}
-
-		this.color.copy(color);
-		this.updateHuePicker();
-		this.updatePickerPosition();
-		this.updatePickerBackground();
-		this.updateAlphaPicker();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-
-		this.notify('hue', this.color.hue);
-		this.notify('saturation', this.color.saturation);
-		this.notify('value', this.color.value);
-		this.notify('lightness', this.color.lightness);
-
-		this.notify('alpha', this.color.a);
-		this.notify('hexa', this.color.getHexa());
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
-		if (mode !== 'HSV' && mode !== 'HSL')
-			return;
-
-		this.picker_mode = mode;
-		this.node.setAttribute('data-mode', this.picker_mode);
-		this.setColor(this.color);
-	};
-
-	/*************************************************************************/
-	//								UNUSED
-	/*************************************************************************/
-
-	var setPickerMode = function setPickerMode(topic, mode) {
-		if (pickers[topic])
-			pickers[topic].setPickerMode(mode);
-	};
-
-	var setColor = function setColor(topic, color) {
-		if (pickers[topic])
-			pickers[topic].setColor(color);
-	};
-
-	var getColor = function getColor(topic) {
-		if (pickers[topic])
-			return new Color(pickers[topic].color);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(callback) {
-		subscribers.indexOf(callback);
-		subscribers.splice(index, 1);
-	};
-
-	var notify = function notify(topic, value) {
-		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
-			return;
-
-		var color = new Color(value);
-		for (var i in subscribers[topic])
-			subscribers[topic][i](color);
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-color-picker');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new ColorPicker(elem[i]);
-	};
-
-	return {
-		init : init,
-		Color : Color,
-		RGBColor : RGBColor,
-		RGBAColor : RGBAColor,
-		HSVColor : HSVColor,
-		HSVAColor : HSVAColor,
-		HSLColor : HSLColor,
-		HSLAColor : HSLAColor,
-		setColor : setColor,
-		getColor : getColor,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPickerMode : setPickerMode
-	};
-
-})();
-
-
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		return input;
-	};
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-
-			document.addEventListener("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		};
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		};
-
-		return slider;
-	};
-
-	var InputSlider = function(node) {
-		var min		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision >= 0 ? precision : 0;
-		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			return;
-
-		notify.call(slider);
-	};
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	};
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	};
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	};
-
-	var setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value > 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-'use strict';
-
-window.addEventListener("load", function() {
-	ColorPickerTool.init();
-});
-
-var ColorPickerTool = (function ColorPickerTool() {
-
-	/*========== Get DOM Element By ID ==========*/
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	function allowDropEvent(e) {
-		e.preventDefault();
-	}
-
-	/*========== Make an element resizable relative to it's parent ==========*/
-
-	var UIComponent = (function UIComponent() {
-
-		function makeResizable(elem, axis) {
-			var valueX = 0;
-			var valueY = 0;
-			var action = 0;
-
-			var resizeStart = function resizeStart(e) {
-				e.stopPropagation();
-				e.preventDefault();
-				if (e.button !== 0)
-					return;
-
-				valueX = e.clientX - elem.clientWidth;
-				valueY = e.clientY - elem.clientHeight;
-
-				document.body.setAttribute('data-resize', axis);
-				document.addEventListener('mousemove', mouseMove);
-				document.addEventListener('mouseup', resizeEnd);
-			};
-
-			var mouseMove = function mouseMove(e) {
-				if (action >= 0)
-					elem.style.width = e.clientX - valueX + 'px';
-				if (action <= 0)
-					elem.style.height = e.clientY - valueY + 'px';
-			};
-
-			var resizeEnd = function resizeEnd(e) {
-				if (e.button !== 0)
-					return;
-
-				document.body.removeAttribute('data-resize', axis);
-				document.removeEventListener('mousemove', mouseMove);
-				document.removeEventListener('mouseup', resizeEnd);
-			};
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			if (axis === 'width') action = 1;
-			else if (axis === 'height') action = -1;
-			else axis = 'both';
-
-			handle.className = 'resize-handle';
-			handle.setAttribute('data-resize', axis);
-			handle.addEventListener('mousedown', resizeStart);
-			elem.appendChild(handle);
-		};
-
-		/*========== Make an element draggable relative to it's parent ==========*/
-
-		var makeDraggable = function makeDraggable(elem, endFunction) {
-
-			var offsetTop;
-			var offsetLeft;
-
-			elem.setAttribute('data-draggable', 'true');
-
-			var dragStart = function dragStart(e) {
-				e.preventDefault();
-				e.stopPropagation();
-
-				if (e.target.getAttribute('data-draggable') !== 'true' ||
-					e.target !== elem || e.button !== 0)
-					return;
-
-				offsetLeft = e.clientX - elem.offsetLeft;
-				offsetTop = e.clientY - elem.offsetTop;
-
-				document.addEventListener('mousemove', mouseDrag);
-				document.addEventListener('mouseup', dragEnd);
-			};
-
-			var dragEnd = function dragEnd(e) {
-				if (e.button !== 0)
-					return;
-
-				document.removeEventListener('mousemove', mouseDrag);
-				document.removeEventListener('mouseup', dragEnd);
-			};
-
-			var mouseDrag = function mouseDrag(e) {
-				elem.style.left = e.clientX - offsetLeft + 'px';
-				elem.style.top = e.clientY - offsetTop + 'px';
-			};
-
-			elem.addEventListener('mousedown', dragStart, false);
-		};
-
-		return {
-			makeResizable : makeResizable,
-			makeDraggable : makeDraggable
-		};
-
-	})();
-
-	/*========== Color Class ==========*/
-
-	var Color = UIColorPicker.Color;
-	var HSLColor = UIColorPicker.HSLColor;
-
-	/**
-	 * ColorPalette
-	 */
-	var ColorPalette = (function ColorPalette() {
-
-		var samples = [];
-		var color_palette;
-		var complementary;
-
-		var hideNode = function(node) {
-			node.setAttribute('data-hidden', 'true');
-		};
-
-		var ColorSample = function ColorSample(id) {
-			var node = document.createElement('div');
-			node.className = 'sample';
-
-			this.uid = samples.length;
-			this.node = node;
-			this.color = new Color();
-
-			node.setAttribute('sample-id', this.uid);
-			node.setAttribute('draggable', 'true');
-			node.addEventListener('dragstart', this.dragStart.bind(this));
-			node.addEventListener('click', this.pickColor.bind(this));
-
-			samples.push(this);
-		};
-
-		ColorSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		ColorSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
-			this.color.copy(color);
-			var hue = (steps * degree + this.color.hue) % 360;
-			if (hue < 0) hue += 360;
-			this.color.setHue(hue);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
-			var saturation = color.saturation + value * steps;
-			if (saturation <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setSaturation(saturation);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
-			var lightness = color.lightness + value * steps;
-			if (lightness <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setLightness(lightness);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
-			var brightness = color.value + value * steps;
-			if (brightness <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setValue(brightness);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
-			var alpha = parseFloat(color.a) + value * steps;
-			if (alpha <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.a = parseFloat(alpha.toFixed(2));
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.pickColor = function pickColor() {
-			UIColorPicker.setColor('picker', this.color);
-		};
-
-		ColorSample.prototype.dragStart = function dragStart(e) {
-			e.dataTransfer.setData('sampleID', this.uid);
-			e.dataTransfer.setData('location', 'palette-samples');
-		};
-
-		var Palette = function Palette(text, size) {
-			this.samples = [];
-			this.locked = false;
-
-			var palette = document.createElement('div');
-			var title = document.createElement('div');
-			var controls = document.createElement('div');
-			var container = document.createElement('div');
-			var lock = document.createElement('div');
-
-			container.className = 'container';
-			title.className = 'title';
-			palette.className = 'palette';
-			controls.className = 'controls';
-			lock.className = 'lock';
-			title.textContent = text;
-
-			controls.appendChild(lock);
-			container.appendChild(title);
-			container.appendChild(controls);
-			container.appendChild(palette);
-
-			lock.addEventListener('click', function () {
-				this.locked = !this.locked;
-				lock.setAttribute('locked-state', this.locked);
-			}.bind(this));
-
-			for(var i = 0; i < size; i++) {
-				var sample = new ColorSample();
-				this.samples.push(sample);
-				palette.appendChild(sample.node);
-			}
-
-			this.container = container;
-			this.title = title;
-		};
-
-		var createHuePalette = function createHuePalette() {
-			var palette = new Palette('Hue', 12);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 12; i++) {
-					palette.samples[i].updateHue(color, 30, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var createSaturationPalette = function createSaturationPalette() {
-			var palette = new Palette('Saturation', 11);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 11; i++) {
-					palette.samples[i].updateSaturation(color, -10, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		/* Brightness or Lightness - depends on the picker mode */
-		var createVLPalette = function createSaturationPalette() {
-			var palette = new Palette('Lightness', 11);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				if(color.format === 'HSL') {
-					palette.title.textContent = 'Lightness';
-					for(var i = 0; i < 11; i++)
-						palette.samples[i].updateLightness(color, -10, i);
-				}
-				else {
-					palette.title.textContent = 'Value';
-					for(var i = 0; i < 11; i++)
-						palette.samples[i].updateBrightness(color, -10, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var isBlankPalette = function isBlankPalette(container, value) {
-			if (value === 0) {
-				container.setAttribute('data-collapsed', 'true');
-				return true;
-			}
-
-			container.removeAttribute('data-collapsed');
-			return false;
-		};
-
-		var createAlphaPalette = function createAlphaPalette() {
-			var palette = new Palette('Alpha', 10);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 10; i++) {
-					palette.samples[i].updateAlpha(color, -0.1, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var getSampleColor = function getSampleColor(id) {
-			if (samples[id] !== undefined && samples[id]!== null)
-				return new Color(samples[id].color);
-		};
-
-		var init = function init() {
-			color_palette = getElemById('color-palette');
-
-			createHuePalette();
-			createSaturationPalette();
-			createVLPalette();
-			createAlphaPalette();
-
-		};
-
-		return {
-			init : init,
-			getSampleColor : getSampleColor
-		};
-
-	})();
-
-	/**
-	 * ColorInfo
-	 */
-	var ColorInfo = (function ColorInfo() {
-
-		var info_box;
-		var select;
-		var RGBA;
-		var HEXA;
-		var HSLA;
-
-		var updateInfo = function updateInfo(color) {
-			if (color.a | 0 === 1) {
-				RGBA.info.textContent = 'RGB';
-				HSLA.info.textContent = 'HSL';
-			}
-			else {
-				RGBA.info.textContent = 'RGBA';
-				HSLA.info.textContent = 'HSLA';
-			}
-
-			RGBA.value.value = color.getRGBA();
-			HSLA.value.value = color.getHSLA();
-			HEXA.value.value = color.getHexa();
-		};
-
-		var InfoProperty = function InfoProperty(info) {
-
-			var node = document.createElement('div');
-			var title = document.createElement('div');
-			var value = document.createElement('input');
-			var copy = document.createElement('div');
-
-			node.className = 'property';
-			title.className = 'type';
-			value.className = 'value';
-			copy.className = 'copy';
-
-			title.textContent = info;
-			value.setAttribute('type', 'text');
-
-			copy.addEventListener('click', function() {
-				value.select();
-			});
-
-			node.appendChild(title);
-			node.appendChild(value);
-			node.appendChild(copy);
-
-			this.node = node;
-			this.value = value;
-			this.info = title;
-
-			info_box.appendChild(node);
-		};
-
-		var init = function init() {
-
-			info_box = getElemById('color-info');
-
-			RGBA = new InfoProperty('RGBA');
-			HSLA = new InfoProperty('HSLA');
-			HEXA = new InfoProperty('HEXA');
-
-			UIColorPicker.subscribe('picker', updateInfo);
-
-		};
-
-		return {
-			init: init
-		};
-
-	})();
-
-	/**
-	 * ColorPicker Samples
-	 */
-	var ColorPickerSamples = (function ColorPickerSamples() {
-
-		var samples = [];
-		var nr_samples = 0;
-		var active = null;
-		var container = null;
-		var	samples_per_line = 10;
-		var trash_can = null;
-		var base_color = new HSLColor(0, 50, 100);
-		var add_btn;
-		var add_btn_pos;
-
-		var ColorSample = function ColorSample() {
-			var node = document.createElement('div');
-			node.className = 'sample';
-
-			this.uid = samples.length;
-			this.index = nr_samples++;
-			this.node = node;
-			this.color = new Color(base_color);
-
-			node.setAttribute('sample-id', this.uid);
-			node.setAttribute('draggable', 'true');
-
-			node.addEventListener('dragstart', this.dragStart.bind(this));
-			node.addEventListener('dragover' , allowDropEvent);
-			node.addEventListener('drop'     , this.dragDrop.bind(this));
-
-			this.updatePosition(this.index);
-			this.updateBgColor();
-			samples.push(this);
-		};
-
-		ColorSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		ColorSample.prototype.updatePosition = function updatePosition(index) {
-			this.index = index;
-			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
-			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
-			this.node.style.top  = this.posY + 'px';
-			this.node.style.left = this.posX + 'px';
-		};
-
-		ColorSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.activate = function activate() {
-			UIColorPicker.setColor('picker', this.color);
-			this.node.setAttribute('data-active', 'true');
-		};
-
-		ColorSample.prototype.deactivate = function deactivate() {
-			this.node.removeAttribute('data-active');
-		};
-
-		ColorSample.prototype.dragStart = function dragStart(e) {
-			e.dataTransfer.setData('sampleID', this.uid);
-			e.dataTransfer.setData('location', 'picker-samples');
-		};
-
-		ColorSample.prototype.dragDrop = function dragDrop(e) {
-			e.stopPropagation();
-			this.color = Tool.getSampleColorFrom(e);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.deleteSample = function deleteSample() {
-			container.removeChild(this.node);
-			samples[this.uid] = null;
-			nr_samples--;
-		};
-
-		var updateUI = function updateUI() {
-			updateContainerProp();
-
-			var index = 0;
-			var nr = samples.length;
-			for (var i=0; i < nr; i++)
-				if (samples[i] !== null) {
-					samples[i].updatePosition(index);
-					index++;
-				}
-
-			AddSampleButton.updatePosition(index);
-		};
-
-		var deleteSample = function deleteSample(e) {
-			trash_can.parentElement.setAttribute('drag-state', 'none');
-
-			var location = e.dataTransfer.getData('location');
-			if (location !== 'picker-samples')
-				return;
-
-			var sampleID = e.dataTransfer.getData('sampleID');
-			samples[sampleID].deleteSample();
-			console.log(samples);
-
-			updateUI();
-		};
-
-		var createDropSample = function createDropSample() {
-			var sample = document.createElement('div');
-			sample.id = 'drop-effect-sample';
-			sample.className = 'sample';
-			container.appendChild(sample);
-		};
-
-		var setActivateSample = function setActivateSample(e) {
-			if (e.target.className !== 'sample')
-				return;
-
-			unsetActiveSample(active);
-			Tool.unsetVoidSample();
-			CanvasSamples.unsetActiveSample();
-			active = samples[e.target.getAttribute('sample-id')];
-			active.activate();
-		};
-
-		var unsetActiveSample = function unsetActiveSample() {
-			if (active)
-				active.deactivate();
-			active = null;
-		};
-
-		var getSampleColor = function getSampleColor(id) {
-			if (samples[id] !== undefined && samples[id]!== null)
-				return new Color(samples[id].color);
-		};
-
-		var updateContainerProp = function updateContainerProp() {
-			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
-			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
-			container.style.height = height + 10 + 'px';
-		};
-
-		var AddSampleButton = (function AddSampleButton() {
-			var node;
-			var _index = 0;
-			var _posX;
-			var _posY;
-
-			var updatePosition = function updatePosition(index) {
-				_index = index;
-				_posY = 5 + ((index / samples_per_line) | 0) * 52;
-				_posX = 5 + ((index % samples_per_line) | 0) * 52;
-
-				node.style.top  = _posY + 'px';
-				node.style.left = _posX + 'px';
-			};
-
-			var addButtonClick = function addButtonClick() {
-				var sample = new ColorSample();
-				container.appendChild(sample.node);
-				updatePosition(_index + 1);
-				updateUI();
-			};
-
-			var init = function init() {
-				node = document.createElement('div');
-				var icon = document.createElement('div');
-
-				node.className = 'sample';
-				icon.id = 'add-icon';
-				node.appendChild(icon);
-				node.addEventListener('click', addButtonClick);
-
-				updatePosition(0);
-				container.appendChild(node);
-			};
-
-			return {
-				init : init,
-				updatePosition : updatePosition
-			};
-		})();
-
-		var init = function init() {
-			container = getElemById('picker-samples');
-			trash_can = getElemById('trash-can');
-
-			AddSampleButton.init();
-
-			for (var i=0; i<16; i++) {
-				var sample = new ColorSample();
-				container.appendChild(sample.node);
-			}
-
-			AddSampleButton.updatePosition(samples.length);
-			updateUI();
-
-			active = samples[0];
-			active.activate();
-
-			container.addEventListener('click', setActivateSample);
-
-			trash_can.addEventListener('dragover', allowDropEvent);
-			trash_can.addEventListener('dragenter', function() {
-				this.parentElement.setAttribute('drag-state', 'enter');
-			});
-			trash_can.addEventListener('dragleave', function(e) {
-				this.parentElement.setAttribute('drag-state', 'none');
-			});
-			trash_can.addEventListener('drop', deleteSample);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (active)
-					active.updateColor(color);
-			});
-
-		};
-
-		return {
-			init : init,
-			getSampleColor : getSampleColor,
-			unsetActiveSample : unsetActiveSample
-		};
-
-	})();
-
-	/**
-	 * Canvas Samples
-	 */
-	var CanvasSamples = (function CanvasSamples() {
-
-		var active = null;
-		var canvas = null;
-		var samples = [];
-		var zindex = null;
-		var tutorial = true;
-
-		var CanvasSample = function CanvasSample(color, posX, posY) {
-
-			var node = document.createElement('div');
-			var pick = document.createElement('div');
-			var delete_btn = document.createElement('div');
-			node.className = 'sample';
-			pick.className = 'pick';
-			delete_btn.className = 'delete';
-
-			this.uid = samples.length;
-			this.node = node;
-			this.color = color;
-			this.updateBgColor();
-			this.zIndex = 1;
-
-			node.style.top = posY - 50 + 'px';
-			node.style.left = posX - 50 + 'px';
-			node.setAttribute('sample-id', this.uid);
-
-			node.appendChild(pick);
-			node.appendChild(delete_btn);
-
-			var activate = function activate() {
-				setActiveSample(this);
-			}.bind(this);
-
-			node.addEventListener('dblclick', activate);
-			pick.addEventListener('click', activate);
-			delete_btn.addEventListener('click', this.deleteSample.bind(this));
-
-			UIComponent.makeDraggable(node);
-			UIComponent.makeResizable(node);
-
-			samples.push(this);
-			canvas.appendChild(node);
-			return this;
-		};
-
-		CanvasSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		CanvasSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
-			this.zIndex = value;
-			this.node.style.zIndex = value;
-		};
-
-		CanvasSample.prototype.activate = function activate() {
-			this.node.setAttribute('data-active', 'true');
-			zindex.setAttribute('data-active', 'true');
-
-			UIColorPicker.setColor('picker', this.color);
-			InputSliderManager.setValue('z-index', this.zIndex);
-		};
-
-		CanvasSample.prototype.deactivate = function deactivate() {
-			this.node.removeAttribute('data-active');
-			zindex.removeAttribute('data-active');
-		};
-
-		CanvasSample.prototype.deleteSample = function deleteSample() {
-			if (active === this)
-				unsetActiveSample();
-			canvas.removeChild(this.node);
-			samples[this.uid] = null;
-		};
-
-		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
-			this.node.style.top = posY - this.startY + 'px';
-			this.node.style.left = posX - this.startX + 'px';
-		};
-
-		var canvasDropEvent = function canvasDropEvent(e) {
-			var color = Tool.getSampleColorFrom(e);
-
-			if (color) {
-				var offsetX = e.pageX - canvas.offsetLeft;
-				var offsetY = e.pageY - canvas.offsetTop;
-				var sample = new CanvasSample(color, offsetX, offsetY);
-				if (tutorial) {
-					tutorial = false;
-					canvas.removeAttribute('data-tutorial');
-					var info = new CanvasSample(new Color(), 100, 100);
-					info.node.setAttribute('data-tutorial', 'dblclick');
-				}
-			}
-
-		};
-
-		var setActiveSample = function setActiveSample(sample) {
-			ColorPickerSamples.unsetActiveSample();
-			Tool.unsetVoidSample();
-			unsetActiveSample();
-			active = sample;
-			active.activate();
-		};
-
-		var unsetActiveSample = function unsetActiveSample() {
-			if (active)
-				active.deactivate();
-			active = null;
-		};
-
-		var createToggleBgButton = function createToggleBgButton() {
-			var button = document.createElement('div');
-			var state = false;
-			button.className = 'toggle-bg';
-			canvas.appendChild(button);
-
-			button.addEventListener('click', function() {
-				console.log(state);
-				state = !state;
-				canvas.setAttribute('data-bg', state);
-			});
-		};
-
-		var init = function init() {
-			canvas = getElemById('canvas');
-			zindex = getElemById('zindex');
-
-			canvas.addEventListener('dragover', allowDropEvent);
-			canvas.addEventListener('drop', canvasDropEvent);
-
-			createToggleBgButton();
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (active)	active.updateColor(color);
-			});
-
-			InputSliderManager.subscribe('z-index', function (value) {
-				if (active)	active.updateZIndex(value);
-			});
-
-			UIComponent.makeResizable(canvas, 'height');
-		};
-
-		return {
-			init : init,
-			unsetActiveSample : unsetActiveSample
-		};
-
-	})();
-
-	var StateButton = function StateButton(node, state) {
-		this.state = false;
-		this.callback = null;
-
-		node.addEventListener('click', function() {
-			this.state = !this.state;
-			if (typeof this.callback === "function")
-				this.callback(this.state);
-		}.bind(this));
-	};
-
-	StateButton.prototype.set = function set() {
-		this.state = true;
-		if (typeof this.callback === "function")
-			this.callback(this.state);
-	};
-
-	StateButton.prototype.unset = function unset() {
-		this.state = false;
-		if (typeof this.callback === "function")
-			this.callback(this.state);
-	};
-
-	StateButton.prototype.subscribe = function subscribe(func) {
-		this.callback = func;
-	};
-
-
-	/**
-	 * Tool
-	 */
-	var Tool = (function Tool() {
-
-		var samples = [];
-		var controls = null;
-		var void_sw;
-
-		var createPickerModeSwitch = function createPickerModeSwitch() {
-			var parent = getElemById('controls');
-			var icon = document.createElement('div');
-			var button = document.createElement('div');
-			var hsv = document.createElement('div');
-			var hsl = document.createElement('div');
-			var active = null;
-
-			icon.className = 'icon picker-icon';
-			button.className = 'switch';
-			button.appendChild(hsv);
-			button.appendChild(hsl);
-
-			hsv.textContent = 'HSV';
-			hsl.textContent = 'HSL';
-
-			active = hsl;
-			active.setAttribute('data-active', 'true');
-
-			function switchPickingModeTo(elem) {
-				active.removeAttribute('data-active');
-				active = elem;
-				active.setAttribute('data-active', 'true');
-				UIColorPicker.setPickerMode('picker', active.textContent);
-			};
-
-			var picker_sw = new StateButton(icon);
-			picker_sw.subscribe(function() {
-				if (active === hsv)
-					switchPickingModeTo(hsl);
-				else
-					switchPickingModeTo(hsv);
-			});
-
-			hsv.addEventListener('click', function() {
-				switchPickingModeTo(hsv);
-			});
-			hsl.addEventListener('click', function() {
-				switchPickingModeTo(hsl);
-			});
-
-			parent.appendChild(icon);
-			parent.appendChild(button);
-		};
-
-		var setPickerDragAndDrop = function setPickerDragAndDrop() {
-			var preview = document.querySelector('#picker .preview-color');
-			var picking_area = document.querySelector('#picker .picking-area');
-
-			preview.setAttribute('draggable', 'true');
-			preview.addEventListener('drop', drop);
-			preview.addEventListener('dragstart', dragStart);
-			preview.addEventListener('dragover', allowDropEvent);
-
-			picking_area.addEventListener('drop', drop);
-			picking_area.addEventListener('dragover', allowDropEvent);
-
-			function drop(e) {
-				var color = getSampleColorFrom(e);
-				UIColorPicker.setColor('picker', color);
-			};
-
-			function dragStart(e) {
-				e.dataTransfer.setData('sampleID', 'picker');
-				e.dataTransfer.setData('location', 'picker');
-			};
-		};
-
-		var getSampleColorFrom = function getSampleColorFrom(e) {
-			var sampleID = e.dataTransfer.getData('sampleID');
-			var location = e.dataTransfer.getData('location');
-
-			if (location === 'picker')
-				return UIColorPicker.getColor(sampleID);
-			if (location === 'picker-samples')
-				return ColorPickerSamples.getSampleColor(sampleID);
-			if (location === 'palette-samples')
-				return ColorPalette.getSampleColor(sampleID);
-		};
-
-		var setVoidSwitch = function setVoidSwitch() {
-			var void_sample = getElemById('void-sample');
-			void_sw = new StateButton(void_sample);
-			void_sw.subscribe( function (state) {
-				void_sample.setAttribute('data-active', state);
-				if (state === true) {
-					ColorPickerSamples.unsetActiveSample();
-					CanvasSamples.unsetActiveSample();
-				}
-			});
-		};
-
-		var unsetVoidSample = function unsetVoidSample() {
-			void_sw.unset();
-		};
-
-		var init = function init() {
-			controls = getElemById('controls');
-
-			var color = new Color();
-			color.setHSL(0, 51, 51);
-			UIColorPicker.setColor('picker', color);
-
-			setPickerDragAndDrop();
-			createPickerModeSwitch();
-			setVoidSwitch();
-		};
-
-		return {
-			init : init,
-			unsetVoidSample : unsetVoidSample,
-			getSampleColorFrom : getSampleColorFrom
-		};
-
-	})();
-
-	var init = function init() {
-		UIColorPicker.init();
-		InputSliderManager.init();
-		ColorInfo.init();
-		ColorPalette.init();
-		ColorPickerSamples.init();
-		CanvasSamples.init();
-		Tool.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-
-
- -

{{CSSRef}}

- -

Esta herramienta facilita crear, ajustar, y experimentar con colores personalizados para uso web. Además permite facilmente convertir entre varios formatos de color soportados por CSS, incluyendo: HEXA, RGB y HSL.  También soporta el control de alpha en los formatos RGB (rgba) y HSL (hsla).

- -

Cada color se presenta en los 3 formatos estándar de CSS mientras se ajusta; además,  basada en el color actual, se genera una paleta para HSL y HSV, así como para alpha. El recuadro "eyedropper" se puede cambiar entre los formatos HSL y HSC.

- -

{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

- -

 

diff --git a/files/es/web/css/css_colors/index.html b/files/es/web/css/css_colors/index.html deleted file mode 100644 index ef36d7954b..0000000000 --- a/files/es/web/css/css_colors/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: CSS Colors -slug: Web/CSS/CSS_Colors -tags: - - CSS - - CSS Colors - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Color -translation_of_original: Web/CSS/CSS_Colors ---- -
{{CSSRef}}
- -

Los colores CSS son un módulo de CSS que trabaja con colores, tipos de colores y transparencias.

- -

Referencia

- -

Propiedades

- -
-
    -
  • {{cssxref("color")}}
    • -
  • {{cssxref("opacity")}}
    • -
-
- -

Tipos de datos CSS

- -

{{cssxref("<color>")}}

- -

Guías

- -

Ninguna.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
- -

Compatibilidad con navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
-
- -

Ver también

- -
    -
  • En CSS, las gradientes no son colores sino imágenes.
    • -
diff --git a/files/es/web/css/css_columns/index.html b/files/es/web/css/css_columns/index.html new file mode 100644 index 0000000000..949f2eca71 --- /dev/null +++ b/files/es/web/css/css_columns/index.html @@ -0,0 +1,112 @@ +--- +title: Columnas CSS +slug: Web/CSS/Columnas_CSS +tags: + - CSS + - Referencia CSS + - Visión general +translation_of: Web/CSS/CSS_Columns +--- +
{{CSSRef}}
+ +

Columnas CSS es un módulo de CSS que define un diseño multicolumna, permitiendo indicar cómo debe fluir el contenido a través de las columnas y cómo manejar reglas y separaciones.

+ +

Referencia

+ +

Propiedades CSS

+ +
+
    +
  • {{cssxref("break-after")}}
    • +
  • {{cssxref("break-before")}}
    • +
  • {{cssxref("break-inside")}}
    • +
  • {{cssxref("column-count")}}
    • +
  • {{cssxref("column-fill")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("column-rule")}}
    • +
  • {{cssxref("column-rule-color")}}
    • +
  • {{cssxref("column-rule-style")}}
    • +
  • {{cssxref("column-rule-width")}}
    • +
  • {{cssxref("column-span")}}
    • +
  • {{cssxref("column-width")}}
    • +
  • {{cssxref("columns")}}
    • +
+
+ +

Guías

+ +
+
Diseños multicolumna con CSS
+
Tutorial paso a paso sobre cómo desarrollar diseños de varias columnas.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Multicol')}}{{Spec2('CSS3 Multicol')}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}} {{property_prefix('-webkit')}}{{CompatGeckoDesktop(9)}}{{property_prefix('-moz')}}1011.10
+ 15{{property_prefix('-webkit')}}		3.0 (522){{property_prefix('-webkit')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{property_prefix('-webkit')}}{{compatGeckoMobile(22)}}{{property_prefix('-moz')}}1011.5
+ 32{{property_prefix('-webkit')}}		3.2{{property_prefix('-webkit')}}
+
diff --git a/files/es/web/css/css_columns/using_multi-column_layouts/index.html b/files/es/web/css/css_columns/using_multi-column_layouts/index.html new file mode 100644 index 0000000000..8eed415ee2 --- /dev/null +++ b/files/es/web/css/css_columns/using_multi-column_layouts/index.html @@ -0,0 +1,68 @@ +--- +title: Columnas con CSS-3 +slug: Columnas_con_CSS-3 +tags: + - CSS + - Todas_las_Categorías +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +--- +

+

+

Introducción

+

Cuando leemos un texto, las líneas muy largas resultan incómodas. Si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas (al ir de un extremo al otro de la página). Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos. Por desgracia esto no es posible con HTML y CSS-2, a no ser que fuerces la ruptura de las columnas en puntos fijos, limites en gran medida el código a utilizar, o uses scripts complejos. +

El borrador de CSS-3 propone algunas nuevas propiedades para dar respuesta a esta necesidad. En Firefox 1.5 y superior hemos implementado algunas de estas propiedades para comportarnos según lo descrito en el borrador de CSS-3 (con una excepción explicada abajo)

El blog de Robert O'Callahan  usa columnas CSS, pruébalo con Firefox 1.5 +

+

Usar Columnas

+

Columnas, Count y Width

+

Dos propiedades CSS Controlan el número (Count) y el ancho (Width) de las columnas: -moz-column-count y -moz-column-width. +

-moz-column-count indica el número concreto de columnas a crear. Por ejemplo: +

+
<div style="-moz-column-count:2; -moz-column-gap: 1em;">
+Cuando leemos un texto las líneas muy largas resultan incómodas, si son
+demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
+de la línea en la que estabas. Por ello, pensando en los usuarios con
+monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
+en columnas, más o menos, como hacen los periódicos.</div>
+
+

Mostrará el contenido en dos columnas (si usas Firefox 1.5 o superior): +

+
Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.
+

-moz-column-width fija la anchura mínima de las columnas. Si no se indica un -moz-column-count, entonces el navegador creará automáticamente tantas columnas (con la anchura indicada) como sea posible en el espacio disponible.

+
<div style="-moz-column-width:20em; -moz-column-gap: 1em;">
+Cuando leemos un texto las líneas muy largas resultan incómodas, si son
+demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
+de la línea en la que estabas. Por ello, pensando en los usuarios con
+monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
+en columnas, más o menos, como hacen los periódicos.</div>
+
+

Se visualizará así: +

+
Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.
+

Los detalles exactos son descritos en El borrador de CSS3. +

En un bloque multicolumna, el contenido fluye automáticamente de una columna a otra según sea necesario. Todas las funcionalidades de HTML, CSS, y DOM están soportadas dentro de las columnas, tanto al editar como al imprimir. +

+

Equilibrado de altura

+

El borrador de CSS3 especifica que la altura de las columnas debe estar equilibrada, es decir, el navegador debe definir automáticamente la altura máxima de las columnas de modo que la altura del contenido en cada columna sea más o menos igual. Firefox lo hace.

Sin embargo, en algunas situaciones puede ser útil fijar explícitamente la altura máxima de las columnas, y entonces se empiezan a meter los contenidos en la primera columna y se van creando tantas columnas como sea necesario, posiblemente desbordando por la derecha. Por ejemplo, en http://iht.com/ los artículos hacen esto (usando scripts). Por lo tanto extendemos el borrador de modo que si se indica la propiedad CSS height en un bloque multicolumnas, se permite que cada columna tenga esa altura -y no más- antes de agregar la siguiente columna. Esto permite una composición mucho más eficiente.

+

Espacio entre Columnas

+

Por defecto, cada columna está tocando la columna de al lado. Normalmente esto no es lo más apropiado. Se puede utilizar el padding de las columnas para corregirlo, pero normalmente lo más fácil será aplicar la propiedad -moz-column-gap al bloque con multicolumna:

+
<div style="-moz-column-width:20em; -moz-column-gap:2em;">
+Cuando leemos un texto las líneas muy largas resultan incómodas, si son
+demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
+de la línea en la que estabas. Por ello, pensando en los usuarios con
+monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
+en columnas, más o menos, como hacen los periódicos.</div>
+
+

Se visualizará así: +

+
Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.
+

Degradado elegante

+

La propiedad -moz-column será ignorada por los navegadores que no la soporten, por lo tanto, es relativamente fácil crear un diseño que en esos navegadores muestre una sola columna, y al mismo tiempo utilice multi-columnas en Firefox 1.5. +

+

Conclusión

+

Las columnas CSS3 son un nuevo método básico de disposición que ayudará a los desarrolladores Web a aprovechar mejor las condiciones reales de la pantalla. Los desarrolladores imaginativos podrán encontrarle muchas aplicaciones, especialmente a la característica de equilibrado automático y dinámico de la altura.

+

Referencias adicionales

+ +

Categorías +

interwiki links +

{{ languages( { "en": "en/CSS3_Columns", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_Columns", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }} diff --git a/files/es/web/css/css_conditional_rules/index.html b/files/es/web/css/css_conditional_rules/index.html new file mode 100644 index 0000000000..59c2a9b328 --- /dev/null +++ b/files/es/web/css/css_conditional_rules/index.html @@ -0,0 +1,99 @@ +--- +title: CSS Reglas Condicionales +slug: Web/CSS/CSS_Reglas_Condicionales +tags: + - CSS + - Referencia +translation_of: Web/CSS/CSS_Conditional_Rules +--- +
{{CSSRef}}
+ +

Las Reglas Condicionales (At-rules) es un módulo de CSS que permite definir un conjunto de reglas que solo aplicarán con base en las capacidades del procesador o del documento al cual la hoja de estilos está siendo aplicada.

+ +

Referencia

+ +

Reglas condicionales

+ +
+
    +
  • {{cssxref("@document")}}
    • +
  • {{cssxref("@media")}}
    • +
  • {{cssxref("@supports")}}
    • +
  • {{cssxref("@import")}}
    • +
+
+ +

Guías

+ +

None.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Definición Inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CatacterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CatacterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..38e89c7813 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,227 @@ +--- +title: Conceptos Básicos de flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación. Este artículo hace un repaso de las principales características de flexbox, las que exploraremos con mayor detalle en el resto de estas guías.

+ +

Cuando describimos a flexbox como unidimensional destacamos el hecho que flexbox maneja el layout en una sola dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo bidimensional del Grid Layout de CSS, el cual controla columnas y filas a la vez.

+ +

Los dos ejes de flexbox

+ +

Cuando trabajamos con flexbox necesitamos pensar en términos de dos ejes — el eje principal y el eje cruzado. El eje principal está definido por la propiedad {{cssxref("flex-direction")}}, y el eje cruzado es perpendicular a este. Todo lo que hacemos con flexbox está referido a estos dos ejes, por lo que vale la pena entender cómo trabajan desde el principio.

+ +

El eje principal

+ +

El eje principal está definido por flex-direction, que posee cuatro posibles valores:

+ +
    +
  • row
    • +
  • row-reverse
    • +
  • column
    • +
  • column-reverse
    • +
+ +

Si elegimos row o row-reverse, el eje principal correrá a lo largo de la fila según la dirección de la línea .

+ +

If flex-direction is set to row the main axis runs along the row in the inline direction.

+ +

Al elegir column o column-reverse el eje principal correrá desde el borde superior de la página hasta el final — según la dirección del bloque.

+ +

If flex-direction is set to column the main axis runs in the block direction.

+ +

El eje cruzado

+ +

El eje cruzado va perpendicular al eje principal, y por lo tanto si flex-direction (del eje principal) es row o row-reverse el eje cruzado irá por las columnas.

+ +

If flex-direction is set to row then the cross axis runs in the block direction.

+ +

Si el eje principal es column o column-reverse entonces el eje cruzado corre a lo largo de las filas.

+ +

If flex-direction is set to column then the cross axis runs in the inline direction.

+ +

Entender cuál eje es cuál es importante cuando empezamos a mirar la alineación y justificación flexible de los ítems; flexbox posee propiedades que permiten alinear y justificar el contenido sobre un eje o el otro.

+ +

Líneas de inicio y de fin

+ +

Otra área vital de entendimiento es cómo flexbox no hace suposiciones sobre la manera de escribir del documento. En el pasado, CSS estaba muy inclinado hacia el modo de escritura horizontal y de izquierda a derecha. Los métodos modernos de layout acogen la totalidad de modos de escritura así que no es necesario asumir que una línea de texto empezará arriba del documento y correrá de izquierda a derecha, con nuevas líneas dispuestas una abajo de la otra.

+ +

Puede leer más acerca de la relación que hay entre flexbox y la especificación de los Modos de Escritura en un artículo posterior, sin embargo la siguiente descripción debería ayudar para explicar porqué no se habla de izquierda y derecha ni de arriba o abajo a la hora de describir la dirección en la que fluyen los ítems flex.

+ +

Si flex-direction es row y estoy trabajando en español, entonces el margen inicial del eje principal quedará a la izquierda, y el margen final a la derecha.

+ +

Working in English the start edge is on the left.

+ +

Si fuera a trabajar en árabe, entonces el margen inicial de mi eje principal quedaría a la derecha y el margen final a la izquierda.

+ +

The start edge in a RTL language is on the right.

+ +

En ambos casos el margen inicial del eje cruzado estará en el extremo superior del contenedor flex y el margen final en el extremo inferior, ya que ambos idiomas tiene un modo de escritura horizontal.

+ +

Después de un tiempo, pensar en inicial y final en vez de izquierda y derecha se hará natural, y será útil cuando interactúe con otros métodos de layout tales como el CSS Grid Layout que sigue los mismos patrones.

+ +

El contenedor flex

+ +

Un área del documento que contiene un flexbox es llamada contendedor flex. Para crear un contenedor flex, establecemos la propiedad del área del contenedor {{cssxref("display")}} como flex o inline-flex. Tan pronto como hacemos esto, los hijos directos de este contenedor se vuelven ítems flex. Como con todas las propiedades de CSS, se definen algunos valores iniciales, así que cuando creemos un contenedor flex todos los ítems flex contenidos se comportarán de la siguiente manera.

+ +
    +
  • Los ítems se despliegan sobre una fila (la propiedad flex-direction por defecto es row).
    • +
  • Los ítems empiezan desde el margen inicial sobre el eje principal.
    • +
  • Los ítems no se ajustan en la dimensión principal, pero se pueden contraer.
    • +
  • Los ítems se ajustarán para llenar el tamaño del eje cruzado.
    • +
  • La propiedad {{cssxref("flex-basis")}} es definida como auto.
    • +
  • La propiedad {{cssxref("flex-wrap")}} es definida como nowrap.
    • +
+ +

El resultado es que todos los ítems se alinearán en una solo fila, usando el tamaño del contenedor como su tamaño en el eje principal. Si hay más ítems de los que caben en el contenedor, estos no pasarán más abajo si no que sobrepasarán el margen. Si hay ítems más altos que otros, todos los ítems serán ajustados en el eje cruzado para alcanzar al mayor.

+ +

Se puede ver en el ejercicio en vivo de abajo cómo luce. Intente editar el ítem o añadir ítems adicionales para así probar el comportamiento inicial de flexbox.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

+ +

Cambiar flex-direction

+ +

Al añadir la propiedad {{cssxref("flex-direction")}} en el contenedor flex nos permite cambiar la dirección de cómo los ítems son desplegados. Colocando flex-direction: row-reverse se mantendrá el despliegue a lo largo de la fila, sin embargo el inicio y final quedarán al revés del original.

+ +

Si cambiamos flex-direction a column el eje principal se cambiará y los ítems aparecerán en una columna. Colocando column-reverse las líneas de inicio y fin serán nuevamente puestas al revés.

+ +

El ejemplo en vivo de abajo tiene flex-direction puesto como row-reverse. Pruebe los otros valores — row, column y column-reverse — para ver qué sucede con el contenido.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+ +

Contenedores flex Multi-línea con flex-wrap

+ +

Si bien flexbox es un modelo unidimensional, es posible lograr que nuestros ítems flex sean repartidos en varías líneas. Haciendo esto, se deberá considerar cada línea como un nuevo contenedor flex. Cualquier distribución del espacio solo sucederá dentro de esa línea, sin referenciar las líneas colaterales.

+ +

Para lograr repartirse en varias líneas añada la propiedad {{cssxref("flex-wrap")}} con el valor wrap. Cuando los ítems sean demasiados para desplegarlos en una línea, serán repartidos en la línea siguiente. El ejemplo en vivo de abajo contiene ítems que se les ha asignando un ancho, donde el ancho total de los ítems excede al del contenedor flex. Cuando flex-wrap se coloca como wrap, los ítems se repartirán. Al colocarlo como nowrap, el cual es el valor inicial, estos se contraerán para calzar con el contenedor ya que usan los valores iniciales de flexbox que permiten que los ítems se contraigan. Al usar nowrap los ítems podrían salirse del margen si estos no pudieran contraerse, o no contraerse lo suficiente para ser calzados.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+ +

La abreviatura flex-flow

+ +

Se pueden combinar las propiedades flex-direction y flex-wrap en la abreviatura {{cssxref("flex-flow")}} . El primer valor especificado es flex-direction y el segundo valor es flex-wrap.

+ +

En el ejemplo en vivo de abajo intente cambiar el primer valor por uno de los valores permitidos para flex-direction - row, row-reverse, column o column-reverse, y cambie también el segundo valor por wrap y nowrap.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+ +

Propiedades aplicadas a los ítems flex

+ +

Para obtener más control sobre los ítems flex podemos apuntarlos directamente. Hacemos esto a través de tres propiedades:

+ +
    +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
+ +

Daremos un breve vistazo a estas propiedades en este resumen, y en un próximo artículo ahondaremos sobre su comportamiento.

+ +

Antes de darle sentido a estas propiedades debemos considerar el concepto de espacio disponible. Lo que hacemos cuando cambiamos el valor de alguna de estas propiedades es cambiar la forma que se distribuye el espacio disponible entre nuestros ítems. Este concepto de espacio disponible es también importante cuando veamos la alineación de ítems.

+ +

Si tenemos tres ítems con un ancho de 100 pixeles en un contenedor de 500 pixeles de ancho, entonces el espacio que se necesita para colocar nuestros ítems es de 300 pixeles. Esto deja 200 pixeles de espacio disponible. Si no cambiamos los valores iniciales entonces flexbox colocará ese espacio después del último ítem.

+ +

This flex container has available space after laying out the items.

+ +

Si en cambio quisiéramos que los ítems crecieran para llenar ese espacio, entonces necesitaremos un método para distribuir el espacio sobrante entre los ítems. Es justo lo que harán las propiedades flex que aplicaremos a dichos ítems.

+ +

La propiedad flex-basis

+ +

Con flex-basis se define el tamaño de un ítem en términos del espacio que deja como espacio disponible. El valor inicial de esta propiedad es auto — en este caso el navegador revisa si los ítems definen un tamaño. En el ejemplo de arriba, todos los ítems tienen un ancho de 100 pixeles así que este es usado como flex-basis.

+ +

Si los ítems no tiene un tamaño entonces el tamaño de su contenido es usado como flex-basis. Y por eso, apenas declarado display: flex en el padre a fin de crear ítems flex, todos estos ítems se ubicaron en una sola fila y tomaron solo el espacio necesario para desplegar su contenido.

+ +

La propiedad flex-grow

+ +

Con la propiedad flex-grow definida como un entero positivo, los ítems flex pueden crecer en el eje principal a partir de flex-basis. Esto hará que el ítem se ajuste y tome todo el espacio disponible del eje, o una proporción del espacio disponible si otro ítem también puede crecer.

+ +

Si le damos a todos los ítems del ejemplo anterior un valor flex-grow de 1 entonces el espacio disponible en el contenedor flex será compartido igualitariamente entre estos ítems y se ajustarán para llenar el contenedor sobre el eje principal.

+ +

Podemos usar flex-grow apropiadamente para distribuir el espacio en proporciones. Si otorgamos al primer ítem un valor flex-grow de 2 y a los otros un valor de 1, entonces 2 partes serán dadas al primer ítem  (100px de 200px en el caso del ejemplo de arriba) y 1 parte para cada uno de los restantes (cada uno con 50px de los 200px en total).

+ +

La propiedad flex-shrink

+ +

Así como la propiedad flex-grow se encarga de añadir espacio sobre el eje principal, la propiedad flex-shrink controla como se contrae. Si no contamos con suficiente espacio en el contenedor para colocar los ítems y flex-shrink posee un valor entero positivo, el ítem puede contraerse a partir de flex-basis. Así como podemos asignar diferentes valores de flex-grow con el fin que un ítem se expanda más rápido que otros — un ítem con un valor más alto de flex-shrink se contraerá más rápido que sus hermanos que poseen valores menores.

+ +

El tamaño mínimo del ítem tendrá que ser considerado cuando se determine un valor de contracción que pueda funcionar, esto significa que flex-shrink tiene el potencial de comportarse menos consistentemente que flex-grow . Por lo tanto, haremos una revisión más detallada de cómo este algoritmo trabaja en el artículo Controlling Ratios de los ítems sobre el eje principal.

+ +
+

Nótese que los valores de flex-grow y flex-shrink son proporciones. Típicamente si pusiéramos todos los ítems flex: 1 1 200px y luego quisiéramos que un ítem creciera al doble, deberíamos ponerlo con flex: 2 1 200px. Aunque igualmente podemos colocar flex: 10 1 200px y flex: 20 1 200px si quisiéramos.

+
+ +

Valores abreviados para las propiedades flex

+ +

Difícilmente veremos la propiedades flex-grow, flex-shrink y flex-basis usadas individualmente; si no que han sido combinadas en la abreviación {{cssxref("flex")}} . La abreviación flex permite establecer los tres valores en este orden: flex-grow, flex-shrink, flex-basis.

+ +

El ejemplo en vivo de más abajo permite probar los diferentes valores de la abreviación flex; recuerde que el primer valor es flex-grow. Dándole un valor positivo significa que el ítem puede crecer. El segundo es flex-shrink — con un valor positivo los ítems pueden contraerse. El valor final es flex-basis; este es el valor que los ítems usan como valor base para crecer y contraerse.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}

+ +

Hay además algunas abreviaturas de valores que cubren la mayoría de los casos de uso. Se ven con frecuencia utilizados en tutoriales, y en muchos casos es todo lo que necesitamos usar. Los valores predefinidos son los siguientes:

+ +
    +
  • flex: initial
    • +
  • flex: auto
    • +
  • flex: none
    • +
  • flex: <positive-number>
    • +
+ +

Fijando flex: initial el ítem se restablece con los valores iniciales de Flexbox. Es lo mismo que flex: 0 1 auto. En este caso el valor de flex-grow is 0, así que los ítems no crecerán más de su tamaño flex-basis . El valor flex-shrink es 1, así que los ítems pueden contraerse si es necesario en vez de salirse de los márgenes. El valor de flex-basis es auto. Los ítems pueden definir un tamaño en la dimensión del eje principal, o bien obtener su tamaño por el contenido del los mismos.

+ +

Usar flex: auto es lo mismo que usar flex: 1 1 auto , es como con flex:initial pero en este caso los ítems pueden crecer y llenar el contendor así como encoger si se requiere.

+ +

Al usar flex: none se crearán ítems flex totalmente inflexibles. Es como escribir flex: 0 0 auto. Los ítems no pueden ni crecer ni encoger pero serán colocados usando flexbox con flex-basis en auto.

+ +

Una abreviación que es común en tutoriales es flex: 1 o flex: 2  y más. Es como usar flex: 1 1 0. Los ítems pueden crecer o encoger con un flex-basis de 0.

+ +

Pruebe estas abreviaciones de valores en el ejemplo en vivo de abajo.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 480)}}

+ +

Alineación, justificación y distribución del espacio libre entre ítems

+ +

Una característica clave de flexbox es la capacidad de alinear y justificar ítems sobre los ejes principal y cruzado, y distribuir el espacio entre los ítems flex.

+ +

align-items

+ +

La propiedad {{cssxref("align-items")}} alineará los ítems sobre el eje cruzado.

+ +

El valor inicial para esta propiedad es stretch razón por la cual los ítems se ajustan por defecto a la altura de aquel más alto. En efecto se ajustan para llenar el contenedor flex — el ítem más alto define la altura de este.

+ +

En cambio definimos align-items como flex-start para que los ítems se alineen al comienzo del contenedor flex, flex-end para alinearlos al final, o center para alinearlos al centro. Intente esto en el ejemplo en vivo — He definido en el contenedor flex una altura para que se aprecie que se pueden mover libremente dentro del contenedor. Vea lo que sucede si se coloca el valor align-items como:

+ +
    +
  • stretch
    • +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+ +

justify-content

+ +

La propiedad {{cssxref("justify-content")}} es usada para alinear los ítems en el eje principal, cuyo flex-direction define la dirección del flujo. El valor inicial es flex-start que alineará los ítems al inicio del margen del contenedor, pero también se podría definir como flex-end para alinearlos al final, o center para alinearlos al centro.

+ +

También podemos usar space-between para tomar todo el espacio sobrante después de que los ítems hayan sido colocados, y distribuir de forma pareja los ítems para que haya un espacio equitativo entre cada ítem. O bien, usamos el valor space-around para crear un espacio equitativo a la derecha e izquierda de cada ítem.

+ +

Pruebe con los siguientes valores dejustify-content en el ejemplo en vivo:

+ +
    +
  • space-evenly
    • +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
  • space-around
    • +
  • space-between
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+ +

En un próximo artículo ahondaremos sobre estas propiedades, con el fin de obtener mejor entendimiento de cómo funcionan. Sin embargo, estos sencillos ejemplos serán útiles para la mayoría de los casos de uso.

+ +

Próximos pasos

+ +

Al final de este artículo usted debería tener un entendimiento de las características básicas de Flexbox. En el próximo artículo veremos cómo esta especificación encaja con las otras partes de CSS.

diff --git a/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html deleted file mode 100644 index 9048cbb739..0000000000 --- a/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Casos de uso típicos de Flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Casos_de_uso_tipicos_de_Flexbox. -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox ---- -

{{CSSRef}}

- -

En esta guía, analizaremos algunos de los casos de uso comunes de flexbox, en aquellos lugares donde tiene más sentido que otro método de diseño.

- -

¿Por qué elegir flexbox?

- -

En un mundo perfecto de compatibilidad con navegadores, la razón por la que elegiría utilizar flexbox es porque desea colocar una colección de elementos en una dirección u otra.  Estos son los usos para los que fue diseñado flexbox. Puede leer más sobre la diferencia entre flexbox y CSS Grid Layout en Relación de Flexbox con respecto a otros métodos de diseño, donde discutimos cómo encaja flexbox en la imagen general de CSS Layout.

- -

En realidad, a menudo también usamos Flexbox para trabajos que Grid Layout podría realizar mejor, como un respaldo para Grid, y también para obtener capacidades de alineación. Esto es algo que puede cambiar una vez que se implemente Box Alignment en Block Layout. En esta guía analizo algunas de las cosas típicas que podría usar flexbox hoy día.

- - - -

Un patrón común para la navegación es tener una lista de elementos mostrada como una barra horizontal. Este patrón, tan básico como parece, era difícil de lograr antes de flexbox. Este es el ejemplo más simple de flexbox, y podría considerarse el caso ideal de uso de flexbox.

- -

Cuando tenemos un conjunto de elementos que queremos mostrar horizontalmente, podemos terminar con espacio adicional. Necesitamos decidir qué hacer con ese espacio y tener un par de opciones. O bien mostramos el espacio fuera de los elementos, los separamos, por consiguiente, con espacios en blanco entre ellos o alrededor de ellos, o absorbemos el espacio adicional dentro de los elementos, por lo tanto, necesitamos un método para permitir que los elementos crezcan y ocupen este espacio.

- -

Espacio distribuido fuera de los elementos

- -

Para distribuir el espacio entre o alrededor de los elementos, usamos las propiedades de alineación en flexbox y la propiedad {{cssxref ("justify-content")}}. Puede leer más sobre esta propiedad en Alinear elementos en un contenedor flexible, que trata sobre la alineación de elementos en el eje principal.

- -

En el siguiente ejemplo en vivo, mostramos los elementos en su tamaño natural y utilizando justify-content: space-between crea cantidades iguales de espacio entre los elementos. Puede cambiar la forma en que se distribuye el espacio utilizando el valor space-around, o, donde sea compatible, space-evenly. También puede usar flex-start para colocar el espacio al final de los elementos, flex-end para colocarlo delante de ellos, o center para centrar los elementos de navegación.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

- -

Espacio distribuido dentro de los elementos

- -

Un patrón diferente para la navegación sería distribuir el espacio disponible dentro de los elementos, en lugar de crear un espacio entre ellos. En este caso, utilizaríamos las propiedades {{cssxref ("flex")}} para permitir que los elementos crezcan y se reduzcan en proporción entre sí, como se describe en Control la proporción de elementos flexibles a lo largo del eje principal.

- -

Si quisiera que todos mis elementos de navegación tuvieran el mismo ancho, entonces podría usar flex: auto, que es la abreviatura de flex: 1 1 auto, todos los elementos crecen y se contraen desde una flex-basis de auto. Esto significaría que el elemento más largo tendría más espacio.

- -

En el ejemplo en vivo a continuación, intente cambiar flex: auto a flex: 1. Esta es la abreviatura de flex: 1 1 0 y hace que todos los elementos se vuelvan del mismo ancho, ya que están trabajando desde una flex-basis de 0 permitiendo que todo el espacio sea distribuido uniformemente.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

- - - -

Otra forma de alinear elementos en el eje principal es usar márgenes automáticos. Esto permite el patrón de diseño de una barra de navegación donde un grupo de elementos se alinean a la izquierda y otro grupo se alinea a la derecha.

- -

Aquí estamos utilizando la técnica de márgenes automáticos descrita en Uso de márgenes automáticos para la alineación del eje principal. Los elementos se alinean en el eje principal con flex-start ya que este es el comportamiento inicial de flexbox, y estamos alineando el elemento de la derecha dándole un margen izquierdo de auto. Puede mover la clase de un elemento a otro para cambiar dónde ocurre la división.

- -

También en este ejemplo, estamos utilizando márgenes en los elementos flexibles para crear un espacio entre los elementos, y un margen negativo en el contenedor para que los elementos aún permanezcan a nivel con los bordes derecho e izquierdo. Hasta que las propiedades gap de la especificación de alineación de caja sea implementada en flexbox, debemos usar márgenes de esta manera si queremos crear un margen entre los elementos.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

- -

Centrar elemento

- -

Antes de flexbox, los desarrolladores bromeaban con que el problema más difícil en el diseño web era el centrado vertical. Esto ahora se ha hecho sencillo usando las propiedades de alineación en flexbox, como muestra el siguiente ejemplo en vivo.

- -

Puedes jugar con la alineación, alineando el elemento con el inicio con flex-start o al final con flex-end.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

- -

Es posible que en el futuro no tengamos que crear un contenedor en un contenedor flexible solo para centrar un solo elemento, ya que las propiedades de Alineación de cuadro se implementarán en última instancia en el diseño del bloque. Por ahora, sin embargo, si necesita centrar correctamente una cosa dentro de otra, flexbox es la forma de hacerlo. Como en el ejemplo anterior, convierta un contenedor en un contenedor flexible y luego utilice align-items en el elemento principal o apunte el propio elemento de flexión con align-self.

- - - -

Ya sea que use flexbox o CSS Grid para diseñar una lista de componentes de tarjeta, estos métodos de diseño solo funcionan en los elementos directos de los componentes flex o grid. Esto significa que si tiene cantidades variables de contenido, la tarjeta se extenderá hasta la altura del área de la cuadrícula o del contenedor flexible. Cualquier contenido interno usa un diseño de bloque regular, lo que significa que en una tarjeta con menos contenido, el pie de página subirá hasta la parte inferior del contenido en lugar de adherirse a la parte inferior de la tarjeta.

- -

Two card components showing that the internals of the component do not stretch with the wrapper.

- -

Flexbox puede resolver esto. Hacemos de la tarjeta un contenedor flexible, con  {{cssxref ("flex-direction")}} :column. A continuación, configuramos el área de contenido con flex: 1, que es la abreviatura de flex: 1 1 0; el elemento puede crecer y reducirse desde una base flexible de 0. Como este es el único elemento que puede crecer, ocupa todo el espacio disponible en el contenedor flexible y empuja el pie de página hacia abajo. Si elimina la propiedad flex del ejemplo en vivo, verá cómo el pie de página se mueve hacia arriba para sentarse directamente debajo del contenido.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

- -

Objetos multimedia

- -

El objeto multimedia es un patrón común en el diseño web: este patrón tiene una imagen u otro elemento a un lado y el texto a la derecha. Idealmente, un objeto multimedia debería poder voltearse, moviendo la imagen de izquierda a derecha.

- -

Vemos este patrón en todas partes, usado para comentarios, y en cualquier lugar que necesitamos para mostrar imágenes y descripciones. Con flexbox podemos permitir que la parte del objeto multimedia que contiene la imagen tome su información de tamaño de la imagen, y luego el cuerpo del objeto multimedia se flexione para ocupar el espacio restante.

- -

En el ejemplo en vivo a continuación puedes ver nuestro objeto multimedia. He usado las propiedades de alineación para alinear los elementos en el eje transversal con flex-start, y luego establezco el elemento flex .content a flex: 1. Al igual que nuestra columna del patrón de la tarjeta de diseño anterior, usar flex: 1 significa que esta parte de la tarjeta puede crecer.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

- -

Algunas de las cosas que podría querer probar en este ejemplo en vivo se relacionan con las diferentes formas en que podría desear restringir el objeto multimedia en su diseño.

- -

Para evitar que la imagen crezca demasiado, agregue un {{cssxref ("max-width")}} a la imagen. Como ese lado del objeto multimedia está usando los valores iniciales de flexbox, puede reducirse pero no crecer, y utiliza una flex-basis de auto. Cualquier {{cssxref ("ancho")}} o ancho máximo aplicado a la imagen se convertirá en la flex-basis.

- -
.image img {
-  max-width: 100px;
-}
-
- -

También puede permitir que ambos lados crezcan y se reduzcan en proporción. Si configura ambos lados a flex: 1, crecerán y se reducirán de una {{cssxref ("flex-basis")}} de 0, por lo que terminará con dos columnas de igual tamaño. Puede tomar el contenido como una guía y configurar ambos para flex: auto, en cuyo caso crecerían y se reducirían con el tamaño del contenido o cualquier tamaño aplicado directamente a los elementos de flexión, como el ancho de la imagen.

- -
.media .content {
-  flex: 1;
-  padding: 10px;
-}
-
-.image {
-  flex: 1;
-}
- -

También puede dar a cada lado diferentes factores {{cssxref ("flex-grow")}}, por ejemplo, configurando el lado con la imagen para flex: 1 y el lado del contenido para flex: 3. Esto significará que usan una flex-basis de 0, pero distribuye ese espacio a diferentes proporciones según el factor flex-grow que haya asignado. Las propiedades de flexión que utilizamos para hacer esto se describen en detalle en la guía Controlando las proporciones de elementos de flexión a lo largo del eje principal.

- -
.media .content {
-  flex: 3;
-  padding: 10px;
-}
-
-.image {
-  flex: 1;
-}
- -

Volteando el objeto multimedia

- -

Para cambiar la visualización del objeto multimedia de modo que la imagen esté a la derecha y el contenido a la izquierda, podemos usar la propiedad flex-direction configurada para row-reverse. El objeto multimedia ahora se muestra al revés. He logrado esto en el ejemplo en vivo agregando una clase flipped junto con la clase existente .media. Esto significa que puede ver cómo cambia la pantalla eliminando esa clase del html.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

- -

Controles de formulario

- -

Flexbox es particularmente útil cuando se trata de estilos de controles de formularios. Los formularios tienen muchas marcas y muchos elementos pequeños que normalmente queremos alinear entre sí. Un patrón común es tener un elemento {{htmlelement ("input")}} asociado con un {{htmlelement ("button")}}, tal vez para un formulario de búsqueda o donde simplemente desea que su visitante ingrese una dirección de correo electrónico.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

- -

Puede agregar una etiqueta o un icono a la izquierda tan fácilmente como hicimos clic en el botón derecho. He añadido una etiqueta y aparte, algunos estilos de color de fondo, no tuve que cambiar el diseño. El campo de entrada extensible ahora tiene un poco menos de espacio para actuar, pero utiliza el espacio izquierdo después que se representaron los dos elementos.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

- -

Patrones como este pueden hacer que sea mucho más fácil crear una biblioteca de elementos de formulario para su diseño, que se adapte fácilmente a los elementos adicionales que se agregan. Está aprovechando la flexibilidad de flexbox al mezclar elementos que no crecen con los que lo hacen.

- -

Conclusión

- -

Mientras explora los patrones anteriores, es de esperar que haya empezado a ver cómo puede pensar en la mejor manera de utilizar flexbox para lograr el resultado que desea. Muy a menudo tienes más de una opción. Mezcle elementos que no puedan estirarse con aquellos que pueden, use el contenido para informar el tamaño o permita que flexbox comparta espacio en proporción. Tu decides.

- -

Piense en la mejor manera de presentar el contenido que tiene y luego vea cómo flexbox u otros métodos de diseño pueden ayudarlo a lograrlo.

diff --git a/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html deleted file mode 100644 index 38e89c7813..0000000000 --- a/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: Conceptos Básicos de flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox ---- -
{{CSSRef}}
- -

El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación. Este artículo hace un repaso de las principales características de flexbox, las que exploraremos con mayor detalle en el resto de estas guías.

- -

Cuando describimos a flexbox como unidimensional destacamos el hecho que flexbox maneja el layout en una sola dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo bidimensional del Grid Layout de CSS, el cual controla columnas y filas a la vez.

- -

Los dos ejes de flexbox

- -

Cuando trabajamos con flexbox necesitamos pensar en términos de dos ejes — el eje principal y el eje cruzado. El eje principal está definido por la propiedad {{cssxref("flex-direction")}}, y el eje cruzado es perpendicular a este. Todo lo que hacemos con flexbox está referido a estos dos ejes, por lo que vale la pena entender cómo trabajan desde el principio.

- -

El eje principal

- -

El eje principal está definido por flex-direction, que posee cuatro posibles valores:

- -
    -
  • row
    • -
  • row-reverse
    • -
  • column
    • -
  • column-reverse
    • -
- -

Si elegimos row o row-reverse, el eje principal correrá a lo largo de la fila según la dirección de la línea .

- -

If flex-direction is set to row the main axis runs along the row in the inline direction.

- -

Al elegir column o column-reverse el eje principal correrá desde el borde superior de la página hasta el final — según la dirección del bloque.

- -

If flex-direction is set to column the main axis runs in the block direction.

- -

El eje cruzado

- -

El eje cruzado va perpendicular al eje principal, y por lo tanto si flex-direction (del eje principal) es row o row-reverse el eje cruzado irá por las columnas.

- -

If flex-direction is set to row then the cross axis runs in the block direction.

- -

Si el eje principal es column o column-reverse entonces el eje cruzado corre a lo largo de las filas.

- -

If flex-direction is set to column then the cross axis runs in the inline direction.

- -

Entender cuál eje es cuál es importante cuando empezamos a mirar la alineación y justificación flexible de los ítems; flexbox posee propiedades que permiten alinear y justificar el contenido sobre un eje o el otro.

- -

Líneas de inicio y de fin

- -

Otra área vital de entendimiento es cómo flexbox no hace suposiciones sobre la manera de escribir del documento. En el pasado, CSS estaba muy inclinado hacia el modo de escritura horizontal y de izquierda a derecha. Los métodos modernos de layout acogen la totalidad de modos de escritura así que no es necesario asumir que una línea de texto empezará arriba del documento y correrá de izquierda a derecha, con nuevas líneas dispuestas una abajo de la otra.

- -

Puede leer más acerca de la relación que hay entre flexbox y la especificación de los Modos de Escritura en un artículo posterior, sin embargo la siguiente descripción debería ayudar para explicar porqué no se habla de izquierda y derecha ni de arriba o abajo a la hora de describir la dirección en la que fluyen los ítems flex.

- -

Si flex-direction es row y estoy trabajando en español, entonces el margen inicial del eje principal quedará a la izquierda, y el margen final a la derecha.

- -

Working in English the start edge is on the left.

- -

Si fuera a trabajar en árabe, entonces el margen inicial de mi eje principal quedaría a la derecha y el margen final a la izquierda.

- -

The start edge in a RTL language is on the right.

- -

En ambos casos el margen inicial del eje cruzado estará en el extremo superior del contenedor flex y el margen final en el extremo inferior, ya que ambos idiomas tiene un modo de escritura horizontal.

- -

Después de un tiempo, pensar en inicial y final en vez de izquierda y derecha se hará natural, y será útil cuando interactúe con otros métodos de layout tales como el CSS Grid Layout que sigue los mismos patrones.

- -

El contenedor flex

- -

Un área del documento que contiene un flexbox es llamada contendedor flex. Para crear un contenedor flex, establecemos la propiedad del área del contenedor {{cssxref("display")}} como flex o inline-flex. Tan pronto como hacemos esto, los hijos directos de este contenedor se vuelven ítems flex. Como con todas las propiedades de CSS, se definen algunos valores iniciales, así que cuando creemos un contenedor flex todos los ítems flex contenidos se comportarán de la siguiente manera.

- -
    -
  • Los ítems se despliegan sobre una fila (la propiedad flex-direction por defecto es row).
    • -
  • Los ítems empiezan desde el margen inicial sobre el eje principal.
    • -
  • Los ítems no se ajustan en la dimensión principal, pero se pueden contraer.
    • -
  • Los ítems se ajustarán para llenar el tamaño del eje cruzado.
    • -
  • La propiedad {{cssxref("flex-basis")}} es definida como auto.
    • -
  • La propiedad {{cssxref("flex-wrap")}} es definida como nowrap.
    • -
- -

El resultado es que todos los ítems se alinearán en una solo fila, usando el tamaño del contenedor como su tamaño en el eje principal. Si hay más ítems de los que caben en el contenedor, estos no pasarán más abajo si no que sobrepasarán el margen. Si hay ítems más altos que otros, todos los ítems serán ajustados en el eje cruzado para alcanzar al mayor.

- -

Se puede ver en el ejercicio en vivo de abajo cómo luce. Intente editar el ítem o añadir ítems adicionales para así probar el comportamiento inicial de flexbox.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

- -

Cambiar flex-direction

- -

Al añadir la propiedad {{cssxref("flex-direction")}} en el contenedor flex nos permite cambiar la dirección de cómo los ítems son desplegados. Colocando flex-direction: row-reverse se mantendrá el despliegue a lo largo de la fila, sin embargo el inicio y final quedarán al revés del original.

- -

Si cambiamos flex-direction a column el eje principal se cambiará y los ítems aparecerán en una columna. Colocando column-reverse las líneas de inicio y fin serán nuevamente puestas al revés.

- -

El ejemplo en vivo de abajo tiene flex-direction puesto como row-reverse. Pruebe los otros valores — row, column y column-reverse — para ver qué sucede con el contenido.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

- -

Contenedores flex Multi-línea con flex-wrap

- -

Si bien flexbox es un modelo unidimensional, es posible lograr que nuestros ítems flex sean repartidos en varías líneas. Haciendo esto, se deberá considerar cada línea como un nuevo contenedor flex. Cualquier distribución del espacio solo sucederá dentro de esa línea, sin referenciar las líneas colaterales.

- -

Para lograr repartirse en varias líneas añada la propiedad {{cssxref("flex-wrap")}} con el valor wrap. Cuando los ítems sean demasiados para desplegarlos en una línea, serán repartidos en la línea siguiente. El ejemplo en vivo de abajo contiene ítems que se les ha asignando un ancho, donde el ancho total de los ítems excede al del contenedor flex. Cuando flex-wrap se coloca como wrap, los ítems se repartirán. Al colocarlo como nowrap, el cual es el valor inicial, estos se contraerán para calzar con el contenedor ya que usan los valores iniciales de flexbox que permiten que los ítems se contraigan. Al usar nowrap los ítems podrían salirse del margen si estos no pudieran contraerse, o no contraerse lo suficiente para ser calzados.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

- -

La abreviatura flex-flow

- -

Se pueden combinar las propiedades flex-direction y flex-wrap en la abreviatura {{cssxref("flex-flow")}} . El primer valor especificado es flex-direction y el segundo valor es flex-wrap.

- -

En el ejemplo en vivo de abajo intente cambiar el primer valor por uno de los valores permitidos para flex-direction - row, row-reverse, column o column-reverse, y cambie también el segundo valor por wrap y nowrap.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

- -

Propiedades aplicadas a los ítems flex

- -

Para obtener más control sobre los ítems flex podemos apuntarlos directamente. Hacemos esto a través de tres propiedades:

- -
    -
  • {{cssxref("flex-grow")}}
    • -
  • {{cssxref("flex-shrink")}}
    • -
  • {{cssxref("flex-basis")}}
    • -
- -

Daremos un breve vistazo a estas propiedades en este resumen, y en un próximo artículo ahondaremos sobre su comportamiento.

- -

Antes de darle sentido a estas propiedades debemos considerar el concepto de espacio disponible. Lo que hacemos cuando cambiamos el valor de alguna de estas propiedades es cambiar la forma que se distribuye el espacio disponible entre nuestros ítems. Este concepto de espacio disponible es también importante cuando veamos la alineación de ítems.

- -

Si tenemos tres ítems con un ancho de 100 pixeles en un contenedor de 500 pixeles de ancho, entonces el espacio que se necesita para colocar nuestros ítems es de 300 pixeles. Esto deja 200 pixeles de espacio disponible. Si no cambiamos los valores iniciales entonces flexbox colocará ese espacio después del último ítem.

- -

This flex container has available space after laying out the items.

- -

Si en cambio quisiéramos que los ítems crecieran para llenar ese espacio, entonces necesitaremos un método para distribuir el espacio sobrante entre los ítems. Es justo lo que harán las propiedades flex que aplicaremos a dichos ítems.

- -

La propiedad flex-basis

- -

Con flex-basis se define el tamaño de un ítem en términos del espacio que deja como espacio disponible. El valor inicial de esta propiedad es auto — en este caso el navegador revisa si los ítems definen un tamaño. En el ejemplo de arriba, todos los ítems tienen un ancho de 100 pixeles así que este es usado como flex-basis.

- -

Si los ítems no tiene un tamaño entonces el tamaño de su contenido es usado como flex-basis. Y por eso, apenas declarado display: flex en el padre a fin de crear ítems flex, todos estos ítems se ubicaron en una sola fila y tomaron solo el espacio necesario para desplegar su contenido.

- -

La propiedad flex-grow

- -

Con la propiedad flex-grow definida como un entero positivo, los ítems flex pueden crecer en el eje principal a partir de flex-basis. Esto hará que el ítem se ajuste y tome todo el espacio disponible del eje, o una proporción del espacio disponible si otro ítem también puede crecer.

- -

Si le damos a todos los ítems del ejemplo anterior un valor flex-grow de 1 entonces el espacio disponible en el contenedor flex será compartido igualitariamente entre estos ítems y se ajustarán para llenar el contenedor sobre el eje principal.

- -

Podemos usar flex-grow apropiadamente para distribuir el espacio en proporciones. Si otorgamos al primer ítem un valor flex-grow de 2 y a los otros un valor de 1, entonces 2 partes serán dadas al primer ítem  (100px de 200px en el caso del ejemplo de arriba) y 1 parte para cada uno de los restantes (cada uno con 50px de los 200px en total).

- -

La propiedad flex-shrink

- -

Así como la propiedad flex-grow se encarga de añadir espacio sobre el eje principal, la propiedad flex-shrink controla como se contrae. Si no contamos con suficiente espacio en el contenedor para colocar los ítems y flex-shrink posee un valor entero positivo, el ítem puede contraerse a partir de flex-basis. Así como podemos asignar diferentes valores de flex-grow con el fin que un ítem se expanda más rápido que otros — un ítem con un valor más alto de flex-shrink se contraerá más rápido que sus hermanos que poseen valores menores.

- -

El tamaño mínimo del ítem tendrá que ser considerado cuando se determine un valor de contracción que pueda funcionar, esto significa que flex-shrink tiene el potencial de comportarse menos consistentemente que flex-grow . Por lo tanto, haremos una revisión más detallada de cómo este algoritmo trabaja en el artículo Controlling Ratios de los ítems sobre el eje principal.

- -
-

Nótese que los valores de flex-grow y flex-shrink son proporciones. Típicamente si pusiéramos todos los ítems flex: 1 1 200px y luego quisiéramos que un ítem creciera al doble, deberíamos ponerlo con flex: 2 1 200px. Aunque igualmente podemos colocar flex: 10 1 200px y flex: 20 1 200px si quisiéramos.

-
- -

Valores abreviados para las propiedades flex

- -

Difícilmente veremos la propiedades flex-grow, flex-shrink y flex-basis usadas individualmente; si no que han sido combinadas en la abreviación {{cssxref("flex")}} . La abreviación flex permite establecer los tres valores en este orden: flex-grow, flex-shrink, flex-basis.

- -

El ejemplo en vivo de más abajo permite probar los diferentes valores de la abreviación flex; recuerde que el primer valor es flex-grow. Dándole un valor positivo significa que el ítem puede crecer. El segundo es flex-shrink — con un valor positivo los ítems pueden contraerse. El valor final es flex-basis; este es el valor que los ítems usan como valor base para crecer y contraerse.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}

- -

Hay además algunas abreviaturas de valores que cubren la mayoría de los casos de uso. Se ven con frecuencia utilizados en tutoriales, y en muchos casos es todo lo que necesitamos usar. Los valores predefinidos son los siguientes:

- -
    -
  • flex: initial
    • -
  • flex: auto
    • -
  • flex: none
    • -
  • flex: <positive-number>
    • -
- -

Fijando flex: initial el ítem se restablece con los valores iniciales de Flexbox. Es lo mismo que flex: 0 1 auto. En este caso el valor de flex-grow is 0, así que los ítems no crecerán más de su tamaño flex-basis . El valor flex-shrink es 1, así que los ítems pueden contraerse si es necesario en vez de salirse de los márgenes. El valor de flex-basis es auto. Los ítems pueden definir un tamaño en la dimensión del eje principal, o bien obtener su tamaño por el contenido del los mismos.

- -

Usar flex: auto es lo mismo que usar flex: 1 1 auto , es como con flex:initial pero en este caso los ítems pueden crecer y llenar el contendor así como encoger si se requiere.

- -

Al usar flex: none se crearán ítems flex totalmente inflexibles. Es como escribir flex: 0 0 auto. Los ítems no pueden ni crecer ni encoger pero serán colocados usando flexbox con flex-basis en auto.

- -

Una abreviación que es común en tutoriales es flex: 1 o flex: 2  y más. Es como usar flex: 1 1 0. Los ítems pueden crecer o encoger con un flex-basis de 0.

- -

Pruebe estas abreviaciones de valores en el ejemplo en vivo de abajo.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 480)}}

- -

Alineación, justificación y distribución del espacio libre entre ítems

- -

Una característica clave de flexbox es la capacidad de alinear y justificar ítems sobre los ejes principal y cruzado, y distribuir el espacio entre los ítems flex.

- -

align-items

- -

La propiedad {{cssxref("align-items")}} alineará los ítems sobre el eje cruzado.

- -

El valor inicial para esta propiedad es stretch razón por la cual los ítems se ajustan por defecto a la altura de aquel más alto. En efecto se ajustan para llenar el contenedor flex — el ítem más alto define la altura de este.

- -

En cambio definimos align-items como flex-start para que los ítems se alineen al comienzo del contenedor flex, flex-end para alinearlos al final, o center para alinearlos al centro. Intente esto en el ejemplo en vivo — He definido en el contenedor flex una altura para que se aprecie que se pueden mover libremente dentro del contenedor. Vea lo que sucede si se coloca el valor align-items como:

- -
    -
  • stretch
    • -
  • flex-start
    • -
  • flex-end
    • -
  • center
    • -
- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

- -

justify-content

- -

La propiedad {{cssxref("justify-content")}} es usada para alinear los ítems en el eje principal, cuyo flex-direction define la dirección del flujo. El valor inicial es flex-start que alineará los ítems al inicio del margen del contenedor, pero también se podría definir como flex-end para alinearlos al final, o center para alinearlos al centro.

- -

También podemos usar space-between para tomar todo el espacio sobrante después de que los ítems hayan sido colocados, y distribuir de forma pareja los ítems para que haya un espacio equitativo entre cada ítem. O bien, usamos el valor space-around para crear un espacio equitativo a la derecha e izquierda de cada ítem.

- -

Pruebe con los siguientes valores dejustify-content en el ejemplo en vivo:

- -
    -
  • space-evenly
    • -
  • flex-start
    • -
  • flex-end
    • -
  • center
    • -
  • space-around
    • -
  • space-between
    • -
- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

- -

En un próximo artículo ahondaremos sobre estas propiedades, con el fin de obtener mejor entendimiento de cómo funcionan. Sin embargo, estos sencillos ejemplos serán útiles para la mayoría de los casos de uso.

- -

Próximos pasos

- -

Al final de este artículo usted debería tener un entendimiento de las características básicas de Flexbox. En el próximo artículo veremos cómo esta especificación encaja con las otras partes de CSS.

diff --git a/files/es/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..9048cbb739 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,133 @@ +--- +title: Casos de uso típicos de Flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Casos_de_uso_tipicos_de_Flexbox. +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +

{{CSSRef}}

+ +

En esta guía, analizaremos algunos de los casos de uso comunes de flexbox, en aquellos lugares donde tiene más sentido que otro método de diseño.

+ +

¿Por qué elegir flexbox?

+ +

En un mundo perfecto de compatibilidad con navegadores, la razón por la que elegiría utilizar flexbox es porque desea colocar una colección de elementos en una dirección u otra.  Estos son los usos para los que fue diseñado flexbox. Puede leer más sobre la diferencia entre flexbox y CSS Grid Layout en Relación de Flexbox con respecto a otros métodos de diseño, donde discutimos cómo encaja flexbox en la imagen general de CSS Layout.

+ +

En realidad, a menudo también usamos Flexbox para trabajos que Grid Layout podría realizar mejor, como un respaldo para Grid, y también para obtener capacidades de alineación. Esto es algo que puede cambiar una vez que se implemente Box Alignment en Block Layout. En esta guía analizo algunas de las cosas típicas que podría usar flexbox hoy día.

+ + + +

Un patrón común para la navegación es tener una lista de elementos mostrada como una barra horizontal. Este patrón, tan básico como parece, era difícil de lograr antes de flexbox. Este es el ejemplo más simple de flexbox, y podría considerarse el caso ideal de uso de flexbox.

+ +

Cuando tenemos un conjunto de elementos que queremos mostrar horizontalmente, podemos terminar con espacio adicional. Necesitamos decidir qué hacer con ese espacio y tener un par de opciones. O bien mostramos el espacio fuera de los elementos, los separamos, por consiguiente, con espacios en blanco entre ellos o alrededor de ellos, o absorbemos el espacio adicional dentro de los elementos, por lo tanto, necesitamos un método para permitir que los elementos crezcan y ocupen este espacio.

+ +

Espacio distribuido fuera de los elementos

+ +

Para distribuir el espacio entre o alrededor de los elementos, usamos las propiedades de alineación en flexbox y la propiedad {{cssxref ("justify-content")}}. Puede leer más sobre esta propiedad en Alinear elementos en un contenedor flexible, que trata sobre la alineación de elementos en el eje principal.

+ +

En el siguiente ejemplo en vivo, mostramos los elementos en su tamaño natural y utilizando justify-content: space-between crea cantidades iguales de espacio entre los elementos. Puede cambiar la forma en que se distribuye el espacio utilizando el valor space-around, o, donde sea compatible, space-evenly. También puede usar flex-start para colocar el espacio al final de los elementos, flex-end para colocarlo delante de ellos, o center para centrar los elementos de navegación.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

+ +

Espacio distribuido dentro de los elementos

+ +

Un patrón diferente para la navegación sería distribuir el espacio disponible dentro de los elementos, en lugar de crear un espacio entre ellos. En este caso, utilizaríamos las propiedades {{cssxref ("flex")}} para permitir que los elementos crezcan y se reduzcan en proporción entre sí, como se describe en Control la proporción de elementos flexibles a lo largo del eje principal.

+ +

Si quisiera que todos mis elementos de navegación tuvieran el mismo ancho, entonces podría usar flex: auto, que es la abreviatura de flex: 1 1 auto, todos los elementos crecen y se contraen desde una flex-basis de auto. Esto significaría que el elemento más largo tendría más espacio.

+ +

En el ejemplo en vivo a continuación, intente cambiar flex: auto a flex: 1. Esta es la abreviatura de flex: 1 1 0 y hace que todos los elementos se vuelvan del mismo ancho, ya que están trabajando desde una flex-basis de 0 permitiendo que todo el espacio sea distribuido uniformemente.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

+ + + +

Otra forma de alinear elementos en el eje principal es usar márgenes automáticos. Esto permite el patrón de diseño de una barra de navegación donde un grupo de elementos se alinean a la izquierda y otro grupo se alinea a la derecha.

+ +

Aquí estamos utilizando la técnica de márgenes automáticos descrita en Uso de márgenes automáticos para la alineación del eje principal. Los elementos se alinean en el eje principal con flex-start ya que este es el comportamiento inicial de flexbox, y estamos alineando el elemento de la derecha dándole un margen izquierdo de auto. Puede mover la clase de un elemento a otro para cambiar dónde ocurre la división.

+ +

También en este ejemplo, estamos utilizando márgenes en los elementos flexibles para crear un espacio entre los elementos, y un margen negativo en el contenedor para que los elementos aún permanezcan a nivel con los bordes derecho e izquierdo. Hasta que las propiedades gap de la especificación de alineación de caja sea implementada en flexbox, debemos usar márgenes de esta manera si queremos crear un margen entre los elementos.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

+ +

Centrar elemento

+ +

Antes de flexbox, los desarrolladores bromeaban con que el problema más difícil en el diseño web era el centrado vertical. Esto ahora se ha hecho sencillo usando las propiedades de alineación en flexbox, como muestra el siguiente ejemplo en vivo.

+ +

Puedes jugar con la alineación, alineando el elemento con el inicio con flex-start o al final con flex-end.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

+ +

Es posible que en el futuro no tengamos que crear un contenedor en un contenedor flexible solo para centrar un solo elemento, ya que las propiedades de Alineación de cuadro se implementarán en última instancia en el diseño del bloque. Por ahora, sin embargo, si necesita centrar correctamente una cosa dentro de otra, flexbox es la forma de hacerlo. Como en el ejemplo anterior, convierta un contenedor en un contenedor flexible y luego utilice align-items en el elemento principal o apunte el propio elemento de flexión con align-self.

+ + + +

Ya sea que use flexbox o CSS Grid para diseñar una lista de componentes de tarjeta, estos métodos de diseño solo funcionan en los elementos directos de los componentes flex o grid. Esto significa que si tiene cantidades variables de contenido, la tarjeta se extenderá hasta la altura del área de la cuadrícula o del contenedor flexible. Cualquier contenido interno usa un diseño de bloque regular, lo que significa que en una tarjeta con menos contenido, el pie de página subirá hasta la parte inferior del contenido en lugar de adherirse a la parte inferior de la tarjeta.

+ +

Two card components showing that the internals of the component do not stretch with the wrapper.

+ +

Flexbox puede resolver esto. Hacemos de la tarjeta un contenedor flexible, con  {{cssxref ("flex-direction")}} :column. A continuación, configuramos el área de contenido con flex: 1, que es la abreviatura de flex: 1 1 0; el elemento puede crecer y reducirse desde una base flexible de 0. Como este es el único elemento que puede crecer, ocupa todo el espacio disponible en el contenedor flexible y empuja el pie de página hacia abajo. Si elimina la propiedad flex del ejemplo en vivo, verá cómo el pie de página se mueve hacia arriba para sentarse directamente debajo del contenido.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

+ +

Objetos multimedia

+ +

El objeto multimedia es un patrón común en el diseño web: este patrón tiene una imagen u otro elemento a un lado y el texto a la derecha. Idealmente, un objeto multimedia debería poder voltearse, moviendo la imagen de izquierda a derecha.

+ +

Vemos este patrón en todas partes, usado para comentarios, y en cualquier lugar que necesitamos para mostrar imágenes y descripciones. Con flexbox podemos permitir que la parte del objeto multimedia que contiene la imagen tome su información de tamaño de la imagen, y luego el cuerpo del objeto multimedia se flexione para ocupar el espacio restante.

+ +

En el ejemplo en vivo a continuación puedes ver nuestro objeto multimedia. He usado las propiedades de alineación para alinear los elementos en el eje transversal con flex-start, y luego establezco el elemento flex .content a flex: 1. Al igual que nuestra columna del patrón de la tarjeta de diseño anterior, usar flex: 1 significa que esta parte de la tarjeta puede crecer.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

+ +

Algunas de las cosas que podría querer probar en este ejemplo en vivo se relacionan con las diferentes formas en que podría desear restringir el objeto multimedia en su diseño.

+ +

Para evitar que la imagen crezca demasiado, agregue un {{cssxref ("max-width")}} a la imagen. Como ese lado del objeto multimedia está usando los valores iniciales de flexbox, puede reducirse pero no crecer, y utiliza una flex-basis de auto. Cualquier {{cssxref ("ancho")}} o ancho máximo aplicado a la imagen se convertirá en la flex-basis.

+ +
.image img {
+  max-width: 100px;
+}
+
+ +

También puede permitir que ambos lados crezcan y se reduzcan en proporción. Si configura ambos lados a flex: 1, crecerán y se reducirán de una {{cssxref ("flex-basis")}} de 0, por lo que terminará con dos columnas de igual tamaño. Puede tomar el contenido como una guía y configurar ambos para flex: auto, en cuyo caso crecerían y se reducirían con el tamaño del contenido o cualquier tamaño aplicado directamente a los elementos de flexión, como el ancho de la imagen.

+ +
.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

También puede dar a cada lado diferentes factores {{cssxref ("flex-grow")}}, por ejemplo, configurando el lado con la imagen para flex: 1 y el lado del contenido para flex: 3. Esto significará que usan una flex-basis de 0, pero distribuye ese espacio a diferentes proporciones según el factor flex-grow que haya asignado. Las propiedades de flexión que utilizamos para hacer esto se describen en detalle en la guía Controlando las proporciones de elementos de flexión a lo largo del eje principal.

+ +
.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

Volteando el objeto multimedia

+ +

Para cambiar la visualización del objeto multimedia de modo que la imagen esté a la derecha y el contenido a la izquierda, podemos usar la propiedad flex-direction configurada para row-reverse. El objeto multimedia ahora se muestra al revés. He logrado esto en el ejemplo en vivo agregando una clase flipped junto con la clase existente .media. Esto significa que puede ver cómo cambia la pantalla eliminando esa clase del html.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

+ +

Controles de formulario

+ +

Flexbox es particularmente útil cuando se trata de estilos de controles de formularios. Los formularios tienen muchas marcas y muchos elementos pequeños que normalmente queremos alinear entre sí. Un patrón común es tener un elemento {{htmlelement ("input")}} asociado con un {{htmlelement ("button")}}, tal vez para un formulario de búsqueda o donde simplemente desea que su visitante ingrese una dirección de correo electrónico.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

+ +

Puede agregar una etiqueta o un icono a la izquierda tan fácilmente como hicimos clic en el botón derecho. He añadido una etiqueta y aparte, algunos estilos de color de fondo, no tuve que cambiar el diseño. El campo de entrada extensible ahora tiene un poco menos de espacio para actuar, pero utiliza el espacio izquierdo después que se representaron los dos elementos.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

+ +

Patrones como este pueden hacer que sea mucho más fácil crear una biblioteca de elementos de formulario para su diseño, que se adapte fácilmente a los elementos adicionales que se agregan. Está aprovechando la flexibilidad de flexbox al mezclar elementos que no crecen con los que lo hacen.

+ +

Conclusión

+ +

Mientras explora los patrones anteriores, es de esperar que haya empezado a ver cómo puede pensar en la mejor manera de utilizar flexbox para lograr el resultado que desea. Muy a menudo tienes más de una opción. Mezcle elementos que no puedan estirarse con aquellos que pueden, use el contenido para informar el tamaño o permita que flexbox comparta espacio en proporción. Tu decides.

+ +

Piense en la mejor manera de presentar el contenido que tiene y luego vea cómo flexbox u otros métodos de diseño pueden ayudarlo a lograrlo.

diff --git a/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html b/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html deleted file mode 100644 index e42553fe97..0000000000 --- a/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: Usando flexbox para componer aplicaciones web -slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web -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 ---- -

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

- -
    -
  • Quieres centrar un elemento en la mitad de una página
    • -
  • Quieres un conjunto de contenedores que fluyan verticalmente, uno tras otro
    • -
  • Quieres crear una fila de botones u otros elementos que colapse verticalmente en tamaños menores de pantalla
    • -
- -

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:

- -
    -
  • Si quieres un elemento que sólo ocupa su ancho asignado, como un botón, utiliza flex: none que se expande a 0 0 auto.
    • -
  • Si deseas explícitamente dimensionar un elemento, usa flex: 0 0 tamaño. Por ejemplo: flex 0 0 60px.
    • -
  • Si necesitas un elemento que se expanda para rellenar el espacio disponible, compartiendo el espacio igualmente si hay múltiples elementos de este tipo dentro del flujo, utiliza flex: auto. Se expande a 1 1 auto.
    • -
- -

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/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html b/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html deleted file mode 100644 index dd39986ed4..0000000000 --- a/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html +++ /dev/null @@ -1,376 +0,0 @@ ---- -title: Usando las cajas flexibles CSS -slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS -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 ---- -
{{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.

- -
    -
  • Propiedades column-* del Módulo Multicol no tienen ningún efecto en un elemento flexible.
    • -
  • {{cssxref("float")}} y {{cssxref("clear")}} no tienen ningún efecto en un elemento flexible. Usar float causa que la propiedad display del elemento se comporte como block.
    • -
  • {{cssxref("vertical-align")}} no tiene efecto en la alineación de los elementos flexibles.
    • -
- -

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

- -
    -
  • El Proyecto Flexbugs para información de errores en implementación de flexbox en navegadores.
    • -
diff --git a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html new file mode 100644 index 0000000000..afb49e2a92 --- /dev/null +++ b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -0,0 +1,722 @@ +--- +title: Basic concepts of grid layout +slug: Web/CSS/CSS_Grid_Layout/Conceptos_Básicos_del_Posicionamiento_con_Rejillas +tags: + - CSS + - Guía + - Posicionamiento + - Rejillas CSS +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +

CSS Grid Layout presenta un sistema de cuadrícula bidimensional para CSS. Las cuadrículas se pueden utilizar para posicionar áreas principales de la página o pequeños elementos de la interfaz de usuario. Este artículo lo introduce a Grid Layout de CSS y la nueva terminología que forma parte de la especificación CSS Grid Layout Nivel 1. Las características mostradas en este resumen se explicarán con mayor detalle en el resto de esta guía.

+ +

¿Qué es una cuadrícula(grid)?

+ +

Una cuadrícula es un conjunto de líneas horizontales y verticales que se intersectan - un grupo define columnas y el otro filas. Los elementos se pueden colocar en la cuadrícula respetando estas columnas y filas. El diseño de cuadrícula CSS tiene las siguientes características:

+ +

Tamaños fijos y flexibles

+ +

Usted puede crear una cuadrícula con tamaños fijos, utilizando píxeles, por ejemplo. También se puede crear una cuadrícula utilizando tamaños flexibles con porcentajes o con la nueva unidad de medida fr (fracción), diseñada para este propósito.

+ +

Posicionamiento de elementos

+ +

Puede colocar elementos en una ubicación precisa en la cuadrícula utilizando números de línea, nombres o seleccionando un área de la cuadrícula. Grid también contiene un algoritmo para controlar la ubicación de elementos que no tienen una posición explícita en la cuadrícula.

+ +

Creación de líneas adicionales para alojar contenido

+ +

Usted puede definir una cuadrícula explícita con grid layout. La especificación  Grid Layout  es lo suficientemente flexible como para permitir agregar filas y columnas adicionales cuando sea necesario. Características como la adición de "tantas columnas como caben en un contenedor" también fueron incuidas.

+ +

Control de alineación

+ +

Grid contiene características de alineación para poder controlar la forma cómo se alinean los elementos una vez colocados en un área de cuadrícula y cómo está alineada toda la cuadrícula.

+ +

Control de contenido superpuesto

+ +

Se puede colocar más de un elemento en una celda de la cuadrícula o área, las cuales pueden solaparse o superponerse total o parcialmente entre sí. Esta estratificación puede ser controlada con la propiedad {{cssxref("z-index")}}.

+ +

Grid es una poderosa especificación que, cuando se combina con otras partes de CSS como flexbox, puede ayudarle a crear diseños que antes eran imposibles de construir en CSS. Todo comienza creando una cuadrícula en su contenedor de cuadrícula.

+ +

El contenedor de Grid

+ +

Creamos un contenedor de cuadrícula al declarar display: grid o display: inline-grid en un elemento. Tan pronto como hagamos esto todos los hijos directos de ese elemento se convertirán en elementos de la cuadrícula.

+ +

En este ejemplo, se tiene un contenedor div con una clase wrapper y dentro hay cinco elementos hijos.

+ +
+
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +

Hago de .wrapper un contenedor de cuadrícula.

+ +
.wrapper {
+  display: grid;
+}
+
+ + + +

{{ EmbedLiveSample('El_contenedor_de_Grid', '200', '330') }}

+
+ +

Todos los descendientes directos son ahora elementos de la cuadrícula. En un navegador web, usted no verá ninguna diferencia en cómo son mostrados estos elementos antes de convertirlos en una cuadrícula ya que grid ha creado una cuadrícula de una sola columna para los elementos. En este punto usted puede encontrar útil trabajar en Firefox Developer Edition, el cual  tiene disponible el Grid Inspector (Inspector de cuádricula) como parte de las Herramientas de Desarrollador. Si ve este ejemplo en Firefox e inspecciona la cuadrícula, verá un icono pequeño junto al valor grid. Haga clic sobre este y la cuadrícula de este elemento se superpondrá en la ventana del navegador.

+ +

Using the Grid Highlighter in DevTools to view a grid

+ +

Mientras usted aprende y luego trabaja con CSS Grid Layout esta herramienta le dará una mejor idea de lo que está sucediendo con sus cuadrículas visualmente.

+ +

Si queremos empezar a hacer esto más parecido a una cuadrícula necesitamos agregar columnas.

+ +

Vias, filas y columnas del Grid

+ +

Definimos filas y columnas en nuestra cuadrícula con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}. Éstas definen las vías de la cuadrícula. Una vía de cuadrícula es el área entre las dos líneas -horizontales o verticales- dentro de la cuadrícula. En la imagen inferior se puede ver una vía resaltada -  esta es la vía de la primera fila en nuestra cuadrícula.

+ +

+ +

Puedo modificar nuestro ejemplo anterior al agregar la propiedad grid-template-columns, para así definir el tamaño (ancho) de las vías de cada columna.

+ +

Ahora he creado una cuadrícula con tres vías por columna de 200 píxeles. Los elementos hijo se posicionarán en esta cuadrícula uno en cada una de las celdas de la cuadrícula.

+ +
+
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+
+ + + +

{{ EmbedLiveSample('grid_first', '610', '140') }}

+
+ +

La Unidad fr

+ +

Las vías se pueden definir usando cualquier unidad de medida. Grid también introduce una unidad de longitud adicional para ayudarnos a crear vías de cuadrícula flexibles. La nueva unidad fr representa una fracción del espacio disponible en el contenedor de la cuadrícula. La siguiente definición de cuadrícula crearía tres vias con el mismo ancho, que se expanden y se encogen de acuerdo el espacio disponible.

+ +
+
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ + + +

{{ EmbedLiveSample('La_Unidad_fr', '220', '140') }}

+
+ +

En el próximo ejemplo creamos una definición con una vía de 2fr y luego dos vías de 1fr. El espacio disponible se divide en cuatro. Dos partes corresponden a la primera vía  y una parte a cada una de las dos vias restantes.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+ +

En este ejemplo final mezclamos las vías de tamaño absoluto con unidades de fracción(fr). La primera vía tiene 500 píxeles, por lo que este ancho fijo se sustrae del espacio disponible.El espacio restante se divide en tres y se asigna en proporción a las dos vías flexibles.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+
+ +

Listando vías con la notación repeat()

+ +

Las cuadrículas grandes con muchas vías o celdas pueden utilizar la notación repeat() con el fin de repetir todas o una sección de la lista de vías. Por ejemplo la definición de cuadrícula:

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ +

También puede ser escrita así:

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

La notación de repetición se puede utilizar para una parte del listado de vías. En este siguiente ejemplo he creado una cuadrícula con una vía inicial de 20 píxeles luego una sección repetitiva de 6 vías de 1fr y luego una vía final de 20 píxeles.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+
+ +

La notación de repetición toma una lista de vías específicas, por lo tanto, puede utilizarla para crear un patrón de iteración de vías. En el próximo ejemplo, mi cuadrícula consistirá de 10 vías, una vía 1fr seguida por una vía 2fr, repetida cinco veces.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+
+ +

La cuadrícula implícita y explícita

+ +

Al crear nuestra cuadrícula de ejemplo definimos nuestras vías de columna con la propiedad {{cssxref("grid-template-columns")}}, pero dejamos que grid creara filas  para el contenido según fuera necesario. Estas filas se crean en la cuadrícula implícita. La cuadrícula explícita consiste en las filas y columnas que se definen con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.

+ +

Si coloca algo fuera de la cuadrícula ya definida, o si debido a la cantidad de contenido, se necesitarán más vías o celdas, entonces grid crea filas y columnas en la cuadrícula implícita. Estas vías varían su tamaño automáticamente de forma predeterminada, así que ajustarán su tamaño basadas en el contenido dentro de ellas.

+ +

También puede definir un tamaño para el conjunto de vías creadas en la cuadrícula implícita con las propiedades {{cssxref("grid-auto-rows")}} y {{cssxref("grid-auto-columns")}}.

+ +

En el siguiente ejemplo usamos grid-auto-rows para asegurar que las vías creadas en la cuadrícula implícita tengan 200 píxeles de alto.

+ +
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+
+ + + +

{{ EmbedLiveSample('cuadrícula_implícita_y_explícita', '230', '420') }}

+
+ +

Tamaño de vía y minmax()

+ +

Al configurar una cuadrícula explícita o definir el tamaño de las filas o columnas creadas automáticamente, es posible que desee dar a las vías un tamaño mínimo, pero asegurarse que se expandan para adaptarse a cualquier contenido que se pueda agregar. Por ejemplo, tal vez quiera que mis filas nunca se colapsen a menos de 100 píxeles, pero si mi contenido se extiende a 300 píxeles de altura, me gustaría que la fila se expandiera a esa altura.

+ +

Grid tiene una solución para esto con la función {{cssxref("minmax", "minmax()")}}. En el siguiente ejemplo estoy usando minmax() en el valor de la propiedad {{cssxref("grid-auto-rows")}}. Las filas creadas automáticamente tendrán como mínimo de 100 píxeles de alto y un máximo de auto. El uso de auto significa que el tamaño mirará el tamaño del contenido y se estirará para dar espacio al elemento más alto en una celda en esta fila.

+ +
+
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two
+    <p>I have some more content in.</p>
+    <p>This makes me taller than 100 pixels.</p>
+  </div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('Tamaño_de_vía_y_minmax', '240', '470') }}

+
+ +

Líneas de la cuadrículaEdit

+ +

Debe tenerse en cuenta que cuando definimos una cuadrícula definimos las vías de la cuadrícula, no las líneas. Grid luego nos da las líneas numeradas a utilizar al posicionar elementos. En nuestra cuadrícula de tres columnas y dos filas, tenemos cuatro líneas de columna.

+ +

Diagram showing numbered grid lines.

+ +

Las líneas están numeradas según el modo de escritura del documento. En un idioma de izquierda a derecha, la línea 1 está al lado izquierdo de la cuadrícula. En un idioma de derecha a izquierda, está en el lado derecho de la cuadrícula. Las líneas también se pueden nombrar, ya veremos cómo hacer esto en una guía posterior de esta serie.

+ +

Posicionando elementos de acuerdo a las líneas

+ +

Estaremos explorando la colocación basada en líneas en detalle en un artículo posterior, el siguiente ejemplo demuestra cómo hacer esto de una manera sencilla. Cuando colocamos un elemento  y tomamos como punto de referencia la línea - en lugar de la vía.

+ +

En el siguiente ejemplo, estoy posicionando los dos primeros elementos en la cuadrícula de tres vías de columna,  usando las propiedades {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} y {{cssxref("grid-row-end")}}. Trabajando de izquierda a derecha, el primer elemento se coloca partiendo de la línea de la columna 1, y se extiende a la línea de la columna 4, que en nuestro caso es la línea que está mas a la derecha en la cuadrícula. Y comienza en la línea de la fila 1 y termina en la línea de fila la 3, por lo tanto, se extiende sobre dos filas.

+ +

El segundo elemento comienza en la línea de columna 1 de la  cuadrícula y se extiende por toda la fila. Este es el valor por defecto, por lo que no necesito especificar la línea final. También se extiende dos vías de fila de la línea de fila 3 a la línea de fila 5. Los otros elementos se colocarán a sí mismos en espacios vacíos en la cuadrícula.

+ +
+
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+
+ + + +

{{ EmbedLiveSample('Líneas_de_cuadrícula', '230', '420') }}

+
+ +

No olvide que puede utilizar Grid Inspector en las Herramientas de Desarrollador de Firefox para ver cómo se posicionan los elementos en las líneas de la cuadrícula.

+ +

Celdas de cuadrícula

+ +

Una celda de cuadrícula es la unidad más pequeña en una cuadrícula, conceptualmente es como una celda de tabla. Como vimos en nuestros ejemplos anteriores, una vez que se define una cuadrícula en un padre, los elementos hijo se posicionarán a sí mismos de una vez en cada celda de la cuadrícula definida. En la imagen de abajo he resaltado la primera celda de la cuadrícula.

+ +

The first cell of the grid highlighted

+ +

Áreas de cuadrícula

+ +

Los elementos pueden extenderse a través de una o más celdas tanto por fila como por columna, lo que crea un área de cuadrícula. Las áreas de la cuadrícula tienen que ser rectangulares - no es posible crear un área en forma de L, por ejemplo. El área de cuadrícula resaltada abarca dos vías de fila y dos de columna.

+ +

A grid area

+ +

Canaletas

+ +

Las canaletas o callejones entre las celdas de la cuadrícula se pueden crear usando las propiedades {{cssxref("grid-column-gap")}} y {{cssxref("grid-row-gap")}}, o la propiedad abreviada {{cssxref("grid-gap")}}. En el siguiente ejemplo estoy creando una brecha de 10 píxeles entre columnas y una brecha de 1em entre filas.

+ +
+
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-column-gap: 10px;
+   grid-row-gap: 1em;
+}
+
+ +
+

Nota: Los navegadores más antigüos tienen {{cssxref("column-gap")}}, {{cssxref("row-gap")}} y {{cssxref("gap")}} prefijadas con el prefijo grid- como {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} y {{cssxref("grid-gap")}} respectivamente.

+
+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ + + +

{{ EmbedLiveSample('Canaletas') }}

+
+ +

Cualquier espacio utilizado por las brechas se tendrá en cuenta antes de que el espacio sea asignado a las vías fr de longitud flexible y las canaletas intervienen con propósitos de dimensionamiento como una vía de cuadrícula regular, sin embargo, no se puede colocar nada en una brecha. En términos de posicionamiento basado en líneas, la brecha actúa como una línea gruesa.

+ +

Anidamiento de cuadrículas

+ +

Un elemento de cuadrícula puede convertirse en un contenedor de cuadrícula. En el ejemplo siguiente tengo la cuadrícula de tres columnas creada anteriormente, con nuestros dos elementos posicionados. En este caso, el primer elemento tiene algunos subelementos. Ya que estos elementos no son descendientes directos de la cuadrícula, no participan en la disposición de la cuadrícula y por lo tanto se muestran en el flujo normal del documento.

+ +
+
<div class="wrapper">
+   <div class="box box1">
+       <div class="nested">a</div>
+       <div class="nested">b</div>
+        <div class="nested">c</div>
+    </div>
+    <div class="box box2">Two</div>
+    <div class="box box3">Three</div>
+    <div class="box box4">Four</div>
+    <div class="box box5">Five</div>
+</div>
+
+ +

Nested grid in flow

+ +

Si establezco box1 a display: grid puedo darle una definición de vía y también se convertirá en una cuadrícula, los elementos entonces se posicionan en esta nueva cuadrícula.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ + +
+ +

{{ EmbedLiveSample('anidamiento', '600', '340') }}

+ +

En este caso, la cuadrícula anidada no tiene ninguna relación con el padre. Como usted puede ver en el ejemplo, no ha heredado la grid-gap del elemento padre y las líneas de la cuadrícula anidada no se alinean con las líneas de la cuadrícula padre.

+ +

Subgrid

+ +

En la especificación de grid de nivel 1 hay una característica llamada subgrid que nos permitiría crear cuadrículas anidadas que usan la definición de la vía de la cuadrícula padre.

+ +
+

Las Subgrids aún no están implementadas en ningún navegador y la especificación está sujeta a cambio.

+
+ +

En la especificación actual, editaríamos el ejemplo de cuadrícula anidada arriba para usar display: subgrid en lugar de display: grid, y luego eliminar la definición de vía. La cuadrícula anidada utilizará las vías de la cuadrícula principal para posicionar los elementos.

+ +

Cabe señalar que la cuadrícula está anidada en ambas dimensiones — filas y columnas. No hay concepto de la cuadrícula implícita trabajando con subgrids. Esto significa que debe asegurarse de que la cuadrícula padre tenga suficientes vías de fila y columna para todos los subelementos.

+ +
.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: subgrid;
+}
+
+ +

Estratificando elementos con z-index

+ +

Los elementos de cuadrícula pueden ocupar la misma celda. Si volvemos a nuestro ejemplo con elementos posicionados por número de línea, podemos cambiar esto para hacer que dos elementos se superpongan.

+ +
+
<div class="wrapper">
+  <div class="box box1">One</div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+}
+
+ + +
+ +

{{ EmbedLiveSample('l_ex', '230', '420') }}

+ +

El elemento box2 ahora se superpone a box1, se muestra en la parte superior ya que aparece después en el orden de origen.

+ +

Controlando el orden

+ +

Podemos controlar el orden en el que los artículos se apilan utilizando la propiedad z-index - al igual que con los elementos posicionados. Si le damos a box2 un z-index más bajo que box1, se mostrará debajo de box1 en la pila.

+ +
+
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  z-index: 2;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+  z-index: 1;
+}
+
+ + + +

{{ EmbedLiveSample('controlando_el_orden', '230', '420') }}

+ +

Siguientes Pasos

+ +

En este artículo hemos tenido una mirada muy rápida a través de la Especificación de Grid Layout. Juegue un poco con los ejemplos de código, y luego pase a la siguiente parte de esta guía donde realmente nos vamos a adentrar en detalle dentro de CSS Grid Layout.

+ + +
diff --git "a/files/es/web/css/css_grid_layout/conceptos_b\303\241sicos_del_posicionamiento_con_rejillas/index.html" "b/files/es/web/css/css_grid_layout/conceptos_b\303\241sicos_del_posicionamiento_con_rejillas/index.html" deleted file mode 100644 index afb49e2a92..0000000000 --- "a/files/es/web/css/css_grid_layout/conceptos_b\303\241sicos_del_posicionamiento_con_rejillas/index.html" +++ /dev/null @@ -1,722 +0,0 @@ ---- -title: Basic concepts of grid layout -slug: Web/CSS/CSS_Grid_Layout/Conceptos_Básicos_del_Posicionamiento_con_Rejillas -tags: - - CSS - - Guía - - Posicionamiento - - Rejillas CSS -translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout ---- -

CSS Grid Layout presenta un sistema de cuadrícula bidimensional para CSS. Las cuadrículas se pueden utilizar para posicionar áreas principales de la página o pequeños elementos de la interfaz de usuario. Este artículo lo introduce a Grid Layout de CSS y la nueva terminología que forma parte de la especificación CSS Grid Layout Nivel 1. Las características mostradas en este resumen se explicarán con mayor detalle en el resto de esta guía.

- -

¿Qué es una cuadrícula(grid)?

- -

Una cuadrícula es un conjunto de líneas horizontales y verticales que se intersectan - un grupo define columnas y el otro filas. Los elementos se pueden colocar en la cuadrícula respetando estas columnas y filas. El diseño de cuadrícula CSS tiene las siguientes características:

- -

Tamaños fijos y flexibles

- -

Usted puede crear una cuadrícula con tamaños fijos, utilizando píxeles, por ejemplo. También se puede crear una cuadrícula utilizando tamaños flexibles con porcentajes o con la nueva unidad de medida fr (fracción), diseñada para este propósito.

- -

Posicionamiento de elementos

- -

Puede colocar elementos en una ubicación precisa en la cuadrícula utilizando números de línea, nombres o seleccionando un área de la cuadrícula. Grid también contiene un algoritmo para controlar la ubicación de elementos que no tienen una posición explícita en la cuadrícula.

- -

Creación de líneas adicionales para alojar contenido

- -

Usted puede definir una cuadrícula explícita con grid layout. La especificación  Grid Layout  es lo suficientemente flexible como para permitir agregar filas y columnas adicionales cuando sea necesario. Características como la adición de "tantas columnas como caben en un contenedor" también fueron incuidas.

- -

Control de alineación

- -

Grid contiene características de alineación para poder controlar la forma cómo se alinean los elementos una vez colocados en un área de cuadrícula y cómo está alineada toda la cuadrícula.

- -

Control de contenido superpuesto

- -

Se puede colocar más de un elemento en una celda de la cuadrícula o área, las cuales pueden solaparse o superponerse total o parcialmente entre sí. Esta estratificación puede ser controlada con la propiedad {{cssxref("z-index")}}.

- -

Grid es una poderosa especificación que, cuando se combina con otras partes de CSS como flexbox, puede ayudarle a crear diseños que antes eran imposibles de construir en CSS. Todo comienza creando una cuadrícula en su contenedor de cuadrícula.

- -

El contenedor de Grid

- -

Creamos un contenedor de cuadrícula al declarar display: grid o display: inline-grid en un elemento. Tan pronto como hagamos esto todos los hijos directos de ese elemento se convertirán en elementos de la cuadrícula.

- -

En este ejemplo, se tiene un contenedor div con una clase wrapper y dentro hay cinco elementos hijos.

- -
-
<div class="wrapper">
-   <div>One</div>
-   <div>Two</div>
-   <div>Three</div>
-   <div>Four</div>
-   <div>Five</div>
-</div>
-
- -

Hago de .wrapper un contenedor de cuadrícula.

- -
.wrapper {
-  display: grid;
-}
-
- - - -

{{ EmbedLiveSample('El_contenedor_de_Grid', '200', '330') }}

-
- -

Todos los descendientes directos son ahora elementos de la cuadrícula. En un navegador web, usted no verá ninguna diferencia en cómo son mostrados estos elementos antes de convertirlos en una cuadrícula ya que grid ha creado una cuadrícula de una sola columna para los elementos. En este punto usted puede encontrar útil trabajar en Firefox Developer Edition, el cual  tiene disponible el Grid Inspector (Inspector de cuádricula) como parte de las Herramientas de Desarrollador. Si ve este ejemplo en Firefox e inspecciona la cuadrícula, verá un icono pequeño junto al valor grid. Haga clic sobre este y la cuadrícula de este elemento se superpondrá en la ventana del navegador.

- -

Using the Grid Highlighter in DevTools to view a grid

- -

Mientras usted aprende y luego trabaja con CSS Grid Layout esta herramienta le dará una mejor idea de lo que está sucediendo con sus cuadrículas visualmente.

- -

Si queremos empezar a hacer esto más parecido a una cuadrícula necesitamos agregar columnas.

- -

Vias, filas y columnas del Grid

- -

Definimos filas y columnas en nuestra cuadrícula con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}. Éstas definen las vías de la cuadrícula. Una vía de cuadrícula es el área entre las dos líneas -horizontales o verticales- dentro de la cuadrícula. En la imagen inferior se puede ver una vía resaltada -  esta es la vía de la primera fila en nuestra cuadrícula.

- -

- -

Puedo modificar nuestro ejemplo anterior al agregar la propiedad grid-template-columns, para así definir el tamaño (ancho) de las vías de cada columna.

- -

Ahora he creado una cuadrícula con tres vías por columna de 200 píxeles. Los elementos hijo se posicionarán en esta cuadrícula uno en cada una de las celdas de la cuadrícula.

- -
-
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: 200px 200px 200px;
-}
-
- - - -

{{ EmbedLiveSample('grid_first', '610', '140') }}

-
- -

La Unidad fr

- -

Las vías se pueden definir usando cualquier unidad de medida. Grid también introduce una unidad de longitud adicional para ayudarnos a crear vías de cuadrícula flexibles. La nueva unidad fr representa una fracción del espacio disponible en el contenedor de la cuadrícula. La siguiente definición de cuadrícula crearía tres vias con el mismo ancho, que se expanden y se encogen de acuerdo el espacio disponible.

- -
-
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
- - - -

{{ EmbedLiveSample('La_Unidad_fr', '220', '140') }}

-
- -

En el próximo ejemplo creamos una definición con una vía de 2fr y luego dos vías de 1fr. El espacio disponible se divide en cuatro. Dos partes corresponden a la primera vía  y una parte a cada una de las dos vias restantes.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 2fr 1fr 1fr;
-}
-
- -

En este ejemplo final mezclamos las vías de tamaño absoluto con unidades de fracción(fr). La primera vía tiene 500 píxeles, por lo que este ancho fijo se sustrae del espacio disponible.El espacio restante se divide en tres y se asigna en proporción a las dos vías flexibles.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 500px 1fr 2fr;
-}
-
- -

Listando vías con la notación repeat()

- -

Las cuadrículas grandes con muchas vías o celdas pueden utilizar la notación repeat() con el fin de repetir todas o una sección de la lista de vías. Por ejemplo la definición de cuadrícula:

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
- -

También puede ser escrita así:

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
- -

La notación de repetición se puede utilizar para una parte del listado de vías. En este siguiente ejemplo he creado una cuadrícula con una vía inicial de 20 píxeles luego una sección repetitiva de 6 vías de 1fr y luego una vía final de 20 píxeles.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 20px repeat(6, 1fr) 20px;
-}
-
- -

La notación de repetición toma una lista de vías específicas, por lo tanto, puede utilizarla para crear un patrón de iteración de vías. En el próximo ejemplo, mi cuadrícula consistirá de 10 vías, una vía 1fr seguida por una vía 2fr, repetida cinco veces.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr 2fr);
-}
-
- -

La cuadrícula implícita y explícita

- -

Al crear nuestra cuadrícula de ejemplo definimos nuestras vías de columna con la propiedad {{cssxref("grid-template-columns")}}, pero dejamos que grid creara filas  para el contenido según fuera necesario. Estas filas se crean en la cuadrícula implícita. La cuadrícula explícita consiste en las filas y columnas que se definen con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.

- -

Si coloca algo fuera de la cuadrícula ya definida, o si debido a la cantidad de contenido, se necesitarán más vías o celdas, entonces grid crea filas y columnas en la cuadrícula implícita. Estas vías varían su tamaño automáticamente de forma predeterminada, así que ajustarán su tamaño basadas en el contenido dentro de ellas.

- -

También puede definir un tamaño para el conjunto de vías creadas en la cuadrícula implícita con las propiedades {{cssxref("grid-auto-rows")}} y {{cssxref("grid-auto-columns")}}.

- -

En el siguiente ejemplo usamos grid-auto-rows para asegurar que las vías creadas en la cuadrícula implícita tengan 200 píxeles de alto.

- -
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 200px;
-}
-
- - - -

{{ EmbedLiveSample('cuadrícula_implícita_y_explícita', '230', '420') }}

-
- -

Tamaño de vía y minmax()

- -

Al configurar una cuadrícula explícita o definir el tamaño de las filas o columnas creadas automáticamente, es posible que desee dar a las vías un tamaño mínimo, pero asegurarse que se expandan para adaptarse a cualquier contenido que se pueda agregar. Por ejemplo, tal vez quiera que mis filas nunca se colapsen a menos de 100 píxeles, pero si mi contenido se extiende a 300 píxeles de altura, me gustaría que la fila se expandiera a esa altura.

- -

Grid tiene una solución para esto con la función {{cssxref("minmax", "minmax()")}}. En el siguiente ejemplo estoy usando minmax() en el valor de la propiedad {{cssxref("grid-auto-rows")}}. Las filas creadas automáticamente tendrán como mínimo de 100 píxeles de alto y un máximo de auto. El uso de auto significa que el tamaño mirará el tamaño del contenido y se estirará para dar espacio al elemento más alto en una celda en esta fila.

- -
-
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-}
-
- - - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two
-    <p>I have some more content in.</p>
-    <p>This makes me taller than 100 pixels.</p>
-  </div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -

{{ EmbedLiveSample('Tamaño_de_vía_y_minmax', '240', '470') }}

-
- -

Líneas de la cuadrículaEdit

- -

Debe tenerse en cuenta que cuando definimos una cuadrícula definimos las vías de la cuadrícula, no las líneas. Grid luego nos da las líneas numeradas a utilizar al posicionar elementos. En nuestra cuadrícula de tres columnas y dos filas, tenemos cuatro líneas de columna.

- -

Diagram showing numbered grid lines.

- -

Las líneas están numeradas según el modo de escritura del documento. En un idioma de izquierda a derecha, la línea 1 está al lado izquierdo de la cuadrícula. En un idioma de derecha a izquierda, está en el lado derecho de la cuadrícula. Las líneas también se pueden nombrar, ya veremos cómo hacer esto en una guía posterior de esta serie.

- -

Posicionando elementos de acuerdo a las líneas

- -

Estaremos explorando la colocación basada en líneas en detalle en un artículo posterior, el siguiente ejemplo demuestra cómo hacer esto de una manera sencilla. Cuando colocamos un elemento  y tomamos como punto de referencia la línea - en lugar de la vía.

- -

En el siguiente ejemplo, estoy posicionando los dos primeros elementos en la cuadrícula de tres vías de columna,  usando las propiedades {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} y {{cssxref("grid-row-end")}}. Trabajando de izquierda a derecha, el primer elemento se coloca partiendo de la línea de la columna 1, y se extiende a la línea de la columna 4, que en nuestro caso es la línea que está mas a la derecha en la cuadrícula. Y comienza en la línea de la fila 1 y termina en la línea de fila la 3, por lo tanto, se extiende sobre dos filas.

- -

El segundo elemento comienza en la línea de columna 1 de la  cuadrícula y se extiende por toda la fila. Este es el valor por defecto, por lo que no necesito especificar la línea final. También se extiende dos vías de fila de la línea de fila 3 a la línea de fila 5. Los otros elementos se colocarán a sí mismos en espacios vacíos en la cuadrícula.

- -
-
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-  <div class="box4">Four</div>
-  <div class="box5">Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-}
-
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-}
-
-.box2 {
-  grid-column-start: 1;
-  grid-row-start: 3;
-  grid-row-end: 5;
-}
-
- - - -

{{ EmbedLiveSample('Líneas_de_cuadrícula', '230', '420') }}

-
- -

No olvide que puede utilizar Grid Inspector en las Herramientas de Desarrollador de Firefox para ver cómo se posicionan los elementos en las líneas de la cuadrícula.

- -

Celdas de cuadrícula

- -

Una celda de cuadrícula es la unidad más pequeña en una cuadrícula, conceptualmente es como una celda de tabla. Como vimos en nuestros ejemplos anteriores, una vez que se define una cuadrícula en un padre, los elementos hijo se posicionarán a sí mismos de una vez en cada celda de la cuadrícula definida. En la imagen de abajo he resaltado la primera celda de la cuadrícula.

- -

The first cell of the grid highlighted

- -

Áreas de cuadrícula

- -

Los elementos pueden extenderse a través de una o más celdas tanto por fila como por columna, lo que crea un área de cuadrícula. Las áreas de la cuadrícula tienen que ser rectangulares - no es posible crear un área en forma de L, por ejemplo. El área de cuadrícula resaltada abarca dos vías de fila y dos de columna.

- -

A grid area

- -

Canaletas

- -

Las canaletas o callejones entre las celdas de la cuadrícula se pueden crear usando las propiedades {{cssxref("grid-column-gap")}} y {{cssxref("grid-row-gap")}}, o la propiedad abreviada {{cssxref("grid-gap")}}. En el siguiente ejemplo estoy creando una brecha de 10 píxeles entre columnas y una brecha de 1em entre filas.

- -
-
.wrapper {
-   display: grid;
-   grid-template-columns: repeat(3, 1fr);
-   grid-column-gap: 10px;
-   grid-row-gap: 1em;
-}
-
- -
-

Nota: Los navegadores más antigüos tienen {{cssxref("column-gap")}}, {{cssxref("row-gap")}} y {{cssxref("gap")}} prefijadas con el prefijo grid- como {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} y {{cssxref("grid-gap")}} respectivamente.

-
- -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- - - -

{{ EmbedLiveSample('Canaletas') }}

-
- -

Cualquier espacio utilizado por las brechas se tendrá en cuenta antes de que el espacio sea asignado a las vías fr de longitud flexible y las canaletas intervienen con propósitos de dimensionamiento como una vía de cuadrícula regular, sin embargo, no se puede colocar nada en una brecha. En términos de posicionamiento basado en líneas, la brecha actúa como una línea gruesa.

- -

Anidamiento de cuadrículas

- -

Un elemento de cuadrícula puede convertirse en un contenedor de cuadrícula. En el ejemplo siguiente tengo la cuadrícula de tres columnas creada anteriormente, con nuestros dos elementos posicionados. En este caso, el primer elemento tiene algunos subelementos. Ya que estos elementos no son descendientes directos de la cuadrícula, no participan en la disposición de la cuadrícula y por lo tanto se muestran en el flujo normal del documento.

- -
-
<div class="wrapper">
-   <div class="box box1">
-       <div class="nested">a</div>
-       <div class="nested">b</div>
-        <div class="nested">c</div>
-    </div>
-    <div class="box box2">Two</div>
-    <div class="box box3">Three</div>
-    <div class="box box4">Four</div>
-    <div class="box box5">Five</div>
-</div>
-
- -

Nested grid in flow

- -

Si establezco box1 a display: grid puedo darle una definición de vía y también se convertirá en una cuadrícula, los elementos entonces se posicionan en esta nueva cuadrícula.

- -
.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
- - -
- -

{{ EmbedLiveSample('anidamiento', '600', '340') }}

- -

En este caso, la cuadrícula anidada no tiene ninguna relación con el padre. Como usted puede ver en el ejemplo, no ha heredado la grid-gap del elemento padre y las líneas de la cuadrícula anidada no se alinean con las líneas de la cuadrícula padre.

- -

Subgrid

- -

En la especificación de grid de nivel 1 hay una característica llamada subgrid que nos permitiría crear cuadrículas anidadas que usan la definición de la vía de la cuadrícula padre.

- -
-

Las Subgrids aún no están implementadas en ningún navegador y la especificación está sujeta a cambio.

-
- -

En la especificación actual, editaríamos el ejemplo de cuadrícula anidada arriba para usar display: subgrid en lugar de display: grid, y luego eliminar la definición de vía. La cuadrícula anidada utilizará las vías de la cuadrícula principal para posicionar los elementos.

- -

Cabe señalar que la cuadrícula está anidada en ambas dimensiones — filas y columnas. No hay concepto de la cuadrícula implícita trabajando con subgrids. Esto significa que debe asegurarse de que la cuadrícula padre tenga suficientes vías de fila y columna para todos los subelementos.

- -
.box1 {
-   grid-column-start: 1;
-   grid-column-end: 4;
-   grid-row-start: 1;
-   grid-row-end: 3;
-   display: subgrid;
-}
-
- -

Estratificando elementos con z-index

- -

Los elementos de cuadrícula pueden ocupar la misma celda. Si volvemos a nuestro ejemplo con elementos posicionados por número de línea, podemos cambiar esto para hacer que dos elementos se superpongan.

- -
-
<div class="wrapper">
-  <div class="box box1">One</div>
-  <div class="box box2">Two</div>
-  <div class="box box3">Three</div>
-  <div class="box box4">Four</div>
-  <div class="box box5">Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-}
-
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-}
-
-.box2 {
-  grid-column-start: 1;
-  grid-row-start: 2;
-  grid-row-end: 4;
-}
-
- - -
- -

{{ EmbedLiveSample('l_ex', '230', '420') }}

- -

El elemento box2 ahora se superpone a box1, se muestra en la parte superior ya que aparece después en el orden de origen.

- -

Controlando el orden

- -

Podemos controlar el orden en el que los artículos se apilan utilizando la propiedad z-index - al igual que con los elementos posicionados. Si le damos a box2 un z-index más bajo que box1, se mostrará debajo de box1 en la pila.

- -
-
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-}
-
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  z-index: 2;
-}
-
-.box2 {
-  grid-column-start: 1;
-  grid-row-start: 2;
-  grid-row-end: 4;
-  z-index: 1;
-}
-
- - - -

{{ EmbedLiveSample('controlando_el_orden', '230', '420') }}

- -

Siguientes Pasos

- -

En este artículo hemos tenido una mirada muy rápida a través de la Especificación de Grid Layout. Juegue un poco con los ejemplos de código, y luego pase a la siguiente parte de esta guía donde realmente nos vamos a adentrar en detalle dentro de CSS Grid Layout.

- - -
diff --git a/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html b/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html deleted file mode 100644 index 298da1dc5f..0000000000 --- a/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html +++ /dev/null @@ -1,642 +0,0 @@ ---- -title: Relación de Grid Layout con otros métodos de diseño y posicionamiento - CSS -slug: Web/CSS/CSS_Grid_Layout/Relacion_de_Grid_Layout -tags: - - CSS - - CSS Cuadrícula - - CSS Grids - - CSS Grilla - - CSS Rejilla - - Guía -translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout ---- -

CSS Grid Layout ha sido diseñado para trabajar junto con otros elementos de CSS, como parte de un sistema completo para hacer el diseño. En esta guía explicaré cómo se ajusta Grid junto con otras técnicas que ya se estén usando.

- -
-

Las traducciones posibles a la palabra Grid en este contexto son: Grilla, Rejilla, Cuadrícula, Malla. Para efecto del contenido será Grid.

-
- -

Grid y flexbox

- -

La diferencia básica entre CSS Grid Layout y CSS Flexbox Layout es que Flexbox se creó para diseños de una dimensión, en una fila o una columna. En cambio CSS Grid Layout se pensó para el diseño bidimensional, en varias filas y columnas al mismo tiempo. Sin embargo, las dos especificaciones comparten algunas características comunes, y si ya has aprendido cómo utilizar Flexbox, verás semejanzas que te ayudarán a entender Grid.

- -

Diseños de Una dimensión vs. dos dimensiones

- -

Un ejemplo simple puede demostrar la diferencia entre el diseño de una y dos dimensiones.

- -

En este primer ejemplo, estoy usando flexbox para diseñar un conjunto de cajas. Tengo cinco ítems-hijos en mi contenedor y les he dado valores a sus propiedades flex para que puedan aumentar y reducirse desde una flex-basis de 200 píxeles.

- -

También he configurado la propiedad wrap{{cssxref ("flex-wrap")}} , de modo que si el espacio del contenedor se hace demasiado estrecho para mantener esa flex-basis, los ítems se ajustarán (wrap) a una nueva fila.

- -
- - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: flex;
-  flex-wrap: wrap;
-}
-.wrapper > div {
-  flex: 1 1 200px;
-}
-
-
- -

{{ EmbedLiveSample('onedtwod', '500', '230') }}

- -

En la imagen se puede ver que dos elementos se han ajustado en una nueva línea. Estos ítems comparten el espacio disponible y no están alineados debajo de los ítems de arriba. Esto es porque cuando envuelves (wrap) flex-ítems, cada nueva fila (o columna si se trabaja por columna) se convierte en un nuevo flex-container. La distribución del espacio ocurre a lo largo de la fila.

- -

La pregunta típica entonces es cómo conseguir que estos ítems se alineen. Aquí es donde queremos un método de layout bidimensional, queremos controlar la alineación por fila y columna, y es donde entra el grid.

- -

El mismo diseño con CSS Grid Layout

- -

En el siguiente ejemplo construyo el mismo diseño usando Grid. Esta vez tenemos tres pistas de columna de 1fr. No necesitamos establecer nada sobre los ítems mismos, ellos se colocarán uno dentro de cada celda de la cuadrícula creada. Como se puede ver, se mantienen en una cuadrícula estricta, alineados en filas y columnas. Con cinco ítems, tenemos un hueco al final de la fila dos.

- -
- - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
- -

{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}

-
- -

Hay una pregunta muy simple para decidir si utilizar grid o flexbox:

- -
    -
  • ¿Necesito controlar el diseño únicamente por filas o por columnas? – usa flexbox
    • -
  • ¿Necesito controlar el diseño por filas y por columnas? – usa grid
    • -
- -

¿Contenido fuera o layout dentro?

- -

Además de la distinción unidimensional vs bidimensional, hay otra forma de decidir si es mejor utilizar flexbox o grid para un layout. Flexbox trabaja desde el contenido. Un caso de uso ideal para flexbox es cuando tienes un conjunto de ítems y quieres espaciarlos uniformemente en un contenedor. Dejas que el tamaño del contenido decida cuánto espacio ocupa cada ítem. Si los ítems se envuelven (wrap) en una nueva línea, calcularán su espaciado basándose en su tamaño y el espacio disponible en esa línea.

- -

Grid funciona desde el layout hacia adentro. Cuando usas CSS Grid Layout creas un diseño y luego colocas elementos en él, o permites que las reglas de auto-placement coloquen los elementos en las celdas de la cuadrícula de acuerdo con esa cuadrícula estricta. Existe la posibilidad de crear pistas que respondan al tamaño del contenido, sin embargo, también cambiarán toda la pista.

- -

Si estás usando flexbox y estás deshabilitando parte de la flexibilidad, probablemente necesites usar CSS Grid Layout. Un ejemplo sería si estás configurando un ancho de porcentaje en un flex-item para alinearlo con otros ítems de una línea anterior. En ese caso, es probable que Grid sea una mejor opción.

- -

Alineación de Cajas

- -

La característica de Flexbox que fue más emocionante para muchos de nosotros es que nos dio un control de alineación adecuado por primera vez. Hizo fácil centrar una caja en la página. Los flex-ítems pueden estirarse hasta la altura del flex container, lo que significa que son posibles columnas de la misma altura. Estas eran cosas que queríamos hacer desde hace mucho tiempo, y creamos todo tipo de hacks para conseguir al menos el efecto visual.

- -

Las propiedades de alineación de la especificación de Flexbox se han añadido a una nueva especificación llamada Box Alignment Level 3. Esto significa que pueden utilizarse en otras especificaciones, incluida Grid Layout. En el futuro, es posible que se apliquen también a otros métodos de layout.

- -

En una guía posterior en esta serie voy a echar un vistazo a Box Alignment y cómo funciona en Grid Layout, sin embargo aquí hay un ejemplo simple comparando Flexbox con Grid.

- -

El primer ejemplo utiliza flexbox, tengo un contenedor con tres ítems dentro. El {{cssxref("min-height")}} del wrapper es fijo, por lo que está definiendo la altura del flex container. En el flex container he establecido {{cssxref("align-items")}} en flex-end para que los items se alineen al final del flex container. También he establecido la propiedad {{cssxref("align-self")}} en box1 para que anule el valor por defecto y se estire a la altura del contenedor, y en box2 para que se alinee con el inicio del contenedor flexible.

- -
- - -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-</div>
-
- -
.wrapper {
-  display: flex;
-  align-items: flex-end;
-  min-height: 200px;
-}
-.box1 {
-  align-self: stretch;
-}
-.box2 {
-  align-self: flex-start;
-}
-
- -

{{ EmbedLiveSample('Alineacion_de_cajas', '300', '230') }}

-
- -

Alineación en CSS Grid Layout

- -

En este segundo ejemplo uso Grid para construir el mismo diseño, usando las propiedades de alineación como se aplican en el grid layout. Por eso alineamos a start y a end en vez de a flex-start yflex-end. En grid layout alineamos los ítems dentro de su grid area que en este caso es una celda de la rejilla pero puede ser un área formada por múltiples celdas de rejilla.

- -
- - -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3,1fr);
-  align-items: end;
-  grid-auto-rows: 200px;
-}
-.box1 {
-  align-self: stretch;
-}
-.box2 {
-  align-self: start;
-}
-
- -

{{ EmbedLiveSample('Alineacion_en_Cssgrid', '200', '310') }}

-
- -

La unidad fr y flex-basis

- -

Ya hemos visto que la unidad fr asigna a las pistas del grid (tracks) una proporción del espacio disponible en el grid container. La unidad frcombinada con la función {{cssxref("minmax()", "minmax")}} permite un comportamiento muy similar al que tienen las propiedades flex en Flexbox - y todavía mantenemos la posibilidad de crear un layout de dos dimensiones.

- -

Si volvemos al ejemplo en el que demostré la diferencia entre layouts de una y de dos dimensiones, puedes ver que hay una diferencia con respecto al modo de funcionamiento responsive en cada una de ellas. En la flex-layout si arrastramos nuestra ventana haciéndola cada vez más pequeña, flex box ajusta el número de ítems en cada fila de acuerdo al espacio disponible. Si tenemos mucho espacio los cinco ítems pueden caber en una fila, pero si tenemos un contenedor muy estrecho podríamos tener espacio solo para uno.

- -

En comparación, la versión grid siempre mantiene tres pistas de columna: son las pistas mismas las que crecen y se encogen, pero siempre hay tres, ya que al crear la rejilla definimos tres.

- -

Auto-filling grid tracks

- -

Podemos crear un efecto similar a flexbox, mientras mantenemos el contenido organizado en filas y columnas concretas mediante la creación de una lista de tracks usando la notación repeat y las propiedades auto-fill y auto-fit.

- -

En el siguiente ejemplo he usado auto-fill en el lugar del número entero de la notación repeat y he establecido la lista de pistas en 200 píxeles. Esto significa que el grid creará tantas columnas de 200 píxeles como quepan en el container.

- - - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 200px);
-}
-
- -

{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}

- -

Una cantidad flexible de pistas

- -

Esto no es lo mismo que flexbox, en el ejemplo de flexbox los elementos son más grandes que la base de 200 píxeles antes del envoltorio. Podemos lograr lo mismo en grid combinando auto-fill y la función {{cssxref("minmax()", "minmax")}}. En el siguiente ejemplo configuro pistas que se rellenan automáticamente con minmax. Quiero que mis pistas tengan un mínimo de 200 píxeles, y luego establezco el máximo en 1fr. Una vez que el navegador ha calculado cuántas veces caben 200 píxeles en el contenedor - teniendo en cuenta también la cantidad de espacio entre las rejillas ( grid gaps) - tratará como una instrucción el máximo de 1fr y repartirá el espacio restante entre los ítems.

- -
- - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-}
-
- -

{{ EmbedLiveSample('cantidad_flexible_pistas', '500', '170') }}

-
- -

Ahora tenemos la capacidad de crear una cuadrícula con un número flexible de pistas flexibles, y de ver los ítems dispuestos en la cuadrícula alineados por filas y columnas al mismo tiempo.

- -

El grid y los elementos absolutamente posicionados

- -

Grid interactúa con elementos absolutamente posicionados, lo que puede ser útil si quieres colocar un ítem dentro de una rejilla o de un área de la rejilla. La especificación define el comportamiento cuando un grid container es el bloque contenedor y es el padre del ítem posicionado absolutamente.

- -

El grid container como bloque contenedor

- -

Para hacer que el grid container sea un bloque contenedor es necesario añadir al container la propiedad position con el valor relative, (de la misma manera que harías para cualquier otro bloque contenedor posicionado absolutamente). Una vez hecho esto, si das la propiedad position: absolute a un grid-item se tomará como bloque que contiene el grid container o, si el ítem también tiene una posición de cuadrícula, como el área de la cuadrícula en la que se coloca.

- -

En el ejemplo de abajo tengo un wrapper que contiene cuatro ítems hijos, el ítem tres está absolutamente posicionado y también está colocado en la cuadrícula usando line-based placement. El grid container tiene position: relative y así se convierte en el contexto de posicionamiento de este elemento.

- -
- - -
<div class="wrapper">
-   <div class="box1">One</div>
-   <div class="box2">Two</div>
-   <div class="box3">
-    Este bloque está absolutamente posicionado. En este ejemplo, el grid container es el bloque contenedor, y por ello sus valores offsset para el posicionamiento absoluto se calculan a partir de los bordes exteriores del área en la que está colocado.
-   </div>
-   <div class="box4">Four</div>
-</div>
-
- -
.wrapper {
-   display: grid;
-   grid-template-columns: repeat(4,1fr);
-   grid-auto-rows: 200px;
-   grid-gap: 20px;
-   position: relative;
-}
-.box3 {
-   grid-column-start: 2;
-   grid-column-end: 4;
-   grid-row-start: 1;
-   grid-row-end: 3;
-   position: absolute;
-   top: 40px;
-   left: 40px;
-}
-
- -

{{ EmbedLiveSample('grid_container_como_bloque_contenedor', '500', '330') }}

-
- -

Puedes ver que el ítem está ocupando el área de la línea 2 a la 4 de la cuadrícula y que empieza después de la línea 1. Luego se desplaza en esa área usando las propiedades top y left. Sin embargo, se ha sacado del flujo, como ocurre con los objetos en posición absoluta, por lo que las reglas de auto-placement colocan los objetos en ese mismo espacio. El ítem tampoco causa que sea generada la fila adicional para que se extienda a la línea 3.

- -

Si eliminamos position: absolute de las reglas de .box3 podemos ver cómo se mostraría sin el posicionamiento.

- -

El grid container como parent

- -

Si el hijo absolutamente posicionado tiene un grid container como padre pero ese container no crea un nuevo contexto de posicionamiento, entonces se saca del flujo como en el ejemplo anterior. El contexto de posicionamiento será el elemento que cree un contexto de posicionamiento como es común a otros métodos de diseño. En nuestro caso, si eliminamos position: relative del wrapper de arriba, el contexto de posicionamiento es de la ventana de visualización, como se muestra en esta imagen.

- -

Image of grid container as parent

- -

Una vez más, el ítem ya no participa en el diseño de la cuadrícula en términos de tamaño o cuando otros ítems se colocan automáticamente.

- -

Con un grid area como parent

- -

Si el ítem absolutamente posicionado está anidado dentro de un área de cuadrícula, entonces puede crear un contexto de posicionamiento en esa área. En el ejemplo de abajo tenemos nuestra cuadrícula como antes pero esta vez he anidado un ítem dentro de .box3 de la cuadrícula.

- -

He dado a .box3 position relative y luego he posicionado el sub-ítem con las propiedades offset. En este caso, el contexto de posicionamiento es el grid area

- -
- - -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three
-    <div class="abspos">
-     Este bloque está absolutamente posicionado. En este ejemplo, el grid container es el bloque contenedor, y por ello sus valores offsset para el posicionamiento absoluto se calculan a partir de los bordes exteriores del área en la que está colocado.
-    </div>
-  </div>
-  <div class="box4">Four</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4,1fr);
-  grid-auto-rows: 200px;
-  grid-gap: 20px;
-}
-.box3 {
-  grid-column-start: 2;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  position: relative;
-}
-.abspos {
-  position: absolute;
-  top: 40px;
-  left: 40px;
-  background-color: rgba(255,255,255,.5);
-  border: 1px solid rgba(0,0,0,0.5);
-  color: #000;
-  padding: 10px;
-}
-
- -

{{ EmbedLiveSample('Con_un_grid_area_como_parent', '500', '420') }}

-
- -

Grid y display: contents

- -

Una interacción final con otra especificación de layout que merece la pena destacar es la interacción entre CSS Grid Layout y display: contents. El valor de contents en la propiedad display es un nuevo valor que se describe en Display specification de la siguiente manera:

- -
-

“El elemento en sí no genera ninguna caja, pero sus hijos y pseudo-elementos siguen generando cajas como de costumbre. A efectos de generación y layout de cajas, el elemento debe ser tratado como si hubiera sido sustituido por sus hijos y pseudo-elementos en el árbol del documento”

-
- -

Si configuras un ítem como display: contents la caja que normalmente crearía desaparece, y las cajas de los elementos hijo aparecen como si hubieran subido de nivel. Esto significa que los hijos de un grid item pueden convertirse en grid items. . ¿Suena raro? He aquí un ejemplo sencillo. En el siguiente marcado tengo un grid, el primer ítem del grid se establece para que se expanda tres pistas de columna. Contiene tres ítems anidados. Como esos hijos no son hijos directos, no forman parte del grid layout y por tanto se muestran como display:block.

- -
- - -
<div class="wrapper">
-  <div class="box box1">
-    <div class="nested">a</div>
-    <div class="nested">b</div>
-    <div class="nested">c</div>
-  </div>
-  <div class="box box2">Two</div>
-  <div class="box box3">Three</div>
-  <div class="box box4">Four</div>
-  <div class="box box5">Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-}
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-}
-
-
- -

{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}

-
- -

Si ahora añado display: contents a las reglas del box1, la caja de ese ítem desaparece y los subítems se convierten en grid ítems y se despliegan usando las reglas de auto-placement.

- -
- - -
<div class="wrapper">
-  <div class="box box1">
-    <div class="nested">a</div>
-    <div class="nested">b</div>
-    <div class="nested">c</div>
-  </div>
-  <div class="box box2">Two</div>
-  <div class="box box3">Three</div>
-  <div class="box box4">Four</div>
-  <div class="box box5">Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-}
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  display: contents;
-}
-
- -

{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}

-
- -

Esta puede ser una forma de anidar elementos en la rejilla para que actúen como si fueran parte de la rejilla, y es una forma de sortear algunos de los problemas que resolverían los sub-grid una vez que se implementen. También puedes usar display: contents de manera similar en flexbox para que los ítems anidados se conviertan en flex items.

- -

Como puedes ver en esta guía, CSS Grid Layout es sólo una parte de tu kit de herramientas. No tengas miedo de mezclarlo con otros métodos de maquetación, para conseguir los diferentes efectos que necesitas.

- - diff --git a/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html new file mode 100644 index 0000000000..298da1dc5f --- /dev/null +++ b/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -0,0 +1,642 @@ +--- +title: Relación de Grid Layout con otros métodos de diseño y posicionamiento - CSS +slug: Web/CSS/CSS_Grid_Layout/Relacion_de_Grid_Layout +tags: + - CSS + - CSS Cuadrícula + - CSS Grids + - CSS Grilla + - CSS Rejilla + - Guía +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +

CSS Grid Layout ha sido diseñado para trabajar junto con otros elementos de CSS, como parte de un sistema completo para hacer el diseño. En esta guía explicaré cómo se ajusta Grid junto con otras técnicas que ya se estén usando.

+ +
+

Las traducciones posibles a la palabra Grid en este contexto son: Grilla, Rejilla, Cuadrícula, Malla. Para efecto del contenido será Grid.

+
+ +

Grid y flexbox

+ +

La diferencia básica entre CSS Grid Layout y CSS Flexbox Layout es que Flexbox se creó para diseños de una dimensión, en una fila o una columna. En cambio CSS Grid Layout se pensó para el diseño bidimensional, en varias filas y columnas al mismo tiempo. Sin embargo, las dos especificaciones comparten algunas características comunes, y si ya has aprendido cómo utilizar Flexbox, verás semejanzas que te ayudarán a entender Grid.

+ +

Diseños de Una dimensión vs. dos dimensiones

+ +

Un ejemplo simple puede demostrar la diferencia entre el diseño de una y dos dimensiones.

+ +

En este primer ejemplo, estoy usando flexbox para diseñar un conjunto de cajas. Tengo cinco ítems-hijos en mi contenedor y les he dado valores a sus propiedades flex para que puedan aumentar y reducirse desde una flex-basis de 200 píxeles.

+ +

También he configurado la propiedad wrap{{cssxref ("flex-wrap")}} , de modo que si el espacio del contenedor se hace demasiado estrecho para mantener esa flex-basis, los ítems se ajustarán (wrap) a una nueva fila.

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.wrapper > div {
+  flex: 1 1 200px;
+}
+
+
+ +

{{ EmbedLiveSample('onedtwod', '500', '230') }}

+ +

En la imagen se puede ver que dos elementos se han ajustado en una nueva línea. Estos ítems comparten el espacio disponible y no están alineados debajo de los ítems de arriba. Esto es porque cuando envuelves (wrap) flex-ítems, cada nueva fila (o columna si se trabaja por columna) se convierte en un nuevo flex-container. La distribución del espacio ocurre a lo largo de la fila.

+ +

La pregunta típica entonces es cómo conseguir que estos ítems se alineen. Aquí es donde queremos un método de layout bidimensional, queremos controlar la alineación por fila y columna, y es donde entra el grid.

+ +

El mismo diseño con CSS Grid Layout

+ +

En el siguiente ejemplo construyo el mismo diseño usando Grid. Esta vez tenemos tres pistas de columna de 1fr. No necesitamos establecer nada sobre los ítems mismos, ellos se colocarán uno dentro de cada celda de la cuadrícula creada. Como se puede ver, se mantienen en una cuadrícula estricta, alineados en filas y columnas. Con cinco ítems, tenemos un hueco al final de la fila dos.

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}

+
+ +

Hay una pregunta muy simple para decidir si utilizar grid o flexbox:

+ +
    +
  • ¿Necesito controlar el diseño únicamente por filas o por columnas? – usa flexbox
    • +
  • ¿Necesito controlar el diseño por filas y por columnas? – usa grid
    • +
+ +

¿Contenido fuera o layout dentro?

+ +

Además de la distinción unidimensional vs bidimensional, hay otra forma de decidir si es mejor utilizar flexbox o grid para un layout. Flexbox trabaja desde el contenido. Un caso de uso ideal para flexbox es cuando tienes un conjunto de ítems y quieres espaciarlos uniformemente en un contenedor. Dejas que el tamaño del contenido decida cuánto espacio ocupa cada ítem. Si los ítems se envuelven (wrap) en una nueva línea, calcularán su espaciado basándose en su tamaño y el espacio disponible en esa línea.

+ +

Grid funciona desde el layout hacia adentro. Cuando usas CSS Grid Layout creas un diseño y luego colocas elementos en él, o permites que las reglas de auto-placement coloquen los elementos en las celdas de la cuadrícula de acuerdo con esa cuadrícula estricta. Existe la posibilidad de crear pistas que respondan al tamaño del contenido, sin embargo, también cambiarán toda la pista.

+ +

Si estás usando flexbox y estás deshabilitando parte de la flexibilidad, probablemente necesites usar CSS Grid Layout. Un ejemplo sería si estás configurando un ancho de porcentaje en un flex-item para alinearlo con otros ítems de una línea anterior. En ese caso, es probable que Grid sea una mejor opción.

+ +

Alineación de Cajas

+ +

La característica de Flexbox que fue más emocionante para muchos de nosotros es que nos dio un control de alineación adecuado por primera vez. Hizo fácil centrar una caja en la página. Los flex-ítems pueden estirarse hasta la altura del flex container, lo que significa que son posibles columnas de la misma altura. Estas eran cosas que queríamos hacer desde hace mucho tiempo, y creamos todo tipo de hacks para conseguir al menos el efecto visual.

+ +

Las propiedades de alineación de la especificación de Flexbox se han añadido a una nueva especificación llamada Box Alignment Level 3. Esto significa que pueden utilizarse en otras especificaciones, incluida Grid Layout. En el futuro, es posible que se apliquen también a otros métodos de layout.

+ +

En una guía posterior en esta serie voy a echar un vistazo a Box Alignment y cómo funciona en Grid Layout, sin embargo aquí hay un ejemplo simple comparando Flexbox con Grid.

+ +

El primer ejemplo utiliza flexbox, tengo un contenedor con tres ítems dentro. El {{cssxref("min-height")}} del wrapper es fijo, por lo que está definiendo la altura del flex container. En el flex container he establecido {{cssxref("align-items")}} en flex-end para que los items se alineen al final del flex container. También he establecido la propiedad {{cssxref("align-self")}} en box1 para que anule el valor por defecto y se estire a la altura del contenedor, y en box2 para que se alinee con el inicio del contenedor flexible.

+ +
+ + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+  display: flex;
+  align-items: flex-end;
+  min-height: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: flex-start;
+}
+
+ +

{{ EmbedLiveSample('Alineacion_de_cajas', '300', '230') }}

+
+ +

Alineación en CSS Grid Layout

+ +

En este segundo ejemplo uso Grid para construir el mismo diseño, usando las propiedades de alineación como se aplican en el grid layout. Por eso alineamos a start y a end en vez de a flex-start yflex-end. En grid layout alineamos los ítems dentro de su grid area que en este caso es una celda de la rejilla pero puede ser un área formada por múltiples celdas de rejilla.

+ +
+ + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  align-items: end;
+  grid-auto-rows: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: start;
+}
+
+ +

{{ EmbedLiveSample('Alineacion_en_Cssgrid', '200', '310') }}

+
+ +

La unidad fr y flex-basis

+ +

Ya hemos visto que la unidad fr asigna a las pistas del grid (tracks) una proporción del espacio disponible en el grid container. La unidad frcombinada con la función {{cssxref("minmax()", "minmax")}} permite un comportamiento muy similar al que tienen las propiedades flex en Flexbox - y todavía mantenemos la posibilidad de crear un layout de dos dimensiones.

+ +

Si volvemos al ejemplo en el que demostré la diferencia entre layouts de una y de dos dimensiones, puedes ver que hay una diferencia con respecto al modo de funcionamiento responsive en cada una de ellas. En la flex-layout si arrastramos nuestra ventana haciéndola cada vez más pequeña, flex box ajusta el número de ítems en cada fila de acuerdo al espacio disponible. Si tenemos mucho espacio los cinco ítems pueden caber en una fila, pero si tenemos un contenedor muy estrecho podríamos tener espacio solo para uno.

+ +

En comparación, la versión grid siempre mantiene tres pistas de columna: son las pistas mismas las que crecen y se encogen, pero siempre hay tres, ya que al crear la rejilla definimos tres.

+ +

Auto-filling grid tracks

+ +

Podemos crear un efecto similar a flexbox, mientras mantenemos el contenido organizado en filas y columnas concretas mediante la creación de una lista de tracks usando la notación repeat y las propiedades auto-fill y auto-fit.

+ +

En el siguiente ejemplo he usado auto-fill en el lugar del número entero de la notación repeat y he establecido la lista de pistas en 200 píxeles. Esto significa que el grid creará tantas columnas de 200 píxeles como quepan en el container.

+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+
+ +

{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}

+ +

Una cantidad flexible de pistas

+ +

Esto no es lo mismo que flexbox, en el ejemplo de flexbox los elementos son más grandes que la base de 200 píxeles antes del envoltorio. Podemos lograr lo mismo en grid combinando auto-fill y la función {{cssxref("minmax()", "minmax")}}. En el siguiente ejemplo configuro pistas que se rellenan automáticamente con minmax. Quiero que mis pistas tengan un mínimo de 200 píxeles, y luego establezco el máximo en 1fr. Una vez que el navegador ha calculado cuántas veces caben 200 píxeles en el contenedor - teniendo en cuenta también la cantidad de espacio entre las rejillas ( grid gaps) - tratará como una instrucción el máximo de 1fr y repartirá el espacio restante entre los ítems.

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+ +

{{ EmbedLiveSample('cantidad_flexible_pistas', '500', '170') }}

+
+ +

Ahora tenemos la capacidad de crear una cuadrícula con un número flexible de pistas flexibles, y de ver los ítems dispuestos en la cuadrícula alineados por filas y columnas al mismo tiempo.

+ +

El grid y los elementos absolutamente posicionados

+ +

Grid interactúa con elementos absolutamente posicionados, lo que puede ser útil si quieres colocar un ítem dentro de una rejilla o de un área de la rejilla. La especificación define el comportamiento cuando un grid container es el bloque contenedor y es el padre del ítem posicionado absolutamente.

+ +

El grid container como bloque contenedor

+ +

Para hacer que el grid container sea un bloque contenedor es necesario añadir al container la propiedad position con el valor relative, (de la misma manera que harías para cualquier otro bloque contenedor posicionado absolutamente). Una vez hecho esto, si das la propiedad position: absolute a un grid-item se tomará como bloque que contiene el grid container o, si el ítem también tiene una posición de cuadrícula, como el área de la cuadrícula en la que se coloca.

+ +

En el ejemplo de abajo tengo un wrapper que contiene cuatro ítems hijos, el ítem tres está absolutamente posicionado y también está colocado en la cuadrícula usando line-based placement. El grid container tiene position: relative y así se convierte en el contexto de posicionamiento de este elemento.

+ +
+ + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">
+    Este bloque está absolutamente posicionado. En este ejemplo, el grid container es el bloque contenedor, y por ello sus valores offsset para el posicionamiento absoluto se calculan a partir de los bordes exteriores del área en la que está colocado.
+   </div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(4,1fr);
+   grid-auto-rows: 200px;
+   grid-gap: 20px;
+   position: relative;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   position: absolute;
+   top: 40px;
+   left: 40px;
+}
+
+ +

{{ EmbedLiveSample('grid_container_como_bloque_contenedor', '500', '330') }}

+
+ +

Puedes ver que el ítem está ocupando el área de la línea 2 a la 4 de la cuadrícula y que empieza después de la línea 1. Luego se desplaza en esa área usando las propiedades top y left. Sin embargo, se ha sacado del flujo, como ocurre con los objetos en posición absoluta, por lo que las reglas de auto-placement colocan los objetos en ese mismo espacio. El ítem tampoco causa que sea generada la fila adicional para que se extienda a la línea 3.

+ +

Si eliminamos position: absolute de las reglas de .box3 podemos ver cómo se mostraría sin el posicionamiento.

+ +

El grid container como parent

+ +

Si el hijo absolutamente posicionado tiene un grid container como padre pero ese container no crea un nuevo contexto de posicionamiento, entonces se saca del flujo como en el ejemplo anterior. El contexto de posicionamiento será el elemento que cree un contexto de posicionamiento como es común a otros métodos de diseño. En nuestro caso, si eliminamos position: relative del wrapper de arriba, el contexto de posicionamiento es de la ventana de visualización, como se muestra en esta imagen.

+ +

Image of grid container as parent

+ +

Una vez más, el ítem ya no participa en el diseño de la cuadrícula en términos de tamaño o cuando otros ítems se colocan automáticamente.

+ +

Con un grid area como parent

+ +

Si el ítem absolutamente posicionado está anidado dentro de un área de cuadrícula, entonces puede crear un contexto de posicionamiento en esa área. En el ejemplo de abajo tenemos nuestra cuadrícula como antes pero esta vez he anidado un ítem dentro de .box3 de la cuadrícula.

+ +

He dado a .box3 position relative y luego he posicionado el sub-ítem con las propiedades offset. En este caso, el contexto de posicionamiento es el grid area

+ +
+ + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three
+    <div class="abspos">
+     Este bloque está absolutamente posicionado. En este ejemplo, el grid container es el bloque contenedor, y por ello sus valores offsset para el posicionamiento absoluto se calculan a partir de los bordes exteriores del área en la que está colocado.
+    </div>
+  </div>
+  <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: relative;
+}
+.abspos {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid rgba(0,0,0,0.5);
+  color: #000;
+  padding: 10px;
+}
+
+ +

{{ EmbedLiveSample('Con_un_grid_area_como_parent', '500', '420') }}

+
+ +

Grid y display: contents

+ +

Una interacción final con otra especificación de layout que merece la pena destacar es la interacción entre CSS Grid Layout y display: contents. El valor de contents en la propiedad display es un nuevo valor que se describe en Display specification de la siguiente manera:

+ +
+

“El elemento en sí no genera ninguna caja, pero sus hijos y pseudo-elementos siguen generando cajas como de costumbre. A efectos de generación y layout de cajas, el elemento debe ser tratado como si hubiera sido sustituido por sus hijos y pseudo-elementos en el árbol del documento”

+
+ +

Si configuras un ítem como display: contents la caja que normalmente crearía desaparece, y las cajas de los elementos hijo aparecen como si hubieran subido de nivel. Esto significa que los hijos de un grid item pueden convertirse en grid items. . ¿Suena raro? He aquí un ejemplo sencillo. En el siguiente marcado tengo un grid, el primer ítem del grid se establece para que se expanda tres pistas de columna. Contiene tres ítems anidados. Como esos hijos no son hijos directos, no forman parte del grid layout y por tanto se muestran como display:block.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+}
+
+
+ +

{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}

+
+ +

Si ahora añado display: contents a las reglas del box1, la caja de ese ítem desaparece y los subítems se convierten en grid ítems y se despliegan usando las reglas de auto-placement.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  display: contents;
+}
+
+ +

{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}

+
+ +

Esta puede ser una forma de anidar elementos en la rejilla para que actúen como si fueran parte de la rejilla, y es una forma de sortear algunos de los problemas que resolverían los sub-grid una vez que se implementen. También puedes usar display: contents de manera similar en flexbox para que los ítems anidados se conviertan en flex items.

+ +

Como puedes ver en esta guía, CSS Grid Layout es sólo una parte de tu kit de herramientas. No tengas miedo de mezclarlo con otros métodos de maquetación, para conseguir los diferentes efectos que necesitas.

+ + diff --git a/files/es/web/css/css_images/using_css_gradients/index.html b/files/es/web/css/css_images/using_css_gradients/index.html new file mode 100644 index 0000000000..2e3f5e13a4 --- /dev/null +++ b/files/es/web/css/css_images/using_css_gradients/index.html @@ -0,0 +1,386 @@ +--- +title: Usando gradientes con CSS +slug: CSS/Using_CSS_gradients +translation_of: Web/CSS/CSS_Images/Using_CSS_gradients +--- +

CSS3 posee soporte para nuevos tipos de gradientes  en las propiedades CSS. Usarlos en un segundo plano, permite mostrar transiciones suaves entre dos o más colores especificados, evitando así el uso de imágenes para estos efectos, lo que reduce el tiempo de descarga y el uso de ancho de banda. Además, debido a que el gradiente es generado por el navegador, los objetos degradados se ven mejor cuando se hace un acercamiento, y el ajuste de diseño es mucho más flexible.

+ +

Los navegadores soportan dos tipos de gradientes: lineal, definido con la función linear-gradient, y radial, definido con radial-gradient.

+ +

Gradientes lineales

+ +

Para crear un gradiente lineal, se establece un punto de partida y una dirección (indicada por un ángulo) a lo largo de la cual se aplica el efecto. Usted también puede definir paradas de color. las paradas de color son los colores que usted desea que Gecko renderise con suaves transiciones entre ellos, y usted puede específicar al menos dos de ellas, pero puede específicar más para crear efectos de gradientes más complejos.

+ +

Gradientes lineales simples

+ +

Aquí está un gradiente lineal que inicia en el centro (horizontalmente) y arriba (verticalmente), e inicia en azul, transicionando a blanco.

+ + + + + + + + + + + + +
Captura de pantallaDemo en vivo
+
 
+
+ +
+
/* La sintaxis vieja, obsoleta, pero todavía necesaria, con prefijo, para Opera y navegadores basados en WebKit-based */
+background: -prefix-linear-gradient(top, blue, white);
+
+/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
+background: linear-gradient(to bottom, blue, white);
+
+
+ +

Cambiando el mismo gradiente para correr de izquierda a derecha:

+ + + + + + + + + + + + +
Captura de pantallaDemo en vivo
basic_linear_blueleft.png +
 
+
+ +
/* la vieja sintaxis, obsoleta, pero todavía necesaria, prefijada, para Opera y Navegadores basados en Webkit */
+background: -prefix-linear-gradient(left, blue, white);
+
+/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
+background: linear-gradient(to right, blue, white);
+
+ +

Usted puede hace el gradiente sea generado diagonalmente mediante la especificación de la posición de inicio vertical y horizontal. Por ejemplo:

+ + + + + + + + + + + + +
Captura de pantallaDemo en vivo
basic_linear_bluetopleft.png +
 
+
+ +
/* la vieja sintaxis, obsoleta, pero todavía necesaria, prefijada, para Opera y Navegadores basados en Webkit */
+background: -prefix-linear-gradient(left top, blue, white);
+
+/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
+background: linear-gradient(to bottom right, blue, white);
+
+ +

Usando Angulos

+ +

Si usted no específica un ángulo, uno es determinado automáticamente basado en la dirección dada. Si usted desea más control sobre la dirección del gradiente, usted necesita establecer el ángulo específicamente.

+ +

Por ejemplo, aquí hay dos gradientes, el primero con una dirección hacia la derecha, y el segundo tiene un ángulo de 70 grados.

+ +

linear_gradient_angle.png

+ +

El de la derecha usa un CSS Como este:

+ +
background: linear-gradient(70deg, black, white);
+
+ +

El ángulo es especificado como un ángulo entre una línea vertical y la línea del gradiente, contando en el sentido horario. En otras palabras, 0deg crea un gradiente vertical desde el fondo hasta el tope, mientras 90deg genera un gradiente horizontal de izquierda a derecha:

+ +

linear_redangles.png

+ +
background: linear-gradient(<angle>, red, white);
+
+ +
+

Note: several browsers implement, prefixed, an older draft of the specification where 0deg was pointing to the right rather than to the top. Pay attention in the value of the angle when mixing prefixed and standard linear-gradient, some may need to have 90deg added to the <angle>.

+
+ +

Color stops

+ +

Color stops are points along the gradient line that will have a specific color at that location. The location can be specified as either a percentage of the length of the line, or as an absolute length. You may specify as many color stops as you like in order to achieve the desired effect.

+ +

If you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want.

+ +

Example: Three color stops

+ +

This example specifies three color stops:

+ + + + + + + + + + + + +
Screen ShotLive Demo
linear_colorstops1.png +
 
+
+ +
/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
+background: -prefix-linear-gradient(top, blue, white 80%, orange);
+
+/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
+background: linear-gradient(to bottom, blue, white 80%, orange);
+
+ +

Note that the first and last color stops don't specify a location; because of that, values of 0% and 100% are assigned automatically. The middle color stop specifies a location of 80%, putting it most of the way toward the bottom.

+ +

Example: Evenly spaced color stops

+ +

Here's an example using a wide variety of colors, all evenly spaced:

+ + + + + + + + + + + + +
Screen ShotLive Demo
linear_rainbow.png +
 
+
+ +
/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
+background: -prefix-linear-gradient(left, red, orange, yellow, green, blue);
+
+/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
+background: linear-gradient(to right, red, orange, yellow, green, blue);
+
+ +

Notice that the color stops are automatically spaced evenly when no locations are specified.

+ +

Transparency and gradients

+ +

Gradients support transparency. You can use this, for example, when stacking multiple backgrounds, to create fading effects on background images. For example:

+ +

linear_multibg_transparent.png

+ +
/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
+background: linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
+
+/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
+background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
+
+ +

The backgrounds are stacked with the first specified background on top, and each successive background farther away. By stacking backgrounds this way, you can create very creative effects as seen above.

+ +

Radial gradients

+ +

Radial gradients are specified using the {{ cssxref("radial-gradient") }} functional notation. The syntax is similar to that for linear gradients, except you can specify the gradient's ending shape (whether it should be a circle or ellipse) as well as its size. By default, the ending shape is an ellipse with the same proportions than the container's box.

+ +

Color stops

+ +

You specify color stops the same way as for linear gradients. The gradient line extends out from the starting position in all directions.

+ +

Example: Evenly spaced color stops

+ +

By default, as with linear gradients, the color stops are evenly spaced:

+ + + + + + + + + + + + +
Screen ShotLive Demo
radial_gradient_even.png +
 
+
+ +
background: radial-gradient(red, yellow, rgb(30, 144, 255));
+
+ +

Example: Explicitly spaced color stops

+ +

Here we specify specific locations for the color stops:

+ + + + + + + + + + + + +
Screen ShotLive Demo
radial_gradient_varied.png +
 
+
+ +
background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
+
+ +

Size

+ +

This is one of the areas in which radial gradients differ from linear gradients. You can provide a size value that specifies the point that defines the size of the circle or ellipse. See this description of the size constants for specifics.

+ +

Example: closest-side for ellipses

+ +

This ellipse uses the closest-side size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.

+ + + + + + + + + + + + +
Screen ShotLive Demo
radial_ellipse_size1.png +
 
+
+ +
background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
+
+ +

Example: farthest-corner for ellipses

+ +

This example is similar to the previous one, except that its size is specified as farthest-corner, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.

+ + + + + + + + + + + + +
Screen ShotLive Demo
radial_ellipse_size2.png +
 
+
+ +
background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
+
+ +

Example: closest-side for circles

+ +

This example uses closest-side, which determines the circle's size as the distance between the start point (the center) and the closest side.

+ + + + + + + + + + + + +
Screen ShotLive Demo
radial_circle_size1.png +
 
+
+ +
background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
+
+ +

Here, the circle's radius is half the height of the box, since the top and bottom edges are equidistant from the start point and are closer than the left and right edges.

+ +

Repeating gradients

+ +

The {{ cssxref("linear-gradient") }} and {{ cssxref("radial-gradient") }} properties don't support automatically repeating the color stops. However, the {{ cssxref("repeating-linear-gradient") }} and {{ cssxref("repeating-radial-gradient") }} properties are available to offer this functionality.

+ +

Examples: Repeating linear gradient

+ +

This example uses {{ cssxref("repeating-linear-gradient") }} to create a gradient:

+ + + + + + + + + + + + +
Screen ShotLive Demo
repeating_linear_gradient.png +
 
+
+ +
background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
+
+ +

Another example using the {{ cssxref("repeating-linear-gradient") }} property.

+ +

repeat_background_gradient_checked.png

+ +
background-color: #000;
+background-image: repeating-linear-gradient(90deg, transparent, transparent 50px,
+      rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
+      rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
+      rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
+      rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
+      rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
+      rgba(255, 206, 0, 0.25) 166px),
+repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
+      rgba(143, 77, 63, 0.25) 10px),
+repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
+      rgba(143, 77, 63, 0.25) 10px);
+
+ +

Example: Repeating radial gradient

+ +

This example uses {{ cssxref("repeating-radial-gradient") }} to create a gradient:

+ + + + + + + + + + + + +
Screen ShotLive Demo
repeating_radial_gradient.png +
 
+
+ +
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+
+ +

See also

+ +
    +
  • Gradient-related reference articles: {{cssxref("<image>")}}, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}.
    • +
diff --git a/files/es/web/css/css_logical_properties/dimensionamiento/index.html b/files/es/web/css/css_logical_properties/dimensionamiento/index.html deleted file mode 100644 index a5a9b4063c..0000000000 --- a/files/es/web/css/css_logical_properties/dimensionamiento/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Dimensionamiento para propiedades lógicas -slug: Web/CSS/CSS_Logical_Properties/Dimensionamiento -translation_of: Web/CSS/CSS_Logical_Properties/Sizing ---- -
{{CSSRef}}
- -

En esta guía explicaremos las asignaciones relativas al flujo relativo entre las propiedades de dimensionamiento físico y lógico usados para dimensionar elementos en nuestras páginas.

- -

Cuando especificamos el tamaño de un ítem, las Propiedades y Valores Lógicos te dan la habilidad de indicar el dimensionamiento en relación al flujo relativo del texto (en línea y bloque) más bien que dimensionamiento físico con relación a las dimensiones físicas: horizontal y vertical (por ejemplo, left y right). Si bien estas asignaciones de flujo relativo pueden convertirse en el valor predeterminado para muchos de nosotros, en un diseño puede usar el tamaño físico y el tamaño lógico. Es posible que desee que algunas características se relacionen siempre con las dimensiones físicas, independientemente del modo de escritura.

- -

Asignaciones para dimensiones

- -

La siguiente tabla proporciona asignaciones entre propiedades lógicas y físicas. Estas asignaciones asumen que estás en un modo de escritura  horizontal-tb, como Inglés o Árabe, en cada caso el ancho ({{CSSxRef("width")}}) sería asignado a {{CSSxRef("inline-size")}}.

- -

Si tú estás en un modo de escritura vertical, entonces {{CSSxRef("inline-size")}} sería asignado a {{CSSxRef("height")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Propiedades LógicasPropiedades Físicas
{{CSSxRef("inline-size")}}{{CSSxRef("width")}}
{{CSSxRef("block-size")}}{{CSSxRef("height")}}
{{CSSxRef("min-inline-size")}}{{CSSxRef("min-width")}}
{{CSSxRef("min-block-size")}}{{CSSxRef("min-height")}}
{{CSSxRef("max-inline-size")}}{{CSSxRef("max-width")}}
{{CSSxRef("max-block-size")}}{{CSSxRef("max-height")}}
- -

Ejemplo de ancho y alto

- -

Las asignaciones para el ancho ({{CSSxRef("width")}}) y el alto ({{CSSxRef("height")}}) son {{CSSxRef("inline-size")}}, que establece el largo en la dimensión en línea y {{CSSxRef("block-size")}}, que establece el largo en la dimensión en bloque. Cuando trabajamos en Inglés, si reemplazamos el ancho (width) con inline-size y el alto (height) con block-size dará el mismo diseño.

- -

En el siguiente ejemplo, establecemos un modo de escritura horizontal-tb. Cambiamos esto por vertical-rl y veremos que el primer ejemplo — cuando usamos width y height — permanece con el mismo tamaño en cada dimensión, a pesar de que el texto se vuelve vertical. El segundo ejemplo — cuando usamos inline-size y block-size — seguirá la dirección del texto como si todo el bloque hubiera girado.

- -

{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}

- -

Ejemplo de ancho y alto mínimo

- -

También hay asignaciones para {{CSSxRef ("min-width")}} y {{CSSxRef ("min-height")}} — estas son {{CSSxRef ("min-inline-size")}} y {{ CSSxRef ("min-block-size")}}. Estas funcionan de la misma manera que las propiedades de inline-size y block-size, pero establecen un tamaño mínimo en lugar de uno fijo.
-
- Intente cambiar el siguiente ejemplo a vertical-rl, como en el primer ejemplo, para ver el efecto que tiene. Estoy usando min-height en el primer ejemplo y min-block-size en el segundo.

- -

 

- -

{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}

- -

Ejemplo de ancho y alto máximo

- -

Finalmente, puedes usar {{CSSxRef("max-inline-size")}} y {{CSSxRef("max-block-size")}} como reemplazos de {{CSSxRef("max-width")}} y {{CSSxRef("max-height")}}. Intenta jugar con el siguiente ejemplo de la misma manera que antes.

- -

{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}

- -

Palabras claves para redimensionamiento lógico

- -

La propiedad {{CSSxRef("resize")}} establece si un elemento se puede redimensionar o no y si tiene valores físicos de horizontal y vertical. La propiedad resize también tiene valores de palabras clave lógicas. Usar resize: inline permite cambiar el tamaño en la dimensión inline y resize: block permite cambiar el tamaño en la dimensión de bloque.

- -

El valor de la palabra clave de bothpara la propiedad de cambio de tamaño funciona ya sea que esté pensando física o lógicamente. Establece ambas dimensiones a la vez. Intenta jugar con el siguiente ejemplo.

- -

{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}

- -
-

Nota: Tenga en cuenta que actualmente los valores lógicos para el cambio de tamaño solo son compatibles con Firefox.

- -

 

-
diff --git a/files/es/web/css/css_logical_properties/sizing/index.html b/files/es/web/css/css_logical_properties/sizing/index.html new file mode 100644 index 0000000000..a5a9b4063c --- /dev/null +++ b/files/es/web/css/css_logical_properties/sizing/index.html @@ -0,0 +1,89 @@ +--- +title: Dimensionamiento para propiedades lógicas +slug: Web/CSS/CSS_Logical_Properties/Dimensionamiento +translation_of: Web/CSS/CSS_Logical_Properties/Sizing +--- +
{{CSSRef}}
+ +

En esta guía explicaremos las asignaciones relativas al flujo relativo entre las propiedades de dimensionamiento físico y lógico usados para dimensionar elementos en nuestras páginas.

+ +

Cuando especificamos el tamaño de un ítem, las Propiedades y Valores Lógicos te dan la habilidad de indicar el dimensionamiento en relación al flujo relativo del texto (en línea y bloque) más bien que dimensionamiento físico con relación a las dimensiones físicas: horizontal y vertical (por ejemplo, left y right). Si bien estas asignaciones de flujo relativo pueden convertirse en el valor predeterminado para muchos de nosotros, en un diseño puede usar el tamaño físico y el tamaño lógico. Es posible que desee que algunas características se relacionen siempre con las dimensiones físicas, independientemente del modo de escritura.

+ +

Asignaciones para dimensiones

+ +

La siguiente tabla proporciona asignaciones entre propiedades lógicas y físicas. Estas asignaciones asumen que estás en un modo de escritura  horizontal-tb, como Inglés o Árabe, en cada caso el ancho ({{CSSxRef("width")}}) sería asignado a {{CSSxRef("inline-size")}}.

+ +

Si tú estás en un modo de escritura vertical, entonces {{CSSxRef("inline-size")}} sería asignado a {{CSSxRef("height")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propiedades LógicasPropiedades Físicas
{{CSSxRef("inline-size")}}{{CSSxRef("width")}}
{{CSSxRef("block-size")}}{{CSSxRef("height")}}
{{CSSxRef("min-inline-size")}}{{CSSxRef("min-width")}}
{{CSSxRef("min-block-size")}}{{CSSxRef("min-height")}}
{{CSSxRef("max-inline-size")}}{{CSSxRef("max-width")}}
{{CSSxRef("max-block-size")}}{{CSSxRef("max-height")}}
+ +

Ejemplo de ancho y alto

+ +

Las asignaciones para el ancho ({{CSSxRef("width")}}) y el alto ({{CSSxRef("height")}}) son {{CSSxRef("inline-size")}}, que establece el largo en la dimensión en línea y {{CSSxRef("block-size")}}, que establece el largo en la dimensión en bloque. Cuando trabajamos en Inglés, si reemplazamos el ancho (width) con inline-size y el alto (height) con block-size dará el mismo diseño.

+ +

En el siguiente ejemplo, establecemos un modo de escritura horizontal-tb. Cambiamos esto por vertical-rl y veremos que el primer ejemplo — cuando usamos width y height — permanece con el mismo tamaño en cada dimensión, a pesar de que el texto se vuelve vertical. El segundo ejemplo — cuando usamos inline-size y block-size — seguirá la dirección del texto como si todo el bloque hubiera girado.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}

+ +

Ejemplo de ancho y alto mínimo

+ +

También hay asignaciones para {{CSSxRef ("min-width")}} y {{CSSxRef ("min-height")}} — estas son {{CSSxRef ("min-inline-size")}} y {{ CSSxRef ("min-block-size")}}. Estas funcionan de la misma manera que las propiedades de inline-size y block-size, pero establecen un tamaño mínimo en lugar de uno fijo.
+
+ Intente cambiar el siguiente ejemplo a vertical-rl, como en el primer ejemplo, para ver el efecto que tiene. Estoy usando min-height en el primer ejemplo y min-block-size en el segundo.

+ +

 

+ +

{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}

+ +

Ejemplo de ancho y alto máximo

+ +

Finalmente, puedes usar {{CSSxRef("max-inline-size")}} y {{CSSxRef("max-block-size")}} como reemplazos de {{CSSxRef("max-width")}} y {{CSSxRef("max-height")}}. Intenta jugar con el siguiente ejemplo de la misma manera que antes.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}

+ +

Palabras claves para redimensionamiento lógico

+ +

La propiedad {{CSSxRef("resize")}} establece si un elemento se puede redimensionar o no y si tiene valores físicos de horizontal y vertical. La propiedad resize también tiene valores de palabras clave lógicas. Usar resize: inline permite cambiar el tamaño en la dimensión inline y resize: block permite cambiar el tamaño en la dimensión de bloque.

+ +

El valor de la palabra clave de bothpara la propiedad de cambio de tamaño funciona ya sea que esté pensando física o lógicamente. Establece ambas dimensiones a la vez. Intenta jugar con el siguiente ejemplo.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}

+ +
+

Nota: Tenga en cuenta que actualmente los valores lógicos para el cambio de tamaño solo son compatibles con Firefox.

+ +

 

+
diff --git a/files/es/web/css/css_modelo_caja/index.html b/files/es/web/css/css_modelo_caja/index.html deleted file mode 100644 index 320800f82e..0000000000 --- a/files/es/web/css/css_modelo_caja/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Modelo de Caja de CSS -slug: Web/CSS/CSS_Modelo_Caja -tags: - - CSS - - Modelo de Caja CSS - - Referencia CSS - - Visión general -translation_of: Web/CSS/CSS_Box_Model ---- -
{{CSSRef}}
- -

El modelo de caja CSS  es un módulo  CSS que define cajas rectangulares, incluyendo sus rellenos y márgenes, que son generadas para los elementos y que se disponen de acuerdo al modelo de formato visual.

- -

Referencia

- -

Propiedades

- -

Propiedades que controlan el flujo del contenido en una caja.

- -
-
    -
  • {{cssxref("box-decoration-break")}}
    • -
  • {{cssxref("box-sizing")}}
    • -
  • {{cssxref("overflow")}}
    • -
  • {{cssxref("overflow-x")}}
    • -
  • {{cssxref("overflow-y")}}
    • -
-
- -

Propiedades que controlan el tamaño de una caja.

- -
-
    -
  • {{cssxref("height")}}
    • -
  • {{cssxref("width")}}
    • -
  • {{cssxref("max-height")}}
    • -
  • {{cssxref("max-width")}}
    • -
  • {{cssxref("min-height")}}
    • -
  • {{cssxref("min-width")}}
    • -
-
- -

Propiedades que controlan los márgenes de una caja.

- -
-
    -
  • {{cssxref("margin")}}
    • -
  • {{cssxref("margin-bottom")}}
    • -
  • {{cssxref("margin-left")}}
    • -
  • {{cssxref("margin-right")}}
    • -
  • {{cssxref("margin-top")}}
    • -
-
- -

Propiedades que controlan los rellenos de una caja

- -
-
    -
  • {{cssxref("padding")}}
    • -
  • {{cssxref("padding-bottom")}}
    • -
  • {{cssxref("padding-left")}}
    • -
  • {{cssxref("padding-right")}}
    • -
  • {{cssxref("padding-top")}}
    • -
-
- -

Otras propiedades

- -
-
    -
  • {{cssxref("box-shadow")}}
    • -
  • {{cssxref("visibility")}}
    • -
-
- -

Guías y Herramientas

- -
-
Introduction to the CSS box model
-
Explica uno de los conceptos fundamentales de CSS, el modelo de caja: describe el significado del margen, del relleno, así como de las diferentes zonas de una caja.
-
Mastering margin collapsing
-
En determinados casos dos márgenes adyacentes se convierten en uno. Este artículo explica cuando sucede esto y cómo controlarlo.
-
Box-shadow generator
-
Una herramienta interactiva que permite crear sombras y proporciona la síntaxis necesaria para generar dichas sombras usando la propiedad {{cssxref("box-shadow")}}.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Definición Inicial
- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico1.0{{CompatGeckoMobile("1")}}6.06.01.0
-
diff --git "a/files/es/web/css/css_modelo_caja/introducci\303\263n_al_modelo_de_caja_de_css/index.html" "b/files/es/web/css/css_modelo_caja/introducci\303\263n_al_modelo_de_caja_de_css/index.html" deleted file mode 100644 index 45571faf77..0000000000 --- "a/files/es/web/css/css_modelo_caja/introducci\303\263n_al_modelo_de_caja_de_css/index.html" +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Introducción al Modelo de Caja de CSS -slug: Web/CSS/CSS_Modelo_Caja/Introducción_al_modelo_de_caja_de_CSS -tags: - - CSS - - Guía - - Modelo de Caja - - Referencia -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model ---- -
{{CSSRef}}
- -

Al diseñar un documento, el motor de representación del navegador representa cada elemento como un cuadro rectangular según el estándar modelo de caja de CSS. CSS determina el tamaño, la posición y las propiedades (color, fondo, tamaño del borde, etc.) de estos cuadros.

- -

Cada caja se compone de cuatro partes (o áreas), definidas por sus respectivos límites: el límite del contenido, el límite del relleno (padding), el límite del borde y el límite del margen.

- -

CSS Box model

- -

El área de contenido, delimitada por el límite del contenido, contiene el contenido "real" del elemento, como lo puede ser texto, imagen o un reproductor de video. Sus dimensiones son el ancho del contenido (o el ancho de la caja de contenido) y la altura del contenido (o la altura de la caja de contenido). A menudo tiene un color de fondo o una imagen de fondo.

- -

Si la propiedad {{cssxref("box-sizing")}} está configurada en content-box (default), el tamaño del área de contenido se puede definir explícitamente con las propiedades de {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height")}}, {{cssxref("min-height")}} y {{cssxref("max-height")}}.

- -

El área de relleno (padding), delimitada por el límite del relleno, extiende el área de contenido para incluir el relleno del elemento. Sus dimensiones son el ancho de la caja de relleno y la altura de la caja de relleno. Cuando el área de contenido tiene un fondo, se extiende dentro del relleno.

- -

El espesor del relleno está determinado por las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, y la propiedad abreviada {{cssxref("padding")}}.

- -

El área del borde, delimitada por el límite del borde, extiende el área de relleno para incluir los bordes del elemento. Sus dimensiones son el ancho de la caja del borde y la altura de la caja del borde.

- -

El espesor de los bordes está determinado por las propiedades {{cssxref("border-width")}} y la propiedad abreviada {{cssxref("border")}}. Si la propiedad {{cssxref("box-sizing")}} se establece en border-box, el tamaño del área del borde se puede definir explícitamente con las propiedades {{cssxref("width")}}, {{cssxref("min- width")}}, {{cssxref("max-width")}}, {{cssxref("height")}}, {{cssxref("min-height")}}, y {{cssxref("max-height")}}.

- -

El área del margen, delimitada por el límite del margen, extiende el área del borde para incluir un área vacía utilizada para separar el elemento de sus vecinos. Sus dimensiones son el ancho de la caja del margen y la altura de la caja del margen.

- -

El tamaño del área del margen está determinado por las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref ("margin-bottom")}}, { {cssxref("margin-left")}}, y la propiedad abreviada {{cssxref ("margin")}}. Cuando se produce el colapso del margen, el área del margen no está claramente definida ya que los márgenes se comparten entre las cajas.

- -

Finalmente, ten en cuenta que para elementos en línea no reemplazados, la cantidad de espacio ocupado (la contribución a la altura de la línea) está determinada por la propiedad {{cssxref ('line-height')}}, aunque los bordes y el relleno todavía se muestran alrededor del contenido.

- -

Especificación

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Aunque está redactado con más precisión, no hay cambio práctico.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Definición inicial
- -

Vea también

- -
    -
  • {{css_key_concepts}}
    • -
  • Propiedades CSS relacionadas: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}
    • -
diff --git a/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html b/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html deleted file mode 100644 index dafdf71855..0000000000 --- a/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Entendiendo el colapso de margen -slug: Web/CSS/CSS_Modelo_Caja/Mastering_margin_collapsing -tags: - - CSS - - CSS Box Model - - Guía - - Referencia -translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ---- -
{{CSSRef}}
- -

Los márgenes Top y bottom de los bloques a veces están combinados (colapsados) en un solo margen cuyo tamaño es el mayor de los márgenes combinados, un comportamiento conocido como colapso de margen. Ten en cuenta que los márgenes de flotantes y elementos con posición absoluta nunca colapsan.

- -

El colapso de margen ocurre en tres casos básicos:

- -
-
Hermanos adjacentes
-
Los márgenes de los hermanos adjacentes son colapsados (excepto cuando el último hermano necesita ser limpiado después de usar los flotantes).
-
Padre y primer/último hijo
-
Si no hay un borde, padding, contenido en línea, block formatting context creado, o un limpiado para separar el {{cssxref("margin-top")}} de un bloque del {{cssxref("margin-top")}} de su primer bloque hijo; o no hay borde, padding, contenido en línea, {{cssxref("height")}}, {{cssxref("min-height")}}, o {{cssxref("max-height")}} para separar el {{cssxref("margin-bottom")}} de un bloque del {{cssxref("margin-bottom")}} de su último hijo, entonces esos márgenes colapsan. El margen colapsado termina fuera del padre.
-
Bloques vacíos
-
Si no hay borde, padding, contenido en línea, {{cssxref("height")}}, o {{cssxref("min-height")}} para separar el {{cssxref("margin-top")}} de un bloque de su {{cssxref("margin-bottom")}}, entonces sus márgenes superiores e inferiores colapsan.
-
-

Cosas a tener en cuenta:

- - -
    -
  • Cuando estos casos están combinados ocurrirá un colapso de márgenes más complejo (de más de dos márgenes).
    • -
  • Estas reglas se aplican incluso a márgenes con valor cero, así que el margen del primer/último hijo siempre termina fuera de su padre (de acuerdo a las reglas de arriba) independientemente de que el margen del padre sea o no sea cero.
    • -
  • Cuando se trata de márgenes negativos, el tamaño del margen colapsado es la suma del margen positivo más grande y el margen negativo más pequeño (el más negativo).
    • -
  • Cuando todos los márgenes son negativos, el tamaño del margen colapsado es el margen más pequeño (el más negativo). Esto se aplica tanto a los elementos adyacentes como a los elementos anidados.
    • -
- -

Ejemplos

- -

HTML

- -
<p>El margen inferior de este párrafo está colapsado ....</p>
-<p>... con el margen superior de este párrafo, lo que deja un margen de<code>1.2rem</code> entre ellos.</p>
-
-<div>Este elemento padre contiene dos párrafos!
-  <p>Este párrafo tiene un margen de <code>.4rem</code>  entre él y el texto anterior.</p>
-  <p>Mi margen inferior se colapsa con mi padre, produciendo un margen inferior de <code>2rem</code>.</p>
-</div>
-
-<p>Estoy <code>2rem</code> por debajo del elemento de arriba.</p>
- -

CSS

- -
div {
-  margin: 2rem 0;
-  background: lavender;
-}
-
-p {
-  margin: .4rem 0 1.2rem 0;
-  background: yellow;
-}
- -

Result

- -

{{EmbedLiveSample('Ejemplos', 'auto', 350)}}

- - - -

 

- - -

Especificaciones

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Initial definition
- -

También puedes ver

- - -
    -
  • {{css_key_concepts}}
    • -
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html deleted file mode 100644 index 0278b3254f..0000000000 --- a/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Agregando z-index -slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index ---- -

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

- -

Agregando {{ cssxref("z-index") }}

- -

El primer ejemplo, Apilando sin z-index, explica cómo es organizado el apilamiento por defecto. Si quieres especificar un orden diferente de apilamiento, debes posicionar un elemento y usar la propiedad z-index.

- -

Esta propiedad es asignada con un valor entero (positivo o negativo), el cuál representa la posición del elemento en el eje-Z. Si no estás familiarizado con el eje-Z, imagina que la página tiene muchas capas una encima de la otra. Cada capa es numerada. Una capa con un número mayor es renderizada encima de las capas con números menores.

- -
-

Precaución: z-index solo tiene efecto si un elemento es posicionado.

-
- -
    -
  • bottom: el más lejano al observador
    • -
  • ...
    • -
  • Capa -3
    • -
  • Capa -2
    • -
  • Capa -1
    • -
  • Capa 0capa de renderizado por defecto
    • -
  • Capa 1
    • -
  • Capa 2
    • -
  • Capa 3
    • -
  • ...
    • -
  • top: el más cercano al observador
    • -
- -
-

Notas:

- -
    -
  • Cuando la propiedad z-index no ha sido especificada, los elementos son renderizados en la capa de renderizado por defecto 0 (cero).
    • -
  • Si varios elementos comparten el mismo valor z-index (i.e. están situados en la misma capa), las reglas de apilamiento explicadas en la sección Apilando sin z-index son aplicadas.
    • -
-
- -

En el siguiente ejempo, el orden de apilamiento de las capas es organizado usando z-index. El z-index del DIV#5 no hace efecto ya que este no es un elemento posicionado.

- -

{{ EmbedLiveSample('Example_source_code', '468', '365', '', 'Web/Guide/CSS/Understanding_z_index/Adding_z-index') }}

- -

Código fuente de ejemplo

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Adding z-index</title>
-    <style type="text/css">
-
-    div {
-        opacity: 0.7;
-        font: 12px Arial;
-    }
-
-    span.bold { font-weight: bold; }
-
-    #normdiv {
-        z-index: 8;
-        height: 70px;
-        border: 1px dashed #999966;
-        background-color: #ffffcc;
-        margin: 0px 50px 0px 50px;
-        text-align: center;
-    }
-
-    #reldiv1 {
-        z-index: 3;
-        height: 100px;
-        position: relative;
-        top: 30px;
-        border: 1px dashed #669966;
-        background-color: #ccffcc;
-        margin: 0px 50px 0px 50px;
-        text-align: center;
-    }
-
-    #reldiv2 {
-        z-index: 2;
-        height: 100px;
-        position: relative;
-        top: 15px;
-        left: 20px;
-        border: 1px dashed #669966;
-        background-color: #ccffcc;
-        margin: 0px 50px 0px 50px;
-        text-align: center;
-    }
-
-    #absdiv1 {
-        z-index: 5;
-        position: absolute;
-        width: 150px;
-        height: 350px;
-        top: 10px;
-        left: 10px;
-        border: 1px dashed #990000;
-        background-color: #ffdddd;
-        text-align: center;
-    }
-
-    #absdiv2 {
-        z-index: 1;
-        position: absolute;
-        width: 150px;
-        height: 350px;
-        top: 10px;
-        right: 10px;
-        border: 1px dashed #990000;
-        background-color: #ffdddd;
-        text-align: center;
-    }
-
-    </style>
-</head>
-
-<body>
-
-    <br /><br />
-
-    <div id="absdiv1">
-        <br /><span class="bold">DIV #1</span>
-        <br />position: absolute;
-        <br />z-index: 5;
-    </div>
-
-    <div id="reldiv1">
-        <br /><span class="bold">DIV #2</span>
-        <br />position: relative;
-        <br />z-index: 3;
-    </div>
-
-    <div id="reldiv2">
-        <br /><span class="bold">DIV #3</span>
-        <br />position: relative;
-        <br />z-index: 2;
-    </div>
-
-    <div id="absdiv2">
-        <br /><span class="bold">DIV #4</span>
-        <br />position: absolute;
-        <br />z-index: 1;
-    </div>
-
-    <div id="normdiv">
-        <br /><span class="bold">DIV #5</span>
-        <br />no positioning
-        <br />z-index: 8;
-    </div>
-
-</body>
-</html>
-
- -

También puedes ver

- - - -
-

Información del documento original

- -
    -
  • Autor(es): Paolo Lombardi
    • -
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • -
  • Last Updated Date: November 3rd, 2014
    • -
-
- -

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}

diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html deleted file mode 100644 index 81b145e1a3..0000000000 --- a/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Apilamiento y float -slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float -tags: - - Avanzado - - CSS - - Entendiendo_CSS_z-index - - Guía - - Referencia - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float ---- -
{{cssref}}
- -

Apilamiento y float

- -

Para los bloques flotantes el orden de apilamiento es un poco diferente. Los bloques flotantes son colocados entre bloques no posicionados y bloques posicionados:

- -
    -
  1. Fondo y bordes del elemento raiz
    2. -
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. -
  3. Bloques flotantes
    4. -
  4. Elementos posicionados descendentemente , en orden de aparición (en HTML)
    5. -
- -

En realidad, como puedes ver en el siguiente ejemplo, el fondo y el borde del bloque no posicionado (DIV #4) no son afectados por los bloques flotantes, mientras que el contenido si es afectado. Esto ocurre de acuerdo al comportamiento flotante stándar de CSS.

- -

Este comportamiento puede ser explicado con una versión mejorada de la lista previa:

- -
    -
  1. Fondo y bordes del elemento raiz
    2. -
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. -
  3. Bloques flotantes
    4. -
  4. Descendientes en línea en el flujo normal
    5. -
  5. Elementos posicionados descendentemente , en orden de aparición (en HTML)
    6. -
- -
Nota: En el ejemplo debajo, todos los bloques excepto el no posicionado son translúcidos para mostrar el orden de apilamiento. Si la opacidad del bloque no posicionado (DIV #4) es reducida, entonces algo extraño ocurre: el fondo y el borde de ese bloque sobresale por encima de los bloques flotantes, pero aun debajo de los bloques posicionados. Yo no pude entender si esto es un bug o una interpretación peculiar de la especificación. (Aplicar opacidad debería crear implícitamente un contexto de apilamiento.)
- -

{{ EmbedLiveSample('Example_source_code', '563', '255', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_and_float') }}

- -

Código fuente de ejemplo

- -

HTML

- -
<div id="abs1">
-  <b>DIV #1</b><br />position: absolute;</div>
-
-<div id="flo1">
-  <b>DIV #2</b><br />float: left;</div>
-
-<div id="flo2">
-  <b>DIV #3</b><br />float: right;</div>
-
-<br />
-
-<div id="sta1">
-  <b>DIV #4</b><br />no positioning</div>
-
-<div id="abs2">
-  <b>DIV #5</b><br />position: absolute;</div>
-
- -

CSS

- -
div {
-  padding: 10px;
-  text-align: center;
-}
-
-b {
-  font-family: sans-serif;
-}
-
-#abs1 {
-  position: absolute;
-  width: 150px;
-  height: 200px;
-  top: 10px;
-  right: 140px;
-  border: 1px dashed #900;
-  background-color: #fdd;
-}
-
-#sta1 {
-  height: 100px;
-  border: 1px dashed #996;
-  background-color: #ffc;
-  margin: 0px 10px 0px 10px;
-  text-align: left;
-}
-
-#flo1 {
-  margin: 0px 10px 0px 20px;
-  float: left;
-  width: 150px;
-  height: 200px;
-  border: 1px dashed #090;
-  background-color: #cfc;
-}
-
-#flo2 {
-  margin: 0px 20px 0px 10px;
-  float: right;
-  width: 150px;
-  height: 200px;
-  border: 1px dashed #090;
-  background-color: #cfc;
-}
-
-#abs2 {
-  position: absolute;
-  width: 150px;
-  height: 100px;
-  top: 130px;
-  left: 100px;
-  border: 1px dashed #990;
-  background-color: #fdd;
-}
- -

También puedes ver

- - - -
-

Información del documento original

- -
    -
  • Autor(es): Paolo Lombardi
    • -
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • -
  • Last Updated Date: November 3rd, 2014
    • -
-
- -

 

diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html deleted file mode 100644 index def9c5ea8e..0000000000 --- a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Ejemplo 1 del contexto de apilamiento -slug: >- - Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 ---- -

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

- -

Ejemplo 1 del contexto de apilamiento

- -

Empecemos con un ejemplo básico. En el contexto de apilamiento raíz tenemos dos DIVs (DIV #1 and DIV #3), ambos con posición relativa, pero sin propiedad z-index. Dentro del DIV #1 se encuentra el DIV #2 de posición absoluta, mientras que en el DIV #3 se encuentra el DIV #4 con posición absoluta, ambos sin propiedad z-index.

- -

El único contexto de apilamiento es el contexto raíz. Sin la propiedad z-index, los elementos son apilados por orden de ocurrencia.

- -

Stacking context example 1

- -

Si a DIV #2 le asignamos un valor z-index positivo (no-cero y no-auto), es renderizado encima de todos los otros DIVs.

- -

Stacking context example 1

- -

Luego si al DIV #4 también se le asigna un z-index positivo mayor que el z-index del DIV #2, es renderizado encima de los otros DIVs incluyendo DIV #2.

- -

Stacking context example 1

- -

En este último ejemplo puedes ver que el DIV #2 y el DIV #4 no son hermanos, porque pertenecen a padres distintos en la jerarquía de elementos HTML. A pesar de esto, el apilamiento del DIV #4 con respecto al DIV #2 puede ser controlado a través de z-index. Pasa que, dado a que al DIV #1 y al DIV #3 no se le ha asignado ningún valor z-index, ellos no han creado un contexto de apilamiento. Esto significa que todos sus contenidos, incluyendo el DIV #2 y el DIV #4, pertenecen al mismo contexto de apilamiento raíz.

- -

En términos de contextos de apilamiento, el DIV #1 y el DIV #3 son simplemente asimilados dentro del elemento raíz, y la jerarquía resultante es la siguiente:

- -
    -
  • contexto de apilamiento raíz -
      -
    • DIV #2 (z-index 1)
      • -
    • DIV #4 (z-index 2)
      • -
    -
    • -
- -
Nota: El DIV #1 y el DIV #3 no son translúcidos. Es importante recordar que asignar una opacidad menor a 1 a un elemento posicionado implica la creación de un contexto de apilamiento, como ocurre cuando se añade un valor z-index. Y este ejemplo muestra que ocurre cuando un elemento padre no crea un contexto de apilamiento.
- -

Ejemplo

- -

HTML

- -
<div id="div1">
-<br /><span class="bold">DIV #1</span>
-<br />position: relative;
-   <div id="div2">
-   <br /><span class="bold">DIV #2</span>
-   <br />position: absolute;
-   <br />z-index: 1;
-   </div>
-</div>
-
-<br />
-
-<div id="div3">
-<br /><span class="bold">DIV #3</span>
-<br />position: relative;
-   <div id="div4">
-   <br /><span class="bold">DIV #4</span>
-   <br />position: absolute;
-   <br />z-index: 2;
-   </div>
-</div>
-
-</body></html>
-
- -

CSS

- -
.bold {
-    font-weight: bold;
-    font: 12px Arial;
-}
-#div1,
-#div3 {
-    height: 80px;
-    position: relative;
-    border: 1px dashed #669966;
-    background-color: #ccffcc;
-    padding-left: 5px;
-}
-#div2 {
-    opacity: 0.8;
-    z-index: 1;
-    position: absolute;
-    width: 150px;
-    height: 200px;
-    top: 20px;
-    left: 170px;
-    border: 1px dashed #990000;
-    background-color: #ffdddd;
-    text-align: center;
-}
-#div4 {
-    opacity: 0.8;
-    z-index: 2;
-    position: absolute;
-    width: 200px;
-    height: 70px;
-    top: 65px;
-    left: 50px;
-    border: 1px dashed #000099;
-    background-color: #ddddff;
-    text-align: left;
-    padding-left: 10px;
-}
- -

Resultado

- -

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}

- -

También puedes ver

- - - -
-

Información del documento original

- -
    -
  • Autor(es): Paolo Lombardi
    • -
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • -
  • Last Updated Date: July 9th, 2005
    • -
-
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html deleted file mode 100644 index 2955b43b7f..0000000000 --- a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Ejemplo 2 del contexto de apilamiento -slug: >- - Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 ---- -

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

- -

Ejemplo 2 del contexto de apilamiento

- -

Este es un ejemplo muy simple, pero es la clave para entender el concepto de contexto de apilamiento. Tenemos los mismos 4 DIVs del ejemplo previo, pero ahora las propiedades z-index son asignadas en ambos niveles de la jerarquía.

- -

{{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }}

- -

Puedes ver que el DIV #2 (z-index: 2) está encima del DIV #3 (z-index: 1), porque ambos pertenecen al mismo contexto de apilamiento (el contexto raíz), así que los valores z-index indican cómo son apilados los elementos.

- -

Lo que puede ser considerado extraño es que el DIV #2 (z-index: 2) está encima del DIV #4 (z-index: 10), a pesar de sus valores z-index. La razón es que ellos no pertenecen al mismo contexto de apilamiento. El DIV #4 pertenece al contexto de apilamiento creado por el DIV #3, y como explicamos previamente el DIV #3 (y todos su contenido) está debajo del DIV #2.

- -

Para entender mejor esta situación, esta es la jerarquía del contexto de apilamiento:

- -
    -
  • contexto de apilamiento raíz -
      -
    • DIV #2 (z-index 2)
      • -
    • DIV #3 (z-index 1) -
        -
      • DIV #4 (z-index 10)
        • -
      -
      • -
    -
    • -
- -
Nota:  Vale la pena recordar que en general la jerarquía HTML es diferente de la jerarquía del contexto de apilamiento. En la jerarquía del contexto de apilamiento, los elementos que no crean un contexto de apilamiento son colapsados en sus padres.
- -

Código fuente de ejemplo

- -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-<head><style type="text/css">
-
-div { font: 12px Arial; }
-
-span.bold { font-weight: bold; }
-
-#div2 { z-index: 2; }
-#div3 { z-index: 1; }
-#div4 { z-index: 10; }
-
-#div1,#div3 {
-   height: 80px;
-   position: relative;
-   border: 1px dashed #669966;
-   background-color: #ccffcc;
-   padding-left: 5px;
-}
-
-#div2 {
-   opacity: 0.8;
-   position: absolute;
-   width: 150px;
-   height: 200px;
-   top: 20px;
-   left: 170px;
-   border: 1px dashed #990000;
-   background-color: #ffdddd;
-   text-align: center;
-}
-
-#div4 {
-   opacity: 0.8;
-   position: absolute;
-   width: 200px;
-   height: 70px;
-   top: 65px;
-   left: 50px;
-   border: 1px dashed #000099;
-   background-color: #ddddff;
-   text-align: left;
-   padding-left: 10px;
-}
-
-
-</style></head>
-
-<body>
-
-    <br />
-
-    <div id="div1"><br />
-        <span class="bold">DIV #1</span><br />
-        position: relative;
-        <div id="div2"><br />
-            <span class="bold">DIV #2</span><br />
-            position: absolute;<br />
-            z-index: 2;
-        </div>
-    </div>
-
-    <br />
-
-    <div id="div3"><br />
-        <span class="bold">DIV #3</span><br />
-        position: relative;<br />
-        z-index: 1;
-        <div id="div4"><br />
-            <span class="bold">DIV #4</span><br />
-            position: absolute;<br />
-            z-index: 10;
-        </div>
-    </div>
-
-</body>
-</html>
-
- -

También puedes ver

- - - -
-

Información del documento original

- -
    -
  • Autor(es): Paolo Lombardi
    • -
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • -
  • Last Updated Date: July 9th, 2005
    • -
-
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html deleted file mode 100644 index c41d8b56ad..0000000000 --- a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: Ejemplo 3 del contexto de apilamiento -slug: >- - Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 ---- -

« CSS « Understanding CSS z-index

- -

Ejemplo 3 del contexto de apilamiento

- -

Este último ejemplo muestra los problemas que surgen cuando se combinan varios elementos posicionados en una jerarquía HTML multi nivel y cuando los valores z-index son asignados usando selectores de clase.

- -

Tomemos como ejemplo un menú jerárquico de tres niveles formado por varios DIVs posicionados. DIVs de segundo y tercer nivel aparecen cuando se pone el cursor encima o se hace clic en sus padres. Usualmente este tipo de menú es generado mediante un script del lado del cliente o del lado del servidor, así que las reglas de estilos son asignadas con un selector de clase en lugar de un selector de id.

- -

Si los tres niveles del menú se superponen parcialmente, entonces gestionar el apilamiento se podría convertir en un problema.

- -

{{ EmbedLiveSample('Example_source_code', '320', '330', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3') }}

- -

El menú de primer nivel solo tiene posición relativa, así que ningún contexto de apilamiento es creado.

- -

El menú de segundo nivel tiene posición absoluta dentro del elemento padre. Para colocarlo encima de todos los menus de primer nivel, usamos z-index. El problema es que para cada menú de segundo nivel, un contexto de apilamiento es creado y cada menú de tercer nivel pertenece al contexto de su padre.

- -

De manera que un menú de tercer nivel va a ser apilado bajo los menus de segundo nivel porque todos los menus de segundo nivel comparten el mismo valor z-index y las reglas de apilamiento por defecto son aplicadas.

- -

Para entender mejor la situación, esta es la jerarquía del contexto de apilamiento:

- -
    -
  • contexto de apilamiento raíz -
      -
    • NIVEL #1 -
        -
      • NIVEL #2 (z-index: 1) -
          -
        • NIVEL #3
          • -
        • ...
          • -
        • NIVEL #3
          • -
        -
        • -
      • NIVEL #2 (z-index: 1)
        • -
      • ...
        • -
      • NIVEL #2 (z-index: 1)
        • -
      -
      • -
    • NIVEL #1
      • -
    • ...
      • -
    • NIVEL #1
      • -
    -
    • -
- -

Este problema puede ser evitado al remover la superposición entre menus de diferentes niveles, o usando valores z-index individuales (y diferentes) asignados a través del selector id en lugar de un selector de clase, o aplanando la jerarquía HTML.

- -
Nota: En el código fuente vas a ver que los menus de segundo y tercer nivel están hechos de varios DIVs contenidos en un contenedor con posición absoluta. Esto es útil para agrupar y posicionarlos todos a la vez.
- -

Código fuente de ejemplo

- -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-<head><style type="text/css">
-
-div { font: 12px Arial; }
-
-span.bold { font-weight: bold; }
-
-div.lev1 {
-   width: 250px;
-   height: 70px;
-   position: relative;
-   border: 2px outset #669966;
-   background-color: #ccffcc;
-   padding-left: 5px;
-}
-
-#container1 {
-   z-index: 1;
-   position: absolute;
-   top: 30px;
-   left: 75px;
-}
-
-div.lev2 {
-   opacity: 0.9;
-   width: 200px;
-   height: 60px;
-   position: relative;
-   border: 2px outset #990000;
-   background-color: #ffdddd;
-   padding-left: 5px;
-}
-
-#container2 {
-   z-index: 1;
-   position: absolute;
-   top: 20px;
-   left: 110px;
-}
-
-div.lev3 {
-   z-index: 10;
-   width: 100px;
-   position: relative;
-   border: 2px outset #000099;
-   background-color: #ddddff;
-   padding-left: 5px;
-}
-
-</style></head>
-
-<body>
-
-<br />
-
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-
-   <div id="container1">
-
-      <div class="lev2">
-      <br /><span class="bold">LEVEL #2</span>
-      <br />z-index: 1;
-
-         <div id="container2">
-
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-
-         </div>
-
-      </div>
-
-      <div class="lev2">
-      <br /><span class="bold">LEVEL #2</span>
-      <br />z-index: 1;
-      </div>
-
-   </div>
-</div>
-
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-</div>
-
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-</div>
-
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-</div>
-
-</body></html>
-
- -

También puedes ver

- - - -
-

Información del documento original

- -
    -
  • Autor(es): Paolo Lombardi
    • -
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • -
  • Last Updated Date: July 9th, 2005
    • -
-
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html deleted file mode 100644 index 1daf172048..0000000000 --- a/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: El contexto de apilamiento -slug: Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context ---- -

El contexto de apilamiento es la conceptualización tridimensional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que se asume está de cara al viewport o página web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos.

- -

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

- -

El contexto de apilamiento

- -

 

- -

En el ejemplo previo, Agregando z-index, el orden de renderizado de ciertos DIVs es influenciado por sus valores z-index. Esto ocurre debido a que estos DIVs tienen propiedades especiales que causan que formen un contexto de apilamiento.

- -

Un contexto de apilamiento es formado, en cualquier lugar del documento, por cualquier elemento que

- -
    -
  • sea el elemento raiz (HTML),
    • -
  • tenga posición (absoluta o relativa) con un valor z-index distinto de "auto",
    • -
  • un elemento flex con un valor z-index distinto de "auto", que sea el elemento padre display: flex|inline-flex,
    • -
  • sean elementos con un valor {{cssxref("opacity")}} menor de 1. (Mira la especificación de opacity),
    • -
  • elementos con un valor  {{cssxref("transform")}} distinto de "none",
    • -
  • elementos con un valor {{cssxref("mix-blend-mode")}} distinto de "normal",
    • -
  • elementos con un valor {{cssxref("filter")}} distinto de "none",
    • -
  • elementos con un valor {{cssxref("perspective")}} distinto de "none",
    • -
  • elementos con un valor {{cssxref("isolation")}} igual a "isolate",
    • -
  • position: fixed
    • -
  • especifican cualquier atributo superior en {{cssxref("will-change")}} incluso si no especificas valores para estos atributos directamente (Mira este post)
    • -
  • elementos con un valor {{cssxref("-webkit-overflow-scrolling")}} igual a "touch"
    • -
- -

Dentro de un contexto de apilamiento, los elementos hijos son apilados de acuerdo a las mismas reglas previamente explicadas. Es importante entender que los valores z-index de los contextos de apilamiento de los hijos solo tienen sentido en el contexto del padre. Los contextos de apilamiento son tratados atómicamente como una sola unidad en el contexto de apilamiento del padre.

- -

En resumen:

- -
    -
  • Posicionar y asignar un valor z-index a un elemento HTML crea un contexto de apilamiento, (asi como también lo hace asignar una opacidad parcial)
    • -
  • Contextos de apilamiento pueden ser contenidos en otros contextos de apilamiento, y juntos crean una jerarquía de contextos de apilamiento
    • -
  • Cada contexto de apilamiento es completamente independiente de sus hermanos: solo los elementos descendientes son considerados cuando el apilamiento es procesado.
    • -
  • Cada contexto de apilamiento es auto contenido: luego que los contenidos del elemento son apilados, el elemento completo es considerado en el orden de apilamiento del contexto del padre.
    • -
- -
Nota: La jerarquía de apilar contextos es un sub conjunto de la jerarquía de elementos HTML, porque solo ciertos elementos crean contextos de apilamiento. Podemos decir que los elementos que no crean sus propios contextos de apilamiento son asimilados por el contexto de apilamiento padre.
- -

El ejemplo

- -

Example of stacking rules modified using z-index

- -

En este ejemplo cada elemento posicionado crea su propio contexto de apilamiento, debido a sus valores de posicionamiento y z-index. La jerarquía de contextos de apilamiento es organizada de la siguiente manera:

- -
    -
  • Raíz -
      -
    • DIV #1
      • -
    • DIV #2
      • -
    • DIV #3 -
        -
      • DIV #4
        • -
      • DIV #5
        • -
      • DIV #6
        • -
      -
      • -
    -
    • -
- -

Es importante notar que el DIV #4, DIV #5 y el DIV #6 son hijos del DIV #3, así que el apilamiento de esos elementos es completamente resuelto dentro del DIV#3. Una vez que el apilamiento y el renderizado dentro del DIV#3 ha sido completado, todo el elemento DIV#3 es apilado en el elemento raíz con respecto a sus DIV hermanos.

- -
-

Notas:

- -
    -
  • DIV #4 es renderizado debajo de DIV #1 porque el z-index (5) de DIV #1 es válido dentro del contexto de apilamiento del elemento raiz, mientras que el z-index (6) de DIV #4 es válido dentro del contexto de apilamiento de DIV #3. Así que DIV #4 está debajo de DIV #1, porque DIV #4 pertenece a DIV #3, que tiene un valor z-index menor.
    • -
  • Por la misma razón DIV #2 (z-index 2) es renderizado bajo DIV#5 (z-index 1) porque DIV #5 pertenece a DIV #3, que tiene un valor z-index mayor.
    • -
  • El valor z-index de DIV #3 es 4, pero este valor es independiente del z-index de DIV #4, DIV #5 and DIV #6, porque pertenece a un contexto de apilamiento diferente.
    • -
  • Una forma fácil de descubrir el orden de renderizado de los elementos apilados en el eje Z es pensar en esto como un tipo de "número de versión", donde los elementos hijos son números de versión menores bajo los números de versión mayores de sus padres. De esta manera podemos ver fácilmente cómo un elemento con un valor z-index de 1 (DIV #5) es apilado encima de un elemento con un valor z-index de 2 (DIV #2), y cómo un elemento con un valor z-index de 6 (DIV #4) es apilado debajo de un elemento con un valor z-index de 5 (DIV #1). En nuestro ejemplo (ordenado de acuerdo al orden de renderizado final): -
      -
    • Raíz -
        -
      • El valor z-index de DIV #2 es 2
        • -
      • El valor z-index de DIV #3 es 4 -
          -
        • El valor z-index de DIV #5 es 1, apilado bajo un elemento con un valor z-index de 4, que resulta en un orden de renderizado de 4.1
          • -
        • El valor z-index de DIV #6 es 3, apilado debajo de un elemento con un valor z-index de 4, que resulta en un orden de renderizado de 4.3
          • -
        • El valor z-index de DIV #4 es 6, apilado bajo un elemento con valor z-index de 4, que resulta en un orden de renderizado de 4.6
          • -
        -
        • -
      • El valor z-index de DIV #1 es 5
        • -
      -
      • -
    -
    • -
-
- -

Ejemplo

- -

HTML

- -
    <div id="div1">
-      <h1>Division Element #1</h1>
-      <code>position: relative;<br/>
-      z-index: 5;</code>
-    </div>
-
-    <div id="div2">
-      <h1>Division Element #2</h1>
-      <code>position: relative;<br/>
-      z-index: 2;</code>
-    </div>
-
-    <div id="div3">
-
-      <div id="div4">
-        <h1>Division Element #4</h1>
-        <code>position: relative;<br/>
-        z-index: 6;</code>
-      </div>
-
-      <h1>Division Element #3</h1>
-      <code>position: absolute;<br/>
-      z-index: 4;</code>
-
-      <div id="div5">
-        <h1>Division Element #5</h1>
-        <code>position: relative;<br/>
-        z-index: 1;</code>
-      </div>
-
-      <div id="div6">
-        <h1>Division Element #6</h1>
-        <code>position: absolute;<br/>
-        z-index: 3;</code>
-      </div>
-    </div>
-
- -

CSS

- -
* {
-    margin: 0;
-}
-html {
-    padding: 20px;
-    font: 12px/20px Arial, sans-serif;
-}
-div {
-    opacity: 0.7;
-    position: relative;
-}
-h1 {
-    font: inherit;
-    font-weight: bold;
-}
-#div1,
-#div2 {
-    border: 1px dashed #696;
-    padding: 10px;
-    background-color: #cfc;
-}
-#div1 {
-    z-index: 5;
-    margin-bottom: 190px;
-}
-#div2 {
-    z-index: 2;
-}
-#div3 {
-    z-index: 4;
-    opacity: 1;
-    position: absolute;
-    top: 40px;
-    left: 180px;
-    width: 330px;
-    border: 1px dashed #900;
-    background-color: #fdd;
-    padding: 40px 20px 20px;
-}
-#div4,
-#div5 {
-    border: 1px dashed #996;
-    background-color: #ffc;
-}
-#div4 {
-    z-index: 6;
-    margin-bottom: 15px;
-    padding: 25px 10px 5px;
-}
-#div5 {
-    z-index: 1;
-    margin-top: 15px;
-    padding: 5px 10px;
-}
-#div6 {
-    z-index: 3;
-    position: absolute;
-    top: 20px;
-    left: 180px;
-    width: 150px;
-    height: 125px;
-    border: 1px dashed #009;
-    padding-top: 125px;
-    background-color: #ddf;
-    text-align: center;
-}
- -

Resultado

- -

{{ EmbedLiveSample('Example', '556', '396') }}

- -

También puedes ver

- - - -
-

Información del documento original

- -
    -
  • Autor(es): Paolo Lombardi
    • -
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • -
  • Last Updated Date: July 9th, 2005
    • -
-
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/index.html deleted file mode 100644 index 14971890e0..0000000000 --- a/files/es/web/css/css_positioning/entendiendo_z_index/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Entendiendo la propiedad CSS z-index -slug: Web/CSS/CSS_Positioning/entendiendo_z_index -tags: - - Avanzado - - CSS - - Entendiendo_CSS_Z_Index - - Guía - - Referencia - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index ---- -

Usualmente se puede considerar que las páginas HTML tienen dos dimensiones, porque el texto, las imágenes y otros elementos son organizados en la página sin superponerse. Hay un solo flujo de renderizado, y todos los elementos son concientes del espacio ocupado por otros. El atributo {{cssxref("z-index")}} te permite ajustar el orden de las capas de los objetos cuando el contenido está siendo renderizado.

- -
-

En CSS 2.1, cada caja tiene una posición en tres dimensiones. Adicionalmente a sus posiciones horizontales y verticales, las cajas caen a lo largo de un "eje-z" y son formadas una encima de la otra. Las posiciones eje-Z son particularmente relevantes cuando las cajas se superponen visualmente.

-
- -

(de CSS 2.1 Section 9.9.1 - Layered presentation)

- -

Eso significa que las reglas de estilo CSS te permiten posicionar cajas en capas adicionales a la capa normal de renderizado (capa 0). La posición Z de cada capa es expresada como un entero que representa el orden de apilamiento durante el proceso de renderizado. Números más grandes significan mayor cercanía al observador. La posición Z puede ser controlada con la propiedad CSS {{ cssxref("z-index") }}.

- -

Usar z-index parece extremadamente fácil: una sola propiedad, asigna un número entero, con un comportamiento fácil de entender. Sin embargo, cuando z-index es aplicada a jerarquías complejas de elementos HTML, su comportamiento puede ser difícil de entender o incluso impredecible. Esto es debido a reglas complejas de apilamiento. De hecho una sección dedicada ha sido reservada en la especificación CSS CSS-2.1 Appendix E para explicar mejor estas reglas.

- -

Este artículo va a intentar explicar esas reglas, de una forma más simple y con varios ejemplos.

- -
    -
  1. Apilando sin z-index : Reglas de apilamiento por defecto
    2. -
  2. Apilamiento y float : Cómo son manejados los elementos flotantes
    3. -
  3. Agregando z-index : Usando z-index para cambiar el apilamiento por defecto
    4. -
  4. El contexto de apilamiento : Notas sobre el contexto de apilamiento
    5. -
  5. Ejemplo 1 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en el último nivel
    6. -
  6. Ejemplo 2 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en todos los niveles
    7. -
  7. Ejemplo 3 del contexto de apilamiento : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
    8. -
- -

Nota del autor: Gracias a Wladimir Palant y Rod Whiteley por la revisión.

- -
-

Información del documento original

- -
    -
  • Autor(es): Paolo Lombardi
    • -
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • -
  • Fecha de última actualización: 9 de Julio del 2005
    • -
-
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html deleted file mode 100644 index 97038e7bae..0000000000 --- a/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Apilando sin z-index -slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index ---- -

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

- -

Apilando sin z-index

- -

Cuando ningún elemento tiene z-index, los elementos son apilados en este orden (de abajo hacia arriba):

- -
    -
  1. El fondo y los bordes del elemento raiz
    2. -
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. -
  3. Elementos posicionados descendentemente, en orden de aparición (en HTML)
    4. -
- -

En el siguiente ejemplo, los bloques con posiciones absolutas y relativas son apropiadamente dimensionados y posicionados para ilustrar las reglas de apilamiento.

- -
-

Notas:

- -
    -
  • Dado un grupo homogéneo de elementos sin propiedad z-index, tales como los bloques posicionados (DIV #1 al #4) en el ejemplo, el orden de apilamiento de los elementos es su orden en la jerarquía HTML, independientemente de su posición.
    • -
  • -

    Bloques estándar (DIV #5) en el flujo normal, sin ninguna propiedad de posicionamiento, siempre son renderizados antes de los elementos posicionados y aparecen debajo de los mismos, incluso si están después en la jerarquía HTML.

    -
    • -
-
- -

understanding_zindex_01.png

- -

 

- -

Ejemplo

- -

HTML

- -
<div id="absdiv1">
-    <br /><span class="bold">DIV #1</span>
-    <br />position: absolute; </div>
-<div id="reldiv1">
-    <br /><span class="bold">DIV #2</span>
-    <br />position: relative; </div>
-<div id="reldiv2">
-    <br /><span class="bold">DIV #3</span>
-    <br />position: relative; </div>
-<div id="absdiv2">
-    <br /><span class="bold">DIV #4</span>
-    <br />position: absolute; </div>
-<div id="normdiv">
-    <br /><span class="bold">DIV #5</span>
-    <br />no positioning </div>
-
- -

CSS

- -
 .bold {
-     font-weight: bold;
-     font: 12px Arial;
- }
- #normdiv {
-     height: 70px;
-     border: 1px dashed #999966;
-     background-color: #ffffcc;
-     margin: 0px 50px 0px 50px;
-     text-align: center;
- }
- #reldiv1 {
-     opacity: 0.7;
-     height: 100px;
-     position: relative;
-     top: 30px;
-     border: 1px dashed #669966;
-     background-color: #ccffcc;
-     margin: 0px 50px 0px 50px;
-     text-align: center;
- }
- #reldiv2 {
-     opacity: 0.7;
-     height: 100px;
-     position: relative;
-     top: 15px;
-     left: 20px;
-     border: 1px dashed #669966;
-     background-color: #ccffcc;
-     margin: 0px 50px 0px 50px;
-     text-align: center;
- }
- #absdiv1 {
-     opacity: 0.7;
-     position: absolute;
-     width: 150px;
-     height: 350px;
-     top: 10px;
-     left: 10px;
-     border: 1px dashed #990000;
-     background-color: #ffdddd;
-     text-align: center;
- }
- #absdiv2 {
-     opacity: 0.7;
-     position: absolute;
-     width: 150px;
-     height: 350px;
-     top: 10px;
-     right: 10px;
-     border: 1px dashed #990000;
-     background-color: #ffdddd;
-     text-align: center;
- }
-
- -

Resultado

- -

(Si la imagen no aparece en CodePen, haz clic en el botón Tidy en la sección CSS)

- -

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index') }}

- -

También puedes ver

- - - -
-

Información del documento original

- -
    -
  • Autor(es): Paolo Lombardi
    • -
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • -
  • Last Updated Date: November 3rd, 2014
    • -
-
- -

 

diff --git a/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.html new file mode 100644 index 0000000000..0278b3254f --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -0,0 +1,179 @@ +--- +title: Agregando z-index +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +--- +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

Agregando {{ cssxref("z-index") }}

+ +

El primer ejemplo, Apilando sin z-index, explica cómo es organizado el apilamiento por defecto. Si quieres especificar un orden diferente de apilamiento, debes posicionar un elemento y usar la propiedad z-index.

+ +

Esta propiedad es asignada con un valor entero (positivo o negativo), el cuál representa la posición del elemento en el eje-Z. Si no estás familiarizado con el eje-Z, imagina que la página tiene muchas capas una encima de la otra. Cada capa es numerada. Una capa con un número mayor es renderizada encima de las capas con números menores.

+ +
+

Precaución: z-index solo tiene efecto si un elemento es posicionado.

+
+ +
    +
  • bottom: el más lejano al observador
    • +
  • ...
    • +
  • Capa -3
    • +
  • Capa -2
    • +
  • Capa -1
    • +
  • Capa 0capa de renderizado por defecto
    • +
  • Capa 1
    • +
  • Capa 2
    • +
  • Capa 3
    • +
  • ...
    • +
  • top: el más cercano al observador
    • +
+ +
+

Notas:

+ +
    +
  • Cuando la propiedad z-index no ha sido especificada, los elementos son renderizados en la capa de renderizado por defecto 0 (cero).
    • +
  • Si varios elementos comparten el mismo valor z-index (i.e. están situados en la misma capa), las reglas de apilamiento explicadas en la sección Apilando sin z-index son aplicadas.
    • +
+
+ +

En el siguiente ejempo, el orden de apilamiento de las capas es organizado usando z-index. El z-index del DIV#5 no hace efecto ya que este no es un elemento posicionado.

+ +

{{ EmbedLiveSample('Example_source_code', '468', '365', '', 'Web/Guide/CSS/Understanding_z_index/Adding_z-index') }}

+ +

Código fuente de ejemplo

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Adding z-index</title>
+    <style type="text/css">
+
+    div {
+        opacity: 0.7;
+        font: 12px Arial;
+    }
+
+    span.bold { font-weight: bold; }
+
+    #normdiv {
+        z-index: 8;
+        height: 70px;
+        border: 1px dashed #999966;
+        background-color: #ffffcc;
+        margin: 0px 50px 0px 50px;
+        text-align: center;
+    }
+
+    #reldiv1 {
+        z-index: 3;
+        height: 100px;
+        position: relative;
+        top: 30px;
+        border: 1px dashed #669966;
+        background-color: #ccffcc;
+        margin: 0px 50px 0px 50px;
+        text-align: center;
+    }
+
+    #reldiv2 {
+        z-index: 2;
+        height: 100px;
+        position: relative;
+        top: 15px;
+        left: 20px;
+        border: 1px dashed #669966;
+        background-color: #ccffcc;
+        margin: 0px 50px 0px 50px;
+        text-align: center;
+    }
+
+    #absdiv1 {
+        z-index: 5;
+        position: absolute;
+        width: 150px;
+        height: 350px;
+        top: 10px;
+        left: 10px;
+        border: 1px dashed #990000;
+        background-color: #ffdddd;
+        text-align: center;
+    }
+
+    #absdiv2 {
+        z-index: 1;
+        position: absolute;
+        width: 150px;
+        height: 350px;
+        top: 10px;
+        right: 10px;
+        border: 1px dashed #990000;
+        background-color: #ffdddd;
+        text-align: center;
+    }
+
+    </style>
+</head>
+
+<body>
+
+    <br /><br />
+
+    <div id="absdiv1">
+        <br /><span class="bold">DIV #1</span>
+        <br />position: absolute;
+        <br />z-index: 5;
+    </div>
+
+    <div id="reldiv1">
+        <br /><span class="bold">DIV #2</span>
+        <br />position: relative;
+        <br />z-index: 3;
+    </div>
+
+    <div id="reldiv2">
+        <br /><span class="bold">DIV #3</span>
+        <br />position: relative;
+        <br />z-index: 2;
+    </div>
+
+    <div id="absdiv2">
+        <br /><span class="bold">DIV #4</span>
+        <br />position: absolute;
+        <br />z-index: 1;
+    </div>
+
+    <div id="normdiv">
+        <br /><span class="bold">DIV #5</span>
+        <br />no positioning
+        <br />z-index: 8;
+    </div>
+
+</body>
+</html>
+
+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: November 3rd, 2014
    • +
+
+ +

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}

diff --git a/files/es/web/css/css_positioning/understanding_z_index/index.html b/files/es/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..14971890e0 --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,47 @@ +--- +title: Entendiendo la propiedad CSS z-index +slug: Web/CSS/CSS_Positioning/entendiendo_z_index +tags: + - Avanzado + - CSS + - Entendiendo_CSS_Z_Index + - Guía + - Referencia + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +

Usualmente se puede considerar que las páginas HTML tienen dos dimensiones, porque el texto, las imágenes y otros elementos son organizados en la página sin superponerse. Hay un solo flujo de renderizado, y todos los elementos son concientes del espacio ocupado por otros. El atributo {{cssxref("z-index")}} te permite ajustar el orden de las capas de los objetos cuando el contenido está siendo renderizado.

+ +
+

En CSS 2.1, cada caja tiene una posición en tres dimensiones. Adicionalmente a sus posiciones horizontales y verticales, las cajas caen a lo largo de un "eje-z" y son formadas una encima de la otra. Las posiciones eje-Z son particularmente relevantes cuando las cajas se superponen visualmente.

+
+ +

(de CSS 2.1 Section 9.9.1 - Layered presentation)

+ +

Eso significa que las reglas de estilo CSS te permiten posicionar cajas en capas adicionales a la capa normal de renderizado (capa 0). La posición Z de cada capa es expresada como un entero que representa el orden de apilamiento durante el proceso de renderizado. Números más grandes significan mayor cercanía al observador. La posición Z puede ser controlada con la propiedad CSS {{ cssxref("z-index") }}.

+ +

Usar z-index parece extremadamente fácil: una sola propiedad, asigna un número entero, con un comportamiento fácil de entender. Sin embargo, cuando z-index es aplicada a jerarquías complejas de elementos HTML, su comportamiento puede ser difícil de entender o incluso impredecible. Esto es debido a reglas complejas de apilamiento. De hecho una sección dedicada ha sido reservada en la especificación CSS CSS-2.1 Appendix E para explicar mejor estas reglas.

+ +

Este artículo va a intentar explicar esas reglas, de una forma más simple y con varios ejemplos.

+ +
    +
  1. Apilando sin z-index : Reglas de apilamiento por defecto
    2. +
  2. Apilamiento y float : Cómo son manejados los elementos flotantes
    3. +
  3. Agregando z-index : Usando z-index para cambiar el apilamiento por defecto
    4. +
  4. El contexto de apilamiento : Notas sobre el contexto de apilamiento
    5. +
  5. Ejemplo 1 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en el último nivel
    6. +
  6. Ejemplo 2 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en todos los niveles
    7. +
  7. Ejemplo 3 del contexto de apilamiento : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
    8. +
+ +

Nota del autor: Gracias a Wladimir Palant y Rod Whiteley por la revisión.

+ +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Fecha de última actualización: 9 de Julio del 2005
    • +
+
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html new file mode 100644 index 0000000000..81b145e1a3 --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -0,0 +1,144 @@ +--- +title: Apilamiento y float +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float +tags: + - Avanzado + - CSS + - Entendiendo_CSS_z-index + - Guía + - Referencia + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +
{{cssref}}
+ +

Apilamiento y float

+ +

Para los bloques flotantes el orden de apilamiento es un poco diferente. Los bloques flotantes son colocados entre bloques no posicionados y bloques posicionados:

+ +
    +
  1. Fondo y bordes del elemento raiz
    2. +
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. +
  3. Bloques flotantes
    4. +
  4. Elementos posicionados descendentemente , en orden de aparición (en HTML)
    5. +
+ +

En realidad, como puedes ver en el siguiente ejemplo, el fondo y el borde del bloque no posicionado (DIV #4) no son afectados por los bloques flotantes, mientras que el contenido si es afectado. Esto ocurre de acuerdo al comportamiento flotante stándar de CSS.

+ +

Este comportamiento puede ser explicado con una versión mejorada de la lista previa:

+ +
    +
  1. Fondo y bordes del elemento raiz
    2. +
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. +
  3. Bloques flotantes
    4. +
  4. Descendientes en línea en el flujo normal
    5. +
  5. Elementos posicionados descendentemente , en orden de aparición (en HTML)
    6. +
+ +
Nota: En el ejemplo debajo, todos los bloques excepto el no posicionado son translúcidos para mostrar el orden de apilamiento. Si la opacidad del bloque no posicionado (DIV #4) es reducida, entonces algo extraño ocurre: el fondo y el borde de ese bloque sobresale por encima de los bloques flotantes, pero aun debajo de los bloques posicionados. Yo no pude entender si esto es un bug o una interpretación peculiar de la especificación. (Aplicar opacidad debería crear implícitamente un contexto de apilamiento.)
+ +

{{ EmbedLiveSample('Example_source_code', '563', '255', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_and_float') }}

+ +

Código fuente de ejemplo

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b><br />position: absolute;</div>
+
+<div id="flo1">
+  <b>DIV #2</b><br />float: left;</div>
+
+<div id="flo2">
+  <b>DIV #3</b><br />float: right;</div>
+
+<br />
+
+<div id="sta1">
+  <b>DIV #4</b><br />no positioning</div>
+
+<div id="abs2">
+  <b>DIV #5</b><br />position: absolute;</div>
+
+ +

CSS

+ +
div {
+  padding: 10px;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 10px;
+  right: 140px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  height: 100px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+#flo1 {
+  margin: 0px 10px 0px 20px;
+  float: left;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#flo2 {
+  margin: 0px 20px 0px 10px;
+  float: right;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#abs2 {
+  position: absolute;
+  width: 150px;
+  height: 100px;
+  top: 130px;
+  left: 100px;
+  border: 1px dashed #990;
+  background-color: #fdd;
+}
+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: November 3rd, 2014
    • +
+
+ +

 

diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html new file mode 100644 index 0000000000..def9c5ea8e --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,132 @@ +--- +title: Ejemplo 1 del contexto de apilamiento +slug: >- + Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

Ejemplo 1 del contexto de apilamiento

+ +

Empecemos con un ejemplo básico. En el contexto de apilamiento raíz tenemos dos DIVs (DIV #1 and DIV #3), ambos con posición relativa, pero sin propiedad z-index. Dentro del DIV #1 se encuentra el DIV #2 de posición absoluta, mientras que en el DIV #3 se encuentra el DIV #4 con posición absoluta, ambos sin propiedad z-index.

+ +

El único contexto de apilamiento es el contexto raíz. Sin la propiedad z-index, los elementos son apilados por orden de ocurrencia.

+ +

Stacking context example 1

+ +

Si a DIV #2 le asignamos un valor z-index positivo (no-cero y no-auto), es renderizado encima de todos los otros DIVs.

+ +

Stacking context example 1

+ +

Luego si al DIV #4 también se le asigna un z-index positivo mayor que el z-index del DIV #2, es renderizado encima de los otros DIVs incluyendo DIV #2.

+ +

Stacking context example 1

+ +

En este último ejemplo puedes ver que el DIV #2 y el DIV #4 no son hermanos, porque pertenecen a padres distintos en la jerarquía de elementos HTML. A pesar de esto, el apilamiento del DIV #4 con respecto al DIV #2 puede ser controlado a través de z-index. Pasa que, dado a que al DIV #1 y al DIV #3 no se le ha asignado ningún valor z-index, ellos no han creado un contexto de apilamiento. Esto significa que todos sus contenidos, incluyendo el DIV #2 y el DIV #4, pertenecen al mismo contexto de apilamiento raíz.

+ +

En términos de contextos de apilamiento, el DIV #1 y el DIV #3 son simplemente asimilados dentro del elemento raíz, y la jerarquía resultante es la siguiente:

+ +
    +
  • contexto de apilamiento raíz +
      +
    • DIV #2 (z-index 1)
      • +
    • DIV #4 (z-index 2)
      • +
    +
    • +
+ +
Nota: El DIV #1 y el DIV #3 no son translúcidos. Es importante recordar que asignar una opacidad menor a 1 a un elemento posicionado implica la creación de un contexto de apilamiento, como ocurre cuando se añade un valor z-index. Y este ejemplo muestra que ocurre cuando un elemento padre no crea un contexto de apilamiento.
+ +

Ejemplo

+ +

HTML

+ +
<div id="div1">
+<br /><span class="bold">DIV #1</span>
+<br />position: relative;
+   <div id="div2">
+   <br /><span class="bold">DIV #2</span>
+   <br />position: absolute;
+   <br />z-index: 1;
+   </div>
+</div>
+
+<br />
+
+<div id="div3">
+<br /><span class="bold">DIV #3</span>
+<br />position: relative;
+   <div id="div4">
+   <br /><span class="bold">DIV #4</span>
+   <br />position: absolute;
+   <br />z-index: 2;
+   </div>
+</div>
+
+</body></html>
+
+ +

CSS

+ +
.bold {
+    font-weight: bold;
+    font: 12px Arial;
+}
+#div1,
+#div3 {
+    height: 80px;
+    position: relative;
+    border: 1px dashed #669966;
+    background-color: #ccffcc;
+    padding-left: 5px;
+}
+#div2 {
+    opacity: 0.8;
+    z-index: 1;
+    position: absolute;
+    width: 150px;
+    height: 200px;
+    top: 20px;
+    left: 170px;
+    border: 1px dashed #990000;
+    background-color: #ffdddd;
+    text-align: center;
+}
+#div4 {
+    opacity: 0.8;
+    z-index: 2;
+    position: absolute;
+    width: 200px;
+    height: 70px;
+    top: 65px;
+    left: 50px;
+    border: 1px dashed #000099;
+    background-color: #ddddff;
+    text-align: left;
+    padding-left: 10px;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}

+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: July 9th, 2005
    • +
+
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html new file mode 100644 index 0000000000..2955b43b7f --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -0,0 +1,137 @@ +--- +title: Ejemplo 2 del contexto de apilamiento +slug: >- + Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

Ejemplo 2 del contexto de apilamiento

+ +

Este es un ejemplo muy simple, pero es la clave para entender el concepto de contexto de apilamiento. Tenemos los mismos 4 DIVs del ejemplo previo, pero ahora las propiedades z-index son asignadas en ambos niveles de la jerarquía.

+ +

{{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }}

+ +

Puedes ver que el DIV #2 (z-index: 2) está encima del DIV #3 (z-index: 1), porque ambos pertenecen al mismo contexto de apilamiento (el contexto raíz), así que los valores z-index indican cómo son apilados los elementos.

+ +

Lo que puede ser considerado extraño es que el DIV #2 (z-index: 2) está encima del DIV #4 (z-index: 10), a pesar de sus valores z-index. La razón es que ellos no pertenecen al mismo contexto de apilamiento. El DIV #4 pertenece al contexto de apilamiento creado por el DIV #3, y como explicamos previamente el DIV #3 (y todos su contenido) está debajo del DIV #2.

+ +

Para entender mejor esta situación, esta es la jerarquía del contexto de apilamiento:

+ +
    +
  • contexto de apilamiento raíz +
      +
    • DIV #2 (z-index 2)
      • +
    • DIV #3 (z-index 1) +
        +
      • DIV #4 (z-index 10)
        • +
      +
      • +
    +
    • +
+ +
Nota:  Vale la pena recordar que en general la jerarquía HTML es diferente de la jerarquía del contexto de apilamiento. En la jerarquía del contexto de apilamiento, los elementos que no crean un contexto de apilamiento son colapsados en sus padres.
+ +

Código fuente de ejemplo

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+#div2 { z-index: 2; }
+#div3 { z-index: 1; }
+#div4 { z-index: 10; }
+
+#div1,#div3 {
+   height: 80px;
+   position: relative;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#div2 {
+   opacity: 0.8;
+   position: absolute;
+   width: 150px;
+   height: 200px;
+   top: 20px;
+   left: 170px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#div4 {
+   opacity: 0.8;
+   position: absolute;
+   width: 200px;
+   height: 70px;
+   top: 65px;
+   left: 50px;
+   border: 1px dashed #000099;
+   background-color: #ddddff;
+   text-align: left;
+   padding-left: 10px;
+}
+
+
+</style></head>
+
+<body>
+
+    <br />
+
+    <div id="div1"><br />
+        <span class="bold">DIV #1</span><br />
+        position: relative;
+        <div id="div2"><br />
+            <span class="bold">DIV #2</span><br />
+            position: absolute;<br />
+            z-index: 2;
+        </div>
+    </div>
+
+    <br />
+
+    <div id="div3"><br />
+        <span class="bold">DIV #3</span><br />
+        position: relative;<br />
+        z-index: 1;
+        <div id="div4"><br />
+            <span class="bold">DIV #4</span><br />
+            position: absolute;<br />
+            z-index: 10;
+        </div>
+    </div>
+
+</body>
+</html>
+
+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: July 9th, 2005
    • +
+
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html new file mode 100644 index 0000000000..c41d8b56ad --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -0,0 +1,183 @@ +--- +title: Ejemplo 3 del contexto de apilamiento +slug: >- + Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +

« CSS « Understanding CSS z-index

+ +

Ejemplo 3 del contexto de apilamiento

+ +

Este último ejemplo muestra los problemas que surgen cuando se combinan varios elementos posicionados en una jerarquía HTML multi nivel y cuando los valores z-index son asignados usando selectores de clase.

+ +

Tomemos como ejemplo un menú jerárquico de tres niveles formado por varios DIVs posicionados. DIVs de segundo y tercer nivel aparecen cuando se pone el cursor encima o se hace clic en sus padres. Usualmente este tipo de menú es generado mediante un script del lado del cliente o del lado del servidor, así que las reglas de estilos son asignadas con un selector de clase en lugar de un selector de id.

+ +

Si los tres niveles del menú se superponen parcialmente, entonces gestionar el apilamiento se podría convertir en un problema.

+ +

{{ EmbedLiveSample('Example_source_code', '320', '330', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3') }}

+ +

El menú de primer nivel solo tiene posición relativa, así que ningún contexto de apilamiento es creado.

+ +

El menú de segundo nivel tiene posición absoluta dentro del elemento padre. Para colocarlo encima de todos los menus de primer nivel, usamos z-index. El problema es que para cada menú de segundo nivel, un contexto de apilamiento es creado y cada menú de tercer nivel pertenece al contexto de su padre.

+ +

De manera que un menú de tercer nivel va a ser apilado bajo los menus de segundo nivel porque todos los menus de segundo nivel comparten el mismo valor z-index y las reglas de apilamiento por defecto son aplicadas.

+ +

Para entender mejor la situación, esta es la jerarquía del contexto de apilamiento:

+ +
    +
  • contexto de apilamiento raíz +
      +
    • NIVEL #1 +
        +
      • NIVEL #2 (z-index: 1) +
          +
        • NIVEL #3
          • +
        • ...
          • +
        • NIVEL #3
          • +
        +
        • +
      • NIVEL #2 (z-index: 1)
        • +
      • ...
        • +
      • NIVEL #2 (z-index: 1)
        • +
      +
      • +
    • NIVEL #1
      • +
    • ...
      • +
    • NIVEL #1
      • +
    +
    • +
+ +

Este problema puede ser evitado al remover la superposición entre menus de diferentes niveles, o usando valores z-index individuales (y diferentes) asignados a través del selector id en lugar de un selector de clase, o aplanando la jerarquía HTML.

+ +
Nota: En el código fuente vas a ver que los menus de segundo y tercer nivel están hechos de varios DIVs contenidos en un contenedor con posición absoluta. Esto es útil para agrupar y posicionarlos todos a la vez.
+ +

Código fuente de ejemplo

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+div.lev1 {
+   width: 250px;
+   height: 70px;
+   position: relative;
+   border: 2px outset #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#container1 {
+   z-index: 1;
+   position: absolute;
+   top: 30px;
+   left: 75px;
+}
+
+div.lev2 {
+   opacity: 0.9;
+   width: 200px;
+   height: 60px;
+   position: relative;
+   border: 2px outset #990000;
+   background-color: #ffdddd;
+   padding-left: 5px;
+}
+
+#container2 {
+   z-index: 1;
+   position: absolute;
+   top: 20px;
+   left: 110px;
+}
+
+div.lev3 {
+   z-index: 10;
+   width: 100px;
+   position: relative;
+   border: 2px outset #000099;
+   background-color: #ddddff;
+   padding-left: 5px;
+}
+
+</style></head>
+
+<body>
+
+<br />
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+
+   <div id="container1">
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+
+         <div id="container2">
+
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+
+         </div>
+
+      </div>
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+      </div>
+
+   </div>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+</body></html>
+
+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: July 9th, 2005
    • +
+
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..97038e7bae --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,141 @@ +--- +title: Apilando sin z-index +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

Apilando sin z-index

+ +

Cuando ningún elemento tiene z-index, los elementos son apilados en este orden (de abajo hacia arriba):

+ +
    +
  1. El fondo y los bordes del elemento raiz
    2. +
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. +
  3. Elementos posicionados descendentemente, en orden de aparición (en HTML)
    4. +
+ +

En el siguiente ejemplo, los bloques con posiciones absolutas y relativas son apropiadamente dimensionados y posicionados para ilustrar las reglas de apilamiento.

+ +
+

Notas:

+ +
    +
  • Dado un grupo homogéneo de elementos sin propiedad z-index, tales como los bloques posicionados (DIV #1 al #4) en el ejemplo, el orden de apilamiento de los elementos es su orden en la jerarquía HTML, independientemente de su posición.
    • +
  • +

    Bloques estándar (DIV #5) en el flujo normal, sin ninguna propiedad de posicionamiento, siempre son renderizados antes de los elementos posicionados y aparecen debajo de los mismos, incluso si están después en la jerarquía HTML.

    +
    • +
+
+ +

understanding_zindex_01.png

+ +

 

+ +

Ejemplo

+ +

HTML

+ +
<div id="absdiv1">
+    <br /><span class="bold">DIV #1</span>
+    <br />position: absolute; </div>
+<div id="reldiv1">
+    <br /><span class="bold">DIV #2</span>
+    <br />position: relative; </div>
+<div id="reldiv2">
+    <br /><span class="bold">DIV #3</span>
+    <br />position: relative; </div>
+<div id="absdiv2">
+    <br /><span class="bold">DIV #4</span>
+    <br />position: absolute; </div>
+<div id="normdiv">
+    <br /><span class="bold">DIV #5</span>
+    <br />no positioning </div>
+
+ +

CSS

+ +
 .bold {
+     font-weight: bold;
+     font: 12px Arial;
+ }
+ #normdiv {
+     height: 70px;
+     border: 1px dashed #999966;
+     background-color: #ffffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #reldiv1 {
+     opacity: 0.7;
+     height: 100px;
+     position: relative;
+     top: 30px;
+     border: 1px dashed #669966;
+     background-color: #ccffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #reldiv2 {
+     opacity: 0.7;
+     height: 100px;
+     position: relative;
+     top: 15px;
+     left: 20px;
+     border: 1px dashed #669966;
+     background-color: #ccffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #absdiv1 {
+     opacity: 0.7;
+     position: absolute;
+     width: 150px;
+     height: 350px;
+     top: 10px;
+     left: 10px;
+     border: 1px dashed #990000;
+     background-color: #ffdddd;
+     text-align: center;
+ }
+ #absdiv2 {
+     opacity: 0.7;
+     position: absolute;
+     width: 150px;
+     height: 350px;
+     top: 10px;
+     right: 10px;
+     border: 1px dashed #990000;
+     background-color: #ffdddd;
+     text-align: center;
+ }
+
+ +

Resultado

+ +

(Si la imagen no aparece en CodePen, haz clic en el botón Tidy en la sección CSS)

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index') }}

+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: November 3rd, 2014
    • +
+
+ +

 

diff --git a/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..1daf172048 --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,231 @@ +--- +title: El contexto de apilamiento +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +

El contexto de apilamiento es la conceptualización tridimensional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que se asume está de cara al viewport o página web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos.

+ +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

El contexto de apilamiento

+ +

 

+ +

En el ejemplo previo, Agregando z-index, el orden de renderizado de ciertos DIVs es influenciado por sus valores z-index. Esto ocurre debido a que estos DIVs tienen propiedades especiales que causan que formen un contexto de apilamiento.

+ +

Un contexto de apilamiento es formado, en cualquier lugar del documento, por cualquier elemento que

+ +
    +
  • sea el elemento raiz (HTML),
    • +
  • tenga posición (absoluta o relativa) con un valor z-index distinto de "auto",
    • +
  • un elemento flex con un valor z-index distinto de "auto", que sea el elemento padre display: flex|inline-flex,
    • +
  • sean elementos con un valor {{cssxref("opacity")}} menor de 1. (Mira la especificación de opacity),
    • +
  • elementos con un valor  {{cssxref("transform")}} distinto de "none",
    • +
  • elementos con un valor {{cssxref("mix-blend-mode")}} distinto de "normal",
    • +
  • elementos con un valor {{cssxref("filter")}} distinto de "none",
    • +
  • elementos con un valor {{cssxref("perspective")}} distinto de "none",
    • +
  • elementos con un valor {{cssxref("isolation")}} igual a "isolate",
    • +
  • position: fixed
    • +
  • especifican cualquier atributo superior en {{cssxref("will-change")}} incluso si no especificas valores para estos atributos directamente (Mira este post)
    • +
  • elementos con un valor {{cssxref("-webkit-overflow-scrolling")}} igual a "touch"
    • +
+ +

Dentro de un contexto de apilamiento, los elementos hijos son apilados de acuerdo a las mismas reglas previamente explicadas. Es importante entender que los valores z-index de los contextos de apilamiento de los hijos solo tienen sentido en el contexto del padre. Los contextos de apilamiento son tratados atómicamente como una sola unidad en el contexto de apilamiento del padre.

+ +

En resumen:

+ +
    +
  • Posicionar y asignar un valor z-index a un elemento HTML crea un contexto de apilamiento, (asi como también lo hace asignar una opacidad parcial)
    • +
  • Contextos de apilamiento pueden ser contenidos en otros contextos de apilamiento, y juntos crean una jerarquía de contextos de apilamiento
    • +
  • Cada contexto de apilamiento es completamente independiente de sus hermanos: solo los elementos descendientes son considerados cuando el apilamiento es procesado.
    • +
  • Cada contexto de apilamiento es auto contenido: luego que los contenidos del elemento son apilados, el elemento completo es considerado en el orden de apilamiento del contexto del padre.
    • +
+ +
Nota: La jerarquía de apilar contextos es un sub conjunto de la jerarquía de elementos HTML, porque solo ciertos elementos crean contextos de apilamiento. Podemos decir que los elementos que no crean sus propios contextos de apilamiento son asimilados por el contexto de apilamiento padre.
+ +

El ejemplo

+ +

Example of stacking rules modified using z-index

+ +

En este ejemplo cada elemento posicionado crea su propio contexto de apilamiento, debido a sus valores de posicionamiento y z-index. La jerarquía de contextos de apilamiento es organizada de la siguiente manera:

+ +
    +
  • Raíz +
      +
    • DIV #1
      • +
    • DIV #2
      • +
    • DIV #3 +
        +
      • DIV #4
        • +
      • DIV #5
        • +
      • DIV #6
        • +
      +
      • +
    +
    • +
+ +

Es importante notar que el DIV #4, DIV #5 y el DIV #6 son hijos del DIV #3, así que el apilamiento de esos elementos es completamente resuelto dentro del DIV#3. Una vez que el apilamiento y el renderizado dentro del DIV#3 ha sido completado, todo el elemento DIV#3 es apilado en el elemento raíz con respecto a sus DIV hermanos.

+ +
+

Notas:

+ +
    +
  • DIV #4 es renderizado debajo de DIV #1 porque el z-index (5) de DIV #1 es válido dentro del contexto de apilamiento del elemento raiz, mientras que el z-index (6) de DIV #4 es válido dentro del contexto de apilamiento de DIV #3. Así que DIV #4 está debajo de DIV #1, porque DIV #4 pertenece a DIV #3, que tiene un valor z-index menor.
    • +
  • Por la misma razón DIV #2 (z-index 2) es renderizado bajo DIV#5 (z-index 1) porque DIV #5 pertenece a DIV #3, que tiene un valor z-index mayor.
    • +
  • El valor z-index de DIV #3 es 4, pero este valor es independiente del z-index de DIV #4, DIV #5 and DIV #6, porque pertenece a un contexto de apilamiento diferente.
    • +
  • Una forma fácil de descubrir el orden de renderizado de los elementos apilados en el eje Z es pensar en esto como un tipo de "número de versión", donde los elementos hijos son números de versión menores bajo los números de versión mayores de sus padres. De esta manera podemos ver fácilmente cómo un elemento con un valor z-index de 1 (DIV #5) es apilado encima de un elemento con un valor z-index de 2 (DIV #2), y cómo un elemento con un valor z-index de 6 (DIV #4) es apilado debajo de un elemento con un valor z-index de 5 (DIV #1). En nuestro ejemplo (ordenado de acuerdo al orden de renderizado final): +
      +
    • Raíz +
        +
      • El valor z-index de DIV #2 es 2
        • +
      • El valor z-index de DIV #3 es 4 +
          +
        • El valor z-index de DIV #5 es 1, apilado bajo un elemento con un valor z-index de 4, que resulta en un orden de renderizado de 4.1
          • +
        • El valor z-index de DIV #6 es 3, apilado debajo de un elemento con un valor z-index de 4, que resulta en un orden de renderizado de 4.3
          • +
        • El valor z-index de DIV #4 es 6, apilado bajo un elemento con valor z-index de 4, que resulta en un orden de renderizado de 4.6
          • +
        +
        • +
      • El valor z-index de DIV #1 es 5
        • +
      +
      • +
    +
    • +
+
+ +

Ejemplo

+ +

HTML

+ +
    <div id="div1">
+      <h1>Division Element #1</h1>
+      <code>position: relative;<br/>
+      z-index: 5;</code>
+    </div>
+
+    <div id="div2">
+      <h1>Division Element #2</h1>
+      <code>position: relative;<br/>
+      z-index: 2;</code>
+    </div>
+
+    <div id="div3">
+
+      <div id="div4">
+        <h1>Division Element #4</h1>
+        <code>position: relative;<br/>
+        z-index: 6;</code>
+      </div>
+
+      <h1>Division Element #3</h1>
+      <code>position: absolute;<br/>
+      z-index: 4;</code>
+
+      <div id="div5">
+        <h1>Division Element #5</h1>
+        <code>position: relative;<br/>
+        z-index: 1;</code>
+      </div>
+
+      <div id="div6">
+        <h1>Division Element #6</h1>
+        <code>position: absolute;<br/>
+        z-index: 3;</code>
+      </div>
+    </div>
+
+ +

CSS

+ +
* {
+    margin: 0;
+}
+html {
+    padding: 20px;
+    font: 12px/20px Arial, sans-serif;
+}
+div {
+    opacity: 0.7;
+    position: relative;
+}
+h1 {
+    font: inherit;
+    font-weight: bold;
+}
+#div1,
+#div2 {
+    border: 1px dashed #696;
+    padding: 10px;
+    background-color: #cfc;
+}
+#div1 {
+    z-index: 5;
+    margin-bottom: 190px;
+}
+#div2 {
+    z-index: 2;
+}
+#div3 {
+    z-index: 4;
+    opacity: 1;
+    position: absolute;
+    top: 40px;
+    left: 180px;
+    width: 330px;
+    border: 1px dashed #900;
+    background-color: #fdd;
+    padding: 40px 20px 20px;
+}
+#div4,
+#div5 {
+    border: 1px dashed #996;
+    background-color: #ffc;
+}
+#div4 {
+    z-index: 6;
+    margin-bottom: 15px;
+    padding: 25px 10px 5px;
+}
+#div5 {
+    z-index: 1;
+    margin-top: 15px;
+    padding: 5px 10px;
+}
+#div6 {
+    z-index: 3;
+    position: absolute;
+    top: 20px;
+    left: 180px;
+    width: 150px;
+    height: 125px;
+    border: 1px dashed #009;
+    padding-top: 125px;
+    background-color: #ddf;
+    text-align: center;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '556', '396') }}

+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: July 9th, 2005
    • +
+
diff --git a/files/es/web/css/css_reglas_condicionales/index.html b/files/es/web/css/css_reglas_condicionales/index.html deleted file mode 100644 index 59c2a9b328..0000000000 --- a/files/es/web/css/css_reglas_condicionales/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: CSS Reglas Condicionales -slug: Web/CSS/CSS_Reglas_Condicionales -tags: - - CSS - - Referencia -translation_of: Web/CSS/CSS_Conditional_Rules ---- -
{{CSSRef}}
- -

Las Reglas Condicionales (At-rules) es un módulo de CSS que permite definir un conjunto de reglas que solo aplicarán con base en las capacidades del procesador o del documento al cual la hoja de estilos está siendo aplicada.

- -

Referencia

- -

Reglas condicionales

- -
-
    -
  • {{cssxref("@document")}}
    • -
  • {{cssxref("@media")}}
    • -
  • {{cssxref("@supports")}}
    • -
  • {{cssxref("@import")}}
    • -
-
- -

Guías

- -

None.

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Definición Inicial
- -

Compatibilidad de navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CatacterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CatacterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
diff --git a/files/es/web/css/css_selectors/index.html b/files/es/web/css/css_selectors/index.html new file mode 100644 index 0000000000..20baaf25a6 --- /dev/null +++ b/files/es/web/css/css_selectors/index.html @@ -0,0 +1,164 @@ +--- +title: Selectores CSS +slug: Web/CSS/Selectores_CSS +tags: + - CSS + - Referencia + - Selectores + - Selectores de CSS + - Visión general +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef}}
+ +

Los selectores definen sobre qué elementos se aplicará un conjunto de reglas CSS.

+ +

Selectores básicos

+ +
+
Selector de tipo
+
Selecciona todos los elementos que coinciden con el nombre del elemento especificado.
+ Sintaxis: eltname
+ Ejemplo: input se aplicará a cualquier elemento {{HTMLElement('input')}}.
+
Selector de clase
+
Selecciona todos los elementos que tienen el atributo de class especificado.
+ Sintaxis: .classname
+ Ejemplo: .index seleccionará cualquier elemento que tenga la clase "index".
+
Selector de ID
+
Selecciona un elemento basándose en el valor de su atributo id. Solo puede haber un elemento con un determinado ID dentro de un documento.
+ Sintaxis: #idname
+ Ejemplo: #toc se aplicará a cualquier elemento que tenga el ID "toc".
+
Selector universal
+
Selecciona todos los elementos. Opcionalmente, puede estar restringido a un espacio de nombre específico o a todos los espacios de nombres.
+ Sintaxis: * ns|* *|*
+ Ejemplo: * se aplicará a todos los elementos del documento.
+
Selector de atributo
+
Selecciona elementos basándose en el valor de un determinado atributo.
+ Sintaxis: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ Ejemplo: [autoplay] seleccionará todos los elementos que tengan el atributo "autoplay" establecido (a cualquier valor).
+
+ +

Combinadores

+ +
+
Combinador de hermanos adyacentes
+
El combinador + selecciona hermanos adyacentes. Esto quiere decir que el segundo elemento sigue directamente al primero y ambos comparten el mismo elemento padre.
+ Sintaxis: A + B
+ Ejemplo: La regla h2 + p se aplicará a todos los elementos {{HTMLElement('p')}} que siguen directamente a un elemento {{HTMLElement('h2')}}.
+
Combinador general de hermanos
+
El combinador ~ selecciona hermanos. Esto quiere decir que el segundo elemento sigue al primero (no necesariamente de forma inmediata) y ambos comparten el mismo elemento padre.
+ Sintaxis: A ~ B
+ Ejemplo: La regla p ~ span se aplicará a todos los elementos {{HTMLElement('span')}} que siguen un elemento {{HTMLElement('p')}}.
+
Combinador de hijo
+
El combinador > selecciona los elementos que son hijos directos del primer elemento.
+ Sintaxis: A > B
+ Ejemplo: La regla ul > li se aplicará a todos los elementos {{HTMLElement('li')}} que son hijos directos de un elemento {{HTMLElement('ul')}}.
+
Combinador de descendientes
+
El combinador   (espacio) selecciona los elementos que son descendientes del primer elemento.
+ Sintaxis: A B
+ Ejemplo: La regla div span se aplicará a todos los elementos {{HTMLElement('span')}} que están dentro de un elemento {{HTMLElement('div')}}.
+
Combinador de columna {{Experimental_Inline}}
+
El combinador || selecciona los elementos especificados pertenecientes a una columna.
+ Sintaxis: A || B
+ Ejemplo: col || td seleccionará todos los elementos {{HTMLElement("td")}} que pertenezcan al ámbito de {{HTMLElement("col")}}.
+
+ +

Pseudoclases

+ +
+
Las pseudoclases permiten la selección de elementos, basada en información de estado que no está contenida en el árbol de documentos.
+
Ejemplo: La regla a:visited se aplicará a todos los elementos {{HTMLElement("a")}} que hayan sido visitados por el usuario.
+
+ +

Pseudoelementos

+ +
+
+

Los pseudoelementos son abstracciones del árbol que representan entidades más allá de los elementos HTML. Por ejemplo, HTML no tiene un elemento que describa la primera letra de un párrafo ni los marcadores de una lista. Los pseudoelementos representan estas entidades y nos permiten asignarles reglas CSS. De este modo podemos diseñar estas entidades de forma independiente.

+
+
Ejemplo: La regla p::first-line se aplicará a la primera línea de texto de todos los elementos {{HTMLElement('p')}}.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Añadidos el combinador de columna ||, selectores de estructura de grilla, combinadores lógicos, pseudoclases de ubicación, dimensión temporal, estado de recurso, lingüisticas y de UI, modificador para la selección de valores de atributo ASCII que distingue entre mayúsculas y minúsculas.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Añadidos el combinador ~ general de hermanos y las pseudoclases de árbol-estructural. Los pseudoelementos creados, usan un prefijo :: de dos puntos dobles. Selectores de atributos adicionales.
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}}Añadidos los combinadores > de elemento hijo y + de elementos hermanos adyacentes. Añadidos los selectores universal y de atributo.
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definición inicial.
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
diff --git a/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html new file mode 100644 index 0000000000..fe51517a2b --- /dev/null +++ b/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -0,0 +1,67 @@ +--- +title: 'Usando la pseudo-clase :target en selectores' +slug: 'Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores' +tags: + - CSS + - CSS3 + - Selectores +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +

When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience. {{CSSRef}}

+ +

Como ayuda para identificar el destino de un enlace que apunta a una parte específica de un documento, los Selectores CSS3 incluyen la pseudo-clase {{ Cssxref(":target") }}.

+ +

Seleccionando un objetivo (target)

+ +

La pseudo-clase {{ Cssxref(":target") }} es usada para estilizar el elemento objetivo de una URI que contiene un identificador de fragmento. Por ejemplo, la URI http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example contiene el identificador de fragmento #Example. En HTML, los identificadores son valores de los atributos id o name, pues ambos comparten el mismo espacio de nombres. Por lo tanto, la URI de ejemplo apuntará al encabezado "Example" en este documento.

+ +

Supongamos que se quiere estilizar cualquier elemento h2 que sea el objetivo de una URI, pero no queremos que cualquier otro elemento tenga esos mismos estilos. Es así de simple:

+ +
h2:target {font-weight: bold;}
+ +

También es posible crear estilos específicos para fragmentos particulares del documento. Esto se hace usando el mismo valor del identificador que se encuentra en la URI. Así, para añadir un borde al fragmento #Example, escribiremos:

+ +
#Example:target {border: 1px solid black;}
+ +

Aplicando estilos a todos los elementos objetivo

+ +

Si lo que se intenta es crear un estilo que cubra a todos los elementos objetivo, se puede usar el selector universal:

+ +
:target {color: red;}
+
+ +

Ejemplo

+ +

En el siguiente ejemplo, hay cinco enlaces que apuntan a elementos en el mismo documento. Seleccionar el enlace "First", por ejemplo, causará que <h1 id="one"> sea el elemento objetivo. Nótese que el documento puede desplazarse a una nueva posición, pues los elementos objetivo están ubicados en la parte superior de la ventana del navegador cuando es posible.

+ +
+
<h4 id="one">...</h4> <p id="two">...</p>
+<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
+
+<a href="#one">First</a>
+<a href="#two">Second</a>
+<a href="#three">Third</a>
+<a href="#four">Fourth</a>
+<a href="#five">Fifth</a>
+
+ +

Conclusión

+ +

En los casos en los que un identificador de fragmento apunte a una porción del documento, los lectores pueden confundirse sobre qué parte del documento se supone que están leyendo. Darle un estilo particular al objetivo de la URI le resta confusión al lector, o incluso la elimina.

+ + + + + +
+

Información del Documento Original

+ +
    +
  • Autor(es): Eric Meyer, Evangelista de Estándares, Netscape Communications
    • +
  • Información Original de Copyright: Copyright © 2001-2003 Netscape. Todos los derechos reservados.
    • +
  • Nota: El artículo en inglés era originalmente parte del sitio DevEdge.
    • +
+
diff --git a/files/es/web/css/css_text/index.html b/files/es/web/css/css_text/index.html new file mode 100644 index 0000000000..f0c3c934b6 --- /dev/null +++ b/files/es/web/css/css_text/index.html @@ -0,0 +1,123 @@ +--- +title: Texto CSS +slug: Web/CSS/Texto_CSS +tags: + - CSS + - Texto CSS + - Vista general +translation_of: Web/CSS/CSS_Text +--- +
{{CSSRef}}
+ +

Texto CSS  es el módulo de CSS que define cómo realizar la manipulación de elementos de texto como los saltos de línea, la justificación, la alineación, la gestión de espacios en blanco y las transformaciones de texto.

+ +

Referencia

+ +

Propiedades

+ +
+
    +
  • {{cssxref("hyphens")}}
    • +
  • {{cssxref("letter-spacing")}}
    • +
  • {{cssxref("line-break")}}
    • +
  • {{cssxref("overflow-wrap")}}
    • +
  • {{cssxref("tab-size")}}
    • +
  • {{cssxref("text-align")}}
    • +
  • {{cssxref("text-align-last")}}
    • +
  • {{cssxref("text-indent")}}
    • +
  • {{cssxref("text-size-adjust")}}
    • +
  • {{cssxref("text-transform")}}
    • +
  • {{cssxref("white-space")}}
    • +
  • {{cssxref("word-break")}}
    • +
  • {{cssxref("word-spacing")}}
    • +
  • {{cssxref("word-wrap")}}
    • +
+
+ +

Guías

+ +

None.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS Logical Properties')}}{{Spec2('CSS Logical Properties')}}Actualiza varias propiedades para que sean independientes de la direccionalidad del texto.
{{SpecName('CSS3 Text')}}{{Spec2('CSS3 Text')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definición Inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop(1.0)}}33.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0 (85)
+
diff --git a/files/es/web/css/css_transitions/using_css_transitions/index.html b/files/es/web/css/css_transitions/using_css_transitions/index.html new file mode 100644 index 0000000000..62142638c4 --- /dev/null +++ b/files/es/web/css/css_transitions/using_css_transitions/index.html @@ -0,0 +1,700 @@ +--- +title: Transiciones de CSS +slug: Web/CSS/Transiciones_de_CSS +tags: + - CSS + - Gecko + - Transiciones de CSS +translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions +--- +

{{ SeeCompatTable() }}

+ +

Las transiciones CSS, parte del borrador de la especificación CSS3, proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que puedes personalizar.

+ +
Nota: como la especificación de las transiciones CSS todavía se encuentra en fase de borrador, a todas las propiedades asociadas con ellas se les añade el prefijo "-moz-" para usarse en Gecko. Para la compatibilidad con WebKit, se aconseja usar también el prefijo "-webkit-" y para la compatibilidad con Opera, el prefijo "-o-". Es decir, por ejemplo,  la propiedad de transición se especificaría como -moz-transition, -webkit-transition y -o-transition.
+ +

Las propiedades de transición CSS

+ +

Las transiciones CSS se controlan mediante la propiedad abreviada {{ cssxref("transition") }}. Es preferible utilizar este método porque de esta forma se evita que la longitud de la lista de parámetros sea diferente, lo que puede dar lugar a tener que emplear un tiempo considerablemente largo en depurar el código CSS.

+ +

Puedes controlar los componentes individuales de la transición usando las siguientes subpropiedades:

+ +
+
{{ cssxref("transition-property") }}
+
Especifica el nombre o nombres de las propiedades CSS a las que deberían aplicarse las transiciones. Sólo las propiedades que se enumeran aquí son animadas durante las transiciones; los cambios en el resto de las propiedades suceden de manera instantánea como siempre.
+
{{ cssxref("transition-duration") }}
+
Especifica la duración en la que sucederán las transiciones. Puedes especificar una única duración que se aplique a todas las propiedades durante la transición o valores múltiples que permitan a cada propiedad de transición un período de tiempo diferente.
+
{{ cssxref("transition-timing-function") }}
+
Especifica la curva cúbica bézier que se usa para definir cómo se computan los valores intermedios para las propiedades.
+
{{ cssxref("transition-delay") }}
+
Define el tiempo de espera entre el momento en que se cambia una propiedad y el inicio de la transición.
+
+ +

Detectar la finalización de una transición

+ +

Hay un único acontecimiento que se desencadena cuando se completan las transiciones. En Firefox, el evento es transitionend, en Opera, OTransitionEnd y en WebKit es webkitTransitionEnd. Consulta la tabla de compatibilidades al final de la página si deseas más información. El evento transitionend ofrece dos propiedades:

+ +
+
propertyName
+
Una cadena que indica el nombre de la propiedad CSS cuya transición se completó.
+
elapsedTime
+
Un float que indica el número de segundos que la transición se había estado ejecutando en el momento en que el acontecimiento se desencadenó. Este valor no está afectado por el valor de {{ cssxref("transition-delay") }}.
+
+ +

Como es habitual, puedes usar el método {{ domxref("element.addEventListener()") }} para monitorizar este acontecimiento:

+ +
el.addEventListener("transitionend", updateTransition, true);
+
+ +
Nota: el evento "transitionend" no se dispara si la transición se anula debido a que el valor de la propiedad de animación es modificado antes de que la transición se complete.
+ +

Propiedades que pueden ser animadas

+ +

Las transiciones y las animaciones CSS pueden usarse para animar las siguientes propiedades.

+ +
Nota: el conjunto de propiedades que puede animarse está sujeto a cambios, por lo tanto se recomienda evitar incluir cualquier propiedad en la lista que no anime porque en un futuro podría provocar resultados inesperados.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipo de valor
{{ cssxref("background-color") }}{{cssxref("<color>")}}
{{ cssxref("background-image") }}solo degradado; no está implementado en Firefox (see {{ bug(536540) }})
{{ cssxref("background-position") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("background-size") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("border-color") }} (including sub-properties){{cssxref("<color>")}}
{{ cssxref("border-radius") }} (including sub-properties){{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("border-width") }} (including sub-properties){{cssxref("<length>")}}
{{ cssxref("border-spacing") }}{{cssxref("<length>")}}
{{ cssxref("bottom") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("-moz-box-flex") }}número
{{ cssxref("box-shadow") }}sombra
{{ cssxref("color") }}{{cssxref("<color>")}}
{{ cssxref("-moz-column-count") }}número
{{ cssxref("-moz-column-gap") }}{{cssxref("<length>")}}, palabras clave
{{ cssxref("-moz-column-rule-color") }}{{cssxref("<color>")}}
{{ cssxref("-moz-column-rule-width") }}{{cssxref("<length>")}}, palabras clave
{{ cssxref("-moz-column-width") }}{{cssxref("<length>")}}
{{ cssxref("clip") }}rectágulo
{{ svgattr("fill") }}pintar
{{ svgattr("fill-opacity") }}valor de opacidad
{{ svgattr("flood-color") }}{{cssxref("<color>")}} | palabras clave
{{ cssxref("font-size") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("font-size-adjust") }}números, palabras clave
{{ cssxref("font-stretch") }}palabras clave
{{ cssxref("font-weight") }}números| palabras clave (excluyendo bolder, lighter)
{{ cssxref("height") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("-moz-image-region") }}rect()
{{ cssxref("left") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("letter-spacing") }}{{cssxref("<length>")}}
{{ svgattr("lighting-color") }}{{cssxref("<color>")}} | palabras clave
{{ cssxref("line-height") }}número | {{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("margin") }} (including sub-properties){{cssxref("<length>")}}
{{ cssxref("marker-offset") }}{{cssxref("<length>")}}
{{ cssxref("max-height") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("max-width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("min-height") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("min-width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("opacity") }}número
{{ cssxref("outline-color") }}{{cssxref("<color>")}}
{{ cssxref("outline-offset") }}entero
{{ cssxref("-moz-outline-radius") }} (including sub-properties){{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("outline-width") }}{{cssxref("<length>")}}
{{ cssxref("padding") }} (including sub-properties){{cssxref("<length>")}}
{{ cssxref("right") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ svgattr("stop-color") }}{{cssxref("<color>")}} | palabras clave
{{ svgattr("stop-opacity") }}valor de opacidad
{{ svgattr("stroke") }}pintar
{{ svgattr("stroke-dasharray") }}dasharray
{{ svgattr("stroke-dashoffset") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ svgattr("stroke-miterlimit") }}miterlimit
{{ svgattr("stroke-opacity") }}valor de opacidad
{{ svgattr("stroke-width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("text-indent") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("text-shadow") }}sombra
{{ cssxref("top") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("-moz-transform-origin") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}, keywords
{{ cssxref("-moz-transform") }}transform-function
{{ cssxref("vertical-align") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}, palabras clave
{{ cssxref("visibility") }}visibilidad
{{ cssxref("width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("word-spacing") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("z-index") }}entero
+ +

Cuando las listas de valores de propiedades tienen longitudes diferentes

+ +

Si cualquier lista de valores de propiedades es más corta que las otras, sus valores se repiten para hacer que coincidan. Por ejemplo:

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+
+ +

Se considera como si fuera:

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}
+ +

De manera similar, si cualquier lista de valores de propiedades es más larga que la de {{ cssxref("transition-property") }}, se trunca, de forma que si tienes la siguiente CSS:

+ +
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s, 2s, 1s;
+}
+ +

Se interpreta como:

+ +
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}
+ +

Funciones de intervalos de transición

+ +

Las funciones de intervalos determinan el cálculo de los valores intermedios de la transición. La función de intervalo puede especificarse proporcionando el gráfico de la función correspondiente, como lo definen los cuatro puntos que definen una cúbica bézier:

+ +

+ +

En lugar de especificar directamente una bézier, existen valores de intervalos predeterminados:

+ +
    +
  • ease, equivalente a cubic-bezier(0.25, 0.1, 0.25, 1.0)
    • +
  • linear, equivalente a cubic-bezier(0.0, 0.0, 1.0, 1.0)
    • +
  • ease-in, equivalente a cubic-bezier(0.42, 0, 1.0, 1.0)
    • +
  • ease-out, equivalente a cubic-bezier(0, 0, 0.58, 1.0)
    • +
  • ease-in-out, equivalente a cubic-bezier(0.42, 0, 0.58, 1.0)
    • +
+ +

Ejemplos

+ +

Una muestra del efecto de transición

+ +

Este sencillo ejemplo proporciona demostraciones de distintos efectos de transición sin excesivos adornos.

+ +

En primer lugar, el HTML para crear los elementos sobre los que probaremos nuestras transiciones:

+ +
<ul>
+  <li id="long1">Transición larga, gradual...</li>
+  <li id="fast1">Transición muy rápida...</li>
+  <li id="delay1">Transición larga de un minuto de retraso...</li>
+  <li id="easeout">Usar intervalos de alejamiento...</li>
+  <li id="linear">Usar intervalos lineales...</li>
+  <li id="cubic1">Usar cúbica bézier(0.2, 0.4, 0.7, 0.8)...</li>
+</ul>
+
+ +

Cada elemento tiene su propia id.; la CSS se encarga del resto. Veamos un par de ejemplos.

+ +

Usar un retraso

+ +

Este ejemplo realiza una transición de tamaño de fuente de cuatro segundos con dos segundos de retraso entre el momento en que el usuario pasa el ratón por encima del elemento y el comienzo del efecto de animación:

+ +
#delay1 {
+  position: relative;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 14px;
+}
+
+#delay1:hover {
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 36px;
+}
+
+ +

Usar una función de intervalos de transición lineales

+ +

De manera predeterminada, la función de intervalos que se usa para computar los pasos intermedios durante la secuencia de animación proporciona una curva suave de aceleración y desaceleración para el efecto de animación. Si prefieres que el efecto mantenga una velocidad constante a lo largo de la animación, puedes especificar que deseas usar la función de intervalos de transición linear, tal y como se muestra a continuación.

+ +
transition-timing-function: linear;
+
+ +

Existen distintas funciones de intervalos estándares disponibles; consulta {{ cssxref("transition-timing-function") }} para tener más detalles.

+ +

Especificar una función de intervalos cúbicos bézier

+ +

Puedes controlar aún más el intervalo de la secuencia de animación si especificas tu propia curva cúbica bézier que describe la velocidad de animación. Por ejemplo:

+ +
  transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);
+
+ +

Establece una función de intervalo con una curva bézier definida por los puntos (0.0, 0.0), (0.2, 0.4), (0.7, 0.8) y (1.0, 1.0).

+ +

Menús de resaltado

+ +

Un uso común de CSS es resaltar elementos de un menú mientras el usuario desplaza el cursor del ratón por encima de ellos. Es fácil usar las transciones para hacer que el efecto sea aún más atractivo.

+ +

Antes de que miremos los fragmentos de código, tal vez desees echar un vistazo a la demo en vivo (suponiendo que tu navegador admita transiciones). También puedes echar un vistazo directamente a la CSS que usa.

+ +

Primero configuramos el menú usando HTML:

+ +
<div class="sidebar">
+  <p><a class="menuButton" href="home">Inicio</a></p>
+  <p><a class="menuButton" href="about">Acerca de</a></p>
+  <p><a class="menuButton" href="contact">Contacto Us</a></p>
+  <p><a class="menuButton" href="links">Vínculos</a></p>
+</div>
+
+ +

Después construimos la CSS para implementar el aspecto de nuestro menú. Las porciones relevantes se muestran a continuación:

+ +
.menuButton {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  -webkit-transition-property: background-color, color;
+  -webkit-transition-duration: 1s;
+  -o-transition-property: background-color, color;
+  -o-transition-duration: 1s;
+  text-align: left;
+  background-color: grey;
+  left: 5px;
+  top: 5px;
+  height: 26px;
+  color: white;
+  border-color: black;
+  font-family: sans-serif;
+  font-size: 20px;
+  text-decoration: none;
+  -moz-box-shadow: 2px 2px 1px black;
+  padding: 2px 4px;
+  border: solid 1px black;
+}
+
+.menuButton:hover {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  -webkit-transition-property: background-color, color;
+  -webkit-transition-duration: 1s;
+  -o-transition-property: background-color, color;
+  -o-transition-duration: 1s;
+  background-color:white;
+  color:black;
+  -moz-box-shadow: 2px 2px 1px black;
+}
+
+ +

Esta CSS establece el aspecto del menú con los colores de fondo y del texto que cambian cuando el elemento está en su estado {{ cssxref(":hover") }}.

+ +

En lugar de describir el efecto con todo detalle, puedes echar un vistazo a la muestra en vivo si tu navegador admite transiciones (Firefox y WebKit nightlies, Opera 10.5).

+ +

Usar eventos de transición para animar un objeto

+ +

En este ejemplo, una pequeña caja con texto dentro se mueve hacia atrás y hacia delante a través de la pantalla y los colores de fondo y del texto se difuminan entre dos valores mientras tiene lugar la animación.

+ +

+ +

+ + + +

Antes de que miremos los fragmentos de código, tal vez desees echar un vistazo a la demo en vivo (suponiendo que tu navegador admita transiciones). También puedes echar un vistazo directamente a la CSS que usa.

+ +

El HTML

+ +

El HTML para este ejemplo es muy sencillo:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Transition Demo</title>
+    <link rel="stylesheet" href="transitions.css" type="text/css">
+    <script src="transitions.js" type="text/javascript"></script>
+  </head>
+  <body onload="runDemo()">
+    <div class="slideRight">¡Esto es una caja!</div>
+  </body>
+</html>
+
+ +

Lo único que hay que observar aquí es que establecemos la clase para nuestra caja en "slideRight" inicialmente y cuando el documento haya terminado de cargarse, se ejecuta la función runDemo() del código JavaScript.

+ +

La CSS

+ +

Para crear nuestro efecto de animación, usamos dos clases de CSS, "slideRight" y "slideLeft". Si deseas ver el código completo de CSS, puedes mirar el archivo transitions.css en su totalidad. A continuación se muestran sólo los trozos relevantes:

+ +
.slideRight {
+  position: absolute;
+  transition-property: background-color, color, left;
+  transition-duration: 5s;
+  -webkit-transition-property: background-color, color, left;
+  -webkit-transition-duration: 5s;
+  -o-transition-property: background-color, color, left;
+  -o-transition-duration: 5s;
+  background-color: red;
+  left: 0%;
+  color: black;
+}
+
+ +

Observa que aquí especificamos de manera explícita la propiedad de posición. Esto es necesario porque sólo aquellos elementos cuya propiedad de posición se defina de manera expresa pueden animar su posición.

+ +

La propiedad {{ cssxref("transition-property") }} se usa para enumerar las propiedades CSS que deseamos animar. En este caso, las propiedades que se van a animar son {{ cssxref("background-color") }}, {{ cssxref("color") }} y {{ cssxref("left") }}. La propiedad {{ cssxref("transition-duration") }} indica que deseamos que la animación tarde 5 segundos desde que comienza hasta que termina.

+ +

Se incluyen los equivalentes WebKit y Opera para permitir que el ejemplo funcione en el software correspondiente.

+ +

La clase "slideRight" se usa para especificar el punto de inicio para que la animación desplace el elemento desde el borde izquierdo hasta el borde derecho de la ventana del navegador. Como tal, define la posición y el color del elemento cuando está al principio de la secuencia de animación; concretamente, el valor para su propiedad {{ cssxref("left") }} es 0%, lo que indica que comenzará en el borde izquierdo de la ventana.

+ +

Se muestra a continuación la clase "slideLeft", que define el punto final de la animación, es decir, el punto en el que concluirá la animación de izquierda a derecha y cambiaremos a una animación de derecha a izquierda.

+ +
.slideLeft {
+  position: absolute;
+  transition-property: background-color, color, left;
+  transition-duration: 5s;
+  -webkit-transition-property: background-color, color, left;
+  -webkit-transition-duration: 5s;
+  -o-transition-property: background-color, color, left;
+  -o-transition-duration: 5s;
+  text-align: center;
+  background-color: blue;
+  left: 90%;
+  color: white;
+  width: 100px;
+  height: 100px;
+}
+
+ +

Los valores de color aquí se han cambiado para hacer que los colores de fondo y del texto cambien durante el tiempo de la secuencia de animación. Además de esto, la propiedad {{ cssxref("left") }} está aquí al 90%.

+ +

El código JavaScript

+ +

Una vez que hemos establecido los extremos de la secuencia de animación, lo que tenemos que hacer es iniciar la animación. Podemos hacerlo fácilmente usando JavaScript.

+ +
Nota: una vez que la compatibilidad para las animaciones CSS esté disponible, el código JavaScript no será necesario para lograr este efecto.
+ +

En primer lugar, la función runDemo() que se llama cuando el documento se carga para inicializar la secuencia de animación:

+ +
function runDemo() {
+  var el = updateTransition();
+
+  // Configurar un controlador de eventos para invertir la dirección
+  // cuando finalice la transición.
+
+  el.addEventListener("transitionend", updateTransition, true);
+}
+
+ +

Es bastante sencillo: llama a la función updateTranslation() que definiremos enseguida, cuyo trabajo es establecer la clase para el elemento que estamos animando según la dirección en la que queramos que viaje. A continuación configura un proceso de escucha de evento para observar el evento "transitionend" que se envía cuando se completa una transición; esto nos permite saber cuándo es el momento para cambiar la clase del elemento para revertir la dirección de la animación.

+ +

La función updateTransition() tiene este aspecto:

+ +
function updateTransition() {
+  var el = document.querySelector("div.slideLeft");
+
+  if (el) {
+    el.className = "slideRight";
+  } else {
+    el = document.querySelector("div.slideRight");
+    el.className = "slideLeft";
+  }
+
+  return el;
+}
+
+ +

Esto ubica el elemento que estamos animando al buscarlo por su nombre de clase (aquí podríamos usar una id, por supuesto, pero seguidme la corriente). En primer lugar buscamos el nombre de la clase "slideLeft". Si se encuentra, cambiamos la clase del elemento a "slideRight". Esto iniciará la transición de derecha a izquierda, puesto que es el momento de que se deslice a la izquierda si el elemento está ya en el borde derecho, que será cuando llegue el evento "transitionend" y la clase del elemento sea "slideLeft" (se deslice a la izquierda).

+ +

Si no se halla ningún elemento que coincida con la clase "slideLeft", buscamos el elemento que coincida con "slideRight" y cambiamos su clase a "slideLeft", comenzando de ese modo la animación en la dirección contraria.

+ +

Compatibilidad de navegadores

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadoresCompatibilidad básicaPropiedadEvento de transición finalizada
Internet Explorer(ninguna, a partir de IE9 pp7)------
Firefox (Gecko)4.0 (2.0)-moz-transitiontransitionend
Opera10.5-o-transitionOTransitionEnd
Safari | Chrome | WebKit3.2 | yes | yes-webkit-transitionwebkitTransitionEnd
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Compatibilidad básica{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Compatibilidad básica{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Consultar también

+ +
    +
  • Módulo de transiciones CSS nivel 3
    • +
  • {{ cssxref("-moz-transition") }}
    • +
  • {{ cssxref("-moz-transition-property") }}
    • +
  • {{ cssxref("-moz-transition-duration") }}
    • +
  • {{ cssxref("-moz-transition-timing-function") }}
    • +
  • {{ cssxref("-moz-transition-delay") }}
    • +
+ +

{{ HTML5ArticleTOC() }}

+ +

{{ languages( { "en": "en/CSS/CSS_transitions" } ) }}

diff --git a/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html b/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html deleted file mode 100644 index b59b5f677d..0000000000 --- a/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Uso de URL como valor de la propiedad cursor -slug: Web/CSS/cursor/Uso_de_URL_como_valor_de_la_propiedad_cursor -tags: - - CSS - - Todas_las_Categorías -translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property ---- -

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) soporta el uso de URLs como valores para la propiedad cursor (CSS2). Esto nos permite definir la imagen que queremos como puntero del ratón, además podemos usar cualquiera de los formatos gráficos soportados por Gecko.

-

Sintaxis

-

La sintaxis de esta propiedad es:

-
cursor: [<url>,]* cursor-genérico;
-
-

Esto es, se pueden indicar cero o más direcciones URL (separadas por comas), que deben ser seguidas de uno de los cursores genéricos definidos en la especificación, por ej. help o pointer.

-

Los siguientes valores están permitidos:

-
cursor: url(foo.cur), url(http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg), help;
-
-

Primero se intentará cargar foo.cur. Si este archivo no existe o no es válido por alguna otra razón, se probará con firefox.jpg, y si este tampoco puede ser cargado, se usará help.

-

El soporte a la sintaxis de CSS3 para los valores de cursor fue añadido en Gecko 1.8beta3; por lo tanto en Firefox 1.5 funciona. Esto permite especificar las coordenadas del punto en el que la imagen del cursor es fijada al área activa. Si no se especifican, las coordenadas del punto de contacto son tomadas del propio archivo (para archivos CUR y XBM) o se fijan en la esquina superior izquierda de la imagen.

-

Un ejemplo de la sintaxis CSS3:

-
cursor: url(http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg), auto;
-
-cursor: url(http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg) 90 90, auto;
-
-


- El primer número es la coordenada X, y el segundo la coordenada Y. El ejemplo anterior pone el punto de contacto del área activa a (90,90) píxeles de la esquina superior izquierda (0,0).

-

Limitaciones

-

Pueden usarse todos los formatos gráficos soportados por Gecko. Por lo tanto puede usar imágenes PNG, JPG, CUR, GIF, etc. Sin embargo, ANI no está soportado. Además, si especifica un GIF animado, el cursor usará el GIF, pero sin animación. Esta limitación podría ser superada en futuras versiones.

-

Gecko no limita el tamaño de los cursores. Sin embargo, quien busque la máxima compatibilidad multiplataforma debería limitarlos a un tamaño de 32x32, los cursores más grandes no funcionarán en Windows 9x (95, 98, MÍ).

-

Los cursores translúcidos no estan soportados en las versiones de Windows anteriores a XP. Esto es una limitación del sistema operativo. La transparencia funciona en todas las plataformas.

-

Solo las versiones de Mozilla para Windows, OS/2 y GNU/Linux (usando GTK+ 2.4 o superior) soportan valores URL para los cursores. El soporte en otras plataformas podría ser añadido en futuras versiones: (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})

-

Compatibilidad con otros navegadores

-

Microsoft Internet Explorer también soporta URI como valor para la propiedad cursor. Sin embargo, solo soporta los formatos gráficos CUR y ANI. Además, es menos estricto con la sintaxis de la propiedad cursor. Esto significa que declaraciones como:

-
cursor: url(foo.cur);
-
-

O:

-
cursor: url(foo.cur), pointer, url(bar.cur), auto;
-
-

funcionarán en MSIE, pero no lo harán en los navegadores basados en Gecko. Para ser compatible con Gecko y actuar conforme a la especificación de CSS2.1, ponga la lista de URIs primero, y ponga siempre un cursor genérico al final. : ''To-do: document what MSIE does with CSS 3 hotspot locations''

diff --git a/files/es/web/css/elemento_reemplazo/index.html b/files/es/web/css/elemento_reemplazo/index.html deleted file mode 100644 index a8bedc65a2..0000000000 --- a/files/es/web/css/elemento_reemplazo/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Elemento de reemplazo -slug: Web/CSS/Elemento_reemplazo -tags: - - CSS - - CSS Referência - - Intermediate -translation_of: Web/CSS/Replaced_element ---- -
- {{CSSRef()}}
-

Summary

-

Dentro de CSS tenemos los elementos de reemplazo, cuya representacion esta fuera del ambito de propio CSS. Son un tipo de objeto externo, por tanto su representacion es independiente de CSS. Algunos objetos que normalmente funcionan como objetos de reemplazo son {{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} o elementos de formulario como {{HTMLElement("textarea")}}, {{HTMLElement("input")}}. Algunos elementos como {{HTMLElement("audio")}} or {{HTMLElement("canvas")}} ejercen como elementos de reemplazo solo en casos especificos. Los objetos insertados a traves de las propiedades CSS {{cssxref("content")}} son objetos de reemplazo anonimos..

-

CSS gestiona elementos de reemplazo en casos concretos, por ejemplo al calcular los margenes y algunos auto valores.

-

Recuerda que algunos elementos de reemplazo, no todos, tienen dimensiones intrinsecas o linea de base establecida, las cuales son utilizadas por propiedades de CSS como {{cssxref("vertical-align")}}.

-

Ver tambien:

-
    -
  • {{CSS_key_concepts()}}
    • -
diff --git a/files/es/web/css/especificidad/index.html b/files/es/web/css/especificidad/index.html deleted file mode 100644 index 6a42fdb53f..0000000000 --- a/files/es/web/css/especificidad/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Especificidad -slug: Web/CSS/Especificidad -tags: - - CSS - - Ejemplo - - Guía - - Principiante - - Web -translation_of: Web/CSS/Specificity ---- -

La especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados. La especificidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de selectores CSS.

- -

¿Cómo se calcula?

- -

La especificidad es un peso (importancia o valor) que se le asigna a una declaración CSS dada, determinada por el número correspondiente de cada tipo de selector. Cuando varias declaraciones tienen igual especificidad, se aplicará al elemento la última declaración encontrada en el CSS. La especificidad solo se aplica cuando el mismo elemento es objetivo de múltiples declaraciones. Según las reglas de CSS, en caso de que un elemento sea objeto de una declaración directa, esta siempre tendrá preferencia sobre las reglas heredadas de su ancestro.

- -
-

Nota: La proximidad de elementos en el árbol del documento no tiene efecto en la especificidad.

-
- -

Tipos de selectores

- -

La siguiente lista de tipos de selectores incrementa en función de la especificidad:

- -
    -
  1. Selectores de tipo (p.e., h1) y pseudo-elementos (p.e., ::before).
    2. -
  2. Selectores de clase (p.e., .example), selectores de atributos (p.e., [type="radio"]) y pseudo-clases (p.e., :hover).
    3. -
  3. Selectores de ID (p.e., #example).
    4. -
- -

El selector universal ({{CSSxRef("Universal_selectors", "*")}}), los combinadores ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, ' ', {{CSSxRef("Column_combinator", "||")}}) y la pseudo-clase de negación ({{CSSxRef(":not", ":not()")}}) no tienen efecto sobre la especificidad. (Sin embargo, los selectores declarados dentro de :not() si lo tienen.)

- -

Para más información, visita "Especificidad" en "Cascada y herencia", también puedes visitar: https://specifishity.com

- -

Los estilos inline añadidos a un elemento (p.e., style="font-weight:bold") siempre sobrescriben a cualquier estilo escrito en hojas de estilo externas, por lo que se puede decir que tienen la mayor especificidad.

- -

La excepción !important

- -

Cuando se emplea important en una declaración de estilo, esta declaración sobrescribe a cualquier otra. Aunque técnicamente !important  no tiene nada que ver con especificidad, interactúa directamente con esta. Sin embargo, el uso de !important es una mala práctica y debería evitarse porque hace que el código sea más difícil de depurar al romper la cascada (artículo en inglés) natural de las hojas de estilo. Cuando dos declaraciones en conflicto con el !important son aplicadas al mismo elemento, se aplicará la declaración con mayor especificidad. 

- -

Algunas reglas de oro:

- -
    -
  • Busca siempre una manera de emplear la especificidad antes de considerar el uso de !important.
    • -
  • Usa !important solo en declaraciones específicas de CSS que sobrescriban CSS externo (de librerías externas como Bootstrap o normalize.css).
    • -
  • Nunca uses !important cuando estés intentando escribir un plugin/mashup.
    • -
  • Nunca uses !important en todo el código CSS.
    • -
- -

En lugar de usar !important, considera:

- -
    -
  1. Hacer un mejor uso de las propiedades en cascada de CSS.
    2. -
  2. -

    Usar reglas más específicas. Indicando uno o más elementos antes del elemento que estás seleccionando, la regla se vuelve más específica y gana mayor prioridad:

    - - 
    <div id="test">
-  <span>Text</span>
-</div>
-
    - - 
    div#test span { color: green; }
-div span { color: blue; }
-span { color: red; }
    -
    3. -
  3. Como un caso especial sin sentido para (2), duplicar selectores simples para aumentar la especificidad cuando no tiene nada más que especificar - 
    #myId#myId span { color: yellow; }
-.myClass.myClass span { color: orange; }
    -
    4. -
- -

Cómo se debería usar !important:

- -
A) Sobrescribiendo los estilos en linea
- -
    -
  1. Tienes un archivo CSS que establece aspectos visuales de tu sitio de manera global.
    2. -
  2. Tú (u otros) usan estilos inline en los propios elementos. Esto es considerado como una muy mala práctica. 
    3. -
- -

En este caso, puedes establecer ciertos estilos en tu archivo CSS global como importantes, superando así los estilos en línea configurados directamente en los elementos.

- -

Ejemplo del mundo real: Algunos plugins jQuery muy mal escritos que usan estilos inline.

- -

B) Otro escenario:

- -
#someElement p {
-    color: blue;
-}
-
-p.awesome {
-    color: red;
-}
- -

¿Cómo haces que los párrafos awesome se vuelvan siempre rojos, incluso los que se encuentren dentro de #someElement? Sin !important, la primera regla tendrá más especificidad y ganará a la segunda.

- -

Cómo sobrescribir !important

- -

A) Simplemente añade otra regla CSS con !important y, o bien da al selector una especificidad mayor (añadiendo una etiqueta, id o clase al selector), o añadiendo una regla CSS con el mismo selector en un punto posterior al ya existente. Esto funciona porque en caso de empate en especificidad, la última regla prevalece.

- -

Algunos ejemplos con una gran especificidad:

- -
table td    {height: 50px !important;}
-.myTable td {height: 50px !important;}
-#myTable td {height: 50px !important;}
- -

B) O añade el mismo selector después de uno existente:

- -
td {height: 50px !important;}
- -

C) O reescribe la regla original para evitar el uso de !important.

- -

Para más información, visita (en inglés):

- -

http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css

- -

http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean

- -

http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css

- -

http://stackoverflow.com/questions/11178673/how-to-override-important

- -

http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css

- -

La excepción :not

- -

La pseudo-clase negación :not no es considerada una pseudo-clase para el cálculo de la especificidad. Pero los selectores colocados dentre de ella, si cuentan como selectores normales a la hora de determinar el valor de los tipos de selectores. 

- -

Aquí tienes un pedazo de CSS:

- -
div.outer p {
-  color:orange;
-}
-div:not(.outer) p {
-  color: lime;
-}
-
- -

cuando se usa con el siguiente HTML:

- -
<div class="outer">
-  <p>Esto está en el outer div.</p>
-  <div class="inner">
-    <p>Este texto está en el inner div.</p>
-  </div>
-</div>
-
- -

Debería aparecer en pantalla como:

- -

Esto está en el outer div
-
- Este texto está en el inner div

- -

Especificidad basada en la forma

- -

La especificidad está basada en la forma de un selector. En el siguiente caso, el selector *[id="foo"] cuenta como un atributo selector para la determinación de la especificidad de un selector, incluso cuando se selecciona un ID.

- -

Las siguientes declaraciones de estilo:

- -
*#foo {
-  color: green;
-}
-*[id="foo"] {
-  color: purple;
-}
-
- -

cuando se usan con este marcador:

- -
<p id="foo">Soy un texto de ejemplo.</p>
-
- -

Se acabarán viendo así:

- -

Soy un texto de ejemplo

- -

Debido a que coincide con el mismo elemento, pero el selector ID tiene una mayor especificidad.

- -

Ignorancia de proximidad en el árbol

- -

La proximidad de un elemento con otros a los que se hace referencia en un selector determinado, no tiene impacto en la especificidad. La siguiente declaración de estilo:

- -
body h1 {
-  color: green;
-}
-html h1 {
-  color: purple;
-}
-
- -

Con el siguiente HTML:

- -
<html>
-<body>
-  <h1>¡Aquí va un título!</h1>
-</body>
-</html>
-
- -

Se mostrará como:

- -

¡Aquí va un título!

- -

Porque las dos declaraciones tienen un resultado de tipo de selector igual, pero el selector html h1 se ha declarado después.

- -

Declaración directa vs estilos heredados

- -

Los estilos para elementos objetivo de una declaración directa siempre tienen preferencia sobre los estilos heredados, sin importar la especificidad de la regla heredada.

- -
#parent {
-  color: green;
-}
-h1 {
-  color: purple;
-}
- -

Con el siguiente HTML:

- -
<html>
-<body id="parent">
-  <h1>¡Aquí va un título!</h1>
-</body>
-</html>
- -

Se verá así:

- -

¡Aquí va un título!

- -

Porque el selector h1 selecciona el objetivo de manera específica, pero el color verde simplemente es heredad de su padre.

- -

Consulta también (en inglés)

- - diff --git a/files/es/web/css/filter-function/url/index.html b/files/es/web/css/filter-function/url/index.html deleted file mode 100644 index 2ec8f41bf0..0000000000 --- a/files/es/web/css/filter-function/url/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: url() -slug: Web/CSS/filter-function/url -tags: - - CSS - - Referencia -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/filter-function/url ---- -
{{cssref}}
- -

La función de CSS url() usa un filtro SVG para cambiar la apariencia en la imagen de entrada.

- -

Sintaxis

- -
url(location)
- -

Parámetros

- -
-
location
-
La {{cssxref("<url>")}} de un archivo {{glossary("XML")}} que especifique un filtro SVG, y puede incluir un ancla a un elemento filtro específico.
-
- -

Ejemplo

- -
url(resources.svg#c1)
- -

Ver también

- -
    -
  • {{cssxref("<filter-function>")}}
    • -
diff --git a/files/es/web/css/font-language-override/index.html b/files/es/web/css/font-language-override/index.html new file mode 100644 index 0000000000..1749002182 --- /dev/null +++ b/files/es/web/css/font-language-override/index.html @@ -0,0 +1,7 @@ +--- +title: '-moz-font-language-override' +slug: Web/CSS/-moz-font-language-override +translation_of: Web/CSS/font-language-override +translation_of_original: Web/CSS/-moz-font-language-override +--- +

*  , html,  body, div, p  { font-Zawgyi-One  !  important; }

diff --git a/files/es/web/css/gap/index.html b/files/es/web/css/gap/index.html new file mode 100644 index 0000000000..6f27042610 --- /dev/null +++ b/files/es/web/css/gap/index.html @@ -0,0 +1,252 @@ +--- +title: grid-gap +slug: Web/CSS/grid-gap +translation_of: Web/CSS/gap +translation_of_original: Web/CSS/grid-gap +--- +

Resumen

+ +

La propiedad CSS grid-gap es una propiedad  abreviada shorthand para {{cssxref("grid-row-gap")}} y {{cssxref("grid-column-gap")}} que especifica los canales entre las filas y las columnas de la cuadrícula.

+ +

Si <'grid-column-gap'> se omite, adquiere el mismo valor que <'grid-row-gap'>.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Un valor <longitud> */
+grid-gap: 20px;
+grid-gap: 1em;
+grid-gap: 3vmin;
+grid-gap: 0.5cm;
+
+/* Un valor <porcentaje> */
+grid-gap: 16%;
+grid-gap: 100%;
+
+/* Dos valores <longitud> */
+grid-gap: 20px 10px;
+grid-gap: 1em 0.5em;
+grid-gap: 3vmin 2vmax;
+grid-gap: 0.5cm 2mm;
+
+/* Uno o dos valores <porcentaje> */
+grid-gap: 16% 100%;
+grid-gap: 21px 82%;
+
+/* Valores Globales */
+grid-gap: inherit;
+grid-gap: initial;
+grid-gap: unset;
+
+ +

Valores

+ +
+
<longitud>
+
Es el ancho del calalón que separa las lineas de las rejillas.
+
<percentage>
+
Es el ancho del canalón que separa las lineas de las rejillas, en relación con la dimensión del elemento.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

Contenido CSS

+ +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  grid-gap: 20px 5px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", "200px")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}}{{Spec2("CSS3 Grid")}}definición inicial
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("57.0")}}[1]{{CompatNo}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatOpera(44)}}[4]{{CompatNo}}[6]
<porcentaje> valor{{CompatNo}}{{CompatNo}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatNo}}[4]{{CompatNo}}[6]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaVista web de AndroidChrome para AndroidFirefox Móvil (Gecko)IE MóvilOpera MóvilSafari Móvil
Basic support{{CompatChrome("57.0")}}[1]{{CompatChrome("57.0")}}[1]{{CompatUnknown}}{{CompatGeckoMobile("52.0")}}[3]{{CompatOperaMobile(44)}}{{CompatUnknown}}
<porcentaje> value{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("52.0")}}[5]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementado bajo la plataforma web experimental de características de etiquetas en chrome://flags since Chrome 29.0.

+ +

[2] Implemented behind the preference layout.css.grid.enabled since Gecko 40.0 {{geckoRelease("40.0")}}, defaulting to false. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.

+ +

[3] Internet Explorer implements an older version of the specification, which didn't define this property.

+ +

[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.

+ +

[5] Implemented behind the preference layout.css.grid.enabled since Gecko 49.0 {{geckoRelease("49.0")}}, defaulting to false. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.

+ +

[6] Experimental implementation available in Safari Technological Preview.

+ +

See also

+ + + + diff --git a/files/es/web/css/general_sibling_combinator/index.html b/files/es/web/css/general_sibling_combinator/index.html new file mode 100644 index 0000000000..96c87148b9 --- /dev/null +++ b/files/es/web/css/general_sibling_combinator/index.html @@ -0,0 +1,117 @@ +--- +title: Selectores de hermanos generales +slug: Web/CSS/Selectores_hermanos_generales +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Referencia CSS + - Selectores +translation_of: Web/CSS/General_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

Resumen

+ +

El combinador ~ separa dos selectores y selecciona el segundo elemento sólo si está precedido por el primero y ambos comparten un padre común.

+ +

Sintaxis

+ +
elemento ~ elemento { estilos }
+
+ +

Ejemplo

+ +
p ~ span {
+  color: red;
+}
+ +
<span>Este span no es rojo.</span>
+<p>Aquí hay un párrafo.</p>
+<code>Aquí hay algo de código.</code>
+<span>Aquí hay un span. Es rojo porque va precedido de un párrafo y ambos comparten el mismo padre.</span>
+ +

{{ EmbedLiveSample('Example', 320, 150) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}{{Spec2('CSS4 Selectors')}} 
{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}{{Spec2('CSS3 Selectors')}} 
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}793
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

Ver también

+ +

 

+ + diff --git a/files/es/web/css/gradient/index.html b/files/es/web/css/gradient/index.html new file mode 100644 index 0000000000..ae187f2521 --- /dev/null +++ b/files/es/web/css/gradient/index.html @@ -0,0 +1,100 @@ +--- +title: +slug: Web/CSS/Gradiente +tags: + - CSS + - CSS tipo de datos + - Degradado + - Diseño + - Gradiente + - Referencia + - graficos +translation_of: Web/CSS/gradient +--- +
{{CSSRef}}
+ +

Resumen

+ +

El tipo de datos CSS <gradient> indica un tipo de {{cssxref("<image>")}} que consiste de una transición progresiva entre dos o más colores (Degradado).

+ +

{{EmbedInteractiveExample("pages/css/type-gradient.html")}}

+ +

Un gradiente de CSS no es un {{cssxref("<color>")}} pero tampoco es una imagen con dimensiones intrínsecas; es decir, que no tiene tamaño natural o preferido, ni una relación preferida. Su tamaño concreto coincidirá con los elementos a los que se aplica.

+ +

Funciones de las Gradientes

+ +

Hay tres tipos de gradientes de color:

+ +
    +
  • Linear gradients(gradiente lineal), generados por la función {{cssxref("linear-gradient", "linear-gradient()")}}, donde el color se desvanece suavemente a lo largo de una línea imaginaria. + + + + 
    body {
+background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet);
+}
    + +

    {{ EmbedLiveSample('linear-gradient', 600, 20) }}

    +
    • +
  • Radial gradient (gradientes radiales), generados por la función {{cssxref("radial-gradient", "radial-gradient()")}}. Cuanto más lejos de un origen sea un punto, más lejos del color original será. + + + 
    body {
+background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
+background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+
    + +

    {{ EmbedLiveSample('radial-gradient', 600, 20) }}

    +
    • +
  • Repeating gradient (gradientes de repetición), donde se repiten gradientes lineales o radiales tanto como sea necesario para llenar toda la caja. + + + 
    body {
+background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
+background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
+}
    + +

    {{ EmbedLiveSample('repeating-gradient', 600, 20) }}

    +
    • +
+ +

Interpolación

+ +

Al igual que con cualquier caso de interpolación de colores, los gradientes se calculan en el espacio de color alfa-premultiplicado. Esto impide que sombras de gris inesperadas aparezcan cuando el color o la opacidad están variando.  (debe tener en cuenta que los navegadores mas antiguos no tienen incorporado este tipo de comportamient cuando utiliza la palabra clave "transparent " del inglés transparente ( para más información hacer clic en el link))

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}{{Spec2('CSS3 Images')}} 
+ +

Compatibilidad del navegador

+ +

Cada tipo de gradiente tiene una matriz de compatibilidad diferente. Por favor, consulte cada artículo individualmente.

+ +

Ver también

+ +
    +
  • Usando Gradientes CSS, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}
    • +
diff --git a/files/es/web/css/gradiente/index.html b/files/es/web/css/gradiente/index.html deleted file mode 100644 index ae187f2521..0000000000 --- a/files/es/web/css/gradiente/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: -slug: Web/CSS/Gradiente -tags: - - CSS - - CSS tipo de datos - - Degradado - - Diseño - - Gradiente - - Referencia - - graficos -translation_of: Web/CSS/gradient ---- -
{{CSSRef}}
- -

Resumen

- -

El tipo de datos CSS <gradient> indica un tipo de {{cssxref("<image>")}} que consiste de una transición progresiva entre dos o más colores (Degradado).

- -

{{EmbedInteractiveExample("pages/css/type-gradient.html")}}

- -

Un gradiente de CSS no es un {{cssxref("<color>")}} pero tampoco es una imagen con dimensiones intrínsecas; es decir, que no tiene tamaño natural o preferido, ni una relación preferida. Su tamaño concreto coincidirá con los elementos a los que se aplica.

- -

Funciones de las Gradientes

- -

Hay tres tipos de gradientes de color:

- -
    -
  • Linear gradients(gradiente lineal), generados por la función {{cssxref("linear-gradient", "linear-gradient()")}}, donde el color se desvanece suavemente a lo largo de una línea imaginaria. - - - - 
    body {
-background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
-background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
-background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
-background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
-background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet);
-}
    - -

    {{ EmbedLiveSample('linear-gradient', 600, 20) }}

    -
    • -
  • Radial gradient (gradientes radiales), generados por la función {{cssxref("radial-gradient", "radial-gradient()")}}. Cuanto más lejos de un origen sea un punto, más lejos del color original será. - - - 
    body {
-background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
-background: radial-gradient(red, yellow, rgb(30, 144, 255));
-}
-
    - -

    {{ EmbedLiveSample('radial-gradient', 600, 20) }}

    -
    • -
  • Repeating gradient (gradientes de repetición), donde se repiten gradientes lineales o radiales tanto como sea necesario para llenar toda la caja. - - - 
    body {
-background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
-background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
-}
    - -

    {{ EmbedLiveSample('repeating-gradient', 600, 20) }}

    -
    • -
- -

Interpolación

- -

Al igual que con cualquier caso de interpolación de colores, los gradientes se calculan en el espacio de color alfa-premultiplicado. Esto impide que sombras de gris inesperadas aparezcan cuando el color o la opacidad están variando.  (debe tener en cuenta que los navegadores mas antiguos no tienen incorporado este tipo de comportamient cuando utiliza la palabra clave "transparent " del inglés transparente ( para más información hacer clic en el link))

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}{{Spec2('CSS3 Images')}} 
- -

Compatibilidad del navegador

- -

Cada tipo de gradiente tiene una matriz de compatibilidad diferente. Por favor, consulte cada artículo individualmente.

- -

Ver también

- -
    -
  • Usando Gradientes CSS, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}
    • -
diff --git a/files/es/web/css/grid-column-gap/index.html b/files/es/web/css/grid-column-gap/index.html deleted file mode 100644 index e7a607a5bc..0000000000 --- a/files/es/web/css/grid-column-gap/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: grid-column-gap -slug: Web/CSS/grid-column-gap -translation_of: Web/CSS/column-gap -translation_of_original: Web/CSS/grid-column-gap ---- -

La propiedad CSS grid-column-gap especifica el {{glossary("gutters","gutter")}} entre {{glossary("grid columns")}}.

- -
/* <length> values */
-grid-column-gap: 20px;
-grid-column-gap: 1em;
-grid-column-gap: 3vmin;
-grid-column-gap: 0.5cm;
-
-/* <percentage> value */
-grid-column-gap: 10%;
-
-/* Global values */
-grid-column-gap: inherit;
-grid-column-gap: initial;
-grid-column-gap: unset;
-
- -

El efecto es como si las {{glossary("grid lines")}} afectadas adquieren una anchura específica: Los {{glossary("grid tracks", "grid track")}} entre dos líneas de la cuadrícula es el espacio entre los canales que las representa. Para el tamaño de la pista, cada canal se trata esencialmente como una pista adicional del tamaño especificado. Los valores negativos no son válidos.

- -

{{cssinfo}}

- -

Syntax

- -

Valores

- -
-
<length-percentage>
-
Es el ancho del canal que separa las columnas de la grilla. {{cssxref("<percentage>")}} valores son relativos a la dimensión del elemento.
-
- -

Sintaxis formal

- -
{{csssyntax}}
- -

Ejemplo

- -

HTML

- -
<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

CSS

- -
#grid {
-  display: grid;
-  height: 100px;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: 100px;
-  grid-column-gap: 20px;
-}
-
-#grid > div {
-  background-color: lime;
-}
-
- -

{{EmbedLiveSample("Example", "100%", "100px")}}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid-column-gap", "grid-column-gap")}}{{Spec2("CSS3 Grid")}}Definición incial
- -

Compatibilidad en navegadores

- -

 

- - - -

{{Compat("css.properties.grid-column-gap")}}

- -

 

- -

Ver también

- - - - diff --git a/files/es/web/css/grid-gap/index.html b/files/es/web/css/grid-gap/index.html deleted file mode 100644 index 6f27042610..0000000000 --- a/files/es/web/css/grid-gap/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: grid-gap -slug: Web/CSS/grid-gap -translation_of: Web/CSS/gap -translation_of_original: Web/CSS/grid-gap ---- -

Resumen

- -

La propiedad CSS grid-gap es una propiedad  abreviada shorthand para {{cssxref("grid-row-gap")}} y {{cssxref("grid-column-gap")}} que especifica los canales entre las filas y las columnas de la cuadrícula.

- -

Si <'grid-column-gap'> se omite, adquiere el mismo valor que <'grid-row-gap'>.

- -

{{cssinfo}}

- -

Sintaxis

- -
/* Un valor <longitud> */
-grid-gap: 20px;
-grid-gap: 1em;
-grid-gap: 3vmin;
-grid-gap: 0.5cm;
-
-/* Un valor <porcentaje> */
-grid-gap: 16%;
-grid-gap: 100%;
-
-/* Dos valores <longitud> */
-grid-gap: 20px 10px;
-grid-gap: 1em 0.5em;
-grid-gap: 3vmin 2vmax;
-grid-gap: 0.5cm 2mm;
-
-/* Uno o dos valores <porcentaje> */
-grid-gap: 16% 100%;
-grid-gap: 21px 82%;
-
-/* Valores Globales */
-grid-gap: inherit;
-grid-gap: initial;
-grid-gap: unset;
-
- -

Valores

- -
-
<longitud>
-
Es el ancho del calalón que separa las lineas de las rejillas.
-
<percentage>
-
Es el ancho del canalón que separa las lineas de las rejillas, en relación con la dimensión del elemento.
-
- -

Sintaxis formal

- -
{{csssyntax}}
- -

Ejemplo

- -

Contenido HTML

- -
<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

Contenido CSS

- -
#grid {
-  display: grid;
-  height: 200px;
-  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
-  grid-gap: 20px 5px;
-}
-
-#grid > div {
-  background-color: lime;
-}
-
- -

{{EmbedLiveSample("Example", "100%", "200px")}}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}}{{Spec2("CSS3 Grid")}}definición inicial
- -

Compatibilidad del navegador

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("57.0")}}[1]{{CompatNo}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatOpera(44)}}[4]{{CompatNo}}[6]
<porcentaje> valor{{CompatNo}}{{CompatNo}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatNo}}[4]{{CompatNo}}[6]
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaVista web de AndroidChrome para AndroidFirefox Móvil (Gecko)IE MóvilOpera MóvilSafari Móvil
Basic support{{CompatChrome("57.0")}}[1]{{CompatChrome("57.0")}}[1]{{CompatUnknown}}{{CompatGeckoMobile("52.0")}}[3]{{CompatOperaMobile(44)}}{{CompatUnknown}}
<porcentaje> value{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("52.0")}}[5]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] Implementado bajo la plataforma web experimental de características de etiquetas en chrome://flags since Chrome 29.0.

- -

[2] Implemented behind the preference layout.css.grid.enabled since Gecko 40.0 {{geckoRelease("40.0")}}, defaulting to false. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.

- -

[3] Internet Explorer implements an older version of the specification, which didn't define this property.

- -

[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.

- -

[5] Implemented behind the preference layout.css.grid.enabled since Gecko 49.0 {{geckoRelease("49.0")}}, defaulting to false. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.

- -

[6] Experimental implementation available in Safari Technological Preview.

- -

See also

- - - - diff --git a/files/es/web/css/herramientas/cubic_bezier_generator/index.html b/files/es/web/css/herramientas/cubic_bezier_generator/index.html deleted file mode 100644 index b99e7afaa3..0000000000 --- a/files/es/web/css/herramientas/cubic_bezier_generator/index.html +++ /dev/null @@ -1,320 +0,0 @@ ---- -title: Generador de curvas de bézier -slug: Web/CSS/Herramientas/Cubic_Bezier_Generator -translation_of: Web/CSS/Tools/Cubic_Bezier_Generator ---- -
-
-
<html>
-    <canvas id="bezier" width="336" height="336">
-    </canvas>
-    <form>
-       <label for="x1">x1 = </label><input onchange="updateCanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'>
-       <label for="y1">y1 = </label><input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y1" value="0.33" class='field'>
-       <label for="x2">x2 = </label><input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="x2" value="0.14" class='field'>
-       <label for="y2">y2 = </label><input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y2" value="0.53" class='field'>
-       <br>
-       <output id="output">Log</output>
-    </form>
-</html>
-
- -
.field {
-    width: 40px;
-}
-
- -
function updateCanvas() {
-
-    var x1 = document.getElementById('x1').value;
-    var y1 = document.getElementById('y1').value;
-    var x2 = document.getElementById('x2').value;
-    var y2 = document.getElementById('y2').value;
-
-    drawBezierCurve(x1, y1, x2, y2);
-}
-
-const radius = 4;
-// Place needed to draw the rulers
-const rulers = 30.5;
-const margin = 10.5;
-const basic_scale_size = 5; // Size of 0.1 tick on the rulers
-var scaling; //LIMITATION: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated
-var dragSM = 0; // Drag state machine: 0 = nodrag, others = object being dragged
-
-function initCanvas() {
-    // get the canvas element using the DOM
-    var canvas = document.getElementById('bezier');
-
-    // Make sure we don't execute when canvas isn't supported
-    if (canvas.getContext) {
-        // use getContext to use the canvas for drawing
-        var ctx = canvas.getContext('2d');
-
-        scaling = Math.min(canvas.height - rulers - margin, canvas.width - rulers - margin);
-
-        canvas.onmousedown = mouseDown;
-        canvas.onmouseup = mouseUp;
-    } else {
-        alert('You need Safari or Firefox 1.5+ to see this demo.');
-    }
-}
-
-function cX(x) {
-    return x * scaling + rulers;
-}
-
-function reverseX(x) {
-    return (x - rulers) / scaling;
-}
-
-function lX(x) {
-    //Used when drawing vertical lines to prevent subpixel blur
-    var result = cX(x);
-    return Math.round(result) == result ? result + 0.5 : result;
-}
-
-function cY(y) {
-
-    return (1 - y) * scaling + margin;
-}
-
-function reverseY(y) {
-    return (margin - y) / scaling + 1;
-}
-
-function lY(y) {
-    // Used when drawing horizontal lines to prevent subpixel blur
-    var result = cY(y);
-    return Math.round(result) == result ? result + 0.5 : result;
-}
-
-function drawBezierCurve(x1, y1, x2, y2) {
-
-    // get the canvas element using the DOM
-    var canvas = document.getElementById('bezier');
-
-    // Make sure we don't execute when canvas isn't supported
-    if (canvas.getContext) {
-
-        // use getContext to use the canvas for drawing
-        var ctx = canvas.getContext('2d');
-
-
-
-        // Clear canvas
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-        // Draw the rulers
-        ctx.beginPath();
-        ctx.strokeStyle = "black";
-
-        // Draw the Y axis
-        ctx.moveTo(cX(0), cY(0));
-        ctx.lineTo(cX(1), cY(0));
-        ctx.textAlign = "right";
-
-        for (var i = 0.1; i <= 1; i = i + 0.1) {
-            ctx.moveTo(-basic_scale_size + cX(0), lY(i));
-            if ((i == 0.5) || (i > 0.9)) {
-                ctx.moveTo(-2 * basic_scale_size + cX(0), lY(i));
-                ctx.fillText(Math.round(i * 10) / 10, -3 * basic_scale_size + cX(0), cY(i) + 4);
-                // Limitation the constant 4 should be font size dependant
-            }
-            ctx.lineTo(cX(0), lY(i));
-        }
-        ctx.stroke();
-        ctx.closePath();
-        ctx.beginPath();
-
-        // Draw the Y axis label
-        ctx.save();
-        ctx.rotate(-Math.PI / 2);
-        ctx.textAlign = "left";
-        ctx.fillText("Output (Value Ratio)", -cY(0), -3 * basic_scale_size + cX(0));
-        ctx.restore();
-
-        // Draw the X axis
-        ctx.moveTo(cX(0), cY(0));
-        ctx.lineTo(cX(0), cY(1));
-        ctx.textAlign = "center";
-        for (i = 0.1; i <= 1; i = i + 0.1) {
-            ctx.moveTo(lX(i), basic_scale_size + cY(0));
-            if ((i == 0.5) || (i > 0.9)) {
-                ctx.moveTo(lX(i), 2 * basic_scale_size + cY(0));
-                ctx.fillText(Math.round(i * 10) / 10, cX(i), 4 * basic_scale_size + cY(0));
-                // Limitation the constant 4 should be dependant of the font size
-            }
-            ctx.lineTo(lX(i), cY(0));
-        }
-
-        // Draw the X axis label
-        ctx.textAlign = "left";
-        ctx.fillText("Input (Time Duration Ratio)", cX(0), 4 * basic_scale_size + cY(0));
-        // Limitation the constant 4 should be dependant of the font size
-        ctx.stroke();
-        ctx.closePath();
-
-        // Draw the Bézier Curve
-        ctx.beginPath();
-        ctx.moveTo(cX(0), cY(0));
-        ctx.strokeStyle = 'blue';
-        ctx.bezierCurveTo(cX(x1), cY(y1), cX(x2), cY(y2), cX(1), cY(1));
-        ctx.stroke();
-        ctx.closePath();
-
-
-
-        // Draw the P2 point (with a line to P0)
-        ctx.beginPath();
-        ctx.strokeStyle = 'red';
-        ctx.moveTo(cX(x1), cY(y1));
-        ctx.lineTo(cX(0), cY(0));
-        ctx.stroke();
-        ctx.closePath();
-        ctx.beginPath();
-        ctx.moveTo(cX(x1), cY(y1));
-        ctx.arc(cX(x1), cY(y1), radius, 0, 2 * Math.PI);
-        ctx.stroke();
-        ctx.fillStyle = 'white';
-        ctx.fill();
-        ctx.closePath();
-
-
-
-        // Draw the P3 point (with a line to P1)
-        ctx.beginPath();
-        ctx.strokeStyle = 'red';
-        ctx.moveTo(cX(x2), cY(y2));
-        ctx.lineTo(cX(1), cY(1));
-        ctx.stroke();
-        ctx.closePath();
-
-        ctx.beginPath();
-        ctx.moveTo(cX(x2), cY(y2));
-        ctx.arc(cX(x2), cY(y2), radius, 0, 2 * Math.PI);
-        ctx.stroke();
-        ctx.fill();
-        ctx.closePath();
-
-        // Draw the P1(1,1) point (with dashed hints)
-        ctx.beginPath();
-        ctx.moveTo(cX(1), cY(1));
-        ctx.strokeStyle = 'lightgrey';
-        ctx.lineTo(cX(0), cY(1));
-        ctx.moveTo(cX(1), cY(1));
-        ctx.lineTo(cX(1), cY(0));
-        ctx.stroke();
-        ctx.closePath();
-
-        ctx.beginPath();
-        ctx.strokeStyle = "black";
-        ctx.fillStyle = "black";
-        ctx.arc(cX(1), cY(1), radius, 0, 2 * Math.PI);
-        ctx.fill();
-        ctx.stroke();
-        ctx.closePath();
-
-
-        // Draw the P0(0,0) point
-        ctx.beginPath();
-        ctx.arc(cX(0), cY(0), radius, 0, 2 * Math.PI);
-        ctx.fill();
-        ctx.stroke();
-        ctx.closePath();
-
-
-    } else {
-        alert('You need Safari or Firefox 1.5+ to see this demo.');
-    }
-}
-
-function mouseDown(e) {
-
-    var canvas = document.getElementById('bezier');
-
-    var x1 = cX(document.getElementById('x1').value);
-    var y1 = cY(document.getElementById('y1').value);
-
-    var x = e.pageX - canvas.offsetLeft;
-    var y = e.pageY - canvas.offsetTop;
-
-    var output = document.getElementById('output');
-    output.value = "(" + x + "," + y + ") should be (" + x1 + "," + y1 + ")";
-
-
-    if ((x1 + radius >= x) && (x1 - radius <= x) && (y1 + radius >= y) && (y1 - radius <= y)) {
-        var output = document.getElementById('output');
-        output.value = "P1!";
-        dragSM = 1;
-    }
-
-    var x2 = cX(document.getElementById('x2').value);
-    var y2 = cY(document.getElementById('y2').value);
-
-    if ((x2 + radius >= x) && (x2 - radius <= x) && (y2 + radius >= y) && (y2 - radius <= y)) {
-        var output = document.getElementById('output');
-        output.value = "P2!";
-        dragSM = 2;
-    }
-
-    // If we are starting a drag
-    if (dragSM != 0) {
-        canvas.onmousemove = mouseMove;
-    }
-}
-
-function mouseUp(e) {
-
-    var output = document.getElementById('output');
-    output.value = "Mouse up!";
-    dragSM = 0;
-    canvas.onmousemove = null;
-}
-
-function mouseMove(e) {
-    if (dragSM != 0) {
-        var canvas = document.getElementById('bezier');
-
-        var x = e.pageX - canvas.offsetLeft;
-        var y = e.pageY - canvas.offsetTop;
-
-        var output = document.getElementById('output');
-        output.value = "Drag!";
-
-        if (dragSM == 1) {
-            var x1 = document.getElementById('x1');
-            var y1 = document.getElementById('y1');
-            x1.value = reverseX(x);
-            x1.value = Math.round(x1.value * 10000) / 10000;
-            y1.value = reverseY(y);
-            y1.value = Math.round(y1.value * 10000) / 10000;
-            if (x1.value < 0) { x1.value = 0; }
-            if (x1.value > 1) { x1.value = 1; }
-        } else if (dragSM == 2) {
-            var x2 = document.getElementById('x2');
-            var y2 = document.getElementById('y2');
-            x2.value = reverseX(x);
-            x2.value = Math.round(x2.value * 10000) / 10000;
-            y2.value = reverseY(y);
-            y2.value = Math.round(y2.value * 10000) / 10000;
-            if (x2.value < 0) { x2.value = 0; }
-            if (x2.value > 1) { x2.value = 1; }
-        }
-        updateCanvas();
-    }
-}
-
-initCanvas();
-updateCanvas();
-
-
- -

{{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/web/css/herramientas/index.html b/files/es/web/css/herramientas/index.html deleted file mode 100644 index 59cd1febfa..0000000000 --- a/files/es/web/css/herramientas/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Herramientas -slug: Web/CSS/Herramientas -tags: - - CSS -translation_of: Web/CSS/Tools ---- -
 
- -

CSS ofrece una serie de características poderosas que puede ser difíciles de usar, o tener un gran número de parámetros, por lo que es muy útil visualizarlos mientras se trabaja en ellos. Esta página ofrece enlaces a una serie de herramientas que le ayudarán a construir sus estilos usando estas caracteristicas.

- -

{{LandingPageListSubpages}}

- -

Otras herramientas

- -
    -
  • -

    Animación CSS - Stylie

    -
    • -
  • Para comprobar la información de la pantalla del dispositivo (helpful in {{Glossary("responsive web design")}}) - mydevice.io
    • -
  • Menus CSS- cssmenumaker.com
    • -
- -

Temas relacionados

- - diff --git a/files/es/web/css/initial_value/index.html b/files/es/web/css/initial_value/index.html new file mode 100644 index 0000000000..a6bbcdf32d --- /dev/null +++ b/files/es/web/css/initial_value/index.html @@ -0,0 +1,26 @@ +--- +title: Valor inicial +slug: Web/CSS/Valor_inicial +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/initial_value +--- +

+

<< Volver +

+

Resumen

+

El Valor inicial dado en el resumen de cada definición de propiedad CSS tiene un significado distinto según se trate de propiedades heredadas o no heredadas. +

Para propiedades heredadas, se usa el valor inicial, para el elemento raíz solamente, cuando no se ha especificado ningún valor para el elemento.

Para propiedades no heredadas se usa el valor inicial para todos los elementos, cuando no se especificó nigún valor para el elemento.

En CSS3 se propuso el valor initial para permitir a los autores especificar explícitamente éste valor inicial. +

+

Ver también

+

Propiedades heredadas y no heredadas, initial +


+

+
+

Categorías +

Interwiki Languages +

+
+{{ languages( { "en": "en/CSS/initial_value", "fr": "fr/CSS/Valeur_initiale", "ja": "ja/CSS/initial_value", "ko": "ko/CSS/initial_value", "pl": "pl/CSS/Warto\u015b\u0107_pocz\u0105tkowa" } ) }} diff --git "a/files/es/web/css/introducci\303\263n/boxes/index.html" "b/files/es/web/css/introducci\303\263n/boxes/index.html" deleted file mode 100644 index caccdd80b2..0000000000 --- "a/files/es/web/css/introducci\303\263n/boxes/index.html" +++ /dev/null @@ -1,335 +0,0 @@ ---- -title: Boxes -slug: Web/CSS/Introducción/Boxes -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/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/web/css/introducci\303\263n/cascading_and_inheritance/index.html" "b/files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" deleted file mode 100644 index b47218eb7a..0000000000 --- "a/files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Cascada y herencia -slug: Web/CSS/Introducción/Cascading_and_inheritance -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/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:

- -
    -
  • Estilos por defecto del navegador para del lenguaje de marcado.
    • -
  • Estilos especificados por un usuario que está leyendo el documento.
    • -
  • Los estilos relacionados en el documento por su autor. Estos pueden ser especificados en tres lugares: -
      -
    • En un archivo externo: este tutorial aborda principalmente este método para definir los estilos.
      • -
    • En una definición al principio del documento: utilice este método únicamente para los estilos que se utilizan sólo en esa página .
      • -
    • En un elemento específico en el cuerpo del documento: este es el método menos fácil de mantener, pero puede ser utilizado para la probar.
      • -
    -
    • -
- -

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/web/css/introducci\303\263n/color/index.html" "b/files/es/web/css/introducci\303\263n/color/index.html" deleted file mode 100644 index 030fa9d692..0000000000 --- "a/files/es/web/css/introducci\303\263n/color/index.html" +++ /dev/null @@ -1,364 +0,0 @@ ---- -title: Color -slug: Web/CSS/Introducción/Color -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/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/web/css/introducci\303\263n/how_css_works/index.html" "b/files/es/web/css/introducci\303\263n/how_css_works/index.html" deleted file mode 100644 index f4beb05519..0000000000 --- "a/files/es/web/css/introducci\303\263n/how_css_works/index.html" +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Cómo funciona el CSS -slug: Web/CSS/Introducción/How_CSS_works -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 ---- -

{{ 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/web/css/introducci\303\263n/index.html" "b/files/es/web/css/introducci\303\263n/index.html" deleted file mode 100644 index 09177572fa..0000000000 --- "a/files/es/web/css/introducci\303\263n/index.html" +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Introducción -slug: Web/CSS/Introducción -tags: - - CSS - - 'CSS:Introducción' - - para_revisar -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

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.

- -
    -
  • La parte I ilustra las características estándar de CSS que funcionan en los navegadores Mozilla y también en la mayoría de los navegadores modernos.
    • -
- -
    -
  • La parte II contiene algunos ejemplos de características especiales que funcionan en Mozilla, pero no necesariamente en otros entornos.
    • -
- -

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/web/css/introducci\303\263n/layout/index.html" "b/files/es/web/css/introducci\303\263n/layout/index.html" deleted file mode 100644 index f71d3a82e6..0000000000 --- "a/files/es/web/css/introducci\303\263n/layout/index.html" +++ /dev/null @@ -1,384 +0,0 @@ ---- -title: Layout -slug: Web/CSS/Introducción/Layout -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/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/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" "b/files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" deleted file mode 100644 index 1788c8c0ee..0000000000 --- "a/files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Los estilos de texto -slug: 'Web/CSS/Introducción/Los:estilos_de_texto' -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles ---- -

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

- -
    -
  • Negrita, cursiva, y small-caps (versalita)
    • -
  • El tamaño
    • -
  • La altura de la línea
    • -
  • El tipo de letra
    • -
- -
-
-
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/web/css/introducci\303\263n/media/index.html" "b/files/es/web/css/introducci\303\263n/media/index.html" deleted file mode 100644 index bb7bb0bd23..0000000000 --- "a/files/es/web/css/introducci\303\263n/media/index.html" +++ /dev/null @@ -1,394 +0,0 @@ ---- -title: Media -slug: Web/CSS/Introducción/Media -translation_of: Web/Progressive_web_apps/Responsive/Media_types ---- -

{{CSSTutorialTOC}} {{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables")}}

- -

Esta es la ultima sección de la primera parte del tutorial de Introducción a CSS. Muchas páginas de este tutorial se han enfocado en las propiedades y valores de CSS que especifican como mostrar un documento. Esta sección indaga otra vez en el propósito y la estructura de las hojas de estilo.

- -

Información: Media

- -

El propósito de CSS es especificar cómo los documentos son presentados al usuario. La presentación puede tener más de una forma.

- -

Por ejemplo, probablemente estes leyendo esta página en algún aparato doméstico (un celular, tu pc). Pero también podrías querer proyectarlo para una audiencia mas grande o imprimirlo. Estos medios pueden tener diferentes características. CSS te provee diferentes maneras de presentar un documento en distintos medios.

- -

Para especificar reglas para un medio en particular, usa {{CSSXref("@media")}} seguido por el tipo de medio, seguido por llaves que encierren las reglas.

- -
-
Ejemplo
- -

Un documento en un web site tiene una barra de navegación que permite a los usuarios moverse en el sitio.

- -

En el lenguaje de marcado, el elemento padre de esta área tiene el id nav-area. (En {{HTMLVersionInline(5)}}, esto puede ser marcado con el elemento {{HTMLElement("nav")}} en vez de un {{HTMLElement("div")}} con un atributo id.)

- -

Cuando vas a imprimir el documento esa área de navegación no tiene ningún propósito, entonces con las hojas de estilo puedes removerlo completamente:

- -
@media print {
-  #nav-area {display: none;}
-  }
-
-
- -

Algunos de los tipos de medios comunes son:

- - - - - - - - - - - - - - - - - - - - -
screenPantalla de computadora
printMedio paginado
projectionPantalla proyectada
allTodos (por defecto)
- -
-
Mas detalles
- -

Existen otras maneras de especificar un conjunto de reglas para los distintos medios.

- -

El lenguaje de marcado del documento puede permitir que el tipo de medio sea determinado cuando la hoja de estilo esta enlazada al documento. Por ejemplo, en HTML puedes especificar el tipo de medio con un atributo media en la etiqueta LINK.

- -

En CSS puedes usar {{CSSXref("@import")}} al inicio de la hoja de estilo para importar otra hoja de estilo de una URL, opcionalmente especificando el tipo de medio.

- -

Al usar estas técnicas puedes separar las reglas de estilo para los diferentes medios en distintos archivos. Esta es una manera útil de estructurar tus hojas de estilo.

- -

Para más detalles de los tipos de medio, ve Media en la especificación de CSS.

- -

Existen mas ejemplos de la propiedad {{cssxref("display")}} en una página posterior de este tutorial: XML data.

-
- -

Imprimir

- -

CSS tiene algún soporte especifico para impresión y para medios páginados en general.

- -

Una regla {{cssxref("@page")}} puede determinar los márgenes de la página. Para impresión de doble cara, puedes definir los márgenes separadamente para @page:left y @page:right.

- -

Para medios impresios, normalmente usas unidades apropiadas de lonfigutd como pulgadas (in) y puntos (pt = 1/72 inch), o centimetros (cm) y milimetros (mm). Es igualmente apropiado usar ems (em) para conincidir el tamaño de la fuente, y porcentajes (%).

- -

Tu puedes controlar como los saltos de línea del contenido de un documento, al usar las propiedades {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} y{{cssxref("page-break-inside")}}.

- -
-
Ejemplo
- -

Esta regla determina los márgenes a una pulgada en todos los lados:

- -
@page {margin: 1in;}
-
- -

Esta regla asegura que cada elemento H1 empiece en una nueva página:

- -
h1 {page-break-before: always;}
-
-
- -
-
Más detalles
- -

Para más detalles del soporte de CSS para medios paginados, ver Paged media en la especificación de CSS.

- -

Como otras características de CSS, imprimir depende de tu navegador y su configuración. Por ejemplo, Mozilla te suple con unos márgenes por defecto, cabeceras y pies de página cuando imprimes. Cuando otros usuarios imprimen tu documento, probablemente no puedas predecir el navegador y la configuración usada, por lo que no podrás controlar los resutlados completamente.

-
- -

Interfaces de Usuario

- -

CSS tiene algunas propiedades especificas para aparatos que soportanuna interfaz de usuario, como monitores. Esto hace que la apariencia del documento cambie dinámicamente mientras el usuario trabaja con la interfaz.

- -

No existe un tipo especial de medio para aparatos con interfaz de usuario.

- -

Si existen cinco selectores especiales:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorSelects
E{{cssxref(":hover")}}Cualquier elemento E que tenga el puntero sobre él
E{{cssxref(":focus")}}Cualquier elemento E que tenga el foco del teclado
E{{cssxref(":active")}}Cualquier elemento E que este envuelto en la acción actual del usuario
E{{cssxref(":link")}}Cualquier elemento E que es un hipervinculo a una URL no visitada por el usuario
E{{cssxref(":visited")}}Cualquier elemento E que es un hipervinculo a una URL que el usuario ya visito
- -
-

Nota: La información que puede ser obtenida con el selector :visited esta restringida en {{gecko("2.0")}}. Ver Privacy and the :visited selector para más detalles.

-
- -

La propiedad {{cssxref("cursor")}} especifica la forma del puntero: Algunas de las formas comunes son las siguientes.

- -

Coloca el mouse sobre los items en este lista para ver la forma actual del puntero en tu navegador:

- - - - - - - - - - - - - - - - - - - - - - - - -
SelectorSelects
pointerIndicating a link
waitIndicating that the program cannot accept input
progressIndicating that the program is working, but can still accept input
defaultThe default (usually an arrow)
- -

Una propiedad {{cssxref("outline")}} crea un contorno que a menudo es usado para indicar el foco del teclado. Sus valores son similares a la propiedad {{cssxref("border")}}, excepto que no puedes especificar lados individuales.

- -

Otras características de las interfaces de usuario son implementadas usando atributos. Por ejemplo, un elemento que esta deshabilitado o es de solo lectura tiene el atributo disabled o el atributo readonly. Selectores puede especificar estos atributos como cualquier otro, usando corchetes: {{mediawiki.external('disabled')}} o {{mediawiki.external('readonly')}}.

- -
-
Ejemplo
- -

Estas reglas especifican estilos para un boton que cambia dinámicamente cuando el usuario interactúa con el:

- -
.green-button {
-  background-color:#cec;
-  color:#black;
-  border:2px outset #cec;
-  }
-
-.green-button[disabled] {
-  background-color:#cdc;
-  color:#777;
-  }
-
-.green-button:active {
-  border-style: inset;
-  }
-
- -

Esta wiki no soporta una interfaz de usuario en la página, entonces estos botones no hacen "click". A continuación se presentan una imágenes estáticas para ilustrar la idea:

- - - - - - - -
- - - - - - - - - - - - - - - - -
Click MeClick MeClick Me
 
disablednormalactive
-
- -

Un botón completamente funcional también tiene un contorno oscuro alrededor cuando esta por defecto, y un contorno punteado en él cuando tiene el foco del teclado. También podría un efecto flotante (hover) cuando el puntero este sobre el.

-
- -
-
Más detalles
- -

Para más información sobre interfaces de usuario en CSS, ver User interface en la especificación de CSS.

- -

Existe un ejemplo del lenguaje de marcado usado por Mozilla para interfaces de usuario, XUL, en la Parte II de este tutorial.

-
- -

Acción: Imprimir un documento

- -
    -
  1. Abrir un nuevo documento HTML, doc4.html. Copiar y pegar el contenido de aqui: - - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <title>Print sample</title>
-    <link rel="stylesheet" href="style4.css">
-  </head>
-  <body>
-    <h1>Section A</h1>
-    <p>This is the first section...</p>
-    <h1>Section B</h1>
-    <p>This is the second section...</p>
-    <div id="print-head">
-      Heading for paged media
-    </div>
-    <div id="print-foot">
-      Page:
-    </div>
-</body>
-</html>
-
    -
    2. -
  2. Abrir una nueva hoja de estilo, style4.css. Copiar y pegar el contenido de aqui: - 
    /*** Print sample ***/
-
-/* defaults  for screen */
-#print-head,
-#print-foot {
-  display: none;
-  }
-
-/* print only */
-@media print {
-
-h1 {
-  page-break-before: always;
-  padding-top: 2em;
-  }
-
-h1:first-child {
-  page-break-before: avoid;
-  counter-reset: page;
-  }
-
-#print-head {
-  display: block;
-  position: fixed;
-  top: 0pt;
-  left:0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  text-align: center;
-  }
-
-#print-foot {
-  display: block;
-  position: fixed;
-  bottom: 0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  }
-
-#print-foot:after {
-  content: counter(page);
-  counter-increment: page;
-  }
-
-} /* end print only */
-
    -
    3. -
  3. Ve este documento en tu navegador; este usa el estilo por defecto de tu navegador.
    4. -
  4. Imprime (o previsualiza) el documento; la hoja de estilo coloca cada sección en una página separada, y agrega una cabecera y un pie de página por cada una. Si tu navegador soporta contadores, le agregará un número de página al pie. - - - - - - - -
    - - - - - - -
    - - - - - - -
    -
    Heading for paged media
    - -
    Section A
    - -
    This is the first section...
    - -
    Page: 1
    -
    -
    -     		- - - - - - -
    - - - - - - -
    -
    Heading for paged media
    - -
    Section B
    - -
    This is the second section...
    - -
    Page: 2
    -
    -
    -
    -
    5. -
- - - - - - - - -
Retos
Mueve las relgas de estilo especificas para imprimir a un archivo CSS separado. -

Lee la página de referencia {{CSSXref("@import")}} para buscar detalles de como importar el nuevo archivo CSS especifico para imrpimir dentro de tu hoja de estilo style4.css.

- -

Haz que las encabezamientos se vuelvan azules cuando el puntero del mouse este sobre ellos.

-
- -

Ver soluciones a estos retos.

- -

¿Qué sigue?

- -

Si has tenido dificultades entendiendo esta página, o si tienes algún comentario, por favor contribuye en la página de Discussion.

- -

Hasta aquí, todas las reglas de estilo en este tutorial han estado en archivos especificos. Las reglas y sus valores son fijos. La siguiente página describe como cambiar las reglas dinámicamente al usar un lenguaje de programación: JavaScript

diff --git "a/files/es/web/css/introducci\303\263n/selectors/index.html" "b/files/es/web/css/introducci\303\263n/selectors/index.html" deleted file mode 100644 index 9ebe3573e8..0000000000 --- "a/files/es/web/css/introducci\303\263n/selectors/index.html" +++ /dev/null @@ -1,416 +0,0 @@ ---- -title: Selectores -slug: Web/CSS/Introducción/Selectors -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/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:

- -
    -
  • {{ Cssxref(":link") }}
    • -
  • {{ Cssxref(":visited") }}
    • -
  • {{ Cssxref(":active") }}
    • -
  • {{ Cssxref(":hover") }}
    • -
  • {{ Cssxref(":focus") }}
    • -
  • {{ Cssxref(":first-child") }}
    • -
  • {{ Cssxref(":last-child") }}
    • -
  • {{ Cssxref(":nth-child") }}
    • -
  • {{ Cssxref(":nth-last-child") }}
    • -
  • {{ Cssxref(":nth-of-type") }}
    • -
  • {{ Cssxref(":first-of-type") }}
    • -
  • {{ Cssxref(":last-of-type") }}
    • -
  • {{ Cssxref(":empty") }}
    • -
  • {{ Cssxref(":target") }}
    • -
  • {{ Cssxref(":checked") }}
    • -
  • {{ Cssxref(":enabled") }}
    • -
  • {{ Cssxref(":disabled") }}
    • -
- -

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/web/css/mask-clip/index.html b/files/es/web/css/mask-clip/index.html new file mode 100644 index 0000000000..5110c18d6c --- /dev/null +++ b/files/es/web/css/mask-clip/index.html @@ -0,0 +1,102 @@ +--- +title: '-webkit-mask-clip' +slug: Web/CSS/-webkit-mask-clip +tags: + - CSS +translation_of: Web/CSS/mask-clip +translation_of_original: Web/CSS/-webkit-mask-clip +--- +

{{ CSSRef() }}

+ +

{{ Non-standard_header() }}

+ +

Si se especificado {{ Cssxref("-webkit-mask-image") }} , -webkit-mask-clip determina el comportamiento de recorte (clipping) de la imagen de máscara.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
{{csssyntax}}
+
+ +

donde:

+ +
+
<clip-style>
+
border | padding | content | text
+
+ +

Valores

+ +
+
border
+
Si se ha especificado border , la máscara de imagen se extiende hasta el borde del elemento.
+
padding
+
Si se ha especificado padding , la imagen de máscara de extiendo hasta el padding (relleno) del elemento.
+
content
+
Si se ha espeficiado content , la imagen de máscara se recorta al tamaño del contenido del elemento.
+
text
+
Si se ha especificado  text , la imagen de máscara de recorta al tamaño del texto del elemento.
+
+ +

Ejemplo

+ +
div {
+    -webkit-mask-image: url('images/mask.png');
+    -webkit-mask-clip: padding;
+}
+
+ +

Compatibilidad con los distintos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.2
+
+ +

Ver además

+ +

{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}

diff --git a/files/es/web/css/mask-image/index.html b/files/es/web/css/mask-image/index.html new file mode 100644 index 0000000000..60434d3e6a --- /dev/null +++ b/files/es/web/css/mask-image/index.html @@ -0,0 +1,157 @@ +--- +title: '-webkit-mask-image' +slug: Web/CSS/-webkit-mask-image +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/mask-image +translation_of_original: Web/CSS/-webkit-mask-image +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-mask-image establece la imagen de máscara para un elemento. Una imagen de máscara fija que partes del elemento serán visibles de acuerdo a la transparencia de la imagen de máscara.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
-webkit-mask-image: url(images/mymask.png);
+-webkit-mask-image: url(images/foo.png), url(images/bar.png);
+-webkit-mask-image: none;
+
+ +

Valores

+ +
+
<uri>
+
La localización del recurso imagen que será utilizado como imagen de máscara.
+
<gradient>
+
La función webkit-gradient que será usada como imagen de máscara.
+
none
+
Usado para especificar si un elemento no tiene imagen de máscara.
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +
body {
+  -webkit-mask-image: url('images/mymask.png');
+}
+
+div {
+  -webkit-mask-image: url('images/foo.png'), url('images/bar.png');
+}
+
+p {
+  -webkit-mask-image: none;
+}
+
+ +

Si se especifican varias imágenes, la región visible que sale como resultado es la combinación de las regiones visibles de cada máscara individual.

+ +

Compatibilidad con los distintos navegadores.

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}1.0{{CompatNo}}{{CompatNo}}4.0
Múltiples imágenes de máscara{{CompatNo}}1.0{{CompatNo}}{{CompatNo}}4.0
Gradientes{{CompatNo}}1.0{{property_prefix("-webkit")}}{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}
Máscaras SVG{{CompatNo}}8.0[1]{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureiOS SafariOpera MiniOpera MobileAndroid Browser
Soporte básico3.2{{CompatNo}}{{CompatNo}}2.1
Múltiples imágenes de máscara{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
Gradientes{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
Máscaras SVG{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
+
+ +

[1] Desde la versión 1.9.1 {{geckoRelease("1.9.1")}} Gecko soporta Efectos de filtro SVG, que se pueden usar para aplicar máscaras a contenido HTML.

+ +

Ver además

+ +

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}},{{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}},{{cssxref("-webkit-mask-repeat")}}

diff --git a/files/es/web/css/mask-origin/index.html b/files/es/web/css/mask-origin/index.html new file mode 100644 index 0000000000..8e75d01a39 --- /dev/null +++ b/files/es/web/css/mask-origin/index.html @@ -0,0 +1,101 @@ +--- +title: '-webkit-mask-origin' +slug: Web/CSS/-webkit-mask-origin +tags: + - CSS + - Referencia +translation_of: Web/CSS/mask-origin +translation_of_original: Web/CSS/-webkit-mask-origin +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propiedad  CSS -webkit-mask-origin determina el origen de una imagen de máscara. El valor de la propiedad {{cssxref("-webkit-mask-position")}} se interpreta en relación al valor de esta propiedad. No se aplica cuando -webkit-mask-attachment es fixed.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Valores

+ +
+
padding
+
Valor por defecto. La posición de la imagen de máscara es relativa al padding (relleno). (Para cajas solas  "0 0" es la esquina superior izquierda del límite del padding, "100% 100%" es la esquina inferior derecha.)
+
border
+
La posición de la imagen de máscara es relativa al borde.
+
content
+
La posición de la imagen de máscara es relativa al contenido.
+
+ +

Ejemplos

+ +
.example {
+  border: 10px double;
+  padding: 10px;
+  -webkit-mask-image: url('mask.png');
+
+  /* La imagen de máscara estará dentro del padding */
+  -webkit-mask-origin: content;
+}
+
+ +
div {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-origin: padding, content;
+}
+
+ +

Compatibilidad con los distintos navegadores.

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básica2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
+ +

Ver además

+ +

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-clip")}}

diff --git a/files/es/web/css/mask-position/index.html b/files/es/web/css/mask-position/index.html new file mode 100644 index 0000000000..60a7231da3 --- /dev/null +++ b/files/es/web/css/mask-position/index.html @@ -0,0 +1,119 @@ +--- +title: '-webkit-mask-position' +slug: Web/CSS/-webkit-mask-position +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/mask-position +translation_of_original: Web/CSS/-webkit-mask-position +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Sumario

+ +
la propiedad CSS -webkit-mask-position fija la posición inicial de una máscara de imagen.
+ +

{{cssinfo}}

+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Valores

+ +

 Acepta uno o dos valores.  Se permiten valores negativos para {{cssxref("<percentage>")}} y {{cssxref("<length>")}}.

+ +
    +
  • Si sólo se especifica un valor, el segundo valor se supone que es center.
    • +
  • El primer valor representa la posición horizontal y el segundo la posición vertical (si al menos un valor no es una palabra clave).
    • +
+ +
+
<percentage>
+
Con un par de valores  0% 0%,  (es igual a 0 0) la esquina superior izquierda de la imagen se alinea con la esquina superior izquierda del borde del relleno del cuadro. Un valor par de 100% 100% coloca la esquina inferior derecha de la imagen  en la esquina inferior derecha del zona del relleno. Con un par de valores de 14% 84%, el punto del 14%  a lo largo y el 84% hacia abajo de la imagen son situados el punto del 14%  a lo largo y el 84% del área del relleno.
+
<length>
+
Con un par de valores 2cm 1cm, la esquina superior izquierda de la imagen se coloca a 2cm a la derecha y 1cm por debajo de la esquina superior izquierda del área del relleno.
+
top
+
Equivalente al 0% para la posición vertical.
+
right
+
Equivalente al 100% para la posición horizontal.
+
bottom
+
Equivalente al 100% para la posición vertical.
+
left
+
Equivalente al 0% para la posición horizontal.
+
center
+
Equivalente al 50% para la posición horizontal si no se da otra forma, o 50% para la posición vertical si lo es.
+
+ +

Ejemplos

+ +
.exampleOne {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position: bottom right;
+}
+
+.exampleTwo {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position: 25%;
+}
+
+ +

Especificaciones

+ +

No forma parte de ninguna especificación.

+ +

Compatibilidad con los distintos nevegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Ver tambien

+ +

{{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}

diff --git a/files/es/web/css/mask-repeat/index.html b/files/es/web/css/mask-repeat/index.html new file mode 100644 index 0000000000..316bec182e --- /dev/null +++ b/files/es/web/css/mask-repeat/index.html @@ -0,0 +1,133 @@ +--- +title: '-webkit-mask-repeat' +slug: Web/CSS/-webkit-mask-repeat +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia + - Web +translation_of: Web/CSS/mask-repeat +translation_of_original: Web/CSS/-webkit-mask-repeat +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad -webkit-mask-repeat especifica si la imagen de máscara se repite (en mosaico) y cómo se repite.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave de valor únicas */
+-webkit-mask-repeat: repeat;
+-webkit-mask-repeat: repeat-x;
+-webkit-mask-repeat: repeat-y;
+-webkit-mask-repeat: no-repeat;
+
+/* Palabras clave de valor mútiple */
+-webkit-mask-repeat: repeat, repeat-x, no-repeat;
+
+/* Valores globlaes */
+-webkit-mask-repeat: inherit;
+-webkit-mask-repeat: initial;
+-webkit-mask-repeat: unset;
+
+ +

Valores

+ +
+
repeat
+
La máscara de imagen se repite tanto vertical como horizontalmente.
+
repeat-x
+
La imagen de máscara de repite sólo horizontalmente.
+
repeat-y
+
La imagen de máscara de repite sólo verticalemente.
+
no-repeat
+
La máscara de imagen no se repite. Sólo se dibuja una copia suya. El resto del contenido del elemento con máscara no se muestra.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +
.exampleone {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat: repeat-x;
+}
+
+.exampletwo {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat: no-repeat;
+}
+
+ +

Soporte para múltiples imágenes de máscara

+ +

Se puede especificar, seperados por comas,  un <repeat-style> para cada una de las imágenes de máscara:

+ +
.examplethree {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat: repeat-x, repeat-y;
+}
+
+ +

Cada imagen se relaciona con el correspondiente estilo, desde la primera especificada hasta la última.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
+ +

Ver además

+ +

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}

diff --git a/files/es/web/css/mask/index.html b/files/es/web/css/mask/index.html new file mode 100644 index 0000000000..50dd997bb0 --- /dev/null +++ b/files/es/web/css/mask/index.html @@ -0,0 +1,125 @@ +--- +title: '-webkit-mask' +slug: Web/CSS/-webkit-mask +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/mask +translation_of_original: Web/CSS/-webkit-mask +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad -webkit-mask es una  manera corta de establecer, en un único sitio en una hoja de estilos, los valores individuales de máscara. -webkit-mask  puede ser utilizado para fijar los valores en una o más de las siguiente propiedades: {{Cssxref("-webkit-mask-image")}}, {{Cssxref("-webkit-mask-repeat")}}, {{Cssxref("-webkit-mask-attachment")}}, {{Cssxref("-webkit-mask-position")}}, {{Cssxref("-webkit-mask-origin")}}, y {{Cssxref("-webkit-mask-clip")}}.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave valor */
+-webkit-mask: none;
+
+/* Valores de imágene */
+-webkit-mask: url(mask.png);                       /* Imagen de pixel usado coo máscara */
+-webkit-mask: url(masks.svg#star);                 /* Elemento dentro de un gráfico SVG usado como máscara */
+-webkit-mask: linear-gradient(transparent, black); /* Gradiente usado como máscara */
+
+/* Valores combinados */
+-webkit-mask: url(masks.svg#star) 40px 20px;       /* Elemento dentro de un gráfico SVG usado como máscara y posicionado  40px desde la parte superior y 20px a la izquierda */
+-webkit-mask: url(masks.svg#star) 0 0/50px 50px;   /* Elemento dentro de un gráfico SVG usado como máscara con una anchura y altura de 50px */
+-webkit-mask: url(masks.svg#star) repeat-x;        /* Elemento dentro de un gráfico SVG usado como una máscara que se repite horizontalmente */
+-webkit-mask: url(masks.svg#star) border;          /* Elemento dentro de un gráfico SVG usado como una máscara que sobrepasa la caja que rodea el borde */
+-webkit-mask: url(masks.svg#star) text;            /* Elemento dentro de un gráfico SVG usado como una máscara que recorta el texto que contiene */
+
+/* Valores globales */
+-webkit-mask: inherit;
+-webkit-mask: initial;
+-webkit-mask: unset;
+
+ +

Valores

+ +
+
mask-image
+
Requierido.Ver {{Cssxref("-webkit-mask-image")}}.
+
mask-repeat
+
Opcional. Ver {{Cssxref("-webkit-mask-repeat")}}.
+
mask-attachment
+
Opcional Ver {{Cssxref("-webkit-mask-attachment")}}.
+
mask-position
+
Opcional. Ver {{Cssxref("-webkit-mask-position")}}.
+
mask-origin
+
Opcional. Ver {{Cssxref("-webkit-mask-origin")}}.
+
mask-clip
+
Opcional Ver {{Cssxref("-webkit-mask-clip")}}.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.example {
+  -webkit-mask: url('mask.png') no-repeat fixed 20px 20px padding padding;
+}
+
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatNo}}{{CompatNo}}{{CompatNo}}3.2
+
+ +

See also

+ +
    +
  • {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}
    • +
diff --git a/files/es/web/css/media_queries/testing_media_queries/index.html b/files/es/web/css/media_queries/testing_media_queries/index.html new file mode 100644 index 0000000000..dac4330054 --- /dev/null +++ b/files/es/web/css/media_queries/testing_media_queries/index.html @@ -0,0 +1,93 @@ +--- +title: Probando media queries +slug: Web/Guide/CSS/probando_media_queries +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +

{{SeeCompatTable}}

+

El DOM proporciona características que hacen posible probar los resultados de un media query estructuradamente. Esto es hecho usando la interfaz {{domxref("MediaQueryList") }} y sus métodos y propiedades. Una vez que hayas creado el objeto {{domxref("MediaQueryList") }}, puedes revisar el resultado del query o, como alternativa, recibir notificaciones automáticamente cuando el resultado cambie.

+

Creando una media query list

+

Before you can evaluate the results of a query, you need to create the {{domxref("MediaQueryList") }} object representing the media query. To do this, use the {{domxref("window.matchMedia") }} method.

+

For example, if you want to set up a query list that determines whether the device is in landscape or portrait orientation, you can do so like this:

+
var mql = window.matchMedia("(orientation: portrait)");
+
+

Revisando el resultado de un query

+

Once your media query list has been created, you can check the result of the query by looking at the value of its matches property, which reflects the result of the query:

+
if (mql.matches) {
+  /* The device is currently in portrait orientation */
+} else {
+  /* The device is currently in landscape orientation */
+}
+
+

Recibiendo notificaciones query

+

If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a listener than to poll the query's result. To do this, you can call the addListener() method on the {{domxref("MediaQueryList") }} object, specifying an observer that implements the {{domxref("MediaQueryListListener") }} interface:

+
var mql = window.matchMedia("(orientation: portrait)");
+mql.addListener(handleOrientationChange);
+handleOrientationChange(mql);
+
+

This code creates the orientation testing media query list, mql, then adds a listener to it. Note that after adding the listener, we actually invoke the listener directly once. This lets our listener perform initial adjustments based on the current device orientation (otherwise, if our code assumes the device is in portrait mode but it's actually in landscape mode at startup, we could have inconsistencies).

+

The handleOrientationChange() method we implement then would look at the result of the query and handle whatever we need to do on an orientation change:

+
function handleOrientationChange(mql) {
+  if (mql.matches) {
+    /* The device is currently in portrait orientation */
+  } else {
+    /* The device is currently in landscape orientation */
+  }
+}
+
+

Terminando con las notificaciones query 

+

Cuando ya no vayas a necesitar recibir las notificaciones sobre los cambios de valro de tu media query, simplemente llama al removeListener() en el {{domxref("MediaQueryList") }}:

+
mql.removeListener(handleOrientationChange);
+
+

Compatibilidad con los navegadores

+

{{CompatibilityTable}}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico9{{CompatGeckoDesktop("6.0") }}1012.15.1
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico3.0{{CompatUnknown}}1012.15
+
+

Ver también

+
    +
  • Media queries
    • +
  • {{domxref("window.matchMedia()") }}
    • +
  • {{domxref("MediaQueryList") }}
    • +
  • {{domxref("MediaQueryListListener") }}
    • +
diff --git a/files/es/web/css/media_queries/using_media_queries/index.html b/files/es/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..997626e12d --- /dev/null +++ b/files/es/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,828 @@ +--- +title: CSS media queries +slug: CSS/Media_queries +tags: + - CSS + - Media + - Media Queries + - query +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +
{{cssref}}
+ +

Las media queries (en español "consultas de medios") son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del {{glossary("viewport")}} del navegador).

+ +

Se utilizan para:

+ +
    +
  • Aplicar estilos condicionales con las reglas-at {{cssxref("@media")}} e {{cssxref("@import")}} de CSS.
    • +
  • Indicar medios específicos en los elementos {{HTMLElement("link")}}, {{HTMLElement("source")}} y otros elementos HTML.
    • +
  • Testear y monitorizar los estados de los medios usando los métodos de javascript {{domxref("Window.matchMedia()")}} y {{domxref("MediaQueryList.addListener()")}}.
    • +
+ +

Sintaxis

+ +

 

+ +

Las media queries consisten de un tipo de medio opcional y una o más expresiones de características de medios. Varias consultas se pueden combinar utilizando operadores lógicos. No distinguen entre mayúsculas y minúsculas.

+ +

El resultado de la consulta es "verdadero" cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se está mostrando el documento y todas las expresiones en el media query son "verdaderas". En este caso, se aplica los estilos correspondientes, siguiendo las reglas usuales de cascada.

+ +

Las consultas sobre tipos de medios desconocidos son siempre falsas.

+ +

 

+ +
<!-- CSS media query on a link element -->
+<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
+
+<!-- CSS media query within a style sheet -->
+<style>
+@media (max-width: 600px) {
+  .facet_sidebar {
+    display: none;
+  }
+}
+</style>
+
+ +

Media Types

+ +

Los Media Types (tipos de medios) describen la categoría general de un dispositivo. Excepto cuando se utilizan los operadores lógicos not o only, el tipo de medio es opcional y será interpretada como all.

+ +
+
all
+
Apto para todos los dispositivos.
+
print
+
Destinado a material impreso y visualización de documentos en una pantalla en el modo de vista previa de impresión. 
+
screen
+
Destinado principalmente a las pantallas.
+
speech
+
Destinado a sintetizadores de voz.
+
+ +
+

Tipos de medios depreciados: CSS2.1 y Media Queries 3 definieron varios tipos de medios adicionales (tty, tv, projection, handheld, braille, embossed y aural), pero fueron desaprobados en Media Queries 4 y no deberían ser usados. El tipo aural ha sido reemplazado por speech, que es similar.

+
+ +

Operadores Lógicos

+ +

Se pueden redactar queries utilizando operadores lógicos, incluyendo not, and, y only.

+ +

Además se puede combinar múltiples queries en una lista separada por comas múltiples; si cualquiera de las queries en la lista es verdadera, la hoja de estilo asociada es aplicada. Esto es equivalente a una operación lógica "or".

+ +

and

+ +

El operador and es usado para colocar juntas múltiples funciones multimedia. Un query básico con el tipo de medio especificado como all puede lucir así:

+ +
@media (min-width: 700px) { ... }
+ +

Si usted quiere aplicar ese query solo si la pantalla esta en formato horizontal, usted puede utilizar el operador and y colocar la siguiente cadena:

+ +
@media (min-width: 700px) and (orientation: landscape) { ... }
+ +

La siguiente query solo retornara verdadero si la ventana tiene un ancho de 700px o mas y la pantalla esta en formato horizontal. Ahora si usted quiere aplicar esta opción solo si tipo de medio es TV, usted puede utilizar la siguiente cadena:

+ +
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
+ +

Esta query solo se aplica si el tipo de medio es TV, la ventana tiene 700px de ancho o mas y la pantalla esta en formato horizontal.

+ +

lista separada por comas

+ +

Las listas separadas por comas se comportan como el operador or cuando es usado en media queries. Cuando utilice una lista separada por comas y alguno de los queries retorna verdadero, el estilo o la hoja de estilos sera aplicada. Cada query en una lista separada por comas es tratado como una query individual y cualquier operador aplicado a un medio no afectara a los demás. Esto significa que cada query en una lista separada por comas puede tener como objetivo diferentes medios, tipos y estados.

+ +

Si usted quiere aplicar una serie de estilos para un equipo con un ancho mínimo de 700px o si el dispositivo esta colocado en horizontal, usted puede escribir lo siguiente:

+ +
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
+ +

Por lo tanto, si esta en una screen con una ventana de 800px de ancho, la declaración del medio retornara verdadero debido a la primera parte de la lista, si aplicamos esto a un dispositivo @media all and (min-width: 700px) podría retornar verdadero a pesar del hecho de que la pantalla falle la verificación tipo de medio del handheld en la segunda query. Por otra parte si estuviese en un handheld con un ancho de ventana de 500px, la primera parte de la lista fallaría pero la segunda parte retornara verdadero debido a la declaración de medio.

+ +

not

+ +

El operador not aplica a todo el query y retorna verdadero si es posible y sino retorna falso (como por ejemplo monochrome en un monitor a color o una ventana con un ancho mínimo de min-width: 700px en un monitor de 600px). Un not negara un query si es posible pero no a todos los query posibles si están ubicados en una lista separada por comas. El operador not no puede ser usado para negar un query individual, solo para un query completo. Por ejemplo, el not en el siguiente query es evaluado al final:

+ +
@media not all and (monochrome) { ... }
+
+ +

Esto significa que el query es evaluado de la siguiente forma:

+ +
@media not (all and (monochrome)) { ... }
+
+ +

... y no de esta forma:

+ +
@media (not all) and (monochrome) { ... }
+ +

Otro Ejemplo:

+ +
@media not screen and (color), print and (color)
+
+ +

Es evaluado de la siguiente forma:

+ +
@media (not (screen and (color))), print and (color)
+ +

only

+ +

El operador only previene que navegadores antiguos que no soportan queries con funciones apliquen los estilos asignados:

+ +
<link rel="stylesheet" media="only screen and (color)" href="Ejemplo.css" />
+
+ +

Pseudo-BNF

+ +
media_query_list: <media_query> [, <media_query> ]*
+media_query: [[only | not]? <media_type> [ and <expression> ]*]
+  | <expression> [ and <expression> ]*
+expression: ( <media_feature> [: <value>]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid
+ +

Los queries son insensibles a las mayúsculas o minúsculas. Media queries que contengan tipos de medios desconocidos siempre retornaran falso.

+ +
Nota: Los paréntesis son requeridos alrededor de las expresiones, no utilizarlos es un error.
+ +

Funciones Multimedia

+ +

La mayoría de las funciones multimedia pueden ser precedidas por "min-" o "max-" para expresar "greater or equal to" o "less than or equal to". Esto elimina la necesidad de usar los símbolos "<" y ">" los cuales podrían causar conflictos con HTML y XML. Si usted usa una función multimedia sin especificarle un valor, la expresión retornara verdadero si el valor es diferente de cero.

+ +
Nota: Si una función multimedia no aplica al dispositivo donde el navegador esta corriendo, la expresión que contiene esa función siempre retornara falso. Por Ejemplo, cambiar la relación de aspecto en un dispositivo aural siempre resultara falso.
+ +

color

+ +

Valor: {{cssxref("<color>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: si

+ +

Indica el numero de bits por componente de color del dispositivo de salida. Si el dispositivo no soporta colores, este valor es 0.

+ +
Nota: Si el componente de color tiene diferente numero de bits por color, entonces el valor mas pequeño es utilizado. Por Ejemplo, si una pantalla utiliza 5 bits para azul y rojo y 6 bits para el verde, entonces se utilizan 5 bits por componente de color. Si el dispositivo utiliza índices de color se usara el mínimo valor de bits por color en la tabla.
+ +

Ejemplos

+ +

Para aplicar una hoja de estilo a todos los dispositivos que soporten colores:

+ +
@media all and (color) { ... }
+
+ +

Para aplicar una hoja de estilo a dispositivos con al menos 4 bits por componente de color:

+ +
@media all and (min-color: 4) { ... }
+
+ +

color-index

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: sí

+ +

Indica el numero de entradas en la tabla de colores para el dispositivo de salida.

+ +

Ejemplos

+ +

Para indicar que una hoja de estilo debe aplicarse a todos los dispositivos utilizando índices de color, usted puede hacer esto:

+ +
@media all and (color-index) { ... }
+
+ +

Para aplicar una hoja de estilo a un dispositivo con un índice de al menos 256 colores:

+ +
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
+
+ +

aspect-ratio

+ +

Valor: {{cssxref("<ratio>")}}
+ Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Acepta prefijos min/max: sí

+ +

Describe el aspecto de una zona a mostrar en el dispositivo de salida. Este valor consiste en enteros positivos separados por una barra ("/"). Esto representa la razón de aspecto de los pixeles horizontales (primer termino) a los pixeles verticales (segundo termino).

+ +

Ejemplo

+ +

Lo siguiente selecciona una hoja de estilo especial para ser aplicada donde la proporción del tamaño de la pantalla del dispositivo de salida es al menos la misma de ancho que de alto.

+ +
@media screen and (min-aspect-ratio: 1/1) { ... }
+ +

Este selecciona el estilo cuando la proporción de aspecto sea 1:1 o superior. En otras palabras este estilo solo sera aplicado cuando el área de visualización sea cuadrada u horizontal.

+ +

device-aspect-ratio

+ +

Valor: {{cssxref("<ratio>")}}
+ Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Acepta prefijos min/max: sí

+ +

Describe la proporción de aspecto del dispositivo de salida. Este valor consiste de dos enteros positivos separados por una barra ("/"). Este representa la proporción de aspecto de los pixeles horizontales (primer termino) a los pixeles verticales (segundo termino).

+ +

Ejemplo

+ +

El siguiente código selecciona una hoja de estilo especial para ser aplicada en pantallas panorámicas ("widescreen").

+ +
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
+ +

Este selecciona el estilo cuando la proporción de aspecto sea 16:9 o 16:10.

+ +

device-height

+ +

Valor: {{cssxref("<length>")}}
+ Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Acepta prefijos min/max: sí

+ +

Describe la altura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área del documento a renderizar).

+ +

device-width

+ +

Valor: {{cssxref("<length>")}}
+ Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Acepta prefijos min/max: sí

+ +

Describe la anchura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área del documento a renderizar).

+ +

Ejemplo

+ +

Para aplicar una hoja de estilo a un documento cuando este sea mostrado en una pantalla de menos de 800px de ancho, usted puede usar esto:

+ +
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
+
+ +

grid

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: all
+ Acepta prefijos min/max: no

+ +

Determina cuando el dispositivo de salida es un dispositivo de cuadrícula o de mapa de bits. Si el dispositivo esta basado en una cuadrícula (como una terminal TTY o una pantalla de teléfono de solo texto), el valor sera 1, de lo contrario sera 0.

+ +

Ejemplo

+ +

Para aplicar una hoja de estilo a un dispositivo portátil con una pantalla de 15 caracteres o mas estrecha:

+ +
@media handheld and (grid) and (max-width: 15em) { ... }
+
+ +
Nota: La unidad "em" tiene un significado especial para los dispositivos de cuadrícula; ya que la anchura exacta de una "em" no puede ser determinada, se asume un "em" como el ancho de una celda en la cuadrícula y el alto de una celda en la cuadrícula.
+ +

height

+ +

Valor: {{cssxref("<length>")}}
+ Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Acepta prefijos min/max: sí

+ +

La función height describe la altura de la superficie a renderizar en el dispositivo de salida (como la altura de una ventana o la bandeja de papel en una impresora).

+ +
Nota: Cuando el usuario cambia el tamaño de una ventana Firefox también cambia las hojas de estilo para utilizar la mas adecuada basándose en los valores de width y height del query.
+ +

monochrome

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: sí

+ +

Indica el número de bits por pixel en un dispositivo monocromático (escala de grises). Si el dispositivo no es monocromático el valor sera 0.

+ +

Ejemplos

+ +

Para aplicar una hoja de estilo a todos los dispositivos monocromáticos:

+ +
@media all and (monochrome) { ... }
+
+ +

Para aplicar una hoja de estilo a un dispositivo monocromático con al menos 8 bits por pixel:

+ +
@media all and (min-monochrome: 8) { ... }
+
+ +

orientation

+ +

Valor: landscape | portrait
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

Indica cuando el dispositivo esta en modo landscape (el ancho de la pantalla es mayor al alto) o modo portrait (el alto de la pantalla es mayor al ancho).

+ +

Ejemplo

+ +

Para aplicar una hoja de estilo solo en orientación vertical (portrait):

+ +
@media all and (orientation: portrait) { ... }
+ +

resolution

+ +

Valor: {{cssxref("<resolution>")}}
+ Medio: {{cssxref("Media/Bitmap", "bitmap")}}
+ Acepta prefijos min/max: sí

+ +

Indica la resolución (densidad de pixeles) del dispositivo de salida. La resolución puede ser especificada en puntos por pulgada (dpi) o en puntos por centímetros (dpcm).

+ +

Ejemplo

+ +

Para aplicar una hoja de estilo a dispositivos con al menos 300 dpi de resolución:

+ +
@media print and (min-resolution: 300dpi) { ... }
+
+ +

Para reemplazar la vieja sintaxis (min-device-pixel-ratio: 2):

+ +
@media screen and (min-resolution: 2dppx) { ... }
+ +

scan

+ +

Valor: progressive | interlace
+ Medio: {{cssxref("Media/TV")}}
+ Acepta prefijos min/max: no

+ +

Describe el proceso de exploración de televisión de los dispositivos de salida.

+ +

Ejemplo

+ +

Para aplicar una hoja de estilo solo a televisores de exploración progresiva:

+ +
@media tv and (scan: progressive) { ... }
+
+ +

width

+ +

Valor: {{cssxref("<length>")}}
+ Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Acepta prefijos min/max: sí

+ +

La función width describe el ancho de la superficie a renderizar en el dispositivo de salida (como el ancho de una ventana de un documento o el ancho de la bandeja de papel en una impresora).

+ +
Nota: Cuando el usuario cambia el tamaño de una ventana Firefox también cambia las hojas de estilo para utilizar la mas adecuada basándose en los valores de width y height del query.
+ +

Ejemplos

+ +

Si usted quiere especificar una hoja de estilo para dispositivos portátiles o pantallas con un ancho de al menos 20em, usted puede usar esta query:

+ +
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+
+ +

Esta query especifica una hoja de estilo para ser aplicada a un medio impreso con un ancho mayor a 8.5 pulgadas:

+ +
<link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" />
+
+ +

Esta query especifica una hoja de estilo para ser utilizada cuando la ventana tiene un ancho entre 500 y 800 pixeles:

+ +
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+
+
+ +
    +
+ +

Específico de Mozilla

+ +

Mozilla ofrece varias funciones especificas de Gecko. Algunas de estas pueden ser propuestas como funcines oficiales.

+ +

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

Si el dispositivo acepta que haya imágenes en menús, el valor es 1; de otro modo sera 0. Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(images-in-menus)") }}.

+ +

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

Si el usuario ha configurado su dispositivo para usar la apariencia "Grafito" en Mac OS X, esto sera 1. Si el usuario esta usando la apariencia azul por defecto, o si no usa Mac OS X, esto sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}.

+ +

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

Si el usuario esta usando Maemo con el tema original, esto sera 1; Si esta usando el nuevo tema Fremantle, sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(maemo-classic)") }}

+ +

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }}

+ +

Valor: {{cssxref("<number>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: sí

+ +

Da el numero de pixeles del dispositivo por pixeles de CSS.

+ +
+

No use esta función.

+ +

En cambio use la función resolution con la unidad dppx.
+
+ -moz-device-pixel-ratio puede ser usada para compatibilidad con Firefox 16 o anterior; y -webkit-device-pixel-ratio con navegadores basados en WebKit que no soporten dppx.

+ +

Ejemplo:

+ +
@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores basados en WebKit */
+       (min--moz-device-pixel-ratio: 2),    /* Navegadores anteriores a Firefox 16 */
+       (min-resolution: 2dppx),             /* La forma estandar */
+       (min-resolution: 192dpi)             /* compatibilidad con dppx */
+ +

Vea este articulo CSSWG sobre buenas practicas para compatibilidad en relación a resolution y dppx.

+
+ +
Nota: Esta funcion multimedia tambien esta implementada en Webkit como -webkit-device-pixel-ratio. Los prefijos minimos y maximos de esta funcion implementados por Gecko se llaman asi: min--moz-device-pixel-ratio y max--moz-device-pixel-ratio; y los mismos prefijos implementados por Webkit se llaman asi: -webkit-min-device-pixel-ratio y -webkit-max-device-pixel-ratio.
+ +

{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

+ +

Valor: windows-xp | windows-vista | windows-win7 | windows-win8
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

Indica que sistema operativo esta en uso actualmente. Actualmente solo es implementado en Windows. Sus posibles valores son:

+ +
    +
  • windows-xp
    • +
  • windows-vista
    • +
  • windows-win7
    • +
  • windows-win8
    • +
  • windows-win10
    • +
+ +

Esto se hace para permitir a los skins y a algunos códigos funcionen mejor con el sistema operativo en el que se ejecutan.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si la interfaz de usuario muestra una fecha inversa al final de la barra de desplazamiento, de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }}.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si la interfaz de usuario muestra una fecha apuntando hacia la derecha al final de la barra de desplazamiento. de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }}.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si la interfaz de usuario muestra una fecha inversa al principio de la barra de desplazamiento, de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }}.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si la interfaz de usuario muestra una fecha apuntando hacia la derecha al principio de la barra de desplazamiento, de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }}.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si la interfaz de usuario muestra la miniatura de la barra de desplazamiento de forma proporcional (basado en el porcentaje del documento que es visible), de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }}.

+ +

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si el dispositivo soporta eventos táctiles (una pantalla táctil), de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(touch-enabled)") }}.

+ +

Ejemplo

+ +

Usted puede usar esto para renderizar sus botones un poco mas grandes, Por Ejemplo, si el usuario se encuentra en una pantalla táctil, esto hará los botones mas fáciles de usar con los dedos.

+ +

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si el usuario utiliza un windows sin temas visuales (modo clasico); de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(windows-classic)") }}.

+ +

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si el usuario utiliza windows con el compositor de ventanas DWM; de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(windows-compositor)") }}.

+ +

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si el usuario actualmente esta utilizando algunos de los temas por defecto de Windows (Luna, Royale, Zune, or Aero), de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(windows-default-theme)") }}.

+ +

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

+ +

Valor: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

Indica cual tema de Windows esta en uso actualmente. Solo disponible para Windows. Sus posibles valores son:

+ +
    +
  • aero
    • +
  • luna-blue
    • +
  • luna-olive
    • +
  • luna-silver
    • +
  • royale
    • +
  • generic
    • +
  • zune
    • +
+ +

Esto se hace para permitir a los skins y a algunos códigos funcionen mejor con el tema utilizado por el sistema operativo en el que se ejecutan.

+ +

Específico de WebKit

+ +

-webkit-transform-3d

+ +

Vakir: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ + + +

Si está soportado, el valor es 1, si no, el valor es 0.

+ +

Ejemplo

+ +
@media (-webkit-transform-3d) {
+  .foo {
+    transform-style: preserve-3d;
+  }
+}
+
+@media (-webkit-transform-3d: 1) {
+  .foo {
+    transform-style: preserve-3d;
+  }
+}
+ +

-webkit-transform-2d

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ + + +

Si está soportado, el valor es 1, si no, el valor es 0.

+ +

-webkit-transition

+ +

Value: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ + + +

Si está soportado, el valor es 1, si no, el valor es 0.

+ +

Compatibilidad con Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("21")}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("9.0")}}{{CompatOpera("9")}}{{CompatSafari("4")}}
grid{{CompatUnknown}}{{CompatNo}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
resolution{{CompatChrome("29")}}{{CompatGeckoDesktop("1.9.1")}} [2]
+ {{CompatGeckoDesktop("8.0")}} [3]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scan{{CompatUnknown}}{{CompatNo}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio{{CompatVersionUnknown}}{{CompatNo}}[7]{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
-webkit-transform-3d{{CompatVersionUnknown}}[5]{{CompatGeckoDesktop("49")}}[6]{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
-webkit-transform-2d{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
-webkit-transition{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
display-mode{{CompatUnknown}}{{CompatGeckoDesktop("47")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
grid{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
resolution{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scan{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transform-3d{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transform-2d{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transition{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
display-mode{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] grid media type no está soportado

+ +

[2] Soporta valores {{cssxref("<integer>")}}.

+ +

[3] Soporta valores {{cssxref("<number>")}}, según la especificación.

+ +

[4] tv media no está soportado

+ +

[5] Ver {{WebKitBug(22494)}}.

+ +

[6] Implementado por razones de compatibilidad web en Gecko 46.0 {{geckoRelease("46.0")}} tras tras cambiar layout.css.prefixes.webkit por defecto a false (ver {{bug(1239799)}}). Desde Gecko 49.0 {{geckoRelease("49")}} layout.css.prefixes.webkit por defecto es true.

+ +

[7] Implementado como alias para min--moz-device-pixel-ratio y max--moz-device-pixel-ratio por razones de compatibilidad web in Gecko 45.5 {{geckoRelease("45.0")}} (ver {{bug(1176968)}}) tras cambiar layout.css.prefixes.webkit y layout.css.prefixes.device-pixel-ratio-webkit por defecto a false. Desde Gecko 49.0 {{geckoRelease("49")}} layout.css.prefixes.webkit por defecto es true.

+ +

Vea también

+ + diff --git a/files/es/web/css/mix-blend-mode/index.html b/files/es/web/css/mix-blend-mode/index.html new file mode 100644 index 0000000000..fc213a4ceb --- /dev/null +++ b/files/es/web/css/mix-blend-mode/index.html @@ -0,0 +1,611 @@ +--- +title: mix-blend-mode +slug: Web/CSS/Referencia_CSS/mix-blend-mode +tags: + - CSS +translation_of: Web/CSS/mix-blend-mode +--- +
{{CSSRef}}
+ +

La propiedad CSS mix-blend-mode describe cómo el contenido de un elemento debe mezclarse con el contenido del elemento que está tras él y con el fondo del elemento.

+ +
{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}
+ + + +

Syntax

+ +
/* Valores clave */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* Valores globales */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+
+ +

Valores

+ +
+
{{cssxref("<blend-mode>")}}
+
El modo de mezcla que debería ser aplicado.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ + + +
{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}
+ +

Ejemplo vivo

+ +
<svg>
+  <g class="isolate">
+    <circle cx="40" cy="40" r="40" fill="red"/>
+    <circle cx="80" cy="40" r="40" fill="lightgreen"/>
+    <circle cx="60" cy="80" r="40" fill="blue"/>
+  </g>
+</svg>
+ +
circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* sin aislación, el color de fondo será tenido en cuenta */
+
+ +

{{EmbedLiveSample("Ejemplo_vivo", "100%", "180")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}{{ Spec2('Compositing') }}Definición inicial
+ +

{{cssinfo}}

+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.properties.mix-blend-mode")}}

+ +

Véase también

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("background-blend-mode")}}
    • +
diff --git a/files/es/web/css/normal/index.html b/files/es/web/css/normal/index.html deleted file mode 100644 index 332e284385..0000000000 --- a/files/es/web/css/normal/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: normal -slug: Web/CSS/normal -translation_of: Web/CSS/font-variant -translation_of_original: 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/web/css/percentage/index.html b/files/es/web/css/percentage/index.html new file mode 100644 index 0000000000..c6629803fe --- /dev/null +++ b/files/es/web/css/percentage/index.html @@ -0,0 +1,126 @@ +--- +title: +slug: Web/CSS/porcentaje +translation_of: Web/CSS/percentage +--- +

{{CSSRef}}

+ +

Sumario

+ +

Los tipos de dato <porcentaje> de CSS representan un valor en forma de porcentaje. Muchas propiedades de CSS pueden tomar valores porcentuales, siempre para definir longitudes con respecto al tamaño de los elementos padre. Los porcentajes estan formados por un <numero> seguido por el signo de porcentaje %. No hay un espacio entre el '%' y el numero.

+ +

Varias propriedades de longitud usan porcentajes, tales como width, margin y padding. Los porcentajes tambien se pueden ver en font-size, donde el tamaño del texto esta directamente relacionado al tamaño de su elemento padre.

+ +
Nota: Solo los valores calculados son heredados. Entonces, incluso si un valor porcentual es usado en en la propiedad padre, un valor real, como una anchura en pixeles para un valor <length>, sera accesible en la propiedad heredada, no el valor porcentual.
+ +

Interpolación

+ +

Los valores del tipo de dato <porcentaje> de CSS pueden ser interpolados en orden de permitir animaciones. En ese caso ellos son interpolados como numeros reales de punto flotante. La velocidad de la interpolación se determina por medio de la funcion de temporizacion asociada con la animacion.

+ +

Examples

+ +
<div style="background-color:#0000FF;">
+  <div style="width:50%;margin-left:20%;background-color:#00FF00;">Width: 50%, Left margin: 20%</div>
+  <div style="width:30%;margin-left:60%;background-color:#FF0000;">Width: 30%, Left margin: 60%</div>
+</div>
+
+ +

El codigo de arriba se va a renderizar así:

+ +
+
Width: 50%, Left margin: 20%
+ +
Width: 30%, Left margin: 60%
+
+ +

 

+ +
<div style="font-size:18px;">
+  Full size text (18px)
+  <span style="font-size:50%;">50%</span>
+  <span style="font-size:200%;">200%</span>
+</div>
+
+ +

El codigo de arriba de renderizara así:

+ +
Full size text (18px) 50% 200%
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstatusComentarios
{{ SpecName('CSS3 Values', '#percentages', '<percentage>') }}{{ Spec2('CSS3 Values') }}No hay cambios significantes desde CSS Level 2 (Revision 1)
{{ SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>') }}{{ Spec2('CSS2.1') }}No hay cambios desde CSS Level 1
{{ SpecName('CSS1', '#percentage-units', '<percentage>') }}{{ Spec2('CSS1') }} 
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte basico1.01.0 (1.0)<=5.0yes1.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte basicosisisisisi
+
diff --git a/files/es/web/css/porcentaje/index.html b/files/es/web/css/porcentaje/index.html deleted file mode 100644 index c6629803fe..0000000000 --- a/files/es/web/css/porcentaje/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: -slug: Web/CSS/porcentaje -translation_of: Web/CSS/percentage ---- -

{{CSSRef}}

- -

Sumario

- -

Los tipos de dato <porcentaje> de CSS representan un valor en forma de porcentaje. Muchas propiedades de CSS pueden tomar valores porcentuales, siempre para definir longitudes con respecto al tamaño de los elementos padre. Los porcentajes estan formados por un <numero> seguido por el signo de porcentaje %. No hay un espacio entre el '%' y el numero.

- -

Varias propriedades de longitud usan porcentajes, tales como width, margin y padding. Los porcentajes tambien se pueden ver en font-size, donde el tamaño del texto esta directamente relacionado al tamaño de su elemento padre.

- -
Nota: Solo los valores calculados son heredados. Entonces, incluso si un valor porcentual es usado en en la propiedad padre, un valor real, como una anchura en pixeles para un valor <length>, sera accesible en la propiedad heredada, no el valor porcentual.
- -

Interpolación

- -

Los valores del tipo de dato <porcentaje> de CSS pueden ser interpolados en orden de permitir animaciones. En ese caso ellos son interpolados como numeros reales de punto flotante. La velocidad de la interpolación se determina por medio de la funcion de temporizacion asociada con la animacion.

- -

Examples

- -
<div style="background-color:#0000FF;">
-  <div style="width:50%;margin-left:20%;background-color:#00FF00;">Width: 50%, Left margin: 20%</div>
-  <div style="width:30%;margin-left:60%;background-color:#FF0000;">Width: 30%, Left margin: 60%</div>
-</div>
-
- -

El codigo de arriba se va a renderizar así:

- -
-
Width: 50%, Left margin: 20%
- -
Width: 30%, Left margin: 60%
-
- -

 

- -
<div style="font-size:18px;">
-  Full size text (18px)
-  <span style="font-size:50%;">50%</span>
-  <span style="font-size:200%;">200%</span>
-</div>
-
- -

El codigo de arriba de renderizara así:

- -
Full size text (18px) 50% 200%
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacionEstatusComentarios
{{ SpecName('CSS3 Values', '#percentages', '<percentage>') }}{{ Spec2('CSS3 Values') }}No hay cambios significantes desde CSS Level 2 (Revision 1)
{{ SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>') }}{{ Spec2('CSS2.1') }}No hay cambios desde CSS Level 1
{{ SpecName('CSS1', '#percentage-units', '<percentage>') }}{{ Spec2('CSS1') }} 
- -

Compatibilidad de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte basico1.01.0 (1.0)<=5.0yes1.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte basicosisisisisi
-
diff --git a/files/es/web/css/preguntas_frecuentes_sobre_css/index.html b/files/es/web/css/preguntas_frecuentes_sobre_css/index.html deleted file mode 100644 index 36c2fa1317..0000000000 --- a/files/es/web/css/preguntas_frecuentes_sobre_css/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Preguntas frecuentes sobre CSS -slug: Web/CSS/Preguntas_frecuentes_sobre_CSS -tags: - - CSS - - Proyecto MDC -translation_of: Learn/CSS/Howto/CSS_FAQ ---- -

Mi CSS es válida, pero no se representa correctamente

-

Los navegadores utilizan la declaración DOCTYPE para elegir entre mostrar el documento usando un modo que sea más compatible con los estándares de la Web o mostrarlo con los fallos de los navegadores antiguos. El uso de una declaración DOCTYPE correcta y moderna al inicio del código HTML mejorará el cumplimiento de los estándares del navegador.

-

Los navegadores modernos tienen fundamentalmente dos modos de renderizado:

-
  • Quirks mode (Modo no estándar): también se llama el modo de compatibilidad con versiones anteriores y permite que las páginas web heredadas se representen como sus autores habían previsto, siguiendo las normas de representación o renderizado no estándares que usan los navegadores antiguos. Los documentos con una declaración DOCTYPE incompleta, incorrecta o faltante o con una declaración DOCTYPE conocida que se usara habitualmente antes de 2001 se representarán en el Modo no estándar.
  • Standards Mode (Modo estándar): el navegador intenta seguir estrictamente los estándares del W3C. Se supone que las nuevas páginas HTML se diseñarán para navegadores compatibles con los estándares, y como resultado, las páginas con una declaración DOCTYPE moderna será renderizada con el Modo estándar.
    • -
-

Los navegadores basados en Gecko tienen un tercer Modo casi estándar que tiene solo una peculiaridades menores.

-

Esta es una lista de las declaraciones DOCTYPE más utilizadas que activarán el Modo estándar o el Modo casi estándar:

-
<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.0 Transitional / / EN"
-"http://www.w3.org/TR/html4/loose.dtd">
-
-<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-
-<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
-

Diferencia entre id y class

-

Los elementos HTML pueden tener un atributo id y / o un atributo class. El atributo id asigna un nombre a un elemento determinado y debe haber un solo elemento con ese nombre. El atributo class asigna un elemento a una determinada clase y en general no puede haber más de un elemento con el mismo atributo class. CSS te permite aplicar estilos a un atributo id y / o class concreto.

-

Utiliza un estilo específico de id cuando desees restringir las reglas de estilo a un bloque o elemento concreto. Este estilo lo usará un solo elemento con ese id concreto.

-

Usa un estilo específico de class cuando desees aplicar las reglas de estilo a una determinada clase de bloques y elementos.

-

Consulta Selectores CSS

-

Restaurar el valor de la propiedad predeterminado

-

Debido a que CSS no proporciona una palabra clave "predeterminada", la única manera de restaurar el valor predeterminado de una propiedad es volver a declarar explícitamente dicha propiedad.

-

Por lo tanto, debes tener especial cuidado al escribir reglas de estilo usando selectores (por ejemplo, los selectores por nombre de etiqueta, como p ) que tal vez desees reemplazar con reglas más específicas (como las que usan id o selectores de clase), porque el valor predeterminado original no puede restablecerse automáticamente.

-

Debido a la naturaleza en cascada de CSS, es una buena práctica definir reglas de estilo de una manera lo más concreta posible para evitar aplicar estilo a elementos a los que no se tenía previsto aplicar.

-

Estilos derivados

-

CSS no permite que se defina un estilo según los términos de otro. (Consulta la nota de Eric Meyer acerca de la postura del Grupo de trabajo). Sin embargo, la asignación de múltiples clases a un solo elemento puede proporcionar el mismo efecto.

-

Asignación de múltiples clases

-

A los elementos HTML se les pueden asignar varias clases listándolas  en el atributo class, con un espacio en blanco para separarlas.

-
<style type="text/css">
-.news { background: black; color: white; }
-.today { font-weight: bold; }
-</style>
-
-<div class="news today">
-... contenido de las noticias de hoy ...
-</ div>
-
-

Si la misma propiedad se declara en ambas reglas, el conflicto se resuelve primero a través de la especificidad, a continuación, según el orden de las declaraciones CSS. El orden de las clases en el atributo class no es relevante.

-

Normas de estilo que no funcionan

-

Las reglas de estilo que son sintácticamente correctas pueden no aplicarse en determinadas situaciones. Puedes utilizar las Reglas de estilo de CSS del Inspector DOM para depurar los problemas de este tipo, pero los casos más frecuentes en los que se ignoran las reglas de estilo se enumeran a continuación.

-
Jerarquía de los elementos HTML
-

La forma en que se aplican los estilos CSS a los elementos HTML depende también de la jerarquía de los elementos. Es importante recordar que una regla que se aplica a un descendiente reemplaza el estilo del padre, a pesar de la especificidad o la prioridad de las reglas CSS.

-
.news { color: black; }
-. corpName {font-weight: bold; color: red;}
-
-<!-- el texto de la noticia es negro, pero el nombre de la empresa va en rojo y negrita -->
-<div class="news">
-   (Reuters) <span class="corpName"> General Electric </ span> (GE.NYS) anunció el jueves ...
-</ div>
-
-

En el caso de jerarquías HTML complejas, si parece que se ignora una regla, comprueba si el elemento está dentro de otro elemento con un estilo diferente.

-
Regla de estilo explícitamente redefinida
-

En las hojas de estilo CSS el orden es importante. Si defines una regla y luego vuelves a definirla, se usará la última definición.

-
#stockTicker { font-weight: bold; }
-.stockSymbol { color: red; }
-/*  otras reglas             */
-/*  otras reglas             */
-/*  otras reglas             */
-.stockSymbol { font-weight: normal; }
-
-<!-- la mayor parte del texto va en negrita, con excepción de "GE", que va en rojo y no en negrita -->
-<div id="stockTicker">
-   NYS: <span class="stockSymbol">GE</span> +1.0 ...
-</ div>
-
-

Para evitar este tipo de errores, intenta definir las reglas solo una vez para un selector determinado y agrupa todas las reglas que pertenecen a ese selector.

-
Uso de una propiedad abreviada
-

Está bien usar las propiedades abreviadas para la definición de reglas de estilo, ya que utiliza una sintaxis muy compacta. Usar la abreviatura con sólo algunos atributos es posible y correcto, pero hay que recordar que los atributos no declarados se restablecen a los valores predeterminados automáticamente. Esto significa que una norma anterior para un solo atributo podría ser reemplazada implícitamente.

-
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
-.stockSymbol { font: 14px Arial; color: red; }
-
-<div id="stockTicker">
-   NYS: <span class="stockSymbol">GE</span> +1.0 ...
-</ div>
-
-

En el ejemplo anterior el problema se produjo en las reglas que pertencían a distintos elementos, pero puede ocurrir también para el mismo elemento, porque el orden de las reglas es importante.

-
#stockTicker {
-   font-weight: bold;
-   font: 12px Verdana; / * font-weight es ahora normal * /
-}
-
-
Uso del selector *
-

El selector * se refiere a cualquier elemento y tiene que utilizarse con especial cuidado.

-
body * { font-weight: normal; }
-#stockTicker { font: 12px Verdana; }
-.corpName { font-weight: bold; }
-.stockUp { color: red; }
-
-<div id="section">
-   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
-</ div>
-
-

En este ejemplo, el selector body * aplica la regla a todos los elementos dentro del cuerpo (body), en cualquier nivel de jerarquía, incluyendo redtext. Así font-weight: bold; aplicada a la clase boldtext se reemplaza por font-weight: normal; aplicada a redtext.

-
Especificidad en CSS
-

Cuando se aplican múltiples reglas a un determinado elemento, la norma escogida depende de su especificidad de estilo. El estilo en línea (en los atributos HTML style) es lo primero, seguido por los selectores id, a continuación, los selectores class y, finalmente, los selectores element-name.

-
div { color: black; }
-#orange { color: orange; }
-.green { color: green; }
-
-<div id="orange" class="green" style="color: red;">This is red</div>
-
-

Las reglas son más complicadas cuando el selector tiene varias partes. Se puede encontrar más información detallada acerca de cómo se calcula la especificidad del selector en el capítulo 6.4.3 de la Especificación CSS 2.1

-

¿Qué hacen las propiedades -moz-*?

-

Por favor, consulta la página Extensiones CSS de Mozilla.

-

 

-

{{ languages( { "en": "en/Common_CSS_Questions", "pl": "pl/Cz\u0119ste_pytania_o_CSS", "zh-tw": "zh_tw/CSS_\u4e00\u822c\u554f\u984c" } ) }}

diff --git a/files/es/web/css/primeros_pasos/index.html b/files/es/web/css/primeros_pasos/index.html deleted file mode 100644 index c6eb218230..0000000000 --- a/files/es/web/css/primeros_pasos/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Primeros pasos -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.

-
  • La primera parte ilustra las funcionalidades estándar de CSS que funcionan en los navegadores de Mozilla y en casi todos los navegadores modernos.
    • -
-
  • La segunda parte contiene algunos ejemplos de funciones especiales que funcionan en Mozilla pero no necesariamente en otros ambientes.
    • -
-

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/web/css/pseudo-elements/index.html b/files/es/web/css/pseudo-elements/index.html new file mode 100644 index 0000000000..c65b904163 --- /dev/null +++ b/files/es/web/css/pseudo-elements/index.html @@ -0,0 +1,86 @@ +--- +title: Pseudoelementos +slug: Web/CSS/Pseudoelementos +tags: + - CSS + - Pseudo-element + - Pseudo-elementos + - Selectores +translation_of: Web/CSS/Pseudo-elements +--- +
{{ CSSRef() }}
+ +

Resumen

+ +

Al igual que las {{ Cssxref("Pseudo-classes") }}, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento {{ Cssxref("::first-line") }} selecciona solo la primera línea del elemento especificado por el selector.

+ +

Sintaxis

+ +
selector::pseudo-elemento { propiedad: valor; }
+ +

Lista de pseudoelementos

+ +
    +
  • {{ Cssxref("::after") }}
    • +
  • {{ Cssxref("::before") }}
    • +
  • {{ Cssxref("::first-letter") }}
    • +
  • {{ Cssxref("::first-line") }}
    • +
  • {{ Cssxref("::selection") }}
    • +
  • {{ Cssxref("::backdrop") }}
    • +
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • +
+ +

Notas

+ +

De vez en cuando se utilizan dos puntos dobles (::) en vez de solo uno (:). Esto forma parte de CSS3 y de un intento para distinguir pseudo-elementos de pseudo-clases.

+ +
Nota: ::selection siempre se escribe con dos puntos dobles (::).
+ +

Solo se puede usar un pseudo-elemento por selector. Debe aparecer después del selector simple.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión inferiorSoporta
Internet Explorer8.0:pseudoelemento
9.0:pseudoelemento y ::pseudoelemento
Firefox (Gecko)1.0 (1.0):pseudoelemento
1.0 (1.5):pseudoelemento y ::pseudoelemento
Opera4.0:pseudoelemento
7.0:pseudoelemento y ::pseudoelemento
Safari (WebKit)1.0 (85):pseudoelemento y ::pseudoelemento
+ +

 

diff --git a/files/es/web/css/pseudoelementos/index.html b/files/es/web/css/pseudoelementos/index.html deleted file mode 100644 index c65b904163..0000000000 --- a/files/es/web/css/pseudoelementos/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Pseudoelementos -slug: Web/CSS/Pseudoelementos -tags: - - CSS - - Pseudo-element - - Pseudo-elementos - - Selectores -translation_of: Web/CSS/Pseudo-elements ---- -
{{ CSSRef() }}
- -

Resumen

- -

Al igual que las {{ Cssxref("Pseudo-classes") }}, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento {{ Cssxref("::first-line") }} selecciona solo la primera línea del elemento especificado por el selector.

- -

Sintaxis

- -
selector::pseudo-elemento { propiedad: valor; }
- -

Lista de pseudoelementos

- -
    -
  • {{ Cssxref("::after") }}
    • -
  • {{ Cssxref("::before") }}
    • -
  • {{ Cssxref("::first-letter") }}
    • -
  • {{ Cssxref("::first-line") }}
    • -
  • {{ Cssxref("::selection") }}
    • -
  • {{ Cssxref("::backdrop") }}
    • -
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • -
- -

Notas

- -

De vez en cuando se utilizan dos puntos dobles (::) en vez de solo uno (:). Esto forma parte de CSS3 y de un intento para distinguir pseudo-elementos de pseudo-clases.

- -
Nota: ::selection siempre se escribe con dos puntos dobles (::).
- -

Solo se puede usar un pseudo-elemento por selector. Debe aparecer después del selector simple.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavegadorVersión inferiorSoporta
Internet Explorer8.0:pseudoelemento
9.0:pseudoelemento y ::pseudoelemento
Firefox (Gecko)1.0 (1.0):pseudoelemento
1.0 (1.5):pseudoelemento y ::pseudoelemento
Opera4.0:pseudoelemento
7.0:pseudoelemento y ::pseudoelemento
Safari (WebKit)1.0 (85):pseudoelemento y ::pseudoelemento
- -

 

diff --git a/files/es/web/css/reference/index.html b/files/es/web/css/reference/index.html new file mode 100644 index 0000000000..63c52a6cdb --- /dev/null +++ b/files/es/web/css/reference/index.html @@ -0,0 +1,246 @@ +--- +title: Referencia CSS +slug: Web/CSS/Referencia_CSS +tags: + - CSS + - Referencia CSS + - para_revisar +translation_of: Web/CSS/Reference +--- +
+

Estamos trabajando sobre este documento. Si deseas ayudarnos a redactar o mejorar alguna de las páginas listadas a continuación, te animamos a que lo hagas.

+ +

Si vas a agregar o modificar una página, por favor, ajústate a la plantilla Referencia CSS:Plantilla de propiedades y modifica según sea necesario.

+ +

La plantilla básica para las páginas de ejemplo se puede encontrar aquí: samples/cssref/TEMPLATE.html.

+Siéntete libre para discutir sobre cualquier pregunta o sugerencia en la página Talk:CSS Reference.
+ +

Esta Referencia CSS muestra la sintáxis básica de una regla CSS; lista todas las propiedades estándares CSS, pseudo-classes y pseudo-elementos, reglas-at, unidades, y selectores, todos juntos en orden alfabético, así como los selectores por tipo; y le permitirá acceso rápido a la información detallada de cada uno de ellos. No solo lista las propiedades de CSS 1 y CSS 2.1, sino que también es una referencia de CSS3 que enlaza cualquier propiedad y concepto de CSS3 estandarizado, o ya establecido. También incluye una breve referencia DOM-CSS / CSSOM.

+ +

Tenga en cuenta que las definiciones de reglas CSS son completamente basadas en texto (ASCII), mientras que DOM-CSS / CSSOM, el sistema de gestión de reglas, está basado en objetos.

+ +

Vea también las Extensiones CSS de Mozilla para propiedades específicas de Gecko, que usan el prefijo -moz; y las Extensiones CSS de WebKit para propiedades específicas de WebKit. Vea Vendor-prefixed CSS Property Overview de Peter Beverloo como referencia a todas las propiedades con prefijo.

+ +

Sintaxis de regla básica

+ +

Se advierte que cualquier error de sintaxis en una definición de regla invalidará la regla por completo.

+ +

Sintaxis de regla de estilo

+ +
selectorlist {
+   property: value; 
+   [more property:value; pairs] 
+}
+
+...where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
+
+Ver selector, pseudo-elemento, pseudo-clase más abajo.
+
+
+ +

Ejemplos de reglas de estilo

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

Para una introducción de nivel principiante a la sintaxis de los selectores de CSS, consulte este tutorial. Tenga en cuenta que cualquier error de sintaxis CSS en una definición de regla hace que la regla completa se invalide. El navegador ignora las reglas no válidas. Tenga en cuenta que las definiciones de reglas CSS son totalmente (ASCII) basadas en texto, mientras que DOM-CSS / CSSOM (el sistema de gestión de reglas) está basado en objetos.

+ +

Sintaxis de las reglas-at (@rules)

+ +

Debido a que éstas tienen formatos de estructura variados, revise la sección reglas-At para ver la sintaxis de la regla deseada.

+ +

Índice de palabras clave

+ +
+

Nota: Los nombres de propiedad en este índice no incluyen los nombres de JavaScript donde difieren de los nombres estándar de CSS.

+
+ +
{{CSS_Ref}}
+ +

Selectores

+ +

Selectores básicos

+ + + +

Combinadores

+ + + +

Pseudo-clases

+ +
+
    +
  • {{ Cssxref(":active") }}
    • +
  • {{ Cssxref(':any')}}
    • +
  • {{ Cssxref(':any-link')}}
    • +
  • {{ Cssxref(":checked") }}
    • +
  • {{ Cssxref(":default") }}
    • +
  • {{ Cssxref(":defined") }}
    • +
  • {{ Cssxref(":dir", ":dir()")}}
    • +
  • {{ Cssxref(":disabled") }}
    • +
  • {{ Cssxref(":empty") }}
    • +
  • {{ Cssxref(":enabled") }}
    • +
  • {{ Cssxref(":first") }}
    • +
  • {{ Cssxref(":first-child") }}
    • +
  • {{ Cssxref(":first-of-type") }}
    • +
  • {{ Cssxref(":fullscreen") }}
    • +
  • {{ Cssxref(":focus") }}
    • +
  • {{ Cssxref(":focus-visible") }}
    • +
  • {{ Cssxref(":host") }}
    • +
  • {{ Cssxref(":host()") }}
    • +
  • {{ Cssxref(":host-context()") }}
    • +
  • {{ Cssxref(":hover") }}
    • +
  • {{ Cssxref(":indeterminate") }}
    • +
  • {{ Cssxref(":in-range") }}
    • +
  • {{ Cssxref(":invalid") }}
    • +
  • {{ Cssxref(":lang", ":lang()") }}
    • +
  • {{ Cssxref(":last-child") }}
    • +
  • {{ Cssxref(":last-of-type") }}
    • +
  • {{ Cssxref(":left") }}
    • +
  • {{ Cssxref(":link") }}
    • +
  • {{ Cssxref(":not", ":not()") }}
    • +
  • {{ Cssxref(":nth-child", ":nth-child()") }}
    • +
  • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
    • +
  • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
    • +
  • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
    • +
  • {{ Cssxref(":only-child") }}
    • +
  • {{ Cssxref(":only-of-type") }}
    • +
  • {{ Cssxref(":optional") }}
    • +
  • {{ Cssxref(":out-of-range") }}
    • +
  • {{ Cssxref(":read-only") }}
    • +
  • {{ Cssxref(":read-write") }}
    • +
  • {{ Cssxref(":required") }}
    • +
  • {{ Cssxref(":right") }}
    • +
  • {{ Cssxref(":root") }}
    • +
  • {{ Cssxref(":scope") }}
    • +
  • {{ Cssxref(":target") }}
    • +
  • {{ Cssxref(":valid") }}
    • +
  • {{ Cssxref(":visited") }}
    • +
+
+ +

Pseudo-elementos

+ +
+
    +
  • {{ Cssxref("::after") }}
    • +
  • {{ Cssxref("::backdrop") }}
    • +
  • {{ Cssxref("::before") }}
    • +
  • {{ Cssxref("::cue") }}
    • +
  • {{ Cssxref("::first-letter") }}
    • +
  • {{ Cssxref("::first-line") }}
    • +
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::selection") }}
    • +
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • +
+
+ +
+

Ver también: Una lista completa de selectores en la especificación de Nivel 3 de Selectores.

+
+ +

Conceptos

+ +

Sintaxis y semántica

+ + + +

Valores

+ + + +

Diseño

+ + + +

DOM-CSS / CSSOM

+ +

Tipos de objetos principales

+ + + +

Métodos importantes

+ +
    +
  • {{domxref("CSSStyleSheet.insertRule")}}
    • +
  • {{domxref("CSSStyleSheet.deleteRule")}}
    • +
+ +

Tutoriales CSS3

+ +

Estas páginas describen las nuevas tecnologías que aparecieron en CSS3, o las de CSS2.1 que no tienen mucho soporte:

+ + + +

Ver también

+ + diff --git a/files/es/web/css/referencia_css/index.html b/files/es/web/css/referencia_css/index.html deleted file mode 100644 index 63c52a6cdb..0000000000 --- a/files/es/web/css/referencia_css/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: Referencia CSS -slug: Web/CSS/Referencia_CSS -tags: - - CSS - - Referencia CSS - - para_revisar -translation_of: Web/CSS/Reference ---- -
-

Estamos trabajando sobre este documento. Si deseas ayudarnos a redactar o mejorar alguna de las páginas listadas a continuación, te animamos a que lo hagas.

- -

Si vas a agregar o modificar una página, por favor, ajústate a la plantilla Referencia CSS:Plantilla de propiedades y modifica según sea necesario.

- -

La plantilla básica para las páginas de ejemplo se puede encontrar aquí: samples/cssref/TEMPLATE.html.

-Siéntete libre para discutir sobre cualquier pregunta o sugerencia en la página Talk:CSS Reference.
- -

Esta Referencia CSS muestra la sintáxis básica de una regla CSS; lista todas las propiedades estándares CSS, pseudo-classes y pseudo-elementos, reglas-at, unidades, y selectores, todos juntos en orden alfabético, así como los selectores por tipo; y le permitirá acceso rápido a la información detallada de cada uno de ellos. No solo lista las propiedades de CSS 1 y CSS 2.1, sino que también es una referencia de CSS3 que enlaza cualquier propiedad y concepto de CSS3 estandarizado, o ya establecido. También incluye una breve referencia DOM-CSS / CSSOM.

- -

Tenga en cuenta que las definiciones de reglas CSS son completamente basadas en texto (ASCII), mientras que DOM-CSS / CSSOM, el sistema de gestión de reglas, está basado en objetos.

- -

Vea también las Extensiones CSS de Mozilla para propiedades específicas de Gecko, que usan el prefijo -moz; y las Extensiones CSS de WebKit para propiedades específicas de WebKit. Vea Vendor-prefixed CSS Property Overview de Peter Beverloo como referencia a todas las propiedades con prefijo.

- -

Sintaxis de regla básica

- -

Se advierte que cualquier error de sintaxis en una definición de regla invalidará la regla por completo.

- -

Sintaxis de regla de estilo

- -
selectorlist {
-   property: value; 
-   [more property:value; pairs] 
-}
-
-...where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
-
-Ver selector, pseudo-elemento, pseudo-clase más abajo.
-
-
- -

Ejemplos de reglas de estilo

- -
strong {
-  color: red;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
-
- -

Para una introducción de nivel principiante a la sintaxis de los selectores de CSS, consulte este tutorial. Tenga en cuenta que cualquier error de sintaxis CSS en una definición de regla hace que la regla completa se invalide. El navegador ignora las reglas no válidas. Tenga en cuenta que las definiciones de reglas CSS son totalmente (ASCII) basadas en texto, mientras que DOM-CSS / CSSOM (el sistema de gestión de reglas) está basado en objetos.

- -

Sintaxis de las reglas-at (@rules)

- -

Debido a que éstas tienen formatos de estructura variados, revise la sección reglas-At para ver la sintaxis de la regla deseada.

- -

Índice de palabras clave

- -
-

Nota: Los nombres de propiedad en este índice no incluyen los nombres de JavaScript donde difieren de los nombres estándar de CSS.

-
- -
{{CSS_Ref}}
- -

Selectores

- -

Selectores básicos

- - - -

Combinadores

- - - -

Pseudo-clases

- -
-
    -
  • {{ Cssxref(":active") }}
    • -
  • {{ Cssxref(':any')}}
    • -
  • {{ Cssxref(':any-link')}}
    • -
  • {{ Cssxref(":checked") }}
    • -
  • {{ Cssxref(":default") }}
    • -
  • {{ Cssxref(":defined") }}
    • -
  • {{ Cssxref(":dir", ":dir()")}}
    • -
  • {{ Cssxref(":disabled") }}
    • -
  • {{ Cssxref(":empty") }}
    • -
  • {{ Cssxref(":enabled") }}
    • -
  • {{ Cssxref(":first") }}
    • -
  • {{ Cssxref(":first-child") }}
    • -
  • {{ Cssxref(":first-of-type") }}
    • -
  • {{ Cssxref(":fullscreen") }}
    • -
  • {{ Cssxref(":focus") }}
    • -
  • {{ Cssxref(":focus-visible") }}
    • -
  • {{ Cssxref(":host") }}
    • -
  • {{ Cssxref(":host()") }}
    • -
  • {{ Cssxref(":host-context()") }}
    • -
  • {{ Cssxref(":hover") }}
    • -
  • {{ Cssxref(":indeterminate") }}
    • -
  • {{ Cssxref(":in-range") }}
    • -
  • {{ Cssxref(":invalid") }}
    • -
  • {{ Cssxref(":lang", ":lang()") }}
    • -
  • {{ Cssxref(":last-child") }}
    • -
  • {{ Cssxref(":last-of-type") }}
    • -
  • {{ Cssxref(":left") }}
    • -
  • {{ Cssxref(":link") }}
    • -
  • {{ Cssxref(":not", ":not()") }}
    • -
  • {{ Cssxref(":nth-child", ":nth-child()") }}
    • -
  • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
    • -
  • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
    • -
  • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
    • -
  • {{ Cssxref(":only-child") }}
    • -
  • {{ Cssxref(":only-of-type") }}
    • -
  • {{ Cssxref(":optional") }}
    • -
  • {{ Cssxref(":out-of-range") }}
    • -
  • {{ Cssxref(":read-only") }}
    • -
  • {{ Cssxref(":read-write") }}
    • -
  • {{ Cssxref(":required") }}
    • -
  • {{ Cssxref(":right") }}
    • -
  • {{ Cssxref(":root") }}
    • -
  • {{ Cssxref(":scope") }}
    • -
  • {{ Cssxref(":target") }}
    • -
  • {{ Cssxref(":valid") }}
    • -
  • {{ Cssxref(":visited") }}
    • -
-
- -

Pseudo-elementos

- -
-
    -
  • {{ Cssxref("::after") }}
    • -
  • {{ Cssxref("::backdrop") }}
    • -
  • {{ Cssxref("::before") }}
    • -
  • {{ Cssxref("::cue") }}
    • -
  • {{ Cssxref("::first-letter") }}
    • -
  • {{ Cssxref("::first-line") }}
    • -
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::selection") }}
    • -
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • -
-
- -
-

Ver también: Una lista completa de selectores en la especificación de Nivel 3 de Selectores.

-
- -

Conceptos

- -

Sintaxis y semántica

- - - -

Valores

- - - -

Diseño

- - - -

DOM-CSS / CSSOM

- -

Tipos de objetos principales

- - - -

Métodos importantes

- -
    -
  • {{domxref("CSSStyleSheet.insertRule")}}
    • -
  • {{domxref("CSSStyleSheet.deleteRule")}}
    • -
- -

Tutoriales CSS3

- -

Estas páginas describen las nuevas tecnologías que aparecieron en CSS3, o las de CSS2.1 que no tienen mucho soporte:

- - - -

Ver también

- - diff --git a/files/es/web/css/referencia_css/mix-blend-mode/index.html b/files/es/web/css/referencia_css/mix-blend-mode/index.html deleted file mode 100644 index fc213a4ceb..0000000000 --- a/files/es/web/css/referencia_css/mix-blend-mode/index.html +++ /dev/null @@ -1,611 +0,0 @@ ---- -title: mix-blend-mode -slug: Web/CSS/Referencia_CSS/mix-blend-mode -tags: - - CSS -translation_of: Web/CSS/mix-blend-mode ---- -
{{CSSRef}}
- -

La propiedad CSS mix-blend-mode describe cómo el contenido de un elemento debe mezclarse con el contenido del elemento que está tras él y con el fondo del elemento.

- -
{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}
- - - -

Syntax

- -
/* Valores clave */
-mix-blend-mode: normal;
-mix-blend-mode: multiply;
-mix-blend-mode: screen;
-mix-blend-mode: overlay;
-mix-blend-mode: darken;
-mix-blend-mode: lighten;
-mix-blend-mode: color-dodge;
-mix-blend-mode: color-burn;
-mix-blend-mode: hard-light;
-mix-blend-mode: soft-light;
-mix-blend-mode: difference;
-mix-blend-mode: exclusion;
-mix-blend-mode: hue;
-mix-blend-mode: saturation;
-mix-blend-mode: color;
-mix-blend-mode: luminosity;
-
-/* Valores globales */
-mix-blend-mode: initial;
-mix-blend-mode: inherit;
-mix-blend-mode: unset;
-
- -

Valores

- -
-
{{cssxref("<blend-mode>")}}
-
El modo de mezcla que debería ser aplicado.
-
- -

Sintaxis formal

- -
{{csssyntax}}
- -

Ejemplos

- - - -
{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}
- -

Ejemplo vivo

- -
<svg>
-  <g class="isolate">
-    <circle cx="40" cy="40" r="40" fill="red"/>
-    <circle cx="80" cy="40" r="40" fill="lightgreen"/>
-    <circle cx="60" cy="80" r="40" fill="blue"/>
-  </g>
-</svg>
- -
circle { mix-blend-mode: screen; }
-.isolate { isolation: isolate; } /* sin aislación, el color de fondo será tenido en cuenta */
-
- -

{{EmbedLiveSample("Ejemplo_vivo", "100%", "180")}}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}{{ Spec2('Compositing') }}Definición inicial
- -

{{cssinfo}}

- -

Compatibilidad con navegadores

- - - -

{{Compat("css.properties.mix-blend-mode")}}

- -

Véase también

- -
    -
  • {{cssxref("<blend-mode>")}}
    • -
  • {{cssxref("background-blend-mode")}}
    • -
diff --git a/files/es/web/css/replaced_element/index.html b/files/es/web/css/replaced_element/index.html new file mode 100644 index 0000000000..a8bedc65a2 --- /dev/null +++ b/files/es/web/css/replaced_element/index.html @@ -0,0 +1,19 @@ +--- +title: Elemento de reemplazo +slug: Web/CSS/Elemento_reemplazo +tags: + - CSS + - CSS Referência + - Intermediate +translation_of: Web/CSS/Replaced_element +--- +
+ {{CSSRef()}}
+

Summary

+

Dentro de CSS tenemos los elementos de reemplazo, cuya representacion esta fuera del ambito de propio CSS. Son un tipo de objeto externo, por tanto su representacion es independiente de CSS. Algunos objetos que normalmente funcionan como objetos de reemplazo son {{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} o elementos de formulario como {{HTMLElement("textarea")}}, {{HTMLElement("input")}}. Algunos elementos como {{HTMLElement("audio")}} or {{HTMLElement("canvas")}} ejercen como elementos de reemplazo solo en casos especificos. Los objetos insertados a traves de las propiedades CSS {{cssxref("content")}} son objetos de reemplazo anonimos..

+

CSS gestiona elementos de reemplazo en casos concretos, por ejemplo al calcular los margenes y algunos auto valores.

+

Recuerda que algunos elementos de reemplazo, no todos, tienen dimensiones intrinsecas o linea de base establecida, las cuales son utilizadas por propiedades de CSS como {{cssxref("vertical-align")}}.

+

Ver tambien:

+
    +
  • {{CSS_key_concepts()}}
    • +
diff --git "a/files/es/web/css/resoluci\303\263n/index.html" "b/files/es/web/css/resoluci\303\263n/index.html" deleted file mode 100644 index b480413bb1..0000000000 --- "a/files/es/web/css/resoluci\303\263n/index.html" +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: -slug: Web/CSS/resolución -tags: - - CSS - - CSS tipo de datos - - Diseño - - Estilos - - Referencia -translation_of: Web/CSS/resolution ---- -
{{CSSRef}}
- -

Resumen

- -

El tipo de dato CSS <resolution>, usado en media queries,  define la densidad de píxeles de un dispositivo de salida, su resolución. Es un {{cssxref("<number>")}} inmediatamente seguido por una unidad de resolución (dpi, dpcm, ...). Como para cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.

- -

En pantallas, la longitud está relacionada a centímetros, pulgadas o píxeles CSS, no en valores físicos.

- -

Incluso si todas las unidades representan la misma resolución para el valor 0, la unidad no se puede omitir en este caso, ya que no es un {{cssxref("<length>")}}: 0 es inválida y no representa 0dpi, 0dpcm, ni 0dppx.

- -

Unidades

- -
-
dpi
-
Esta unidad representa el número de dots per inch (ppp en español), puntos por pulgada . A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, 1dpi ≈ 0.39dpcm.
-
dpcm
-
Esta unidad representa el número de  dots per centimeter (ppc en español), puntos por cm. 1 inch(pulgada) son 2.54 cm, 1dpcm ≈ 2.54dpi.
-
dppx
-
Esta unidad representa el número de puntos por unidad px. Debido a la relación fija de 1:96 CSS para CSS px, 1 px es equivalente a 96 dpi, que corresponde a la resolución predeterminada de las imágenes mostradas en CSS como se define por {{cssxref("image-resolution")}}.
-
- -

Ejemplos

- -

Éstos son algunos de los usos correctos de valores <resolution>:

- -
96dpi                                              Uso correcto: a {{cssxref("<number>")}} (here an {{cssxref("<integer>")}}) followed by the unit.
-@media print and (min-resolution: 300dpi) { ... }  El uso correcto en el contexto de una media query.
-
- -

Here are some incorrect uses:

- -
72 dpi                                             Incorecto: no hay espacios entre {{ cssxref("<number>") }} y la unidad.
-ten dpi                                            Incorecto: sólo deben ser utilizados dígitos.
-0                                                  Incorecto: la unidad se puede omitir por 0 sólo para valores {{ cssxref("<length>") }}.
-
- -

Especificación

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Values', '#resolution', '<resolution>')}}{{Spec2('CSS3 Values')}}Factorización del tipo en una especificación más genérica. Ningún cambio
{{SpecName('CSS3 Images', '#resolution-units', '<resolution>')}}{{Spec2('CSS3 Images')}}Añadida la unidad dppx
{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}{{Spec2('CSS3 Media Queries')}}Definición inicial
- -

Compatibilidad de navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico293.5 (1.9.1)[1]99.5{{CompatNo}}[2]
dppx29{{CompatGeckoDesktop("16.0")}}{{CompatUnknown}}12.10{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}[2]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}[2]
dppx{{CompatUnknown}}{{CompatGeckoMobile("16.0")}}{{CompatUnknown}}12.10{{CompatUnknown}}
-
- -

[1] Antes de Firefox 8 (Gecko 8.0), era erroneamente aceptado sólo dimensiones CSS que fueran {{cssxref("<integer>")}} seguidos por la unidad. A partir de esa versión, es compatible con cualquier dimensión ({{cssxref("<number>")}} CSS válido seguido inmediatamente por la unidad).

- -

[2] El Webkit engine no soporta resolución CSS  en la especificación, es necesario el uso del no estandar device-pixel-ratio query para el navegador Safari, ver bug 16832.

- -

Ver también

- - diff --git a/files/es/web/css/resolution/index.html b/files/es/web/css/resolution/index.html new file mode 100644 index 0000000000..b480413bb1 --- /dev/null +++ b/files/es/web/css/resolution/index.html @@ -0,0 +1,151 @@ +--- +title: +slug: Web/CSS/resolución +tags: + - CSS + - CSS tipo de datos + - Diseño + - Estilos + - Referencia +translation_of: Web/CSS/resolution +--- +
{{CSSRef}}
+ +

Resumen

+ +

El tipo de dato CSS <resolution>, usado en media queries,  define la densidad de píxeles de un dispositivo de salida, su resolución. Es un {{cssxref("<number>")}} inmediatamente seguido por una unidad de resolución (dpi, dpcm, ...). Como para cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.

+ +

En pantallas, la longitud está relacionada a centímetros, pulgadas o píxeles CSS, no en valores físicos.

+ +

Incluso si todas las unidades representan la misma resolución para el valor 0, la unidad no se puede omitir en este caso, ya que no es un {{cssxref("<length>")}}: 0 es inválida y no representa 0dpi, 0dpcm, ni 0dppx.

+ +

Unidades

+ +
+
dpi
+
Esta unidad representa el número de dots per inch (ppp en español), puntos por pulgada . A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, 1dpi ≈ 0.39dpcm.
+
dpcm
+
Esta unidad representa el número de  dots per centimeter (ppc en español), puntos por cm. 1 inch(pulgada) son 2.54 cm, 1dpcm ≈ 2.54dpi.
+
dppx
+
Esta unidad representa el número de puntos por unidad px. Debido a la relación fija de 1:96 CSS para CSS px, 1 px es equivalente a 96 dpi, que corresponde a la resolución predeterminada de las imágenes mostradas en CSS como se define por {{cssxref("image-resolution")}}.
+
+ +

Ejemplos

+ +

Éstos son algunos de los usos correctos de valores <resolution>:

+ +
96dpi                                              Uso correcto: a {{cssxref("<number>")}} (here an {{cssxref("<integer>")}}) followed by the unit.
+@media print and (min-resolution: 300dpi) { ... }  El uso correcto en el contexto de una media query.
+
+ +

Here are some incorrect uses:

+ +
72 dpi                                             Incorecto: no hay espacios entre {{ cssxref("<number>") }} y la unidad.
+ten dpi                                            Incorecto: sólo deben ser utilizados dígitos.
+0                                                  Incorecto: la unidad se puede omitir por 0 sólo para valores {{ cssxref("<length>") }}.
+
+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Values', '#resolution', '<resolution>')}}{{Spec2('CSS3 Values')}}Factorización del tipo en una especificación más genérica. Ningún cambio
{{SpecName('CSS3 Images', '#resolution-units', '<resolution>')}}{{Spec2('CSS3 Images')}}Añadida la unidad dppx
{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}{{Spec2('CSS3 Media Queries')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico293.5 (1.9.1)[1]99.5{{CompatNo}}[2]
dppx29{{CompatGeckoDesktop("16.0")}}{{CompatUnknown}}12.10{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}[2]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}[2]
dppx{{CompatUnknown}}{{CompatGeckoMobile("16.0")}}{{CompatUnknown}}12.10{{CompatUnknown}}
+
+ +

[1] Antes de Firefox 8 (Gecko 8.0), era erroneamente aceptado sólo dimensiones CSS que fueran {{cssxref("<integer>")}} seguidos por la unidad. A partir de esa versión, es compatible con cualquier dimensión ({{cssxref("<number>")}} CSS válido seguido inmediatamente por la unidad).

+ +

[2] El Webkit engine no soporta resolución CSS  en la especificación, es necesario el uso del no estandar device-pixel-ratio query para el navegador Safari, ver bug 16832.

+ +

Ver también

+ + diff --git a/files/es/web/css/rtl/index.html b/files/es/web/css/rtl/index.html deleted file mode 100644 index 1fd8c9f45d..0000000000 --- a/files/es/web/css/rtl/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: rtl -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/web/css/selectores_atributo/index.html b/files/es/web/css/selectores_atributo/index.html deleted file mode 100644 index a7b59d03c6..0000000000 --- a/files/es/web/css/selectores_atributo/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: Selectores de atributo -slug: Web/CSS/Selectores_atributo -tags: - - Atributos - - CSS - - Selectores - - Selectores de Atributo -translation_of: Web/CSS/Attribute_selectors ---- -
{{CSSRef}}
- -

El selector de atributos CSS coincide con los elementos en función de la presencia o el valor de un atributo determinado.

- -
/* Elementos <a> con un atributo title */
-a[title] {
-  color: purple;
-}
-
-/* Elementos <a> con un href que coincida con "https://example.org" */
-a[href="https://example.org"] {
-  color: green;
-}
-
-/* Elementos <a> con un href que contenga "example" */
-a[href*="example"] {
-  font-size: 2em;
-}
-
-/* Elementos <a> con un href que comience con "#" */
-a[href^="#"] {
-  color: #001978;
-}
-
-/* Elementos <a> con un href que termine en ".org" */
-a[href$=".org"] {
-  font-style: italic;
-}
-
-/* Elementos <a> cuyo atributo class contenga la palabra "logo" */
-a[class~="logo"] {
-  padding: 2px;
-}
-
- -
-
[attr]
-
Selecciona los elementos que tienen el atributo attr.
-
[attr=value]
-
Selecciona los elementos cuyo atributo attr tenga exactamente el valor value.
-
[attr~=value]
-
-

Selecciona los elementos cuyo atributo attr tenga por valor una lista de palabras separadas por espacios, una de las cuales sea value.

-
-
[attr|=value]
-
Selecciona los elementos cuyo atributo attr tenga exactamente el valor value o empiece por value seguido de un guión - (U+002D). Se puede usar para coincidencias de subcódigos en otros idiomas.
-
[attr^=value]
-
Selecciona los elementos cuyo atributo attr tenga un valor prefijado  por value.
-
[attr$=value]
-
Selecciona los elementos cuyo atributo attr cuyo valor tiene el sufijo (seguido) de value.
-
[attr*=value]
-
Selecciona los elementos cuyo atributo attr tenga un valor que contenga value.
-
[attr operator value i]
-
Agregar una i (o I) antes del corchete de cierre hace que el valor sea comparado sin distinguir entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).
-
[attr operator value s] {{Experimental_Inline}}
-
Agregar una s (o S) antes del corchete de cierre hace que el valor sea comparado distinguiendo entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).
-
- -

Ejemplos

- -

Enlaces

- -

CSS

- -
a {
-  color: blue;
-}
-
-/* Enlaces internos, comenzando con "#" */
-a[href^="#"] {
-  background-color: gold;
-}
-
-/* Enlaces con "example" en cualquier parte de la URL */
-a[href*="example"] {
-  background-color: silver;
-}
-
-/* Enlaces con "insensitive" en cualquier parte de la URL,
-   independientemente de las mayúsculas */
-a[href*="insensitive" i] {
-  color: cyan;
-}
-
-/* Enlaces que terminan en ".org" */
-a[href$=".org"] {
-  color: red;
-}
-
- -

HTML

- -
<ul>
-  <li><a href="#internal">Enlace interno</a></li>
-  <li><a href="http://example.com">Enlace de ejemplo</a></li>
-  <li><a href="#InSensitive">Enlace interno insensible Insensitive</a></li>
-  <li><a href="http://example.org">Ejemplo de enlace .org</a></li>
-</ul>
- -

Resultado

- -

{{EmbedLiveSample('Enlaces')}}

- -

Idiomas

- -

CSS

- -
/* Todos los divs con un atributo `lang` están en negrita. */
-div[lang] {
-  font-weight: bold;
-}
-
-/* Todos los divs en inglés de EE. UU. son azules. */
-div[lang~="en-us"] {
-  color: blue;
-}
-
-/* Todos los divs en portugués son verdes. */
-div[lang="pt"] {
-  color: green;
-}
-
-/* Todos los divs en chino son rojos, ya sean
-   simplificados (zh-CN) o tradicionales (zh-TW). */
-div[lang|="zh"] {
-  color: red;
-}
-
-/* Todos los divs con `data-lang` Traditional Chinese
-   son de color púrpura. */
-/* Nota: también puede usar atributos con guiones
-   sin comillas dobles */
-div[data-lang="zh-TW"] {
-  color: purple;
-}
-
- -

HTML

- -
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
-<div lang="pt">Olá Mundo!</div>
-<div lang="zh-CN">世界您好！</div>
-<div lang="zh-TW">世界您好！</div>
-<div data-lang="zh-TW">?世界您好！</div>
-
- -

Resultado

- -

{{EmbedLiveSample('Idiomas')}}

- -

Listas Ordenadas

- -

{{SeeCompatTable}}

- -

La especificación HTML requiere que el atributo {{htmlattrxref("type", "input")}} distinga entre mayúsculas y minúsculas debido a que se usa principalmente en el elemento {{HTMLElement("input")}}, tratando de usar selectores de atributos con el atributo {{htmlattrxref("type", "ol")}} de una {{HTMLElement("ol", "lista ordenada")}} no funciona sin el modificador de mayúsculas y minúsculas.

- -

CSS

- -
/*
-Los tipos de lista requieren poder distinguir entre mayúsculas
-y minúsculas debido al peculiar comportamiento que tiene HTML
-con el atributo "type"
-*/
-
-ol[type="a"] {
-  list-style-type: lower-alpha;
-  background: red;
-}
-
-ol[type="a" s] {
-  list-style-type: lower-alpha;
-  background: lime;
-}
-
-ol[type="A" s] {
-  list-style-type: upper-alpha;
-  background: lime;
-}
- -

HTML

- -
<ol type="A">
-  <li>Example list</li>
-</ol>
- -

Result

- -

{{EmbedLiveSample("HTML_ordered_lists")}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Agrega un modificador para la selección de valores de atributos insensibles a mayúsculas / minúsculas ASCII.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Definición Inicial.
- -

Compatibilidad con navegadores

- - - -

{{Compat("css.selectors.attribute")}}

- -

Ver también

- -
    -
  • Seleccionando un solo elemento:{{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}}, o {{domxref("Element.querySelector()")}}
    • -
  • Seleccionar todos los elementos coincidentes:{{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}}, o {{domxref("Element.querySelectorAll()")}}
    • -
  • Todos los métodos anteriores se implementan en base a {{domxref("ParentNode")}} mixin; vea  {{domxref("ParentNode.querySelector()")}} y {{domxref("ParentNode.querySelectorAll()")}}
    • -
diff --git a/files/es/web/css/selectores_css/index.html b/files/es/web/css/selectores_css/index.html deleted file mode 100644 index 20baaf25a6..0000000000 --- a/files/es/web/css/selectores_css/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Selectores CSS -slug: Web/CSS/Selectores_CSS -tags: - - CSS - - Referencia - - Selectores - - Selectores de CSS - - Visión general -translation_of: Web/CSS/CSS_Selectors ---- -
{{CSSRef}}
- -

Los selectores definen sobre qué elementos se aplicará un conjunto de reglas CSS.

- -

Selectores básicos

- -
-
Selector de tipo
-
Selecciona todos los elementos que coinciden con el nombre del elemento especificado.
- Sintaxis: eltname
- Ejemplo: input se aplicará a cualquier elemento {{HTMLElement('input')}}.
-
Selector de clase
-
Selecciona todos los elementos que tienen el atributo de class especificado.
- Sintaxis: .classname
- Ejemplo: .index seleccionará cualquier elemento que tenga la clase "index".
-
Selector de ID
-
Selecciona un elemento basándose en el valor de su atributo id. Solo puede haber un elemento con un determinado ID dentro de un documento.
- Sintaxis: #idname
- Ejemplo: #toc se aplicará a cualquier elemento que tenga el ID "toc".
-
Selector universal
-
Selecciona todos los elementos. Opcionalmente, puede estar restringido a un espacio de nombre específico o a todos los espacios de nombres.
- Sintaxis: * ns|* *|*
- Ejemplo: * se aplicará a todos los elementos del documento.
-
Selector de atributo
-
Selecciona elementos basándose en el valor de un determinado atributo.
- Sintaxis: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
- Ejemplo: [autoplay] seleccionará todos los elementos que tengan el atributo "autoplay" establecido (a cualquier valor).
-
- -

Combinadores

- -
-
Combinador de hermanos adyacentes
-
El combinador + selecciona hermanos adyacentes. Esto quiere decir que el segundo elemento sigue directamente al primero y ambos comparten el mismo elemento padre.
- Sintaxis: A + B
- Ejemplo: La regla h2 + p se aplicará a todos los elementos {{HTMLElement('p')}} que siguen directamente a un elemento {{HTMLElement('h2')}}.
-
Combinador general de hermanos
-
El combinador ~ selecciona hermanos. Esto quiere decir que el segundo elemento sigue al primero (no necesariamente de forma inmediata) y ambos comparten el mismo elemento padre.
- Sintaxis: A ~ B
- Ejemplo: La regla p ~ span se aplicará a todos los elementos {{HTMLElement('span')}} que siguen un elemento {{HTMLElement('p')}}.
-
Combinador de hijo
-
El combinador > selecciona los elementos que son hijos directos del primer elemento.
- Sintaxis: A > B
- Ejemplo: La regla ul > li se aplicará a todos los elementos {{HTMLElement('li')}} que son hijos directos de un elemento {{HTMLElement('ul')}}.
-
Combinador de descendientes
-
El combinador   (espacio) selecciona los elementos que son descendientes del primer elemento.
- Sintaxis: A B
- Ejemplo: La regla div span se aplicará a todos los elementos {{HTMLElement('span')}} que están dentro de un elemento {{HTMLElement('div')}}.
-
Combinador de columna {{Experimental_Inline}}
-
El combinador || selecciona los elementos especificados pertenecientes a una columna.
- Sintaxis: A || B
- Ejemplo: col || td seleccionará todos los elementos {{HTMLElement("td")}} que pertenezcan al ámbito de {{HTMLElement("col")}}.
-
- -

Pseudoclases

- -
-
Las pseudoclases permiten la selección de elementos, basada en información de estado que no está contenida en el árbol de documentos.
-
Ejemplo: La regla a:visited se aplicará a todos los elementos {{HTMLElement("a")}} que hayan sido visitados por el usuario.
-
- -

Pseudoelementos

- -
-
-

Los pseudoelementos son abstracciones del árbol que representan entidades más allá de los elementos HTML. Por ejemplo, HTML no tiene un elemento que describa la primera letra de un párrafo ni los marcadores de una lista. Los pseudoelementos representan estas entidades y nos permiten asignarles reglas CSS. De este modo podemos diseñar estas entidades de forma independiente.

-
-
Ejemplo: La regla p::first-line se aplicará a la primera línea de texto de todos los elementos {{HTMLElement('p')}}.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Añadidos el combinador de columna ||, selectores de estructura de grilla, combinadores lógicos, pseudoclases de ubicación, dimensión temporal, estado de recurso, lingüisticas y de UI, modificador para la selección de valores de atributo ASCII que distingue entre mayúsculas y minúsculas.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Añadidos el combinador ~ general de hermanos y las pseudoclases de árbol-estructural. Los pseudoelementos creados, usan un prefijo :: de dos puntos dobles. Selectores de atributos adicionales.
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}}Añadidos los combinadores > de elemento hijo y + de elementos hermanos adyacentes. Añadidos los selectores universal y de atributo.
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definición inicial.
- -

Compatibilidad en navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1{{CompatGeckoDesktop("1")}}3.03.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
-
diff --git a/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html b/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html deleted file mode 100644 index fe51517a2b..0000000000 --- a/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: 'Usando la pseudo-clase :target en selectores' -slug: 'Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores' -tags: - - CSS - - CSS3 - - Selectores -translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' ---- -

When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience. {{CSSRef}}

- -

Como ayuda para identificar el destino de un enlace que apunta a una parte específica de un documento, los Selectores CSS3 incluyen la pseudo-clase {{ Cssxref(":target") }}.

- -

Seleccionando un objetivo (target)

- -

La pseudo-clase {{ Cssxref(":target") }} es usada para estilizar el elemento objetivo de una URI que contiene un identificador de fragmento. Por ejemplo, la URI http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example contiene el identificador de fragmento #Example. En HTML, los identificadores son valores de los atributos id o name, pues ambos comparten el mismo espacio de nombres. Por lo tanto, la URI de ejemplo apuntará al encabezado "Example" en este documento.

- -

Supongamos que se quiere estilizar cualquier elemento h2 que sea el objetivo de una URI, pero no queremos que cualquier otro elemento tenga esos mismos estilos. Es así de simple:

- -
h2:target {font-weight: bold;}
- -

También es posible crear estilos específicos para fragmentos particulares del documento. Esto se hace usando el mismo valor del identificador que se encuentra en la URI. Así, para añadir un borde al fragmento #Example, escribiremos:

- -
#Example:target {border: 1px solid black;}
- -

Aplicando estilos a todos los elementos objetivo

- -

Si lo que se intenta es crear un estilo que cubra a todos los elementos objetivo, se puede usar el selector universal:

- -
:target {color: red;}
-
- -

Ejemplo

- -

En el siguiente ejemplo, hay cinco enlaces que apuntan a elementos en el mismo documento. Seleccionar el enlace "First", por ejemplo, causará que <h1 id="one"> sea el elemento objetivo. Nótese que el documento puede desplazarse a una nueva posición, pues los elementos objetivo están ubicados en la parte superior de la ventana del navegador cuando es posible.

- -
-
<h4 id="one">...</h4> <p id="two">...</p>
-<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
-
-<a href="#one">First</a>
-<a href="#two">Second</a>
-<a href="#three">Third</a>
-<a href="#four">Fourth</a>
-<a href="#five">Fifth</a>
-
- -

Conclusión

- -

En los casos en los que un identificador de fragmento apunte a una porción del documento, los lectores pueden confundirse sobre qué parte del documento se supone que están leyendo. Darle un estilo particular al objetivo de la URI le resta confusión al lector, o incluso la elimina.

- - - - - -
-

Información del Documento Original

- -
    -
  • Autor(es): Eric Meyer, Evangelista de Estándares, Netscape Communications
    • -
  • Información Original de Copyright: Copyright © 2001-2003 Netscape. Todos los derechos reservados.
    • -
  • Nota: El artículo en inglés era originalmente parte del sitio DevEdge.
    • -
-
diff --git a/files/es/web/css/selectores_hermanos_adyacentes/index.html b/files/es/web/css/selectores_hermanos_adyacentes/index.html deleted file mode 100644 index 1200c4bd61..0000000000 --- a/files/es/web/css/selectores_hermanos_adyacentes/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Selectores de hermanos adyacentes -slug: Web/CSS/Selectores_hermanos_adyacentes -tags: - - CSS - - NeedsMobileBrowserCompatibility - - Referencia CSS - - Selectores -translation_of: Web/CSS/Adjacent_sibling_combinator ---- -

{{CSSRef("Selectors")}}

- -

Se hace referencia a este selector como selector adyacente o selector del próximo hermano. Sólo seleccionará un elemento especificado que esté inmediatamente después de otro elemento especificado.

- -

Sintaxis

- -
elemento_anterior + elemento_afectado { estilos }
-
- -

Ejemplo

- -
-
li:first-of-type + li {
-  color: red;
-}
-
- -
<ul>
-  <li>Uno</li>
-  <li>Dos</li>
-  <li>Tres</li>
-</ul>
-
- -

{{EmbedLiveSample('Example_1', 200, 100)}}

- -

Otro caso podría ser dar estilos a un span que se use de pie de foto de los siguientes elementos {{HTMLElement("img")}} :

- -
img + span.caption {
-  font-style: italic;
-}
-
- -

que coincidiría con los siguientes elementos {{HTMLElement("span")}} :

- -
<img src="photo1.jpg"><span class="caption">The first photo</span>
-<img src="photo2.jpg"><span class="caption">The second photo</span>
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacionEstadoComentarios
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Initial definition
- -

Compatibilidad entre navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

[1] Internet Explorer 7 no actualiza correctamente el estilo cuando un elemento es insertado dinámicamente antes de otro elemento que coincidía con el selector. En Internet Explorer 8, si un elemento es insertado dinámicamente haciendo click en un enlace, el estilo del first-child no se aplica hasta que el enlace pierde el foco.

- -

Ver también

- - diff --git a/files/es/web/css/selectores_hermanos_generales/index.html b/files/es/web/css/selectores_hermanos_generales/index.html deleted file mode 100644 index 96c87148b9..0000000000 --- a/files/es/web/css/selectores_hermanos_generales/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Selectores de hermanos generales -slug: Web/CSS/Selectores_hermanos_generales -tags: - - CSS - - NeedsMobileBrowserCompatibility - - Referencia CSS - - Selectores -translation_of: Web/CSS/General_sibling_combinator ---- -
{{CSSRef("Selectors")}}
- -

Resumen

- -

El combinador ~ separa dos selectores y selecciona el segundo elemento sólo si está precedido por el primero y ambos comparten un padre común.

- -

Sintaxis

- -
elemento ~ elemento { estilos }
-
- -

Ejemplo

- -
p ~ span {
-  color: red;
-}
- -
<span>Este span no es rojo.</span>
-<p>Aquí hay un párrafo.</p>
-<code>Aquí hay algo de código.</code>
-<span>Aquí hay un span. Es rojo porque va precedido de un párrafo y ambos comparten el mismo padre.</span>
- -

{{ EmbedLiveSample('Example', 320, 150) }}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}{{Spec2('CSS4 Selectors')}} 
{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}{{Spec2('CSS3 Selectors')}} 
- -

Compatibilidad entre navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}793
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

 

- -

Ver también

- -

 

- - diff --git "a/files/es/web/css/sintaxis_definici\303\263n_de_valor/index.html" "b/files/es/web/css/sintaxis_definici\303\263n_de_valor/index.html" deleted file mode 100644 index 90d5ea8b75..0000000000 --- "a/files/es/web/css/sintaxis_definici\303\263n_de_valor/index.html" +++ /dev/null @@ -1,402 +0,0 @@ ---- -title: Sintaxis de definición de valor -slug: Web/CSS/Sintaxis_definición_de_valor -translation_of: Web/CSS/Value_definition_syntax ---- -

{{CSSRef()}}

- -

La sintaxis de definición de valores CSS, una gramática formal, se utiliza para definir el conjunto de valores válidos para una propiedad o función CSS. Además de esta sintaxis, el conjunto de valores válidos puede restringirse aún más mediante restricciones semánticas (por ejemplo, para que un número sea estrictamente positivo).

- -

La sintaxis de definición describe qué valores están permitidos y las interacciones entre ellos. Un componente puede ser una palabra clave, algunos caracteres literales, ó un valor de tipo de dato de CSS o propiedad CSS.

- -

Tipos de valor de los componentes

- -

Palabras clave

- -

Palabras clave genéricas

- -

Una palabra clave con significado predefinido aparece literalmente, sin comillas, por ejemplo: auto, smaller or ease-in.

- -

El caso específico de inherit e initial

- -

Todas las propiedades CSS aceptan las palabras clave inherit e initial que son definidas vía CSS. Estas no son mostradas en la definición del valor y están implícitamente definidas.

- -

Literales

- -

En CSS, unos pocos caracteres pueden aparecer por su cuenta, como la barra ('/') o la coma (','), y son usadas en una propiedad o definición para separar sus partes. La coma es a menudo usada para separar valores en enumeraciones, o parámetros en funciones de tipo matemático; la barra a menudo separa partes de el valor que es semánticamente diferente, pero que tiene una sintaxis común. Típicamente, la barra es usada a veces en propiedades abreviadas para separar componentes que son del mismo tipo, pero pertenecen a diferentes propiedades.

- -

Ambos símbolos aparecen literalmente en una definición de valor.

- -

Tipos de dato

- -

Tipos de dato básicos

- -

Un tipo de dato usado vía CSS es definido una sola vez para todos los valores en la especificación. Se llaman tipos de datos básicos, estan representados por su nombre rodeados del símbolo '<' y '>': {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, …

- -

Tipos de dato no terminales

- -

Tipos de dato poco comunes, llamados tipos de datos no terminales, están también rodeados por  '<' y '>'.

- -

Los tipos de dato no terminales son de dos tipos::

- -
    -
  • tipos de datos que comparten el mismo nombre de propiedad, colocados entre comillas . En este caso el tipo de dato comparte el mismo conjunto de valores de la propiedad. A menudo son usados en la definición de propiedades abreviadas.
    • -
  • tipos de datos que no comparten el mismo nombre de la propiedad. Estos tipos de datos son muy cercanos a sus tipos de datos básicos. Ellos solo difieren de los tipos de datos básicos en la ubicación física de su definición: en este caso la definición es usualmente físicamente muy cercana a la definición de la propiedad que la esta usando.
    • -
- -

Combinadores de los valores de componentes

- -

Corchetes

- -

Corchetes encierran varias entidades, combinadores, y multiplicadores, luego los transforman en un solo componente. Son usados para agrupar componentes para sobreescribir las reglas de precedencia.

- -
bold [ thin && <length> ]
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • bold thin 2vh
    • -
  • bold 0 thin
    • -
  • bold thin 3.5em
    • -
- -

Pero no con:

- -
    -
  • thin bold 3em,  porque bold esta yuxtapuesto con el componente definido por los corchetes, debe aparecer antes de él.
    • -
- -

Yuxtaposición

- -

Colocar varias palabras clave, literales, o tipos de datos, uno al lado del otro, solo separados por uno o varios espacios se llama yuxtaponer. Todos los componentes yuxtapuestos son obligatorios y deben aparecer en ese orden exacto.

- -
bold <length> , thin
-
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • bold 1em, thin
    • -
  • bold 0, thin
    • -
  • bold 2.5cm, thin
    • -
  • bold 3vh, thin
    • -
- -

Pero no con:

- -
    -
  • thin 1em, bold porque las entidades deben aparecer en el orden expresado
    • -
  • bold 1em thin porque las entidades son obligatorias; la coma que es un literal debe estar presente
    • -
  • bold 0.5ms, thin porque los valores ms no son de tipo {{cssxref("<length>")}}
    • -
- -

Doble ampersand

- -

Separar dos o mas componentes por un doble ampersand, &&, significa que todas esas entidades son obligatorias pero pueden aparecer en cualquier orden.

- -
bold && <length>
-
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • bold 1em
    • -
  • bold 0
    • -
  • 2.5cm bold
    • -
  • 3vh bold
    • -
- -

Pero no con:

- -
    -
  • bold porque ambos componentes deben aparecer en el valor
    • -
  • bold 1em bold porque ambos componentes deben aparecer solo una vez
    • -
- -
Nota: yuxtaposición tiene precedencia sobre el doble ampersand, esto quiere decir que bold thin && <length> es equivalente a [ bold thin ] && <length>. Que describe a bold thin <length> ó <length> bold thin pero no a  bold <length> thin.
- -

Barra doble

- -

Separar dos o mas componentes por una barra doble, ||, significa que todas las entidades son opcionales: al menos una debe estar presente, y pueden aparecer en cualquier orden. Típicamente ésto es usado para definir los diferentes valores de una propiedad abreviada.

- -
<'border-width'> || <'border-style'> || <'border-color'>
-
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • 1em solid blue
    • -
  • blue 1em
    • -
  • solid 1px yellow
    • -
- -

Pero no con:

- -
    -
  • blue yellow porque un componente debe aparecer al menos una vez.
    • -
  • bold  porque no es una palabra clave permitida como valor de ninguna de las entidades.
    • -
- -
Nota: el doble ampersand tiene precedencia sobre la barra doble, que significa que bold || thin && <length> es equivalente a bold || [ thin && <length> ]. Describe a bold, thin, <length>, bold thin, <length> bold, o thin <length> bold pero no bold <length> bold thin porque bold, si no es omitido debe colocarse antes o después de el componente thin && <length>
- -

Barra simple

- -

Separar dos o mas componentes con una barra simple, |, quiere decir que todas las entidades son opciones exclusivas: exactamente una de estas opciones debe estar presente. Esto es tipicamente usado para separar una lista de posibles palabras clave.

- -
<percentage> | <length> | left | center | right | top | bottom
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • 3%
    • -
  • 0
    • -
  • 3.5em
    • -
  • left
    • -
  • center
    • -
  • right
    • -
  • top
    • -
  • bottom
    • -
- -

Pero no

- -
    -
  • center 3% porque solo uno de los componentes debe estar presente
    • -
  • 3em 4.5em porque un componente debe estar presente máximo una vez.
    • -
- -
-

Note: la barra doble tiene precedencia sobre la barra simple, quiere decir que bold | thin || <length> es equivalente a bold | [ thin || <length> ]. Describe bold, thin, <length>, <length> thin, o thin <length> pero no bold <length> porque solo una entidad de cada lado del combinador | puede estar presente.

-
- -

Multiplicadores de valores de componentes

- -

Un multiplicador es un símbolo que indica cuantas veces una entidad precedente puede ser repetida. Sin un multiplicador, una entidad debe aparecer exactamente una vez.

- -

Note que los multiplicadores no pueden sumarse y tienen precedencia sobre los combinadores.

- -

Asterisco (*)

- -

El multiplicador asterisco indica que la entidad puede aparecer cero, una o varias veces.

- -
bold smaller*
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • bold
    • -
  • bold smaller
    • -
  • bold smaller smaller
    • -
  • bold smaller smaller smaller y así sucesivamente
    • -
- -

Pero no:

- -
    -
  • smaller porque bold esta yuxtapuesto y debe aparecer antes de la palabra clave smaller
    • -
- -

Suma (+)

- -

El multiplicador suma indica que la entidad puede aparecer una o varias veces.

- -
bold smaller+
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • bold smaller
    • -
  • bold smaller smaller
    • -
  • bold smaller smaller smaller y sucesivamente
    • -
- -

Pero no:

- -
    -
  • bold porque smaller debe aparecer al menos una vez
    • -
  • smaller porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller
    • -
- -

Pregunta (?)

- -

El multiplicador pregunta indica que la entidad es opcional y debe aparecer cero o una vez

- -
bold smaller?
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • bold
    • -
  • bold smaller
    • -
- -

Pero no:

- -
    -
  • bold smaller smaller porque smaller debe aparecer como máximo una vez
    • -
  • smaller bold porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller
    • -
- -

Llaves ({ })

- -

El multiplicador llaves, encierra a dos enteros A y B separados  por una coma, indica que la entidad debe aparecer al menos A veces y como mas B veces

- -
bold smaller{1,3}
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • bold smaller
    • -
  • bold smaller smaller
    • -
  • bold smaller smaller smaller
    • -
- -

Pero no:

- -
    -
  • bold porque smaller debe aparecer al menos una vez
    • -
  • bold smaller smaller smaller smaller porque smaller debe aparecer un máximo de tres veces.
    • -
  • smaller bold porque bold esta yuxtapuesto u debe aparecer antes de cualquier palabra clave smaller
    • -
- -

Hash (#)

- -

El multiplicador hash indica que la entidad puede repetirse una o mas veces (como con el multiplicador de suma) pero cada ocurrencia se separa por una coma (',').

- -
bold smaller#
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • bold smaller
    • -
  • bold smaller, smaller
    • -
  • bold smaller, smaller, smaller y así sucesivamente
    • -
- -

Pero no:

- -
    -
  • bold porque smaller debe aparecer al menos una vez
    • -
  • bold smaller smaller smaller porque las diferentes ocurrencias de smaller deben estar separadas por comas
    • -
  • smaller porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller
    • -
- -

Sumario

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SímboloNombreDescripciónEjemplo
Combinadores
 YuxtaposiciónComponentes obligatorios que deben aparecer en el mismo ordensolid <length>
&&Doble ampersandComponentes obligatorios pero que pueden aparecer en cualquier ordenlength> && <string>
||Barra dobleAl menos uno de los componentes debe estar presente, y pueden aparecer en cualquier orden<'border-image-outset'> || <'border-image-slice'>
|Barra simpleExactamente uno de los componentes debe estar presentesmaller | small | normal | big | bigger
[ ]CorchetesAgrupa componentes para sobreescribir las reglas de precedenciabold [ thin && <length> ]
Multiplicadores
 Sin multiplicadorExactamente 1 vezsolid
*Asterisco0 or more timesbold smaller*
+Suma1 o mas vecesbold smaller+
?Pregunta0 o 1 vez (es opcional)bold smaller?
{A,B}LlavesAl menos A veces, como mas B vecesbold smaller{1,3}
#Hash1 o mas veces, pero cada ocurrencia separada por una coma (',')bold smaller#
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Values', '#value-defs', 'Value definition syntax') }}{{ Spec2('CSS3 Values') }}Desde {{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}, añade el multiplicador hash
{{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}{{ Spec2('CSS2.1') }}Desde {{ SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}, añade el combinador doble ampersand
{{SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}{{ Spec2('CSS1') }}Definición inicial
- -

Vea también

- -
    -
  • {{ CSS_key_concepts() }}
    • -
diff --git a/files/es/web/css/specificity/index.html b/files/es/web/css/specificity/index.html new file mode 100644 index 0000000000..6a42fdb53f --- /dev/null +++ b/files/es/web/css/specificity/index.html @@ -0,0 +1,239 @@ +--- +title: Especificidad +slug: Web/CSS/Especificidad +tags: + - CSS + - Ejemplo + - Guía + - Principiante + - Web +translation_of: Web/CSS/Specificity +--- +

La especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados. La especificidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de selectores CSS.

+ +

¿Cómo se calcula?

+ +

La especificidad es un peso (importancia o valor) que se le asigna a una declaración CSS dada, determinada por el número correspondiente de cada tipo de selector. Cuando varias declaraciones tienen igual especificidad, se aplicará al elemento la última declaración encontrada en el CSS. La especificidad solo se aplica cuando el mismo elemento es objetivo de múltiples declaraciones. Según las reglas de CSS, en caso de que un elemento sea objeto de una declaración directa, esta siempre tendrá preferencia sobre las reglas heredadas de su ancestro.

+ +
+

Nota: La proximidad de elementos en el árbol del documento no tiene efecto en la especificidad.

+
+ +

Tipos de selectores

+ +

La siguiente lista de tipos de selectores incrementa en función de la especificidad:

+ +
    +
  1. Selectores de tipo (p.e., h1) y pseudo-elementos (p.e., ::before).
    2. +
  2. Selectores de clase (p.e., .example), selectores de atributos (p.e., [type="radio"]) y pseudo-clases (p.e., :hover).
    3. +
  3. Selectores de ID (p.e., #example).
    4. +
+ +

El selector universal ({{CSSxRef("Universal_selectors", "*")}}), los combinadores ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, ' ', {{CSSxRef("Column_combinator", "||")}}) y la pseudo-clase de negación ({{CSSxRef(":not", ":not()")}}) no tienen efecto sobre la especificidad. (Sin embargo, los selectores declarados dentro de :not() si lo tienen.)

+ +

Para más información, visita "Especificidad" en "Cascada y herencia", también puedes visitar: https://specifishity.com

+ +

Los estilos inline añadidos a un elemento (p.e., style="font-weight:bold") siempre sobrescriben a cualquier estilo escrito en hojas de estilo externas, por lo que se puede decir que tienen la mayor especificidad.

+ +

La excepción !important

+ +

Cuando se emplea important en una declaración de estilo, esta declaración sobrescribe a cualquier otra. Aunque técnicamente !important  no tiene nada que ver con especificidad, interactúa directamente con esta. Sin embargo, el uso de !important es una mala práctica y debería evitarse porque hace que el código sea más difícil de depurar al romper la cascada (artículo en inglés) natural de las hojas de estilo. Cuando dos declaraciones en conflicto con el !important son aplicadas al mismo elemento, se aplicará la declaración con mayor especificidad. 

+ +

Algunas reglas de oro:

+ +
    +
  • Busca siempre una manera de emplear la especificidad antes de considerar el uso de !important.
    • +
  • Usa !important solo en declaraciones específicas de CSS que sobrescriban CSS externo (de librerías externas como Bootstrap o normalize.css).
    • +
  • Nunca uses !important cuando estés intentando escribir un plugin/mashup.
    • +
  • Nunca uses !important en todo el código CSS.
    • +
+ +

En lugar de usar !important, considera:

+ +
    +
  1. Hacer un mejor uso de las propiedades en cascada de CSS.
    2. +
  2. +

    Usar reglas más específicas. Indicando uno o más elementos antes del elemento que estás seleccionando, la regla se vuelve más específica y gana mayor prioridad:

    + + 
    <div id="test">
+  <span>Text</span>
+</div>
+
    + + 
    div#test span { color: green; }
+div span { color: blue; }
+span { color: red; }
    +
    3. +
  3. Como un caso especial sin sentido para (2), duplicar selectores simples para aumentar la especificidad cuando no tiene nada más que especificar + 
    #myId#myId span { color: yellow; }
+.myClass.myClass span { color: orange; }
    +
    4. +
+ +

Cómo se debería usar !important:

+ +
A) Sobrescribiendo los estilos en linea
+ +
    +
  1. Tienes un archivo CSS que establece aspectos visuales de tu sitio de manera global.
    2. +
  2. Tú (u otros) usan estilos inline en los propios elementos. Esto es considerado como una muy mala práctica. 
    3. +
+ +

En este caso, puedes establecer ciertos estilos en tu archivo CSS global como importantes, superando así los estilos en línea configurados directamente en los elementos.

+ +

Ejemplo del mundo real: Algunos plugins jQuery muy mal escritos que usan estilos inline.

+ +

B) Otro escenario:

+ +
#someElement p {
+    color: blue;
+}
+
+p.awesome {
+    color: red;
+}
+ +

¿Cómo haces que los párrafos awesome se vuelvan siempre rojos, incluso los que se encuentren dentro de #someElement? Sin !important, la primera regla tendrá más especificidad y ganará a la segunda.

+ +

Cómo sobrescribir !important

+ +

A) Simplemente añade otra regla CSS con !important y, o bien da al selector una especificidad mayor (añadiendo una etiqueta, id o clase al selector), o añadiendo una regla CSS con el mismo selector en un punto posterior al ya existente. Esto funciona porque en caso de empate en especificidad, la última regla prevalece.

+ +

Algunos ejemplos con una gran especificidad:

+ +
table td    {height: 50px !important;}
+.myTable td {height: 50px !important;}
+#myTable td {height: 50px !important;}
+ +

B) O añade el mismo selector después de uno existente:

+ +
td {height: 50px !important;}
+ +

C) O reescribe la regla original para evitar el uso de !important.

+ +

Para más información, visita (en inglés):

+ +

http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css

+ +

http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean

+ +

http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css

+ +

http://stackoverflow.com/questions/11178673/how-to-override-important

+ +

http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css

+ +

La excepción :not

+ +

La pseudo-clase negación :not no es considerada una pseudo-clase para el cálculo de la especificidad. Pero los selectores colocados dentre de ella, si cuentan como selectores normales a la hora de determinar el valor de los tipos de selectores. 

+ +

Aquí tienes un pedazo de CSS:

+ +
div.outer p {
+  color:orange;
+}
+div:not(.outer) p {
+  color: lime;
+}
+
+ +

cuando se usa con el siguiente HTML:

+ +
<div class="outer">
+  <p>Esto está en el outer div.</p>
+  <div class="inner">
+    <p>Este texto está en el inner div.</p>
+  </div>
+</div>
+
+ +

Debería aparecer en pantalla como:

+ +

Esto está en el outer div
+
+ Este texto está en el inner div

+ +

Especificidad basada en la forma

+ +

La especificidad está basada en la forma de un selector. En el siguiente caso, el selector *[id="foo"] cuenta como un atributo selector para la determinación de la especificidad de un selector, incluso cuando se selecciona un ID.

+ +

Las siguientes declaraciones de estilo:

+ +
*#foo {
+  color: green;
+}
+*[id="foo"] {
+  color: purple;
+}
+
+ +

cuando se usan con este marcador:

+ +
<p id="foo">Soy un texto de ejemplo.</p>
+
+ +

Se acabarán viendo así:

+ +

Soy un texto de ejemplo

+ +

Debido a que coincide con el mismo elemento, pero el selector ID tiene una mayor especificidad.

+ +

Ignorancia de proximidad en el árbol

+ +

La proximidad de un elemento con otros a los que se hace referencia en un selector determinado, no tiene impacto en la especificidad. La siguiente declaración de estilo:

+ +
body h1 {
+  color: green;
+}
+html h1 {
+  color: purple;
+}
+
+ +

Con el siguiente HTML:

+ +
<html>
+<body>
+  <h1>¡Aquí va un título!</h1>
+</body>
+</html>
+
+ +

Se mostrará como:

+ +

¡Aquí va un título!

+ +

Porque las dos declaraciones tienen un resultado de tipo de selector igual, pero el selector html h1 se ha declarado después.

+ +

Declaración directa vs estilos heredados

+ +

Los estilos para elementos objetivo de una declaración directa siempre tienen preferencia sobre los estilos heredados, sin importar la especificidad de la regla heredada.

+ +
#parent {
+  color: green;
+}
+h1 {
+  color: purple;
+}
+ +

Con el siguiente HTML:

+ +
<html>
+<body id="parent">
+  <h1>¡Aquí va un título!</h1>
+</body>
+</html>
+ +

Se verá así:

+ +

¡Aquí va un título!

+ +

Porque el selector h1 selecciona el objetivo de manera específica, pero el color verde simplemente es heredad de su padre.

+ +

Consulta también (en inglés)

+ + diff --git a/files/es/web/css/texto_css/index.html b/files/es/web/css/texto_css/index.html deleted file mode 100644 index f0c3c934b6..0000000000 --- a/files/es/web/css/texto_css/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Texto CSS -slug: Web/CSS/Texto_CSS -tags: - - CSS - - Texto CSS - - Vista general -translation_of: Web/CSS/CSS_Text ---- -
{{CSSRef}}
- -

Texto CSS  es el módulo de CSS que define cómo realizar la manipulación de elementos de texto como los saltos de línea, la justificación, la alineación, la gestión de espacios en blanco y las transformaciones de texto.

- -

Referencia

- -

Propiedades

- -
-
    -
  • {{cssxref("hyphens")}}
    • -
  • {{cssxref("letter-spacing")}}
    • -
  • {{cssxref("line-break")}}
    • -
  • {{cssxref("overflow-wrap")}}
    • -
  • {{cssxref("tab-size")}}
    • -
  • {{cssxref("text-align")}}
    • -
  • {{cssxref("text-align-last")}}
    • -
  • {{cssxref("text-indent")}}
    • -
  • {{cssxref("text-size-adjust")}}
    • -
  • {{cssxref("text-transform")}}
    • -
  • {{cssxref("white-space")}}
    • -
  • {{cssxref("word-break")}}
    • -
  • {{cssxref("word-spacing")}}
    • -
  • {{cssxref("word-wrap")}}
    • -
-
- -

Guías

- -

None.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS Logical Properties')}}{{Spec2('CSS Logical Properties')}}Actualiza varias propiedades para que sean independientes de la direccionalidad del texto.
{{SpecName('CSS3 Text')}}{{Spec2('CSS3 Text')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definición Inicial
- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop(1.0)}}33.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0 (85)
-
diff --git a/files/es/web/css/tools/cubic_bezier_generator/index.html b/files/es/web/css/tools/cubic_bezier_generator/index.html new file mode 100644 index 0000000000..b99e7afaa3 --- /dev/null +++ b/files/es/web/css/tools/cubic_bezier_generator/index.html @@ -0,0 +1,320 @@ +--- +title: Generador de curvas de bézier +slug: Web/CSS/Herramientas/Cubic_Bezier_Generator +translation_of: Web/CSS/Tools/Cubic_Bezier_Generator +--- +
+
+
<html>
+    <canvas id="bezier" width="336" height="336">
+    </canvas>
+    <form>
+       <label for="x1">x1 = </label><input onchange="updateCanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'>
+       <label for="y1">y1 = </label><input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y1" value="0.33" class='field'>
+       <label for="x2">x2 = </label><input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="x2" value="0.14" class='field'>
+       <label for="y2">y2 = </label><input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y2" value="0.53" class='field'>
+       <br>
+       <output id="output">Log</output>
+    </form>
+</html>
+
+ +
.field {
+    width: 40px;
+}
+
+ +
function updateCanvas() {
+
+    var x1 = document.getElementById('x1').value;
+    var y1 = document.getElementById('y1').value;
+    var x2 = document.getElementById('x2').value;
+    var y2 = document.getElementById('y2').value;
+
+    drawBezierCurve(x1, y1, x2, y2);
+}
+
+const radius = 4;
+// Place needed to draw the rulers
+const rulers = 30.5;
+const margin = 10.5;
+const basic_scale_size = 5; // Size of 0.1 tick on the rulers
+var scaling; //LIMITATION: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated
+var dragSM = 0; // Drag state machine: 0 = nodrag, others = object being dragged
+
+function initCanvas() {
+    // get the canvas element using the DOM
+    var canvas = document.getElementById('bezier');
+
+    // Make sure we don't execute when canvas isn't supported
+    if (canvas.getContext) {
+        // use getContext to use the canvas for drawing
+        var ctx = canvas.getContext('2d');
+
+        scaling = Math.min(canvas.height - rulers - margin, canvas.width - rulers - margin);
+
+        canvas.onmousedown = mouseDown;
+        canvas.onmouseup = mouseUp;
+    } else {
+        alert('You need Safari or Firefox 1.5+ to see this demo.');
+    }
+}
+
+function cX(x) {
+    return x * scaling + rulers;
+}
+
+function reverseX(x) {
+    return (x - rulers) / scaling;
+}
+
+function lX(x) {
+    //Used when drawing vertical lines to prevent subpixel blur
+    var result = cX(x);
+    return Math.round(result) == result ? result + 0.5 : result;
+}
+
+function cY(y) {
+
+    return (1 - y) * scaling + margin;
+}
+
+function reverseY(y) {
+    return (margin - y) / scaling + 1;
+}
+
+function lY(y) {
+    // Used when drawing horizontal lines to prevent subpixel blur
+    var result = cY(y);
+    return Math.round(result) == result ? result + 0.5 : result;
+}
+
+function drawBezierCurve(x1, y1, x2, y2) {
+
+    // get the canvas element using the DOM
+    var canvas = document.getElementById('bezier');
+
+    // Make sure we don't execute when canvas isn't supported
+    if (canvas.getContext) {
+
+        // use getContext to use the canvas for drawing
+        var ctx = canvas.getContext('2d');
+
+
+
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        // Draw the rulers
+        ctx.beginPath();
+        ctx.strokeStyle = "black";
+
+        // Draw the Y axis
+        ctx.moveTo(cX(0), cY(0));
+        ctx.lineTo(cX(1), cY(0));
+        ctx.textAlign = "right";
+
+        for (var i = 0.1; i <= 1; i = i + 0.1) {
+            ctx.moveTo(-basic_scale_size + cX(0), lY(i));
+            if ((i == 0.5) || (i > 0.9)) {
+                ctx.moveTo(-2 * basic_scale_size + cX(0), lY(i));
+                ctx.fillText(Math.round(i * 10) / 10, -3 * basic_scale_size + cX(0), cY(i) + 4);
+                // Limitation the constant 4 should be font size dependant
+            }
+            ctx.lineTo(cX(0), lY(i));
+        }
+        ctx.stroke();
+        ctx.closePath();
+        ctx.beginPath();
+
+        // Draw the Y axis label
+        ctx.save();
+        ctx.rotate(-Math.PI / 2);
+        ctx.textAlign = "left";
+        ctx.fillText("Output (Value Ratio)", -cY(0), -3 * basic_scale_size + cX(0));
+        ctx.restore();
+
+        // Draw the X axis
+        ctx.moveTo(cX(0), cY(0));
+        ctx.lineTo(cX(0), cY(1));
+        ctx.textAlign = "center";
+        for (i = 0.1; i <= 1; i = i + 0.1) {
+            ctx.moveTo(lX(i), basic_scale_size + cY(0));
+            if ((i == 0.5) || (i > 0.9)) {
+                ctx.moveTo(lX(i), 2 * basic_scale_size + cY(0));
+                ctx.fillText(Math.round(i * 10) / 10, cX(i), 4 * basic_scale_size + cY(0));
+                // Limitation the constant 4 should be dependant of the font size
+            }
+            ctx.lineTo(lX(i), cY(0));
+        }
+
+        // Draw the X axis label
+        ctx.textAlign = "left";
+        ctx.fillText("Input (Time Duration Ratio)", cX(0), 4 * basic_scale_size + cY(0));
+        // Limitation the constant 4 should be dependant of the font size
+        ctx.stroke();
+        ctx.closePath();
+
+        // Draw the Bézier Curve
+        ctx.beginPath();
+        ctx.moveTo(cX(0), cY(0));
+        ctx.strokeStyle = 'blue';
+        ctx.bezierCurveTo(cX(x1), cY(y1), cX(x2), cY(y2), cX(1), cY(1));
+        ctx.stroke();
+        ctx.closePath();
+
+
+
+        // Draw the P2 point (with a line to P0)
+        ctx.beginPath();
+        ctx.strokeStyle = 'red';
+        ctx.moveTo(cX(x1), cY(y1));
+        ctx.lineTo(cX(0), cY(0));
+        ctx.stroke();
+        ctx.closePath();
+        ctx.beginPath();
+        ctx.moveTo(cX(x1), cY(y1));
+        ctx.arc(cX(x1), cY(y1), radius, 0, 2 * Math.PI);
+        ctx.stroke();
+        ctx.fillStyle = 'white';
+        ctx.fill();
+        ctx.closePath();
+
+
+
+        // Draw the P3 point (with a line to P1)
+        ctx.beginPath();
+        ctx.strokeStyle = 'red';
+        ctx.moveTo(cX(x2), cY(y2));
+        ctx.lineTo(cX(1), cY(1));
+        ctx.stroke();
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.moveTo(cX(x2), cY(y2));
+        ctx.arc(cX(x2), cY(y2), radius, 0, 2 * Math.PI);
+        ctx.stroke();
+        ctx.fill();
+        ctx.closePath();
+
+        // Draw the P1(1,1) point (with dashed hints)
+        ctx.beginPath();
+        ctx.moveTo(cX(1), cY(1));
+        ctx.strokeStyle = 'lightgrey';
+        ctx.lineTo(cX(0), cY(1));
+        ctx.moveTo(cX(1), cY(1));
+        ctx.lineTo(cX(1), cY(0));
+        ctx.stroke();
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.strokeStyle = "black";
+        ctx.fillStyle = "black";
+        ctx.arc(cX(1), cY(1), radius, 0, 2 * Math.PI);
+        ctx.fill();
+        ctx.stroke();
+        ctx.closePath();
+
+
+        // Draw the P0(0,0) point
+        ctx.beginPath();
+        ctx.arc(cX(0), cY(0), radius, 0, 2 * Math.PI);
+        ctx.fill();
+        ctx.stroke();
+        ctx.closePath();
+
+
+    } else {
+        alert('You need Safari or Firefox 1.5+ to see this demo.');
+    }
+}
+
+function mouseDown(e) {
+
+    var canvas = document.getElementById('bezier');
+
+    var x1 = cX(document.getElementById('x1').value);
+    var y1 = cY(document.getElementById('y1').value);
+
+    var x = e.pageX - canvas.offsetLeft;
+    var y = e.pageY - canvas.offsetTop;
+
+    var output = document.getElementById('output');
+    output.value = "(" + x + "," + y + ") should be (" + x1 + "," + y1 + ")";
+
+
+    if ((x1 + radius >= x) && (x1 - radius <= x) && (y1 + radius >= y) && (y1 - radius <= y)) {
+        var output = document.getElementById('output');
+        output.value = "P1!";
+        dragSM = 1;
+    }
+
+    var x2 = cX(document.getElementById('x2').value);
+    var y2 = cY(document.getElementById('y2').value);
+
+    if ((x2 + radius >= x) && (x2 - radius <= x) && (y2 + radius >= y) && (y2 - radius <= y)) {
+        var output = document.getElementById('output');
+        output.value = "P2!";
+        dragSM = 2;
+    }
+
+    // If we are starting a drag
+    if (dragSM != 0) {
+        canvas.onmousemove = mouseMove;
+    }
+}
+
+function mouseUp(e) {
+
+    var output = document.getElementById('output');
+    output.value = "Mouse up!";
+    dragSM = 0;
+    canvas.onmousemove = null;
+}
+
+function mouseMove(e) {
+    if (dragSM != 0) {
+        var canvas = document.getElementById('bezier');
+
+        var x = e.pageX - canvas.offsetLeft;
+        var y = e.pageY - canvas.offsetTop;
+
+        var output = document.getElementById('output');
+        output.value = "Drag!";
+
+        if (dragSM == 1) {
+            var x1 = document.getElementById('x1');
+            var y1 = document.getElementById('y1');
+            x1.value = reverseX(x);
+            x1.value = Math.round(x1.value * 10000) / 10000;
+            y1.value = reverseY(y);
+            y1.value = Math.round(y1.value * 10000) / 10000;
+            if (x1.value < 0) { x1.value = 0; }
+            if (x1.value > 1) { x1.value = 1; }
+        } else if (dragSM == 2) {
+            var x2 = document.getElementById('x2');
+            var y2 = document.getElementById('y2');
+            x2.value = reverseX(x);
+            x2.value = Math.round(x2.value * 10000) / 10000;
+            y2.value = reverseY(y);
+            y2.value = Math.round(y2.value * 10000) / 10000;
+            if (x2.value < 0) { x2.value = 0; }
+            if (x2.value > 1) { x2.value = 1; }
+        }
+        updateCanvas();
+    }
+}
+
+initCanvas();
+updateCanvas();
+
+
+ +

{{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/web/css/tools/index.html b/files/es/web/css/tools/index.html new file mode 100644 index 0000000000..59cd1febfa --- /dev/null +++ b/files/es/web/css/tools/index.html @@ -0,0 +1,28 @@ +--- +title: Herramientas +slug: Web/CSS/Herramientas +tags: + - CSS +translation_of: Web/CSS/Tools +--- +
 
+ +

CSS ofrece una serie de características poderosas que puede ser difíciles de usar, o tener un gran número de parámetros, por lo que es muy útil visualizarlos mientras se trabaja en ellos. Esta página ofrece enlaces a una serie de herramientas que le ayudarán a construir sus estilos usando estas caracteristicas.

+ +

{{LandingPageListSubpages}}

+ +

Otras herramientas

+ +
    +
  • +

    Animación CSS - Stylie

    +
    • +
  • Para comprobar la información de la pantalla del dispositivo (helpful in {{Glossary("responsive web design")}}) - mydevice.io
    • +
  • Menus CSS- cssmenumaker.com
    • +
+ +

Temas relacionados

+ + diff --git a/files/es/web/css/transiciones_de_css/index.html b/files/es/web/css/transiciones_de_css/index.html deleted file mode 100644 index 62142638c4..0000000000 --- a/files/es/web/css/transiciones_de_css/index.html +++ /dev/null @@ -1,700 +0,0 @@ ---- -title: Transiciones de CSS -slug: Web/CSS/Transiciones_de_CSS -tags: - - CSS - - Gecko - - Transiciones de CSS -translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions ---- -

{{ SeeCompatTable() }}

- -

Las transiciones CSS, parte del borrador de la especificación CSS3, proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que puedes personalizar.

- -
Nota: como la especificación de las transiciones CSS todavía se encuentra en fase de borrador, a todas las propiedades asociadas con ellas se les añade el prefijo "-moz-" para usarse en Gecko. Para la compatibilidad con WebKit, se aconseja usar también el prefijo "-webkit-" y para la compatibilidad con Opera, el prefijo "-o-". Es decir, por ejemplo,  la propiedad de transición se especificaría como -moz-transition, -webkit-transition y -o-transition.
- -

Las propiedades de transición CSS

- -

Las transiciones CSS se controlan mediante la propiedad abreviada {{ cssxref("transition") }}. Es preferible utilizar este método porque de esta forma se evita que la longitud de la lista de parámetros sea diferente, lo que puede dar lugar a tener que emplear un tiempo considerablemente largo en depurar el código CSS.

- -

Puedes controlar los componentes individuales de la transición usando las siguientes subpropiedades:

- -
-
{{ cssxref("transition-property") }}
-
Especifica el nombre o nombres de las propiedades CSS a las que deberían aplicarse las transiciones. Sólo las propiedades que se enumeran aquí son animadas durante las transiciones; los cambios en el resto de las propiedades suceden de manera instantánea como siempre.
-
{{ cssxref("transition-duration") }}
-
Especifica la duración en la que sucederán las transiciones. Puedes especificar una única duración que se aplique a todas las propiedades durante la transición o valores múltiples que permitan a cada propiedad de transición un período de tiempo diferente.
-
{{ cssxref("transition-timing-function") }}
-
Especifica la curva cúbica bézier que se usa para definir cómo se computan los valores intermedios para las propiedades.
-
{{ cssxref("transition-delay") }}
-
Define el tiempo de espera entre el momento en que se cambia una propiedad y el inicio de la transición.
-
- -

Detectar la finalización de una transición

- -

Hay un único acontecimiento que se desencadena cuando se completan las transiciones. En Firefox, el evento es transitionend, en Opera, OTransitionEnd y en WebKit es webkitTransitionEnd. Consulta la tabla de compatibilidades al final de la página si deseas más información. El evento transitionend ofrece dos propiedades:

- -
-
propertyName
-
Una cadena que indica el nombre de la propiedad CSS cuya transición se completó.
-
elapsedTime
-
Un float que indica el número de segundos que la transición se había estado ejecutando en el momento en que el acontecimiento se desencadenó. Este valor no está afectado por el valor de {{ cssxref("transition-delay") }}.
-
- -

Como es habitual, puedes usar el método {{ domxref("element.addEventListener()") }} para monitorizar este acontecimiento:

- -
el.addEventListener("transitionend", updateTransition, true);
-
- -
Nota: el evento "transitionend" no se dispara si la transición se anula debido a que el valor de la propiedad de animación es modificado antes de que la transición se complete.
- -

Propiedades que pueden ser animadas

- -

Las transiciones y las animaciones CSS pueden usarse para animar las siguientes propiedades.

- -
Nota: el conjunto de propiedades que puede animarse está sujeto a cambios, por lo tanto se recomienda evitar incluir cualquier propiedad en la lista que no anime porque en un futuro podría provocar resultados inesperados.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropiedadTipo de valor
{{ cssxref("background-color") }}{{cssxref("<color>")}}
{{ cssxref("background-image") }}solo degradado; no está implementado en Firefox (see {{ bug(536540) }})
{{ cssxref("background-position") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("background-size") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("border-color") }} (including sub-properties){{cssxref("<color>")}}
{{ cssxref("border-radius") }} (including sub-properties){{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("border-width") }} (including sub-properties){{cssxref("<length>")}}
{{ cssxref("border-spacing") }}{{cssxref("<length>")}}
{{ cssxref("bottom") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("-moz-box-flex") }}número
{{ cssxref("box-shadow") }}sombra
{{ cssxref("color") }}{{cssxref("<color>")}}
{{ cssxref("-moz-column-count") }}número
{{ cssxref("-moz-column-gap") }}{{cssxref("<length>")}}, palabras clave
{{ cssxref("-moz-column-rule-color") }}{{cssxref("<color>")}}
{{ cssxref("-moz-column-rule-width") }}{{cssxref("<length>")}}, palabras clave
{{ cssxref("-moz-column-width") }}{{cssxref("<length>")}}
{{ cssxref("clip") }}rectágulo
{{ svgattr("fill") }}pintar
{{ svgattr("fill-opacity") }}valor de opacidad
{{ svgattr("flood-color") }}{{cssxref("<color>")}} | palabras clave
{{ cssxref("font-size") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("font-size-adjust") }}números, palabras clave
{{ cssxref("font-stretch") }}palabras clave
{{ cssxref("font-weight") }}números| palabras clave (excluyendo bolder, lighter)
{{ cssxref("height") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("-moz-image-region") }}rect()
{{ cssxref("left") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("letter-spacing") }}{{cssxref("<length>")}}
{{ svgattr("lighting-color") }}{{cssxref("<color>")}} | palabras clave
{{ cssxref("line-height") }}número | {{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("margin") }} (including sub-properties){{cssxref("<length>")}}
{{ cssxref("marker-offset") }}{{cssxref("<length>")}}
{{ cssxref("max-height") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("max-width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("min-height") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("min-width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("opacity") }}número
{{ cssxref("outline-color") }}{{cssxref("<color>")}}
{{ cssxref("outline-offset") }}entero
{{ cssxref("-moz-outline-radius") }} (including sub-properties){{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("outline-width") }}{{cssxref("<length>")}}
{{ cssxref("padding") }} (including sub-properties){{cssxref("<length>")}}
{{ cssxref("right") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ svgattr("stop-color") }}{{cssxref("<color>")}} | palabras clave
{{ svgattr("stop-opacity") }}valor de opacidad
{{ svgattr("stroke") }}pintar
{{ svgattr("stroke-dasharray") }}dasharray
{{ svgattr("stroke-dashoffset") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ svgattr("stroke-miterlimit") }}miterlimit
{{ svgattr("stroke-opacity") }}valor de opacidad
{{ svgattr("stroke-width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("text-indent") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("text-shadow") }}sombra
{{ cssxref("top") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("-moz-transform-origin") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}, keywords
{{ cssxref("-moz-transform") }}transform-function
{{ cssxref("vertical-align") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}, palabras clave
{{ cssxref("visibility") }}visibilidad
{{ cssxref("width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("word-spacing") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("z-index") }}entero
- -

Cuando las listas de valores de propiedades tienen longitudes diferentes

- -

Si cualquier lista de valores de propiedades es más corta que las otras, sus valores se repiten para hacer que coincidan. Por ejemplo:

- -
div {
-  transition-property: opacity, left, top, height;
-  transition-duration: 3s, 5s;
-}
-
- -

Se considera como si fuera:

- -
div {
-  transition-property: opacity, left, top, height;
-  transition-duration: 3s, 5s, 3s, 5s;
-}
- -

De manera similar, si cualquier lista de valores de propiedades es más larga que la de {{ cssxref("transition-property") }}, se trunca, de forma que si tienes la siguiente CSS:

- -
div {
-  transition-property: opacity, left;
-  transition-duration: 3s, 5s, 2s, 1s;
-}
- -

Se interpreta como:

- -
div {
-  transition-property: opacity, left;
-  transition-duration: 3s, 5s;
-}
- -

Funciones de intervalos de transición

- -

Las funciones de intervalos determinan el cálculo de los valores intermedios de la transición. La función de intervalo puede especificarse proporcionando el gráfico de la función correspondiente, como lo definen los cuatro puntos que definen una cúbica bézier:

- -

- -

En lugar de especificar directamente una bézier, existen valores de intervalos predeterminados:

- -
    -
  • ease, equivalente a cubic-bezier(0.25, 0.1, 0.25, 1.0)
    • -
  • linear, equivalente a cubic-bezier(0.0, 0.0, 1.0, 1.0)
    • -
  • ease-in, equivalente a cubic-bezier(0.42, 0, 1.0, 1.0)
    • -
  • ease-out, equivalente a cubic-bezier(0, 0, 0.58, 1.0)
    • -
  • ease-in-out, equivalente a cubic-bezier(0.42, 0, 0.58, 1.0)
    • -
- -

Ejemplos

- -

Una muestra del efecto de transición

- -

Este sencillo ejemplo proporciona demostraciones de distintos efectos de transición sin excesivos adornos.

- -

En primer lugar, el HTML para crear los elementos sobre los que probaremos nuestras transiciones:

- -
<ul>
-  <li id="long1">Transición larga, gradual...</li>
-  <li id="fast1">Transición muy rápida...</li>
-  <li id="delay1">Transición larga de un minuto de retraso...</li>
-  <li id="easeout">Usar intervalos de alejamiento...</li>
-  <li id="linear">Usar intervalos lineales...</li>
-  <li id="cubic1">Usar cúbica bézier(0.2, 0.4, 0.7, 0.8)...</li>
-</ul>
-
- -

Cada elemento tiene su propia id.; la CSS se encarga del resto. Veamos un par de ejemplos.

- -

Usar un retraso

- -

Este ejemplo realiza una transición de tamaño de fuente de cuatro segundos con dos segundos de retraso entre el momento en que el usuario pasa el ratón por encima del elemento y el comienzo del efecto de animación:

- -
#delay1 {
-  position: relative;
-  transition-property: font-size;
-  transition-duration: 4s;
-  transition-delay: 2s;
-  font-size: 14px;
-}
-
-#delay1:hover {
-  transition-property: font-size;
-  transition-duration: 4s;
-  transition-delay: 2s;
-  font-size: 36px;
-}
-
- -

Usar una función de intervalos de transición lineales

- -

De manera predeterminada, la función de intervalos que se usa para computar los pasos intermedios durante la secuencia de animación proporciona una curva suave de aceleración y desaceleración para el efecto de animación. Si prefieres que el efecto mantenga una velocidad constante a lo largo de la animación, puedes especificar que deseas usar la función de intervalos de transición linear, tal y como se muestra a continuación.

- -
transition-timing-function: linear;
-
- -

Existen distintas funciones de intervalos estándares disponibles; consulta {{ cssxref("transition-timing-function") }} para tener más detalles.

- -

Especificar una función de intervalos cúbicos bézier

- -

Puedes controlar aún más el intervalo de la secuencia de animación si especificas tu propia curva cúbica bézier que describe la velocidad de animación. Por ejemplo:

- -
  transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);
-
- -

Establece una función de intervalo con una curva bézier definida por los puntos (0.0, 0.0), (0.2, 0.4), (0.7, 0.8) y (1.0, 1.0).

- -

Menús de resaltado

- -

Un uso común de CSS es resaltar elementos de un menú mientras el usuario desplaza el cursor del ratón por encima de ellos. Es fácil usar las transciones para hacer que el efecto sea aún más atractivo.

- -

Antes de que miremos los fragmentos de código, tal vez desees echar un vistazo a la demo en vivo (suponiendo que tu navegador admita transiciones). También puedes echar un vistazo directamente a la CSS que usa.

- -

Primero configuramos el menú usando HTML:

- -
<div class="sidebar">
-  <p><a class="menuButton" href="home">Inicio</a></p>
-  <p><a class="menuButton" href="about">Acerca de</a></p>
-  <p><a class="menuButton" href="contact">Contacto Us</a></p>
-  <p><a class="menuButton" href="links">Vínculos</a></p>
-</div>
-
- -

Después construimos la CSS para implementar el aspecto de nuestro menú. Las porciones relevantes se muestran a continuación:

- -
.menuButton {
-  position: relative;
-  transition-property: background-color, color;
-  transition-duration: 1s;
-  transition-timing-function: ease-out;
-  -webkit-transition-property: background-color, color;
-  -webkit-transition-duration: 1s;
-  -o-transition-property: background-color, color;
-  -o-transition-duration: 1s;
-  text-align: left;
-  background-color: grey;
-  left: 5px;
-  top: 5px;
-  height: 26px;
-  color: white;
-  border-color: black;
-  font-family: sans-serif;
-  font-size: 20px;
-  text-decoration: none;
-  -moz-box-shadow: 2px 2px 1px black;
-  padding: 2px 4px;
-  border: solid 1px black;
-}
-
-.menuButton:hover {
-  position: relative;
-  transition-property: background-color, color;
-  transition-duration: 1s;
-  transition-timing-function: ease-out;
-  -webkit-transition-property: background-color, color;
-  -webkit-transition-duration: 1s;
-  -o-transition-property: background-color, color;
-  -o-transition-duration: 1s;
-  background-color:white;
-  color:black;
-  -moz-box-shadow: 2px 2px 1px black;
-}
-
- -

Esta CSS establece el aspecto del menú con los colores de fondo y del texto que cambian cuando el elemento está en su estado {{ cssxref(":hover") }}.

- -

En lugar de describir el efecto con todo detalle, puedes echar un vistazo a la muestra en vivo si tu navegador admite transiciones (Firefox y WebKit nightlies, Opera 10.5).

- -

Usar eventos de transición para animar un objeto

- -

En este ejemplo, una pequeña caja con texto dentro se mueve hacia atrás y hacia delante a través de la pantalla y los colores de fondo y del texto se difuminan entre dos valores mientras tiene lugar la animación.

- -

- -

- - - -

Antes de que miremos los fragmentos de código, tal vez desees echar un vistazo a la demo en vivo (suponiendo que tu navegador admita transiciones). También puedes echar un vistazo directamente a la CSS que usa.

- -

El HTML

- -

El HTML para este ejemplo es muy sencillo:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <title>CSS Transition Demo</title>
-    <link rel="stylesheet" href="transitions.css" type="text/css">
-    <script src="transitions.js" type="text/javascript"></script>
-  </head>
-  <body onload="runDemo()">
-    <div class="slideRight">¡Esto es una caja!</div>
-  </body>
-</html>
-
- -

Lo único que hay que observar aquí es que establecemos la clase para nuestra caja en "slideRight" inicialmente y cuando el documento haya terminado de cargarse, se ejecuta la función runDemo() del código JavaScript.

- -

La CSS

- -

Para crear nuestro efecto de animación, usamos dos clases de CSS, "slideRight" y "slideLeft". Si deseas ver el código completo de CSS, puedes mirar el archivo transitions.css en su totalidad. A continuación se muestran sólo los trozos relevantes:

- -
.slideRight {
-  position: absolute;
-  transition-property: background-color, color, left;
-  transition-duration: 5s;
-  -webkit-transition-property: background-color, color, left;
-  -webkit-transition-duration: 5s;
-  -o-transition-property: background-color, color, left;
-  -o-transition-duration: 5s;
-  background-color: red;
-  left: 0%;
-  color: black;
-}
-
- -

Observa que aquí especificamos de manera explícita la propiedad de posición. Esto es necesario porque sólo aquellos elementos cuya propiedad de posición se defina de manera expresa pueden animar su posición.

- -

La propiedad {{ cssxref("transition-property") }} se usa para enumerar las propiedades CSS que deseamos animar. En este caso, las propiedades que se van a animar son {{ cssxref("background-color") }}, {{ cssxref("color") }} y {{ cssxref("left") }}. La propiedad {{ cssxref("transition-duration") }} indica que deseamos que la animación tarde 5 segundos desde que comienza hasta que termina.

- -

Se incluyen los equivalentes WebKit y Opera para permitir que el ejemplo funcione en el software correspondiente.

- -

La clase "slideRight" se usa para especificar el punto de inicio para que la animación desplace el elemento desde el borde izquierdo hasta el borde derecho de la ventana del navegador. Como tal, define la posición y el color del elemento cuando está al principio de la secuencia de animación; concretamente, el valor para su propiedad {{ cssxref("left") }} es 0%, lo que indica que comenzará en el borde izquierdo de la ventana.

- -

Se muestra a continuación la clase "slideLeft", que define el punto final de la animación, es decir, el punto en el que concluirá la animación de izquierda a derecha y cambiaremos a una animación de derecha a izquierda.

- -
.slideLeft {
-  position: absolute;
-  transition-property: background-color, color, left;
-  transition-duration: 5s;
-  -webkit-transition-property: background-color, color, left;
-  -webkit-transition-duration: 5s;
-  -o-transition-property: background-color, color, left;
-  -o-transition-duration: 5s;
-  text-align: center;
-  background-color: blue;
-  left: 90%;
-  color: white;
-  width: 100px;
-  height: 100px;
-}
-
- -

Los valores de color aquí se han cambiado para hacer que los colores de fondo y del texto cambien durante el tiempo de la secuencia de animación. Además de esto, la propiedad {{ cssxref("left") }} está aquí al 90%.

- -

El código JavaScript

- -

Una vez que hemos establecido los extremos de la secuencia de animación, lo que tenemos que hacer es iniciar la animación. Podemos hacerlo fácilmente usando JavaScript.

- -
Nota: una vez que la compatibilidad para las animaciones CSS esté disponible, el código JavaScript no será necesario para lograr este efecto.
- -

En primer lugar, la función runDemo() que se llama cuando el documento se carga para inicializar la secuencia de animación:

- -
function runDemo() {
-  var el = updateTransition();
-
-  // Configurar un controlador de eventos para invertir la dirección
-  // cuando finalice la transición.
-
-  el.addEventListener("transitionend", updateTransition, true);
-}
-
- -

Es bastante sencillo: llama a la función updateTranslation() que definiremos enseguida, cuyo trabajo es establecer la clase para el elemento que estamos animando según la dirección en la que queramos que viaje. A continuación configura un proceso de escucha de evento para observar el evento "transitionend" que se envía cuando se completa una transición; esto nos permite saber cuándo es el momento para cambiar la clase del elemento para revertir la dirección de la animación.

- -

La función updateTransition() tiene este aspecto:

- -
function updateTransition() {
-  var el = document.querySelector("div.slideLeft");
-
-  if (el) {
-    el.className = "slideRight";
-  } else {
-    el = document.querySelector("div.slideRight");
-    el.className = "slideLeft";
-  }
-
-  return el;
-}
-
- -

Esto ubica el elemento que estamos animando al buscarlo por su nombre de clase (aquí podríamos usar una id, por supuesto, pero seguidme la corriente). En primer lugar buscamos el nombre de la clase "slideLeft". Si se encuentra, cambiamos la clase del elemento a "slideRight". Esto iniciará la transición de derecha a izquierda, puesto que es el momento de que se deslice a la izquierda si el elemento está ya en el borde derecho, que será cuando llegue el evento "transitionend" y la clase del elemento sea "slideLeft" (se deslice a la izquierda).

- -

Si no se halla ningún elemento que coincida con la clase "slideLeft", buscamos el elemento que coincida con "slideRight" y cambiamos su clase a "slideLeft", comenzando de ese modo la animación en la dirección contraria.

- -

Compatibilidad de navegadores

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavegadoresCompatibilidad básicaPropiedadEvento de transición finalizada
Internet Explorer(ninguna, a partir de IE9 pp7)------
Firefox (Gecko)4.0 (2.0)-moz-transitiontransitionend
Opera10.5-o-transitionOTransitionEnd
Safari | Chrome | WebKit3.2 | yes | yes-webkit-transitionwebkitTransitionEnd
- -

Compatibilidad de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FuncionalidadChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Compatibilidad básica{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FuncionalidadAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Compatibilidad básica{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Consultar también

- -
    -
  • Módulo de transiciones CSS nivel 3
    • -
  • {{ cssxref("-moz-transition") }}
    • -
  • {{ cssxref("-moz-transition-property") }}
    • -
  • {{ cssxref("-moz-transition-duration") }}
    • -
  • {{ cssxref("-moz-transition-timing-function") }}
    • -
  • {{ cssxref("-moz-transition-delay") }}
    • -
- -

{{ HTML5ArticleTOC() }}

- -

{{ languages( { "en": "en/CSS/CSS_transitions" } ) }}

diff --git a/files/es/web/css/url()/index.html b/files/es/web/css/url()/index.html new file mode 100644 index 0000000000..2ec8f41bf0 --- /dev/null +++ b/files/es/web/css/url()/index.html @@ -0,0 +1,33 @@ +--- +title: url() +slug: Web/CSS/filter-function/url +tags: + - CSS + - Referencia +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/filter-function/url +--- +
{{cssref}}
+ +

La función de CSS url() usa un filtro SVG para cambiar la apariencia en la imagen de entrada.

+ +

Sintaxis

+ +
url(location)
+ +

Parámetros

+ +
+
location
+
La {{cssxref("<url>")}} de un archivo {{glossary("XML")}} que especifique un filtro SVG, y puede incluir un ancla a un elemento filtro específico.
+
+ +

Ejemplo

+ +
url(resources.svg#c1)
+ +

Ver también

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/es/web/css/user-modify/index.html b/files/es/web/css/user-modify/index.html new file mode 100644 index 0000000000..21b9593d93 --- /dev/null +++ b/files/es/web/css/user-modify/index.html @@ -0,0 +1,132 @@ +--- +title: '-moz-user-modify' +slug: Web/CSS/-moz-user-modify +tags: + - CSS + - No estándar(2) + - Referencia CSS +translation_of: Web/CSS/user-modify +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La propiedad -moz-user-modify determina si el contenido de un elemento puede ser editado por el usuario. Se relaciona con el atributo {{htmlattrxref("contenteditable")}} .  user-focus , que es una propiedad similar, fue propuesta como parte de los borradores iniciales de un predecesor de la especificación CSS3 UI ,pero fue rechazada por el grupo de trabajo.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave valor */
+-moz-user-modify: read-only;
+-moz-user-modify: read-write;
+-moz-user-modify: write-only;
+
+/* Valores globales */
+-moz-user-modify: inherit;
+-moz-user-modify: initial;
+-moz-user-modify: unset;
+
+ +

Valores

+ +
+
read-only
+
Valor por defecto. El contenido sólo se puede leer.
+
read-write
+
El usuario puede leer y escribir contenidos.
+
write-only
+
El usuario puede editar el contenido pero no leerlo.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

CSS

+ +
.readwrite {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+}
+
+ +

HTML

+ +
<div class="readwrite">El usuario puede cambiar este texto.</div>
+
+ +

Result

+ +

{{EmbedLiveSample("Example", 300, 30)}}

+ +

Especificaciones

+ +

user-modify en una versión inicial de la especificación CSS 3 UI (Borrador de trabajo Febrero del 2000, Working Draft February 2000 que ya ha sido reeemplazado por CSS 3 UI)

+ +

Compatibilidad con los distintos navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}} {{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}3.0 {{property_prefix("-webkit")}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] También soporta: -webkit-user-modify: read-write-plaintext-only (Se perderá el texto enriquecido).
+ Esta propiedad se llamó  -khtml-user-modify en Safari 2.0.

+ +

Ver además

+ +
    +
  • {{cssxref("-moz-user-focus")}}
    • +
  • {{cssxref("-moz-user-input")}}
    • +
  • {{cssxref("-moz-user-select")}}
    • +
diff --git a/files/es/web/css/valor_calculado/index.html b/files/es/web/css/valor_calculado/index.html deleted file mode 100644 index 9112bf97b5..0000000000 --- a/files/es/web/css/valor_calculado/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Valor calculado -slug: Web/CSS/Valor_calculado -tags: - - Referencia_CSS -translation_of: Web/CSS/computed_value ---- -


- {{ CSSRef() }}

-

Sumario

-

El valor computed value de una propiedad CSS es computado a partir de specified value de la siguiente forma:

-
    -
  • Mediante los valores especiales inherit y initial, y
    • -
  • Realizando el cómputo necesario para alcanzar el valor descrito en la línea de "Computed value" del sumario de la propiedad.
    • -
-

El cálculo necesario para el "Computed value" de una propiedad, normalmente implica convertir valores relativos (como los expresados en unidades 'em' o en porcentajes) a valores absolutos.

-

Por ejemplo: si un elemento tiene un valor especificado de font-size: 16px y padding-top: 2em, el valor computado de padding-top es 32px (el doble del tamaño de la fuente).

-

Sin embargo, para algunas propiedades (aquellas con porcentajes relativos a algo que necesita un formato para ser determinados, tales como width, margin-right, text-indent, y top) los valores especificados en porcentajes se tornan valores computados. Ademas,los números especificados sin unidades en la propiedad line-height se convierten en valores computados, según se especifica. Estos valores relativos que quedan tras realizar el cómputo, se hacen absolutos cuando se determina el used value.

-

El uso principal de computed value (ademas de ser un paso de transición entre specified value y used value) es inheritance, incluyendo la palabra clave inherit.

-

Notas

-

La API DOM getComputedStyle devuelve used value, en lugar de computed value.

-

Ver también

-

specified value, used value, actual value

-

 

-

 

-

 

-

 

-
-  
-

{{ languages( { "en": "en/CSS/computed_value", "fr": "fr/CSS/Valeur_calcul\u00e9e", "ja": "ja/CSS/computed_value", "pl": "pl/CSS/warto\u015b\u0107_wyliczona" } ) }}

diff --git a/files/es/web/css/valor_inicial/index.html b/files/es/web/css/valor_inicial/index.html deleted file mode 100644 index a6bbcdf32d..0000000000 --- a/files/es/web/css/valor_inicial/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Valor inicial -slug: Web/CSS/Valor_inicial -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/initial_value ---- -

-

<< Volver -

-

Resumen

-

El Valor inicial dado en el resumen de cada definición de propiedad CSS tiene un significado distinto según se trate de propiedades heredadas o no heredadas. -

Para propiedades heredadas, se usa el valor inicial, para el elemento raíz solamente, cuando no se ha especificado ningún valor para el elemento.

Para propiedades no heredadas se usa el valor inicial para todos los elementos, cuando no se especificó nigún valor para el elemento.

En CSS3 se propuso el valor initial para permitir a los autores especificar explícitamente éste valor inicial. -

-

Ver también

-

Propiedades heredadas y no heredadas, initial -


-

-
-

Categorías -

Interwiki Languages -

-
-{{ languages( { "en": "en/CSS/initial_value", "fr": "fr/CSS/Valeur_initiale", "ja": "ja/CSS/initial_value", "ko": "ko/CSS/initial_value", "pl": "pl/CSS/Warto\u015b\u0107_pocz\u0105tkowa" } ) }} diff --git a/files/es/web/css/value_definition_syntax/index.html b/files/es/web/css/value_definition_syntax/index.html new file mode 100644 index 0000000000..90d5ea8b75 --- /dev/null +++ b/files/es/web/css/value_definition_syntax/index.html @@ -0,0 +1,402 @@ +--- +title: Sintaxis de definición de valor +slug: Web/CSS/Sintaxis_definición_de_valor +translation_of: Web/CSS/Value_definition_syntax +--- +

{{CSSRef()}}

+ +

La sintaxis de definición de valores CSS, una gramática formal, se utiliza para definir el conjunto de valores válidos para una propiedad o función CSS. Además de esta sintaxis, el conjunto de valores válidos puede restringirse aún más mediante restricciones semánticas (por ejemplo, para que un número sea estrictamente positivo).

+ +

La sintaxis de definición describe qué valores están permitidos y las interacciones entre ellos. Un componente puede ser una palabra clave, algunos caracteres literales, ó un valor de tipo de dato de CSS o propiedad CSS.

+ +

Tipos de valor de los componentes

+ +

Palabras clave

+ +

Palabras clave genéricas

+ +

Una palabra clave con significado predefinido aparece literalmente, sin comillas, por ejemplo: auto, smaller or ease-in.

+ +

El caso específico de inherit e initial

+ +

Todas las propiedades CSS aceptan las palabras clave inherit e initial que son definidas vía CSS. Estas no son mostradas en la definición del valor y están implícitamente definidas.

+ +

Literales

+ +

En CSS, unos pocos caracteres pueden aparecer por su cuenta, como la barra ('/') o la coma (','), y son usadas en una propiedad o definición para separar sus partes. La coma es a menudo usada para separar valores en enumeraciones, o parámetros en funciones de tipo matemático; la barra a menudo separa partes de el valor que es semánticamente diferente, pero que tiene una sintaxis común. Típicamente, la barra es usada a veces en propiedades abreviadas para separar componentes que son del mismo tipo, pero pertenecen a diferentes propiedades.

+ +

Ambos símbolos aparecen literalmente en una definición de valor.

+ +

Tipos de dato

+ +

Tipos de dato básicos

+ +

Un tipo de dato usado vía CSS es definido una sola vez para todos los valores en la especificación. Se llaman tipos de datos básicos, estan representados por su nombre rodeados del símbolo '<' y '>': {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, …

+ +

Tipos de dato no terminales

+ +

Tipos de dato poco comunes, llamados tipos de datos no terminales, están también rodeados por  '<' y '>'.

+ +

Los tipos de dato no terminales son de dos tipos::

+ +
    +
  • tipos de datos que comparten el mismo nombre de propiedad, colocados entre comillas . En este caso el tipo de dato comparte el mismo conjunto de valores de la propiedad. A menudo son usados en la definición de propiedades abreviadas.
    • +
  • tipos de datos que no comparten el mismo nombre de la propiedad. Estos tipos de datos son muy cercanos a sus tipos de datos básicos. Ellos solo difieren de los tipos de datos básicos en la ubicación física de su definición: en este caso la definición es usualmente físicamente muy cercana a la definición de la propiedad que la esta usando.
    • +
+ +

Combinadores de los valores de componentes

+ +

Corchetes

+ +

Corchetes encierran varias entidades, combinadores, y multiplicadores, luego los transforman en un solo componente. Son usados para agrupar componentes para sobreescribir las reglas de precedencia.

+ +
bold [ thin && <length> ]
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold thin 2vh
    • +
  • bold 0 thin
    • +
  • bold thin 3.5em
    • +
+ +

Pero no con:

+ +
    +
  • thin bold 3em,  porque bold esta yuxtapuesto con el componente definido por los corchetes, debe aparecer antes de él.
    • +
+ +

Yuxtaposición

+ +

Colocar varias palabras clave, literales, o tipos de datos, uno al lado del otro, solo separados por uno o varios espacios se llama yuxtaponer. Todos los componentes yuxtapuestos son obligatorios y deben aparecer en ese orden exacto.

+ +
bold <length> , thin
+
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold 1em, thin
    • +
  • bold 0, thin
    • +
  • bold 2.5cm, thin
    • +
  • bold 3vh, thin
    • +
+ +

Pero no con:

+ +
    +
  • thin 1em, bold porque las entidades deben aparecer en el orden expresado
    • +
  • bold 1em thin porque las entidades son obligatorias; la coma que es un literal debe estar presente
    • +
  • bold 0.5ms, thin porque los valores ms no son de tipo {{cssxref("<length>")}}
    • +
+ +

Doble ampersand

+ +

Separar dos o mas componentes por un doble ampersand, &&, significa que todas esas entidades son obligatorias pero pueden aparecer en cualquier orden.

+ +
bold && <length>
+
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold 1em
    • +
  • bold 0
    • +
  • 2.5cm bold
    • +
  • 3vh bold
    • +
+ +

Pero no con:

+ +
    +
  • bold porque ambos componentes deben aparecer en el valor
    • +
  • bold 1em bold porque ambos componentes deben aparecer solo una vez
    • +
+ +
Nota: yuxtaposición tiene precedencia sobre el doble ampersand, esto quiere decir que bold thin && <length> es equivalente a [ bold thin ] && <length>. Que describe a bold thin <length> ó <length> bold thin pero no a  bold <length> thin.
+ +

Barra doble

+ +

Separar dos o mas componentes por una barra doble, ||, significa que todas las entidades son opcionales: al menos una debe estar presente, y pueden aparecer en cualquier orden. Típicamente ésto es usado para definir los diferentes valores de una propiedad abreviada.

+ +
<'border-width'> || <'border-style'> || <'border-color'>
+
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • 1em solid blue
    • +
  • blue 1em
    • +
  • solid 1px yellow
    • +
+ +

Pero no con:

+ +
    +
  • blue yellow porque un componente debe aparecer al menos una vez.
    • +
  • bold  porque no es una palabra clave permitida como valor de ninguna de las entidades.
    • +
+ +
Nota: el doble ampersand tiene precedencia sobre la barra doble, que significa que bold || thin && <length> es equivalente a bold || [ thin && <length> ]. Describe a bold, thin, <length>, bold thin, <length> bold, o thin <length> bold pero no bold <length> bold thin porque bold, si no es omitido debe colocarse antes o después de el componente thin && <length>
+ +

Barra simple

+ +

Separar dos o mas componentes con una barra simple, |, quiere decir que todas las entidades son opciones exclusivas: exactamente una de estas opciones debe estar presente. Esto es tipicamente usado para separar una lista de posibles palabras clave.

+ +
<percentage> | <length> | left | center | right | top | bottom
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • 3%
    • +
  • 0
    • +
  • 3.5em
    • +
  • left
    • +
  • center
    • +
  • right
    • +
  • top
    • +
  • bottom
    • +
+ +

Pero no

+ +
    +
  • center 3% porque solo uno de los componentes debe estar presente
    • +
  • 3em 4.5em porque un componente debe estar presente máximo una vez.
    • +
+ +
+

Note: la barra doble tiene precedencia sobre la barra simple, quiere decir que bold | thin || <length> es equivalente a bold | [ thin || <length> ]. Describe bold, thin, <length>, <length> thin, o thin <length> pero no bold <length> porque solo una entidad de cada lado del combinador | puede estar presente.

+
+ +

Multiplicadores de valores de componentes

+ +

Un multiplicador es un símbolo que indica cuantas veces una entidad precedente puede ser repetida. Sin un multiplicador, una entidad debe aparecer exactamente una vez.

+ +

Note que los multiplicadores no pueden sumarse y tienen precedencia sobre los combinadores.

+ +

Asterisco (*)

+ +

El multiplicador asterisco indica que la entidad puede aparecer cero, una o varias veces.

+ +
bold smaller*
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold
    • +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller y así sucesivamente
    • +
+ +

Pero no:

+ +
    +
  • smaller porque bold esta yuxtapuesto y debe aparecer antes de la palabra clave smaller
    • +
+ +

Suma (+)

+ +

El multiplicador suma indica que la entidad puede aparecer una o varias veces.

+ +
bold smaller+
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller y sucesivamente
    • +
+ +

Pero no:

+ +
    +
  • bold porque smaller debe aparecer al menos una vez
    • +
  • smaller porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller
    • +
+ +

Pregunta (?)

+ +

El multiplicador pregunta indica que la entidad es opcional y debe aparecer cero o una vez

+ +
bold smaller?
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold
    • +
  • bold smaller
    • +
+ +

Pero no:

+ +
    +
  • bold smaller smaller porque smaller debe aparecer como máximo una vez
    • +
  • smaller bold porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller
    • +
+ +

Llaves ({ })

+ +

El multiplicador llaves, encierra a dos enteros A y B separados  por una coma, indica que la entidad debe aparecer al menos A veces y como mas B veces

+ +
bold smaller{1,3}
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller
    • +
+ +

Pero no:

+ +
    +
  • bold porque smaller debe aparecer al menos una vez
    • +
  • bold smaller smaller smaller smaller porque smaller debe aparecer un máximo de tres veces.
    • +
  • smaller bold porque bold esta yuxtapuesto u debe aparecer antes de cualquier palabra clave smaller
    • +
+ +

Hash (#)

+ +

El multiplicador hash indica que la entidad puede repetirse una o mas veces (como con el multiplicador de suma) pero cada ocurrencia se separa por una coma (',').

+ +
bold smaller#
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold smaller
    • +
  • bold smaller, smaller
    • +
  • bold smaller, smaller, smaller y así sucesivamente
    • +
+ +

Pero no:

+ +
    +
  • bold porque smaller debe aparecer al menos una vez
    • +
  • bold smaller smaller smaller porque las diferentes ocurrencias de smaller deben estar separadas por comas
    • +
  • smaller porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller
    • +
+ +

Sumario

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SímboloNombreDescripciónEjemplo
Combinadores
 YuxtaposiciónComponentes obligatorios que deben aparecer en el mismo ordensolid <length>
&&Doble ampersandComponentes obligatorios pero que pueden aparecer en cualquier ordenlength> && <string>
||Barra dobleAl menos uno de los componentes debe estar presente, y pueden aparecer en cualquier orden<'border-image-outset'> || <'border-image-slice'>
|Barra simpleExactamente uno de los componentes debe estar presentesmaller | small | normal | big | bigger
[ ]CorchetesAgrupa componentes para sobreescribir las reglas de precedenciabold [ thin && <length> ]
Multiplicadores
 Sin multiplicadorExactamente 1 vezsolid
*Asterisco0 or more timesbold smaller*
+Suma1 o mas vecesbold smaller+
?Pregunta0 o 1 vez (es opcional)bold smaller?
{A,B}LlavesAl menos A veces, como mas B vecesbold smaller{1,3}
#Hash1 o mas veces, pero cada ocurrencia separada por una coma (',')bold smaller#
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Values', '#value-defs', 'Value definition syntax') }}{{ Spec2('CSS3 Values') }}Desde {{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}, añade el multiplicador hash
{{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}{{ Spec2('CSS2.1') }}Desde {{ SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}, añade el combinador doble ampersand
{{SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}{{ Spec2('CSS1') }}Definición inicial
+ +

Vea también

+ +
    +
  • {{ CSS_key_concepts() }}
    • +
diff --git a/files/es/web/events/abort/index.html b/files/es/web/events/abort/index.html deleted file mode 100644 index 641d144c77..0000000000 --- a/files/es/web/events/abort/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: abort -slug: Web/Events/abort -translation_of: Web/API/HTMLMediaElement/abort_event -translation_of_original: Web/Events/abort ---- -

The abort event is fired when the loading of a resource has been aborted.

- -

Información general

- -
-
Specification
-
DOM L3
-
Interface
-
UIEvent if generated from a user interface, Event otherwise.
-
Bubbles
-
No
-
Cancelable
-
No
-
Target
-
Element
-
Default Action
-
None
-
- -

Propiedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
diff --git a/files/es/web/events/animationend/index.html b/files/es/web/events/animationend/index.html deleted file mode 100644 index 8bca8b046f..0000000000 --- a/files/es/web/events/animationend/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: animationend -slug: Web/Events/animationend -translation_of: Web/API/HTMLElement/animationend_event ---- -

El evento animationend es lanzado cuando una animación CSS se ha completado.

- -

Información General

- -
-
Especificación
-
CSS Animations
-
Interface
-
AnimationEvent
-
Bubbles
-
Si
-
Cancelable
-
No
-
Target
-
Document, Element
-
Acción por defecto
-
None
-
- -

Propiedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropiedadTipoDescripción
target {{ReadOnlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{ReadOnlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{ReadOnlyInline}}booleanDoes the event normally bubble?
cancelable {{ReadOnlyInline}}booleanIs it possible to cancel the event?
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}The name of the CSS property associated with the transition.
elapsedTime {{ReadOnlyInline}}FloatThe amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an "animationstart" event, the elapsedTime is zero unless there was a negative value for animation-delay, in which case the event will be fired with an elapsedTime of (-1 * delay).
- -

Eventos relacionados

- -
    -
  • {{Event("animationstart")}}
    • -
  • {{Event("animationend")}}
    • -
  • {{Event("animationiteration")}}
    • -
- -

Ver también

- - diff --git a/files/es/web/events/beforeunload/index.html b/files/es/web/events/beforeunload/index.html deleted file mode 100644 index 98fb747ae9..0000000000 --- a/files/es/web/events/beforeunload/index.html +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: beforeunload -slug: Web/Events/beforeunload -translation_of: Web/API/Window/beforeunload_event ---- -
El evento beforeunload es disparado cuando la ventana, el documento y sus recursos estan a punto de ser descargados. El documento todavia es visible y el evento todavia es cancelable en este punto.
- -
 
- -

Si es asignado un string a la propiedad del objeto Evento returnValue, una caja de dialogo aparece, preguntando al usuario que confirme que dejara la pagina(mirar el ejemplo de abajo).  Algunos navegadores muestran el string devuelto en una caja de dialogos, otros muestran un mensaje fijo. Si no se provee ningun valor, el evento procede silenciosamente.

- -
-

Nota:Para combatir pop-ups indeseados, los navegadores pueden no mostrar mensajes creados en manejadores del evento beforeunload a menos que se haya interactuado con la pagina, o incluso sin que se haya interactuado en nada con esta.

-
- - - - - - - - - - - - - - - - - - - - -
BurbujasNo
CancelableSi
Objetos de destinodefaultView
Interfaz{{domxref("Event")}}
- -

Propiedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropiedadTipoDescripcion
target {{readOnlyInline}}{{domxref("EventTarget")}}El evento objetivo(el objetivo superior en el arbol del DOM).
type {{readOnlyInline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readOnlyInline}}{{jsxref("Boolean")}}El evento normalmente burbujea?
cancelable {{readOnlyInline}}{{jsxref("Boolean")}}Es posible cancelar el evento?
returnValue{{domxref("DOMString")}}El valor actual devuelto por el evento (el mensaje que se le mostrara al usuario).
- -

Ejemplos

- -
window.addEventListener("beforeunload", function (event) {
-  event.returnValue = "\o/";
-});
-
-// es equivalente a
-window.addEventListener("beforeunload", function (event) {
-  event.preventDefault();
-});
- -

Navegadores basados en WebKit no siguen las especificaciones para la caja de dialogos. Un ejemplo que funcione con distintos navegadores seria similar al siguiente:

- -
window.addEventListener("beforeunload", function (e) {
-  var confirmationMessage = "\o/";
-
-  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
-  return confirmationMessage;              // Gecko, WebKit, Chrome <34
-});
- -

Notas

- -

A partir del 25 de Mayo del 2011, la especificion HTML5 establece que llamadas a los metodos {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, y {{domxref("window.prompt()")}}pueden ser ignoradas durante este evento.Mire las especificaciones de HTML5 para mas detalles.

- -

Varios navegadores ignoran el resultado del evento y no le preguntan al usuario por confirmacion en absoluto. El documento siempre se descargara automaticamente. Firefox tiene un switch llamado dom.disable_beforeunload en about:config  para habilitar este comportamiento.

- -

Usando este manejador de evento tu pagina previene que Firefox cambie el cache de la pagina a uno en memoria bfcache. Mire Usando el almacenamiento en cache Firefox 1.5 para detalles.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificacionEstadoComentario
{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}{{Spec2("HTML5 W3C")}}Definicion inicial
- -

Compatibilidad con navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte basico{{CompatChrome(1.0)}}{{CompatVersionUnknown}}14123
Texto personalizado soporte removido{{CompatChrome(51.0)}}{{CompatNo}}{{CompatGeckoMobile("44.0")}} 389.1
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracteristicaAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Soporte basico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}(no) defect{{CompatVersionUnknown}}
Texto personalizado soporte removido{{CompatUnknown}}{{CompatChrome(51.0)}}{{CompatNo}}{{CompatGeckoMobile("44.0")}}   {{CompatChrome(51.0)}}
-
- -

Mire tambien

- - diff --git a/files/es/web/events/blur/index.html b/files/es/web/events/blur/index.html deleted file mode 100644 index b54ad3e6a6..0000000000 --- a/files/es/web/events/blur/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: blur (evento) -slug: Web/Events/blur -tags: - - DOM -translation_of: Web/API/Element/blur_event ---- -

El evento blur es disparado cuando un elemento ha perdido su foco. La diferencia principal entre este evento y focusout es que sólo el último se propaga (bubbles).

- -

Información General

- -
-
Especificación
-
DOM L3
-
Interfaz
-
{{domxref("FocusEvent")}}
-
Burbujas
-
No
-
Cancelable
-
No
-
Objetivo
-
Element
-
Acción por defecto
-
Ninguna.
-
- -

{{NoteStart}}El valor de  {{domxref("Document.activeElement")}} varía a traves de navegadores mientras este evento está siendo manejado ({{bug(452307)}}): IE10 lo agrega al elemento al cual el foco se movera, mientras Firefox y Chrome muy seguido lo agregan al cuerpo del documento.{{NoteEnd}}

- -

Propiedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropiedadTipoDescripción
target {{readonlyInline}}{{domxref("EventTarget")}}Objetivo del evento (elemento DOM)
type {{readonlyInline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Si el elemento normalmente se propaga o no.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Si el evento es cancelable o no.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)null
- -

Delegación de eventos

- -

Hay dos maneras de implementar la delegación de eventos para este evento: usando el evento focusout en exploradores que lo soporten, o cambiando el parámetro "useCapture" de addEventListener a true:

- -

Contenido HTML

- -
<form id="form">
-  <input type="text" placeholder="text input">
-  <input type="password" placeholder="password">
-</form>
- -

Contenido JavaScript

- -
var form = document.getElementById("form");
-form.addEventListener("focus", function( event ) {
-  event.target.style.background = "pink";
-}, true);
-form.addEventListener("blur", function( event ) {
-  event.target.style.background = "";
-}, true);
- -

{{EmbedLiveSample('Delegación_de_eventos')}}

- -

Compatibilidad en navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]612.15.1
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome para AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.053{{CompatVersionUnknown}}{{CompatUnknown}}10.012.15.1
-
- -

[1] Antes de Gecko 24 {{geckoRelease(24)}} la interfaz para este evento era {{domxref("Event")}}, no {{domxref("FocusEvent")}}. Vea ({{bug(855741)}}).

- -

Eventos relacionados

- -
    -
  • {{event("focus")}}
    • -
  • {{event("blur")}}
    • -
  • {{event("focusin")}}
    • -
  • {{event("focusout")}}
    • -
diff --git a/files/es/web/events/domcontentloaded/index.html b/files/es/web/events/domcontentloaded/index.html deleted file mode 100644 index ffbf3accbc..0000000000 --- a/files/es/web/events/domcontentloaded/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: DOMContentLoaded -slug: Web/Events/DOMContentLoaded -translation_of: Web/API/Window/DOMContentLoaded_event ---- -

El evento DOMContentLoaded es disparado cuando el documento HTML ha sido completamente cargado y parseado, sin esperar hojas de estilo, images y subframes para  finalizar la carga. Un evento muy diferente - load - debería ser usado solo para detectar una carga completa de la página. Es un error increíblemente popular usar load cuando DOMContentLoaded sería mucho más apropiado, así que úsalo con cuidado.

- -

JavaScript síncrono pausa el parseo del DOM.

- -

También hay mucho propósito general y bibliotecas autónomas que ofrecen métodos de navegador cruzado para detectar que el DOM está preparado.

- -

Speeding up

- -

If you want DOM to get parsed as fast as possible after the user had requested the page, some things you could do is turn your JavaScript asynchronous and to optimize loading of stylesheets which if used as usual, slow down page load due to being loaded in parallel, "stealing" traffic from the main html document.

- -

General info

- -
-
Specification
-
HTML5
-
Interface
-
Event
-
Bubbles
-
Yes
-
Cancelable
-
Yes (although specified as a simple event that isn't cancelable)
-
Target
-
Document
-
Default Action
-
None.
-
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

Example

- -
<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    console.log("DOM fully loaded and parsed");
-  });
-</script>
-
- -
<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    console.log("DOM fully loaded and parsed");
-  });
-
-for(var i=0; i<1000000000; i++)
-{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
-</script>
-
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0[1]{{CompatGeckoDesktop("1")}}[1]9.0[2]9.03.1[1]
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}[1]{{CompatGeckoMobile("1")}}[1]{{CompatUnknown}}[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
-
- -

[1] Bubbling for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4.

- -

[2] Internet Explorer 8 supports the readystatechange event, which can be used to detect when the DOM is ready. In earlier versions of Internet Explorer, this state can be detected by repeatedly trying to execute document.documentElement.doScroll("left");, as this snippet will throw an error until the DOM is ready.

- - - -
    -
  • {{event("DOMContentLoaded")}}
    • -
  • {{event("readystatechange")}}
    • -
  • {{event("load")}}
    • -
  • {{event("beforeunload")}}
    • -
  • {{event("unload")}}
    • -
diff --git a/files/es/web/events/load/index.html b/files/es/web/events/load/index.html deleted file mode 100644 index f38e214839..0000000000 --- a/files/es/web/events/load/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: load -slug: Web/Events/load -tags: - - Evento -translation_of: Web/API/Window/load_event ---- -

El evento load se dispara cuando un recurso y sus recursos dependientes han terminado de cargar.

- -

 

- -

Ejemplos

- -

Window

- -
<script>
-  window.addEventListener("load", function(event) {
-    console.log("'Todos los recursos terminaron de cargar!");
-  });
-</script>
- -

Elemento script

- -
<script>
-  var script = document.createElement("script");
-  script.addEventListener("load", function(event) {
-    console.log("Script terminó de cargarse y ejecutarse");
-  });
-  script.src = "http://example.com/example.js";
-  script.async = true;
-  document.getElementsByTagName("script")[0].parentNode.appendChild(script);
-</script>
- -

Información general

- -
-
Especificación
-
DOM L3
-
Interfaz
-
UIEvent
-
Propagación
-
No
-
Cancelable
-
No
-
Objetivo
-
Window,Document,Element
-
Por defecto Acción
-
None.
-
- -

Propiedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropiedadTipoDescripción
target {{readonlyInline}}{{domxref("EventTarget")}}El objetivo del evento (el objetivo superior en el árbol DOM).
type {{readonlyInline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readonlyInline}}{{domxref("Boolean")}}Si el elemento normalmente se propaga (bubbles) o no.
cancelable {{readonlyInline}}{{domxref("Boolean")}}Si el evento es cancelable o no.
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView", "document.defaultView")}} (window del documento)
detail {{readonlyInline}}long (float)0.
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('UI Events', '#event-type-load', 'load')}}{{Spec2('UI Events')}} 
{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}{{Spec2('HTML WHATWG')}}Esto enlaza con la sección en los pasos que se llevan a cabo al final de cargar un documento. Los eventos 'load' también se disparan a muchos elementos. Y tenga en cuenta que hay muchos lugares en la especificación que hacen referencia a cosas que pueden "retrasar el evento de carga".
- -

Eventos relacionados

- -
    -
  • {{event("DOMContentLoaded")}}
    • -
  • {{event("readystatechange")}}
    • -
  • {{event("load")}}
    • -
  • {{event("beforeunload")}}
    • -
  • {{event("unload")}}
    • -
diff --git a/files/es/web/events/loadend/index.html b/files/es/web/events/loadend/index.html deleted file mode 100644 index 39e528634d..0000000000 --- a/files/es/web/events/loadend/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: loadend -slug: Web/Events/loadend -tags: - - eventos -translation_of: Web/API/XMLHttpRequest/loadend_event ---- -

El evento loadend es emitido cuando el progreso de la carga de un recurso se ha detenido (e.g. despues que "error", "abort", o "load" han sido emitidos). Por ejemplo, esto aplica a las llamadas de {{domxref("XMLHttpRequest")}}, y al contenido de un elemento {{htmlelement("img")}} o {{htmlelement("video")}}.

- -

Información General

- -
-
Especificación
-
Progress
-
Interfaz
-
ProgressEvent
-
Bubbles
-
No
-
Cancelable
-
No
-
Target
-
{{domxref("HTMLImageElement")}}, Por Ejemplo
-
Acción por Defecto
-
None
-
- -

Propiedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
lengthComputable {{readonlyInline}}{{jsxref("Boolean")}}Specifies whether or not the total size of the transfer is known. Read only.
loaded {{readonlyInline}}unsigned long (long)The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.
total {{readonlyInline}}unsigned long (long)The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.
- -

Eventos Relacionados

- -
    -
  • {{event("loadstart")}}
    • -
  • {{event("progress")}}
    • -
  • {{event("error")}}
    • -
  • {{event("abort")}}
    • -
  • {{event("load")}}
    • -
  • {{event("loadend")}}
    • -
- -

Ver También

- - diff --git a/files/es/web/events/pointerlockchange/index.html b/files/es/web/events/pointerlockchange/index.html deleted file mode 100644 index 2d5af4205b..0000000000 --- a/files/es/web/events/pointerlockchange/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: pointerlockchange -slug: Web/Events/pointerlockchange -translation_of: Web/API/Document/pointerlockchange_event ---- -

El evento pointerlockchange es disparado cuando el cursor del navegador es bloqueado o desbloqueado.

- -

Información general

- -
-
Specification
-
Pointer Lock
-
Interface
-
Event
-
Bubbles
-
Yes
-
Cancelable
-
No
-
Target
-
Document
-
Default Action
-
None
-
- -

Propiedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

Ejemplo

- -
//Ten en cuenta que el nombre del evento, en este caso "pointerlockchange" puede variar según el navegador.
-document.addEventListener("pointerlockchange", function( event ) {
-    // El objetivo, parámetro "target", del objeto "event" es siempre el objeto "document".
-    // para recuperar el objeto que recibe el bloqueo/desbloqueo es document.pointerlockElement.
-    document.pointerLockElement;
-
-});
-
- -

Eventos relacionados

- - - -

Véase también:

- - diff --git a/files/es/web/events/transitioncancel/index.html b/files/es/web/events/transitioncancel/index.html deleted file mode 100644 index 3f9c622bd2..0000000000 --- a/files/es/web/events/transitioncancel/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: transitioncancel -slug: Web/Events/transitioncancel -tags: - - DOM - - Evento - - Referencia - - eventos -translation_of: Web/API/HTMLElement/transitioncancel_event ---- -

{{SeeCompatTable}}

- -

El evento transitioncancel es lanzado cuando una transición CSS es cancelada.

- -

Véase {{domxref("GlobalEventHandlers.ontransitioncancel")}} para mas información y ejemplos.

- -

Información general

- -
-
Interfaz
-
{{domxref("TransitionEvent")}}
-
Burbuja
-
Sí
-
Cancelable
-
No
-
Objetivo
-
{{domxref("document")}}, {{domxref("element")}}
-
Acción por defecto
-
Ninguna
-
- -

Propiedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropiedadTipoDescripción
target {{readonlyinline}}{{domxref("EventTarget")}}El objetivo del evento (the topmost target in the DOM tree).
type {{readonlyinline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readonlyinline}}{{domxref("Boolean")}}Si el evento normalmente se propaga o no
cancelable {{readonlyinline}}{{domxref("Boolean")}}Si el evento es cancelable o no
propertyName{{readonlyinline}}{{domxref("DOMString")}}El nombre de la propiedad CSS asociada con la transición.
elapsedTime{{readonlyinline}}{{domxref("Float")}} -

La cantidad de tiempo que ha durado la transición, en segundos, desde el momento en que el evento fué generado. Este valor no se ve afectado por el valor de transition-delay.

-
pseudoElement{{readonlyinline}}{{domxref("DOMString")}} -

El nombre (empezando con dos "dos puntos") del pseudo-elemento CSS en el que ha ocurrido la transición (en caso de que el objetivo del evento sea dicho pseudo-elemento correspondiente al elemento), o una cadena vacía si la transición ha ocurrido en un elemento (lo que quiere decir que el objetivo del evento es dicho elemento).

-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Transitions', '#transitioncancel', 'transitioncancel')}}{{Spec2('CSS3 Transitions')}}Definición inicial.
- -

Compatibilidad con navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(53)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

 

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoMobile(53)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Véase también

- -
    -
  • El manejador {{domxref("GlobalEventHandlers.ontransitioncancel")}}
    • -
  • La interfaz {{domxref("TransitionEvent")}}
    • -
  • {{event("transitionstart")}}, {{event("transitionend")}}
    • -
  • Propiedades CSS: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.
    • -
diff --git a/files/es/web/events/transitionend/index.html b/files/es/web/events/transitionend/index.html deleted file mode 100644 index 8370f0e39e..0000000000 --- a/files/es/web/events/transitionend/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: transitionend -slug: Web/Events/transitionend -tags: - - DOM - - Event - - Referencia - - Transiciones CSS - - Transiciones CSS3 - - TransitionEvent - - transitionend -translation_of: Web/API/HTMLElement/transitionend_event ---- -

El evento transitionend es lanzado cuando una transición CSS se ha completado. Si la transición es eliminada antes de haberse completado, como cuando {{cssxref("transition-property")}} es eliminado o {{cssxref("display")}} se establece a "none", entonces el evento no será generado.

- -

Información general

- -
-
Especificación
-
{{SpecName("CSS3 Transitions")}}
-
Interfaz
-
{{domxref("TransitionEvent")}}
-
Burbuja
-
Sí
-
Cancelable
-
Sí
-
Objetivo
-
{{domxref("Element")}}, {{domxref("Document")}}, {{domxref("Window")}}
-
Acción
-
undefined
-
- -

Propiedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
propertyName {{readonlyInline}}{{domxref("DOMString")}}The name of the CSS property associated with the transition.
elapsedTime {{readonlyInline}}FloatThe amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of transition-delay.
pseudoElement {{readonlyInline}}{{domxref("DOMString")}}The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).
- -

Ejemplo

- -

Este ejemplo establece un manejador de evento para detectar el evento transitionend, y así cambiar el texto que se muestra dentro del elemento cuando la transición se completa.

- -
let element = document.getElementById("slidingMenu");
-element.addEventListener("transitionend", function(event) {
-  element.innerHTML = "Done!";
-}, false);
-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}{{Spec2('CSS3 Transitions')}}Definición inicial.
- -

Compatibilidad con navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0[1]
- 36		{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}1010.5[2]
- 12
- 12.10
- 23		3.2[1]
- 7.0.6
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}10[2]
- 12
- 12.10		3.2[1]
-
- -

[1] Implementado en Chrome 1.0, Android 2.1 y WebKit 3.2 como webkitTransitionEnd. Chrome 36 y WebKit 7.0.6 usan el estándar transitionend.

- -

[2] Implementado como oTransitionEnd desde Opera 10.5, como otransitionend desde la versión 12 y como el estándar transitionend desde la versión 12.10.

- -

Véase también

- -

La interfaz {{domxref("TransitionEvent")}}

- -
    -
  • {{event("transitionstart")}}, {{event("transitioncancel")}}
    • -
  • Propiedades CSS: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.
    • -
diff --git a/files/es/web/guide/ajax/community/index.html b/files/es/web/guide/ajax/community/index.html new file mode 100644 index 0000000000..50a91de5a4 --- /dev/null +++ b/files/es/web/guide/ajax/community/index.html @@ -0,0 +1,44 @@ +--- +title: Comunidad +slug: Web/Guide/AJAX/Comunidad +tags: + - AJAX + - Todas_las_Categorías +translation_of: Web/Guide/AJAX/Community +--- +

 

+


+ Si conoces alguna lista de correo, grupo de noticias, foro, o comunidad relacionada con AJAX que pueda ser de interés. Por favor, pon aquí un enlace.

+

Mozilla

+
    +
  • La comunidad Mozilla... en inglés
    • +
+

{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}

+

Listas de correo

+
    +
  •  
    • +
+

 

+

Foros

+
    +
  • AJAX en + + Foros del Web +
    • +
+

Bitácoras

+
    +
  •  
    • +
+

 

+

Wikis

+
    +
  •  
    • +
+

 

+

Otros Sitios

+
    +
  •  
    • +
+

 

+

categorías

diff --git a/files/es/web/guide/ajax/comunidad/index.html b/files/es/web/guide/ajax/comunidad/index.html deleted file mode 100644 index 50a91de5a4..0000000000 --- a/files/es/web/guide/ajax/comunidad/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Comunidad -slug: Web/Guide/AJAX/Comunidad -tags: - - AJAX - - Todas_las_Categorías -translation_of: Web/Guide/AJAX/Community ---- -

 

-


- Si conoces alguna lista de correo, grupo de noticias, foro, o comunidad relacionada con AJAX que pueda ser de interés. Por favor, pon aquí un enlace.

-

Mozilla

-
    -
  • La comunidad Mozilla... en inglés
    • -
-

{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}

-

Listas de correo

-
    -
  •  
    • -
-

 

-

Foros

-
    -
  • AJAX en - - Foros del Web -
    • -
-

Bitácoras

-
    -
  •  
    • -
-

 

-

Wikis

-
    -
  •  
    • -
-

 

-

Otros Sitios

-
    -
  •  
    • -
-

 

-

categorías

diff --git a/files/es/web/guide/ajax/getting_started/index.html b/files/es/web/guide/ajax/getting_started/index.html new file mode 100644 index 0000000000..ed2bbbc33f --- /dev/null +++ b/files/es/web/guide/ajax/getting_started/index.html @@ -0,0 +1,231 @@ +--- +title: Primeros Pasos +slug: Web/Guide/AJAX/Primeros_Pasos +tags: + - AJAX + - API + - Avanzado + - Todas_las_Categorías + - XMLHttpRequest +translation_of: Web/Guide/AJAX/Getting_Started +--- +

 

+ +

Este artículo es una guía básica sobre AJAX e incluye dos ejemplos.

+ +

¿Qué es AJAX?

+ +

AJAX (JavaScript Asíncrono y XML) es un término nuevo para describir dos capacidades de los navegadores que han estado presentes por años, pero que habían sido ignoradas por muchos desarrolladores Web, hasta hace poco que surgieron aplicaciones como Gmail, Google suggest y Google Maps.

+ +

Las dos capacidades en cuestión son:

+ +
    +
  • La posibilidad de hacer peticiones al servidor sin tener que volver a cargar la página.
    • +
  • La posibilidad de analizar y trabajar con documentos XML.
    • +
+ +

Primer Paso – Cómo realizar una petición HTTP al servidor

+ +

Para realizar una petición HTTP usando JavaScript, es necesario crear una instancia de una clase que provea esta funcionalidad. Esta clase fue inicialmente introducida en Internet Explorer como un objeto ActiveX, llamado XMLHTTP. Después Mozilla, Safari y otros navegadores lo siguieron, implementando una clase XMLHttpRequest que soportaba los métodos y las propiedades del objeto ActiveX original.

+ +

Como resultado, para crear una instancia de la clase requerida que funcione en todos los navegadores, es necesario poner:

+ +
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+    http_request = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE
+    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+}
+
+ +

(El código mostrado es una versión simplificada con fines ilustrativos. Para un ejemplo más realista ver el paso 3 de este artículo.)

+ +

Algunas versiones de los navegadores Mozilla no funcionan correctamente si la respuesta del servidor no tiene la cabecera mime de tipo XML. En ese caso es posible usar un método extra que sobreescriba la cabecera enviada por el servidor, en caso que no sea text/xml.

+ +
http_request = new XMLHttpRequest();
+http_request.overrideMimeType('text/xml');
+
+ +

El próximo paso es decidir qué se hará después de recibir la respuesta del servidor a la petición enviada. A estas alturas sólo es necesario decirle al objeto HTTPrequest qué función de JavaScript se encargará de procesar la respuesta. Para esto se asigna la propiedad onreadystatechange del objeto al nombre de la función de JavaScript que se va a utilizar:

+ +

http_request.onreadystatechange = nameOfTheFunction;

+ +

Es importante notar que no hay paréntesis después del nombre de la función y no se pasa ningún parámetro. También es posible definir la función en ese momento, y poner en seguida las acciones que procesarán la respuesta:

+ +
http_request.onreadystatechange = function(){
+    // procesar la respuesta
+};
+
+ +

Después de especificar qué pasará al recibir la respuesta es necesario hacer la petición. Para esto se utilizan los métodos open() y send() de la clase HTTP request, como se muestra a continuación:

+ +
http_request.open('GET', 'http://www.example.org/algun.archivo', true);
+http_request.send();
+
+ +
    +
  • El primer parámetro de la llamada a open() es el método HTTP request – GET, POST, HEAD o cualquier otro método que se quiera usar y sea aceptado por el servidor. El nombre del método se escribe en mayúsculas, sino algunos navegadores (como Firefox) podrían no procesar la petición. Para más información sobre los métodos HTTP request visitar W3C specs
    • +
  • El segundo parámetro es el URL de la página que se esta pidiendo. Por medida de seguridad no es posible llamar páginas en dominios de terceras personas. Se debe saber el dominio exacto de todas las páginas o se obtendrá un error de 'permiso denegado' al llamar open(). Una falla común es acceder al sitio por domain.tld e intentar llamar las páginas como www.domain.tld.
    • +
  • El tercer parámetro establece si la petición es asíncrona. Si se define TRUE, la ejecución de la función de JavaScript continuará aún cuando la respuesta del servidor no haya llegado. Por esta capacidad es la A en AJAX.
    • +
+ +

El parámetro en el método send()puede ser cualquier información que se quiera enviar al servidor si se usa POST para la petición. La información se debe enviar en forma de cadena, por ejemplo:

+ +

name=value&anothername=othervalue&so=on

+ +

Si se quiere enviar información de esta forma, es necesario cambiar el tipo MIME de la petición usando la siguiente línea:

+ +
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+ +

De otro modo el servidor descartará la información.

+ +

Segundo Paso – Procesando la respuesta del servidor

+ +

Al enviar la petición HTTP es necesario indicar el nombre de la función JavaScript que procesará la respuesta.

+ +

http_request.onreadystatechange = nameOfTheFunction;

+ +

A continuación se verá lo que esta función realiza. En primer lugar necesita revisar el estado de la petición. Si el estado tiene el valor 4, significa que la respuesta completa del servidor ha sido recibida y es posible continuar procesándola.

+ +
if (http_request.readyState == 4) {
+    // todo va bien, respuesta recibida
+} else {
+    // aun no esta listo
+}
+
+ +

La lista completa de valores para la propiedad readyState es:

+ +
    +
  • 0 (no inicializada)
    • +
  • 1 (leyendo)
    • +
  • 2 (leido)
    • +
  • 3 (interactiva)
    • +
  • 4 (completo)
    • +
+ +

(Source)

+ +

Ahora es necesario revisar el código de status de la respuesta HTTP. La lista completa de códigos aparece en el sitio de la W3C. Para el próposito de este artículo sólo es importante el código 200 OK.

+ +
if (http_request.status == 200) {
+    // perfect!
+} else {
+    // hubo algún problema con la petición,
+    // por ejemplo código de respuesta 404 (Archivo no encontrado)
+    // o 500 (Internal Server Error)
+}
+
+ +

Después de haber revisado el estado de la petición y el código de status de la respuesta, depende de uno hacer cualquier cosa con la información que el servidor ha entregado. Existen dos opciones para tener acceso a esa información:

+ +
    +
  • http_request.responseText – regresará la respuesta del servidor como una cadena de texto.
    • +
  • http_request.responseXML – regresará la respuesta del servidor como un objeto XMLDocument que se puede recorrer usando las funciones de JavaScript DOM.
    • +
+ +

Tercer Paso – "¡Ahora todo junto!" - Un sencillo ejemplo

+ +

En este ejemplo se utilizará todo lo que se ha visto para hacer una petición HTTP. Se pedirá un documento HTML llamado test.html, que contiene el texto "Esto es una prueba." y después usaremos la función alert() con el contenido del archivo test.html .

+ +
<script type="text/javascript" language="javascript">
+
+    var http_request = false;
+
+    function makeRequest(url) {
+
+        http_request = false;
+
+        if (window.XMLHttpRequest) { // Mozilla, Safari,...
+            http_request = new XMLHttpRequest();
+            if (http_request.overrideMimeType) {
+                http_request.overrideMimeType('text/xml');
+                // Ver nota sobre esta linea al final
+            }
+        } else if (window.ActiveXObject) { // IE
+            try {
+                http_request = new ActiveXObject("Msxml2.XMLHTTP");
+            } catch (e) {
+                try {
+                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+                } catch (e) {}
+            }
+        }
+
+        if (!http_request) {
+            alert('Falla :( No es posible crear una instancia XMLHTTP');
+            return false;
+        }
+        http_request.onreadystatechange = alertContents;
+        http_request.open('GET', url, true);
+        http_request.send();
+
+    }
+
+    function alertContents() {
+
+        if (http_request.readyState == 4) {
+            if (http_request.status == 200) {
+                alert(http_request.responseText);
+            } else {
+                alert('Hubo problemas con la petición.');
+            }
+        }
+
+    }
+</script>
+<span
+    style="cursor: pointer; text-decoration: underline"
+    onclick="makeRequest('test.html')">
+        Hacer una petición
+</span>
+
+ +

En este ejemplo:

+ +
    +
  • El usuario presiona el vínculo "Hacer una petición" en el navegador;
    • +
  • Esto llama la función makeRequest() que tiene como parámetro test.html que es un archivo HTML localizado en el mismo directorio;
    • +
  • La petición es realizada y después (onreadystatechange) la ejecución pasa a alertContents();
    • +
  • alertContents() verifica si la respuesta fue recibida y si es OK, si es así utiliza alert() con el contenido de test.html.
    • +
+ +

Puedes probar el ejemplo aquí y puedes ver el archivo de prueba aquí.

+ +

Nota: La línea http_request.overrideMimeType('text/xml'); arriba causaría problemas en la consola de Javascript de Firefox 1.5b, como esta descrito en https://bugzilla.mozilla.org/show_bug.cgi?id=311724, si la página llamada por XMLHttpRequest no es XML válido (por ejemplo, si es texto).

+ +

Si se obtiene Syntax Error o Not Well Formed Error en el navegador, y no se está intentando cargar una página XML con XMLHttpRequest, se puede eliminar esa línea del código.

+ +

Cuarto Paso – Trabajando con la respuesta XML

+ +

En el ejemplo anterior se utilizo la propiedad reponseText del objeto pedido para mostrar el contenido de test.html una vez que la respuesta HTTP había sido recibida. En éste se utilizará la propiedad responseXML.

+ +

Primero hay que crear un documento de XML válido. El documento (test.xml) contiene lo siguiente:

+ +
<?xml version="1.0" ?>
+<root>
+    Esto es una prueba.
+</root>
+
+ +

Para que funcione el script solo es necesario cambiar la línea de petición por:

+ +
...
+onclick="makeRequest('test.xml')">
+...
+
+ +

Y en alertContents() es necerario remplazar la línea donde aparece alert(http_request.responseText); por:

+ +
var xmldoc = http_request.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+
+ +

De esta manera se utiliza el objeto XMLDocument dado por responseXML y se usan métodos del DOM para acceder a la información contenida en el documento XML. El archivo test.xml se encuentra aquí y el script actualizado está aquí.

+ +

Para más información sobre los metodos del DOM, visita los documentos de la implementación del DOM de Mozilla.

+ +
 
+ +

{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "fr": "fr/AJAX/Premiers_pas", "it": "it/AJAX/Iniziare", "ja": "ja/AJAX/Getting_Started", "ko": "ko/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar", "ru": "ru/AJAX/\u0421_\u0447\u0435\u0433\u043e_\u043d\u0430\u0447\u0430\u0442\u044c", "zh-cn": "cn/AJAX/\u5f00\u59cb", "zh-tw": "zh_tw/AJAX/\u4e0a\u624b\u7bc7" } ) }}

diff --git a/files/es/web/guide/ajax/primeros_pasos/index.html b/files/es/web/guide/ajax/primeros_pasos/index.html deleted file mode 100644 index ed2bbbc33f..0000000000 --- a/files/es/web/guide/ajax/primeros_pasos/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: Primeros Pasos -slug: Web/Guide/AJAX/Primeros_Pasos -tags: - - AJAX - - API - - Avanzado - - Todas_las_Categorías - - XMLHttpRequest -translation_of: Web/Guide/AJAX/Getting_Started ---- -

 

- -

Este artículo es una guía básica sobre AJAX e incluye dos ejemplos.

- -

¿Qué es AJAX?

- -

AJAX (JavaScript Asíncrono y XML) es un término nuevo para describir dos capacidades de los navegadores que han estado presentes por años, pero que habían sido ignoradas por muchos desarrolladores Web, hasta hace poco que surgieron aplicaciones como Gmail, Google suggest y Google Maps.

- -

Las dos capacidades en cuestión son:

- -
    -
  • La posibilidad de hacer peticiones al servidor sin tener que volver a cargar la página.
    • -
  • La posibilidad de analizar y trabajar con documentos XML.
    • -
- -

Primer Paso – Cómo realizar una petición HTTP al servidor

- -

Para realizar una petición HTTP usando JavaScript, es necesario crear una instancia de una clase que provea esta funcionalidad. Esta clase fue inicialmente introducida en Internet Explorer como un objeto ActiveX, llamado XMLHTTP. Después Mozilla, Safari y otros navegadores lo siguieron, implementando una clase XMLHttpRequest que soportaba los métodos y las propiedades del objeto ActiveX original.

- -

Como resultado, para crear una instancia de la clase requerida que funcione en todos los navegadores, es necesario poner:

- -
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
-    http_request = new XMLHttpRequest();
-} else if (window.ActiveXObject) { // IE
-    http_request = new ActiveXObject("Microsoft.XMLHTTP");
-}
-
- -

(El código mostrado es una versión simplificada con fines ilustrativos. Para un ejemplo más realista ver el paso 3 de este artículo.)

- -

Algunas versiones de los navegadores Mozilla no funcionan correctamente si la respuesta del servidor no tiene la cabecera mime de tipo XML. En ese caso es posible usar un método extra que sobreescriba la cabecera enviada por el servidor, en caso que no sea text/xml.

- -
http_request = new XMLHttpRequest();
-http_request.overrideMimeType('text/xml');
-
- -

El próximo paso es decidir qué se hará después de recibir la respuesta del servidor a la petición enviada. A estas alturas sólo es necesario decirle al objeto HTTPrequest qué función de JavaScript se encargará de procesar la respuesta. Para esto se asigna la propiedad onreadystatechange del objeto al nombre de la función de JavaScript que se va a utilizar:

- -

http_request.onreadystatechange = nameOfTheFunction;

- -

Es importante notar que no hay paréntesis después del nombre de la función y no se pasa ningún parámetro. También es posible definir la función en ese momento, y poner en seguida las acciones que procesarán la respuesta:

- -
http_request.onreadystatechange = function(){
-    // procesar la respuesta
-};
-
- -

Después de especificar qué pasará al recibir la respuesta es necesario hacer la petición. Para esto se utilizan los métodos open() y send() de la clase HTTP request, como se muestra a continuación:

- -
http_request.open('GET', 'http://www.example.org/algun.archivo', true);
-http_request.send();
-
- -
    -
  • El primer parámetro de la llamada a open() es el método HTTP request – GET, POST, HEAD o cualquier otro método que se quiera usar y sea aceptado por el servidor. El nombre del método se escribe en mayúsculas, sino algunos navegadores (como Firefox) podrían no procesar la petición. Para más información sobre los métodos HTTP request visitar W3C specs
    • -
  • El segundo parámetro es el URL de la página que se esta pidiendo. Por medida de seguridad no es posible llamar páginas en dominios de terceras personas. Se debe saber el dominio exacto de todas las páginas o se obtendrá un error de 'permiso denegado' al llamar open(). Una falla común es acceder al sitio por domain.tld e intentar llamar las páginas como www.domain.tld.
    • -
  • El tercer parámetro establece si la petición es asíncrona. Si se define TRUE, la ejecución de la función de JavaScript continuará aún cuando la respuesta del servidor no haya llegado. Por esta capacidad es la A en AJAX.
    • -
- -

El parámetro en el método send()puede ser cualquier información que se quiera enviar al servidor si se usa POST para la petición. La información se debe enviar en forma de cadena, por ejemplo:

- -

name=value&anothername=othervalue&so=on

- -

Si se quiere enviar información de esta forma, es necesario cambiar el tipo MIME de la petición usando la siguiente línea:

- -
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
- -

De otro modo el servidor descartará la información.

- -

Segundo Paso – Procesando la respuesta del servidor

- -

Al enviar la petición HTTP es necesario indicar el nombre de la función JavaScript que procesará la respuesta.

- -

http_request.onreadystatechange = nameOfTheFunction;

- -

A continuación se verá lo que esta función realiza. En primer lugar necesita revisar el estado de la petición. Si el estado tiene el valor 4, significa que la respuesta completa del servidor ha sido recibida y es posible continuar procesándola.

- -
if (http_request.readyState == 4) {
-    // todo va bien, respuesta recibida
-} else {
-    // aun no esta listo
-}
-
- -

La lista completa de valores para la propiedad readyState es:

- -
    -
  • 0 (no inicializada)
    • -
  • 1 (leyendo)
    • -
  • 2 (leido)
    • -
  • 3 (interactiva)
    • -
  • 4 (completo)
    • -
- -

(Source)

- -

Ahora es necesario revisar el código de status de la respuesta HTTP. La lista completa de códigos aparece en el sitio de la W3C. Para el próposito de este artículo sólo es importante el código 200 OK.

- -
if (http_request.status == 200) {
-    // perfect!
-} else {
-    // hubo algún problema con la petición,
-    // por ejemplo código de respuesta 404 (Archivo no encontrado)
-    // o 500 (Internal Server Error)
-}
-
- -

Después de haber revisado el estado de la petición y el código de status de la respuesta, depende de uno hacer cualquier cosa con la información que el servidor ha entregado. Existen dos opciones para tener acceso a esa información:

- -
    -
  • http_request.responseText – regresará la respuesta del servidor como una cadena de texto.
    • -
  • http_request.responseXML – regresará la respuesta del servidor como un objeto XMLDocument que se puede recorrer usando las funciones de JavaScript DOM.
    • -
- -

Tercer Paso – "¡Ahora todo junto!" - Un sencillo ejemplo

- -

En este ejemplo se utilizará todo lo que se ha visto para hacer una petición HTTP. Se pedirá un documento HTML llamado test.html, que contiene el texto "Esto es una prueba." y después usaremos la función alert() con el contenido del archivo test.html .

- -
<script type="text/javascript" language="javascript">
-
-    var http_request = false;
-
-    function makeRequest(url) {
-
-        http_request = false;
-
-        if (window.XMLHttpRequest) { // Mozilla, Safari,...
-            http_request = new XMLHttpRequest();
-            if (http_request.overrideMimeType) {
-                http_request.overrideMimeType('text/xml');
-                // Ver nota sobre esta linea al final
-            }
-        } else if (window.ActiveXObject) { // IE
-            try {
-                http_request = new ActiveXObject("Msxml2.XMLHTTP");
-            } catch (e) {
-                try {
-                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
-                } catch (e) {}
-            }
-        }
-
-        if (!http_request) {
-            alert('Falla :( No es posible crear una instancia XMLHTTP');
-            return false;
-        }
-        http_request.onreadystatechange = alertContents;
-        http_request.open('GET', url, true);
-        http_request.send();
-
-    }
-
-    function alertContents() {
-
-        if (http_request.readyState == 4) {
-            if (http_request.status == 200) {
-                alert(http_request.responseText);
-            } else {
-                alert('Hubo problemas con la petición.');
-            }
-        }
-
-    }
-</script>
-<span
-    style="cursor: pointer; text-decoration: underline"
-    onclick="makeRequest('test.html')">
-        Hacer una petición
-</span>
-
- -

En este ejemplo:

- -
    -
  • El usuario presiona el vínculo "Hacer una petición" en el navegador;
    • -
  • Esto llama la función makeRequest() que tiene como parámetro test.html que es un archivo HTML localizado en el mismo directorio;
    • -
  • La petición es realizada y después (onreadystatechange) la ejecución pasa a alertContents();
    • -
  • alertContents() verifica si la respuesta fue recibida y si es OK, si es así utiliza alert() con el contenido de test.html.
    • -
- -

Puedes probar el ejemplo aquí y puedes ver el archivo de prueba aquí.

- -

Nota: La línea http_request.overrideMimeType('text/xml'); arriba causaría problemas en la consola de Javascript de Firefox 1.5b, como esta descrito en https://bugzilla.mozilla.org/show_bug.cgi?id=311724, si la página llamada por XMLHttpRequest no es XML válido (por ejemplo, si es texto).

- -

Si se obtiene Syntax Error o Not Well Formed Error en el navegador, y no se está intentando cargar una página XML con XMLHttpRequest, se puede eliminar esa línea del código.

- -

Cuarto Paso – Trabajando con la respuesta XML

- -

En el ejemplo anterior se utilizo la propiedad reponseText del objeto pedido para mostrar el contenido de test.html una vez que la respuesta HTTP había sido recibida. En éste se utilizará la propiedad responseXML.

- -

Primero hay que crear un documento de XML válido. El documento (test.xml) contiene lo siguiente:

- -
<?xml version="1.0" ?>
-<root>
-    Esto es una prueba.
-</root>
-
- -

Para que funcione el script solo es necesario cambiar la línea de petición por:

- -
...
-onclick="makeRequest('test.xml')">
-...
-
- -

Y en alertContents() es necerario remplazar la línea donde aparece alert(http_request.responseText); por:

- -
var xmldoc = http_request.responseXML;
-var root_node = xmldoc.getElementsByTagName('root').item(0);
-alert(root_node.firstChild.data);
-
- -

De esta manera se utiliza el objeto XMLDocument dado por responseXML y se usan métodos del DOM para acceder a la información contenida en el documento XML. El archivo test.xml se encuentra aquí y el script actualizado está aquí.

- -

Para más información sobre los metodos del DOM, visita los documentos de la implementación del DOM de Mozilla.

- -
 
- -

{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "fr": "fr/AJAX/Premiers_pas", "it": "it/AJAX/Iniziare", "ja": "ja/AJAX/Getting_Started", "ko": "ko/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar", "ru": "ru/AJAX/\u0421_\u0447\u0435\u0433\u043e_\u043d\u0430\u0447\u0430\u0442\u044c", "zh-cn": "cn/AJAX/\u5f00\u59cb", "zh-tw": "zh_tw/AJAX/\u4e0a\u624b\u7bc7" } ) }}

diff --git a/files/es/web/guide/api/dom/events/orientation_and_motion_data_explained/orientation_and_motion_data_explained/index.html b/files/es/web/guide/api/dom/events/orientation_and_motion_data_explained/orientation_and_motion_data_explained/index.html deleted file mode 100644 index 7f8fe2155c..0000000000 --- a/files/es/web/guide/api/dom/events/orientation_and_motion_data_explained/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: >- - Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained/Orientation_and_motion_data_explained -translation_of: 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.

-
    -
  • El eje X sigue a lo largo (profuncidad) del plano de tierra, perpendicular al eje Y y positiva hacia el este (y por lo tanto negativa hacia el oeste).
    • -
  • El eje Y sigue a lo largo(ancho) del plano de tierra, y es positivo hacia el norte verdadero (es decir, el Polo Norte, el norte no es magnético) y negativo hacia la verdadera sur.
    • -
  • El eje Z es perpendicular al plano de tierra, piensa en él como una línea trazada entre el dispositivo y el centro de la Tierra. El valor de la coordenada Z es positivo hacia arriba (distancia desde el centro de la Tierra) y negativo hacia abajo (hacia el centro de la Tierra).
    • -
-

 

-

-

 

-

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

-
    -
  • El eje x está en el plano de la pantalla y es positiva hacia la derecha y negativa hacia la izquierda.
    • -
  • El eje y está en el plano de la pantalla y es positiva hacia la parte superior y negativa hacia la parte inferior.
    • -
  • El eje z es perpendicular a la pantalla o teclado, y es positivo que se extiende hacia fuera de la pantalla.
    • -
-
- 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/web/guide/api/vibration/index.html b/files/es/web/guide/api/vibration/index.html deleted file mode 100644 index 8c9c7b5f06..0000000000 --- a/files/es/web/guide/api/vibration/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Vibración API -slug: Web/Guide/API/Vibration -tags: - - API - - Firefox OS - - Mobile - - Principiante - - Vibración - - Vibrado - - Vibrar - - WebAPI -translation_of: Web/API/Vibration_API ---- -

La mayoría de los dispositivos modernos pueden vibrar a través del hardware, esto permite que a través del código de software se pueda emitir estas vibraciones. La Vibration API  ofrece a las aplicaciones web la capacidad de acceder a este hardware en caso este lo soporte, caso contrario el dispositivo no hace nada.

- -

Describiendo vibraciones

- -

Vibración se puede describir como un patrón de prender y apagar pulsos, los cuales pueden variar en longitud. El patrón puede consistir de un sólo número que indica cuantos milisegundos vibrará, o un arreglo de enteros describiendo un patrón de vibraciones y pausas. La vibración es controlada por un solo método:

- -

{{domxref("window.navigator.vibrate()")}}.

- -

Vibración simple

- -

Puedes iniciar una sola vibración del hardware pasando como argumento un sólo número, o un arreglo de un sólo número:

- -
window.navigator.vibrate(200);
-window.navigator.vibrate([200]);
-
- -

Ambos ejemplos hacen vibrar el dispositivo por 200 ms.

- -

Patrones de vibración

- -

Un arreglo de valores describen que las vibraciones serán por períodos alternados, es decir, el dispositivo vibrará luego no lo hará, así según la secuencia definida. Cada valor en el arreglo es convertido a entero para luego ser interpretado alternadamente como el tiempo que el dispositivo debe vibrar y el tiempo que no debe vibrar. Ejemplo:

- -
window.navigator.vibrate([200, 100, 200]);
-
- -

Según este ejemplo el dispositivo vibrará por 200ms, luego se detiene por 100ms y luego vibra 200ms.

- -

Puedes especificar cuantas vibraciones/pausas desees, y el arreglo puede tener un tamaño par o impar. No importa que agregues una pausa como el último valor del arreglo, ya que el celular dejará de vibrar de todas formas al final de cada vibración.

- -

Cancelar vibraciones existentes

- -

Llamar {{domxref("window.navigator.vibrate()")}} con un valor de 0, arreglo vació, o arreglo que contenga 0's detendrá cualquier vibración en curso.

- -

Vibraciones continuas

- -

Algunas básicas acciones son setInterval y clearInterval que nos permitirán crear vibraciones persistentes:

- -
var intervaloDeVibrado;
-
-// Iniciar la vibración
-function iniciarVibrado(duracion) {
-	navigator.vibrate(duracion);
-}
-
-// Detiene la vibración
-function detenerVibrado() {
-	// Limpiar el intervalo y detener las vibraciones existentes
-	if(intervaloDeVibrado) clearInterval(intervaloDeVibrado);
-	navigator.vibrate(0);
-}
-
-// Iniciar las vibraciones con una determinado tiempo e intervalo
-// Asumir que el valor recibido es un entero
-function iniciarVibradoPersistente(duracion, intervalo) {
-	intervaloDeVibrado = setInterval(function() {
-		iniciarVibrado(duracion);
-	}, intervalo);
-}
- -

Claro que el código de arriba no toma en cuenta el método de utilizar un arreglo de vibración, utilizar un arreglo para vibración persistente necesitaría recalcular la suma de los elementos del arregloo y crear un intervalo basado en esos números (agregando adicionalmente las pausas)

- -

¿Por qué utilizar Vibration API?

- -

Esta API es claramente accesible a través de dispositivos móbiles. Vibration API puede servir para alertas en las aplicaciones web del celular, y sería es asombrosa cuando se utiliza en juegos o en aplicaciones pesadas. Imagínate mirando un video en tu celular y durante la escena de explosión,tu teléfono vibra un poco. O la sensación que tendría tu usuario al sentir el estallido de una bomba en el juego Bomberman.

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Vibration API')}}{{Spec2('Vibration API')}}Especificación inicial.
- -

Compatibilidad entre navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracteŕisticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}} {{property_prefix("webkit")}}11.0 {{property_prefix("moz")}}
- 16 (no prefix)		{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}} {{property_prefix("webkit")}}11.0 {{property_prefix("moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Ver También

- - diff --git a/files/es/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html b/files/es/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html new file mode 100644 index 0000000000..d7c859d646 --- /dev/null +++ b/files/es/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html @@ -0,0 +1,99 @@ +--- +title: Comunicaciones peer-to-peer (P2P) con WebRTC +slug: WebRTC/Peer-to-peer_communications_with_WebRTC +translation_of: Web/Guide/API/WebRTC/Peer-to-peer_communications_with_WebRTC +--- +

{{SeeCompatTable}}

+

Las WebRTC APIs están diseñadas para permitir a las aplicaciones JS la creación de conexiones de tiempo real con canales de Audio, Video, y/o Datos (Data), directamente entre usuarios y a través de sus browsers, o hacia servers que soporten los protocolos WebRTC. También potencia navigator.mozGetUserMedia() para acceder a los datos de cámara y micrófono (getUserMedia() está siendo estandarizado por la Media Capture Task Force, así como las Recording APIs).

+

Las fuentes primarias de las especificaciones para WebRTC (en constante evolución), son las especificaciones WebRTC y getUserMedia, y varios de los borradores del IETF, en mayor medida en el rtcweb working group, pero también mmusic, rmcat y algunos otros.
+
+ Gran parte de la implementación en Chrome y Firefox está basada en código que fue abierto por Google en webrtc.org.

+

NOTA:  Las versiones actuales de FlashBlock pueden bloquear elementos HTML5 <video>. Si es así, dile que permita el contenido en la página, o deshabilita esa opción vía Herramientas/Add-ons.

+

Hay un buen tutorial en las características básicas de WebRTC en HTML5 Rocks. Una colección de páginas de pruebas básicas para soportar el desarrollo existe en webrtc-landing.

+

Puedes hacer simples llamadas persona-a-persona (inclusive si usan Chrome) en apprtc.appspot.com.

+

Una descripción de alto nivel de lo que sucede en una conexión RTCPeerConnection se publicó en un artículo de Mozilla Hacks (puedes ver todos los artículos sobre WebRTC aquí).

+

Basics of RTCPeerConnection call setup

+

Especificaciones

+ + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
WebRTC APIEn definición 
getUserMedia APIEn definiciónhttp://dev.w3.org/2011/webrtc/editor/getusermedia.html
+

Compatibilidad de browsers

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básicoSí{{property_prefix("webkit")}}Firefox 22{{CompatNo}}{{CompatNo}}{{CompatNo}}
DataChannelsA partir de Chrome 29Firefox 22{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte preliminarVia Chrome (detrás de un flag de configuración)Activado en Nightly y Aurora{{CompatNo}}{{CompatNo}}{{CompatNo}}
DataChannels{{CompatUnknown}}Activado en Nightly y Aurora{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+

 

diff --git a/files/es/web/guide/css/probando_media_queries/index.html b/files/es/web/guide/css/probando_media_queries/index.html deleted file mode 100644 index dac4330054..0000000000 --- a/files/es/web/guide/css/probando_media_queries/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Probando media queries -slug: Web/Guide/CSS/probando_media_queries -translation_of: Web/CSS/Media_Queries/Testing_media_queries ---- -

{{SeeCompatTable}}

-

El DOM proporciona características que hacen posible probar los resultados de un media query estructuradamente. Esto es hecho usando la interfaz {{domxref("MediaQueryList") }} y sus métodos y propiedades. Una vez que hayas creado el objeto {{domxref("MediaQueryList") }}, puedes revisar el resultado del query o, como alternativa, recibir notificaciones automáticamente cuando el resultado cambie.

-

Creando una media query list

-

Before you can evaluate the results of a query, you need to create the {{domxref("MediaQueryList") }} object representing the media query. To do this, use the {{domxref("window.matchMedia") }} method.

-

For example, if you want to set up a query list that determines whether the device is in landscape or portrait orientation, you can do so like this:

-
var mql = window.matchMedia("(orientation: portrait)");
-
-

Revisando el resultado de un query

-

Once your media query list has been created, you can check the result of the query by looking at the value of its matches property, which reflects the result of the query:

-
if (mql.matches) {
-  /* The device is currently in portrait orientation */
-} else {
-  /* The device is currently in landscape orientation */
-}
-
-

Recibiendo notificaciones query

-

If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a listener than to poll the query's result. To do this, you can call the addListener() method on the {{domxref("MediaQueryList") }} object, specifying an observer that implements the {{domxref("MediaQueryListListener") }} interface:

-
var mql = window.matchMedia("(orientation: portrait)");
-mql.addListener(handleOrientationChange);
-handleOrientationChange(mql);
-
-

This code creates the orientation testing media query list, mql, then adds a listener to it. Note that after adding the listener, we actually invoke the listener directly once. This lets our listener perform initial adjustments based on the current device orientation (otherwise, if our code assumes the device is in portrait mode but it's actually in landscape mode at startup, we could have inconsistencies).

-

The handleOrientationChange() method we implement then would look at the result of the query and handle whatever we need to do on an orientation change:

-
function handleOrientationChange(mql) {
-  if (mql.matches) {
-    /* The device is currently in portrait orientation */
-  } else {
-    /* The device is currently in landscape orientation */
-  }
-}
-
-

Terminando con las notificaciones query 

-

Cuando ya no vayas a necesitar recibir las notificaciones sobre los cambios de valro de tu media query, simplemente llama al removeListener() en el {{domxref("MediaQueryList") }}:

-
mql.removeListener(handleOrientationChange);
-
-

Compatibilidad con los navegadores

-

{{CompatibilityTable}}

-
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico9{{CompatGeckoDesktop("6.0") }}1012.15.1
-
-
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico3.0{{CompatUnknown}}1012.15
-
-

Ver también

-
    -
  • Media queries
    • -
  • {{domxref("window.matchMedia()") }}
    • -
  • {{domxref("MediaQueryList") }}
    • -
  • {{domxref("MediaQueryListListener") }}
    • -
diff --git "a/files/es/web/guide/dom/events/creacion_y_activaci\303\263n_eventos/index.html" "b/files/es/web/guide/dom/events/creacion_y_activaci\303\263n_eventos/index.html" deleted file mode 100644 index 0038e12c74..0000000000 --- "a/files/es/web/guide/dom/events/creacion_y_activaci\303\263n_eventos/index.html" +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Creación y activación de eventos (Event) -slug: Web/Guide/DOM/Events/Creacion_y_Activación_Eventos -tags: - - DOM - - Guía - - JavaScript - - Sintetico - - eventos -translation_of: 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

- -
    -
  • {{domxref("document.createEvent()")}}
    • -
  • {{domxref("Event.initEvent()")}}
    • -
  • {{domxref("EventTarget.dispatchEvent()")}}
    • -
  • {{domxref("EventTarget.addEventListener()")}}
    • -
diff --git a/files/es/web/guide/dom/events/eventos_controlador/index.html b/files/es/web/guide/dom/events/eventos_controlador/index.html deleted file mode 100644 index 836b287123..0000000000 --- a/files/es/web/guide/dom/events/eventos_controlador/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Manejadores de eventos en el DOM -slug: Web/Guide/DOM/Events/eventos_controlador -translation_of: 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:

- -
    -
  • Usando el HTML {{Glossary("atributo")}} llamados on{eventtype} en un elemento, por ejemplo:
    - <button onclick="return handleClick(event);">,
    • -
  • O seteandolo {{Glossary("property/JavaScript", "property")}} desde JavaScript, por ejemplo:
    - document.getElementById("mybutton").onclick = function(event) { ... }.
    • -
- -

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:

- -
    -
  • event - for all event handlers, except {{domxref("GlobalEventHandlers.onerror", "onerror")}}.
    • -
  • event, source, lineno, colno, and error for the {{domxref("GlobalEventHandlers.onerror", "onerror")}} event handler. Note that the event parameter actually contains the error message as string.
    • -
- -

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:

- -
    -
  • any function or object registered to be notified of events,
    • -
  • or, more specifically, to the mechanism of registering event listeners via on... attributes in HTML or properties in web APIs, such as <button onclick="alert(this)"> or window.onload = function() { /* ... */ }.
    • -
- -

When discussing the various methods of listening to events,

- -
    -
  • event listener refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}},
    • -
  • whereas event handler refers to a function registered via on... attributes or properties.
    • -
- -

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/web/guide/dom/events/index.html b/files/es/web/guide/dom/events/index.html deleted file mode 100644 index 241f94e866..0000000000 --- a/files/es/web/guide/dom/events/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Event developer guide -slug: Web/Guide/DOM/Events -tags: - - DOM - - Event - - Guide - - NeedsTranslation - - TopicStub - - events -translation_of: 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/web/guide/dom/index.html b/files/es/web/guide/dom/index.html deleted file mode 100644 index fc26bc0bee..0000000000 --- a/files/es/web/guide/dom/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: DOM developer guide -slug: Web/Guide/DOM -tags: - - API - - DOM - - Guide - - NeedsTranslation - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/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/web/guide/events/creating_and_triggering_events/index.html b/files/es/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..0038e12c74 --- /dev/null +++ b/files/es/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,144 @@ +--- +title: Creación y activación de eventos (Event) +slug: Web/Guide/DOM/Events/Creacion_y_Activación_Eventos +tags: + - DOM + - Guía + - JavaScript + - Sintetico + - eventos +translation_of: 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

+ +
    +
  • {{domxref("document.createEvent()")}}
    • +
  • {{domxref("Event.initEvent()")}}
    • +
  • {{domxref("EventTarget.dispatchEvent()")}}
    • +
  • {{domxref("EventTarget.addEventListener()")}}
    • +
diff --git a/files/es/web/guide/events/event_handlers/index.html b/files/es/web/guide/events/event_handlers/index.html new file mode 100644 index 0000000000..836b287123 --- /dev/null +++ b/files/es/web/guide/events/event_handlers/index.html @@ -0,0 +1,132 @@ +--- +title: Manejadores de eventos en el DOM +slug: Web/Guide/DOM/Events/eventos_controlador +translation_of: 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:

+ +
    +
  • Usando el HTML {{Glossary("atributo")}} llamados on{eventtype} en un elemento, por ejemplo:
    + <button onclick="return handleClick(event);">,
    • +
  • O seteandolo {{Glossary("property/JavaScript", "property")}} desde JavaScript, por ejemplo:
    + document.getElementById("mybutton").onclick = function(event) { ... }.
    • +
+ +

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:

+ +
    +
  • event - for all event handlers, except {{domxref("GlobalEventHandlers.onerror", "onerror")}}.
    • +
  • event, source, lineno, colno, and error for the {{domxref("GlobalEventHandlers.onerror", "onerror")}} event handler. Note that the event parameter actually contains the error message as string.
    • +
+ +

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:

+ +
    +
  • any function or object registered to be notified of events,
    • +
  • or, more specifically, to the mechanism of registering event listeners via on... attributes in HTML or properties in web APIs, such as <button onclick="alert(this)"> or window.onload = function() { /* ... */ }.
    • +
+ +

When discussing the various methods of listening to events,

+ +
    +
  • event listener refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}},
    • +
  • whereas event handler refers to a function registered via on... attributes or properties.
    • +
+ +

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/web/guide/events/index.html b/files/es/web/guide/events/index.html new file mode 100644 index 0000000000..241f94e866 --- /dev/null +++ b/files/es/web/guide/events/index.html @@ -0,0 +1,16 @@ +--- +title: Event developer guide +slug: Web/Guide/DOM/Events +tags: + - DOM + - Event + - Guide + - NeedsTranslation + - TopicStub + - events +translation_of: 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/web/guide/events/orientation_and_motion_data_explained/index.html b/files/es/web/guide/events/orientation_and_motion_data_explained/index.html new file mode 100644 index 0000000000..7f8fe2155c --- /dev/null +++ b/files/es/web/guide/events/orientation_and_motion_data_explained/index.html @@ -0,0 +1,48 @@ +--- +title: Explicación de los datos de orientación y movimiento +slug: >- + Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained/Orientation_and_motion_data_explained +translation_of: 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.

+
    +
  • El eje X sigue a lo largo (profuncidad) del plano de tierra, perpendicular al eje Y y positiva hacia el este (y por lo tanto negativa hacia el oeste).
    • +
  • El eje Y sigue a lo largo(ancho) del plano de tierra, y es positivo hacia el norte verdadero (es decir, el Polo Norte, el norte no es magnético) y negativo hacia la verdadera sur.
    • +
  • El eje Z es perpendicular al plano de tierra, piensa en él como una línea trazada entre el dispositivo y el centro de la Tierra. El valor de la coordenada Z es positivo hacia arriba (distancia desde el centro de la Tierra) y negativo hacia abajo (hacia el centro de la Tierra).
    • +
+

 

+

+

 

+

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

+
    +
  • El eje x está en el plano de la pantalla y es positiva hacia la derecha y negativa hacia la izquierda.
    • +
  • El eje y está en el plano de la pantalla y es positiva hacia la parte superior y negativa hacia la parte inferior.
    • +
  • El eje z es perpendicular a la pantalla o teclado, y es positivo que se extiende hacia fuera de la pantalla.
    • +
+
+ 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/web/guide/html/canvas_tutorial/advanced_animations/index.html b/files/es/web/guide/html/canvas_tutorial/advanced_animations/index.html deleted file mode 100644 index 15ab72ee7f..0000000000 --- a/files/es/web/guide/html/canvas_tutorial/advanced_animations/index.html +++ /dev/null @@ -1,380 +0,0 @@ ---- -title: Advanced animations -slug: Web/Guide/HTML/Canvas_tutorial/Advanced_animations -tags: - - Canvas - - Tutoria - - graficos -translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
- -
-

En el último capítulo hicimos unas animaciones básicas y nos familiarizamos con varias maneras de mover cosas. En esta parte examinaremos la moción misma y agregaremos la física para hacer nuestras animaciones más avanzadas.

-
- -

Dibujar una bola

- -

Vamos a usar una bola para nuestro estudio de la animación, entonces primero dibujamos la bola dentro del canvas. El siguente código lo configurará.

- -
<canvas id="canvas" width="600" height="300"></canvas>
-
- -

Como siempre, necesitamos un entorno para dibujar. Para dibujar la bola, creamos un contenido ball lo cual contiene propiedades y un método draw().

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-var ball = {
-  x: 100,
-  y: 100,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-ball.draw();
- -

Nada especial aquí; la bola es en realidad un circulo sencillo y se dibuja con el método {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.

- -

Agregar velocidad

- -

Ya que tenemos una bola, estamos listos agregar una animación básica así como aprendimos en el último capítulo de esta tutoría. De nuevo, {{domxref("window.requestAnimationFrame()")}} nos ayuda controlar la animación. La bola empieza moverse por agregar un vector de velocidad a la posición. Para cada fotograma, también {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} el canvas para quitar los circulos viejos de los fotogramas anteriores.

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 2,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mouseover', function(e) {
-  raf = window.requestAnimationFrame(draw);
-});
-
-canvas.addEventListener('mouseout', function(e) {
-  window.cancelAnimationFrame(raf);
-});
-
-ball.draw();
-
- -

Límites

- -

Si no probamos los límites, de repente nuestra bola se agota el canvas. Necesitamos verificar si las posiciones x e y están fuera de las dimensiones del canvas y invertir la direción de los vectores de velocidad. Para hacer eso, agregamos los siguentes pasos al método draw:

- -
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
-  ball.vy = -ball.vy;
-}
-if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
-  ball.vx = -ball.vx;
-}
- -

Primera demo

- -

Veamos como se ve en acción hasta este punto. Dirige el ratón dentro del canvas para empezar la animación.

- - - -

{{EmbedLiveSample("First_demo", "610", "310")}}

- -

Aceleración

- -

Para convertir la moción en más auténtica, puedes jugar con la velocidad, así por ejemplo:

- -
ball.vy *= .99;
-ball.vy += .25;
- -

Esto reduce el vector vertical de velocidad para cada fotograma para que la bola termina rebotando en el suelo.

- - - -

{{EmbedLiveSample("Second_demo", "610", "310")}}

- -

Efecto de rezagar

- -

Hasta este punto hemos limpiado los fotogramas anteriores con el método {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}. Si reemplazas este método con un semi-transparente {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, puedes facilmente crear un efecto de rezagar.

- -
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
-ctx.fillRect(0, 0, canvas.width, canvas.height);
- - - -

{{EmbedLiveSample("Third_demo", "610", "310")}}

- -

Agregar control de ratón

- -

Para controlar la bola, podemos hacerla seguir nuestro ratón usando el evento mousemove, por ejemplo. El evento click solta la bola y la deja rebotar de nuevo.

- - - -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-var running = false;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 1,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function clear() {
-  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
-  ctx.fillRect(0,0,canvas.width,canvas.height);
-}
-
-function draw() {
-  clear();
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
-    ball.vy = -ball.vy;
-  }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
-    ball.vx = -ball.vx;
-  }
-
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mousemove', function(e) {
-  if (!running) {
-    clear();
-    ball.x = e.clientX;
-    ball.y = e.clientY;
-    ball.draw();
-  }
-});
-
-canvas.addEventListener('click', function(e) {
-  if (!running) {
-    raf = window.requestAnimationFrame(draw);
-    running = true;
-  }
-});
-
-canvas.addEventListener('mouseout', function(e) {
-  window.cancelAnimationFrame(raf);
-  running = false;
-});
-
-ball.draw();
-
- -

Mueve la bola usando el ratón y suéltala haciendo click.

- -

{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}

- -

Breakout

- -

Este capítulo corto sólo explica algunas técnicas para crear animaciones más avanzadas. ¡Hay muchos más!  ¿Qué tal agregar una raqueta, algunos ladrillos, y convertir esta demo en un partido Breakout? Visita nuestra área de Game development para mayor información.

- -

Vea también

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git a/files/es/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html b/files/es/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html deleted file mode 100644 index ab76918132..0000000000 --- a/files/es/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html +++ /dev/null @@ -1,726 +0,0 @@ ---- -title: Applying styles and colors -slug: Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors -translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
- -
-

En el capítulo acerca de dibujar formas, usamos unicamente los estilos de linea y de relleno por defecto. Aqui exploraremos las opciones del canvas que tenemos a nuestra disposición para hacer los dibujos un tanto más atractivos. Aprenderas como agregar diferentes colores, estilos de linea, gradiantes, patrones y sombras a tus dibujos.

-
- -

Colors

- -

Hasta ahrora nosotros solo me hemos visto metodos en el contexto de dibujo. Si quisieramos aplicar colores a las formas, hay dos importantes propiedades que podemos usar: fillStyle y strokeStyle.

- -
-
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
-
Configura el estilo cuando se rellenan las formas.
-
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
-
Configura el estilo al contorno perimetral de las formas.
-
- -

color es una cadena que representa  un CSS {{cssxref("<color>")}}, un objeto gradiante, o un objeto patron. Miraremos en objetos de gradientes y patrones mas tarde. Por defecto, el color del trazo y del relleno son configurados en negro (valor de color CSS #000000).

- -
-

Nota:  Cuando configuras la propiedad  strokeStyle y/o fillStyle, el nuevo valor llega a ser el vador por defecto para los dibujos posteriores. Para cada forma que tu quieras en un color difrente, necesitaras reasignar las propiedades anteriores.

-
- -

Las cadenas validas que tu pueden entrar deberian, segun la especificación, ser valores de  {{cssxref("<color>")}} CSS. En el siguiente ejemplo, describimos en mismo color.

- -
// these all set the fillStyle to 'orange'
-
-ctx.fillStyle = 'orange';
-ctx.fillStyle = '#FFA500';
-ctx.fillStyle = 'rgb(255, 165, 0)';
-ctx.fillStyle = 'rgba(255, 165, 0, 1)';
-
- -

A fillStyle example

- -

En este ejemplo, usamos dos bucles for para dibujar una cuadrícula de rectangulos, cada uno de diferente color. La imagen resultante deberia ser similar a la de la screenhot. No hay nada demasiado espectacular en el proceso. Usamos dos variables i y j para generar un unico color RGB para cada celda cuadrada, modificando las componentes rojo y verde. El canal azul tiene un valor fijo. Modificando los canales, puedes generar todo tipo de paletas. Incrementando los paos, puedes lograr algo similar que se parezca a las paletas de colores que Photoshop usa.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 6; i++) {
-    for (var j = 0; j < 6; j++) {
-      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' +
-                       Math.floor(255 - 42.5 * j) + ', 0)';
-      ctx.fillRect(j * 25, i * 25, 25, 25);
-    }
-  }
-}
- - - -

The result looks like this:

- -

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

- -

A strokeStyle example

- -

Este ejemplo es similar al de arriba, pero usa la propiedad  strokeStyle para cambiar el color del contorno de las formas. Usamos el método  arc() para dibujar circulos en lugar de celdas cuadradas.

- -
  function draw() {
-    var ctx = document.getElementById('canvas').getContext('2d');
-    for (var i = 0; i < 6; i++) {
-      for (var j = 0; j < 6; j++) {
-        ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' +
-                         Math.floor(255 - 42.5 * j) + ')';
-        ctx.beginPath();
-        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
-        ctx.stroke();
-      }
-    }
-  }
-
- - - -

The result looks like this:

- -

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

- -

Transparency

- -

Ademas de dibujar formas opacas en el canvas, podemos dibujar formas semi-transparentes(o translucidas). Esto se logra bien configurando la propiedad  globalAlpha o asignando un color semi-transparente al estilo del trazo u  u/y al de relleno.

- -
-
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
-
Applies the specified transparency value to all future shapes drawn on the canvas. The value must be between 0.0 (fully transparent) to 1.0 (fully opaque). This value is 1.0 (fully opaque) by default.
-
- -

The globalAlpha property can be useful if you want to draw a lot of shapes on the canvas with similar transparency, but otherwise it's generally more useful to set the transparency on individual shapes when setting their colors.

- -

Debido qaque las propiedades  strokeStyle y fillStyle aceptan valores de color rgba de CSS, podemos usar la siguiente notacion para asignar una color transparente a ellos.

- -
// Assigning transparent colors to stroke and fill style
-
-ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
-ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
-
- -

The rgba() function is similar to the rgb() function but it has one extra parameter. The last parameter sets the transparency value of this particular color. The valid range is again between 0.0 (fully transparent) and 1.0 (fully opaque).

- -

A globalAlpha example

- -

In this example, we'll draw a background of four different colored squares. On top of these, we'll draw a set of semi-transparent circles. The globalAlpha property is set at 0.2 which will be used for all shapes from that point on. Every step in the for loop draws a set of circles with an increasing radius. The final result is a radial gradient. By overlaying ever more circles on top of each other, we effectively reduce the transparency of the circles that have already been drawn. By increasing the step count and in effect drawing more circles, the background would completely disappear from the center of the image.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  // draw background
-  ctx.fillStyle = '#FD0';
-  ctx.fillRect(0, 0, 75, 75);
-  ctx.fillStyle = '#6C0';
-  ctx.fillRect(75, 0, 75, 75);
-  ctx.fillStyle = '#09F';
-  ctx.fillRect(0, 75, 75, 75);
-  ctx.fillStyle = '#F30';
-  ctx.fillRect(75, 75, 75, 75);
-  ctx.fillStyle = '#FFF';
-
-  // set transparency value
-  ctx.globalAlpha = 0.2;
-
-  // Draw semi transparent circles
-  for (var i = 0; i < 7; i++) {
-    ctx.beginPath();
-    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
-    ctx.fill();
-  }
-}
- - - -

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

- -

An example using rgba()

- -

In this second example, we do something similar to the one above, but instead of drawing circles on top of each other, I've drawn small rectangles with increasing opacity. Using rgba() gives you a little more control and flexibility because we can set the fill and stroke style individually.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Draw background
-  ctx.fillStyle = 'rgb(255, 221, 0)';
-  ctx.fillRect(0, 0, 150, 37.5);
-  ctx.fillStyle = 'rgb(102, 204, 0)';
-  ctx.fillRect(0, 37.5, 150, 37.5);
-  ctx.fillStyle = 'rgb(0, 153, 255)';
-  ctx.fillRect(0, 75, 150, 37.5);
-  ctx.fillStyle = 'rgb(255, 51, 0)';
-  ctx.fillRect(0, 112.5, 150, 37.5);
-
-  // Draw semi transparent rectangles
-  for (var i = 0; i < 10; i++) {
-    ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')';
-    for (var j = 0; j < 4; j++) {
-      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
-    }
-  }
-}
- - - -

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

- -

Line styles

- -

There are several properties which allow us to style lines.

- -
-
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
-
Sets the width of lines drawn in the future.
-
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
-
Sets the appearance of the ends of lines.
-
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
-
Sets the appearance of the "corners" where lines meet.
-
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
-
Establishes a limit on the miter when two lines join at a sharp angle, to let you control how thick the junction becomes.
-
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
-
Returns the current line dash pattern array containing an even number of non-negative numbers.
-
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
-
Sets the current line dash pattern.
-
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
-
Specifies where to start a dash array on a line.
-
- -

You'll get a better understanding of what these do by looking at the examples below.

- -

A lineWidth example

- -

This property sets the current line thickness. Values must be positive numbers. By default this value is set to 1.0 units.

- -

The line width is the thickness of the stroke centered on the given path. In other words, the area that's drawn extends to half the line width on either side of the path. Because canvas coordinates do not directly reference pixels, special care must be taken to obtain crisp horizontal and vertical lines.

- -

In the example below, 10 straight lines are drawn with increasing line widths. The line on the far left is 1.0 units wide. However, the leftmost and all other odd-integer-width thickness lines do not appear crisp, because of the path's positioning.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 10; i++) {
-    ctx.lineWidth = 1 + i;
-    ctx.beginPath();
-    ctx.moveTo(5 + i * 14, 5);
-    ctx.lineTo(5 + i * 14, 140);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

- -

Obtaining crisp lines requires understanding how paths are stroked. In the images below, the grid represents the canvas coordinate grid. The squares between gridlines are actual on-screen pixels. In the first grid image below, a rectangle from (2,1) to (5,5) is filled. The entire area between them (light red) falls on pixel boundaries, so the resulting filled rectangle will have crisp edges.

- -

- -

If you consider a path from (3,1) to (3,5) with a line thickness of 1.0, you end up with the situation in the second image. The actual area to be filled (dark blue) only extends halfway into the pixels on either side of the path. An approximation of this has to be rendered, which means that those pixels being only partially shaded, and results in the entire area (the light blue and dark blue) being filled in with a color only half as dark as the actual stroke color. This is what happens with the 1.0 width line in the previous example code.

- -

To fix this, you have to be very precise in your path creation. Knowing that a 1.0 width line will extend half a unit to either side of the path, creating the path from (3.5,1) to (3.5,5) results in the situation in the third image—the 1.0 line width ends up completely and precisely filling a single pixel vertical line.

- -
-

Note: Be aware that in our vertical line example, the Y position still referenced an integer gridline position—if it hadn't, we would see pixels with half coverage at the endpoints (but note also that this behavior depends on the current lineCap style whose default value is butt; you may want to compute consistent strokes with half-pixel coordinates for odd-width lines, by setting the lineCap style to square, so that the outer border of the stroke around the endpoint will be automatically extended to cover the whole pixel exactly).

- -

Note also that only start and final endpoints of a path are affected: if a path is closed with closePath(), there's no start and final endpoint; instead, all endpoints in the path are connected to their attached previous and next segment using the current setting of the lineJoin style, whose default value is miter, with the effect of automatically extending the outer borders of the connected segments to their intersection point, so that the rendered stroke will exactly cover full pixels centered at each endpoint if those connected segments are horizontal and/or vertical). See the next two sections for demonstrations of these additional line styles.

-
- -

For even-width lines, each half ends up being an integer amount of pixels, so you want a path that is between pixels (that is, (3,1) to (3,5)), instead of down the middle of pixels.

- -

While slightly painful when initially working with scalable 2D graphics, paying attention to the pixel grid and the position of paths ensures that your drawings will look correct regardless of scaling or any other transformations involved. A 1.0-width vertical line drawn at the correct position will become a crisp 2-pixel line when scaled up by 2, and will appear at the correct position.

- -

A lineCap example

- -

The lineCap property determines how the end points of every line are drawn. There are three possible values for this property and those are: butt, round and square. By default this property is set to butt.

- -

- -
-
butt
-
The ends of lines are squared off at the endpoints.
-
round
-
The ends of lines are rounded.
-
square
-
The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
-
- -

In this example, we'll draw three lines, each with a different value for the lineCap property. I also added two guides to see the exact differences between the three. Each of these lines starts and ends exactly on these guides.

- -

The line on the left uses the default butt option. You'll notice that it's drawn completely flush with the guides. The second is set to use the round option. This adds a semicircle to the end that has a radius half the width of the line. The line on the right uses the square option. This adds a box with an equal width and half the height of the line thickness.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineCap = ['butt', 'round', 'square'];
-
-  // Draw guides
-  ctx.strokeStyle = '#09f';
-  ctx.beginPath();
-  ctx.moveTo(10, 10);
-  ctx.lineTo(140, 10);
-  ctx.moveTo(10, 140);
-  ctx.lineTo(140, 140);
-  ctx.stroke();
-
-  // Draw lines
-  ctx.strokeStyle = 'black';
-  for (var i = 0; i < lineCap.length; i++) {
-    ctx.lineWidth = 15;
-    ctx.lineCap = lineCap[i];
-    ctx.beginPath();
-    ctx.moveTo(25 + i * 50, 10);
-    ctx.lineTo(25 + i * 50, 140);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

- -

A lineJoin example

- -

The lineJoin property determines how two connecting segments (of lines, arcs or curves) with non-zero lengths in a shape are joined together (degenerate segments with zero lengths, whose specified endpoints and control points are exactly at the same position, are skipped).

- -

There are three possible values for this property: round, bevel and miter. By default this property is set to miter. Note that the lineJoin setting has no effect if the two connected segments have the same direction, because no joining area will be added in this case.

- -

- -
-
round
-
Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to half the line width.
-
bevel
-
Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
-
miter
-
Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is effected by the miterLimit property which is explained below.
-
- -

The example below draws three different paths, demonstrating each of these three lineJoin property settings; the output is shown above.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineJoin = ['round', 'bevel', 'miter'];
-  ctx.lineWidth = 10;
-  for (var i = 0; i < lineJoin.length; i++) {
-    ctx.lineJoin = lineJoin[i];
-    ctx.beginPath();
-    ctx.moveTo(-5, 5 + i * 40);
-    ctx.lineTo(35, 45 + i * 40);
-    ctx.lineTo(75, 5 + i * 40);
-    ctx.lineTo(115, 45 + i * 40);
-    ctx.lineTo(155, 5 + i * 40);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

- -

A demo of the miterLimit property

- -

As you've seen in the previous example, when joining two lines with the miter option, the outside edges of the two joining lines are extended up to the point where they meet. For lines which are at large angles with each other, this point is not far from the inside connection point. However, as the angles between each line decreases, the distance (miter length) between these points increases exponentially.

- -

The miterLimit property determines how far the outside connection point can be placed from the inside connection point. If two lines exceed this value, a bevel join gets drawn instead. Note that the maximum miter length is the product of the line width measured in the current coordinate system, by the value of this miterLimit property (whose default value is 10.0 in the HTML {{HTMLElement("canvas")}}), so the miterLimit can be set independently from the current display scale or any affine transforms of paths: it only influences the effectively rendered shape of line edges.

- -

More exactly, the miter limit is the maximum allowed ratio of the extension length (in the HTML canvas, it is measured between the outside corner of the joined edges of the line and the common endpoint of connecting segments specified in the path) to half the line width. It can equivalently be defined as the maximum allowed ratio of the distance between the inside and outside points of jonction of edges, to the total line width. It is then equal to the cosecant of half the minimum inner angle of connecting segments below which no miter join will be rendered, but only a bevel join:

- -
    -
  • miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
    • -
  • The default miter limit of 10.0 will strip all miters for sharp angles below about 11 degrees.
    • -
  • A miter limit equal to √2 ≈ 1.4142136 (rounded up) will strip miters for all acute angles, keeping miter joins only for obtuse or right angles.
    • -
  • A miter limit equal to 1.0 is valid but will disable all miters.
    • -
  • Values below 1.0 are invalid for the miter limit.
    • -
- -

Here's a little demo in which you can set miterLimit dynamically and see how this effects the shapes on the canvas. The blue lines show where the start and endpoints for each of the lines in the zig-zag pattern are.

- -

If you specify a miterLimit value below 4.2 in this demo, none of the visible corners will join with a miter extension, but only with a small bevel near the blue lines; with a miterLimit above 10, most corners in this demo should join with a miter far away from the blue lines, and whose height is decreasing between corners from left to right because they connect with growing angles; with intermediate values, the corners on the left side will only join with a bevel near the blue lines, and the corners on the right side with a miter extension (also with a decreasing height).

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Clear canvas
-  ctx.clearRect(0, 0, 150, 150);
-
-  // Draw guides
-  ctx.strokeStyle = '#09f';
-  ctx.lineWidth   = 2;
-  ctx.strokeRect(-5, 50, 160, 50);
-
-  // Set line styles
-  ctx.strokeStyle = '#000';
-  ctx.lineWidth = 10;
-
-  // check input
-  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
-    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
-  } else {
-    alert('Value must be a positive number');
-  }
-
-  // Draw lines
-  ctx.beginPath();
-  ctx.moveTo(0, 100);
-  for (i = 0; i < 24 ; i++) {
-    var dy = i % 2 == 0 ? 25 : -25;
-    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
-  }
-  ctx.stroke();
-  return false;
-}
-
- - - -

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

- -

Using line dashes

- -

The setLineDash method and the lineDashOffset property specify the dash pattern for lines. The setLineDash method accepts a list of numbers that specifies distances to alternately draw a line and a gap and the lineDashOffset property sets an offset where to start the pattern.

- -

In this example we are creating a marching ants effect. It is an animation technique often found in selection tools of computer graphics programs. It helps the user to distinguish the selection border from the image background by animating the border. In a later part of this tutorial, you can learn how to do this and other basic animations.

- - - -
var ctx = document.getElementById('canvas').getContext('2d');
-var offset = 0;
-
-function draw() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.setLineDash([4, 2]);
-  ctx.lineDashOffset = -offset;
-  ctx.strokeRect(10, 10, 100, 100);
-}
-
-function march() {
-  offset++;
-  if (offset > 16) {
-    offset = 0;
-  }
-  draw();
-  setTimeout(march, 20);
-}
-
-march();
- -

{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

- -

Gradients

- -

Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the fillStyle or strokeStyle properties.

- -
-
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
-
Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).
-
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
-
Creates a radial gradient. The parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2.
-
- -

For example:

- -
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
-
- -

Once we've created a CanvasGradient object we can assign colors to it by using the addColorStop() method.

- -
-
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
-
Creates a new color stop on the gradient object. The position is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the color argument must be a string representing a CSS {{cssxref("<color>")}}, indicating the color the gradient should reach at that offset into the transition.
-
- -

You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.

- -
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-lineargradient.addColorStop(0, 'white');
-lineargradient.addColorStop(1, 'black');
-
- -

A createLinearGradient example

- -

In this example, we'll create two different gradients. As you can see here, both the strokeStyle and fillStyle properties can accept a canvasGradient object as valid input.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Create gradients
-  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
-  lingrad.addColorStop(0, '#00ABEB');
-  lingrad.addColorStop(0.5, '#fff');
-  lingrad.addColorStop(0.5, '#26C000');
-  lingrad.addColorStop(1, '#fff');
-
-  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
-  lingrad2.addColorStop(0.5, '#000');
-  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
-
-  // assign gradients to fill and stroke styles
-  ctx.fillStyle = lingrad;
-  ctx.strokeStyle = lingrad2;
-
-  // draw shapes
-  ctx.fillRect(10, 10, 130, 130);
-  ctx.strokeRect(50, 50, 50, 50);
-
-}
-
- - - -

The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.

- -

In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.

- -

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

- -

A createRadialGradient example

- -

In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Create gradients
-  var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
-  radgrad.addColorStop(0, '#A7D30C');
-  radgrad.addColorStop(0.9, '#019F62');
-  radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)');
-
-  var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
-  radgrad2.addColorStop(0, '#FF5F98');
-  radgrad2.addColorStop(0.75, '#FF0188');
-  radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)');
-
-  var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
-  radgrad3.addColorStop(0, '#00C9FF');
-  radgrad3.addColorStop(0.8, '#00B5E2');
-  radgrad3.addColorStop(1, 'rgba(0, 201, 255, 0)');
-
-  var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
-  radgrad4.addColorStop(0, '#F4F201');
-  radgrad4.addColorStop(0.8, '#E4C700');
-  radgrad4.addColorStop(1, 'rgba(228, 199, 0, 0)');
-
-  // draw shapes
-  ctx.fillStyle = radgrad4;
-  ctx.fillRect(0, 0, 150, 150);
-  ctx.fillStyle = radgrad3;
-  ctx.fillRect(0, 0, 150, 150);
-  ctx.fillStyle = radgrad2;
-  ctx.fillRect(0, 0, 150, 150);
-  ctx.fillStyle = radgrad;
-  ctx.fillRect(0, 0, 150, 150);
-}
-
- - - -

In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.

- -

The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient #019F62 = rgba(1,159,98,1).

- -

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

- -

Patterns

- -

In one of the examples on the previous page, we used a series of loops to create a pattern of images. There is, however, a much simpler method: the createPattern() method.

- -
-
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
-
Creates and returns a new canvas pattern object. image is a {{domxref("CanvasImageSource")}} (that is, an {{domxref("HTMLImageElement")}}, another canvas, a {{HTMLElement("video")}} element, or the like. type is a string indicating how to use the image.
-
- -

The type specifies how to use the image in order to create the pattern, and must be one of the following string values:

- -
-
repeat
-
Tiles the image in both vertical and horizontal directions.
-
repeat-x
-
Tiles the image horizontally but not vertically.
-
repeat-y
-
Tiles the image vertically but not horizontally.
-
no-repeat
-
Doesn't tile the image. It's used only once.
-
- -

We use this method to create a {{domxref("CanvasPattern")}} object which is very similar to the gradient methods we've seen above. Once we've created a pattern, we can assign it to the fillStyle or strokeStyle properties. For example:

- -
var img = new Image();
-img.src = 'someimage.png';
-var ptrn = ctx.createPattern(img, 'repeat');
-
- -
-

Note: Like with the drawImage() method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.

-
- -

A createPattern example

- -

In this last example, we'll create a pattern to assign to the fillStyle property. The only thing worth noting is the use of the image's onload handler. This is to make sure the image is loaded before it is assigned to the pattern.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // create new image object to use as pattern
-  var img = new Image();
-  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
-  img.onload = function() {
-
-    // create pattern
-    var ptrn = ctx.createPattern(img, 'repeat');
-    ctx.fillStyle = ptrn;
-    ctx.fillRect(0, 0, 150, 150);
-
-  }
-}
-
- - - -

{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

- -

Shadows

- -

Using shadows involves just four properties:

- -
-
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
-
Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
-
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
-
Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
-
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
-
Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.
-
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
-
A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.
-
- -

The properties shadowOffsetX and shadowOffsetY indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.

- -

The shadowBlur property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

- -

The shadowColor property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

- -
-

Note: Shadows are only drawn for source-over compositing operations.

-
- -

A shadowed text example

- -

This example draws a text string with a shadowing effect.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.shadowOffsetX = 2;
-  ctx.shadowOffsetY = 2;
-  ctx.shadowBlur = 2;
-  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
-
-  ctx.font = '20px Times New Roman';
-  ctx.fillStyle = 'Black';
-  ctx.fillText('Sample String', 5, 30);
-}
-
- - - -

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

- -

We will look at the font property and fillText method in the next chapter about drawing text.

- -

Canvas fill rules

- -

When using fill (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersects itself or is nested.
-
- Two values are possible:

- - - -

In this example we are using the evenodd rule.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.beginPath();
-  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
-  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
-  ctx.fill('evenodd');
-}
- - - -

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git a/files/es/web/guide/html/canvas_tutorial/basic_animations/index.html b/files/es/web/guide/html/canvas_tutorial/basic_animations/index.html deleted file mode 100644 index 94c66fb05d..0000000000 --- a/files/es/web/guide/html/canvas_tutorial/basic_animations/index.html +++ /dev/null @@ -1,333 +0,0 @@ ---- -title: Animaciones básicas -slug: Web/Guide/HTML/Canvas_tutorial/Basic_animations -tags: - - Canvas - - HTML5 - - Intermedio - - Tutorial - - graficos -translation_of: Web/API/Canvas_API/Tutorial/Basic_animations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}
- -
-

Ya que estamos usando JavaScript para controlar elementos {{HTMLElement("canvas")}} , también es muy fácil hacer animaciones (interactivas). En este capitulo veremos como hacer algunas animaciones básicas.

-
- -

Probablemente la mayor limitación es que una vez que se dibuja una forma, se mantiene de esa manera. Si necesitamos moverlo tenemos que volver a dibujarlo y todo lo que se dibujó antes. Se necesita mucho tiempo para volver a dibujar estructuras complejas y el rendimiento depende en gran medida de la velocidad de la computadora en la que se ejecuta.

- -

Pasos básicos de animación

- -

Estos son los pasos que necesitas para dibujar un cuadro:

- -
    -
  1. Limpiar el canvas
    - A menos que las formas que vas a dibujar llenen el canvas completo (por ejemplo, una imagen de fondo), debes borrar cualquier forma que haya dibujado previamente. La forma más fácil de hacerlo es usar el método {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.
    2. -
  2. Guardar el estado del canvas
    - Si estás cambiando alguna configuración (como estilos, transformaciones, etc.) que afecte el estado del canvas y deseas asegurarte de que se utiliza el estado original cada vez que se dibuja una figura, debes guardar ese estado original. 
    3. -
  3. Dibujar formas animadas
    - El paso en el que realizas el renderizado del cuadro actual.
    4. -
  4. Restaurar el estado del canvas
    - Si has guardado el estado, restáuralo antes de dibujar un nuevo cuadro.
    5. -
- -

Controlando una animación

- -

Las formas se dibujan en el canvas utilizando los métodos de canvas directamente o llamando a funciones personalizadas. En circunstancias normales, solo vemos que estos resultados aparecen en el canvas cuando el script termina de ejecutarse. Por ejemplo, no es posible hacer una animación desde un bucle for.

- -

Eso significa que necesitamos una forma de ejecutar nuestras funciones de dibujo durante un período de tiempo. Hay dos formas de controlar una animación como esta.

- -

Actualizaciones Programadas

- -

Primero {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, y {{domxref("window.requestAnimationFrame()")}} son funciones que pueden ser usadas para llamar una función especifica en un periodo de tiempo establecido.

- -
-
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
-
Ejecuta una función especificada por function cada delay milisegundos.
-
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
-
Ejecuta una función especificada por function dentro de delay milisegundos.
-
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
-
Comunica al navegador que  deseas iniciar una animación y requieres que el navegador llame a las funciones especificas para actualizar la misma antes de la siguiente escena.
-
- -

Si no quieres ninguna interacción del usuario puedes usar la función setInterval() que repite la ejecución del código suministrado. Si lo que queremos es hacer un juego, podríamos usar eventos de teclado o el mouse para controlar la animación y usar setTimeout(). Al establecer los {{domxref("EventListener")}}, capturamos cualquier interacción del usuario y ejecutamos nuestras funciones de animación.

- -
-

En los siguiente ejemplo,usaremos el método para controlar animaciones {{domxref("window.requestAnimationFrame()")}}. El método requestAnimationFrame provee formas amigables y mas eficientes  para animar llamando cada marco de animación cuando el sistema esta listo para dibujar. La cantidad de devoluciones de llamadas suele ser 60 veces por segundo y podría ser reducido a menor periodo cuando se corre en un segundo plano. Para mas información acerca de los ciclos de animación, especialmente para juegos, Ver el Articulo Anatomía de un videojuego en nuestra GameZona de desarrollo de Juegos.

-
- -

Un sistema solar animado

- -

Este ejemplo animado es un pequeño modelo de nuestro sistema solar.

- -
var sun = new Image();
-var moon = new Image();
-var earth = new Image();
-function init(){
-  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
-  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
-  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
-  window.requestAnimationFrame(draw);
-}
-
-function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.globalCompositeOperation = 'destination-over';
-  ctx.clearRect(0,0,300,300); // limpiar canvas
-
-  ctx.fillStyle = 'rgba(0,0,0,0.4)';
-  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
-  ctx.save();
-  ctx.translate(150,150);
-
-  // La tierra
-  var time = new Date();
-  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
-  ctx.translate(105,0);
-  ctx.fillRect(0,-12,50,24); // Sombra
-  ctx.drawImage(earth,-12,-12);
-
-  // La luna
-  ctx.save();
-  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
-  ctx.translate(0,28.5);
-  ctx.drawImage(moon,-3.5,-3.5);
-  ctx.restore();
-
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.arc(150,150,105,0,Math.PI*2,false); // Órbita terrestre
-  ctx.stroke();
-
-  ctx.drawImage(sun,0,0,300,300);
-
-  window.requestAnimationFrame(draw);
-}
-
-init();
-
- - - -

{{EmbedLiveSample("Un_sistema_solar_animado", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

- -

Un reloj animado

- -

Este ejemplo dibuja una reloj animado, mostrando la hora actual.

- -
function clock(){
-  var now = new Date();
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.save();
-  ctx.clearRect(0,0,150,150);
-  ctx.translate(75,75);
-  ctx.scale(0.4,0.4);
-  ctx.rotate(-Math.PI/2);
-  ctx.strokeStyle = "black";
-  ctx.fillStyle = "white";
-  ctx.lineWidth = 8;
-  ctx.lineCap = "round";
-
-  // Aguja de la hora
-  ctx.save();
-  for (var i=0;i<12;i++){
-    ctx.beginPath();
-    ctx.rotate(Math.PI/6);
-    ctx.moveTo(100,0);
-    ctx.lineTo(120,0);
-    ctx.stroke();
-  }
-  ctx.restore();
-
-  // Aguja del minuto
-  ctx.save();
-  ctx.lineWidth = 5;
-  for (i=0;i<60;i++){
-    if (i%5!=0) {
-      ctx.beginPath();
-      ctx.moveTo(117,0);
-      ctx.lineTo(120,0);
-      ctx.stroke();
-    }
-    ctx.rotate(Math.PI/30);
-  }
-  ctx.restore();
-
-  var sec = now.getSeconds();
-  var min = now.getMinutes();
-  var hr  = now.getHours();
-  hr = hr>=12 ? hr-12 : hr;
-
-  ctx.fillStyle = "black";
-
-  // Escribimos la hora
-  ctx.save();
-  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
-  ctx.lineWidth = 14;
-  ctx.beginPath();
-  ctx.moveTo(-20,0);
-  ctx.lineTo(80,0);
-  ctx.stroke();
-  ctx.restore();
-
-  // escribimos los minutos
-  ctx.save();
-  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
-  ctx.lineWidth = 10;
-  ctx.beginPath();
-  ctx.moveTo(-28,0);
-  ctx.lineTo(112,0);
-  ctx.stroke();
-  ctx.restore();
-
-  // escribimos los segundos
-  ctx.save();
-  ctx.rotate(sec * Math.PI/30);
-  ctx.strokeStyle = "#D40000";
-  ctx.fillStyle = "#D40000";
-  ctx.lineWidth = 6;
-  ctx.beginPath();
-  ctx.moveTo(-30,0);
-  ctx.lineTo(83,0);
-  ctx.stroke();
-  ctx.beginPath();
-  ctx.arc(0,0,10,0,Math.PI*2,true);
-  ctx.fill();
-  ctx.beginPath();
-  ctx.arc(95,0,10,0,Math.PI*2,true);
-  ctx.stroke();
-  ctx.fillStyle = "rgba(0,0,0,0)";
-  ctx.arc(0,0,3,0,Math.PI*2,true);
-  ctx.fill();
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.lineWidth = 14;
-  ctx.strokeStyle = '#325FA2';
-  ctx.arc(0,0,142,0,Math.PI*2,true);
-  ctx.stroke();
-
-  ctx.restore();
-
-  window.requestAnimationFrame(clock);
-}
-
-window.requestAnimationFrame(clock);
- - - -

{{EmbedLiveSample("Un_reloj_animado", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

- -

Un panorama en bucle

- -

En este ejemplo, una foto panorámica avanza de izquierda a derecha. Donde usaremos una imagen del Parque Nacional de Yosemite que tomamos de Wikipedia, pero tu podrías usar cualquier imagen que sea mas grande que el canvas.

- -
var img = new Image();
-
-// Variables de usuario - personalizar estas para cambiar la imagen cuando inicie el desplazamiento
-// dirección y velocidad.
-
-img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
-var CanvasXSize = 800;
-var CanvasYSize = 200;
-var speed = 30; //más bajo es más rápido
-var scale = 1.05;
-var y = -4.5; //desplazamiento vertical
-
-// Programa principal
-
-var dx = 0.75;
-var imgW;
-var imgH;
-var x = 0;
-var clearX;
-var clearY;
-var ctx;
-
-img.onload = function() {
-    imgW = img.width * scale;
-    imgH = img.height * scale;
-
-    if (imgW > CanvasXSize) {
-        // imagen más grande que canvas
-        x = CanvasXSize - imgW;
-    }
-    if (imgW > CanvasXSize) {
-        // ancho de imagen más grande que canvas
-        clearX = imgW;
-    } else {
-        clearX = CanvasXSize;
-    }
-    if (imgH > CanvasYSize) {
-        // altura de la imagen más grande que canvas
-        clearY = imgH;
-    } else {
-        clearY = CanvasYSize;
-    }
-
-    // obtener contexto de canvas
-    ctx = document.getElementById('canvas').getContext('2d');
-
-    // establecer frecuencia de actualización
-    return setInterval(draw, speed);
-}
-
-function draw() {
-    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
-
-    // si la imagen es <= tamaño de Canvas
-    if (imgW <= CanvasXSize) {
-        // reiniciar, comenzar desde el principio
-        if (x > CanvasXSize) {
-            x = -imgW + x;
-        }
-        // dibujar image1 adicional
-        if (x > 0) {
-            ctx.drawImage(img, -imgW + x, y, imgW, imgH);
-        }
-        // dibujar image2 adicional
-        if (x - imgW > 0) {
-            ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
-        }
-    }
-
-    // la imagen es > tamaño de Canvas
-    else {
-        // reiniciar, comenzar desde el principio
-        if (x > (CanvasXSize)) {
-            x = CanvasXSize - imgW;
-        }
-        // dibujar image adicional
-        if (x > (CanvasXSize-imgW)) {
-            ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
-        }
-    }
-    // dibujar imagen
-    ctx.drawImage(img, x, y,imgW, imgH);
-    // cantidad para moverse
-    x += dx;
-}
- -

Debajo esta el elemento {{HTMLElement("canvas")}} en el cual va la imagen se va ha desplazar. Nota que el ancho y el alto especificado aquí son las variables CanvasXZSize y CanvasYSize.

- -
<canvas id="canvas" width="800" height="200"></canvas>
- -

{{EmbedLiveSample("Un_panorama_en_bucle", "830", "230")}}

- -

Otros ejemplos

- -
-
Un ray-caster básico
-
Un buen ejemplo de como hacer animaciones usando como control el teclado.
-
Animaciones avanzadas
-
Vamos a echar un vistazo a algunas técnicas de animación avanzadas y física en el próximo capítulo.
-
- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}

diff --git a/files/es/web/guide/html/canvas_tutorial/basic_usage/index.html b/files/es/web/guide/html/canvas_tutorial/basic_usage/index.html deleted file mode 100644 index 17136d7a7e..0000000000 --- a/files/es/web/guide/html/canvas_tutorial/basic_usage/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Uso básico de Canvas -slug: Web/Guide/HTML/Canvas_tutorial/Basic_usage -translation_of: Web/API/Canvas_API/Tutorial/Basic_usage ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Dibujando_formas")}}
- -
-

Comenzamos este tutorial observando el elemento  {{HTMLElement("canvas")}}. Al final de esta página, sabrás como configurar el entorno 2D de canvas y habrás dibujado el primer ejemplo en tu navegador.

-
- -

El elemento <canvas>

- -
<canvas id="tutorial" width="150" height="150"></canvas>
-
- -

A primera vista, un elemento {{HTMLElement("canvas")}} es parecido al elemento {{HTMLElement("img")}}, con la diferencia que este no tiene los atributos src y alt. El elemento <canvas> tiene solo dos atributos - {{htmlattrxref("width", "canvas")}} y {{htmlattrxref("height", "canvas")}}. Ambos son opcionales y pueden ser definidos usando propiedades DOM. Cuando los atributos ancho y alto no estan especificados, el lienzo se inicializara con 300 pixels ancho y 150 pixels de alto. El elemento puede ser arbitrariamente redimensionado por CSS, pero durante el renderizado la imagen es escalada para ajustarse al tamaño de su layout. Si el tamaño del CSS no respeta el ratio del canvas inicial, este aparecerá distorsionado.

- -
-

Nota: Si su renderizado se ve distorsionado, pruebe especificar los atributos width y height explícitamente en los atributos del <canvas> , y no usando CSS.

-
- -

El atributo id no está especificado para el elemento  <canvas> pero es uno de los atributos globales de HTML el cual puede ser aplicado a cualquier elemento HTML (como class por ejemplo). Siempre es buena idea proporcionar un id porque esto hace más fácil identificarlo en un script.

- -

El elemento <canvas> puede ser estilizado como a cualquier imagen normal (margin, border, background, etc). Estas reglas, sin embargo, no afectan a lo dibujado sobre el canvas. Mas adelante veremos cómo se hace esto en un capítulo dedicado en este tutorial. Cuando no tenemos reglas de estilo aplicadas al canvas, este será completamente transparente.

- -
-

Contenido alternativo

- -

El elemento <canvas> se diferencia de un tag {{HTMLElement("img")}} en que, como los elementos {{HTMLElement("video")}}, {{HTMLElement("audio")}} o {{HTMLElement("picture")}}, es fácil definir contenido alternativo (fallback content) para mostrarse en navegadores viejos que no soporten el elemento <canvas>, como versiones de Internet Explorer previas a la versión 9 o navegadores de texto. Siempre debes proporcionar contenido alternativo para mostrar en estos navegadores.

- -

Proporcionar contenido alternativo es muy explicito: solo debemos insertar el contenido alterno dentro del elemento <canvas>. Los navegadores que no soporten <canvas> ignoraran el contenedor y mostrarán el contenido indicado dentro de este. Navegadores que soporten <canvas> ignorarán el contenido en su interior (de las etiquetas), y mostrarán el canvas normalmente.

- -

Por ejemplo, podremos proporcionar un texto descriptivo del contenido del canvas o proveer una imagen estática del contenido rederizado. Nos podría quedar algo así:

- -
<canvas id="stockGraph" width="150" height="150">
-  current stock price: $3.15 +0.15
-</canvas>
-
-<canvas id="clock" width="150" height="150">
-  <img src="images/clock.png" width="150" height="150" alt=""/>
-</canvas>
-
- -

Etiqueta </canvas> requerida

- -

De manera distinta al elemento {{HTMLElement("img")}}, el elemento {{HTMLElement("canvas")}} requiere cerrar la etiqueta  (</canvas>).

- -
-

Note: Aunque las versiones anteriores del navegador Safari de Apple no requeria el cierre de la etiqueta, la especificacion indica que es necesaria, asi que tu deberias incluir esta para asegurarte la compatibilidad. Aquellas versiones de Safari (anteriores versiones a 2.0) renderizaran el contenido de regreso agregandolo al canvas mismo a no ser que utilice trucos de CSS para enmascararlo. Afortunadamente, los usuarios de aquellas versiones de Safari son raros hoy en dia.

-
- -

Si el contenido alternativo no se necesita, un simple <canvas id="foo" ...></canvas> es completamente compatible con todos los navegadores que soportan canvas.

- -

El contexto de renderización

- -

{{HTMLElement("canvas")}} crea un lienzo de dibujo fijado que expone uno o mas contextos renderizados, los cuales son usados para crear y manipular el contenido mostrado. Nos enfocaremos en renderizacion de contextos 2D. Otros contextos deberan proveer diferentes tipos de renderizaciones; por ejemplo, WebGL usa un 3D contexto ("experimental-webgl") basado sobre OpenGL ES.

- -

El canvas esta inicialmente en blanco. Para mostrar alguna cosa, un script primero necesita acceder al contexto a renderizar y dibujar sobre este. El elemento  {{HTMLElement("canvas")}} tiene un method llamado  getContext(), usado para obtener el contexto a renderizar y sus funciones de dibujo. getContext() toma un parametro, el tipo de contexto. Para graficos 2D, como los que cubre este tutorial, su especificacion es "2d".

- -
var canvas = document.getElementById('tutorial');
-var ctx = canvas.getContext('2d');
-
- -

La primera linea regresa el nodo DOM para el elemento {{HTMLElement("canvas")}} llamando al metodo  {{domxref("document.getElementById()")}}. Una vez tu tienes el elemento nodo, tu puedes acceder al contexto de dibujo usando su metodo getContext().

- -
-

Comprobando soporte

- -

El contenido de regreso que es mostrado en navegadores los cuales no soportan {{HTMLElement("canvas")}}. Para los Scripts puede tambien comprobarse su soporte desde la programacion por un simple test para la presencia del metodo getContext(). Con un trozo de codigo parecido al que viene debajo:

- -
var canvas = document.getElementById('tutorial');
-
-if (canvas.getContext){
-  var ctx = canvas.getContext('2d');
-  // drawing code here
-} else {
-  // canvas-unsupported code here
-}
-
-
-
- -

Un esqueleto de plantilla

- -

Aqui esta una plantilla minimalista, la cual usaremos como punto de partida para posteriores ejemplos.

- -
<html>
-  <head>
-    <title>Canvas tutorial</title>
-    <script type="text/javascript">
-      function draw(){
-        var canvas = document.getElementById('tutorial');
-        if (canvas.getContext){
-          var ctx = canvas.getContext('2d');
-        }
-      }
-    </script>
-    <style type="text/css">
-      canvas { border: 1px solid black; }
-    </style>
-  </head>
-  <body onload="draw();">
-    <canvas id="tutorial" width="150" height="150"></canvas>
-  </body>
-</html>
-
- -

El script incluye una funcion llamada draw(), la cual es ejecutada una vez finalizada la carga de la pagina; este esta hecho usando el evento load del documento. Esta funcion, o una parecida, podria tambien ser llamada usando {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, o cualquier otro manejador de evento, a lo largo de que la pagina esta siendo cargada la primera vez.

- -

Aqui esta como la plantilla se ve en acción:

- -

{{EmbedLiveSample("Un_esqueleto_de_plantilla", 160, 160)}}

- -

Un simple ejemplo

- -

Para comenzar, daremos un vistazo a un simple ejemplo que dibuja dos rectangulos que se intersectan, uno de los cuales tiene alpha transparencia. Exploraremos como esto trabaja en mas detalle en posteriores ejemplos.

- -
<html>
- <head>
-  <script type="application/javascript">
-    function draw() {
-      var canvas = document.getElementById("canvas");
-      if (canvas.getContext) {
-        var ctx = 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);
-      }
-    }
-  </script>
- </head>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
-</html>
-
- -

Este ejemplo quedaría así:

- -

{{EmbedLiveSample("Un_simple_ejemplo", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

- -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Dibujando_formas")}}

diff --git a/files/es/web/guide/html/canvas_tutorial/dibujando_formas/index.html b/files/es/web/guide/html/canvas_tutorial/dibujando_formas/index.html deleted file mode 100644 index 3467533e93..0000000000 --- a/files/es/web/guide/html/canvas_tutorial/dibujando_formas/index.html +++ /dev/null @@ -1,513 +0,0 @@ ---- -title: Dibujando formas con canvas -slug: Web/Guide/HTML/Canvas_tutorial/Dibujando_formas -tags: - - Canvas - - HTML - - HTML Canvas - - HTML5 - - Intermedio - - Tutorial - - graficos -translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
- -
-

Ahora que hemos preparado nuestro entorno canvas, podemos entrar en detalles de como dibujar en el canvas. Al final de este artículo, habrás aprendido  como dibujar rectángulos, triángulos, líneas, arcos y curvas, dándote familiaridad con algunas figuras básicas. Trabajar con rutas es esencial cuando dibujamos objetos sobre el canvas y veremos como se puede hacer eso.

-
- -

La cuadrícula

- -

Antes de que podamos empezar a dibujar, necesitamos hablar sobre la cuadrícula del canvas o el espacio de coordenadas. La plantilla HTML de la página anterior tenía un elemento canvas con un 'height' y un 'width' de 150 píxeles. A la derecha, puedes ver este canvas con la cuadrícula por defecto superpuesta. Normalmente una unidad en la cuadrícula corresponde a un píxel en el elemento canvas. El origen de esta cuadrícula está posicionado en la esquina superior izquierda (coordenada (0,0)). Todos los elementos estan posicionados de manera relativa a este punto, así que la posición de la esquina superior izquierda del cuadrado azul es de 'x' pixeles desde la izquierda y 'y' pixeles desde arriba (coordenada (x,y)). Mas tarde en este tutorial veremos como trasladar el punto de origen a una posicion diferente, girar la cuadrícula e incluso darle una escala diferente. Por ahora nos dedicaremos a lo mas común.

- -

Dibujando rectángulos

- -

A diferencia de SVG, {{HTMLElement("canvas")}} solo soporta una forma primitiva: rectangulos. Todas las otras formas deben ser creadas por la combinación de uno o más trazos, listas de puntos conectados por líneas. Afortunadamente, tenemos una variedad de funciones para dibujar trazos  que hacen posible componer formas muy complejas.

- -
-

Primero veamos el rectángulo. Aquí hay tres funciones que podemos usar en el canvas para dibujarlos:

- -
-
fillRect(x, y, width, height)
-
Dibuja un rectángulo relleno.
-
strokeRect(x, y, width, height)
-
Dibuja el contorno de un rectángulo.
-
clearRect(x, y, width, height)
-
Borra un área rectangular especificada, dejándola totalmente transparente.
-
- -

Cada una de estas tres funciones toma los mismos parámetros. X e Y especifican la posición del canvas (en relación con el origen) desde la esquina superior izquierda del rectángulo. Tambien especifica los parámetros de anchura y altura que proporcionan el tamaño del rectángulo.

- -

A continuación se muestra la función draw() de la página anterior, pero ahora haciendo uso de estas tres funciones.

- -

Ejemplo de forma rectangular

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.fillRect(25,25,100,100);
-    ctx.clearRect(45,45,60,60);
-    ctx.strokeRect(50,50,50,50);
-  }
-}
- -

El resultado de este ejemplo se muestra a continuación.

- -

{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

- -

La función fillRect() dibuja un cuadrado grande negro de 100 píxeles en cada lado. La función clearRect() luego borra un cuadrado de 60x60 píxeles del centro, y luego strokeRect() es llamado para crear un contorno rectangular de 50x50 píxeles dentro del cuadrado borrado.

- -

En las próximas páginas veremos dos métodos alternativos para clearRect(), y también veremos cómo cambiar el color y el trazo de diferentes formas.

- -

A diferencia de las funciones de trazo que veremos en la próxima sección, las tres funciones del rectángulo dibujan inmediatamente en el canvas.

- -

Dibujando trazos

- -

Crear formas mediante trazos requiere algunos pasos adicionales.

- -
    -
  1. Primero, se crea el trazo.
    2. -
  2. A continuación, se usan comandos de dibujo para dibujar dentro del trazo.
    3. -
  3. Después, se cierra el trazo.
    4. -
  4. Una vez el trazo ha sido creado, se le puede dar contorno o relleno para renderizarlo.
    5. -
- -

Estas son las funciones que se usan para llevar a cabo estos pasos:

- -
-
beginPath()
-
Crea un nuevo trazo. Una vez creado, los comandos de dibujo futuros son aplicados dentro del trazo y usados para construir el nuevo trazo hacia arriba.
-
closePath()
-
Cierra el trazo de tal forma que los comandos de dibujo futuros son, una vez más redireccionados al contexto.
-
stroke()
-
Dibuja el contorno de la forma.
-
fill()
-
Dibuja una forma solida rellenando el área del trazo.
-
- -

El primer paso para crear un trazo es llamar la función beginPath(). Internamente, los trazos son guardados como una lista de subtrazos (lineas, arcos, etc) los cuales juntos crean una forma. Todo tiempo que sea llamado este método la lista es reseteada y podemos empezar a dibujar nuevas formas.

- -
Nota: Cuando el trazo actual este vacio, como aparece inmediatamente despues de llamar la función beginPath(), o en un canvas nuevo, el primer comando para la construcción del trazo es siempre tratada como un moveTo(), independientemente de cual es el trazo actual. Por esta razón casi siempre querrás específicamente setear tu posición de inicio despues de resetear un trazo.
- -

El segundo paso es llamar los métodos que específican los trazos a crear. Los veremos en seguida.

- -

El tercero, y un paso opcional, es llamar a la función closePath(). Este método trata de cerrar la forma dibujando una linea recta desde el punto actual al inicio. Si la forma ya ha sido cerrada o hay solamente un punto en la lista, la función hace nada.

- -
Nota: Cuando llamas a la función fill(), cualquier forma abierta es cerrada automaticamente, de tal forma que no tendrás que llamar a la función closePath(). Este no es el caso cuando llamas a la función stroke().
- -

Dibujando un triangulo

- -

Por ejemplo, el código para dibujar un triangulo luciría como el siguiente:

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    ctx.beginPath();
-    ctx.moveTo(75,50);
-    ctx.lineTo(100,75);
-    ctx.lineTo(100,25);
-    ctx.closePath();
-    ctx.fill();
-  }
-}
-
- -

El resultado lucirá así:

- -

{{EmbedLiveSample("Drawing_a_triangle", 160, 160)}}

- -

Moviendo la pluma

- -

Una función muy útil, la cual realmente no dibuja algo pero convierte parte de la lista de trazos descrita arriba, es la función moveTo(). Puedes, probablemente, pensar mejor de esta como levantar el lápiz o la pluma de un punto en un pedazo de papel y ponerlo en el siguiente punto.

- -
-
moveTo(x, y)
-
Mueve la pluma a las coordenadas específicadas por x e y.
-
- -

Cuando el canvas es inicializado ó la función beginPath() es llamada, querrás usar la función moveTo() para colocar el punto de inicio en alguna otra parte. Podríamos usar moveTo() para dibujar trazos sin conectar. Toma un vistazo a la cara sonriente de abajo. He marcado los lugares donde use el método moveTo() (las líneas rojas).

- -

Para intentar esto por tí mismo, puedes usar el pequeño código de abajo. Solo pégalo dentro de la función draw() que vimos antes.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    ctx.beginPath();
-    ctx.arc(75,75,50,0,Math.PI*2,true); // Círculo externo
-    ctx.moveTo(110,75);
-    ctx.arc(75,75,35,0,Math.PI,false);   // Boca (contra reloj)
-    ctx.moveTo(65,65);
-    ctx.arc(60,65,5,0,Math.PI*2,true);  // Ojo izquierdo
-    ctx.moveTo(95,65);
-    ctx.arc(90,65,5,0,Math.PI*2,true);  // Ojo derecho
-    ctx.stroke();
-  }
-}
-
- -

El resultado luce así:

- -

{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

- -

Si quisieras ver las líneas conectadas, puedes remover las líneas de código que llaman moveTo().

- -
-

Nota: Para aprender más sobre la función arc(), vea los {{anch("Arcs")}} a continuación.

-
- -

Líneas

- -

Para dibujar lineas rectas usa el método lineTo().

- -
-
lineTo(x, y)
-
Dibuja una línea desde la posición actual del dibujo a la posición específicada por x e y.
-
- -

Este método toma dos argumentos x e y, los cuales son las coordenadas del punto final de la linea. El punto de inicio es dependiente de los trazos previamente dibujados, donde el punto final del trazo anterior es el punto inicial para el siguiente, etc. El punto de inicio también puede ser cambiado usando el método moveTo().

- -

El ejemplo siguiente dibuja dos triángulos, uno rellenado y el otro contorneado.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    // Triángulo rellenado
-    ctx.beginPath();
-    ctx.moveTo(25,25);
-    ctx.lineTo(105,25);
-    ctx.lineTo(25,105);
-    ctx.fill();
-
-    // Triángulo contorneado
-    ctx.beginPath();
-    ctx.moveTo(125,125);
-    ctx.lineTo(125,45);
-    ctx.lineTo(45,125);
-    ctx.closePath();
-    ctx.stroke();
-  }
-}
-
- -

Esto comienza llamando a beginPath() para empezar una nueva forma. Entonces usamos el método moveTo() para mover el punto de inicio a la posición deseada. Debajo de esto dos líneas son dibujadas lo cual pinta dos lados del triángulo.

- -

{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

- -

Te darás cuenta de la diferencia entre el triángulo rellenado y el contorneado. Esto es, como se menciona arriba, porque las formas son automáticamente cerradas cuando un trazo es rellenado, pero no cuando esta contorneado. Si sacamos el closePath() para el triángulo contorneado, solamente dos líneas serian dibujadas, no un triángulo completo.

- -

Arcos

- -

Para dibujar arcos o circulos usamos el método arc(). También puedes usar arcTo(), pero su implementación es un poco menos confiable, así que no lo cubriremos aquí.

- -
-
arc(x, y, radius, startAngle, endAngle, anticlockwise)
-
Dibuja un arco.
-
- -

Este método toma cinco parámetros: x e y son las coordenadas del centro del círculo en el cual el arco debería ser dibujado. radius se explica por sí solo. Los parámetros startAngle y endAngle definen el punto de inicio y punto final del arco en radianes a lo largo de la curva del círculo. Estos son medidos desde el eje x. El parámetro anticlockwise es un valor Booleano el cual cuando es verdadero (true) dibuja el arco al contrario de las manecillas del reloj, de lo contrario el arco es dibujado al sentido de las manecillas del reloj.

- -
-

Nota: Los ángulos en la función del arco (arc) son medidos en radianes, no en grados. Para convertir grados a radianes puedes usar la siguiente expresión en Javascript: radians = (Math.PI/180)*degrees.

-
- -

El siguiente ejemplo es un poco más complejo que otros que hemos visto arriba. Esto dibuja 12 diferentes arcos, todos con diferentes ángulos y rellenos.

- -

Las dos sentencias for son para iterar a través de las filas y columnas de los arcos. Para cada arco, empezamos un nuevo trazo llamando beginPath(). En el código, cada uno de los parámetros para el arco estan en una variable para su entendimiento, pero no es necesario esto en la vida real.

- -

Las coordenadas x e y deberían ser suficientemente claras. radius y startAngle estan arreglados. El endAngle inicia en 180 grados (la mitad de un círculo) en la primera columna y es incrementado por pasos de 90 grados, culminando en un círculo completo en la última columna.

- -

El parámetro clockwise resulta, en la primera y tercera fila siendo dibujado como un arco al sentido de las manecillas de reloj y la segunda y cuarta fila como arcos al contrario de las manecillas de reloj. Finalmente, la estructura if hace los arcos contorneados a la mitad desde arriba y los arcos hacia abajorellenados a la mitad.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    for(var i=0;i<4;i++){
-      for(var j=0;j<3;j++){
-        ctx.beginPath();
-        var x              = 25+j*50;               // Coordenada x
-        var y              = 25+i*50;               // Coordenada y
-        var radius         = 20;                    // Radio del arco
-        var startAngle     = 0;                     // Punto inicial del círculo
-        var endAngle       = Math.PI+(Math.PI*j)/2; // Punto final del círculo
-        var anticlockwise  = i%2==0 ? false : true; // Sentido de las manecillas del reloj y contrario a ellas
-
-        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
-
-        if (i>1){
-          ctx.fill();
-        } else {
-          ctx.stroke();
-        }
-      }
-    }
-  }
-}
-
-{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}} - -

Curvas Bezier curvas cuadráticas

- -

El siguiente tipo de trazos disponibles son las  curvas Bézier, en sus dos variantes, cúbicas y cuadráticas. Son usadas generalmente para dibujar complejas formas orgánicas.

- -
-
quadraticCurveTo(cp1x, cp1y, x, y)
-
Dibuja una curva cuadrática de Bézier desde la posición actual de la pluma hasta el punto final especificado por x e y, utilizando el punto de control especificado por cp1x y cp1y.
-
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
-
Dibuja una curva cúbica de Bézier desde la posición actual de la pluma hasta el punto final especificado por x e y, utilizando los puntos de control especificados por (cp1x, cp1y) y (cp2x, cp2y).
-
- -

La diferencia entre estos puede describirse mejor utilizando la imagen de la derecha. Una curva cuadrática de Bézier tiene un punto inicial y un punto final (puntos azules) y un solo punto de control (indicado por el punto rojo), mientras que una curva cúbica de Bézier utiliza dos puntos de control.

- -

Los parámetros x e y de ambos métodos son las coordenadas del punto final. cp1x y cp1y son las coordenadas del primer punto de control, y cp2x y cp2y son las coordenadas del segundo punto de control.

- -

El uso de curvas cuadráticas y cúbicas Bézier puede ser bastante difícil, ya que a diferencia del software de dibujo vectorial como Adobe Illustrator, no tenemos respuesta visual directa en cuanto a lo que estamos haciendo. Esto hace bastante difícil dibujar formas complejas. En el siguiente ejemplo, vamos a dibujar algunas formas orgánicas simples, pero si tienes el tiempo y, sobre todo, la paciencia, se pueden crear formas mucho más complejas.

- -

No hay nada muy difícil en estos ejemplos. En ambos casos vemos una sucesión de curvas que se dibujan que finalmente dan lugar a una forma completa.

- -

Curvas de Bezier cuadraticas

- -

Este ejemplo usa multiples curvas cuadraticas de Bézier para renderizar un globo de voz.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // Quadratric curves example
-    ctx.beginPath();
-    ctx.moveTo(75,25);
-    ctx.quadraticCurveTo(25,25,25,62.5);
-    ctx.quadraticCurveTo(25,100,50,100);
-    ctx.quadraticCurveTo(50,120,30,125);
-    ctx.quadraticCurveTo(60,120,65,100);
-    ctx.quadraticCurveTo(125,100,125,62.5);
-    ctx.quadraticCurveTo(125,25,75,25);
-    ctx.stroke();
-  }
-}
-
- -

{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

- -

Curvas cúbicas Bezier

- -

Este ejemplo dibuja un corazon usanco curvas cúbicas de Bézier.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    // Quadratric curves example
-    ctx.beginPath();
-    ctx.moveTo(75,40);
-    ctx.bezierCurveTo(75,37,70,25,50,25);
-    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
-    ctx.bezierCurveTo(20,80,40,102,75,120);
-    ctx.bezierCurveTo(110,102,130,80,130,62.5);
-    ctx.bezierCurveTo(130,62.5,130,25,100,25);
-    ctx.bezierCurveTo(85,25,75,37,75,40);
-    ctx.fill();
-  }
-}
-
- -

{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

- -

Rectangles

- -

In addition to the three methods we saw in {{anch("Drawing rectangles")}}, which draw rectangular shapes directly to the canvas, there's also the rect() method, which adds a rectangular path to a currently open path.

- -
-
rect(x, y, width, height)
-
Draws a rectangle whose top-left corner is specified by (x, y) with the specified width and height.
-
- -

When this method is executed, the moveTo() method is automatically called with the parameters (0,0). In other words, the current pen position is automatically reset to the default coordinates.

- -

Making combinations

- -

So far, each example on this page has used only one type of path function per shape. However, there's no limitation to the number or types of paths you can use to create a shape. So in this final example, let's combine all of the path functions to make a set of very famous game characters.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    roundedRect(ctx,12,12,150,150,15);
-    roundedRect(ctx,19,19,150,150,9);
-    roundedRect(ctx,53,53,49,33,10);
-    roundedRect(ctx,53,119,49,16,6);
-    roundedRect(ctx,135,53,49,33,10);
-    roundedRect(ctx,135,119,25,49,10);
-
-    ctx.beginPath();
-    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
-    ctx.lineTo(31,37);
-    ctx.fill();
-
-    for(var i=0;i<8;i++){
-      ctx.fillRect(51+i*16,35,4,4);
-    }
-
-    for(i=0;i<6;i++){
-      ctx.fillRect(115,51+i*16,4,4);
-    }
-
-    for(i=0;i<8;i++){
-      ctx.fillRect(51+i*16,99,4,4);
-    }
-
-    ctx.beginPath();
-    ctx.moveTo(83,116);
-    ctx.lineTo(83,102);
-    ctx.bezierCurveTo(83,94,89,88,97,88);
-    ctx.bezierCurveTo(105,88,111,94,111,102);
-    ctx.lineTo(111,116);
-    ctx.lineTo(106.333,111.333);
-    ctx.lineTo(101.666,116);
-    ctx.lineTo(97,111.333);
-    ctx.lineTo(92.333,116);
-    ctx.lineTo(87.666,111.333);
-    ctx.lineTo(83,116);
-    ctx.fill();
-
-    ctx.fillStyle = "white";
-    ctx.beginPath();
-    ctx.moveTo(91,96);
-    ctx.bezierCurveTo(88,96,87,99,87,101);
-    ctx.bezierCurveTo(87,103,88,106,91,106);
-    ctx.bezierCurveTo(94,106,95,103,95,101);
-    ctx.bezierCurveTo(95,99,94,96,91,96);
-    ctx.moveTo(103,96);
-    ctx.bezierCurveTo(100,96,99,99,99,101);
-    ctx.bezierCurveTo(99,103,100,106,103,106);
-    ctx.bezierCurveTo(106,106,107,103,107,101);
-    ctx.bezierCurveTo(107,99,106,96,103,96);
-    ctx.fill();
-
-    ctx.fillStyle = "black";
-    ctx.beginPath();
-    ctx.arc(101,102,2,0,Math.PI*2,true);
-    ctx.fill();
-
-    ctx.beginPath();
-    ctx.arc(89,102,2,0,Math.PI*2,true);
-    ctx.fill();
-  }
-}
-
-// A utility function to draw a rectangle with rounded corners.
-
-function roundedRect(ctx,x,y,width,height,radius){
-  ctx.beginPath();
-  ctx.moveTo(x,y+radius);
-  ctx.lineTo(x,y+height-radius);
-  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
-  ctx.lineTo(x+width-radius,y+height);
-  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
-  ctx.lineTo(x+width,y+radius);
-  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
-  ctx.lineTo(x+radius,y);
-  ctx.quadraticCurveTo(x,y,x,y+radius);
-  ctx.stroke();
-}
-
- -
-

The resulting image looks like this:

- -

{{EmbedLiveSample("Making_combinations", 160, 160)}}

- -

We won't go over this in detail, since it's actually surprisingly simple. The most important things to note are the use of the fillStyle property on the drawing context, and the use of a utility function (in this case roundedRect()). Using utility functions for bits of drawing you do often can be very helpful and reduce the amount of code you need, as well as its complexity.

- -

We'll take another look at fillStyle, in more detail, later in this tutorial. Here, all we're doing is using it to change the fill color for paths from the default color of black to white, and then back again.

- -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_usage", "Web/Guide/HTML/Canvas_tutorial/Using_images")}}

-
-
- -

 

diff --git a/files/es/web/guide/html/canvas_tutorial/hit_regions_and_accessibility/index.html b/files/es/web/guide/html/canvas_tutorial/hit_regions_and_accessibility/index.html deleted file mode 100644 index 967710de49..0000000000 --- a/files/es/web/guide/html/canvas_tutorial/hit_regions_and_accessibility/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Hit regions and accessibility -slug: Web/Guide/HTML/Canvas_tutorial/Hit_regions_and_accessibility -translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility ---- -
{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
- -
The {{HTMLElement("canvas")}} element on its own is just a bitmap and does not provide information about any drawn objects. Canvas content is not exposed to accessibility tools like semantic HTML is. In general, you should avoid using canvas in an accessible website or app. The following guidelines can help to make it more accessible.
- -
El elemento {{HTMLElement ("canvas")}} por sí solo es solo un mapa de bits y no proporciona información sobre ningún objeto dibujado. El contenido del lienzo no está expuesto a herramientas de accesibilidad como el HTML semántico. En general, debe evitar usar canvas en un sitio web o aplicación accesible. Las siguientes pautas pueden ayudar a que sea más accesible.
- -

Fallback content

- -

The content inside the <canvas> ... </canvas> tags can be used as a fallback for browsers which don't support canvas rendering. It's also very useful for assistive technology users (like screen readers) which can read and interpret the sub DOM in it. A good example at html5accessibility.com demonstrates how this can be done:

- -
<canvas>
-  <h2>Shapes</h2>
-  <p>A rectangle with a black border.
-   In the background is a pink circle.
-   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
-   Partially overlaying the circle is a green
-   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
-   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
-   both of which are semi-opaque, so the full circle can be seen underneath.</p>
-</canvas>
- -

See the video how NVDA reads this example by Steve Faulkner.

- -

ARIA rules

- -

Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications more accessible to people with disabilities. You can use ARIA attributes to describe the behavior and purpose of the canvas element. See ARIA and ARIA techniques for more information.

- -
<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
-
- -

Hit regions

- -

Whether the mouse coordinates are within a particular area on the canvas, is a common problem to solve. The hit region API allows you to define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools. It allows you to make hit detection easier and lets you route events to DOM elements. The API has the following three methods (which are still experimental in current web browsers; check the browser compatibility tables).

- -
-
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
-
Adds a hit region to the canvas.
-
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
-
Removes the hit region with the specified id from the canvas.
-
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
-
Removes all hit regions from the canvas.
-
- -

You can add a hit region to your path and check for the {{domxref("MouseEvent.region")}} property to test if your mouse is hitting your region, for example.

- -
<canvas id="canvas"></canvas>
-<script>
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.beginPath();
-ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
-ctx.fill();
-ctx.addHitRegion({id: 'circle'});
-
-canvas.addEventListener('mousemove', function(event) {
-  if (event.region) {
-    alert('hit region: ' + event.region);
-  }
-});
-</script>
- -

The addHitRegion() method also takes a control option to route events to an element (that is a descendant of the canvas):

- -
ctx.addHitRegion({control: element});
- -

This can be useful for routing to {{HTMLElement("input")}} elements, for example. See also this codepen demo.

- -

Focus rings

- -

When working with the keyboard, focus rings are a handy indicator to help navigating on a page. To draw focus rings on a canvas drawing, the drawFocusIfNeeded property can be used.

- -
-
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}
-
If a given element is focused, this method draws a focus ring around the current path.
-
- -

Additionally, the scrollPathIntoView() method can be used to make an element visible on the screen if focused, for example.

- -
-
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}
-
Scrolls the current path or a given path into the view.
-
- -

See also

- - - -
{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
diff --git a/files/es/web/guide/html/canvas_tutorial/index.html b/files/es/web/guide/html/canvas_tutorial/index.html deleted file mode 100644 index da5b0b3cc9..0000000000 --- a/files/es/web/guide/html/canvas_tutorial/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Tutorial Canvas -slug: Web/Guide/HTML/Canvas_tutorial -tags: - - Canvas - - HTML5 - - graficos -translation_of: Web/API/Canvas_API/Tutorial ---- -

- -

<canvas> es un elemento HTML el cual puede ser usado para dibujar gráficos usando scripts (normalmente JavaScript). Este puede, por ejemplo, ser usado para dibujar gráficos, realizar composición de fotos o simples (y no tan simples) animaciones. Las imágenes a la derecha muestran algunos ejemplos de implementaciones <canvas>  las cuales se verán en un futuro en este tutorial.

- -

<canvas>  fue introducido primero por Apple para el Mac OS X Dashboard y después implementado en Safari y Google Chrome. Navegadores basados en Gecko 1.8, tal como Firefox 1.5, que también soportan este elemento. El <canvas> es un elemento parte de las especificaciones de la WhatWG Web applications 1.0 mejor conocida como HTML5.

- -

En este tutorial se describe cómo usar el elemento <canvas> para dibujar gráficos en 2D, empezando con lo básico. Los ejemplos le proveerán mayor claridad a las ideas que pueda tener referentes al canvas, así como los códigos que necesita para crear su propio contenido.

- -

Antes de Empezar

- -

Usar el elemento <canvas> no es algo muy díficil pero necesita saber y entender los aspectos básicos del HTML y JavaScript. El elemento <canvas> no está soportado en navegadores viejos, pero están soportado en la mayoría de las versiones más recientes de los navegadores. El tamaño por defecto del canvas es 300px * 150px [ancho (width) * alto (height)]. Pero se puede personalizar el tamaño usando las propiedades height y width de CSS. Con el fin de dibujar gráficos en el lienzo <canvas> se utiliza un objeto de contexto de JavaScript que crea gráficos sobre la marcha.

- -

En este Tutorial

- - - -

Vea también

- - - -

Nota a los contribuyentes

- -

Debido a un desafortunado error técnico que ocurrió el 17 de junio del 2013, perdimos la historia de este tutorial, incluyendo atribuciones a todos los contribuyentes del pasado a su contenido. Pedimos disculpas por esto, y esperamos que perdone este desafortunado percance.

- -
{{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}
diff --git a/files/es/web/guide/html/canvas_tutorial/optimizing_canvas/index.html b/files/es/web/guide/html/canvas_tutorial/optimizing_canvas/index.html deleted file mode 100644 index 145e2734f0..0000000000 --- a/files/es/web/guide/html/canvas_tutorial/optimizing_canvas/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Optimizing canvas -slug: Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas -translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas ---- -

{{HTMLElement("canvas")}} es uno de los estándares más utilizados para la representación de gráficos 2D en la Web. Se utiliza ampliamente en los juegos y visualizaciones complejas. Sin embargo, as Web sites and apps push canvas to the limits, el rendimiento comienza a sufrir. This article aims to provide suggestions for optimizing your use of the canvas element, to ensure that your Web site or app performs well.

-

A continuación una lista de tips par mejorar el rendimiento:

-
    -
  • Repintar primitives similares o objetos repetidos dentro y fuera de la pantalla canvas.
    • -
  • Batch canvas calls together (for example, draw a poly-line instead of multiple separate lines).
    • -
  • Avoid floating-point coordinates and use integers instead.
    • -
  • Avoid unnecessary canvas state changes.
    • -
  • Render screen differences only, not the whole new state.
    • -
  • Utilice varios lienzos en capas para escenas complejas.
    • -
  • Evite la propiedad shadowBlur siempre que sea posible.
    • -
  • Con las animaciones, use {{domxref("window.requestAnimationFrame()")}}.
    • -
  • Probar el rendimiento con JSPerf.
    • -
-

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_animations")}}

diff --git a/files/es/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html b/files/es/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html deleted file mode 100644 index 14ccc9c4a5..0000000000 --- a/files/es/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html +++ /dev/null @@ -1,301 +0,0 @@ ---- -title: Pixel manipulation with canvas -slug: Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas -translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
- -
-

Hasta ahora, no habíamos mirado los píxeles reales de nuestro canvas. Con el objeto ImageData, puedes leer y escribir directamente un array de datos para manipular píxeles.

- -

También veremos cómo se puede controlar el suavizado de la imagen (antialiasing) y cómo guardar imágenes de tu canvas.

-
- -

El objeto ImageData

- -

El objeto {{domxref("ImageData")}} representa los datos pixelados subyacentes de un área de un objeto lienzo. Contiene los siguientes atributos de sólo lectura:

- -
-
width
-
El ancho de la imagen en píxeles.
-
height
-
La altura de la imagen en píxeles.
-
data
-
Un objeto {{jsxref("Uint8ClampedArray")}} que representa un array unidimensional, contiene información en formato RGBA, con valores desde 0 hasta 255 (incluído).
-
- -

La propiedad data devuelve un  {{jsxref("Uint8ClampedArray")}}, al que se puede acceder para ver los datos originales del pixel; cada pixel está representado por cuatro valores (rojo, verde, azul, y alfa, en ese orden; esto es, formato "RGBA"). Cada componente de color se representa con un valor entero entre 0 y 255. Dentro del array, cada componente ocupa un índice consecutivo, comenzando con 0 desde el punto superior izquierdo, continuando de izquierda a derecha y de arriba hacia abajo, a través del array.

- -

El {{jsxref("Uint8ClampedArray")}} contiene alto × ancho × 4 bytes de datos, con valores de índice en el rango entre 0 y (alto×ancho×4)-1.

- -

Por ejemplo, para leer el valor del componente azul del pixel en la columna 200, fila 50 de una imagen, deberías hacer lo siguiente:

- -

blueComponent = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];

- -

Si se le da un conjunto de coordenadas (X e Y), puede que termine haciendo algo así:

- -
var xCoord = 50;
-var yCoord = 100;
-var canvasWidth = 1024;
-
-function getColorIndicesForCoord(x, y, width) {
-  var red = y * (width * 4) + x * 4;
-  return [red, red + 1, red + 2, red + 3];
-}
-
-var colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
-
-var redIndex = colorIndices[0];
-var greenIndex = colorIndices[1];
-var blueIndex = colorIndices[2];
-var alphaIndex = colorIndices[3];
-
-var redForCoord = imageData.data[redIndex];
-var greenForCoord = imageData.data[greenIndex];
-var blueForCoord = imageData.data[blueIndex];
-var alphaForCoord = imageData.data[alphaIndex];
-
- -

O, en ES6 sería algo así:

- -
const xCoord = 50;
-const yCoord = 100;
-const canvasWidth = 1024;
-
-const getColorIndicesForCoord = (x, y, width) => {
-  const red = y * (width * 4) + x * 4;
-  return [red, red + 1, red + 2, red + 3];
-};
-
-const colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
-
-const [redIndex, greenIndex, blueIndex, alphaIndex] = colorIndices;
-
- -

You may also access the size of the pixel array in bytes by reading the Uint8ClampedArray.length attribute:

- -
var numBytes = imageData.data.length;
-
- -

Creando un objeto ImageData

- -

Para crear un objeto nuevo y vacío tipo ImageData, debes usar el método  {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Hay dos versiones del método createImageData():

- -
var myImageData = ctx.createImageData(width, height);
- -

Esto crea un nuevo objeto ImageData con las dimensiones especificadas. Todos los pixels tienen valor correspondiente a negro - transparente (0,0,0,0).

- -

También puedes crear un nuevo objeto ImageData con las mismas dimensiones que otro objeto, especificado por anotherImageData. Los píxels del nuevo objeto tienen valor negro - transparente. ¡Esto no es una copia de los datos de la imagen!

- -
var myImageData = ctx.createImageData(anotherImageData);
- -

Getting the pixel data for a context

- -

To obtain an ImageData object containing a copy of the pixel data for a canvas context, you can use the getImageData() method:

- -
var myImageData = ctx.getImageData(left, top, width, height);
- -

This method returns an ImageData object representing the pixel data for the area of the canvas whose corners are represented by the points (left,top), (left+width, top), (left, top+height), and (left+width, top+height). The coordinates are specified in canvas coordinate space units.

- -
-

Note: Any pixels outside the canvas are returned as transparent black in the resulting ImageData object.

-
- -

This method is also demonstrated in the article Manipulating video using canvas.

- -

A color picker

- -

In this example we are using the getImageData() method to display the color under the mouse cursor. For this, we need the current position of the mouse with layerX and layerY, then we look up the pixel data on that position in the pixel array that getImageData() provides us. Finally, we use the array data to set a background color and a text in the <div> to display the color.

- - - -
var img = new Image();
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-img.onload = function() {
-  ctx.drawImage(img, 0, 0);
-  img.style.display = 'none';
-};
-var color = document.getElementById('color');
-function pick(event) {
-  var x = event.layerX;
-  var y = event.layerY;
-  var pixel = ctx.getImageData(x, y, 1, 1);
-  var data = pixel.data;
-  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
-             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
-  color.style.background =  rgba;
-  color.textContent = rgba;
-}
-canvas.addEventListener('mousemove', pick);
-
- -

{{ EmbedLiveSample('A_color_picker', 610, 240) }}

- -

Painting pixel data into a context

- -

You can use the putImageData() method to paint pixel data into a context:

- -
ctx.putImageData(myImageData, dx, dy);
-
- -

The dx and dy parameters indicate the device coordinates within the context at which to paint the top left corner of the pixel data you wish to draw.

- -

For example, to paint the entire image represented by myImageData to the top left corner of the context, you can simply do the following:

- -
ctx.putImageData(myImageData, 0, 0);
-
- -

Grayscaling and inverting colors

- -

In this example we iterate over all pixels to change their values, then we put the modified pixel array back to the canvas using putImageData(). The invert function simply subtracts each color from the max value 255. The grayscale function simply uses the average of red, green and blue. You can also use a weighted average, given by the formula x = 0.299r + 0.587g + 0.114b, for example. See Grayscale on Wikipedia for more information.

- - - -
var img = new Image();
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-img.onload = function() {
-  draw(this);
-};
-
-function draw(img) {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-  ctx.drawImage(img, 0, 0);
-  img.style.display = 'none';
-  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-  var data = imageData.data;
-
-  var invert = function() {
-    for (var i = 0; i < data.length; i += 4) {
-      data[i]     = 255 - data[i];     // red
-      data[i + 1] = 255 - data[i + 1]; // green
-      data[i + 2] = 255 - data[i + 2]; // blue
-    }
-    ctx.putImageData(imageData, 0, 0);
-  };
-
-  var grayscale = function() {
-    for (var i = 0; i < data.length; i += 4) {
-      var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
-      data[i]     = avg; // red
-      data[i + 1] = avg; // green
-      data[i + 2] = avg; // blue
-    }
-    ctx.putImageData(imageData, 0, 0);
-  };
-
-  var invertbtn = document.getElementById('invertbtn');
-  invertbtn.addEventListener('click', invert);
-  var grayscalebtn = document.getElementById('grayscalebtn');
-  grayscalebtn.addEventListener('click', grayscale);
-}
-
- -

{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}

- -

Zooming and anti-aliasing

- -

With the help of the {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} method, a second canvas and the {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property, we are able to zoom into our picture and see the details.

- -

We get the position of the mouse and crop an image of 5 pixels left and above to 5 pixels right and below. Then we copy that one over to another canvas and resize the image to the size we want it to. In the zoom canvas we resize a 10×10 pixel crop of the original canvas to 200×200.

- -
zoomctx.drawImage(canvas,
-                  Math.abs(x - 5), Math.abs(y - 5),
-                  10, 10, 0, 0, 200, 200);
- -

Because anti-aliasing is enabled by default, we might want to disable the smoothing to see clear pixels. You can toggle the checkbox to see the effect of the imageSmoothingEnabled property (which needs prefixes for different browsers).

- - - - - -
var img = new Image();
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-img.onload = function() {
-  draw(this);
-};
-
-function draw(img) {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-  ctx.drawImage(img, 0, 0);
-  img.style.display = 'none';
-  var zoomctx = document.getElementById('zoom').getContext('2d');
-
-  var smoothbtn = document.getElementById('smoothbtn');
-  var toggleSmoothing = function(event) {
-    zoomctx.imageSmoothingEnabled = this.checked;
-    zoomctx.mozImageSmoothingEnabled = this.checked;
-    zoomctx.webkitImageSmoothingEnabled = this.checked;
-    zoomctx.msImageSmoothingEnabled = this.checked;
-  };
-  smoothbtn.addEventListener('change', toggleSmoothing);
-
-  var zoom = function(event) {
-    var x = event.layerX;
-    var y = event.layerY;
-    zoomctx.drawImage(canvas,
-                      Math.abs(x - 5),
-                      Math.abs(y - 5),
-                      10, 10,
-                      0, 0,
-                      200, 200);
-  };
-
-  canvas.addEventListener('mousemove', zoom);
-}
- -

{{ EmbedLiveSample('Zoom_example', 620, 490) }}

- -

Guardando las imágenes

- -

The {{domxref("HTMLCanvasElement")}} provides a toDataURL() method, which is useful when saving images. It returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.

- -
-
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}
-
Default setting. Creates a PNG image.
-
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}
-
Creates a JPG image. Optionally, you can provide a quality in the range from 0 to 1, with one being the best quality and with 0 almost not recognizable but small in file size.
-
- -

Once you have generated a data URI from you canvas, you are able to use it as the source of any {{HTMLElement("image")}} or put it into a hyper link with a download attribute to save it to disc, for example.

- -

You can also create a {{domxref("Blob")}} from the canvas.

- -
-
{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}
-
Creates a Blob object representing the image contained in the canvas.
-
- -

See also

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}

diff --git a/files/es/web/guide/html/categorias_de_contenido/index.html b/files/es/web/guide/html/categorias_de_contenido/index.html deleted file mode 100644 index b9c4fb6061..0000000000 --- a/files/es/web/guide/html/categorias_de_contenido/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Categorías de contenido -slug: Web/Guide/HTML/categorias_de_contenido -tags: - - Avanzado - - Guía - - HTML - - HTML5 - - Web -translation_of: Web/Guide/HTML/Content_categories ---- -

Cada elemento {{web.link("/es/docs/Web/HTML", "HTML")}} es miembro de una o más categorías de contenido — estas categorías agrupan elementos que comparten características comunes. Esta es una agrupación flexible (en realidad no crea una relación entre los elementos de estas categorías), pero ayuda a definir y describir el comportamiento compartido de las categorías y sus reglas asociadas, especialmente cuando te encuentras con sus intrincados detalles. También es posible que los elementos no sean miembros de ninguna de estas categorías.

- -

Hay tres tipos de categorías de contenido:

- -
    -
  • Categoría de contenido principal — que describe reglas comunes compartidas por muchos elementos.
    • -
  • Categorías de contenido relacionado con formularios — que describe reglas comunes a los elementos relacionados con formularios.
    • -
  • Categorías de contenido específico — que describe categorías raras compartidas solo por unos pocos elementos, a veces, solo en un contexto específico.
    • -
- -
-

Nota: Una explicación comparativa más detallada de estas categorías de contenido y su funcionalidad está más allá del alcance de este artículo; para eso, posiblemente desees leer las partes relevantes de la especificación HTML.

-
- -

Un diagrama de Venn que muestra cómo se interrelacionan las distintas categorías de contenido. Las siguientes secciones explican estas relaciones en texto.

- -

Categorías de contenido principal

- -

Contenido de metadatos

- -

Los elementos pertenecientes a la categoría contenido de metadatos modifican la presentación o el comportamiento del resto del documento, establecen enlaces a otros documentos o transmiten otra información fuera de banda.

- -

Los elementos que pertenecen a esta categoría son {{HTMLElement("base")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} y {{HTMLElement("title")}}.

- -

Flujo de contenido

- -

Los elementos que pertenecen a la categoría de flujo de contenido suelen contener texto o contenido incrustado. Son: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("picture")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} and Text.

- -

Algunos otros elementos pertenecen a esta categoría, pero solo si se cumple una condición específica:

- -
    -
  • {{HTMLElement("area")}}, si es descendiente de un elemento {{HTMLElement("map")}}
    • -
  • {{HTMLElement("link")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#attr-itemprop", "itemprop")}}
    • -
  • {{HTMLElement("meta")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#attr-itemprop", "itemprop")}}
    • -
  • {{HTMLElement("style")}}, si está presente el atributo {{deprecated_inline()}} {{HTMLAttrxRef("scoped", "style")}}
    • -
- -

Contenido de sección

- -

Los elementos que pertenecen al modelo de contenido de secciones crean una {{web.link("/es/docs/Sections_and_Outlines_of_an_HTML5_document", "sección en el esquema actual")}} que define el alcance de los elementos {{HTMLElement("header")}}, {{HTMLElement("footer")}} y {{anch("Contenido del encabezado")}}.

- -

Los elementos que pertenecen a esta categoría son {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} y {{HTMLElement("section")}}.

- -
-

No confundas este modelo de contenido con la categoría de {{web.link("/es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Sectioning_roots", "seccionado raíz")}}, que aísla su contenido del esquema regular.

-
- -

Contenido del encabezado

- -

El contenido del encabezado define el título de una sección, ya sea que esté marcado por un elemento {{anch("Contenido de sección")}} explícito o definido implícitamente por el contenido del encabezado en sí mismo.

- -

Los elementos que pertenecen a esta categoría son {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} y {{HTMLElement("hgroup")}}.

- -
-

Aunque es probable que tenga contenido de encabezado, {{HTMLElement("header")}} no es contenido de encabezado en sí mismo.

-
- -
-

Nota: El elemento {{HTMLElement("hgroup")}} se eliminó de la especificación HTML del W3C antes de que se finalizara HTML 5, pero sigue siendo parte de la especificación WHATWG y la mayoría de los navegadores lo admiten por lo menos parcialmente.

-
- -

Contenido de redacción

- -

El contenido de redacción define el texto y el marcado que contiene. Las series de contenido de redacción forman párrafos.

- -

Los elementos que pertenecen a esta categoría son: {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("picture")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} y texto sin formato (no solo consiste de espacios en blanco).

- -

Algunos otros elementos pertenecen a esta categoría, pero solo si se cumple una condición específica:

- -
    -
  • {{HTMLElement("a")}}, si solo incluye contenido de redacción
    • -
  • {{HTMLElement("area")}}, si es descendiente de un elemento {{HTMLElement("map")}}
    • -
  • {{HTMLElement("del")}}, si solo incluye contenido de redacción
    • -
  • {{HTMLElement("ins")}}, si solo incluye contenido de redacción
    • -
  • {{HTMLElement("link")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#itemprop", "itemprop")}}
    • -
  • {{HTMLElement("map")}}, si solo incluye contenido de redacción
    • -
  • {{HTMLElement("meta")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#itemprop", "itemprop")}}
    • -
- -

Contenido incrustado

- -

El contenido incrustado importa otro recurso o inserta contenido de otro lenguaje de marcado o espacio de nombres en el documento. Los elementos que pertenecen a esta categoría incluyen: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("picture")}}, {{SVGElement("svg")}} y {{HTMLElement("video")}}.

- -

Contenido interactivo

- -

El contenido interactivo incluye elementos diseñados específicamente para la interacción del usuario. Los elementos que pertenecen a esta categoría incluyen: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
- Algunos elementos pertenecen a esta categoría solo bajo condiciones específicas:

- -
    -
  • {{HTMLElement("audio")}}, si está presente el atributo {{HTMLAttrxRef("controls", "audio")}}
    • -
  • {{HTMLElement("img")}}, si está presente el atributo {{HTMLAttrxRef("usemap", "img")}}
    • -
  • {{HTMLElement("input")}}, si el atributo {{HTMLAttrxRef("type", "input")}} no está en estado oculto
    • -
  • {{HTMLElement("menu")}}, si el atributo {{HTMLAttrxRef("type", "menu")}} está en la barra de estado de herramientas
    • -
  • {{HTMLElement("object")}}, si está presente el atributo {{HTMLAttrxRef("usemap", "object")}}
    • -
  • {{HTMLElement("video")}}, si está presente el atributo {{HTMLAttrxRef("controls", "video")}}
    • -
- -

Contenido palpable

- -

El contenido es palpable cuando no está vacío ni oculto; es contenido que se presenta y es sustantivo. Los elementos cuyo modelo es flujo de contenido o contenido de redacción deben tener, por lo menos, un nodo que sea palpable.

- -

Contenido asociado a formulario

- -

El contenido asociado a un formulario comprende elementos que tienen un formulario de propietario, expuesto mediante un atributo form. El propietario de un formulario es el elemento {{HTMLElement("form")}} que lo contiene o el elemento cuya identificación se especifica en el atributo form.

- -
    -
  • {{HTMLElement("button")}}
    • -
  • {{HTMLElement("fieldset")}}
    • -
  • {{HTMLElement("input")}}
    • -
  • {{deprecated_inline()}} {{HTMLElement("keygen")}}
    • -
  • {{HTMLElement("label")}}
    • -
  • {{HTMLElement("meter")}}
    • -
  • {{HTMLElement("object")}}
    • -
  • {{HTMLElement("output")}}
    • -
  • {{HTMLElement("progress")}}
    • -
  • {{HTMLElement("select")}}
    • -
  • {{HTMLElement("textarea")}}
    • -
- -

Esta categoría contiene varias subcategorías:

- -
-
enumerado
-
Elementos que se enumeran en las colecciones IDL {{DOMxRef("HTMLFormElement.elements", "form.elements")}} y fieldset.elements. Contiene: {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{deprecated_inline()}} {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
-
etiquetable
-
Elementos que se pueden asociar con elementos {{HTMLElement("label")}}. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
-
transmisible
-
Elementos que se pueden utilizar para construir el conjunto de datos del formulario cuando se envía el formulario. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
-
reiniciable
-
Elementos que se pueden ver afectados cuando se restablece o reinicia un formulario. Contiene {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
-
- -

Categorías secundarias

- -

Hay algunas clasificaciones secundarias de elementos que también puede ser útil tener en cuenta.

- -

Elementos de soporte de scripts

- -

Los elementos de soporte de scripts son elementos que no contribuyen directamente a la salida renderizada de un documento. En cambio, sirven para admitir scripts, ya sea conteniendo o especificando directamente el código del script, o especificando datos que serán utilizados por los scripts.

- -

Los elementos que admiten scripts son:

- -
    -
  • {{HTMLElement("script")}}
    • -
  • {{HTMLElement("template")}}
    • -
- -

Modelo de contenido transparente

- -

Si un elemento tiene un modelo de contenido transparente, entonces su contenido debe estar estructurado de manera que sea HTML 5 válido, incluso si el elemento transparente fuera eliminado y reemplazado por elementos secundarios.

- -

Por ejemplo, los elementos {{HTMLElement("del")}} y {{HTMLElement("ins")}} son transparentes:

- -
<p>Sostenemos que estas verdades son <del><em>sagradas e innegablemente</em></del> <ins>evidentes por sí mismas</ins>.</p>
-
- -

Si esos elementos fueran eliminados, este fragmento seguiría siendo HTML válido (si no es Español correcto).

- -
<p>Sostenemos que estas verdades son <del><em>sagradas e innegablemente</em></del> <ins>evidentes por sí mismas</ins>.</p>
-
- -

Otros modelos de contenido

- -

Seccionado raíz.

diff --git a/files/es/web/guide/html/content_categories/index.html b/files/es/web/guide/html/content_categories/index.html new file mode 100644 index 0000000000..b9c4fb6061 --- /dev/null +++ b/files/es/web/guide/html/content_categories/index.html @@ -0,0 +1,175 @@ +--- +title: Categorías de contenido +slug: Web/Guide/HTML/categorias_de_contenido +tags: + - Avanzado + - Guía + - HTML + - HTML5 + - Web +translation_of: Web/Guide/HTML/Content_categories +--- +

Cada elemento {{web.link("/es/docs/Web/HTML", "HTML")}} es miembro de una o más categorías de contenido — estas categorías agrupan elementos que comparten características comunes. Esta es una agrupación flexible (en realidad no crea una relación entre los elementos de estas categorías), pero ayuda a definir y describir el comportamiento compartido de las categorías y sus reglas asociadas, especialmente cuando te encuentras con sus intrincados detalles. También es posible que los elementos no sean miembros de ninguna de estas categorías.

+ +

Hay tres tipos de categorías de contenido:

+ +
    +
  • Categoría de contenido principal — que describe reglas comunes compartidas por muchos elementos.
    • +
  • Categorías de contenido relacionado con formularios — que describe reglas comunes a los elementos relacionados con formularios.
    • +
  • Categorías de contenido específico — que describe categorías raras compartidas solo por unos pocos elementos, a veces, solo en un contexto específico.
    • +
+ +
+

Nota: Una explicación comparativa más detallada de estas categorías de contenido y su funcionalidad está más allá del alcance de este artículo; para eso, posiblemente desees leer las partes relevantes de la especificación HTML.

+
+ +

Un diagrama de Venn que muestra cómo se interrelacionan las distintas categorías de contenido. Las siguientes secciones explican estas relaciones en texto.

+ +

Categorías de contenido principal

+ +

Contenido de metadatos

+ +

Los elementos pertenecientes a la categoría contenido de metadatos modifican la presentación o el comportamiento del resto del documento, establecen enlaces a otros documentos o transmiten otra información fuera de banda.

+ +

Los elementos que pertenecen a esta categoría son {{HTMLElement("base")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} y {{HTMLElement("title")}}.

+ +

Flujo de contenido

+ +

Los elementos que pertenecen a la categoría de flujo de contenido suelen contener texto o contenido incrustado. Son: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("picture")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} and Text.

+ +

Algunos otros elementos pertenecen a esta categoría, pero solo si se cumple una condición específica:

+ +
    +
  • {{HTMLElement("area")}}, si es descendiente de un elemento {{HTMLElement("map")}}
    • +
  • {{HTMLElement("link")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#attr-itemprop", "itemprop")}}
    • +
  • {{HTMLElement("meta")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#attr-itemprop", "itemprop")}}
    • +
  • {{HTMLElement("style")}}, si está presente el atributo {{deprecated_inline()}} {{HTMLAttrxRef("scoped", "style")}}
    • +
+ +

Contenido de sección

+ +

Los elementos que pertenecen al modelo de contenido de secciones crean una {{web.link("/es/docs/Sections_and_Outlines_of_an_HTML5_document", "sección en el esquema actual")}} que define el alcance de los elementos {{HTMLElement("header")}}, {{HTMLElement("footer")}} y {{anch("Contenido del encabezado")}}.

+ +

Los elementos que pertenecen a esta categoría son {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} y {{HTMLElement("section")}}.

+ +
+

No confundas este modelo de contenido con la categoría de {{web.link("/es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Sectioning_roots", "seccionado raíz")}}, que aísla su contenido del esquema regular.

+
+ +

Contenido del encabezado

+ +

El contenido del encabezado define el título de una sección, ya sea que esté marcado por un elemento {{anch("Contenido de sección")}} explícito o definido implícitamente por el contenido del encabezado en sí mismo.

+ +

Los elementos que pertenecen a esta categoría son {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} y {{HTMLElement("hgroup")}}.

+ +
+

Aunque es probable que tenga contenido de encabezado, {{HTMLElement("header")}} no es contenido de encabezado en sí mismo.

+
+ +
+

Nota: El elemento {{HTMLElement("hgroup")}} se eliminó de la especificación HTML del W3C antes de que se finalizara HTML 5, pero sigue siendo parte de la especificación WHATWG y la mayoría de los navegadores lo admiten por lo menos parcialmente.

+
+ +

Contenido de redacción

+ +

El contenido de redacción define el texto y el marcado que contiene. Las series de contenido de redacción forman párrafos.

+ +

Los elementos que pertenecen a esta categoría son: {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("picture")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} y texto sin formato (no solo consiste de espacios en blanco).

+ +

Algunos otros elementos pertenecen a esta categoría, pero solo si se cumple una condición específica:

+ +
    +
  • {{HTMLElement("a")}}, si solo incluye contenido de redacción
    • +
  • {{HTMLElement("area")}}, si es descendiente de un elemento {{HTMLElement("map")}}
    • +
  • {{HTMLElement("del")}}, si solo incluye contenido de redacción
    • +
  • {{HTMLElement("ins")}}, si solo incluye contenido de redacción
    • +
  • {{HTMLElement("link")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#itemprop", "itemprop")}}
    • +
  • {{HTMLElement("map")}}, si solo incluye contenido de redacción
    • +
  • {{HTMLElement("meta")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#itemprop", "itemprop")}}
    • +
+ +

Contenido incrustado

+ +

El contenido incrustado importa otro recurso o inserta contenido de otro lenguaje de marcado o espacio de nombres en el documento. Los elementos que pertenecen a esta categoría incluyen: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("picture")}}, {{SVGElement("svg")}} y {{HTMLElement("video")}}.

+ +

Contenido interactivo

+ +

El contenido interactivo incluye elementos diseñados específicamente para la interacción del usuario. Los elementos que pertenecen a esta categoría incluyen: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
+ Algunos elementos pertenecen a esta categoría solo bajo condiciones específicas:

+ +
    +
  • {{HTMLElement("audio")}}, si está presente el atributo {{HTMLAttrxRef("controls", "audio")}}
    • +
  • {{HTMLElement("img")}}, si está presente el atributo {{HTMLAttrxRef("usemap", "img")}}
    • +
  • {{HTMLElement("input")}}, si el atributo {{HTMLAttrxRef("type", "input")}} no está en estado oculto
    • +
  • {{HTMLElement("menu")}}, si el atributo {{HTMLAttrxRef("type", "menu")}} está en la barra de estado de herramientas
    • +
  • {{HTMLElement("object")}}, si está presente el atributo {{HTMLAttrxRef("usemap", "object")}}
    • +
  • {{HTMLElement("video")}}, si está presente el atributo {{HTMLAttrxRef("controls", "video")}}
    • +
+ +

Contenido palpable

+ +

El contenido es palpable cuando no está vacío ni oculto; es contenido que se presenta y es sustantivo. Los elementos cuyo modelo es flujo de contenido o contenido de redacción deben tener, por lo menos, un nodo que sea palpable.

+ +

Contenido asociado a formulario

+ +

El contenido asociado a un formulario comprende elementos que tienen un formulario de propietario, expuesto mediante un atributo form. El propietario de un formulario es el elemento {{HTMLElement("form")}} que lo contiene o el elemento cuya identificación se especifica en el atributo form.

+ +
    +
  • {{HTMLElement("button")}}
    • +
  • {{HTMLElement("fieldset")}}
    • +
  • {{HTMLElement("input")}}
    • +
  • {{deprecated_inline()}} {{HTMLElement("keygen")}}
    • +
  • {{HTMLElement("label")}}
    • +
  • {{HTMLElement("meter")}}
    • +
  • {{HTMLElement("object")}}
    • +
  • {{HTMLElement("output")}}
    • +
  • {{HTMLElement("progress")}}
    • +
  • {{HTMLElement("select")}}
    • +
  • {{HTMLElement("textarea")}}
    • +
+ +

Esta categoría contiene varias subcategorías:

+ +
+
enumerado
+
Elementos que se enumeran en las colecciones IDL {{DOMxRef("HTMLFormElement.elements", "form.elements")}} y fieldset.elements. Contiene: {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{deprecated_inline()}} {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
+
etiquetable
+
Elementos que se pueden asociar con elementos {{HTMLElement("label")}}. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
+
transmisible
+
Elementos que se pueden utilizar para construir el conjunto de datos del formulario cuando se envía el formulario. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
+
reiniciable
+
Elementos que se pueden ver afectados cuando se restablece o reinicia un formulario. Contiene {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
+
+ +

Categorías secundarias

+ +

Hay algunas clasificaciones secundarias de elementos que también puede ser útil tener en cuenta.

+ +

Elementos de soporte de scripts

+ +

Los elementos de soporte de scripts son elementos que no contribuyen directamente a la salida renderizada de un documento. En cambio, sirven para admitir scripts, ya sea conteniendo o especificando directamente el código del script, o especificando datos que serán utilizados por los scripts.

+ +

Los elementos que admiten scripts son:

+ +
    +
  • {{HTMLElement("script")}}
    • +
  • {{HTMLElement("template")}}
    • +
+ +

Modelo de contenido transparente

+ +

Si un elemento tiene un modelo de contenido transparente, entonces su contenido debe estar estructurado de manera que sea HTML 5 válido, incluso si el elemento transparente fuera eliminado y reemplazado por elementos secundarios.

+ +

Por ejemplo, los elementos {{HTMLElement("del")}} y {{HTMLElement("ins")}} son transparentes:

+ +
<p>Sostenemos que estas verdades son <del><em>sagradas e innegablemente</em></del> <ins>evidentes por sí mismas</ins>.</p>
+
+ +

Si esos elementos fueran eliminados, este fragmento seguiría siendo HTML válido (si no es Español correcto).

+ +
<p>Sostenemos que estas verdades son <del><em>sagradas e innegablemente</em></del> <ins>evidentes por sí mismas</ins>.</p>
+
+ +

Otros modelos de contenido

+ +

Seccionado raíz.

diff --git a/files/es/web/guide/html/html5/constraint_validation/index.html b/files/es/web/guide/html/html5/constraint_validation/index.html new file mode 100644 index 0000000000..04182a8fec --- /dev/null +++ b/files/es/web/guide/html/html5/constraint_validation/index.html @@ -0,0 +1,345 @@ +--- +title: Validación de restricciones +slug: HTML/HTML5/Validacion_de_restricciones +tags: + - CSS + - Guía + - HTML5 + - NecesitaContenido + - Selectores +translation_of: 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:

+ +
    +
  • Eligiendo el valor semánticamente más apropiado para el atributo {{ htmlattrxref("type", "input") }} del elemento {{ HTMLElement("input") }}, por ejemplo, elegir el tipo email creará automáticamente la restricción para verificar que el valor sea una dirección de correo electrónico válida.
    • +
  • Estableciendo valores a los atributos de validación, permitiendo que se describan restricciones básicas de manera simple, sin la necesidad de JavaScript.
    • +
+ +

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:

+ +
    +
  • Invocando a la función checkValidity() de una interfaz DOM relacionada con formas (HTMLInputElement, HTMLSelectElement, HTMLButtonElement o HTMLTextAreaElement), la cual evalúa las restricciones para este elemento únicamente, permitiendo que un script obtenga esta información. (Esto lo hace comúnmente el agente usuario cuando determina cuál de las pseudo-clases CSS, {{ Cssxref(":valid") }} o {{ Cssxref(":invalid") }}, se aplicará.)
    • +
  • Invocando a la función checkValidity() en la interfaz HTMLFormElement, llamada validación estática de restricciones.
    • +
  • Enviando el formulario en sí, llamado validación interactiva de restricciones.
    • +
+ +
Nota: + +
    +
  • Si se establece el atributo {{ htmlattrxref("novalidate", "form") }} en el elemento {{ HTMLElement("form") }}, la validación interactiva de las restricciones no se aplica.
    • +
  • Invocando al método send() en la interfaz HTMLFormElement no invoca a la validación de restricciones. en otras palabras, este método envía los datos del formulario al servidor aunque no se satisfagan las restricciones.
    • +
+
+ +

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/web/guide/html/html5/html5_parser/index.html b/files/es/web/guide/html/html5/html5_parser/index.html new file mode 100644 index 0000000000..591fcbe865 --- /dev/null +++ b/files/es/web/guide/html/html5/html5_parser/index.html @@ -0,0 +1,64 @@ +--- +title: Analizador de HTML5 +slug: HTML/HTML5/HTML5_Parser +tags: + - HTML + - HTML5 + - para_revisar +translation_of: 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:

+
    +
  • Ahora puedes utilizar SVG y MathML alineado en las páginas de HTML 5, sin sintaxis de espacio de nombres XML.
    • +
  • El análisis se hace ahora en un tema aparte del hilo principal de la interfaz de usuario de Firefox, mejorando la capacidad de respuesta global del navegador.
    • +
  • Las llamadas a innerHTML son mucho más rápidas.
    • +
  • Se han corregido decenas de errores relacionados desde hace tiempo con el analizador.
    • +
+

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:

+
    +
  • Si se omite la etiqueta de cierre para <title>, <style>, <textarea> o <XMP>, la página fallará el análisis. IE ya falla al analizar documentos si falta una etiqueta </ title>, así que si pruebas con IE, es probable que no tengas ese problema.
    • +
  • Si olvidas cerrar un comentario, lo más probable es que la página falle al analizarse. Sin embargo, los comentarios no cerrados a menudo se rompen en los navegadores existentes, por una razón u otra, así que es poco probable que tengas este problema en los sitios que se han probado en varios navegadores.
    • +
  • En un script alineado, con el fin de utilizar las cadenas literales </script> y <!-- , deberías evitar que se analicen literalmente, expresándolas como \u003c/script> y \u003c!-- . La práctica anterior de escapar de la cadena </script> rodeándola con los marcadores de comentario, aunque es compatible con HTML5, causa problemas en los casos en los que se omite el marcador de comentario (ver punto anterior). Puedes evitar estos problemas utilizando el código de carácter para el primer '<' en su lugar.
    • +
+

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/web/guide/html/html5/index.html b/files/es/web/guide/html/html5/index.html new file mode 100644 index 0000000000..054d21d534 --- /dev/null +++ b/files/es/web/guide/html/html5/index.html @@ -0,0 +1,199 @@ +--- +title: HTML5 +slug: HTML/HTML5 +tags: + - API + - CSS3 + - Gráficos(2) + - HTML + - HTML5 + - Multimedia + - SVG + - conectividad + - graficos + - mejoras + - nuevo +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML5  es la última versión de HTML. El término representa dos conceptos diferentes:

+ +
    +
  • Se trata de una nueva versión de HTML, con nuevos elementos, atributos y comportamientos.
    • +
  • Contiene un conjunto más amplio de tecnologías que permite a los sitios Web y a las aplicaciones ser más diversas y de gran alcance. A este conjunto se le llama HTML5 y amigos, a menudo reducido a HTML5 .
    • +
+ +

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: Permite describir con mayor precisión cuál es su contenido.
    • +
  • Conectividad: Permite comunicarse con el servidor de formas nuevas e innovadoras.
    • +
  • Sin conexión y almacenamiento: Permite a las páginas web almacenar datos localmente en el lado del cliente y operar sin conexión de manera más eficiente.
    • +
  • Multimedia: Nos otorga un excelente soporte para utilizar contenido multimedia como lo son audio y video nativamente.
    • +
  • Gráficos y efectos 2D/3D: Proporciona una amplia gama de nuevas características que se ocupan de los gráficos en la web como lo son canvas 2D, WebGL, SVG, etc.
    • +
  • Rendimiento e Integración: Proporciona una mayor optimización de la velocidad y un mejor uso del hardware.
    • +
  • Acceso al dispositivo: Proporciona APIs para el uso de varios componentes internos de entrada y salida de nuestro dispositivo.
    • +
  • CSS3: Nos ofrece una nueva gran variedad de opciones para hacer diseños más sofisticados.
    • +
+ +
+
+

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/web/guide/html/html5/introduction_to_html5/index.html b/files/es/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..091a90f7af --- /dev/null +++ b/files/es/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,16 @@ +--- +title: Introducción a HTML5 +slug: HTML/HTML5/Introducción_a_HTML5 +tags: + - HTML + - HTML5 +translation_of: 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/web/guide/html/introduction_alhtml_clone/index.html b/files/es/web/guide/html/introduction_alhtml_clone/index.html deleted file mode 100644 index 991cf90181..0000000000 --- a/files/es/web/guide/html/introduction_alhtml_clone/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: Introducción al HTML -slug: Web/Guide/HTML/Introduction_alhtml_clone -tags: - - HTML ---- -

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:

- -
    -
  • Un atributo nombre (name).
    • -
  • Un atributo valor (value).
    • -
- -

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:

- -
    -
  • &gt; representa el carater mayor que (>)
    • -
  • &lt; representa el caracter menor que (<)
    • -
  • &amp; representa el caracter ampersand (&)
    • -
  • &quot; representa el caracter de comillas dobles (")
    • -
- -

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/web/guide/html/using_html_sections_and_outlines/index.html b/files/es/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..145f89d9ae --- /dev/null +++ b/files/es/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,411 @@ +--- +title: Secciones y esquema de un documento HTML5 +slug: Sections_and_Outlines_of_an_HTML5_document +translation_of: 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

+ +
    +
  • Usar etiquetas explícitas para abrir y cerrar secciones.
    • +
  •  Acomodar el rango de cabecera al nivel de anidamiento de la sección deseada. 
    • +
+ +

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:

+ +
    +
  • Una sección cuyo encabezado principal es acompañado de otro encabezado , cuyo propósito es adornar o aportar cierta información al encabezado principal, pero sin oscurecerlo a la hora de formar el esquema estructural: + 
    <section>
+  <h1>La flauta mágica</h1>
+  <h2>Ópera en dos actos del genio salzburgués</h2>
+</section>
    + +

    genera el siguiente esquema, que claramene no es el que se desea:

    + + 
    1. La flauta mágica
+   1.1 Ópera en dos actos del genio salzburgués
+
    +
    • +
  • El encabezado secundario puede ser usado por una lista de etiquetas: + 
    <section>
+  <h1>Secciones y esquema del documento</h1>
+  <h2>HTML, HTML5, secciones, esquema</h2>
+</section>
    + +

    genera el siguiente esquema, que tampoco es el que se desea:

    + + 
    1. Secciones y esquema del documento
+   1.1 HTML, HTML5, secciones, esquema
    +
    • +
+ +

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.

+ +
{{HTML5ArticleTOC()}}
diff --git a/files/es/web/guide/mobile/index.html b/files/es/web/guide/mobile/index.html new file mode 100644 index 0000000000..684d3df672 --- /dev/null +++ b/files/es/web/guide/mobile/index.html @@ -0,0 +1,75 @@ +--- +title: Desarrollo Web Móvil +slug: Web/Guide/Movil +tags: + - Intermedio + - NecesitaEjemplo +translation_of: Web/Guide/Mobile +--- +

Esta página proporciona una visión general de algunas de las principales técnicas necesarias para diseñar sitios web que funcionen bien en dispositivos móviles. Si está buscando información sobre el proyecto Firefox OS de Mozilla, consulte la página de Firefox OS. O podría estar interesado en detalles sobre Firefox para Android.

+ +

Hemos organizado esta documentación en dos secciones, diseñando para dispositivos móviles y desarrollo para diferentes navegadores. Vea también la guía a la amigabilidad móvil para desarrolladores web de Jason Grlicky.

+ +

Diseñando para dispositivos móviles

+ +

Los dispositivos móviles tienen características de hardware bastante diferentes comparados con los ordenadores de escritorio/sobremesa o portátiles. Obviamente sus pantallas son usualmente más pequeñas, pero además habitualmente también cambian automáticamente su orientación, entre retrato o paisaje, según el usuario rota el dispositivo. Por lo general tienen pantallas táctiles para la entrada de datos por parte del usuario. APIs como la geolocalización o la orientación, o bien no son soportadas en ordenadores de escritorio o son mucho menos útiles, y estas APIs ofrecen a los usuarios móviles nuevas formas de interactuar con su sitio web.

+ +

Trabajando con pantallas pequeñas

+ +

Diseño web adaptable es un término para un conjunto de técnicas que permiten a su sitio web adaptar su diseño según el entorno de visualización — lo más evidente, el tamaño y orientación de la pantalla — cambie. Incluye técnicas como:

+ +
    +
  • diseño CSS fluido, para hacer que la página se adapte sin problemas según cambie el tamaño de la ventana del navegador y
    • +
  • el uso de media queries para incluir condicionalmente reglas CSS adecuadas para el ancho y alto de la pantalla.
    • +
+ +

La etiqueta meta viewport ordena al navegador que muestre su sitio web a la escala adecuada para el dispositivo del usuario.

+ +

Trabajando con pantallas táctiles

+ +

Para usar una pantalla táctil necesitará trabajar con eventos DOM Touch. No tendrá la posibilidad de usar la pseudo-clase CSS :hover y tendrá que diseñar elementos interactivos como botones para respetar el hecho de que los dedos son más gordos que el puntero del ratón. Vea este artículo sobre diseñar para pantallas táctiles.

+ +

Puede usar el media query -moz-touch-enabled para cargar una CSS diferente en un dispositivo con pantalla táctil.

+ +

Optimizando imágenes

+ +

Para ayudar a los usuarios cuyos dispositivos tienen un bajo o caro ancho de banda, puede optimizar las imágenes cargando sólo aquellas apropiadas para el tamaño y resolución del dispositivo. Es algo que se hace en la CSS consultando la altura de pantalla, anchura y proporción de píxeles.

+ +

También puede hacer uso de propiedades CSS para implementar efectos visuales como gradientes y sombras sin utilizar imágenes para ello.

+ +

APIs móviles

+ +

Finalmente, puede aprovechar las nuevas posibilidades ofrecidas por los dispositivos móviles, como la orientación y la geolocalización.

+ +

Desarrollo para diferentes navegadores

+ +

Escribir código para diferentes navegadores (cross-browser)

+ +

Para crear sitios web que funcionen aceptablemente en diferentes navegadores móviles:

+ +
    +
  • Intente evitar características específicas de un navegador, como las propiedades CSS prefijadas por el proveedor (vendor-prefixed).
    • +
  • Si necesita utilizar estas características, compruebe si otros navegadores implementan sus propias versiones e inclúyalas igualmente.
    • +
  • Para navegadores que no soportan estas características, ofrezca una alternativa aceptable.
    • +
+ +

Por ejemplo, si establece un gradiente como fondo para cierto texto usando una propiedad prefijada por el proveedor (vendor-prefixed) como -webkit-linear-gradient, es mejor incluir las otras versiones prefijadas de la propiedad linear-gradient (gradiente linear). Si no lo hace, asegúrese al menos de que el fondo por defecto contrasta con el texto. Así, la página será al menos usable en un navegador al que no esté dirigida su regla linear-gradient.

+ +

Vea esta lista de propiedades específicas para Gecko, esta lista de propiedades específicas para WebKit y la tabla de propiedades específicas de proveedores (vendor-specific) de Peter Beverloo.

+ +

Usar herramientas como CSS Lint puede ayudar a encontrar problemas como este en el código y preprocesadores como SASS y LESS pueden ser de ayuda para crear código compatible con diferentes navegadores.

+ +

Precaución al husmear el agente de usuario (user agent)

+ +

Es preferible para los sitios web usar las técnicas enumeradas anteriormente con el objetivo de detectar características específicas del dispositivo, como el tamaño de pantalla y las pantallas táctiles, y adaptarse a ellas adecuadamente. Pero a veces esto no es práctico y los sitios web recurren a analizar la cadena de agente de usuario del navegador (user agent) para intentar distinguir entre ordenadores de escritorio, tabletas y teléfonos, y servir diferente contenido a cada tipo de dispositivo.

+ +

Si hace esto, asegúrese de que su algoritmo es correcto y no está sirviendo el tipo equivocado de contenido a un dispositivo porque no entiende la cadena de un agente de usuario particular. Vea esta guía para usar la cadena de agente de usuario para determinar el tipo de dispositivo.

+ +

Probar en múltiples navegadores

+ +

Compruebe su sitio web en múltiples navegadores. Esto significa probarlo en múltiples plataformas — al menos iOS y Android.

+ + diff --git a/files/es/web/guide/movil/index.html b/files/es/web/guide/movil/index.html deleted file mode 100644 index 684d3df672..0000000000 --- a/files/es/web/guide/movil/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Desarrollo Web Móvil -slug: Web/Guide/Movil -tags: - - Intermedio - - NecesitaEjemplo -translation_of: Web/Guide/Mobile ---- -

Esta página proporciona una visión general de algunas de las principales técnicas necesarias para diseñar sitios web que funcionen bien en dispositivos móviles. Si está buscando información sobre el proyecto Firefox OS de Mozilla, consulte la página de Firefox OS. O podría estar interesado en detalles sobre Firefox para Android.

- -

Hemos organizado esta documentación en dos secciones, diseñando para dispositivos móviles y desarrollo para diferentes navegadores. Vea también la guía a la amigabilidad móvil para desarrolladores web de Jason Grlicky.

- -

Diseñando para dispositivos móviles

- -

Los dispositivos móviles tienen características de hardware bastante diferentes comparados con los ordenadores de escritorio/sobremesa o portátiles. Obviamente sus pantallas son usualmente más pequeñas, pero además habitualmente también cambian automáticamente su orientación, entre retrato o paisaje, según el usuario rota el dispositivo. Por lo general tienen pantallas táctiles para la entrada de datos por parte del usuario. APIs como la geolocalización o la orientación, o bien no son soportadas en ordenadores de escritorio o son mucho menos útiles, y estas APIs ofrecen a los usuarios móviles nuevas formas de interactuar con su sitio web.

- -

Trabajando con pantallas pequeñas

- -

Diseño web adaptable es un término para un conjunto de técnicas que permiten a su sitio web adaptar su diseño según el entorno de visualización — lo más evidente, el tamaño y orientación de la pantalla — cambie. Incluye técnicas como:

- -
    -
  • diseño CSS fluido, para hacer que la página se adapte sin problemas según cambie el tamaño de la ventana del navegador y
    • -
  • el uso de media queries para incluir condicionalmente reglas CSS adecuadas para el ancho y alto de la pantalla.
    • -
- -

La etiqueta meta viewport ordena al navegador que muestre su sitio web a la escala adecuada para el dispositivo del usuario.

- -

Trabajando con pantallas táctiles

- -

Para usar una pantalla táctil necesitará trabajar con eventos DOM Touch. No tendrá la posibilidad de usar la pseudo-clase CSS :hover y tendrá que diseñar elementos interactivos como botones para respetar el hecho de que los dedos son más gordos que el puntero del ratón. Vea este artículo sobre diseñar para pantallas táctiles.

- -

Puede usar el media query -moz-touch-enabled para cargar una CSS diferente en un dispositivo con pantalla táctil.

- -

Optimizando imágenes

- -

Para ayudar a los usuarios cuyos dispositivos tienen un bajo o caro ancho de banda, puede optimizar las imágenes cargando sólo aquellas apropiadas para el tamaño y resolución del dispositivo. Es algo que se hace en la CSS consultando la altura de pantalla, anchura y proporción de píxeles.

- -

También puede hacer uso de propiedades CSS para implementar efectos visuales como gradientes y sombras sin utilizar imágenes para ello.

- -

APIs móviles

- -

Finalmente, puede aprovechar las nuevas posibilidades ofrecidas por los dispositivos móviles, como la orientación y la geolocalización.

- -

Desarrollo para diferentes navegadores

- -

Escribir código para diferentes navegadores (cross-browser)

- -

Para crear sitios web que funcionen aceptablemente en diferentes navegadores móviles:

- -
    -
  • Intente evitar características específicas de un navegador, como las propiedades CSS prefijadas por el proveedor (vendor-prefixed).
    • -
  • Si necesita utilizar estas características, compruebe si otros navegadores implementan sus propias versiones e inclúyalas igualmente.
    • -
  • Para navegadores que no soportan estas características, ofrezca una alternativa aceptable.
    • -
- -

Por ejemplo, si establece un gradiente como fondo para cierto texto usando una propiedad prefijada por el proveedor (vendor-prefixed) como -webkit-linear-gradient, es mejor incluir las otras versiones prefijadas de la propiedad linear-gradient (gradiente linear). Si no lo hace, asegúrese al menos de que el fondo por defecto contrasta con el texto. Así, la página será al menos usable en un navegador al que no esté dirigida su regla linear-gradient.

- -

Vea esta lista de propiedades específicas para Gecko, esta lista de propiedades específicas para WebKit y la tabla de propiedades específicas de proveedores (vendor-specific) de Peter Beverloo.

- -

Usar herramientas como CSS Lint puede ayudar a encontrar problemas como este en el código y preprocesadores como SASS y LESS pueden ser de ayuda para crear código compatible con diferentes navegadores.

- -

Precaución al husmear el agente de usuario (user agent)

- -

Es preferible para los sitios web usar las técnicas enumeradas anteriormente con el objetivo de detectar características específicas del dispositivo, como el tamaño de pantalla y las pantallas táctiles, y adaptarse a ellas adecuadamente. Pero a veces esto no es práctico y los sitios web recurren a analizar la cadena de agente de usuario del navegador (user agent) para intentar distinguir entre ordenadores de escritorio, tabletas y teléfonos, y servir diferente contenido a cada tipo de dispositivo.

- -

Si hace esto, asegúrese de que su algoritmo es correcto y no está sirviendo el tipo equivocado de contenido a un dispositivo porque no entiende la cadena de un agente de usuario particular. Vea esta guía para usar la cadena de agente de usuario para determinar el tipo de dispositivo.

- -

Probar en múltiples navegadores

- -

Compruebe su sitio web en múltiples navegadores. Esto significa probarlo en múltiples plataformas — al menos iOS y Android.

- - diff --git a/files/es/web/guide/performance/usando_web_workers/index.html b/files/es/web/guide/performance/usando_web_workers/index.html deleted file mode 100644 index db4dbc07e3..0000000000 --- a/files/es/web/guide/performance/usando_web_workers/index.html +++ /dev/null @@ -1,633 +0,0 @@ ---- -title: Usando Web Workers -slug: Web/Guide/Performance/Usando_web_workers -translation_of: Web/API/Web_Workers_API/Using_web_workers ---- -

Los Web Workers dedicados proveen un medio sencillo para que el contenido web ejecute scripts en hilos en segundo plano. Una vez creado, un worker puede enviar mensajes a la tarea creada mediante envio de mensajes al manejador de eventos especificado por el creador. Sin embargo, los workers trabajan dentro de un contexto global diferente de la ventana actual (usar el atajo  {{ domxref("window") }} en lugar de {{ domxref("window.self","self") }} con el fin de obtener el scope actual dentro de un {{ domxref("Worker") }} retornaría, de hecho, un error).

- -

El hilo worker puede realizar tareas sin interferir con la interfaz de usuario. Ademas, pueden realizar I/O usando XMLHttpRequest (aunque el responseXML y los atributos channel son siempre null).

- -

Para documentacion de referencia acerca de workers busca {{ domxref("Worker") }} ; este articulo complementa ese ofreciendo ejemplos y detalles adicionales. Para una lista de las funciones disponibles sobre workers, visita  Functions and interfaces available to workers.

- -

Acerca de seguridad de hilos

- -

La interfaz  {{ domxref("Worker") }} crea hilos a nivel de SO reales, y la concurrencia puede causar effectos interesantes en tu código si no eres cuidadoso. Sin embargo, en el caso de los web workers, el control cuidadoso de los puntos de comunicacion con otros hilos indica que es realmente muy dificil causar problemas de concurrencia. No existe acceso a componentes no-hilo seguros o al DOM y debes pasar la informacion entrante o saliente del hilo a traves de objetos serializados. Así que debes poner esfuerzo para causar problemas en tu código.

- -

Creando un web worker

- -

Crear un nuevo worker es simple.  Sólo tienes que llamar el constructor {{ domxref("Worker.Worker", "Worker()") }}, especificando la URI de un script a ejecutar en el hilo del worker (worker thread), y, si deseas poder recibir notificaciones del worker, establece la propiedad  {{domxref("Worker.onmessage")}} del worker a una función de manejo de eventos apropiada.

- -
-
var myWorker = new Worker("my_task.js");
-
-myWorker.onmessage = function (oEvent) {
-  console.log("Called back by the worker!\n");
-};
-
- -

Alternativamente, puedes usar addEventListener() :

- -
-
var myWorker = new Worker("my_task.js");
-
-myWorker.addEventListener("message", function (oEvent) {
-  console.log("Called back by the worker!\n");
-}, false);
-
-myWorker.postMessage(""); // start the worker.
-
- -

La Línea 1 en  este ejemplo crea un nuevo worker (worker thread). La Línea 3 configura un manejador de eventos (listener) para encargarse de los eventos message del worker. Este manejador de eventos se llamará cuando el worker llame a su propia función {{domxref("Worker.postMessage()")}}. Finalmente, la Linea 7 inicia el worker (worker thread).

- -
Nota : La URI pasada como parámetro del constructor de Worker debe obedecer la política same-origin policy . Actualmente hay desacuerdo entre los desarolladores de navegadores sobre qué URIs son del mismo origen; Gecko 10.0 {{ geckoRelease("10.0") }} y posteriores sí permiten data URIs e Internet Explorer 10 no permite Blob URIs como un script válido para los workers.
- -

Pasando datos

- -

Los datos pasan entre la página principal y los workers son copiados, no compartidos. Los objetos se serializan a medida que se entregan al worker, y posteriormente, se deserializan en el otro extremo. La página y el worker no comparten la misma instancia, por lo que el resultado final es que un duplicado es creado en cada extremo. La mayoría de los navegadores implementan esta característica como structured cloning.

- -

Antes de continuar, vamos a crear con fines didácticos una función llamada emulateMessage() que simulará el comportamiento de un valor el cual es clonado y no compartido durante el paso desde un worker a la página principal o viceversa:

- -
function emulateMessage (vVal) {
-    return eval("(" + JSON.stringify(vVal) + ")");
-}
-
-// Tests
-
-// test #1
-var example1 = new Number(3);
-alert(typeof example1); // object
-alert(typeof emulateMessage(example1)); // number
-
-// test #2
-var example2 = true;
-alert(typeof example2); // boolean
-alert(typeof emulateMessage(example2)); // boolean
-
-// test #3
-var example3 = new String("Hello World");
-alert(typeof example3); // object
-alert(typeof emulateMessage(example3)); // string
-
-// test #4
-var example4 = {
-    "name": "John Smith",
-    "age": 43
-};
-alert(typeof example4); // object
-alert(typeof emulateMessage(example4)); // object
-
-// test #5
-function Animal (sType, nAge) {
-    this.type = sType;
-    this.age = nAge;
-}
-var example5 = new Animal("Cat", 3);
-alert(example5.constructor); // Animal
-alert(emulateMessage(example5).constructor); // Object
- -

A Un valor que es clonado y no compartido se denomina mensaje. De vuelta con los workers, los mensajes pueden ser enviados hacia y desde el hilo principal empleando postMessage(). Los eventos de mensaje {{domxref("MessageEvent.data", "data")}} atributo contienen datos devueltos desde el worker.

- -

example.html: (la página principal):

- -
var myWorker = new Worker("my_task.js");
-
-myWorker.onmessage = function (oEvent) {
-  console.log("Worker said : " + oEvent.data);
-};
-
-myWorker.postMessage("ali");
- -

my_task.js (el worker):

- -
postMessage("I\'m working before postMessage(\'ali\').");
-
-onmessage = function (oEvent) {
-  postMessage("Hi " + oEvent.data);
-};
- -
Note: Como siempre, los hilos en segundo plano -incluyendo workers- no pueden manipular el DOM. Si acciones tomadas por el hilo en segundo planos resultarían en cambios en el DOM, deberian enviar mensajes a sus creadores para llevarlos a cabo.
- -

The structured cloning algorithm can accept JSON and a few things that JSON can't like circular references.

- -

Ejemplos pasando datos

- -

Example #1: Crear un "eval() asíncrono" genérico

- -

El siguiente ejemplo muestra como usar un worker para ejecutar asíncronamente cualquier tipo de código en Javascript a traves de eval dentro del worker:

- -
// Syntax: asyncEval(code[, listener])
-
-var asyncEval = (function () {
-
-  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
-
-  oParser.onmessage = function (oEvent) {
-    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
-    delete aListeners[oEvent.data.id];
-  };
-
-
-  return function (sCode, fListener) {
-    aListeners.push(fListener || null);
-    oParser.postMessage({
-      "id": aListeners.length - 1,
-      "code": sCode
-    });
-  };
-
-})();
- -

Ejemplo de uso:

- -
// asynchronous alert message...
-asyncEval("3 + 2", function (sMessage) {
-    alert("3 + 2 = " + sMessage);
-});
-
-// asynchronous print message...
-asyncEval("\"Hello World!!!\"", function (sHTML) {
-    document.body.appendChild(document.createTextNode(sHTML));
-});
-
-// asynchronous void...
-asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");
- -

Ejemplo #2: Paso avanzado de JSON Data y creación de un sistema de conmutación

- -

Si tiene que pasar datos complejos y tienes que llamar a muchas funciones diferentes tanto en la página principal como en el Worker, puede crear un sistema como el siguiente.

- -

example.html (the main page):

- -
<!doctype html>
-<html>
-<head>
-<meta charset="UTF-8"  />
-<title>MDN Example - Queryable worker</title>
-<script type="text/javascript">
-  /*
-    QueryableWorker instances methods:
-     * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
-     * postMessage(string or JSON Data): see Worker.prototype.postMessage()
-     * terminate(): terminates the Worker
-     * addListener(name, function): adds a listener
-     * removeListener(name): removes a listener
-    QueryableWorker instances properties:
-     * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
-  */
-  function QueryableWorker (sURL, fDefListener, fOnError) {
-    var oInstance = this, oWorker = new Worker(sURL), oListeners = {};
-    this.defaultListener = fDefListener || function () {};
-    oWorker.onmessage = function (oEvent) {
-      if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("vo42t30") && oEvent.data.hasOwnProperty("rnb93qh")) {
-        oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh);
-      } else {
-        this.defaultListener.call(oInstance, oEvent.data);
-      }
-    };
-    if (fOnError) { oWorker.onerror = fOnError; }
-    this.sendQuery = function (/* queryable function name, argument to pass 1, argument to pass 2, etc. etc */) {
-      if (arguments.length < 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; }
-      oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) });
-    };
-    this.postMessage = function (vMsg) {
-      //I just think there is no need to use call() method
-      //how about just oWorker.postMessage(vMsg);
-      //the same situation with terminate
-      //well,just a little faster,no search up the prototye chain
-      Worker.prototype.postMessage.call(oWorker, vMsg);
-    };
-    this.terminate = function () {
-      Worker.prototype.terminate.call(oWorker);
-    };
-    this.addListener = function (sName, fListener) {
-      oListeners[sName] = fListener;
-    };
-    this.removeListener = function (sName) {
-      delete oListeners[sName];
-    };
-  };
-
-  // your custom "queryable" worker
-  var oMyTask = new QueryableWorker("my_task.js" /* , yourDefaultMessageListenerHere [optional], yourErrorListenerHere [optional] */);
-
-  // your custom "listeners"
-
-  oMyTask.addListener("printSomething", function (nResult) {
-    document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!"));
-  });
-
-  oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) {
-    alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)");
-  });
-</script>
-</head>
-<body>
-  <ul>
-    <li><a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li>
-    <li><a href="javascript:oMyTask.sendQuery('waitSomething');">Wait 3 seconds</a></li>
-    <li><a href="javascript:oMyTask.terminate();">terminate() the Worker</a></li>
-  </ul>
-</body>
-</html>
- -

my_task.js (el worker):

- -
// your custom PRIVATE functions
-
-function myPrivateFunc1 () {
-  // do something
-}
-
-function myPrivateFunc2 () {
-  // do something
-}
-
-// etc. etc.
-
-// your custom PUBLIC functions (i.e. queryable from the main page)
-
-var queryableFunctions = {
-  // example #1: get the difference between two numbers:
-  getDifference: function (nMinuend, nSubtrahend) {
-      reply("printSomething", nMinuend - nSubtrahend);
-  },
-  // example #2: wait three seconds
-  waitSomething: function () {
-      setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000);
-  }
-};
-
-// system functions
-
-function defaultQuery (vMsg) {
-  // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly
-  // do something
-}
-
-function reply (/* listener name, argument to pass 1, argument to pass 2, etc. etc */) {
-  if (arguments.length < 1) { throw new TypeError("reply - not enough arguments"); return; }
-  postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) });
-}
-
-onmessage = function (oEvent) {
-  if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("bk4e1h0") && oEvent.data.hasOwnProperty("ktp3fm1")) {
-    queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1);
-  } else {
-    defaultQuery(oEvent.data);
-  }
-};
- -

Es un método posible para conmutar el contenido de cada mensaje de cada mainpage-worker y viceversa.

- -

Pasando datos mediante transferencia de propiedades (objetos transferibles)

- -

Google Chrome 17 y Firefox 18 implementan un método adicional para enviar ciertos tipos de objetos desde o hacia el worker con un mejor rendimiento. Estos objetos se denominan objetos transferibles (transferable objects), es decir, objetos que implementan la interfaz {{domxref("Transferable")}}. Los objetos transferibles se transfieren de un contexto a otro con una operación "zero-copy". Esto supone una gran mejora de rendimiento al enviar grandes cantidades de datos. Piensa en ello como un paso por referencia si vienes del mundo de C/C++.  Sin embargo, a diferecia del paso por referencia, la "versión" original no queda disponible una vez transferida. Su contenido es transferido al nuevo contexto. Por ejemplo, cuando se transfiere un {{domxref("ArrayBuffer")}} de tu aplicacion al Worker, el contenido del {{domxref("ArrayBuffer")}} original se vacía y no se puede utilizar posteriormente. Su contenido es (literalmente) transferido al contexto del Worker.

- -
// Create a 32MB "file" and fill it.
-var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
-for (var i = 0; i < uInt8Array.length; ++i) {
-  uInt8Array[i] = i;
-}
-
-worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
-
- -

Para más información sobre los objetos transferibles, visita HTML5Rocks .

- -

Spawning subworkers

- -

Workers may spawn more workers if they wish.  So-called subworkers must be hosted within the same origin as the parent page.  Also, the URIs for subworkers are resolved relative to the parent worker's location rather than that of the owning page.  This makes it easier for workers to keep track of where their dependencies are.

- -

Subworkers are currently not supported in Chrome. See crbug.com/31666 .

- -

Embedded workers

- -

There is not an "official" way to embed the code of a worker within a web page as for the {{ HTMLElement("script") }} elements. But a {{ HTMLElement("script") }} element which does not have a src attribute and has a type attribute that does not identify an executable mime-type will be considered a data block element, that JavaScript could use.  "Data blocks" is a more general feature of HTML5 that can carry almost any textual data. So, a worker could be embedded in this way:

- -
<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8" />
-<title>MDN Example - Embedded worker</title>
-<script type="text/js-worker">
-  // This script WON'T be parsed by JS engines because its mime-type is text/js-worker.
-  var myVar = "Hello World!";
-  // Rest of your worker code goes here.
-</script>
-<script type="text/javascript">
-  // This script WILL be parsed by JS engines because its mime-type is text/javascript.
-  function pageLog (sMsg) {
-    // Use a fragment: browser will only render/reflow once.
-    var oFragm = document.createDocumentFragment();
-    oFragm.appendChild(document.createTextNode(sMsg));
-    oFragm.appendChild(document.createElement("br"));
-    document.querySelector("#logDisplay").appendChild(oFragm);
-  }
-</script>
-<script type="text/js-worker">
-  // This script WON'T be parsed by JS engines because its mime-type is text/js-worker.
-  onmessage = function (oEvent) {
-    postMessage(myVar);
-  };
-  // Rest of your worker code goes here.
-</script>
-<script type="text/javascript">
-  // This script WILL be parsed by JS engines because its mime-type is text/javascript.
-
-  // In the past...:
-  // blob builder existed
-  // ...but now we use Blob...:
-  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
-
-  // Creating a new document.worker property containing all our "text/js-worker" scripts.
-  document.worker = new Worker(window.URL.createObjectURL(blob));
-
-  document.worker.onmessage = function (oEvent) {
-    pageLog("Received: " + oEvent.data);
-  };
-
-  // Start the worker.
-  window.onload = function() { document.worker.postMessage(""); };
-</script>
-</head>
-<body><div id="logDisplay"></div></body>
-</html>
- -

The embedded worker is now nested into a new custom document.worker property.

- -

Tiempos fuera e intervalos

- -

Los trabajadores pueden usar tiempos fuera e intervalos de la misma forma que el "hilo principal".  Esto puede ser útil, por ejemplo, si quieres tener a tu hilo trabajador corriendo codigo periodicamente en lugar de sin parar.

- -

Ver setTimeout() , clearTimeout() , setInterval() , y clearInterval() para más detalles. Ver también: JavaScript Timers.

- -

Terminating a worker

- -

If you need to immediately terminate a running worker, you can do so by calling the worker's terminate() method:

- -
myWorker.terminate();
- -

The worker thread is killed immediately without an opportunity to complete its operations or clean up after itself.

- -

Workers may close themselves by calling their own {{ ifmethod("nsIWorkerScope", "close") }} method:

- -
self.close();
- -

Manejo de errores

- -

When a runtime error occurs in worker, its onerror event handler is called.  It receives an event named error which implements the ErrorEvent interface.  The event doesn't bubble and is cancelable; to prevent the default action from taking place, the worker can call the error event's preventDefault() method.

- -

The error event has the following three fields that are of interest:

- -
-
message
-
A human-readable error message.
-
filename
-
The name of the script file in which the error occurred.
-
lineno
-
The line number of the script file on which the error occurred.
-
- -

Accediendo al objeto navigator

- -

Los workers pueden acceder al objeto navigator, el cuál está disponible dentro de su scope actual. Este contiene los siguientes strings que pueden ser usados para identificar el navegador, al igual que puede realizarse usando scripts normales:

- -
    -
  • appName
    • -
  • appVersion
    • -
  • platform
    • -
  • userAgent
    • -
- -

Importing scripts and libraries

- -

Worker threads have access to a global function, importScripts() , which lets them import scripts or libraries into their scope.  It accepts as parameters zero or more URIs to resources to import; all of the following examples are valid:

- -
importScripts();                        /* imports nothing */
-importScripts('foo.js');                /* imports just "foo.js" */
-importScripts('foo.js', 'bar.js');      /* imports two scripts */
-
- -

The browser loads each listed script and executes it. Any global objects from each script may then be used by the worker. If the script can't be loaded, NETWORK_ERROR is thrown, and subsequent code will not be executed. Previously executed code (including code deferred using {{ domxref("window.setTimeout()") }}) will still be functional though. Function declarations after the importScripts() method are also kept, since these are always evaluated before the rest of the code.

- -
Note: Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into importScripts() .  This is done synchronously; importScripts() does not return until all the scripts have been loaded and executed.
- -

Examples

- -

This section provides several examples of how to use DOM workers.

- -

Performing computations in the background

- -

One way workers are useful is to allow your code to perform processor-intensive calculations without blocking the user interface thread.  In this example, a worker is used to calculate Fibonacci numbers.

- -

The JavaScript code

- -

The following JavaScript code is stored in the "fibonacci.js" file referenced by the HTML in the next section.

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

The worker sets the property onmessage  to a function which will receive messages sent when the worker object's  postMessage() is called.  (Note that this differs from defining a global variable of that name, or defining a function with that name.   var onmessage and function onmessage will define global properties with those names, but they will not register the function to receive messages sent by the  web page that created the worker.)  This starts the recursion, spawning new copies of itself to handle each iteration of the calculation.

- -

The HTML code

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8"  />
-    <title>Test threads fibonacci</title>
-  </head>
-  <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>
-
- -

The web page creates a div element with the ID  result , which gets used to display the result, then spawns the worker.  After spawning the worker, the onmessage handler is configured to display the results by setting the contents of the div element, and the onerror handler is set to dump the error message.

- -

Finally, a message is sent to the worker to start it.

- -

Try this example .

- -

Performing web I/O in the background

- -

You can find an example of this in the article Using workers in extensions .

- -

Dividing tasks among multiple workers

- -

As multi-core computers become increasingly common, it's often useful to divide computationally complex tasks among multiple workers, which may then perform those tasks on multiple-processor cores.

- -

example coming soon

- -

Creating workers from within workers

- -

The Fibonacci example shown previously demonstrates that workers can in fact spawn additional workers.  This makes it easy to create recursive routines.

- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Dedicated workers{{CompatChrome(3)}}{{CompatGeckoDesktop(1.9.1)}}{{CompatIE(10)}}{{CompatOpera(10.60)}}{{CompatSafari(4)}}
Shared workers{{CompatChrome(3)}}{{CompatNo}}{{CompatNo}}{{CompatOpera(10.60)}}{{CompatSafari(5)}}
Passing data using structured cloning . {{CompatChrome(13)}}{{CompatGeckoDesktop(8)}}{{CompatIE(10)}}{{CompatOpera(11.50)}}{{CompatSafari(5.1)}}
Passing data using  transferable objects17 {{ property_prefix("webkit") }}
- {{CompatChrome(21)}}		{{CompatGeckoDesktop(18)}}{{CompatNo}}{{CompatOpera(15)}}{{CompatSafari(6)}}
Global {{ domxref("window.URL", "URL") }}10 as webkitURL
- {{CompatChrome(23)}}		{{CompatGeckoDesktop(21)}}{{CompatIE(11)}}{{CompatOpera(15)}}6 as webkitURL
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Dedicated workers---0.163.5 (1.9.1)---115
Shared workers---{{ CompatNo() }}------------
Passing data using structured cloning . ---0.168---------
Passing data using  transferable objects---18---------
-
- -

See also

- - diff --git a/files/es/web/guide/usando_objetos_formdata/index.html b/files/es/web/guide/usando_objetos_formdata/index.html deleted file mode 100644 index 13f4c9635a..0000000000 --- a/files/es/web/guide/usando_objetos_formdata/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Usando Objetos FormData -slug: Web/Guide/Usando_Objetos_FormData -translation_of: Web/API/FormData/Using_FormData_Objects -translation_of_original: Web/Guide/Using_FormData_Objects ---- -

Los objetos FormData le permiten compilar un conjunto de pares clave/valor para enviar mediante XMLHttpRequest. Están destinados principalmente para el envío de los datos del formulario, pero se pueden utilizar de forma independiente con el fin de transmitir los datos tecleados. Los datos transmitidos estarán en el mismo formato que usa el método submit() del formulario para enviar los datos si el tipo de codificación del formulario se establece en "multipart/form-data".

- -

Creación de un objeto FormData desde cero

- -

Usted mismo puede construir un objeto FormData instanciándolo y después añadiendo campos a la instancia usando su método  append() , tal y como se muestra:

- -
var formData = new FormData();
-
-formData.append("username", "Groucho");
-formData.append("accountnum", 123456); // number 123456 is immediately converted to string "123456"
-
-// HTML file input user's choice...
-formData.append("userfile", fileInputElement.files[0]);
-
-// JavaScript file-like object...
-var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
-var blob = new Blob([content], { type: "text/xml"});
-
-formData.append("webmasterfile", blob);
-
-var request = new XMLHttpRequest();
-request.open("POST", "http://foo.com/submitform.php");
-request.send(formData);
-
- -
Nota: Los campos "userfile" y "webmasterfile" contienen ambos un archivo. El número asignado al campo "accountnum" es inmediatamente convertido a string por el método FormData.append() (el valor del campo puede ser un {{ domxref("Blob") }}, {{ domxref("File") }}, o una cadena de texto; si el valor no es ni un Blob, ni un File, será convertido a un string).
- -

Este ejemplo construye una instancia de FormData que almacenará los valores de los campos "username", "accountnum", "userfile" y "webmasterfile", entonces usará el método send() de XMLHttpRequest para enviar los datos del formulario. El campo "webmasterfile" es un Blob. Un objeto Blob representa un objeto de tipo similar a un fichero que es inalterable y que almacenará datos en formato raw. Los Blobs representan datos que no necesariamente tendrán un formato Javascript nativo. La interfaz {{ domxref("File") }} está basada en Blob, y hereda su funcionalidad y la amplía para dar soporte a archivos que estén en el sistema del usuario. Para construir un Blob, puede invocar al constructor del objeto Blob.

- -

Recuperando un objeto FormData de un formulario HTML 

- -

Para construir un objeto FormData que contenga los datos de un {{ HTMLElement("form") }} existente, especifique ese elemento form cuando cree el objeto FormData:

- -
var formData = new FormData(someFormElement);
-
- -

Por ejemplo:

- -
var formElement = document.getElementById("myFormElement");
-var request = new XMLHttpRequest();
-request.open("POST", "submitform.php");
-request.send(new FormData(formElement));
-
- -

También puede añadir datos adicionales al objeto FormData antes de enviarlo. Así:

- -
var formElement = document.getElementById("myFormElement");
-formData = new FormData(formElement);
-formData.append("serialnumber", serialNumber++);
-request.send(formData);
- -

Esto le permite aumentar los datos del formulario antes de enviarlos para incluir información adicional que no necesariamente debiera ser editable por el usuario en el formulario.

- -

Enviando archivos usando objetos FormData

- -

También puede enviar archivos usando FormData. Simplemente incluye un elemento {{ HTMLElement("input") }} de tipo {{ domxref("File") }}:

- -
<form enctype="multipart/form-data" method="post" name="fileinfo">
-  <label>Your email address:</label>
-  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
-  <label>Custom file label:</label>
-  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
-  <label>File to stash:</label>
-  <input type="file" name="file" required />
-  <input type="submit" value="Stash the file!" />
-</form>
-<div id="output"></div>
-
- -

Luego puede enviarlo usando código como el siguiente:

- -
var form = document.forms.namedItem("fileinfo");
-form.addEventListener('submit', function(ev) {
-
-  var
-    oOutput = document.getElementById("output"),
-    oData = new FormData(document.forms.namedItem("fileinfo"));
-
-  oData.append("CustomField", "This is some extra data");
-
-  var oReq = new XMLHttpRequest();
-  oReq.open("POST", "stash.php", true);
-  oReq.onload = function(oEvent) {
-    if (oReq.status == 200) {
-      oOutput.innerHTML = "Uploaded!";
-    } else {
-      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
-    }
-  };
-
-  oReq.send(oData);
-  ev.preventDefault();
-}, false);
-
- -
-

Nota: el método especificado en el formulario será usado por encima del método utilizado en en la llamada a open().

-
- -

También puede añadir un {{ domxref("File") }} o un {{ domxref("Blob") }} directamente al objeto {{ domxref("XMLHttpRequest/FormData", "FormData") }} de la siguiente manera:

- -
data.append("myfile", myBlob, "filename.txt");
-
- -

Cuando se usa el método append es posible usar, de manera opcional, un tercer parámetro para pasarle un nombre de fichero dentro de la cabecera Content-Disposition que será enviada al servidor. Cuando no se especifica (o el parámetro no es soportado), el nombre "blob" es el que será utilizado.

- -

Además, puede usar FormData con jQuery si asigna las opciones correctas:

- -
var fd = new FormData(document.getElementById("fileinfo"));
-fd.append("CustomField", "This is some extra data");
-$.ajax({
-  url: "stash.php",
-  type: "POST",
-  data: fd,
-  processData: false,  // tell jQuery not to process the data
-  contentType: false   // tell jQuery not to set contentType
-});
-
- -

Envío de formularios y carga de archivos vía AJAX sin  objetos FormData

- -

Si quiere saber cómo serializar y enviar vía AJAX un formulario sin utilizar objetos FormData, por favor leer este párrafo .

- -

Vea también

- - diff --git a/files/es/web/html/anipular_video_por_medio_de_canvas/index.html b/files/es/web/html/anipular_video_por_medio_de_canvas/index.html deleted file mode 100644 index a3ae61673d..0000000000 --- a/files/es/web/html/anipular_video_por_medio_de_canvas/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Manipular video por medio de canvas -slug: Web/HTML/anipular_video_por_medio_de_canvas -tags: - - Canvas - - Firefox 3.5 - - Video - - para_revisar -translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas ---- -

{{ fx_minversion_header (3.5) }}

-

Al combinar las capacidades del elemento video introducido en Firefox 3.5 con un elemento canvas , puedes manipular los datos de video en tiempo real para incorporar una variedad de efectos visuales que se mostrarán en el video.  Este artículo, adaptado de esta entrada del blog de Paul Rouget, muestra cómo realizar una inserción croma (también conocida como el "efecto pantalla verde") utilizando el código JavaScript.

-

Ver este ejemplo en vivo .

-

El contenido del documento

-

El documento XHTML que se utiliza para representar este contenido se muestra a continuación.

-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <style>
-      body {
-        background: black;
-        color:#CCCCCC;
-      }
-      #c2 {
-        background-image: url(foo.png);
-        background-repeat: no-repeat;
-      }
-      div {
-        float: left;
-        border :1px solid #444444;
-        padding:10px;
-        margin: 10px;
-        background:#3B3B3B;
-      }
-    </style>
-    <script type="text/javascript;version=1.8" src="main.js"></script>
-  </head>
-
-  <body onload="processor.doLoad()">
-    <div>
-      <video id="video" src="video.ogv" controls="true"/>
-    </div>
-    <div>
-      <canvas id="c1" width="160" height="96"/>
-      <canvas id="c2" width="160" height="96"/>
-    </div>
-  </body>
-</html>
-
-

Los puntos clave a tener en cuenta son:

-
    -
  1. Este documento establece dos elemento canvas , con los identificadores de c1 y c2 .  Canvas c1 se utiliza para mostrar la imagen actual del video original, mientras que c2 se utiliza para mostrar el video después de realizar la manipulación con el efecto croma; c2 se carga previamente con la imagen fija que se utilizará para sustituir el fondo verde en el video.
    2. -
  2. El código JavaScript es importado de un script llamado main.js ; este script utiliza JavaScript 1.8 características, de modo que la versión se especifica en la línea 22 al importar la secuencia de comandos.
    3. -
  3. Cuando se carga el documento, se ejecuta el método processor.doLoad() de main.js.
    4. -
-

El código JavaScript

-

El código JavaScript en main.js consta de tres métodos.

-

Inicializar el reproductor de croma

-

El método doLoad() se llama cuando el documento XHTML se carga inicialmente.  La función de este método es preparar las variables necesarias para el código de procesamiento del croma y la creación de un detector de eventos para que podamos detectar cuándo inicia el usuario la reproducción del video.

-
  doLoad: function() {
-    this.video = document.getElementById("video");
-    this.c1 = document.getElementById("c1");
-    this.ctx1 = this.c1.getContext("2d");
-    this.c2 = document.getElementById("c2");
-    this.ctx2 = this.c2.getContext("2d");
-    let self = this;
-    this.video.addEventListener("play", function() {
-        self.width = self.video.videoWidth / 2;
-        self.height = self.video.videoHeight / 2;
-        self.timerCallback();
-      }, false);
-  },
-
-

Este código obtiene referencias a los elementos del documento XHTML que son de particular interés, a saber, el elemento video y los dos elementos canvas.  También recupera las referencias a los contextos gráficos para cada uno de los dos elementos canvas.  Estos serán utilizados cuando estamos haciendo de verdad el efecto croma.

-

Luego addEventListener() es llamado para empezar a ver el elemento video de forma que podamos obtener una notificación cuando el usuario presione el botón de reproducción en el video.  En respuesta al usuario que inicia la reproducción, el código obtiene la anchura y la altura de video, reduciendo a la mitad cada uno (vamos a reducir a la mitad el tamaño del video, cuando llevamos a cabo la manipulación efecto croma). A continuación, llama al método timerCallback() para iniciar el visionado del video y la computación del efecto visual.

-

La devolución de llamada del temporizador

-

La devolución de llamada del temporizador se llama inicialmente cuando el video comienza a reproducirse (cuando tiene lugar el evento "reproducir"), a continuación, toma la responsabilidad por la que se establece a sí mismo para ser llamado periódicamente, a fin de poner en marcha el efecto croma para cada imagen.

-
  timerCallback: function() {
-    if (this.video.paused || this.video.ended) {
-      return;
-    }
-    this.computeFrame();
-    let self = this;
-    setTimeout(function () {
-        self.timerCallback();
-      }, 0);
-  },
-
-

Lo primero que la devolución de llamada hace es comprobar si el video se está aún reproduciendo, y si no lo está, la devolución de llamada regresa inmediatamente sin hacer nada.

-

A continuación, llama al método computeFrame(), que lleva a cabo la manipulación del efecto croma en la imagen de video actual.

-

Lo último que la devolución de llamada hace es llamar a setTimeout() para programarse para ser llamado lo más pronto posible.  En el mundo real, es probable que programes esto en función de la velocidad de fotogramas del video.

-

Manipulación de los datos de la imagen del video

-

El método computeFrame(), que se muestra a continuación, se encarga de ir a buscar realmente un fotograma de datos y realizar el efecto croma.

-
  computeFrame: function() {
-    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
-    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
-    let l = frame.data.length / 4;
-
-    for (let i = 0; i < l; i++) {
-      let r = frame.data[i * 4 + 0];
-      let g = frame.data[i * 4 + 1];
-      let b = frame.data[i * 4 + 2];
-      if (g > 100 && r > 100 && b < 43)
-        frame.data[i * 4 + 3] = 0;
-    }
-    this.ctx2.putImageData(frame, 0, 0);
-    return;
-  }
-
-

Cuando esta rutina es llamada, el elemento video muestra el fotograma de datos de video más reciente, que tiene este aspecto:

-

video.png

-

En la línea 2, ese fotograma de video se copia al contexto gráfico ctx1 del primer lienzo, especificando como alto y ancho los valores que previamente guardamos para dibujar el fotograma a mitad de tamaño.  Ten en cuenta que puedes pasar simplemente el elemento de video al método drawImage() del contexto para dibujar el fotograma de video actual en dicho contexto.  El resultado es:

-

sourcectx.png

-

Línea 3 obtiene una copia de los datos gráficos del actual fotograma de video llamando al método getImageData() en el primer contexto.  Esto proporciona los datos de imagen en píxeles de 32 bits sin procesar que podemos después manipular.  Línea 4 calcula el número de píxeles de la imagen al dividir entre cuatro el tamaño total de los datos de la imagen del fotograma.

-

El bucle for que comienza en la línea 6 explora a través de los píxeles del fotograma, extrayendo los valores rojo, verde y azul para cada píxel, y compara los valores frente a números predeterminados que se utilizan para detectar la pantalla verde que se reemplazará por la imagen de fondo fija importada de foo.png .

-

Cada píxel de datos de imagen del fotograma que se encuentra que está dentro de los parámetros que se consideran parte de la pantalla verde tiene su valor alfa reemplazado por un cero, lo que indica que el píxel es totalmente transparente.  Como resultado, la imagen final tiene toda el área de pantalla verde 100% transparente, de modo que cuando se dibuja en el contexto de destino en la línea 13, el resultado es una superposición sobre el fondo estático.

-

La imagen resultante tiene este aspecto:

-

output.png

-

Esto se hace en varias ocasiones mientras el video se reproduce, de manera que fotograma tras fotograma se procesa y se muestra con el efecto de croma.

-

Ver este ejemplo en vivo .

-

Consulta también

- -

{{ languages ( { "en": "En/Manipulating_video_using_canvas" } ) }}

diff --git a/files/es/web/html/atributos/accept/index.html b/files/es/web/html/atributos/accept/index.html deleted file mode 100644 index b98ff8b644..0000000000 --- a/files/es/web/html/atributos/accept/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: 'HTML el atributo: accept' -slug: Web/HTML/Atributos/accept -tags: - - Accept - - Archivo - - Entrada - - Input - - Referencia - - atributo -translation_of: Web/HTML/Attributes/accept ---- -

El atributo accept toma como valor una lista separada por comas de uno o más tipos de archivos, o {{anch("Especificadores de tipo de archivo únicos","especificadores de tipo de archivo únicos")}}, que describen qué tipos de archivo permitir. La propiedad «accept» es un atributo del tipo {{HTMLElement("input/file", "file")}} {{HTMLElement("input")}}. Se admitía en el elemento {{HTMLElement("form")}}, pero se eliminó a favor de {{HTMLElement("input/file", "file")}} en HTML5.

- -

Debido a que un determinado tipo de archivo se puede identificar de más de una manera, es útil proporcionar un conjunto completo de especificadores de tipo cuando necesiten archivos de un tipo específico, o usar el comodín para indicar que un tipo de cualquier formato es aceptable.

- -

Por ejemplo, hay varias formas de identificar los archivos de Microsoft Word, por lo que un sitio que acepta archivos de Word puede usar un <input> como este:

- -
<input type="file" id="docpicker"
-  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
- -

Mientras que si aceptas un archivo multimedia, es posible que desees incluir cualquier formato de ese tipo de medio:

- -
<input type="file" id="soundFile" accept="audio/*">
-<input type="file" id="videoFile" accept="video/*">
-<input type="file" id="imageFile" accept="image/*">
- -

El atributo accept no valida los tipos de archivos seleccionados; simplemente proporciona sugerencias para los navegadores para guiar a los usuarios hacia la selección de los tipos de archivo correctos. Todavía es posible (en la mayoría de los casos) que los usuarios cambien una opción en el selector de archivos que hace posible anular esto y seleccionar cualquier archivo que deseen, y luego elegir tipos de archivo incorrectos.

- -

Debido a esto, te debes asegurar de que el requisito esperado esté validado en el lado del servidor.

- -

Ejemplos

- -

Cuando se configura en un tipo de entrada de archivo, el selector de archivos nativo que se abre solo debe permitir seleccionar archivos del tipo de archivo correcto. La mayoría de los sistemas operativos aligeran los archivos que no coinciden con los criterios y no se pueden seleccionar.

- -
-
<p>
-	<label for="soundFile">Selecciona un archivo de audio:</label>
-	<input type="file" id="soundFile" accept="audio/*">
-	</p>
-	<p>
-	<label for="videoFile">Selecciona un archivo de video:</label>
-	<input type="file" id="videoFile" accept="video/*">
-	</p>
-	<p>
-	<label for="imageFile">Selecciona algunas imágenes:</label>
-	<input type="file" id="imageFile" accept="image/*" multiple>
-	</p>
- -

{{EmbedLiveSample('ejemplo_sencillo', '100%', 200)}}

- -

Ten en cuenta que el último ejemplo te permite seleccionar varias imágenes. Consulta el atributo multiple para obtener más información.

-
- -

Especificadores de tipo de archivo únicos

- -

Un especificador de tipo de archivo único es una cadena que describe un tipo de archivo que el usuario puede seleccionar en un elemento {{HTMLElement("input")}} de tipo file. Cada especificador de tipo de archivo único puede adoptar una de las siguientes formas:

- -
    -
  • Una extensión de nombre de archivo válida que no distingue entre mayúsculas y minúsculas, que comienza con un punto ("."). Por ejemplo: .jpg, .pdf, o .doc.
    • -
  • Una cadena de tipo MIME válida, sin extensiones.
    • -
  • La cadena audio/* significa "cualquier archivo de audio".
    • -
  • La cadena video/* significa "cualquier archivo de video".
    • -
  • La cadena image/* significa "cualquier archivo de imagen".
    • -
- -

El atributo accept toma como valor una cadena que contiene uno o más de estos especificadores de tipo de archivo únicos, separados por comas. Por ejemplo, un selector de archivos que necesita contenido que se puede presentar como una imagen, incluidos los formatos de imagen estándar y los archivos PDF, podría verse así:

- -
<input type="file" accept="image/*,.pdf">
- -

Usar inputs de archivo

- -

Un ejemplo básico

- -
<form method="post" enctype="multipart/form-data">
- <div>
-   <label for="file">Elige el archivo a cargar</label>
-   <input type="file" id="file" name="file" multiple>
- </div>
- <div>
-   <button>Enviar</button>
- </div>
-</form>
- - - -

Esto produce la siguiente salida:

- -

{{EmbedLiveSample('Un_ejemplo_básico', 650, 60)}}

- -
-

Nota: También puedes encontrar este ejemplo en GitHub; consulta código fuente y también puedes verlo funcionando en vivo.

-
- -

Independientemente del dispositivo o sistema operativo del usuario, el <input> de archivo proporciona un botón que abre un cuadro de diálogo selector de archivos que permite al usuario elegir un archivo.

- -

La inclusión del atributo multiple, como se muestra arriba, especifica que se pueden elegir varios archivos a la vez. El usuario puede elegir varios archivos del selector de archivos de cualquier manera que la plataforma elegida lo permita (por ejemplo, manteniendo presionada la tecla Mayús o Control y luego haciendo clic). Si solo deseas que el usuario elija un único archivo por <input>, omite el atributo multiple.

- -

Limitar los tipos de archivo aceptados

- -

A menudo, no querrás que el usuario pueda elegir cualquier tipo de archivo arbitrario; en su lugar, quieres que seleccionen archivos de un tipo o tipos específicos. Por ejemplo, si la entrada de tu archivo permite a los usuarios cargar una imagen de perfil, probablemente desees que seleccionen formatos de imagen compatibles con la web, como {{Glossary("JPEG")}} o {{Glossary("PNG")}}.

- -

Los tipos de archivo aceptables se pueden especificar con el atributo {{HTMLAttrxRef("accept", "input/file")}}, que toma una lista separada por comas de extensiones de archivo permitidas o tipos MIME. Algunos ejemplos:

- -
    -
  • accept="image/png" o accept=".png" — Acepta archivos PNG.
    • -
  • accept="image/png, image/jpeg" o accept=".png, .jpg, .jpeg" — Acepta archivos PNG o JPEG.
    • -
  • accept="image/*" — Acepta cualquier archivo con un tipo MIME de image/*. (Muchos dispositivos móviles también permiten que el usuario tome una foto con la cámara cuando se usa).
    • -
  • accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — Acepta cualquier cosa que huela a un documento de MS Word.
    • -
- -

Veamos un ejemplo más completo:

- -
<form method="post" enctype="multipart/form-data">
-  <div>
-    <label for="profile_pic">Elige el archivo para cargar</label>
-    <input type="file" id="profile_pic" name="profile_pic"
-          accept=".jpg, .jpeg, .png">
-  </div>
-  <div>
-    <button>Enviar</button>
-  </div>
-</form>
- - - -

{{EmbedLiveSample('Limitar_los_tipos_de_archivo_aceptados', 650, 60)}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - -
EspecificaciónEstado
{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'atributo accept')}}{{ Spec2('HTML WHATWG') }}
{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'Atributo accept')}}{{Spec2('HTML5.1')}}
- -

Compatibilidad del navegador

- - - -

{{Compat("html.elements.attribute.accept")}}

- -

Ve también

- -
    -
  • {{web.link("/es/docs/Using_files_from_web_applications", "Uso de archivos de aplicaciones web")}}
    • -
  • {{web.link("/es/docs/Web/API/File", "API de File")}}
    • -
diff --git a/files/es/web/html/atributos/autocomplete/index.html b/files/es/web/html/atributos/autocomplete/index.html deleted file mode 100644 index b8546e368d..0000000000 --- a/files/es/web/html/atributos/autocomplete/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: The HTML autocomplete attribute -slug: Web/HTML/Atributos/autocomplete -translation_of: Web/HTML/Attributes/autocomplete ---- -

El atributo autocomplete  está disponible en varios tipos de  {{HTMLElement("input")}} aquellos que toman un texto o valor numérico como entrada. autocomplete  permite a los desarrolladores web especificar qué permisos si los hay {{Glossary("user agent")}}  debe proporcionar asistencia automatizada para completar los valores de los campos de formulario, así como una guía para el navegador en cuanto al tipo de información que se espera en el campo.

- -

 

- -

Los valores sugeridos generalmente depende del navegador. Normalmente, provienen de valores ​​ingresados ​​por el usuario, pero también pueden provenir de valores preconfigurados. Por ejemplo, un navegador puede permitir que el usuario guarde su nombre, dirección, número de teléfono y direcciones de correo electrónico para autocompletar así como también datos de tarjetas de crédito.

- -

Si un elemento {{HTMLElement("input")}} no tiene el atributo autocomplete , entonces los navegadores usan el atributo autocomplete del {{HTMLElement("form")}} que lo contiene. En otras palabras, el {{HTMLElement("form")}} del que el {{HTMLElement("input")}} desciende. También puede ser especificado en el atributo {{htmlattrxref("form", "input")}} del {{HTMLElement("input")}} en cuestión.

- -

Para más información vea el atributo {{htmlattrxref("autocomplete", "form")}} del elemento {{HTMLElement("form")}}

- -
-

Para proveer el autocompletado, el navegador necesita del los elementos <input>:

- -
    -
  1. Que tengan name y/o id
    2. -
  2. Pertenezcan a un elemento <form>
    3. -
  3. Que el formulario tenga un botón {{HTMLElement("input/submit", "submit")}}
    4. -
-
- -

Valores

- -
-
"off"
-
The browser is not permitted to automatically enter or select a value for this field. It is possible that the document or application provides its own autocomplete feature, or that security concerns require that the field's value not be automatically entered. -
Note: In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See the autocomplete attribute and login fields.
-
-
"on"
-
The browser is allowed to automatically complete the input. No guidance is provided as to the type of data expected in the field, so the browser may use its own judgement.
-
"name"
-
The field expects the value to be a person's full name. Using "name" rather than breaking the name down into its components is generally preferred because it avoids dealing with the wide diversity of human names and how they are structured; however, you can use the following autocomplete values if you do need to break the name down into its components: -
-
"honorific-prefix"
-
The prefix or title, such as "Mrs.", "Mr.", "Miss", "Ms.", "Dr.", or "Mlle.".
-
"given-name"
-
The given (or "first") name.
-
"additional-name"
-
The middle name.
-
"family-name"
-
The family (or "last") name.
-
"honorific-suffix"
-
The suffix, such as "Jr.", "B.Sc.", "PhD.", "MBASW", or "IV".
-
"nickname"
-
A nickname or handle.
-
-
-
"email"
-
An email address.
-
"username"
-
A username or account name.
-
"new-password"
-
A new password. When creating a new account or changing passwords, this is the "Enter your new password" field, as opposed to any "Enter your current password" field that might be present. This may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password.
-
"current-password"
-
The user's current password.
-
"organization-title"
-
A job title, or the title a person has within an organization, such as "Senior Technical Writer", "President", or "Assistant Troop Leader".
-
"organization"
-
A company or organization name, such as "Acme Widget Company" or "Girl Scouts of America".
-
"street-address"
-
A street address. This can be multiple lines of text, and should fully identify the location of the address within its second administrative level (typically a city or town), but should not include the city name, ZIP or postal code, or country name.
-
"address-line1", "address-line2", "address-line3"
-
Each individual line of the street address. These should only be present if the "street-address" is also present.
-
"address-level4"
-
The finest-grained {{anch("Administrative levels in addresses", "administrative level")}}, in addresses which have four levels.
-
"address-level3"
-
The third {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least three administrative levels.
-
"address-level2"
-
The second {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least two of them. In countries with two administrative levels, this would typically be the city, town, village, or other locality in which the address is located.
-
"address-level1"
-
The first {{anch("Administrative levels in addresses", "administrative level")}} in the address. This is typically the province in which the address is located. In the United States, this would be the state. In Switzerland, the canton. In the United Kingdom, the post town.
-
"country"
-
A country code.
-
"country-name"
-
A country name.
-
"postal-code"
-
A postal code (in the United States, this is the ZIP code).
-
"cc-name"
-
The full name as printed on or associated with a payment instrument such as a credit card. Using a full name field is preferred, typically, over breaking the name into pieces.
-
"cc-given-name"
-
A given (first) name as given on a payment instrument like a credit card.
-
"cc-additional-name"
-
A middle name as given on a payment instrument or credit card.
-
"cc-family-name"
-
A family name, as given on a credit card.
-
"cc-number"
-
A credit card number or other number identifying a payment method, such as an account number.
-
"cc-exp"
-
A payment method expiration date, typically in the form "MM/YY" or "MM/YYYY".
-
"cc-exp-month"
-
The month in which the payment method expires.
-
"cc-exp-year"
-
The year in which the payment method expires.
-
"cc-csc"
-
The security code for the payment instrument; on credit cards, this is the 3-digit verification number on the back of the card.
-
"cc-type"
-
The type of payment instrument (such as "Visa" or "Master Card").
-
"transaction-currency"
-
The currency in which the transaction is to take place.
-
"transaction-amount"
-
The amount, given in the currency specified by "transaction-currency", of the transaction, for a payment form.
-
"language"
-
A preferred language, given as a valid BCP 47 language tag.
-
"bday"
-
A birth date, as a full date.
-
"bday-day"
-
The day of the month of a birth date.
-
"bday-month"
-
The month of the year of a birth date.
-
"bday-year"
-
The year of a birth date.
-
"sex"
-
A gender identity (such as "Female", "Fa'afafine", "Male"), as freeform text without newlines.
-
"tel"
-
A full telephone number, including the country code. If you need to break the phone number up into its components, you can use these values for those fields: -
-
"tel-country-code"
-
The country code, such as "1" for the United States, Canada, and other areas in North America and parts of the Caribbean.
-
"tel-national"
-
The entire phone number without the country code component, including a country-internal prefix. For the phone number "1-855-555-6502", this field's value would be "855-555-6502".
-
"tel-area-code"
-
The area code, with any country-internal prefix applied if appropriate.
-
"tel-local"
-
The phone number without the country or area code. This can be split further into two parts, for phone numbers which have an exchange number and then a number within the exchange. For the phone number "555-6502", use "tel-local-prefix" for "555" and "tel-local-suffix" for "6502".
-
-
-
"tel-extension"
-
A telephone extension code within the phone number, such as a room or suite number in a hotel or an office extension in a company.
-
"impp"
-
A URL for an instant messaging protocol endpoint, such as "xmpp:username@example.net".
-
"url"
-
A URL, such as a home page or company web site address as appropriate given the context of the other fields in the form.
-
"photo"
-
The URL of an image representing the person, company, or contact information given in the other fields in the form.
-
- -

See the WHATWG Standard for more detailed information.

- -
-

Note: The autocomplete attribute also controls whether Firefox will — unlike other browsers — persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input> across page loads. The persistence feature is enabled by default. Setting the value of the autocomplete attribute to off disables this feature. This works even when the autocomplete attribute would normally not apply to the <input> by virtue of its type. See {{bug(654072)}}.

-
- -

Administrative levels in addresses

- -

The four administrative level fields ("address-level1" through "address-level4") describe the address in terms of increasing levels of precision within the country in which the address is located. Each country has its own system of administrative levels, and may arrange the levels in different orders when addresses are written.

- -

"address-level1" always represents the broadest administrative division; it is the least-specific portion of the address short of the country name.

- -

Form layout flexibility

- -

Given that different countries write their address in different ways, with each field in different places within the address, and even different sets and numbers of fields entirely, it can be helpful if, when possible, your site is able to switch to the layout expected by your users when presenting an address entry form, given the country the address is located within.

- -

Variations

- -

The way each administrative level is used will vary from country to country. Below are some examples; this is not meant to be an exhaustive list.

- -

United States

- -

A typical home address within the United States looks like this:

- -

432 Anywhere St
- Exampleville CA 95555

- -

In the United States, the least-specific portion of the address is the state, in this case "CA" (the official US Postal Service shorthand for "California"). Thus "address-level1" is the state, or "CA" in this case.

- -

The second-least specific portion of the address is the city or town name, so "address-level2" is "Exampleville" in this example address.

- -

United States addresses do not use levels 3 and up.

- -

United Kingdom

- -

The UK uses one or two address levels, depending on the address. These are the post town and, in some instances, the locality.

- -

China

- -

China can use as many as three administrative levels: the province, the city, and the district.

diff --git a/files/es/web/html/atributos/index.html b/files/es/web/html/atributos/index.html deleted file mode 100644 index 03e7d8baee..0000000000 --- a/files/es/web/html/atributos/index.html +++ /dev/null @@ -1,677 +0,0 @@ ---- -title: Referencia de Atributos HTML -slug: Web/HTML/Atributos -tags: - - HTML - - Referencia - - Web - - atributo -translation_of: Web/HTML/Attributes ---- -

Los elementos en HTML tienen atributos; estos son valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas para cumplir los criterios de los usuarios.

- -

Lista de Atributos

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nombre del AtributoElementosDescripción
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Lista de tipos aceptados por el servidor, usualmente un tipo de archivo.
accept-charset{{ HTMLElement("form") }}Lista de juegos de caracteres soportados.
accesskeyAtributos GlobalesDefine una tecla que activa o agrega un foco al elemento.
action{{ HTMLElement("form") }}La URL del programa que procesa la información enviada en el formulario.
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}Especifica el alineamiento horizontal del elemento.
alt{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}Texto alternativo en caso de que la imagen no se pueda mostrar.
async{{ HTMLElement("script") }}Indica que el script debería ejecutarse asincrónicamente.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica si los controles en este formulario pueden tener por defecto sus valores completados automáticamente por el navegador.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}El elemento debería recibir foco automáticamente después de haberse cargado la página.
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}El audio o video debería empezar lo antes posible.
autosave{{ HTMLElement("input") }}Previous values should persist dropdowns of selectable values across page loads.
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} -

Color de fondo del elemento.

- -
-

Nota: Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("background-color") }} en su lugar.

-
-
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} -

El ancho del borde.

- -
-

Nota: Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("border") }} en su lugar.

-
-
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Contiene un rango de tiempo multimedia almacenado.
challenge{{ HTMLElement("keygen") }}Cadena de desafío que se envía junto con la clave pública.
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}Declara la codificación de caracteres de la página o del script.
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}Indica que el elemento debería estar marcado al cargar la página.
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}Contiene una URL que apunta a la fuente de la cita o cambio.
classAtributo GlobalUsualmente empleado con CSS para aplicar estilos a elementos con propiedades en comun.
code{{ HTMLElement("applet") }}Especifica la URL del archivo de tipo applet a ser cargado y ejecutado.
codebase{{ HTMLElement("applet") }}Este atributo contiene la URL absoluta o relativa del directorio donde los archivos de applets (.class) referenciados en el codigo se encuentran almacenados.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} -

Este atributo establece el color de texto utilizando un nombre de color o en formato hexadecimal #RRGGBB.

- -
-

Nota: Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("color") }} en su lugar.

-
-
cols{{ HTMLElement("textarea") }}Define el número de columnas en un área de texto.
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Define el número de columnas que una celda debe contener.
content{{ HTMLElement("meta") }}Un valor asociado con http-equiv o name dependiendo del contexto.
contenteditableAtributo GlobalIndica si el contenido del elemento es editable.
contextmenuAtributo GlobalDefine el ID del elemento {{ HTMLElement("menu") }} que servira como menú de contexto para otro elemento.
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica si el navegador debe mostrar controles de reproduccion al usuario.
coords{{ HTMLElement("area") }}Un conjunto de valores que especifican las coordenadas del area.
data{{ HTMLElement("object") }}Especifica la URL del recurso.
data-*Atributo GlobalPermite asociar atributos presonalizados a un elemento HTML.
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}Indica la fecha y hora asociadas con el elemento.
default{{ HTMLElement("track") }}Indica que la pista debe estar habilitada a menos que las preferencias del usuario indiquen algo diferente.
defer{{ HTMLElement("script") }}Indica que el código debe ser ejecutado despues de que la página este cargada.
dirAtributo GlobalDefine la dirección del texto. Los valores permitidos son ltr (Izquierda-a-Derecha) o rtl (Derecha-a-Izquierda).
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica la dirección del texto asociada con el elemento al momento de enviar el formulario.
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica si el usuario puede interactuar con el elemento.
download{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Indica que el hipervínculo es utilizado para descargar un recurso.
draggableAtributo GlobalDefine si el elemento puede ser arrastrado.
dropzoneAtributo GlobalIndica que el elemento acepta contenido soltado en el mismo.
enctype{{ HTMLElement("form") }}Define el tipo de contenido del formulario cuando el método del mismo es POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Describe elementos que pertenecen a éste.
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 formulario al que pertenece el elemento.
formaction{{ HTMLElement("input") }}, {{ HTMLElement("button") }}Indica la acción del elemento, anulando la acción definida en {{ HTMLElement("form") }}.
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}IDs de los elementos <th> que aplican a este elemento.
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} -

Especifica la altura de los elementos enumerados aquí. Para todos los demás elementos, usa la propiedad CSS {{cssxref("height")}} en su lugar.

- -
-

Nota: En algunos casos, como los {{ HTMLElement("div") }}, este es un atributo de referencia, en donde debes usar la propiedad CSS {{ Cssxref("height") }} en su lugar.

-
-
hiddenAtributo GlobalEvita la prestación del elemento dado, manteniendo los elementos secundarios, p.ej. los elementos de script
high{{ HTMLElement("meter") }}Indica el menor valor del rango alto.
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}La URL de un recurso asociado.
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Especifica el lenguaje del recurso asociado.
http-equiv{{ HTMLElement("meta") }}Indica una directiva que puede alterar el comportamiento de la pagina y como es leida por los exploradores.
icon{{ HTMLElement("command") }} -

Especifica una imagen relacionada con el comando.

- -
-

Note: El elemento {{ HTMLElement("command") }} es obsoleto y no se recomienda su uso.

-
-
idAtributo GlobalIdentificador el elemento para acceder al mismo desde CSS o Javascript, este indicador debe ser unico para cada elemento.
ismap{{ HTMLElement("img") }}Indica que la imagen es parte de un mapa de imagen del servidor.
itempropAtributo GlobalIndica que el elemento contiene el valor de la propiedad especificada de un conjunto.
keytype{{ HTMLElement("keygen") }} -

Especifica el tipo de clave generada.

- -
-

Nota: RSA es el valor por defecto.

-
-
kind{{ HTMLElement("track") }}Specifies the kind of text track.
label{{ HTMLElement("track") }}Especifica el título de la pista con un formato legible por el usuario.
langAtributo GlobalDefine el lenguaje utilizado en el elemento.
language{{ HTMLElement("script") }}Define el lenguage (de programación) utilizado en el elemento.
list{{ HTMLElement("input") }}Identifica una serie de valores predefinidos para ser sugeridos al usuario.
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}Indica si el medio debe volver a ser reproducido desde el principio al llegar al final.
low{{ HTMLElement("meter") }}Indica el valor mas alto del rango bajo.
manifest{{ HTMLElement("html") }}Especifica la URL del manifiesto de cache para el documento.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica el máximo valor aceptado.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Define el mayor número de caracteres aceptados.
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}Da un indicio del tipo de medio para el cual el recurso vinculado fue creado.
method{{ HTMLElement("form") }}Define el método HTTP a emplear para enviar el formulario. Puede ser GET (predeterminado) o POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica el valor mínimo aceptado.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica si múltiples valores pueden ser ingresados.
muted{{ HTMLElement("video") }}Indica si el audio será silenciado inicialmente al cargar la página.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}Nombre del elemento. Por ejemplo utilizado por el servidor para identificar los campos en el envio de formularios.
novalidate{{ HTMLElement("form") }}Este atributo indica que el formulario no debe ser validado cuando se envíe.
open{{ HTMLElement("details") }}Indica si los detalles de la página seran mostrados cuando cargue la misma.
optimum{{ HTMLElement("meter") }}Indica el valor numérico óptimo.
pattern{{ HTMLElement("input") }}Define una expresion regular con la cual el valor del elemento debe ser validado.
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Indica si se enviara un ping o notificacion a la URL del recurso cuando el usuario utlize el vinculo.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Proporciona una sugerencia al usuario de lo que puede ser introducido en el campo.
poster{{ HTMLElement("video") }}Una URL que indica un cuadro a mostrar hasta que el usuario reproduzca o navegue en el video.
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica si el recurso o partes del mismo deben ser precargadas.
pubdate{{ HTMLElement("time") }}Indica si esta fecha y tiempo concuerda con la fecha y tiempo del {{ HTMLElement("article") }} mas cercano (ancestro).
radiogroup{{ HTMLElement("command") }} -

Indica los nombres de los comandos de tipo radio, que seran alternados si el comando en si es alternado. Este atributo debe ser omitido si el tipo de comando no es radio.

- -
-

Note: El elemento {{ HTMLElement("command") }} es obsoleto y no se recomienda su uso.

-
-
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica si el elemento puede ser editado por el usuario.
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Especifica la relación entre el objeto destino y el objeto enlace.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica si se requiere rellenar o no este elemento.
reversed{{ HTMLElement("ol") }}Indica si la lista debe ser mostrada en orden descendente en vez de ascendente.
rows{{ HTMLElement("textarea") }}Define el número de filas en un área de texto.
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Define el número de filas que una celda de una tabla debe abarcar.
sandbox{{ HTMLElement("iframe") }}Lista de restricciones a ser desactivadas en el iframe.
scope{{ HTMLElement("th") }}Define las celdas que la cabecera definió en este elemento.
scoped{{ HTMLElement("style") }}Indica si el estilo será aplicado sólo al elemento inmediato superior (padre). de no ser definido, el estilo se aplicara de forma global.
seamless{{ HTMLElement("iframe") }}Indica si el iframe debe ser cargado como parte del mismo documento.
selected{{ HTMLElement("option") }}Define un valor que será seleccionado al cargar la página.
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Define una región seleccionable para hacer hipervínculos asociados con una forma asociada a una figura para crear un mapa. Los valores para este atributo son: circle, defaul, plygon y rect.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Define el ancho del elemento (en píxeles). Si el atributo del elemento es del tipo text o password entonces es el número de caracteres.
sizes{{ HTMLElement("link") }}, {{ HTMLElement("img") }}, {{ HTMLElement("source") }}Define los tamaños en los que el icono puede ser cargado.
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}Indica el número de columnas que se agrupan.
spellcheckAtributo GlobalIndica si se permite la corrección ortográfica para el elemento.
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}La URL del contenido integrable.
srcdoc{{ HTMLElement("iframe") }}Especifica el contenido de la página incluida.
srclang{{ HTMLElement("track") }}Especifica el lenguaje del contenido de la pista.
srcset{{ HTMLElement("img") }}
start{{ HTMLElement("ol") }}Define el número inicial de la lista (si es diferente a 1).
step{{ HTMLElement("input") }}Indica el valor del incremento para un valor numerico o de fecha.
styleAtributo GlobalDefine los estilos CSS que anulan los estilos establecidos previamente.
summary{{ HTMLElement("table") }} -

Contiene una descripción del contenido de la tabla.

- -

Nota: Este atributo ha sido desaprovado, se recomienda incluir un elemento {{ HTMLElement("caption") }} en la tabla.

-
tabindexAtributo GlobalSobrescribe el orden de tabulacion del navegador y usa el especificado.
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }} -

Especifica el marco destino en un vínculo.

- -

Valores especiales: "_blank" indica una nueva ventana, "_parent" indica el marco padre del marco que contiene el código fuente, "_self" indica el marco donde está el código fuente y "_top" indica la ventana completa del navegador.

-
titleAtributo GlobalTexto a ser mostrado cuando el cursor esté sobre el elemento.
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}Define el tipo de elemento.
usemap{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }} -

Indica la URL parcial de un image map asociado con el elemento.

- -
-

Note: Este atributo no puede ser usado si el elemento {{ HTMLElement("img") }} desciende de un {{ HTMLElement("button") }} o {{ HTMLElement("a") }}

-
-
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}Define el valor predeterminado a ser mostrado al cargar la página.
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} -

Para los elementos enumerados aquí, esto establece el ancho del elemento.

- -
-

Nota: En algunos casos, como los {{ HTMLElement("div") }}, este es un atributo de referencia, en donde debes usar la propiedad CSS {{ Cssxref("height") }} en su lugar.

-
-
wrap{{ HTMLElement("textarea") }}Indica la forma en la cual el texto debe ser envuelto.
- -

Contenido versus atributos IDL

- -

En HTML, la mayoria de los atributos tiene dos caras: el atributo de contenido y el atributo IDL

- -

El atributo de contenido es aquel que se define desde el contenido (Codigo HTML) y puedes definirlo u obtenerlo con {{domxref("element.setAttribute()")}} o {{domxref("element.getAttribute()")}}. El atributo de contenido es siempre un string incluso cuando el valor esperado en un integer. Por ejemplo, para definir el maxlength de un {{HTMLElement("input")}} a 42 usando el atributo de contenido, se debe llamar a setAttribute("maxlength", "42") en ese elemento.

- -

El atributo IDL, tambien conocido como propiedad JavaScript. Estos son atributos que se pueden leer o definir usando JavaScript como element.foo.. El atributo IDL siempre va a usar (pero puede transformarse) en el atributo de contenido subyacente para retornar un valor cuando lo obtiene y lo guarda en el atributo de contenido cuando es definido. En otras palabras el atributo IDL, en esencia, refleja los atributos de contenido.

- -

La mayoria del tiempo, los atributos IDL pueden retornar sus valores como realmente son usados. Por ejemplo, el type por defecto para los elementos {{HTMLElement("input")}} es "texto", entonces si defines input.type="foobar", el elemento <input> sera de tipo texto (en apariencia y comportamiento) pero el valor del Atributo de contenido "type" sera "foobat". De cualquier manera, el type del atributo IDL retornara el string "text".

- -

Los atributos IDL no son siempre strings; por ejemplo, input.maxlength es un numero (marcado como long). Cuando se usan atributos IDL, lees o defines valores del tipo deseado, entonces input.maxlength siempre retornara un numero y cuando definas input,maxlength, esperara un numero. Si se le entrega otro tipo, se convierte antomaticamente a numero como se especifica en las reglas del  estandar de JavaScript para conversiones de tipo.

- -

Los atributos IDL pueden reflejar otros tipos como un long sin asignacion, URL's, booleanos, etc. Desafortunadamente no hay reglas claras y el comportamiento que los atributos IDL en conjunto con sus respectivos atributos de contenido depende del mismo atributo. La mayoria del tiempo, siguen las reglas de diseño en la especificacion, pero algunas veces no lo hacen. Las especificaciones HTML tratan de ser lo mas amigables para el dasarrollador como es posible, pero por varias razones (mayormente historicas), algunos aributos se comportan de forma extraña (select.size, por ejemplo) y debes leer las especificaciones para comprender como éste se comporta exactamente.

- -

Ver Tambien

- - diff --git a/files/es/web/html/atributos/min/index.html b/files/es/web/html/atributos/min/index.html deleted file mode 100644 index 4060bd81f4..0000000000 --- a/files/es/web/html/atributos/min/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: 'HTML el atributo: min' -slug: Web/HTML/Atributos/min -tags: - - Atributos - - Restricción de validación - - atributo - - min -translation_of: Web/HTML/Attributes/min ---- -
-

El atributo {{HTMLAttrxRef("min", "input")}} define el valor mínimo que es aceptable y válido para el {{HTMLElement("input")}} que contiene el atributo. Si el {{web.link("/es/docs/Web/HTML/Element/input#attr-value", "value")}} del elemento es menor que esto, el elemento falla la {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}}. Este valor debe ser menor o igual que el valor del atributo {{HTMLAttrxRef("max", "input")}}. Si se especifica un valor para {{HTMLAttrxRef("min", "input")}} que no es un número válido, la entrada no tiene un valor mínimo.

- -

Válido para los tipos de entrada numérica, incluidos los tipos {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} y {{HTMLElement("input/range", "range")}}, y el elemento {{htmlelement('meter')}}, el atributo {{HTMLAttrxRef("min", "input")}} es un número que especifica el valor mínimo de un control de formulario para ser considerado válido.

- -

Sintaxis

- -
-

Si any no se establece explícitamente, los valores válidos para el número, los tipos de entrada de fecha/hora y los tipos de entrada de range son iguales a la base de paso a paso: el valor {{HTMLAttrxRef("min", "input")}} y los incrementos del valor del paso, hasta el valor {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}, si se especifica. Por ejemplo, si tienes <input type="number" min="10" step="2">, cualquier entero par, 10 o mayor, es válido. Si se omite, <input type="number">, cualquier número entero es válido, pero los flotantes, como 4.2, no son válidos, ya que el step predeterminado es 1. Para que 4.2 sea válido, step se debería haber configurado en any, 0.1, 0.2, o cualquiera, el valor mínimo tendría que ser un número terminado en 0.2 , como <input type="number" min="-5.2">

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Sintaxis para valores {{HTMLAttrxRef("min", "input")}} por <input type="" />
Tipo del inputEjemploEjemplo
{{HTMLElement("input/date", "date")}}yyyy-mm-dd<input type="date" min="2019-12-25" step="1">
{{HTMLElement("input/month", "month")}}yyyy-mm<input type="month" min="2019-12" step="12">
{{HTMLElement("input/week", "week")}}yyyy-W##<input type="week" min="2019-W23" step="">
{{HTMLElement("input/time", "time")}}hh:mm<input type="time" min="09:00" step="900">
{{HTMLElement("input/datetime-local", "datetime-local")}}yyyy-mm-ddThh:mm<input type="datetime-local" min="2019-12-25T19:30">
{{HTMLElement("input/number", "number")}}{{web.link("/es/docs/Web/CSS/number", "number")}}<input type="number" min="0" step="5" max="100">
{{HTMLElement("input/range", "range")}}{{web.link("/es/docs/Web/CSS/number", "number")}}<input type="range" min="60" step="5" max="100">
- -
-

Nota: Cuando los datos ingresados por el usuario no se adhieren al valor mínimo establecido, el valor se considera inválido en la restricción de validación y coincidirá con la pseudoclase :invalid

-
-
- -

Consulta {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "Validación del lado del cliente")}} y {{DOMxRef("ValidityState.rangeUnderflow", "rangeUnderflow")}} para más información.

- -

Para el elemento {{HTMLElement('meter')}}, el atributo {{HTMLAttrxRef("min", "input")}} define el límite numérico inferior del rango medido. Debe ser menor que el valor mínimo (atributo {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}), si se especifica. En ambos casos, si se omite, el valor predeterminado es 1.

- - - - - - - - - - - - - - - - - -
Sintaxis para valores {{HTMLAttrxRef("min", "input")}} para otros elementos
Tipo del inputSintaxisEjemplo
{{HTMLElement("meter")}}{{web.link("/es/docs/Web/CSS/number", "number")}}<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter>
- -

Impacto en step

- -

Los valores de {{HTMLAttrxRef("min", "input")}} y step definen cuáles son los valores válidos, incluso si el atributo step no está incluido, como el step predeterminado de 0.

- -

Agrega un gran borde rojo alrededor de los {{HTMLElement("input")}}s no válidos:

- -
input:invalid {
-  border: solid red 3px;
-}
- -

Luego define un {{HTMLElement("input")}} con un valor mínimo de 7.2, omitiendo el atributo step, en donde el valor predeterminado es 1.

- -
<input id="myNumber" name="myNumber" type="number" min="7.2" value="8">
- -

Dado que step tiene el valor predeterminado de 1, los valores válidos incluyen 7.2, 8.2, 9.2 y así sucesivamente. El valor 8 no es válido. Dado que incluye un valor no válido, los navegadores compatibles mostrarán el valor como no válido.

- -

{{EmbedLiveSample("Impacto_en_step",200,55)}}

- -

Si no se incluye explícitamente, step tiene como valor predeterminado 1 para número y range, y 1 tipo de unidad (segundo, semana, mes, día) para los {{HTMLElement("input")}}s de tipo fecha/hora.

-
- -

Compatibilidad del navegador

- - - -

{{Compat("html.elements.attributes.min")}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{ Spec2('HTML WHATWG') }}
{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{ Spec2('HTML5 W3C') }}
- -

Problemas de accesibilidad

- -

Proporciona instrucciones para ayudar a los usuarios a comprender cómo completar el formulario y utilizar controles de formulario individuales. Indica cualquier entrada requerida y opcional, formatos de datos y otra información relevante. Cuando utilices el atributo {{HTMLAttrxRef("min", "input")}}, asegúrate de que el usuario comprenda este requisito mínimo. Posiblemente sea suficiente proporcionar instrucciones dentro de un {{HTMLElement('label')}}. Si proporcionas instrucciones fuera de las etiquetas, lo cual permite un posicionamiento y un diseño más flexibles, considera usar {{web.link("/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute", "aria-labelledby")}} o {{web.link("/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-descriptionsby_attribute", "aria-describedby")}}.

- -

Ve también

- -
    -
  • {{web.link("/es/docs/Web/HTML/Attributes/step", "step")}}
    • -
  • {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}
    • -
  • {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricciones de validación")}}
    • -
  • {{DOMxRef('Constraint_validation')}}
    • -
  • {{DOMxRef('validityState.rangeUnderflow')}}
    • -
  • {{CSSxRef(':out-of-range')}}
    • -
  • {{HTMLElement('input')}}
    • -
  • Los tipos {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} y {{htmlelement('meter')}}
    • -
diff --git a/files/es/web/html/atributos/minlength/index.html b/files/es/web/html/atributos/minlength/index.html deleted file mode 100644 index 23056673e2..0000000000 --- a/files/es/web/html/atributos/minlength/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: 'HTML el atributo: minlength' -slug: Web/HTML/Atributos/minlength -tags: - - Entrada - - Input - - Referencia - - atributo - - minlength - - textarea -translation_of: Web/HTML/Attributes/minlength ---- -

El atributo minlength define el número mínimo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en un {{HTMLElement('input')}} o {{HTMLElement('textarea')}}. Debe ser un valor entero 0 o superior. Si no se especifica una longitud mínima o se especifica un número no válido, el <input> no tiene una longitud mínima. Este valor debe ser menor o igual que el valor de {{web.link("/es/docs/Web/HTML/Attributes/maxlength", "maxlength")}}; de lo contrario, el valor nunca será válido, puesto que es imposible cumplir con ambos criterios.

- -

El <input> fallará la restricción de validación si la longitud del valor de texto del campo es menor que la longitud mínima de unidades de código UTF-16, con {{DOMxRef('validityState.tooShort')}} devolviendo true. La validación de la restricción solo se aplica cuando el usuario cambia el valor. Una vez que el envío falla, algunos navegadores mostrarán un mensaje de error que indica la longitud mínima requerida y la longitud actual.

- -

Ejemplos

- -

Al agregar minlength="5", el valor debe estar vacío o tener cinco caracteres o más para ser válido.

- -
<label for="fruit">Ingresa un nombre de fruta que tenga al menos 5 letras</label> <input type="text" minlength="5" id="fruit">
- -

Podemos usar pseudoclases para estilizar el elemento en función de si el valor es válido. El valor será válido siempre que sea null (vacío) o tenga cinco o más caracteres. Lima no es válido, limón es válido.

- -
input {
-  border: 2px solid currentcolor;
-}
-input:invalid {
-  border: 2px dashed red;
-}
-input:invalid:focus {
-  background-image: linear-gradient(pink, lightgreen);
-}
- -

{{EmbedLiveSample('Ejemplos', '100%', 200)}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - -
EspecificaciónEstado
{{SpecName('HTML WHATWG', 'input.html#attr-input-minlength', 'atributo minlength')}}{{ Spec2('HTML WHATWG') }}
{{SpecName('HTML5.1', 'input.html#attr-minlength-accept', 'atributo minlength')}}{{Spec2('HTML5.1')}}
- -

Compatibilidad del navegador

- - - -

{{Compat("html.elements.attribute.minlength")}}

- -

Ve también

- -
    -
  • {{web.link("/es/docs/Web/HTML/Attributes/maxlength", "maxlength")}}
    • -
  • {{web.link("/es/docs/Web/HTML/Attributes/size", "size")}}
    • -
  • {{web.link("/es/docs/Web/HTML/Attributes/pattern", "pattern")}}
    • -
  • {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "Restricción de validación")}}
    • -
diff --git a/files/es/web/html/atributos/multiple/index.html b/files/es/web/html/atributos/multiple/index.html deleted file mode 100644 index cbf465b0b8..0000000000 --- a/files/es/web/html/atributos/multiple/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: 'HTML el atributo: multiple' -slug: Web/HTML/Atributos/multiple -tags: - - Atributos - - Resticción de validación - - atributo -translation_of: Web/HTML/Attributes/multiple ---- -

El atributo booleano {{HTMLAttrxRef("multiple", "input")}}, si se establece, significa que el control del formulario acepta uno o más valores. Válido para los {{HTMLElement("input")}}s de tipo {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/file", "file")}} y {{HTMLElement("select")}}, la forma en que el usuario opta por valores múltiples depende del control del formulario.

- -

Dependiendo del tipo, el control de formulario puede tener una apariencia diferente si se establece el atributo {{HTMLAttrxRef("multiple", "input")}}. Para el {{HTMLElement("input")}} de tipo file, la mensajería nativa que proporciona el navegador es diferente. En Firefox, el {{HTMLElement("input")}} de tipo file dice "Ningún archivo seleccionado" cuando el atributo está presente y "Ningún archivo seleccionado", cuando no hay archivo seleccionado. La mayoría de los navegadores muestran un cuadro de lista de desplazamiento para un control {{HTMLElement("select")}} con el atributo {{HTMLAttrxRef("multiple", "input")}} establecido frente a un menú desplegable de una sola línea cuando se omite el atributo. El {{HTMLElement("input")}} {{HTMLElement("input/email", "email")}} muestra lo mismo, pero coincidirá con la pseudoclase {{CSSxRef(':invalid')}} si hay más de una dirección de correo electrónico separada por comas incluido si el atributo no está presente.

- -

Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el tipo de entrada {{HTMLElement("input/email", "email")}}, el usuario puede incluir cero (si no es {{web.link("/es/docs/Web/HTML/Attributes/required", "required")}} también), una o más direcciones de correo electrónico separadas por comas.

- -
<input type="email" multiple name="emails" id="emails">
- -

Si y solo si se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, el valor puede ser una lista de direcciones de correo electrónico separadas por comas y formadas correctamente. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista.

- -

Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el tipo de entrada {{HTMLElement("input/file", "file")}}, el usuario puede seleccionar uno o más archivos. El usuario puede elegir varios archivos del selector de archivos de cualquier manera que la plataforma elegida lo permita (por ejemplo, manteniendo presionada la tecla Mayús o Control y luego haciendo clic).

- -
<input type="file" multiple name="uploads" id="uploads">
- -

Cuando se omite el atributo, el usuario solo puede seleccionar un único archivo por {{HTMLElement("input")}}.

- -

El atributo {{HTMLAttrxRef("multiple", "input")}} en el elemento {{HTMLElement("select")}} representa un control para seleccionar cero o más opciones de la lista. De lo contrario, el elemento {{HTMLElement("select")}} representa un control para seleccionar una única {{HTMLElement("option")}} de la lista de opciones.

- -
<select multiple name="drawfs" id="drawfs">
-  <option>Gruñón</option>
-  <option>Feliz</option>
-  <option>Dormilón</option>
-  <option>Tímido</option>
-  <option>Estornudo</option>
-  <option>Tontín</option>
-  <option>Doc</option>
-</select>
- -

Cuando se especifica {{HTMLAttrxRef("multiple", "input")}}, la mayoría de los navegadores mostrarán un cuadro de lista de desplazamiento en lugar de un menú desplegable de una sola línea.

- -

Ejemplos

- -

input para correoᵉ

- -
<label for="emails">¿A quién deseas enviar un correo electrónico?</label>
-<input type="email" multiple name="emails" id="emails" list="drawfemails" required size="64">
-
-<datalist id="drawfemails">
-  <option value="gruñón@woodworkers.com">Gruñón</option>
-  <option value="feliz@woodworkers.com">Feliz</option>
-  <option value="dormilón@woodworkers.com">Dormilón</option>
-  <option value="tímido@woodworkers.com">Tímido</option>
-  <option value="estornudo@woodworkers.com">Estornudo</option>
-  <option value="tontín@woodworkers.com">Tontín</option>
-  <option value="doc@woodworkers.com">Doc</option>
-</datalist>
- - - -

Si y solo si se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, el valor puede ser una lista de direcciones de correo electrónico separadas por comas y formadas correctamente. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista. Si el atributo {{web.link("/es/docs/Web/HTML/Attributes/required", "required")}} está presente, se requiere al menos una dirección de correo electrónico.

- -

Algunos navegadores admiten la aparición de la {{web.link("/es/docs/Web/HTML/Attributes/list", "lista")}} de opciones del {{HTMLElement('datalist')}} para direcciones de correo electrónico posteriores cuando haya varias. Otros no lo hacen.

- -

{{EmbedLiveSample("input_para_correoᵉ", 600, 80) }}

- -

input de tipo file

- -

Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el {{HTMLElement("input")}} de tipo {{HTMLElement("input/file", "file")}}, el usuario puede seleccionar uno o más archivos:

- -
<form method="post" enctype="multipart/form-data">
-  <p>
-    <label for="uploads">
-       Elige las imágenes que deseas cargar:
-    </label>
-    <input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple>
-  </p>
-  <p>
-    <label for="text">Elige un archivo de texto para cargar: </label>
-    <input type="file" id="text" name="text" accept=".txt">
- </p>
-  <p>
-    <input type="submit" value="Enviar">
-  </p>
-</form>
- -

{{EmbedLiveSample("input_de_tipo_file", 600, 80) }}

- -

Nota la diferencia en la apariencia entre el ejemplo con {{HTMLAttrxRef("multiple", "input")}} establecido y el otro {{HTMLElement("input")}} sin file.

- -

Cuando se envía el formulario, utilizas el {{web.link("/es/docs/Web/HTML/Element/form", "method='get'")}} el nombre de cada archivo seleccionado se habría agregado a los parámetros de la URL como ?uploads=img1.jpg&uploads=img2.svg. Sin embargo, dado que estamos asumiendo datos de formularios de {{web.link("/es/docs/Web/API/XMLHttpRequest/multipart", "multipart")}}, usamos mucho el post. Consulta el elemento {{HTMLElement('form')}} y {{web.link("/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_method_attribute", "envío de datos del formulario")}} para obtener más información.

- -

select

- -

El atributo {{HTMLAttrxRef("multiple", "input")}} en el elemento {{HTMLElement("select")}} representa un control para seleccionar cero o más opciones de la lista. De lo contrario, el elemento {{HTMLElement("select")}} representa un control para seleccionar una única {{HTMLElement("option")}} de la lista de opciones. El control generalmente tiene una apariencia diferente en función de la presencia del atributo {{HTMLAttrxRef("multiple", "input")}}, y la mayoría de los navegadores muestran un cuadro de lista de desplazamiento en lugar de una lista desplegable de una sola línea cuando el atributo está presente.

- -
<form method="get" action="#">
-<p>
- <label for="dwarfs">Selecciona los leñadores que te gusten:</label>
-  <select multiple name="drawfs" id="drawfs">
-    <option>gruñón@woodworkers.com</option>
-    <option>feliz@woodworkers.com</option>
-    <option>dormilón@woodworkers.com</option>
-    <option>tímido@woodworkers.com</option>
-    <option>estornudo@woodworkers.com</option>
-    <option>tontín@woodworkers.com</option>
-    <option>doc@woodworkers.com</option>
-  </select>
-</p>
-<p>
- <label for="favoriteOnly">Selecciona tu favorito:</label>
-  <select name="favoriteOnly" id="favoriteOnly">
-    <option>gruñón@woodworkers.com</option>
-    <option>feliz@woodworkers.com</option>
-    <option>dormilón@woodworkers.com</option>
-    <option>tímido@woodworkers.com</option>
-    <option>estornudo@woodworkers.com</option>
-    <option>tontín@woodworkers.com</option>
-    <option>doc@woodworkers.com</option>
-  </select>
-</p>
-<p>
-  <input type="submit" value="Enviar">
-</p>
-</form>
- -

{{EmbedLiveSample("select", 600, 120) }}

- -

Ten en cuenta la diferencia de apariencia entre los dos controles de formulario.

- -
/* descomenta este CSS para que el multiple tenga la misma altura que single */
-
-/*
-select[multiple] {
-  height: 1.5em;
-  vertical-align: top;
-}
-select[multiple]:focus,
-select[multiple]:active {
-  height: auto;
-}
-*/
- -

Hay varias formas de seleccionar varias opciones en un elemento <select> con un atributo {{HTMLAttrxRef("multiple", "input")}}. Dependiendo del sistema operativo, los usuarios del ratón pueden mantener presionadas las teclas Ctrl, Comando o Mayús y luego hacer clic en varias opciones para seleccionarlas o deseleccionarlas. Los usuarios de teclado pueden seleccionar varios elementos contiguos centrándose en el elemento <select>, seleccionando un elemento en la parte superior o inferior del rango que desean seleccionar usando Arriba y Teclas del cursor hacia abajo para subir y bajar las opciones. La selección de elementos no contiguos no es tan compatible: los elementos se deben poder seleccionar y deseleccionar presionando Espacio, pero el soporte varía entre los navegadores.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'input.html#attr-input-multiple', 'Atributo multiple')}}{{ Spec2('HTML WHATWG') }}
{{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'Atributo multiple')}}{{ Spec2('HTML5 W3C') }}
- -

Problemas de accesibilidad

- -

Proporciona instrucciones para ayudar a los usuarios a comprender cómo completar el formulario y utilizar controles de formulario individuales. Indica cualquier entrada requerida y opcional, formatos de datos y otra información relevante. Cuando utilices el atributo {{HTMLAttrxRef("multiple", "input")}}, informa al usuario que se permiten múltiples valores y proporciona instrucciones sobre cómo proveer más valores, como "direcciones de correo electrónico separadas con una coma".

- -

Configurar {{web.link("/es/docs/Web/HTML/Attributes/size", "size")}}="1" en una selección múltiple puedes hacer que aparezca como una única selección en algunos navegadores, pero luego no se expande en el enfoque, lo que perjudica la usabilidad. No hagas eso. Si cambias la apariencia de un select, e incluso si no lo haces, asegúrate de informar al usuario que se puede seleccionar más de una opción mediante otro método.

- -

Ve también

- -
    -
  • {{HTMLElement('input')}}
    • -
  • {{htmlelement('select')}}
    • -
  • {{web.link("/es/docs/Web/HTML/Element/input/email#Allowing_multiple_e-mail_addresses", "Permitir varias direcciones de correo electrónico")}}
    • -
diff --git a/files/es/web/html/atributos_de_configuracion_cors/index.html b/files/es/web/html/atributos_de_configuracion_cors/index.html deleted file mode 100644 index f7453daa96..0000000000 --- a/files/es/web/html/atributos_de_configuracion_cors/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Atributos de configuración CORS -slug: Web/HTML/Atributos_de_configuracion_CORS -translation_of: Web/HTML/Attributes/crossorigin ---- -

En HTML5, algunos elementos HTML que dan soporte para CORS, tales como {{ HTMLElement("img") }} o {{ HTMLElement("video") }}, tienen un atributo crossorigin  (propiedad crossOrigin), que les permite configurar las peticiones CORS de los datos que se cargan. Estos atributos están enumerados, y tienen los siguientes valores posibles:

- - - - - - - - - - - - - - - - -
Palabra claveDescripción
anonymousCORS, las solicitudes de este elemento no tendrán establecido el indicador de credenciales.
use-credentialsCORS, las solicitudes de este elemento tendrán marcado el indicador de credenciales; esto significa que la solicitud proporcionará credenciales.
- -

Por defecto, es decir cuando el atributo no es específicado, CORS no se usa. La palabra clave "anonymous" indica que no habrá intercambio de credenciales de usuario a través de las cookies, ni por parte del cliente con certificados SSL o autenticación HTTP como se describe en la sección de terminología de la especificación CORS.

- -

Una clave inválida y un string vacío serán gestionados como  una clave anónima.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilidad de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13{{ CompatGeckoDesktop("8.0") }}11{{ CompatNo() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoDesktop("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoMobile("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Ver también

- - diff --git a/files/es/web/html/atributos_globales/accesskey/index.html b/files/es/web/html/atributos_globales/accesskey/index.html deleted file mode 100644 index cb8bbcc16c..0000000000 --- a/files/es/web/html/atributos_globales/accesskey/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: accesskey -slug: Web/HTML/Atributos_Globales/accesskey -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/accesskey ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El atributo global accesskey provee un indicio para generar un atajo de teclado para el elemento actual . Este atributo consiste en una lista de caracteres separada por espacios (un único punto de código Unicode). El explorador usa el primero que existe en la distribución del teclado de la computadora .

- -

La operación para activar el accesskey depende del explorador y su plataforma .

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 WindowsLinuxMac
FirefoxAlt + Shift + teclaEn Firefox 14 o posteriores, Control + Alt + tecla
- En Firefox 13 o anteriores, Control + tecla
Internet ExplorerAlt + teclaN/A
Google ChromeAlt + teclaControl + Alt + tecla
SafariAlt + teclaN/AControl + Alt + tecla
OperaShift + Esc abre una lista de contenidos , los cuales son accesibles a través de accesskey , después se puede elegir un item presionando  tecla
- -

Notar que Firefox puede  personalizar la tecla de modificación requerida por  las preferencias del usuario .

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el útlimo snapshot  {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.1')}}Snapshot  de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5 W3C')}}Snapshot de  {{SpecName('HTML WHATWG')}}. De {{SpecName('HTML4.01')}},  varios caracteres pueden se pueden establecer como el accesskey . Tambien puede establecerse sobre cualquier elemento.
{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}{{Spec2('HTML4.01')}}Solo soportado en {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} y {{ HTMLElement("textarea") }}
- -

Compatibilidad con exploradores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísiticaChromeFirefox (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/web/html/atributos_globales/autocapitalize/index.html b/files/es/web/html/atributos_globales/autocapitalize/index.html deleted file mode 100644 index d1f8fc446c..0000000000 --- a/files/es/web/html/atributos_globales/autocapitalize/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: autocapitalización -slug: Web/HTML/Atributos_Globales/autocapitalize -tags: - - Atributos globales - - HTML - - Reference - - Referencia - - autocapitalización -translation_of: Web/HTML/Global_attributes/autocapitalize ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El {{web.link("/es/docs/Web/HTML/Global_attributes", "atributo global")}} {{HTMLAttrxRef("autocapitalize", "input")}} es un atributo enumerado que controla si la entrada de texto se escribe en mayúsculas automáticamente a medida que el usuario la introduce/edita. El atributo debe tomar uno de los siguientes valores:

- -
    -
  • off o none, no se aplica capitalización automática (todas las letras están predeterminadas en minúsculas)
    • -
  • on o sentences, la primera letra de cada oración de manera predeterminada tiene una letra mayúscula; todas las demás letras están predeterminadas en minúsculas
    • -
  • words, la primera letra de cada palabra de manera predeterminada tiene una letra mayúscula; todas las demás letras están predeterminadas en minúsculas
    • -
  • characters, todas las letras de manera predeterminada deben estar en mayúsculas
    • -
- -

El atributo {{HTMLAttrDef("autocapitalize")}} no afecta el comportamiento al escribir en un teclado físico. En cambio, afecta el comportamiento de otros mecanismos de entrada, como teclados virtuales en dispositivos móviles y entrada de voz. El comportamiento de tales mecanismos es que a menudo ayudan a los usuarios escribiendo en mayúscula automáticamente la primera letra de las oraciones. El atributo {{HTMLAttrDef("autocapitalize")}} permite a los autores redefinir ese comportamiento por elemento.

- -

El atributo {{HTMLAttrDef("autocapitalize")}} nunca hace que se habilite la autocapitalización para un elemento {{HTMLElement("input")}} con un atributo {{HTMLAttrxRef("type", "input")}} cuyo valor es {{HTMLAttrDef("url")}}, {{HTMLAttrDef("email")}} o {{HTMLAttrDef("password")}}.

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}{{ Spec2('HTML WHATWG') }}
- -

Compatibilidad del navegador

- - - -

{{Compat("html.global_attributes.autocapitalize")}}

diff --git a/files/es/web/html/atributos_globales/class/index.html b/files/es/web/html/atributos_globales/class/index.html deleted file mode 100644 index ba82c66e65..0000000000 --- a/files/es/web/html/atributos_globales/class/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: class -slug: Web/HTML/Atributos_Globales/class -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/class ---- -

{{HTMLSidebar("Global_attributes")}}
- El atributo global class es una lista de las clases del elemento separada por espacios . Las clases permiten a CSS y Javascript seleccionar y acceder a elementos específicos a través de los selectores de clase o funciones como el método {{domxref("document.getElementsByClassName")}} del DOM.

- -

Aunque la especificación no define los requerimientos para el nombre de las clases , se alienta a los desarrolladores web a usar nombres que describan el propósito semántico del elemento, en lugar de la presentación del elemento (e.g., atributo para describir un atributo en lugar de itálica, aunque un elemento de esta clase puesde ser presentado por itálica). Los nombres semanticos permanecen lógicos incluso si la presentación de la página cambia .

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComment
{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "elements.html#classes", "class")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName('HTML WHATWG')}}. Desde {{SpecName('HTML4.01')}}, class es ahora un verdadero atributo global .
{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}{{Spec2('HTML4.01')}}Soportado en todos los elementos pero {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, y {{HTMLElement("title")}}.
- -

Compatibilidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísitcaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

[1] class es un atributo global verdadero solo desde Firefox 32.

- -

Ver también

- - diff --git a/files/es/web/html/atributos_globales/contenteditable/index.html b/files/es/web/html/atributos_globales/contenteditable/index.html deleted file mode 100644 index 9db8119af2..0000000000 --- a/files/es/web/html/atributos_globales/contenteditable/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: contenteditable -slug: Web/HTML/Atributos_Globales/contenteditable -tags: - - Atributos globales - - HTM - - Referencia -translation_of: Web/HTML/Global_attributes/contenteditable ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El atributo global  contenteditable es un atributo enumerado que indica si el elemento debe de ser editable por el usuario . Si es así, el explorador modifca su widget para permitir la edición . El atributo debe de tener alguno de los siguientes valores :

- -
    -
  • true o una string vacia , que indica que el elemento debe de ser editable .
    • -
  • false , que indica que el elemento no debe ser editable.
    • -
- -

Si este atributo no se establece , el valor de default es heredado  de su elemento padre .

- -

Este es un atributo enumerado y no uno booleano . Esto significa que el uso explicito de uno de los valores true , false o la cadena vacía es obligatorio y que una código como <label contenteditable>Example Label</label> no esta permitido . El uso correcto es <label contenteditable="true">Example Label</label>.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML5.1')}}Snapshot de  {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial.
- -

Compatiblidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísiticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.9") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Ver también

- -
    -
  •  atributos globales
    • -
  • {{domxref("HTMLElement.contentEditable")}} and {{domxref("HTMLElement.isContentEditable")}}
    • -
diff --git a/files/es/web/html/atributos_globales/contextmenu/index.html b/files/es/web/html/atributos_globales/contextmenu/index.html deleted file mode 100644 index 9cc32f7ace..0000000000 --- a/files/es/web/html/atributos_globales/contextmenu/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: contextmenu -slug: Web/HTML/Atributos_Globales/contextmenu -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/contextmenu ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El atributo global  contextmenu es el  id de un  {{HTMLElement("menu")}} para nosotros como el menu contextual para este elemento .

- -

Un menu contextual  es un menu que aparece sobre la interacción del usuario , como por ejemplo un click derecho . HTML5 ahora permite modificar este menú . Aquí hay unos ejemplos de implementación , incluyendo menús anidados .

- -
-

Ejemplo

- -

 

- -
<body contextmenu="share">
-  <menu type="context" id="share">
-    <menu label="share">
-      <menuitem label="Twitter" onclick="window.open('https://twitter.com/intent/tweet?text=Hurra! Estos aprendiendo sobre ContextMenuI en MDN a través de Mozilla ');"></menuitem>
-      <menuitem label="Facebook" onclick="window.open('https://facebook.com/sharer/sharer.php?u=https://https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus');"></menuitem>
-    </menu>
-  </menu>
-  <ol>
-    <li>En cualquier parte del ejemplo puedes compartir la página en twitter y Facebook usando el menú de compartir de tu menú contextual.</li>
-    <li><pre contextmenu="changeFont" id="fontSizing">En este elemento específico de la lista , puedes cambiar el tamaño del texto usando  las acciones "Incremenrar/Decrementar" de tu menú contextual ./pre></li>
-    <menu type="context" id="changeFont">
-      <menuitem label="Increase Font" onclick="incFont()"></menuitem>
-      <menuitem label="Decrease Font" onclick="decFont()"></menuitem>
-    </menu>
-    <li contextmenu="ChangeImage" id="changeImage">En la imagen de abajo , puedes accionar la accion "Cambio de Imagen " en tu menú contextual .</li><br />
-    <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" />
-    <menu type="context" id="ChangeImage">
-      <menuitem label="Change Image" onclick="changeImage()"></menuitem>
-    </menu>
-  </ol>
-</body>
-
- -

en conjunto con este Javascript

- -
function incFont(){
-  document.getElementById("fontSizing").style.fontSize="larger";
-}
-function decFont(){
-  document.getElementById("fontSizing").style.fontSize="smaller";
-}
-function changeImage(){
-  var j = Math.ceil((Math.random()*39)+1);
-  document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
-}
- -

resulta en :

- -
{{EmbedLiveSample("ContextMenu_Example",550,200)}}
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "forms.html#attr-contextmenu", "contextmenu")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial.
- -

Compatibilidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatNo }}{{ CompatGeckoDesktop(9) }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatNo }}{{ CompatNo }}{{ CompatGeckoDesktop(20) }}{{ CompatNo }}{{ CompatNo }}
-
- -

Ver también

- - diff --git a/files/es/web/html/atributos_globales/data-_star_/index.html b/files/es/web/html/atributos_globales/data-_star_/index.html deleted file mode 100644 index 436b156299..0000000000 --- a/files/es/web/html/atributos_globales/data-_star_/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: data-* -slug: Web/HTML/Atributos_Globales/data-* -translation_of: Web/HTML/Global_attributes/data-* ---- -

{{HTMLSidebar("Global_attributes")}}

- -

Los atributos globales data-* forman una clase de atributos , llamados atributos de datos modificables , permite a la información propietaria ser intercambiada entre el HTML y su representación en el DOM que puede ser usada por scripts . Todos esos datos modificables están disponibles a través de la interface del elemento {{domxref("HTMLElement")}} , el atributo se establece encendido . La propiedad  {{domxref("HTMLElement.dataset")}} otorga acceso a ellos . 

- -

El * puede ser remplazado por cualquier nombre siguiedo las reglas de producción de nombres xml con las siguientes restricciones :

- -
    -
  • el nombre no debe de empezar con xml , cualquiera sea el caso usado para estas letras.
    • -
  • el nombre no debe de contener algún punto y coma (U+003A) .
    • -
  • el nombre no debe de contener letras mayúsculas de la A a la Z .
    • -
- -

Notar que la propiedad {{domxref("HTMLElement.dataset")}} es un {{domxref("StringMap")}} y que el nombre del atributo de datos modificabledata-test-value será accesible a través de HTMLElement.dataset.testValue como cualquier guión  (U+002D) es reemplazado por la versión en mayúscula de la siguiente letra (camelcase) . 

- - - -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML5 W3C')}}Snapshot de   {{SpecName('HTML WHATWG')}}, definición inicial.
- -

Compatibilidad en exploradores 

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop(6) }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísiticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoMobile(6) }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

- -

Ver también 

- -
    -
  • atributos globales .
    • -
  • La propiedad  {{domxref("HTMLElement.dataset")}} que permite el acceso y modifica estos valores .
    • -
diff --git a/files/es/web/html/atributos_globales/dir/index.html b/files/es/web/html/atributos_globales/dir/index.html deleted file mode 100644 index 4bcd43eb40..0000000000 --- a/files/es/web/html/atributos_globales/dir/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: dir -slug: Web/HTML/Atributos_Globales/dir -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/dir ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El atributo global dir es un atributo enumerado que indica la direccionalidad del texto de los elementos . Puede tener los siguientes valores : 

- -
    -
  • ltr , significa izquierda a derecha y es usado para los lenguajes que son escritos de izquierda a derecha ( como el Inglés ) .
    • -
  • rtl , significa derecha a izquierda y es usado para los lenguajes que son escritos de la derecha a la izquierda (como el árabe ) .
    • -
  • auto , permite al agente usuario decidir . Usa un algoritmo básico mientras parsea los caracteres dentro de un elemento hasta que encuentra un elemento con una direccionalidad fuerte , después aplica esa direccionalidad a todo el elemento .
    • -
- -
-

Notas de uso

- -

Este atributo es obligatorio para el elemento  {{ HTMLElement("bdo") }} donde este tiene un significado semántico diferente.

- -
    -
  • Este atributo no es heredado por el elemento {{ HTMLElement("bdi") }} . Si no se establece , su valor es auto .
    • -
  • Este atributo puede ser anulado por las propiedades de CSS  {{ cssxref("direction") }} y {{ cssxref("unicode-bidi") }} , si una página CSS está activa y el elemento soporta estas propiedades.
    • -
  • Mientras la direccionalidad del texto esté semánticamente relacionada con su contenido y no con su presentación , se recomienda que los desarrolladores web usen este atributo en lugar de propiedades de CSS relacionadas ,  cuando sea posible . De esta forma , el texto se mostrará correctamente incluso en un explorador que no soporte CSS o que tenga CSS desactivado .
    • -
  • El valor auto debe de ser usada para datos con una direccionalidad desconocida , com datos procedentes de la entrada de usuario , eventualmente almacenados en una base de datos .
    • -
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5.1')}}Snapshot de  {{SpecName('HTML WHATWG')}}, sin cambio desde  {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName('HTML WHATWG')}}, desde  {{SpecName('HTML4.01')}} añadió el valor auto y ahora es un verdadero atributo global .
{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}{{Spec2('HTML4.01')}}Soportado en todos los elementos pero no en {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, y {{HTMLElement("script")}}.
- -

Compatibilidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísiticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

See also

- - diff --git a/files/es/web/html/atributos_globales/draggable/index.html b/files/es/web/html/atributos_globales/draggable/index.html deleted file mode 100644 index 2aee2d8443..0000000000 --- a/files/es/web/html/atributos_globales/draggable/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: draggable -slug: Web/HTML/Atributos_Globales/draggable -tags: - - Atributos globales - - Experimental - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/draggable ---- -

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

- -

El atributo global draggable es un atributo enumerado que indica si el elemento puede ser arrastrado , usando el {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}} . Puede tener los siguientes valores :

- -
    -
  • true , indica que el elemento puede ser arrastrado.
    • -
  • false, indica que el elemento no puede ser arrastrado .
    • -
- -

Si este atriuto no se establece , su valor por default es auto , significando que el comportamiento debe de ser el definido por default en el explorador .

- -

Este es un atributo enumerado  y no uno booleano . Esto signigica que el uso explícito de uno de los valores true o false es obligatorio y que una declaración como <label draggable>Example Label</label> no está permitida . El uso correcto es  <label draggable="true">Example Label</label>.

- -

Por default , unicamente el texto , las imagenes y los vínculos pueden ser arrastrados . Para todos los demás elementos el evento {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}  debe de ser establecido para el mecanismo de arrastrar y soltar para que funcione , como se muestra en este ejemplo .

- -

 

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-draggable-attribute", "draggable")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial .
- -

Compatibilidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísiticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

 

- -

Ver también

- - diff --git a/files/es/web/html/atributos_globales/dropzone/index.html b/files/es/web/html/atributos_globales/dropzone/index.html deleted file mode 100644 index 27abb8f133..0000000000 --- a/files/es/web/html/atributos_globales/dropzone/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: dropzone -slug: Web/HTML/Atributos_Globales/dropzone -tags: - - Atributos globales - - Experimental - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/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/web/html/atributos_globales/hidden/index.html b/files/es/web/html/atributos_globales/hidden/index.html deleted file mode 100644 index bc29d88b5a..0000000000 --- a/files/es/web/html/atributos_globales/hidden/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: hidden -slug: Web/HTML/Atributos_Globales/hidden -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/hidden ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El atributo global hidden es un atributo Booleano que indica que el elemento todavía no está , o ya no es relevante . Por ejemplo , puede ser usado para ocultar elelementos de la página que no pueden ser usados hasta que el proceso de login se haya completado . El explorador no dibujará dichos elementos .

- -

Esta atributo no debe de usarse para ocultar contenido que pudera ser legítimamente mostrado . Por ejemplo , no debe de ser usado para ocultar paneles de pestañas o una interfaz con pestañas , ya que esta es una decisión de estilo y otro estilo mostrandolos lo llevaría a una página perfectamente mostrada .

- -

Los elementos ocultos no deben de ser vinculados desde elementos no ocultos y elementos que son descendientes de un elemento oculto todavía activo ;  lo que significa que los elementos del script pueden todavía ejecutarse y los elementos de formulario pueden todavía enviarse .

- -
-

Nota:  Cambiando el valor de la propiedad CSS {{cssxref("display")}} de un elemento con el atributo hidden  sobrecarga el comportamiento . For ejemplo , un elemeneto diseñado display : flex será mostrado en la pantalla independientemente de que el atributo hidden esté presente .

-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}{{Spec2('HTML WHATWG')}} -

Define el dibujado por default sugerido del atributo hidden usando CSS

-
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial
- -

Compatibilidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2") }}11{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("2") }}11{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Ver también 

- - diff --git a/files/es/web/html/atributos_globales/id/index.html b/files/es/web/html/atributos_globales/id/index.html deleted file mode 100644 index 3dd947cf27..0000000000 --- a/files/es/web/html/atributos_globales/id/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: id -slug: Web/HTML/Atributos_Globales/id -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/id ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El atributo global id define un identificador único (ID) el cual no debe repetirse en todo el documento. Su propósito es identificar el elemento al vincularlo (usando un identificador de fragmento), en scripts u hojas de estilo (con CSS).

- -

El valor de este atributo es una cadena de caracteres opaca: es decir,  el autor del sitio no debe usarlo para proporcionar información. De forma particular, en sentido semántico por ejemplo, no debe ser derivado de la misma cadena.

- -

El valor de este atributo no debe contener espacios en blanco. Los navegadores tratan los IDs que contienen espacios en blanco como si los espacios fueran parte del ID. En contraste con el atributo class, el cual permite valores separados por espacios, los elementos pueden tener sólo un ID definido mediante el atributo ID. Tenga en cuenta que un elemento puede tener muchos ID, pero los demás deben ser definidos de otra forma, como por medio de un script interactuando con el DOM.

- -
-

Nota: El uso de caracteres a excepción de letras en ASCII, dígitos, '_', '-' y '.' pueden ocasionar problemas de compatibilidad, por no ser permitidos en HTML 4. A pesar de que esta limitación ha sido removida en HTML 5, un ID debe iniciar con una letra para asegurar la compatibilidad.

-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML WHATWG')}}Sin cambios desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, sin cambios de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName('HTML WHATWG')}}, ahora acepta '_', '-' and '.' si no se encuentra al principio del id. También es un atributo global verdadero.
{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}{{Spec2('HTML4.01')}}Soportado en todos los elementos a excepción de {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, y {{HTMLElement("title")}}.
- -

Compatibilidad en navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
AtributoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}[1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
AtributoAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}[1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

[1] class es un atributo global verdadero desde Firefox 32.

- -

Ver también

- -
    -
  • Todos los atributos globales.
    • -
  • {{domxref("Element.id")}} que se asemeja a este atributo.
    • -
diff --git a/files/es/web/html/atributos_globales/index.html b/files/es/web/html/atributos_globales/index.html deleted file mode 100644 index 86769245c6..0000000000 --- a/files/es/web/html/atributos_globales/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: Atributos globales -slug: Web/HTML/Atributos_Globales -tags: - - Atributos globales - - HTML - - Referencia - - Web -translation_of: Web/HTML/Global_attributes ---- -
{{HTMLSidebar("Atributos_globales")}}
- -

Los atributos globales son atributos comunes a todos los elementos HTML; se pueden usar en todos los elementos, aunque es posible que no tengan ningún efecto en algunos elementos.

- -

Los atributos globales se pueden especificar en todos los {{web.link("/es/docs/Web/HTML/Element", "elementos HTML")}}, incluso aquellos no especificados en el estándar. Eso significa que cualquier elemento no estándar debe permitir estos atributos, aunque el uso de esos elementos significa que el documento ya no es compatible con HTML5. Por ejemplo, los navegadores compatibles con HTML5 ocultan el contenido marcado como <foo hidden>...</foo>, aunque <foo> no sea un elemento HTML válido.

- -

Además de los atributos globales HTML básicos, también existen los siguientes atributos globales:

- -
    -
  • {{HTMLAttrDef("xml:lang")}} y {{HTMLAttrDef("xml:base")}} — estos se heredan de las especificaciones XHTML y están en desuso, pero se mantienen por motivos de compatibilidad.
    • -
  • Los múltiples atributos {{web.link("/es/docs/Web/Accessibility/ARIA", "aria-*")}}, utilizados para mejorar la accesibilidad.
    • -
  • Los atributos de {{web.link("/es/docs/Web/Guide/Events/Event_handlers", "control de eventos")}}: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.
    • -
- -

Lista de atributos globales

- -
-
{{web.link("/es/docs/Web/HTML/Global_attributes/accesskey", "accesskey")}}
-
Proporciona una pista para generar un atajo de teclado para el elemento actual. Este atributo consta de una lista de caracteres separados por espacios. El navegador debe utilizar el primero que exista en la distribución del teclado del ordenador.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/autocapitalize", "autocapitalize")}}
-
Controla si la entrada de texto se pone en mayúsculas automáticamente a medida que el usuario la introduce o edita. Puede tener los siguientes valores: -
    -
  • off o none, no se aplica capitalización automática (todas las letras están predeterminadas en minúsculas)
    • -
  • on o sentences, la primera letra de cada oración de manera predeterminada tiene una letra mayúscula; todas las demás letras están predeterminadas en minúsculas
    • -
  • words, la primera letra de cada palabra de manera predeterminada tiene una letra mayúscula; todas las demás letras están predeterminadas en minúsculas
    • -
  • characters, todas las letras de manera predeterminada deben estar en mayúsculas
    • -
-
-
{{web.link("/es/docs/Web/HTML/Global_attributes/class", "class")}}
-
Una lista separada por espacios de las clases del elemento. Las clases permiten que CSS y JavaScript seleccionen y accedan a elementos específicos a través de los {{web.link("/es/docs/Web/CSS/Class_selectors", "selectores de clase")}} o funciones como el método {{DOMxRef("document.getElementsByClassName()")}}.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/contenteditable", "contenteditable")}}
-
Un atributo enumerado que indica si el usuario debe poder editar el elemento. Si es así, el navegador modifica su «widget» para permitir la edición. El atributo debe tomar uno de los siguientes valores: -
    -
  • true o la cadena vacía, la cual indica que el elemento debe ser editable;
    • -
  • false, el cual indica que el elemento no debe ser editable.
    • -
-
-
{{web.link("/es/docs/Web/HTML/Global_attributes/contextmenu", "contextmenu")}} {{Obsolete_Inline}}
-
El {{anch("attr-id", "id")}} de un {{HTMLElement ("menu")}} para usar como el menú contextual para este elemento.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/data-*", "data-*")}}
-
Forma una clase de atributos, denominados atributos de datos personalizados, que permiten el intercambio de información de propiedad entre el {{web.link("/es/docs/Web/HTML", "HTML")}} y su representación {{Glossary("DOM")}} que pueden utilizar los scripts. Todos estos datos personalizados están disponibles a través de la interfaz {{DOMxRef("HTMLElement")}} del elemento en el que está configurado el atributo. La propiedad {{DOMxRef("HTMLElement.dataset")}} les da acceso.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/dir", "dir")}}
-
Un atributo enumerado que indica la direccionalidad del texto del elemento. Puede tener los siguientes valores: -
    -
  • ltr, que significa de izquierda a derecha y s debe usar para idiomas que se escriben de izquierda a derecha (tal como el Español);
    • -
  • rtl, que significa de derecha a izquierda y se utiliza para idiomas que se escriben de derecha a izquierda (tal como el Árabe);
    • -
  • auto, permite que el agente de usuario decida. Utiliza un algoritmo básico ya que analiza los caracteres dentro del elemento hasta que encuentra un carácter con una direccionalidad fuerte, luego aplica esa direccionalidad a todo el elemento.
    • -
-
-
{{web.link("/es/docs/Web/HTML/Global_attributes/draggable", "draggable")}}
-
Un atributo enumerado que indica si el elemento se puede arrastrar mediante la {{web.link("/es/docs/DragDrop/Drag_and_Drop", "API de arrastrar y soltar")}}. Puede tener los siguientes valores: -
    -
  • true, indica que el elemento se puede arrastrar
    • -
  • false, indica que el elemento no se puede arrastrar.
    • -
-
-
{{web.link("/es/docs/Web/HTML/Global_attributes/dropzone", "dropzone")}} {{deprecated_inline}}
-
Un atributo enumerado que indica qué tipos de contenido se pueden colocar en un elemento, utilizando la {{web.link("/es/docs/DragDrop/Drag_and_Drop", "API de arrastrar y soltar")}}. Puede tener los siguientes valores: -
    -
  • copy, indica que soltar creará una copia del elemento que se arrastró
    • -
  • move, indica que el elemento que se arrastró se moverá a esta nueva ubicación.
    • -
  • link, creará un enlace a los datos arrastrados.
    • -
-
-
{{web.link("/es/docs/Web/HTML/Global_attributes/exportparts", "exportparts")}} {{Experimental_Inline}}
-
Se utiliza para exportar de forma transitiva partes de sombras de un árbol de sombras anidado a un árbol contenedor de luz.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/hidden", "hidden")}}
-
Un atributo booleano indica que el elemento aún no es o ya no es relevante. Por ejemplo, se puede utilizar para ocultar elementos de la página que no se pueden utilizar hasta que se haya completado el proceso de inicio de sesión. El navegador no representará tales elementos. Este atributo no se debe utilizar para ocultar contenido que se podría mostrar legítimamente.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/id", "id")}}
-
Define un identificador (ID) único que debe ser único en todo el documento. Su propósito es identificar el elemento al vincularlo (usando un identificador de fragmento), al escribir un script o al aplicarle estilo (con CSS).
-
{{web.link("/es/docs/Web/HTML/Global_attributes/inputmode", "inputmode")}}
-
Proporciona una pista a los navegadores sobre el tipo de configuración de teclado virtual que se debe utilizar al editar este elemento o su contenido. Se usa principalmente en elementos {{HTMLElement("input")}}, pero se puede usar en cualquier elemento mientras esté en modo {{HTMLAttrxRef("contenteditable")}}.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/is", "is")}}
-
Te permite especificar que un elemento HTML estándar se debe comportar como un elemento integrado personalizado registrado (consulta {{web.link("/es/docs/Web/Web_Components/Using_custom_elements", "Uso de elementos personalizados")}} para obtener más detalles).
-
- -
-

Nota: Los atributos item* son parte de Función de microdatos HTML de WHATWG.

-
- -
-
{{web.link("/es/docs/Web/HTML/Global_attributes/itemid", "itemid")}}
-
El identificador único y global de un artículo.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/itemprop", "itemprop")}}
-
Se usa para agregar propiedades a un elemento. Se puede especificar a cada elemento HTML un atributo itemprop, donde un itemprop consiste en un par de nombre y valor.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/itemref", "itemref")}}
-
Las propiedades que no son descendientes de un elemento con el atributo itemscope se pueden asociar con el elemento usando un itemref. Proporciona una lista de IDs de elementos (no itemids) con propiedades adicionales en otras partes del documento.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/itemscope", "itemscope")}}
-
itemscope (normalmente) funciona junto con {{HTMLAttrxRef("itemtype")}} para especificar que el HTML contenido en un bloque es sobre un elemento en particular. itemscope crea el «Item» y define el alcance del itemtype asociado con él. itemtype es una URL válida de un vocabulario (tal como schema.org) que describe el elemento y las propiedades de su contexto.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/itemtype", "itemtype")}}
-
Especifica la URL del vocabulario que se utilizará para definir itemprops (propiedades del elemento) en la estructura de datos. {{HTMLAttrxRef("itemscope")}} se utiliza para establecer el alcance de la estructura de datos en la que estará activo el vocabulario establecido por itemtype.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/lang", "lang")}}
-
Ayuda a definir el idioma de un elemento: el idioma en el que se encuentran los elementos no editables o el idioma en el que el usuario debe escribir los elementos editables. El atributo contiene una “etiqueta de idioma” (compuesta de “subetiquetas de idioma” separadas por guiones) en el formato definido en Etiquetas para identificar idiomas (BCP47). {{anch("attr-xml:lang", "xml:lang")}} tiene prioridad sobre él.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/part", "part")}}
-
Una lista separada por espacios de los nombres de las partes del elemento. Los nombres de las partes permiten que CSS seleccione y aplique estilo a elementos específicos en la sombra de un árbol mediante el pseudoelemento {{CSSxRef("::part")}}.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/slot", "slot")}}
-
Asigna un espacio en la sombra de un árbol {{web.link("/es/docs/Web/Web_Components/Shadow_DOM", "DOM de sombra")}} a un elemento: Un elemento con un atributo slot es asignado al espacio creado por el elemento {{HTMLElement("slot")}} cuyo valor del atributo {{HTMLAttrxRef("name", "slot")}} coincide con el valor del atributo slot.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/spellcheck", "spellcheck")}}
-
Un atributo enumerado define si se puede verificar el elemento para detectar errores ortográficos. Puede tener los siguientes valores: -
    -
  • true, el cual indica que, si es posible, el elemento se debe revisar para detectar errores ortográficos;
    • -
  • false, indica que el elemento no se debe revisar para detectar errores ortográficos.
    • -
-
-
{{web.link("/es/docs/Web/HTML/Global_attributes/style", "style")}}
-
Contiene declaraciones de estilo {{web.link("/en-US/docs/Web/CSS", "CSS")}} que se aplicarán al elemento. Ten en cuenta que se recomienda que los estilos se definan en un archivo o archivos separados. Este atributo y el elemento {{HTMLElement("style")}} principalmente tienen el propósito de permitir un estilo rápido, por ejemplo, con fines de prueba.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/tabindex", "tabindex")}}
-
Un atributo entero que indica si el elemento puede tomar el foco de entrada (es enfocable), si debe participar en la navegación secuencial del teclado y, de ser así, en qué posición. Puede tomar varios valores: -
    -
  • un valor negativo significa que el elemento se debe poder enfocar, pero no debe ser accesible mediante la navegación secuencial del teclado;
    • -
  • 0 significa que el elemento se debe poder enfocar y ser accesible a través de la navegación secuencial del teclado, pero su orden relativo está definido por la convención de la plataforma;
    • -
  • un valor positivo significa que el elemento se debe poder enfocar y ser accesible mediante la navegación secuencial del teclado; el orden en el que se enfocan los elementos es el valor creciente del {{anch("attr-tabindex", "tabindex")}}. Si varios elementos comparten el mismo tabindex, su orden relativo sigue sus posiciones relativas en el documento.
    • -
-
-
{{web.link("/es/docs/Web/HTML/Global_attributes/title", "title")}}
-
Contiene un texto que representa información de advertencia relacionada con el elemento al que pertenece. Normalmente, pero no necesariamente, dicha información se puede presentar al usuario como información sobre herramientas.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/translate", "translate")}} {{Experimental_Inline}}
-
Un atributo enumerado que se utiliza para especificar si los valores de atributo de un elemento y los valores de sus hijos de nodo {{DOMxRef("Text")}} se deben traducir cuando la página está localizada, o si se deben dejar sin cambios. Puede tener los siguientes valores: -
    -
  • la cadena vacía y yes, indican que el elemento se traducirá.
    • -
  • no, lo cual indica que el elemento no se traducirá.
    • -
-
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Atributos globales")}}{{Spec2("HTML WHATWG")}}
{{SpecName("CSS Shadow Parts", "#exposing")}}{{Spec2("CSS Shadow Parts")}}Se agregaron los atributos globales part y exportparts.
{{SpecName("HTML5.2", "dom.html#global-attributes", "Atributos globales")}}{{Spec2("HTML5.2")}}Instantánea de {{SpecName("HTML WHATWG")}}. De {{SpecName("HTML5.1")}}, se han añadido itemid, itemprop, itemref, itemscope y itemtype.
{{SpecName("HTML5.1", "dom.html#global-attributes", "Atributos globales")}}{{Spec2("HTML5.1")}}Instantánea de {{SpecName("HTML WHATWG")}}. De {{SpecName("HTML5 W3C")}}, ha sido añadido contextmenu, draggable, dropzone y spellcheck.
{{SpecName("HTML5 W3C", "dom.html#global-attributes", "Atributos globales")}}{{Spec2("HTML5 W3C")}}Instantánea de {{SpecName("HTML WHATWG")}}. De {{SpecName("HTML4.01")}}, se introduce el concepto de atributos globales y dir, lang, style, id, class, tabindex, accesskey, y title ahora son verdaderos atributos globales.
- xml:lang que inicialmente formaba parte de XHTML, ahora también forma parte de HTML.
- Se han agregado hidden, data-*, contenteditable y translate.
{{SpecName("HTML4.01")}}{{Spec2("HTML4.01")}}No hay atributos globales definidos. Varios atributos que se convertirán en atributos globales en especificaciones posteriores se definen en un subconjunto de elementos.
- class y style son compatibles con todos los elementos excepto {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} y {{HTMLElement("title")}}.
- dir es compatible con todos los elementos excepto {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} y {{HTMLElement("script")}}.
- id es compatible con todos los elementos excepto {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} y {{HTMLElement("title")}}.
- lang es compatible con todos los elementos excepto {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} y {{HTMLElement("script")}}.
- tabindex solo es compatible con {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
- accesskey solo es compatible con {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} t {{HTMLElement("textarea")}}.
- title es compatibles con todos los elementos excepto {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} y {{HTMLElement("title")}}.
- -

Compatibilidad del navegador

- - - -

{{Compat("html.global_attributes")}}

- -

Ve también

- -
    -
  • Las interfaces {{DOMxRef("Element")}} y {{DOMxRef("GlobalEventHandlers")}} que permiten consultar la mayoría de los atributos globales.
    • -
diff --git a/files/es/web/html/atributos_globales/is/index.html b/files/es/web/html/atributos_globales/is/index.html deleted file mode 100644 index aa57cab27d..0000000000 --- a/files/es/web/html/atributos_globales/is/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: is -slug: Web/HTML/Atributos_Globales/is -tags: - - Atributos globales - - HTML - - Referencia - - is -translation_of: Web/HTML/Global_attributes/is ---- -
{{HTMLSidebar("Global_attributes")}}
- -

La construcción is global attribute permite especificar que un elemento HTML estándar se debería comportar como un elemento personalizado provisto originalmente por el lenguaje (para más detalles, vea Utilizando elementos personalizados).

- -

Este atributo puede ser utilizado sólo si nombre del elemento personalizado especificado ha sido definido extósamente en el documento actual, y extiende el tipo de elemento al que está siendo aplicado.

- -

Ejemplos

- -

El siguiente código fue tomado de nuestro ejemplo word-count-web-component (véalo también en vivo).

- -
// Crea una clase para el elemento
-class WordCount extends HTMLParagraphElement {
-  constructor() {
-    // Siempre llamar a super al comienzo del constructor
-    super();
-
-    // Contenido del constructor omitido para mayor brevedad
-    ...
-
-  }
-}
-
-// Define el nuevo elemento
-customElements.define('word-count', WordCount, { extends: 'p' });
- -
<p is="word-count"></p>
- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilidad de navegadores

- - - -

{{Compat("html.global_attributes.is")}}

- -

Vea también

- - - -

 

diff --git a/files/es/web/html/atributos_globales/itemid/index.html b/files/es/web/html/atributos_globales/itemid/index.html deleted file mode 100644 index 72ce64456e..0000000000 --- a/files/es/web/html/atributos_globales/itemid/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: itemid -slug: Web/HTML/Atributos_Globales/itemid -translation_of: Web/HTML/Global_attributes/itemid ---- -

Resumen

- -

El atributo Itemid es un identificador global y único de un item.

- -

Los atributos Itemid attributes sólo se pueden especificar en elmentos que tiene atributos tanto de itemscope como itemtype. Además, el itemid sólo puede ser especficiado en elemento con un atributo itemscope cuyo correspondiente itemtype hace referencia o define un vocabulario que soporte identificadores globales.

- -

Un vocabulario de itemtype nos proporcionará el significado exacto de un identificador global definido dentro del vocabulario. El vocabulario definirá si varios item con el mismo identificador global puede co-existir y, si están permitidos, cómo item con el mismo identificador son gestionados.

- -

Nota: La definición de  itemid hecha por Whatwg.org dice que debe ser una URL. No parece que sea el caso de el ejemplo que se muestra más abajo. Sin embargo la definición de facto es que un itemid es un identificador único, así que los apropiado es URB. Esta inconsistencia refleja sin dudarlo la naturaleza incompleta de la espeficicación Microdata.

- -

Ejemplo

- -

HTML

- -
<dl itemscope
-    itemtype="http://vocab.example.net/book"
-    itemid="urn:isbn:0-330-34032-8">
-<dt>Título <dd itemprop="titulo">The Reality Dysfunction
-<dt>Autor <dd itemprop="autor">Peter F. Hamilton
-<dt>Fecha de publicación
-<dd><time itemprop="fechapublicacion" datetime="26-01-1996">26 Enero 1996</time> </dl>
- -

Datos estructurados

- - - - - - - - - - - - - - - - - - - - - - - - -
itemscopeitemtype: itemid -
http://vocab.example.net/book: urn:isbn:0-330-34032-8
-
itemproptituloThe Reality Dysfunction
itempropautor -
Peter F. Hamilton
-
itempropfechapublicacion26-01-1996
- -

Resultado

- -

{{ EmbedLiveSample('HTML', '', '', '', 'Web/HTML/Global_attributes/itemid') }}

- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstad
itemidNota WG - No está siendo ya activamente desarrollado.
diff --git a/files/es/web/html/atributos_globales/itemprop/index.html b/files/es/web/html/atributos_globales/itemprop/index.html deleted file mode 100644 index 232af938aa..0000000000 --- a/files/es/web/html/atributos_globales/itemprop/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: itemprop -slug: Web/HTML/Atributos_Globales/itemprop -tags: - - atributo - - metatag -translation_of: Web/HTML/Global_attributes/itemprop ---- -

Podemos dar más información al motor de búsqueda acerca de imágenes o datos adentro de cualquier tipo de etiquetas , como las propiedades : actores , clasificación ,genero . Para etiquetar las propiedades de un elemento , usa el atributo itemprop . Por ejemplo , para identificar al actor de una película añadir itemprop="director" al elemento que encierra el nombre del director.

- -

Aquí hay un ejemplo .

- -
<div itemscope itemtype="http://schema.org/Movie">
-  <h1 itemprop="name">Avatar</h1>
-  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
-  <span itemprop="genre">Ciencia ficcion</span>
-  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
-</div>
- -

 

- -

             Para más información acerca de los atributos relacionados consultar  https://schema.org/docs/gs.html

diff --git a/files/es/web/html/atributos_globales/itemref/index.html b/files/es/web/html/atributos_globales/itemref/index.html deleted file mode 100644 index 9dac55140b..0000000000 --- a/files/es/web/html/atributos_globales/itemref/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: itemref -slug: Web/HTML/Atributos_Globales/itemref -translation_of: Web/HTML/Global_attributes/itemref ---- -

Resumen

- -

Las propiedades que no son descendientes de un elemento con el atributo itemscope pueden ser asociadas con el elemento usando un itemref . Itemref provee una lista de ids de los elementos (no itemids) con propiedades adicionales en otras partes dentro del documento .

- -

El atributo itemref puede ser solo especificado en elementos que tienen un atributo itemscope especificado .

- -

Nota: el atributo itemref no es parte del modelo de micro datos . Es solamente un constructor sintáctico que ayuda a los autores en el ingreso de anotaciones a las páginas donde los datos que se van a anotar no siguen una estructura de arbol conveniente . Por ejemplo , permite a los autores marcar los datos en una tabla para que cada columna defina un item separado mientras se mantienen las propiedades en las celdas .

- -
-

Ejemplo

- -

HTML

- -
-
<div itemscope id="amanda" itemref="a b"></div>
-<p id="a">Name: <span itemprop="name">Amanda</span> </p>
-<div id="b" itemprop="band" itemscope itemref="c"></div>
-<div id="c">
-    <p>Band: <span itemprop="name">Jazz Band</span> </p>
-    <p>Size: <span itemprop="size">12</span> players</p>
-</div>
-
-
- -
-

Datos estructurados 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
id'sitemscopeitemref (nombre de itemprop )(valor de itemprop)
id=amandaitemscopeitemref=a,b   
id=a  itempropnameAmanda
id=bitemscopeitemref=c band 
id=c  itempropBandJazz Band
  itempropSize12
- -

Resultado

- -

{{ EmbedLiveSample('Example', '', '', '', 'Web/HTML/Global_attributes/itemref') }}

- -

EspecificaciónEditEdit

- - - - - - - - - - - - - - -
EspecificaciónEstatus
itemrefNota WG  - No se encuentra activamente en desarrollo
-
-
diff --git a/files/es/web/html/atributos_globales/itemscope/index.html b/files/es/web/html/atributos_globales/itemscope/index.html deleted file mode 100644 index b57fc1c6bc..0000000000 --- a/files/es/web/html/atributos_globales/itemscope/index.html +++ /dev/null @@ -1,284 +0,0 @@ ---- -title: itemscope -slug: Web/HTML/Atributos_Globales/itemscope -tags: - - Ejemplo - - itemscope - - itemtype -translation_of: Web/HTML/Global_attributes/itemscope ---- -
{{HTMLSidebar("Global_attributes")}}
- -

itemscope es un atributo global booleano que define el scope asociado del metadata. Especificando el atributo itemscope en un elemento crea un nuevo item, cuyos resultados estan en los numeros de pares name-value asociados con el elemento. Un atributo relativo, {{htmlattrxref("itemtype")}}, es usado para especificar el URL valido de un medio/recipe (como lo es schema.org) que describe que el item es de propiedad contextual. En cada uno de los siguientes ejemplos, el medio/recipe es de schema.org.

- -

Todos los elementos HTML pueden tener un atributo itemscope especifico. Un elemento itemscope no tiene un asociado itemtype pero tiene un sociado itemref.

- -
-

Nota: Encuentra mas acerca del atributo itemtype en http://schema.org/Thing

-
- -

Ejemplo simple

- -

HTML

- -

El siguiente ejemplo especifica que el atributo itemscope. El ejemplo especificado en el itemtype es "http://schema.org/Movie", y especifica tres atributos itemprop relativos.

- -
<div itemscope itemtype="http://schema.org/Movie">
-  <h1 itemprop="nombre">Avatar</h1>
-  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
-  <span itemprop="genero">Ciencia ficcion</span>
-  <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a>
-</div>
-
- -

 

- -

Esctructura de informacion

- -

La siguiente tabla muestran los datos esctructurados mostrados en el anterior ejemplo.

- -

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
itemscopeItemtypeMovie
itemprop(itemprop name)(itemprop value)
itempropdirectorJames Cameron
itempropgeneroCiencia Ficcion
itempropnombreAvatar
itemprophttps://youtu.be/0AY1XIkX7bYTrailer
- -

itemscope Atributos ID

- -

Cuando especificas el atributo itemscope para un elemento, un nuevo item es creado. El item consiste de un grupo de pares de name-value. Para elementos con un atributo itemscope y un atributo itemtype, podrias tambien especificar un {{htmlattrxref("id")}} attribute. Puedes usar el atributo id para establecer un identificador global para el nuevo item. Un identificador global permite que los items relativos a otros items encuentren paginas atraves de la Web.

- -

Ejemplo

- -

Hay 4 atributos itemscope en el siguiente ejemplo. Cada atributo itemscope establecen el scope correspondiente a sus atributos itemtype. El itemtypes, Recipe, AggregateRating, y NutritionInformation en el siguiente ejemplo son parte de la informacion estructura por medio de schema.org, se especifico el primer itemtype, http://schema.org/Recipe.

- -
<div itemscope itemtype="http://schema.org/Recipe">
-<h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
-<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/>
-<p>By <span itemprop="author" itemscope itemtype="http://schema.org/Person">
-<span itemprop="name">Carol Smith</p></span>
-</span>
-<p>Published: <time datetime="2009-11-05" itemprop="datePublished">
-November 5, 2009</p></time>
-<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span>
- <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
- <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span>
-Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time>
- Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time>
- Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time>
- Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span>
- <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
- Serving size: <span itemprop="servingSize">1 medium slice<br></span>
- Calories per serving: <span itemprop="calories">250 cal<br></span>
- Fat per serving: <span itemprop="fatContent">12 g<br></span>
-</span>
-<p>Ingredients:<br>
-  <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span>
-  <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span>
- ... </p>
-
-Directions: <br>
-  <div itemprop="recipeInstructions">
-    1. Cut and peel apples<br>
-    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br>
-    ...
-  </div>
-</div>
- -

Resultados

- -

HTML

- -

Los siguientes son un ejemplo renderizado resultado del codigo del anterior ejemplo.

- -

{{EmbedLiveSample('Example', '500', '550', '', 'Web/HTML/Global_attributes/itemscope')}}

- -

Structured data

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
itemscopeitemtypeMedio/Recipe
itempropnameGrandma's Holiday Apple Pie
itempropimagehttps://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
itempropdatePublished2009-11-05
itempropdescriptionThis is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
itempropprepTimePT30M
itempropcookTimePT1H
itemproptotalTimePT1H30M
itemproprecipeYield1 9" pie (8 servings)
itemproprecipeIngredientThinly-sliced apples: 6 cups
itemproprecipeIngredientWhite sugar: 3/4 cup
itemproprecipeInstructions1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
itempropauthor [Person]
itempropnameCarol Smith
itemscopeitemprop[itemtype]aggregateRating [AggregateRating]
itempropratingValue4.0
itempropreviewCount35
itemscopeitemprop[itemtype]nutrition [NutritionInformation]
itempropservingSize1 medium slice
itempropcalories250 cal
itempropfatContent12 g
- -
-

Note: Una herramienta practica para extraer estructuras microdata del HTML es Structured Data Testing Tool de Google. Pruebalo en el HTML del ejemplo anterior.

-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificacionesEstadosComentario
{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}{{Spec2('HTML WHATWG')}} 
- - - - - -

{{Compat("html.global_attributes.itemscope")}}

- -

Ver tambien

- -
    -
  • Otros atributos globales diferentes
    • -
  • Otro, microdata relativo, atributos globales: -
      -
    • {{htmlattrxref("itemid")}}
      • -
    • {{htmlattrxref("itemprop")}}
      • -
    • {{htmlattrxref("itemref")}}
      • -
    • {{htmlattrxref("itemscope")}}
      • -
    • {{htmlattrxref("itemtype")}}
      • -
    -
    • -
diff --git a/files/es/web/html/atributos_globales/lang/index.html b/files/es/web/html/atributos_globales/lang/index.html deleted file mode 100644 index dcea33a66f..0000000000 --- a/files/es/web/html/atributos_globales/lang/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: lang -slug: Web/HTML/Atributos_Globales/lang -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/lang ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El atributo global lang participa en la definición del lenguaje del elemento , el lenguaje en que están escritos los elementos no editables o el lenguaje en el cual los elementos editables deberían de estar escritos . La etiqueta contiene un valor sencillo de entrada en el formato que define el documento tags para identificar lenguajes  (BCP47) de la IETF . Si el contenido de la etiqueta es la cadena vacía , el lenguaje se establece como desconocido , si el contenido de la etiqueta no es válido respecto al documento BCP47 , se establece como inválido . 

- -

Incluso si el atributo lang está establecido , puede que no se tome en cuenta , ya que el atributo xml:lang tiene prioridad . Leer el algoritmo para determinar el lenguaje  de el contenido de un elemento para ver como es determinado el lenguaje en todos los casos.

- -

Para la pseudo clase { cssxref(":lang") }} de CSS,  dos nombres invalidos de lenguaje son diferentes si sus nombres son diferentes .

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName('HTML WHATWG')}}, comportandose con xml:lang  y el algoritmo de determinación del lenguaje . También es un verdadero atributo global .
{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}{{Spec2('HTML4.01')}}Soportado en todos los elementos menos en {HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, y  {{HTMLElement("script")}}.
- -

Compatibilidad en exploradores 

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísiticaAndroidChrome 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/web/html/atributos_globales/slot/index.html b/files/es/web/html/atributos_globales/slot/index.html deleted file mode 100644 index ed2b8688db..0000000000 --- a/files/es/web/html/atributos_globales/slot/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: slot -slug: Web/HTML/Atributos_Globales/slot -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/slot ---- -
{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}
- -

El atributo global slot asigna un espacio en un shadow DOM árbol shadow a un elemento: Un elemento con un atributo slot es asignado al espacio creado por el elemento {{HTMLElement("slot")}} cuyo valor de atributo {{htmlattrxref("name", "slot")}} coincide con el valor de ese atributo slot.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}{{Spec2('DOM WHATWG')}} 
- -

Compatibilidad de navegadores

- - - -

{{Compat("html.global_attributes.slot")}}

- -

Vea también

- - diff --git a/files/es/web/html/atributos_globales/spellcheck/index.html b/files/es/web/html/atributos_globales/spellcheck/index.html deleted file mode 100644 index c6ced2de46..0000000000 --- a/files/es/web/html/atributos_globales/spellcheck/index.html +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: spellcheck -slug: Web/HTML/Atributos_Globales/spellcheck -tags: - - Atributos globales - - Experimental - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/spellcheck ---- -

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

- -

El atributo global spellcheck es un atributo enumerado que define si el elemento debe de ser verificado por errores de deletreado. Puede tener los siguientes valores :

- -
    -
  • true , que indica que elemento debe de ser checado para errores de deletreado si es posible .
    • -
  • false , que indica que el elemento no debe de ser checado para errores de deletreado .
    • -
- -

Si este atributo no está establecido , su valor por default es de tipo elemento y definido por el explorador . El valor por default puede der heredado  ,  lo que significa que el contenido del elemento será checado para errores de deletreado solo si el ancestro más cercano tiene un estado de spellcheck  con valor true .

- -

Puedes consultar este artículo para ver un ejemplo comprensivo del uso de este atributo. 
-  

- -

Este es un atributo enumerado y no unoBooleano . Esto significa que el uso explícito de uno de los valores true o false es obligatorio y que una escritura como <label spellcheck>Example Label</label> no está permitida . El uso correcto es <label spellcheck="true">Example Label</label>.

- -

Este atributo es meramente un indicio para el explorador : los exploradores no son obligados a tener disponibilidad para verificar los errores de deletreado , incluso si el atributo spellcheck es establecido como true y el explorador soporta verificación de deletreado .

- -

El valor por default de este atributo es dependiente del explorador y del elemento :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Explorador{{ HTMLElement("html") }}{{ HTMLElement("textarea") }}{{ HTMLElement("input") }}othersComment
FirefoxfalsefalsefalseinheritedWhen layout.spellcheckDefault is 0
falsetrueinheritedinheritedWhen layout.spellcheckDefault is 1 (default value)
falsetruetrueinheritedWhen layout.spellcheckDefault is 2
SeamonkeyfalsefalsefalseinheritedWhen layout.spellcheckDefault is 0
falsetrueinheritedinheritedWhen layout.spellcheckDefault is 1 (default value)
falsetruetrueinheritedWhen layout.spellcheckDefault is 2
CaminofalsefalsefalseinheritedWhen layout.spellcheckDefault is 0
falsetrueinheritedinheritedWhen layout.spellcheckDefault is 1
falsetruetrueinheritedWhen layout.spellcheckDefault is 2 (default value)
Chromefalsetrue?inherited
Internet Explorerfalsetrue?inherited
Operafalsetrue?inherited
Safarifalsetrue?inherited
- -

Espeficicaciones

- - - - - - - - - - - - - - - - - - - -
EspeficifaciónEstatusComentario
{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, declaración inicial
- -

Compatibilidad con exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísiticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatNo() }}{{ CompatUnknown}}{{ CompatGeckoMobile("1.8.1") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

 

- -

Ver también

- - diff --git a/files/es/web/html/atributos_globales/style/index.html b/files/es/web/html/atributos_globales/style/index.html deleted file mode 100644 index 1da99e039b..0000000000 --- a/files/es/web/html/atributos_globales/style/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: style -slug: Web/HTML/Atributos_Globales/style -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/style ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El atributo global style contiene declaraciones de estilo  CSS a ser aplicados a un elemento . Notar que es recomandado para los estilos ser definidos en archivo o archivos separados . Este atributo y el elemento  {{ HTMLElement("style") }} tienen principalmente el propósito de permitir el estilizamiento rápido , por ejemplo para propósitos de pruebas .

- -

Nota de uso : Este atributo no debe de ser usado para comunicar información semántica . Incluso si todo el estilo es removido , una página debería mantenerse semánticamente correcta . Típicamente no debe de ser usado para ocultar información irrelevante ; esto debe de hacerse usando el atributo hidden .

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último  snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, sin  cambio desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName('HTML WHATWG')}}. Desde {{SpecName("HTML4.01")}}, es ahora un verdadero atributo global .
{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}{{Spec2('HTML4.01')}}Soportado en todos los elementos menos en  {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, y {{HTMLElement("title")}}.
{{ SpecName("CSS3 Style", "", "") }}{{Spec2("CSS3 Style")}}Define el contenido del atributo style .
- -

Compatibilidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísiticaAndroidChrome 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/web/html/atributos_globales/tabindex/index.html b/files/es/web/html/atributos_globales/tabindex/index.html deleted file mode 100644 index 2159639208..0000000000 --- a/files/es/web/html/atributos_globales/tabindex/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: tabindex -slug: Web/HTML/Atributos_Globales/tabindex -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/tabindex ---- -

{{HTMLSidebar("Global_attributes")}}

- -

Nota: El valor máximo para tabindex no debe de exceder 32767 (sección 17.11.1 del W3C). Si no se especifica, el valor asignado por defecto es -1.

- -

El atributo global tabindex indica si su elemento puede ser enfocado, y si participa en la navegación secuencial del teclado (usualmente con la tecla Tab, de ahí el nombre). Acepta un entero como valor, con diferentes resultados que dependen de dicho valor:

- -
    -
  • un valor negativo (usualmente tabindex="-1") significa que el elemento debe ser enfocado, pero no debe de ser accesible a través de la navegación secuencial del teclado. Es útil para crear widgets accesibles con JavaScript.
    • -
  • tabindex="0" significa que el elemento debe ser enfocado y ser accesible a través de la navegación secuencial del teclado, pero su orden relativo es definido por convención de la plataforma.
    • -
  • un valor positivo significa que debe poder recoger el foco y alcanzable a través de la navegación secuencial del teclado; su orden relativo es definido por el valor del atributo: la secuencia sigue el aumento del número de tabindex. Si varios elementos comparten el mismo tabindex, su orden relativo sigue la posición relativa en el documento.
    • -
  • Un elemento con valor 0, un valor inválido o sin valor de tabindex, debe de ser posicionado después de elementos con un tabindex postivo en el orden de navegación secuencial del teclado.
    • -
- -

Puede consultar este artículo para ver una explicación compresiva de la administración de la recepción de foco.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName('HTML WHATWG')}}. Desde {{SpecName("HTML4.01")}}, el atributo es ahora soportado en todos los elementos  (atributos globales).
{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}{{Spec2('HTML4.01')}}Solo soportado en {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, y {{HTMLElement("textarea")}}.
- -

Compatibilidad en exploradores

- -

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

- -
    -
  • atributos globales .
    • -
  • {{domxref("HTMLElement.tabindex")}} que refleja este atributo .
    • -
diff --git a/files/es/web/html/atributos_globales/title/index.html b/files/es/web/html/atributos_globales/title/index.html deleted file mode 100644 index ab8e0dd92f..0000000000 --- a/files/es/web/html/atributos_globales/title/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: title -slug: Web/HTML/Atributos_Globales/title -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/title ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El atributo global title contiene un texto representado información relacionada al elemento al cual pertenece . Tal información puede típicamente , pero no necesariamente , ser presentada al usuario como un tip . Aquí hay algunos usos típicos para este atributo :

- -
    -
  • Vínculo : el título o la descripción del documento vinculado 
    • -
  • Elemento mediático como una imagen : una descripción o créditos asociados
    • -
  • Párrafo : una nota de pié de página o comentario acerca de este 
    • -
  • Cita : alguna información sobre el autor y otros datos .
    • -
- -

Si este atributo es omitido  , significa que el título del ancestro más cercano de este elemento es todavía relevante para este (puede usarse legítimamente como un tip para ese elemento ) . Si el atributo es establecido como la cadena vacía , significa explícitamente que el título de su ancestro más  cercano no es relevante para este elemento ( y no debería de usarse en el tip para ese elemento )

- -

Semánticas adicionales se adjuntan a los atributos de title de los elementos {{ HTMLElement("link") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("input") }} y {{ HTMLElement("menuitem") }} 

- -

El atributo title puede contener varias líneas . Cada  U+000A LINE FEED (LF) insertada representa una línea nueva . Se debe tener precaución ya que esto significa que :

- -
<p>Líneas nuevas en title deben de tomarse en cuenta , como esta <abbr title="Este es un título multilínea">ejemplo </abbr>.</p>
-
- -

define un título de dos líneas .

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}. Desde {{SpecName("HTML4.01")}}, es ahora  un verdadero atributo global.
{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}{{Spec2('HTML4.01')}}Soportado en todos los elementos pero no en {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, y {{HTMLElement("title")}}.
- -

Compatibilidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Soporte multi línea{{CompatUnknown}}{{CompatGeckoDesktop(12)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Soporte multi línea{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(12)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Ver también

- -
    -
  • atributos globales .
    • -
  • {{domxref("HTMLElement.title")}} que refleja a este atributo .
    • -
diff --git a/files/es/web/html/atributos_globales/translate/index.html b/files/es/web/html/atributos_globales/translate/index.html deleted file mode 100644 index 5182acec3c..0000000000 --- a/files/es/web/html/atributos_globales/translate/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: translate -slug: Web/HTML/Atributos_Globales/translate -tags: - - Atributos globales - - Experimental - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/translate ---- -

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

- -

El atributo global translate  es un atributo enumerado que es usado para especificar si los valores del atributo de un elemento y los valores de sus nodos hijos de Texto serán traducidos cuando la página es localizada , o si se debe de dejarlos sin cambio . Puede tener los siguientes valores : 

- -
    -
  • Cadena vacía y "yes" , que indica que el elemento debe de ser traducido cuando la página es localizada .
    • -
  • "no", que indica que el elemento no debe de ser traducido .
    • -
- -

 

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial
- -

Compatibilidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatNo }}{{ CompatNo }}{{CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
-
- -

 

- -

Ver también

- -
    -
  • atributos globales 
    • -
  • La propiedad  {{domxref("HTMLElement.translate")}} que refleja a este atributo 
    • -
diff --git a/files/es/web/html/atributos_globales/x-ms-acceleratorkey/index.html b/files/es/web/html/atributos_globales/x-ms-acceleratorkey/index.html deleted file mode 100644 index 26cf4a2599..0000000000 --- a/files/es/web/html/atributos_globales/x-ms-acceleratorkey/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: x-ms-acceleratorkey -slug: Web/HTML/Atributos_Globales/x-ms-acceleratorkey -translation_of: Web/HTML/Global_attributes/x-ms-acceleratorkey ---- -
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
- -

 

- -

La x-ms-acceleratorkeypropiedad proporciona una forma de declarar que una tecla de aceleración se ha asignado a un elemento.

- -

Esta propiedad propietaria es específica de Internet Explorer y Microsoft Edge.

- -

La x-ms-acceleratorkeypropiedad le permite exponer una notificación en el árbol de accesibilidad a los lectores de pantalla y otras tecnologías de asistencia de que existe una clave de aceleración. Este atributo no proporciona el comportamiento de la clave del acelerador. Debe proporcionar controladores de eventos de teclado, como por ejemplo onkeypress, onkeydowno onkeyup, para procesar las teclas de aceleración en el documento.

- -

 

- -

Sintaxis

- -
<button x-ms-acceleratorkey="string">...</button>
- -

Valor

- -

Tipo: String

- -

Nombre de la tecla de aceleración, por ejemplo: Ctrl+B or Ctrl+S.

- -

Ver también

- - diff --git a/files/es/web/html/attributes/accept/index.html b/files/es/web/html/attributes/accept/index.html new file mode 100644 index 0000000000..b98ff8b644 --- /dev/null +++ b/files/es/web/html/attributes/accept/index.html @@ -0,0 +1,169 @@ +--- +title: 'HTML el atributo: accept' +slug: Web/HTML/Atributos/accept +tags: + - Accept + - Archivo + - Entrada + - Input + - Referencia + - atributo +translation_of: Web/HTML/Attributes/accept +--- +

El atributo accept toma como valor una lista separada por comas de uno o más tipos de archivos, o {{anch("Especificadores de tipo de archivo únicos","especificadores de tipo de archivo únicos")}}, que describen qué tipos de archivo permitir. La propiedad «accept» es un atributo del tipo {{HTMLElement("input/file", "file")}} {{HTMLElement("input")}}. Se admitía en el elemento {{HTMLElement("form")}}, pero se eliminó a favor de {{HTMLElement("input/file", "file")}} en HTML5.

+ +

Debido a que un determinado tipo de archivo se puede identificar de más de una manera, es útil proporcionar un conjunto completo de especificadores de tipo cuando necesiten archivos de un tipo específico, o usar el comodín para indicar que un tipo de cualquier formato es aceptable.

+ +

Por ejemplo, hay varias formas de identificar los archivos de Microsoft Word, por lo que un sitio que acepta archivos de Word puede usar un <input> como este:

+ +
<input type="file" id="docpicker"
+  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
+ +

Mientras que si aceptas un archivo multimedia, es posible que desees incluir cualquier formato de ese tipo de medio:

+ +
<input type="file" id="soundFile" accept="audio/*">
+<input type="file" id="videoFile" accept="video/*">
+<input type="file" id="imageFile" accept="image/*">
+ +

El atributo accept no valida los tipos de archivos seleccionados; simplemente proporciona sugerencias para los navegadores para guiar a los usuarios hacia la selección de los tipos de archivo correctos. Todavía es posible (en la mayoría de los casos) que los usuarios cambien una opción en el selector de archivos que hace posible anular esto y seleccionar cualquier archivo que deseen, y luego elegir tipos de archivo incorrectos.

+ +

Debido a esto, te debes asegurar de que el requisito esperado esté validado en el lado del servidor.

+ +

Ejemplos

+ +

Cuando se configura en un tipo de entrada de archivo, el selector de archivos nativo que se abre solo debe permitir seleccionar archivos del tipo de archivo correcto. La mayoría de los sistemas operativos aligeran los archivos que no coinciden con los criterios y no se pueden seleccionar.

+ +
+
<p>
+	<label for="soundFile">Selecciona un archivo de audio:</label>
+	<input type="file" id="soundFile" accept="audio/*">
+	</p>
+	<p>
+	<label for="videoFile">Selecciona un archivo de video:</label>
+	<input type="file" id="videoFile" accept="video/*">
+	</p>
+	<p>
+	<label for="imageFile">Selecciona algunas imágenes:</label>
+	<input type="file" id="imageFile" accept="image/*" multiple>
+	</p>
+ +

{{EmbedLiveSample('ejemplo_sencillo', '100%', 200)}}

+ +

Ten en cuenta que el último ejemplo te permite seleccionar varias imágenes. Consulta el atributo multiple para obtener más información.

+
+ +

Especificadores de tipo de archivo únicos

+ +

Un especificador de tipo de archivo único es una cadena que describe un tipo de archivo que el usuario puede seleccionar en un elemento {{HTMLElement("input")}} de tipo file. Cada especificador de tipo de archivo único puede adoptar una de las siguientes formas:

+ +
    +
  • Una extensión de nombre de archivo válida que no distingue entre mayúsculas y minúsculas, que comienza con un punto ("."). Por ejemplo: .jpg, .pdf, o .doc.
    • +
  • Una cadena de tipo MIME válida, sin extensiones.
    • +
  • La cadena audio/* significa "cualquier archivo de audio".
    • +
  • La cadena video/* significa "cualquier archivo de video".
    • +
  • La cadena image/* significa "cualquier archivo de imagen".
    • +
+ +

El atributo accept toma como valor una cadena que contiene uno o más de estos especificadores de tipo de archivo únicos, separados por comas. Por ejemplo, un selector de archivos que necesita contenido que se puede presentar como una imagen, incluidos los formatos de imagen estándar y los archivos PDF, podría verse así:

+ +
<input type="file" accept="image/*,.pdf">
+ +

Usar inputs de archivo

+ +

Un ejemplo básico

+ +
<form method="post" enctype="multipart/form-data">
+ <div>
+   <label for="file">Elige el archivo a cargar</label>
+   <input type="file" id="file" name="file" multiple>
+ </div>
+ <div>
+   <button>Enviar</button>
+ </div>
+</form>
+ + + +

Esto produce la siguiente salida:

+ +

{{EmbedLiveSample('Un_ejemplo_básico', 650, 60)}}

+ +
+

Nota: También puedes encontrar este ejemplo en GitHub; consulta código fuente y también puedes verlo funcionando en vivo.

+
+ +

Independientemente del dispositivo o sistema operativo del usuario, el <input> de archivo proporciona un botón que abre un cuadro de diálogo selector de archivos que permite al usuario elegir un archivo.

+ +

La inclusión del atributo multiple, como se muestra arriba, especifica que se pueden elegir varios archivos a la vez. El usuario puede elegir varios archivos del selector de archivos de cualquier manera que la plataforma elegida lo permita (por ejemplo, manteniendo presionada la tecla Mayús o Control y luego haciendo clic). Si solo deseas que el usuario elija un único archivo por <input>, omite el atributo multiple.

+ +

Limitar los tipos de archivo aceptados

+ +

A menudo, no querrás que el usuario pueda elegir cualquier tipo de archivo arbitrario; en su lugar, quieres que seleccionen archivos de un tipo o tipos específicos. Por ejemplo, si la entrada de tu archivo permite a los usuarios cargar una imagen de perfil, probablemente desees que seleccionen formatos de imagen compatibles con la web, como {{Glossary("JPEG")}} o {{Glossary("PNG")}}.

+ +

Los tipos de archivo aceptables se pueden especificar con el atributo {{HTMLAttrxRef("accept", "input/file")}}, que toma una lista separada por comas de extensiones de archivo permitidas o tipos MIME. Algunos ejemplos:

+ +
    +
  • accept="image/png" o accept=".png" — Acepta archivos PNG.
    • +
  • accept="image/png, image/jpeg" o accept=".png, .jpg, .jpeg" — Acepta archivos PNG o JPEG.
    • +
  • accept="image/*" — Acepta cualquier archivo con un tipo MIME de image/*. (Muchos dispositivos móviles también permiten que el usuario tome una foto con la cámara cuando se usa).
    • +
  • accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — Acepta cualquier cosa que huela a un documento de MS Word.
    • +
+ +

Veamos un ejemplo más completo:

+ +
<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="profile_pic">Elige el archivo para cargar</label>
+    <input type="file" id="profile_pic" name="profile_pic"
+          accept=".jpg, .jpeg, .png">
+  </div>
+  <div>
+    <button>Enviar</button>
+  </div>
+</form>
+ + + +

{{EmbedLiveSample('Limitar_los_tipos_de_archivo_aceptados', 650, 60)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + +
EspecificaciónEstado
{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'atributo accept')}}{{ Spec2('HTML WHATWG') }}
{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'Atributo accept')}}{{Spec2('HTML5.1')}}
+ +

Compatibilidad del navegador

+ + + +

{{Compat("html.elements.attribute.accept")}}

+ +

Ve también

+ +
    +
  • {{web.link("/es/docs/Using_files_from_web_applications", "Uso de archivos de aplicaciones web")}}
    • +
  • {{web.link("/es/docs/Web/API/File", "API de File")}}
    • +
diff --git a/files/es/web/html/attributes/autocomplete/index.html b/files/es/web/html/attributes/autocomplete/index.html new file mode 100644 index 0000000000..b8546e368d --- /dev/null +++ b/files/es/web/html/attributes/autocomplete/index.html @@ -0,0 +1,180 @@ +--- +title: The HTML autocomplete attribute +slug: Web/HTML/Atributos/autocomplete +translation_of: Web/HTML/Attributes/autocomplete +--- +

El atributo autocomplete  está disponible en varios tipos de  {{HTMLElement("input")}} aquellos que toman un texto o valor numérico como entrada. autocomplete  permite a los desarrolladores web especificar qué permisos si los hay {{Glossary("user agent")}}  debe proporcionar asistencia automatizada para completar los valores de los campos de formulario, así como una guía para el navegador en cuanto al tipo de información que se espera en el campo.

+ +

 

+ +

Los valores sugeridos generalmente depende del navegador. Normalmente, provienen de valores ​​ingresados ​​por el usuario, pero también pueden provenir de valores preconfigurados. Por ejemplo, un navegador puede permitir que el usuario guarde su nombre, dirección, número de teléfono y direcciones de correo electrónico para autocompletar así como también datos de tarjetas de crédito.

+ +

Si un elemento {{HTMLElement("input")}} no tiene el atributo autocomplete , entonces los navegadores usan el atributo autocomplete del {{HTMLElement("form")}} que lo contiene. En otras palabras, el {{HTMLElement("form")}} del que el {{HTMLElement("input")}} desciende. También puede ser especificado en el atributo {{htmlattrxref("form", "input")}} del {{HTMLElement("input")}} en cuestión.

+ +

Para más información vea el atributo {{htmlattrxref("autocomplete", "form")}} del elemento {{HTMLElement("form")}}

+ +
+

Para proveer el autocompletado, el navegador necesita del los elementos <input>:

+ +
    +
  1. Que tengan name y/o id
    2. +
  2. Pertenezcan a un elemento <form>
    3. +
  3. Que el formulario tenga un botón {{HTMLElement("input/submit", "submit")}}
    4. +
+
+ +

Valores

+ +
+
"off"
+
The browser is not permitted to automatically enter or select a value for this field. It is possible that the document or application provides its own autocomplete feature, or that security concerns require that the field's value not be automatically entered. +
Note: In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See the autocomplete attribute and login fields.
+
+
"on"
+
The browser is allowed to automatically complete the input. No guidance is provided as to the type of data expected in the field, so the browser may use its own judgement.
+
"name"
+
The field expects the value to be a person's full name. Using "name" rather than breaking the name down into its components is generally preferred because it avoids dealing with the wide diversity of human names and how they are structured; however, you can use the following autocomplete values if you do need to break the name down into its components: +
+
"honorific-prefix"
+
The prefix or title, such as "Mrs.", "Mr.", "Miss", "Ms.", "Dr.", or "Mlle.".
+
"given-name"
+
The given (or "first") name.
+
"additional-name"
+
The middle name.
+
"family-name"
+
The family (or "last") name.
+
"honorific-suffix"
+
The suffix, such as "Jr.", "B.Sc.", "PhD.", "MBASW", or "IV".
+
"nickname"
+
A nickname or handle.
+
+
+
"email"
+
An email address.
+
"username"
+
A username or account name.
+
"new-password"
+
A new password. When creating a new account or changing passwords, this is the "Enter your new password" field, as opposed to any "Enter your current password" field that might be present. This may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password.
+
"current-password"
+
The user's current password.
+
"organization-title"
+
A job title, or the title a person has within an organization, such as "Senior Technical Writer", "President", or "Assistant Troop Leader".
+
"organization"
+
A company or organization name, such as "Acme Widget Company" or "Girl Scouts of America".
+
"street-address"
+
A street address. This can be multiple lines of text, and should fully identify the location of the address within its second administrative level (typically a city or town), but should not include the city name, ZIP or postal code, or country name.
+
"address-line1", "address-line2", "address-line3"
+
Each individual line of the street address. These should only be present if the "street-address" is also present.
+
"address-level4"
+
The finest-grained {{anch("Administrative levels in addresses", "administrative level")}}, in addresses which have four levels.
+
"address-level3"
+
The third {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least three administrative levels.
+
"address-level2"
+
The second {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least two of them. In countries with two administrative levels, this would typically be the city, town, village, or other locality in which the address is located.
+
"address-level1"
+
The first {{anch("Administrative levels in addresses", "administrative level")}} in the address. This is typically the province in which the address is located. In the United States, this would be the state. In Switzerland, the canton. In the United Kingdom, the post town.
+
"country"
+
A country code.
+
"country-name"
+
A country name.
+
"postal-code"
+
A postal code (in the United States, this is the ZIP code).
+
"cc-name"
+
The full name as printed on or associated with a payment instrument such as a credit card. Using a full name field is preferred, typically, over breaking the name into pieces.
+
"cc-given-name"
+
A given (first) name as given on a payment instrument like a credit card.
+
"cc-additional-name"
+
A middle name as given on a payment instrument or credit card.
+
"cc-family-name"
+
A family name, as given on a credit card.
+
"cc-number"
+
A credit card number or other number identifying a payment method, such as an account number.
+
"cc-exp"
+
A payment method expiration date, typically in the form "MM/YY" or "MM/YYYY".
+
"cc-exp-month"
+
The month in which the payment method expires.
+
"cc-exp-year"
+
The year in which the payment method expires.
+
"cc-csc"
+
The security code for the payment instrument; on credit cards, this is the 3-digit verification number on the back of the card.
+
"cc-type"
+
The type of payment instrument (such as "Visa" or "Master Card").
+
"transaction-currency"
+
The currency in which the transaction is to take place.
+
"transaction-amount"
+
The amount, given in the currency specified by "transaction-currency", of the transaction, for a payment form.
+
"language"
+
A preferred language, given as a valid BCP 47 language tag.
+
"bday"
+
A birth date, as a full date.
+
"bday-day"
+
The day of the month of a birth date.
+
"bday-month"
+
The month of the year of a birth date.
+
"bday-year"
+
The year of a birth date.
+
"sex"
+
A gender identity (such as "Female", "Fa'afafine", "Male"), as freeform text without newlines.
+
"tel"
+
A full telephone number, including the country code. If you need to break the phone number up into its components, you can use these values for those fields: +
+
"tel-country-code"
+
The country code, such as "1" for the United States, Canada, and other areas in North America and parts of the Caribbean.
+
"tel-national"
+
The entire phone number without the country code component, including a country-internal prefix. For the phone number "1-855-555-6502", this field's value would be "855-555-6502".
+
"tel-area-code"
+
The area code, with any country-internal prefix applied if appropriate.
+
"tel-local"
+
The phone number without the country or area code. This can be split further into two parts, for phone numbers which have an exchange number and then a number within the exchange. For the phone number "555-6502", use "tel-local-prefix" for "555" and "tel-local-suffix" for "6502".
+
+
+
"tel-extension"
+
A telephone extension code within the phone number, such as a room or suite number in a hotel or an office extension in a company.
+
"impp"
+
A URL for an instant messaging protocol endpoint, such as "xmpp:username@example.net".
+
"url"
+
A URL, such as a home page or company web site address as appropriate given the context of the other fields in the form.
+
"photo"
+
The URL of an image representing the person, company, or contact information given in the other fields in the form.
+
+ +

See the WHATWG Standard for more detailed information.

+ +
+

Note: The autocomplete attribute also controls whether Firefox will — unlike other browsers — persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input> across page loads. The persistence feature is enabled by default. Setting the value of the autocomplete attribute to off disables this feature. This works even when the autocomplete attribute would normally not apply to the <input> by virtue of its type. See {{bug(654072)}}.

+
+ +

Administrative levels in addresses

+ +

The four administrative level fields ("address-level1" through "address-level4") describe the address in terms of increasing levels of precision within the country in which the address is located. Each country has its own system of administrative levels, and may arrange the levels in different orders when addresses are written.

+ +

"address-level1" always represents the broadest administrative division; it is the least-specific portion of the address short of the country name.

+ +

Form layout flexibility

+ +

Given that different countries write their address in different ways, with each field in different places within the address, and even different sets and numbers of fields entirely, it can be helpful if, when possible, your site is able to switch to the layout expected by your users when presenting an address entry form, given the country the address is located within.

+ +

Variations

+ +

The way each administrative level is used will vary from country to country. Below are some examples; this is not meant to be an exhaustive list.

+ +

United States

+ +

A typical home address within the United States looks like this:

+ +

432 Anywhere St
+ Exampleville CA 95555

+ +

In the United States, the least-specific portion of the address is the state, in this case "CA" (the official US Postal Service shorthand for "California"). Thus "address-level1" is the state, or "CA" in this case.

+ +

The second-least specific portion of the address is the city or town name, so "address-level2" is "Exampleville" in this example address.

+ +

United States addresses do not use levels 3 and up.

+ +

United Kingdom

+ +

The UK uses one or two address levels, depending on the address. These are the post town and, in some instances, the locality.

+ +

China

+ +

China can use as many as three administrative levels: the province, the city, and the district.

diff --git a/files/es/web/html/attributes/crossorigin/index.html b/files/es/web/html/attributes/crossorigin/index.html new file mode 100644 index 0000000000..f7453daa96 --- /dev/null +++ b/files/es/web/html/attributes/crossorigin/index.html @@ -0,0 +1,123 @@ +--- +title: Atributos de configuración CORS +slug: Web/HTML/Atributos_de_configuracion_CORS +translation_of: Web/HTML/Attributes/crossorigin +--- +

En HTML5, algunos elementos HTML que dan soporte para CORS, tales como {{ HTMLElement("img") }} o {{ HTMLElement("video") }}, tienen un atributo crossorigin  (propiedad crossOrigin), que les permite configurar las peticiones CORS de los datos que se cargan. Estos atributos están enumerados, y tienen los siguientes valores posibles:

+ + + + + + + + + + + + + + + + +
Palabra claveDescripción
anonymousCORS, las solicitudes de este elemento no tendrán establecido el indicador de credenciales.
use-credentialsCORS, las solicitudes de este elemento tendrán marcado el indicador de credenciales; esto significa que la solicitud proporcionará credenciales.
+ +

Por defecto, es decir cuando el atributo no es específicado, CORS no se usa. La palabra clave "anonymous" indica que no habrá intercambio de credenciales de usuario a través de las cookies, ni por parte del cliente con certificados SSL o autenticación HTTP como se describe en la sección de terminología de la especificación CORS.

+ +

Una clave inválida y un string vacío serán gestionados como  una clave anónima.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13{{ CompatGeckoDesktop("8.0") }}11{{ CompatNo() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoDesktop("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoMobile("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/html/attributes/index.html b/files/es/web/html/attributes/index.html new file mode 100644 index 0000000000..03e7d8baee --- /dev/null +++ b/files/es/web/html/attributes/index.html @@ -0,0 +1,677 @@ +--- +title: Referencia de Atributos HTML +slug: Web/HTML/Atributos +tags: + - HTML + - Referencia + - Web + - atributo +translation_of: Web/HTML/Attributes +--- +

Los elementos en HTML tienen atributos; estos son valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas para cumplir los criterios de los usuarios.

+ +

Lista de Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nombre del AtributoElementosDescripción
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Lista de tipos aceptados por el servidor, usualmente un tipo de archivo.
accept-charset{{ HTMLElement("form") }}Lista de juegos de caracteres soportados.
accesskeyAtributos GlobalesDefine una tecla que activa o agrega un foco al elemento.
action{{ HTMLElement("form") }}La URL del programa que procesa la información enviada en el formulario.
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}Especifica el alineamiento horizontal del elemento.
alt{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}Texto alternativo en caso de que la imagen no se pueda mostrar.
async{{ HTMLElement("script") }}Indica que el script debería ejecutarse asincrónicamente.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica si los controles en este formulario pueden tener por defecto sus valores completados automáticamente por el navegador.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}El elemento debería recibir foco automáticamente después de haberse cargado la página.
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}El audio o video debería empezar lo antes posible.
autosave{{ HTMLElement("input") }}Previous values should persist dropdowns of selectable values across page loads.
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} +

Color de fondo del elemento.

+ +
+

Nota: Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("background-color") }} en su lugar.

+
+
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} +

El ancho del borde.

+ +
+

Nota: Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("border") }} en su lugar.

+
+
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Contiene un rango de tiempo multimedia almacenado.
challenge{{ HTMLElement("keygen") }}Cadena de desafío que se envía junto con la clave pública.
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}Declara la codificación de caracteres de la página o del script.
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}Indica que el elemento debería estar marcado al cargar la página.
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}Contiene una URL que apunta a la fuente de la cita o cambio.
classAtributo GlobalUsualmente empleado con CSS para aplicar estilos a elementos con propiedades en comun.
code{{ HTMLElement("applet") }}Especifica la URL del archivo de tipo applet a ser cargado y ejecutado.
codebase{{ HTMLElement("applet") }}Este atributo contiene la URL absoluta o relativa del directorio donde los archivos de applets (.class) referenciados en el codigo se encuentran almacenados.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} +

Este atributo establece el color de texto utilizando un nombre de color o en formato hexadecimal #RRGGBB.

+ +
+

Nota: Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("color") }} en su lugar.

+
+
cols{{ HTMLElement("textarea") }}Define el número de columnas en un área de texto.
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Define el número de columnas que una celda debe contener.
content{{ HTMLElement("meta") }}Un valor asociado con http-equiv o name dependiendo del contexto.
contenteditableAtributo GlobalIndica si el contenido del elemento es editable.
contextmenuAtributo GlobalDefine el ID del elemento {{ HTMLElement("menu") }} que servira como menú de contexto para otro elemento.
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica si el navegador debe mostrar controles de reproduccion al usuario.
coords{{ HTMLElement("area") }}Un conjunto de valores que especifican las coordenadas del area.
data{{ HTMLElement("object") }}Especifica la URL del recurso.
data-*Atributo GlobalPermite asociar atributos presonalizados a un elemento HTML.
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}Indica la fecha y hora asociadas con el elemento.
default{{ HTMLElement("track") }}Indica que la pista debe estar habilitada a menos que las preferencias del usuario indiquen algo diferente.
defer{{ HTMLElement("script") }}Indica que el código debe ser ejecutado despues de que la página este cargada.
dirAtributo GlobalDefine la dirección del texto. Los valores permitidos son ltr (Izquierda-a-Derecha) o rtl (Derecha-a-Izquierda).
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica la dirección del texto asociada con el elemento al momento de enviar el formulario.
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica si el usuario puede interactuar con el elemento.
download{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Indica que el hipervínculo es utilizado para descargar un recurso.
draggableAtributo GlobalDefine si el elemento puede ser arrastrado.
dropzoneAtributo GlobalIndica que el elemento acepta contenido soltado en el mismo.
enctype{{ HTMLElement("form") }}Define el tipo de contenido del formulario cuando el método del mismo es POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Describe elementos que pertenecen a éste.
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 formulario al que pertenece el elemento.
formaction{{ HTMLElement("input") }}, {{ HTMLElement("button") }}Indica la acción del elemento, anulando la acción definida en {{ HTMLElement("form") }}.
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}IDs de los elementos <th> que aplican a este elemento.
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} +

Especifica la altura de los elementos enumerados aquí. Para todos los demás elementos, usa la propiedad CSS {{cssxref("height")}} en su lugar.

+ +
+

Nota: En algunos casos, como los {{ HTMLElement("div") }}, este es un atributo de referencia, en donde debes usar la propiedad CSS {{ Cssxref("height") }} en su lugar.

+
+
hiddenAtributo GlobalEvita la prestación del elemento dado, manteniendo los elementos secundarios, p.ej. los elementos de script
high{{ HTMLElement("meter") }}Indica el menor valor del rango alto.
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}La URL de un recurso asociado.
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Especifica el lenguaje del recurso asociado.
http-equiv{{ HTMLElement("meta") }}Indica una directiva que puede alterar el comportamiento de la pagina y como es leida por los exploradores.
icon{{ HTMLElement("command") }} +

Especifica una imagen relacionada con el comando.

+ +
+

Note: El elemento {{ HTMLElement("command") }} es obsoleto y no se recomienda su uso.

+
+
idAtributo GlobalIdentificador el elemento para acceder al mismo desde CSS o Javascript, este indicador debe ser unico para cada elemento.
ismap{{ HTMLElement("img") }}Indica que la imagen es parte de un mapa de imagen del servidor.
itempropAtributo GlobalIndica que el elemento contiene el valor de la propiedad especificada de un conjunto.
keytype{{ HTMLElement("keygen") }} +

Especifica el tipo de clave generada.

+ +
+

Nota: RSA es el valor por defecto.

+
+
kind{{ HTMLElement("track") }}Specifies the kind of text track.
label{{ HTMLElement("track") }}Especifica el título de la pista con un formato legible por el usuario.
langAtributo GlobalDefine el lenguaje utilizado en el elemento.
language{{ HTMLElement("script") }}Define el lenguage (de programación) utilizado en el elemento.
list{{ HTMLElement("input") }}Identifica una serie de valores predefinidos para ser sugeridos al usuario.
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}Indica si el medio debe volver a ser reproducido desde el principio al llegar al final.
low{{ HTMLElement("meter") }}Indica el valor mas alto del rango bajo.
manifest{{ HTMLElement("html") }}Especifica la URL del manifiesto de cache para el documento.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica el máximo valor aceptado.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Define el mayor número de caracteres aceptados.
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}Da un indicio del tipo de medio para el cual el recurso vinculado fue creado.
method{{ HTMLElement("form") }}Define el método HTTP a emplear para enviar el formulario. Puede ser GET (predeterminado) o POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica el valor mínimo aceptado.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica si múltiples valores pueden ser ingresados.
muted{{ HTMLElement("video") }}Indica si el audio será silenciado inicialmente al cargar la página.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}Nombre del elemento. Por ejemplo utilizado por el servidor para identificar los campos en el envio de formularios.
novalidate{{ HTMLElement("form") }}Este atributo indica que el formulario no debe ser validado cuando se envíe.
open{{ HTMLElement("details") }}Indica si los detalles de la página seran mostrados cuando cargue la misma.
optimum{{ HTMLElement("meter") }}Indica el valor numérico óptimo.
pattern{{ HTMLElement("input") }}Define una expresion regular con la cual el valor del elemento debe ser validado.
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Indica si se enviara un ping o notificacion a la URL del recurso cuando el usuario utlize el vinculo.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Proporciona una sugerencia al usuario de lo que puede ser introducido en el campo.
poster{{ HTMLElement("video") }}Una URL que indica un cuadro a mostrar hasta que el usuario reproduzca o navegue en el video.
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica si el recurso o partes del mismo deben ser precargadas.
pubdate{{ HTMLElement("time") }}Indica si esta fecha y tiempo concuerda con la fecha y tiempo del {{ HTMLElement("article") }} mas cercano (ancestro).
radiogroup{{ HTMLElement("command") }} +

Indica los nombres de los comandos de tipo radio, que seran alternados si el comando en si es alternado. Este atributo debe ser omitido si el tipo de comando no es radio.

+ +
+

Note: El elemento {{ HTMLElement("command") }} es obsoleto y no se recomienda su uso.

+
+
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica si el elemento puede ser editado por el usuario.
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Especifica la relación entre el objeto destino y el objeto enlace.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica si se requiere rellenar o no este elemento.
reversed{{ HTMLElement("ol") }}Indica si la lista debe ser mostrada en orden descendente en vez de ascendente.
rows{{ HTMLElement("textarea") }}Define el número de filas en un área de texto.
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Define el número de filas que una celda de una tabla debe abarcar.
sandbox{{ HTMLElement("iframe") }}Lista de restricciones a ser desactivadas en el iframe.
scope{{ HTMLElement("th") }}Define las celdas que la cabecera definió en este elemento.
scoped{{ HTMLElement("style") }}Indica si el estilo será aplicado sólo al elemento inmediato superior (padre). de no ser definido, el estilo se aplicara de forma global.
seamless{{ HTMLElement("iframe") }}Indica si el iframe debe ser cargado como parte del mismo documento.
selected{{ HTMLElement("option") }}Define un valor que será seleccionado al cargar la página.
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Define una región seleccionable para hacer hipervínculos asociados con una forma asociada a una figura para crear un mapa. Los valores para este atributo son: circle, defaul, plygon y rect.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Define el ancho del elemento (en píxeles). Si el atributo del elemento es del tipo text o password entonces es el número de caracteres.
sizes{{ HTMLElement("link") }}, {{ HTMLElement("img") }}, {{ HTMLElement("source") }}Define los tamaños en los que el icono puede ser cargado.
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}Indica el número de columnas que se agrupan.
spellcheckAtributo GlobalIndica si se permite la corrección ortográfica para el elemento.
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}La URL del contenido integrable.
srcdoc{{ HTMLElement("iframe") }}Especifica el contenido de la página incluida.
srclang{{ HTMLElement("track") }}Especifica el lenguaje del contenido de la pista.
srcset{{ HTMLElement("img") }}
start{{ HTMLElement("ol") }}Define el número inicial de la lista (si es diferente a 1).
step{{ HTMLElement("input") }}Indica el valor del incremento para un valor numerico o de fecha.
styleAtributo GlobalDefine los estilos CSS que anulan los estilos establecidos previamente.
summary{{ HTMLElement("table") }} +

Contiene una descripción del contenido de la tabla.

+ +

Nota: Este atributo ha sido desaprovado, se recomienda incluir un elemento {{ HTMLElement("caption") }} en la tabla.

+
tabindexAtributo GlobalSobrescribe el orden de tabulacion del navegador y usa el especificado.
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }} +

Especifica el marco destino en un vínculo.

+ +

Valores especiales: "_blank" indica una nueva ventana, "_parent" indica el marco padre del marco que contiene el código fuente, "_self" indica el marco donde está el código fuente y "_top" indica la ventana completa del navegador.

+
titleAtributo GlobalTexto a ser mostrado cuando el cursor esté sobre el elemento.
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}Define el tipo de elemento.
usemap{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }} +

Indica la URL parcial de un image map asociado con el elemento.

+ +
+

Note: Este atributo no puede ser usado si el elemento {{ HTMLElement("img") }} desciende de un {{ HTMLElement("button") }} o {{ HTMLElement("a") }}

+
+
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}Define el valor predeterminado a ser mostrado al cargar la página.
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} +

Para los elementos enumerados aquí, esto establece el ancho del elemento.

+ +
+

Nota: En algunos casos, como los {{ HTMLElement("div") }}, este es un atributo de referencia, en donde debes usar la propiedad CSS {{ Cssxref("height") }} en su lugar.

+
+
wrap{{ HTMLElement("textarea") }}Indica la forma en la cual el texto debe ser envuelto.
+ +

Contenido versus atributos IDL

+ +

En HTML, la mayoria de los atributos tiene dos caras: el atributo de contenido y el atributo IDL

+ +

El atributo de contenido es aquel que se define desde el contenido (Codigo HTML) y puedes definirlo u obtenerlo con {{domxref("element.setAttribute()")}} o {{domxref("element.getAttribute()")}}. El atributo de contenido es siempre un string incluso cuando el valor esperado en un integer. Por ejemplo, para definir el maxlength de un {{HTMLElement("input")}} a 42 usando el atributo de contenido, se debe llamar a setAttribute("maxlength", "42") en ese elemento.

+ +

El atributo IDL, tambien conocido como propiedad JavaScript. Estos son atributos que se pueden leer o definir usando JavaScript como element.foo.. El atributo IDL siempre va a usar (pero puede transformarse) en el atributo de contenido subyacente para retornar un valor cuando lo obtiene y lo guarda en el atributo de contenido cuando es definido. En otras palabras el atributo IDL, en esencia, refleja los atributos de contenido.

+ +

La mayoria del tiempo, los atributos IDL pueden retornar sus valores como realmente son usados. Por ejemplo, el type por defecto para los elementos {{HTMLElement("input")}} es "texto", entonces si defines input.type="foobar", el elemento <input> sera de tipo texto (en apariencia y comportamiento) pero el valor del Atributo de contenido "type" sera "foobat". De cualquier manera, el type del atributo IDL retornara el string "text".

+ +

Los atributos IDL no son siempre strings; por ejemplo, input.maxlength es un numero (marcado como long). Cuando se usan atributos IDL, lees o defines valores del tipo deseado, entonces input.maxlength siempre retornara un numero y cuando definas input,maxlength, esperara un numero. Si se le entrega otro tipo, se convierte antomaticamente a numero como se especifica en las reglas del  estandar de JavaScript para conversiones de tipo.

+ +

Los atributos IDL pueden reflejar otros tipos como un long sin asignacion, URL's, booleanos, etc. Desafortunadamente no hay reglas claras y el comportamiento que los atributos IDL en conjunto con sus respectivos atributos de contenido depende del mismo atributo. La mayoria del tiempo, siguen las reglas de diseño en la especificacion, pero algunas veces no lo hacen. Las especificaciones HTML tratan de ser lo mas amigables para el dasarrollador como es posible, pero por varias razones (mayormente historicas), algunos aributos se comportan de forma extraña (select.size, por ejemplo) y debes leer las especificaciones para comprender como éste se comporta exactamente.

+ +

Ver Tambien

+ + diff --git a/files/es/web/html/attributes/min/index.html b/files/es/web/html/attributes/min/index.html new file mode 100644 index 0000000000..4060bd81f4 --- /dev/null +++ b/files/es/web/html/attributes/min/index.html @@ -0,0 +1,162 @@ +--- +title: 'HTML el atributo: min' +slug: Web/HTML/Atributos/min +tags: + - Atributos + - Restricción de validación + - atributo + - min +translation_of: Web/HTML/Attributes/min +--- +
+

El atributo {{HTMLAttrxRef("min", "input")}} define el valor mínimo que es aceptable y válido para el {{HTMLElement("input")}} que contiene el atributo. Si el {{web.link("/es/docs/Web/HTML/Element/input#attr-value", "value")}} del elemento es menor que esto, el elemento falla la {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}}. Este valor debe ser menor o igual que el valor del atributo {{HTMLAttrxRef("max", "input")}}. Si se especifica un valor para {{HTMLAttrxRef("min", "input")}} que no es un número válido, la entrada no tiene un valor mínimo.

+ +

Válido para los tipos de entrada numérica, incluidos los tipos {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} y {{HTMLElement("input/range", "range")}}, y el elemento {{htmlelement('meter')}}, el atributo {{HTMLAttrxRef("min", "input")}} es un número que especifica el valor mínimo de un control de formulario para ser considerado válido.

+ +

Sintaxis

+ +
+

Si any no se establece explícitamente, los valores válidos para el número, los tipos de entrada de fecha/hora y los tipos de entrada de range son iguales a la base de paso a paso: el valor {{HTMLAttrxRef("min", "input")}} y los incrementos del valor del paso, hasta el valor {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}, si se especifica. Por ejemplo, si tienes <input type="number" min="10" step="2">, cualquier entero par, 10 o mayor, es válido. Si se omite, <input type="number">, cualquier número entero es válido, pero los flotantes, como 4.2, no son válidos, ya que el step predeterminado es 1. Para que 4.2 sea válido, step se debería haber configurado en any, 0.1, 0.2, o cualquiera, el valor mínimo tendría que ser un número terminado en 0.2 , como <input type="number" min="-5.2">

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sintaxis para valores {{HTMLAttrxRef("min", "input")}} por <input type="" />
Tipo del inputEjemploEjemplo
{{HTMLElement("input/date", "date")}}yyyy-mm-dd<input type="date" min="2019-12-25" step="1">
{{HTMLElement("input/month", "month")}}yyyy-mm<input type="month" min="2019-12" step="12">
{{HTMLElement("input/week", "week")}}yyyy-W##<input type="week" min="2019-W23" step="">
{{HTMLElement("input/time", "time")}}hh:mm<input type="time" min="09:00" step="900">
{{HTMLElement("input/datetime-local", "datetime-local")}}yyyy-mm-ddThh:mm<input type="datetime-local" min="2019-12-25T19:30">
{{HTMLElement("input/number", "number")}}{{web.link("/es/docs/Web/CSS/number", "number")}}<input type="number" min="0" step="5" max="100">
{{HTMLElement("input/range", "range")}}{{web.link("/es/docs/Web/CSS/number", "number")}}<input type="range" min="60" step="5" max="100">
+ +
+

Nota: Cuando los datos ingresados por el usuario no se adhieren al valor mínimo establecido, el valor se considera inválido en la restricción de validación y coincidirá con la pseudoclase :invalid

+
+
+ +

Consulta {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "Validación del lado del cliente")}} y {{DOMxRef("ValidityState.rangeUnderflow", "rangeUnderflow")}} para más información.

+ +

Para el elemento {{HTMLElement('meter')}}, el atributo {{HTMLAttrxRef("min", "input")}} define el límite numérico inferior del rango medido. Debe ser menor que el valor mínimo (atributo {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}), si se especifica. En ambos casos, si se omite, el valor predeterminado es 1.

+ + + + + + + + + + + + + + + + + +
Sintaxis para valores {{HTMLAttrxRef("min", "input")}} para otros elementos
Tipo del inputSintaxisEjemplo
{{HTMLElement("meter")}}{{web.link("/es/docs/Web/CSS/number", "number")}}<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter>
+ +

Impacto en step

+ +

Los valores de {{HTMLAttrxRef("min", "input")}} y step definen cuáles son los valores válidos, incluso si el atributo step no está incluido, como el step predeterminado de 0.

+ +

Agrega un gran borde rojo alrededor de los {{HTMLElement("input")}}s no válidos:

+ +
input:invalid {
+  border: solid red 3px;
+}
+ +

Luego define un {{HTMLElement("input")}} con un valor mínimo de 7.2, omitiendo el atributo step, en donde el valor predeterminado es 1.

+ +
<input id="myNumber" name="myNumber" type="number" min="7.2" value="8">
+ +

Dado que step tiene el valor predeterminado de 1, los valores válidos incluyen 7.2, 8.2, 9.2 y así sucesivamente. El valor 8 no es válido. Dado que incluye un valor no válido, los navegadores compatibles mostrarán el valor como no válido.

+ +

{{EmbedLiveSample("Impacto_en_step",200,55)}}

+ +

Si no se incluye explícitamente, step tiene como valor predeterminado 1 para número y range, y 1 tipo de unidad (segundo, semana, mes, día) para los {{HTMLElement("input")}}s de tipo fecha/hora.

+
+ +

Compatibilidad del navegador

+ + + +

{{Compat("html.elements.attributes.min")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{ Spec2('HTML WHATWG') }}
{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{ Spec2('HTML5 W3C') }}
+ +

Problemas de accesibilidad

+ +

Proporciona instrucciones para ayudar a los usuarios a comprender cómo completar el formulario y utilizar controles de formulario individuales. Indica cualquier entrada requerida y opcional, formatos de datos y otra información relevante. Cuando utilices el atributo {{HTMLAttrxRef("min", "input")}}, asegúrate de que el usuario comprenda este requisito mínimo. Posiblemente sea suficiente proporcionar instrucciones dentro de un {{HTMLElement('label')}}. Si proporcionas instrucciones fuera de las etiquetas, lo cual permite un posicionamiento y un diseño más flexibles, considera usar {{web.link("/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute", "aria-labelledby")}} o {{web.link("/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-descriptionsby_attribute", "aria-describedby")}}.

+ +

Ve también

+ +
    +
  • {{web.link("/es/docs/Web/HTML/Attributes/step", "step")}}
    • +
  • {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}
    • +
  • {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricciones de validación")}}
    • +
  • {{DOMxRef('Constraint_validation')}}
    • +
  • {{DOMxRef('validityState.rangeUnderflow')}}
    • +
  • {{CSSxRef(':out-of-range')}}
    • +
  • {{HTMLElement('input')}}
    • +
  • Los tipos {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} y {{htmlelement('meter')}}
    • +
diff --git a/files/es/web/html/attributes/minlength/index.html b/files/es/web/html/attributes/minlength/index.html new file mode 100644 index 0000000000..23056673e2 --- /dev/null +++ b/files/es/web/html/attributes/minlength/index.html @@ -0,0 +1,71 @@ +--- +title: 'HTML el atributo: minlength' +slug: Web/HTML/Atributos/minlength +tags: + - Entrada + - Input + - Referencia + - atributo + - minlength + - textarea +translation_of: Web/HTML/Attributes/minlength +--- +

El atributo minlength define el número mínimo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en un {{HTMLElement('input')}} o {{HTMLElement('textarea')}}. Debe ser un valor entero 0 o superior. Si no se especifica una longitud mínima o se especifica un número no válido, el <input> no tiene una longitud mínima. Este valor debe ser menor o igual que el valor de {{web.link("/es/docs/Web/HTML/Attributes/maxlength", "maxlength")}}; de lo contrario, el valor nunca será válido, puesto que es imposible cumplir con ambos criterios.

+ +

El <input> fallará la restricción de validación si la longitud del valor de texto del campo es menor que la longitud mínima de unidades de código UTF-16, con {{DOMxRef('validityState.tooShort')}} devolviendo true. La validación de la restricción solo se aplica cuando el usuario cambia el valor. Una vez que el envío falla, algunos navegadores mostrarán un mensaje de error que indica la longitud mínima requerida y la longitud actual.

+ +

Ejemplos

+ +

Al agregar minlength="5", el valor debe estar vacío o tener cinco caracteres o más para ser válido.

+ +
<label for="fruit">Ingresa un nombre de fruta que tenga al menos 5 letras</label> <input type="text" minlength="5" id="fruit">
+ +

Podemos usar pseudoclases para estilizar el elemento en función de si el valor es válido. El valor será válido siempre que sea null (vacío) o tenga cinco o más caracteres. Lima no es válido, limón es válido.

+ +
input {
+  border: 2px solid currentcolor;
+}
+input:invalid {
+  border: 2px dashed red;
+}
+input:invalid:focus {
+  background-image: linear-gradient(pink, lightgreen);
+}
+ +

{{EmbedLiveSample('Ejemplos', '100%', 200)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + +
EspecificaciónEstado
{{SpecName('HTML WHATWG', 'input.html#attr-input-minlength', 'atributo minlength')}}{{ Spec2('HTML WHATWG') }}
{{SpecName('HTML5.1', 'input.html#attr-minlength-accept', 'atributo minlength')}}{{Spec2('HTML5.1')}}
+ +

Compatibilidad del navegador

+ + + +

{{Compat("html.elements.attribute.minlength")}}

+ +

Ve también

+ +
    +
  • {{web.link("/es/docs/Web/HTML/Attributes/maxlength", "maxlength")}}
    • +
  • {{web.link("/es/docs/Web/HTML/Attributes/size", "size")}}
    • +
  • {{web.link("/es/docs/Web/HTML/Attributes/pattern", "pattern")}}
    • +
  • {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "Restricción de validación")}}
    • +
diff --git a/files/es/web/html/attributes/multiple/index.html b/files/es/web/html/attributes/multiple/index.html new file mode 100644 index 0000000000..cbf465b0b8 --- /dev/null +++ b/files/es/web/html/attributes/multiple/index.html @@ -0,0 +1,182 @@ +--- +title: 'HTML el atributo: multiple' +slug: Web/HTML/Atributos/multiple +tags: + - Atributos + - Resticción de validación + - atributo +translation_of: Web/HTML/Attributes/multiple +--- +

El atributo booleano {{HTMLAttrxRef("multiple", "input")}}, si se establece, significa que el control del formulario acepta uno o más valores. Válido para los {{HTMLElement("input")}}s de tipo {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/file", "file")}} y {{HTMLElement("select")}}, la forma en que el usuario opta por valores múltiples depende del control del formulario.

+ +

Dependiendo del tipo, el control de formulario puede tener una apariencia diferente si se establece el atributo {{HTMLAttrxRef("multiple", "input")}}. Para el {{HTMLElement("input")}} de tipo file, la mensajería nativa que proporciona el navegador es diferente. En Firefox, el {{HTMLElement("input")}} de tipo file dice "Ningún archivo seleccionado" cuando el atributo está presente y "Ningún archivo seleccionado", cuando no hay archivo seleccionado. La mayoría de los navegadores muestran un cuadro de lista de desplazamiento para un control {{HTMLElement("select")}} con el atributo {{HTMLAttrxRef("multiple", "input")}} establecido frente a un menú desplegable de una sola línea cuando se omite el atributo. El {{HTMLElement("input")}} {{HTMLElement("input/email", "email")}} muestra lo mismo, pero coincidirá con la pseudoclase {{CSSxRef(':invalid')}} si hay más de una dirección de correo electrónico separada por comas incluido si el atributo no está presente.

+ +

Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el tipo de entrada {{HTMLElement("input/email", "email")}}, el usuario puede incluir cero (si no es {{web.link("/es/docs/Web/HTML/Attributes/required", "required")}} también), una o más direcciones de correo electrónico separadas por comas.

+ +
<input type="email" multiple name="emails" id="emails">
+ +

Si y solo si se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, el valor puede ser una lista de direcciones de correo electrónico separadas por comas y formadas correctamente. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista.

+ +

Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el tipo de entrada {{HTMLElement("input/file", "file")}}, el usuario puede seleccionar uno o más archivos. El usuario puede elegir varios archivos del selector de archivos de cualquier manera que la plataforma elegida lo permita (por ejemplo, manteniendo presionada la tecla Mayús o Control y luego haciendo clic).

+ +
<input type="file" multiple name="uploads" id="uploads">
+ +

Cuando se omite el atributo, el usuario solo puede seleccionar un único archivo por {{HTMLElement("input")}}.

+ +

El atributo {{HTMLAttrxRef("multiple", "input")}} en el elemento {{HTMLElement("select")}} representa un control para seleccionar cero o más opciones de la lista. De lo contrario, el elemento {{HTMLElement("select")}} representa un control para seleccionar una única {{HTMLElement("option")}} de la lista de opciones.

+ +
<select multiple name="drawfs" id="drawfs">
+  <option>Gruñón</option>
+  <option>Feliz</option>
+  <option>Dormilón</option>
+  <option>Tímido</option>
+  <option>Estornudo</option>
+  <option>Tontín</option>
+  <option>Doc</option>
+</select>
+ +

Cuando se especifica {{HTMLAttrxRef("multiple", "input")}}, la mayoría de los navegadores mostrarán un cuadro de lista de desplazamiento en lugar de un menú desplegable de una sola línea.

+ +

Ejemplos

+ +

input para correoᵉ

+ +
<label for="emails">¿A quién deseas enviar un correo electrónico?</label>
+<input type="email" multiple name="emails" id="emails" list="drawfemails" required size="64">
+
+<datalist id="drawfemails">
+  <option value="gruñón@woodworkers.com">Gruñón</option>
+  <option value="feliz@woodworkers.com">Feliz</option>
+  <option value="dormilón@woodworkers.com">Dormilón</option>
+  <option value="tímido@woodworkers.com">Tímido</option>
+  <option value="estornudo@woodworkers.com">Estornudo</option>
+  <option value="tontín@woodworkers.com">Tontín</option>
+  <option value="doc@woodworkers.com">Doc</option>
+</datalist>
+ + + +

Si y solo si se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, el valor puede ser una lista de direcciones de correo electrónico separadas por comas y formadas correctamente. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista. Si el atributo {{web.link("/es/docs/Web/HTML/Attributes/required", "required")}} está presente, se requiere al menos una dirección de correo electrónico.

+ +

Algunos navegadores admiten la aparición de la {{web.link("/es/docs/Web/HTML/Attributes/list", "lista")}} de opciones del {{HTMLElement('datalist')}} para direcciones de correo electrónico posteriores cuando haya varias. Otros no lo hacen.

+ +

{{EmbedLiveSample("input_para_correoᵉ", 600, 80) }}

+ +

input de tipo file

+ +

Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el {{HTMLElement("input")}} de tipo {{HTMLElement("input/file", "file")}}, el usuario puede seleccionar uno o más archivos:

+ +
<form method="post" enctype="multipart/form-data">
+  <p>
+    <label for="uploads">
+       Elige las imágenes que deseas cargar:
+    </label>
+    <input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple>
+  </p>
+  <p>
+    <label for="text">Elige un archivo de texto para cargar: </label>
+    <input type="file" id="text" name="text" accept=".txt">
+ </p>
+  <p>
+    <input type="submit" value="Enviar">
+  </p>
+</form>
+ +

{{EmbedLiveSample("input_de_tipo_file", 600, 80) }}

+ +

Nota la diferencia en la apariencia entre el ejemplo con {{HTMLAttrxRef("multiple", "input")}} establecido y el otro {{HTMLElement("input")}} sin file.

+ +

Cuando se envía el formulario, utilizas el {{web.link("/es/docs/Web/HTML/Element/form", "method='get'")}} el nombre de cada archivo seleccionado se habría agregado a los parámetros de la URL como ?uploads=img1.jpg&uploads=img2.svg. Sin embargo, dado que estamos asumiendo datos de formularios de {{web.link("/es/docs/Web/API/XMLHttpRequest/multipart", "multipart")}}, usamos mucho el post. Consulta el elemento {{HTMLElement('form')}} y {{web.link("/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_method_attribute", "envío de datos del formulario")}} para obtener más información.

+ +

select

+ +

El atributo {{HTMLAttrxRef("multiple", "input")}} en el elemento {{HTMLElement("select")}} representa un control para seleccionar cero o más opciones de la lista. De lo contrario, el elemento {{HTMLElement("select")}} representa un control para seleccionar una única {{HTMLElement("option")}} de la lista de opciones. El control generalmente tiene una apariencia diferente en función de la presencia del atributo {{HTMLAttrxRef("multiple", "input")}}, y la mayoría de los navegadores muestran un cuadro de lista de desplazamiento en lugar de una lista desplegable de una sola línea cuando el atributo está presente.

+ +
<form method="get" action="#">
+<p>
+ <label for="dwarfs">Selecciona los leñadores que te gusten:</label>
+  <select multiple name="drawfs" id="drawfs">
+    <option>gruñón@woodworkers.com</option>
+    <option>feliz@woodworkers.com</option>
+    <option>dormilón@woodworkers.com</option>
+    <option>tímido@woodworkers.com</option>
+    <option>estornudo@woodworkers.com</option>
+    <option>tontín@woodworkers.com</option>
+    <option>doc@woodworkers.com</option>
+  </select>
+</p>
+<p>
+ <label for="favoriteOnly">Selecciona tu favorito:</label>
+  <select name="favoriteOnly" id="favoriteOnly">
+    <option>gruñón@woodworkers.com</option>
+    <option>feliz@woodworkers.com</option>
+    <option>dormilón@woodworkers.com</option>
+    <option>tímido@woodworkers.com</option>
+    <option>estornudo@woodworkers.com</option>
+    <option>tontín@woodworkers.com</option>
+    <option>doc@woodworkers.com</option>
+  </select>
+</p>
+<p>
+  <input type="submit" value="Enviar">
+</p>
+</form>
+ +

{{EmbedLiveSample("select", 600, 120) }}

+ +

Ten en cuenta la diferencia de apariencia entre los dos controles de formulario.

+ +
/* descomenta este CSS para que el multiple tenga la misma altura que single */
+
+/*
+select[multiple] {
+  height: 1.5em;
+  vertical-align: top;
+}
+select[multiple]:focus,
+select[multiple]:active {
+  height: auto;
+}
+*/
+ +

Hay varias formas de seleccionar varias opciones en un elemento <select> con un atributo {{HTMLAttrxRef("multiple", "input")}}. Dependiendo del sistema operativo, los usuarios del ratón pueden mantener presionadas las teclas Ctrl, Comando o Mayús y luego hacer clic en varias opciones para seleccionarlas o deseleccionarlas. Los usuarios de teclado pueden seleccionar varios elementos contiguos centrándose en el elemento <select>, seleccionando un elemento en la parte superior o inferior del rango que desean seleccionar usando Arriba y Teclas del cursor hacia abajo para subir y bajar las opciones. La selección de elementos no contiguos no es tan compatible: los elementos se deben poder seleccionar y deseleccionar presionando Espacio, pero el soporte varía entre los navegadores.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'input.html#attr-input-multiple', 'Atributo multiple')}}{{ Spec2('HTML WHATWG') }}
{{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'Atributo multiple')}}{{ Spec2('HTML5 W3C') }}
+ +

Problemas de accesibilidad

+ +

Proporciona instrucciones para ayudar a los usuarios a comprender cómo completar el formulario y utilizar controles de formulario individuales. Indica cualquier entrada requerida y opcional, formatos de datos y otra información relevante. Cuando utilices el atributo {{HTMLAttrxRef("multiple", "input")}}, informa al usuario que se permiten múltiples valores y proporciona instrucciones sobre cómo proveer más valores, como "direcciones de correo electrónico separadas con una coma".

+ +

Configurar {{web.link("/es/docs/Web/HTML/Attributes/size", "size")}}="1" en una selección múltiple puedes hacer que aparezca como una única selección en algunos navegadores, pero luego no se expande en el enfoque, lo que perjudica la usabilidad. No hagas eso. Si cambias la apariencia de un select, e incluso si no lo haces, asegúrate de informar al usuario que se puede seleccionar más de una opción mediante otro método.

+ +

Ve también

+ +
    +
  • {{HTMLElement('input')}}
    • +
  • {{htmlelement('select')}}
    • +
  • {{web.link("/es/docs/Web/HTML/Element/input/email#Allowing_multiple_e-mail_addresses", "Permitir varias direcciones de correo electrónico")}}
    • +
diff --git a/files/es/web/html/canvas/a_basic_ray-caster/index.html b/files/es/web/html/canvas/a_basic_ray-caster/index.html deleted file mode 100644 index 7917541554..0000000000 --- a/files/es/web/html/canvas/a_basic_ray-caster/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: A basic ray-caster -slug: Web/HTML/Canvas/A_basic_ray-caster -tags: - - Avanzado - - Canvas - - Ejemplo - - Espanol(2) - - Gráficos(2) - - HTML - - Necesita traducción - - Web -translation_of: Web/API/Canvas_API/A_basic_ray-caster ---- -
{{CanvasSidebar}}
- -
-

Este artículo proporciona un interesante ejemplo de la vida real usando el elemento {{HTMLElement("canvas")}} para renderizar un sencillo entorno 3D usando una técnica de render llamada ray-casting.

-
- -

{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}

- -

Abrir en una nueva ventana

- -

¿Por qué?

- -

 

- -

Después de darme cuenta, para mi satisfacción, de que el ingenioso elemento <canvas> sobre el que había estado leyendo, no sólo iba a recibir soporte por parte de Firefox, sino que ya estaba soportado por la versión actual de Safari, así que tenía que ponerme manos a la obra y hacer un pequeño experimento.

- -

El tutorial y el resumen que encontré en la MDN son geniales, pero nadie había escrito nada (todavía) sobre animación, así que pensé que sería una buena oportunidad para portar un sencillo raycaster en el que había trabajado hacía tiempo y comprobar qué tipo de rendimiento podía esperar de un buffer de pixeles controlado por JavaScript.

- -

¿Cómo?

- -

La idea es sencilla, usar {{domxref("WindowTimers.setInterval","setInterval()")}} con un retraso arbitrario que se corresponde con la velocidad de fotogramas deseada. Por cada llamada al intervalo se ejecutará una función que volverá a pintar el elemento <canvas>  en el que se muestra la vista actual del usuario. Sé que podría haber empezado con un ejemplo más simple, pero creo que el tutorial sobre <canvas> vale para eso, y quería ver si podía hacer esto.

- -

Continuemos, por cada actualización, el raycaster comprueba si has presionado alguna tecla, si no has presionado ninguna se mantendrán los cálculos para ahorrar tiempo de ejecución. Si se ha presionado alguna tecla, el <canvas> es borrado, el suelo y el cielo son pintados, la posición y la orientación de la cámara son actualizados, y los rayos son lanzados. Según van intersectando los rayos con las paredes se van pintando líneas verticales de pared del color de la pared con la que han colisionado, mezcladas con una versión más oscura del color en función de la distancia a la que se encuentra la pared. La altura de la línea vertical depende directamente de la distancia a la que el rayo es interesectado, dibujándose centrada con respecto la línea del horizonte.

- -

El código que he terminado usando es una amalgama regurgitada del código que aparece en los capítulos sobre raycasting del libro de André LaMothe Tricks of the Game Programming Gurus y una versión en java de un raycaster que encontré online, a su vez pasado por el filtro de mi pulsión a renombrar todo para que tenga sentido para mí y todo el chapuceo necesario para que las cosas funcionen bien.

- -

Resultados

- -

El <canvas> en Safari 2.0.1 rindió sorprendentemente bien. Renderizando columnas de 8 pixeles de ancho, puedo correr una ventana de 320 x 240 a 24 FPS en mi Apple Mini. Firefox 1.5 Beta 1 es incluso más rápido; puedo correr una ventana de 320 x 240 a 24 FPS con columnas de 4 píxeles de ancho. No es exactamente un nuevo miembro de la familia de ID Software, pero es bastante decente teniendo en cuenta que es un entorno completamente interpretado, y que no me he tenido que preocupar de reservar memoria, ni modos de vídeo o escribir rutinas en ensamblador. Aún así el código intenta ser lo más eficiente posible, usando tablas de acceso rápido para valores precalculados, pero no soy ningún gurú de la optimización, así que seguramente haya varias cosas que se puedan escribir más rápido.

- -

Además, deja bastante que desear en términos de intentar convertir esto en un motor de juego - no hay texturas en las paredes, no hay sprites, no hay puertas, ni siquiera hay teletransportadores que te permitan ir a otro nivel. Pero tengo bastante confianza en que todas esas cosas se podrían añadir con el suficiente tiempo disponible. La API de canvas soporta copiado de píxeles de imágenes, así que tener texturas parece bastante factible. Dejaré esto para otro artículo, seguramente para otra persona. =)

- -

El ray-caster

- -

El gente tan maravillosa que hay aquí han copiado manualmente mis archivos así vosotros podéis echarle un vistazo, y para vuestro disfrute he puesto los archivos individuales como listados de código (ver abajo).

- -

¡Así que aquí lo tenéis, arrancad Safari 1.3+ o Firefox 1.5+ o cualquier otro navegador que soporte el elemento <canvas> y a disfrutar!
-
- input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

- -

Ver también

- - diff --git a/files/es/web/html/canvas/drawing_graphics_with_canvas/index.html b/files/es/web/html/canvas/drawing_graphics_with_canvas/index.html deleted file mode 100644 index 7271aabfb7..0000000000 --- a/files/es/web/html/canvas/drawing_graphics_with_canvas/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Dibujando gráficos con canvas -slug: Web/HTML/Canvas/Drawing_graphics_with_canvas -translation_of: Web/API/Canvas_API/Tutorial -translation_of_original: Web/API/Canvas_API/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/web/html/canvas/index.html b/files/es/web/html/canvas/index.html deleted file mode 100644 index dfdde2bf63..0000000000 --- a/files/es/web/html/canvas/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: API Canvas -slug: Web/HTML/Canvas -tags: - - API - - Canvas - - JavaScript - - Referencia - - introducción -translation_of: Web/API/Canvas_API ---- -
{{CanvasSidebar}}
- -

Añadido en HTML5, el elemento HTML {{HTMLElement("canvas")}} se puede usar para dibujar gráficos mediante scripting en JavaScript. Por ejemplo, se puede usar para hacer gráficas, composiciones fotográficas, crear animaciones, o incluso procesado o renderizado de vídeo en tiempo real.

- -

Las aplicaciones de Mozilla soportan <canvas> desde Gecko 1.8 (es decir, Firefox 1.5). El elemento fue inicialmenmte presentado por Apple para el Dashboard de OS X y Safari. Internet Explorer soporta <canvas> desde la versión 9 en adelante; para versiones anteriores de IE, se puede añadir soporte para <canvas> a una página incluyendo un script del proyecto de Google Explorer Canvas. Google Chrome y Opera 9 también soportan <canvas>.

- -

El elemento <canvas> también se usa en WebGL para dibujar gráficos 3D con aceleración por hardware en páginas web.

- -

Ejemplo

- -

Esto es un trozo de código que usa el método {{domxref("CanvasRenderingContext2D.fillRect()")}}.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.fillStyle = 'green';
-ctx.fillRect(10, 10, 100, 100);
-
- -

Edita este código para ver tus cambios en tiempo real en este canvas:

- - - -

{{ EmbedLiveSample('Código_editable', 700, 360) }}

- -

Referencia

- -
-
    -
  • {{domxref("HTMLCanvasElement")}}
    • -
  • {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasGradient")}}
    • -
  • {{domxref("CanvasImageSource")}}
    • -
  • {{domxref("CanvasPattern")}}
    • -
  • {{domxref("ImageBitmap")}}
    • -
  • {{domxref("ImageData")}}
    • -
  • {{domxref("RenderingContext")}}
    • -
  • {{domxref("TextMetrics")}}
    • -
  • {{domxref("OffscreenCanvas")}}{{experimental_inline}}
    • -
  • {{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}
    • -
-
- -

Las interfaces relacionadas con WebGLRenderingContext están en WebGL.

- -

{{domxref("CanvasCaptureMediaStream")}} está relacionado..

- -

Guías y tutoriales

- -
-
Tutorial Canvas
-
Tutorial exhaustivo que cubre tanto el uso básico de <canvas> como sus características avanzadas.
-
Fragmentos de código: Canvas
-
Algunos fragmentos de código orientados al desarrollador de extensiones usando <canvas>.
-
Demo: Un laberinto básico
-
Una demo de una animación de laberinto usando canvas.
-
Dibujar objetos DOM en un canvas
-
Cómo dibujar contenido DOM, como elementos HTML, en un canvas.
-
Manipulación de vídeo usando canvas
-
Combinando {{HTMLElement("video")}} y {{HTMLElement("canvas")}} para manipular datos de vídeo en tiempo real.
-
- -

Recursos

- -

Genéricos

- - - -

Librerías

- -
    -
  • Fabric.js es una librería open-source para canvas con capacidad de parsear SVG.
    • -
  • Kinetic.js es una librería open-source de canvas enfocada en la interactividad para aplicaciones móviles y de escritorio.
    • -
  • Paper.js es un framework para gráficos vectoriales open source que funciona sobre Canvas HTML5.
    • -
  • Origami.js es una librería ligera open-source para canvas.
    • -
  • libCanvas es un framework ligero y potente para canvas.
    • -
  • Processing.js es un port de PVL (Processing visualization language).
    • -
  • PlayCanvas es un motor open source de juegos.
    • -
  • Pixi.js es un motor open source de juegos.
    • -
  • PlotKit es una librería para hacer gráficas.
    • -
  • Rekapi es una API para animación por frames para Canvas.
    • -
  • PhiloGL es un framework WebGL para visualización de datos, programación creativa y desarrollo de juegos.
    • -
  • JavaScript InfoVis Toolkit crea visualizaciones de datos 2D interactivas para Web.
    • -
  • EaselJS es una librería open source/libre que facilita el uso de canvas para arte y juegos
    • -
  • Scrawl-canvas es otra librería open-source javascript para crear y manipular elementos canvas en 2D
    • -
  • heatmap.js es una librería open-source para crear mapas (heatmaps)
    • -
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML WHATWG')}} 
- -

Ver también

- - diff --git "a/files/es/web/html/consejos_para_la_creaci\303\263n_de_p\303\241ginas_html_de_carga_r\303\241pida/index.html" "b/files/es/web/html/consejos_para_la_creaci\303\263n_de_p\303\241ginas_html_de_carga_r\303\241pida/index.html" deleted file mode 100644 index b44128e05d..0000000000 --- "a/files/es/web/html/consejos_para_la_creaci\303\263n_de_p\303\241ginas_html_de_carga_r\303\241pida/index.html" +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Consejos para la creación de páginas HTML de carga rápida -slug: Web/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida -tags: - - Consejos - - HTML - - Rapido - - Tips -translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages ---- -

Consejos para la creación de páginas HTML de carga rápida

- -

Estos consejos estan basados en conocimiento común y experimentación.

- -

Una página web optimizada no solo provee una mayor respuesta a su sitio por parte de los visitantes, sino que también reduce la carga en su servidores web y en su conexión de internet. Esto puede ser crucial para sitios con alto volumen o sitios que tienen un pico de trafico debido a circunstancias inucuales como noticias de ultima hora.

- -

Optimizar la carga de páginas no es solo para el contenido que será visto atraves de una estrecha conexión telefónica o dispositivos móviles. Es tan importante para el contenido de banda ancha y puede conducir a mejoras espectaculares incluso para sus visitantes con las conexiones más rápidas.

- -

Consejos

- -

Reducir el peso de las páginas web

- -

El peso de las páginas web es por mucho el factor más importante en el rendimiento de carga de una página.

- -

Reducir el peso de la página mediante la eliminación de espacios en blanco innecesarios y comentarios, comunmente se coonoce como minimalización, y al mover "inline-script" y "CSS" a un archivo externo, puede mejorar el rendimiento de la descarga con minimas necesidades de otros cambios en la estructura de la página.

- -

Herramientas como HTML Tidy pueden quitar automáticamente espacios en blanco y las líneas en blanco adicionales de código fuente HTML valido. Otras herramientas pueden "comprimir" JavaScript al reformatear el codigo fuente o por ofuscación la fuente y la sustitución de los identificadores largos con versiones mas cortas.

- -

Minimizar el número de archivos

- -

Reducir el número de archivos referentes en una pagina web baja el número de conexiones HTTP requeridas para bajar la página.

- -

Dependiendo de la configuración de cache de un navegador, puede enviar una petición "If-Modified-Since" al servidor web para cada "CSS", JavaScript o archivo de imágen, preguntando si el archivo ha sido modificado desde la ultima vez que fué descargado.

- -

Al reducir el número de archivos que son refereciados dentro de una página web, se reduce el tiempo necesario para que estas solicitudes se envíen, y para que  sus respuestas que se reciban.

- -

Si se usan muchas imágenes de fondo en sus "CSS", puedes reducir la cantidad de busquedas HTTP necesarias al combinar las imagenes en una, conocido como "image sprite". Luego solamente se aplica la misma imagen cada vez que lo necesite para un fondo, ajustando las coordenadas el eje (X / Y) adecuadamente. Estas técnica trabaja mejor con elementos que tendrán dimensiones limitadas, no funcionará para todos los usos de imagenes de fondo, sin embargo, la menor cantidad de pedidos HTTP y el uso de una única imágen en caché puede reducir el timepo de carga de una página.

- -

Demasiado tiempo gastado en consultar la ultima modificación de los archivos referenciados puede demorar la pantalla inicial de una página web, ya que el explorador debe comprobar la fecha de modificación de cada archivo CSS o JavaScript, antes de pintar la página.

- -

Reducir la busqueda de dominios

- -

Debido a que cada dominio separado cuesta tiempo en una busqeuda DNS, el tiempo de carga de la página crecerá junto con el número de dominios que aparecen en enlace CSS (s),  JavaScript y recursos de imagen.

- -

Esto no puede ser siempre práctico; sin embargo siempre se debe tener cuidado de usar sólo el número mínimo necesario de los diferentes dominios en sus páginas.

- -

Reutilización de contenido de cache

- -

Asegúrese de que cualquier contenido que se pueden almacenar en caché, se almacena en caché, y con fechas de caducidad correspondientes.

- -

En particular, prestar atención a la cabecera "Last-Modified". Permite el eficiente almacenamiento en cache de la página; por medio de esta cabecera, la información se transmite al agente de usuario sobre el archivo que quiere cargar, por ejemplo, como cuando fue modificada por última vez. La mayoría de los servidores web añadirá automáticamente la cabecera Last-Modified para páginas estáticas (por ejemplo .html, .css), basado en la fecha de última modificación almacenada en el sistema de archivos. Con páginas dinámicas (por ejemplo, .php, .aspx), esto, por supuesto, no se puede hacer, y la cabecera no se envía.

- -

Así, en particular para las páginas que se generan de forma dinámica, un poco de investigación sobre este tema es beneficioso. Puede ser un poco complicada, pero se ahorrará mucho en las solicitudes de página en las páginas que normalmente no serían cacheable.

diff --git a/files/es/web/html/cors_enabled_image/index.html b/files/es/web/html/cors_enabled_image/index.html new file mode 100644 index 0000000000..4de4e94617 --- /dev/null +++ b/files/es/web/html/cors_enabled_image/index.html @@ -0,0 +1,115 @@ +--- +title: Imagen con CORS habilitado +slug: Web/HTML/Imagen_con_CORS_habilitado +tags: + - Avanzado + - CORS + - Canvas + - HTML + - Referencia + - Seguridad +translation_of: Web/HTML/CORS_enabled_image +--- +

La especificación HTML introduce un atributo {{ htmlattrxref("crossorigin", "img") }} para imágenes que, en conjunto con el encabezado  {{Glossary("CORS")}} apropiado, permite definir imágenes con el elemento {{ HTMLElement("img") }} que se carguen de orígenes externos dentro de un lienzo (canvas) como si estas fuesen cargadas del origen actual.

+ +

Vea el artículo "Atributos de configuración CORS" para mas detalles de como el atributo "crossorigin" es usado.

+ +

¿Qué es un "tainted" canvas? 

+ +

Aunque puedes usar imágenes sin la aprobación del CORS en el elemento canvas, hacerlo puede "manchar" el canvas. Por ejemplo, no puedes usar los métodos canvas toBlob(), toDataURL(), or getImageData(). Si los usas se lanzará un mensaje de seguridad.

+ +

Esto protegerá a los usuarios de tener información privada usada por medio de imágenes que cogen información desde otras web sin permiso.

+ +

Ejemplo: Almacenando una imagen desde un origen externo

+ +

Debes de tener un servidor de hosting de imágenes con el apropiado Access-Control-Allow-Origin header. Añadiendo el atributo crossOrigin crea un request header.

+ +

Puedes utilizar este fragemto de la configuración del servidor Apache del Boilerplate HTML5 para responder apropiadamente con este encabezado de respuesta.

+ +
<IfModule mod_setenvif.c>
+    <IfModule mod_headers.c>
+        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
+            SetEnvIf Origin ":" IS_CORS
+            Header set Access-Control-Allow-Origin "*" env=IS_CORS
+        </FilesMatch>
+    </IfModule>
+</IfModule>
+ +

Dado que está todo ordenado, serás capás de guardar esas imagenes en el almacenamiento del DOM, así como si fueran solicitados de tu dominio.

+ +
var img = new Image,
+    canvas = document.createElement("canvas"),
+    ctx = canvas.getContext("2d"),
+    src = "http://example.com/image"; // insert image url here
+
+img.crossOrigin = "Anonymous";
+
+img.onload = function() {
+    canvas.width = img.width;
+    canvas.height = img.height;
+    ctx.drawImage( img, 0, 0 );
+    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
+}
+img.src = src;
+// make sure the load event fires for cached images too
+if ( img.complete || img.complete === undefined ) {
+    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
+    img.src = src;
+}
+ +

Compatibilidad con los navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico138{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

También puede ver

+ + diff --git a/files/es/web/html/element/a/index.html b/files/es/web/html/element/a/index.html new file mode 100644 index 0000000000..e35402f7a5 --- /dev/null +++ b/files/es/web/html/element/a/index.html @@ -0,0 +1,321 @@ +--- +title: +slug: Web/HTML/Elemento/a +tags: + - Contenido + - Ejemplo + - Elemento + - HTML + - Principiante + - Referencia + - Web +translation_of: Web/HTML/Element/a +--- +
{{HTMLRef}}
+ +

El Elemento HTML Anchor <a> crea un enlace a otras páginas de internet, archivos o ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra URL.

+ +
{{EmbedInteractiveExample("pages/tabbed/a.html")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoContenido de flujo, contenido de párrafo, contenido interactivo, contenido palpable
Contenido permitidoTransparente, que contiene contenido de flujo (excluyendo contenido interactivo) o contenido de párrafo.
Omisión de etiquetas{{no_tag_omission}}
Elementos principales permitidosCualquier elemento que acepte contenido de párrafo o cualquier elemento que acepte contenido de flujo, sin embargo simpre excluyendo los elementos <a> (de acuerdo con el principio lógico de simetría, si una etiqueta <a> como padre, no puede contener contenido interactivo, entonces el mismo contenido de <a> no puede tener una etiqueta <a> como su padre).
Roles ARIA permitidos{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}
Interfaz DOM{{domxref("HTMLAnchorElement")}}
+ +

Atributos

+ +

Este elemento incluye los atributos globales.

+ +
+
{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}
+
Este atributo, indica descargar a los navegadores una URL en lugar de navegar hacia ella, por lo que el usuario será dirigido para salvarla como un archivo local.  Si el atributo tiene un valor, éste se utilizará como nombre de archivo por defecto en el mensaje Guardar que se abre cuando el usuario hace clic en el enlace (sin embargo, el usuario puede cambiar el nombre antes de guardar el archivo). No hay restricciones sobre los valores permitidos, aunque: / y: \ se convertirán en guiones bajos (underscores), lo que evitará sugerencias de ruta específicas.  Se debe tener en cuenta que la mayoría de los sistemas de archivos tienen limitaciones con respecto a los símbolos de puntuación admitidos en los nombres de archivo, por lo que los navegadores ajustarán los nombres de los archivos en consecuencia. +
Notas: +
    +
  • Este atributo sólo funciona para las políticas de mismo origen (same-origin URLs).
    • +
  • Este atributo puede ser utilizado con blob: URLs y data: URLs para descargar contenido generado por JavaScript, tales como fotografías creadas por una aplicación web de edición de imágenes.
    • +
  • Si el encabezado (header) HTTP Content-Disposition: proporciona un nombre de archivo diferente al de este atributo, el encabezado HTTP tiene prioridad sobre este atributo.
    • +
  • Si Content-Disposition: está ajustado a inline, Firefox prioriza Content-Disposition, como en el caso del nombre de archivo, mientras que Chrome prioriza el atributo download.
    • +
+
+
+
{{htmlattrdef("href")}}
+
Contiene una URL o un fragmento de URL al cual apunta el enlace.
+
Un fragmento de URL es un nombre ("name") precedido por el símbolo de número (#), el cual especifíca una ubicación interna objetivo (un ID de un elemento HTML) dentro del actual documento. Las URLs no están restringidas sólo a documentos de internet basados en HTTP, sin embargo pueden utilizar cualquier protocolo soportado por el navegador. Por ejemplo, file:, ftp:, and mailto: funcionan en la mayoría de los navegadores.
+
Este atributo puede ser omitido (a partir de HTML5) para crear un enlace de marcador de posición. Un enlace de marcador de posición se parece a un enlace tradicional, pero que no dirige a algún lugar. +
+

Nota: Puede ser utilizado href="#top" o un fragmento vacío href="#" para enlazar a la parte superior de la página actual. Este comportamiento está especficado en HTML5.

+
+
+
{{htmlattrdef("hreflang")}}
+
Este atributo indica el lenguaje humano del recurso al que se enlaza. Este es únicamente informativo, sin ninguna funcionalidad incorporada. Los valores permitidos están determinados por BCP47.
+
{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
+
Indica que referencia (referer) enviar cuado la URL es recuperada: +
    +
  • 'no-referrer' significa Referer: el encabezado no será enviado.
    • +
  • 'no-referrer-when-downgrade' significa sin Referer: el encabezado será enviado cuando se navega a un origen (origin) sin HTTPS. Este es un comportamiento por defecto.
    • +
  • 'origin' significa que el "referrer" estará en el origen (origin) de la página, no incluye la información posterior al dominio.
    • +
  • 'origin-when-cross-origin' significa que la navegación a otros orígenes (origins) será limitada al esquema (scheme), el host y el puerto, mientras que la navegación en el mismo origen (origin) incuirá la trayectoria de referencia (referrer's path).
    • +
  • 'unsafe-url' significa que la referencia (referrer) incuirá el origen(origin) y la trayectoria (path), pero no el fragmento, contraseña o nombre de usuario. Esto es inseguro, ya que puede filtrar datos desde una URL segura hacia URLs inseguras.
    • +
+
+
{{htmlattrdef("rel")}}
+
Especifica la relación del objeto de destino con el objeto de enlace. El valor es una lista separada por espacios de tipos de enlace tipos de enlace (link types).
+
{{htmlattrdef("target")}}
+
Especifica en donde desplegar la URL enlazada. Es un nombre (name of), o palabra clave (keyword for), un contexto de navegación (browsing context): una pestaña, ventana, o <iframe>. Las siguientes palabras clave (keywords) tienen significado especial: +
    +
  • _self: Carga la URL en el mismo contexto de navegación que el actual. Este es el comportamiento por defecto.
    • +
  • _blank: Carga la URL en un nuevo contexto de navegación. Usualmente es una pestaña, sin embargo, los usuarios pueden configurar los navegadores para utilizar una ventana nueva en lugar de la pestaña.
    • +
  • _parent: Carga la URL en el contexto de navegación padre (parent) del actual. Si no existe el padre, este se comporta del mismo modo que _self.
    • +
  • _top: Carga la URL en le contexto más alto de navegación (el cual es un ancestro del actual, y no tiene padre (parent)). Si no hay padre (parent), este se comporta del mismo modo que _self.
    • +
+ +
+

Nota: Cuando se utiliza target, considera agregar rel="noopener noreferrer" para evitar el uso de la API window.opener.

+
+
+
{{htmlattrdef("type")}}
+
Especifica el tipo de medio (media type) en la forma de {{Glossary("MIME type")}} para la URL enlazada. Esto es únicamente informativo, sin ninguna funcionalidad incorporada.
+
+

Obsoleto

+
+
{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}
+
Este atributo define la codificación de caracteres (character encoding) de la URL enlazada. El valor debe de ser una lista delimitada por espacio y/o coma de caracteres definidos en RFC 2045. El valor por defecto es ISO-8859-1. +
+

Nota de uso: Este atributo es obsoleto en HTML5 y no debe ser utilizado por autores. Para lograr su efecto, se debe utilzar el encabezado HTTP Content-Type: en la URL enlazada.

+
+
+
{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Para utilizar con el siguiente atributo shape, este atributo utiliza una lista de números separada por comas para definir las coordenadas del enlace en la página.
+
{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Este atributo era requerido para anclas (anchors) que definían una posible ubicación dentro de la página. En HTML 4.01, id y name podían ser utilizados simultáneamente en un elemento <a> simpre y cuando tuvieran valores idénticos. +
+

Nota de uso: Este atributo es obsoleto en HTML5, se utiliza el atributo global id en su lugar.

+
+
+
{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Este atributo especifica un enlace inverso, la relación inversa del atributo rel. Fue desechado por ser muy confuso.
+
{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Este atributo era utilizado para definir una región de enlaces para crear un mapa de imagen. El valore es circle, default, polygon, y rect. El formato del atributo coords depende del valor de la forma geométrica. Para circle, el valor es x,y,r donde x y y son las coordenadas en pixel para el centro del círculo y  r es el valor del radio en pixeles. Para rect, el atributo coords debe ser x,y,w,h. Los valores x y y definen la esquina superior izquierda del rectángulo, mientras que w y h definen el ancho y el alto respectivamente. Un valor del polygon para shape requiere los valores x1,y1,x2,y2,...para coords. Cada uno de los pares x,y definen un punto en el polígono, con puntos sucesivos que son unidos por líneas rectas y el útlimo punto se une al primer punto. El valor default para shape Requiere que el área encerrada, típicamente una imágen, sea utilizada. +
Nota: Utilice el atributo usemap para el elemento {{HTMLElement("img")}} y el elemento asociado {{HTMLElement("map")}} para definir puntos de acceso (hotspots) en lugar del atributo shape.
+
+
+ +
+

+ +

Ejemplos

+ +

Enlazando a una ubicación externa

+ +
<!-- anclaje a un archivo externo -->
+<a href="https://www.mozilla.com/">
+Enlace externo
+</a>
+ +

Resultado

+ +

Enlace externo

+ +

Enlazando a otra sección de la misma página

+ +
<!-- enlace a un elemento en esta página con id="attr-href" -->
+<a href="#attr-href">
+Descripción de enlaces de la misma página
+</a>
+ +

Resultado

+ +

Descripción de enlaces de la misma página

+ +

Creando una imagen clicable

+ +

Este ejemplo utiliza una imagen que enlaza a la página de inicio de MDN. La página de inicio se abrirá en un contexto de navegación nuevo, esto es, en una nueva página o nueva ventana.

+ +
<a href="https://developer.mozilla.org/en-US/" target="_blank">
+  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"
+       alt="MDN logo" />
+</a>
+ +

Resulta

+ +
+

{{EmbedLiveSample("Creating_a_clickable_image", "320", "64")}}

+
+ +

Creando un enlace de correo

+ +

Es común crear enlaces que abren el programa de correo del usuario para permitir enviar un nuevo mensaje. Esto se hace con un enlace mailto:. Aquí tenemos un ejemplo:

+ +
<a href="mailto:nowhere@mozilla.org">Enviar correo a nowhere</a>
+ +

Resultado

+ +

Envia un correo a: nowhere

+ +

Para detalles adicionales acerca del esquema de la URL mailto, tales como incluir el asunto, el cuerpo u otros contenidos predeterminados, consultar Enlaces de correo (Email links) o {{RFC(6068)}}.

+ +

Creando un enlace a un número de teléfono

+ +

Ofrecer enlaces a números de teléfono es muy útil para los ususarios que observan documentos de internet desde computadoras portátiles conectadas a teléfonos o desde teléfonos celulares (móviles)

+ +
<a href="tel:+491570156">+49 157 0156</a>
+ +

Para detalles adicionales acerca del esquema de la URL tel, consultar {{RFC(2806)}} y {{RFC(2396)}}.

+ +

Utilizando el atributo download para guardar un  <canvas> como PNG

+ +

Si deseas permitir a los usurios descargar una elemento HTML {{HTMLElement("canvas")}} como una imagen, puedes crear un enlace con una atributo download y la información canvas como un archivo URL:

+ +
var link = document.createElement('a');
+link.innerHTML = 'download image';
+
+link.addEventListener('click', function(ev) {
+    link.href = canvas.toDataURL();
+    link.download = "mypainting.png";
+}, false);
+
+document.body.appendChild(link);
+ +

Puedes ver como funciona en: jsfiddle.net/codepo8/V6ufG/2/.

+ +

Notas

+ +

HTML 3.2 define sólo los atributos name, href, rel, rev, y title.

+ +

Recomendaciones de accesibilidad

+ +

Se abusa frecuntemente de las etiquetas de ancla (anchor tags) con el uso de los eventos onclick para crear pseudo-botones ajustando href a "#" o "javascript:void(0)" para prevenir la recarga de la página. Estos valores provocan comportamientos inesperados con los enlaces de copiado/dibujado, la apertura de enlaces en nuevas pestañas/ventanas, el guardado de enlaces (bookmarking), y cuando JavaScript está aún descargando, esto arroja errores, o es deshabilitado. Esto tambíen lleva a semánticas (semantics) incorrectas para tecnologías de asistencia (p.ej., lectores de pantalla). En estos casos, se recomienda utilizar un {{HTMLElement("button")}} en su lugar. En general, sólo se debe utilizar una ancla (anchor) para navegación utilizando una URL adecuada.

+ +

Cliceo y enfoque

+ +

Cuando se clicea sobre un {{HTMLElement("a")}} las consecuencias varían de acuerdo al navegador y el sistema operativo.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
¿Al hacer clic en un {{HTMLElement("a")}} se enfoca?
Navegadores de escritorioWindows 8.1OS X 10.9
Firefox 30.0SiSi
Chrome ≥39
+ (Chromium bug 388666)		SiSi
Safari 7.0.5N/ASólo cuando tiene un tabindex
Internet Explorer 11SiN/A
Presto (Opera 12)SiSi
+ + + + + + + + + + + + + + + + + + + + +
¿Al hacer un clic en un {{HTMLElement("a")}} se enfoca?
Navegadores móvilesiOS 7.1.2Android 4.4.4
Safari MobileSólo cuando tiene un tabindexN/A
Chrome 35???Sólo cuando tiene un tabindex
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}{{Spec2("Referrer Policy")}}Added the referrerpolicy attribute.
{{SpecName("HTML WHATWG", "textlevel-semantics.html#the-a-element", "<a>")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5 W3C", "textlevel-semantics.html#the-a-element", "<a>")}}{{Spec2("HTML5 W3C")}}
{{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}}{{Spec2("HTML4.01")}}
+ +

Compatibilidad de navegadores

+ + + +

{{Compat("html.elements.a")}}

+ +

Consultar también

+ +
    +
  • Otros elementos comunicando a nivel semántico de texto (text-level semantics): {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.
    • +
diff --git a/files/es/web/html/element/abbr/index.html b/files/es/web/html/element/abbr/index.html new file mode 100644 index 0000000000..8646722071 --- /dev/null +++ b/files/es/web/html/element/abbr/index.html @@ -0,0 +1,147 @@ +--- +title: +slug: Web/HTML/Elemento/abbr +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/abbr +--- +

{{HTMLRef}}

+ +

El elemento HTML <abbr> (o Elemento de Abreviación HTML) representa una abreviación o acrónimo; el atributo opcional {{htmlattrxref("title")}} puede ampliar o describir la abreviatura. Si está presente, el atributo title debe contener la descripción completa y nada más.

+ +
<p>I do <abbr title="Hypertext Markup Language">HTML</abbr></p>
+ +

El artículo Cómo marcar abreviaciones y hacerlas entendibles es una guía para aprender a usar <abbr> y elementos relacionados.

+ + + + + + + + + + + + + + + + + + + + +
Interfaz DOM{{domxref("HTMLElement")}}
Categorías de contenidoContenido dinámico, contenido estático o de texto, contenido palpable
Conteido permitidoContenido de estático o de texto
Elementos padre permitidosCualquier elemento que acepte contenido estático o de texto
+ +

Atributos

+ +

Este elemento sólo incluye los atributos globales. El atributo {{htmlattrxref("title")}} tiene un sentido específicamente semántico cuando es usado con el elemento <abbr>; debe contener una completa descripción o ampliación de la abreviación. Este texto es usualmente presentado por los navegadores como tooltip cuando se pasa el mouse sobre el elemento.

+ +

Cada elemento <abbr> usado es independiente de todos los otros; dar un <title> a uno no hace que automáticamente todos los demás adquieran la misma descripción.

+ +
+

Nota: En lenguajes con números gramaticales (especialmente lenguajes con más de dos números, como el Árabe), utiliza el mismo número gramatical en el atributo title como dentro del elemento <abbr>.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilidad de navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support2.0{{CompatGeckoDesktop(1.0)}} [1]7.01.3{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Hasta Gecko 1.9.2 (Firefox 3.6), Firefox implementó la interfaz {{domxref("HTMLSpanElement")}} para este elemento en lugar de la interfaz {{domxref("HTMLElement")}}.

+ +

Estilo por defecto

+ +

El propósito de este elemento es puramente para la conveniencia del autor y por defecto todos los navegadores lo muestran en línea ({{cssxref('display')}}: inline), sin embargo su estilo por defecto varía de un navegador a otro:

+ +
    +
  • Algunos navegadores, como Internet Exlorer, no lo diseñan de manera diferente que el elemento {{HTMLElement("span")}}.
    • +
  • Opera, Firefox, y algunos otros añaden un subrayado de puntos al contenido del elemento.
    • +
  • Algunos navegadores no sólo añaden un subrayado de puntos, sino que también lo ponen en minúsculas; para evitar este estilo, añadir algo como {{cssxref('font-variant')}}: none en CSS se hace cargo de este caso.
    • +
+ +

Ver también

+ +
    +
  • Utilizando el elemento <abbr>
    • +
  • Otros elementos de nivel semántico de texto: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.
    • +
+ +
 
diff --git a/files/es/web/html/element/acronym/index.html b/files/es/web/html/element/acronym/index.html new file mode 100644 index 0000000000..94581489a3 --- /dev/null +++ b/files/es/web/html/element/acronym/index.html @@ -0,0 +1,160 @@ +--- +title: acronym +slug: Web/HTML/Elemento/acronym +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/acronym +--- +

Definición

+ +

acromym de acromyn=acrónimo

+ +

Es el encargado para marcar estas formas abreviadas (modem, AJAX...). Además, gracias al atributo title podemos indicar la versión extendida del término.

+ +
+
Sus etiquetas son: <abbr> y </abbr> (ambas obligatorias).
+
+ +
+
Crea una caja: en linea.
+
+ +
+
Está definido como: Elemento de frase.
+
+ +
+
Puede contener: cero o más elementos en linea
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalorpor omisión
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible. Sensible a M/m..Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m.Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. cdataLo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo.Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma.Lo fija el navegador. PD.: "desconocido".
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Lo fija el navegador. PD.: En castellano 'ltr'.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
No tiene
atributodescripciónvalorpor omisión
+ +

Ejemplos de uso

+ +
+

+ <p>
+ El acrónimo de moda es:
+ <acronym lang="en" title="Asynchronous JavaScript and XML">Ajax</acronym>.
+ </p>
+ 
+
+
+ +

Estilo predeterminado

+ +

En Firefox se resalta con un "subrayado" punteado fino. vea el ejemplo:

+ +

+ <p>
+ el <abbr lang="en" title="Mocilla developer center">MDC</abbr> toma el
+ <span style='border-bottom: dotted thin;'
+ title='esto no es ni una abreviatura ni un acrónimo'>relevo</span> de lo que fue el
+ <acronym lang="en" title="DEVeloper.Mozilla.Org">Devmo</acronym>.
+ </p>
+ 
+
+ +

Cabe destacar que abbr y acronym comparten estilo predeterminado.

+ +

Soporte

+ +

Puede consultar esta comparativa: IE6 vs IE7 vs FF1.5 vs OP9.

+ +

Notas

+ +

El tema de las abreviaturas y acrónimos puede ser un tanto lioso. En castellano a veces cuesta saber si tal 'palabra' es una abreviatura, un acrónimo una sigla o un símbolo. Para complicarlo un poco más, resulta que el estándar html está en inglés y parece ser que las gramáticas castellana e inglesa no definen exactamente igual conceptos como abreviatura o acrónimo.

+ +

Referencia

+ +
    +
  • El elemento acronym en el estándar HTML 4.01
    • +
+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber como hacerlo consulta MDC:Como ayudar.

+
+ +

Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/address/index.html b/files/es/web/html/element/address/index.html new file mode 100644 index 0000000000..fdfacfeba1 --- /dev/null +++ b/files/es/web/html/element/address/index.html @@ -0,0 +1,163 @@ +--- +title:
+slug: Web/HTML/Elemento/address +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/address +--- +

{{HTMLRef}}

+ +

El elemento HTML <address> aporta información de contacto para su {{HTMLElement("article")}} más cercano o ancestro {{HTMLElement("body")}}; en el último caso lo aplica a todo el documento.

+ +
+

Notas de uso:

+ +
    +
  • Para representar una dirección arbitraria, una que no esté relacionada con la información de contacto, utiliza un elemento {{HTMLElement("p")}} en lugar del elemento <address>.
    • +
  • Este elemento no debe contener más información que la información de contacto, como una fecha de publicación (que pertenece al elemento {{HTMLElement("time")}}).
    • +
  • Normalmente un elemento <address> puede ser colocado dentro del elemento {{HTMLElement("footer")}} de la sección actual, si lo hay.
    • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoContenido dinámico, contenido palpable
Contenido permitido +

Contenido dinámico, pero no con elementos <address> anidados, no contenidos de cabecera ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), no contenido de sección ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), y no elemento {{HTMLElement("header")}} o {{HTMLElement("footer")}}.

+
Etiqueta de omisión{{no_tag_omission}}
Elementos padre permitidosCualquier elemento que acepte contenido dinámico.
Interfaz DOM +

{{domxref("HTMLElement")}} antes de Gecko 2.0 (Firefox 4), Gecko implementó este elemento usando la interfaz {{domxref("HTMLSpanElement")}}.

+
+ +

Atributos

+ +

Este elemento solo incluye los atributos globales.

+ +

Example

+ +
  <address>
+    You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
+    If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
+    You may also want to visit us:<br>
+    Mozilla Foundation<br>
+    1981 Landings Drive<br>
+    Building K<br>
+    Mountain View, CA 94043-0801<br>
+    USA
+  </address>
+
+ +

Above HTML will output:

+ +

Image:HTML-address.png

+ +

Aunque el elemento de dirección representa el texto con el mismo estilo predeterminado de los elementos {{HTMLElement("i")}} o {{HTMLElement("em")}}, es más apropiado utilizarlo cuando se trata información de contacto, ya que transmite la información semántica adicional.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'sections.html#the-address-element', '<address>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '<address>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilidad de navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.7")}}1.05.121.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.7")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ +
    +
  • Otras elementos de sección relacionados: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};
    • +
  • Secciones y línea generales de un documento HTML5.
    • +
diff --git a/files/es/web/html/element/applet/index.html b/files/es/web/html/element/applet/index.html new file mode 100644 index 0000000000..51282989af --- /dev/null +++ b/files/es/web/html/element/applet/index.html @@ -0,0 +1,236 @@ +--- +title: applet +slug: Web/HTML/Elemento/applet +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/applet +--- +

Definición

+ +

Permite añadir un applet Java en un documento HTML. Es un elemento Desaprobado En su lugar debe usarse el elemento object, su uso solo es válido declarando el dtd transicional.

+ +
+
Sus etiquetas son: <applet> y </applet> (ambas obligatorias)
+
+ +
+
Crea una caja: en linea.
+
+ +
+
Está definido como: Elemento especial. Desaprobado
+
+ +
+
Puede contener cero o más elementos param o del tipo 'en flujo'.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributovalordescripción
Genericos
title TextoImplícitoTítulo consultivo del elemento.
style Reglas de estilo CSSImplí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
No tiene
De transición
declare (declare)ImplícitoInformación sobre el idioma.
classid Una direcciónImplícitoIdentifica una implementación.
codebase Una direcciónImplícitoURI base para classid, datos, archivo.
data Una direcciónImplícitoReferencia a los datos del objeto.
type Tipo MIMEImplícitoTipo de contenido de los datos.
codetype Tipo MIMEImplícitoTipo de contenido del código.
archive DireccionesImplícitoLista de URIs separados por espacios.
standby TextoImplícitoMensaje a mostrar durente la carga.
height TamañoImplícitoEspecificar nueva altura.
width TamañoImplícitoEspecificar nueva anchura.
usemap Una direcciónImplícitoUsar mapa de imágenes en el cliente.
name CDATAImplícitoEnviar como parte de un formulario.
tabindex NúmeroImplícitoPosición en el orden de tabulación.
align Uno de los siguientes: "top", "middle", "bottom", "left", "right".ImplícitoAlineación vertical u horizontal.
border PíxelesImplícitoGrosor del borde del vínculo.
hspace PíxelesImplícitoespacio horizontal.
vspace PíxelesImplícitoEspacio vertical.
 %reserved;   Reservado para posibles usos futuros.
atributovalordescripción
+ +

Ejemplos

+ +
 Ejemplo con applet:
+
+   <applet code="loquesea.class"
+            width="500" height="500">
+       <!-- Aquí los contenidos alternativos por si falla el applet. -->
+  </applet>
+
+  Lo mismo pero usando el elemento object:
+
+  <object  codetype="application/java"
+            classid="java:loquesea.class"
+            width="500" height="500">
+     <!-- Aquí los contenidos alternativos por si falla el applet. -->
+  </object>
+
+ +

 

+ +

Comentarios

+ +

El contenido de applet actúa como información alternativa para agentes de usuario que no soporten este elemento o que estén configurados para no soportar applets. En cualquier otro caso los agentes de usuario deben ignorar el contenido.

+ +

Referencia

+ + + +

secciones futuras: == Soporte de los navegadores == == Valores por defecto y visualización en Firefox ==

diff --git a/files/es/web/html/element/area/index.html b/files/es/web/html/element/area/index.html new file mode 100644 index 0000000000..201e8745a2 --- /dev/null +++ b/files/es/web/html/element/area/index.html @@ -0,0 +1,212 @@ +--- +title: area +slug: Web/HTML/Elemento/area +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/area +--- +

Definición

+ +

area de area=área

+ +

Sirve para crear las distintas secciones en las que se puede dividir un mapas de imágenes en el cliente.

+ +
+
Sus etiquetas son: <area> (solo tiene una).
+
+ +
+
Crea una caja: No.
+
+ +
+
Es un: Elemento para mapas de imágenes.
+
+ +
+
Puede contener: Nada.
+
+ +
+
Solo puede ser hijo de: Elementos map.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalorpor omisión
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible. Sensible a M/m..Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m.Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. cdataLo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo.Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma.Lo fija el navegador. PD.: "desconocido".
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Lo fija el navegador. PD.: En castellano 'ltr'.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
shape Indica la forma del área del mapa.Uno de los siguientes: 'rect', 'circle', 'poly', o 'default'.PD.: 'rect'
coords Indica las coordenadas (x,y) del área del mapa.Lista de: cantidades de píxeles, o porcentajes de espacio disponible. Separadas por comas.Lo fija el navegador.
href La dirección del recurso vínculado.Una dirección URI. Sensible a M/m. (o no).Lo fija el navegador.
nohref Indica que el área no es activa, no tiene enlace.Uno: 'nohref'Lo fija el navegador.
alt Describe el área o su vínculo, es necesario por que area no tiene contenido.Texto legible. Sensible a M/m.Requerido
accesskey Define una tecla de acceso rápido. Importante para la Accesibilidad.Un carácter o letra.Lo fija el navegador.
tabindex Asigna un número de posición en el orden de tabulación.Un número entre 0 y 32767.Lo fija el navegador.
Eventos: onfocus, onblur.
De transición
target Indica el marco en el que se cargará el recurso.Puede ser el nombre de un marco existente, o un nombre reservadoLo fija el navegador.
atributodescripciónvalorpor omisión
+ +

Ejemplos de uso

+ +
+

Un mapa de imágenes dividido en dos

+ +

+ <object data="http://developer.mozilla.org/wiki-images/es/3/39/Firefoxlogo.png"
+         usemap="#map1" type="image/png"
+         width="135" height="155">
+
+   <map name="map1">
+     <area href="http://www.mozilla.com/firefox/"
+       alt="El navegador"
+       shape="rect"
+       coords="0,0,60,155">
+
+     <area href="http://www.mozilla.com/thunderbird/"
+       alt="El gestor de correo"
+       shape="rect"
+       coords="75,0,135,155">
+   </map>
+ </object>
+ 
+
+
+ +

Soporte

+ +

Puede consultar esta comparativa: IE6 vs IE7 vs FF1.5 vs OP9.

+ +

Estilo predeterminado

+ +

Notas

+ +
    +
  • area es un elemento antiguo con el que pueden hacerse mapas simples y poco accesibles. No se recomienda su uso, es preferible diseñar los mapas con elementos en bloque y anclas.
    • +
+ +

Referencia

+ + + +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras! Disculpen las molestias.

+ +

¿Quieres participar en su ampliación? Para saber como hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/article/index.html b/files/es/web/html/element/article/index.html new file mode 100644 index 0000000000..8df680ad6b --- /dev/null +++ b/files/es/web/html/element/article/index.html @@ -0,0 +1,60 @@ +--- +title: article +slug: Web/HTML/Elemento/article +translation_of: Web/HTML/Element/article +--- +

El Elemento article de HTML (<article>) representa una composición auto-contenida en un documento, página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o reutilizable, por ejemplo, en la indicación. Podría ser un mensaje en un foro, un artículo de una revista o un periódico, una entrada de blog, un comentario de un usuario, un widget interactivo o gadget, o cualquier otro elemento independiente del contenido.

+ +
+

Notas de uso: 

+ +
    +
  • Cuando los elementos <article> están anidados, los internos representan artículos relacionados con el exterior. Por ejemplo, los comentarios de un blog pueden ser elementos <article> anidados al que representa la entrada del blog.
    • +
  • Los datos del autor de un elemento <article> pueden ser proporcionados a través del elemento {{ HTMLElement ("address") }}, pero no se aplica a los elementos <article> anidados.
    • +
  • La fecha de publicación y el tiempo de un elemento <article> pueden ser descritos con el atributo {{ htmlattrxref ("pubdate", "time") }} atributo de un elemento {{ HTMLElement("time") }}.
    • +
+
+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
Contenido permitidoContenido dinámico
Omisión de etiquetasNinguna, tanto la etiqueta inicial como la etiqueta de cierre son obligatorias
Elementos padres permitidos +

Cualquier elemento que acepte el contenido dinámico . Tenga en cuenta que un elemento <article> no debe ser un descendiente de un elemento {{ HTMLElement ("address") }}.

+
Documento normativoHTML 5, sección 4.4.4
+ +

Atributos

+ +

Este elemento no tiene atributos que no sean los atributos globales, comunes a todos los elementos.

+ +
+
+

Interfaz DOM

+ +

Este elemento implementa la interfaz HTMLElement.

+ +

Consulta también

+ +
    +
  • Otros elementos relacionados con secciones: {{ HTMLElement("body") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("section") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }}
    • +
  • Sections and outlines of an HTML5 document.
    • +
+
+
diff --git a/files/es/web/html/element/aside/index.html b/files/es/web/html/element/aside/index.html new file mode 100644 index 0000000000..1032e47e9c --- /dev/null +++ b/files/es/web/html/element/aside/index.html @@ -0,0 +1,68 @@ +--- +title: aside +slug: Web/HTML/Elemento/aside +tags: + - HTML + - HTML5 + - 'HTML:Elemento' + - 'HTML:Referencia_de_elementos' + - para_revisar +translation_of: Web/HTML/Element/aside +--- +

El elemento HTML <aside> representa una sección de una página que consiste en contenido que está indirectamente relacionado con el contenido principal del documento. Estas secciones son a menudo representadas como barras laterales o como inserciones y contienen una explicación al margen como una definición de glosario, elementos relacionados indirectamente, como publicidad, la biografía del autor, o en aplicaciones web, la información de perfil o enlaces a blogs relacionados.

+ +
+

Notas de uso:

+ +
    +
  • No utilices el elemento <aside> para etiquetar texto entre paréntesis, ya que este tipo de texto se considera parte del flujo principal.
    • +
+
+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
Contenido permitidoContenido dinámico
Omisión de etiquetasNinguna, tanto la etiqueta inicial y la etiqueta de cierre son obligatorias
Elementos primarios permitidos +

Cualquier elemento que acepte contenido dinámico. Ten en cuenta que un elemento <aside> no debe ser un descendiente de un elemento {{ HTMLElement ("address") }}.

+
Documento normativoHTML 5, sección 4.4.5
+ +

Atributos

+ +

Este elemento no tiene atributos que no sean los atributos globales, comunes a todos los elementos.

+ +
+
+

Interfaz DOM

+ +

Este elemento implementa la interfaz HTMLElement.

+ +

Consulta también

+ +
    +
  • Otros elementos relacionados con esta sección: {{ HTMLElement("body") }}, {{ HTMLElement("article") }}, {{ HTMLElement("section") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }};
    • +
  • Secciones y líneas generales de un documento HTML 5 .
    • +
+
+
+ +

 

+ +

{{ languages ( { "en": "en/HTML/Element/aside","es":"es/docs/HTML/Elemento/aside" } ) }}

diff --git a/files/es/web/html/element/audio/index.html b/files/es/web/html/element/audio/index.html new file mode 100644 index 0000000000..02c621f421 --- /dev/null +++ b/files/es/web/html/element/audio/index.html @@ -0,0 +1,105 @@ +--- +title: Audio +slug: Web/HTML/Elemento/audio +translation_of: Web/HTML/Element/audio +--- +

El elemento audio se usa para insertar contenido de audio en un documento HTML o XHTML. El elemento audio se agregó como parte de HTML 5.

+ +
Nota: actualmente Gecko admite solamente Vorbis, en contenedores Ogg, así como formato WAV. Asimismo, el servidor debe servir el archivo mediante el tipo MIME correcto con el fin de que Gecko lo reproduzca correctamente.
+ +

Puedes usar las características API de audio mejoradas - que son específicas de Gecko - para generar y manipular directamente secuencias de audio a partir de código JavaScript. Consulta Manipular sonido a través de la API de audio mejorada para tener más detalles.

+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
Contenido permitidoContenido transparente, que contiene bien un atributo src, bien uno o más elementos {{ HTMLElement("source") }}, seguido de contenido dinámico o contenido estático , sin ningún elemento de {{ HTMLElement("video") }} o <audio>.
Omisión de etiquetasNinguna, deben estar presentes tanto las etiquetas de inicio como las de cierre.
Elementos primarios permitidosCualquier elemento que acepte contenido dinámico o cualquier elemento que acepte contenido estático.
Documento normativoHTML5, sección 4.8.7
+ +

Atributos

+ +
+
autoplay
+
Un atributo booleano; si se especifica (incluso aunque el valor sea "false"), el sonido comenzará a reproducirse automáticamente en cuanto sea posible, sin detenerse para terminar de cargar los datos.
+
autobuffer {{ obsolete_inline("2.0") }}
+
Un atributo booleano; si se especifica, el sonido comenzará a reproducirse automáticamente, incluso aunque no se haya configurado para la reproducción automática. Esto continuará hasta que la caché de medios esté llena o se haya descargado el archivo de audio completo, lo que suceda primero. Debería usarse sólo si se espera que el usuario elija reproducir el audio; por ejemplo si el usuario ha navegado hasta una página usando un vínculo de "Reproducir este audio". Este atributo se eliminó de Gecko 2.0 {{ geckoRelease("2.0") }} en favor del atributo preload.
+
buffered {{ gecko_minversion_inline("2.0") }}
+
Un atributo que se puede leer para determinar qué intervalos de tiempo del multimedia se han almacenado en búfer. Este atributo contiene un objeto {{ domxref("TimeRanges") }}.
+
controls
+
Si está presente este atributo, el navegador ofrecerá controles para permitir que el usuario controle la reproducción de audio, incluyendo volumen, búsqueda y pausar/reanudar reproducción.
+
loop {{ unimplemented_inline() }} {{ bug(449157) }}
+
Un atributo booleano; si se especifica, al alcanzar el final del audio, realizaremos la búsqueda automáticamente hasta el principio.
+
mozCurrentSampleOffset {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}
+
La posición de desplazamiento, que se especifica como el número de muestras desde el comienzo de la secuencia de audio, en la cual el audio se está reproduciendo actualmente.
+
preload {{ gecko_minversion_inline("2.0") }} {{ bug(548523) }}
+
El objetivo de este atributo enumerado es proporcionar una sugerencia al navegador sobre qué cree el autor que proporcionará la mejor experiencia para el usuario . Puede tener uno de los siguientes valores: +
    +
  • none: sugiere bien que el autor cree que el usuario no tendrá que consultar ese video, bien que el servidor desea minimizar su tráfico; es decir, esta sugerencia indica que no se debe almacenar en caché este video;
    • +
  • metadata: sugiere que aunque el autor piensa que el usuario no tendrá que consultar ese video, es razonable capturar los metadatos (p. ej. longitud);
    • +
  • auto: sugiere que el usuario necesita tener prioridad; es decir, esta sugerencia indica que, si es necesario, se puede descargar el video completo, incluso aunque el usuario no vaya a usarlo;
    • +
  • the empty string: que es sinónimo del valor auto.
    • +
+ +

Si no está configurado, su valor predeterminado está definido por el navegador (es decir, cada navegador puede elegir su propio valor predeterminado), aunque la especificación aconseje que se establezca a metadatos.

+ +
Observaciones sobre uso: + +
    +
  • El atributo autoplay tiene prioridad sobre éste puesto que si se desea reproducir automáticamente un video, el navegador obviamente tendrá que descargarlo. La especificación permite establecer los atributos autoplay y preload.
    • +
  • La especificación no fuerza al navegador a seguir el valor de este atributo; es tan sólo una sugerencia.
    • +
+
+
+
src
+
La URL del audio que se va a insertar. Está sujeta a los Controles de acceso HTTP. Es opcional; en su lugar puedes usar el elemento source dentro del bloque de audio para especificar el audio que se va a insertar.
+
+ +

Las compensaciones de tiempo se especifican como valores float que indican el número de segundos que se va a compensar.

+ +
Nota: la definición del valor de compensación de tiempo no se ha completado en HTML 5 aún y está sujeta a cambios.
+ +

Ejemplos

+ +
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
+       autoplay>
+  Your browser does not support the <code>audio</code> element.
+</audio>
+
+ +

Reproduce el fichero de audio adjunto a este artículo.

+ +

Interfaz DOM

+ + + +

Consulta también

+ + + +

{{ languages( { "en": "en/HTML/Element/Audio" , "fr": "fr/HTML/Element/audio" } ) }}

diff --git a/files/es/web/html/element/b/index.html b/files/es/web/html/element/b/index.html new file mode 100644 index 0000000000..e4281a9296 --- /dev/null +++ b/files/es/web/html/element/b/index.html @@ -0,0 +1,168 @@ +--- +title: b +slug: Web/HTML/Elemento/b +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/b +--- +

Definición

+ +

b de bold=negrita.

+ +

Indica que el texto debe ser representado con una variable bold, o negrita, de la tipografía que se esté usando.

+ +
+
Sus etiquetas son: <b> y </b> (Ambas obligatorias).
+
+ +
+
Crea una caja: en línea.
+
+ +
+
Está definido como: Elemento de estilo de fuente y por lo tanto en línea.
+
+ +
+
Puede contener: Texto y/o cero o más elementos en línea.
+
+ +
Atributos
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalorpor omisión
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible. Sensible a M/m..Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m.Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. cdataLo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo.Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma.Lo fija el navegador. PD.: "desconocido".
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Lo fija el navegador. PD.: En castellano 'ltr'.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
No tiene
atributodescripciónvalorpor omisión
+ +

Ejemplos de uso

+ +
+

Palabras pesadas

+ +
<p>
+       Texto normal y... <b>Texto en negrita</b>
+</p>
+
+ +


+ Se visualiza así:

+ +
+

Texto normal y... Texto en negrita

+
+
+ +

Soporte

+ +

Puede consultar esta comparativa: IE6 vs IE7 vs FF1.5 vs OP9.

+ +

Estilo predeterminado

+ +

El inherente a su condición: negrita. Prueba el siguiente ejemplo:

+ +

+ <style>
+        span { font-weight: bolder; }
+ </style>
+
+ <p> Esto es:  <b> un elemento b </b> y esto es: <span>un span con estilo</span>  </p>
+ 
+
+ +

Notas

+ +
    +
  • El W3C (y nosotros) desaconseja el uso de este elemento, para manejar el estilo del texto es mejor usar CSS.
    • +
+ +

 

+ +

Referencia

+ + + +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/base/index.html b/files/es/web/html/element/base/index.html new file mode 100644 index 0000000000..4912e33f0b --- /dev/null +++ b/files/es/web/html/element/base/index.html @@ -0,0 +1,158 @@ +--- +title: +slug: Web/HTML/Elemento/base +tags: + - Elemento + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/base +--- +

{{HTMLRef}}

+ +

Resumen

+ +

El elemento HTML <base> especifica la dirección URL base que se utilizará para todas las direcciones URL relativas contenidas dentro de un documento. Sólo puede haber un elemento <base> en un documento.

+ +

La dirección URL base de un documento puede ser consultado a partir de una secuencia de comandos con {{domxref('document.baseURI')}}.

+ +
Nota de uso: Si se especifican varios elementos <base>, se utilizá sólo la primera sección href y el primer valor target; los demás son ignorados.
+ + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de ContenidoContenido de Metadatos
Contenido permitidoNinguno, es un {{Glossary("empty element")}}.
Omisión de etiquetaNo debe haber ninguna etiqueta de cierre.
Elementos padres permitidosCualquier {{HTMLElement("head")}} que no contenga ningún elemento {{HTMLElement("base")}}
Interfaz DOM{{domxref("HTMLBaseElement")}}
+ +

Attributos

+ +

Este elemento incluye los atributos globales.

+ +
+
{{htmlattrdef("href")}}
+
La dirección URL base que se usa en todo el documento para las direcciones URL relativas. Si no se especifica este atributo, este elemento debe venir antes de cualesquiera otros elementos con atributos cuyos valores son direcciones URL. Se permiten las direcciones URL absolutas y relativas.
+
{{htmlattrdef("target")}}
+
Un nombre o una palabra clave que indica la ubicación predeterminada para navegar por el resultado de hipervínculos o formas, para los elementos que no tienen una referencia explícita del objetivo . Es un nombre o una palabra clave para un contexto de navegación (por ejemplo: pestaña, ventana o marco en línea). Las siguientes palabras clave tienen un significado especial: tab, window, o inline frame).Las siguientes palabras clave tienen un significado especial: +
    +
  • _self: Carga el resultado en el mismo contexto de navegación que el actual. Este valor es el valor por defecto si no se especifica el atributo.
    • +
  • _blank: Carga el resultado en un nuevo contexto de navegación sin nombre .
    • +
  • _parent: Cargar el resultado en el contexto de navegación padre del actual. Si no hay padre, esta opción se comporta de la misma manera que _self.
    • +
  • _top: Carga el resultado en el contexto de nivel superior de navegación (es decir, el contexto de navegación que es un ancestro de la actual, y no tiene padre). Si no hay padre, esta opción se comporta de la misma manera que _self.
    • +
+
+
+ +

Ejemplos

+ +
<base href="http://www.example.com/page.html">
+<base target="_blank" href="http://www.example.com/page.html">
+ +
+
+

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}}{{Spec2('HTML WHATWG')}}Sin cambios desde la última instantánea.
{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}{{Spec2('HTML5 W3C')}}Especifica el comportamiento de target
{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}{{Spec2('HTML4.01')}}Añadido el atributo target
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}} [1]{{CompatVersionUnknown}} [2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Añadido soporte de las URL relativas para href en Gecko 2.0 (Firefox 4.0)

+ +

[2] Antes de Internet Explorer 7, <base> podría ser colocado en cualquier lugar del documento y se usaba el valor más cercano de <base>. El apoyo a las URL relativas se ha eliminado en Internet Explorer 8

+
+
+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/basefont/index.html b/files/es/web/html/element/basefont/index.html new file mode 100644 index 0000000000..5b86ea16a3 --- /dev/null +++ b/files/es/web/html/element/basefont/index.html @@ -0,0 +1,124 @@ +--- +title: basefont +slug: Web/HTML/Elemento/basefont +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/basefont +--- +

Definición

+ +

basefont -fuente base . Permite cambiar algunas propiedades del texto.

+ +
+
Sus etiquetas son: <basefont> (solo tiene una).
+
Está definido como: Elemento desaprobado. +
+
En un doctype transicional está definido como un elemento especial y por lo tanto en línea.
+
+
+
+ +
+
Crea una caja: No.
+
Puede contener: Nada.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalor
Genéricos
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador.
Específicos
No tiene
De transición
sizeTamaño de la fuente. Según una tabla del 1 al 7.Un número entero (ej. 1), o un valor incremental (ej. +1). Por defecto: debe indicarlo el autor.
colorEl color del texto.Un color RGB. Por defecto: Lo fija el navegador.
faceEspecifica la/s fuentes para el texto.Lista de nombres de fuentes separadas por coma. Por defecto: Lo fija el navegador.
atributodescripciónvalor
+ +

Ejemplos de uso

+ +
+

Un ejemplo simple

+ +

Código:

+ +
<p>
+ Texto normal y ...
+ <basefont size="5" color="#0000ff">
+ Texto distinto.
+</p>
+
+ +

Resultado: <div style='border: solid silver 1px;'> <p> Texto normal y ... <basefont size="5" color="#0000ff"> Texto distinto. </p> </div>

+
+ +

Estilo predeterminado

+ +

Notas

+ +

Referencia

+ + + +

 

+ +

Soporte

+ +

Puede consultar esta comparativa: IE 6 - IE 7 - FF 1.5 - OP 9.

+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/bdi/index.html b/files/es/web/html/element/bdi/index.html new file mode 100644 index 0000000000..075afa13a6 --- /dev/null +++ b/files/es/web/html/element/bdi/index.html @@ -0,0 +1,140 @@ +--- +title: +slug: Web/HTML/Elemento/bdi +tags: + - BiDi + - Elemento + - HTML + - Referencia + - Semántica HTML a nivel de texto + - Web +translation_of: Web/HTML/Element/bdi +--- +

Resumen

+ +

El elemento HTML <bdi> (o elemento de aislamiento Bi-Direccional) aisla un trozo de texto para que pueda ser formateado con una dirección diferente al texto que hay fuera de él.

+ +

Es útil al embeber o incrustart texto del que se desconoce la direccionalidad, por ejemplo proveniente de una base de datos, dentro de un texto con una direccionalidad fija.

+ +

Aunque el mismo efecto visual se puede conseguir usando la regla  CSS  {{cssxref("unicode-bidi")}}: isolate en un elemento  {{HTMLElement("span")}} u otro elemento de formateado de texto, el significado semántico sólo se consigue usando el elemento <bdi>. En especial los navegadores permiten ignorar los estilos CSS. En tal caso el texto se mostrará correctamente usando el elemento HTML pero será basura usando CSS para fijar la semántica.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, phrasing content, contenido palpable.
Contenido permitidoPhrasing content.
Omisión de etiqueta{{no_tag_omission}}
Elementos padre permitidosAny element that accepts phrasing content.
Interfaz DOM{{domxref("HTMLElement")}}
+ +

Atributos

+ +

Como los demás elementos HTML , este elemento tiene los global attributes, pero con una pequeña diferencia semántica: el atributo dir no se hereda. Si no está definidio, su valor por defecto es auto y permitirá a los navegadores decidir la dirección basándose en el contexto del elemento.

+ +

Ejemplo

+ +
<p dir="ltr">Esta palabara arábica<bdi>ARABIC_PLACEHOLDER</bdi> se muestra automáticamente de derecha a izquierda.</p>
+
+ +

Resultado

+ +

Esta palabra arábica REDLOHECALP_CIBARA se muestra automáticamente de derecha a izquierda.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdi-element', '<bdi>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'the-bdi-element.html#the-bdi-element', '<bdi>')}}{{Spec2('HTML5 W3C')}} 
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico16{{CompatGeckoDesktop("10.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatGeckoMobile("10.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ +
    +
  • Elementos HTML relacionados: {{HTMLElement("bdo")}}
    • +
  • Propiedades HTML relacionadas: {{cssxref("direction")}}, {{cssxref("unicode-bidi")}}
    • +
+ +

{{HTMLRef}}

diff --git a/files/es/web/html/element/bdo/index.html b/files/es/web/html/element/bdo/index.html new file mode 100644 index 0000000000..0a4af7fe92 --- /dev/null +++ b/files/es/web/html/element/bdo/index.html @@ -0,0 +1,144 @@ +--- +title: bdo +slug: Web/HTML/Elemento/bdo +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/bdo +--- +

Definición

+ +

bdo Bi-Directional Overriding=Anulación de bidireccionalidad.

+ +

La dirección de escritura del texto está relacionada con el idioma y se declara con el atributo dir. Pero en ocasiones esto no es suficiente, entonces entra en juego el elemento bdo (anulación del algoritmo bidireccional) que al anular el algoritmo permite un control total de la direccionalidad.

+ +
+
Sus etiquetas son: <bdo> y </bdo> (ambas obligatorias).
+
+ +
+
Crea una caja: En línea.
+
+ +
+
Está definido como: Elemento especial y por lo tanto en línea.
+
+ +
+
Puede contener: Texto y/o cero o más elementos en línea.
+
+ +

Atributos

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalorpor omisión
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible. Sensible a M/m..Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m.Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. cdataLo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo.Lo fija el navegador.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma.Lo fija el navegador. PD.: "desconocido".
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Debe indicarlo el autor
De transición
No tiene
atributodescripciónvalorpor omisión
+ +

Ejemplos de uso

+ +
+

Cambios de dirección

+ +
<p> cero(0)
+<bdo dir="rtl">
+<em> uno(1) dos(2) </em> tres(3) cuatro(4)
+<em dir="ltr"> cinco(5) seis(6) </em> siete(7) ocho(8)
+</bdo> nueve(9)
+</p>
+
+
+ +

Soporte

+ +

Puede consultar esta comparativa: IE6 vs IE7 vs FF1.5 vs OP9.

+ +

Estilo predeterminado

+ +

Notas

+ +

Referencia

+ + + +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/bgsound/index.html b/files/es/web/html/element/bgsound/index.html new file mode 100644 index 0000000000..81b73a1e30 --- /dev/null +++ b/files/es/web/html/element/bgsound/index.html @@ -0,0 +1,106 @@ +--- +title: +slug: Web/HTML/Elemento/bgsound +tags: + - Elemento + - HTML + - Referencia + - Web +translation_of: Web/HTML/Element/bgsound +--- +
{{non-standard_header}}
+ +

Resumen

+ +

El elemento HTML de sonido de fondo (<bgsound>) es un elemento de Internet Explorer que asocia  un sonido de fondo con un página .

+ +
+

No usar esto ! Para incrustar un elemento en una página web , se debe  de usar el elemento  {{HTMLElement("audio")}}

+
+ +

Atributos

+ +
+
{{htmlattrdef("balance")}}
+
Este atributo define un número entre -10,000 y + 10,000 que determina como el volumen será dividido entre los altavoces .
+
{{htmlattrdef("loop")}}
+
Este atributo indica el número de veces que un soinido será reproducido ya sea como un valor numérico o la palabra clave infinite .
+
{{htmlattrdef("src")}}
+
Este atributo especifica la URL del archivo de sonido que será reproducido , el cual debe ser uno de los siguientes tipos : wav, .au, o .mid.
+
{{htmlattrdef("volume")}}
+
Este atributo define un número entre -10,000 y 0 que determina la fuerza del sonido de fondo de una página .
+
 
+
+ +

Ejemplo

+ +
<bgsound src="sound1.mid">
+
+<bgsound src="sound2.au" loop="infinite">
+
+ +

Notas

+ +

Funcionalidad similar puede ser lograda en algunas versiones de Netscape usando la etiqueta <embed> para invocar un reproductor de audio .

+ +

Puedes escribir bgsound con una etiqueta de cierre automático <bgsound /> . Ahora bien , desde que este elemento no es parte de un estándar , haciendolo como XHTML no lo hará valido. 

+ +

Compatibilidad en exploradores 

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatUnknown}}{{CompatNo}} [1]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Hasta Firefox 22 , incluso si no se soportaba este elemento , Gecko lo asociaba a un elemento {{domxref("HTMLSpanElement")}}. Esto fue corregido después y ahora el elemento asociado es un  {{domxref("HTMLUnknownElement")}} como es requerido  por la especificación . 

+ +

Ver también

+ +
    +
  •  {{htmlelement("audio")}}, el cual es el elemento estándar para incrustar audio en un documento.
    • +
+ +
{{HTMLRef}}
diff --git a/files/es/web/html/element/big/index.html b/files/es/web/html/element/big/index.html new file mode 100644 index 0000000000..a15f1b5da9 --- /dev/null +++ b/files/es/web/html/element/big/index.html @@ -0,0 +1,191 @@ +--- +title: big +slug: Web/HTML/Elemento/big +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/big +--- +

Definición

+ +

big de big=grande

+ +

Muestra el texto marcado con un tamaño de fuente más grande. El tamaño de la fuente puede definirse en una escala del 1 al 7, big aumenta este valor en un punto.

+ +
+
Sus etiquetas son: <big> y </big> (Ambas obligatorias).
+
+ +
+
Crea una caja: En línea.
+
+ +
+
Está definido como: Elemento de estilo de fuente y por lo tanto en línea.
+
+ +
+
Puede contener: Texto y/o cero o más elementos en línea.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalorpor omisión
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible. Sensible a M/m..Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m.Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. cdataLo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo.Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma.Lo fija el navegador. PD.: "desconocido".
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Lo fija el navegador. PD.: En castellano 'ltr'.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
No tiene
atributodescripciónvalorpor omisión
+ +

Ejemplos de uso

+ +
+

Simple

+ +

+  <p>
+
+   Texto normal y... <big>Texto más grande</big>
+
+  </p>
+ 
+
+
+ +
+

Recursivo

+ +

big puede contener otros elementos en línea, por ejemplo... big:

+ +

+  <p>
+
+   Texto normal y texto <big> cada <big> vez <big> más <big> grande. </big></big></big></big>
+
+  </p>
+ 
+
+ +

Se visualiza así:

+ +
+

Texto normal y texto cada vez más grande.

+
+
+ +

Soporte

+ +

Puede consultar esta comparativa: IE6 vs IE7 vs FF1.5 vs OP9.

+ +

Estilo predeterminado

+ +

Observa el siguiente ejemplo:

+ +

+ <style>
+        span { font-size: larger; }
+ </style>
+
+ <h2> Con big </h2>
+ <p> Texto normal y texto ...
+
+ <big> cada <big> vez <big> más <big> grande. </big></big></big></big>  </p>
+
+ <h2> Con CSS </h2>
+ <p> Texto normal y texto ...
+
+ <span> cada <span> vez <span> más <span> grande. </span></span></span></span>  </p>
+ 
+
+ +

Notas

+ +
    +
  • big tiene un elemento opuesto, small. Si big aumenta el tamaño de la fuente small lo disminuye. Sin embargo en su funcionamiento son idénticos.
    • +
  • El W3C (y nosotros) desaconseja el uso de este elemento, para manejar el tamaño del texto es mejor usar CSS.
    • +
+ +

Referencia

+ + + +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/blink/index.html b/files/es/web/html/element/blink/index.html new file mode 100644 index 0000000000..f63821708a --- /dev/null +++ b/files/es/web/html/element/blink/index.html @@ -0,0 +1,100 @@ +--- +title: +slug: Web/HTML/Elemento/blink +tags: + - Elemento + - HTML + - Obsoleto + - Referencia + - Web +translation_of: Web/HTML/Element/blink +--- +
{{Deprecated_header}} {{Non-standard_header}}
+ +

El elemento HTML blink (<blink>) no es un elemento estándar que causa que el texto encerrado parpadee lentamente .

+ +
+

Precaución : No usar este elemento ya que no es un elemento estándar y está obsoleto. El texto parpadeante es mal visto por diversos estándares de accesibilidad y la especificación de CSS permite a los exploradores ingnorar el valor del parpadeo . .

+
+ +

Interface DOM

+ +

Este elemento no es soportado y por lo tanto implementa la interface {domxref("HTMLUnknownElement")}} .

+ +

Ejemplo

+ +
<blink>Why would somebody use this?</blink>
+
+ +

Resultado 

+ +

Image:HTMLBlinkElement.gif

+ +

Especificación

+ +

Este elemento no es parte del estándar ni de alguna espeficación . Si no nos crees puedes verlo por ti mismo en la espeficicación de HTML.

+ +

Compatibilidad en exploradores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatNo}} [1]{{CompatNo}}{{CompatNo}} [2]{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}} [1]{{CompatNo}}{{CompatNo}} [2]{{CompatNo}}
+
+ +

[1] Soportado hasta la versión 22. Removido en la versión 23.

+ +

[2] Soportado hasta la versión 12.1. Removido en la versión 15.0.

+ +

Ver también

+ +
    +
  • Historia de la creación del elemento <blink>
    • +
  • {{cssxref("text-decoration")}}, donde un valor de parpadeo existe , aunque los exploradores no son obligados a hacer parpadear el texto efectivamente.
    • +
  • {{htmlelement("marquee")}}, otro elemento similar que no pertenece a un estándar.
    • +
  • Las animaciones CSS son la forma correcta de crear tal efecto .
    • +
+ +

{{HTMLRef}}

diff --git a/files/es/web/html/element/blockquote/index.html b/files/es/web/html/element/blockquote/index.html new file mode 100644 index 0000000000..d8f71a7ed4 --- /dev/null +++ b/files/es/web/html/element/blockquote/index.html @@ -0,0 +1,153 @@ +--- +title: blockquote +slug: Web/HTML/Elemento/blockquote +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/blockquote +--- +

Definición

+ +

blockquote -cita en bloque . Crea citas en bloque, marca las citas a otros autores o documentos.

+ +
+
Sus etiquetas son: <blockquote> y </blockquote> (ambas obligatorias).
+
Está definido como: Elemento en bloque.
+
+ +
+
Crea una caja: En bloque.
+
Puede y debe contener: Uno o más elementos en bloque o script
+
Con un doctype transicional Puede contener: texto, y/o cero o más elementos en bloque o en línea
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalor
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible por personas. Sensible a M/m.. Por defecto: Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. Por defecto: Lo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo. Por defecto: Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma. Por defecto: "desconocido". Lo fija el navegador.
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Por defecto: En castellano 'ltr'. Lo fija el navegador.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
cite Proporciona un enlace al documento original o fuenteUna dirección URI. Por defecto: lo fija el navegador
De transición
No tiene
atributodescripciónvalor
+ +

Ejemplos de uso

+ +
+

Un blockquote estricto

+ +
<blockquote cite='http://html.conclase.net/w3c/html401...def-BLOCKQUOTE'>
+  <p>
+    <strong>Nota.</strong> Recomendamos que las implementaciones de hojas
+    de estilo porporcionen un mecanismo para insertar signos de puntuación de citas
+    antes y después de una cita delimitada por un BLOCKQUOTE de un modo apropiado según
+    el contexto del idioma actual y el grado de anidamiento de las citas.
+  </p>
+</blockquote>
+
+
+ +

Estilo predeterminado

+ +

Notas

+ +
    +
  • Conviene tener cuidado con las divergencias en el tipo de contenido dependiendo del doctype. El siguiente ejemplo es válido con un doctype transicional, pero no lo es con el estricto:
    • +
+ +
<blockquote>
+  Bla, bla, bla...
+</blockquote>
+
+ +
    +
  • blockquote tiene un hermano menor: q. blockquote sirve para citas en bloque y q para citas en línea.
    • +
+ +
    +
  • A diferencia de q, blockquote no entrecomilla los contenidos, debe hacerlo el autor (con CSS).
    • +
+ +

Referencia

+ + + +

Soporte

+ +

Puede consultar esta comparativa: IE 6 - IE 7 - FF 1.5 - OP 9.

+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/body/index.html b/files/es/web/html/element/body/index.html new file mode 100644 index 0000000000..32b0a64328 --- /dev/null +++ b/files/es/web/html/element/body/index.html @@ -0,0 +1,170 @@ +--- +title: ': El elemento body del documento' +slug: Web/HTML/Elemento/body +tags: + - Elemento + - HTML + - Referencia + - Seleccionar el elemento raíz + - Web + - secciones +translation_of: Web/HTML/Element/body +--- +
{{HTMLRef}}
+ +

El elemento <body> de HTML representa el contenido de un documento HTML. Solo puede haber un elemento <body> en un documento.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{web.link("/es/docs/Web/HTML/Content_categories", "Categorías de contenido")}}{{web.link("/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Section_Elements_in_HTML5", "Secciones en HTML5")}}
Contenido permitido{{web.link("/es/docs/Web/HTML/Content_categories#Flow_content", "Flujo de contenido")}}.
Omisión de etiquetaLa etiqueta de inicio se puede omitir si lo primero que hay dentro no es un carácter de espacio, comentario, elemento {{HTMLElement("script")}} o elemento {{HTMLElement("style")}}. La etiqueta final se puede omitir si el elemento <body> tiene contenido o tiene una etiqueta de inicio y no va seguido inmediatamente de un comentario.
Contenedores autorizadosDebe ser el segundo elemento de un elemento {{HTMLElement("html")}}.
Rol de ARIA implícito{{web.link("/es/docs/Web/Accessibility/ARIA/Roles/Document_Role", "document")}}
Roles ARIA permitidosNo se permite role
Interfaz DOM{{DOMxRef("HTMLBodyElement")}} +
    +
  • El elemento <body> expone la interfaz {{DOMxRef("HTMLBodyElement")}}.
    • +
  • Puedes acceder al elemento <body> a través de la propiedad {{DOMxRef("document.body")}}.
    • +
+
+ +

Atributos

+ +

Este elemento incluye los {{web.link("/es/docs/Web/HTML/Global_attributes", "atributos globales")}}.

+ +
+
{{HTMLAttrDef("alink")}} {{obsolete_inline}}
+
Color del texto de los hipervínculos cuando se selecciona. Este método no es conforme a la especificación, utiliza la propiedad {{CSSxRef("color")}} de CSS junto con la pseudoclase {{CSSxRef(":active")}} en su lugar.
+
{{HTMLAttrDef("background")}} {{obsolete_inline}}
+
URI de una imagen para usar como fondo. Este método no es conforme, usa la propiedad CSS {{CSSxRef("background")}} en el elemento.
+
{{HTMLAttrDef("bgcolor")}} {{obsolete_inline}}
+
Color de fondo del documento. Este método no es conforme, utiliza la propiedad CSS {{CSSxRef("background-color")}} en el elemento.
+
{{HTMLAttrDef("bottommargin")}} {{obsolete_inline}}
+
El margen de la parte inferior del <body>. Este método no es conforme, usa la propiedad CSS {{CSSxRef("margin-bottom")}} en el elemento.
+
{{HTMLAttrDef("leftmargin")}} {{obsolete_inline}}
+
El margen de la izquierda del <body>. Este método no es conforme, usa la propiedad CSS {{CSSxRef("margin-left")}} en el elemento en su lugar.
+
{{HTMLAttrDef("link")}} {{obsolete_inline}}
+
Color del texto de los enlaces de hipertexto no visitados. Este método no es conforme, usa la propiedad {{CSSxRef("color")}} de CSS junto con la pseudoclase {{CSSxRef(":link")}} en su lugar.
+
{{HTMLAttrDef("onafterprint")}}
+
Función para llamar después de que el usuario haya impreso el documento.
+
{{HTMLAttrDef("onbeforeprint")}}
+
Función para llamar cuando el usuario solicita la impresión del documento.
+
{{HTMLAttrDef("onbeforeunload")}}
+
Función para llamar cuando se está a punto de descargar el documento.
+
{{HTMLAttrDef("onblur")}}
+
Función para llamar cuando el documento pierde el foco.
+
{{HTMLAttrDef("onerror")}}
+
Función para llamar cuando el documento no se carga correctamente.
+
{{HTMLAttrDef("onfocus")}}
+
Función para llamar cuando el documento recibe el foco.
+
{{HTMLAttrDef("onhashchange")}}
+
Función para llamar cuando la parte del identificador del fragmento (comenzando con el carácter de almohadilla ('#' también conocido como numeral)) de la dirección actual del documento ha cambiado.
+
{{HTMLAttrDef("onlanguagechange")}} {{experimental_inline}}
+
Función para llamar cuando cambiaron los idiomas preferidos.
+
{{HTMLAttrDef("onload")}}
+
Función a llamar cuando se haya terminado de cargar el documento.
+
{{HTMLAttrDef("onmessage")}}
+
Función para llamar cuando el documento ha recibido un mensaje.
+
{{HTMLAttrDef("onoffline")}}
+
Función para llamar cuando falla la comunicación de la red.
+
{{HTMLAttrDef("ononline")}}
+
Función para llamar cuando se restablece la comunicación de la red.
+
{{HTMLAttrDef("onpopstate")}}
+
Función para llamar cuando el usuario ha navegado el historial de sesiones.
+
{{HTMLAttrDef("onredo")}}
+
Función para llamar cuando el usuario ha avanzado en el historial de deshacer transacciones.
+
{{HTMLAttrDef("onresize")}}
+
Función para llamar cuando el documento ha cambiado de tamaño.
+
{{HTMLAttrDef("onstorage")}}
+
Función para llamar cuando el área de almacenamiento ha cambiado.
+
{{HTMLAttrDef("onundo")}}
+
Función para llamar cuando el usuario ha retrocedido en el historial de deshacer transacciones.
+
{{HTMLAttrDef("onunload")}}
+
Función para llamar cuando el documento se vaya.
+
{{HTMLAttrDef("rightmargin")}} {{obsolete_inline}}
+
El margen de la derecha del <body>. Este método no es conforme, usa la propiedad CSS {{CSSxRef("margin-right")}} en el elemento.
+
{{HTMLAttrDef("text")}} {{obsolete_inline}}
+
Color de primer plano del texto. Este método no es conforme, usa la propiedad CSS {{CSSxRef("color")}} en el elemento.
+
{{HTMLAttrDef("topmargin")}} {{obsolete_inline}}
+
El margen de la parte superior del <body>. Este método no es conforme, usa la propiedad CSS {{CSSxRef("margin-top")}} en el elemento.
+
{{HTMLAttrDef("vlink")}} {{obsolete_inline}}
+
Color del texto de los enlaces de hipertexto visitados. Este método no es conforme, utiliza la propiedad {{CSSxRef("color")}} de CSS junto con la pseudoclase {{CSSxRef(":visited")}} en su lugar.
+
+ +

Ejemplo

+ +
<html>
+  <head>
+    <title>Título del documento</title>
+  </head>
+  <body>
+    <p>Este es un párrafo</p>
+  </body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'semantics.html#the-body-element', '<body>')}}{{ Spec2('HTML WHATWG') }}Cambió la lista de características no conformes.
{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}{{ Spec2('HTML5 W3C') }}Los atributos anteriormente obsoletos. Definieron el comportamiento de topmargin, leftmargin, rightmargin y bottommargin no conforme y nunca estandarizado. Se agregaron los atributos on*.
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '<body>')}}{{ Spec2('HTML4.01') }}En desuso el alink, background, bgcolor, link, text y atributos vlink.
+ +

Compatibilidad del navegador

+ + + +

{{Compat("html.elements.body")}}

+ +

Ve también

+ +
    +
  • {{HTMLElement("html")}}
    • +
  • {{HTMLElement("head")}}
    • +
diff --git a/files/es/web/html/element/br/index.html b/files/es/web/html/element/br/index.html new file mode 100644 index 0000000000..1e9cff3b58 --- /dev/null +++ b/files/es/web/html/element/br/index.html @@ -0,0 +1,157 @@ +--- +title:
+slug: Web/HTML/Elemento/br +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/br +--- +

Resumen

+ +

El elemento HTML line break <br> produce un salto de línea en el texto (retorno de carro). Es útil para escribir un poema o una dirección, donde la división de las líneas es significante.

+ +

No utilices <br> para incrementar el espacio entre líneas de texto; para ello utiliza la propiedad {{cssxref('margin')}} de CSS o el elemento {{HTMLElement("p")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, phrasing content.
Contenido permitidoNinguno, es {{Glossary("empty element")}}.
Omisión de etiquetaDebe tener etiqueta de inicio y no debe tener etiqueta de cierre. En documentos XHTML este elemento se escribe como <br />.
Elementos padre permitidosCualquier elemento que acepte phrasing content.
Interfaz DOM{{domxref("HTMLBRElement")}}
+ +

Atributos

+ +

Este elemento incluye los atributos globales.

+ +
+
{{htmlattrdef("clear")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}
+
Indica donde empieza la siguiente línea después del salto. +
+

Nota de uso: Este atributo está obsoleot en {{HTMLVersionInline(5)}} y no debe utilizarse por los autores. En su lugar utiliza la propiedad {{CSSxref('clear')}} de CSS.

+
+
+
+ +

Ejemplo

+ +
Mozilla Foundation<br>
+1981 Landings Drive<br>
+Building K<br>
+Mountain View, CA 94043-0801<br>
+USA
+
+ +

El HTML de arriba muestra:

+ +

Mozilla Foundation
+ 1981 Landings Drive
+ Building K
+ Mountain View, CA 94043-0801
+ USA

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-br-element', '<br>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-br-element', '<br>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilidad de navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ +
    +
  • Elemento {{HTMLElement("address")}}
    • +
  • Elemento {{HTMLElement("p")}}
    • +
+ +
{{HTMLRef}}
diff --git a/files/es/web/html/element/button/index.html b/files/es/web/html/element/button/index.html new file mode 100644 index 0000000000..abcab78469 --- /dev/null +++ b/files/es/web/html/element/button/index.html @@ -0,0 +1,198 @@ +--- +title: button +slug: Web/HTML/Elemento/button +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/button +--- +

Definición

+ +

button = botón.

+ +

Es el elemento crea botones marcadores.

+ +

La etiqueta de HTML <button> representa un elemento cliqueable de tipo botón que puede ser utilizado en formularios o en cualquier parte de la página que necesite un botón estándar y simple de aplicar. De forma predeterminada, los botones HTML se presentan con un estilo similar en todas las plataformas, estos estilos se pueden cambiar utilizando CSS.

+ +
+
Sus etiquetas son: <button> y </button> (ambas obligatorias).
+
Crea una caja: en linea.
+
Está definido como: Elemento de control para formulario.
+
Puede contener: Texto y/o cero o más elementos en Bloque o en linea, con las siguientes excepciones: (A|%formctrl;|FORM|FIELDSET)
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalorpor omisión
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible. Sensible a M/m..Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m.Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. cdataLo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo.Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma.Lo fija el navegador. PD.: "desconocido".
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Lo fija el navegador. PD.: En castellano 'ltr'.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
name Asigna un nombre de control.Texto con limitacionesLo fija el navegador.
value Asigna un valor inicial que será enviado con el formulario.TextoLo fija el navegador.
type Indica el tipo de botón.Uno de los siguientes: (button|submit|reset)PD.: submit.
disabled Indica que el control está desabilitado.disabled.Lo fija el navegador. disabled.
accesskey Define una tecla de acceso rápido. Importante para la Accesibilidad.Un carácter o letra.Lo fija el navegador.
tabindex Asigna un número de posición en el orden de tabulación.Un número entre 0 y 32767.Lo fija el navegador.
reserved Reservado para un uso futuro que nunca tubo. Inútil--
Eventos: onfocus onblur
De transición
No tiene
atributodescripciónvalorpor omisión
+ +

Ejemplos de uso

+ +
<button name="button">Click me</button>
+
+ +

Sobre Accesibilidad

+ +

Botones con íconos

+ +

Los botones que solamente utilizan un ícono para representar una funcionalidad no tienen un nombre accesible para los lectores de no-videntes. Para arreglar esto debemos proveer un nombre para el botón que describa la funcionalidad de este.

+ +

Ejemplo

+ +
<button name="favorito" type="button">
+  <svg aria-hidden="true" viewBox="0 0 10 10"><path d="m7.4 8.8-2.4-1.3-2.4 1.3.46-2.7-2-1.9 2.7-.39 1.2-2.5 1.2 2.5 2.7.39-1.9 1.9z"/></svg>
+  Agregar a favoritos
+</button>
+
+ +

Esto también ayudará a los usuarios videntes que no estén familiarizados con el significado del ícono ya que podrán entender su significado pasando el cursor por encima del elemento.

+ +

Para más información (en inglés):

+ + + +

Proximidad

+ +

Si el sitio tiene una gran cantidad de elementos interactivos muy cercanos entre ellos esto puede generar una dificultad en los usuarios con discapacidades motrices. Es ideal que estos elementos tengan una separación para evitar que el usuario cliquee el incorrecto. Puedes utilizar la propiedad margin para separarlos.

+ +

Más información (en inglés):

+ + + +

Soporte

+ + + +

{{Compat("html.elements.button")}}

+ +

Referencia

+ + + +
+
+

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 MDC:Como ayudar.

+
+ +

 

diff --git a/files/es/web/html/element/canvas/index.html b/files/es/web/html/element/canvas/index.html new file mode 100644 index 0000000000..63e3e260a3 --- /dev/null +++ b/files/es/web/html/element/canvas/index.html @@ -0,0 +1,88 @@ +--- +title: canvas +slug: Web/HTML/Elemento/canvas +tags: + - Canvas + - HTML + - 'HTML:Elemento' + - para_revisar +translation_of: Web/HTML/Element/canvas +--- +

El elemento HTML canvas (<canvas>) se puede utilizar para dibujar gráficos a través de secuencias de comandos (por lo general JavaScript ). Por ejemplo, puede usarse para dibujar gráficos, hacer composiciones de fotos o incluso realizar animaciones.

+ +

+

Las aplicaciones de Mozilla adquirieron la compatibilidad con <canvas> a partir de Gecko 1.8 (es decir, Firefox 1.5 ). El elemento fue originalmente introducido por Apple en el OS X Dashboard y Safari. Internet Explorer, antes de la versión 9.0 beta, no admite de forma nativa <canvas> , pero una página puede de hecho añadir la compatibilidad mediante la inclusión de un script del proyecto Explorer Canvas de Google. Opera 9 también es compatible con <canvas> .

+

+ +

Para más artículos sobre canvas, consulta la página del tema canvas .

+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
Contenido permitidoTransparente, ya sea contenido estático o contenido dinámico .
Omisión de etiquetasNinguna, deben estar presentes tanto las etiquetas de inicio como las de cierre
Elementos primarios permitidosCualquier elemento que acepte contenido dinámico o cualquier otro elemento que acepte contenido estático . 
Documento normativoHTML 5, sección 4.8.10
+ +

Atributos

+ +
+
{{ htmlattrdef("width") }}
+
 La anchura del espacio de coordenadas en píxeles CSS. El valor predeterminado es 300.
+
{{ htmlattrdef("height") }}
+
La altura del espacio de coordenadas en píxeles CSS. El valor predeterminado es 150.
+
+ +
Nota: el tamaño del lienzo mostrado se puede cambiar con una hoja de estilo. La imagen se escala durante la representación para adaptarse al tamaño que se le ha aplicado estilo .
+ +

Interfaz DOM

+ + + +

Ejemplo

+ +
<canvas id="canvas" width="300" height="300">
+  Tu navegador no admite el elemento &lt;canvas&gt;.
+</canvas>
+
+ +

Sobre Accesibilidad

+ +

El elemento <canvas> es simplemente un bitman que no provee ninguna información adicional sobre los elementos que tiene dibujados. El contenido de la etiqueta canvas no se muestra a los lectores de pantalla como otras etiquetas semánticas. Como regla general, deberías evitar utilizar canvas en un sitio accesible.

+ +

Para mejorar la accesibilidad de la etiquetas puedes leer los siguientes artículos (en inglés):

+ + + +

Consulta también

+ + + +

 

+ +

{{ languages( { "de": "de/HTML/Element/canvas", "en": "en/HTML/Element/canvas", "es": "es/HTML/Elemento/canvas", "ja": "ja/HTML/Element/canvas", "ko": "ko/HTML/Element/canvas", "nl": "nl/HTML/HTML_Tags/canvas", "pl": "pl/HTML/Element/canvas", "ru": "Ru/HTML/Element/canvas", "zh-cn": "cn/HTML/Element/canvas", "fr": "fr/HTML/Element/canvas" } ) }}

diff --git a/files/es/web/html/element/caption/index.html b/files/es/web/html/element/caption/index.html new file mode 100644 index 0000000000..84d06cffaa --- /dev/null +++ b/files/es/web/html/element/caption/index.html @@ -0,0 +1,167 @@ +--- +title: caption +slug: Web/HTML/Elemento/caption +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/caption +--- +

Definición

+ +

Es el encargado de darle un título descriptivo a las tablas.

+ +
+
Sus etiquetas son: <caption> y </caption> (ambas obligatorias).
+
+ +
+
Crea una caja: .
+
+ +
+
Está definido como: Elemento para tablas.
+
+ +
+
Puede contener: Texto y/o cero o más elementos en línea.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalorpor omisión
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible. Sensible a M/m..Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m.Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. cdataLo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo.Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma.Lo fija el navegador. PD.: "desconocido".
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Lo fija el navegador. PD.: En castellano 'ltr'.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
align Indica la alineación en relación a la tabla.Uno de los siguientes: 'top', 'bottom', 'left', 'right'.Lo fija el navegador.
atributodescripciónvalorpor omisión
+ +

Ejemplos de uso

+ +
+

Ejemplo simple

+ +

El siguiente código:

+ +

+  <table border='1'>
+   <caption>Tabla con caption</caption>
+    <tr> <td> tabla de una celda. </td>  </tr>
+  </table>
+ 
+
+ +

Se visualiza así:

+ +
+ + + + + + + +
Tabla con caption
tabla de una celda.
+
+
+ +

Estilo predeterminado

+ +

Notas

+ +
    +
  • Debe ser el primer hijo del elemento table. una tabla solo puede tener uno.
    • +
+ +

Referencia

+ + + +

 

+ +

Soporte

+ +

Puede consultar esta comparativa: IE6 vs IE7 vs FF1.5 vs OP9.

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/center/index.html b/files/es/web/html/element/center/index.html new file mode 100644 index 0000000000..1a24bbaf4b --- /dev/null +++ b/files/es/web/html/element/center/index.html @@ -0,0 +1,116 @@ +--- +title:
(obsoleto) +slug: Web/HTML/Elemento/center +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/center +--- +

Definición

+ +

{{obsolete_header()}}
+ El elemento obsoleto center (centro) crea una caja en bloque con el contenido centrado. En realidad es equivalente a un div con align="center"

+ +
+
Sus etiquetas son: <center> y </center> (ambas obligatorias).
+
+ +
+
Crea una caja: en bloque.
+
+ +
+
Está definido como: Elemento desaprobado.
+
+ +
+
+
Actualmente la mejor forma de centrar texto no es con html, con css tenemos infinidad de posibilidales para centrar el texto vertical, horizontal, izquierda, dercha, justificado y todo lo que necesitemos.
+
+
+ +
+
Puede contener: cero o más elementos en bloque y en linea
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Atributovalordescripción
Genéricos
Ver atributos de transición.
Específicos
No tiene
De transición (Solo tiene los genéricos)
titletextoimplícitotítulo consultivo del elemento.
stylereglas de estiloimplícitoinformación de estilo en línea.
idIDimplícitoidentificador único a nivel de documento.
classlista de clases separadas por espaciosimplícitoidentificador a nivel de documento, .
diruno de los siguientes:"ltr" o "rtl"implícitodirección del texto débil/neutral
langcódigo de idiomaimplícitoinformación sobre el idioma
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Atributovalordescripción
+ +

Ejemplos

+ +
<center>
+ elemento center
+</center>
+<div align='center'>
+ elemento div con: align='center'
+</div>
+
diff --git a/files/es/web/html/element/cite/index.html b/files/es/web/html/element/cite/index.html new file mode 100644 index 0000000000..237934b396 --- /dev/null +++ b/files/es/web/html/element/cite/index.html @@ -0,0 +1,147 @@ +--- +title: cite +slug: Web/HTML/Elemento/cite +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/cite +--- +

Definición

+ +

cite -cita . Marca una referencia a una fuente, o el autor de un texto citado.

+ +
+
Sus etiquetas son: <cite> y </cite> (ambas obligatorias)
+
Está definido como: Elemento de frase, y por lo tanto en línea.
+
+ +
+
Crea una caja: En línea.
+
Puede contener: Text y/o cero o más elementos en línea.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalor
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible por personas. Sensible a M/m.. Por defecto: Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. Por defecto: Lo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo. Por defecto: Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma. Por defecto: "desconocido". Lo fija el navegador.
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Por defecto: En castellano 'ltr'. Lo fija el navegador.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
No tiene
atributodescripciónvalor
+ +

Ejemplos de uso

+ +
+

¿Quién lo dijo?

+ +

código:

+ +
<p> <cite>Galileo</cite> dijo: "... y sin embargo, se mueve." </p>
+
+ +


+ Resultado:

+ +
+

Galileo dijo: "...y sin embargo, se mueve."

+
+
+ +

Estilo predeterminado

+ +

En los navegadores basados en Mozilla (y en otros) el contenido de cite es mostrado con un estilo de texto en cursiva.

+ +
<p> <cite>Galileo</cite> dijo: "... y sin embargo, se mueve." </p>
+<p> <span style='font-style: italic;'>Galileo</span> dijo: "... y sin embargo, se mueve." </p>
+
+ +

 

+ +

Notas

+ +
    +
  • Está bastante estendido el mal uso de este elemento, mucha gente lo usa para marcar el texto de las citas en vez del autor, para marcar el texto están los elementos q (en línea) y blockquote (en bloque).
    • +
+ +

Referencia

+ + + +

Soporte

+ +

Puede consultar esta comparativa: IE 6 - IE 7 - FF 1.5 - OP 9.

+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/code/index.html b/files/es/web/html/element/code/index.html new file mode 100644 index 0000000000..dfcac59bfd --- /dev/null +++ b/files/es/web/html/element/code/index.html @@ -0,0 +1,110 @@ +--- +title: code +slug: Web/HTML/Elemento/code +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/code +--- +

 

+ +

Definición

+ +

Es el apropiado para marcar el código de un programa.

+ +
+
Sus etiquetas son: <code> y </code> (ambas obligatorias)
+
+ +
+
Crea una caja: en linea.
+
+ +
+
Está definido como: Elemento de frase.
+
+ +
+
Puede contener: en linea
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Atributovalordescripción
Genéricos
titletextoimplícitotítulo consultivo del elemento.
stylereglas de estiloimplícitoinformación de estilo en línea.
idIDimplícitoidentificador único a nivel de documento.
classCDATAimplícitolista de clases separadas por espacios.
dir(ltr|rtl)implícitodirección del texto débil/neutral
langcódigo de idiomaimplícitoinformación sobre el idioma
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
No tiene
Atributovalordescripción
+ +

 

+ +

Ejemplos

+ +
<code>
+ #include main() { for(;;) { printf ("Hello World!\n"); } } 
+</code>
+
diff --git a/files/es/web/html/element/col/index.html b/files/es/web/html/element/col/index.html new file mode 100644 index 0000000000..4f8c415f87 --- /dev/null +++ b/files/es/web/html/element/col/index.html @@ -0,0 +1,177 @@ +--- +title: col +slug: Web/HTML/Elemento/col +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/col +--- +

Definición

+ +

Permite especificar propiedades para una columna o un grupo de ellas.

+ +
+
Sus etiquetas son: <col> (solo tiene una).
+
+ +
+
Crea una caja: No.
+
+ +
+
Está definido como: Elemento para tablas..
+
+ +
+
Puede contener: Nada.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalorpor omisión
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible. Sensible a M/m..Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m.Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. cdataLo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo.Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma.Lo fija el navegador. PD.: "desconocido".
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Lo fija el navegador. PD.: En castellano 'ltr'.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
span Indica el número de columnas afectadas.Un número.PD.: 1.
width Indica la anchura de las columnas.Una longitud expresada en píxeles, porcentaje o relativa.Lo fija el navegador.
align Indica la alineación horizontal.Uno de los siguientes: (left|center|right|justify|char).Lo fija el navegador.
char Carácter que se usará como punto de alineación.Un carácter, Uno de estos: {{ mediawiki.external('ISO10646') }}.Lo fija el navegador.
charoff offset del carácter de alineación.Una longitud expresada en píxeles o porcentaje.Lo fija el navegador.
valign Indica la alineación vertical de los contenidos de las celdas.Uno de los siguientes: (top|middle|bottom|baseline).Lo fija el navegador.
De transición
No tiene
atributodescripciónvalorpor omisión
+ +

Ejemplos de uso

+ +
+

bla bla

+ +

+
+ 
+
+
+ +

Estilo predeterminado

+ +

Notas

+ +

Referencia

+ + + +

 

+ +

Soporte

+ +

Puede consultar esta comparativa: IE6 vs IE7 vs FF1.5 vs OP9.

+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/colgroup/index.html b/files/es/web/html/element/colgroup/index.html new file mode 100644 index 0000000000..da87284232 --- /dev/null +++ b/files/es/web/html/element/colgroup/index.html @@ -0,0 +1,163 @@ +--- +title: colgroup +slug: Web/HTML/Elemento/colgroup +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/colgroup +--- +

Definición

+ +

colgroup de column group = Grupo de columnas. Permite crear grupos de columnas.

+ +
+
Sus etiquetas son: <colgroup> y </colgroup> (la de cierre es opcional).
+
+ +
+
Crea una caja: No.
+
+ +
+
Está definido como: Elemento para tablas.
+
+ +
+
Puede contener: Cero o más elementos col.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalor
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible. Sensible a M/m.. Por defecto: Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. cdata. Por defecto: Lo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo. Por defecto: Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma. Por defecto: "desconocido". Lo fija el navegador.
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Por defecto: En castellano 'ltr'. Lo fija el navegador.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
span Indica el número de columnas que se agrupan.Un número entero mayor que cero. Por defecto: 1.
width Indica la anchura de las columnas del grupo.Una longitud expresada en píxeles, porcentaje o relativa. Por defecto: Lo fija el navegador.
align Indica la alineación horizontal.Uno de los siguientes: 'left' 'center' 'right' 'justify' y 'char'. Por defecto: Lo fija el navegador.
char Carácter que se usará como punto de alineación.Un carácter. Por defecto: el carácter de punto decimal (puede variar según el idioma). Por defecto: Lo fija el navegador.
charoff Indica la distancia entre el borde y el carácter de alineación.Una longitud expresada en píxeles o porcentaje. Por defecto: Lo fija el navegador.
valign Indica la alineación vertical de los contenidos de las celdas.Uno de los siguientes: 'top' 'middle' 'bottom' y 'baseline'. Por defecto: Lo fija el navegador.
De transición
No tiene
atributodescripciónvalor
+ +

Ejemplos de uso

+ +
+

bla bla

+ +

+
+ 
+
+
+ +

Estilo predeterminado

+ +

Notas

+ +

Referencia

+ + + +

 

+ +

Soporte

+ +

Puede consultar esta comparativa: IE6 vs IE7 vs FF1.5 vs OP9.

+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/content/index.html b/files/es/web/html/element/content/index.html new file mode 100644 index 0000000000..0e380c1cd9 --- /dev/null +++ b/files/es/web/html/element/content/index.html @@ -0,0 +1,167 @@ +--- +title: +slug: Web/HTML/Elemento/content +tags: + - Deprecado + - Elemento + - HTML + - Referencia + - Web + - Web Components +translation_of: Web/HTML/Element/content +--- +

{{Deprecated_header}}

+ +

El elemento HTML <content> es usado dentro de un  Shadow DOM como un {{glossary("insertion point")}} . No está pensado para ser usado en HTML ordinario . Es usado con Web Components.

+ +
+

Nota: Aunque está presente en un draft inicial de las especificaciones e implementado en varios exploradores , este elemento ha sido removido en versiones posteriores a la especificación .

+
+ + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoModelo de contenido transpatente
Contenido permitidoContenido dinámico
Omisión de etiquetas{{no_tag_omission}}
Elementos padre permitidosAny element that accepts flow content.
Interfase DOM{{domxref("HTMLContentElement")}}
+ +

Atributos

+ +

Este elemento incluye los atributos globales .

+ +
+
select
+
Una lista de selectores separada por comas . Estos tienen la misma sintaxis que los selectores de CSS . Seleccionan el contenido a insertar en lugar del elemento <content> .
+
+ +

Ejemplo

+ +

Aquí hay un ejemplo simple del uso del elemento <content> . Es un archivo HTML con todo lo necesario en el .

+ +
+

Nota: Para que este código funcione , el explorador en el que se muestre debe de soportar Web Components . Ver Enabling Web Components in Firefox .

+
+ +
<html>
+  <head></head>
+  <body>
+  <!-- The original content accessed by <content> -->
+  <div>
+    <h4>My Content Heading</h4>
+    <p>My content text</p>
+  </div>
+
+  <script>
+  // Get the <div> above.
+  var myContent = document.querySelector('div');
+  // Create a shadow DOM on the <div>
+  var shadowroot = myContent.createShadowRoot();
+  // Insert into the shadow DOM a new heading and
+  // part of the original content: the <p> tag.
+  shadowroot.innerHTML =
+   '<h2>Inserted Heading</h2> <content select="p"></content>';
+  </script>
+
+  </body>
+</html>
+
+ +

Si muestras esto en un explorador web , debe de verse como lo siguiente .

+ +

content example

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('Shadow DOM', "#the-content-element", "content")}}{{Spec2('Shadow DOM')}} 
+ +

Compatibilidad con exploradores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico35{{CompatGeckoDesktop("28")}} [1]{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CatacterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico 37{{CompatGeckoMobile("28")}} [1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Si el Shadow DOM no está habilidado en Firefox , los elementos de <content> se comportarán como  {{domxref("HTMLUnknownElement")}} . Shadow DOM fue implementado por primera vez en Firefox33 y está detras de una preferencia , dom.webcomponents.enabled, el cual está deshabilitado por default .

+ +

Ver también

+ +
    +
  • Web Components
    • +
  • {{HTMLElement("shadow")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}
    • +
+ +
{{HTMLRef}}
diff --git a/files/es/web/html/element/data/index.html b/files/es/web/html/element/data/index.html new file mode 100644 index 0000000000..8f202fa334 --- /dev/null +++ b/files/es/web/html/element/data/index.html @@ -0,0 +1,141 @@ +--- +title: +slug: Web/HTML/Elemento/data +tags: + - Elemento + - HTML + - Referencia + - Web +translation_of: Web/HTML/Element/data +--- +

Resúmen

+ +

El Elemento HTML <data> vincula un contenido dado con una traducción legible por una máquina. Si el contenido está relacionado con time- o date-, debe usarse el elemento {{HTMLElement("time")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoFlow content, phrasing content, palpable content.
Contenido permitidoPhrasing content.
Omisión de etiqueta{{no_tag_omission}}
Elementos permitidosAny element that accepts phrasing content.
interfaz DOM{{domxref("HTMLDataElement")}}
+ +

Atributos

+ +

Este elemento incluye Atributos globales

+ +
+
{{htmlattrdef("value")}}
+
This attribute specifies the machine-readable translation of the content of the element.
+
+ +

Ejemplo

+ +

El siguiente ejemplo muestra nombres de productos pero también asocia a cada uno con su código UPC.

+ +
<p>New Products</p>
+<ul>
+ <li><data value="3967381398">Mini Ketchup</data></li>
+ <li><data value="3967381399">Jumbo Ketchup</data></li>
+ <li><data value="3967381400">Mega Jumbo Ketchup</data></li>
+</ul>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-data-element', '<data>')}}{{Spec2('HTML WHATWG')}}No change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', '<data>')}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Compatibilidad de navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatGeckoDesktop("22.0")}} {{bug("839371")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver también

+ +
    +
  • The HTML {{HTMLElement("time")}} element.
    • +
+ +

{{HTMLRef}}

diff --git a/files/es/web/html/element/datalist/index.html b/files/es/web/html/element/datalist/index.html new file mode 100644 index 0000000000..40049a9734 --- /dev/null +++ b/files/es/web/html/element/datalist/index.html @@ -0,0 +1,106 @@ +--- +title: datalist +slug: Web/HTML/Elemento/datalist +tags: + - HTML5 + - datalist +translation_of: Web/HTML/Element/datalist +--- +

El elemento HTML <datalist> contiene un conjunto de elementos {{HTMLElement("option")}} que representan los valores disponibles para otros controles.

+ +

La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si desea contribuir al proyecto de ejemplos interactivos, copia https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Contenido de las categoríasContenido de flujo, contenido de fraseo.
Contenido permitidoO bien contenido de fraseo o, cero o más elementos {{HTMLElement("option")}}.
Omisión de etiqueta{{no_tag_omission}}
Elementos padre permitidosCualquier elemento que acepte contenido de fraseo.
Roles ARIA permitidosNinguno
Interfaz DOM{{domxref("HTMLDataListElement")}}
+ +

Atributos

+ +

Este elemento no tiene otros atributos mas que los atributos globales, comunes a todos los elementos.

+ +

Ejemplos

+ +
<label>Choose a browser from this list:
+<input list="browsers" name="myBrowser" /></label>
+<datalist id="browsers">
+  <option value="Chrome">
+  <option value="Firefox">
+  <option value="Internet Explorer">
+  <option value="Opera">
+  <option value="Safari">
+  <option value="Microsoft Edge">
+</datalist>
+
+ +

Resultado

+ +

{{EmbedLiveSample("Examples")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'forms.html#the-datalist-element', '<datalist>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#the-datalist-element', '<datalist>')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilidad con los distintos navegadoresEdit

+ + + +

{{Compat("html.elements.datalist")}}

+ +

sección de relleno

+ +

Incluya este polyfill para proporcionar soporte para navegadores antiguos y actualmente incompatibles:
+ datalist-polyfill

+ +

Ver también

+ +
    +
  • El elemento {{HTMLElement("input")}}, y más especificamente este atributo {{htmlattrxref("list", "input")}};
    • +
  • El elemento {{HTMLElement("option")}}.
    • +
+ +

{{HTMLRef}}

diff --git a/files/es/web/html/element/dd/index.html b/files/es/web/html/element/dd/index.html new file mode 100644 index 0000000000..3296e7758b --- /dev/null +++ b/files/es/web/html/element/dd/index.html @@ -0,0 +1,111 @@ +--- +title: dd +slug: Web/HTML/Elemento/dd +tags: + - Contenido agrupado HTML + - Definición + - Detalles + - Detalles de descripción + - Elemento + - HTML + - Lista de descripciones + - Referencia + - Web + - dd +translation_of: Web/HTML/Element/dd +--- +
{{HTMLRef}}
+ +

El elemento HTML <dd> provee detalles acerca de o la definición de un término precedente ({{HTMLElement("dt")}}) en una lista de descripciones ({{HTMLElement("dl")}}).

+ +
{{EmbedInteractiveExample("pages/tabbed/dd.html", "tabbed-standard")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoNinguna
Contenido permitidoContenido de flujo
Omisión de TagEl tag inicial es requerido. El tag final puede ser omitido si el elemento {{HTMLElement("dd")}} se encuentra inmediatamente seguido por otro elemento <dd>, o si no hay más contenido en el elemento padre.
Padres permitidos{{HTMLElement("dl")}} o (en WHATWG HTML) un {{HTMLElement("div")}} que se encuentra dentro de un {{HTMLElement("dl")}}.
Hermano previo{{HTMLElement("dt")}} u otro elemento {{HTMLElement("dd")}}.
Roles ARIA permitidosNinguno
Interfaz DOM{{domxref("HTMLElement")}}
+ +

Atributos

+ +

Los atributos de este elemento incluye los atributos globales.

+ +
+
{{htmlattrdef("nowrap")}} {{Non-standard_inline}}
+
Si el valor de este atributo es definido como yes, el texto de la definición no se encapsulará. El valor por defecto es no.
+
+ +

Ejemplo

+ +

Para un ejemplo, ver ejemplos <dl>.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('HTML WHATWG', 'semantics.html#the-dd-element', '<dd>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '<dd>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dd>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilidad del navegador

+ + + +

{{Compat("html.elements.dd")}}

+ +

Ver también

+ +
    +
  • {{HTMLELement("dl")}}
    • +
  • {{HTMLElement("dt")}}
    • +
diff --git a/files/es/web/html/element/del/index.html b/files/es/web/html/element/del/index.html new file mode 100644 index 0000000000..b38c85a532 --- /dev/null +++ b/files/es/web/html/element/del/index.html @@ -0,0 +1,155 @@ +--- +title: del +slug: Web/HTML/Elemento/del +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/del +--- +

 

+ +

Definición

+ +

El elemento del (deleted-borrado) marca las partes de un texto o documento que han sido suprimidas o sustituidas.

+ +
+
Sus etiquetas son: <del> y </del> (ambas obligatorias).
+
+ +
+
Crea una caja: a veces en linea a veces en bloque.
+
+ +
+
Está definido como:
+
+ +
+
Puede contener: depende, si actua como un elemento en bloque puede contener elementos en bloque y en linea. Pero si actua como un elemento en linea solo podrá contener elementos en linea.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Atributovalordescripción
Genericos
titletextoimplícitotítulo consultivo del elemento.
stylereglas de estiloimplícitoinformación de estilo en línea.
idIDimplícitoidentificador único a nivel de documento.
classCDATAimplícitoidentificador a nivel de documento, lista de clases separadas por espacios.
dir(ltr|rtl)implícitodirección del texto débil/neutral
langcódigo de idiomaimplícitoinformación sobre el idioma
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
citeURIimplícitoinformación sobre el cambio
datetimefechaimplícitofecha y hora del cambio
de transición
No tiene, o dicho de otra manera, tiene los mismos que en el doctype estricto
Atributovalordescripción
+ +

Ejemplos

+ +

El siguiente código:

+ +
 Ejemplo de ins en linea:
+
+   <p>
+       El agua es insípida <del>y húmeda.</del> <ins>inodora e incolora.</ins>
+   </p>
+
+ Ejemplo de ins en bloque:
+
+   <p>
+       El agua es insípida.
+   </p>
+
+ <del>
+   <p>
+       y húmeda.
+   </p>
+ </del>
+
+ +


+ Se visualiza así:

+ +
+

Ejemplo de ins en linea:

+ +

El agua es insípida

+y húmeda. inodora e incolora. + +

Ejemplo de ins en bloque:

+ +

El agua es insípida.

+ +

 

+ +

 

+y húmeda.
+ +

Comentarios

+ +

El elemento del del tiene un opuesto, el elemento ins. del, marca las partes descartadas e ins las insertadas.

diff --git a/files/es/web/html/element/details/index.html b/files/es/web/html/element/details/index.html new file mode 100644 index 0000000000..cd8b0c5abb --- /dev/null +++ b/files/es/web/html/element/details/index.html @@ -0,0 +1,152 @@ +--- +title:
+slug: Web/HTML/Elemento/details +tags: + - Elemento + - Elementos HTML interactivos + - HTML + - HTML5 + - Referencia + - Web +translation_of: Web/HTML/Element/details +--- +

{{ SeeCompatTable() }}

+ +

Resumen

+ +

El elemento HTML Details <details> es usado como un widget de revelación a través del cual el usuario puede obtener información adicional .

+ + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoContenido dinámico , contenido de seccionamiento, contenido interactivo, contenido palpable .
Contenido permitidoUn elemento  {{HTMLElement("summary")}}  seguido de contenido dinámico 
Omisión de etiquetas{{no_tag_omission}}
Elementos padres permitidosCualquier elemento que acepte  contenido dinámico.
Interfaz DOM{{domxref("HTMLDetailsElement")}}
+ +

Atributos

+ +

Este elemento incluye los atributos globales .

+ +
+
{{htmlattrdef("open")}}
+
Este atributo Booleano indica si los detalles serán mostrados al usuario cuando la página se cargue . Por default el valor es false y por lo tanto los detalles estarán ocultos.
+
+
+ +

Ejemplo

+ +
<details>
+  <summary>Some details</summary>
+  <p>More info about the details.</p>
+</details>
+
+ +

Resultado

+ +

{{EmbedLiveSample("Example")}}

+ +
+

Nota: Si el el ejemplo de arriba no funciona , ver {{anch("Compatibilidad con navegadores")}}  para determinar si el navegador soporta esta característica .

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacionesEstatusComentario
{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '<details>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'semantics.html#the-details-element', '<details>')}}{{Spec2('HTML5.1')}}
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico12{{CompatNo}} {{bug(591737)}}{{CompatNo}}156
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.0{{CompatNo}} {{bug(591737)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

+ +

Ver también

+ +
    +
  • {{HTMLElement("summary")}}
    • +
+ +
{{HTMLRef}}
diff --git a/files/es/web/html/element/dfn/index.html b/files/es/web/html/element/dfn/index.html new file mode 100644 index 0000000000..03242c90bd --- /dev/null +++ b/files/es/web/html/element/dfn/index.html @@ -0,0 +1,112 @@ +--- +title: dfn +slug: Web/HTML/Elemento/dfn +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/dfn +--- +

 

+ +

Definición

+ +

Sirve para marcar el término que se quiere definir.

+ +
+
Sus etiquetas son: <dfn> y </dfn> (ambas obligatorias)
+
+ +
+
Crea una caja: en linea.
+
+ +
+
Está definido como: Elemento de frase.
+
+ +
+
Puede contener: cero o más elementos en linea
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Atributovalordescripción
Genéricos
titletextoimplícitotítulo consultivo del elemento.
stylereglas de estiloimplícitoinformación de estilo en línea.
idIDimplícitoidentificador único a nivel de documento.
classCDATAimplícitoidentificador a nivel de documento, lista de clases separadas por espacios.
dir(ltr|rtl)implícitodirección del texto débil/neutral
langcódigo de idiomaimplícitoinformación sobre el idioma
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
No tiene
Atributovalordescripción
+ +

 

+ +

Ejemplos

+ +
<p>
+     El <dfn>HTML</dfn> es un lenguaje de marcado para hipertextos.
+</p>
+
+ +

Comentarios

diff --git a/files/es/web/html/element/dialog/index.html b/files/es/web/html/element/dialog/index.html new file mode 100644 index 0000000000..e44363c003 --- /dev/null +++ b/files/es/web/html/element/dialog/index.html @@ -0,0 +1,152 @@ +--- +title: +slug: Web/HTML/Elemento/dialog +translation_of: Web/HTML/Element/dialog +--- +
{{HTMLRef}}
+ +

El elemento HTML <dialog> representa una caja de diálogo u otro componente interactivo, como inspector o ventana.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, sectioning root
Permitted contentFlow content
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts flow content
DOM interface{{domxref("HTMLDialogElement")}}
+ +

Atributos

+ +

Este elemento incluye los atributos globales. El atributo tabindex no debe utilizarse en el elemento <dialog>.

+ +
+
{{htmlattrdef("open")}}
+
Indica que el diálogo está activo y disponible para interactuar. Cuando el atributo open no está asignado, no debe mostrarse al usuario.
+
+ +

Notas de uso

+ +

 

+ +
    +
  • Los elementos <form> pueden integrarse dentro de un diálogo  especificándolos con el atributo method="dialog". Cuando se envía un formulario, el diálogo se cierra con un atributo {{domxref("HTMLDialogElement.returnValue", "returnValue")}} asignado con el value del botón utilizado.
    • +
  • El pseudo-elemento {{cssxref('::backdrop')}} de CSS puede utilizarse para dar estilos al elemento <dialog>, por ejemplo para atenuar contenido inaccesible mientras el diálogo modal esté activo.
    • +
+ +

 

+ +

Ejemplos

+ +

Ejemplo 1

+ +
<dialog open>
+  <p>Greetings, one and all!</p>
+</dialog>
+
+ +

Ejemplo 2

+ +
<!-- Simple pop-up dialog box, containing a form -->
+<dialog id="favDialog">
+  <form method="dialog">
+    <section>
+      <p><label for="favAnimal">Favorite animal:</label>
+      <select id="favAnimal">
+        <option></option>
+        <option>Brine shrimp</option>
+        <option>Red panda</option>
+        <option>Spider monkey</option>
+      </select></p>
+    </section>
+    <menu>
+      <button id="cancel" type="reset">Cancel</button>
+      <button type="submit">Confirm</button>
+    </menu>
+  </form>
+</dialog>
+
+<menu>
+  <button id="updateDetails">Update details</button>
+</menu>
+
+<script>
+  (function() {
+    var updateButton = document.getElementById('updateDetails');
+    var cancelButton = document.getElementById('cancel');
+    var favDialog = document.getElementById('favDialog');
+
+    // Update button opens a modal dialog
+    updateButton.addEventListener('click', function() {
+      favDialog.showModal();
+    });
+
+    // Form cancel button closes the dialog box
+    cancelButton.addEventListener('click', function() {
+      favDialog.close();
+    });
+
+  })();
+</script>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'semantics.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML5.1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

 

+ + + +

{{Compat("html.elements.dialog")}}

+ +

 

+ +

Ver también

+ +
    +
  • Formularios HTML.
    • +
  • El evento {{event("close")}}
    • +
  • El evento {{event("cancel")}}
    • +
  • El pseudo-elemento {{cssxref("::backdrop")}}
    • +
diff --git a/files/es/web/html/element/dir/index.html b/files/es/web/html/element/dir/index.html new file mode 100644 index 0000000000..6c95601436 --- /dev/null +++ b/files/es/web/html/element/dir/index.html @@ -0,0 +1,121 @@ +--- +title: dir +slug: Web/HTML/Elemento/dir +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/dir +--- +

 

+ +

Definición

+ +

El elemento dir (directorio) es un elemento desaprobado. En su origen fue pensado para crear directorios en multicolumna, en la actualidad es inutil.

+ +
+
Sus etiquetas son: <dir> y </dir> (ambas obligatorias).
+
+ +
+
Crea una caja: en bloque.
+
+ +
+
Está definido como: Elemento DESAPROBADO.
+
+ +
+
Puede contener: uno o más elementos li
+
NO puede contener: Elementos en bloque
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Genericos
Genericos
titletextoimplícitotítulo consultivo del elemento.
stylereglas de estiloimplícitoinformación de estilo en línea.
idIDimplícitoidentificador único a nivel de documento.
classCDATAimplícitoidentificador a nivel de documento, lista de clases separadas por espacios.
dir(ltr|rtl)implícitodirección del texto débil/neutral
langcódigo de idiomaimplícitoinformación sobre el idioma
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
de transición
compactcompactimplícitoespacio entre objetos reducido
+ +

Ejemplos

+ +

El siguiente código:

+ +
 <dir>
+  <li>primer elemento </li>
+  <li>segundo elemento </li>
+  <li>tercer elemento </li>
+ </dir>
+
+ +
+

Se visualiza así:

+ +
    +
  • primer elemento
    • +
  • segundo elemento
    • +
  • tercer elemento
    • +
+
+ +

Comentarios

diff --git a/files/es/web/html/element/div/index.html b/files/es/web/html/element/div/index.html new file mode 100644 index 0000000000..5421099e45 --- /dev/null +++ b/files/es/web/html/element/div/index.html @@ -0,0 +1,152 @@ +--- +title: div +slug: Web/HTML/Elemento/div +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/div +--- +

Definición

+ +

div de "division" -división . Sirve para crear secciones o agrupar contenidos.

+ +
+
Sus etiquetas son: <div> y </div> (ambas obligatorias).
+
Está definido como: Elemento en bloque.
+
+ +
+
Crea una caja: En bloque.
+
Puede contener: Texto, y/o cero o más elementos en bloque o en linea.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalor
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible por personas. Sensible a M/m.. Por defecto: Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. Por defecto: Lo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo. Por defecto: Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma. Por defecto: "desconocido". Lo fija el navegador.
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Por defecto: En castellano 'ltr'. Lo fija el navegador.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
datasrc Enlaza a una fuente de datos externa (individual o tabular). Reservado para posibles usos futuros.Una dirección URI. Por defecto: Lo fija el navegador.
datafld El nombre de una propiedad o columna de datasrc. Reservado para posibles usos futuros.Por defecto: Lo fija el navegador.
dataformatas Indica como deben ser tratados los datos obtenidos de datasrc. Reservado para posibles usos futuros.Uno de los siguientes: 'paintext' o 'html'. Por defecto: 'plaintext'
De transición
align Alineación del texto.Uno de los siguientes: "left", "center", "right", o "justify". Por defecto: 'left', lo fija el navegador
atributodescripciónvalor
+ +

Ejemplos de uso

+ +
+

Div y span

+ +

código:

+ +
<div style="color: blue;">
+ <h2> Ejemplo de div y span </h2>
+  <p>
+    Esto es un párrafo dentro de un div,
+    <span style="color: red;"> y esto un span dentro de un párrafo.</span>
+  </p>
+</div>
+
+ +

el wiki causa interferencias Resultado: <div style='border: solid silver 1px;'> <div style="color: blue;"> <h2> Ejemplo de div y span </h2> <p> Esto es un párrafo dentro de un div, <span style="color: red;"> y esto un span dentro de un párrafo.</span> </p> </div> </div>

+
+ +

Estilo predeterminado

+ +

Notas

+ +

Referencia

+ + + +

 

+ +

Soporte

+ +

Puede consultar esta comparativa: IE 6 - IE 7 - FF 1.5 - OP 9.

+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/dl/index.html b/files/es/web/html/element/dl/index.html new file mode 100644 index 0000000000..9bea9588ce --- /dev/null +++ b/files/es/web/html/element/dl/index.html @@ -0,0 +1,219 @@ +--- +title: dl +slug: Web/HTML/Elemento/dl +tags: + - Agrupando contenido HTML + - Elemento + - HTML + - Referencia + - Web +translation_of: Web/HTML/Element/dl +--- +
{{HTMLRef}}
+ +

El elemento HTML <dl>  representa una lista descriptiva. El elemento encierra una lista de grupos de términos (especificados con el uso del elemento {{HTMLElement("dt")}}) y de descripciones (proveídas con elementos {{HTMLElement("dd")}}). Algunos usos comunes para este elemento son implementar un glosario o para desplegar metadatos (lista de pares llave-valor).

+ +
{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoContenido de flujo, y si los elementos hijos de <dl> incluyen un grupo nombre-valor, contenido palpable.
Contenido permitido +

Ya sea: Cero o más grupos cada uno consistiendo en uno o más elementos {{HTMLElement("dt")}} seguidos por uno o más elementos {{HTMLElement("dd")}}, opcionalmente intercalados con elementos {{HTMLElement("script")}} y elementos {{HTMLElement("template")}}.
+ O: Uno o más elementos {{HTMLElement("div")}}, opcionalmente entremezclados con elementos {{HTMLElement("script")}} y elementos {{HTMLElement("template")}}.

+
Omisión de Tag{{no_tag_omission}}
Padres permitidosCualquier elemento que acepte contenido de flujo.
Roles ARIA permitidos{{ARIARole("group")}}, {{ARIARole("presentation")}}
Interfaz DOM{{domxref("HTMLDListElement")}}
+ +

Atributos

+ +

Los atributos de este elemento incluyen los atributos globales.

+ +

Ejemplos

+ +

Término sencillo y descripción

+ +
<dl>
+  <dt>Firefox</dt>
+  <dd>
+    A free, open source, cross-platform,
+    graphical web browser developed by the
+    Mozilla Corporation and hundreds of
+    volunteers.
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+
+ +

Salida:

+ +

Image:HTML-dl1.png

+ +

Múltiples términos, descripción sencilla

+ +
<dl>
+  <dt>Firefox</dt>
+  <dt>Mozilla Firefox</dt>
+  <dt>Fx</dt>
+  <dd>
+    A free, open source, cross-platform,
+    graphical web browser developed by the
+    Mozilla Corporation and hundreds of
+    volunteers.
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+
+ +

Salida:

+ +

Image:HTML-dl2.png

+ +

Término sencillo, múltiples descripciones

+ +
<dl>
+  <dt>Firefox</dt>
+  <dd>
+    A free, open source, cross-platform,
+    graphical web browser developed by the
+    Mozilla Corporation and hundreds of
+    volunteers.
+  </dd>
+  <dd>
+    The Red Panda also known as the Lesser
+    Panda, Wah, Bear Cat or Firefox, is a
+    mostly herbivorous mammal, slightly larger
+    than a domestic cat (60 cm long).
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+
+ +

Output:

+ +

Image:HTML-dl3.png

+ +

Múltiples términos y descripciones

+ +

También es posible definir múltiples términos con múltiples descripciones correspondientes, combinando los ejemplos de arriba.

+ +

Metadatos

+ +

Las listas descriptivas son útiles para desplegar metadatos como una lista de pares llave-valor.

+ +
<dl>
+  <dt>Name</dt>
+  <dd>Godzilla</dd>
+  <dt>Born</dt>
+  <dd>1952</dd>
+  <dt>Birthplace</dt>
+  <dd>Japan</dd>
+  <dt>Color</dt>
+  <dd>Green</dd>
+</dl>
+
+ +

Tip: Puede ser útil definir un separador llave-valor en el CSS, como:

+ +
dt::after {
+  content: ": ";
+}
+ +

Encapsulado de grupos nombre-valor en elementos {{HTMLElement("div")}}

+ +

WHATWG HTML permite encapsular cada grupo nombre-valor de un elemento {{HTMLElement("dl")}} en un elemento {{HTMLElement("div")}}. Esto puede ser útil cuando se utilizan microdatos, o cuando atributos globales apliquen a todo el grupo, o por motivos de estilo.

+ +
<dl>
+  <div>
+    <dt>Name</dt>
+    <dd>Godzilla</dd>
+  </div>
+  <div>
+    <dt>Born</dt>
+    <dd>1952</dd>
+  </div>
+  <div>
+    <dt>Birthplace</dt>
+    <dd>Japan</dd>
+  </div>
+  <div>
+    <dt>Color</dt>
+    <dd>Green</dd>
+  </div>
+</dl>
+
+ +

Notas

+ +

No use este elemento (ni elementos {{HTMLElement("ul")}}) solo para crear sangría en una página. Si bien funciona, es una mala práctica y obscurece el signinifcado de las listas descriptivas.

+ +

Para cambiar la indentación de un término, usa la propiedad {{cssxref("margin")}} de CSS.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('HTML WHATWG', 'semantics.html#the-dl-element', '<dl>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}}{{Spec2('HTML4.01')}}Definición inicial
+ +

Compatibilidad Web

+ + + +

{{Compat("html.elements.dl")}}

+ +

See also

+ +
    +
  • {{HTMLElement("dt")}} element
    • +
  • {{HTMLElement("dd")}} element
    • +
diff --git a/files/es/web/html/element/dt/index.html b/files/es/web/html/element/dt/index.html new file mode 100644 index 0000000000..7cbf0c3182 --- /dev/null +++ b/files/es/web/html/element/dt/index.html @@ -0,0 +1,103 @@ +--- +title: dt +slug: Web/HTML/Elemento/dt +tags: + - Contenido agrupado HTML + - Definición + - Elemento + - HTML + - Lista de definiciones + - Referencia + - Término + - Término de definición + - dt + - listas +translation_of: Web/HTML/Element/dt +--- +
{{HTMLRef}}
+ +

El  elemento HTML <dt> especifica un término en una descripción o lista de definiciones, y como tal debe utilizarse dentro de un elemento {{HTMLElement("dl")}} Es usualmente seguido por un elemento {{HTMLElement("dd")}}; sin embargo, múltiples elementos <dt>  en un renglón indican diferentes términos los cuales todos son definidos por el siguiente elemento {{HTMLElement("dd")}}.

+ +

El subsecuente elemento {{HTMLElement("dd")}} (Detalles de la descripción) provee la definición u otro texto relacionado asociado con el término especificado utilizando <dt>.

+ +
{{EmbedInteractiveExample("pages/tabbed/dt.html", "tabbed-standard")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoNinguno.
Contenido permitidoContenido de flujo, pero sin {{HTMLElement("header")}}, {{HTMLElement("footer")}}, contenido seccionado o encabezados descendientes de contenido.
Omisión de TagDebe tener un tag inicial. El tag final puede ser omitido si este elemento es seguido inmediatamente después por otro elemento <dd>,  o si no hay más contenido en el elemento padre.
Padres permitidosAntes de un elemento {{HTMLElement("dt")}} o elemento {{HTMLElement("dd")}}, dentro de un {{HTMLElement("dl")}} o (en WHATWG HTML) un {{HTMLElement("div")}} que esta dentro de un {{HTMLElement("dl")}}.
Roles ARIA permitidosNinguno
Interfaz DOM{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement interface for this element.
+ +

Atributos

+ +

Este elemento solo incluye los atributos globales.

+ +

Ejemplo

+ +

Para ver un ejemplo, vea el proveído por el elemento <dl>.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', 'semantics.html#the-dt-element', '<dt>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '<dt>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dt>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilidad del navegador

+ + + +

{{Compat("html.elements.dt")}}

+ +

Vea también

+ +
    +
  • {{HTMLElement("dd")}}, {{HTMLElement("dl")}}
    • +
diff --git a/files/es/web/html/element/em/index.html b/files/es/web/html/element/em/index.html new file mode 100644 index 0000000000..d24fa05f81 --- /dev/null +++ b/files/es/web/html/element/em/index.html @@ -0,0 +1,60 @@ +--- +title: em +slug: Web/HTML/Elemento/em +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/em +--- +
{{HTMLRef}}
+ +

El elemento HTML <em> es el apropiado para marcar con énfasis las partes importantes de un texto. El elemento <em> puede ser anidado, con cada nivel de anidamiento indicando un mayor grado de énfasis.

+ +
{{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoContenido dinámico, contenido textual o estático, contenido palpable
Contenido permitidoContenido textual o estático.
Tag omission{{no_tag_omission}}
Permitted parentsAny element that accepts phrasing content.
Permitted ARIA rolesAny
DOM interface{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.
+ +

Atributos

+ +

Este elemento solo incluye los atributos globales.

+ +

Ejemplos

+ +
 <p>
+     <em>El dinero</em> es importante pero <strong>la salud</strong> lo es más.
+ </p>
+
+ +

Comentarios

+ +

em tiene un hermano mayor: strong. em sirve para dar énfasis y strong para dar mucho énfasis

diff --git a/files/es/web/html/element/embed/index.html b/files/es/web/html/element/embed/index.html new file mode 100644 index 0000000000..d489014613 --- /dev/null +++ b/files/es/web/html/element/embed/index.html @@ -0,0 +1,69 @@ +--- +title: embed +slug: Web/HTML/Elemento/embed +tags: + - HTML + - HTML5 + - 'HTML:Elemento' + - para_revisar +translation_of: Web/HTML/Element/embed +--- +
Nota: este tema documenta sólo el elemento <embed> que se define como parte de HTML5. No trata las implementaciones anteriores no estandarizadas del elemento <embed>.
+ +

El Elemento HTML Embed ( <embed> ) representa un punto de integración para una aplicación externa o de contenido interactivo (en otras palabras, un plug-in).

+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
Contenido permitidoNinguno; es un elemento vacío.
Omisión de etiquetasDebe tener una etiqueta de inicio, pero no debe tener una etiqueta de cierre.
Elementos primarios permitidosCualquier elemento que acepte contenido estático .
Documento normativoHTML 5, sección 4.8.3
+ +

Atributos

+ +

Este elemento admite los siguientes atributos además de los atributos globales .

+ +
+
{{ htmlattrdef("height") }}
+
La altura del recurso mostrada en píxeles CSS.
+
{{ htmlattrdef("src") }}
+
La dirección URL del recurso que se está incrustado.
+
{{ htmlattrdef("type") }}
+
El tipo MIME que se va a usar para la selección del plug-in para crear una instancia.
+
{{ htmlattrdef("width") }}
+
El ancho del recurso mostrado en píxeles CSS.
+
+ +

Interfaz DOM

+ + + +

Consulta también

+ +

Otros elementos que se utilizan para incrustar el contenido de varios tipos incluyen {{ HTMLElement("audio") }}, {{ HTMLElement("canvas") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("math") }}, {{ HTMLElement("object") }}, {{ HTMLElement("svg") }} y  {{ HTMLElement("video") }}.

+ +

 

+ +

 

+ +

{{ languages ( { "en": "en/HTML/Element/embed" } ) }}

+ +

 

diff --git a/files/es/web/html/element/fieldset/index.html b/files/es/web/html/element/fieldset/index.html new file mode 100644 index 0000000000..bb29878206 --- /dev/null +++ b/files/es/web/html/element/fieldset/index.html @@ -0,0 +1,124 @@ +--- +title: fieldset +slug: Web/HTML/Elemento/fieldset +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/fieldset +--- +

Definición

+ +

El elemento fieldset (grupo de campos) permite organizar en grupos los campos de un formulario.

+ +
+
Sus etiquetas son: <fieldset> y </fieldset> (ambas obligatorias).
+
+ +
+
Crea una caja: en bloque.
+
+ +
+
Está definido como: Elemento en bloque.
+
+ +
+
Puede contener: un elemento legend (opcional), y despues cero o más elementos en bloque o en linea
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Atributovalordescripción
Genéricos
titletextoimplícitotítulo consultivo del elemento.
stylereglas de estiloimplícitoinformación de estilo en línea.
idIDimplícitoidentificador único a nivel de documento.
classlista de clases separadas por espaciosimplícitoidentificador a nivel de documento
diruno de los siguientes:"ltr" o "rtl"implícitodirección del texto débil/neutral
langcódigo de idiomaimplícitoinformación sobre el idioma
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
de transición
No tiene
Atributovalordescripción
+ +

Ejemplos

+ +

El siguiente código:

+ +
<form>
+
+ <fieldset>
+  <legend>Información Personal</legend>
+  Nombre: <input name='nombre' type='text' tabindex='1'>
+  Apellidos: <input name='apellidos' type='text' tabindex='2'>
+ </fieldset>
+
+ <fieldset>
+  <legend>edad</legend>
+  <input type='checkbox' tabindex='20'
+            name='edad' value='20-39' > 20-39
+  <input type='checkbox' tabindex='21'
+            name='edad' value='40-59' > 40-59
+  <input type='checkbox' tabindex='22'
+            name='edad' value='60-79' > 60-79
+ </fieldset>
+
+</form>
+
diff --git a/files/es/web/html/element/figcaption/index.html b/files/es/web/html/element/figcaption/index.html new file mode 100644 index 0000000000..b212c17632 --- /dev/null +++ b/files/es/web/html/element/figcaption/index.html @@ -0,0 +1,90 @@ +--- +title:
+slug: Web/HTML/Elemento/figcaption +tags: + - Elemento + - Elementos de agrupación de contenido en HTML + - HTML + - Referencia +translation_of: Web/HTML/Element/figcaption +--- +

{{HTMLRef}}

+ +

El elemento HTML <figcaption>  representa un subtítulo o leyenda asociado al contenido del elemento padre {{HTMLElement("figure")}}, pudiendo ser colocado como primer o último hijo. Es importante destacar que el elemento <figcaption> es opcional.

+ +

{{EmbedInteractiveExample("pages/tabbed/figcaption.html","tabbed-shorter")}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesNinguna
Contenido PermitidoFlow content.
Omisión de etiqueta{{no_tag_omission}}
Elementos padre permitidosEn un  elemento {{HTMLElement("figure")}} el elemento <figcaption> debe ser el primero o el último hijo.
Interfaz DOM{{domxref("HTMLElement")}}
Contento en el que puede ser usadoComo the first o last child de un <figure> element
+ +

Atributos

+ +

Este elemento sólo incluye los global attributes.

+ +

Ejemplos

+ +

Para ejemplos con <figcaption>, por favor ver la página {{HTMLElement("figure")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}{{Spec2('HTML5 W3C')}} 
+ +

Compatibilidad con los distintos navegadores

+ + + +

{{Compat("html.elements.figcaption")}}

+ +

Ver además

+ +
    +
  • El elemento {{HTMLElement("figure")}}.
    • +
diff --git a/files/es/web/html/element/figure/index.html b/files/es/web/html/element/figure/index.html new file mode 100644 index 0000000000..1ad3d12a07 --- /dev/null +++ b/files/es/web/html/element/figure/index.html @@ -0,0 +1,60 @@ +--- +title: figure +slug: Web/HTML/Elemento/figure +tags: + - HTML + - HTML5 + - 'HTML:Elemento' + - figure + - para_revisar +translation_of: Web/HTML/Element/figure +--- +

El elemento HTML <figure> representa contenido independiente, a menudo con un título. Si bien se relaciona con el flujo principal, su posición es independiente de éste. Por lo general, se trata de una imagen, una ilustración, un diagrama, un fragmento de código, o un esquema al que se hace referencia en el texto principal, pero que se puede mover a otra página o a un apéndice sin que afecte al flujo principal.

+ +
+

Notas de uso:

+ +
    +
  • Al ser una seccionador raíz, el esbozo del contenido del elemento <figure> está excluido del esbozo principal del documento.
    • +
  • Un título puede estar asociado con el elemento <figure> mediante la inserción de un {{ HTMLElement ("figcaption") }} en su interior (como el primero o el último hijo).
    • +
+
+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + + + + + +
TipoSeccionador raíz
Contenido permitidoUn elemento {{ HTMLElement ("figcaption") }}, seguido por contenido dinámico , o contenido dinámico seguido por un elemento{{ HTMLElement ("figcaption") }}.
Omisión de etiquetasNinguna, tanto la etiqueta inicial como la etiqueta de cierre son obligatorias
Elementos primarios permitidosCualquier elemento que acepte elementos dinámicos.
Documento normativoHTML 5, sección 4.5.11
+ +

Atributos

+ +

Este elemento no tiene atributos que no sean los atributos globales, comunes a todos los elementos.

+ +

Interfaz DOM

+ +

Este elemento implementa la interfaz HTMLElement.

+ +

Consulta también

+ +

El elemento {{ HTMLElement ("figcaption") }}.

diff --git a/files/es/web/html/element/font/index.html b/files/es/web/html/element/font/index.html new file mode 100644 index 0000000000..e1020b3d95 --- /dev/null +++ b/files/es/web/html/element/font/index.html @@ -0,0 +1,152 @@ +--- +title: font +slug: Web/HTML/Elemento/font +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/font +--- +

Definición

+ +

font -fuente . Indica el tamaño, color, o fuente del texto que contiene.

+ +
+
Sus etiquetas son: <font> y </font> (ambas obligatorias).
+
Está definido como: Elemento desaprobado. +
+
En un doctype transicional está definido como un elemento especial y por lo tanto en línea.
+
+
+
+ +
+
Crea una caja: En línea.
+
Puede contener: Texto, y/o cero o más elementos en línea .
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalor
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible por personas. Sensible a M/m.. Por defecto: Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. Por defecto: Lo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo. Por defecto: Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma. Por defecto: "desconocido". Lo fija el navegador.
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Por defecto: En castellano 'ltr'. Lo fija el navegador.
Específicos
No tiene
De transición
sizeTamaño de la fuente. Según una tabla del 1 al 7.Un número entero (ej. 1), o un valor incremental (ej. +1). Por defecto: debe indicarlo el autor.
colorEl color del texto.Un color RGB. Por defecto: Lo fija el navegador.
faceEspecifica la/s fuentes para el texto.Lista de nombres de fuentes separadas por coma. Por defecto: Lo fija el navegador.
atributodescripciónvalor
+ +

Ejemplos de uso

+ +
+

Un ejemplo simple

+ +

código:

+ +
<p>
+ Texto normal y ...
+ <font size="5" color="#0000ff"> Texto distinto. </font>
+</p>
+
+ +

Resultado:

+ +
+

Texto normal y ... Texto distinto.

+
+
+ +

Estilo predeterminado

+ +

Notas

+ +

Referencia

+ + + +

 

+ +

Soporte

+ +

Puede consultar esta comparativa: IE 6 - IE 7 - FF 1.5 - OP 9.

+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/footer/index.html b/files/es/web/html/element/footer/index.html new file mode 100644 index 0000000000..fb29106abc --- /dev/null +++ b/files/es/web/html/element/footer/index.html @@ -0,0 +1,71 @@ +--- +title: footer +slug: Web/HTML/Elemento/footer +tags: + - HTML5 + - footer + - para_revisar +translation_of: Web/HTML/Element/footer +--- +

El Elemento HTML Footer (<footer>) representa un pie de página para el contenido de sección más cercano o el elemento  raíz de sección (p.e, su ancestro mas cercano <article>, <aside>, <nav>, <section>,<blockquote>, <body>, <details>, <fieldset>, <figure>, <td>). Un pie de página típicamente contiene información acerca de el autor de la sección, datos de derechos de autor o enlaces a documentos relacionados.

+

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

+
+

Notas de uso:

+
    +
  • Encierra la información acerca del autor en un elemento <address> que puede ser incluido dentro del elemento <footer>.
    • +
  • El  elemento <footer> no es contenido de sección y en consecuencia no introduce una nueva sección en el esquema.
    • +
+
+
+

Contexto de uso

+
+ Editar sección
+ + + + + + + + + + + + + + + + + + + +
Contenido PermitidoContenido de flujo, pero sin descendientes  <footer> o <header>.
Omisión de EtiquetaNinguna, tanto la etiqueta de inicio como la de cierre son obligatorias.
Elementos ancestros permitidos +

Cualquier elemento que acepte contenido de flujo. Note que un elemento <footer> no debe ser un descendiente de los elementos <address>, <header> o de otro elemento <footer>.

+
Documento normativoHTML5, sección 4.4.9
+
+
+

Atributos

+
+ Editar sección
+

Este elemento no tiene otros atributos adicionales a los atributos globales, comunes a todos los elementos.

+
+
+
+

Interfaz DOM

+
+ Editar sección
+

Este elemento implementa la interfaz HTMLElement.

+
+
+

Vea también

+
+ Editar sección
+ +
+
+
+
+

 

diff --git a/files/es/web/html/element/form/index.html b/files/es/web/html/element/form/index.html new file mode 100644 index 0000000000..d0ade4348c --- /dev/null +++ b/files/es/web/html/element/form/index.html @@ -0,0 +1,198 @@ +--- +title: form +slug: Web/HTML/Elemento/form +translation_of: Web/HTML/Element/form +--- +

Resumen

+

El elemento HTML form (<form>) representa una sección de un documento que contiene controles interactivos que permiten a un usuario enviar información a un servidor web.

+

Es posible usar las pseudo-clasess de CSS :valid e :invalid  para darle estilos a un elemento form.

+

Contexto de uso

+ + + + + + + + + + + + + + + + + + + +
Categorías de contenidoContenido dinámico
Contenido permitidoContenido dinámico, pero sin contener elementos <form>
Omisión de etiquetasNinguna, ambas, la etiqueta de apertura y cierre deben estar presentes
Normative documentHTML5, section 4.10.3 (HTML4.01, section 17.3)
+

Atributos

+

Como cualquier otro elemento HTML, este elemento soporta atributos globales

+
+
+ {{ htmlattrdef("accept") }} {{ HTMLVersionInline(4) }} {{ obsolete_inline() }}
+
+ Una lista separada por comas de los tipos de contenido que el servidor acepta.
+
+

Nota de uso: este atributo ha sido removido en HTML5 y no debe ser usado. En su lugar, usar el atributo accept del elemento específico {{ HTMLElement("input") }}.

+
+
+
+ {{ htmlattrdef("accept-charset") }}
+
+ Una lista de codificación de caracteres que el servidor acepta. La lista puede ser delimitada por espacios o comas. El navegador los usa en el orden en que cada uno son listados. Los valores por defecto es la cadena reservada "UNKNOWN", en tal caso la codificación corresponde a la codificación del documento conteniendo el elemento form.
+

HTML 4: En versiones anteriores de HTML, las diferentes codificaciones de caracteres pueden ser delimitadas por espacios o comas. Este no es más el caso en HTML5, donde sólo los espacios son correctos.

+
+
+ {{ htmlattrdef("action") }}
+
+ La URI de un programa que procesa la información enviada por medio del formulario. Este valor puede ser sobreescrito por un atributo {{ htmlattrxref("formaction", "button") }} en un {{ HTMLElement("button") }} o en el elemento{{ HTMLElement("input") }}.
+
+ {{ htmlattrdef("autocomplete") }} {{ HTMLVersionInline(5) }}
+
+ Indica cuales de los controles en este formulario puede tener sus valores automáticamente completados por el navegador. Esta configuración puede ser sobreescrita por un atributo autocomplete en un elemento que pertenezca al formulario: +
    +
  • off: El usuario debe ingresar explicitamente cada valor dentro de cada campo por cada uso, o el documento provee su propio método de autocompletado; el navegador no autocompleta las entradas.
    • +
  • on: El navegador puede completar automáticamente valores basados en lo que el usuario ha ingresado durante entradas previas al formulario.
    • +
+
+

Nota: si se establece autocomplete a un valor de off en un formulario porque el documento provee su propio auto-completado entonces también se debería establecer  autocomplete al valor off para cada uno de los elementos de formulario input que el documento pueda autocompletar {{ anch("Notas para Google Chrome") }}.

+
+
+
+ {{ htmlattrdef("enctype") }}
+
+ Cuando el valor del atributo method es post, este atributo es el  tipo MIME del contenido que es usado para enviar el formulario al servidor.
+
+ Los posibles valores son: +
    +
  • application/x-www-form-urlencoded: El valor por defecto si un atributo no está especificado.
    • +
  • multipart/form-data: Usar este valor si se está usando el elemento {{ HTMLElement("input") }} con el atributo type ajustado a "file".
    • +
  • text/plain (HTML5)
    • +
+

Este valor puede ser sobreescrito por un atributo{{ htmlattrxref("formenctype", "button") }}en un {{ HTMLElement("button") }} o un elemento {{ HTMLElement("input") }}.

+
+
+ {{ htmlattrdef("method") }}
+
+ El método HTTP que el navegador usa para enviar el formulario. Valores posibles son: +
    +
  • post: Corresponde al método POST HTTP ; los datos del formulario son incluidos en el cuerpo del formulario y son enviados al servidor.
    • +
  • get: Corresponde al método GET HTTP; los datos del formulario son adjuntados a la URI del atributo  action , con un '?' como separador,  y la URI resultante es enviada al servidor. Use este método cuando el formulario no tiene efectos secundarios y contiene solo caracteres ASCII.
    • +
+

Este valor puede ser sobreescrito por un atributo {{ htmlattrxref("formmethod", "button") }} en un  {{ HTMLElement("button") }} o elemento {{ HTMLElement("input") }}.

+
+
+ {{ htmlattrdef("name") }}
+
+ El nombre del formulario. En HTML4 ha quedado en desuso (debe usarse un id en su lugar). Debe ser único entre los formularios en un documento y no una cadena vacia en HTML5.
+
+ {{ htmlattrdef("novalidate") }} {{ HTMLVersionInline(5) }}
+
+ Este atributo booleano indica que el formulario no es validado cuando es enviado. Si el atributo no existe {{ htmlattrxref("formnovalidate", "button") }} en un {{ HTMLElement("button") }} o en un elemento  {{ HTMLElement("input") }} que pertenece al formulario.
+
+ {{ htmlattrdef("target") }}
+
+ Un nombre o keyword indicando donde mostrar la respuesta que es recibida después de enviar el formulario. En HTML 4, este es el nombre de, o una palabra clave, para un marco. En HTML5, es un nombre de, o palabra clave para, un contexto de navegación (por ejemplo, tab, window o marco en línea). Las siguientes palabras clave tienen significados especiales: +
    +
  • _self: Carga la respuesta dentro del mismo frame HTML 4 (o en HTML5, contexto de navegación) como el marco actual. Este valor es por defecto si el atributo no es especificado.
    • +
  • _blank: Carga la respuesta dentro de una nueva ventana sin nombre en HTML 4 o un contexto de navegación en HTML5.
    • +
  • _parent: Carga la respuesta en el marco padre del marco actual en HTML 4 o en el contexto de navegación padre del marco actual en HTML5. Si no hay marco padre, esta opción se comporta de la misma manera que _self.
    • +
  • _top: HTML 4: Carga la respuesta en toda la ventana original, cancelando otros marcos.  HTML5: Carga la respuesta en el contexto de navegación de más alto nivel (esto es, el contexto de navegación que es ancestro del actual, y no tiene padre). Si no hay padre, esta opción se comporta igual que _self.
    • +
+

HTML5: Este valor puede ser sobreescrito por un atributo {{ htmlattrxref("formtarget", "button") }} en un elemento {{ HTMLElement("button") }} o{{ HTMLElement("input") }}.

+
+
+

Interfaz DOM

+

Este elemento implementa la interfaz HTMLFormElement.

+

Ejemplos

+
<!-- Formulario simple que enviará una petición GET -->
+<form action="">
+  <label for="GET-name">Nombre:</label>
+  <input id="GET-name" type="text" name="name">
+  <input type="submit" value="Save">
+</form>
+
+<!-- Formulario simple que enviará una petición POST -->
+<form action="" method="post">
+  <label for="POST-name">Nombre:</label>
+  <input id="POST-name" type="text" name="name">
+  <input type="submit" value="Save">
+</form>
+
+<!-- Formulario con conjunto de campos, leyenda y etiqueta -->
+<form action="" method="post">
+  <fieldset>
+    <legend>Título</legend>
+    <input type="radio" name="radio" id="radio"> <label for="radio">Clic aquí</label>
+  </fieldset>
+</form>
+
+

Compatibilidad de navegadores

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{ CompatGeckoDesktop("1.0") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
atributo novalidate1.0{{ CompatGeckoDesktop("2.0") }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.0") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
atributo novalidate{{ CompatUnknown() }}{{ CompatGeckoMobile("2.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+

Notas para Google Chrome

+

La interfaz de usuario para peticiones auto-complete en Google Chrome varía dependiendo de si autocomplete está establecido en off en elementos input así como su formulario. Específicamente, cuando un formulario tiene autocomplete establecido en off y sus campos autocomplete de sus elementos input no están establecidos, entonces si el usuario pregunta por sugerencias de autocompletado para el elemento input, Chrome podrá mostrar un mensaje diciendo "El autocompletado ha sido desactivado para este formulario." Por otro lado, si el formulario y el elemento input tienen autocomplete establecido como off, el navegador no mostrará este mensaje. Por esta razón, debe establecer autocomplete en off para cada input que tiene autocompletado personalizado.

+

Consulte también

+

Otros elementos que son usados para crear formularios: {{ HTMLElement("button") }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }},{{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}.

+

{{ languages( { "fr": "fr/HTML/Element/Form" } ) }}

diff --git a/files/es/web/html/element/frame/index.html b/files/es/web/html/element/frame/index.html new file mode 100644 index 0000000000..21df468c42 --- /dev/null +++ b/files/es/web/html/element/frame/index.html @@ -0,0 +1,167 @@ +--- +title: frame +slug: Web/HTML/Elemento/frame +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/frame +--- +

Definición

+ +

frame -marcos . Define la organización de los marcos dentro de la ventana del usuario.

+ +
+
Sus etiquetas son: <frame> (solo tiene una).
+
Está definido como: Elemento para marcos.
+
+ +
+
Crea una caja: .
+
Puede contener: Nada.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalor
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible por personas. Sensible a M/m.. Por defecto: Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. Por defecto: Lo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo. Por defecto: Lo fija el navegador.
Específicos
No tiene
De transición
longdesc Permite especificar un enlace a una descripción detallada del marco. Inportante para la accesibilidad.Una dirección URI. Por defecto: lo fija el navegador.
name Especifica un nombre para el marco, Esto permite usarlo como destino de los enlaces.. Por defecto: . lo fija el navegador.
src Especifica la localización de los contenidos iniciales del marco.Una dirección URI. Por defecto: lo fija el navegador.
frameborder Indica si el marco tendrá o no borde.Uno de los siguientes: '1' o '0'. Por defecto: '1'.
marginwidth Indica el margen izquierdo y derecho entre contenido y borde.Una cantidad de píxeles (cero o más). Por defecto: lo fija el navegador.
marginheight Indica el margen superior e inferior entre contenido y borde.Una cantidad de píxeles (cero o más). Por defecto: lo fija el navegador.
noresize Hace que la ventana del marco no sea redimensionable.'noresize'. Por defecto: lo fija el navegador.
scrolling Indica si el marco debe tener o no barra de desplazamiento (scroll).Uno de los sigientes: 'yes', 'no', o 'auto'. Por defecto: 'auto'.
atributodescripciónvalor
+ +

Ejemplos de uso

+ +
+

Un documento con marcos

+ +

código:

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
+  "http://www.w3.org/TR/html4/frameset.dtd">
+<html>
+<head>
+<title>Un documento simple con marcos</title>
+</head>
+<frameset rows="20%,80%">
+ <frameset cols="20%, 80%">
+   <frame src="http://developer.mozilla.org/wiki-im...irefoxlogo.png">
+   <frame src="http://html.conclase.net/w3c/html401...dtd.html#frame">
+ </frameset>
+ <frame src="http://html.conclase.net/w3c/html401...tml#edef-FRAME">
+</frameset>
+</html>
+
+
+ +

Estilo predeterminado

+ +

Notas

+ +

Referencia

+ + + +

 

+ +

Soporte

+ +

Puede consultar esta comparativa: IE 6 - IE 7 - FF 1.5 - OP 9.

+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/frameset/index.html b/files/es/web/html/element/frameset/index.html new file mode 100644 index 0000000000..cf90335bc6 --- /dev/null +++ b/files/es/web/html/element/frameset/index.html @@ -0,0 +1,157 @@ +--- +title: frameset +slug: Web/HTML/Elemento/frameset +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/frameset +--- +

Definición

+ +

frameset -conjunto de marcos . Define la organización de los marcos dentro de la ventana del usuario.

+ +
+
Sus etiquetas son: <frameset> y </frameset> (ambas obligatorias).
+
Está definido como: Elemento para marcos. +
+
Con un doctype para marcos está definido como contenido de html.
+
+
+
+ +
+
Crea una caja: .
+
Puede y debe contener: Uno o más elementos frameset y frame. además puede contener un elemento noframes.
+
Debe ser contenido por: Elementos html
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalor
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible por personas. Sensible a M/m.. Por defecto: Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. Por defecto: Lo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo. Por defecto: Lo fija el navegador.
Específicos
No tiene
De transición
rows Asigna la disposición horizontal de los marcos.Lista de longitudes separadas por coma, pueden espresarse en píxeles, porcentajes o de forma relativa. Por defecto: 100% (una fila), lo fija el navegador..
cols Asigna la disposición horizontal de los marcos.Lista de longitudes separadas por coma, pueden espresarse en píxeles, porcentajes o de forma relativa. Por defecto: 100% (una columna). lo fija el navegador.
atributodescripciónvalor
+ +

Ejemplos de uso

+ +
+

Un documento con marcos

+ +

código:

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
+  "http://www.w3.org/TR/html4/frameset.dtd">
+<html>
+<head>
+<title>Un documento simple con marcos</title>
+</head>
+<frameset rows="20%,80%">
+ <frameset cols="20%, 80%">
+   <frame src="http://developer.mozilla.org/wiki-im...irefoxlogo.png">
+   <frame src="http://html.conclase.net/w3c/html401....html#frameset">
+ </frameset>
+ <frame src="http://html.conclase.net/w3c/html401...#edef-FRAMESET">
+ <noframes>
+   <p> este documento contiene los siguientes recursos: </p>
+   <ul>
+     <li> <img src="http://developer.mozilla.org/wiki-im...irefoxlogo.png" alt="el logo de Firefox">
+     </li>
+     <li> La definición de frameset en el
+          <a href="http://html.conclase.net/w3c/html401....html#frameset">
+          dtd de html 4.01 trans.</a>
+     </li>
+     <li> La definición de frameset en la
+          <a href="http://html.conclase.net/w3c/html401...#edef-FRAMESET">
+          especificación de html 4.01</a>
+     </li>
+   </ul>
+ </noframes>
+</frameset>
+</html>
+
+
+ +

Estilo predeterminado

+ +

Notas

+ +

Referencia

+ + + +

 

+ +

Soporte

+ +

Puede consultar esta comparativa: IE 6 - IE 7 - FF 1.5 - OP 9.

+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/head/index.html b/files/es/web/html/element/head/index.html new file mode 100644 index 0000000000..e0e6e13fe1 --- /dev/null +++ b/files/es/web/html/element/head/index.html @@ -0,0 +1,147 @@ +--- +title: head +slug: Web/HTML/Elemento/head +tags: + - HTML + - 'HTML:Elemento' + - Metadatos de documento HTML + - Todas_las_Categorías +translation_of: Web/HTML/Element/head +--- +
{{HTMLRef}}
+ +

El elemento HTML <head> provee información general (metadatos) acerca del documento, incluyendo su título y enlaces a scripts y hojas de estilos.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoNinguna.
Contenido permitidoSi el elemento es un {{htmlattrxref("srcdoc", "iframe")}} de un {{HTMLElement("iframe")}} , o si la información de título está disponible desde un protocolo de nivel superior, cero o más elementos de metadatos.
+ De otro modo, uno o más elementos de metadatos donde exactamente uno es {{HTMLElement("title")}}.
Omisión de etiquetaLa etiqueta de inicio puede ser omitida si lo primero dentro del elemento head es un elemento.
+ La etiqueta de cierre puede ser omitida si lo primero después del elemento head no es un espacio o un comentario.
Elementos padre permitidosUn elemento {{HTMLElement("html")}}, pues éste es su primer hijo.
Interfaz DOM{{domxref("HTMLHeadElement")}}
+ +

Atributos

+ +

Este elemento incluye los atributos globales.

+ +
+
{{htmlattrdef("profile")}} {{obsolete_inline}}
+
Los URIs de uno o más perfiles de metadatos, separados por un espacio en blanco.
+
+ +

Ejemplo

+ +
<html>
+  <head>
+    <title>Document title</title>
+  </head>
+</html>
+
+ +

Notas

+ +

Navegadores modernos que cumplen con el estándar HTML5 construyen automáticamente un elemento <head> si las etiquetas son omitidas en el código. Este comportamiento no puede ser garantizado en navegadores antiguos.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '<head>')}}{{Spec2('HTML WHATWG')}}Sin cambios desde la última versión
{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}{{Spec2('HTML5 W3C')}}Atributo profile obsoleto
{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '<head>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Véase también

+ +
    +
  • Elementos que pueden ser usados dentro de un elemento <head>: {{HTMLElement("title")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("style")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("noscript")}}
    • +
diff --git a/files/es/web/html/element/header/index.html b/files/es/web/html/element/header/index.html new file mode 100644 index 0000000000..f4bdcd9a75 --- /dev/null +++ b/files/es/web/html/element/header/index.html @@ -0,0 +1,74 @@ +--- +title: header +slug: Web/HTML/Elemento/header +tags: + - HTML5 + - header + - para_revisar +translation_of: Web/HTML/Element/header +--- +

El elemento de HTML Header (<header>) representa un grupo de ayudas introductorias o de navegación. Puede contener algunos elementos de encabezado, así como también un logo, un formulario de búsqueda, un nombre de autor y otros componentes.

+ +
+

Nota de uso:

+ +
    +
  • El elemento <header> no es contenido de sección y, por lo tanto, no introduce una nueva sección en descripción.
    • +
+
+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
Contenido permitidoContenido dinámico, pero sin un <header> o {{ HTMLElement("footer") }} descendente
Omisión de la etiquetaNo está permitido, tanto la etiqueta de inicio como la de final son obligatorias
+

Elementos padres permitidos

+ +

Roles ARIA permitidos

+ +

Inreface DOM

+ 		+

Cualquier elemento que acepte contenido dinámico. Ten en cuenta que un elemento <header> no debe ser descendiente de un elemento {{ HTMLElement("address") }}, {{ HTMLElement("footer") }} o cualquier otro elemento {{ HTMLElement("header") }}.

+ +

{{ARIARole("group")}}, {{ARIARole("presentation")}}

+ +

{{domxref("HTMLElement")}}

+
Documento normativoHTML5, sección 4.4.8
+ +

Atributos

+ +

Este elemento no tiene otros atributos que no sean los atributos generales, comunes a todos los elementos.

+ +
+
+

Interfaz DOM

+ +

Este elemento implementa la interfaz HTMLElement.

+ +

Mira también

+ +
    +
  • Otros elementos relacionados con secciones: {{ HTMLElement("body") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("article") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("section") }}, {{ HTMLElement("address") }};
    • +
  • Sections and outlines of an HTML5 document.
    • +
+ +

{{ languages( { "en": "en/HTML/Element/header" } ) }}

+
+
diff --git a/files/es/web/html/element/heading_elements/index.html b/files/es/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..be0dd6801b --- /dev/null +++ b/files/es/web/html/element/heading_elements/index.html @@ -0,0 +1,240 @@ +--- +title: Elementos títulos +slug: Web/HTML/Elemento/Elementos_títulos +tags: + - HTML + - 'HTML:Elemento' + - Referencia + - Secciones HTML + - Todas_las_Categorías + - Web +translation_of: Web/HTML/Element/Heading_Elements +--- +

Los elementos de encabezado implementan seis niveles de encabezado del documento, <h1> es el más importante, y <h6>, el menos importante. Un elemento de encabezado describe brevemente el tema de la sección que presenta. La información de encabezado puede ser usada por los agentes usuarios, por ejemplo, para construir una tabla de contenidos para un documento automáticamente.

+ +
+

Notas de uso:

+ +
    +
  • No se deben usar niveles inferiores para reducir el tamaño de la fuente: use la propiedad CSS {{cssxref("font-size")}} para eso.
    • +
  • Evite omitir niveles de encabezado: siempre comience con <h1>, después use <h2> y así sucesivamente.
    • +
  • Con el elemento {{HTMLElement("section")}}, debe considerar evitar usar <h1> más de una vez en una página; por costumbre, se usa para mostrar el título de la página, con todos los encabezados debajo de éste comenzando con <h2>. Cuando se usan secciones, debe usarse un <h1> por sección. Véase Definiendo secciones en Secciones y esquema de un documento HTML5 para más información.
    • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoContenido dinámico, contenido de encabezados, contenido palpable.
Contenido permitidoContenido textual o estático.
Omisión de etiquetas{{no_tag_omission}}
Elementos padres permitidosCualquier elemento que acepte contenido dinámico; no debe usarse como hijo del elemento {{HTMLElement("hgroup")}}, pues éste es obsoleto
Interfaz DOM{{domxref("HTMLHeadingElement")}}
+ +

Atributos

+ +

Estos elementos incluyen los atributos globales.

+ +

El atributo align es obsoleto; no debe usarse.

+ +

Ejemplos

+ +

Todos los encabezados

+ +

El siguiente código muestra todos los niveles de encabezado.

+ +
<h1>Heading level 1</h1>
+<h2>Heading level 2</h2>
+<h3>Heading level 3</h3>
+<h4>Heading level 4</h4>
+<h5>Heading level 5</h5>
+<h6>Heading level 6</h6>
+
+ +

Aquí está el resultado de este código:

+ +

{{ EmbedLiveSample('Todos_los_encabezados', '280', '300', '') }}

+ +

Página de ejemplo

+ +

El código siguiente muestra unos pocos encabezados con algo de contenido debajo de ellos.

+ +
<h1>Heading elements</h1>
+<h2>Summary</h2>
+<p>Some text here...</p>
+
+<h2>Examples</h2>
+<h3>Example 1</h3>
+<p>Some text here...</p>
+
+<h3>Example 2</h3>
+<p>Some text here...</p>
+
+<h2>See also</h2>
+<p>Some text here...</p>
+
+ +

Aquí está el resultado de este código:

+ +

{{ EmbedLiveSample('Página_de_ejemplo', '280', '480', '') }}

+ +

Sobre Accesibilidad

+ + + +

Una forma típica de navegación que utilizan las personas no videntes es moverse a través de la pantalla con las etiquetas de encabezado. De esta forma, pueden conocer rápidamente el contenido de la página en poco tiempo; por esta razón es importante prestar mucha atención a nuestras etiquetas de encabezado y no saltearse ningún nivel o podríamos confundir a este usuario.

+ +

No hacer

+ +
<h1>Cabecera nivel 1</h1>
+<h3>Cabecera nivel 3</h3>
+<h4>Cabecera nivel 4</h4>
+
+ +

Sí hacer

+ +
<h1>Cabecera nivel 1</h1>
+<h2>Cabecera nivel 2</h2>
+<h3>Cabecera nivel 3</h3>
+
+ +

Anidar

+ +

Las etiquetas de cabecera pueden anidarse para generar sub-secciones en nuestros documentos. Esto beneficia la organización de la información y también ayuda a los usuarios de lectores de pantalla a conocer mejor la jerarquía de los contenidos.

+ +
    +
  1. h1 Harry Potter + +
      +
    1. h2 Sinopsis
      2. +
    2. h2 Novelas +
        +
      1. h3 Harry Potter y la Piedra Filosofal
        2. +
      2. h3 Harry Potter y la Cámara de los Secretos
        3. +
      3. h3 Harry Potter y el Prisionero de Azkaban
        4. +
      4. h3 Harry Potter y el Cáliz de Fuego
        5. +
      5. h3 Harry Potter y la Orden del Fenix
        6. +
      6. h3 Harry Potter y el Príncipe Mestizo
        7. +
      7. h3 Harry Potter y las Reliquias de la Muerte
        8. +
      +
      3. +
    3. h2 Películas +
        +
      1. h3 Harry Potter y la Piedra Filosofal
        2. +
      2. h3 Harry Potter y la Cámara de los Secretos
        3. +
      3. h3 Harry Potter y el Prisionero de Azkaban
        4. +
      4. h3 Harry Potter y el Cáliz de Fuego
        5. +
      5. h3 Harry Potter y la Orden del Fenix
        6. +
      6. h3 Harry Potter y el Príncipe Mestizo
        7. +
      7. h3 Harry Potter y las Reliquias de la Muerte (Parte 1)
        8. +
      8. h3 Harry Potter y las Reliquias de la Muerte (Parte 2)
        9. +
      +
      4. +
    +
    2. +
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Véase también

+ +
    +
  • {{HTMLElement("p")}}
    • +
  • {{HTMLElement("div")}}
    • +
  • {{HTMLElement("section")}}
    • +
+ +
{{HTMLRef}}
diff --git a/files/es/web/html/element/hgroup/index.html b/files/es/web/html/element/hgroup/index.html new file mode 100644 index 0000000000..18aa804ac2 --- /dev/null +++ b/files/es/web/html/element/hgroup/index.html @@ -0,0 +1,120 @@ +--- +title: hgroup +slug: Web/HTML/Elemento/hgroup +translation_of: Web/HTML/Element/hgroup +--- +

Resumen

+ +

El elemento de grupo de cabeceras HTML (<hgroup>) representa el encabezado de una sección. Define un solo título que participa de la estructura del documento como el encabezado de la sección implícita o explícita a la que pertenece.

+ +

Su texto para el algoritmo de estructura es el texto del primer elemento de encabezado HTML de más alto rango (ip.ej., el primer {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }} o {{ HTMLElement("h6") }} con el número más pequeño entre sus descendientes) y el rango es el rango del mismo elemento de encabezado HTML.

+ +

Por tanto, este elemento agrupa varios encabezados, pero solo el primero contribuye a la estructura del documento. Permite asociar títulos secundarios, como subencabezados, títulos alternativos, e incluso lemas, con el encabezado principal, sin contaminar la estructura del documento.

+ +

Este elemento se fue removido de la especificacion HTML5 (W3C), por favor no usar mas.

+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
Contenido permitidoCero o más elementos HTML de encabezado ({{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }})
Omisión de etiquetaNinguna, ambas, la etiqueta de inicio y fin son obligatorias
Elementos padre permitidos +

Cualquier elemento que acepte flujo de contenido.

+
Documento nomativoHTML5, section 4.4.7
+ +

Atributos

+ +

Este elemento no tiene más atributos que los atributos globales, común a todos los elementos.

+ +

Notas de uso

+ +
+

Si bien el elemento <hgroup> se eliminó de la especificación HTML5 (W3C), todavía se mantiene en la versión WHATWG de HTML. De todos modos, está parcialmente implementado en la mayoría de los navegadores, por lo que es improbable que desaparezca.
+ Sin embargo, dado que el propósito principal del elemento <hgroup> es afectar cómo el algoritmo de generación de esquemas de documento muestra los encabezados, pero dicho algoritmo no ha sido implementado por ningún navegador, la semántica de <hgroup> es por el momento solo teórica.
+ La especificación HTML5 (W3C) aconseja entonces cómo maquetar subtítulos, títulos alternativos y lemas sin utilizar <hgroup>.

+
+ +

Interfaz DOM

+ +

Este elemento implementa la interfaz HTMLElement.

+ +

Ejemplos

+ +
<hgroup>
+  <h1>Main title</h1>
+  <h2>Secondary title</h2>
+</hgroup>
+
+ +

Compatibilidad

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{ CompatGeckoDesktop("2.0") }}9.011.104.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico2.2{{ CompatGeckoMobile("2.0") }}9.011.05.0 (iOS 4.2)
+
+ +

Ver también

+ +
    +
  • Otros elementos relacionados a sección: {{ HTMLElement("body") }}, {{ HTMLElement("article") }}, {{ HTMLElement("section") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }};
    • +
  • Secciones y estructuras de un documento HTML5.
    • +
diff --git a/files/es/web/html/element/hr/index.html b/files/es/web/html/element/hr/index.html new file mode 100644 index 0000000000..22b569e245 --- /dev/null +++ b/files/es/web/html/element/hr/index.html @@ -0,0 +1,156 @@ +--- +title:
+slug: Web/HTML/Elemento/hr +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/hr +--- +

Definición

+ +

descripción de uno o dos párrafosEl elemento HTML <hr> representa un cambio de tema entre párrafos (por ejemplo, un cambio de escena en una historia, un cambio de tema en una sección). En versiones previas de HTML representaba una línea horizontal. Aún puede ser representada como una línea horizontal en los navegadores visuales, pero ahora es definida en términos semánticos y no tanto en términos representativos, por tanto para dibujar una línea horizontal se debería usar el CSS apropiado.

+ +
+
Sus etiquetas son: <hr/> (solo tiene una).
+
+ +
+
Crea una caja: en bloque.
+
+ +
+
Está definido como: en bloque.
+
+ +
+
Puede contener: Nada, es un "elemento vacío" del un Glosario.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoValorDescripció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
No tiene
De transición
align uno de los siguientes: "left", "center", "right".Implícito. Por defecto: "center"Indica la alineación horizontal.
noshade "noshade"ImplícitoElimina el relieve.
size Una cantidad, de píxelesImplícitoIndica la altura de la linea.
width Una cantidad, de píxeles, o un porcentaje.Implícito. por defecto: 100%Indica la anchura.
AtributoValorDescripción
+ +

Ejemplos

+ +
  <p>Este es un parrafo unicamente visual para ver el uso de
+ la etiqueta hr</p>
+  <hr/>
+  <p>Este es el segundo parrafo, separado del primero por la etiqueta hr, que puede
+representarse mediante una línea horizontal.</p>
+
+ +

Muestra

+ +

Este es un parrafo unicamente visual para ver el uso de la etiqueta hr

+ +
+

Este es el segundo parrafo, separado del primero por una linea horizontal

+ +

Comentarios

+ +

 

+ +

Referencia

+ + + +

secciones futuras: == Soporte de los navegadores == == Valores por defecto y visualización en Firefox ==

+ +
+

Este documento está siendo editado, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en la elaboración de este documento? Para saber como hacerlo consulta MDC:Como ayudar.

+
+ +

 

diff --git a/files/es/web/html/element/html/index.html b/files/es/web/html/element/html/index.html new file mode 100644 index 0000000000..48fd5f469e --- /dev/null +++ b/files/es/web/html/element/html/index.html @@ -0,0 +1,176 @@ +--- +title: +slug: Web/HTML/Elemento/html +tags: + - Element + - Elemento + - HTML + - HTML Root Element + - HTML elemento raiz + - 'HTML:Elemento' + - Reference + - Referencia + - Todas_las_Categorías + - Web +translation_of: Web/HTML/Element/html +--- +

{{HTMLRef}}

+ +

El elemento HTML <html> (o elemento HTML raiz) representa la raiz de un documento HTML. El resto de elementos descienden de este elemento.

+ +

Dado que el elemento <html> es el primero en un documento, aparte de los comentarios, se llama el elemento raíz. A pesar de que esta etiqueta puede ser implicita, o no requerida en {{glossary("HTML")}}, sí es requerida para abrir y cerrar en {{glossary("XHTML")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de ContenidoNinguna.
Contenido permitidoUn elemento {{HTMLElement("head")}} seguido de un elemento {{HTMLElement("body")}}.
Omisión de etiqueta +

La etiqueta de inicio puede omitirse si lo primero que hay en el interior del elemento <html> no es un comentario.
+ La etiqueta final puede omitirse si el elemento <html> no está inmediatamente seguido por un comentario y contiene un elemento {{HTMLElement("body")}}, o bien que no esté vacío, o cuya etiqueta de inicio está presente.

+
Elementos padres permitidosComo elemento raiz de un documento, o donde se permite un fragmento de subdocumento en un documento compuesto.
Interfaz DOM{{domxref("HTMLHtmlElement")}}
+ +

Atributos

+ +

Este elemento incluye los atributos globales.

+ +
+
{{htmlattrdef("manifest")}} {{obsolete_inline}}
+
Especifica la dirección URL de un manifiesto de recursos que indica los recursos que deben ser almacenados en la caché local. Consulte Uso de la cache de la aplicación para obtener más información.
+
{{htmlattrdef("version")}} {{obsolete_inline}}
+
Especifica la versión {{glossary("DTD", "Document Type Definition")}} de HTML del documento actual. Este atributo no es necesario, porque es redundante con la información de versión en la declaración de tipo de documento.
+
{{htmlattrdef("xmlns")}} 
+
Especifica el Espacio de nombres XML del documento. El valor por defecto es "http://www.w3.org/1999/xhtml". En XHTML es requerido y en HTML es opcional.
+
+ +

Ejemplo

+ +

El DOCTYPE usado en el siguiente ejemplo indica que es un documento HTML5.

+ +
<!DOCTYPE html>
+<html>
+  <head>...</head>
+  <body>...</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}{{Spec2('HTML WHATWG')}}Sin cambios desde la última instantánea.
{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}{{Spec2('HTML5 W3C')}}Añadido soporte para el atributo manifest (en desuso después).
+ El Atributo version es obsoleto.
{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}{{Spec2('HTML4.01')}}El Atributo version está en desuso
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
manifest{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
manifest{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ +
    +
  • MathML top-level element: {{MathMLElement("math")}}
    • +
  • SVG top-level element: {{SVGElement("svg")}}
    • +
diff --git a/files/es/web/html/element/i/index.html b/files/es/web/html/element/i/index.html new file mode 100644 index 0000000000..e3b318e367 --- /dev/null +++ b/files/es/web/html/element/i/index.html @@ -0,0 +1,112 @@ +--- +title: i +slug: Web/HTML/Elemento/i +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/i +--- +

 

+ +

Definición

+ +

Muestra el texto marcado con un estilo en cursiva o italica.

+ +
+
Sus etiquetas son: <i> y </i> (Ambas obligatorias)
+
+ +
+
Crea una caja: en linea.
+
+ +
+
Está definido como: Elemento de estilo de fuente.
+
+ +
+
Puede contener: cero o más elementos en linea
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Atributovalordescripción
Genéricos
titletextoimplícitotítulo consultivo del elemento.
stylereglas de estiloimplícitoinformación de estilo en línea.
idIDimplícitoidentificador único a nivel de documento.
classCDATAimplícitolista de clases separadas por espacios en blanco.
dir(ltr|rtl)implícitodirección del texto débil/neutral
langcódigo de idiomaimplícitoinformación sobre el idioma
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
No tiene
Atributovalordescripción
+ +

 

+ +

Ejemplos

+ +
  <p>
+       Texto normal y... <i>Texto 'inclinado'</i>
+  </p>
+
+ +

Comentarios

diff --git a/files/es/web/html/element/iframe/index.html b/files/es/web/html/element/iframe/index.html new file mode 100644 index 0000000000..23d58f54e8 --- /dev/null +++ b/files/es/web/html/element/iframe/index.html @@ -0,0 +1,304 @@ +--- +title: '